react-native-timacare 3.3.12 → 3.3.13

package/src/screens/home/DigitalTopupItem.tsx

@@ -0,0 +1,562 @@
+//@ts-nocheck
+import React from 'react';
+import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { IconMoney2, IconTick, IconTima16 } from '../../assets/svgs';
+import { formatMoney } from '../../utils';
+import { MText } from '../../components/MText';
+import {
+  IconStep1,
+  IconStep1Disable,
+  IconStep2Disable,
+  IconStep1Success,
+  IconStep3Disable,
+  IconStep4Disable,
+  IconStep2,
+  IconStep2Success,
+  IconStep3,
+  IconStep4,
+  IconStep4Success,
+  IconStep3Success,
+} from '../../assets/digital_topup';
+import { color } from '../../theme';
+import { ScreenNames } from '../../navigation';
+import { Info } from '../../assets/icons';
+
+interface IProps {
+  item?: any;
+  navigation: any;
+}
+export default function DigitalTopupItem({ item, navigation }: IProps) {
+  const [showModal, setShowModal] = React.useState(false);
+  return (
+    <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',
+          justifyContent: 'space-between',
+          marginTop: 16,
+        }}
+      >
+        <TouchableOpacity
+          disabled={item?.step === 3 ? false : true}
+          style={$action}
+          onPress={() => {
+            navigation.push(ScreenNames.ReviewLoan, {
+              loan: item,
+            });
+          }}
+        >
+          {item?.step < 3 ? (
+            <IconStep1Disable />
+          ) : item?.step === 3 ? (
+            <IconStep1 />
+          ) : (
+            <IconStep1Success />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color:
+                item?.step < 3
+                  ? '#999999'
+                  : item?.step === 3
+                  ? '#EF592E'
+                  : '#333333',
+            }}
+          >
+            Thông tin{'\n'}khoản vay
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={$action}
+          disabled={
+            item?.step === 4 || item?.step === 5 || item?.step === 6
+              ? false
+              : true
+          }
+          onPress={() => {
+            if (item?.step === 4) {
+              navigation.push(ScreenNames.OCR, {
+                loan: item,
+                front: true,
+              });
+            } else if (item?.step === 5) {
+              if (item?.typeLoan === 5) {
+                navigation.push(ScreenNames.ReviewInformation, {
+                  loan: item,
+                });
+              } else {
+                navigation.push(ScreenNames.TopupLoanInfo, {
+                  loan: item,
+                });
+              }
+            } else if (item?.step === 6) {
+              navigation.push(ScreenNames.ReviewInformationOther, {
+                loan: item,
+              });
+            }
+          }}
+        >
+          {item?.step < 4 ? (
+            <IconStep2Disable />
+          ) : item?.step === 4 || item?.step === 5 || item?.step === 6 ? (
+            <IconStep2 />
+          ) : (
+            <IconStep2Success />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color:
+                item?.step < 4
+                  ? '#999999'
+                  : item?.step === 4 || item?.step === 5 || item?.step === 6
+                  ? '#EF592E'
+                  : '#333333',
+            }}
+          >
+            Thông tin{'\n'}cá nhân
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          disabled={item?.step === 9 ? false : true}
+          style={$action}
+          onPress={() => {
+            navigation.push(ScreenNames.LivenessV2, {
+              loan: item,
+            });
+          }}
+        >
+          {item?.step < 9 || item?.step === 100 ? (
+            <IconStep3Disable />
+          ) : item?.step === 9 ? (
+            <IconStep3 />
+          ) : (
+            <IconStep3Success />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color:
+                item?.step < 9 || item?.step === 100
+                  ? '#999999'
+                  : item?.step === 9
+                  ? '#EF592E'
+                  : '#333333',
+            }}
+          >
+            EKYC
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          disabled={item?.step === 10 ? false : true}
+          style={$action}
+          onPress={() => {
+            navigation.push(ScreenNames.TTSSignLoan, {
+              loan: item,
+            });
+          }}
+        >
+          {item?.step < 10 || item?.step === 100 ? (
+            <IconStep4Disable />
+          ) : item?.step === 10 ? (
+            <IconStep4 />
+          ) : (
+            <IconStep4Success />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color:
+                item?.step < 10 || item?.step === 100
+                  ? '#999999'
+                  : item?.step === 10
+                  ? '#EF592E'
+                  : '#333333',
+            }}
+          >
+            Ký hợp{'\n'}đồng
+          </MText>
+        </TouchableOpacity>
+      </View>
+
+      {item?.step !== 11 ? (
+        <View
+          style={{
+            backgroundColor: '#FFF3E9',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            borderRadius: 4,
+            paddingHorizontal: 8,
+            paddingVertical: 10,
+            marginTop: 16,
+          }}
+        >
+          <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: color.primary,
+                textDecorationLine: 'underline',
+              }}
+            >
+              Xem thêm
+            </MText>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <View
+          style={{
+            backgroundColor: '#E8FFE9',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            borderRadius: 4,
+            paddingHorizontal: 8,
+            paddingVertical: 10,
+            marginTop: 16,
+          }}
+        >
+          <IconTick />
+          <MText style={{ color: '#28A745', fontSize: 10, flex: 1 }}>
+            Hợp đồng đã ký thành công. Quý khách vui lòng chờ Chuyên viên tư vấn
+            liên hệ để hoàn tất bước giải ngân.
+          </MText>
+        </View>
+      )}
+
+      {item?.step !== 11 ? (
+        <View style={$row}>
+          <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 tài sản'
+                : item?.step === 3
+                ? `Chờ cập nhật thông tin khoản vay`
+                : item?.step === 4 || item?.step === 5 || item?.step === 6
+                ? `Chờ cập nhật thông tin cá nhân`
+                : item?.step === 9
+                ? `Chờ cập nhật eKYC`
+                : item?.step === 11
+                ? `Hợp đồng đã ký thành công. Vui lòng chờ chuyên viên tư vấn liên hệ`
+                : 'Đơn vay đang trong quá trình xử lý'}
+            </MText>
+          </View>
+          {item?.step <= 1 ? (
+            <TouchableOpacity
+              onPress={() => {
+                if (item?.typeLoan === 7) {
+                  navigation.push(ScreenNames.LoanBuyCar, {
+                    loan: item,
+                  });
+                } else {
+                  if (item?.step === 0) {
+                    navigation.push(ScreenNames.VehicleCamera, {
+                      loan: item,
+                      front: true,
+                    });
+                  } else {
+                    navigation.push(ScreenNames.AssetInformation, {
+                      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 === 3 ? (
+            <TouchableOpacity
+              onPress={() => {
+                if (item?.step === 3) {
+                  navigation.push(ScreenNames.ReviewLoan, {
+                    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 === 4 || item?.step === 5 || item?.step === 6 ? (
+            <TouchableOpacity
+              onPress={() => {
+                if (item?.step === 4) {
+                  navigation.push(ScreenNames.OCR, {
+                    loan: item,
+                    front: true,
+                  });
+                } else if (item?.step === 5) {
+                  if (item?.typeLoan === 5) {
+                    navigation.push(ScreenNames.ReviewInformation, {
+                      loan: item,
+                    });
+                  } else {
+                    navigation.push(ScreenNames.TopupLoanInfo, {
+                      loan: item,
+                    });
+                  }
+                } else if (item?.step === 6) {
+                  navigation.push(ScreenNames.ReviewInformationOther, {
+                    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 === 9 ? (
+            <TouchableOpacity
+              onPress={() => {
+                navigation.push(ScreenNames.LivenessV2, {
+                  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 === 10 ? (
+            <TouchableOpacity
+              onPress={() => {
+                navigation.push(ScreenNames.TTSSignLoan, {
+                  loan: item,
+                });
+              }}
+            >
+              <LinearGradient
+                colors={['#FF8E4F', '#EF592E']}
+                style={{
+                  height: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 24,
+                  paddingHorizontal: 10,
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'white',
+                    fontSize: 12,
+                  }}
+                >
+                  Ký hợp đồng
+                </MText>
+              </LinearGradient>
+            </TouchableOpacity>
+          ) : (
+            <></>
+          )}
+        </View>
+      ) : (
+        <></>
+      )}
+      {item?.step !== 11 ? (
+        <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 tài sản để được giải ngân sớm nhất!'
+              : item?.step === 3
+              ? `Vui lòng cập nhật thông tin khoản vay để được giải ngân sớm nhất!`
+              : item?.step === 4 || item?.step === 5 || item?.step === 6
+              ? `Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!`
+              : item?.step === 9
+              ? `Bước cuối cùng rồi, vui lòng ký hợp đồng để được giải ngân sớm nhất nhé!`
+              : 'Đơn vay đang trong quá trình xử lý'}
+          </MText>
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}
+const $action: ViewStyle = {
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 5,
+};
+const $row: ViewStyle = {
+  flexDirection: 'row',
+  // borderBottomWidth: 1,
+  // borderColor: '#E0E0E0',
+  paddingBottom: 16,
+  marginTop: 16,
+};

package/src/screens/home/index.tsx

@@ -100,6 +100,9 @@ import { o } from 'ramda';
 import ItemTimaOneV3 from '../../components/ItemTimaOneV3';
 import ModalOptionLoan from '../../components/ModalOptionLoan';
 import AlertLoan from '../../components/AlertLoan';
+import DigitalTopupItem from './DigitalTopupItem';
+import ModalOptionLoanDigital from '../../components/ModalOptionLoanDigital';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const listBanners = [
   require('../../assets/img/banner1.png'),
@@ -120,12 +123,14 @@ export const Home = observer(function Home() {
   const [showModal3, setShowModal3] = useState(false);
   const [showModal4, setShowModal4] = useState(false);
   const [showModal5, setShowModal5] = useState(false);
+  const [showModal6, setShowModal6] = useState(false);
   const [listLoan, setListLoan] = useState<any[]>([]);
   const [checkEKYC, setCheckEKYC] = useState<any>({});
   const [isLoading, setIsLoading] = useState(false);
   const [loanCimb, setLoanCimb] = useState(null);
   const [loan, setLoan] = useState(null);
   const [dataSuggest, setDataSuggest] = useState<any>();
+  const insets = useSafeAreaInsets();
 
   const onRefresh = async () => {
     setIsLoading(true);
@@ -190,6 +195,30 @@ export const Home = observer(function Home() {
                     }, 300);
                   }
                 }
+
+                // check suggest đơn digital topup luồng timaone
+                if (
+                  item?.typeLoan === 4 &&
+                  !item?.isPipelineCIMB &&
+                  item?.step === 2
+                ) {
+                  setLoan(item);
+                  const res = await Api.getInstance().getSuggestDigitalTopup(
+                    item?.id
+                  );
+
+                  if (res.kind === 'ok' && res.data?.meta?.errorCode === 200) {
+                    setDataSuggest({
+                      ...res.data?.data,
+                      typeLoan: item?.typeLoan,
+                    });
+                    setTimeout(() => {
+                      setShowModal6(true);
+                    }, 300);
+                  }
+                }
+
+                //
                 if (
                   (item?.typeLoan === 5 || item?.typeLoan === 6) &&
                   (item?.step === 7 || item?.step === 100)
@@ -404,14 +433,13 @@ export const Home = observer(function Home() {
       style={[commonStyles.fill, { zIndex: 1, backgroundColor: '#FFFFFF' }]}
     >
       <LinearGradient colors={['#FF8E4F', '#EF592E']}>
-        <SafeAreaView style={{}}>
+        <View style={{ marginTop: insets.top + 16 }}>
           <View
             style={{
               flexDirection: 'row',
               paddingHorizontal: 16,
               alignItems: 'center',
               justifyContent: 'space-between',
-              paddingTop: 8,
               paddingBottom: 8,
             }}
           >
@@ -422,7 +450,7 @@ export const Home = observer(function Home() {
                 fontSize: 14,
               }}
             >
-              Vay trực tuyến 24/7
+              Vay Online 24/7
             </MText>
             <View
               style={{
@@ -459,7 +487,7 @@ export const Home = observer(function Home() {
               </TouchableOpacity>
             </View>
           </View>
-        </SafeAreaView>
+        </View>
       </LinearGradient>
       <ScrollView
         refreshControl={
@@ -500,6 +528,8 @@ export const Home = observer(function Home() {
                   <View>
                     <ItemTimaOneV3 item={item} navigation={navigation} />
                   </View>
+                ) : item?.typeLoan === 4 && !item?.isPipelineCIMB ? (
+                  <DigitalTopupItem item={item} navigation={navigation} />
                 ) : (
                   <View>
                     {/* // luồng CIMB */}
@@ -2674,6 +2704,21 @@ export const Home = observer(function Home() {
             setShowModal4(false);
           }}
         />
+        <ModalOptionLoanDigital
+          open={showModal6}
+          loan={dataSuggest}
+          callback={() => {
+            setShowModal6(false);
+            setTimeout(() => {
+              navigation.push(ScreenNames.ReviewLoan, {
+                loan: loan,
+              });
+            }, 300);
+          }}
+          onClose={() => {
+            setShowModal6(false);
+          }}
+        />
 
         <AlertLoan
           open={showModal5}

package/src/screens/liveness-v2/index.tsx

@@ -390,15 +390,18 @@ export const LivenessV2 = observer(function LivenessV2(props: any) {
     }
   };
 
-  useEffect(async () => {
-    await logEvent('ekyc_started', {
-      event: 'ekyc_started',
-      createdAt: new Date(),
-      deviceId: appStore.deviceId,
-      loanId: String(loan?.id),
-      utmSource: loan?.utmSource,
-    });
-    logEventFb('ekyc_started');
+  useEffect(() => {
+    const trackingEvent = async () => {
+      await logEvent('ekyc_started', {
+        event: 'ekyc_started',
+        createdAt: new Date(),
+        deviceId: appStore.deviceId,
+        loanId: String(loan?.id),
+        utmSource: loan?.utmSource,
+      });
+      logEventFb('ekyc_started');
+    };
+    trackingEvent();
   }, []);
 
   return (