react-native-timacare 3.3.50 → 3.3.52

package/src/screens/detail-loan/Payment.tsx

@@ -1,8 +1,8 @@
-// @ts-nocheck
+//@ts-nocheck
 import { StackActions, useNavigation } from '@react-navigation/native';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
-import { ScrollView, TouchableOpacity, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { CIMBBank } from '../../assets/icons';
 import Loading from '../../components/Loading';
@@ -16,267 +16,244 @@ interface IProps {
   data: any;
 }
 
+const InfoRow = ({ label, value, subRow = false, valueStyle, style }: any) => (
+  <View style={[styles.row, style]}>
+    <View style={styles.labelWrapper}>
+      <MText style={[commonStyles.textNormal, subRow && styles.subLabel]}>
+        {label}
+      </MText>
+    </View>
+    <MText style={[commonStyles.textNormal, valueStyle]}>{value}</MText>
+  </View>
+);
+
 export const Payment = observer(function Payment({ data }: IProps) {
   const navigation = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
   const [listPayment, setListPayment] = useState<any[]>();
-  const [lastDay, setLastDay] = useState<any>();
+  const isFetching = useRef(false);
+  const paymentCount = DetailLoanStore.listPayment.length;
 
-  const getData = () => {
+  const getData = useCallback(() => {
+    if (isFetching.current) return;
+    isFetching.current = true;
     setIsLoading(true);
     DetailLoanStore.getListPayment(
       data?.id,
       (res) => {
+        isFetching.current = false;
         setIsLoading(false);
         setListPayment(res);
-        const newList = res?.filter((item) => item.status === 0);
-        setLastDay(
-          Math.min(
-            ...newList.map((element) => {
-              return new Date(element.payDate);
-            })
-          )
-        );
       },
       () => {
+        isFetching.current = false;
         setIsLoading(false);
       }
     );
-  };
+  }, [data?.id]);
 
   useEffect(() => {
     getData();
-  }, []);
+  }, [getData]);
 
   useEffect(() => {
-    return navigation.addListener('focus', () => {
-      getData();
-    });
-  }, [navigation]);
+    return navigation.addListener('focus', getData);
+  }, [navigation, getData]);
 
