@tima2025/react-native-timalender 1.0.0

package/lib/commonjs/screens/BuyDebt/Components/ListPending/ListPending.js.flow

@@ -0,0 +1,718 @@
+//@ts-nocheck
+import { useNavigation } from '@react-navigation/native';
+import { filter, flatten, groupBy, reduce, sortBy } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import { FlatList, RefreshControl, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import DebtImages from '../../../../assets/images/Debt';
+import InvestNewImages from '../../../../assets/images/InvestNew';
+import Colors from '../../../../common/Colors';
+import Container from '../../../../common/Container';
+import FlexRow from '../../../../common/FlexRow';
+import formatNumber from '../../../../common/FormatNumber';
+import LazyImage from '../../../../common/LazyImage';
+import Loading from '../../../../common/Loading';
+import { actuatedNormalize, Shadow } from '../../../../common/Metrics';
+import RText from '../../../../common/RText';
+import SpaceBetween from '../../../../common/SpaceBetween';
+import {
+  IoIconApp,
+  MaterialCommunityIconApp,
+} from '../../../../common/VectorIcon/Icon';
+import {
+  cancelBuyingDebts,
+  ConfirmBuyingDebts,
+  getWaitingBuyingDebtsTrading,
+} from '../../../../components/Features/Debt/debtSlice';
+import { getMoneyInSafe } from '../../../../components/Features/Lender/lenderSlice';
+import Screens from '../../../../components/Navigation/Screens';
+import { selectLoading } from '../../../../components/Redux/selector';
+import { useAppDispatch } from '../../../../components/Redux/store';
+import { GroupedLoansByLender, Loan } from '../../../../interface';
+import ModalAccept from './ModalAccept';
+import PopoverTime from './PopoverTime';
+import TableHead from './TableHead';
+
+const ListPending = (props: any) => {
+  const navigation = useNavigation();
+  const { openBack } = props;
+  const touchRef = useRef<any>();
+  const isLoading = useSelector(selectLoading);
+  const dispatch = useAppDispatch();
+  const [checkAll, setCheckAll] = useState(true);
+  const [openAccept, setOpenAccept] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [data, setData] = useState<any>([]);
+  const [totalMoneyByLender, setTotalMoneyByLender] = useState('');
+  const [totalChoose, setTotalChoose] = useState<Array<Loan>>([]);
+  const [totalMoneyCurrent, setTotalMoneyCurrent] = useState<{
+    totalPrin: number;
+    totalMoneyCurrent: number;
+    totalInterest: number;
+  }>({
+    totalPrin: 0,
+    totalMoneyCurrent: 0,
+    totalInterest: 0,
+  });
+  const [open, setOpen] = useState(false);
+  const [params, setParams] = useState({
+    time: '-111',
+    money: 0,
+  });
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getData();
+      getMoneyByLender();
+    });
+    return unsubscribe;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params]);
+
+  useEffect(() => {
+    getMoneyByLender();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getMoneyByLender = async () => {
+    const resp: any = await dispatch(getMoneyInSafe());
+    console.log('resp', resp);
+    setTotalMoneyByLender(resp?.payload?.data?.data);
+  };
+
+  useEffect(() => {
+    if (
+      data.every(
+        (el: GroupedLoansByLender) =>
+          el.checked && el?.items?.every((innerEl) => innerEl.checked)
+      )
+    ) {
+      setCheckAll(true);
+    } else {
+      setCheckAll(false);
+    }
+    const checkedLoans = filter(
+      flatten(data?.map((group: GroupedLoansByLender) => group.items)),
+      (loan: Loan) => loan.checked
+    );
+    const totalPrin = reduce(
+      checkedLoans as Array<Loan>,
+      (acc, cur: Loan) => acc + cur?.totalMoneyDept,
+      0
+    );
+    const totalMoneyCurrent = reduce(
+      checkedLoans as Array<Loan>,
+      (acc, cur: Loan) => acc + cur?.loanTotalMoneyCurrent,
+      0
+    );
+    const totalInterest = reduce(
+      checkedLoans as Array<Loan>,
+      (acc, cur: Loan) => acc + cur?.moneyInterestExpected,
+      0
+    );
+    // console.log('checkedLoans', checkedLoans);
+    setTotalChoose(checkedLoans as Array<Loan>);
+
+    setTotalMoneyCurrent((_prev) => ({
+      totalPrin,
+      totalMoneyCurrent,
+      totalInterest,
+    }));
+  }, [data]);
+
+  const getData = async () => {
+    // @ts-ignore
+    const resp: any = await dispatch(getWaitingBuyingDebtsTrading(params));
+    if (resp?.payload?.data?.length) {
+      const _data = resp?.payload?.data;
+      const map_data: Array<Loan> = _data?.map((i: Loan) => ({
+        ...i,
+        checked: true,
+      }));
+      const groupedData = groupBy(map_data, 'lenderSell');
+      const expectedData = Object.keys(groupedData).map((key: string) => ({
+        lenderSell: key,
+        items: groupedData[key],
+        checked: true,
+      }));
+      const result = sortBy(expectedData, 'lenderSell');
+      console.log('result', result);
+
+      setData(result);
+    } else {
+      setData([]);
+    }
+  };
+
+  const cancelBuying = async () => {
+    const mapLoanID = totalChoose.map((i: Loan) => i?.loanID);
+    // const params = {
+    //   lenderID:
+    // }
+    const resp: any = await dispatch(cancelBuyingDebts(mapLoanID));
+    if (resp?.payload?.meta?.errCode === 200) {
+      console.log('Thành công!');
+      getData();
+    } else {
+      console.log(resp?.payload?.meta?.errMessage);
+    }
+  };
+
+  const handleCheckBox = (arg: Loan) => {
+    let clonedData: Array<GroupedLoansByLender> = [...data];
+    const foundGroup = clonedData?.find(
+      (record: GroupedLoansByLender) => record.lenderSell === arg.lenderSell
+    );
+    const foundItem = foundGroup?.items?.find(
+      (record: Loan) => record?.loanID === arg.loanID
+    );
+    const replacedItem = {
+      ...foundItem,
+      checked: !foundItem?.checked,
+    };
+    const replacedGroup = {
+      ...foundGroup,
+      items: [
+        ...(foundGroup as GroupedLoansByLender).items?.filter(
+          (loan) => loan.loanID !== replacedItem.loanID
+        ),
+        replacedItem,
+      ].sort((a, b) => String(a.loanID).localeCompare(String(b.loanID))),
+    };
+    clonedData = clonedData?.filter(
+      (record) => record.lenderSell !== foundGroup?.lenderSell
+    );
+    clonedData = [...clonedData, replacedGroup as GroupedLoansByLender];
+    console.log('clonedData', clonedData);
+
+    setData(
+      clonedData.sort((a, b) => a.lenderSell.localeCompare(b.lenderSell))
+    );
+  };
+
+  const handleCheckAll = () => {
+    let clonedData: Array<GroupedLoansByLender> = [...data];
+    const map_data = clonedData?.map((i) => ({
+      ...i,
+      checked: true,
+      items: i?.items?.map((item) => ({
+        ...item,
+        checked: true,
+      })),
+    }));
+
+    setData(map_data);
+  };
+  const handleUncheckAll = () => {
+    let clonedData: Array<GroupedLoansByLender> = [...data];
+    const map_data = clonedData?.map((i) => ({
+      ...i,
+      checked: false,
+      items: i?.items?.map((item) => ({
+        ...item,
+        checked: false,
+      })),
+    }));
+
+    setData(map_data);
+  };
+
+  const onCheckGroupItems = (lenderSell: string) => {
+    let clonedData: Array<GroupedLoansByLender> = [...data];
+    const foundGroup = clonedData?.find(
+      (i: GroupedLoansByLender) => i?.lenderSell === lenderSell
+    );
+    const expected = {
+      ...foundGroup,
+      checked: true,
+      items: foundGroup?.items?.map((i: Loan) => ({
+        ...i,
+        checked: true,
+      })),
+    };
+    const filterData = clonedData?.filter(
+      (i: GroupedLoansByLender) => i?.lenderSell !== lenderSell
+    );
+
+    setData(
+      [expected, ...filterData].sort((a, b) =>
+        (a.lenderSell as string).localeCompare(b.lenderSell as string)
+      )
+    );
+  };
+  const onUncheckGroupItem = (lenderSell: string) => {
+    let clonedData: Array<GroupedLoansByLender> = [...data];
+    const foundGroup = clonedData?.find(
+      (i: GroupedLoansByLender) => i?.lenderSell === lenderSell
+    );
+    const expected = {
+      ...foundGroup,
+      checked: false,
+      items: foundGroup?.items?.map((i: Loan) => ({
+        ...i,
+        checked: false,
+      })),
+    };
+    const filterData = clonedData?.filter(
+      (i: GroupedLoansByLender) => i?.lenderSell !== lenderSell
+    );
+
+    setData(
+      [expected, ...filterData].sort((a, b) =>
+        (a.lenderSell as string).localeCompare(b.lenderSell as string)
+      )
+    );
+  };
+
+  const wait = (timeout: number | undefined) => {
+    return new Promise((resolve) => setTimeout(resolve, timeout));
+  };
+
+  const onRefresh = React.useCallback(() => {
+    setRefreshing(true);
+    wait(800).then(() => {
+      getData();
+      setRefreshing(false);
+    });
+  }, []);
+
+  const renderListLenderSell = ({ item }: { item: GroupedLoansByLender }) => {
+    return (
+      <View>
+        <View
+          style={{
+            backgroundColor: '#FFF3E8',
+            paddingVertical: actuatedNormalize(6),
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              if (
+                data
+                  ?.find(
+                    (group: GroupedLoansByLender) =>
+                      group.lenderSell === item.lenderSell
+                  )
+                  ?.items?.every((loan: Loan) => loan.checked)
+              ) {
+                onUncheckGroupItem(item?.lenderSell);
+              } else {
+                onCheckGroupItems(item?.lenderSell);
+              }
+            }}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            {item?.checked ? (
+              <MaterialCommunityIconApp
+                name="checkbox-marked"
+                size={18}
+                color={Colors.ORANGE}
+              />
+            ) : (
+              <MaterialCommunityIconApp
+                name="checkbox-blank-outline"
+                size={18}
+                color={Colors.GRAY_3}
+              />
+            )}
+            <RText
+              textStyle={{
+                fontWeight: '600',
+                fontSize: actuatedNormalize(12),
+                color: Colors.ORANGE,
+                paddingLeft: actuatedNormalize(8),
+              }}
+            >
+              {item?.lenderSell}
+            </RText>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={item?.items}
+          keyExtractor={(i, d) => d?.toString()}
+          renderItem={_renderItem}
+        />
+      </View>
+    );
+  };
+
+  const _renderItem = ({ item }: any) => {
+    return (
+      <TouchableOpacity
+        onPress={() =>
+          navigation.navigate(Screens.DetailDebt, { loanID: item?.loanID })
+        }
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginTop: actuatedNormalize(16),
+          paddingBottom: actuatedNormalize(16),
+        }}
+      >
+        <View
+          style={{
+            width: 150,
+            alignItems: 'flex-start',
+            paddingLeft: actuatedNormalize(16),
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => handleCheckBox(item)}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            {item?.checked ? (
+              <MaterialCommunityIconApp
+                name="checkbox-marked"
+                size={18}
+                color={Colors.ORANGE}
+              />
+            ) : (
+              <MaterialCommunityIconApp
+                name="checkbox-blank-outline"
+                size={18}
+                color={Colors.GRAY_3}
+              />
+            )}
+            <View
+              style={{
+                paddingLeft: actuatedNormalize(8),
+              }}
+            >
+              <RText textStyle={{ fontWeight: '600' }}>
+                {item?.customerName}
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  fontSize: actuatedNormalize(12),
+                  paddingTop: actuatedNormalize(4),
+                }}
+              >
+                {item?.loanCode}
+              </RText>
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={{
+            width: 100,
+            alignItems: 'flex-end',
+          }}
+        >
+          <RText>{formatNumber(item?.totalMoneyDept)} đ</RText>
+          <RText
+            textStyle={{
+              color: Colors.GRAY_3,
+              fontSize: actuatedNormalize(12),
+            }}
+          >
+            Gốc: {formatNumber(item?.loanTotalMoneyCurrent)} đ
+          </RText>
+          <RText
+            textStyle={{
+              color: Colors.GRAY_3,
+              fontSize: actuatedNormalize(12),
+            }}
+          >
+            Lãi: {formatNumber(item?.moneyInterestExpected)} đ
+          </RText>
+        </View>
+        <View
+          style={{
+            width: 150,
+            alignItems: 'center',
+          }}
+        >
+          <RText>{item?.time} tháng</RText>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  const onSubmit = async () => {
+    const groupedLoans = groupBy(totalChoose, 'lenderIDSell');
+    const mapLoans = Object.keys(groupedLoans).map((key) => ({
+      LenderIDSell: key,
+      LstLoanID: totalChoose.map((loan) => loan.loanID),
+    }));
+
+    console.log('groupedLoans', groupedLoans);
+    console.log('mapLoans', mapLoans);
+    const resp: any = await dispatch(
+      ConfirmBuyingDebts({
+        LstConfirmBuyRequest: mapLoans,
+      })
+    );
+    console.log('resp:::', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      setOpenAccept(false);
+      setTimeout(() => {
+        navigation.navigate(Screens.DebtPurchaseContract);
+      }, 1000);
+    } else {
+      setOpenAccept(false);
+      console.log(resp?.payload?.meta?.errMessage);
+    }
+  };
+
+  return (
+    <Container>
+      <View style={{ padding: actuatedNormalize(16) }}>
+        <FlexRow>
+          <RText textStyle={{ color: Colors.GRAY_3 }}>Lọc theo</RText>
+          <TouchableOpacity
+            onPress={() =>
+              setParams((prev) => ({
+                ...prev,
+                money: params.money === 0 ? 1 : 0,
+              }))
+            }
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginLeft: actuatedNormalize(12),
+              borderRadius: 24,
+              borderWidth: 1,
+              borderColor: Colors.GRAY_2,
+              paddingVertical: actuatedNormalize(8),
+              paddingHorizontal: actuatedNormalize(16),
+              backgroundColor: 'white',
+              ...Shadow,
+            }}
+          >
+            <RText
+              textStyle={{
+                marginRight: actuatedNormalize(6),
+                color: Colors.GRAY,
+              }}
+            >
+              Số tiền
+            </RText>
+            <IoIconApp
+              name={
+                params.money === 0 ? 'arrow-up-outline' : 'arrow-down-outline'
+              }
+              size={16}
+              color={Colors.GRAY}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity
+            ref={touchRef}
+            onPress={() => setOpen(true)}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginLeft: actuatedNormalize(12),
+              borderRadius: 24,
+              borderWidth: 1,
+              borderColor: Colors.GRAY_2,
+              paddingVertical: actuatedNormalize(8),
+              paddingHorizontal: actuatedNormalize(16),
+              backgroundColor: 'white',
+              ...Shadow,
+            }}
+          >
+            <RText
+              textStyle={{
+                marginRight: actuatedNormalize(6),
+                color: Colors.GRAY,
+              }}
+            >
+              {/* @ts-ignore */}
+              {params?.currentTime || 'Thời gian vay còn lại'}
+            </RText>
+            <IoIconApp name="chevron-down" size={16} color={Colors.GRAY} />
+          </TouchableOpacity>
+        </FlexRow>
+      </View>
+      <FlatList
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={Colors.ORANGE_H}
+          />
+        }
+        data={data}
+        keyExtractor={(item, index) => index.toString()}
+        renderItem={renderListLenderSell}
+        stickyHeaderIndices={[0]}
+        ListHeaderComponent={() => (
+          <TableHead
+            isAllChecked={checkAll}
+            // setCheckAll={setCheckAll}
+            handleCheckAll={handleCheckAll}
+            handleUncheckAll={handleUncheckAll}
+          />
+        )}
+      />
+      {data?.length ? (
+        <View
+          style={{
+            backgroundColor: Colors.WHITE,
+            paddingTop: actuatedNormalize(16),
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            ...Shadow,
+          }}
+        >
+          <FlexRow
+            style={{
+              paddingLeft: actuatedNormalize(16),
+              paddingBottom: actuatedNormalize(12),
+            }}
+          >
+            <LazyImage
+              source={DebtImages.ic_money_lender}
+              style={{
+                width: actuatedNormalize(12),
+                height: actuatedNormalize(12),
+              }}
+            />
+            <RText
+              textStyle={{
+                fontSize: actuatedNormalize(12),
+                color: Colors.GRAY,
+                paddingHorizontal: actuatedNormalize(8),
+              }}
+            >
+              Số dư
+            </RText>
+            <RText
+              textStyle={{
+                fontSize: actuatedNormalize(12),
+                fontWeight: '600',
+              }}
+            >
+              {formatNumber(totalMoneyByLender)} đ
+            </RText>
+          </FlexRow>
+          <SpaceBetween
+            style={{
+              paddingBottom: actuatedNormalize(32),
+              alignItems: 'flex-start',
+              borderTopWidth: 1,
+              borderColor: Colors.GRAY_5,
+              paddingLeft: actuatedNormalize(16),
+            }}
+          >
+            <View
+              style={{
+                paddingTop: actuatedNormalize(8),
+              }}
+            >
+              <FlexRow>
+                <RText>Tổng số tiền</RText>
+                <RText
+                  textStyle={{
+                    color: Colors.ORANGE_H,
+                    fontWeight: '600',
+                    fontSize: actuatedNormalize(20),
+                    paddingLeft: actuatedNormalize(6),
+                  }}
+                >
+                  {formatNumber(totalMoneyCurrent?.totalPrin)} đ
+                </RText>
+              </FlexRow>
+              <FlexRow>
+                <LazyImage
+                  source={InvestNewImages.ic_money}
+                  style={{ width: 12, height: 12, marginRight: 6 }}
+                />
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    paddingTop: actuatedNormalize(6),
+                    paddingBottom: actuatedNormalize(4),
+                  }}
+                >
+                  Tổng gốc {formatNumber(totalMoneyCurrent?.totalMoneyCurrent)}{' '}
+                  đ
+                </RText>
+              </FlexRow>
+              <FlexRow>
+                <LazyImage
+                  source={InvestNewImages.ic_money}
+                  style={{ width: 12, height: 12, marginRight: 6 }}
+                />
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                  }}
+                >
+                  Tổng lãi {formatNumber(totalMoneyCurrent?.totalInterest)} đ
+                </RText>
+              </FlexRow>
+            </View>
+            <TouchableOpacity
+              onPress={() => {
+                if (totalChoose.length && !openBack) {
+                  setOpenAccept(true);
+                } else if (totalChoose.length && openBack) {
+                  cancelBuying();
+                } else {
+                  console.log('Vui lòng chọn đơn !');
+                }
+              }}
+              style={{
+                backgroundColor: openBack ? '#FFF1DD' : Colors.ORANGE,
+                padding: actuatedNormalize(16),
+              }}
+            >
+              <RText
+                textStyle={{
+                  textAlign: 'center',
+                  color: openBack ? Colors.ORANGE : Colors.WHITE,
+                  fontWeight: '600',
+                }}
+              >
+                {openBack ? 'Trả đơn' : 'Mua đơn'} {'\n'} ({totalChoose.length})
+              </RText>
+            </TouchableOpacity>
+          </SpaceBetween>
+        </View>
+      ) : (
+        <View />
+      )}
+
+      <ModalAccept
+        isVisible={openAccept}
+        onBackdropPress={() => setOpenAccept(false)}
+        onPress={onSubmit}
+        data={totalChoose}
+        totalMoneyCurrent={totalMoneyCurrent}
+        totalMoneyByLender={totalMoneyByLender}
+      />
+
+      <PopoverTime
+        isVisible={open}
+        onRequestClose={() => setOpen(false)}
+        from={touchRef}
+        onPress={(value: any) => {
+          setOpen(false);
+          setParams((prev) => ({
+            ...prev,
+            time: value,
+          }));
+        }}
+      />
+
+      {isLoading ? <Loading /> : <View />}
+    </Container>
+  );
+};
+
+export default ListPending;