react-native-timacare 3.3.51 → 3.3.53

package/src/screens/home/DigitalTopupItem.tsx

@@ -4,17 +4,13 @@ import {
   Alert,
   Dimensions,
   Image,
+  StyleSheet,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  IconMoney2,
-  IconQuestion,
-  IconTick,
-  IconTima16,
-} from '../../assets/svgs';
+import { IconMoney2, IconQuestion, IconTick } from '../../assets/svgs';
 import { formatMoney } from '../../utils';
 import { MText } from '../../components/MText';
 import Modal from 'react-native-modal';
@@ -32,17 +28,17 @@ import {
   IconStep4Success,
   IconStep3Success,
 } from '../../assets/digital_topup';
-import { color } from '../../theme';
 import { ScreenNames } from '../../navigation';
 import { Close2Icon, Info } from '../../assets/icons';
 import { Api } from '../../services/api';
 import {
+  Icon1,
   Icon10,
+  Icon14,
   Icon2,
   Icon3,
   Icon4,
   Icon5,
-  Icon6,
   Icon7,
   Icon8,
   Icon9,
@@ -54,6 +50,50 @@ interface IProps {
   navigation: any;
   callback?: () => void;
 }
+
+const GRADIENT_ORANGE = ['#FF8E4F', '#EF592E'];
+
+const COLOR_ACTIVE = '#EF592E';
+const COLOR_DONE = '#333333';
+const COLOR_DISABLED = '#999999';
+
+const GUIDE_STEPS = [
+  {
+    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 LEGEND_ROWS = [
+  { label: 'Đang cần thực hiện', icons: [Icon2, Icon3, Icon4, Icon5] },
+  { label: 'Chưa thể thực hiện', icons: [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 DigitalTopupItem({
   item,
   navigation,
@@ -64,6 +104,9 @@ export default function DigitalTopupItem({
   const [isLoading, setIsLoading] = React.useState(false);
   const [showAlert, setShowAlert] = React.useState(false);
 
+  const step = item?.step;
+  const isPersonalStep = step === 4 || step === 5;
+
   useEffect(() => {
     if (item && item?.isPopupSuggestTopup === true) {
       setShowModalInfo(true);
@@ -100,549 +143,224 @@ export default function DigitalTopupItem({
     }
   };
 
+  const goAsset = () => {
+    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(ScreenNames.TopupLoanInfo, { 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',
-        }}
-      >
-        <LinearGradient
-          colors={['#FF8E4F', '#EF592E']}
-          style={{
-            borderTopLeftRadius: 8,
-            borderTopRightRadius: 8,
-            marginHorizontal: -16,
-          }}
-        >
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              paddingHorizontal: 16,
-              paddingVertical: 8,
-            }}
-          >
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-              }}
-            >
+      <View style={styles.card}>
+        <LinearGradient colors={GRADIENT_ORANGE} style={styles.headerGradient}>
+          <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',
-              }}
-            >
+            <MText style={styles.headerAmount}>
               {formatMoney(item?.loanAmount)}đ
             </MText>
           </View>
         </LinearGradient>
 
-        <View
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop: 16,
-          }}
-        >
-          <TouchableOpacity
-            disabled={item?.step === 3 ? false : true}
-            style={$action}
-            onPress={() => {
-              navigation.push(ScreenNames.ReviewLoan, {
-                loan: item,
-              });
-            }}
-          >
-            {item?.step < 3 ? (
-              <IconStep1Disable />
-            ) : item?.step === 3 ? (
-              <IconStep1 />
-            ) : (
-              <IconStep1Success />
-            )}
-            <MText
-              style={{
-                textAlign: 'center',
-                fontSize: 10,
-                marginTop: 5,
-                color:
-                  item?.step < 3
-                    ? '#999999'
-                    : item?.step === 3
-                    ? '#EF592E'
-                    : '#333333',
-              }}
-            >
-              Thông tin{'\n'}khoản vay
-            </MText>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={$action}
-            disabled={item?.step === 4 || item?.step === 5 ? false : true}
-            onPress={() => {
-              if (item?.step === 4) {
-                navigation.push(ScreenNames.OCR, {
-                  loan: item,
-                  front: true,
-                });
-              } else if (item?.step === 5) {
-                navigation.push(ScreenNames.TopupLoanInfo, {
-                  loan: item,
-                });
-              }
-            }}
-          >
-            {item?.step < 4 ? (
-              <IconStep2Disable />
-            ) : item?.step === 4 || item?.step === 5 ? (
-              <IconStep2 />
-            ) : (
-              <IconStep2Success />
-            )}
-            <MText
-              style={{
-                textAlign: 'center',
-                fontSize: 10,
-                marginTop: 5,
-                color:
-                  item?.step < 4
-                    ? '#999999'
-                    : item?.step === 4 || item?.step === 5
-                    ? '#EF592E'
-                    : '#333333',
-              }}
-            >
-              Thông tin{'\n'}cá nhân
-            </MText>
-          </TouchableOpacity>
-          <TouchableOpacity
-            disabled={item?.step === 9 ? false : true}
-            style={$action}
-            onPress={() => {
-              navigation.push(ScreenNames.LivenessV2, {
-                loan: item,
-              });
-            }}
-          >
-            {item?.step < 9 || item?.step === 100 ? (
-              <IconStep3Disable />
-            ) : item?.step === 9 ? (
-              <IconStep3 />
-            ) : (
-              <IconStep3Success />
-            )}
-            <MText
-              style={{
-                textAlign: 'center',
-                fontSize: 10,
-                marginTop: 5,
-                color:
-                  item?.step < 9 || item?.step === 100
-                    ? '#999999'
-                    : item?.step === 9
-                    ? '#EF592E'
-                    : '#333333',
-              }}
-            >
-              EKYC
-            </MText>
-          </TouchableOpacity>
-          <TouchableOpacity
-            disabled={item?.step === 10 ? false : true}
-            style={$action}
-            onPress={() => {
-              navigation.push(ScreenNames.TTSSignLoan, {
-                loan: item,
-              });
-            }}
-          >
-            {item?.step < 10 || item?.step === 100 ? (
-              <IconStep4Disable />
-            ) : item?.step === 10 ? (
-              <IconStep4 />
-            ) : (
-              <IconStep4Success />
-            )}
-            <MText
-              style={{
-                textAlign: 'center',
-                fontSize: 10,
-                marginTop: 5,
-                color:
-                  item?.step < 10 || item?.step === 100
-                    ? '#999999'
-                    : item?.step === 10
-                    ? '#EF592E'
-                    : '#333333',
-              }}
-            >
-              Ký hợp{'\n'}đồng
-            </MText>
-          </TouchableOpacity>
+        <View style={styles.stepsRow}>
+          <StepAction
+            disabled={step !== 3}
+            onPress={goLoanInfo}
+            icon={
+              step < 3 ? (
+                <IconStep1Disable />
+              ) : step === 3 ? (
+                <IconStep1 />
+              ) : (
+                <IconStep1Success />
+              )
+            }
+            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 ? (
+                <IconStep2Disable />
+              ) : isPersonalStep ? (
+                <IconStep2 />
+              ) : (
+                <IconStep2Success />
+              )
+            }
+            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 ? (
+                <IconStep3Disable />
+              ) : step === 9 ? (
+                <IconStep3 />
+              ) : (
+                <IconStep3Success />
+              )
+            }
+            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 ? (
+                <IconStep4Disable />
+              ) : step === 10 ? (
+                <IconStep4 />
+              ) : (
+                <IconStep4Success />
+              )
+            }
+            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
-                  ? `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?.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 ? (
-              <TouchableOpacity
-                onPress={() => {
-                  if (item?.step === 4) {
-                    navigation.push(ScreenNames.OCR, {
-                      loan: item,
-                      front: true,
-                    });
-                  } else if (item?.step === 5) {
-                    navigation.push(ScreenNames.TopupLoanInfo, {
-                      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?.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
-                ? `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={showModalInfo}
         backdropColor="#000"
         backdropOpacity={0.5}
       >
-        <View
-          style={{
-            borderRadius: 8,
-            backgroundColor: 'white',
-          }}
-        >
+        <View style={styles.infoCard}>
           <Image
             source={require('../../assets/tts/Banner.png')}
-            style={{
-              width: '100%',
-              borderTopLeftRadius: 8,
-              borderTopRightRadius: 8,
-              height: (Dimensions.get('window').height / 2) * 0.7,
-              resizeMode: 'cover',
-            }}
+            style={styles.infoBanner}
           />
-          <MText
-            style={{
-              fontSize: 16,
-              fontWeight: 'bold',
-              textAlign: 'center',
-              marginVertical: 16,
-            }}
-          >
-            Chúc mừng bạn!
-          </MText>
-          <MText
-            style={{
-              textAlign: 'center',
-              paddingHorizontal: 16,
-              color: '#828282',
-            }}
-          >
+          <MText style={styles.infoTitle}>Chúc mừng bạn!</MText>
+          <MText style={styles.infoBody}>
             Bạn đã được phê duyệt{' '}
-            <MText
-              style={{
-                color: '#EF592E',
-                fontWeight: 'bold',
-              }}
-            >
-              {item?.productNameTopup}
-            </MText>{' '}
+            <MText style={styles.infoHighlight}>{item?.productNameTopup}</MText>{' '}
             với số tiền là{' '}
-            <MText
-              style={{
-                color: '#EF592E',
-                fontWeight: 'bold',
-              }}
-            >
+            <MText style={styles.infoHighlight}>
               {formatMoney(item?.loanAmount)}
             </MText>{' '}
             VNĐ! Vui lòng eKYC - hoàn thiện xác thực khuôn mặt và ký hợp đồng để
@@ -651,379 +369,119 @@ export default function DigitalTopupItem({
           <TouchableOpacity
             disabled={isLoading}
             onPress={() => onConfirm(1)}
-            style={{
-              borderWidth: 1,
-              borderColor: '#EF592E',
-              borderRadius: 24,
-              paddingHorizontal: 16,
-              paddingVertical: 10,
-              alignSelf: 'center',
-              marginTop: 24,
-            }}
+            style={styles.infoConfirmButton}
           >
-            <MText
-              style={{
-                color: '#EF592E',
-              }}
-            >
-              Xác nhận khoản vay
-            </MText>
+            <MText style={styles.infoConfirmText}>Xác nhận khoản vay</MText>
           </TouchableOpacity>
 
           <TouchableOpacity
             disabled={isLoading}
             onPress={() => onConfirm(2)}
-            style={{
-              paddingHorizontal: 16,
-              paddingVertical: 10,
-              alignSelf: 'center',
-            }}
+            style={styles.infoSecondaryButton}
           >
-            <MText style={{ color: '#8E8E93' }}>Tôi cần vay số tiền khác</MText>
+            <MText style={styles.infoSecondaryText}>
+              Tôi cần vay số tiền khác
+            </MText>
           </TouchableOpacity>
-          <View
-            style={{
-              backgroundColor: '#EDF6FF',
-              paddingVertical: 8,
-              borderBottomLeftRadius: 8,
-              borderBottomRightRadius: 8,
-              marginTop: 16,
-              alignItems: 'center',
-            }}
-          >
+          <View style={styles.infoRateBar}>
             <TouchableOpacity
               onPress={() => {
                 setShowModalInfo(false);
                 setTimeout(() => {
-                  navigation.push(ScreenNames.LoanInterestRate, {
-                    loan: item,
-                  });
+                  navigation.push(ScreenNames.LoanInterestRate, { loan: item });
                 }, 300);
               }}
             >
-              <MText style={{ color: '#2F80ED', fontSize: 12 }}>
+              <MText style={styles.infoRateText}>
                 Bảng biểu lãi phí đơn vay {`->`}
               </MText>
             </TouchableOpacity>
           </View>
         </View>
       </Modal>
+
       <Modal
         isVisible={showModal}
         backdropColor="#000"
         backdropOpacity={0.5}
         onBackdropPress={() => setShowModal(false)}
       >
-        <View
-          style={{
-            borderRadius: 12,
-            backgroundColor: 'white',
-            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',
-                }}
-              >
-                <Icon2 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 1
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  THÔNG TIN KHOẢN VAY
-                </MText>
-              </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Nhập thông tin: 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 2
-                </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 3
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>EKYC</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, note }, index) => (
+              <View 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>
+                  </View>
+                </View>
+                {!!description && (
+                  <MText style={styles.guideStepDesc}>{description}</MText>
+                )}
+                {!!note && <MText style={styles.guideStepNote}>{note}</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 4
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  KÝ HỢP ĐỒNG
-                </MText>
-              </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>
-          <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 }}
-              >
-                <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 }}
-              >
-                <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 />
           </TouchableOpacity>
         </View>
       </Modal>
+
       <Modal
         isVisible={showAlert}
         backdropColor="#000"
         backdropOpacity={0.5}
         onBackdropPress={() => setShowAlert(false)}
       >
-        <View
-          style={{
-            borderRadius: 12,
-            backgroundColor: 'white',
-            padding: 16,
-          }}
-        >
-          <View style={{ alignItems: 'flex-end' }}>
+        <View style={styles.modalCard}>
+          <View style={styles.alertClose}>
             <TouchableOpacity onPress={() => setShowAlert(false)}>
               <Close2Icon />
             </TouchableOpacity>
           </View>
           <Image
             source={require('../../assets/tts/Layer_1.png')}
-            style={{
-              width: '100%',
-              height: 120,
-              resizeMode: 'contain',
-            }}
+            style={styles.alertImage}
           />
-          <MText
-            style={{
-              textAlign: 'center',
-              fontFamily: 'BeVietnamPro-SemiBold',
-              fontSize: 16,
-              fontWeight: '600',
-              marginTop: 16,
-            }}
-          >
+          <MText style={styles.alertTitle}>
             Đơn vay đang chờ tìm nguồn giải ngân phù hợp
           </MText>
-          <MText
-            style={{
-              textAlign: 'center',
-              color: '#828282',
-              marginTop: 16,
-            }}
-          >
+          <MText style={styles.alertBody}>
             Vui lòng chờ ít phút sau đó thực hiện các bước tiếp theo để hoàn
             thiện khoản vay!
           </MText>
-          <View style={{ alignItems: 'center', marginTop: 24 }}>
+          <View style={styles.alertButtonWrap}>
             <TouchableOpacity
               onPress={() => setShowAlert(false)}
-              style={{
-                borderWidth: 1,
-                borderColor: '#EF592E',
-                height: 40,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: 24,
-                width: 150,
-              }}
+              style={styles.alertButton}
             >
-              <MText style={{ color: '#EF592E' }}>Đã hiểu</MText>
+              <MText style={styles.alertButtonText}>Đã hiểu</MText>
             </TouchableOpacity>
           </View>
         </View>
@@ -1031,15 +489,300 @@ export default function DigitalTopupItem({
     </>
   );
 }
-const $action: ViewStyle = {
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 5,
-};
+
 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',
+  },
+  stepsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 16,
+  },
+  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,
+  },
+  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,
+  },
+  infoCard: {
+    borderRadius: 8,
+    backgroundColor: 'white',
+  },
+  infoBanner: {
+    width: '100%',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    height: (Dimensions.get('window').height / 2) * 0.7,
+    resizeMode: 'cover',
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+  infoBody: {
+    textAlign: 'center',
+    paddingHorizontal: 16,
+    color: '#828282',
+  },
+  infoHighlight: {
+    color: '#EF592E',
+    fontWeight: 'bold',
+  },
+  infoConfirmButton: {
+    borderWidth: 1,
+    borderColor: '#EF592E',
+    borderRadius: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignSelf: 'center',
+    marginTop: 24,
+  },
+  infoConfirmText: {
+    color: '#EF592E',
+  },
+  infoSecondaryButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignSelf: 'center',
+  },
+  infoSecondaryText: {
+    color: '#8E8E93',
+  },
+  infoRateBar: {
+    backgroundColor: '#EDF6FF',
+    paddingVertical: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    marginTop: 16,
+    alignItems: 'center',
+  },
+  infoRateText: {
+    color: '#2F80ED',
+    fontSize: 12,
+  },
+  modalCard: {
+    borderRadius: 12,
+    backgroundColor: 'white',
+    padding: 16,
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginTop: 16,
+  },
+  guideStepRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 16,
+  },
+  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,
+  },
+  guideStepDesc: {
+    fontSize: 10,
+    marginTop: 5,
+  },
+  guideStepNote: {
+    fontSize: 10,
+    color: '#999999',
+  },
+  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,
+  },
+  alertClose: {
+    alignItems: 'flex-end',
+  },
+  alertImage: {
+    width: '100%',
+    height: 120,
+    resizeMode: 'contain',
+  },
+  alertTitle: {
+    textAlign: 'center',
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontSize: 16,
+    fontWeight: '600',
+    marginTop: 16,
+  },
+  alertBody: {
+    textAlign: 'center',
+    color: '#828282',
+    marginTop: 16,
+  },
+  alertButtonWrap: {
+    alignItems: 'center',
+    marginTop: 24,
+  },
+  alertButton: {
+    borderWidth: 1,
+    borderColor: '#EF592E',
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    width: 150,
+  },
+  alertButtonText: {
+    color: '#EF592E',
+  },
+});