-  return (
-    <View style={{ marginVertical: 16, flex: 1 }}>
-      <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
-        {listPayment?.map((item, index) => (
-          <View
-            key={index}
-            style={{
-              backgroundColor: '#FFFFFF',
-              borderWidth: 1,
-              borderRadius: 8,
-              borderColor: '#E0E0E0',
-              marginBottom: 8,
-              padding: 16,
-            }}
-          >
-            <View
-              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-            >
-              <MText style={commonStyles.textNormal}>Kỳ thanh toán</MText>
-              <MText style={commonStyles.textNormalBold}>Kỳ {index + 1}</MText>
-            </View>
-            <View
-              style={{
-                height: 1,
-                backgroundColor: '#E0E0E0',
-                marginVertical: 8,
-              }}
-            />
-            <View
-              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-            >
-              <View style={{ flex: 1, paddingRight: 15 }}>
-                <MText style={commonStyles.textNormal}>Tổng phải trả</MText>
-              </View>
-              <MText
-                style={[commonStyles.textNormalBold, { color: '#F05123' }]}
-              >
-                {formatMoney(item?.totalMoney)} VNĐ
-              </MText>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                marginTop: 8,
-              }}
-            >
-              <View style={{ flex: 1, paddingRight: 15 }}>
-                <MText
-                  style={[
-                    commonStyles.textNormal,
-                    { color: '#828282', paddingLeft: 15 },
-                  ]}
-                >
-                  Nghĩa vụ phải trả Tima
-                </MText>
-              </View>
-              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
-                {formatMoney(item?.totalMoneyTima)} VNĐ
-              </MText>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                marginTop: 8,
-              }}
-            >
-              <View style={{ flex: 1, paddingRight: 15 }}>
-                <MText
-                  style={[
-                    commonStyles.textNormal,
-                    { color: '#828282', paddingLeft: 15 },
-                  ]}
+  const renderItem = useCallback(
+    ({ item, index }) => {
+      const isUnpaid = item?.status === 0;
+      return (
+        <View style={styles.card}>
+          <InfoRow
+            label="Kỳ thanh toán"
+            value={`Kỳ ${index + 1}`}
+            valueStyle={commonStyles.textNormalBold}
+          />
+          <View style={styles.divider} />
+          <InfoRow
+            label="Tổng phải trả"
+            value={`${formatMoney(item?.totalMoney)} VNĐ`}
+            valueStyle={[commonStyles.textNormalBold, styles.highlightValue]}
+          />
+          <InfoRow
+            label="Nghĩa vụ phải trả Tima"
+            value={`${formatMoney(item?.totalMoneyTima)} VNĐ`}
+            subRow
+            valueStyle={styles.mutedValue}
+            style={styles.rowSpacing}
+          />
+          <InfoRow
+            label="Nghĩa vụ phải trả CIMB"
+            value={`${formatMoney(item?.totalMoneyCIMB)} VNĐ`}
+            subRow
+            valueStyle={styles.mutedValue}
+            style={styles.rowSpacing}
+          />
+          <InfoRow
+            label="Ngày phải thanh toán"
+            value={formatDDMMYYY(item?.payDate)}
+            style={styles.rowSpacing}
+          />
+          <View style={styles.divider} />
+          <InfoRow
+            label="Trạng thái"
+            value={isUnpaid ? 'Chưa thanh toán' : 'Đã thanh toán'}
+            valueStyle={isUnpaid ? styles.statusUnpaid : styles.statusPaid}
+          />
+          {isUnpaid && (
+            <>
+              <View style={styles.divider} />
+              <View style={styles.buttonRow}>
+                <TouchableOpacity
+                  disabled={item.isDue !== 1}
+                  onPress={() => {
+                    navigation.dispatch(
+                      StackActions.push(ScreenNames.PaymentInfo, {
+                        loan: data,
+                        isFull: false,
+                      })
+                    );
+                  }}
                 >
-                  Nghĩa vụ phải trả CIMB
-                </MText>
+                  <LinearGradient
+                    colors={
+                      item.isDue === 1
+                        ? ['#FF7A00', '#EF4123']
+                        : ['#8A8A8A', '#D0CFCF']
+                    }
+                    style={styles.payButton}
+                  >
+                    <MText style={[commonStyles.textNormal, styles.whiteText]}>
+                      Thanh toán
+                    </MText>
+                  </LinearGradient>
+                </TouchableOpacity>
               </View>
-              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
-                {formatMoney(item?.totalMoneyCIMB)} VNĐ
-              </MText>
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                marginTop: 8,
-              }}
-            >
-              <View style={{ flex: 1, paddingRight: 15 }}>
-                <MText style={commonStyles.textNormal}>
-                  Ngày phải thanh toán
-                </MText>
-              </View>
-              <MText style={commonStyles.textNormal}>
-                {formatDDMMYYY(item?.payDate)}
-              </MText>
-            </View>
+            </>
+          )}
+        </View>
+      );
+    },
+    [data, navigation]
+  );
 
