From e085c6235ac99dcc32d57b21a4140ef9099b4e1d Mon Sep 17 00:00:00 2001
From: Aman Sethi <aman.sethi@navi.com>
Date: Tue, 14 Mar 2023 13:22:11 +0530
Subject: [PATCH] new design for av case detail (#135)

---
 src/screens/caseDetails/AvCaseData.tsx        | 51 ++++++++++++++-----
 .../caseDetails/CollectionCaseData.tsx        | 41 ++-------------
 src/screens/caseDetails/LANChip.tsx           | 47 +++++++++++++++++
 3 files changed, 89 insertions(+), 50 deletions(-)
 create mode 100644 src/screens/caseDetails/LANChip.tsx

diff --git a/src/screens/caseDetails/AvCaseData.tsx b/src/screens/caseDetails/AvCaseData.tsx
index 7ba38d89..c9ce78be 100644
--- a/src/screens/caseDetails/AvCaseData.tsx
+++ b/src/screens/caseDetails/AvCaseData.tsx
@@ -3,27 +3,52 @@ import React from 'react';
 import { LoanDetails, LoanTypeUIMapping } from './interface';
 import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
 import Text from '../../../RN-UI-LIB/src/components/Text';
+import LANChip from './LANChip';
+import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
+import { formatAmount } from '../../../RN-UI-LIB/src/utlis/amount';
 
 interface IAvCaseData {
     loanDetails: LoanDetails;
 }
 const AvCaseData: React.FC<IAvCaseData> = ({ loanDetails }) => {
     return (
-        <View style={[GenericStyles.row, GenericStyles.mb8, GenericStyles.mt4]}>
-            <Text style={[GenericStyles.chip, GenericStyles.whiteBackground]}>
-                {LoanTypeUIMapping[loanDetails?.loanType]}
-            </Text>
-            {loanDetails?.tenureMonths ? <Text
-                style={[
-                    GenericStyles.chip,
-                    GenericStyles.whiteBackground,
-                    GenericStyles.ml8,
-                ]}>
-                {loanDetails.tenureMonths}{' '}
-                {loanDetails.tenureMonths > 1 ? 'Months' : 'Month'}
-            </Text>: null}
+        <View style={[GenericStyles.mt10]}>
+            <View style={[GenericStyles.row, GenericStyles.mb12]}>
+                <Text
+                    style={[GenericStyles.chip, GenericStyles.whiteBackground]}>
+                    {LoanTypeUIMapping[loanDetails?.loanType]}
+                </Text>
+                {loanDetails?.loanAccountNumber ? (
+                    <LANChip
+                        loanAccountNumber={loanDetails.loanAccountNumber}
+                    />
+                ) : null}
+            </View>
+            <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
+                <Text style={[GenericStyles.whiteText]}>
+                    {loanDetails.tenureMonths}{' '}
+                    {loanDetails.tenureMonths > 1 ? 'months ' : 'month '}
+                    tenure
+                </Text>
+                <View style={styles.lineStyle} />
+                {loanDetails?.disbursementAmount ? (
+                    <Text style={[GenericStyles.whiteText]}>
+                        Amount{' '}
+                        {formatAmount(Number(loanDetails.disbursementAmount))}
+                    </Text>
+                ) : null}
+            </View>
         </View>
     );
 };
 
+const styles = StyleSheet.create({
+    lineStyle: {
+        height: 12,
+        width: 1,
+        backgroundColor: COLORS.BORDER.PRIMARY,
+        marginHorizontal: 8.5,
+    },
+});
+
 export default AvCaseData;
diff --git a/src/screens/caseDetails/CollectionCaseData.tsx b/src/screens/caseDetails/CollectionCaseData.tsx
index 7a1d02c8..7f3747f0 100644
--- a/src/screens/caseDetails/CollectionCaseData.tsx
+++ b/src/screens/caseDetails/CollectionCaseData.tsx
@@ -1,14 +1,11 @@
-import { View, TouchableHighlight, StyleSheet } from 'react-native';
+import { View , StyleSheet } from 'react-native';
 import React from 'react';
-import { copyToClipboard } from '../../components/utlis/commonFunctions';
-import { toast } from '../../../RN-UI-LIB/src/components/toast';
 import { CaseDetail, CustomerInfo } from './interface';
 import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
-import CopyIcon from '../../../RN-UI-LIB/src/Icons/CopyIcon';
 import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import { formatAmount } from '../../../RN-UI-LIB/src/utlis/amount';
-import { ToastMessages } from '../allCases/contants';
+import LANChip from './LANChip';
 
 interface ICollectionCaseData {
     caseData: CaseDetail;
@@ -17,20 +14,6 @@ interface ICollectionCaseData {
 const CollectionCaseData: React.FC<ICollectionCaseData> = ({ caseData }) => {
     const { fatherName, currentDpd, loanAccountNumber, dpdBucket, pos } =
         caseData;
-    const copyLAN = () => {
-        if( loanAccountNumber) {
-            copyToClipboard(loanAccountNumber);
-            toast({
-                text1: ToastMessages.SUCCESS_COPYING_LAN,
-                type: 'info',
-            });
-        } else {
-            toast({
-                text1: ToastMessages.ERROR_COPYING_LAN,
-                type: 'error'
-            })
-        }
-    };
 
     return (
         <View>
@@ -49,23 +32,7 @@ const CollectionCaseData: React.FC<ICollectionCaseData> = ({ caseData }) => {
                     small>
                     Current DPD {currentDpd}
                 </Text>
-                <TouchableHighlight
-                    style={[GenericStyles.ml8]}
-                    onPress={copyLAN}>
-                    <View
-                        style={[
-                            GenericStyles.chip,
-                            GenericStyles.whiteBackground,
-                            GenericStyles.row,
-                            GenericStyles.alignCenter,
-                            GenericStyles.centerAligned,
-                        ]}>
-                        <Text small>LAN {loanAccountNumber}</Text>
-                        <View style={[GenericStyles.ml4]}>
-                            <CopyIcon />
-                        </View>
-                    </View>
-                </TouchableHighlight>
+                {loanAccountNumber && <LANChip loanAccountNumber={loanAccountNumber} />}
             </View>
             <View
                 style={[
@@ -95,7 +62,7 @@ const styles = StyleSheet.create({
     lineStyle: {
         width: 1,
         height: 12,
-        backgroundColor: COLORS.BACKGROUND.GREY_LIGHT,
+        backgroundColor: COLORS.BORDER.PRIMARY,
         marginHorizontal: 12.5,
     },
 });
diff --git a/src/screens/caseDetails/LANChip.tsx b/src/screens/caseDetails/LANChip.tsx
new file mode 100644
index 00000000..620f6fc4
--- /dev/null
+++ b/src/screens/caseDetails/LANChip.tsx
@@ -0,0 +1,47 @@
+import { TouchableHighlight, View } from 'react-native';
+import React from 'react';
+import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
+import { ToastMessages } from '../allCases/contants';
+import { toast } from '../../../RN-UI-LIB/src/components/toast';
+import { copyToClipboard } from '../../components/utlis/commonFunctions';
+import Text from '../../../RN-UI-LIB/src/components/Text';
+import CopyIcon from '../../../RN-UI-LIB/src/Icons/CopyIcon';
+
+interface ILANChip {
+    loanAccountNumber: string;
+}
+const LANChip: React.FC<ILANChip> = ({ loanAccountNumber }) => {
+    const copyLAN = () => {
+        if (loanAccountNumber) {
+            copyToClipboard(loanAccountNumber);
+            toast({
+                text1: ToastMessages.SUCCESS_COPYING_LAN,
+                type: 'info',
+            });
+        } else {
+            toast({
+                text1: ToastMessages.ERROR_COPYING_LAN,
+                type: 'error',
+            });
+        }
+    };
+    return (
+        <TouchableHighlight style={[GenericStyles.ml8]} onPress={copyLAN}>
+            <View
+                style={[
+                    GenericStyles.chip,
+                    GenericStyles.whiteBackground,
+                    GenericStyles.row,
+                    GenericStyles.alignCenter,
+                    GenericStyles.centerAligned,
+                ]}>
+                <Text small>LAN {loanAccountNumber}</Text>
+                <View style={[GenericStyles.ml4]}>
+                    <CopyIcon />
+                </View>
+            </View>
+        </TouchableHighlight>
+    );
+};
+
+export default LANChip;