react-native-timacare 3.3.41 → 3.3.42

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

@@ -6,6 +6,7 @@ import {
   Dimensions,
   Image,
   ImageBackground,
+  InteractionManager,
   Linking,
   Platform,
   RefreshControl,
@@ -116,15 +117,36 @@ const $action: ViewStyle = {
 };
 
 let _unsubscribe;
+// Dữ liệu tham chiếu tĩnh (ngân hàng, nghề nghiệp, tỉnh...) chỉ cần prefetch 1 lần/phiên
+let _didPrefetchRefData = false;
+
+// Props an toàn cho react-native-modal:
+// - backdropTransitionOutTiming={0}: tránh lớp backdrop fade-out còn sót lại chặn touch (treo màn hình)
+// - useNativeDriver/useNativeDriverForBackdrop: animation mượt, không rớt animation đóng
+// - hideModalContentWhileAnimating: ẩn nội dung khi đang animate, giảm giật
+const modalSafeProps = {
+  useNativeDriver: true,
+  useNativeDriverForBackdrop: true,
+  hideModalContentWhileAnimating: true,
+  backdropTransitionOutTiming: 0,
+};
+
+// Tên các modal - dùng 1 state duy nhất để đảm bảo chỉ 1 modal hiển thị tại 1 thời điểm
+const MODAL = {
+  CIMB_ERROR: 'CIMB_ERROR', // showModal
+  CIMB_APPROVE: 'CIMB_APPROVE', // showModal2
+  TTS_APPROVE: 'TTS_APPROVE', // showModal3
+  SUGGEST: 'SUGGEST', // showModal4
+  ALERT: 'ALERT', // showModal5
+  DIGITAL_SUGGEST: 'DIGITAL_SUGGEST', // showModal6
+};
 
 export const Home = observer(function Home() {
   const navigation = useNavigation();
-  const [showModal, setShowModal] = useState(false);
-  const [showModal2, setShowModal2] = useState(false);
-  const [showModal3, setShowModal3] = useState(false);
-  const [showModal4, setShowModal4] = useState(false);
-  const [showModal5, setShowModal5] = useState(false);
-  const [showModal6, setShowModal6] = useState(false);
+  // 1 modal tại 1 thời điểm: tránh stack backdrop gây treo màn hình
+  const [activeModal, setActiveModal] = useState<string | null>(null);
+  // Hành động điều hướng chờ chạy SAU khi modal đóng hẳn (onModalHide)
+  const pendingNavRef = React.useRef<(() => void) | null>(null);
   const [listLoan, setListLoan] = useState<any[]>([]);
   const [checkEKYC, setCheckEKYC] = useState<any>({});
   const [isLoading, setIsLoading] = useState(false);
@@ -132,14 +154,21 @@ export const Home = observer(function Home() {
   const [loan, setLoan] = useState(null);
   const [dataSuggest, setDataSuggest] = useState<any>();
   const insets = useSafeAreaInsets();
-  console.log(
-    showModal,
-    showModal2,
-    showModal3,
-    showModal4,
-    showModal5,
-    showModal6
-  );
+
+  // Chỉ mở modal khi chưa có modal nào đang mở -> không bao giờ stack 2 modal
+  const openModal = (name: string) =>
+    setActiveModal((prev) => prev ?? name);
+  const closeModal = () => setActiveModal(null);
+  // Đóng modal rồi điều hướng sau khi animation đóng hoàn tất (chống treo màn hình)
+  const closeModalThen = (fn?: () => void) => {
+    pendingNavRef.current = fn ?? null;
+    setActiveModal(null);
+  };
+  const runPendingNav = () => {
+    const fn = pendingNavRef.current;
+    pendingNavRef.current = null;
+    if (fn) fn();
+  };
 
   const onRefresh = async () => {
     homeStore.getListLoan();
@@ -161,8 +190,8 @@ export const Home = observer(function Home() {
                   if (item?.messageErrorCIMB && item.messageErrorCIMB !== '') {
                     setLoanCimb(item);
                     setTimeout(() => {
-                      setShowModal(true);
-                    }, 800);
+                      openModal(MODAL.CIMB_ERROR);
+                    }, 300);
                   }
                   if (
                     (item?.typeLoan === 4 || item?.typeLoan === 2) &&
@@ -172,8 +201,8 @@ export const Home = observer(function Home() {
                     if (!checkShow || checkShow !== true) {
                       setLoanCimb(item);
                       setTimeout(() => {
-                        setShowModal2(true);
-                      }, 800);
+                        openModal(MODAL.CIMB_APPROVE);
+                      }, 300);
                     }
                   }
                 }
@@ -183,8 +212,8 @@ export const Home = observer(function Home() {
                 ) {
                   setLoan(item);
                   setTimeout(() => {
-                    setShowModal3(true);
-                  }, 800);
+                    openModal(MODAL.TTS_APPROVE);
+                  }, 300);
                 }
                 if (
                   (item?.typeLoan === 5 || item?.typeLoan === 6) &&
@@ -200,8 +229,8 @@ export const Home = observer(function Home() {
                       typeLoan: item?.typeLoan,
                     });
                     setTimeout(() => {
-                      setShowModal4(true);
-                    }, 800);
+                      openModal(MODAL.SUGGEST);
+                    }, 300);
                   }
                 }
 
@@ -222,8 +251,8 @@ export const Home = observer(function Home() {
                       typeLoan: item?.typeLoan,
                     });
                     setTimeout(() => {
-                      setShowModal6(true);
-                    }, 800);
+                      openModal(MODAL.DIGITAL_SUGGEST);
+                    }, 300);
                   }
                 }
 
