react-native-timacare 0.0.2 → 0.0.4

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

@@ -0,0 +1,376 @@
+//@ts-nocheck
+import { StackActions, useNavigation } from '@react-navigation/native';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+import { Clipboard, ScrollView, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  CIMBBank,
+  IconCopy,
+  IconTechcombank,
+  SpanIcon,
+} from '../../assets/icons';
+import { Button } from '../../components';
+import Loading from '../../components/Loading';
+import { MText } from '../../components/MText';
+import { ScreenNames } from '../../navigation';
+import { formatDDMMYYY, formatMoney } from '../../utils';
+import { commonStyles } from '../CommonStyles';
+import DetailLoanStore from './store';
+
+interface IProps {
+  data: any;
+}
+export const Info = observer(function Info({ data }: IProps) {
+  const navigation = useNavigation();
+  const [isShow, setIsShow] = useState(false);
+  const copyToClipboard = (string) => {
+    Clipboard.setString(string);
+  };
+  const getData = () => {
+    DetailLoanStore.getDetailLoan(data?.id);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <View style={{ margin: 16, flex: 1 }}>
+      <ScrollView style={{ flex: 1 }}>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: '#E0E0E0',
+            backgroundColor: 'white',
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 8,
+          }}
+        >
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Mã đơn vay giải ngân
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              TC-{DetailLoanStore.loan?.codeId}
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Mã đơn vay CIMB
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {DetailLoanStore.loan?.cimbLoan}
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Số tiền giải ngân
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {formatMoney(DetailLoanStore.loan?.loanAmount)} VND
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Thời hạn
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {DetailLoanStore.loan?.loanTime} tháng
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Ngày giải ngân
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {formatDDMMYYY(DetailLoanStore?.loan?.disbursementAt)}
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Ngày đến hạn tiếp theo
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {formatDDMMYYY(DetailLoanStore?.loan?.nextDate)}
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 16,
+            }}
+          >
+            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
+              Trạng thái Đơn vay
+            </MText>
+            <MText style={[commonStyles.textNormalBold, {}]}>
+              {DetailLoanStore?.loan?.status}
+            </MText>
+          </View>
+        </View>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: '#E0E0E0',
+            backgroundColor: 'white',
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 8,
+          }}
+        >
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+          >
+            <MText style={[commonStyles.textNormal, { color: '#333333' }]}>
+              Tổng phải trả
+            </MText>
+            <TouchableOpacity
+              style={{ flexDirection: 'row', alignItems: 'center' }}
+              onPress={() => setIsShow(!isShow)}
+            >
+              <MText
+                style={[
+                  commonStyles.textNormalBold,
+                  { color: '#F05123', paddingRight: 5 },
+                ]}
+              >
+                {formatMoney(
+                  DetailLoanStore?.loan?.totalMoneyCIMB +
+                    DetailLoanStore?.loan?.totalMoneyTima
+                )}{' '}
+                VNĐ
+              </MText>
+              <TouchableOpacity onPress={() => setIsShow(!isShow)}>
+                <SpanIcon />
+              </TouchableOpacity>
+            </TouchableOpacity>
+          </View>
+          {isShow && (
+            <View style={{ paddingHorizontal: 16 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  Nghĩa vụ phải trả Tima
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.totalMoneyTima)} VNĐ
+                </MText>
+              </View>
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText
+                  style={[
+                    commonStyles.textNormal,
+                    { color: '#828282', marginLeft: 16 },
+                  ]}
+                >
+                  Phí phải thanh toán
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.timaMoneyConsultant)} VNĐ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText
+                  style={[
+                    commonStyles.textNormal,
+                    { color: '#828282', marginLeft: 16 },
+                  ]}
+                >
+                  Phí phạt trả chậm
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.timaMoneyFineLate)} VNĐ
+                </MText>
+              </View>
+
+              {/* CIMB */}
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  Tiền phải thanh toán CIMB
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.totalMoneyCIMB)} VNĐ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText
+                  style={[
+                    commonStyles.textNormal,
+                    { color: '#828282', marginLeft: 16 },
+                  ]}
+                >
+                  Gốc phải thanh toán
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.moneyOriginal)} VNĐ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText
+                  style={[
+                    commonStyles.textNormal,
+                    { color: '#828282', marginLeft: 16 },
+                  ]}
+                >
+                  Lãi phải thanh toán
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.moneyInterest)} VNĐ
+                </MText>
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  marginTop: 8,
+                }}
+              >
+                <MText
+                  style={[
+                    commonStyles.textNormal,
+                    { color: '#828282', marginLeft: 16 },
+                  ]}
+                >
+                  Phí phạt trả chậm
+                </MText>
+                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
+                  {formatMoney(DetailLoanStore?.loan?.moneyFineInterestLate)}{' '}
+                  VNĐ
+                </MText>
+              </View>
+              <View
+                style={{
+                  height: 1,
+                  backgroundColor: '#E0E0E0',
+                  marginHorizontal: -16,
+                  marginTop: 8,
+                }}
+              />
+            </View>
+          )}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 8,
+            }}
+          >
+            <MText>Trạng thái</MText>
+            <MText style={[commonStyles.textNormal, { color: '#F05123' }]}>
+              Chưa thanh toán
+            </MText>
+          </View>
+        </View>
+      </ScrollView>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.dispatch(
+            StackActions.push(ScreenNames.PaymentInfo, {
+              loan: data,
+              isFull: false,
+            })
+          );
+        }}
+      >
+        <LinearGradient
+          colors={['#FF7A00', '#EF4123']}
+          style={{
+            borderRadius: 30,
+            paddingHorizontal: 24,
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 40,
+          }}
+        >
+          <MText style={[commonStyles.textNormalBold, { color: '#FDFDFD' }]}>
+            Thanh toán
+          </MText>
+        </LinearGradient>
+      </TouchableOpacity>
+      {/* <View
+        style={{
+          marginBottom: 8,
+          marginTop: 8,
+          flexDirection: "row",
+          justifyContent: "center",
+        }}
+      >
+        <MText style={{ fontSize: 12, color: "#333333" }}>Cung cấp bởi </MText>
+        <CIMBBank />
+      </View> */}
+      <Loading isLoading={DetailLoanStore.isLoading} />
+    </View>
+  );
+});

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

