react-native-timacare 3.3.56-alert → 3.3.58-cccd

package/src/components/AlertLoan.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import React from 'react';
 import { Image, SafeAreaView, TouchableOpacity, View } from 'react-native';
-import Modal from 'react-native-modal';
+import Modal from './AppModal';
 import { Close2Icon, CloseIcon, IconNavClose } from '../assets/icons';
 import { MText } from './MText';
 interface IModalOptionLoan {

package/src/components/AppModal.tsx

@@ -1,6 +1,8 @@
 //@ts-nocheck
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import ReactNativeModal from 'react-native-modal';
+import { acquireModalId, popModal, pushModal } from './modalStack';
+import { AlertGlobalOutlet } from './ModalNotification/AlertGlobal';
 
 /**
  * Backdrop dùng chung cho toàn bộ Modal của app.
@@ -18,17 +20,53 @@ type AppModalProps = Omit<Partial<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).
+ *
+ * Ngoài ra mỗi AppModal:
+ * - đăng ký vào modalStack trong lúc hiển thị (để AlertGlobal biết modal nào trên cùng)
+ * - render <AlertGlobalOutlet/> bên trong, để alert global hiển thị đè lên được
+ *   modal đang mở trên iOS mà không phải present native modal thứ 2 (gây treo app).
  */
 export default function AppModal({
   backdropColor = MODAL_BACKDROP_COLOR,
   backdropOpacity = MODAL_BACKDROP_OPACITY,
+  isVisible,
+  coverScreen,
+  onModalHide,
+  children,
   ...rest
 }: AppModalProps) {
+  const modalIdRef = useRef(0);
+  if (modalIdRef.current === 0) {
+    modalIdRef.current = acquireModalId();
+  }
+  const modalId = modalIdRef.current;
+  // coverScreen=false => render bằng View thường, không chiếm native layer
+  const isNativeModal = coverScreen !== false;
+
+  // Modal "chiếm" native layer từ lúc mở tới khi chạy xong animation đóng
+  // (nhả ở onModalHide bên dưới, hoặc khi unmount)
+  useEffect(() => {
+    if (isVisible && isNativeModal) {
+      pushModal(modalId);
+    }
+  }, [isVisible, isNativeModal, modalId]);
+
+  useEffect(() => () => popModal(modalId), [modalId]);
+
   return (
     <ReactNativeModal
       backdropColor={backdropColor}
       backdropOpacity={backdropOpacity}
+      isVisible={isVisible}
+      coverScreen={coverScreen}
+      onModalHide={() => {
+        popModal(modalId);
+        onModalHide?.();
+      }}
       {...rest}
-    />
+    >
+      {children}
+      <AlertGlobalOutlet modalId={modalId} />
+    </ReactNativeModal>
   );
 }

package/src/components/ItemTimaOne.tsx

@@ -36,7 +36,7 @@ import {
 } from '../assets/v3';
 import { Close2Icon, Info } from '../assets/icons';
 import { ScreenNames } from '../navigation';
-import Modal from 'react-native-modal';
+import Modal from './AppModal';
 import { commonStyles } from '../screens/CommonStyles';
 
 interface IProps {

package/src/components/ModalNotification/AlertGlobal.tsx

@@ -1,10 +1,12 @@
 //@ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { addModalStackListener, getTopModalId } from '../modalStack';
 import ModalNotification, { ModalNotificationProps } from './index';
 
 export type AlertGlobalOptions = Omit<
   ModalNotificationProps,
-  'open' | 'onModalHide'
+  'open' | 'onModalHide' | 'coverScreen'
 > & {
   /** false => bấm nút không tự đóng modal (mặc định true) */
   autoDismiss?: boolean;
@@ -12,15 +14,19 @@ export type AlertGlobalOptions = Omit<
   dismissable?: boolean;
 };
 
-interface AlertController {
-  show: (options: AlertGlobalOptions) => void;
-  hide: () => void;
-}
+// ===== State giữ ở module-level để mọi outlet cùng đọc chung =====
+let alertVisible = false;
+let alertOptions: AlertGlobalOptions = { title: '' };
+// Callback chờ modal đóng xong animation mới được gọi
+let pendingCallback: (() => void) | undefined;
+const listeners = new Set<() => void>();
 
-let alertController: AlertController | null = null;
+function notify() {
+  listeners.forEach((listener) => listener());
+}
 
 /**
- * Alert dùng chung toàn app, gọi được từ mọi nơi (kể cả ngoài component):
+ * Alert dùng chung toàn SDK, gọi được từ mọi nơi (kể cả ngoài component):
  *
  *   AlertGlobal.show({
  *     type: 'confirm',
@@ -33,38 +39,73 @@ let alertController: AlertController | null = null;
  *
  * 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.
+ * Yêu cầu <AlertGlobalHost /> đã được mount ở root (RNTimacare).
  */
 export const AlertGlobal = {
   show(options: AlertGlobalOptions) {
-    alertController?.show(options);
+    pendingCallback = undefined;
+    alertOptions = options;
+    alertVisible = true;
+    notify();
   },
   hide() {
-    alertController?.hide();
+    alertVisible = false;
+    notify();
   },
 };
 
-/** 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);
-
+/** Re-render khi alert state hoặc modal stack thay đổi */
+function useAlertGlobalState() {
+  const [, setTick] = useState(0);
   useEffect(() => {
-    alertController = {
-      show: (opts) => {
-        pendingCallback.current = undefined;
-        setOptions(opts);
-        setVisible(true);
-      },
-      hide: () => setVisible(false),
-    };
+    const rerender = () => setTick((tick) => tick + 1);
+    listeners.add(rerender);
+    const unsubscribeStack = addModalStackListener(rerender);
     return () => {
-      alertController = null;
+      listeners.delete(rerender);
+      unsubscribeStack();
     };
   }, []);
+}
+
+interface OutletProps {
+  /** id của AppModal chứa outlet này; không truyền = outlet gốc ở root */
+  modalId?: number | null;
+}
+
+/**
+ * Điểm render thực tế của alert global. Có mặt ở 2 nơi:
+ * - AlertGlobalHost (root RNTimacare) — dùng khi không có modal nào đang mở
+ * - bên trong mỗi AppModal — dùng khi modal đó đang mở trên cùng (chỉ iOS)
+ *
+ * iOS không present được 2 native modal chồng nhau (treo app), nên khi có modal
+ * khác đang mở, alert được render dạng View thường (coverScreen=false) bên trong
+ * modal trên cùng => luôn nằm trên nội dung modal và bấm được bình thường.
+ * Android cho phép các Dialog chồng nhau nên luôn dùng native modal ở outlet gốc.
+ */
+export function AlertGlobalOutlet({ modalId = null }: OutletProps) {
+  useAlertGlobalState();
 
+  if (Platform.OS !== 'ios') {
+    return modalId === null ? <AlertRenderer coverScreen /> : null;
+  }
+
+  if (getTopModalId() !== modalId) {
+    return null;
+  }
+  if (modalId === null) {
+    return <AlertRenderer coverScreen={false} />;
+  }
+  // Nội dung modal của react-native-modal có margin mặc định (5% chiều ngang),
+  // nới ngược lại để backdrop của alert phủ kín màn hình
+  return (
+    <View style={styles.insideModalWrapper} pointerEvents="box-none">
+      <AlertRenderer coverScreen={false} />
+    </View>
+  );
+}
+
+function AlertRenderer({ coverScreen }: { coverScreen: boolean }) {
   const {
     autoDismiss = true,
     dismissable = true,
@@ -72,29 +113,47 @@ export function AlertGlobalHost() {
     onPrimaryPress,
     onSecondaryPress,
     ...rest
-  } = options;
+  } = alertOptions;
 
   const dismissThen = (callback?: () => void) => {
     if (!autoDismiss) {
       callback?.();
       return;
     }
-    pendingCallback.current = callback;
-    setVisible(false);
+    pendingCallback = callback;
+    AlertGlobal.hide();
   };
 
   return (
     <ModalNotification
       {...rest}
-      open={visible}
+      open={alertVisible}
+      coverScreen={coverScreen}
       onClose={dismissable ? () => dismissThen(onClose) : undefined}
       onPrimaryPress={() => dismissThen(onPrimaryPress)}
       onSecondaryPress={() => dismissThen(onSecondaryPress)}
       onModalHide={() => {
-        const callback = pendingCallback.current;
-        pendingCallback.current = undefined;
+        const callback = pendingCallback;
+        pendingCallback = undefined;
         callback?.();
       }}
     />
   );
 }
+
+/** Mount 1 lần duy nhất ở root (RNTimacare) */
+export function AlertGlobalHost() {
+  return <AlertGlobalOutlet />;
+}
+
+const DEFAULT_MODAL_MARGIN = Dimensions.get('window').width * 0.05;
+
+const styles = StyleSheet.create({
+  insideModalWrapper: {
+    position: 'absolute',
+    top: -DEFAULT_MODAL_MARGIN,
+    left: -DEFAULT_MODAL_MARGIN,
+    right: -DEFAULT_MODAL_MARGIN,
+    bottom: -DEFAULT_MODAL_MARGIN,
+  },
+});

package/src/components/ModalNotification/index.tsx

@@ -57,6 +57,11 @@ export interface ModalNotificationProps {
   onSecondaryPress?: () => void;
   /** Gọi sau khi modal đã đóng xong animation (dùng cho AlertGlobal) */
   onModalHide?: () => void;
+  /**
+   * false => render bằng View thường thay vì native Modal
+   * (dùng cho AlertGlobal trên iOS để tránh xung đột khi đã có modal khác mở)
+   */
+  coverScreen?: boolean;
 }
 
 /**
@@ -81,6 +86,7 @@ export default function ModalNotification({
   secondaryText,
   onSecondaryPress,
   onModalHide,
+  coverScreen = true,
 }: ModalNotificationProps) {
   const IconByType = ICON_BY_TYPE[type];
   const iconGradient = ICON_GRADIENT_BY_TYPE[type];
@@ -94,6 +100,7 @@ export default function ModalNotification({
       onBackdropPress={onClose}
       onBackButtonPress={onClose}
       onModalHide={onModalHide}
+      coverScreen={coverScreen}
     >
       <View style={styles.container}>
         {!!iconGradient && (

package/src/components/ModalOptionLoan.tsx

@@ -8,7 +8,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import Modal from 'react-native-modal';
+import Modal from './AppModal';
 import { AlertGlobal } from './ModalNotification/AlertGlobal';
 import { MText } from './MText';
 import MButton from './MButton';

package/src/components/ModalOptionLoanDigital.tsx

@@ -8,7 +8,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import Modal from 'react-native-modal';
+import Modal from './AppModal';
 import { AlertGlobal } from './ModalNotification/AlertGlobal';
 import { MText } from './MText';
 import MButton from './MButton';

package/src/components/modalStack.ts

@@ -0,0 +1,47 @@
+//@ts-nocheck
+/**
+ * Theo dõi các native modal (dựng qua AppModal) đang hiển thị trên toàn SDK.
+ * AlertGlobal dựa vào đây để quyết định render alert ở đâu:
+ * bên trong modal đang mở trên cùng (iOS) hay ở root khi không có modal nào.
+ */
+let nextModalId = 1;
+let stack: number[] = [];
+const listeners = new Set<() => void>();
+
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+
+/** Cấp id duy nhất cho mỗi instance AppModal */
+export function acquireModalId(): number {
+  return nextModalId++;
+}
+
+/** Modal bắt đầu hiển thị (chiếm native layer) */
+export function pushModal(id: number) {
+  if (!stack.includes(id)) {
+    stack = [...stack, id];
+    notify();
+  }
+}
+
+/** Modal đã đóng xong animation hoặc unmount */
+export function popModal(id: number) {
+  if (stack.includes(id)) {
+    stack = stack.filter((modalId) => modalId !== id);
+    notify();
+  }
+}
+
+/** id của modal đang hiển thị trên cùng, null nếu không có modal nào mở */
+export function getTopModalId(): number | null {
+  return stack.length > 0 ? stack[stack.length - 1] : null;
+}
+
+/** Lắng nghe thay đổi stack. Trả về hàm unsubscribe. */
+export function addModalStackListener(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}

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,
+  },
+});