react-native-timacare 3.3.57-cccd → 3.3.58-cccd

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/screens/camera/index.tsx

@@ -50,7 +50,7 @@ import { Svg, Circle, Defs, ClipPath, Rect } from 'react-native-svg';
 import Store from './Store';
 import { MText } from '../../components/MText';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import RNFS from 'react-native-fs';
 

package/src/screens/detail-loan/PaymentInfo.tsx

@@ -35,7 +35,7 @@ import MHeader from '../../components/MHeader';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import moment from 'moment';
-import ReactNativeModal from 'react-native-modal';
+import ReactNativeModal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import {
   TourGuideProvider, // Main provider

package/src/screens/detail-loan/ShowQrCode.tsx

@@ -28,7 +28,7 @@ import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { formatMoney } from '../../utils';
 import MHeader from '../../components/MHeader';
-import ReactNativeModal from 'react-native-modal';
+import ReactNativeModal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import moment from 'moment';
 import {

package/src/screens/digital-lending/Step6.tsx

@@ -24,7 +24,7 @@ import {
 import { MText } from '../../components/MText';
 import digitalLendingStore from './store';
 import { ScreenNames } from '../../navigation';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 
 export const Step6 = observer(function Step6() {

package/src/screens/eSign/index.tsx

@@ -31,7 +31,7 @@ import Slack from 'react-native-slack-webhook';
 import homeStore from '../home/Store';
 import appStore from '../../AppStore';
 import Pdf from 'react-native-pdf';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import KeyboardSpacer from '../../components/keyboardspace';
 import Loading from '../../components/Loading';
 import MHeader from '../../components/MHeader';

package/src/screens/home/DigitalTopupItem.tsx

@@ -12,7 +12,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { IconMoney2, IconQuestion, IconTick } from '../../assets/svgs';
 import { formatMoney } from '../../utils';
 import { MText } from '../../components/MText';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import {
   IconStep1,
   IconStep1Disable,

package/src/screens/home/ItemMotoBikeLoan.tsx

@@ -22,7 +22,7 @@ import {
 } from '../../assets/v3';
 import { ScreenNames } from '../../navigation';
 import { CheckBox, CheckBoxActive, Close2Icon, Info } from '../../assets/icons';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { Api } from '../../services/api';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 

package/src/screens/home/index.tsx

@@ -57,7 +57,7 @@ import {
   RESULTS,
 } from 'react-native-permissions';
 import appStore from '../../AppStore';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import Pdf from 'react-native-pdf';
 import { Api } from '../../services/api';
 import { load, save } from '../../utils/storage';

package/src/screens/payment-evidence/ModalGuideline.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { CallRed, GuideLineIcon, LineIcon } from '../../assets/icons';
 import { MText } from '../../components/MText';
 

package/src/screens/toan-trinh-so/OCR.tsx

@@ -26,7 +26,7 @@ import {
   openSettings,
 } from 'react-native-permissions';
 import { Camera as VisionCamera, useCameraDevices } from 'react-native-vision-camera';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import { CloseIcon, IconBack, TakePhotoSvg, TimaSmall } from '../../assets/icons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';

package/src/screens/toan-trinh-so/RegisterCamera.tsx

@@ -24,7 +24,7 @@ import {
   useCameraDevice,
   useCameraFormat,
 } from 'react-native-vision-camera';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
 import { CloseIcon, TakePhotoSvg, TimaSmall } from '../../assets/icons';

package/src/screens/toan-trinh-so/VehicleCamera.tsx

@@ -17,7 +17,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
 import { CloseIcon, IconBack, TakePhotoSvg, TimaSmall } from '../../assets/icons';