react-native-timacare 3.3.50 → 3.3.52

package/src/components/ItemTimaOneV3.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
 import React from 'react';
-import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { IconMoney2, IconQuestion, IconTick, IconTima16 } from '../assets/svgs';
 import { formatMoney } from '../utils';
@@ -8,6 +8,8 @@ import { MText } from './MText';
 import {
   Icon1,
   Icon10,
+  Icon13,
+  Icon14,
   Icon2,
   Icon3,
   Icon4,
@@ -32,9 +34,8 @@ import {
   IconStep5Success,
   IconSuccess,
 } from '../assets/v3';
-import { Close2Icon, CloseIcon, Info } from '../assets/icons';
+import { Close2Icon, Info } from '../assets/icons';
 import { ScreenNames } from '../navigation';
-import { color } from '../theme';
 import Modal from 'react-native-modal';
 import { commonStyles } from '../screens/CommonStyles';
 
@@ -43,679 +44,326 @@ interface IProps {
   navigation: any;
 }
 
-const $action: ViewStyle = {
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 5,
-};
+const GRADIENT_ORANGE = ['#FF8E4F', '#EF592E'];
+
+const COLOR_ACTIVE = '#EF592E';
+const COLOR_DONE = '#333333';
+const COLOR_DISABLED = '#999999';
+
+const LEGEND_ROWS = [
+  { label: 'Đang cần thực hiện', icons: [Icon1, Icon2, Icon3, Icon4, Icon5] },
+  { label: 'Chưa thể thực hiện', icons: [Icon6, Icon7, Icon8, Icon9, Icon10] },
+  { label: 'Đã hoàn thành', icons: [IconSuccess] },
+];
+
+const StepAction = ({ icon, label, color, disabled, onPress }: any) => (
+  <TouchableOpacity disabled={disabled} style={styles.action} onPress={onPress}>
+    {icon}
+    <MText style={[styles.stepLabel, { color }]}>{label}</MText>
+  </TouchableOpacity>
+);
+
+const UpdateButton = ({ label, onPress }: any) => (
+  <TouchableOpacity onPress={onPress}>
+    <LinearGradient colors={GRADIENT_ORANGE} style={styles.updateButton}>
+      <MText style={styles.updateButtonText}>{label}</MText>
+    </LinearGradient>
+  </TouchableOpacity>
+);
 
 export default function ItemTimaOneV3({ item, navigation }: IProps) {
   const [showModal, setShowModal] = React.useState(false);
 
+  const GUIDE_STEPS =
+    item.typeLoan === 5 || item.typeLoan === 7
+      ? [
+          {
+            icon: Icon1,
+            title: 'CẬP NHẬT THÔNG TIN XE',
+            description: 'Giấy tờ Đăng ký xe, thông tin xe',
+          },
+          {
+            icon: Icon5,
+            title: 'CẬP NHẬT THÔNG TIN KHOẢN VAY',
+            description: 'Số tiền vay, thời hạn vay, hình thức vay, ...',
+          },
+          {
+            icon: Icon3,
+            title: 'CẬP NHẬT THÔNG TIN CÁ NHÂN',
+            description: 'Giấy tờ CCCD/CC, ảnh chân dung, thông tin cá nhân',
+          },
+          { icon: Icon14, title: 'CHỜ PHÊ DUYỆT' },
+          { icon: Icon5, title: 'KÝ HỢP ĐỒNG ĐIỆN TỬ' },
+          { icon: Icon2, title: 'NHẬN TIỀN GIẢI NGÂN' },
+        ]
+      : [
+          {
+            icon: Icon1,
+            title: 'CẬP NHẬT THÔNG TIN KHOẢN VAY',
+            description: 'Số tiền vay, thời hạn vay, hình thức vay, ...',
+          },
+          {
+            icon: Icon3,
+            title: 'CẬP NHẬT THÔNG TIN CÁ NHÂN',
+            description: 'Giấy tờ CCCD/CC, ảnh chân dung, thông tin cá nhân',
+          },
+          { icon: Icon14, title: 'CHỜ PHÊ DUYỆT' },
+          { icon: Icon5, title: 'KÝ HỢP ĐỒNG ĐIỆN TỬ' },
+          { icon: Icon2, title: 'NHẬN TIỀN GIẢI NGÂN' },
+        ];
+
+  const step = item?.step;
+  const autoDEList = item?.listLoanAllAutoDE;
+  const hasAutoDE = autoDEList?.length > 0;
+  const sumBy = (key) =>
+    hasAutoDE ? autoDEList.reduce((sum, x) => sum + x[key], 0) : 0;
+
+  const isPersonalStep = step === 4 || step === 5 || step === 6;
+
+  const goAsset = () => {
+    if (item?.typeLoan === 7) {
+      navigation.push(ScreenNames.LoanBuyCar, { loan: item });
+    } else if (step === 0) {
+      navigation.push(ScreenNames.VehicleCamera, { loan: item, front: true });
+    } else {
+      navigation.push(ScreenNames.AssetInformation, { loan: item });
+    }
+  };
+
+  const goLoanInfo = () => {
+    navigation.push(ScreenNames.ReviewLoan, { loan: item });
+  };
+
+  const goPersonal = () => {
+    if (step === 4) {
+      navigation.push(ScreenNames.OCR, { loan: item, front: true });
+    } else if (step === 5) {
+      navigation.push(
+        item?.typeLoan === 5
+          ? ScreenNames.ReviewInformation
+          : ScreenNames.TopupLoanInfo,
+        { loan: item }
+      );
+    } else if (step === 6) {
+      navigation.push(ScreenNames.ReviewInformationOther, { loan: item });
+    }
+  };
+
+  const goEkyc = () => {
+    navigation.push(ScreenNames.LivenessV2, { loan: item });
+  };
+
+  const goSign = () => {
+    navigation.push(ScreenNames.TTSSignLoan, { loan: item });
+  };
+
+  // Nút "Cập nhật" / "Ký hợp đồng" ở phần trạng thái, theo bước hiện tại
+  const primaryAction =
+    step <= 1
+      ? { label: 'Cập nhật', onPress: goAsset }
+      : step === 3
+      ? { label: 'Cập nhật', onPress: goLoanInfo }
+      : isPersonalStep
+      ? { label: 'Cập nhật', onPress: goPersonal }
+      : step === 9
+      ? { label: 'Cập nhật', onPress: goEkyc }
+      : step === 10
+      ? { label: 'Ký hợp đồng', onPress: goSign }
+      : null;
+
   return (
     <>
-      <View
-        style={{
-          backgroundColor: '#FFFFFF',
-          paddingHorizontal: 16,
-          marginBottom: 16,
-          borderRadius: 8,
-          borderWidth: 0.5,
-          borderColor: '#E0E0E0',
-        }}
-      >
+      <View style={styles.card}>
         <LinearGradient
-          colors={
-            item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
-              ? ['#4CBA3D', '#98D788']
-              : ['#FF8E4F', '#EF592E']
-          }
-          style={{
-            borderTopLeftRadius: 8,
-            borderTopRightRadius: 8,
-            marginHorizontal: -16,
-          }}
+          colors={hasAutoDE ? ['#4CBA3D', '#98D788'] : GRADIENT_ORANGE}
+          style={styles.headerGradient}
         >
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              paddingHorizontal: 16,
-              paddingVertical: 8,
-            }}
-          >
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-              }}
-            >
+          <View style={styles.headerRow}>
+            <View style={styles.headerLeft}>
               <IconMoney2 />
