From d61ae3c6be00e5c3d9f8a489b225ee86bd292aec Mon Sep 17 00:00:00 2001 From: Kunal Sharma Date: Wed, 3 Apr 2024 13:33:29 +0530 Subject: [PATCH] TP-111|Kunal|Show ameyo call count redeploy (#915) * TP-57489|Kunal|show ameyo calls completed count on AmeyoCollapsibleToolbarV2.tsx * TP-57589|Kunal|added polling * TP-56242|Kunal|styling changes * TP-111|Kunal|redeploy show ameyo call count * TP-111|Kunal|redeploy show ameyo call count * TP-111|Kunal|redeploy show ameyo call count * TP-111|Kunal|redeploy show ameyo call count * TP-111|Kunal|redeploy show ameyo call count * TP-111|Kunal|redeploy show ameyo call count --- src/assets/styles/variables.scss | 1 + .../Ameyo/AmeyoCollapsibleToolbar.module.scss | 7 ++ .../Ameyo/AmeyoCollapsibleToolbarV2.tsx | 100 ++++++++++++++---- src/components/Ameyo/constants.tsx | 1 + src/components/Ameyo/interfaces.tsx | 5 + src/constants/litmusExperimentNames.ts | 1 + src/pages/Dashboard/Dashboard.tsx | 2 +- src/pages/auth/AuthActions.ts | 10 +- web-ui-library | 2 +- 9 files changed, 101 insertions(+), 28 deletions(-) diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index de44aae9..5040b3a6 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -98,6 +98,7 @@ --navi-table-gradient-orange: linear-gradient(98deg, #fff7ec 0%, #ffffff 100%); --navi-table-gradient-violet: linear-gradient(98deg, #eff0ff 0%, #ffffff 100%); --navi-row-color: #f8fbff; + --pop-up-highlight: #fee5c4; --geolocation-stepper-ellipse-color: #67acfe; // black base order diff --git a/src/components/Ameyo/AmeyoCollapsibleToolbar.module.scss b/src/components/Ameyo/AmeyoCollapsibleToolbar.module.scss index 0b72c0f1..2caac028 100644 --- a/src/components/Ameyo/AmeyoCollapsibleToolbar.module.scss +++ b/src/components/Ameyo/AmeyoCollapsibleToolbar.module.scss @@ -548,3 +548,10 @@ .displayNone { display: none !important; } + +.ameyoSuccessfullCallCountContainer { + margin-top: 28px; + padding: 8px !important; + border-radius: 4px; + background: var(--pop-up-highlight); +} diff --git a/src/components/Ameyo/AmeyoCollapsibleToolbarV2.tsx b/src/components/Ameyo/AmeyoCollapsibleToolbarV2.tsx index db7e8d36..bda2b450 100644 --- a/src/components/Ameyo/AmeyoCollapsibleToolbarV2.tsx +++ b/src/components/Ameyo/AmeyoCollapsibleToolbarV2.tsx @@ -44,7 +44,7 @@ import { import { setAmeyoCallDetails } from '@cp/reducers/commonSlice'; import { toast } from '@primitives/Toast'; import { createQueryParams } from '@cp/utils/QueryParamsHelper'; -import { handleTabClose, navigateToCaseDetails } from '@cp/utils/commonUtils'; +import { handleTabClose, isFunction, navigateToCaseDetails } from '@cp/utils/commonUtils'; import APP_ROUTES from '../../layout/Routes'; import { useNavigate } from 'react-router-dom'; import GridRow from '@navi/web-ui/lib/layouts/Grid/GridRow/GridRow'; @@ -56,6 +56,7 @@ import MuteIcon from 'src/assets/icons/MuteIcon'; import UnMuteIcon from 'src/assets/icons/UnMuteIcon'; import { Tooltip, TooltipContent, TooltipTrigger } from '../TooltipV2/TooltipV2'; import { + AMEYO_CALL_COUNT_POLLING_INTERVAL, AMEYO_MUTE_DISCLAIMER_INTERVAL, AmeyoCallState, AmeyoConstants, @@ -91,6 +92,11 @@ import { setToolbarAuthState } from '@cp/reducers/ameyoSlice'; import { BUBBLE_COLORS, BUTTON_ENABLED_TIMEOUT } from '@cp/constants/ameyoConstants'; +import KeyValueLabel from '@primitives/KeyValueLabel'; +import { getCallBridgeData } from '@cp/pages/auth/AuthActions'; +import usePolling from '@cp/hooks/usePolling'; +import { poll } from '@cp/utils/polling'; +import { noop } from '@utils/common'; type IInteractionData = { interactionId: string; @@ -101,13 +107,17 @@ type IInteractionData = { export const AmeyoCollapsibleToolbarV2 = (props: { isCallHappening: (isHappening: boolean) => void; }) => { - const { authData, ameyoExtensionToggleOn, campaignId } = useSelector((state: RootState) => { - return { - authData: state.common.userData, - ameyoExtensionToggleOn: state.humanReminder?.ameyoExtensionToggleOn, - campaignId: state?.common?.userData?.campaignId - }; - }); + const { authData, ameyoExtensionToggleOn, campaignId, ameyoConnectedCallCount } = useSelector( + (state: RootState) => { + return { + authData: state.common.userData, + ameyoExtensionToggleOn: state.humanReminder?.ameyoExtensionToggleOn, + campaignId: state?.common?.userData?.campaignId, + ameyoConnectedCallCount: + state?.leaderboard?.callbridgeData?.successfulAmeyoAttemptedCount ?? '--' + }; + } + ); const { isAmeyoErronous, ameyoCallData, @@ -124,6 +134,7 @@ export const AmeyoCollapsibleToolbarV2 = (props: { currentAmeyoState, isAvailable: isAmeyoAvailable } = useSelector((state: RootState) => state?.ameyoSlice); + const ameyoCallsCountIntervalRef = useRef<() => void>(); const ameyoCurrentCallDetails = useSelector( (state: RootState) => state?.common?.ameyoCallDetails @@ -137,6 +148,7 @@ export const AmeyoCollapsibleToolbarV2 = (props: { const timerId = useRef(); const [interactionData, setInteractionData] = useState(null); const [acceptButtonClicked, setAcceptButtonClicked] = useState(false); + const [callCountEnabled, setCallCountEnabled] = useState(false); // --------------- ***** --------------------- // there is a third state called authError, in which the user @@ -952,6 +964,35 @@ export const AmeyoCollapsibleToolbarV2 = (props: { } }, [acceptButtonClicked, interactionData]); + useEffect(() => { + isLitmusExperimentEnabled(LITMUS_EXPERIMENT_NAMES.COLLECTION_AMEYO_CALL_COUNT_POLLING, { + 'x-customer-id': authData?.referenceId + }).then(res => { + if (res?.result) { + setCallCountEnabled(true); + if (isVisible) { + ameyoCallsCountIntervalRef.current = poll( + () => { + dispatch( + getCallBridgeData({ includeAmeyoCallCount: true, includeCallBridgeCount: false }) + ); + }, + undefined, + AMEYO_CALL_COUNT_POLLING_INTERVAL, + noop + ); + } else { + isFunction(ameyoCallsCountIntervalRef.current) && ameyoCallsCountIntervalRef.current(); + } + } else { + setCallCountEnabled(false); + } + }); + return () => { + isFunction(ameyoCallsCountIntervalRef.current) && ameyoCallsCountIntervalRef.current(); + }; + }, [isVisible]); + return (
@@ -1254,22 +1295,35 @@ export const AmeyoCollapsibleToolbarV2 = (props: {
) : ( - - {isAmeyoAvailable ? ( - - Please wait while we connect you with a customer... - - ) : ( - - Please Mark yourself as Available using the toggle above to start - receiving calls - +
+ {callCountEnabled && ( + )} - + + {isAmeyoAvailable ? ( + + Please wait while we connect you with a customer... + + ) : ( + + Please Mark yourself as Available using the toggle above to start + receiving calls + + )} + +
)} {currentAmeyoState === AmeyoCallState.TALKING && diff --git a/src/components/Ameyo/constants.tsx b/src/components/Ameyo/constants.tsx index d61fff08..48d22c2e 100644 --- a/src/components/Ameyo/constants.tsx +++ b/src/components/Ameyo/constants.tsx @@ -29,3 +29,4 @@ export enum AmeyoCallState { } export const AMEYO_CALL_STATUS_POLLING_INTERVAL = 2000; +export const AMEYO_CALL_COUNT_POLLING_INTERVAL = 60000; // 1 minute diff --git a/src/components/Ameyo/interfaces.tsx b/src/components/Ameyo/interfaces.tsx index 6b4b1783..b5b1c18a 100644 --- a/src/components/Ameyo/interfaces.tsx +++ b/src/components/Ameyo/interfaces.tsx @@ -116,3 +116,8 @@ export interface IConnectedCustomer { customerId: string; customerName: string; } + +export interface GetAgentCallAttemptedCountRequestParams { + includeCallBridgeCount?: boolean; + includeAmeyoCallCount?: boolean; +} diff --git a/src/constants/litmusExperimentNames.ts b/src/constants/litmusExperimentNames.ts index f66e3728..58b06f9f 100644 --- a/src/constants/litmusExperimentNames.ts +++ b/src/constants/litmusExperimentNames.ts @@ -5,6 +5,7 @@ export enum LITMUS_EXPERIMENT_NAMES { COLLECTION_LONGHORN_THEME_ENABLE = 'collection-enable-theme', COLLECTION_AMEYO_TELE_POLLING = 'collection-ameyo-tele-polling', COLLECTION_AMEYO_TELE_V2 = 'collection-ameyo-tele-v2', + COLLECTION_AMEYO_CALL_COUNT_POLLING = 'collection-ameyo-call-count-polling', COLLECTION_AMEYO_TELE_V3 = 'collection-ameyo-tele-v3', HRC_RECALIBRATE_ENABLE = 'hrc-recalibrate-enable' } diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx index e3b77255..314841cb 100644 --- a/src/pages/Dashboard/Dashboard.tsx +++ b/src/pages/Dashboard/Dashboard.tsx @@ -77,7 +77,7 @@ const DashBoard = () => { useEffect(() => { dispatch(getPromiseCount()); - dispatch(getCallBridgeData()); + dispatch(getCallBridgeData({ includeCallBridgeCount: true, includeAmeyoCallCount: true })); addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.LH_Dashboard_PageLand, {}); }, []); diff --git a/src/pages/auth/AuthActions.ts b/src/pages/auth/AuthActions.ts index cf40223d..26007ec5 100644 --- a/src/pages/auth/AuthActions.ts +++ b/src/pages/auth/AuthActions.ts @@ -37,10 +37,11 @@ import { removeAmeyoState } from '../../service/ameyo.service'; import { PERFORMANCE_CHART_TYPE } from 'src/components/leaderboard/leaderboardConstant'; import { toast } from '@navi/web-ui/lib/primitives/Toast'; import { LocalStorage, pushToLocalStorage } from 'src/utils/StorageUtils'; -import { firebaseAuth, getFirebaseRefreshToken } from '../../firebase/firebase'; +import { firebaseAuth } from '../../firebase/firebase'; import { LOCAL_STORAGE_KEYS } from '../../constants/StorageKeys'; import { setLonghornSessionVerifier } from '@cp/src/constants/Global'; import { noop } from '@utils/common'; +import { GetAgentCallAttemptedCountRequestParams } from '@cp/components/Ameyo/interfaces'; export const LONGHORN_SESSION_TOKEN = 'LONGHORN_SESSION_TOKEN'; export const WA_EXTENSION_ID = 'WA_EXTENSION_ID'; @@ -435,11 +436,14 @@ export const getPromiseCount = () => { }; }; -export const getCallBridgeData = () => { +export const getCallBridgeData = (params: GetAgentCallAttemptedCountRequestParams) => { const url = getApiUrl(ApiKeys.DASHBOARD_CALLBRIDGE_DATA); return async function (dispatch: (arg0: { payload: any; type: string }) => void) { await axiosInstance - .get(url, { headers: { donotHandleError: true } }) + .get(url, { + headers: { donotHandleError: true }, + params + }) .then(response => { dispatch(setCallbridgeData(response?.data)); }) diff --git a/web-ui-library b/web-ui-library index 8cd81892..5ce39042 160000 --- a/web-ui-library +++ b/web-ui-library @@ -1 +1 @@ -Subproject commit 8cd8189267c6c12a70e6339ca74680f1c30b536f +Subproject commit 5ce390425b1b9f85bf563f78add92674042dd799