react-native-timacare 3.3.54 → 3.3.56-alert

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

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
-  Alert,
   Dimensions,
   Image,
   ImageBackground,
@@ -13,6 +12,7 @@ import {
   SafeAreaView,
   ScrollView,
   StatusBar,
+  StyleSheet,
   TouchableOpacity,
   View,
   ViewStyle,
@@ -105,7 +105,7 @@ import {
   IconOcr,
 } from '../../assets/svgs';
 import { o } from 'ramda';
-import ItemTimaOneV3 from '../../components/ItemTimaOneV3';
+import ItemTimaOne from '../../components/ItemTimaOne';
 import ModalOptionLoan from '../../components/ModalOptionLoan';
 import AlertLoan from '../../components/AlertLoan';
 import DigitalTopupItem from './DigitalTopupItem';
@@ -113,6 +113,7 @@ import ModalOptionLoanDigital from '../../components/ModalOptionLoanDigital';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ItemMotoBikeLoan from './ItemMotoBikeLoan';
 import BoxGuidline from './BoxGuidline';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 
 const listBanners = [
   require('../../assets/img/banner1.png'),
@@ -124,6 +125,9 @@ const $action: ViewStyle = {
   alignItems: 'center',
 };
 
+// Gradient cam thương hiệu, dùng lặp lại ở nhiều nút trong màn hình
+const GRADIENT_ORANGE = ['#FF8E4F', '#EF592E'];
+
 let _unsubscribe;
 // Dữ liệu tham chiếu tĩnh (ngân hàng, nghề nghiệp, tỉnh...) chỉ cần prefetch 1 lần/phiên
 let _didPrefetchRefData = false;
@@ -293,7 +297,6 @@ export const Home = observer(function Home() {
         } else {
         }
       } else {
-        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
       }
     } catch (error) {
       console.log(error);
@@ -360,73 +363,93 @@ export const Home = observer(function Home() {
           console.log(
             'This feature is not available (on this device / in this context)'
           );
-          Alert.alert(
-            'Thông báo',
-            'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
-            [{ text: 'Đồng ý' }]
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            primaryText: 'Đóng',
+          });
+          break;
+        case RESULTS.DENIED:
+          console.log(
+            'The permission has not been requested / is denied but requestable'
           );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            primaryText: 'Đóng',
+          });
           break;
         case RESULTS.DENIED:
           console.log(
             'The permission has not been requested / is denied but requestable'
           );
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
+            primaryText: 'Đóng',
+          });
+          break;
+        case RESULTS.DENIED:
+          console.log(
+            'The permission has not been requested / is denied but requestable'
           );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.LIMITED:
           console.log('The permission is limited: some actions are possible');
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.GRANTED:
           console.log('The permission is granted');
           break;
         case RESULTS.BLOCKED:
           console.log('The permission is denied and not requestable anymore');
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    openSettings();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền vị trí. Vui lòng cấp quyền vị trí để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
       }
     });
@@ -463,14 +486,22 @@ export const Home = observer(function Home() {
         setCheckTCCIMB(false);
         closeModalThen(() => onRefresh());
       } else {
-        Alert.alert(
-          'Thông báo',
-          response?.data?.meta?.errorMessage ||
-            'Có lỗi xảy ra. Vui lòng thử lại sau'
-        );
+        AlertGlobal.show({
+          type: 'warning',
+          title: 'Thông báo',
+          message:
+            response?.data?.meta?.errorMessage ||
+            'Có lỗi xảy ra. Vui lòng thử lại sau',
+          primaryText: 'Đóng',
+        });
       }
     } catch (error) {
-      Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Có lỗi xảy ra. Vui lòng thử lại sau',
+        primaryText: 'Đóng',
+      });
     } finally {
       setIsConfirmingTCCIMB(false);
     }
@@ -496,12 +527,31 @@ export const Home = observer(function Home() {
         if (response.data?.meta?.errorCode === 200) {
           closeModalThen(() => onRefresh());
         } else {
-          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              response?.data?.meta?.errorMessage ||
+              'Có lỗi xảy ra. Vui lòng thử lại sau',
+            primaryText: 'Đóng',
+          });
         }
       } else {
-        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+        AlertGlobal.show({
+          type: 'warning',
+          title: 'Thông báo',
+          message: 'Có lỗi xảy ra. Vui lòng thử lại sau',
+          primaryText: 'Đóng',
+        });
       }
     } catch (error) {
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Có lỗi xảy ra. Vui lòng thử lại sau',
+        primaryText: 'Đóng',
+      });
+    } finally {
       setIsLoading(false);
     }
   };
