From 1e6d2391d7db4826fd31b4a1a5be83dbf01c48ed Mon Sep 17 00:00:00 2001 From: Podili Varshitha Date: Wed, 16 Oct 2024 17:49:00 +0530 Subject: [PATCH] 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 | 16 ++++- src/constants/Common.constants.ts | 1 + src/constants/Global.ts | 3 +- src/layout/DefaultLayout.tsx | 14 ++++- src/pages/LonghornBlock/DraggableWarning.tsx | 25 +++++--- src/pages/LonghornBlock/LonghornWarning.tsx | 64 ++++++++++++++------ src/reducers/commonSlice.ts | 14 +++++ 7 files changed, 107 insertions(+), 30 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1b7fa142..6eafeee4 100644 --- a/src/App.tsx +++ b/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); diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts index 404e4448..73e1f70d 100644 --- a/src/constants/Common.constants.ts +++ b/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; diff --git a/src/constants/Global.ts b/src/constants/Global.ts index a1ccc9a8..ae695c3b 100644 --- a/src/constants/Global.ts +++ b/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 = { diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index faf453b6..10791939 100644 --- a/src/layout/DefaultLayout.tsx +++ b/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}; - } else if (cosmosSyncOnLonghornFeatureFlag && cosmosSyncBlockStatus === 'BLOCKED') { + } else if ( + cosmosSyncOnLonghornFeatureFlag && + cosmosSyncBlockStatus === CosmosSyncBlockStatus.BLOCKED && + !isSlashCallActive + ) { return ; } else if (!isAgentOnline) { return ; diff --git a/src/pages/LonghornBlock/DraggableWarning.tsx b/src/pages/LonghornBlock/DraggableWarning.tsx index 09ec6aa3..5d70e306 100644 --- a/src/pages/LonghornBlock/DraggableWarning.tsx +++ b/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(null); const headerRef = useRef(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" > - - Blocking in - -
- - {DragFormatTimeForLhBlocking(timeLeft)} + {inCall ? ( + + On Call -
+ ) : ( + <> + + Blocking in + +
+ + {DragFormatTimeForLhBlocking(timeLeft)} + +
+ + )} ); }; diff --git a/src/pages/LonghornBlock/LonghornWarning.tsx b/src/pages/LonghornBlock/LonghornWarning.tsx index b146bbb5..a2e2dde9 100644 --- a/src/pages/LonghornBlock/LonghornWarning.tsx +++ b/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(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 ? ( - + localTimeLeft > 0 ? ( + + ) : isSlashCallActive ? ( + + ) : ( + + ) ) : ( - + setIsDraggableWarningVisible(true)} + timeLeft={localTimeLeft} + /> )}