@tima2025/react-native-timalender 1.0.0

package/src/screens/WithDraw/index.tsx

@@ -0,0 +1,410 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { FlatList, ScrollView, TextInput, View } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Button from '../../common/Button';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import Loading from '../../common/Loading';
+import {
+  formatMoneyText,
+  getMoney,
+  numberWithCommas,
+} from '../../common/Metrics';
+import RText from '../../common/RText';
+import {
+  withdrawHistory,
+  withdrawRequest,
+} from '../../components/Features/bank/bankSlice';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+
+export const WithDraw = ({ _navigation }: any) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoading = useSelector(selectLoading);
+  const [dataHistory, setDataHistory] = useState<any>(null);
+  const [dataTransaction, setDataTransaction] = useState<any>([]);
+  const [money, setMoney] = useState<any>('');
+  const [note, setNote] = useState<any>('');
+
+  useEffect(() => {
+    getHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getHistory = async () => {
+    const resp: any = await dispatch(withdrawHistory());
+    if (resp.payload.meta.errCode === 200) {
+      const data = resp.payload.data || {};
+      setDataHistory(data);
+      setDataTransaction(data?.transactions);
+    } else {
+      // WToastShowError('Có lỗi xảy ra. Vui lòng thử lại');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Có lỗi xảy ra. Vui lòng thử lại',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  const _renderItems = (item: any, index: number) => {
+    return (
+      <View>
+        <FlexRow
+          style={{
+            paddingVertical: 12,
+            alignItems: 'center',
+          }}
+        >
+          <View style={{ flex: 32, alignItems: 'center' }}>
+            <RText style={{ fontSize: 11, color: '#000000' }}>
+              {index + 1}
+            </RText>
+          </View>
+          <View style={{ flex: 66 }}>
+            <RText style={{ fontSize: 11, color: '#999999' }}>
+              {moment(item?.createDate).format('DD/MM/YYYY')}
+            </RText>
+          </View>
+          <View style={{ flex: 115 }}>
+            <RText style={{ fontSize: 11, color: '#000000' }}>
+              {item?.noteAgency}
+            </RText>
+          </View>
+          <View style={{ flex: 87 }}>
+            <RText
+              style={{ fontSize: 11, color: '#000000', fontWeight: 'bold' }}
+            >
+              {numberWithCommas(item?.money)}
+            </RText>
+          </View>
+          <View style={{ flex: 60, alignItems: 'flex-end' }}>
+            {statusView(item)}
+          </View>
+        </FlexRow>
+      </View>
+    );
+  };
+
+  function statusView(item: { status: number; statusText: string }) {
+    if (item.status === 1) {
+      return (
+        <FlexRow
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#2B9348',
+            borderRadius: 10,
+            marginRight: 4,
+          }}
+        >
+          <RText
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              fontSize: 9,
+              color: 'white',
+            }}
+          >
+            {item?.statusText}
+          </RText>
+        </FlexRow>
+      );
+    } else if (item.status === -1) {
+      return (
+        <FlexRow
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F3722C',
+            borderRadius: 10,
+            marginRight: 4,
+          }}
+        >
+          <RText
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              fontSize: 9,
+              color: 'white',
+            }}
+          >
+            {item?.statusText}
+          </RText>
+        </FlexRow>
+      );
+    } else if (item.status === 0) {
+      return (
+        <FlexRow
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'yellow',
+            borderRadius: 10,
+            marginRight: 4,
+          }}
+        >
+          <RText
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              fontSize: 9,
+              color: '#333333',
+            }}
+          >
+            {item?.statusText}
+          </RText>
+        </FlexRow>
+      );
+    }
+  }
+
+  const onWithdraw = async () => {
+    if (dataHistory?.moneyWithdrawable < getMoney(money)) {
+      // WToastShowError('Số tiền rút cần nhỏ hơn hoặc bằng số tiền có thể rút.');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Số tiền rút cần nhỏ hơn hoặc bằng số tiền có thể rút.',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    } else if (getMoney(money) > 0) {
+      const removeComma = getMoney(money);
+      const params = {
+        NoteAgency: note,
+        Money: +removeComma,
+      };
+      const resp: any = await dispatch(withdrawRequest(params));
+      if (resp.payload.meta.errCode === 200) {
+        // WToastShowSuccess('Rút tiền thành công');
+        showMessage({
+          message: 'Thông báo',
+          description: 'Rút tiền thành công',
+          type: 'info',
+          icon: 'success',
+          backgroundColor: Colors.SUCCESS,
+        });
+        setMoney('');
+        getHistory();
+      } else if (resp.payload.meta.errCode === 241) {
+        // WToastShowError(resp?.payload?.meta?.errMessage);
+        showMessage({
+          message: 'Thông báo',
+          description: resp?.payload?.meta?.errMessage,
+          type: 'danger',
+          icon: 'warning',
+          backgroundColor: Colors.DANGER,
+        });
+      } else {
+        // WToastShowError('Rút tiền chưa thành công. Vui lòng thử lại');
+        showMessage({
+          message: 'Thông báo',
+          description: 'Rút tiền chưa thành công. Vui lòng thử lại',
+          type: 'danger',
+          icon: 'warning',
+          backgroundColor: Colors.DANGER,
+        });
+      }
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader title={'Rút tiền'.toUpperCase()} />
+      <ScrollView>
+        <View
+          style={{
+            paddingVertical: 25,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <RText style={{ fontSize: 13, fontWeight: 'bold', color: 'black' }}>
+            Số dư khả dụng
+          </RText>
+          <RText
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+              color: '#EE4223',
+              paddingTop: 6,
+            }}
+          >
+            {numberWithCommas(dataHistory?.moneyAvailable)} VNĐ
+          </RText>
+        </View>
+        <View style={{ backgroundColor: '#f5f5f5', height: 10 }} />
+        <View style={{ paddingHorizontal: 12 }}>
+          <View
+            style={{
+              alignItems: 'center',
+              flexDirection: 'row',
+              paddingVertical: 14,
+            }}
+          >
+            <RText style={{ flex: 1, fontSize: 13, color: 'black' }}>
+              Tổng tiền đang chờ rút
+            </RText>
+            <RText style={{ fontSize: 13, fontWeight: 'bold', color: 'black' }}>
+              {numberWithCommas(dataHistory?.moneyPending)} VNĐ
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'center',
+              flexDirection: 'row',
+              paddingVertical: 14,
+            }}
+          >
+            <RText style={{ flex: 1, fontSize: 13, color: 'black' }}>
+              Số tiền có thể rút
+            </RText>
+            <RText style={{ fontSize: 13, fontWeight: 'bold', color: 'black' }}>
+              {numberWithCommas(dataHistory?.moneyWithdrawable)} VNĐ
+            </RText>
+          </View>
+          <TextInput
+            placeholder="Nhập số tiền rút"
+            keyboardType="numeric"
+            style={{
+              fontSize: 14,
+              paddingHorizontal: 17,
+              paddingVertical: 11,
+              borderRadius: 7,
+              borderWidth: 1,
+              borderColor: '#E6E6E6',
+              marginTop: 10,
+            }}
+            value={money}
+            onChangeText={(text) => {
+              setMoney(formatMoneyText(text));
+            }}
+          />
+          <TextInput
+            placeholder="Ghi chú"
+            multiline={true}
+            numberOfLines={3}
+            style={{
+              fontSize: 14,
+              paddingHorizontal: 17,
+              paddingVertical: 11,
+              borderRadius: 7,
+              borderWidth: 1,
+              borderColor: '#E6E6E6',
+              marginTop: 10,
+              height: 100,
+            }}
+            value={note}
+            onChangeText={(text) => {
+              setNote(text);
+            }}
+          />
+          <Button
+            text="Xác nhận rút"
+            textStyle={{ color: Colors.WHITE, fontWeight: 'bold' }}
+            buttonStyle={{
+              marginTop: 24,
+              backgroundColor: !money ? '#BDBDBD' : Colors.ORANGE,
+            }}
+            onPress={onWithdraw}
+            disabled={!money}
+          />
+        </View>
+        <RText
+          style={{
+            paddingHorizontal: 13,
+            fontSize: 14,
+            color: '#000000',
+            fontWeight: 'bold',
+            paddingTop: 20,
+            paddingBottom: 12,
+            backgroundColor: 'white',
+          }}
+        >
+          Lịch sử rút tiền
+        </RText>
+        <View>
+          <FlexRow
+            style={{
+              paddingVertical: 12,
+              backgroundColor: '#E6E6E6',
+            }}
+          >
+            <View style={{ flex: 32 }}>
+              <RText
+                style={{
+                  paddingLeft: 4,
+                  fontSize: 11,
+                  color: '#000000',
+                  fontWeight: 'bold',
+                }}
+              >
+                STT
+              </RText>
+            </View>
+            <View style={{ flex: 66 }}>
+              <RText
+                style={{
+                  fontSize: 11,
+                  color: '#000000',
+                  fontWeight: 'bold',
+                }}
+              >
+                {'Thời gian'}
+              </RText>
+            </View>
+            <View style={{ flex: 115 }}>
+              <RText
+                style={{
+                  fontSize: 11,
+                  color: '#000000',
+                  fontWeight: 'bold',
+                }}
+              >
+                {'Nội dung đối tác'}
+              </RText>
+            </View>
+            <View style={{ flex: 87 }}>
+              <RText
+                style={{
+                  fontSize: 11,
+                  color: '#000000',
+                  fontWeight: 'bold',
+                }}
+              >
+                {'Số tiền'}
+              </RText>
+            </View>
+            <View style={{ flex: 57, alignItems: 'flex-end' }}>
+              <RText
+                style={{
+                  fontSize: 11,
+                  color: '#000000',
+                  fontWeight: 'bold',
+                  paddingRight: 4,
+                }}
+              >
+                {'Trạng thái'}
+              </RText>
+            </View>
+          </FlexRow>
+          <FlatList
+            data={dataTransaction}
+            keyExtractor={(item, index) => index.toString()}
+            renderItem={({ item, index }) => _renderItems(item, index)}
+          />
+        </View>
+      </ScrollView>
+      {isLoading && <Loading />}
+    </Container>
+  );
+};

