react-native-timacare 3.3.55 → 3.3.57-cccd

package/src/components/AppModal.tsx

@@ -0,0 +1,34 @@
+//@ts-nocheck
+import React from 'react';
+import ReactNativeModal from 'react-native-modal';
+
+/**
+ * Backdrop dùng chung cho toàn bộ Modal của app.
+ * Để nền tối vừa phải (không quá tối) => vẫn nhìn thấy được screen phía sau.
+ * react-native-modal mặc định là black @ 0.7 (khá tối), nên ta hạ xuống 0.4.
+ */
+export const MODAL_BACKDROP_COLOR = '#000000';
+export const MODAL_BACKDROP_OPACITY = 0.4;
+
+type RNModalProps = React.ComponentProps<typeof ReactNativeModal>;
+// Mọi prop optional (theo defaultProps của react-native-modal), riêng children giữ nguyên required.
+type AppModalProps = Omit<Partial<RNModalProps>, 'children'> &
+  Pick<RNModalProps, 'children'>;
+
+/**
+ * Wrapper mỏng quanh react-native-modal, áp dụng backdrop chung.
+ * Mọi prop truyền vào sẽ override default (ví dụ backdropOpacity, customBackdrop).
+ */
+export default function AppModal({
+  backdropColor = MODAL_BACKDROP_COLOR,
+  backdropOpacity = MODAL_BACKDROP_OPACITY,
+  ...rest
+}: AppModalProps) {
+  return (
+    <ReactNativeModal
+      backdropColor={backdropColor}
+      backdropOpacity={backdropOpacity}
+      {...rest}
+    />
+  );
+}

package/src/components/{ItemTimaOneV3.tsx → ItemTimaOne.tsx}

@@ -71,7 +71,7 @@ const UpdateButton = ({ label, onPress }: any) => (
   </TouchableOpacity>
 );
 
