varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NTP-6376 | Escalation tagging

Browse Source
This commit is contained in:
Ashish Deo
2024-10-23 16:02:21 +05:30
parent e70a85b93e
commit 3a885de302
9 changed files with 572 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/assets/icons/FlagIcon.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { IconProps } from "@rn-ui-lib/icons/types"
import * as React from "react"
import Svg, { Path, Mask, G } from "react-native-svg"
const FlagIcon : React.FC<IconProps> = ({ fillColor = 'E92C2C' }) => (
<Svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
>
<Mask
id="a"
maskUnits="userSpaceOnUse"
x={0}
y={0}
width={16}
height={16}
>
<Path fill="#D9D9D9" d="M0 0H16V16H0z" />
</Mask>
<G mask="url(#a)">
<Path
d="M4.333 8.667V14a.645.645 0 01-.191.475.645.645 0 01-.475.192.645.645 0 01-.475-.192A.645.645 0 013 14V2.667c0-.19.064-.348.192-.475A.645.645 0 013.667 2h9.016a.629.629 0 01.55.3.771.771 0 01.109.292.61.61 0 01-.042.325l-.967 2.416.967 2.417a.61.61 0 01.042.325.771.771 0 01-.109.292.629.629 0 01-.55.3h-8.35z"
fill={fillColor}
/>
</G>
</Svg>
);
export default FlagIcon

14
src/common/Constants.ts
View File

