react-native-timacare 3.3.43 → 3.3.45

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

@@ -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>
@@ -2400,41 +2432,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 +2877,6 @@ export const Home = observer(function Home() {
           }}
         />
       </ScrollView>
-      {/* <Loading isLoading={isLoading || homeStore.isLoading} /> */}
     </View>
   );
 });