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
2024-04-03 13:33:29 +05:30
parent 645ab123be
commit d61ae3c6be
9 changed files with 101 additions and 28 deletions
--- 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
--- 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);
+}
--- 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<NodeJS.Timeout>();
  const [interactionData, setInteractionData] = useState<IInteractionData | null>(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 (
    <div className={styles.container} ref={currentRef}>
      <div className={styles.sideToolbarAmeyoIconsWrapper}>
@@ -1254,22 +1295,35 @@ 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>
+                    <div className={styles.contentContainer}>
+                      {callCountEnabled && (
+                        <KeyValueLabel
+                          className={styles.ameyoSuccessfullCallCountContainer}
+                          dataArray={[
+                            {
+                              key: 'Ameyo calls attempted today',
+                              value: `${ameyoConnectedCallCount}`
+                            }
+                          ]}
+                        />
                      )}
-                    </Typography>
+                      <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 &&
--- 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
--- 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;
+}
--- 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'
 }
--- 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, {});
  }, []);

--- 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));
      })
--- a/2
+++ b/2