-              <MText
-                style={{
-                  fontSize: 12,
-                  color: 'white',
-                }}
-              >
-                HD-{item?.id}
-              </MText>
+              <MText style={styles.headerText}>HD-{item?.id}</MText>
             </View>
-            <MText
-              style={{
-                fontSize: 12,
-                color: 'white',
-                fontWeight: 'bold',
-              }}
-            >
-              {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
-                ? formatMoney(
-                    item?.listLoanAllAutoDE.reduce(
-                      (sum, item) => sum + item.totalMoney,
-                      0
-                    )
-                  )
-                : formatMoney(item?.loanAmount)}
-              đ
+            <MText style={styles.headerAmount}>
+              {formatMoney(hasAutoDE ? sumBy('totalMoney') : item?.loanAmount)}đ
             </MText>
           </View>
         </LinearGradient>
 
-        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
-          <View
-            style={{
-              marginHorizontal: -16,
-              backgroundColor: '#ECFFE8',
-              paddingHorizontal: 16,
-              paddingVertical: 8,
-            }}
-          >
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-              }}
-            >
-              <MText
-                style={{
-                  fontSize: 10,
-                  color: '#878787',
-                  marginLeft: 24,
-                }}
-              >
-                Số tiền giải ngân
-              </MText>
-              <MText
-                style={{
-                  fontSize: 10,
-                  color: '#333333',
-                }}
-              >
-                {formatMoney(
-                  item?.listLoanAllAutoDE.reduce(
-                    (sum, item) => sum + item.loanAmount,
-                    0
-                  )
-                )}{' '}
-                đ
+        {hasAutoDE && (
+          <View style={styles.autoDESummary}>
+            <View style={styles.spaceBetween}>
+              <MText style={styles.summaryLabel}>Số tiền giải ngân</MText>
+              <MText style={styles.summaryValue}>
+                {formatMoney(sumBy('loanAmount'))} đ
               </MText>
             </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                marginTop: 6,
-              }}
-            >
-              <MText
-                style={{
-                  fontSize: 10,
-                  color: '#878787',
-                  marginLeft: 24,
-                }}
-              >
-                Số tiền bảo hiểm
-              </MText>
-              <MText
-                style={{
-                  fontSize: 10,
-                  color: '#333333',
-                }}
-              >
-                {formatMoney(
-                  item?.listLoanAllAutoDE.reduce(
-                    (sum, item) => sum + item.insurenceMoney,
-                    0
-                  )
-                )}{' '}
-                đ
+            <View style={[styles.spaceBetween, styles.summaryRowSpacing]}>
+              <MText style={styles.summaryLabel}>Số tiền bảo hiểm</MText>
+              <MText style={styles.summaryValue}>
+                {formatMoney(sumBy('insurenceMoney'))} đ
               </MText>
             </View>
           </View>
         )}
 
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop:
-              item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
-                ? 16
-                : 32,
-            // paddingHorizontal: 16,
-          }}
-        >
+        <View style={[styles.stepsRow, { marginTop: hasAutoDE ? 16 : 32 }]}>
           {/* Đơn topup = 6 sẽ không có phần thông tin tài sản */}
           {(item?.typeLoan === 5 || item.typeLoan === 7) && (
-            <TouchableOpacity
-              disabled={item?.step === 0 || item?.step === 1 ? false : true}
-              style={$action}
-              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,
-                    });
-                  }
-                }
-              }}
-            >
-              {item?.step <= 1 ? <IconStep1 /> : <IconStep1Success />}
-              <MText
-                style={{
-                  textAlign: 'center',
-                  fontSize: 10,
-                  marginTop: 5,
-                  color: item?.step <= 1 ? '#EF592E' : '#333333',
-                }}
-              >
-                Thông tin{'\n'}tài sản
-              </MText>
-            </TouchableOpacity>
+            <StepAction
+              disabled={!(step === 0 || step === 1)}
+              onPress={goAsset}
+              icon={step <= 1 ? <IconStep1 /> : <IconStep1Success />}
+              label={'Thông tin\ntài sản'}
+              color={step <= 1 ? COLOR_ACTIVE : COLOR_DONE}
+            />
           )}
