react-native-timacare 3.3.55 → 3.3.57-cccd

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -1,9 +1,13 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ActivityIndicator,
-  Alert,
-  Dimensions,
   Platform,
   StyleSheet,
   TouchableOpacity,
@@ -11,11 +15,11 @@ import {
 } from 'react-native';
 import {
   Camera as VisionCamera,
-  useCameraDevice,
-  useCameraFormat,
+  useCameraDevices,
 } from 'react-native-vision-camera';
-import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
+import { IconBack, 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';
@@ -25,31 +29,77 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
+import {
+  cropPhotoToAspect,
+  pickClosestFocusDevice,
+} from '../../utils/cameraCrop';
+
+const ORANGE = '#F05123';
+// Thẻ CMND/CCCD theo chuẩn ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
+// Cắt ảnh vừa đúng khung (khung dùng aspectRatio = CARD_ASPECT_RATIO)
+const FRAME_ASPECT = CARD_ASPECT_RATIO;
 
 export default function CCCDCameraScreen(props) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const isFocused = useIsFocused();
   const myCamera = useRef(null);
+  const frameSize = useRef({ width: 0, height: 0 });
+  const focusTimer = useRef(null);
+  const takingRef = useRef(false);
   const [passPermission, setPassPermission] = useState(false);
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
-  const device = useCameraDevice('back');
-  const format = useCameraFormat(device, [
-    { photoResolution: { width: 1280, height: 720 } },
+  const [focusPoint, setFocusPoint] = useState(null);
+
+  // Chọn ống kính sau lấy nét gần nhất (macro) để chụp cận thẻ mà không mờ
+  const devices = useCameraDevices();
+  const device = useMemo(() => pickClosestFocusDevice(devices, 'back'), [
+    devices,
   ]);
 
+  // Lấy nét vào một điểm (toạ độ theo hệ của khung preview = camera view).
+  // Dùng cho chạm-để-lấy-nét và lấy nét giữa khung trước khi chụp -> tránh mờ
+  // khi đưa giấy tờ lại gần (camera không tự bám nét kịp).
+  const focusAt = useCallback(
+    async (x, y) => {
+      const cam = myCamera.current;
+      if (cam == null || !device?.supportsFocus) return;
+      setFocusPoint({ x, y });
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+      focusTimer.current = setTimeout(() => setFocusPoint(null), 800);
+      try {
+        await cam.focus({ x, y });
+      } catch (e) {
+        // focus có thể lỗi nếu đang lấy nét dở hoặc điểm ngoài vùng -> bỏ qua
+      }
+    },
+    [device]
+  );
+
   const takePicture = async () => {
-    if (myCamera.current == null) return;
+    if (myCamera.current == null || takingRef.current) return;
+    takingRef.current = true;
     try {
+      // Lấy nét giữa khung trước khi chụp để tài liệu ở gần vẫn nét
+      const { width: fw, height: fh } = frameSize.current;
+      if (device?.supportsFocus && fw && fh) {
+        try {
+          await myCamera.current.focus({ x: fw / 2, y: fh / 2 });
+        } catch (e) {}
+      }
       const data = await myCamera.current.takePhoto({
         qualityPrioritization: 'quality',
       });
+      // Cắt ảnh vừa đúng khung preview (giữ nguyên logic điều hướng bên dưới)
+      const uri = await cropPhotoToAspect(data, FRAME_ASPECT);
       navigation.goBack();
       if (props.route?.params?.callback) {
-        props.route.params.callback('file://' + data.path);
+        props.route.params.callback(uri);
       }
     } catch (err) {
       console.error(err);
+      takingRef.current = false;
     }
   };
 
@@ -64,51 +114,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 +164,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;
       }
     });
