From ff5b02076a4a0ec9907452f32f3132b01aae2b95 Mon Sep 17 00:00:00 2001
From: Kunal Sharma <kunal.sharma@navi.com>
Date: Fri, 2 Feb 2024 09:45:44 +0530
Subject: [PATCH] TP-1|Kunal|added call status polling (#809)

* TP-1|Kunal|added call status polling

* TP-1|Kunal|added timeout unsub
---
 .../Ameyo/AmeyoCollapsibleToolbar.tsx         | 37 +++++++++++++++++--
 src/components/Ameyo/constants.tsx            |  2 +
 src/constants/litmusExperimentNames.ts        |  3 +-
 src/utils/polling.ts                          |  2 +-
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/Ameyo/AmeyoCollapsibleToolbar.tsx b/src/components/Ameyo/AmeyoCollapsibleToolbar.tsx
index 0d4f4ef9..693286a7 100644
--- a/src/components/Ameyo/AmeyoCollapsibleToolbar.tsx
+++ b/src/components/Ameyo/AmeyoCollapsibleToolbar.tsx
@@ -2,7 +2,7 @@
 import { AmeyoIcon } from '../../assets/icons/AmeyoIcon';
 import styles from './AmeyoCollapsibleToolbar.module.scss';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Typography } from '@primitives';
+import { Typography } from '@primitives';
 import CloseIcon from '../../assets/icons/CloseIcon';
 import { RssIcon } from '../../assets/icons/RssIcon';
 import { useDispatch, useSelector } from 'react-redux';
@@ -42,19 +42,23 @@ import {
 import { setAmeyoCallDetails } from '../../reducers/commonSlice';
 import { toast } from '@primitives/Toast';
 import { createQueryParams } from '../../utils/QueryParamsHelper';
-import { navigateToCaseDetails } from '../../utils/commonUtils';
+import { 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';
 import GridColumn from '@navi/web-ui/lib/layouts/Grid/GridColumn/GridColumn';
 import cx from 'classnames';
-import { addAmeyoAvailabilityToggleClickstream } from '../../service/ameyo.service';
 import { addClickstreamEvent } from '../../service/clickStreamEventService';
 import { AMEYO_SESSION_EVENTS, CLICKSTREAM_EVENT_NAMES } from '../../service/clickStream.constant';
 import MuteIcon from 'src/assets/icons/MuteIcon';
 import UnMuteIcon from 'src/assets/icons/UnMuteIcon';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../TooltipV2/TooltipV2';
-import { AmeyoConstants, AmeyoToggleNewStatus, AMEYO_MUTE_DISCLAIMER_INTERVAL } from './constants';
+import {
+  AMEYO_CALL_STATUS_POLLING_INTERVAL,
+  AMEYO_MUTE_DISCLAIMER_INTERVAL,
+  AmeyoConstants,
+  AmeyoToggleNewStatus
+} from './constants';
 import MicOff from 'src/assets/icons/MicOff';
 import HangUpCallIcon from 'src/assets/icons/HangUpCallIcon';
 import MuteCircledIcon from 'src/assets/icons/MuteCircledIcon';
@@ -67,6 +71,9 @@ import { LITMUS_EXPERIMENT_NAMES } from '@cp/src/constants/litmusExperimentNames
 import isLitmusExperimentEnabled from '@cp/src/utils/isLitmusExperimentEnabled';
 import { LocalStorage } from '@cp/src/utils/StorageUtils';
 import { LOCAL_STORAGE_KEYS } from '@cp/src/constants/StorageKeys';
+import { poll } from '@cp/utils/polling';
+import { noop } from '@utils/common';
+
 const BUTTON_ENABLED_TIMEOUT = 10000;
 export const BUBBLE_COLORS = {
   TRANSPARENT: 'rgba(250,250,250,0)', // default/don't know
@@ -83,6 +90,7 @@ const handleTabClose = (event: any) => {
 export const AmeyoCollapsibleToolbar = (props: {
   isCallHappening: (isHappening: boolean) => void;
 }) => {
+  const pollRef = useRef<() => void>();
   const { authData, isAmeyoErronous, ameyoExtensionToggleOn } = useSelector((state: RootState) => {
     return {
       authData: state.common.userData,
@@ -799,6 +807,27 @@ export const AmeyoCollapsibleToolbar = (props: {
     );
   }
 
+  useEffect(() => {
+    if (isFunction(pollRef.current)) {
+      pollRef.current();
+    }
+    isLitmusExperimentEnabled(LITMUS_EXPERIMENT_NAMES.COLLECTION_AMEYO_TELE_POLLING, {
+      'x-customer-id': authData?.referenceId
+    }).then(res => {
+      if (res?.result) {
+        pollRef.current = poll(
+          () => {
+            setAmeyoCallData(ExtensionHandler.currentCallStatus());
+            ExtensionHandler.getCurrentCallStatus();
+          },
+          undefined,
+          AMEYO_CALL_STATUS_POLLING_INTERVAL,
+          noop
+        );
+      }
+    });
+  }, [authData?.referenceId]);
+
   return (
     <div className={styles.container} ref={currentRef}>
       <div className={styles.sideToolbarAmeyoIconsWrapper}>
diff --git a/src/components/Ameyo/constants.tsx b/src/components/Ameyo/constants.tsx
index 9ecb3aa3..3dc37e65 100644
--- a/src/components/Ameyo/constants.tsx
+++ b/src/components/Ameyo/constants.tsx
@@ -21,3 +21,5 @@ export enum PING_PONG_CLICKSTREAM_EVENT_SOURCE {
   LONGHORN = 'LONGHORN',
   AMEYO = 'AMEYO'
 }
+
+export const AMEYO_CALL_STATUS_POLLING_INTERVAL = 2000;
diff --git a/src/constants/litmusExperimentNames.ts b/src/constants/litmusExperimentNames.ts
index f36ba4cb..5b420308 100644
--- a/src/constants/litmusExperimentNames.ts
+++ b/src/constants/litmusExperimentNames.ts
@@ -2,5 +2,6 @@ export enum LITMUS_EXPERIMENT_NAMES {
   COLLECTION_FCM_FALLBACK = 'collections-fcm-fallback',
   COLLECTION_AMEYO_FIX = 'collection-ameyo-fix',
   COLLECTION_ENABLE_PAYMENT_SUCCESS_MODAL = 'collection-enable-payment-success-modal',
-  COLLECTION_LONGHORN_THEME_ENABLE = 'collection-enable-theme'
+  COLLECTION_LONGHORN_THEME_ENABLE = 'collection-enable-theme',
+  COLLECTION_AMEYO_TELE_POLLING = 'collection-ameyo-tele-polling'
 }
diff --git a/src/utils/polling.ts b/src/utils/polling.ts
index 3321847a..8e370773 100644
--- a/src/utils/polling.ts
+++ b/src/utils/polling.ts
@@ -8,7 +8,7 @@ export enum PollStatus {
 
 export function poll(
   promiseFn: any,
-  dataFormatter: (data: any) => { data: any },
+  dataFormatter: undefined | ((data: any) => { data: any }),
   pollingInterval: number,
   callback: (status: PollStatus, data?: any) => void
 ) {