diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index bb95daf7..29fedb57 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -96,6 +96,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; // black base order --black-base: #1a1a1a; 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 5bab57d3..f7eb0394 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 @@ -936,6 +947,24 @@ export const AmeyoCollapsibleToolbarV2 = (props: { } }, [acceptButtonClicked, interactionData]); + useEffect(() => { + if (isVisible) { + ameyoCallsCountIntervalRef.current = poll( + () => { + dispatch(getCallBridgeData()); + }, + undefined, + AMEYO_CALL_COUNT_POLLING_INTERVAL, + noop + ); + } else { + isFunction(ameyoCallsCountIntervalRef.current) && ameyoCallsCountIntervalRef.current(); + } + return () => { + isFunction(ameyoCallsCountIntervalRef.current) && ameyoCallsCountIntervalRef.current(); + }; + }, [isVisible]); + return (