@tima2025/react-native-timalender 1.0.0

package/src/screens/InvestNew/Screens/PersonalLoan.tsx

@@ -0,0 +1,369 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useNavigation } from '@react-navigation/native';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import {
+  Dimensions,
+  FlatList,
+  Image,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useDispatch, useSelector } from 'react-redux';
+import HomeImages from '../../../assets/images/HomePage';
+import Colors from '../../../common/Colors';
+import Container from '../../../common/Container';
+import FlexRow from '../../../common/FlexRow';
+import Loading from '../../../common/Loading';
+import {
+  actuatedNormalize,
+  numberWithCommas,
+  timeDifference,
+} from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import { personalLoan } from '../../../components/Features/Loans/loanSlice';
+import Screens from '../../../components/Navigation/Screens';
+import { selectLoading } from '../../../components/Redux/selector';
+import { AppDispatch } from '../../../components/Redux/store';
+
+const PersonalLoan = (_props) => {
+  // const { tabIndex } = props;
+
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoading = useSelector(selectLoading);
+  const navigation = useNavigation();
+  const [data, setData] = useState<any>([]);
+  const [currentTime, setCurrentTime] = useState<any>(null);
+
+  useEffect(() => {
+    getPersonalLoan();
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getPersonalLoan();
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  useEffect(() => {
+    let interval = setInterval(() => {
+      if (currentTime > 0) {
+        setCurrentTime(currentTime - 1);
+      } else {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [currentTime]);
+
+  const getPersonalLoan = async () => {
+    const resp: any = await dispatch(personalLoan());
+    console.log('resp personal-----', resp);
+    if (resp.payload.meta.errCode === 200) {
+      const resp_data = resp?.payload?.data;
+      setData(resp_data);
+    } else {
+      // WToastShowError(resp.payload.meta.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp.payload.meta.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  const _renderItem = (item: any, _index: number) => {
+    const currentCountdown = moment(new Date()).unix();
+    const nextCountdown = moment(item?.lenderPushedDate)
+      .add(15, 'minutes')
+      .unix();
+    const totalSeconds = nextCountdown - currentCountdown;
+    setCurrentTime(totalSeconds);
+
+    return (
+      <View
+        style={{
+          borderRadius: 4,
+          // elevation: 2,
+          // margin: 8,
+          shadowColor: '#00000040',
+          shadowOffset: {
+            width: 2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 1,
+          marginBottom: actuatedNormalize(10),
+        }}
+      >
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate(Screens.Detail, {
+              item,
+              type: 'los',
+              access_token: item?.access_token,
+            })
+          }
+        >
+          <View
+            style={{
+              padding: 10,
+              borderRadius: 4,
+              backgroundColor: 'white',
+            }}
+          >
+            <FlexRow style={{ alignItems: 'center', paddingBottom: 8 }}>
+              <Image
+                source={
+                  item?.customer?.gender === 1
+                    ? HomeImages.avatar_girl
+                    : HomeImages.avatar_boy
+                }
+                style={{
+                  borderWidth: 1,
+                  borderRadius: 24,
+                  borderColor: '#d7d7d7',
+                  width: 48,
+                  height: 48,
+                }}
+              />
+              <View style={{ paddingHorizontal: 10, flex: 1 }}>
+                <RText
+                  style={{
+                    paddingHorizontal: 8,
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    color: '#1D1B1B',
+                  }}
+                >
+                  {item?.customer?.fullName}
+                </RText>
+                <RText
+                  style={{
+                    paddingHorizontal: 8,
+                    fontSize: 12,
+                    color: '#1D1B1B',
+                  }}
+                >
+                  {timeDifference(item?.createDate)}
+                </RText>
+              </View>
+              {totalSeconds === 0 ? (
+                <View />
+              ) : (
+                <RText textStyle={{ color: Colors.ORANGE_H }}>
+                  {moment.utc(totalSeconds * 1000).format('mm:ss')}
+                </RText>
+              )}
+              <Icon name="chevron-forward" size={24} />
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_dollar}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Số tiền vay'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#EA4D20',
+                }}
+              >
+                {numberWithCommas(item?.totalMoney)} VNĐ
+              </RText>
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_percent}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Lợi nhuận'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#444444',
+                }}
+              >
+                {item?.rate.toFixed(2)}%/năm
+              </RText>
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_debt}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Thời hạn vay'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#444444',
+                }}
+              >
+                {item?.loanTime} tháng
+              </RText>
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_product}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Hình thức vay'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#444444',
+                }}
+              >
+                {item?.productCredit?.name}
+              </RText>
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_type_payment}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Hình thức trả nợ'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#444444',
+                }}
+              >
+                {item?.rateTypeName}
+              </RText>
+            </FlexRow>
+            <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+              <Image
+                source={HomeImages.ic_location}
+                style={{ width: 22, height: 22 }}
+              />
+              <RText
+                style={{
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  color: '#1D1B1BF0',
+                }}
+              >
+                {'Địa chỉ'}
+              </RText>
+              <RText
+                style={{
+                  flex: 1,
+                  textAlign: 'right',
+                  paddingHorizontal: 8,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#444444',
+                }}
+              >
+                {item?.customer?.fullAddress !== undefined &&
+                item?.customer?.fullAddress !== null
+                  ? item?.customer?.fullAddress
+                  : ''}
+              </RText>
+            </FlexRow>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  return (
+    <Container>
+      <FlatList
+        data={data}
+        keyExtractor={(item, index) => index.toString()}
+        renderItem={({ item, index }) => _renderItem(item, index)}
+        removeClippedSubviews={true}
+        onRefresh={getPersonalLoan}
+        refreshing={false}
+        overScrollMode={'always'}
+        ListEmptyComponent={() => {
+          return (
+            <View
+              style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: (Dimensions.get('window').height / 4) * 3,
+              }}
+            >
+              <RText style={{ fontSize: 14, color: '#1b1b1b' }}>
+                Không có đơn vay
+              </RText>
+            </View>
+          );
+        }}
+      />
+      {isLoading && <Loading />}
+    </Container>
+  );
+};
+
+export default PersonalLoan;

