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

package/src/screens/NFC/ScanMRZ.tsx

@@ -0,0 +1,563 @@
+//@ts-nocheck
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Image,
+  Linking,
+  NativeModules,
+  PermissionsAndroid,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  MrzScannerView,
+  type MrzError,
+  type MrzResult,
+  type MrzScannerHandle,
+} from 'react-native-mrz-scanner';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
+import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
+import ImagePicker from 'react-native-image-crop-picker';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { IconBack, TakePhotoSvg } from '../../assets/icons';
+import { IconUpload } from '../../assets/svgs';
+import { MText } from '../../components/MText';
+
+const { NFCReader } = NativeModules;
+
+const ORANGE = '#F05123';
+// Tỉ lệ thẻ CCCD/CMND theo chuẩn ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
+
+// iPhone 7 trở lên (iOS 13+) đều có NFC và iOS không cho tắt NFC nên iOS
+// mặc định là hỗ trợ + đang bật. Android hỏi native module; máy không có
+// phần cứng NFC (hoặc app chủ chưa implement getNfcStatus) trả về false.
+const getNfcStatus = async () => {
+  if (Platform.OS === 'ios') return { supported: true, enabled: true };
+  try {
+    const status = await NFCReader?.getNfcStatus?.();
+    return { supported: !!status?.supported, enabled: !!status?.enabled };
+  } catch (e) {
+    return { supported: false, enabled: false };
+  }
+};
+
+const promptEnableNfc = () => {
+  AlertGlobal.show({
+    type: 'warning',
+    title: 'NFC đang tắt',
+    message:
+      'Thiết bị của bạn hỗ trợ NFC nhưng đang tắt. Vui lòng bật NFC để đọc thông tin thẻ CCCD.',
+    primaryText: 'Mở cài đặt',
+    secondaryText: 'Để sau',
+    onPrimaryPress: () => {
+      Linking.sendIntent('android.settings.NFC_SETTINGS').catch(() => {});
+    },
+  });
+};
+
+const getImageSize = (uri) =>
+  new Promise((resolve, reject) => {
+    Image.getSize(uri, (width, height) => resolve({ width, height }), reject);
+  });
+
+/**
+ * Tính vùng crop (pixel trên ảnh gốc) tương ứng với phần preview nhìn thấy
+ * trong khung. VisionCamera fill khung theo kiểu "cover": ảnh được scale để
+ * phủ kín khung rồi cắt phần thừa, nên vùng nhìn thấy là hình chữ nhật đồng
+ * dạng với khung và nằm chính giữa ảnh.
+ */
+export const computeCropRegion = (photoW, photoH, frameW, frameH) => {
+  // Ảnh lưu ngang nhưng khung dọc (hoặc ngược lại) -> tính trên hệ trục đã xoay 90°
+  const rotated = photoW > photoH !== frameW > frameH;
+  const w = rotated ? photoH : photoW;
+  const h = rotated ? photoW : photoH;
+
+  const scale = Math.max(frameW / w, frameH / h);
+  const cropW = Math.min(w, Math.round(frameW / scale));
+  const cropH = Math.min(h, Math.round(frameH / scale));
+  const cropX = Math.max(0, Math.round((w - cropW) / 2));
+  const cropY = Math.max(0, Math.round((h - cropH) / 2));
+
+  // Vùng crop luôn nằm chính giữa nên khi ảnh xoay 90° chỉ cần đảo trục
+  return rotated
+    ? { originX: cropY, originY: cropX, width: cropH, height: cropW }
+    : { originX: cropX, originY: cropY, width: cropW, height: cropH };
+};
+
+const ScanMRZ = (props: any) => {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const scannerRef = useRef<MrzScannerHandle>(null);
+  const cameraRef = useRef(null);
+  const frameLayout = useRef({ width: 0, height: 0 });
+  const [mode, setMode] = useState(props.route?.params?.initialMode ?? null);
+  const [autoCapture, setAutoCapture] = useState(true);
+  const [hasPermission, setHasPermission] = useState(Platform.OS === 'ios');
+  const [cameraReady, setCameraReady] = useState(false);
+  const [taking, setTaking] = useState(false);
+  const [captured, setCaptured] = useState(null);
+
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
+
+  const front = props.route?.params?.front !== false;
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
+        title: 'Quyền camera',
+        message:
+          'Ứng dụng cần camera để quét chuỗi ký tự trên mặt sau thẻ CCCD.',
+        buttonPositive: 'Đồng ý',
+        buttonNegative: 'Từ chối',
+      }).then((status) =>
+        setHasPermission(status === PermissionsAndroid.RESULTS.GRANTED)
+      );
+    }
+  }, []);
+
+  // Chưa chỉ định initialMode: thiết bị hỗ trợ NFC thì ưu tiên tab Đọc NFC,
+  // không hỗ trợ thì vào thẳng tab Chụp CCCD. Có NFC nhưng đang tắt thì vẫn
+  // vào tab NFC kèm nhắc bật NFC trong cài đặt.
+  useEffect(() => {
+    if (props.route?.params?.initialMode) return;
+    getNfcStatus().then(({ supported, enabled }) => {
+      setMode(supported ? 'nfc' : 'photo');
+      if (supported && !enabled) {
+        promptEnableNfc();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Bấm tab Đọc NFC: check lại trạng thái vì người dùng có thể vừa tắt/bật NFC
+  const switchToNfc = async () => {
+    setMode('nfc');
+    const { supported, enabled } = await getNfcStatus();
+    if (supported && !enabled) {
+      promptEnableNfc();
+    }
+  };
+
+  // Đổi chế độ: gỡ camera cũ trước, chờ Android nhả camera rồi mới gắn camera mới
+  useEffect(() => {
+    setCameraReady(false);
+    const timeout = setTimeout(() => setCameraReady(true), 500);
+    return () => clearTimeout(timeout);
+  }, [mode]);
+
+  const handleDetected = useCallback((result: MrzResult) => {
+    Alert.alert(
+      'Đã đọc MRZ',
+      [
+        `Họ tên: ${result.fullName}`,
+        `Số định danh: ${result.idNumber ?? result.documentNumber}`,
+        `Ngày sinh: ${result.dateOfBirth}`,
+        `Hết hạn: ${result.dateOfExpiry}`,
+        `Hợp lệ: ${result.valid ? 'Có' : 'Không'}`,
+      ].join('\n'),
+      [{ text: 'Quét lại', onPress: () => scannerRef.current?.resume() }]
+    );
+  }, []);
+
+  const handleError = useCallback((error: MrzError) => {
+    AlertGlobal.show({
+      type: 'warning',
+      title: 'Thông báo',
+      message: error?.message,
+    });
+  }, []);
+
+  const cropToFrame = async (uri) => {
+    const { width: frameW, height: frameH } = frameLayout.current;
+    if (!frameW || !frameH) return uri;
+    const { width: photoW, height: photoH } = await getImageSize(uri);
+    const crop = computeCropRegion(photoW, photoH, frameW, frameH);
+    console.log('CCCD crop region', { photoW, photoH, frameW, frameH, crop });
+    const result = await RNImageManipulator.manipulate(uri, [{ crop }], {
+      compress: 0.9,
+      format: 'jpeg',
+    });
+    return result.uri;
+  };
+
+  const takePicture = async () => {
+    if (cameraRef.current == null || taking) return;
+    setTaking(true);
+    try {
+      const photo = await cameraRef.current.takePhoto({
+        qualityPrioritization: 'quality',
+      });
+      const uri = 'file://' + photo.path;
+      const cropped = await cropToFrame(uri);
+      setCaptured(cropped);
+    } catch (err) {
+      console.error(err);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Không chụp được ảnh. Vui lòng thử lại.',
+      });
+    } finally {
+      setTaking(false);
+    }
+  };
+
+  // Ảnh từ thư viện không đi qua preview nên không có toạ độ khung để crop
+  const pickImageFromGallery = async () => {
+    if (Platform.OS === 'android') {
+      const result = await launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets?.[0]?.uri) {
+        setCaptured(result.assets[0].uri);
+      }
+    } else {
+      ImagePicker.openPicker({}).then((image) => {
+        if (image?.path) {
+          setCaptured('file://' + image.path);
+        }
+      });
+    }
+  };
+
+  const usePhoto = () => {
+    const callback =
+      props.route?.params?.onCaptured ?? props.route?.params?.callback;
+    if (callback) {
+      navigation.goBack();
+      callback(captured);
+    } else {
+      AlertGlobal.show({
+        type: 'success',
+        title: 'Đã chụp ảnh',
+        message: captured,
+      });
+    }
+  };
+
+  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 style={styles.tabs}>
+          <TouchableOpacity
+            style={[
+              styles.tab,
+              mode === 'photo' ? styles.tabActive : styles.tabInactive,
+            ]}
+            onPress={() => setMode('photo')}
+          >
+            <MText
+              style={
+                mode === 'photo' ? styles.tabTextActive : styles.tabTextInactive
+              }
+            >
+              Chụp CCCD
+            </MText>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.tab,
+              mode === 'nfc' ? styles.tabActive : styles.tabInactive,
+            ]}
+            onPress={switchToNfc}
+          >
+            <MText
+              style={
+                mode === 'nfc' ? styles.tabTextActive : styles.tabTextInactive
+              }
+            >
+              Đọc NFC
+            </MText>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {mode === 'nfc' ? (
+        <>
+          <MText style={styles.instruction}>
+            Dùng camera để quét chuỗi ký tự mặt sau thẻ{'\n'}CCCD gắn chíp ở
+            phía dưới
+          </MText>
+          {/* Khung camera + 4 góc cam */}
+          <View style={styles.cameraWrap}>
+            {hasPermission && cameraReady && isFocused && (
+              <MrzScannerView
+                ref={scannerRef}
+                style={StyleSheet.absoluteFill}
+                autoCapture={autoCapture}
+                onMrzDetected={handleDetected}
+                onError={handleError}
+              />
+            )}
+            <View style={[styles.corner, styles.cornerTL]} />
+            <View style={[styles.corner, styles.cornerTR]} />
+            <View style={[styles.corner, styles.cornerBL]} />
+            <View style={[styles.corner, styles.cornerBR]} />
+          </View>
+          {/* Checkbox chụp tự động */}
+          <TouchableOpacity
+            style={styles.checkboxRow}
+            onPress={() => setAutoCapture((v) => !v)}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.checkboxLabel}>Chụp tự động</Text>
+            <View
+              style={[styles.checkbox, autoCapture && styles.checkboxChecked]}
+            >
+              {autoCapture && <Text style={styles.checkmark}>✓</Text>}
+            </View>
+          </TouchableOpacity>
+
+          <MText style={styles.hint}>
+            Vui lòng đặt chuỗi kí tự nằm vừa khung{'\n'}hình chữ nhật, chụp đủ
+            ánh sáng và rõ nét.
+          </MText>
+        </>
+      ) : mode === 'photo' ? (
+        <>
+          <MText style={styles.instruction}>
+            {front ? 'Chụp CMND/ CCCD mặt trước' : 'Chụp CMND/ CCCD mặt sau'}
+          </MText>
+          {/* Khung tỉ lệ thẻ CCCD: vùng nhìn thấy của preview = vùng sẽ crop */}
+          <View
+            style={styles.photoFrame}
+            onLayout={(e) => {
+              frameLayout.current = e.nativeEvent.layout;
+            }}
+          >
+            {captured ? (
+              <Image
+                source={{ uri: captured }}
+                style={StyleSheet.absoluteFill}
+                resizeMode="cover"
+              />
+            ) : hasPermission && cameraReady && device ? (
+              <VisionCamera
+                ref={cameraRef}
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={isFocused && mode === 'photo' && !captured}
+                photo={true}
+                format={format}
+              />
+            ) : null}
+            <View style={[styles.corner, styles.cornerTL]} />
+            <View style={[styles.corner, styles.cornerTR]} />
+            <View style={[styles.corner, styles.cornerBL]} />
+            <View style={[styles.corner, styles.cornerBR]} />
+          </View>
+
+          {captured ? (
+            <View style={styles.previewActions}>
+              <TouchableOpacity
+                style={styles.retakeButton}
+                onPress={() => setCaptured(null)}
+              >
+                <MText style={styles.retakeText}>Chụp lại</MText>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.useButton} onPress={usePhoto}>
+                <MText style={styles.useText}>Dùng ảnh này</MText>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <>
+              <TouchableOpacity
+                style={styles.galleryButton}
+                onPress={pickImageFromGallery}
+              >
+                <IconUpload />
+                <MText style={styles.galleryText}>Tải ảnh từ thư viện</MText>
+              </TouchableOpacity>
+              <View style={styles.spacer} />
+              <MText style={[styles.hint, { marginTop: 0, marginBottom: 20 }]}>
+                Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật,{'\n'}chụp đủ
+                ánh sáng và rõ nét.
+              </MText>
+              <TouchableOpacity
+                style={[
+                  styles.captureButton,
+                  { marginBottom: insets.bottom + 24 },
+                ]}
+                onPress={takePicture}
+                disabled={taking}
+              >
+                <TakePhotoSvg />
+              </TouchableOpacity>
+            </>
+          )}
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+export default observer(ScanMRZ);
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  tabs: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  tab: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 8,
+  },
+  tabInactive: { backgroundColor: '#F1F1F1' },
+  tabActive: { backgroundColor: ORANGE },
+  tabTextInactive: { color: '#555555', fontSize: 13, fontWeight: '500' },
+  tabTextActive: { color: '#FFFFFF', fontSize: 13, fontWeight: '600' },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 20,
+    marginBottom: 28,
+  },
+  cameraWrap: {
+    marginHorizontal: 16,
+    height: 220,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  photoFrame: {
+    marginHorizontal: 24,
+    aspectRatio: CARD_ASPECT_RATIO,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  corner: {
+    position: 'absolute',
+    width: 26,
+    height: 26,
+    borderColor: ORANGE,
+  },
+  cornerTL: {
+    top: 0,
+    left: 0,
+    borderTopWidth: 4,
+    borderLeftWidth: 4,
+    borderTopLeftRadius: 8,
+  },
+  cornerTR: {
+    top: 0,
+    right: 0,
+    borderTopWidth: 4,
+    borderRightWidth: 4,
+    borderTopRightRadius: 8,
+  },
+  cornerBL: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: 4,
+    borderLeftWidth: 4,
+    borderBottomLeftRadius: 8,
+  },
+  cornerBR: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    borderBottomRightRadius: 8,
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 24,
+    gap: 8,
+  },
+  checkboxLabel: { fontSize: 14, color: '#333333' },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: '#BBBBBB',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxChecked: { backgroundColor: '#22A45D', borderColor: '#22A45D' },
+  checkmark: { color: '#FFFFFF', fontSize: 13, fontWeight: '700' },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  galleryButton: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: ORANGE,
+    backgroundColor: '#FFFFFF',
+  },
+  galleryText: { color: '#333333', fontSize: 13 },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+  previewActions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  retakeButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: ORANGE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retakeText: { color: ORANGE, fontSize: 14, fontWeight: '600' },
+  useButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: ORANGE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  useText: { color: '#FFFFFF', fontSize: 14, fontWeight: '600' },
+});