react-native-timacare 3.3.55 → 3.3.56-alert

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

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { observable, action, toJS } from 'mobx';
 import { Api } from '../services/api';
-import { Alert } from 'react-native';
+import { AlertGlobal } from '../components/ModalNotification/AlertGlobal';
 import { myLog } from '../utils/log';
 
 export enum Types {
@@ -70,7 +70,12 @@ class SelectorStore {
     } else {
       this.isLoading = false;
       this.isError = false;
-      Alert.alert('Lỗi', response.Messages);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Lỗi',
+        message: response.Messages,
+        primaryText: 'Đóng',
+      });
     }
   }
 }

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  Alert,
   Dimensions,
   Platform,
   StyleSheet,
@@ -16,6 +15,7 @@ import {
 } from 'react-native-vision-camera';
 import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
 import { MText } from '../../components/MText';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { commonStyles } from '../CommonStyles';
@@ -64,51 +64,49 @@ export default function CCCDCameraScreen(props) {
           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'
           );
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để 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 máy ảnh. Vui lòng cấp quyền máy ảnh để 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',
-            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.GRANTED:
           console.log('The permission is granted');
@@ -116,22 +114,20 @@ export default function CCCDCameraScreen(props) {
           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 máy ảnh. Vui lòng cấp quyền máy ảnh để 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 máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                openSettings();
+              }
+            },
+          });
           break;
       }
     });

package/src/screens/camera/index.tsx

@@ -2,7 +2,6 @@
 import React, { useState, Fragment, useEffect, useRef } from 'react';
 import {
   ActivityIndicator,
-  Alert,
   Dimensions,
   Image,
   ImageStyle,
@@ -50,6 +49,7 @@ import {
 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 LinearGradient from 'react-native-linear-gradient';
 import RNFS from 'react-native-fs';
@@ -103,51 +103,49 @@ export const Camera = observer(function Camera(props: any) {
           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'
           );
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để 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 máy ảnh. Vui lòng cấp quyền máy ảnh để 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',
-            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.GRANTED:
           console.log('The permission is granted');
@@ -155,22 +153,20 @@ export const Camera = observer(function Camera(props: any) {
           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 máy ảnh. Vui lòng cấp quyền máy ảnh để 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 máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            // onPrimaryPress: () => {
+            //   if (Platform.OS === "ios") {
+            //     openSettings()
+            //   } else {
+            //     openSettings()
+            //   }
+            // },
+          });
           break;
       }
     });

package/src/screens/cimb-sign/index.tsx

@@ -2,8 +2,9 @@
 import { useNavigation } from '@react-navigation/native';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
-import { Alert, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import WebView from 'react-native-webview';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 import { IconBack } from '../../assets/icons';
 import { MText } from '../../components/MText';
 import { color } from '../../theme';
@@ -25,19 +26,14 @@ export const CIMBSign = observer(function CIMBSign(props: any) {
           ) {
             navigation.goBack();
           } else {
-            Alert.alert(
-              'Cảnh báo',
-              'Bạn có chắc chắn muốn rời khỏi màn hình ký hợp đồng?',
-              [
-                {
-                  text: 'Đồng ý',
-                  onPress: () => navigation.goBack(),
-                },
-                {
-                  text: 'Huỷ',
-                },
-              ]
-            );
+            AlertGlobal.show({
+              type: 'confirm',
+              title: 'Cảnh báo',
+              message: 'Bạn có chắc chắn muốn rời khỏi màn hình ký hợp đồng?',
+              primaryText: 'Đồng ý',
+              onPrimaryPress: () => navigation.goBack(),
+              secondaryText: 'Huỷ',
+            });
           }
         }}
         style={{