package/src/screens/InvestNew/index.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import RText from '../../common/RText';
+import HomeLoan from './Screens/HomeLoan';
+import PersonalLoan from './Screens/PersonalLoan';
+
+export const InvestNew = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+  return (
+    <Container isStatusBar>
+      <AppHeader title="DANH SÁCH KHOẢN CHỜ ĐẦU TƯ" />
+      <FlexRow>
+        <TouchableOpacity
+          onPress={() => setTabIndex(0)}
+          style={{
+            width: '50%',
+            alignItems: 'center',
+            borderBottomWidth: 2,
+            borderBottomColor: tabIndex === 0 ? Colors.ORANGE : Colors.WHITE,
+            paddingVertical: 6,
+          }}
+        >
+          <RText
+            textStyle={{
+              paddingVertical: 10,
+              color: tabIndex === 0 ? Colors.ORANGE : Colors.GREY,
+              fontWeight: tabIndex === 0 ? '600' : '400',
+            }}
+          >
+            Dành cho tất cả NĐT
+          </RText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => setTabIndex(1)}
+          style={{
+            width: '50%',
+            alignItems: 'center',
+            borderBottomWidth: 2,
+            borderBottomColor: tabIndex === 1 ? Colors.ORANGE : Colors.WHITE,
+            paddingVertical: 6,
+          }}
+        >
+          <RText
+            textStyle={{
+              paddingVertical: 10,
+              color: tabIndex === 1 ? Colors.ORANGE : Colors.GREY,
+              fontWeight: tabIndex === 1 ? '600' : '400',
+            }}
+          >
+            Dành cho bạn
+          </RText>
+        </TouchableOpacity>
+      </FlexRow>
+      {tabIndex === 0 ? (
+        <HomeLoan tabIndex={(val: number) => setTabIndex(val)} />
+      ) : (
+        <PersonalLoan tabIndex={tabIndex} />
+      )}
+      {/* <PersonalLoan /> */}
+    </Container>
+  );
+};