@@ -0,0 +1,261 @@
+//@ts-nocheck
+import { StackActions, useNavigation } from '@react-navigation/native';
+import { observer } from 'mobx-react-lite';
+import moment from 'moment';
+import React, { useEffect } from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { CIMBBank } from '../../assets/icons';
+import Loading from '../../components/Loading';
+import { MText } from '../../components/MText';
+import { ScreenNames } from '../../navigation';
+import { color } from '../../theme';
+import { formatDDMMYYY, formatMoney } from '../../utils';
+import { commonStyles } from '../CommonStyles';
+import DetailLoanStore from './store';
+
+interface IProps {
+  data: any;
+}
+
+export const Payment = observer(function Payment({ data }: IProps) {
+  const navigation = useNavigation();
+
+  const getData = () => {
+    DetailLoanStore.getListPayment(data?.id);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  useEffect(() => {
+    return navigation.addListener('focus', () => {
+      getData();
+    });
+  }, [navigation]);
+
+  return (
+    <View style={{ marginVertical: 16, flex: 1 }}>
+      <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
+        {DetailLoanStore.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 },
+                  ]}
+                >
+                  Nghĩa vụ phải trả CIMB
+                </MText>
+              </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
+              style={{
+                height: 1,
+                backgroundColor: '#E0E0E0',
+                marginVertical: 8,
+              }}
+            />
+
+            <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>
+            </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: '#E0E0E0',
+            alignItems: 'center',
+            paddingVertical: 10,
+            backgroundColor: '#FFFFFF',
+          }}
+          onPress={() => {
+            navigation.dispatch(
+              StackActions.push(ScreenNames.PaymentAll, {
+                loan: data,
+                count: DetailLoanStore.listPayment.length,
+              })
+            );
+          }}
+        >
+          <MText style={[commonStyles.textNormal, { color: '#333333' }]}>
+            Tất toán hợp đồng
+          </MText>
+        </TouchableOpacity>
+      </ScrollView>
+
+      {/* <View
+        style={{
+          marginTop: 8,
+          flexDirection: "row",
+          justifyContent: "center",
+          marginBottom: 8,
+        }}
+      >
+        <MText style={{ fontSize: 12, color: "#333333" }}>Cung cấp bởi </MText>
+        <CIMBBank />
+      </View> */}
+      <Loading isLoading={DetailLoanStore.isLoading} />
+    </View>
+  );
+});

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

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { CIMBBank, IconBack } from '../../../assets/icons';
+import { CIMBBank, IconBack } from '../../assets/icons';
 import { MText } from '../../components/MText';
 import { ScreenNames } from '../../navigation';
 import { color } from '../../theme';

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

@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { CIMBBank, IconBack, IconCopy, IconTech } from '../../../assets/icons';
+import { CIMBBank, IconBack, IconCopy, IconTech } from '../../assets/icons';
 import Loading from '../../components/Loading';
 import MButton from '../../components/MButton';
 import { MText } from '../../components/MText';
@@ -47,10 +47,7 @@ export const PaymentInfo = observer(function PaymentInfo(props: any) {
 
   return (
     <View style={{ flex: 1 }}>
-      <Image
-        source={require('../../../assets/img/home.png')}
-        style={logoView}
-      />
+      <Image source={require('../../assets/img/home.png')} style={logoView} />
       <SafeAreaView style={{ flex: 1 }}>
         <View
           style={[