react-native-timacare 3.3.51 → 3.3.53

package/src/screens/home/ItemMotoBikeLoan.tsx

@@ -1,15 +1,16 @@
 //@ts-nocheck
 import React, { useEffect } from 'react';
-import { Alert, Image, TouchableOpacity, View } from 'react-native';
+import { Alert, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { IconMoney2, IconQuestion } from '../../assets/svgs';
 import { MText } from '../../components/MText';
 import { formatMoney } from '../../utils';
 import {
-  Icon1,
   Icon10,
   Icon11,
   Icon12,
+  Icon13,
+  Icon14,
   Icon2,
   Icon3,
   Icon4,
@@ -20,13 +21,7 @@ import {
   IconSuccess,
 } from '../../assets/v3';
 import { ScreenNames } from '../../navigation';
-import {
-  CheckBox,
-  CheckBoxActive,
-  Close2Icon,
-  IconCheck,
-  Info,
-} from '../../assets/icons';
+import { CheckBox, CheckBoxActive, Close2Icon, Info } from '../../assets/icons';
 import Modal from 'react-native-modal';
 import { Api } from '../../services/api';
 
@@ -35,6 +30,59 @@ interface IProps {
   navigation?: any;
   callback: () => void;
 }
+
+const GRADIENT_ORANGE = ['#FF8E4F', '#EF592E'];
+const GRADIENT_GREEN = ['#28A745', '#28A745'];
+const GRADIENT_GRAY = ['#C7C7CC', '#C7C7CC'];
+const GRADIENT_DISABLED = ['#E0E0E0', '#E0E0E0'];
+
+const GUIDE_STEPS = [
+  {
+    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: Icon5,
+    title: 'CẬP NHẬT THÔNG TIN XE',
+    description: 'Giấy tờ Đăng ký xe, thông tin xe',
+  },
+  { icon: Icon13, title: 'XÁC NHẬN ĐỒNG Ý ĐIỀU KIỆN ĐIỀU KHOẢN' },
+  { icon: Icon14, title: 'CHỜ PHÊ DUYỆ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 StepButton = ({
+  badge,
+  label,
+  icon,
+  colors,
+  backgroundColor,
+  borderColor,
+  disabled,
+  onPress,
+}: any) => (
+  <TouchableOpacity
+    disabled={disabled}
+    onPress={onPress}
+    style={[styles.stepButton, { backgroundColor, borderColor }]}
+  >
+    <LinearGradient colors={colors} style={styles.stepBadge}>
+      <MText style={styles.stepBadgeText}>{badge}</MText>
+    </LinearGradient>
+    <View style={styles.stepLabelRow}>
+      {icon}
+      <MText style={styles.stepLabelText}>{label}</MText>
+    </View>
+  </TouchableOpacity>
+);
+
 export default function ItemMotoBikeLoan({
   item,
   navigation,
@@ -46,6 +94,27 @@ export default function ItemMotoBikeLoan({
   const [showModal2, setShowModal2] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
 
+  const step = item?.step;
+  const stepOneActive = step === 0 || step === 1;
+  const stepOnePending = step <= 1;
+  const stepTwoActive = step === 2 || step === 3;
+
+  const goToStep1 = () => {
+    if (step === 0) {
+      navigation.push(ScreenNames.OCR, { loan: item, front: true });
+    } else {
+      navigation.push(ScreenNames.InfoLoanMotobike, { loan: item });
+    }
+  };
+
+  const goToStep2 = () => {
+    if (step === 2) {
+      navigation.push(ScreenNames.VehicleCamera, { loan: item, front: true });
+    } else {
+      navigation.push(ScreenNames.ReviewLoanMotobike, { loan: item });
+    }
+  };
+
   const confirm = async () => {
     try {
       setIsLoading(true);
@@ -63,476 +132,154 @@ export default function ItemMotoBikeLoan({
         );
       }
     } catch (error) {
-      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
+      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
     } finally {
       setIsLoading(false);
     }
   };
 
   useEffect(() => {
+    let timer;
     if (item?.step === 4) {
-      setTimeout(() => {
-        setShowPolicy(true);
-      }, 300);
+      timer = setTimeout(() => setShowPolicy(true), 300);
     } else if (item?.step === 5) {
-      setTimeout(() => {
-        setShowModal2(true);
-      }, 300);
+      timer = setTimeout(() => setShowModal2(true), 300);
     }
+    return () => clearTimeout(timer);
   }, [item]);
 
   return (
     <View>
-      <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',
-            paddingVertical: 16,
-            alignItems: 'center',
-            gap: 16,
-          }}
-        >
-          <TouchableOpacity
-            disabled={item?.step > 1 ? true : false}
-            onPress={() => {
-              if (item?.step === 0) {
-                navigation.push(ScreenNames.OCR, {
-                  loan: item,
-                  front: true,
-                });
-              } else {
-                navigation.push(ScreenNames.InfoLoanMotobike, {
-                  loan: item,
-                });
-              }
-            }}
-            style={{
-              backgroundColor:
-                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#ECFFE8',
-              borderRadius: 8,
-              paddingVertical: 8,
-              paddingHorizontal: 12,
-              flex: 1,
-              borderWidth: 1,
-              borderColor:
-                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#B1EB95',
-            }}
-          >
-            <LinearGradient
-              colors={
-                item?.step === 0 || item?.step === 1
-                  ? ['#FF8E4F', '#EF592E']
-                  : ['#28A745', '#28A745']
-              }
-              style={{
-                paddingVertical: 2,
-                borderRadius: 40,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 50,
-              }}
-            >
-              <MText style={{ fontSize: 8, color: 'white' }}>Bước 1</MText>
-            </LinearGradient>
-            <View
-              style={{
-                marginTop: 8,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-              }}
-            >
-              {item?.step === 0 || item?.step === 1 ? (
-                <Icon3 />
-              ) : (
-                <IconSuccess />
-              )}
-              <MText
-                style={{
-                  fontSize: 10,
-                }}
-              >
-                Thông tin cá nhân
-              </MText>
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => {
-              if (item?.step === 2) {
-                navigation.push(ScreenNames.VehicleCamera, {
-                  loan: item,
-                  front: true,
-                });
-              } else {
-                navigation.push(ScreenNames.ReviewLoanMotobike, {
-                  loan: item,
-                });
-              }
-            }}
-            disabled={item?.step === 2 || item?.step === 3 ? false : true}
-            style={{
-              backgroundColor:
-                item?.step < 2
-                  ? '#FFFFFF'
-                  : item?.step === 2 || item?.step === 3
-                  ? '#FFF3E3'
-                  : '#ECFFE8',
-              borderRadius: 8,
-              paddingVertical: 8,
-              paddingHorizontal: 12,
-              flex: 1,
-              borderWidth: 1,
-              borderColor:
-                item?.step < 2
-                  ? '#F2F2F7'
-                  : item?.step === 2 || item?.step === 3
-                  ? '#FFF3E3'
-                  : '#B1EB95',
-            }}
-          >
-            <LinearGradient
-              colors={
-                item?.step < 2
-                  ? ['#C7C7CC', '#C7C7CC']
-                  : item?.step === 2 || item?.step === 3
-                  ? ['#FF8E4F', '#EF592E']
-                  : ['#28A745', '#28A745']
-              }
-              style={{
-                paddingVertical: 2,
-                borderRadius: 40,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 50,
-              }}
-            >
-              <MText style={{ fontSize: 8, color: 'white' }}>Bước 2</MText>
-            </LinearGradient>
-            <View
-              style={{
-                marginTop: 8,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-              }}
-            >
-              {item?.step < 2 ? (
+        <View style={styles.stepsRow}>
+          <StepButton
+            badge="Bước 1"
+            label="Thông tin cá nhân"
+            icon={stepOneActive ? <Icon3 /> : <IconSuccess />}
+            colors={stepOneActive ? GRADIENT_ORANGE : GRADIENT_GREEN}
+            backgroundColor={stepOneActive ? '#FFF3E3' : '#ECFFE8'}
+            borderColor={stepOneActive ? '#FFF3E3' : '#B1EB95'}
+            disabled={step > 1}
+            onPress={goToStep1}
+          />
+          <StepButton
+            badge="Bước 2"
+            label="Thông tin xe máy"
+            icon={
+              step < 2 ? (
                 <Icon11 />
-              ) : item?.step === 2 || item?.step === 3 ? (
+              ) : stepTwoActive ? (
                 <Icon12 />
               ) : (
                 <IconSuccess />
-              )}
-              <MText
-                style={{
-                  fontSize: 10,
-                }}
-              >
-                Thông tin xe máy
-              </MText>
-            </View>
-          </TouchableOpacity>
+              )
+            }
+            colors={
+              step < 2
+                ? GRADIENT_GRAY
+                : stepTwoActive
+                ? GRADIENT_ORANGE
+                : GRADIENT_GREEN
+            }
+            backgroundColor={
+              step < 2 ? '#FFFFFF' : stepTwoActive ? '#FFF3E3' : '#ECFFE8'
+            }
+            borderColor={
+              step < 2 ? '#F2F2F7' : stepTwoActive ? '#FFF3E3' : '#B1EB95'
+            }
+            disabled={!stepTwoActive}
+            onPress={goToStep2}
+          />
         </View>
 
-        <View
-          style={{
-            backgroundColor: '#EEF7FF',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-            borderRadius: 4,
-            paddingHorizontal: 8,
-            paddingVertical: 10,
-          }}
-        >
+        <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={{
-            flexDirection: 'row',
-            paddingBottom: 16,
-            marginTop: 16,
-          }}
-        >
-          <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.statusSection}>
+          <View style={styles.statusLeft}>
+            <MText style={styles.statusLabel}>Trạng thái</MText>
+            <MText style={styles.statusValue}>
+              {stepOnePending
                 ? 'Chờ cập nhật thông tin cá nhân'
-                : item?.step === 2 || item?.step === 3
-                ? `Chờ cập nhật thông tin xe máy`
+                : stepTwoActive
+                ? 'Chờ cập nhật thông tin xe máy'
                 : 'Đơn vay đang chờ phê duyệt'}
             </MText>
           </View>
-          {item?.step <= 1 ? (
-            <TouchableOpacity
-              onPress={() => {
-                if (item?.step === 0) {
-                  navigation.push(ScreenNames.OCR, {
-                    loan: item,
-                    front: true,
-                  });
-                } else {
-                  navigation.push(ScreenNames.InfoLoanMotobike, {
-                    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 === 2 || item?.step === 3 ? (
-            <TouchableOpacity
-              onPress={() => {
-                if (item?.step === 2) {
-                  navigation.push(ScreenNames.VehicleCamera, {
-                    loan: item,
-                    front: true,
-                  });
-                } else {
-                  navigation.push(ScreenNames.ReviewLoanMotobike, {
-                    loan: item,
-                  });
-                }
-              }}
-            >
+          {(stepOnePending || stepTwoActive) && (
+            <TouchableOpacity onPress={stepOnePending ? goToStep1 : goToStep2}>
               <LinearGradient
-                colors={['#FF8E4F', '#EF592E']}
-                style={{
-                  height: 30,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  borderRadius: 24,
-                  paddingHorizontal: 10,
-                }}
+                colors={GRADIENT_ORANGE}
+                style={styles.updateButton}
               >
-                <MText
-                  style={{
-                    color: 'white',
-                    fontSize: 12,
-                  }}
-                >
-                  Cập nhật
-                </MText>
+                <MText style={styles.updateButtonText}>Cập nhật</MText>
               </LinearGradient>
             </TouchableOpacity>
-          ) : (
-            <></>
           )}
         </View>
-        {item?.step !== 5 ? (
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 8,
-              backgroundColor: '#FFF2F2',
-              marginHorizontal: -16,
-              paddingVertical: 10,
-              borderBottomRightRadius: 8,
-              borderBottomLeftRadius: 8,
-              paddingHorizontal: 10,
-            }}
-          >
+        {step !== 5 && (
+          <View style={styles.warningBanner}>
             <Info />
-            <MText
-              style={[
-                {
-                  fontSize: 10,
-                  color: '#E40010',
-                  flex: 1,
-                },
-              ]}
-            >
-              {item?.step <= 1
+            <MText style={styles.warningText}>
+              {stepOnePending
                 ? 'Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!'
-                : item?.step === 2 || item?.step === 3
-                ? `Vui lòng cập nhật thông tin xe để được giải ngân sớm nhất!`
+                : stepTwoActive
+                ? 'Vui lòng cập nhật thông tin xe để được giải ngân sớm nhất!'
                 : 'Đơn vay đang chờ phê duyệt'}
             </MText>
           </View>
-        ) : (
-          <></>
         )}
       </View>
 
       <Modal isVisible={showPolicy} backdropColor="#000" backdropOpacity={0.5}>
-        <View
-          style={{
-            borderRadius: 12,
-            backgroundColor: 'white',
-            padding: 16,
-          }}
-        >
-          <View
-            style={{
-              flexDirection: 'row-reverse',
-            }}
-          >
+        <View style={styles.modalCard}>
+          <View style={styles.closeRow}>
             <TouchableOpacity
               onPress={() => setShowPolicy(false)}
-              style={{
-                width: 30,
-                height: 30,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+              style={styles.closeButton}
             >
               <Close2Icon />
             </TouchableOpacity>
           </View>
-          <MText
-            style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}
-          >
-            Xác nhận chia sẻ dữ liệu
-          </MText>
-          <View
-            style={{
-              marginTop: 16,
-              alignItems: 'center',
-            }}
-          >
+          <MText style={styles.modalTitle}>Xác nhận chia sẻ dữ liệu</MText>
+          <View style={styles.f88Wrap}>
             <Image
               source={require('../../assets/tts/f88.png')}
-              style={{
-                height: 60,
-                resizeMode: 'contain',
-              }}
+              style={styles.f88Image}
             />
           </View>
-          <MText
-            style={{ color: '#828282', textAlign: 'center', marginTop: 16 }}
-          >
+          <MText style={styles.policyBody}>
             Tima sẽ chuyển thông tin của bạn đến Công ty Cổ phần Kinh doanh F88
             (F88) để xem xét phê duyệt khoản vay. Khi chọn "Đồng ý & Tiếp tục",
             bạn đồng ý cho các bên liên quan thu thập, sử dụng, xử lý và chia sẻ
             dữ liệu cá nhân theo quy định của pháp luật. Sau khi chuyển giao dữ
             liệu, Tima là bên kiểm soát và xử lý dữ liệu cá nhân.
           </MText>
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginTop: 24,
-              gap: 8,
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => {
-                setCheck(!check);
-              }}
-            >
+          <View style={styles.checkboxRow}>
+            <TouchableOpacity onPress={() => setCheck(!check)}>
               {check ? <CheckBoxActive /> : <CheckBox />}
             </TouchableOpacity>
             <MText>
               Tôi đồng ý với{' '}
               <MText
-                style={{ color: '#2F80ED' }}
+                style={styles.termsLink}
                 onPress={() => {
                   setShowPolicy(false);
                   navigation.navigate(ScreenNames.PolicyF88, { item });
@@ -542,119 +289,42 @@ export default function ItemMotoBikeLoan({
               </MText>
             </MText>
           </View>
-          <View>
-            <TouchableOpacity
-              disabled={check || isLoading ? false : true}
-              onPress={() => {
-                confirm();
-              }}
+          <TouchableOpacity disabled={!check || isLoading} onPress={confirm}>
+            <LinearGradient
+              colors={check ? GRADIENT_ORANGE : GRADIENT_DISABLED}
+              style={styles.confirmButton}
             >
-              <LinearGradient
-                colors={check ? ['#FF8E4F', '#EF592E'] : ['#E0E0E0', '#E0E0E0']}
-                style={{
-                  height: 40,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  borderRadius: 24,
-                  paddingHorizontal: 10,
-                  marginTop: 24,
-                }}
-              >
-                <MText
-                  style={{
-                    color: 'white',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  Đồng ý & Tiếp tục
-                </MText>
-              </LinearGradient>
-            </TouchableOpacity>
-          </View>
+              <MText style={styles.confirmButtonText}>Đồng ý & Tiếp tục</MText>
+            </LinearGradient>
+          </TouchableOpacity>
         </View>
       </Modal>
 
       <Modal isVisible={showModal2} backdropColor="#000" backdropOpacity={0.5}>
-        <View
-          style={{
-            borderRadius: 12,
-            backgroundColor: 'white',
-          }}
-        >
-          <View
-            style={{
-              flexDirection: 'row-reverse',
-            }}
-          >
+        <View style={styles.modalCardPlain}>
+          <View style={styles.closeRow}>
             <TouchableOpacity
               onPress={() => setShowModal2(false)}
-              style={{
-                width: 30,
-                height: 30,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+              style={styles.closeButton}
             >
               <Close2Icon />
             </TouchableOpacity>
           </View>
           <Image
             source={require('../../assets/img/Frame1000011990.png')}
-            style={{
-              height: 230,
-              resizeMode: 'contain',
-              width: '100%',
-            }}
+            style={styles.approvalImage}
           />
-          <View
-            style={{
-              paddingHorizontal: 24,
-              marginTop: 24,
-              flexDirection: 'column',
-              gap: 8,
-              alignItems: 'center',
-            }}
-          >
-            <MText
-              style={{
-                fontSize: 16,
-                fontWeight: 'bold',
-                textAlign: 'center',
-              }}
-            >
-              Đơn vay đang chờ phê duyệt
-            </MText>
-            <MText
-              style={{
-                fontSize: 14,
-                textAlign: 'center',
-                color: '#828282',
-              }}
-            >
+          <View style={styles.approvalBody}>
+            <MText style={styles.modalTitle}>Đơn vay đang chờ phê duyệt</MText>
+            <MText style={styles.approvalDesc}>
               Vui lòng chờ ít phút sau đó thực hiện eKYC để hoàn thiện khoản
               vay!
             </MText>
             <TouchableOpacity
               onPress={() => setShowModal2(false)}
-              style={{
-                borderWidth: 1,
-                borderColor: '#EF592E',
-                borderRadius: 24,
-                height: 40,
-                alignItems: 'center',
-                justifyContent: 'center',
-                paddingHorizontal: 50,
-                marginBottom: 24,
-                marginTop: 16,
-              }}
+              style={styles.understoodButton}
             >
-              <MText
-                style={{
-                  color: '#EF592E',
-                }}
-              >
-                Đã hiểu
-              </MText>
+              <MText style={styles.understoodText}>Đã hiểu</MText>
             </TouchableOpacity>
           </View>
         </View>
@@ -666,217 +336,48 @@ export default function ItemMotoBikeLoan({
         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
+        <View style={styles.modalCard}>
+          <MText style={[styles.modalTitle, styles.guideTitle]}>
+            Các bước hoàn thiện đơn vay
           </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',
-                }}
-              >
-                <Icon3 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 1
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  THÔNG TIN CÁ NHÂN
-                </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 }}>
-              Thực hiện 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',
-                }}
-              >
-                <Icon2 />
-              </View>
-              <View>
-                <MText
-                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
-                >
-                  Bước 2
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  THÔNG TIN XE MÁY
-                </MText>
-              </View>
-            </View>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Chụp 2 mặt hình ảnh Đăng ký xe
-            </MText>
-          </View>
+              {index < GUIDE_STEPS.length - 1 && (
+                <View style={styles.dashedDivider}>
+                  <View style={styles.dashedDividerInner} />
+                </View>
+              )}
+            </React.Fragment>
+          ))}
 
-          <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 3
-                </MText>
-                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
-                  NỘP HỒ SƠ VAY
-                </MText>
+          <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>
-            <MText style={{ fontSize: 10, marginTop: 5 }}>
-              Xác nhận T&C{' '}
-              <MText style={{ fontSize: 10, color: '#EF592E' }}>
-                (Điều kiện & điều khoản)
-              </MText>{' '}
-              và nộp hồ sơ vay
-            </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>
-            </View>
+            ))}
           </View>
 
           <TouchableOpacity
-            style={{ position: 'absolute', top: 16, right: 16 }}
+            style={styles.guideClose}
             onPress={() => setShowModal(false)}
           >
             <Close2Icon />
@@ -886,3 +387,296 @@ export default function ItemMotoBikeLoan({
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  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',
+    paddingVertical: 16,
+    alignItems: 'center',
+    gap: 16,
+  },
+  stepButton: {
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    flex: 1,
+    borderWidth: 1,
+  },
+  stepBadge: {
+    paddingVertical: 2,
+    borderRadius: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 50,
+  },
+  stepBadgeText: {
+    fontSize: 8,
+    color: 'white',
+  },
+  stepLabelRow: {
+    marginTop: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  stepLabelText: {
+    fontSize: 10,
+  },
+  guideBanner: {
+    backgroundColor: '#EEF7FF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+  },
+  guideBannerText: {
+    fontSize: 10,
+    flex: 1,
+  },
+  linkText: {
+    fontSize: 10,
+    color: '#2F80ED',
+    textDecorationLine: 'underline',
+  },
+  statusSection: {
+    flexDirection: 'row',
+    paddingBottom: 16,
+    marginTop: 16,
+  },
+  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,
+  },
+  modalCard: {
+    borderRadius: 12,
+    backgroundColor: 'white',
+    padding: 16,
+  },
+  modalCardPlain: {
+    borderRadius: 12,
+    backgroundColor: 'white',
+  },
+  closeRow: {
+    flexDirection: 'row-reverse',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  f88Wrap: {
+    marginTop: 16,
+    alignItems: 'center',
+  },
+  f88Image: {
+    height: 60,
+    resizeMode: 'contain',
+  },
+  policyBody: {
+    color: '#828282',
+    textAlign: 'center',
+    marginTop: 16,
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 24,
+    gap: 8,
+  },
+  termsLink: {
+    color: '#2F80ED',
+  },
+  confirmButton: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    paddingHorizontal: 10,
+    marginTop: 24,
+  },
+  confirmButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  approvalImage: {
+    height: 230,
+    resizeMode: 'contain',
+    width: '100%',
+  },
+  approvalBody: {
+    paddingHorizontal: 24,
+    marginTop: 24,
+    flexDirection: 'column',
+    gap: 8,
+    alignItems: 'center',
+  },
+  approvalDesc: {
+    fontSize: 14,
+    textAlign: 'center',
+    color: '#828282',
+  },
+  understoodButton: {
+    borderWidth: 1,
+    borderColor: '#EF592E',
+    borderRadius: 24,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 50,
+    marginBottom: 24,
+    marginTop: 16,
+  },
+  understoodText: {
+    color: '#EF592E',
+  },
+  guideTitle: {
+    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,
+  },
+  guideClose: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+  },
+});