-            <View
-              style={{
-                height: 1,
-                backgroundColor: '#E0E0E0',
-                marginVertical: 8,
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={listPayment}
+        style={styles.list}
+        keyExtractor={(item, index) => String(item?.id ?? index)}
+        renderItem={renderItem}
+        ListFooterComponent={
+          <>
+            <TouchableOpacity
+              style={styles.settlementButton}
+              onPress={() => {
+                navigation.dispatch(
+                  StackActions.push(ScreenNames.PaymentAll, {
+                    loan: data,
+                    count: paymentCount,
+                  })
+                );
               }}
-            />
-
-            <View
-              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
             >
-              <View style={{ flex: 1, paddingRight: 15 }}>
-                <MText style={commonStyles.textNormal}>Trạng thái</MText>
-              </View>
-              <MText
-                style={[
-                  commonStyles.textNormal,
-                  { color: item?.status === 0 ? '#F05123' : '#27AE60' },
-                ]}
-              >
-                {item?.status === 0 ? 'Chưa thanh toán' : 'Đã thanh toán'}
+              <MText style={[commonStyles.textNormal, styles.settlementText]}>
+                Xem thông tin tất toán
               </MText>
+            </TouchableOpacity>
+            <View style={styles.footer}>
+              <MText style={styles.footerText}>Cung cấp bởi </MText>
+              <CIMBBank />
             </View>
-            {item.status === 0 && (
-              <>
-                <View
-                  style={{
-                    height: 1,
-                    backgroundColor: '#E0E0E0',
-                    marginVertical: 8,
-                  }}
-                />
-                {item?.status === 0 && item.isDue === 1 ? (
-                  <View style={{ flexDirection: 'row-reverse' }}>
-                    <TouchableOpacity
-                      onPress={() => {
-                        navigation.dispatch(
-                          StackActions.push(ScreenNames.PaymentInfo, {
-                            loan: data,
-                            isFull: false,
-                          })
-                        );
-                      }}
-                    >
-                      <LinearGradient
-                        colors={['#FF7A00', '#EF4123']}
-                        style={{
-                          paddingVertical: 8,
-                          borderRadius: 30,
-                          paddingHorizontal: 24,
-                        }}
-                      >
-                        <MText
-                          style={[
-                            commonStyles.textNormal,
-                            { color: '#FFFFFF' },
-                          ]}
-                        >
-                          Thanh toán
-                        </MText>
-                      </LinearGradient>
-                    </TouchableOpacity>
-                  </View>
-                ) : (
-                  <View style={{ flexDirection: 'row-reverse' }}>
-                    <LinearGradient
-                      colors={['#8A8A8A', '#D0CFCF']}
-                      style={{
-                        paddingVertical: 8,
-                        borderRadius: 30,
-                        paddingHorizontal: 24,
-                        backgroundColor: '#C7C7C7',
-                      }}
-                    >
-                      <MText
-                        style={[commonStyles.textNormal, { color: '#FDFDFD' }]}
-                      >
-                        Thanh toán
-                      </MText>
-                    </LinearGradient>
-                  </View>
-                )}
-              </>
-            )}
-          </View>
-        ))}
-        <TouchableOpacity
-          style={{
-            borderRadius: 30,
-            borderWidth: 1,
-            borderColor: '#EF592E',
-            alignItems: 'center',
-            paddingVertical: 10,
-            backgroundColor: '#FFEAD8',
-            marginTop: 10,
-          }}
-          onPress={() => {
-            navigation.dispatch(
-              StackActions.push(ScreenNames.PaymentAll, {
-                loan: data,
-                count: DetailLoanStore.listPayment.length,
-              })
-            );
-          }}
-        >
-          <MText style={[commonStyles.textNormal, { color: '#EF592E' }]}>
-            Xem thông tin tất toán
-          </MText>
-        </TouchableOpacity>
-        <View
-          style={{
-            marginTop: 8,
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <MText style={{ fontSize: 12, color: '#333333' }}>
-            Cung cấp bởi{' '}
-          </MText>
-          <CIMBBank />
-        </View>
-      </ScrollView>
+          </>
+        }
+      />
       <Loading isLoading={isLoading} />
     </View>
   );
 });
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 16,
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderRadius: 8,
+    borderColor: '#E0E0E0',
+    marginBottom: 8,
+    padding: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  rowSpacing: {
+    marginTop: 8,
+  },
+  labelWrapper: {
+    flex: 1,
+    paddingRight: 15,
+  },
+  subLabel: {
+    color: '#828282',
+    paddingLeft: 15,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E0E0E0',
+    marginVertical: 8,
+  },
+  highlightValue: {
+    color: '#F05123',
+  },
+  mutedValue: {
+    color: '#828282',
+  },
+  statusUnpaid: {
+    color: '#F05123',
+  },
+  statusPaid: {
+    color: '#27AE60',
+  },
+  buttonRow: {
+    flexDirection: 'row-reverse',
+  },
+  payButton: {
+    paddingVertical: 8,
+    borderRadius: 30,
+    paddingHorizontal: 24,
+  },
+  whiteText: {
+    color: '#FFFFFF',
+  },
+  settlementButton: {
+    borderRadius: 30,
+    borderWidth: 1,
+    borderColor: '#EF592E',
+    alignItems: 'center',
+    paddingVertical: 10,
+    backgroundColor: '#FFEAD8',
+    marginTop: 10,
+  },
+  settlementText: {
+    color: '#EF592E',
+  },
+  footer: {
+    marginTop: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: 12,
+    color: '#333333',
+  },
+});