react-native-timacare 3.3.11 → 3.3.13

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -12,25 +12,88 @@ import {
 import {
   Camera,
   useCameraDevice,
+  useCameraFormat,
   useCameraPermission,
 } from 'react-native-vision-camera';
 import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
 import { MText } from '../../components/MText';
-import ImageEditor from '@react-native-community/image-editor';
-import { CommonActions, useNavigation } from '@react-navigation/native';
-import DeviceInfo from 'react-native-device-info';
+import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-const frameWidth = screenWidth * 0.85;
-const frameHeight = frameWidth * 0.63; // tỷ lệ giống CCCD
-const frameLeft = (screenWidth - frameWidth) / 2;
-const frameTop = ((screenWidth * 4) / 3 - frameHeight) / 2;
+
+const getImageSize = (
+  uri: string
+): Promise<{ width: number; height: number }> =>
+  new Promise((resolve, reject) => {
+    Image.getSize(
+      uri,
+      (width, height) => resolve({ width, height }),
+      (err) => reject(err)
+    );
+  });
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const getSnapshotCropRect = ({
+  imageWidth,
+  imageHeight,
+  previewWidth,
+  previewHeight,
+  frameX,
+  frameY,
+  frameWidth,
+  frameHeight,
+}: {
+  imageWidth: number;
+  imageHeight: number;
+  previewWidth: number;
+  previewHeight: number;
+  frameX: number;
+  frameY: number;
+  frameWidth: number;
+  frameHeight: number;
+}) => {
+  const scaleX = imageWidth / previewWidth;
+  const scaleY = imageHeight / previewHeight;
+  const originX = clamp(frameX * scaleX, 0, imageWidth);
+  const originY = clamp(frameY * scaleY, 0, imageHeight);
+  const width = clamp(frameWidth * scaleX, 1, imageWidth - originX);
+  const height = clamp(frameHeight * scaleY, 1, imageHeight - originY);
+
+  return {
+    originX: Math.round(originX),
+    originY: Math.round(originY),
+    width: Math.round(width),
+    height: Math.round(height),
+  };
+};
+
 export default function CCCDCameraScreen(props) {
+  const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const camera = useRef(null);
   const device = useCameraDevice('back');
   const [cameraActive, setCameraActive] = useState(true);
   const { hasPermission, requestPermission } = useCameraPermission();
+  const [previewLayout, setPreviewLayout] = useState({
+    width: screenWidth,
+    height: screenHeight,
+  });
+
+  const format = useCameraFormat(device, [
+    {
+      photoAspectRatio: previewLayout.height / previewLayout.width,
+    },
+    {
+      videoAspectRatio: previewLayout.height / previewLayout.width,
+    },
+    {
+      photoResolution: 'max',
+    },
+  ]);
 
   useEffect(() => {
     if (!hasPermission) requestPermission();
@@ -38,84 +101,194 @@ export default function CCCDCameraScreen(props) {
 
   const takePicture = async () => {
     if (camera.current == null) return;
+    try {
+      const snapshot = await camera.current.takeSnapshot({
+        quality: 100,
+      });
+      const imageUri = `file://${snapshot.path}`;
+      const normalized = await RNImageManipulator.manipulate(imageUri, [], {
+        format: 'jpg',
+        compress: 1,
+      });
+      const { width: imageWidth, height: imageHeight } = await getImageSize(
+        normalized.uri
+      );
+
+      const previewWidth = previewLayout.width;
+      const previewHeight = previewLayout.height;
+
+      const frameWidth = previewWidth * 0.85;
+      const frameHeight = frameWidth * 0.63;
+      const frameX = (previewWidth - frameWidth) / 2;
+      const frameY = (previewHeight - frameHeight) / 2;
 
-    const photo = await camera.current.takePhoto({
-      skipMetadata: true,
-    });
-
-    Image.getSize(`file://${photo.path}`, async (width, height) => {
-      const previewHeight = (screenWidth * 4) / 3; // Tỷ lệ khung preview camera
-
-      // Tính scale giữa ảnh thật và khung preview
-      const scaleX = width / screenWidth;
-      const scaleY = height / previewHeight;
-
-      // Tính tọa độ vùng cần crop trên ảnh gốc
-      const cropData = {
-        offset: {
-          x: frameLeft * scaleX,
-          y: frameTop * scaleY,
-        },
-        size: {
-          width: frameWidth * scaleX,
-          height: frameHeight * scaleY,
-        },
-        displaySize: {
-          width: frameWidth * scaleX,
-          height: frameHeight * scaleY,
-        },
-        resizeMode: 'contain',
-      };
-
-      try {
-        const croppedUri = await ImageEditor.cropImage(
-          `file://${photo.path}`,
-          cropData
-        );
-        setCameraActive(false);
-        navigation.goBack();
-        if (props.route.params.callback) {
-          props.route.params.callback(croppedUri.uri);
-        }
-      } catch (err) {
-        console.error(err);
+      const cropRect = getSnapshotCropRect({
+        imageWidth,
+        imageHeight,
+        previewWidth,
+        previewHeight,
+        frameX,
+        frameY,
+        frameWidth,
+        frameHeight,
+      });
+
+      const result = await RNImageManipulator.manipulate(
+        normalized.uri,
+        [
+          {
+            crop: cropRect,
+          },
+        ],
+        { format: 'jpg', compress: 1 }
+      );
+      setCameraActive(false);
+      navigation.goBack();
+      if (props.route?.params?.callback) {
+        props.route.params.callback(result?.uri);
       }
-    });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   if (!device || !hasPermission)
-    return <View style={{ flex: 1, backgroundColor: '#000' }} />;
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: '#000',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <MText style={{ color: '#fff' }}>
+          Vui lòng cấp quyền truy cập Camera
+        </MText>
+      </View>
+    );
+
+  const frameWidth = previewLayout.width * 0.85;
+  const frameHeight = frameWidth * 0.63;
+  const frameX = (previewLayout.width - frameWidth) / 2;
+  const frameY = (previewLayout.height - frameHeight) / 2;
+
   return (
-    <View style={styles.container}>
-      <View style={styles.topContainer}>
+    <View
+      style={$container}
+      onLayout={(e) => {
+        const { width, height } = e.nativeEvent.layout;
+        if (width > 0 && height > 0) setPreviewLayout({ width, height });
+      }}
+    >
+      <Camera
+        style={{ flex: 1 }}
+        device={device}
+        isActive={cameraActive}
+        photo={false}
+        video={true}
+        outputOrientation="preview"
+        ref={camera}
+        format={format}
+        resizeMode="cover"
+      />
+      <View style={$overlay} pointerEvents="none">
+        <View style={[$darkOverlayTop, { height: frameY }]} />
+        <View style={$row}>
+          <View
+            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
+          />
+          <View
+            style={[$frameBorder, { width: frameWidth, height: frameHeight }]}
+          >
+            {/* Top Left */}
+            <Corner
+              style={{
+                top: 0,
+                left: 0,
+                borderTopWidth: CORNER_WIDTH,
+                borderLeftWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Top Right */}
+            <Corner
+              style={{
+                top: 0,
+                right: 0,
+                borderTopWidth: CORNER_WIDTH,
+                borderRightWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Bottom Left */}
+            <Corner
+              style={{
+                bottom: 0,
+                left: 0,
+                borderBottomWidth: CORNER_WIDTH,
+                borderLeftWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+
+            {/* Bottom Right */}
+            <Corner
+              style={{
+                bottom: 0,
+                right: 0,
+                borderBottomWidth: CORNER_WIDTH,
+                borderRightWidth: CORNER_WIDTH,
+                borderColor: BORDER_COLOR,
+              }}
+            />
+          </View>
+          <View
+            style={[$darkOverlaySide, { width: frameX, height: frameHeight }]}
+          />
+        </View>
+        <View style={[$darkOverlayBottom, { height: frameY }]} />
+      </View>
+      <View style={[$back, { top: insets.top + 16 }]}>
         <TouchableOpacity
           onPress={() => {
             navigation.goBack();
           }}
-          style={[
-            { width: 48, height: 48, zIndex: 1000, alignItems: 'center' },
-          ]}
+          style={{
+            position: 'absolute',
+            left: 0,
+            width: 48,
+            height: 48,
+            zIndex: 1000,
+            alignItems: 'center',
+          }}
         >
           <IconBackWhite />
         </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>
-      <Camera
-        style={styles.camera}
-        device={device}
-        isActive={cameraActive}
-        photo={true}
-        ref={camera}
-      />
-      <View style={styles.overlay}>
-        <View style={styles.darkOverlayTop} />
-        <View style={styles.row}>
-          <View style={styles.darkOverlaySide} />
-          <View style={styles.frameBorder} />
-          <View style={styles.darkOverlaySide} />
-        </View>
-        <View style={styles.darkOverlayBottom} />
-      </View>
-      <View style={styles.captureButton}>
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 24 + insets.bottom,
+          alignSelf: 'center',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
         <MText
           style={{
             color: '#fff',
@@ -135,59 +308,59 @@ export default function CCCDCameraScreen(props) {
   );
 }
 
+const CORNER_SIZE = 20;
+const CORNER_WIDTH = 2;
+const BORDER_COLOR = '#FDFDFD';
+
+const Corner = ({ style }: { style: ViewStyle }) => (
+  <View
+    style={[
+      style,
+      {
+        position: 'absolute',
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+      },
+    ]}
+  />
+);
+
 const overlayColor = 'rgba(22, 22, 22, 0.7)';
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#000' },
-  camera: { flex: 1 },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  frameBorder: {
-    width: frameWidth,
-    height: frameHeight,
-    borderColor: '#FDFDFD',
-    borderWidth: 2,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  darkOverlayTop: {
-    width: '100%',
-    height: (screenHeight - frameHeight) / 2,
-    backgroundColor: overlayColor,
-  },
-  darkOverlayBottom: {
-    width: '100%',
-    height: (screenHeight - frameHeight) / 2,
-    backgroundColor: overlayColor,
-  },
-  darkOverlaySide: {
-    width: (screenWidth - frameWidth) / 2,
-    height: frameHeight,
-    backgroundColor: overlayColor,
-  },
-  captureContainer: {
-    position: 'absolute',
-    bottom: 40,
-    width: '100%',
-    alignItems: 'center',
-  },
-  captureButton: {
-    position: 'absolute',
-    bottom: 30,
-    alignSelf: 'center',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  topContainer: {
-    position: 'absolute',
-    top: DeviceInfo.hasNotch() ? 60 : 24,
-  },
-  textContainer: {
-    position: 'absolute',
-    top: DeviceInfo.hasNotch() ? 60 : 24,
-  },
-});
+const $back: ViewStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+};
+
+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,
+};

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

@@ -89,6 +89,7 @@ export const QrPayment = observer(function QrPayment(props: any) {
                 paddingHorizontal: 16,
                 marginTop: 8,
                 fontSize: 16,
+                color: '#333333',
               }}
               onChangeText={(text) => {
                 const numericValue = text.replace(/\D/g, '');

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

@@ -34,7 +34,7 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
       .getQrPayment({
         LoanBriefId: props?.route?.params?.id,
         TypeCloseLoan: 0, // đóng tiền kỳ
-        Money: props?.route?.params?.amount,
+        Money: Number(props?.route?.params?.amount),
       })
       .then((response) => {
         setIsLoading(false);