react-native-timacare 3.3.43 → 3.3.44

package/src/navigation/navigationRef.ts

@@ -0,0 +1,40 @@
+// @ts-nocheck
+/**
+ * Navigation bridge for the Timacare SDK.
+ *
+ * The host app already owns its <NavigationContainer ref={...}>, so instead of
+ * creating a second ref the host registers its existing one here once (typically
+ * right after the container mounts). The SDK then uses it to drive navigation
+ * imperatively from outside React — e.g. deep-linking into a loan detail via
+ * `goDetail()`.
+ *
+ * Accepts either form of ref:
+ *  - the object returned by `createNavigationContainerRef()` /
+ *    `useNavigationContainerRef()` (methods live directly on it), or
+ *  - a plain `useRef()` passed to <NavigationContainer ref={ref}> (methods live
+ *    on `ref.current`).
+ */
+let externalNavigationRef = null;
+
+export const setNavigationRef = (ref) => {
+  externalNavigationRef = ref;
+};
+
+/**
+ * Resolves the registered ref down to the actual NavigationContainerRef,
+ * regardless of which ref form the host provided. Returns null when nothing is
+ * registered yet or the container isn't ready.
+ */
+export const getNavigation = () => {
+  const ref = externalNavigationRef;
+  if (!ref) {
+    return null;
+  }
+
+  const nav = typeof ref.navigate === 'function' ? ref : ref.current;
+  if (!nav || (typeof nav.isReady === 'function' && !nav.isReady())) {
+    return null;
+  }
+
+  return nav;
+};

package/src/navigation/primary-navigator.tsx

@@ -8,6 +8,7 @@
 import React, { useEffect } from 'react';
 
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { getNavigation } from './navigationRef';
 import { OTP } from '../screens/otp';
 import { NationalID } from '../screens/nationalID';
 import { Selfie } from '../screens/selfie';