@@ -233,8 +262,8 @@ export const Home = observer(function Home() {
                   (item?.step === 7 || item?.step === 100)
                 ) {
                   setTimeout(() => {
-                    setShowModal5(true);
-                  }, 800);
+                    openModal(MODAL.ALERT);
+                  }, 300);
                 }
               })
             );
@@ -263,18 +292,34 @@ export const Home = observer(function Home() {
   }, [navigation]);
 
   useEffect(() => {
-    setTimeout(() => {
-      FullSubmitStore.getTypeMerried();
-      FullSubmitStore.getListBank();
-      FullSubmitStore.getIncomeCIMB();
-      FullSubmitStore.getPositionCIMB();
-      FullSubmitStore.getJobStatusCIMB();
-      QuickSubmitStore.getJobsCIMB();
-      appStore.getLoanTimeAll();
-      appStore.getRateTypeAll();
-      appStore.getInsurenceTimeAll();
-      ttsStore.getProvinces();
-    }, 2000);
+    if (_didPrefetchRefData) return;
+    // Chạy sau khi màn hình render/animation xong (thay cho setTimeout 2000ms cố định)
+    const task = InteractionManager.runAfterInteractions(async () => {
+      await Promise.all([
+        FullSubmitStore.getTypeMerried(),
+        FullSubmitStore.getListBank(),
+        FullSubmitStore.getIncomeCIMB(),
+        FullSubmitStore.getPositionCIMB(),
+        FullSubmitStore.getJobStatusCIMB(),
+        QuickSubmitStore.getJobsCIMB(),
+        appStore.getLoanTimeAll(),
+        appStore.getRateTypeAll(),
+        appStore.getInsurenceTimeAll(),
+        ttsStore.getProvinces(),
+      ]);
+      // Các hàm store nuốt lỗi (không throw) -> coi là thành công khi dữ liệu
+      // tham chiếu thực sự về store. Nếu mất mạng (list rỗng) sẽ thử lại ở lần mount sau.
+      const loaded =
+        FullSubmitStore.listTypeMerried?.length > 0 &&
+        FullSubmitStore.listBanks?.length > 0 &&
+        QuickSubmitStore.listJobCimb?.length > 0 &&
+        appStore.listLoanTime?.length > 0 &&
+        appStore.listRateType?.length > 0 &&
+        appStore.listInsurenceTimeAll?.length > 0 &&
+        ttsStore.listProvince?.length > 0;
+      if (loaded) _didPrefetchRefData = true;
+    });
+    return () => task.cancel();
   }, []);
 
   const signLoan = (loan) => {
@@ -398,10 +443,7 @@ export const Home = observer(function Home() {
       setIsLoading(false);
       if (response.kind === 'ok') {
         if (response.data?.meta?.errorCode === 200) {
-          setShowModal3(false);
-          setTimeout(() => {
-            onRefresh();
-          }, 300);
+          closeModalThen(() => onRefresh());
         } else {
           Alert.alert('Thông báo', response.data?.meta?.errorMessage);
         }
@@ -423,10 +465,7 @@ export const Home = observer(function Home() {
       setIsLoading(false);
       if (response.kind === 'ok') {
         if (response.data?.meta?.errorCode === 200) {
-          setShowModal3(false);
-          setTimeout(() => {
-            onRefresh();
-          }, 300);
+          closeModalThen(() => onRefresh());
         } else {
           Alert.alert('Thông báo', response.data?.meta?.errorMessage);
         }
@@ -2346,12 +2385,72 @@ export const Home = observer(function Home() {
               </View>
             )}
           </Observer>
+
+          {/* Empty state: không có cả đơn mới lẫn đơn đang vay */}
+          <Observer>
+            {() =>
+              !isLoading &&
+              !homeStore.isLoading &&
+              (listLoan?.length ?? 0) === 0 &&
+              (homeStore?.listLoan?.length ?? 0) === 0 ? (
+                <View
+                  style={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    paddingVertical: 48,
+                  }}
+                >
+                  <Image
+                    source={require('./not_found.png')}
+                    style={{
+                      width: 180,
+                      height: 180,
+                      resizeMode: 'contain',
+                    }}
+                  />
+                  <MText
+                    style={{
+                      marginTop: 16,
+                      fontSize: 14,
+                      color: '#828282',
+                      textAlign: 'center',
+                    }}
+                  >
+                    Oops! Bạn chưa có khoản vay nào
+                  </MText>
+                  <TouchableOpacity
+                    onPress={() => onRefresh()}
+                    style={{
+                      marginTop: 16,
+                      borderWidth: 1,
+                      borderColor: '#EF592E',
+                      borderRadius: 30,
+                      paddingHorizontal: 32,
+                      height: 40,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <MText style={{ color: '#EF592E', fontSize: 14 }}>
+                      Tải lại trang
+                    </MText>
+                  </TouchableOpacity>
+                </View>
+              ) : (
+                <View />
+              )
+            }
+          </Observer>
         </View>
-        <Modal isVisible={showModal}>
+        <Modal
+          isVisible={activeModal === MODAL.CIMB_ERROR}
+          onModalHide={runPendingNav}
+          {...modalSafeProps}
+        >
           <SafeAreaView style={{ backgroundColor: '#FFFFFF', borderRadius: 6 }}>
             <View style={{ flexDirection: 'row-reverse' }}>
               <TouchableOpacity
-                onPress={() => setShowModal(false)}
+                onPress={() => closeModal()}
                 style={{
                   width: 40,
                   height: 40,
@@ -2432,7 +2531,11 @@ export const Home = observer(function Home() {
             </View>
           </SafeAreaView>
         </Modal>
-        <Modal isVisible={showModal2}>
+        <Modal
+          isVisible={activeModal === MODAL.CIMB_APPROVE}
+          onModalHide={runPendingNav}
+          {...modalSafeProps}
+        >
           <SafeAreaView style={{ backgroundColor: '#FFFFFF', borderRadius: 8 }}>
             <View>
               <Image
@@ -2483,11 +2586,12 @@ export const Home = observer(function Home() {
                         paddingVertical: 8,
                       }}
                       onPress={() => {
-                        setShowModal2(false);
-                        navigation.push(ScreenNames.AcceptPolicy, {
-                          loan: loanCimb,
-                          isCimb: true,
-                        });
+                        closeModalThen(() =>
+                          navigation.push(ScreenNames.AcceptPolicy, {
+                            loan: loanCimb,
+                            isCimb: true,
+                          })
+                        );
                       }}
                     >
                       <MText style={{ color: color.primary }}>Xác nhận</MText>
@@ -2515,7 +2619,7 @@ export const Home = observer(function Home() {
                                 });
                               if (response.kind === 'ok') {
                                 if (response.data.meta.errorCode === 200) {
-                                  setShowModal2(false);
+                                  closeModal();
                                   const key = `SHOW_${loanCimb.id}`;
                                   save(key, true);
                                   Alert.alert(
@@ -2586,11 +2690,12 @@ export const Home = observer(function Home() {
                         paddingVertical: 8,
                       }}
                       onPress={() => {
-                        setShowModal2(false);
-                        navigation.push(ScreenNames.AcceptPolicy, {
-                          loan: loanCimb,
-                          isCimb: false,
-                        });
+                        closeModalThen(() =>
+                          navigation.push(ScreenNames.AcceptPolicy, {
+                            loan: loanCimb,
+                            isCimb: false,
+                          })
+                        );
                       }}
                     >
                       <MText style={{ color: color.primary }}>Tiếp tục</MText>
@@ -2601,7 +2706,11 @@ export const Home = observer(function Home() {
             </View>
           </SafeAreaView>
         </Modal>
-        <Modal isVisible={showModal3}>
+        <Modal
+          isVisible={activeModal === MODAL.TTS_APPROVE}
+          onModalHide={runPendingNav}
+          {...modalSafeProps}
+        >
           <SafeAreaView style={{ backgroundColor: '#FFFFFF', borderRadius: 6 }}>
             <Image
               source={require('../../assets/tts/Banner.png')}
@@ -2703,10 +2812,9 @@ export const Home = observer(function Home() {
             >
               <TouchableOpacity
                 onPress={() => {
-                  setShowModal3(false);
-                  setTimeout(() => {
-                    navigation.push(ScreenNames.LoanInterestRate, { loan });
-                  }, 300);
+                  closeModalThen(() =>
+                    navigation.push(ScreenNames.LoanInterestRate, { loan })
+                  );
                 }}
               >
                 <MText
@@ -2724,41 +2832,40 @@ export const Home = observer(function Home() {
         </Modal>
 
         <ModalOptionLoan
-          open={showModal4}
+          open={activeModal === MODAL.SUGGEST}
           loan={dataSuggest}
           callback={() => {
-            setShowModal4(false);
-            setTimeout(() => {
-              // onRefresh();
+            closeModalThen(() =>
               navigation.push(ScreenNames.ReviewLoan, {
                 loan: loan,
-              });
-            }, 300);
+              })
+            );
           }}
           onClose={() => {
-            setShowModal4(false);
+            closeModal();
           }}
+          onModalHide={runPendingNav}
         />
         <ModalOptionLoanDigital
-          open={showModal6}
+          open={activeModal === MODAL.DIGITAL_SUGGEST}
           loan={dataSuggest}
           callback={() => {
-            setShowModal6(false);
-            setTimeout(() => {
+            closeModalThen(() =>
               navigation.push(ScreenNames.ReviewLoan, {
                 loan: loan,
-              });
-            }, 300);
+              })
+            );
           }}
           onClose={() => {
-            setShowModal6(false);
+            closeModal();
           }}
+          onModalHide={runPendingNav}
         />
 
         <AlertLoan
-          open={showModal5}
+          open={activeModal === MODAL.ALERT}
           onClose={() => {
-            setShowModal5(false);
+            closeModal();
           }}
         />
       </ScrollView>