@tima2025/react-native-timalender 1.0.0

package/src/screens/AdditionalInvestmentCapital/Components/ConfirmRecharge.tsx

@@ -0,0 +1,402 @@
+//@ts-nocheck
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+import Clipboard from '@react-native-community/clipboard';
+import React, { memo, useState } from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import FastImage from 'react-native-fast-image';
+import { showMessage } from 'react-native-flash-message';
+import imageOptions from '../../../assets/images/Optional';
+import BorderWidth from '../../../common/BorderWidth';
+import ButtonIcon from '../../../common/ButtonIcon';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import formatNumber from '../../../common/FormatNumber';
+import LazyImage from '../../../common/LazyImage';
+import Loading from '../../../common/Loading';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import { IoIconApp } from '../../../common/VectorIcon/Icon';
+import CustomModal from '../../../components/CustomModal/CustomModal';
+import ImageGallery from '../../../components/ImageGallery/ImageGallery';
+
+const ConfirmRecharge = (props: any) => {
+  const { isVisible, onBackdropPress, onPress, data, bank } = props;
+  const [loading, setLoading] = useState(false);
+  const [openGallery, setopenGallery] = useState(false);
+
+  const onSave = () => {
+    setLoading(true);
+    let date = new Date().getTime();
+    let image_URL = data?.qrLink;
+    let ext: any = getExtension(image_URL);
+    ext = '.' + ext[0];
+    const { config, fs } = ReactNativeBlobUtil;
+    let PictureDir =
+      Platform.OS === 'ios' ? fs.dirs.LibraryDir : fs.dirs.PictureDir;
+    let options = {
+      fileCache: true,
+      addAndroidDownloads: {
+        useDownloadManager: true,
+        notification: true,
+        path: PictureDir + '/image_' + date + ext,
+        description: 'Image',
+      },
+    };
+    config(options)
+      .fetch('GET', image_URL, {
+        contentType: 'image/png',
+      })
+      .then((res) => {
+        console.log('res success', res);
+        CameraRoll.saveToCameraRoll(`${res.data}`)
+          .then(() => {
+            // WToastShowSuccess('Lưu hình ảnh thành công!', WToast.position.TOP);
+            showMessage({
+              message: 'Thông báo',
+              description: 'Lưu hình ảnh thành công!',
+              type: 'info',
+              icon: 'success',
+              position: 'top',
+              backgroundColor: Colors.SUCCESS,
+            });
+          })
+          .catch((err) => {
+            console.log('err', err);
+            // WToastShowError('Lưu hình ảnh thất bại!', WToast.position.TOP);
+            showMessage({
+              message: 'Thông báo',
+              description: 'Lưu hình ảnh thất bại!',
+              type: 'danger',
+              icon: 'warning',
+              position: 'top',
+              backgroundColor: Colors.DANGER,
+            });
+          });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const getExtension = (fileName: string) => {
+    return /[.]/.exec(fileName) ? /[^.]+$/.exec(fileName) : undefined;
+  };
+
+  return (
+    <CustomModal
+      isVisible={isVisible}
+      containerStyle={{ justifyContent: 'flex-end' }}
+      innerStyle={{
+        backgroundColor: Colors.WHITE,
+        flex: undefined,
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        padding: actuatedNormalize(16),
+      }}
+    >
+      <SpaceBetween>
+        <ButtonIcon
+          onPress={() => onBackdropPress()}
+          iconName="close"
+          iconSize={actuatedNormalize(24)}
+          iconColor={Colors.GRAY_3}
+        />
+        <RText
+          textStyle={{ fontSize: actuatedNormalize(18), fontWeight: '600' }}
+        >
+          Chuyển tiền
+        </RText>
+        <View style={{ width: actuatedNormalize(24) }} />
+      </SpaceBetween>
+      <FlexRow
+        style={{
+          paddingTop: actuatedNormalize(16),
+        }}
+      >
+        <LazyImage
+          source={{ uri: data?.qrLink }}
+          style={{
+            width: actuatedNormalize(100),
+            height: actuatedNormalize(100),
+          }}
+          resizeMode="contain"
+        />
+        <View
+          style={{
+            paddingLeft: actuatedNormalize(12),
+          }}
+        >
+          <FlexRow>
+            <LazyImage
+              source={{ uri: bank?.logo }}
+              style={{
+                width: actuatedNormalize(46),
+                height: actuatedNormalize(46),
+                marginRight: actuatedNormalize(8),
+              }}
+              resizeMode="contain"
+            />
+            <RText>{bank?.accountName}</RText>
+          </FlexRow>
+          <RText
+            textStyle={{
+              color: '#828282',
+              paddingTop: actuatedNormalize(6),
+              width: '94%',
+            }}
+          >
+            {bank?.name}
+          </RText>
+          {Platform.OS === 'ios' ? (
+            <TouchableOpacity
+              onPress={onSave}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderColor: Colors.ORANGE,
+                padding: actuatedNormalize(6),
+                marginTop: actuatedNormalize(12),
+                borderRadius: 8,
+                width: actuatedNormalize(110),
+                backgroundColor: '#FFF8EE',
+              }}
+            >
+              <IoIconApp
+                name="download-outline"
+                size={actuatedNormalize(18)}
+                color={Colors.ORANGE}
+              />
+              <RText
+                textStyle={{
+                  color: Colors.ORANGE,
+                  paddingLeft: actuatedNormalize(4),
+                  fontWeight: '600',
+                }}
+              >
+                Tải mã QR
+              </RText>
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              onPress={() => setopenGallery(true)}
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderColor: Colors.ORANGE,
+                padding: actuatedNormalize(6),
+                marginTop: actuatedNormalize(12),
+                borderRadius: 8,
+                width: actuatedNormalize(134),
+                backgroundColor: '#FFF8EE',
+              }}
+            >
+              <RText
+                textStyle={{
+                  color: Colors.ORANGE,
+                  paddingLeft: actuatedNormalize(4),
+                  fontWeight: '600',
+                }}
+              >
+                Xem & Tải mã QR
+              </RText>
+            </TouchableOpacity>
+          )}
+        </View>
+      </FlexRow>
+      <View style={{ paddingTop: actuatedNormalize(16) }}>
+        <RText textStyle={{ color: '#828282' }}>Số tài khoản thụ hưởng</RText>
+        <SpaceBetween
+          style={{
+            paddingTop: actuatedNormalize(6),
+            paddingBottom: actuatedNormalize(8),
+          }}
+        >
+          <RText
+            textStyle={{
+              fontWeight: '600',
+              fontSize: actuatedNormalize(16),
+            }}
+          >
+            {data?.bankAccountNumber}
+          </RText>
+          <TouchableOpacity
+            onPress={() => {
+              Clipboard.setString(data?.bankAccountNumber);
+              // WToastShowSuccess('Sao chép thành công!', WToast.position.TOP);
+              showMessage({
+                message: 'Thông báo',
+                description: 'Sao chép thành công!',
+                type: 'info',
+                icon: 'success',
+                position: 'top',
+                backgroundColor: Colors.SUCCESS,
+              });
+            }}
+          >
+            <IoIconApp
+              name="copy-outline"
+              size={actuatedNormalize(20)}
+              color={Colors.GRAY_3}
+            />
+          </TouchableOpacity>
+        </SpaceBetween>
+        <BorderWidth style={undefined} />
+      </View>
+
+      <View style={{ paddingTop: actuatedNormalize(16) }}>
+        <RText textStyle={{ color: '#828282' }}>Số tiền thêm vốn</RText>
+        <SpaceBetween
+          style={{
+            paddingTop: actuatedNormalize(6),
+            paddingBottom: actuatedNormalize(8),
+          }}
+        >
+          <RText
+            textStyle={{
+              fontWeight: '600',
+              fontSize: actuatedNormalize(16),
+            }}
+          >
+            {formatNumber(data?.money)} đ
+          </RText>
+          <TouchableOpacity
+            onPress={() => {
+              // WToastShowSuccess('Sao chép thành công!', WToast.position.TOP);
+              showMessage({
+                message: 'Thông báo',
+                description: 'Sao chép thành công!',
+                type: 'info',
+                icon: 'success',
+                position: 'top',
+                backgroundColor: Colors.SUCCESS,
+              });
+              Clipboard.setString(data?.money?.toString());
+            }}
+          >
+            <IoIconApp
+              name="copy-outline"
+              size={actuatedNormalize(20)}
+              color={Colors.GRAY_3}
+            />
+          </TouchableOpacity>
+        </SpaceBetween>
+        <BorderWidth style={undefined} />
+      </View>
+
+      <View style={{ paddingTop: actuatedNormalize(16) }}>
+        <RText textStyle={{ color: '#828282' }}>Nội dung chuyển khoản</RText>
+        <SpaceBetween
+          style={{
+            paddingTop: actuatedNormalize(6),
+            paddingBottom: actuatedNormalize(8),
+          }}
+        >
+          <RText
+            textStyle={{
+              fontWeight: '600',
+              fontSize: actuatedNormalize(16),
+            }}
+          >
+            {data?.note}
+          </RText>
+          <TouchableOpacity
+            onPress={() => {
+              // WToastShowSuccess('Sao chép thành công!', WToast.position.TOP);
+              showMessage({
+                message: 'Thông báo',
+                description: 'Sao chép thành công!',
+                type: 'info',
+                icon: 'success',
+                position: 'top',
+                backgroundColor: Colors.SUCCESS,
+              });
+              Clipboard.setString(data?.note);
+            }}
+          >
+            <IoIconApp
+              name="copy-outline"
+              size={actuatedNormalize(20)}
+              color={Colors.GRAY_3}
+            />
+          </TouchableOpacity>
+        </SpaceBetween>
+        <BorderWidth style={undefined} />
+      </View>
+
+      <View
+        style={{
+          marginTop: actuatedNormalize(16),
+          padding: actuatedNormalize(16),
+          backgroundColor: '#F5F5F5',
+          borderRadius: 8,
+        }}
+      >
+        <FlexRow>
+          <FastImage
+            source={imageOptions.warning}
+            style={{
+              width: actuatedNormalize(20),
+              height: actuatedNormalize(20),
+            }}
+          />
+          <RText textStyle={{ fontWeight: '600', paddingLeft: 6 }}>Lưu ý</RText>
+        </FlexRow>
+        <RText
+          textStyle={{ paddingTop: actuatedNormalize(8), color: '#828282' }}
+        >
+          • Yêu cầu nhập đúng nội dung và số tiền
+        </RText>
+        <RText
+          textStyle={{ paddingTop: actuatedNormalize(8), color: '#828282' }}
+        >
+          • Chuyển khoản chính chủ
+        </RText>
+        <RText
+          textStyle={{ paddingTop: actuatedNormalize(8), color: '#828282' }}
+        >
+          • Chỉ nạp từ tài khoản ngân hàng (Không hỗ trợ hoàn trả khi chuyển
+          khoản từ ví điện tử)
+        </RText>
+        <RText
+          textStyle={{ paddingTop: actuatedNormalize(8), color: '#828282' }}
+        >
+          • Chuyển khoản 24/7
+        </RText>
+      </View>
+
+      <TouchableOpacity
+        onPress={onPress}
+        style={{
+          borderWidth: 1,
+          borderColor: Colors.ORANGE,
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: actuatedNormalize(46),
+          borderRadius: 8,
+          marginVertical: actuatedNormalize(16),
+        }}
+      >
+        <RText
+          textStyle={{ color: Colors.ORANGE, fontSize: actuatedNormalize(16) }}
+        >
+          Tôi đã chuyển khoản
+        </RText>
+      </TouchableOpacity>
+      {loading && <Loading />}
+
+      <ImageGallery
+        data={data?.qrLink}
+        isVisible={openGallery}
+        onBackdropPress={() => setopenGallery(false)}
+      />
+    </CustomModal>
+  );
+};
+
+export default memo(ConfirmRecharge);