@@ -317,3 +318,32 @@ export function PrimaryNavigator(props) {
 
 const exitRoutes = ['welcome'];
 export const canExit = (routeName: string) => exitRoutes.includes(routeName);
+
+/**
+ * Imperatively navigate into a loan detail screen from outside React.
+ *
+ * Intended for the host app to deep-link the user straight into a loan detail
+ * (e.g. from a push notification or a list rendered outside the SDK). Requires
+ * the host to register its NavigationContainer ref once via `setNavigationRef()`.
+ *
+ * Accepts either a loan id or a partial loan object. The detail screen only
+ * needs `id` to fetch its data; `disbursementPartner` (when provided) selects
+ * the matching screen — 'CIMB' -> DetailLoan, otherwise -> DetailLoanTima.
+ */
+export function goDetail(
+  loan: number | { id: number; disbursementPartner?: string }
+) {
+  const loanObj = typeof loan === 'number' ? { id: loan } : loan;
+  const navigation = getNavigation();
+
+  if (!loanObj?.id || !navigation) {
+    return;
+  }
+
+  const screen =
+    loanObj.disbursementPartner === 'CIMB'
+      ? ScreenNames.DetailLoan
+      : ScreenNames.DetailLoanTima;
+
+  navigation.navigate(screen, { loan: loanObj });
+}

package/src/screens/home/BoxGuidline.tsx

@@ -0,0 +1,58 @@
+//@ts-nocheck
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { MText } from '../../components/MText';
+import { GuiSvg, Layer1Svg } from '../../assets/icons';
+export default function BoxGuidline() {
+  return (
+    <LinearGradient colors={['#FFF8F2', '#FFFFFF']} style={styles.container}>
+      <MText
+        style={{
+          fontFamily: 'BeVietnamPro-SemiBold',
+          fontWeight: '600',
+        }}
+      >
+        Chuẩn bị trước khi hoàn thiện đơn
+      </MText>
+      <View style={styles.row}>
+        <View style={{ flex: 1, flexDirection: 'column', gap: 6 }}>
+          <View style={styles.item}>
+            <Layer1Svg />
+            <MText style={{ fontSize: 12 }}>Giấy đăng ký xe rõ nét</MText>
+          </View>
+          <View style={styles.item}>
+            <Layer1Svg />
+            <MText style={{ fontSize: 12 }}>CCCD gắn chip bản gốc</MText>
+          </View>
+          <View style={styles.item}>
+            <Layer1Svg />
+            <MText style={{ fontSize: 12 }}>Không gian đủ ánh sáng</MText>
+          </View>
+        </View>
+        <View style={{ marginRight: 24 }}>
+          <GuiSvg />
+        </View>
+      </View>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderColor: '#E5E5EA',
+    borderRadius: 8,
+    padding: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

package/src/screens/home/ItemMotoBikeLoan.tsx

@@ -489,7 +489,7 @@ export default function ItemMotoBikeLoan({
           <MText
             style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}
           >
-            Tiếp tục xử lý đơn vay của bạn
+            Xác nhận chia sẻ dữ liệu
           </MText>
           <View
             style={{
@@ -508,10 +508,11 @@ export default function ItemMotoBikeLoan({
           <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.
+            Tima sẽ chuyển thông tin của bạn đến Công ty Cổ phần Kinh doanh F88
+            (F88) để xem xét phê duyệt khoản vay. Khi chọn "Đồng ý & Tiếp tục",
+            bạn đồng ý cho các bên liên quan thu thập, sử dụng, xử lý và chia sẻ
+            dữ liệu cá nhân theo quy định của pháp luật. Sau khi chuyển giao dữ
+            liệu, Tima là bên kiểm soát và xử lý dữ liệu cá nhân.
           </MText>
           <View
             style={{

package/src/screens/home/index.tsx

@@ -48,6 +48,7 @@ import {
   IconVideo,
   Info,
   LogoSmall,
+  NotFoundSvg,
   OcrSvg,
   SignDisable,
   TimaNormal,
@@ -77,7 +78,9 @@ import appStore from '../../AppStore';
 import Modal from 'react-native-modal';
 import { Api } from '../../services/api';
 import { load, save } from '../../utils/storage';
-import Loading from '../../components/Loading';
+import SkeletonLoanList, {
+  SkeletonDisbursedList,
+} from '../../components/SkeletonLoanCard';
 import MButton from '../../components/MButton';
 import ttsStore from '../toan-trinh-so/store';
 import {
@@ -105,6 +108,7 @@ import DigitalTopupItem from './DigitalTopupItem';
 import ModalOptionLoanDigital from '../../components/ModalOptionLoanDigital';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ItemMotoBikeLoan from './ItemMotoBikeLoan';
+import BoxGuidline from './BoxGuidline';
 
 const listBanners = [
   require('../../assets/img/banner1.png'),
@@ -156,8 +160,7 @@ export const Home = observer(function Home() {
   const insets = useSafeAreaInsets();
 
   // 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 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) => {
@@ -548,18 +551,25 @@ export const Home = observer(function Home() {
         style={{ flex: 1, marginBottom: 16 }}
       >
         <View style={[commonStyles.fill, { paddingHorizontal: 16 }]}>
-          {listLoan?.length > 0 && (
-            <MText
-              style={{
-                fontSize: 16,
-                fontWeight: 'bold',
-                marginTop: 10,
-                marginBottom: 8,
-              }}
-            >
-              Danh sách đơn mới
-            </MText>
-          )}
+          {/* Skeleton danh sách đơn mới: hiển thị khi đang tải, chưa có dữ liệu */}
+          {isLoading && (listLoan?.length ?? 0) === 0 ? (
+            <View style={{ marginTop: 10 }}>
+              <SkeletonLoanList count={1} />
+            </View>
+          ) : null}
+          <View style={{ marginBottom: 8 }}>
+            {listLoan.length > 0 && (
+              <MText
+                style={{
+                  fontWeight: '600',
+                  marginTop: 10,
+                  fontFamily: 'BeVietnamPro-SemiBold',
+                }}
+              >
+                Đơn vay chờ hoàn thiện
+              </MText>
+            )}
+          </View>
 
           {listLoan?.map((item, index) => {
             return (
@@ -2199,189 +2209,211 @@ export const Home = observer(function Home() {
               </View>
             );
           })}
+
+          <BoxGuidline />
           <Observer>
             {() => (
               <View>
                 {homeStore?.listLoan?.length > 0 && (
                   <MText
                     style={{
-                      fontSize: 16,
-                      fontWeight: 'bold',
+                      fontWeight: '600',
                       marginBottom: 8,
-                      marginTop: 10,
+                      marginTop: 16,
+                      fontFamily: 'BeVietnamPro-SemiBold',
                     }}
                   >
-                    Danh sách đơn đang vay
+                    Đơn đang vay ({homeStore?.listLoan?.length})
                   </MText>
                 )}
+
+                {/* Skeleton danh sách giải ngân: hiển thị khi đang tải, chưa có dữ liệu */}
+                {homeStore.isLoading &&
+                (homeStore?.listLoan?.length ?? 0) === 0 ? (
+                  <View style={{ marginTop: 16 }}>
+                    <SkeletonDisbursedList count={2} />
+                  </View>
+                ) : null}
+
                 {homeStore?.listLoan &&
-                  homeStore?.listLoan.map((loan, index) => (
-                    <View key={index}>
-                      <TouchableOpacity
-                        style={{
-                          backgroundColor: '#FFFFFF',
-                          paddingHorizontal: 16,
-                          paddingTop: 16,
-                          borderRadius: 8,
-                          borderWidth: 0.5,
-                          borderColor: '#E0E0E0',
-                          marginBottom: 16,
-                        }}
-                        onPress={() => {
-                          if (loan?.disbursementPartner === 'CIMB') {
-                            navigation.dispatch(
-                              StackActions.push(ScreenNames.DetailLoan, {
-                                loan,
-                              })
-                            );
-                          } else {
-                            navigation.dispatch(
-                              StackActions.push(ScreenNames.DetailLoanTima, {
-                                loan,
-                              })
-                            );
-                          }
-                        }}
-                      >
-                        <View
-                          style={{ flexDirection: 'row', alignItems: 'center' }}
+                  homeStore?.listLoan.map((loan, index) => {
+                    const goDetail = () => {
+                      if (loan?.disbursementPartner === 'CIMB') {
+                        navigation.dispatch(
+                          StackActions.push(ScreenNames.DetailLoan, { loan })
+                        );
+                      } else {
+                        navigation.dispatch(
+                          StackActions.push(ScreenNames.DetailLoanTima, {
+                            loan,
+                          })
+                        );
+                      }
+                    };
+                    // TODO(field): xác nhận tên field thực tế từ API list_loan_disbursed
+                    const overdueDays = loan?.overDay; // số ngày quá hạn
+                    const amountPayment = loan?.paymentNeedMoney; // số tiền thanh toán
+                    return (
+                      <View key={index}>
+                        <TouchableOpacity
+                          activeOpacity={0.9}
+                          style={{
+                            backgroundColor: '#FFFFFF',
+                            padding: 12,
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: '#DADADA',
+                            marginBottom: 16,
+                            shadowColor: '#000000',
+                            shadowOffset: { width: 0, height: 4 },
+                            shadowOpacity: 0.1,
+                            shadowRadius: 10,
+                            elevation: 4,
+                          }}
+                          onPress={goDetail}
                         >
-                          <ContractActive />
-                          <View style={{ flex: 1, paddingLeft: 8 }}>
-                            <MText style={commonStyles.textNormalBold}>
-                              HD-{loan?.id}
-                            </MText>
-                            <MText
+                          <View
+                            style={{
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <ContractActive width={24} height={24} />
+                            <View style={{ flex: 1, paddingLeft: 8 }}>
+                              <MText style={commonStyles.textNormalBold}>
+                                HD-{loan?.id}
+                              </MText>
+                              <MText style={{ fontSize: 12, color: '#333333' }}>
+                                Số tiền vay: {formatMoney(loan?.loanAmount)}đ
+                              </MText>
+                            </View>
+                            <View
                               style={{
-                                fontSize: 12,
+                                width: 28,
+                                height: 28,
+                                borderRadius: 14,
+                                borderWidth: 1,
+                                borderColor: '#F2C2AC',
+                                backgroundColor: '#FFF3EC',
+                                alignItems: 'center',
+                                justifyContent: 'center',
                               }}
                             >
-                              Số tiền vay (VND): {formatMoney(loan?.loanAmount)}{' '}
-                              đ
-                            </MText>
+                              <MText
+                                style={{
+                                  color: '#EF592E',
+                                  fontSize: 16,
+                                  lineHeight: 18,
+                                  marginTop: -2,
+                                }}
+                              >
+                                ›
+                              </MText>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          style={{
-                            height: 1,
-                            backgroundColor: '#E0E0E0',
-                            marginVertical: 16,
-                          }}
-                        />
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                          }}
-                        >
-                          <MText style={commonStyles.textNormal}>
-                            Ngày giải ngân
-                          </MText>
-                          <MText style={commonStyles.textNormalBold}>
-                            {formatDDMMYYY(loan?.disbursedAt)}
-                          </MText>
-                        </View>
-                        <View
-                          style={{
-                            height: 0.5,
-                            backgroundColor: '#E0E0E0',
-                            marginVertical: 16,
-                          }}
-                        />
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                          }}
-                        >
-                          <MText style={commonStyles.textNormal}>
-                            Ngày kết thúc khoản vay
-                          </MText>
-                          <MText style={commonStyles.textNormalBold}>
-                            {formatDDMMYYY(loan?.finalSettlementAt)}
-                          </MText>
-                        </View>
-                        <View
-                          style={{
-                            height: 0.5,
-                            backgroundColor: '#E0E0E0',
-                            marginVertical: 16,
-                          }}
-                        />
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                          }}
-                        >
-                          <MText style={commonStyles.textNormal}>
-                            Ngày đến hạn tiếp theo
-                          </MText>
-                          <MText style={commonStyles.textNormalBold}>
-                            {formatDDMMYYY(loan?.nextPaymentAt)}
-                          </MText>
-                        </View>
-                        <View
-                          style={{
-                            height: 0.5,
-                            backgroundColor: '#E0E0E0',
-                            marginVertical: 16,
-                          }}
-                        />
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                          }}
-                        >
-                          <MText style={commonStyles.textNormal}>
-                            STK thanh toán
-                          </MText>
-                          <MText
-                            style={[
-                              commonStyles.textNormalBold,
-                              {
-                                textAlign: 'right',
-                              },
-                            ]}
+
+                          <View
+                            style={{
+                              // Vector 1219: đường kẻ ngang full content (align-self: stretch)
+                              alignSelf: 'stretch',
+                              height: 1,
+                              backgroundColor: '#DADADA',
+                              marginVertical: 12,
+                            }}
+                          />
+
+                          {/* 2 cột: số tiền thanh toán | kỳ thanh toán kế tiếp */}
+                          <View
+                            style={{
+                              flexDirection: 'row',
+                            }}
                           >
-                            {loan?.bankAccountNumber}
-                            {'\n'}
-                            {loan?.bankName}
+                            <View style={{ flex: 1, paddingRight: 8 }}>
+                              <MText style={{ fontSize: 12, color: '#828282' }}>
+                                Số tiền thanh toán
+                              </MText>
+                              <MText
+                                style={{
+                                  fontSize: 14,
+                                  color: '#EF592E',
+                                  marginTop: 4,
+                                }}
+                              >
+                                {amountPayment != null
+                                  ? `${formatMoney(amountPayment)} đ`
+                                  : '—'}
+                              </MText>
+                            </View>
+                            <View style={{ flex: 1, paddingLeft: 8 }}>
+                              <MText style={{ fontSize: 12, color: '#828282' }}>
+                                Kỳ thanh toán kế tiếp
+                              </MText>
+                              <MText
+                                style={{
+                                  fontSize: 14,
+                                  color: '#333333',
+                                  marginTop: 4,
+                                }}
+                              >
+                                {formatDDMMYYY(loan?.nextPaymentAt)}
+                              </MText>
+                              {overdueDays > 0 && (
+                                <View
+                                  style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    marginTop: 4,
+                                  }}
+                                >
+                                  <View
+                                    style={{
+                                      width: 6,
+                                      height: 6,
+                                      borderRadius: 3,
+                                      backgroundColor: '#EB5757',
+                                      marginRight: 6,
+                                    }}
+                                  />
+                                  <MText
+                                    style={{
+                                      fontSize: 12,
+                                      color: '#EB5757',
+                                    }}
+                                  >
+                                    Quá hạn {overdueDays} ngày
+                                  </MText>
+                                </View>
+                              )}
+                            </View>
+                          </View>
+
+                          <View
+                            style={{
+                              // Vector 1219: đường kẻ ngang full content (align-self: stretch)
+                              alignSelf: 'stretch',
+                              height: 1,
+                              backgroundColor: '#DADADA',
+                              marginVertical: 12,
+                            }}
+                          />
+
+                          {/* Số tài khoản thanh toán */}
+                          <MText style={{ fontSize: 12, color: '#828282' }}>
+                            Số tài khoản thanh toán
                           </MText>
-                        </View>
-                        <View
-                          style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            backgroundColor: '#EAF5E4',
-                            marginHorizontal: -16,
-                            paddingVertical: 8,
-                            marginTop: 16,
-                            borderBottomRightRadius: 8,
-                            borderBottomLeftRadius: 8,
-                            paddingHorizontal: 16,
-                          }}
-                        >
-                          <Info />
                           <MText
-                            style={[
-                              {
-                                fontWeight: '300',
-                                fontSize: 12,
-                                fontStyle: 'italic',
-                                color: '#333333',
-                                marginLeft: 8,
-                              },
-                            ]}
+                            style={{
+                              fontSize: 14,
+                              color: '#333333',
+                              marginTop: 4,
+                            }}
                           >
-                            Thời gian tất toán còn lại là{' '}
-                            {diffDays(new Date(), loan?.finalSettlementAt)} ngày
+                            {loan?.bankName} - {loan?.bankAccountNumber}
                           </MText>
-                        </View>
-                      </TouchableOpacity>
-                    </View>
-                  ))}
+                        </TouchableOpacity>
+                      </View>
+                    );
+                  })}
               </View>
             )}
           </Observer>
@@ -2391,7 +2423,6 @@ export const Home = observer(function Home() {
             {() =>
               !isLoading &&
               !homeStore.isLoading &&
-              (listLoan?.length ?? 0) === 0 &&
               (homeStore?.listLoan?.length ?? 0) === 0 ? (
                 <View
                   style={{
@@ -2400,41 +2431,17 @@ export const Home = observer(function Home() {
                     paddingVertical: 48,
                   }}
                 >
-                  <Image
-                    source={require('./not_found.png')}
-                    style={{
-                      width: 180,
-                      height: 180,
-                      resizeMode: 'contain',
-                    }}
-                  />
+                  <NotFoundSvg />
                   <MText
                     style={{
                       marginTop: 16,
                       fontSize: 14,
-                      color: '#828282',
+                      color: '#999999',
                       textAlign: 'center',
                     }}
                   >
-                    Oops! Bạn chưa có khoản vay nào
+                    Hiện chưa có khoản vay nào đang hoạt động
                   </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 />
@@ -2869,7 +2876,6 @@ export const Home = observer(function Home() {
           }}
         />
       </ScrollView>
-      {/* <Loading isLoading={isLoading || homeStore.isLoading} /> */}
     </View>
   );
 });