TP-57589|Kunal|show call attempt count (#882)

* TP-57489|Kunal|show ameyo calls completed count on AmeyoCollapsibleToolbarV2.tsx

* TP-57589|Kunal|added polling

* TP-56242|Kunal|styling changes

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;

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);
+}

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 (
     <div className={styles.container} ref={currentRef}>
       <div className={styles.sideToolbarAmeyoIconsWrapper}>
@@ -1238,22 +1267,33 @@ export const AmeyoCollapsibleToolbarV2 = (props: {
                       </div>
                     </div>
                   ) : (
-                    <Typography
-                      variant="h6"
-                      color={'var(--grayscale-2)'}
-                      className={cx(styles.waitReady, styles.textAlignJustify)}
-                    >
-                      {isAmeyoAvailable ? (
-                        <span className={styles.activeText}>
-                          Please wait while we connect you with a customer...
-                        </span>
-                      ) : (
-                        <span className={styles.activeText}>
-                          Please <b>Mark yourself as Available</b> using the toggle above to start
-                          receiving calls
-                        </span>
-                      )}
-                    </Typography>
+                    <div className={styles.contentContainer}>
+                      <KeyValueLabel
+                        className={styles.ameyoSuccessfullCallCountContainer}
+                        dataArray={[
+                          {
+                            key: 'Ameyo calls attempted today',
+                            value: `${ameyoConnectedCallCount}`
+                          }
+                        ]}
+                      />
+                      <Typography
+                        variant="h6"
+                        color={'var(--grayscale-2)'}
+                        className={cx(styles.waitReady, styles.textAlignJustify)}
+                      >
+                        {isAmeyoAvailable ? (
+                          <span className={styles.activeText}>
+                            Please wait while we connect you with a customer...
+                          </span>
+                        ) : (
+                          <span className={styles.activeText}>
+                            Please <b>Mark yourself as Available</b> using the toggle above to start
+                            receiving calls
+                          </span>
+                        )}
+                      </Typography>
+                    </div>
                   )}
                 </div>
                 {currentAmeyoState === AmeyoCallState.TALKING &&

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 = 5000;