react-native-timacare 3.3.20 → 3.3.22

package/lib/commonjs/screens/home/ItemMotoBikeLoan.js.flow

@@ -0,0 +1,845 @@
+//@ts-nocheck
+import React, { useEffect } from 'react';
+import { Alert, Image, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { IconMoney2 } from '../../assets/svgs';
+import { MText } from '../../components/MText';
+import { formatMoney } from '../../utils';
+import {
+  Icon1,
+  Icon10,
+  Icon11,
+  Icon12,
+  Icon2,
+  Icon3,
+  Icon4,
+  Icon5,
+  Icon7,
+  Icon8,
+  Icon9,
+  IconSuccess,
+} from '../../assets/v3';
+import { ScreenNames } from '../../navigation';
+import {
+  CheckBox,
+  CheckBoxActive,
+  Close2Icon,
+  IconCheck,
+  Info,
+} from '../../assets/icons';
+import Modal from 'react-native-modal';
+import { Api } from '../../services/api';
+
+interface IProps {
+  item?: any;
+  navigation?: any;
+  callback: () => void;
+}
+export default function ItemMotoBikeLoan({
+  item,
+  navigation,
+  callback,
+}: IProps) {
+  const [showModal, setShowModal] = React.useState(false);
+  const [showPolicy, setShowPolicy] = React.useState(false);
+  const [check, setCheck] = React.useState(false);
+  const [showModal2, setShowModal2] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const confirm = async () => {
+    try {
+      setIsLoading(true);
+      const response = await Api.getInstance().confirmF88({
+        loanBriefId: item?.id,
+      });
+      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
+        setShowPolicy(false);
+        callback();
+      } else {
+        Alert.alert(
+          'Thông báo',
+          response?.data?.meta?.errorMessage ||
+            'Có lỗi xảy ra, vui lòng thử lại sau!'
+        );
+      }
+    } catch (error) {
+      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (item?.step === 4) {
+      setTimeout(() => {
+        setShowPolicy(true);
+      }, 300);
+    } else if (item?.step === 5) {
+      setTimeout(() => {
+        setShowModal2(true);
+      }, 300);
+    }
+  }, [item]);
+
+  return (
+    <View>
+      <View
+        style={{
+          backgroundColor: '#FFFFFF',
+          paddingHorizontal: 16,
+          marginBottom: 16,
+          borderRadius: 8,
+          borderWidth: 0.5,
+          borderColor: '#E0E0E0',
+        }}
+      >
+        <LinearGradient
+          colors={['#FF8E4F', '#EF592E']}
+          style={{
+            borderTopLeftRadius: 8,
+            borderTopRightRadius: 8,
+            marginHorizontal: -16,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              paddingHorizontal: 16,
+              paddingVertical: 8,
+            }}
+          >
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <IconMoney2 />
+              <MText
+                style={{
+                  fontSize: 12,
+                  color: 'white',
+                }}
+              >
+                HD-{item?.id}
+              </MText>
+            </View>
+            <MText
+              style={{
+                fontSize: 12,
+                color: 'white',
+                fontWeight: 'bold',
+              }}
+            >
+              {formatMoney(item?.loanAmount)}đ
+            </MText>
+          </View>
+        </LinearGradient>
+        <View
+          style={{
+            flexDirection: 'row',
+            paddingVertical: 16,
+            alignItems: 'center',
+            gap: 16,
+          }}
+        >
+          <TouchableOpacity
+            disabled={item?.step > 1 ? true : false}
+            onPress={() => {
+              if (item?.step === 0) {
+                navigation.push(ScreenNames.OCR, {
+                  loan: item,
+                  front: true,
+                });
+              } else {
+                navigation.push(ScreenNames.InfoLoanMotobike, {
+                  loan: item,
+                });
+              }
+            }}
+            style={{
+              backgroundColor:
+                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#ECFFE8',
+              borderRadius: 8,
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              flex: 1,
+              borderWidth: 1,
+              borderColor:
+                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#B1EB95',
+            }}
+          >
+            <LinearGradient
+              colors={
+                item?.step === 0 || item?.step === 1
+                  ? ['#FF8E4F', '#EF592E']
+                  : ['#28A745', '#28A745']
+              }
+              style={{
+                paddingVertical: 2,
+                borderRadius: 40,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 50,
+              }}
+            >
+              <MText style={{ fontSize: 8, color: 'white' }}>Bước 1</MText>
+            </LinearGradient>
+            <View
+              style={{
+                marginTop: 8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
+              {item?.step === 0 || item?.step === 1 ? (
+                <Icon3 />
+              ) : (
+                <IconSuccess />
+              )}
+              <MText
+                style={{
+                  fontSize: 10,
+                }}
+              >
+                Thông tin cá nhân
+              </MText>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => {
+              if (item?.step === 2) {
+                navigation.push(ScreenNames.VehicleCamera, {
+                  loan: item,
+                  front: true,
+                });
+              } else {
+                navigation.push(ScreenNames.ReviewLoanMotobike, {
+                  loan: item,
+                });
+              }
+            }}
+            disabled={item?.step === 2 || item?.step === 3 ? false : true}
+            style={{
+              backgroundColor:
+                item?.step < 2
+                  ? '#FFFFFF'
+                  : item?.step === 2 || item?.step === 3
+                  ? '#FFF3E3'
+                  : '#ECFFE8',
+              borderRadius: 8,
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              flex: 1,
+              borderWidth: 1,
+              borderColor:
+                item?.step < 2
+                  ? '#F2F2F7'
+                  : item?.step === 2 || item?.step === 3
+                  ? '#FFF3E3'
+                  : '#B1EB95',
+            }}
+          >
+            <LinearGradient
+              colors={
+                item?.step < 2
+                  ? ['#C7C7CC', '#C7C7CC']
+                  : item?.step === 2 || item?.step === 3
+                  ? ['#FF8E4F', '#EF592E']
+                  : ['#28A745', '#28A745']
+              }
+              style={{
+                paddingVertical: 2,
+                borderRadius: 40,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 50,
+              }}
+            >
+              <MText style={{ fontSize: 8, color: 'white' }}>Bước 2</MText>
+            </LinearGradient>
+            <View
+              style={{
+                marginTop: 8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
+              {item?.step < 2 ? (
+                <Icon11 />
+              ) : item?.step === 2 || item?.step === 3 ? (
+                <Icon12 />
+              ) : (
+                <IconSuccess />
+              )}
+              <MText
+                style={{
+                  fontSize: 10,
+                }}
+              >
+                Thông tin xe máy
+              </MText>
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={{
+            backgroundColor: '#EEF7FF',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            borderRadius: 4,
+            paddingHorizontal: 8,
+            paddingVertical: 10,
+          }}
+        >
+          <MText
+            style={{
+              fontSize: 10,
+              flex: 1,
+            }}
+          >
+            Hướng dẫn các bước hoàn thiện đơn vay
+          </MText>
+          <TouchableOpacity onPress={() => setShowModal(true)}>
+            <MText
+              style={{
+                fontSize: 10,
+                color: '#2F80ED',
+                textDecorationLine: 'underline',
+              }}
+            >
+              Xem thêm
+            </MText>
+          </TouchableOpacity>
+        </View>
+        <View
+          style={{
+            flexDirection: 'row',
+            paddingBottom: 16,
+            marginTop: 16,
+          }}
+        >
+          <View style={{ flex: 1, paddingRight: 24 }}>
+            <MText
+              style={{
+                color: '#999999',
+                fontSize: 12,
+              }}
+            >
+              Trạng thái
+            </MText>
+            <MText
+              style={{
+                fontSize: 12,
+                fontWeight: 'bold',
+              }}
+            >
+              {item?.step <= 1
+                ? 'Chờ cập nhật thông tin cá nhân'
+                : item?.step === 2 || item?.step === 3
+                ? `Chờ cập nhật thông tin xe máy`
+                : 'Đơn vay đang chờ phê duyệt'}
+            </MText>
+          </View>
+          {item?.step <= 1 ? (
+            <TouchableOpacity
+              onPress={() => {
+                if (item?.step === 0) {
+                  navigation.push(ScreenNames.OCR, {
+                    loan: item,
+                    front: true,
+                  });
+                } else {
+                  navigation.push(ScreenNames.InfoLoanMotobike, {
+                    loan: item,
+                  });
+                }
+              }}
+            >
+              <LinearGradient
+                colors={['#FF8E4F', '#EF592E']}
+                style={{
+                  height: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 24,
+                  paddingHorizontal: 10,
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'white',
+                    fontSize: 12,
+                  }}
+                >
+                  Cập nhật
+                </MText>
+              </LinearGradient>
+            </TouchableOpacity>
+          ) : item?.step === 2 || item?.step === 3 ? (
+            <TouchableOpacity
+              onPress={() => {
+                if (item?.step === 2) {
+                  navigation.push(ScreenNames.VehicleCamera, {
+                    loan: item,
+                    front: true,
+                  });
+                } else {
+                  navigation.push(ScreenNames.ReviewLoanMotobike, {
+                    loan: item,
+                  });
+                }
+              }}
+            >
+              <LinearGradient
+                colors={['#FF8E4F', '#EF592E']}
+                style={{
+                  height: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 24,
+                  paddingHorizontal: 10,
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'white',
+                    fontSize: 12,
+                  }}
+                >
+                  Cập nhật
+                </MText>
+              </LinearGradient>
+            </TouchableOpacity>
+          ) : (
+            <></>
+          )}
+        </View>
+        {item?.step !== 5 ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8,
+              backgroundColor: '#FFF2F2',
+              marginHorizontal: -16,
+              paddingVertical: 10,
+              borderBottomRightRadius: 8,
+              borderBottomLeftRadius: 8,
+              paddingHorizontal: 10,
+            }}
+          >
+            <Info />
+            <MText
+              style={[
+                {
+                  fontSize: 10,
+                  color: '#E40010',
+                  flex: 1,
+                },
+              ]}
+            >
+              {item?.step <= 1
+                ? 'Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!'
+                : item?.step === 2 || item?.step === 3
+                ? `Vui lòng cập nhật thông tin xe để được giải ngân sớm nhất!`
+                : 'Đơn vay đang chờ phê duyệt'}
+            </MText>
+          </View>
+        ) : (
+          <></>
+        )}
+      </View>
+
+      <Modal isVisible={showPolicy} backdropColor="#000" backdropOpacity={0.5}>
+        <View
+          style={{
+            borderRadius: 12,
+            backgroundColor: 'white',
+            padding: 16,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row-reverse',
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setShowPolicy(false)}
+              style={{
+                width: 30,
+                height: 30,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Close2Icon />
+            </TouchableOpacity>
+          </View>
+          <MText
+            style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}
+          >
+            Tiếp tục xử lý đơn vay của bạn
+          </MText>
+          <View
+            style={{
+              marginTop: 16,
+              alignItems: 'center',
+            }}
+          >
+            <Image
+              source={require('../../assets/tts/f88.png')}
+              style={{
+                height: 60,
+                resizeMode: 'contain',
+              }}
+            />
+          </View>
+          <MText
+            style={{ color: '#828282', textAlign: 'center', marginTop: 16 }}
+          >
+            Tima sẽ chuyển thông tin đơn vay của bạn sang đối tác Công ty Cổ
+            phần Kinh doanh F88 để hoàn thiện thủ tục giải ngân. Khi chọn “Đồng
+            ý & Tiếp tục”, bạn xác nhận đồng ý cho việc thu thập, sử dụng và
+            chia sẻ thông tin theo quy định về bảo vệ dữ liệu cá nhân.
+          </MText>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginTop: 24,
+              gap: 8,
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => {
+                setCheck(!check);
+              }}
+            >
+              {check ? <CheckBoxActive /> : <CheckBox />}
+            </TouchableOpacity>
+            <MText>
+              Tôi đồng ý với{' '}
+              <MText
+                style={{ color: '#2F80ED' }}
+                onPress={() => {
+                  setShowPolicy(false);
+                  navigation.navigate(ScreenNames.PolicyF88, { item });
+                }}
+              >
+                điều kiện và điều khoản
+              </MText>
+            </MText>
+          </View>
+          <View>
+            <TouchableOpacity
+              disabled={check || isLoading ? false : true}
+              onPress={() => {
+                confirm();
+              }}
+            >
+              <LinearGradient
+                colors={check ? ['#FF8E4F', '#EF592E'] : ['#E0E0E0', '#E0E0E0']}
+                style={{
+                  height: 40,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 24,
+                  paddingHorizontal: 10,
+                  marginTop: 24,
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'white',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  Đồng ý & Tiếp tục
+                </MText>
+              </LinearGradient>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      <Modal isVisible={showModal2} backdropColor="#000" backdropOpacity={0.5}>
+        <View
+          style={{
+            borderRadius: 12,
+            backgroundColor: 'white',
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row-reverse',
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setShowModal2(false)}
+              style={{
+                width: 30,
+                height: 30,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Close2Icon />
+            </TouchableOpacity>
+          </View>
+          <Image
+            source={require('../../assets/img/Frame1000011990.png')}
+            style={{
+              height: 230,
+              resizeMode: 'contain',
+              width: '100%',
+            }}
+          />
+          <View
+            style={{
+              paddingHorizontal: 24,
+              marginTop: 24,
+              flexDirection: 'column',
+              gap: 8,
+              alignItems: 'center',
+            }}
+          >
+            <MText
+              style={{
+                fontSize: 16,
+                fontWeight: 'bold',
+                textAlign: 'center',
+              }}
+            >
+              Đơn vay đang chờ phê duyệt
+            </MText>
+            <MText
+              style={{
+                fontSize: 14,
+                textAlign: 'center',
+                color: '#828282',
+              }}
+            >
+              Vui lòng chờ ít phút sau đó thực hiện eKYC để hoàn thiện khoản
+              vay!
+            </MText>
+            <TouchableOpacity
+              onPress={() => setShowModal2(false)}
+              style={{
+                borderWidth: 1,
+                borderColor: '#EF592E',
+                borderRadius: 24,
+                height: 40,
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingHorizontal: 50,
+                marginBottom: 24,
+                marginTop: 16,
+              }}
+            >
+              <MText
+                style={{
+                  color: '#EF592E',
+                }}
+              >
+                Đã hiểu
+              </MText>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      <Modal
+        isVisible={showModal}
+        backdropColor="#000"
+        backdropOpacity={0.5}
+        onBackdropPress={() => setShowModal(false)}
+      >
+        <View
+          style={{
+            borderRadius: 12,
+            backgroundColor: 'white',
+            padding: 16,
+          }}
+        >
+          <MText
+            style={{
+              fontSize: 16,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              marginTop: 16,
+            }}
+          >
+            Các bước hoàn thiện khoản vay
+          </MText>
+          <MText
+            style={{
+              textAlign: 'center',
+              color: '#828282',
+            }}
+          >
+            Thực hiện theo các bước sau
+          </MText>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon2 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 1
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
+                  THÔNG TIN CÁ NHÂN
+                </MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Thực hiện OCR giấy tờ CCCD/CC và chụp 1 ảnh chân dung
+            </MText>
+          </View>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon3 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 2
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
+                  THÔNG TIN XE MÁY
+                </MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Chụp 2 mặt hình ảnh Đăng ký xe
+            </MText>
+          </View>
+
+          <View
+            style={{
+              backgroundColor: '#FFF8F2',
+              padding: 12,
+              borderRadius: 8,
+              marginTop: 16,
+            }}
+          >
+            <MText style={{ fontSize: 12, fontWeight: 'bold' }}>
+              Ý nghĩa biểu tượng
+            </MText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Đang cần thực hiện
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <Icon2 />
+                <Icon3 />
+                <Icon4 />
+                <Icon5 />
+              </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Chưa thể thực hiện
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <Icon7 />
+                <Icon8 />
+                <Icon9 />
+                <Icon10 />
+              </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Đã hoàn thành
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <IconSuccess />
+              </View>
+            </View>
+          </View>
+
+          <TouchableOpacity
+            style={{ position: 'absolute', top: 16, right: 16 }}
+            onPress={() => setShowModal(false)}
+          >
+            <Close2Icon />
+          </TouchableOpacity>
+        </View>
+      </Modal>
+    </View>
+  );
+}