From 81875ecde380885aaa8ec63c17aee5a2e9e2e36d Mon Sep 17 00:00:00 2001 From: Ashish Deo Date: Fri, 25 Oct 2024 02:57:41 +0530 Subject: [PATCH] NTP-6736 | PR review fixes --- src/assets/icons/FlagIcon.tsx | 5 +- src/components/utlis/apiHelper.ts | 2 +- src/constants/config.js | 2 +- src/reducer/escalationSlice.ts | 21 +-- src/screens/allCases/ListItem.tsx | 11 +- .../caseDetails/CollectionCaseDetail.tsx | 5 +- src/screens/escalations/Escalations.tsx | 126 +--------------- .../escalations/EscalationsSection.tsx | 20 +-- src/screens/escalations/actions.ts | 5 +- src/screens/escalations/const.ts | 23 +++ src/screens/escalations/escalationsItem.tsx | 136 ++++++++++++++++++ 11 files changed, 189 insertions(+), 167 deletions(-) create mode 100644 src/screens/escalations/const.ts create mode 100644 src/screens/escalations/escalationsItem.tsx diff --git a/src/assets/icons/FlagIcon.tsx b/src/assets/icons/FlagIcon.tsx index 589ceb43..c98126a0 100644 --- a/src/assets/icons/FlagIcon.tsx +++ b/src/assets/icons/FlagIcon.tsx @@ -1,8 +1,9 @@ -import { IconProps } from "@rn-ui-lib/icons/types" import * as React from "react" +import { COLORS } from "@rn-ui-lib/colors"; +import { IconProps } from "@rn-ui-lib/icons/types" import Svg, { Path, Mask, G } from "react-native-svg" -const FlagIcon : React.FC = ({ fillColor = 'E92C2C' ,width=16, height=16}) => ( +const FlagIcon : React.FC = ({fillColor = COLORS.TEXT.RED , width=16, height=16}) => ( = (props) => { : TAG_CONTAINER_WIDTH.DEFAULT, }; - const isEscalationCase = escalationData !== undefined; const isActiveEscalationCase = Number(escalationData?.activeEscalationCount) > 0; const activeEscalationCount = Number(escalationData?.activeEscalationCount); const pastEscalationCount = Number(escalationData?.pastEscalationCount); @@ -230,23 +229,23 @@ const ListItem: React.FC = (props) => { ]} > - {isEscalationCase ? ( + {escalationData ? ( isActiveEscalationCase ? ( - + - {`${activeEscalationCount} Active Escalation${activeEscalationCount === 1 ? '' : 's'}`} + {`${activeEscalationCount} Active Escalation${activeEscalationCount === 1 ? '' : 's'}`} ) : ( - + - {`${pastEscalationCount} Past Escalation${pastEscalationCount === 1 ? '' : 's'}`} + {`${pastEscalationCount} Past Escalation${pastEscalationCount === 1 ? '' : 's'}`} ) diff --git a/src/screens/caseDetails/CollectionCaseDetail.tsx b/src/screens/caseDetails/CollectionCaseDetail.tsx index 192bef01..d98364d6 100644 --- a/src/screens/caseDetails/CollectionCaseDetail.tsx +++ b/src/screens/caseDetails/CollectionCaseDetail.tsx @@ -8,7 +8,6 @@ import Layout from '../layout/Layout'; import { _map } from '../../../RN-UI-LIB/src/utlis/common'; import { RootState } from '../../store/store'; import { getCaseUnifiedData, UnifiedCaseDetailsTypes } from '../../action/caseApiActions'; -import useIsOnline from '../../hooks/useIsOnline'; import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants'; import { addClickstreamEvent } from '../../services/clickstreamEventService'; import ScreenshotBlocker from '../../components/utlis/ScreenshotBlocker'; @@ -40,7 +39,6 @@ const CollectionCaseDetails: React.FC = (props) => { }, } = props; const caseDetail = useAppSelector((state: RootState) => state.allCases.caseDetails[caseId]) || {}; - const isActiveEscalation = caseDetail.escalationData !== undefined; const isCallActive = useAppSelector( (state: RootState) => state?.activeCall?.activeCallDetails?.callActive ); @@ -51,7 +49,6 @@ const CollectionCaseDetails: React.FC = (props) => { const duration = 300; const dispatch = useAppDispatch(); const isFocused = useIsFocused(); - const isOnline = useIsOnline(); const [isDocumentsLoading, setIsDocumentsLoading] = React.useState(false); @@ -128,7 +125,7 @@ const CollectionCaseDetails: React.FC = (props) => { > - {isActiveEscalation ? (): null} + {caseDetail?.escalationData ? (): null} diff --git a/src/screens/escalations/Escalations.tsx b/src/screens/escalations/Escalations.tsx index 33928d18..4fe8929f 100644 --- a/src/screens/escalations/Escalations.tsx +++ b/src/screens/escalations/Escalations.tsx @@ -1,28 +1,24 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { ScrollView, StyleSheet, View } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { ScrollView, 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, getShadowStyle } from '../../../RN-UI-LIB/src/styles'; +import { GenericStyles } 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 FlagIcon from '@assets/icons/FlagIcon'; -import Tag, { TagVariant } from '@rn-ui-lib/components/Tag'; import { useAppDispatch, useAppSelector } from '@hooks'; import { RootState } from '@store'; import { getAllEscalations } from './actions'; -import dayjs from 'dayjs'; +import EscalationsItem from './escalationsItem'; interface IEscalationsDetails { route: { params: { - caseId: string; loanAccountNumber: string; }; }; @@ -32,7 +28,7 @@ const Escalations: React.FC = (props) => { const { route: { - params: { caseId, loanAccountNumber }, + params: { loanAccountNumber }, }, } = props; @@ -47,9 +43,6 @@ const Escalations: React.FC = (props) => { const totalEscalationsCount = pageData?.totalElements || 0; - - - useEffect(() => { if (!isOnline) { setCurrentPage(1); @@ -69,7 +62,7 @@ const Escalations: React.FC = (props) => { }; return ( - + = (props) => { } > - - {escalationData?.length ? ( - <> - {escalationData.map((escalation) => ( - - - - - - - - - - - - {escalation.voc} - - - - - - {dayjs(escalation.createdAt).format('DD MMM YYYY')} - - - {'|'} - - - {dayjs(escalation.createdAt).format('hh:mm A')} - - - - {escalation.status === 'OPEN' ? ( - - ) : ( - - )} - - - - - - - Description - {escalation.title} - - - - ))} - - ) : ( - - <> - - )} - + {escalationData?.length && pageData?.totalPages > 1 ? ( @@ -170,39 +93,4 @@ const Escalations: React.FC = (props) => { ); }; -const styles = StyleSheet.create({ - secondSection: { - alignSelf: 'center', - borderRadius: 16, - width: '98%', - borderWidth: 1, - borderColor: COLORS.BACKGROUND.GREY_LIGHT, - }, - horizontalLine: { - backgroundColor: COLORS.BACKGROUND.GREY_LIGHT, - width: '100%', - height: 2, - 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, - borderWidth: 1, - - }, -}); - export default Escalations; diff --git a/src/screens/escalations/EscalationsSection.tsx b/src/screens/escalations/EscalationsSection.tsx index ab787fb4..c36c8ff2 100644 --- a/src/screens/escalations/EscalationsSection.tsx +++ b/src/screens/escalations/EscalationsSection.tsx @@ -12,6 +12,7 @@ import { addClickstreamEvent } from '@services/clickstreamEventService'; import { CaseDetailStackEnum } from '../caseDetails/CaseDetailStack'; import FlagIcon from '@assets/icons/FlagIcon'; import dayjs from 'dayjs'; +import { COSMOS_STANDARD_DATE_FORMAT, COSMOS_STANDARD_DATE_TIME_FORMAT, COSMOS_STANDARD_TIME_FORMAT } from '@rn-ui-lib/utils/dates'; interface IEscalationsSection { caseId: string; @@ -20,7 +21,7 @@ interface IEscalationsSection { const EscalationsSection = ({ caseId }: IEscalationsSection) => { const caseDetail = useAppSelector((state: RootState) => state.allCases?.caseDetails?.[caseId]) || {}; - const { escalationData, loanAccountNumber } = caseDetail; + const { escalationData, loanAccountNumber } = caseDetail || {}; const handleOnPressClick = () => { @@ -28,8 +29,7 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => { lan: loanAccountNumber, }); navigateToScreen(CaseDetailStackEnum.ESCALATIONS, { - loanAccountNumber, - caseId, + loanAccountNumber }) }; @@ -37,8 +37,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => { const activeEscalationCount = Number(escalationData?.activeEscalationCount); const pastEscalationCount = Number(escalationData?.pastEscalationCount); const totalEscalationsCount = activeEscalationCount + pastEscalationCount; - const escalationCreatedAt = escalationData?.recentEscalationDetails.createdAt; - const customerVoice = escalationData?.recentEscalationDetails.customerVoice; + const escalationCreatedAt = escalationData?.recentEscalationDetails?.createdAt; + const customerVoice = escalationData?.recentEscalationDetails?.customerVoice; return ( @@ -63,8 +63,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => { backgroundColor: COLORS.BACKGROUND.RED }]}> - - {`${activeEscalationCount} Active Escalation${activeEscalationCount === 1 ? '' : 's'}`} + + {`${activeEscalationCount} Active Escalation${activeEscalationCount === 1 ? '' : 's'}`} ) : ( @@ -73,7 +73,7 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => { }]}> - {`${pastEscalationCount} Past Escalation${pastEscalationCount === 1 ? '' : 's'}`} + {`${pastEscalationCount} Past Escalation${pastEscalationCount === 1 ? '' : 's'}`} ) } @@ -88,13 +88,13 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => { {'Raised on:'} - {dayjs(escalationCreatedAt).format('DD MMM YYYY')} + {dayjs(escalationCreatedAt).format(COSMOS_STANDARD_DATE_FORMAT)} {'|'} - {dayjs(escalationCreatedAt).format('hh:mm A')} + {dayjs(escalationCreatedAt).format(COSMOS_STANDARD_TIME_FORMAT)} diff --git a/src/screens/escalations/actions.ts b/src/screens/escalations/actions.ts index 6c83802a..d53ac0fe 100644 --- a/src/screens/escalations/actions.ts +++ b/src/screens/escalations/actions.ts @@ -20,18 +20,15 @@ export const getAllEscalations = ( page_size: 0 } ) => (dispatch: AppDispatch) => { - dispatch(setIsLoading(true)); - console.log('called getAllEscalations API'); + dispatch(setIsLoading(true)); const payload = { loan_account_number: lan, ...escalationPayload, } const url = getApiUrl(ApiKeys.ALL_ESCALATIONS, null, payload ); - console.log('getAllEscalationsUrl', url); return axiosInstance .get(url) .then((response) => { - console.log('getAllEscalationsResponse', response); if (response?.data) { dispatch(setEscalationData(response.data.data)); dispatch(setPageData(response.data.pages)); diff --git a/src/screens/escalations/const.ts b/src/screens/escalations/const.ts new file mode 100644 index 00000000..8999cc60 --- /dev/null +++ b/src/screens/escalations/const.ts @@ -0,0 +1,23 @@ +export enum ESCALATION_STATUS { + OPEN = 'OPEN', + CLOSED = 'CLOSED', +} + +export interface IEscalationsSlice { + escalationData : IAllEscalationData[]; + isLoading : boolean; + pageData :pageData; +} + +export interface pageData { + totalPages : number; + totalElements : number; +} + +export interface IAllEscalationData { + createdAt : string; + loanAccountNumber :string; + status : string; + title : string; + voc : string; +} \ No newline at end of file diff --git a/src/screens/escalations/escalationsItem.tsx b/src/screens/escalations/escalationsItem.tsx new file mode 100644 index 00000000..ad9e52c1 --- /dev/null +++ b/src/screens/escalations/escalationsItem.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { ESCALATION_STATUS, IAllEscalationData } from './const'; +import FlagIcon from '@assets/icons/FlagIcon'; +import { COLORS } from '@rn-ui-lib/colors'; +import Tag, { TagVariant } from '@rn-ui-lib/components/Tag'; +import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles'; +import { COSMOS_STANDARD_DATE_FORMAT, COSMOS_STANDARD_TIME_FORMAT } from '@rn-ui-lib/utils/dates'; +import dayjs from 'dayjs'; +import Text from '@rn-ui-lib/components/Text'; +import { View, StyleSheet } from 'react-native'; + + +interface IEscalationsItem { + escalationData: IAllEscalationData[]; +} + +const EscalationsItem: React.FC = (props) => { + const { escalationData } = props; + return ( + + {escalationData?.length ? ( + <> + {escalationData.map((escalation) => ( + + + + + + + + + + + + {escalation.voc} + + + + + + {dayjs(escalation.createdAt).format(COSMOS_STANDARD_DATE_FORMAT)} + + + {'|'} + + + {dayjs(escalation.createdAt).format(COSMOS_STANDARD_TIME_FORMAT)} + + + + {escalation.status === ESCALATION_STATUS.OPEN ? ( + + ) : ( + + )} + + + + + + + Description + {escalation.title} + + + + ))} + + ) : ( + + <> + + )} + + ); +} + + +const styles = StyleSheet.create({ + secondSection: { + alignSelf: 'center', + borderRadius: 16, + width: '98%', + borderWidth: 1, + borderColor: COLORS.BACKGROUND.GREY_LIGHT, + }, + horizontalLine: { + backgroundColor: COLORS.BACKGROUND.GREY_LIGHT, + width: '100%', + height: 2, + 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, + borderWidth: 1, + + }, +}); + + + + + +export default EscalationsItem; + + +