-          <TouchableOpacity
-            disabled={item?.step === 3 ? false : true}
-            style={$action}
-            onPress={() => {
-              navigation.push(ScreenNames.ReviewLoan, {
-                loan: item,
-              });
-            }}
-          >
-            {item?.step < 3 ? (
-              <IconStep2Disable />
-            ) : item?.step === 3 ? (
-              <IconStep2 />
-            ) : (
-              <IconStep2Success />
-            )}
-            <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
-            disabled={
-              item?.step === 4 || item?.step === 5 || item?.step === 6
-                ? false
-                : true
+          <StepAction
+            disabled={step !== 3}
+            onPress={goLoanInfo}
+            icon={
+              step < 3 ? (
+                <IconStep2Disable />
+              ) : step === 3 ? (
+                <IconStep2 />
+              ) : (
+                <IconStep2Success />
+              )
             }
-            style={$action}
-            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 ? (
-              <IconStep3Disable />
-            ) : item?.step === 4 || item?.step === 5 || item?.step === 6 ? (
-              <IconStep3 />
-            ) : (
-              <IconStep3Success />
-            )}
-            <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 ? (
-              <IconStep4Disable />
-            ) : item?.step === 9 ? (
-              <IconStep4 />
-            ) : (
-              <IconStep4Success />
-            )}
-            <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 ? (
-              <IconStep5Disable />
-            ) : item?.step === 10 ? (
-              <IconStep5 />
-            ) : (
-              <IconStep5Success />
-            )}
-            <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>
+            label={'Thông tin\nkhoản vay'}
+            color={
+              step < 3 ? COLOR_DISABLED : step === 3 ? COLOR_ACTIVE : COLOR_DONE
+            }
+          />
+          <StepAction
+            disabled={!isPersonalStep}
+            onPress={goPersonal}
+            icon={
+              step < 4 ? (
+                <IconStep3Disable />
+              ) : isPersonalStep ? (
+                <IconStep3 />
+              ) : (
+                <IconStep3Success />
+              )
+            }
+            label={'Thông tin\ncá nhân'}
+            color={
+              step < 4
+                ? COLOR_DISABLED
+                : isPersonalStep
+                ? COLOR_ACTIVE
+                : COLOR_DONE
+            }
+          />
+          <StepAction
+            disabled={step !== 9}
+            onPress={goEkyc}
+            icon={
+              step < 9 || step === 100 ? (
+                <IconStep4Disable />
+              ) : step === 9 ? (
+                <IconStep4 />
+              ) : (
+                <IconStep4Success />
+              )
+            }
+            label="EKYC"
+            color={
+              step < 9 || step === 100
+                ? COLOR_DISABLED
+                : step === 9
+                ? COLOR_ACTIVE
+                : COLOR_DONE
+            }
+          />
+          <StepAction
+            disabled={step !== 10}
+            onPress={goSign}
+            icon={
+              step < 10 || step === 100 ? (
+                <IconStep5Disable />
+              ) : step === 10 ? (
+                <IconStep5 />
+              ) : (
+                <IconStep5Success />
+              )
+            }
+            label={'Ký hợp\nđồng'}
+            color={
+              step < 10 || step === 100
+                ? COLOR_DISABLED
+                : step === 10
+                ? COLOR_ACTIVE
+                : COLOR_DONE
+            }
+          />
         </View>
 
