react-native-timacare 3.0.10 → 3.0.12-beta

package/src/screens/loan/PreviewSchedulePaymentTopup.tsx

@@ -0,0 +1,304 @@
+//@ts-nocheck
+import React from 'react';
+import {
+  Alert,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { observer } from 'mobx-react-lite';
+import {
+  useNavigation,
+  StackActions,
+  CommonActions,
+} from '@react-navigation/native';
+import MHeader from '../../components/MHeader';
+import { Api } from '../../services/api';
+import Loading from '../../components/Loading';
+import { MText } from '../../components/MText';
+import { formatDDMMYYY, formatMoney } from '../../utils';
+import LinearGradient from 'react-native-linear-gradient';
+import { ScreenNames } from '../../navigation';
+
+export const PreviewSchedulePaymentTopup = observer(
+  function PreviewSchedulePaymentTopup(props: any) {
+    const navigation = useNavigation();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [data, setData] = React.useState<any>(null);
+
+    const getData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await Api.getInstance().getPlanPaymentV2(
+          props.route.params?.id
+        );
+        setIsLoading(false);
+        if (response.kind === 'ok') {
+          if (response.data.meta.errorCode === 200) {
+            setData(response.data.data);
+          } else {
+            Alert.alert('Thông báo', response.data.meta.errorMessage);
+          }
+        } else {
+          Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
+        }
+      } catch (error) {
+        setIsLoading(false);
+        Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
+      }
+    };
+    React.useEffect(() => {
+      const unsubscribe = navigation.addListener('focus', () => {
+        getData();
+      });
+      return unsubscribe;
+    }, [navigation]);
+
+    React.useEffect(() => {
+      const unsubscribe = navigation.addListener('blur', () => {
+        setData(null);
+      });
+      return unsubscribe;
+    }, [navigation]);
+
+    return (
+      <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
+        <MHeader
+          title={`Lịch thanh toán dự kiến`}
+          onBack={() => navigation.goBack()}
+        />
+        <SafeAreaView style={{ flex: 1 }}>
+          <ScrollView>
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: '#FF8E4F',
+                borderRadius: 8,
+                margin: 16,
+                padding: 16,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <MText style={{ fontSize: 12, color: '#333333' }}>
+                  Mã HĐ giải ngân
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#333333',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  HD-{props.route?.params?.id}
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 16,
+                }}
+              >
+                <MText style={{ fontSize: 12, color: '#333333' }}>
+                  Số tiền vay
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#EF592E',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {formatMoney(data?.loanAmount)} đ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 16,
+                }}
+              >
+                <MText style={{ fontSize: 12, color: '#333333' }}>
+                  Bảo hiểm
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#333333',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {formatMoney(data?.totalMoneyInsurance)} đ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 16,
+                }}
+              >
+                <MText style={{ fontSize: 12, color: '#333333' }}>
+                  Thời hạn
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#333333',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {data?.loanTime} tháng
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginTop: 16,
+                }}
+              >
+                <MText style={{ fontSize: 12, color: '#333333' }}>
+                  Ngày dự kiến giải ngân
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#333333',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {formatDDMMYYY(data?.expectedDisbursementDate)}
+                </MText>
+              </View>
+            </View>
+
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: '#FF8E4F',
+                borderRadius: 8,
+                marginHorizontal: 16,
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: '#FFF3E9',
+                  height: 32,
+                  borderTopLeftRadius: 8,
+                  borderTopRightRadius: 8,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <MText
+                  style={{
+                    flex: 1,
+                    textAlign: 'center',
+                    color: '#333333',
+                    fontSize: 12,
+                  }}
+                >
+                  Ngày thanh toán
+                </MText>
+                <MText
+                  style={{
+                    flex: 1,
+                    textAlign: 'center',
+                    color: '#333333',
+                    fontSize: 12,
+                  }}
+                >
+                  Số tiền thanh toán
+                </MText>
+              </View>
+              {data?.listPaymentSchedule?.map((item: any, index: number) => {
+                return (
+                  <View
+                    key={index}
+                    style={{
+                      paddingVertical: 16,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      borderBottomWidth:
+                        index === data?.listPaymentSchedule?.length - 1 ? 0 : 1,
+                      borderColor: '#DADADA',
+                    }}
+                  >
+                    <MText
+                      style={{
+                        flex: 1,
+                        textAlign: 'center',
+                        color: '#999999',
+                        fontSize: 12,
+                      }}
+                    >
+                      {formatDDMMYYY(item?.payDate)}
+                    </MText>
+                    <MText
+                      style={{
+                        flex: 1,
+                        textAlign: 'center',
+                        color: '#333333',
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {formatMoney(item?.totalMoneyNeedPayment)} đ
+                    </MText>
+                  </View>
+                );
+              })}
+            </View>
+          </ScrollView>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.dispatch(
+                CommonActions.reset({
+                  index: 1,
+                  routes: [{ name: ScreenNames.Main }],
+                })
+              );
+            }}
+            style={{
+              marginHorizontal: 16,
+              marginVertical: 16,
+            }}
+          >
+            <LinearGradient
+              colors={['#FF7A00', '#EF4123']}
+              style={{
+                alignItems: 'center',
+                borderRadius: 30,
+                height: 40,
+                justifyContent: 'center',
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 16,
+                }}
+              >
+                Xác nhận
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        </SafeAreaView>
+        <Loading isLoading={isLoading} />
+      </View>
+    );
+  }
+);