-export default function ItemTimaOneV3({ item, navigation }: IProps) {
+export default function ItemTimaOne({ item, navigation }: IProps) {
   const [showModal, setShowModal] = React.useState(false);
 
   const GUIDE_STEPS =

package/src/components/ModalNotification/AlertGlobal.tsx

@@ -0,0 +1,100 @@
+//@ts-nocheck
+import React, { useEffect, useRef, useState } from 'react';
+import ModalNotification, { ModalNotificationProps } from './index';
+
+export type AlertGlobalOptions = Omit<
+  ModalNotificationProps,
+  'open' | 'onModalHide'
+> & {
+  /** false => bấm nút không tự đóng modal (mặc định true) */
+  autoDismiss?: boolean;
+  /** false => không cho đóng bằng backdrop / nút back Android (mặc định true) */
+  dismissable?: boolean;
+};
+
+interface AlertController {
+  show: (options: AlertGlobalOptions) => void;
+  hide: () => void;
+}
+
+let alertController: AlertController | null = null;
+
+/**
+ * Alert dùng chung toàn app, gọi được từ mọi nơi (kể cả ngoài component):
+ *
+ *   AlertGlobal.show({
+ *     type: 'confirm',
+ *     title: 'Xác nhận tất toán',
+ *     message: 'Bạn có chắc muốn gửi yêu cầu tất toán hợp đồng không?',
+ *     secondaryText: 'Quay lại',
+ *     primaryText: 'Gửi yêu cầu',
+ *     onPrimaryPress: () => submit(),
+ *   });
+ *
+ * Mặc định bấm nút / backdrop sẽ tự đóng modal rồi mới chạy callback
+ * (callback chạy sau khi animation đóng xong => có thể mở tiếp modal khác).
+ * Yêu cầu <AlertGlobalHost /> đã được mount trong App.tsx.
+ */
+export const AlertGlobal = {
+  show(options: AlertGlobalOptions) {
+    alertController?.show(options);
+  },
+  hide() {
+    alertController?.hide();
+  },
+};
+
+/** Mount 1 lần duy nhất ở App.tsx */
+export function AlertGlobalHost() {
+  const [visible, setVisible] = useState(false);
+  const [options, setOptions] = useState<AlertGlobalOptions>({ title: '' });
+  // Callback chờ modal đóng xong animation mới được gọi
+  const pendingCallback = useRef<(() => void) | undefined>(undefined);
+
+  useEffect(() => {
+    alertController = {
+      show: (opts) => {
+        pendingCallback.current = undefined;
+        setOptions(opts);
+        setVisible(true);
+      },
+      hide: () => setVisible(false),
+    };
+    return () => {
+      alertController = null;
+    };
+  }, []);
+
+  const {
+    autoDismiss = true,
+    dismissable = true,
+    onClose,
+    onPrimaryPress,
+    onSecondaryPress,
+    ...rest
+  } = options;
+
+  const dismissThen = (callback?: () => void) => {
+    if (!autoDismiss) {
+      callback?.();
+      return;
+    }
+    pendingCallback.current = callback;
+    setVisible(false);
+  };
+
+  return (
+    <ModalNotification
+      {...rest}
+      open={visible}
+      onClose={dismissable ? () => dismissThen(onClose) : undefined}
+      onPrimaryPress={() => dismissThen(onPrimaryPress)}
+      onSecondaryPress={() => dismissThen(onSecondaryPress)}
+      onModalHide={() => {
+        const callback = pendingCallback.current;
+        pendingCallback.current = undefined;
+        callback?.();
+      }}
+    />
+  );
+}

package/src/components/ModalNotification/index.tsx

@@ -0,0 +1,224 @@
+//@ts-nocheck
+import React, { ReactNode } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { MText } from '../MText';
+import AppModal from '../AppModal';
+import {
+  CloseIcon,
+  IconModalConfirm,
+  IconModalNotice,
+  IconModalSuccess,
+  IconModalWarning,
+} from '../../assets/icons';
+
+export type ModalNotificationType =
+  | 'confirm'
+  | 'success'
+  | 'warning'
+  | 'notice';
+
+const ICON_BY_TYPE: Record<ModalNotificationType, React.FC<any>> = {
+  confirm: IconModalConfirm,
+  success: IconModalSuccess,
+  warning: IconModalWarning,
+  notice: IconModalNotice,
+};
+
+/** Dải gradient mờ dần phía sau icon (theo design từng type) */
+const ICON_GRADIENT_BY_TYPE: Partial<Record<ModalNotificationType, string[]>> =
+  {
+    success: ['rgba(89, 205, 82, 1)', 'rgba(89, 205, 82, 0)'],
+    warning: ['rgba(255, 76, 76, 1)', 'rgba(255, 36, 36, 0)'],
+    notice: ['rgba(255, 118, 65, 1)', 'rgba(255, 180, 104, 0)'],
+    confirm: ['rgba(255, 180, 104, 1)', 'rgba(255, 149, 82, 0)'],
+  };
+
+export interface ModalNotificationProps {
+  open: boolean;
+  /** Quyết định icon mặc định hiển thị phía trên title */
+  type?: ModalNotificationType;
+  title: string;
+  message?: string | ReactNode;
+  /** Truyền vào để thay icon mặc định theo type */
+  icon?: ReactNode;
+  /** Hiện nút X góc phải (vd: modal "Gửi yêu cầu thành công") */
+  showClose?: boolean;
+  /** Gọi khi bấm X hoặc backdrop */
+  onClose?: () => void;
+  /** Nút chính (viền cam). Không truyền secondaryText => nút full-width */
+  primaryText?: string;
+  onPrimaryPress?: () => void;
+  /** Icon đặt trước text nút chính (vd: icon gọi điện "Liên hệ Tima") */
+  primaryIcon?: ReactNode;
+  /** Nút phụ (viền xám) bên trái nút chính */
+  secondaryText?: string;
+  onSecondaryPress?: () => void;
+  /** Gọi sau khi modal đã đóng xong animation (dùng cho AlertGlobal) */
+  onModalHide?: () => void;
+}
+
+/**
+ * Modal thông báo dùng chung cho toàn app: icon + title + message + 1-2 nút.
+ *
+ * - Xác nhận:   type="confirm"  (dấu ? cam)
+ * - Thành công: type="success"  (tick xanh)
+ * - Cảnh báo:   type="warning"  (tam giác đỏ)
+ * - Thông báo:  type="notice"   (đám mây cam)
+ */
+export default function ModalNotification({
+  open,
+  type = 'notice',
+  title,
+  message,
+  icon,
+  showClose = false,
+  onClose,
+  primaryText,
+  onPrimaryPress,
+  primaryIcon,
+  secondaryText,
+  onSecondaryPress,
+  onModalHide,
+}: ModalNotificationProps) {
+  const IconByType = ICON_BY_TYPE[type];
+  const iconGradient = ICON_GRADIENT_BY_TYPE[type];
+
+  return (
+    <AppModal
+      isVisible={open}
+      backdropTransitionOutTiming={0}
+      animationIn="zoomIn"
+      animationOut="zoomOut"
+      onBackdropPress={onClose}
+      onBackButtonPress={onClose}
+      onModalHide={onModalHide}
+    >
+      <View style={styles.container}>
+        {!!iconGradient && (
+          <LinearGradient
+            colors={iconGradient}
+            start={{ x: 0.5, y: 0 }}
+            end={{ x: 0.5, y: 1 }}
+            style={styles.iconBackdrop}
+          />
+        )}
+
+        {showClose && (
+          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+            <CloseIcon />
+          </TouchableOpacity>
+        )}
+
+        {icon ?? <IconByType width={72} height={72} />}
+
+        <MText style={styles.title}>{title}</MText>
+
+        {!!message && <MText style={styles.message}>{message}</MText>}
+
+        <View style={styles.buttonRow}>
+          {!!secondaryText && (
+            <TouchableOpacity
+              style={[styles.button, styles.secondaryButton]}
+              onPress={onSecondaryPress}
+            >
+              <MText
+                style={{
+                  color: 'rgba(153, 153, 153, 1)',
+                }}
+              >
+                {secondaryText}
+              </MText>
+            </TouchableOpacity>
+          )}
+
+          {!!primaryText && (
+            <TouchableOpacity
+              style={[styles.button, styles.primaryButton]}
+              onPress={onPrimaryPress}
+            >
+              {primaryIcon}
+              <MText
+                style={{
+                  color: '#EF592E',
+                }}
+              >
+                {primaryText}
+              </MText>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </AppModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+    alignItems: 'center',
+    // Để dải gradient sau icon không tràn ra ngoài góc bo
+    overflow: 'hidden',
+  },
+  iconBackdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 112,
+    // Design chỉ là dải màu nhạt, không dùng full màu gốc
+    opacity: 0.15,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 12,
+    color: '#333333',
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  message: {
+    textAlign: 'center',
+    marginTop: 8,
+    lineHeight: 20,
+    paddingHorizontal: 24,
+    color: '#828282',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    alignSelf: 'stretch',
+    marginTop: 24,
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    flexDirection: 'row',
+    height: 40,
+    borderRadius: 24,
+    borderWidth: 0.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  secondaryButton: {
+    borderColor: 'rgba(153, 153, 153, 0.5)',
+  },
+  primaryButton: {
+    borderColor: '#EF592E',
+  },
+});

package/src/components/ModalOptionLoan.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
-  Alert,
   SafeAreaView,
   TextStyle,
   TouchableOpacity,
@@ -10,6 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import Modal from 'react-native-modal';
+import { AlertGlobal } from './ModalNotification/AlertGlobal';
 import { MText } from './MText';
 import MButton from './MButton';
 import LinearGradient from 'react-native-linear-gradient';
@@ -57,7 +57,12 @@ export default function ModalOptionLoan({
 
   const onSubmit = async () => {
     if (!option) {
-      Alert.alert('Thông báo', 'Vui lòng chọn gói vay để tiếp tục');
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Vui lòng chọn gói vay để tiếp tục',
+        primaryText: 'Đóng',
+      });
       return;
     }
     try {
@@ -71,11 +76,14 @@ export default function ModalOptionLoan({
       if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
         if (callback) callback();
       } 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) {
       console.log(error);

package/src/components/ModalOptionLoanDigital.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
-  Alert,
   SafeAreaView,
   TextStyle,
   TouchableOpacity,
@@ -10,6 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import Modal from 'react-native-modal';
+import { AlertGlobal } from './ModalNotification/AlertGlobal';
 import { MText } from './MText';
 import MButton from './MButton';
 import LinearGradient from 'react-native-linear-gradient';
@@ -62,7 +62,12 @@ export default function ModalOptionLoanDigital({
 
   const onSubmit = async () => {
     if (!option) {
-      Alert.alert('Thông báo', 'Vui lòng chọn gói vay để tiếp tục');
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Vui lòng chọn gói vay để tiếp tục',
+        primaryText: 'Đóng',
+      });
       return;
     }
     try {
@@ -76,11 +81,14 @@ export default function ModalOptionLoanDigital({
       if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
         if (callback) callback();
       } 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) {
       console.log(error);

package/src/navigation/primary-navigator.tsx

@@ -83,6 +83,8 @@ import LoanBuyCar from '../screens/v3/LoanBuyCar';
 import InfoLoanMotobike from '../screens/motobike/InfoLoanMotobike';
 import ReviewLoanMotobike from '../screens/motobike/ReviewLoanMotobike';
 import PolicyF88 from '../screens/motobike/PolicyF88';
+import OcrStart from '../screens/NFC/OcrStart';
+import ScanMRZ from '../screens/NFC/ScanMRZ';
 
 export const ScreenNames = {
   Main: 'HomeTimaCare',
@@ -157,6 +159,9 @@ export const ScreenNames = {
   InfoLoanMotobike: 'InfoLoanMotobike',
   ReviewLoanMotobike: 'ReviewLoanMotobike',
   PolicyF88: 'PolicyF88',
+  OcrStart: 'OcrStart',
+  ScanMRZ: 'ScanMRZ',
+  CameraVehicleRegistration: 'CameraVehicleRegistration',
 };
 
 const Stack = createNativeStackNavigator();
@@ -332,6 +337,8 @@ export function PrimaryNavigator(props) {
         component={ReviewLoanMotobike}
       />
       <Stack.Screen name={ScreenNames.PolicyF88} component={PolicyF88} />
+      <Stack.Screen name={ScreenNames.OcrStart} component={OcrStart} />
+      <Stack.Screen name={ScreenNames.ScanMRZ} component={ScanMRZ} />
     </Stack.Navigator>
   );
 }

package/src/screens/NFC/OcrStart.tsx

@@ -0,0 +1,171 @@
+//@ts-nocheck
+import React from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import { IconBack, IconUserSecurity, TimaSmall } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import LinearGradient from 'react-native-linear-gradient';
+import { ScreenNames } from '../../navigation';
+
+export default function OcrStart(props: any) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
+        <TouchableOpacity
+          onPress={() => navigation.goBack()}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+        >
+          <IconBack />
+        </TouchableOpacity>
+      </View>
+      <ScrollView style={{ flex: 1 }}>
+        <View style={styles.column_top}>
+          <IconUserSecurity />
+          <MText style={styles.title}>Xác thực giấy tờ để tiếp tục</MText>
+        </View>
+        <View style={styles.content}>
+          <MText style={styles.label}>
+            Cách 1: NFC (Áp dụng cho CCCD gắn chip)
+          </MText>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Đưa phần chip của CCCD đến vị trí đọc NFC trên mặt lưng điện
+              thoại.
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Giữ nguyên để hệ thống đọc giữ liệu trong 5-10 giây
+            </MText>
+          </View>
+          <Image
+            source={require('../../assets/tts/Frame1000011953.png')}
+            style={{
+              width: '100%',
+              height: 82,
+              resizeMode: 'contain',
+              marginTop: 16,
+            }}
+          />
+          <MText style={[styles.label, { marginTop: 16 }]}>
+            Cách 2: Chụp 2 mặt
+          </MText>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Nên đặt CCCD/ CC lên mặt phẳng để chụp
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Đặt CCCD/ CC nằm gọn trong khung hình (Không quá nhỏ hay quá to
+              làm mất chi tiết)
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Chọn nơi ánh sáng tốt, tránh lóa/ chói hình chụp
+            </MText>
+          </View>
+          <Image
+            source={require('../../assets/tts/Frame1000011947.png')}
+            style={{
+              width: '100%',
+              height: 82,
+              resizeMode: 'contain',
+              marginTop: 16,
+            }}
+          />
+        </View>
+      </ScrollView>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate(ScreenNames.ScanMRZ, props);
+        }}
+        style={{
+          marginHorizontal: 16,
+          marginBottom: 24,
+        }}
+      >
+        <LinearGradient
+          start={{ x: 1, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          style={{
+            height: 40,
+            marginVertical: 16,
+            borderRadius: 30,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          colors={['#FF7A00', '#EF4123']}
+        >
+          <MText
+            style={{
+              fontSize: 16,
+              color: 'white',
+            }}
+          >
+            Xác thực ngay
+          </MText>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    backgroundColor: '#FFF3E9',
+  },
+  title: {
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: 16,
+  },
+  column_top: {
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: 16,
+    backgroundColor: '#FFF3E9',
+    paddingBottom: 16,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  label: {
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontWeight: '600',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  description: {
+    fontSize: 12,
+    flex: 1,
+  },
+});