Tp-85734/escalation visility (#1155)

* TP-85734 | escalation Visibilty

* TP-85734 | escalation Visibilty

* TP-85734 | escalation Visibilty

* TP-85734 | escalation info navigation changes

* TP-85734 | escalation info navigation changes

* TP-85734 | escalation info navigation changes

* TP-85734  | escalation visibility completed

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | escalation visibility

* TP-85734 | changed color for amber

* TP-85734 | changed color for amber

---------

Co-authored-by: Ashish Deo <ashish.deo@navi.com>
Co-authored-by: varnit goyal <github.cicd@navi.com>

src/assets/styles/variables.scss

@@ -65,6 +65,7 @@
   --green-light-2: #78bf82;
   --green-malenzane: #effbf3;
   --yellow-base: #ecbc00;
+  --yellow-medium: #fff6d4;
   --yellow-dark: #ca8500;
   --pale-yellow: #fffae8;
   --yellow-light: #fff6eb;

src/constants/Global.ts

@@ -16,7 +16,8 @@ export const GLOBAL = {
   CUSTOMER_ID: '',
   SCREEN_WIDTH: 0,
   INNER_WIDTH: window?.innerWidth,
-  LONGHORN_SESSION_IDENTIFIER: ''
+  LONGHORN_SESSION_IDENTIFIER: '',
+  AGENT_BUSINESS_VERTICAL: ''
 };
 
 export const setScreenResolution = (width: number) => {

src/pages/CaseDetails/components/CustomerSummary/EscalationInfo.tsx

@@ -68,7 +68,11 @@ function EscalationInfo({
 
   return (
     <div className="max-w-max">
-      <Popper placement="right" transform={false} crossAxisOffset={110}>
+      <Popper
+        placement="right"
+        transform={false}
+        crossAxisOffset={escalations?.length < ESCALATION_ITEMS_LIMIT ? 50 : 110}
+      >
         <PopperTrigger asChild={true} ref={escalationPopperContext}>
           <div
             className={cx('p-2 px-[7px] hover:bg-[var(--red-crisis)]', styles.escalationButton, {

src/pages/CaseDetails/components/CustomerSummary/index.tsx

@@ -88,7 +88,7 @@ const CustomerSummary = () => {
         className={cx(styles.customerDetailContainer, {
           [styles.containerWithAgentName]: !!assignedFieldAgent,
           '!bg-[--pale-red]': isRiskSegmentationVisible && riskSegment === RiskRating.HIGH_RISK,
-          '!bg-[--orange-oldlase]':
+          '!bg-[--yellow-medium]':
             isRiskSegmentationVisible && riskSegment === RiskRating.MEDIUM_RISK,
           '!bg-[--green-light]': isRiskSegmentationVisible && riskSegment === RiskRating.LOW_RISK
         })}

src/pages/auth/AuthActions.ts

@@ -2,6 +2,7 @@ import { Dispatch } from '@reduxjs/toolkit';
 import {
   CHECK_LOGIN,
   CHECK_LOGIN_STATUS,
+  setAgentBusinessVertical,
   setAuthData,
   setCaptchaVerified,
   setCaptchaVisibility,
@@ -40,7 +41,7 @@ import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { LocalStorage, pushToLocalStorage } from 'src/utils/StorageUtils';
 import { firebaseAuth } from '../../firebase/firebase';
 import { LOCAL_STORAGE_KEYS } from '../../constants/StorageKeys';
-import { setLonghornSessionVerifier } from '@cp/src/constants/Global';
+import { GLOBAL, setLonghornSessionVerifier } from '@cp/src/constants/Global';
 import { noop } from '@utils/common';
 import { GetAgentCallAttemptedCountRequestParams } from '@cp/components/Ameyo/interfaces';
 
@@ -255,6 +256,9 @@ export const verifyUserSession = () => {
     await axiosInstance
       .get(url, { headers: { donotHandleError: true } })
       .then(response => {
+        const agentBusinessVertical = response?.data?.businessVerticals?.[0] || '';
+        GLOBAL.AGENT_BUSINESS_VERTICAL = agentBusinessVertical;
+        dispatch(setAgentBusinessVertical(agentBusinessVertical));
         dispatch(setAuthData(response?.data));
         if (response?.data) {
           setMsClarityData({
@@ -291,6 +295,7 @@ export const verifyOTP = (
             LOCAL_STORAGE_KEYS.LONGHORN_SESSION_IDENTIFIER,
             btoa(response?.data?.accessTokenIdentifier)
           );
+
           setLonghornSessionVerifier(response?.data?.accessTokenIdentifier);
           dispatch(
             setAuthData({

src/reducers/commonSlice.ts

@@ -308,6 +308,7 @@ export interface CommonState {
   cosmosSyncBlockStatus: CosmosSyncBlockStatus;
   lastSyncTimestamp: number;
   isCosmosSnapshotDisabled: boolean;
+  agentBusinessVertical: string;
 }
 
 export const CHECK_LOGIN = 'CHECK_LOGIN';
@@ -370,7 +371,8 @@ const initialState = {
   breakTimeStarted: '',
   cosmosSyncBlockStatus: CosmosSyncBlockStatus.SYNCED,
   lastSyncTimestamp: 0,
-  isCosmosSnapshotDisabled: true
+  isCosmosSnapshotDisabled: true,
+  agentBusinessVertical: ''
 } as CommonState;
 
 setGlobalUserData({ token: initialState.userData.token });
@@ -560,6 +562,9 @@ export const commonSlice = createSlice({
     },
     setIsCosmosSnapshotDisabled(state, action) {
       state.isCosmosSnapshotDisabled = action.payload;
+    },
+    setAgentBusinessVertical(state, action) {
+      state.agentBusinessVertical = action.payload;
     }
   }
 });
@@ -603,7 +608,8 @@ export const {
   setBreakTimeStarted,
   setCosmosSyncBlockStatus,
   setLastSyncTimestamp,
-  setIsCosmosSnapshotDisabled
+  setIsCosmosSnapshotDisabled,
+  setAgentBusinessVertical
 } = commonSlice.actions;
 
 export default commonSlice.reducer;

src/utils/ApiHelper.ts

@@ -724,6 +724,9 @@ axiosInstance.interceptors.request.use(
     request.headers['X-Session-Id'] = GLOBAL.SESSION_TOKEN || '';
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
+    request.headers['agent_business_vertical'] = GLOBAL?.AGENT_BUSINESS_VERTICAL || '';
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     request.headers['X-Device-Id'] = getDeviceId() || '';
 
     return request;