-        {item?.step !== 11 ? (
-          <View
-            style={{
-              backgroundColor: '#EEF7FF',
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 4,
-              borderRadius: 4,
-              paddingHorizontal: 8,
-              paddingVertical: 10,
-              marginTop: 16,
-            }}
-          >
+        {step !== 11 ? (
+          <View style={styles.guideBanner}>
             <IconQuestion />
-            <MText
-              style={{
-                fontSize: 10,
-                flex: 1,
-              }}
-            >
+            <MText style={styles.guideBannerText}>
               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>
+              <MText style={styles.linkText}>Xem thêm</MText>
             </TouchableOpacity>
           </View>
         ) : (
-          <View
-            style={{
-              backgroundColor: '#E8FFE9',
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 8,
-              borderRadius: 4,
-              paddingHorizontal: 8,
-              paddingVertical: 10,
-              marginTop: 16,
-            }}
-          >
+          <View style={styles.successBanner}>
             <IconTick />
-            <MText style={{ color: '#28A745', fontSize: 10, flex: 1 }}>
+            <MText style={styles.successText}>
               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 ? (
+        {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
+            <View style={styles.statusLeft}>
+              <MText style={styles.statusLabel}>Trạng thái</MText>
+              <MText style={styles.statusValue}>
+                {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ệ`
+                  : step === 3
+                  ? 'Chờ cập nhật thông tin khoản vay'
+                  : isPersonalStep
+                  ? 'Chờ cập nhật thông tin cá nhân'
+                  : step === 9
+                  ? 'Chờ cập nhật eKYC'
                   : 'Đơ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>
-            ) : (
-              <></>
+            {primaryAction && (
+              <UpdateButton
+                label={primaryAction.label}
+                onPress={primaryAction.onPress}
+              />
             )}
           </View>
-        ) : (
-          <></>
         )}
 
-        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
+        {hasAutoDE && (
           <View>
-            <MText
-              style={{
-                fontSize: 12,
-                fontWeight: 'bold',
-                marginTop: 16,
-                color: '#333333',
-              }}
-            >
-              Danh sách đơn chia nhỏ
-            </MText>
-            {item?.listLoanAllAutoDE.map((x, index) => (
+            <MText style={styles.autoDETitle}>Danh sách đơn chia nhỏ</MText>
+            {autoDEList.map((x, index) => (
               <View
                 key={index}
-                style={{
-                  marginTop: 8,
-                  borderBottomWidth:
-                    index + 1 === item?.listLoanAllAutoDE.length ? 0 : 1,
-                  borderColor: '#E0E0E0',
-                  paddingBottom: 8,
-                }}
+                style={[
+                  styles.autoDEItem,
+                  index + 1 !== autoDEList.length && styles.autoDEItemDivider,
+                ]}
               >
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: 10,
-                    }}
-                  >
+                <View style={styles.spaceBetween}>
+                  <View style={styles.autoDEItemLeft}>
                     <IconTima16 />
-                    <MText
-                      style={[
-                        commonStyles.textNormal,
-                        {
-                          color: '#333333',
-                          fontSize: 12,
-                        },
-                      ]}
-                    >
+                    <MText style={[commonStyles.textNormal, styles.autoDEText]}>
                       HD-{x?.loanBriefId} ({index + 1})
                     </MText>
                   </View>
                   <MText
-                    style={[
-                      commonStyles.textNormalBold,
-                      {
-                        color: '#333333',
-                        fontSize: 12,
-                      },
-                    ]}
+                    style={[commonStyles.textNormalBold, styles.autoDEText]}
                   >
                     {formatMoney(x?.totalMoney)} đ
                   </MText>
@@ -724,356 +372,77 @@ export default function ItemTimaOneV3({ item, navigation }: IProps) {
             ))}
           </View>
         )}
-        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
+        {hasAutoDE && (
           <TouchableOpacity
             onPress={() => {
-              navigation.push(ScreenNames.LoanInterestRate, {
-                loan: item,
-              });
-            }}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              backgroundColor: '#EDF6FF',
-              marginHorizontal: -16,
-              paddingVertical: 10,
+              navigation.push(ScreenNames.LoanInterestRate, { loan: item });
             }}
+            style={styles.interestRateButton}
           >
-            <MText
-              style={[
-                {
-                  fontSize: 12,
-                  color: '#2F80ED',
-                },
-              ]}
-            >
+            <MText style={styles.interestRateText}>
               Bảng biểu lãi phí đơn vay {`->`}
             </MText>
           </TouchableOpacity>
         )}
-        {item?.step !== 11 ? (
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 8,
-              backgroundColor: '#FFF2F2',
-              marginHorizontal: -16,
-              paddingVertical: 10,
-              borderBottomRightRadius: 8,
-              borderBottomLeftRadius: 8,
-              paddingHorizontal: 10,
-            }}
-          >
+        {step !== 11 && (
+          <View style={styles.warningBanner}>
             <Info />
-            <MText
-              style={[
-                {
-                  fontSize: 10,
-                  color: '#E40010',
-                  flex: 1,
-                },
-              ]}
-            >
-              {item?.step <= 1
+            <MText style={styles.warningText}>
+              {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é!`
+                : step === 3
+                ? 'Vui lòng cập nhật thông tin khoản vay để được giải ngân sớm nhất!'
+                : isPersonalStep
+                ? 'Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!'
+                : 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>
 
       <Modal isVisible={showModal} onBackdropPress={() => setShowModal(false)}>
-        <View
-          style={{
-            backgroundColor: 'white',
-            borderRadius: 8,
-            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',
-                }}
-              >
-                <Icon1 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 1
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  THÔNG TIN XE
-                </MText>
-              </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Chụp 2 mặt hình ảnh Đăng ký xe
-            </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',
-                }}
-              >
-                <Icon2 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 2
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  THÔNG TIN KHOẢN VAY
-                </MText>
-              </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Lựa chọn: Số tiền vay, Thời hạn vay, ...
-            </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 3
-                </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 NFC/ 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',
-                }}
-              >
-                <Icon4 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 4
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>EKYC</MText>
-              </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Thực hiện eKYC khuôn mặt
-            </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',
-                }}
-              >
-                <Icon5 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 5
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  KÝ HỢP ĐỒNG
-                </MText>
+        <View style={styles.modalCard}>
+          <MText style={styles.modalTitle}>Các bước hoàn thiện khoản vay</MText>
+          {GUIDE_STEPS.map(({ icon: StepIcon, title, description }, index) => (
+            <React.Fragment key={title}>
+              <View style={styles.guideStepRow}>
+                <View style={styles.guideStepIconBox}>
+                  <StepIcon />
+                </View>
+                <View>
+                  <MText style={styles.guideStepBadge}>Bước {index + 1}</MText>
+                  <MText style={styles.guideStepTitle}>{title}</MText>
+                  {!!description && (
+                    <MText style={styles.guideStepDesc}>{description}</MText>
+                  )}
+                </View>
               </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Ký số bằng OTP hoặc qua Ứng dụng Mysign
-            </MText>
-            <MText style={{ fontSize: 10, color: '#999999' }}>
-              Lưu ý: Để bảo mật thông tin cá nhân, hợp đồng sẽ được ký tại
-              Viettel qua Ứng dụng MySign, Website hopdongdientu.viettel.vn,...
-            </MText>
-          </View>
+              {index < GUIDE_STEPS.length - 1 && (
+                <View style={styles.dashedDivider}>
+                  <View style={styles.dashedDividerInner} />
+                </View>
+              )}
+            </React.Fragment>
+          ))}
 
-          <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 }}
-              >
-                <Icon1 />
-                <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 }}
-              >
-                <Icon6 />
-                <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 style={styles.legendBox}>
+            <MText style={styles.legendTitle}>Ý nghĩa biểu tượng</MText>
+            {LEGEND_ROWS.map(({ label, icons }) => (
+              <View key={label} style={styles.legendRow}>
+                <MText style={styles.legendLabel}>{label}</MText>
+                <View style={styles.legendIcons}>
+                  {icons.map((LegendIcon, index) => (
+                    <LegendIcon key={index} />
+                  ))}
+                </View>
               </View>
-            </View>
+            ))}
           </View>
 
           <TouchableOpacity
