@tima2025/react-native-timalender 1.0.0

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

@@ -0,0 +1,400 @@
+/* eslint-disable react-native/no-inline-styles */
+//@ts-nocheck
+import { useNavigation } from '@react-navigation/native';
+import 'dayjs/locale/vi';
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Dimensions,
+  FlatList,
+  Image,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, useSelector } from 'react-redux';
+import HomeImages from '../../../assets/images/HomePage';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import Loading from '../../../common/Loading';
+import { actuatedNormalize, numberWithCommas } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import { IoIconApp } from '../../../common/VectorIcon/Icon';
+import {
+  lockLoan,
+  searchLoan,
+} from '../../../components/Features/Loans/loanSlice';
+import Screens from '../../../components/Navigation/Screens';
+import { selectLoading } from '../../../components/Redux/selector';
+import { AppDispatch } from '../../../components/Redux/store';
+import { setClientToken } from '../../../controllers/Client';
+const dayjs = require('dayjs');
+const relativeTime = require('dayjs/plugin/relativeTime');
+dayjs.extend(relativeTime);
+
+const HomeLoan = (props) => {
+  const { tabIndex } = props;
+  const dispatch = useDispatch<AppDispatch>();
+  const navigation = useNavigation();
+  const [data, setData] = useState([]);
+  const isLoading = useSelector(selectLoading);
+
+  useEffect(() => {
+    getListLoan();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getListLoan = async () => {
+    const resp: any = await dispatch(searchLoan());
+    setData(resp?.payload?.data);
+  };
+
+  const addToCart = async (item: any) => {
+    setClientToken(item?.access_token);
+    setTimeout(async () => {
+      const resp: any = await dispatch(lockLoan(item?.id));
+      console.log('resp lock---', resp);
+      switch (resp.payload.meta?.errCode) {
+        case 200:
+          tabIndex(1);
+          // WToastShowSuccess(
+          //   'Bạn vui lòng chờ trong giây lát để nhận đơn về giỏ',
+          // );
+          showMessage({
+            message: 'Thông báo',
+            description: 'Bạn vui lòng chờ trong giây lát để nhận đơn về giỏ',
+            type: 'info',
+            icon: 'success',
+            backgroundColor: Colors.SUCCESS,
+          });
+          break;
+        default:
+          // WToastShowError(resp.payload.meta.errMessage);
+          showMessage({
+            message: 'Thông báo',
+            description: resp.payload.meta.errMessage,
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          break;
+      }
+    }, 500);
+  };
+
+  const onAlert = (item: any) => {
+    Alert.alert(
+      'Vui lòng xác nhận lại',
+      'Bạn có chắc chắn muốn nhận đơn về giở của mình không?',
+      [
+        {
+          text: 'Huỷ bỏ',
+        },
+        { text: 'Xác nhận', onPress: () => addToCart(item) },
+      ]
+    );
+  };
+
+  function _renderItem(item: any, _index: number) {
+    if (!item?.customer) {
+      return <View />;
+    }
+    return (
+      <View
+        style={{
+          borderRadius: 4,
+          shadowColor: '#00000040',
+          shadowOffset: {
+            width: 2,
+            height: 2,
+          },
+          shadowRadius: 8,
+          shadowOpacity: 1,
+        }}
+      >
+        <TouchableOpacity
+          activeOpacity={0.5}
+          disabled
+          onPress={() =>
+            navigation.navigate(Screens.Detail, { item, type: 'all' })
+          }
+        >
+          <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',
+                  }}
+                >
+                  {dayjs(item?.createDate).locale('vi').fromNow()}
+                </RText>
+              </View>
+              {/* <Icon name="chevron-forward" size={20} /> */}
+            </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>
+            <TouchableOpacity
+              onPress={() => onAlert(item)}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderRadius: 40,
+                borderColor: Colors.ORANGE_H,
+                height: actuatedNormalize(40),
+                marginBottom: actuatedNormalize(16),
+                marginTop: actuatedNormalize(8),
+              }}
+            >
+              <IoIconApp
+                name="cart-outline"
+                size={24}
+                color={Colors.ORANGE_H}
+              />
+              <RText
+                textStyle={{
+                  color: Colors.ORANGE_H,
+                  paddingLeft: actuatedNormalize(8),
+                }}
+              >
+                Nhận đơn về giỏ
+              </RText>
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item, index }) => _renderItem(item, index)}
+          onRefresh={getListLoan}
+          refreshing={false}
+          removeClippedSubviews={true}
+          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>
+            );
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export default HomeLoan;