react-native-timacare 3.3.66 → 3.3.67

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

@@ -1,41 +1,57 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
-import { Dimensions, Platform, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   request,
   PERMISSIONS,
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
+import { Svg, Ellipse, Path } from 'react-native-svg';
 import { MText } from '../../components/MText';
 import MButton from '../../components/MButton';
 import { commonStyles } from '../CommonStyles';
-import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
+import { IconBack, TakePhotoSvg } from '../../assets/icons';
 import Loading from '../../components/Loading';
 import { Api } from '../../services/api';
 import { ScreenNames } from '../../navigation';
 import appStore from '../../AppStore';
 import { logEvent, logEventFb } from '../../utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraFormat,
-} from 'react-native-vision-camera';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 
+const ORANGE = '#F05123';
+const SCREEN_WIDTH = Dimensions.get('window').width;
+// Khung oval: rộng ~72% màn hình, cao gấp 1.33 lần chiều rộng (tỉ lệ khuôn mặt)
+const OVAL_WIDTH = Math.round(SCREEN_WIDTH * 0.72);
+const OVAL_HEIGHT = Math.round(OVAL_WIDTH * 1.33);
+
 export default function TTSSelfie(props: any) {
   const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
-  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
+  const myCamera = useRef(null);
+  const takingRef = useRef(false);
+  const [passPermission, setPassPermission] = useState(false);
+  const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const [taking, setTaking] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [passPermission, setPassPermission] = useState(false);
-  const device = useCameraDevice('front');
-  const myCamera = useRef(null);
+  // Kích thước vùng preview để vẽ mặt nạ oval đúng tâm
+  const [stage, setStage] = useState({ width: SCREEN_WIDTH, height: 0 });
 
+  const device = useCameraDevice('front');
   const format = useCameraFormat(device, [
     { photoResolution: { width: 1280, height: 1280 } },
   ]);
@@ -48,9 +64,6 @@ export default function TTSSelfie(props: any) {
     ).then((result) => {
       switch (result) {
         case RESULTS.UNAVAILABLE:
-          console.log(
-            'This feature is not available (on this device / in this context)'
-          );
           AlertGlobal.show({
             type: 'warning',
             title: 'Thông báo',
@@ -60,9 +73,6 @@ export default function TTSSelfie(props: any) {
           });
           break;
         case RESULTS.DENIED:
-          console.log(
-            'The permission has not been requested / is denied but requestable'
-          );
           AlertGlobal.show({
             type: 'warning',
             title: 'Thông báo',
@@ -79,7 +89,6 @@ export default function TTSSelfie(props: any) {
           });
           break;
         case RESULTS.LIMITED:
-          console.log('The permission is limited: some actions are possible');
           AlertGlobal.show({
             type: 'warning',
             title: 'Thông báo',
@@ -96,24 +105,16 @@ export default function TTSSelfie(props: any) {
           });
           break;
         case RESULTS.GRANTED:
-          console.log('The permission is granted');
           setPassPermission(true);
           break;
         case RESULTS.BLOCKED:
-          console.log('The permission is denied and not requestable anymore');
           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();
-              }
-            },
+            onPrimaryPress: () => openSettings(),
           });
           break;
       }
@@ -137,30 +138,34 @@ export default function TTSSelfie(props: any) {
 
   useEffect(() => {
     let timeout: NodeJS.Timeout;
-
     if (isFocused) {
       // Delay mounting camera to give Android time to release the previous one
       timeout = setTimeout(() => {
         setShouldRenderCamera(true);
-      }, 500); // thử 300ms–500ms nếu cần
+      }, 500);
     } else {
       setShouldRenderCamera(false);
     }
-
     return () => clearTimeout(timeout);
   }, [isFocused]);
 
   const takePhoto = async () => {
-    if (myCamera.current == null || taking) return;
+    if (myCamera.current == null || takingRef.current) return;
+    takingRef.current = true;
     setTaking(true);
-    const data = await myCamera.current.takePhoto({
-      qualityPrioritization: 'speed',
-    });
-    setTaking(false);
-    if (data) {
+    try {
+      const data = await myCamera.current.takePhoto({
+        qualityPrioritization: 'speed',
+      });
+      setTaking(false);
+      if (!data) {
+        takingRef.current = false;
+        return;
+      }
       setIsLoading(true);
+      const loan = props?.route?.params?.loan;
       const formData = new FormData();
-      formData.append('LoanBriefId', props?.route?.params?.loan?.id);
+      formData.append('LoanBriefId', loan?.id);
       formData.append('TypeDocumentId', 125); // Anh selfie
       formData.append('image', {
         uri: 'file://' + data.path,
@@ -169,23 +174,17 @@ export default function TTSSelfie(props: any) {
       });
       const response = await Api.getInstance().uploadImageAutoDE(formData);
       setIsLoading(false);
+      takingRef.current = false;
       if (response.kind === 'ok') {
         if (response.data?.meta.errorCode === 200) {
-          if (
-            props?.route?.params?.loan?.typeLoan === 6 ||
-            props?.route?.params?.loan?.typeLoan === 4
-          ) {
-            navigation.push(ScreenNames.TopupLoanInfo, {
-              loan: props?.route?.params?.loan,
-            });
-          } else if (props?.route?.params?.loan?.typeLoan === 8) {
-            navigation.push(ScreenNames.InfoLoanMotobike, {
-              loan: props?.route?.params?.loan,
-            });
+          if (loan?.typeLoan === 6 || loan?.typeLoan === 4) {
+            navigation.push(ScreenNames.TopupLoanInfo, { loan });
+          } else if (loan?.typeLoan === 8) {
+            navigation.push(ScreenNames.InfoLoanMotobike, { loan });
+          } else if (loan?.typeLoan === 7) {
+            navigation.push(ScreenNames.ReviewInfoLoanBuyCar, { loan });
           } else {
-            navigation.push(ScreenNames.ReviewInformation, {
-              loan: props?.route?.params?.loan,
-            });
+            navigation.push(ScreenNames.ReviewInformation, { loan });
           }
         } else {
           AlertGlobal.show({
@@ -203,109 +202,161 @@ export default function TTSSelfie(props: any) {
           primaryText: 'Đóng',
         });
       }
+    } catch (err) {
+      console.log('takePhoto error', err);
+      setTaking(false);
+      setIsLoading(false);
+      takingRef.current = false;
     }
   };
 
+  // Mặt nạ: phủ trắng toàn bộ vùng preview, khoét một lỗ hình oval ở giữa
+  // (fillRule evenodd) -> chỉ nhìn thấy camera bên trong oval.
+  const renderOvalMask = () => {
+    const { width: w, height: h } = stage;
+    if (!w || !h) return null;
+    const cx = w / 2;
+    const cy = h / 2;
+    const rx = OVAL_WIDTH / 2;
+    const ry = Math.min(OVAL_HEIGHT, h - 16) / 2;
+    const hole = `M ${cx - rx} ${cy} a ${rx} ${ry} 0 1 0 ${
+      rx * 2
+    } 0 a ${rx} ${ry} 0 1 0 ${-rx * 2} 0 Z`;
+    return (
+      <Svg
+        pointerEvents="none"
+        style={StyleSheet.absoluteFill}
+        width={w}
+        height={h}
+      >
+        <Path
+          d={`M 0 0 H ${w} V ${h} H 0 Z ${hole}`}
+          fill="#FFFFFF"
+          fillRule="evenodd"
+        />
+        {/* Vòng ngoài mờ tạo chiều sâu cho khung, vòng trong nét đứt là mốc căn mặt */}
+        <Ellipse
+          cx={cx}
+          cy={cy}
+          rx={rx + 8}
+          ry={ry + 8}
+          stroke={ORANGE}
+          strokeWidth={1}
+          strokeOpacity={0.25}
+          fill="none"
+        />
+        <Ellipse
+          cx={cx}
+          cy={cy}
+          rx={rx}
+          ry={ry}
+          stroke={ORANGE}
+          strokeWidth={2}
+          strokeDasharray="6 5"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </Svg>
+    );
+  };
+
   return (
-    <View
-      style={{ flex: 1, backgroundColor: 'black' }}
-      pointerEvents={'box-none'}
-    >
-      {passPermission && shouldRenderCamera ? (
-        <View
-          style={[
-            commonStyles.fill,
-            {
-              width: Dimensions.get('window').width,
-              height: Dimensions.get('window').height,
-            },
-          ]}
-        >
-          <View
-            style={{
-              marginVertical: 24,
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              marginTop: insets.top + 16,
-            }}
-          >
-            <MButton
-              onPress={() => {
-                navigation.goBack();
-              }}
-              style={{
-                position: 'absolute',
-                left: 16,
-              }}
-            >
-              <IconBackWhite />
-            </MButton>
-            <MText
-              style={{
-                color: 'white',
-                fontWeight: 'bold',
-                textAlgin: 'center',
-              }}
-            >
-              Xác thực khuôn mặt
-            </MText>
-          </View>
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <MButton onPress={() => navigation.goBack()} style={styles.backButton}>
+          <IconBack />
+        </MButton>
+        <View style={styles.titleWrap}>
+          <MText style={styles.headerTitle}>Xác thực khuôn mặt</MText>
+        </View>
+      </View>
 
+      <View
+        style={styles.stage}
+        onLayout={(e) => setStage(e.nativeEvent.layout)}
+      >
+        {passPermission && shouldRenderCamera && device ? (
           <Camera
-            style={{
-              width: Dimensions.get('window').width,
-              height: (Dimensions.get('window').width * 4) / 3.1,
-            }}
             ref={myCamera}
+            style={StyleSheet.absoluteFill}
             device={device}
-            isActive={true}
+            isActive={isFocused}
             photo={true}
             format={format}
           />
-
+        ) : (
           <View
-            style={{
-              position: 'absolute',
-              bottom: 20,
-              left: 0,
-              right: 0,
-            }}
+            style={[
+              StyleSheet.absoluteFill,
+              commonStyles.alignCenter,
+              commonStyles.justifyCenter,
+            ]}
           >
-            {!taking && (
-              <>
-                <MText
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontSize: 14,
-                    paddingHorizontal: 24,
-                  }}
-                >
-                  Xin vui lòng nhìn thẳng, khuôn mặt ở trong khung hình, ánh
-                  sáng đủ rõ nét khuôn mặt
-                </MText>
-                <View
-                  style={{
-                    alignItems: 'center',
-                    marginVertical: 24,
-                  }}
-                >
-                  <MButton
-                    onPress={() => {
-                      takePhoto();
-                    }}
-                  >
-                    <TakePhotoSvg />
-                  </MButton>
-                </View>
-              </>
-            )}
+            <ActivityIndicator color={ORANGE} size="large" />
           </View>
+        )}
+        {renderOvalMask()}
+      </View>
+
+      <MText style={styles.instruction}>
+        Xin vui lòng nhìn thẳng, khuôn mặt ở trong khung hình, ánh sáng đủ rõ
+        nét khuôn mặt
+      </MText>
+
+      <View style={[styles.captureWrap, { marginBottom: insets.bottom + 24 }]}>
+        {/* Quầng cam nhạt quanh nút chụp: tách nút khỏi nền trắng, đúng thiết kế */}
+        <View style={styles.captureHalo}>
+          {taking ? (
+            <ActivityIndicator color={ORANGE} size="large" />
+          ) : (
+            <MButton onPress={takePhoto}>
+              <TakePhotoSvg />
+            </MButton>
+          )}
         </View>
-      ) : null}
+      </View>
 
       <Loading isLoading={isLoading} />
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  backButton: { width: 32, height: 32, justifyContent: 'center' },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 32,
+  },
+  headerTitle: { color: '#333333', fontSize: 16, fontWeight: '600' },
+  stage: {
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: '#FFFFFF',
+  },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    paddingHorizontal: 32,
+    marginTop: 16,
+  },
+  captureWrap: { alignItems: 'center', marginTop: 24 },
+  captureHalo: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(240, 81, 35, 0.10)',
+  },
+});