-            style={{ position: 'absolute', top: 16, right: 16 }}
+            style={styles.modalClose}
             onPress={() => setShowModal(false)}
           >
             <Close2Icon />
@@ -1083,10 +452,269 @@ export default function ItemTimaOneV3({ item, navigation }: IProps) {
     </>
   );
 }
+
 const $row: ViewStyle = {
   flexDirection: 'row',
-  // borderBottomWidth: 1,
-  // borderColor: '#E0E0E0',
   paddingBottom: 16,
   marginTop: 16,
 };
+
+const styles = StyleSheet.create({
+  action: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 5,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 8,
+    borderWidth: 0.5,
+    borderColor: '#E0E0E0',
+  },
+  headerGradient: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    marginHorizontal: -16,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  headerText: {
+    fontSize: 12,
+    color: 'white',
+  },
+  headerAmount: {
+    fontSize: 12,
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  autoDESummary: {
+    marginHorizontal: -16,
+    backgroundColor: '#ECFFE8',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  spaceBetween: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  summaryRowSpacing: {
+    marginTop: 6,
+  },
+  summaryLabel: {
+    fontSize: 10,
+    color: '#878787',
+    marginLeft: 24,
+  },
+  summaryValue: {
+    fontSize: 10,
+    color: '#333333',
+  },
+  stepsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  stepLabel: {
+    textAlign: 'center',
+    fontSize: 10,
+    marginTop: 5,
+  },
+  guideBanner: {
+    backgroundColor: '#EEF7FF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    marginTop: 16,
+  },
+  guideBannerText: {
+    fontSize: 10,
+    flex: 1,
+  },
+  linkText: {
+    fontSize: 10,
+    color: '#2F80ED',
+    textDecorationLine: 'underline',
+  },
+  successBanner: {
+    backgroundColor: '#E8FFE9',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    marginTop: 16,
+  },
+  successText: {
+    color: '#28A745',
+    fontSize: 10,
+    flex: 1,
+  },
+  statusLeft: {
+    flex: 1,
+    paddingRight: 24,
+  },
+  statusLabel: {
+    color: '#999999',
+    fontSize: 12,
+  },
+  statusValue: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  updateButton: {
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    paddingHorizontal: 10,
+  },
+  updateButtonText: {
+    color: 'white',
+    fontSize: 12,
+  },
+  autoDETitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginTop: 16,
+    color: '#333333',
+  },
+  autoDEItem: {
+    marginTop: 8,
+    paddingBottom: 8,
+  },
+  autoDEItemDivider: {
+    borderBottomWidth: 1,
+    borderColor: '#E0E0E0',
+  },
+  autoDEItemLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  autoDEText: {
+    color: '#333333',
+    fontSize: 12,
+  },
+  interestRateButton: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#EDF6FF',
+    marginHorizontal: -16,
+    paddingVertical: 10,
+  },
+  interestRateText: {
+    fontSize: 12,
+    color: '#2F80ED',
+  },
+  warningBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: '#FFF2F2',
+    marginHorizontal: -16,
+    paddingVertical: 10,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    paddingHorizontal: 10,
+  },
+  warningText: {
+    fontSize: 10,
+    color: '#E40010',
+    flex: 1,
+  },
+  modalCard: {
+    backgroundColor: 'white',
+    borderRadius: 8,
+    padding: 16,
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginTop: 16,
+  },
+  guideStepRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    marginTop: 16,
+  },
+  dashedDivider: {
+    height: 1,
+    marginTop: 16,
+    overflow: 'hidden',
+  },
+  dashedDividerInner: {
+    height: 2,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    borderStyle: 'dashed',
+  },
+  guideStepIconBox: {
+    width: 30,
+    height: 30,
+    borderRadius: 4,
+    backgroundColor: '#FFF2F2',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  guideStepBadge: {
+    fontWeight: 'bold',
+    fontSize: 8,
+    color: '#EF592E',
+  },
+  guideStepTitle: {
+    fontWeight: 'bold',
+    fontSize: 10,
+    marginTop: 5,
+  },
+  guideStepDesc: {
+    fontSize: 10,
+    marginTop: 5,
+  },
+  legendBox: {
+    backgroundColor: '#FFF8F2',
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  legendTitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  legendRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+    marginTop: 8,
+  },
+  legendLabel: {
+    fontSize: 10,
+    width: '35%',
+  },
+  legendIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  modalClose: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+  },
+});