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

NTP-6736 | EM PM uat fixes

Browse Source
This commit is contained in:
Ashish Deo
2024-10-25 16:04:47 +05:30
parent 8bc29c8380
commit 9e1b17ee46
3 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -210,6 +210,7 @@ const ListItem: React.FC<IListItem> = (props) => {
const isActiveEscalationCase = Number(escalationData?.activeEscalationCount) > 0;
const activeEscalationCount = Number(escalationData?.activeEscalationCount);
const pastEscalationCount = Number(escalationData?.pastEscalationCount);
const totalEscalationsCount = activeEscalationCount + pastEscalationCount;
return (
<Pressable onPress={handleCaseClick}>
@@ -229,9 +230,9 @@ const ListItem: React.FC<IListItem> = (props) => {
]}
>
{escalationData ? (
{escalationData && totalEscalationsCount > 0 ? (
isActiveEscalationCase ? (
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100, {
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100,styles.redContainer, {
backgroundColor: COLORS.BACKGROUND.RED
}]}>
<FlagIcon fillColor={COLORS.TEXT.RED} />
@@ -240,7 +241,7 @@ const ListItem: React.FC<IListItem> = (props) => {
</Text>
</View>
) : (
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100, {
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100,styles.yellowContainer, {
backgroundColor: COLORS.BACKGROUND.YELLOW_LIGHT
}]}>
<FlagIcon fillColor={COLORS.TEXT.YELLOW_LIGHT} />
@@ -361,14 +362,19 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderWidth: 1,
},
redContainer :{
borderColor: COLORS.BORDER.RED,
},
yellowContainer :{
borderColor: COLORS.BORDER.YELLOW,
},
activeEscalationText: {
color: COLORS.TEXT.RED,
marginLeft: 4,
},
pastEscalationText: {
color: COLORS.TEXT.YELLOW,
color: COLORS.TEXT.YELLOW_LIGHT,
marginLeft: 4,
},
avatarContainer: {

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

@@ -52,6 +52,11 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
const [isDocumentsLoading, setIsDocumentsLoading] = React.useState(false);
const {escalationData} = caseDetail || {};
const activeEscalationCount = Number(escalationData?.activeEscalationCount);
const pastEscalationCount = Number(escalationData?.pastEscalationCount);
const totalEscalationsCount = activeEscalationCount + pastEscalationCount;
useEffect(() => {
if (caseId) dispatch(setSelectedCaseId(caseId));
@@ -124,8 +129,8 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
]}
>
<ViewAddressSection caseId={caseId} />
{escalationData && totalEscalationsCount > 0 ? (<EscalationsSection caseId={caseId} />): null}
<EmiDetailsSection caseId={caseId} />
{caseDetail?.escalationData ? (<EscalationsSection caseId={caseId} />): null}
<CollectMoneySection caseId={caseId} />
<FeedbackDetailsSection caseId={caseId} />
</Animated.View>

48
src/screens/escalations/EscalationsSection.tsx
View File

@@ -12,8 +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';
import { COSMOS_STANDARD_DATE_FORMAT, COSMOS_STANDARD_TIME_FORMAT } from '@rn-ui-lib/utils/dates';
interface IEscalationsSection {
caseId: string;
}
@@ -40,6 +39,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
const escalationCreatedAt = escalationData?.recentEscalationDetails?.createdAt;
const customerVoice = escalationData?.recentEscalationDetails?.customerVoice;
const escalationRaisedDate = dayjs(escalationCreatedAt).format(COSMOS_STANDARD_DATE_FORMAT);
const escalationRaisedTime = dayjs(escalationCreatedAt).format(COSMOS_STANDARD_TIME_FORMAT);
return (
<View
@@ -57,9 +58,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
onPress={handleOnPressClick}
>
<View style={GenericStyles.fill}>
{isActiveEscalationCase ? (
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, {
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, styles.redContainer, {
backgroundColor: COLORS.BACKGROUND.RED
}]}>
<FlagIcon fillColor={COLORS.TEXT.RED} />
@@ -68,7 +68,7 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
</Text>
</View>
) : (
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, {
<View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, styles.yellowContainer, {
backgroundColor: COLORS.BACKGROUND.YELLOW_LIGHT
}]}>
<FlagIcon fillColor={COLORS.TEXT.YELLOW_LIGHT} />
@@ -77,34 +77,31 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
</Text>
</View>)
}
<View style={[GenericStyles.columnDirection, GenericStyles.pl16]}>
<Text dark bold style={[GenericStyles.fontSize14, GenericStyles.mb4]}>
{customerVoice}
{customerVoice || 'Escalation Against Agent'}
</Text>
<View style={[GenericStyles.row, GenericStyles.alignCenter]}>
<Text style={[GenericStyles.fontSize13]}>
{'Raised on:'}
</Text>
<Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4, GenericStyles.mr4]}>
{dayjs(escalationCreatedAt).format(COSMOS_STANDARD_DATE_FORMAT)}
</Text>
<Text style={[GenericStyles.fontSize13, styles.textColorGrayscale3]}>
{'|'}
</Text>
<Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4]}>
{dayjs(escalationCreatedAt).format(COSMOS_STANDARD_TIME_FORMAT)}
{'Raised on: '}
</Text>
{escalationRaisedDate ? <>
<Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4, GenericStyles.mr4]}>
{escalationRaisedDate}
</Text>
<Text style={[GenericStyles.fontSize13, styles.textColorGrayscale3]}>
{'|'}
</Text>
<Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4]}>
{escalationRaisedTime}
</Text>
</> : <Text>Unknown</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>
@@ -121,16 +118,21 @@ export const styles = StyleSheet.create({
borderTopLeftRadius: 16,
alignSelf: 'flex-start',
borderWidth: 1,
borderColor: COLORS.BORDER.RED,
},
activeEscalationText: {
color: COLORS.TEXT.RED,
marginLeft: 4,
},
pastEscalationText: {
color: COLORS.TEXT.YELLOW,
color: COLORS.TEXT.YELLOW_LIGHT,
marginLeft: 4,
},
redContainer: {
borderColor: COLORS.BORDER.RED,
},
yellowContainer: {
borderColor: COLORS.BORDER.YELLOW,
},
textColorGrayscale2: {
color: COLORS.TEXT.BLACK,
},