@@ -518,10 +568,22 @@ export const Home = observer(function Home() {
         if (response.data?.meta?.errorCode === 200) {
           closeModalThen(() => onRefresh());
         } else {
-          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              response?.data?.meta?.errorMessage ||
+              'Có lỗi xảy ra. Vui lòng thử lại sau',
+            primaryText: 'Đóng',
+          });
         }
       } else {
-        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+        AlertGlobal.show({
+          type: 'warning',
+          title: 'Thông báo',
+          message: 'Có lỗi xảy ra. Vui lòng thử lại sau',
+          primaryText: 'Đóng',
+        });
       }
     } catch (error) {
       setIsLoading(false);
@@ -532,7 +594,7 @@ export const Home = observer(function Home() {
     <View
       style={[commonStyles.fill, { zIndex: 1, backgroundColor: '#FFFFFF' }]}
     >
-      <LinearGradient colors={['#FF8E4F', '#EF592E']}>
+      <LinearGradient colors={GRADIENT_ORANGE}>
         <View style={{ marginTop: insets.top + 16 }}>
           <View
             style={{
@@ -627,7 +689,7 @@ export const Home = observer(function Home() {
                 item?.typeLoan === 6 ||
                 item?.typeLoan === 7 ? (
                   <View>
-                    <ItemTimaOneV3 item={item} navigation={navigation} />
+                    <ItemTimaOne item={item} navigation={navigation} />
                   </View>
                 ) : item?.typeLoan === 4 && !item?.isPipelineCIMB ? (
                   <DigitalTopupItem
@@ -650,16 +712,7 @@ export const Home = observer(function Home() {
                         {/* // type 4 digital topup  */}
                         {item?.typeLoan === 4 ? (
                           <View>
-                            <View
-                              style={{
-                                backgroundColor: '#FFFFFF',
-                                paddingHorizontal: 16,
-                                marginBottom: 16,
-                                borderRadius: 8,
-                                borderWidth: 0.5,
-                                borderColor: '#E0E0E0',
-                              }}
-                            >
+                            <View style={styles.card}>
                               <View
                                 style={{
                                   flexDirection: 'row',
@@ -679,13 +732,7 @@ export const Home = observer(function Home() {
                                   </MText>
                                 </View>
                               </View>
-                              <View
-                                style={{
-                                  height: 1,
-                                  backgroundColor: '#E0E0E0',
-                                  marginVertical: 16,
-                                }}
-                              />
+                              <View style={styles.divider} />
                               <View
                                 style={{
                                   flexDirection: 'row',
@@ -704,13 +751,7 @@ export const Home = observer(function Home() {
                                   {item?.loanStatus}
                                 </MText>
                               </View>
-                              <View
-                                style={{
-                                  height: 0.5,
-                                  backgroundColor: '#E0E0E0',
-                                  marginVertical: 16,
-                                }}
-                              />
+                              <View style={styles.dividerThin} />
                               <View style={{ flexDirection: 'row' }}>
                                 {item?.loanStatus === null ||
                                 item?.loanStatus === '' ? (
@@ -733,12 +774,7 @@ export const Home = observer(function Home() {
                                     <MText
                                       style={[
                                         commonStyles.textNormal,
-                                        {
-                                          fontSize: 12,
-                                          fontWeight: '300',
-                                          marginTop: 8,
-                                          textAlign: 'center',
-                                        },
+                                        styles.actionLabelCenter,
                                       ]}
                                     >
                                       Hoàn thiện{'\n'}cung cấp thông tin
@@ -778,12 +814,7 @@ export const Home = observer(function Home() {
                                         <MText
                                           style={[
                                             commonStyles.textNormal,
-                                            {
-                                              fontSize: 12,
-                                              fontWeight: '300',
-                                              marginTop: 8,
-                                              textAlign: 'center',
-                                            },
+                                            styles.actionLabelCenter,
                                           ]}
                                         >
                                           Hoàn thiện{'\n'}cung cấp thông tin
@@ -795,12 +826,7 @@ export const Home = observer(function Home() {
                                         <MText
                                           style={[
                                             commonStyles.textNormal,
-                                            {
-                                              fontSize: 12,
-                                              fontWeight: '300',
-                                              marginTop: 8,
-                                              textAlign: 'center',
-                                            },
+                                            styles.actionLabelCenter,
                                           ]}
                                         >
                                           Hoàn thiện{'\n'}cung cấp thông tin
@@ -812,10 +838,7 @@ export const Home = observer(function Home() {
 
                                 {item?.isSignContract && (
                                   <MButton
-                                    style={{
-                                      alignItems: 'center',
-                                      marginLeft: 20,
-                                    }}
+                                    style={styles.actionButtonSpaced}
                                     onPress={() => {
                                       checkTerm(item, () => {
                                         if (item?.urlSignContract) {
@@ -828,10 +851,13 @@ export const Home = observer(function Home() {
                                             )
                                           );
                                         } else {
-                                          Alert.alert(
-                                            'Thông báo',
-                                            'Bạn chưa thể ký hợp đồng bây giờ?'
-                                          );
+                                          AlertGlobal.show({
+                                            title: 'Thông báo',
+                                            message:
+                                              'Bạn chưa thể ký hợp đồng bây giờ?',
+                                            type: 'warning',
+                                            primaryText: 'Đóng',
+                                          });
                                         }
                                       });
                                     }}
@@ -840,10 +866,7 @@ export const Home = observer(function Home() {
                                     <MText
                                       style={[
                                         commonStyles.textNormal,
-                                        {
-                                          fontSize: 12,
-                                          marginTop: 8,
-                                        },
+                                        styles.label12,
                                       ]}
                                     >
                                       Ký hợp đồng
@@ -852,10 +875,7 @@ export const Home = observer(function Home() {
                                 )}
                                 {item?.isSignContractTima && (
                                   <MButton
-                                    style={{
-                                      alignItems: 'center',
-                                      marginLeft: 20,
-                                    }}
+                                    style={styles.actionButtonSpaced}
                                     onPress={() => {
                                       checkTerm(item, () => {
                                         navigation.dispatch(
@@ -873,11 +893,7 @@ export const Home = observer(function Home() {
                                     <MText
                                       style={[
                                         commonStyles.textNormal,
-                                        {
-                                          fontSize: 12,
-                                          marginTop: 8,
-                                          textAlign: 'center',
-                                        },
+                                        styles.label12Center,
                                       ]}
                                     >
                                       Hợp đồng{'\n'}dịch vụ
@@ -886,10 +902,7 @@ export const Home = observer(function Home() {
                                 )}
                                 {item?.paymentEvidenceUrl && (
                                   <MButton
-                                    style={{
-                                      alignItems: 'center',
-                                      marginLeft: 20,
-                                    }}
+                                    style={styles.actionButtonSpaced}
                                     onPress={() => {
                                       checkTerm(item, () => {
                                         navigation.dispatch(
@@ -907,11 +920,7 @@ export const Home = observer(function Home() {
                                     <MText
                                       style={[
                                         commonStyles.textNormal,
-                                        {
-                                          fontSize: 12,
-                                          marginTop: 8,
-                                          textAlign: 'center',
-                                        },
+                                        styles.label12Center,
                                       ]}
                                     >
                                       Mục đích {'\n'}sử dụng
@@ -920,10 +929,7 @@ export const Home = observer(function Home() {
                                 )}
                                 {item?.showPaymentPlan && (
                                   <MButton
-                                    style={{
-                                      alignItems: 'center',
-                                      marginLeft: 20,
-                                    }}
+                                    style={styles.actionButtonSpaced}
                                     onPress={() => {
                                       checkTerm(item, () => {
                                         navigation.dispatch(
@@ -941,10 +947,7 @@ export const Home = observer(function Home() {
                                     <MText
                                       style={[
                                         commonStyles.textNormal,
-                                        {
-                                          fontSize: 12,
-                                          marginTop: 8,
-                                        },
+                                        styles.label12,
                                       ]}
                                     >
                                       Lịch dự kiến
@@ -956,17 +959,7 @@ export const Home = observer(function Home() {
                               {item.messageErrorCIMB !== '' &&
                               item?.messageErrorCIMB &&
                               item?.isCimbApproveFull === null ? (
-                                <View
-                                  style={{
-                                    backgroundColor: '#FBEFE7',
-                                    marginHorizontal: -16,
-                                    paddingVertical: 8,
-                                    marginTop: 16,
-                                    borderBottomRightRadius: 8,
-                                    borderBottomLeftRadius: 8,
-                                    paddingHorizontal: 16,
-                                  }}
-                                >
+                                <View style={styles.infoBanner}>
                                   <View
                                     style={{
                                       flexDirection: 'row',
@@ -997,7 +990,7 @@ export const Home = observer(function Home() {
                                       }}
                                     >
                                       <LinearGradient
-                                        colors={['#FF8E4F', '#EF592E']}
+                                        colors={GRADIENT_ORANGE}
                                         style={{
                                           paddingHorizontal: 10,
                                           height: 30,
@@ -1022,19 +1015,7 @@ export const Home = observer(function Home() {
                                   </View>
                                 </View>
                               ) : (
-                                <View
-                                  style={{
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    backgroundColor: '#FBEFE7',
-                                    marginHorizontal: -16,
-                                    paddingVertical: 8,
-                                    marginTop: 16,
-                                    borderBottomRightRadius: 8,
-                                    borderBottomLeftRadius: 8,
-                                    paddingHorizontal: 16,
-                                  }}
-                                >
+                                <View style={styles.infoBannerRow}>
                                   <Info />
                                   <MText
                                     style={[
@@ -1060,16 +1041,7 @@ export const Home = observer(function Home() {
                           <Observer>
                             {() => (
                               <View>
-                                <View
-                                  style={{
-                                    backgroundColor: '#FFFFFF',
-                                    paddingHorizontal: 16,
-                                    marginBottom: 16,
-                                    borderRadius: 8,
-                                    borderWidth: 0.5,
-                                    borderColor: '#E0E0E0',
-                                  }}
-                                >
+                                <View style={styles.card}>
                                   <View
                                     style={{
                                       flexDirection: 'row',
@@ -1091,13 +1063,7 @@ export const Home = observer(function Home() {
                                       </MText>
                                     </View>
                                   </View>
-                                  <View
-                                    style={{
-                                      height: 1,
-                                      backgroundColor: '#E0E0E0',
-                                      marginVertical: 16,
-                                    }}
-                                  />
+                                  <View style={styles.divider} />
                                   <View
                                     style={{
                                       flexDirection: 'row',
@@ -1140,7 +1106,7 @@ export const Home = observer(function Home() {
                                           flexDirection: 'row',
                                           alignItems: 'center',
                                         }}
-                                        colors={['#FF8E4F', '#EF592E']}
+                                        colors={GRADIENT_ORANGE}
                                       >
                                         <UpdateIcon />
                                         <MText
@@ -1155,13 +1121,7 @@ export const Home = observer(function Home() {
                                     </TouchableOpacity>
                                   ) : (
                                     <View>
-                                      <View
-                                        style={{
-                                          height: 0.5,
-                                          backgroundColor: '#E0E0E0',
-                                          marginVertical: 16,
-                                        }}
-                                      />
+                                      <View style={styles.dividerThin} />
                                       <View style={{ flexDirection: 'row' }}>
                                         {item?.loanStatus === null ||
                                         item?.loanStatus === '' ? (
@@ -1186,12 +1146,7 @@ export const Home = observer(function Home() {
                                             <MText
                                               style={[
                                                 commonStyles.textNormal,
-                                                {
-                                                  fontSize: 12,
-                                                  fontWeight: '300',
-                                                  marginTop: 8,
-                                                  textAlign: 'center',
-                                                },
+                                                styles.actionLabelCenter,
                                               ]}
                                             >
                                               Hoàn thiện{'\n'}cung cấp thông tin
@@ -1233,12 +1188,7 @@ export const Home = observer(function Home() {
                                                 <MText
                                                   style={[
                                                     commonStyles.textNormal,
-                                                    {
-                                                      fontSize: 12,
-                                                      fontWeight: '300',
-                                                      marginTop: 8,
-                                                      textAlign: 'center',
-                                                    },
+                                                    styles.actionLabelCenter,
                                                   ]}
                                                 >
                                                   Hoàn thiện{'\n'}cung cấp thông
@@ -1255,12 +1205,7 @@ export const Home = observer(function Home() {
                                                 <MText
                                                   style={[
                                                     commonStyles.textNormal,
-                                                    {
-                                                      fontSize: 12,
-                                                      fontWeight: '300',
-                                                      marginTop: 8,
-                                                      textAlign: 'center',
-                                                    },
+                                                    styles.actionLabelCenter,
                                                   ]}
                                                 >
                                                   Hoàn thiện{'\n'}cung cấp thông
@@ -1273,10 +1218,7 @@ export const Home = observer(function Home() {
 
                                         {item?.isSignContract && (
                                           <MButton
-                                            style={{
-                                              alignItems: 'center',
-                                              marginLeft: 20,
-                                            }}
+                                            style={styles.actionButtonSpaced}
                                             onPress={() => {
                                               checkTerm(item, () => {
                                                 if (item?.urlSignContract) {
@@ -1289,10 +1231,13 @@ export const Home = observer(function Home() {
                                                     )
                                                   );
                                                 } else {
-                                                  Alert.alert(
-                                                    'Thông báo',
-                                                    'Bạn chưa thể ký hợp đồng bây giờ?'
-                                                  );
+                                                  AlertGlobal.show({
+                                                    type: 'warning',
+                                                    title: 'Thông báo',
+                                                    message:
+                                                      'Bạn chưa thể ký hợp đồng bây giờ?',
+                                                    primaryText: 'Đóng',
+                                                  });
                                                 }
                                               });
                                             }}
@@ -1301,11 +1246,7 @@ export const Home = observer(function Home() {
                                             <MText
                                               style={[
                                                 commonStyles.textNormal,
-                                                {
-                                                  fontSize: 12,
-                                                  fontWeight: '300',
-                                                  marginTop: 8,
-                                                },
+                                                styles.actionLabel,
                                               ]}
                                             >
                                               Ký hợp đồng
@@ -1314,10 +1255,7 @@ export const Home = observer(function Home() {
                                         )}
                                         {item?.isSignContractTima && (
                                           <MButton
-                                            style={{
-                                              alignItems: 'center',
-                                              marginLeft: 20,
-                                            }}
+                                            style={styles.actionButtonSpaced}
                                             onPress={() => {
                                               checkTerm(item, () => {
                                                 navigation.dispatch(
@@ -1335,12 +1273,7 @@ export const Home = observer(function Home() {
                                             <MText
                                               style={[
                                                 commonStyles.textNormal,
-                                                {
-                                                  fontSize: 12,
-                                                  fontWeight: '300',
-                                                  marginTop: 8,
-                                                  textAlign: 'center',
-                                                },
+                                                styles.actionLabelCenter,
                                               ]}
                                             >
                                               Hợp đồng{'\n'}dịch vụ
@@ -1349,10 +1282,7 @@ export const Home = observer(function Home() {
                                         )}
                                         {item?.paymentEvidenceUrl && (
                                           <MButton
-                                            style={{
-                                              alignItems: 'center',
-                                              marginLeft: 20,
-                                            }}
+                                            style={styles.actionButtonSpaced}
                                             onPress={() => {
                                               checkTerm(item, () => {
                                                 navigation.dispatch(
@@ -1370,12 +1300,7 @@ export const Home = observer(function Home() {
                                             <MText
                                               style={[
                                                 commonStyles.textNormal,
-                                                {
-                                                  fontSize: 12,
-                                                  fontWeight: '300',
-                                                  marginTop: 8,
-                                                  textAlign: 'center',
-                                                },
+                                                styles.actionLabelCenter,
                                               ]}
                                             >
                                               Mục đích {'\n'}sử dụng
@@ -1384,10 +1309,7 @@ export const Home = observer(function Home() {
                                         )}
                                         {item?.showPaymentPlan && (
                                           <MButton
-                                            style={{
-                                              alignItems: 'center',
-                                              marginLeft: 20,
-                                            }}
+                                            style={styles.actionButtonSpaced}
                                             onPress={() => {
                                               navigation.dispatch(
                                                 StackActions.push(
@@ -1403,11 +1325,7 @@ export const Home = observer(function Home() {
                                             <MText
                                               style={[
                                                 commonStyles.textNormal,
-                                                {
-                                                  fontSize: 12,
-                                                  fontWeight: '300',
-                                                  marginTop: 8,
-                                                },
+                                                styles.actionLabel,
                                               ]}
                                             >
                                               Lịch dự kiến
@@ -1419,17 +1337,7 @@ export const Home = observer(function Home() {
                                       {item.messageErrorCIMB !== '' &&
                                       item?.messageErrorCIMB &&
                                       item?.isCimbApproveFull === null ? (
-                                        <View
-                                          style={{
-                                            backgroundColor: '#FBEFE7',
-                                            marginHorizontal: -16,
-                                            paddingVertical: 8,
-                                            marginTop: 16,
-                                            borderBottomRightRadius: 8,
-                                            borderBottomLeftRadius: 8,
-                                            paddingHorizontal: 16,
-                                          }}
-                                        >
+                                        <View style={styles.infoBanner}>
                                           <View
                                             style={{
                                               flexDirection: 'row',
@@ -1466,7 +1374,7 @@ export const Home = observer(function Home() {
                                               }}
                                             >
                                               <LinearGradient
-                                                colors={['#FF8E4F', '#EF592E']}
+                                                colors={GRADIENT_ORANGE}
                                                 style={{
                                                   paddingHorizontal: 10,
                                                   height: 30,
@@ -1491,19 +1399,7 @@ export const Home = observer(function Home() {
                                           </View>
                                         </View>
                                       ) : (
-                                        <View
-                                          style={{
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            backgroundColor: '#FBEFE7',
-                                            marginHorizontal: -16,
-                                            paddingVertical: 8,
-                                            marginTop: 16,
-                                            borderBottomRightRadius: 8,
-                                            borderBottomLeftRadius: 8,
-                                            paddingHorizontal: 16,
-                                          }}
-                                        >
+                                        <View style={styles.infoBannerRow}>
                                           <Info />
                                           <MText
                                             style={[
@@ -1533,16 +1429,7 @@ export const Home = observer(function Home() {
                           <View>
                             {item?.loanStatus !== null &&
                             item?.loanStatus !== '' ? (
-                              <View
-                                style={{
-                                  backgroundColor: '#FFFFFF',
-                                  paddingHorizontal: 16,
-                                  marginBottom: 16,
-                                  borderRadius: 8,
-                                  borderWidth: 0.5,
-                                  borderColor: '#E0E0E0',
-                                }}
-                              >
+                              <View style={styles.card}>
                                 <View
                                   style={{
                                     flexDirection: 'row',
@@ -1563,13 +1450,7 @@ export const Home = observer(function Home() {
                                     </MText>
                                   </View>
                                 </View>
-                                <View
-                                  style={{
-                                    height: 1,
-                                    backgroundColor: '#E0E0E0',
-                                    marginVertical: 16,
-                                  }}
-                                />
+                                <View style={styles.divider} />
                                 <View
                                   style={{
                                     flexDirection: 'row',
@@ -1588,13 +1469,7 @@ export const Home = observer(function Home() {
                                     {item?.loanStatus}
                                   </MText>
                                 </View>
-                                <View
-                                  style={{
-                                    height: 0.5,
-                                    backgroundColor: '#E0E0E0',
-                                    marginVertical: 16,
-                                  }}
-                                />
+                                <View style={styles.dividerThin} />
                                 <View style={{ flexDirection: 'row' }}>
                                   {item?.isUpdateLoan ||
                                   item?.isUpdateInformation ? (
@@ -1628,12 +1503,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                            textAlign: 'center',
-                                          },
+                                          styles.actionLabelCenter,
                                         ]}
                                       >
                                         Hoàn thiện{'\n'}cung cấp thông tin
@@ -1645,12 +1515,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                            textAlign: 'center',
-                                          },
+                                          styles.actionLabelCenter,
                                         ]}
                                       >
                                         Hoàn thiện{'\n'}cung cấp thông tin
@@ -1659,10 +1524,7 @@ export const Home = observer(function Home() {
                                   )}
                                   {item?.isSignContract && (
                                     <TouchableOpacity
-                                      style={{
-                                        alignItems: 'center',
-                                        marginLeft: 20,
-                                      }}
+                                      style={styles.actionButtonSpaced}
                                       onPress={() => {
                                         checkTerm(item, () => {
                                           if (item?.urlSignContract) {
@@ -1675,10 +1537,13 @@ export const Home = observer(function Home() {
                                               )
                                             );
                                           } else {
-                                            Alert.alert(
-                                              'Thông báo',
-                                              'Bạn chưa thể ký hợp đồng bây giờ?'
-                                            );
+                                            AlertGlobal.show({
+                                              type: 'warning',
+                                              title: 'Thông báo',
+                                              message:
+                                                'Bạn chưa thể ký hợp đồng bây giờ?',
+                                              primaryText: 'Đóng',
+                                            });
                                           }
                                         });
                                       }}
@@ -1687,11 +1552,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                          },
+                                          styles.actionLabel,
                                         ]}
                                       >
                                         Ký hợp đồng
@@ -1700,10 +1561,7 @@ export const Home = observer(function Home() {
                                   )}
                                   {item?.isSignContractTima && (
                                     <TouchableOpacity
-                                      style={{
-                                        alignItems: 'center',
-                                        marginLeft: 20,
-                                      }}
+                                      style={styles.actionButtonSpaced}
                                       onPress={() => {
                                         checkTerm(item, () => {
                                           navigation.dispatch(
@@ -1721,12 +1579,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                            textAlign: 'center',
-                                          },
+                                          styles.actionLabelCenter,
                                         ]}
                                       >
                                         Hợp đồng{'\n'}dịch vụ
@@ -1735,10 +1588,7 @@ export const Home = observer(function Home() {
                                   )}
                                   {item?.paymentEvidenceUrl && (
                                     <TouchableOpacity
-                                      style={{
-                                        alignItems: 'center',
-                                        marginLeft: 20,
-                                      }}
+                                      style={styles.actionButtonSpaced}
                                       onPress={() => {
                                         checkTerm(item, () => {
                                           navigation.dispatch(
@@ -1756,12 +1606,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                            textAlign: 'center',
-                                          },
+                                          styles.actionLabelCenter,
                                         ]}
                                       >
                                         Mục đích {'\n'}sử dụng
@@ -1770,10 +1615,7 @@ export const Home = observer(function Home() {
                                   )}
                                   {item?.showPaymentPlan && (
                                     <TouchableOpacity
-                                      style={{
-                                        alignItems: 'center',
-                                        marginLeft: 20,
-                                      }}
+                                      style={styles.actionButtonSpaced}
                                       onPress={() => {
                                         navigation.dispatch(
                                           StackActions.push(
@@ -1789,11 +1631,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            fontWeight: '300',
-                                            marginTop: 8,
-                                          },
+                                          styles.actionLabel,
                                         ]}
                                       >
                                         Lịch dự kiến
@@ -1802,19 +1640,7 @@ export const Home = observer(function Home() {
                                   )}
                                 </View>
 
-                                <View
-                                  style={{
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    backgroundColor: '#FBEFE7',
-                                    marginHorizontal: -16,
-                                    paddingVertical: 8,
-                                    marginTop: 16,
-                                    borderBottomRightRadius: 8,
-                                    borderBottomLeftRadius: 8,
-                                    paddingHorizontal: 16,
-                                  }}
-                                >
+                                <View style={styles.infoBannerRow}>
                                   <Info />
                                   <MText
                                     style={[
@@ -1938,18 +1764,9 @@ export const Home = observer(function Home() {
                     ) : (
                       <Observer>
                         {() => (
-                          <View
-                            style={{
-                              backgroundColor: '#FFFFFF',
-                              paddingHorizontal: 16,
-                              borderRadius: 8,
-                              borderWidth: 0.5,
-                              borderColor: '#E0E0E0',
-                              marginBottom: 16,
-                            }}
-                          >
+                          <View style={styles.card}>
                             <LinearGradient
-                              colors={['#FF8E4F', '#EF592E']}
+                              colors={GRADIENT_ORANGE}
                               style={{
                                 borderTopLeftRadius: 8,
                                 borderTopRightRadius: 8,
@@ -1979,7 +1796,7 @@ export const Home = observer(function Home() {
                                       color: 'white',
                                     }}
                                   >
-                                    Số tiền đăng ký vay
+                                    HD-{item?.id}
                                   </MText>
                                 </View>
                                 <MText
@@ -1989,7 +1806,7 @@ export const Home = observer(function Home() {
                                     fontWeight: 'bold',
                                   }}
                                 >
-                                  {formatMoney(item?.loanAmount)} đ
+                                  {formatMoney(item?.loanAmount)}đ
                                 </MText>
                               </View>
                             </LinearGradient>
@@ -2020,13 +1837,7 @@ export const Home = observer(function Home() {
                                 {item?.loanStatus ?? 'Chưa xác định'}
                               </MText>
                             </View>
-                            <View
-                              style={{
-                                height: 0.5,
-                                backgroundColor: '#E0E0E0',
-                                marginVertical: 16,
-                              }}
-                            />
+                            <View style={styles.dividerThin} />
                             <View
                               style={{
                                 flexDirection: 'row',
@@ -2054,10 +1865,7 @@ export const Home = observer(function Home() {
                                   <MText
                                     style={[
                                       commonStyles.textNormal,
-                                      {
-                                        fontSize: 12,
-                                        marginTop: 8,
-                                      },
+                                      styles.label12,
                                     ]}
                                   >
                                     EKYC
@@ -2085,10 +1893,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            marginTop: 8,
-                                          },
+                                          styles.label12,
                                         ]}
                                       >
                                         Cập nhật{'\n'}thông tin
@@ -2120,10 +1925,7 @@ export const Home = observer(function Home() {
                                   <MText
                                     style={[
                                       commonStyles.textNormal,
-                                      {
-                                        fontSize: 12,
-                                        marginTop: 8,
-                                      },
+                                      styles.label12,
                                     ]}
                                   >
                                     Quay video
@@ -2148,10 +1950,7 @@ export const Home = observer(function Home() {
                                         <MText
                                           style={[
                                             commonStyles.textNormal,
-                                            {
-                                              fontSize: 12,
-                                              marginTop: 8,
-                                            },
+                                            styles.label12,
                                           ]}
                                         >
                                           Ký HĐ
@@ -2176,11 +1975,7 @@ export const Home = observer(function Home() {
                                       <MText
                                         style={[
                                           commonStyles.textNormal,
-                                          {
-                                            fontSize: 12,
-                                            marginTop: 8,
-                                            textAlign: 'center',
-                                          },
+                                          styles.label12Center,
                                         ]}
                                       >
                                         Ký HĐ
@@ -2207,11 +2002,7 @@ export const Home = observer(function Home() {
                                   <MText
                                     style={[
                                       commonStyles.textNormal,
-                                      {
-                                        fontSize: 12,
-                                        marginTop: 8,
-                                        textAlign: 'center',
-                                      },
+                                      styles.label12Center,
                                     ]}
                                   >
                                     Lịch thanh toán{'\n'}dự kiến
@@ -2219,19 +2010,7 @@ export const Home = observer(function Home() {
                                 </TouchableOpacity>
                               )}
                             </View>
-                            <View
-                              style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                backgroundColor: '#FBEFE7',
-                                marginHorizontal: -16,
-                                paddingVertical: 8,
-                                marginTop: 16,
-                                borderBottomRightRadius: 8,
-                                borderBottomLeftRadius: 8,
-                                paddingHorizontal: 16,
-                              }}
-                            >
+                            <View style={styles.infoBannerRow}>
                               <Info />
                               <MText
                                 style={[
@@ -2660,49 +2439,45 @@ export const Home = observer(function Home() {
                       marginTop: 8,
                     }}
                     onPress={async () => {
-                      Alert.alert(
-                        'Vui lòng xác nhận lại',
-                        `Bạn có chắc chắn muốn huỷ khoản vay từ CIMB với số tiền ${formatMoney(
+                      AlertGlobal.show({
+                        type: 'confirm',
+                        title: 'Vui lòng xác nhận lại',
+                        message: `Bạn có chắc chắn muốn huỷ khoản vay từ CIMB với số tiền ${formatMoney(
                           loanCimb?.loanAmount
                         )}`,
-                        [
-                          {
-                            text: 'Có',
-                            onPress: async () => {
-                              const response =
-                                await Api.getInstance().customerCancel({
-                                  LoanBriefId: loanCimb?.id,
-                                });
-                              if (response.kind === 'ok') {
-                                if (response.data.meta.errorCode === 200) {
-                                  closeModal();
-                                  const key = `SHOW_${loanCimb.id}`;
-                                  save(key, true);
-                                  Alert.alert(
-                                    'Thông báo',
-                                    'Huỷ đơn thành công',
-                                    [
-                                      {
-                                        text: 'Đồng ý',
-                                        onPress: () => {
-                                          navigation.pop();
-                                        },
-                                      },
-                                    ]
-                                  );
-                                }
-                              } else {
-                                Alert.alert(
-                                  'Có lỗi xảy ra. Vui lòng thử lại sau!'
-                                );
-                              }
-                            },
-                          },
-                          {
-                            text: 'Không',
-                          },
-                        ]
-                      );
+                        primaryText: 'Có',
+                        secondaryText: 'Không',
+                        onPrimaryPress: async () => {
+                          const response =
+                            await Api.getInstance().customerCancel({
+                              LoanBriefId: loanCimb?.id,
+                            });
+                          if (response.kind === 'ok') {
+                            if (response.data.meta.errorCode === 200) {
+                              closeModal();
+                              const key = `SHOW_${loanCimb.id}`;
+                              save(key, true);
+                              AlertGlobal.show({
+                                type: 'success',
+                                title: 'Thông báo',
+                                message:
+                                  'Bạn đã hủy khoản vay thành công. Vui lòng chọn khoản vay khác hoặc quay lại trang chủ.',
+                                primaryText: 'Đồng ý',
+                                onPrimaryPress() {
+                                  navigation.pop();
+                                },
+                              });
+                            }
+                          } else {
+                            AlertGlobal.show({
+                              type: 'warning',
+                              title: 'Thông báo',
+                              message: 'Có lỗi xảy ra. Vui lòng thử lại sau!',
+                              primaryText: 'Đóng',
+                            });
+                          }
+                        },
+                      });
                     }}
                   >
                     <MText style={{ color: '#BDBDBD' }}>Huỷ</MText>
@@ -3023,9 +2798,7 @@ export const Home = observer(function Home() {
               onPress={() => confirmTCCIMB()}
             >
               <LinearGradient
-                colors={
-                  checkTCCIMB ? ['#FF8E4F', '#EF592E'] : ['#E0E0E0', '#E0E0E0']
-                }
+                colors={checkTCCIMB ? GRADIENT_ORANGE : ['#E0E0E0', '#E0E0E0']}
                 style={{
                   height: 40,
                   alignItems: 'center',
@@ -3098,3 +2871,73 @@ export const Home = observer(function Home() {
     </View>
   );
 });
+
+const styles = StyleSheet.create({
+  // Khung thẻ đơn vay (nền trắng, viền xám bo góc) - dùng lại ở nhiều loại đơn
+  card: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 8,
+    borderWidth: 0.5,
+    borderColor: '#E0E0E0',
+  },
+  // Nhãn các nút hành động ở thẻ CIMB (Hoàn thiện, Hợp đồng dịch vụ, ...)
+  actionLabelCenter: {
+    fontSize: 12,
+    fontWeight: '300',
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  actionLabel: {
+    fontSize: 12,
+    fontWeight: '300',
+    marginTop: 8,
+  },
+  label12: {
+    fontSize: 12,
+    marginTop: 8,
+  },
+  label12Center: {
+    fontSize: 12,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  // Đường kẻ ngăn cách ngang trong thẻ đơn vay
+  divider: {
+    height: 1,
+    backgroundColor: '#E0E0E0',
+    marginVertical: 16,
+  },
+  dividerThin: {
+    height: 0.5,
+    backgroundColor: '#E0E0E0',
+    marginVertical: 16,
+  },
+  // Nút hành động (icon + nhãn) cách nút trước 20px
+  actionButtonSpaced: {
+    alignItems: 'center',
+    marginLeft: 20,
+  },
+  // Dải thông báo/gợi ý màu cam nhạt ở đáy thẻ CIMB
+  infoBanner: {
+    backgroundColor: '#FBEFE7',
+    marginHorizontal: -16,
+    paddingVertical: 8,
+    marginTop: 16,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    paddingHorizontal: 16,
+  },
+  infoBannerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FBEFE7',
+    marginHorizontal: -16,
+    paddingVertical: 8,
+    marginTop: 16,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    paddingHorizontal: 16,
+  },
+});