TP-82640|slashCallStatus from extension changes | varshitha (#1141)

* TP-82640|slashCallStatus from extension changes |varshitha

* TP-82640| unblocking if active slash call|varshitha

* TP-82640| unblocking route fix|varshitha

* TP-82640|countdown 10s|varshitha

* TP-82640|On Call|varshitha

* TP-82640|const enum|varshitha

src/App.tsx

@@ -27,7 +27,12 @@ import { getDeviceId } from './utils/FingerPrintJS';
 import { syncApiErrors } from './service/SyncApiErrorsService';
 import { MILLI_IN_MIN } from './utils/DateHelper';
 import { getFCMToken } from './firebase/firebase';
-import { CosmosSyncBlockStatus, setFcmToken } from './reducers/commonSlice';
+import {
+  CosmosSyncBlockStatus,
+  setFcmToken,
+  setSlashCallStatusFromExtension,
+  SlashCallStatus
+} from './reducers/commonSlice';
 import NotificationsBlockerOverlay from './NotificationBlockerOverlay';
 import { LOCAL_STORAGE_KEYS, SESSION_STORAGE_KEYS } from './constants/StorageKeys';
 import { pushToSessionStorage } from './utils/StorageUtils';
@@ -191,11 +196,18 @@ const App = () => {
     }
     if (data?.type === POST_MESSAGE_IDENTIFIER.LONGHORN_BLOCK_STATUS) {
       const blockStatus = store?.getState()?.common?.cosmosSyncBlockStatus;
-      if (blockStatus === CosmosSyncBlockStatus.BLOCKED) {
+      const slashCallStatus = store?.getState()?.common?.slashCallStatusFromExtension;
+      const isSlashCallActive = slashCallStatus === SlashCallStatus.ANSWERED;
+      if (blockStatus === CosmosSyncBlockStatus.BLOCKED && !isSlashCallActive) {
         ExtensionHandler.blockSlash();
       }
       ExtensionHandler.unblockSlash();
     }
+    if (data?.type === POST_MESSAGE_IDENTIFIER.SLASH_CALL_STATUS_MESSAGE) {
+      const response = data?.data;
+      localStorage.setItem('slashCallStatus', response.data.slashCallStatus);
+      dispatch(setSlashCallStatusFromExtension(response.data.slashCallStatus));
+    }
   };
   useEffect(() => {
     //window.removeEventListener('message', messageHandler);

src/constants/Common.constants.ts

@@ -37,6 +37,7 @@ export const LINE_BREAK = '\n';
 export const TIME_24_HOURS = 24 * 60 * 60 * 1000;
 export const WAIT_INTERVAL_BEFORE_COUNTDOWN = 60 * 1000; // 1 minute
 export const COUNTDOWN_INTERVAL_BEFORE_BLOCKING = 5 * 60; // in seconds, this is 5 minutes
+export const COUNTDOWN_INTERVAL_AFTER_SLASH_CALL_ENDED_BEFORE_BLOCKING = 10; // in seconds, this is 10 seconds
 export const WAIT_BEFORE_LONGHORN_PERMANENT_BLOCK =
   WAIT_INTERVAL_BEFORE_COUNTDOWN + COUNTDOWN_INTERVAL_BEFORE_BLOCKING * 1000; //6 minutes;
 

src/constants/Global.ts

@@ -47,7 +47,8 @@ export const POST_MESSAGE_IDENTIFIER = {
   AGENT_BREAK_STATUS: 'agentBreakStatus',
   SEND_AGENT_BREAK_STATUS: 'sendAgentBreakStatus',
   RECONFIGURE_CLIENT: 'reconfigureClient',
-  LONGHORN_BLOCK_STATUS: 'longhornBlockStatus'
+  LONGHORN_BLOCK_STATUS: 'longhornBlockStatus',
+  SLASH_CALL_STATUS_MESSAGE: 'sendMessageToLHFromSlash'
 };
 
 export const POST_MESSAGE_PARAMS = {

src/layout/DefaultLayout.tsx

@@ -22,7 +22,8 @@ import {
   setBreakTimeStarted,
   setIsCosmosSnapshotDisabled,
   setIsLonghornThemeEnabled,
-  setLastSyncTimestamp
+  setLastSyncTimestamp,
+  SlashCallStatus
 } from 'src/reducers/commonSlice';
 import { CLICKSTREAM_EVENT_NAMES, HRC_CLICKSTREAM } from 'src/service/clickStream.constant';
 import { addClickstreamEvent } from 'src/service/clickStreamEventService';
@@ -434,11 +435,20 @@ const DefaultLayout = () => {
     dispatch(refreshFirebaseTokenAndSignIn());
   }, [pathname]);
 
+  const slashCallStatus = useSelector(
+    (store: RootState) => store.common.slashCallStatusFromExtension
+  );
+  const isSlashCallActive = slashCallStatus === SlashCallStatus.ANSWERED;
+
   const routesRenderer = () => {
     if (agencyCode) {
       if (isImpersonation) {
         return <Routes>{routes}</Routes>;
-      } else if (cosmosSyncOnLonghornFeatureFlag && cosmosSyncBlockStatus === 'BLOCKED') {
+      } else if (
+        cosmosSyncOnLonghornFeatureFlag &&
+        cosmosSyncBlockStatus === CosmosSyncBlockStatus.BLOCKED &&
+        !isSlashCallActive
+      ) {
         return <LonghornBlock />;
       } else if (!isAgentOnline) {
         return <BreakTime />;

src/pages/LonghornBlock/DraggableWarning.tsx

@@ -4,9 +4,10 @@ import { DragFormatTimeForLhBlocking } from './utils';
 
 interface DraggableWarningProps {
   timeLeft: number;
+  inCall?: boolean;
 }
 
-const DraggableWarning = ({ timeLeft }: DraggableWarningProps) => {
+const DraggableWarning = ({ timeLeft, inCall = false }: DraggableWarningProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const headerRef = useRef<HTMLDivElement>(null);
 
@@ -71,14 +72,22 @@ const DraggableWarning = ({ timeLeft }: DraggableWarningProps) => {
       ref={containerRef}
       className="!z-[var(--z-index-block-longhorn-warning)] w-18 absolute bg-[var(--navi-color-red-base)] text-white p-2 rounded-lg shadow-lg cursor-move"
     >
-      <Typography variant="h4" color="var(--navi-color-gray-bg-primary)">
-        Blocking in
-      </Typography>
-      <div className="bg-[--navi-color-red-bg] p-1 rounded-lg mt-1 flex items-center justify-center">
-        <Typography variant="h2" color="var(--navi-color-red-base)">
-          {DragFormatTimeForLhBlocking(timeLeft)}
+      {inCall ? (
+        <Typography variant="h4" color="var(--navi-color-gray-bg-primary)">
+          On Call
         </Typography>
-      </div>
+      ) : (
+        <>
+          <Typography variant="h4" color="var(--navi-color-gray-bg-primary)">
+            Blocking in
+          </Typography>
+          <div className="bg-[--navi-color-red-bg] p-1 rounded-lg mt-1 flex items-center justify-center">
+            <Typography variant="h2" color="var(--navi-color-red-base)">
+              {DragFormatTimeForLhBlocking(timeLeft)}
+            </Typography>
+          </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/LonghornBlock/LonghornWarning.tsx

@@ -2,41 +2,48 @@ import { useEffect, useRef, useState } from 'react';
 import ModalWarning from './ModalWarning';
 import DraggableWarning from './DraggableWarning';
 import Overlay from '@cp/src/components/Overlay/Overlay';
-import { logOut } from '../auth/AuthActions';
 import { Countdown } from '@cp/src/components/Countdown/Countdown';
 import {
   COSMOS_SYNC_WAITING_FOR_CALL_BEFORE_BLOCKING,
+  COUNTDOWN_INTERVAL_AFTER_SLASH_CALL_ENDED_BEFORE_BLOCKING,
   COUNTDOWN_INTERVAL_BEFORE_BLOCKING
 } from '@cp/src/constants/Common.constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { CosmosSyncBlockStatus, setCosmosSyncBlockStatus } from '@cp/reducers/commonSlice';
+import {
+  CosmosSyncBlockStatus,
+  setCosmosSyncBlockStatus,
+  SlashCallStatus
+} from '@cp/reducers/commonSlice';
 import { CALL_BRIDGE_STATUSES } from '@cp/pages/CaseDetails/feedbackForm/interfaces/index.type';
 import { RootState } from '@cp/src/store';
 import { ExtensionHandler } from '@cp/utils/extension.utils';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService';
 import { AgentTrackingEvents } from '@cp/src/service/clickStream.constant';
+import { LocalStorage } from '@cp/src/utils/StorageUtils';
 
 const LonghornWarning = () => {
   const [isDraggableWarningVisible, setIsDraggableWarningVisible] = useState(false);
+  const [timerResetAfterCall, setTimerResetAfterCall] = useState(false);
   const lastSyncTimeStamp = useSelector((state: RootState) => state.common.lastSyncTimestamp);
   const timeRemaining = Date.now() - lastSyncTimeStamp;
   const timeRemainingInSeconds = Number((timeRemaining / 1000).toFixed(0));
   const initialRemainingTime = COUNTDOWN_INTERVAL_BEFORE_BLOCKING - timeRemainingInSeconds;
   const [localTimeLeft, setLocalTimeLeft] = useState(initialRemainingTime);
-  const handleOnClose = () => {
-    addClickstreamEvent(AgentTrackingEvents.LH_COSMOS_SYNC_WARNING_CTA_BUTTON_CLICKED);
-    setIsDraggableWarningVisible(true);
-  };
   const dispatch = useDispatch();
-  const slashCallStatus = useSelector((store: RootState) => store.common.slashCallStatus);
+  const location = useLocation();
   const ameyoCallData = useSelector((store: RootState) => store.ameyoSlice.ameyoCallData);
+  const isSlashCallActive =
+    useSelector((store: RootState) => store.common.slashCallStatusFromExtension) ===
+    SlashCallStatus.ANSWERED;
   const isCallOnGoing =
     Boolean(ameyoCallData.ringingAt || ameyoCallData.acceptedAt) &&
     !ameyoCallData.disconnectedAt &&
-    slashCallStatus === CALL_BRIDGE_STATUSES.INITIATED;
+    isSlashCallActive;
+
   const timer = useRef<NodeJS.Timeout | null>(null);
   const navigate = useNavigate();
+
   const handleOnComplete = () => {
     if (isCallOnGoing) {
       timer.current = setTimeout(() => {
@@ -44,13 +51,26 @@ const LonghornWarning = () => {
       }, COSMOS_SYNC_WAITING_FOR_CALL_BEFORE_BLOCKING);
       return;
     }
-    navigate('/');
-    dispatch(setCosmosSyncBlockStatus(CosmosSyncBlockStatus.BLOCKED));
-    ExtensionHandler.setAvailability(false);
-    ExtensionHandler.blockSlash();
-    setIsDraggableWarningVisible(false);
+    if (localTimeLeft === 0 && isSlashCallActive) {
+      setTimerResetAfterCall(true);
+      return;
+    }
+
+    if (!isSlashCallActive && localTimeLeft === 0) {
+      LocalStorage.setItem('lastRouteBeforeOffline', location.pathname);
+      navigate('/');
+      dispatch(setCosmosSyncBlockStatus(CosmosSyncBlockStatus.BLOCKED));
+      ExtensionHandler.setAvailability(false);
+      ExtensionHandler.blockSlash();
+    }
   };
 
+  useEffect(() => {
+    if (!isSlashCallActive && timerResetAfterCall) {
+      setLocalTimeLeft(COUNTDOWN_INTERVAL_AFTER_SLASH_CALL_ENDED_BEFORE_BLOCKING);
+    }
+  }, [isSlashCallActive]);
+
   useEffect(() => {
     addClickstreamEvent(AgentTrackingEvents.LH_COSMOS_SYNC_WARNING_MODAL_LOADED);
   }, []);
@@ -58,14 +78,24 @@ const LonghornWarning = () => {
   return (
     <>
       {isDraggableWarningVisible ? (
-        <DraggableWarning timeLeft={localTimeLeft} />
+        localTimeLeft > 0 ? (
+          <DraggableWarning timeLeft={localTimeLeft} />
+        ) : isSlashCallActive ? (
+          <DraggableWarning timeLeft={localTimeLeft} inCall />
+        ) : (
+          <DraggableWarning timeLeft={localTimeLeft} />
+        )
       ) : (
         <Overlay visible={!isDraggableWarningVisible}>
-          <ModalWarning handleOnClose={handleOnClose} timeLeft={localTimeLeft} />
+          <ModalWarning
+            handleOnClose={() => setIsDraggableWarningVisible(true)}
+            timeLeft={localTimeLeft}
+          />
         </Overlay>
       )}
       <Countdown
-        startFrom={initialRemainingTime}
+        key={localTimeLeft}
+        startFrom={localTimeLeft}
         stopAt={0}
         interval={1000}
         decrementBy={1}

src/reducers/commonSlice.ts

@@ -43,6 +43,13 @@ export enum CosmosSyncBlockStatus {
   BLOCKED = 'BLOCKED'
 }
 
+export enum SlashCallStatus {
+  CONNECTING = 'Connecting...',
+  RINGING = 'Ringing...',
+  ANSWERED = 'Answered',
+  ENDED = 'Ended'
+}
+
 export interface ToastData {
   message: string;
   severity: ToastSeverity;
@@ -308,6 +315,7 @@ export interface CommonState {
   cosmosSyncBlockStatus: CosmosSyncBlockStatus;
   lastSyncTimestamp: number;
   isCosmosSnapshotDisabled: boolean;
+  slashCallStatusFromExtension: SlashCallStatus;
   agentBusinessVertical: string;
 }
 
@@ -317,6 +325,7 @@ export enum CHECK_LOGIN_STATUS {
   FALSE = 'FALSE'
 }
 
+const slashCallStatusFromLocalStorage = localStorage.getItem('slashCallStatus');
 const initialState = {
   userData: {
     isLoggedIn: true,
@@ -372,6 +381,7 @@ const initialState = {
   cosmosSyncBlockStatus: CosmosSyncBlockStatus.SYNCED,
   lastSyncTimestamp: 0,
   isCosmosSnapshotDisabled: true,
+  slashCallStatusFromExtension: slashCallStatusFromLocalStorage,
   agentBusinessVertical: ''
 } as CommonState;
 
@@ -563,6 +573,9 @@ export const commonSlice = createSlice({
     setIsCosmosSnapshotDisabled(state, action) {
       state.isCosmosSnapshotDisabled = action.payload;
     },
+    setSlashCallStatusFromExtension(state, action) {
+      state.slashCallStatusFromExtension = action.payload;
+    },
     setAgentBusinessVertical(state, action) {
       state.agentBusinessVertical = action.payload;
     }
@@ -609,6 +622,7 @@ export const {
   setCosmosSyncBlockStatus,
   setLastSyncTimestamp,
   setIsCosmosSnapshotDisabled,
+  setSlashCallStatusFromExtension,
   setAgentBusinessVertical
 } = commonSlice.actions;