package/src/screens/WithdrawGpay/index.tsx

@@ -0,0 +1,214 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import { ScrollView, TextInput, TouchableOpacity, View } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import formatNumber from '../../common/FormatNumber';
+import Loading from '../../common/Loading';
+import {
+  actuatedNormalize,
+  formatMoneyText,
+  getMoney,
+} from '../../common/Metrics';
+import RText from '../../common/RText';
+import SpaceBetween from '../../common/SpaceBetween';
+import { withdrawGpayRequest } from '../../components/Features/bank/bankSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+
+const listMoney = [
+  {
+    id: 0,
+    value: '1000000',
+    text: '1,000,000 VND',
+  },
+  {
+    id: 1,
+    value: '10000000',
+    text: '10,000,000 VND',
+  },
+  {
+    id: 2,
+    value: '500000',
+    text: '500,000 VND',
+  },
+];
+
+export const WithdrawGpay = ({ navigation, route }: any) => {
+  const item = route?.params?.data;
+  const isLoading = useSelector(selectLoading);
+  const dispatch = useDispatch<AppDispatch>();
+  const [money, setMoney] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(-1);
+
+  const onSubmit = async () => {
+    const formatNumb = getMoney(money);
+    if (+formatNumb > item?.amount_cash) {
+      // WToastShowError('Số dư ví không đủ');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Số dư ví không đủ',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    } else {
+      const params = {
+        amount: +formatNumb,
+        message: '',
+      };
+      const resp: any = await dispatch(withdrawGpayRequest(params));
+      console.log('resp', resp);
+      if (resp?.payload?.meta?.errCode === 200) {
+        navigation.navigate(Screens.EnterOTPGpay, {
+          bankRef: resp?.payload?.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,
+        });
+      }
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader title="Rút tiền Gpay" />
+      <ScrollView scrollEnabled={false}>
+        <SpaceBetween
+          style={{
+            padding: actuatedNormalize(16),
+          }}
+        >
+          <View>
+            <RText style={{ paddingBottom: actuatedNormalize(8) }}>
+              Số dư ví
+            </RText>
+            <RText>Rút tiền về</RText>
+          </View>
+          <View>
+            <RText
+              style={{ paddingBottom: actuatedNormalize(8), fontWeight: '700' }}
+            >
+              {formatNumber(item?.amount_cash)} VND
+            </RText>
+            <RText style={{ fontWeight: '700' }}>
+              {item?.accountBanking} {item?.bankCode}
+            </RText>
+          </View>
+        </SpaceBetween>
+        <View
+          style={{
+            backgroundColor: '#FFF8F2',
+            padding: actuatedNormalize(16),
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: 'white',
+              borderRadius: 8,
+              padding: actuatedNormalize(16),
+            }}
+          >
+            <RText>Số tiền</RText>
+            <TextInput
+              placeholder="Nhập số tiền"
+              placeholderTextColor="grey"
+              keyboardType="numeric"
+              value={money}
+              onChangeText={(text) => setMoney(formatMoneyText(text))}
+              style={{
+                fontSize: actuatedNormalize(32),
+                marginTop: actuatedNormalize(8),
+                color: Colors.ORANGE,
+                width: '100%',
+              }}
+            />
+            <FlexRow
+              style={{
+                marginTop: actuatedNormalize(16),
+              }}
+            >
+              {listMoney.map((item, index) => {
+                let checked = false;
+                if (index === currentIndex) {
+                  checked = true;
+                }
+                return (
+                  <TouchableOpacity
+                    onPress={() => {
+                      setCurrentIndex(index);
+                      setMoney(formatMoneyText(item.value));
+                    }}
+                    key={item.id}
+                    style={{
+                      borderWidth: 1,
+                      borderRadius: 20,
+                      paddingHorizontal: 6,
+                      paddingVertical: 4,
+                      marginRight: 4,
+                      borderColor: checked ? Colors.ORANGE : Colors.GREY,
+                    }}
+                  >
+                    <RText
+                      style={{
+                        fontSize: actuatedNormalize(12),
+                        color: checked ? Colors.ORANGE : Colors.GREY,
+                      }}
+                    >
+                      {item.text}
+                    </RText>
+                  </TouchableOpacity>
+                );
+              })}
+            </FlexRow>
+          </View>
+          <RText
+            style={{
+              marginTop: actuatedNormalize(16),
+              color: '#4F4F4F',
+            }}
+          >
+            * Giá trị tối thiểu là 10,000 VND (Mười nghìn đồng) {'\n'}* Phí giao
+            dịch: 2,750 VND/ 1 lần rút tiền
+          </RText>
+        </View>
+      </ScrollView>
+      <TouchableOpacity
+        onPress={onSubmit}
+        disabled={!money}
+        style={{
+          width: '90%',
+          alignSelf: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: actuatedNormalize(30),
+          borderRadius: actuatedNormalize(4),
+          height: actuatedNormalize(48),
+          backgroundColor: money ? Colors.ORANGE : Colors.GREY,
+        }}
+      >
+        <RText
+          textStyle={{
+            color: Colors.WHITE,
+            fontSize: actuatedNormalize(18),
+          }}
+        >
+          Xác nhận rút tiền
+        </RText>
+      </TouchableOpacity>
+      {isLoading && <Loading />}
+    </Container>
+  );
+};