@@ -456,7 +456,10 @@ export const CLICKSTREAM_EVENT_NAMES = {
name: 'FA_VIEW_PAST_FEEDBACK_PREV_PAGE_FAILED',
description: 'FA_VIEW_PAST_FEEDBACK_PREV_PAGE_FAILED',
},
FA_VIEW_PHOTO_CLICKED: { name: 'FA_VIEW_PHOTO_CLICKED', description: 'FA_VIEW_PHOTO_CLICKED' },
FA_VIEW_PHOTO_CLICKED: {
name: 'FA_VIEW_PHOTO_CLICKED',
description: 'FA_VIEW_PHOTO_CLICKED'
},
FA_CUSTOMER_DOCUMENT_CLICKED: {
name: 'FA_CUSTOMER_DOCUMENT_CLICKED',
description: 'FA_CUSTOMER_DOCUMENT_CLICKED',
@@ -494,6 +497,15 @@ export const CLICKSTREAM_EVENT_NAMES = {
name: 'FA_PERFORMANCE_DASHBOARD_PERFORMANCE_GRAPH_CLICKED',
description: 'When the user clicks on expand/collapse of the performance graph',
},
FA_VIEW_ALL_ESCALATIONS_SCREEN_CLICKED: {
name: 'FA_VIEW_ALL_ESCALATIONS_SCREEN_CLICKED',
description: 'FA_VIEW_ALL_ESCALATIONS_SCREEN_CLICKED',
},
FA_VIEW_ALL_ESCALATIONS_SCREEN_LANDED: {
name: 'FA_VIEW_ALL_ESCALATIONS_SCREEN_LANDED',
description: 'FA_VIEW_ALL_ESCALATIONS_SCREEN_LANDED',
},
// Notifications
FA_NOTIFICATION_ICON_CLICK: {

2
src/components/utlis/apiHelper.ts
View File

@@ -357,7 +357,7 @@ axiosInstance.interceptors.response.use(
if ([API_STATUS_CODE.UNAUTHORIZED, API_STATUS_CODE.FORBIDDEN].includes(response.status)) {
// Reset user info
dispatch(handleLogout());
// dispatch(handleLogout());
}
// Blocking cosmos after operative hours

2
src/constants/config.js
View File

@@ -1,6 +1,6 @@
import { MILLISECONDS_IN_A_MINUTE, MINUTES_IN_AN_HOUR } from '../../RN-UI-LIB/src/utlis/common';
export const BASE_AV_APP_URL = 'https://qa-longhorn-portal.np.navi-tech.in/field-app';
export const BASE_AV_APP_URL = 'https://qa-longhorn-server.np.navi-ppl.in/field-app';
export const SENTRY_DSN =
'https://acef93c884c1424cacc4ec899562e203@qa-longhorn-portal.np.navi-tech.in/glitchtip-events/173';
export const JANUS_SERVICE_URL = 'https://qa-longhorn-portal.np.navi-tech.in/api/events/json';

51
src/screens/allCases/ListItem.tsx
View File

@@ -13,7 +13,6 @@ import {
import CaseItemAvatar from './CaseItemAvatar';
import {
CaseStatuses,
displayStatuses,
InteractionStatuses,
TaskTitleUIMapping,
ICaseItemAvatarCaseDetailObj,
@@ -34,6 +33,7 @@ import relativeDistanceFormatter from '@screens/addressGeolocation/utils/relativ
import { CaseDetailStackEnum } from '@screens/caseDetails/CaseDetailStack';
import { PageRouteEnum } from '@screens/auth/ProtectedRouter';
import LocationDistanceIcon from '@assets/icons/LocationDistanceIcon';
import FlagIcon from '@assets/icons/FlagIcon';
interface IListItem {
caseListItemDetailObj: ICaseItemCaseDetailObj;
@@ -82,7 +82,6 @@ const ListItem: React.FC<IListItem> = (props) => {
isSynced,
isNewlyAdded,
interactionStatus,
caseVerdict,
totalOverdueAmount,
distanceInKm,
} = caseListItemDetailObj;
@@ -192,7 +191,7 @@ const ListItem: React.FC<IListItem> = (props) => {
!isTeamLead &&
!nearbyCaseView;
const is1To30FieldAgent = useAppSelector((state) => state.user?.is1To30FieldAgent);
const is1To30FieldAgent = useAppSelector((state) => state.user?.is1To30FieldAgent);
const distanceMapOfNearbyCases =
useAppSelector((state) => state.nearbyCasesSlice.caseReferenceIdToDistanceMap) || {};
const selectedTab = useAppSelector((state) => state?.nearbyCasesSlice?.sortTabSelected);
@@ -203,11 +202,21 @@ const ListItem: React.FC<IListItem> = (props) => {
width: showInVisitPlanTag
? TAG_CONTAINER_WIDTH.VISIT_PLAN_TAG
: showVisitPlanBtn
? TAG_CONTAINER_WIDTH.VISIT_PLAN_BUTTON
: TAG_CONTAINER_WIDTH.DEFAULT,
? TAG_CONTAINER_WIDTH.VISIT_PLAN_BUTTON
: TAG_CONTAINER_WIDTH.DEFAULT,
};
const isEscalationCase = true;
const isActiveEscalationCase = true;
const isPastEscalationCase = false;
const escalationCount = 4;
const activeEscalationCaseCount = 2;
const pastEscalationCaseCount = 3;
const totalEscalationCaseCount = activeEscalationCaseCount + pastEscalationCaseCount;
return (
<Pressable onPress={handleCaseClick}>
<View
style={[
GenericStyles.row,
@@ -217,11 +226,23 @@ const ListItem: React.FC<IListItem> = (props) => {
backgroundColor: isNewlyAdded
? COLORS.BACKGROUND.ORANGE
: isCaseSelected
? COLORS.BACKGROUND.SILVER
: COLORS.BACKGROUND.PRIMARY,
? COLORS.BACKGROUND.SILVER
: COLORS.BACKGROUND.PRIMARY,
},
]}
>
{isEscalationCase ? (
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100, {
backgroundColor: isActiveEscalationCase ? COLORS.BACKGROUND.RED : COLORS.BACKGROUND.YELLOW_LIGHT
}]}>
<FlagIcon fillColor={isActiveEscalationCase ? '#FF0000' : '#FFB800'} />
<Text small style={[isActiveEscalationCase ? styles.activeEscalationText : styles.pastEscalationText]}>
{`${totalEscalationCaseCount} `}{isActiveEscalationCase ? 'Active Escalations' : 'Past Escalations'}
</Text>
</View>
) : null}
<CaseItemAvatar
caseDetailObj={getCaseItemAvatarCaseDetailObj}
shouldBatchAvatar={shouldBatchAvatar}
@@ -323,6 +344,22 @@ const styles = StyleSheet.create({
marginVertical: 6,
position: 'relative',
},
escalationContainer: {
position: 'absolute',
height: 26,
paddingLeft: 8,
paddingRight: 8,
borderBottomRightRadius: 6,
borderTopLeftRadius: 8,
},
activeEscalationText: {
color: COLORS.TEXT.RED,
marginLeft: 4,
},
pastEscalationText: {
color: COLORS.TEXT.YELLOW,
marginLeft: 4,
},
avatarContainer: {
height: 40,
width: 48,

3
src/screens/caseDetails/CaseDetailStack.tsx
View File

@@ -28,6 +28,7 @@ import AdditionalGeolocations from '@screens/addressGeolocation/AdditionalGeoloc
import FeeWaiver from '@screens/emiSchedule/FeeWaiver';
import FeeWaiverHistory from '@screens/emiSchedule/FeeWaiverHistory';
import CallCustomer from './CallCustomer';
import Escalations from '@screens/escalations/Escalations';
const Stack = createNativeStackNavigator();
@@ -53,6 +54,7 @@ export enum CaseDetailStackEnum {
FEE_WAIVER = 'FeeWaiver',
FEE_WAIVER_HISTORY = 'FeeWaiverHistory',
CALL_CUSTOMER = 'CallCustomer',
ESCALATIONS = 'Escalations',
}
const CaseDetailStack = () => {
@@ -101,6 +103,7 @@ const CaseDetailStack = () => {
component={FeedbackDetailContainer}
/>
<Stack.Screen name={CaseDetailStackEnum.EMI_SCHEDULE} component={EmiSchedule} />
<Stack.Screen name={CaseDetailStackEnum.ESCALATIONS} component={Escalations} />
<Stack.Screen name={CaseDetailStackEnum.FEE_WAIVER} component={FeeWaiver} />
<Stack.Screen name={CaseDetailStackEnum.FEE_WAIVER_HISTORY} component={FeeWaiverHistory} />
<Stack.Screen name={CaseDetailStackEnum.ADD_NEW_NUMBER} component={AddNewNumber} />

7
src/screens/caseDetails/CollectionCaseDetail.tsx
View File

@@ -6,7 +6,7 @@ import CaseDetailsHeader from './CaseDetailHeader';
import UserDetailsSection from './UserDetailsSection';
import Layout from '../layout/Layout';
import { _map } from '../../../RN-UI-LIB/src/utlis/common';
import { AppDispatch, RootState } from '../../store/store';
import { RootState } from '../../store/store';
import { getCaseUnifiedData, UnifiedCaseDetailsTypes } from '../../action/caseApiActions';
import useIsOnline from '../../hooks/useIsOnline';
import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
@@ -21,10 +21,8 @@ import CollectionCaseDetailFooter from './CollectionCaseDetailFooter';
import FeedbackDetailsSection from './FeedbackDetailsSection';
import { COLORS } from '@rn-ui-lib/colors';
import { syncActiveCallDetails } from '@actions/callRecordingActions';
import { getCustomerDocuments } from '@screens/allCases/utils';
import { logError } from '@components/utlis/errorUtils';
import { GenericObject, GenericType } from '@common/GenericTypes';
import { getUngroupedAddress } from '@actions/addressGeolocationAction';
import EscalationsSection from '@screens/escalations/EscalationsSection';
interface ICaseDetails {
route: {
@@ -129,6 +127,7 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
>
<ViewAddressSection caseId={caseId} />
<EmiDetailsSection caseId={caseId} />
<EscalationsSection caseId={caseId} />
<CollectMoneySection caseId={caseId} />
<FeedbackDetailsSection caseId={caseId} />
</Animated.View>

345
src/screens/escalations/Escalations.tsx Normal file
View File

@@ -0,0 +1,345 @@
import React, { useCallback, useEffect, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
import { ToastMessages } from '../allCases/constants';
import useIsOnline from '../../hooks/useIsOnline';
import { addClickstreamEvent } from '../../services/clickstreamEventService';
import { goBack } from '../../components/utlis/navigationUtlis';
import { toast } from '../../../RN-UI-LIB/src/components/toast';
import { GenericStyles, SCREEN_HEIGHT, getShadowStyle } from '../../../RN-UI-LIB/src/styles';
import NavigationHeader from '../../../RN-UI-LIB/src/components/NavigationHeader';
import SuspenseLoader from '../../../RN-UI-LIB/src/components/suspense_loader/SuspenseLoader';
import LineLoader from '../../../RN-UI-LIB/src/components/suspense_loader/LineLoader';
import Text from '../../../RN-UI-LIB/src/components/Text';
import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
import Pagination from '../../../RN-UI-LIB/src/components/pagination/Pagination';
import { GenericObject } from '@common/GenericTypes';
import FlagIcon from '@assets/icons/FlagIcon';
import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
const Escalations = () => {
const [escalationsList, setEscalationsList] = useState<GenericObject[]>([]);
const [totalPage, setTotalPage] = useState(0);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const isOnline = useIsOnline();
const getAllEscalations = useCallback(() => {
setTotalPage(escalationsList.length)
}, [currentPage]);
useEffect(() => {
setLoading(true);
setEscalationsList([{
id: 1,
title: 'Physical assault/threatening to physically assault',
raisedOn: '9 May, 2024',
time: '2:29 PM',
status: 'Closed',
description: 'Extension of time for paying dues.',
isActiveEscalation: false, // Closed = not active
},
{
id: 2,
title: 'Miscommunication about loan terms',
raisedOn: '15 April, 2024',
time: '10:15 AM',
status: 'In Progress',
description: 'Clarification required regarding interest rates.',
isActiveEscalation: true, // In Progress = active
},
{
id: 3,
title: 'Unauthorized access to account',
raisedOn: '28 March, 2024',
time: '4:45 PM',
status: 'Open',
description: 'Suspicious activity detected in the bank account.',
isActiveEscalation: true, // Open = active
},
{
id: 4,
title: 'Delayed processing of payment',
raisedOn: '5 March, 2024',
time: '1:00 PM',
status: 'Closed',
description: 'Payment was not processed on time.',
isActiveEscalation: false, // Closed = not active
},
{
id: 5,
title: 'Incorrect charges applied',
raisedOn: '20 February, 2024',
time: '9:30 AM',
status: 'Resolved',
description: 'Extra charges applied without notice.',
isActiveEscalation: false, // Resolved = not active
},
{
id: 3,
title: 'Unauthorized access to account',
raisedOn: '28 March, 2024',
time: '4:45 PM',
status: 'Open',
description: 'Suspicious activity detected in the bank account.',
isActiveEscalation: true, // Open = active
},
{
id: 4,
title: 'Delayed processing of payment',
raisedOn: '5 March, 2024',
time: '1:00 PM',
status: 'Closed',
description: 'Payment was not processed on time.',
isActiveEscalation: false, // Closed = not active
},
{
id: 5,
title: 'Incorrect charges applied',
raisedOn: '20 February, 2024',
time: '9:30 AM',
status: 'Resolved',
description: 'Extra charges applied without notice.',
isActiveEscalation: false, // Resolved = not active
},
{
id: 3,
title: 'Unauthorized access to account',
raisedOn: '28 March, 2024',
time: '4:45 PM',
status: 'Open',
description: 'Suspicious activity detected in the bank account.',
isActiveEscalation: true, // Open = active
},
{
id: 4,
title: 'Delayed processing of payment',
raisedOn: '5 March, 2024',
time: '1:00 PM',
status: 'Closed',
description: 'Payment was not processed on time.',
isActiveEscalation: false, // Closed = not active
},
{
id: 5,
title: 'Incorrect charges applied',
raisedOn: '20 February, 2024',
time: '9:30 AM',
status: 'Resolved',
description: 'Extra charges applied without notice.',
isActiveEscalation: false, // Resolved = not active
}, {
id: 3,
title: 'Unauthorized access to account',
raisedOn: '28 March, 2024',
time: '4:45 PM',
status: 'Open',
description: 'Suspicious activity detected in the bank account.',
isActiveEscalation: true, // Open = active
},
{
id: 4,
title: 'Delayed processing of payment',
raisedOn: '5 March, 2024',
time: '1:00 PM',
status: 'Closed',
description: 'Payment was not processed on time.',
isActiveEscalation: false, // Closed = not active
},
{
id: 5,
title: 'Incorrect charges applied',
raisedOn: '20 February, 2024',
time: '9:30 AM',
status: 'Resolved',
description: 'Extra charges applied without notice.',
isActiveEscalation: false, // Resolved = not active
},
{
id: 3,
title: 'Unauthorized access to account',
raisedOn: '28 March, 2024',
time: '4:45 PM',
status: 'Open',
description: 'Suspicious activity detected in the bank account.',
isActiveEscalation: true, // Open = active
},
{
id: 4,
title: 'Delayed processing of payment',
raisedOn: '5 March, 2024',
time: '1:00 PM',
status: 'Closed',
description: 'Payment was not processed on time.',
isActiveEscalation: false, // Closed = not active
},
{
id: 5,
title: 'Incorrect charges applied',
raisedOn: '20 February, 2024',
time: '9:30 AM',
status: 'Resolved',
description: 'Extra charges applied without notice.',
isActiveEscalation: false, // Resolved = not active
}
]);
getAllEscalations();
}, [currentPage]);
useEffect(() => {
if (!isOnline) {
setCurrentPage(1);
}
}, [isOnline]);
useEffect(() => {
addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_VIEW_ALL_ESCALATIONS_SCREEN_LANDED);
}, []);
const handlePageChange = (page: number) => {
if (!isOnline) {
toast({ type: 'info', text1: ToastMessages.OFFLINE_MESSAGE });
return;
}
setCurrentPage(page);
};
const isActiveEscalationCase = true;
return (
<View style={[GenericStyles.fill, GenericStyles.whiteBackground]}>
<NavigationHeader title={'All Escalations'} onBack={goBack} />
<ScrollView style={[GenericStyles.ph16, GenericStyles.mt16, GenericStyles.fill]}>
<SuspenseLoader
loading={false}
fallBack={
<>
{[...Array(8).keys()].map(() => (
<LineLoader
width={'100%'}
height={75}
style={[GenericStyles.br6, { marginBottom: 20 }]}
/>
))}
</>
}
>
<View>
{escalationsList?.length ? (
<>
{escalationsList.map((escalation) => (
<View key={escalation.id}>
<View
style={[
GenericStyles.whiteBackground,
GenericStyles.w100,
getShadowStyle(2),
GenericStyles.mt16,
styles.br16,
]}
>
<View style={[GenericStyles.row, GenericStyles.pt16, GenericStyles.pl16]} >
<View style={[styles.flagContainer, GenericStyles.mr16, GenericStyles.centerAligned, {
backgroundColor: escalation.isActiveEscalation ? COLORS.BACKGROUND.RED : COLORS.BACKGROUND.YELLOW_LIGHT
}]}>
<FlagIcon fillColor={escalation.isActiveEscalation ? '#FF0000' : '#FFB800'} />
</View>
<View style={[styles.upperContainer]}>
<Text dark bold style={[GenericStyles.fontSize14, GenericStyles.mb4, styles.textColorGrayscale]}>
{escalation.title}
</Text>
<View style={[GenericStyles.row, GenericStyles.spaceBetween]}>
<View style={[GenericStyles.row]}>
<Text style={[GenericStyles.fontSize13, GenericStyles.mr4,styles.textColorGrayscale2]}>
{escalation.raisedOn}
</Text>
<Text style={[GenericStyles.fontSize13, styles.textColorGrayscale3]}>
{'|'}
</Text>
<Text style={[GenericStyles.fontSize13, GenericStyles.ml4, styles.textColorGrayscale2]}>
{escalation.time}
</Text>
</View>
{escalation.isActiveEscalation ? (
<Tag variant={TagVariant.error} text="Open" />
) : (
<Tag variant={TagVariant.yellow} text="Closed" />
)}
</View>
</View>
</View>
<View style={styles.horizontalLine} />
<View style={[GenericStyles.p16]}>
<Text style={[styles.textColorGrayscale3]}>Description</Text>
<Text style={[styles.textColorGrayscale2,GenericStyles.fontSize13]}>{escalation.description}</Text>
</View>
</View>
</View>
))}
</>
) : (
<View
style={[
GenericStyles.centerAligned,
GenericStyles.columnDirection,
]}
>
<></>
</View>
)}
</View>
</SuspenseLoader>
</ScrollView>
{escalationsList?.length && totalPage > 1 ? (
<Pagination
onPageChange={handlePageChange}
currentPage={currentPage}
totalPages={totalPage}
/>
) : null}
</View>
);
};
const styles = StyleSheet.create({
br16: {
borderRadius: 16,
},
horizontalLine: {
backgroundColor: COLORS.BACKGROUND.BLACK,
width: '100%',
height: 1,
marginTop: 16,
},
textColorGrayscale: {
color: COLORS.TEXT.DARK,
},
textColorGrayscale2: {
color: COLORS.TEXT.BLACK,
},
textColorGrayscale3: {
color: COLORS.TEXT.LIGHT,
},
upperContainer: {
width: 248,
},
flagContainer: {
height: 40,
width: 40,
borderRadius: 20,
},
});
export default Escalations;

131
src/screens/escalations/EscalationsSection.tsx Normal file
View File

@@ -0,0 +1,131 @@
import React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { COLORS } from '@rn-ui-lib/colors';
import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles';
import Text from '@rn-ui-lib/components/Text';
import Chevron from '@rn-ui-lib/icons/Chevron';
import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
import { navigateToScreen } from '@components/utlis/navigationUtlis';
import { RootState } from '@store';
import { useAppSelector } from '@hooks';
import { addClickstreamEvent } from '@services/clickstreamEventService';
import { CaseDetailStackEnum } from '../caseDetails/CaseDetailStack';
import FlagIcon from '@assets/icons/FlagIcon';
interface IEscalationsSection {
caseId: string;
}
const EscalationsSection = ({ caseId }: IEscalationsSection) => {
const caseDetail = useAppSelector((state: RootState) => state.allCases?.caseDetails?.[caseId]) || {};
const { loanAccountNumber } = caseDetail;
const handleOnPressClick = () => {
addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_VIEW_ALL_ESCALATIONS_SCREEN_CLICKED, {
lan: loanAccountNumber,
});
navigateToScreen(CaseDetailStackEnum.ESCALATIONS);
};
const activeEscalationsCount = 2;
const pastEscalationsCount = 3;
const totalEscalationsCount = activeEscalationsCount + pastEscalationsCount; // might break for 2-3 digit number
const isActiveEscalationCase = true;
return (
<View
style={[
GenericStyles.whiteBackground,
styles.br16,
GenericStyles.w100,
getShadowStyle(2),
GenericStyles.mt16,
]}
>
<View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.relative]}>
<TouchableOpacity
activeOpacity={0.7}
onPress={handleOnPressClick}
>
<View style={GenericStyles.fill}>
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.centerAligned, {
backgroundColor: isActiveEscalationCase ? COLORS.BACKGROUND.RED : COLORS.BACKGROUND.YELLOW_LIGHT
}]}>
<FlagIcon fillColor={isActiveEscalationCase ? '#FF0000' : '#FFB800'} />
<Text small style={[isActiveEscalationCase ? styles.activeEscalationText : styles.pastEscalationText]}>
{`${totalEscalationsCount} `}{isActiveEscalationCase ? 'Active Escalations' : 'Past Escalations'}
</Text>
</View>
<View style={[GenericStyles.columnDirection, GenericStyles.fill,,GenericStyles.pl16]}>
<Text dark bold style={[GenericStyles.fontSize14, GenericStyles.mb4]}>
{'Fake/False commitments/information'}
</Text>
<View style={[GenericStyles.row, GenericStyles.alignCenter]}>
<Text style={[GenericStyles.fontSize13]}>
{'Raised on:'}
</Text>
<Text style={[GenericStyles.fontSize13, GenericStyles.ml4,GenericStyles.mr4]}>
{'9 May, 2024'}
</Text>
<Text style={[GenericStyles.fontSize13]}>
{'|'}
</Text>
<Text style={[GenericStyles.fontSize13,GenericStyles.ml4]}>
{'2:29 PM'}
</Text>
</View>
</View>
<View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.pt12,GenericStyles.pb16, GenericStyles.pl16]}>
<Text style={[styles.viewAllButton]}>View all {`(${totalEscalationsCount})`}</Text>
<Chevron fillColor={COLORS.TEXT.BLUE} />
</View>
</View>
</TouchableOpacity>
</View>
</View>
);
};
export const styles = StyleSheet.create({
escalationContainer: {
height: 26,
marginBottom: 16,
paddingLeft: 8,
paddingRight: 8,
borderBottomRightRadius: 6,
borderTopLeftRadius: 16,
width : 148,
},
activeEscalationText: {
color: COLORS.TEXT.RED,
marginLeft: 4,
},
pastEscalationText: {
color: COLORS.TEXT.YELLOW,
marginLeft: 4,
},
viewAllButton: {
color: COLORS.TEXT.BLUE,
fontSize: 12,
lineHeight: 15,
marginRight: 10,
},
br16: {
borderRadius: 16,
},
});
export default EscalationsSection;