package/src/screens/LinkSuccess/index.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Image, View } from 'react-native';
+import imageBanks from '../../assets/images/Banks';
+import AppHeader from '../../common/AppHeader';
+import Button from '../../common/Button';
+import Container from '../../common/Container';
+import { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import Screens from '../../components/Navigation/Screens';
+
+export const LinkSuccess = ({ navigation }: any) => {
+  return (
+    <Container isStatusBar>
+      <AppHeader title="LIÊN KẾT NGÂN HÀNG" />
+      <View
+        style={{
+          backgroundColor: 'white',
+          alignItems: 'center',
+          paddingHorizontal: actuatedNormalize(20),
+          marginTop: actuatedNormalize(24),
+        }}
+      >
+        <Image
+          source={imageBanks.link_success}
+          style={{
+            width: '60%',
+            height: 150,
+            resizeMode: 'contain',
+          }}
+        />
+        <RText
+          style={{
+            textAlign: 'center',
+            color: '#535353',
+            fontSize: 26,
+            paddingTop: 16,
+            fontWeight: '300',
+            paddingBottom: 4,
+          }}
+        >
+          {'Chúc mừng bạn'.toUpperCase()}
+        </RText>
+        <RText style={{ textAlign: 'center', color: '#535353', fontSize: 16 }}>
+          Đã liên kết ngân hàng thành công
+        </RText>
+        <Button
+          buttonStyle={{ marginTop: 24 }}
+          text="Hoàn tất"
+          textStyle={{ color: 'white' }}
+          onPress={() => {
+            navigation.navigate(Screens.MainTab);
+          }}
+        />
+      </View>
+    </Container>
+  );
+};

package/src/screens/ListLoan/Components/ListLoan.tsx

@@ -0,0 +1,155 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import { useNavigation } from '@react-navigation/native';
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Colors from '../../../common/Colors';
+import Container from '../../../common/Container';
+import FlexRow from '../../../common/FlexRow';
+import formatNumber from '../../../common/FormatNumber';
+import HeaderClose from '../../../common/HeaderClose/HeaderClose';
+import { actuatedNormalize, numberWithCommas } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import Screens from '../../../components/Navigation/Screens';
+
+const ListLoan = ({ item, index, currentStatus, typeName }: any) => {
+  const navigation = useNavigation();
+
+  const renderTypeBackground = (status: number) => {
+    switch (status) {
+      case 1:
+        return '#28C66A';
+      case 2:
+        return typeName === 'GoldPlus' && item?.dpd >= 45
+          ? Colors.RED
+          : typeName === 'Gold' && item?.dpd > 90
+          ? Colors.RED
+          : '#28C66A';
+      case 3:
+        return '#F2C94C';
+      case 4:
+        return '#BDBDBD';
+
+      default:
+        break;
+    }
+    // 1: '#28C66A',
+    // 2: '#28C66A',
+    // 3: '#F2C94C',
+    // 4: '#BDBDBD',
+  };
+
+  function statusLoan(item: any) {
+    const status = item.loanStatus;
+    return (
+      <FlexRow
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: renderTypeBackground(status),
+          borderRadius: 10,
+        }}
+      >
+        <RText
+          style={{
+            paddingHorizontal: 6,
+            paddingVertical: 5,
+            fontSize: 9,
+            color: 'white',
+          }}
+        >
+          {item?.loanStatusName}
+        </RText>
+      </FlexRow>
+    );
+  }
+
+  return (
+    <Container>
+      <HeaderClose onPress={() => navigation.navigate('MyBank.Main')} />
+      <View key={index} style={{ paddingHorizontal: actuatedNormalize(16) }}>
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={() =>
+            navigation.navigate(Screens.DetailHistory, {
+              item,
+              tabIndex: currentStatus,
+            })
+          }
+        >
+          <FlexRow
+            style={{
+              paddingVertical: 12,
+            }}
+          >
+            <View
+              style={{
+                width: 30,
+              }}
+            >
+              <RText
+                style={{ fontSize: 10, color: '#000000', textAlign: 'center' }}
+              >
+                {index + 1}.
+              </RText>
+            </View>
+            <View style={{ flex: 1 }}>
+              <RText
+                style={{ fontSize: 10, color: '#000000', fontWeight: 'bold' }}
+              >
+                {item?.customerName}
+              </RText>
+              <RText style={{ fontSize: 10, color: '#777777', paddingTop: 2 }}>
+                {item?.loanCode}
+              </RText>
+            </View>
+            <View style={{ flex: 1 }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: '#000000',
+                  textAlign: 'center',
+                }}
+              >
+                {numberWithCommas(item?.loanTotalMoneyCurrent)} đ
+              </RText>
+            </View>
+            <View style={{ flex: 1, alignItems: 'flex-end' }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: '#000000',
+                  textAlign: 'center',
+                }}
+              >
+                {numberWithCommas(item?.moneyInterestExpected)} đ
+              </RText>
+              <RText
+                textStyle={{
+                  fontSize: actuatedNormalize(10),
+                  color: Colors.GRAY_3,
+                  paddingTop: actuatedNormalize(4),
+                }}
+              >
+                PIT: {item?.pitMoney > 0 ? '-' : ''}{' '}
+                {formatNumber(item?.pitMoney)} đ
+              </RText>
+            </View>
+
+            <View
+              style={{
+                flex: 1,
+                alignItems: 'flex-end',
+              }}
+            >
+              {statusLoan(item)}
+            </View>
+          </FlexRow>
+        </TouchableOpacity>
+        {/* <View style={{backgroundColor: 'rgba(189, 189, 189, 1)', height: 1}} /> */}
+      </View>
+    </Container>
+  );
+};
+
+export default memo(ListLoan);