@@ -139,6 +185,9 @@ export default function CCCDCameraScreen(props) {
 
   useEffect(() => {
     requestPermissions();
+    return () => {
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+    };
   }, []);
 
   useEffect(() => {
@@ -164,138 +213,155 @@ export default function CCCDCameraScreen(props) {
   }
 
   return (
-    <View
-      style={{ flex: 1, backgroundColor: 'black' }}
-      pointerEvents={'box-none'}
-    >
-      <View
-        style={[
-          commonStyles.alignCenter,
-          commonStyles.fill,
-          commonStyles.justifyCenter,
-          {
-            position: 'absolute',
-            width: Dimensions.get('window').width,
-            height: Dimensions.get('window').height,
-          },
-        ]}
-      >
-        {device ? (
-          <View style={$cameraFrame}>
-            <VisionCamera
-              ref={myCamera}
-              style={StyleSheet.absoluteFill}
-              device={device}
-              isActive={true}
-              photo={true}
-              format={format}
-            />
-          </View>
-        ) : (
-          <ActivityIndicator />
-        )}
-      </View>
-
-      <View style={[$back, { top: insets.top + 16 }]}>
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
         <TouchableOpacity
-          onPress={() => {
-            navigation.goBack();
-          }}
-          style={{
-            position: 'absolute',
-            left: 0,
-            width: 48,
-            height: 48,
-            zIndex: 1000,
-            alignItems: 'center',
-          }}
+          onPress={() => navigation.goBack()}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
         >
-          <IconBackWhite />
+          <IconBack />
         </TouchableOpacity>
-        <MText
-          style={{
-            textAlign: 'center',
-            zIndex: 10,
-            color: '#FFFFFF',
-            fontSize: 16,
-          }}
-        >
-          {props?.route?.params?.front
-            ? 'Chụp CMND/ CCCD mặt trước'
-            : 'Chụp CMND/ CCCD mặt sau'}
-        </MText>
+        <View style={styles.titleWrap}>
+          <MText style={styles.headerTitle}>CMND / CCCD</MText>
+        </View>
       </View>
+
+      <MText style={styles.instruction}>
+        {props?.route?.params?.front
+          ? 'Chụp CMND/ CCCD mặt trước'
+          : 'Chụp CMND/ CCCD mặt sau'}
+      </MText>
+
+      {/* Khung tỉ lệ thẻ: vùng nhìn thấy của preview = vùng sẽ crop.
+          Chạm vào khung để lấy nét thủ công. */}
       <View
-        style={{
-          position: 'absolute',
-          bottom: insets.bottom,
-          alignSelf: 'center',
-          flexDirection: 'column',
-          alignItems: 'center',
+        style={styles.photoFrame}
+        onLayout={(e) => {
+          frameSize.current = e.nativeEvent.layout;
         }}
+        onStartShouldSetResponder={() => true}
+        onResponderRelease={(e) =>
+          focusAt(e.nativeEvent.locationX, e.nativeEvent.locationY)
+        }
       >
-        <MText
-          style={{
-            color: '#fff',
-            marginBottom: 16,
-            textAlign: 'center',
-            paddingHorizontal: 24,
-          }}
-        >
-          Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật, chụp đủ ánh sáng và
-          rõ nét.
-        </MText>
-        <TouchableOpacity onPress={takePicture}>
-          <TakePhotoSvg />
-        </TouchableOpacity>
+        {device ? (
+          <VisionCamera
+            ref={myCamera}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={isFocused}
+            photo={true}
+          />
+        ) : 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]} />
+        {focusPoint && (
+          <View
+            pointerEvents="none"
+            style={[
+              styles.focusRing,
+              { left: focusPoint.x - 32, top: focusPoint.y - 32 },
+            ]}
+          />
+        )}
       </View>
+
+      <View style={styles.spacer} />
+      <MText style={[styles.hint, { marginTop: 0, marginBottom: 20 }]}>
+        Đưa giấy tờ lại gần cho vừa khung, chạm vào màn hình{'\n'}để lấy nét nếu
+        ảnh bị mờ.
+      </MText>
+      <TouchableOpacity
+        style={[styles.captureButton, { marginBottom: insets.bottom + 24 }]}
+        onPress={takePicture}
+      >
+        <TakePhotoSvg />
+      </TouchableOpacity>
     </View>
   );
 }
 
-const overlayColor = 'rgba(22, 22, 22, 0.7)';
-const $back: ViewStyle = {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-};
-
-const $cameraFrame: ViewStyle = {
-  width: Dimensions.get('window').width,
-  height: 260,
-  overflow: 'hidden',
-  backgroundColor: 'black',
-};
-
-const $overlay: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-const $container: ViewStyle = {
-  flex: 1,
-  backgroundColor: '#000',
-};
-
-const $row: ViewStyle = {
-  flexDirection: 'row',
-  alignItems: 'center',
-};
-
-const $darkOverlayTop: ViewStyle = {
-  width: '100%',
-  backgroundColor: overlayColor,
-};
-
-const $darkOverlayBottom: ViewStyle = {
-  width: '100%',
-  backgroundColor: overlayColor,
-};
-const $darkOverlaySide: ViewStyle = {
-  backgroundColor: overlayColor,
-};
-const $frameBorder: ViewStyle = {
-  // borderColor: '#FDFDFD',
-  // borderWidth: 2,
-};
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 24,
+  },
+  headerTitle: { color: '#333333', fontSize: 16, fontWeight: '600' },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 20,
+    marginBottom: 28,
+  },
+  photoFrame: {
+    marginHorizontal: 24,
+    aspectRatio: CARD_ASPECT_RATIO,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  corner: {
+    position: 'absolute',
+    width: 26,
+    height: 26,
+    borderColor: ORANGE,
+  },
+  focusRing: {
+    position: 'absolute',
+    width: 64,
+    height: 64,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#FFD54A',
+  },
+  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,
+  },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+});

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