package/src/screens/AdditionalInvestmentCapital/Components/DropdownListBank.tsx

@@ -0,0 +1,188 @@
+//@ts-nocheck
+import React, { useState } from 'react';
+import {
+  ImageURISource,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import FastImage from 'react-native-fast-image';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import LazyImage from '../../../common/LazyImage';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import { IoIconApp } from '../../../common/VectorIcon/Icon';
+
+interface BankProps {
+  logo: ImageURISource;
+  name: string;
+  accountName: number | string;
+}
+
+const DropdownListBank = (props: {
+  data: any;
+  onPressBank: (item: BankProps) => void;
+}) => {
+  const { data, onPressBank } = props;
+  const [openListBank, setOpenListBank] = useState(false);
+  const [currentCheck, setCurrentCheck] = useState(0);
+  const [chooseBank, setChooseBank] = useState<BankProps>();
+
+  return (
+    <View>
+      <RText
+        textStyle={{
+          color: '#828282',
+          marginBottom: actuatedNormalize(12),
+        }}
+      >
+        Chọn ngân hàng thụ hưởng
+      </RText>
+      <TouchableOpacity
+        onPress={() => setOpenListBank(!openListBank)}
+        style={{
+          borderWidth: 1,
+          borderRadius: 8,
+          padding: actuatedNormalize(12),
+          borderColor: Colors.GRAY_5,
+        }}
+      >
+        <SpaceBetween>
+          <FlexRow>
+            <FastImage
+              source={{ uri: chooseBank?.logo || data[0]?.logo }}
+              style={{
+                width: actuatedNormalize(46),
+                height: actuatedNormalize(46),
+              }}
+              resizeMode="contain"
+            />
+            <View style={{ paddingLeft: actuatedNormalize(12) }}>
+              <RText
+                textStyle={{
+                  color: '#828282',
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(12),
+                }}
+              >
+                {chooseBank?.name || data[0]?.name}
+              </RText>
+              <RText
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {chooseBank?.accountName || data[0]?.accountName}
+              </RText>
+            </View>
+          </FlexRow>
+          <IoIconApp
+            name="chevron-down"
+            size={actuatedNormalize(18)}
+            color={Colors.GRAY_3}
+          />
+        </SpaceBetween>
+      </TouchableOpacity>
+      {openListBank ? (
+        <Animatable.View
+          animation={'fadeInDown'}
+          duration={400}
+          style={{
+            backgroundColor: Colors.WHITE,
+            marginTop: actuatedNormalize(16),
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: Colors.GRAY_5,
+          }}
+        >
+          {data.map((item: any, index: number) => {
+            let checked = false;
+            if (index === currentCheck) {
+              checked = true;
+            }
+            return (
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => {
+                  setCurrentCheck(index);
+                  setOpenListBank(false);
+                  setChooseBank(item);
+                  onPressBank(item);
+                }}
+                key={item?.id}
+                style={[
+                  styles.collapseContent,
+                  {
+                    borderBottomWidth: data?.length === index + 1 ? 0 : 0.5,
+                    borderColor: Colors.GRAY_5,
+                  },
+                ]}
+              >
+                <FlexRow>
+                  <LazyImage
+                    source={{ uri: item?.logo }}
+                    style={{
+                      width: actuatedNormalize(46),
+                      height: actuatedNormalize(46),
+                    }}
+                    resizeMode="contain"
+                  />
+                  <View
+                    style={{
+                      paddingLeft: actuatedNormalize(6),
+                    }}
+                  >
+                    <RText
+                      textStyle={{
+                        color: '#828282',
+                        fontSize: actuatedNormalize(12),
+                        paddingBottom: actuatedNormalize(4),
+                      }}
+                    >
+                      {item?.name}
+                    </RText>
+                    <RText>{item?.account}</RText>
+                  </View>
+                </FlexRow>
+                <IoIconApp
+                  name={checked ? 'radio-button-on' : 'radio-button-off'}
+                  color={checked ? Colors.ORANGE : Colors.GRAY_3}
+                  size={actuatedNormalize(18)}
+                />
+              </TouchableOpacity>
+            );
+          })}
+        </Animatable.View>
+      ) : (
+        <View />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  collapeHeader: {
+    width: '100%',
+    height: actuatedNormalize(46),
+    borderRadius: 8,
+    padding: actuatedNormalize(12),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: Colors.GRAY_5,
+  },
+  collapseContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: actuatedNormalize(16),
+    borderBottomWidth: 0.5,
+  },
+});
+
+export default DropdownListBank;

package/src/screens/AdditionalInvestmentCapital/Components/Success.tsx

@@ -0,0 +1,93 @@
+//@ts-nocheck
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import imageOptions from '../../../assets/images/Optional';
+import Colors from '../../../common/Colors';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import CustomModal, {
+  ModalProps,
+} from '../../../components/CustomModal/CustomModal';
+
+const Success = (props: ModalProps) => {
+  const { isVisible, onBackdropPress } = props;
+
+  return (
+    <CustomModal
+      isVisible={isVisible}
+      containerStyle={{ justifyContent: 'center' }}
+      innerStyle={{
+        flex: undefined,
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        paddingHorizontal: actuatedNormalize(16),
+        paddingBottom: actuatedNormalize(16),
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: Colors.WHITE,
+          paddingHorizontal: actuatedNormalize(16),
+          paddingBottom: actuatedNormalize(16),
+          borderRadius: 8,
+          alignItems: 'center',
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: Colors.WHITE,
+            width: actuatedNormalize(126),
+            height: actuatedNormalize(126),
+            borderRadius: 126,
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: -20,
+            left: '36%',
+          }}
+        />
+        <FastImage
+          source={imageOptions.tima_confirm}
+          style={{
+            width: actuatedNormalize(86),
+            height: actuatedNormalize(86),
+          }}
+          resizeMode="contain"
+        />
+        <RText
+          textStyle={{
+            fontWeight: '600',
+            paddingVertical: actuatedNormalize(8),
+            fontSize: actuatedNormalize(16),
+          }}
+        >
+          Tima đã xác nhận thông tin!
+        </RText>
+        <RText textStyle={{ color: Colors.GRAY_3, textAlign: 'center' }}>
+          Số tiền sẽ được cập nhật ngay sau khi Tima xác nhận giao dịch chuyển
+          khoản của bạn
+        </RText>
+      </View>
+      <TouchableOpacity
+        onPress={onBackdropPress}
+        style={{
+          alignSelf: 'center',
+          marginTop: actuatedNormalize(16),
+        }}
+      >
+        <RText
+          textStyle={{
+            color: Colors.WHITE,
+            fontSize: actuatedNormalize(16),
+            textDecorationLine: 'underline',
+          }}
+        >
+          Đóng
+        </RText>
+      </TouchableOpacity>
+    </CustomModal>
+  );
+};
+
+export default Success;