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

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

@@ -1,16 +1,19 @@
 //@ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   View,
-  NativeModules,
   TouchableOpacity,
   TextStyle,
   ViewStyle,
   ImageStyle,
   Image,
-  ActivityIndicator,
-  Dimensions,
   StyleSheet,
   Platform,
 } from 'react-native';
@@ -22,50 +25,66 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
-import {
-  Camera as VisionCamera,
-  useCameraDevice,
-  useCameraFormat,
-} from 'react-native-vision-camera';
+import { Camera as VisionCamera, useCameraDevices } from 'react-native-vision-camera';
 import Modal from 'react-native-modal';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  CloseIcon,
-  IconBackWhite,
-  TakePhotoSvg,
-  TimaSmall,
-} from '../../assets/icons';
-import MButton from '../../components/MButton';
-import { commonStyles } from '../CommonStyles';
+import { CloseIcon, IconBack, TakePhotoSvg, TimaSmall } from '../../assets/icons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
-import TextRecognition from '@react-native-ml-kit/text-recognition';
 import { ScreenNames } from '../../navigation';
-import { Api } from '../../services/api';
-import Loading from '../../components/Loading';
 import { IconUpload } from '../../assets/svgs';
 import ImagePicker from 'react-native-image-crop-picker';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
+import {
+  cropPhotoToAspect,
+  pickClosestFocusDevice,
+} from '../../utils/cameraCrop';
 
-const { NFCReader } = NativeModules;
+const ORANGE = '#F05123';
+// Thẻ CMND/CCCD theo chuẩn ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
 
 export const OCR = observer(function OCR(props: any) {
   const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
-  const [isLoading, setIsLoading] = useState(false);
   const navigation = useNavigation();
   const [showModal, setShowModal] = useState(false);
-  const [type, setType] = useState('passport');
   const [taking, setTaking] = useState(false);
   const [passPermission, setPassPermission] = useState(false);
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
+  const [focusPoint, setFocusPoint] = useState(null);
+
   const myCamera = useRef(null);
-  const device = useCameraDevice('back');
-  const format = useCameraFormat(device, [
-    { photoResolution: { width: 1280, height: 720 } },
+  const frameSize = useRef({ width: 0, height: 0 });
+  const focusTimer = useRef(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,
   ]);
 
+  const front = props?.route?.params?.front;
+
+  // Lấy nét vào một điểm (toạ độ theo hệ 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 gần.
+  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 requestPermissions = () => {
     request(
       Platform.OS === 'ios'
@@ -170,139 +189,19 @@ export const OCR = observer(function OCR(props: any) {
   useEffect(() => {
     requestPermissions();
     loadIntro();
+    return () => {
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+    };
   }, []);
 
-  const saveDataNfc = async (body) => {
-    try {
-      const response = await Api.getInstance().saveNfcInfo({
-        ...body,
-        loanBriefId: props?.route?.params?.loan?.id,
-      });
-      if (response.kind === 'ok') {
-        if (response.data?.meta?.errorCode === 200) {
-          setTimeout(() => {
-            navigation.push(ScreenNames.TTSSelfie, {
-              loan: props?.route?.params?.loan,
-            });
-          }, 500);
-        } else {
-          AlertGlobal.show({
-            type: 'warning',
-            title: 'Thông báo',
-            message: response?.data?.meta?.errorMessage,
-            primaryText: 'Đóng',
-          });
-        }
-      } else {
-        AlertGlobal.show({
-          type: 'error',
-          title: 'Thông báo',
-          message: 'Có lỗi xảy ra. Vui lòng thử lại sau',
-          primaryText: 'Đóng',
-        });
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const convertToDate = (input, end) => {
-    let yearPrefix = input.substring(0, 2);
-    let year = end
-      ? '20' + yearPrefix
-      : parseInt(yearPrefix) > 20
-      ? '19' + yearPrefix
-      : '20' + yearPrefix;
-    let month = input.substring(2, 4);
-    let day = input.substring(4, 6);
-
-    return year + '-' + month + '-' + day;
-  };
-
-  const extractMRZInfo = (text) => {
-    let documentNumber = '';
-    let birthDate = '';
-    let expirationDate = '';
-    const regex1 = /VNM(\d{9})/;
-    const match1 = text.match(regex1);
-
-    // If a match is found, return the 9 digits, otherwise return null
-    if (match1) {
-      documentNumber = match1[1];
-    }
-
-    console.log('documentNumber', documentNumber);
-
-    // Regular expression to match 'VNM' followed by 9 digits, then two 6-digit numbers
-    const regex = /(\d{6}).[MF](\d{6})/;
-
-    // Search for the pattern in the text
-    const match = text.replace(/ /g, '').match(regex);
-
-    // If a match is found, return the captured groups, otherwise return null
-    if (match) {
-      console.log({
-        documentNumber: documentNumber,
-        birthDate: match[1],
-        expirationDate: match[2],
-      });
-      (birthDate = match[1]), (expirationDate = match[2]);
-    } else {
-      return null;
-    }
-    if (documentNumber && birthDate && expirationDate) {
-      try {
-        NFCReader.readNFCCard(
-          documentNumber,
-          convertToDate(birthDate, false),
-          convertToDate(expirationDate, true),
-          (error, response) => {
-            try {
-              const convertData = JSON.parse(response);
-              saveDataNfc(convertData);
-            } catch (e) {
-              console.log(e);
-            }
-          }
-        );
-      } catch (e) {
-        console.log(e);
-      }
-    }
-  };
-
-  const handleTextRecognition = async (imagePath) => {
-    try {
-      const result = await TextRecognition.recognize(imagePath);
-      extractMRZInfo(result.text);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const scanNfc = async () => {
-    if (myCamera.current) {
-      const data = await myCamera.current.takePhoto({
-        qualityPrioritization: 'speed',
-      });
-      await handleTextRecognition('file://' + data.path);
-    }
-  };
-
-  const takePhoto = async () => {
-    if (myCamera.current == null || taking) return;
-    setTaking(true);
-    const data = await myCamera.current.takePhoto({
-      qualityPrioritization: 'quality',
-    });
-    const uri = 'file://' + data.path;
-    setTaking(false);
-    if (props?.route?.params?.front && !props.route?.params?.callback) {
+  // Điều hướng sau khi có ảnh (giữ nguyên logic gốc của OCR)
+  const goNextWithUri = (uri) => {
+    if (front && !props.route?.params?.callback) {
       navigation.push(ScreenNames.TTSNationalIDFront, {
         uri,
         loan: props?.route?.params?.loan,
       });
-    } else if (!props?.route?.params?.front && !props.route?.params?.callback) {
+    } else if (!front && !props.route?.params?.callback) {
       navigation.push(ScreenNames.TTSNationalIDBack, {
         uri,
         loan: props?.route?.params?.loan,
@@ -313,229 +212,135 @@ export const OCR = observer(function OCR(props: any) {
     }
   };
 
+  const takePhoto = async () => {
+    if (myCamera.current == null || taking) return;
+    setTaking(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 theo tỉ lệ thẻ (xử lý orientation trong util)
+      const uri = await cropPhotoToAspect(data, CARD_ASPECT_RATIO);
+      setTaking(false);
+      goNextWithUri(uri);
+    } catch (e) {
+      console.error(e);
+      setTaking(false);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Không chụp được ảnh. Vui lòng thử lại.',
+        primaryText: 'Đóng',
+      });
+    }
+  };
+
   const pickImageFromGallery = async () => {
     if (Platform.OS === 'android') {
-      const result = await launchImageLibrary({
-        mediaType: 'photo',
-      });
+      const result = await launchImageLibrary({ mediaType: 'photo' });
       if (result.assets) {
-        if (props?.route?.params?.front && !props.route?.params?.callback) {
-          navigation.push(ScreenNames.TTSNationalIDFront, {
-            uri: result.assets[0]?.uri,
-            loan: props?.route?.params?.loan,
-          });
-        } else if (
-          !props?.route?.params?.front &&
-          !props.route?.params?.callback
-        ) {
-          navigation.push(ScreenNames.TTSNationalIDBack, {
-            uri: result.assets[0]?.uri,
-            loan: props?.route?.params?.loan,
-          });
-        } else {
-          navigation.goBack();
-          props.route?.params?.callback(result.assets[0]?.uri);
-        }
+        goNextWithUri(result.assets[0]?.uri);
       }
     } else {
       ImagePicker.openPicker({}).then((image) => {
-        if (props?.route?.params?.front && !props.route?.params?.callback) {
-          navigation.push(ScreenNames.TTSNationalIDFront, {
-            uri:
-              Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
-            loan: props?.route?.params?.loan,
-          });
-        } else if (
-          !props?.route?.params?.front &&
-          !props.route?.params?.callback
-        ) {
-          navigation.push(ScreenNames.TTSNationalIDBack, {
-            uri:
-              Platform.OS === 'android' ? image?.path : 'file://' + image?.path,
-            loan: props?.route?.params?.loan,
-          });
-        } else {
-          navigation.goBack();
-          props.route?.params?.callback(
-            Platform.OS === 'android' ? image?.path : 'file://' + image?.path
-          );
-        }
+        goNextWithUri(
+          Platform.OS === 'android' ? image?.path : 'file://' + image?.path
+        );
       });
     }
   };
 
   return (
-    <View
-      style={{ flex: 1, backgroundColor: 'black' }}
-      pointerEvents={'box-none'}
-    >
-      <View
-        style={{
-          alignItems: 'center',
-          position: 'absolute',
-          top: insets.top + 16,
-          left: 0,
-          right: 0,
-          zIndex: 100,
-        }}
-      >
-        <TouchableOpacity
-          onPress={() => {
-            navigation.navigate(ScreenNames.Main);
-          }}
-          style={{
-            position: 'absolute',
-            left: 10,
-            top: 4,
-            width: 24,
-            height: 24,
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <IconBackWhite />
-        </TouchableOpacity>
-
-        <MText
-          style={{
-            color: 'white',
-            fontSize: 16,
-            textAlign: 'center',
-            padding: 16,
-            marginTop: 10,
-          }}
-        >
-          {type === 'passport' && props?.route?.params?.front
-            ? 'Chụp CMND/ CCCD mặt trước'
-            : type === 'passport'
-            ? 'Chụp CMND/ CCCD mặt sau'
-            : 'Dùng camera để quét chuỗi ký tự mặt sau thẻ CCCD gắn chíp ở phía dưới'}
-        </MText>
-      </View>
-
-      {passPermission && type === 'passport' && shouldRenderCamera ? (
-        <View
-          style={[
-            commonStyles.alignCenter,
-            commonStyles.fill,
-            commonStyles.justifyCenter,
-            {
-              position: 'absolute',
-              width: Dimensions.get('window').width,
-              height: Dimensions.get('window').height,
-            },
-          ]}
-        >
-          {device ? (
-            <View style={styles.passportCameraFrame}>
+    <View style={styles.container}>
+      {passPermission && shouldRenderCamera ? (
+        <>
+          <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
+            <TouchableOpacity
+              onPress={() => navigation.navigate(ScreenNames.Main)}
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            >
+              <IconBack />
+            </TouchableOpacity>
+            <View style={styles.titleWrap}>
+              <MText style={styles.headerTitle}>CMND / CCCD</MText>
+            </View>
+          </View>
+
+          <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ẻ: 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={styles.photoFrame}
+            onLayout={(e) => {
+              frameSize.current = e.nativeEvent.layout;
+            }}
+            onStartShouldSetResponder={() => true}
+            onResponderRelease={(e) =>
+              focusAt(e.nativeEvent.locationX, e.nativeEvent.locationY)
+            }
+          >
+            {device ? (
               <VisionCamera
                 ref={myCamera}
                 style={StyleSheet.absoluteFill}
                 device={device}
-                isActive={true}
+                isActive={isFocused}
                 photo={true}
-                format={format}
               />
-            </View>
-          ) : (
-            <ActivityIndicator />
-          )}
+            ) : 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>
+
           <TouchableOpacity
-            onPress={() => {
-              pickImageFromGallery();
-            }}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginTop: 16,
-            }}
+            style={styles.galleryButton}
+            onPress={pickImageFromGallery}
           >
             <IconUpload />
-            <MText
-              style={{
-                color: 'white',
-                fontSize: 12,
-                marginLeft: 8,
-              }}
-            >
-              Tải ảnh từ thư viện
-            </MText>
+            <MText style={styles.galleryText}>Tải ảnh từ thư viện</MText>
           </TouchableOpacity>
 
-          <View style={[styles.buttonContainer, { bottom: insets.bottom }]}>
-            <MText
-              style={{
-                color: 'white',
-                fontSize: 14,
-                textAlign: 'center',
-                padding: 16,
-              }}
-            >
-              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>
-            <MButton
-              onPress={() => {
-                takePhoto();
-              }}
-            >
-              <TakePhotoSvg />
-            </MButton>
-          </View>
-        </View>
-      ) : passPermission && type === 'nfc' && shouldRenderCamera ? (
-        <>
-          {device ? (
-            <VisionCamera
-              ref={myCamera}
-              style={styles.camera}
-              device={device}
-              isActive={true}
-              photo={true}
-              format={format}
-            />
-          ) : null}
-          <View style={styles.overlay}>
-            <View style={styles.overlayTop} />
-            <View style={styles.overlayCenter}>
-              <View style={styles.overlayLeft} />
-              <View style={styles.overlayRect}></View>
-              <View style={styles.overlayRight} />
-            </View>
-            <View style={styles.overlayBottom} />
-          </View>
-          <View
-            style={[styles.buttonContainer, { bottom: insets.bottom + 24 }]}
+          <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={takePhoto}
+            disabled={taking}
           >
-            <MText
-              style={{
-                color: 'white',
-                fontSize: 14,
-                textAlign: 'center',
-                padding: 16,
-              }}
-            >
-              Vui lòng đặt chuỗi kí tự nằm vừa khung hình chữ nhật, chụp đủ ánh
-              sáng và rõ nét.
-            </MText>
-            <TouchableOpacity
-              onPress={() => {
-                scanNfc();
-              }}
-            >
-              <TakePhotoSvg />
-            </TouchableOpacity>
-          </View>
+            <TakePhotoSvg />
+          </TouchableOpacity>
         </>
-      ) : (
-        <></>
-      )}
+      ) : null}
 
       <Modal
         isVisible={showModal}
         style={$modal}
         backdropTransitionInTiming={0}
-        nimationOutTiming={200}
+        animationOutTiming={200}
         animationInTiming={200}
         animationIn={'slideInUp'}
         animationOut={'fadeOutDown'}
@@ -564,9 +369,7 @@ export const OCR = observer(function OCR(props: any) {
               <CloseIcon />
             </TouchableOpacity>
             <MText style={$title}>NHẬN DIỆN GIẤY TỜ TÙY THÂN</MText>
-            <MText style={$description}>
-              Chụp ảnh 2 mặt hoặc NFC CCCD/ CMND
-            </MText>
+            <MText style={$description}>Chụp ảnh 2 mặt CCCD/ CMND</MText>
 
             <Image
               source={require('../../assets/tts/vehicleStep.png')}
@@ -574,52 +377,9 @@ export const OCR = observer(function OCR(props: any) {
             />
 
             <View style={$bg}>
-              <View
-                style={{
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                }}
-              >
-                <Image
-                  source={require('../../assets/tts/Frame1000011946.png')}
-                  style={{
-                    width: '60%',
-                    height: 70,
-                    resizeMode: 'contain',
-                    marginVertical: 16,
-                  }}
-                />
-              </View>
-              <View style={{ marginTop: 10, paddingHorizontal: 24 }}>
+              <View style={{ marginTop: 16, paddingHorizontal: 24 }}>
                 <MText style={[$title2, { textAlign: 'left' }]}>
-                  Cách 1: NFC (Áp dụng cho CCCD gắn chip)
-                </MText>
-                <View style={$row}>
-                  <TimaSmall />
-                  <MText style={$txt}>
-                    Đặt phần chip đồng gần lại với phần phía trên của{'\n'}mặt
-                    lưng điện thoại
-                  </MText>
-                </View>
-                <View style={$row}>
-                  <TimaSmall />
-                  <MText style={$txt}>
-                    Giữ nguyên cho đến khi đọc xong thông tin thẻ
-                  </MText>
-                </View>
-                <Image
-                  source={require('../../assets/tts/Frame1000011953.png')}
-                  style={{
-                    width: '100%',
-                    height: 70,
-                    resizeMode: 'contain',
-                    marginTop: 16,
-                  }}
-                />
-              </View>
-              <View style={{ marginTop: 10, paddingHorizontal: 24 }}>
-                <MText style={[$title2, { textAlign: 'left' }]}>
-                  Cách 2: Chụp 2 mặt
+                  Lưu ý chụp CCCD/ CMND
                 </MText>
                 <View style={$row}>
                   <TimaSmall />
@@ -651,82 +411,131 @@ export const OCR = observer(function OCR(props: any) {
                 />
               </View>
 
-              <View
+              <TouchableOpacity
+                onPress={() => {
+                  setShowModal(false);
+                  save(OCR_V1, true);
+                }}
                 style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
                   margin: 16,
+                  height: 40,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 40,
+                  borderWidth: 1,
+                  borderColor: '#EF592E',
                 }}
               >
-                <TouchableOpacity
-                  onPress={() => {
-                    setType('passport');
-                    setShowModal(false);
-                    save(OCR_V1, true);
-                  }}
-                  style={{
-                    flex: 1,
-                    borderWidth: 1,
-                    borderColor: '#EF592E',
-                    height: 40,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: 40,
-                    // marginRight: 16,
-                  }}
-                >
-                  <MText
-                    style={{
-                      color: '#EF592E',
-                      fontSize: 16,
-                    }}
-                  >
-                    Chụp 2 mặt
-                  </MText>
-                </TouchableOpacity>
-                {/* <MButton
-                  style={{
-                    flex: 1,
-                  }}
-                  onPress={() => {
-                    setType('nfc');
-                    setShowModal(false);
-                    save(OCR_V1, true);
-                  }}
-                >
-                  <LinearGradient
-                    start={{ x: 1, y: 0 }}
-                    end={{ x: 0, y: 1 }}
-                    style={{
-                      height: 40,
-                      marginVertical: 16,
-                      borderRadius: 30,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                    colors={['#FF7A00', '#EF4123']}
-                  >
-                    <MText
-                      style={{
-                        fontSize: 16,
-                        color: 'white',
-                      }}
-                    >
-                      NFC
-                    </MText>
-                  </LinearGradient>
-                </MButton> */}
-              </View>
-              <View style={{ height: 24 }}></View>
+                <MText style={{ color: '#EF592E', fontSize: 16 }}>
+                  Chụp 2 mặt
+                </MText>
+              </TouchableOpacity>
+              <View style={{ height: 24 }} />
             </View>
           </View>
         </LinearGradient>
       </Modal>
-
-      <Loading isLoading={isLoading} />
     </View>
   );
 });
+
+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,
+  },
+  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 },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+});
+
 const $row: ViewStyle = {
   flexDirection: 'row',
   alignItems: 'center',
@@ -774,10 +583,6 @@ const $description: TextStyle = {
   textAlign: 'center',
 };
 
-const $flex: ViewStyle = {
-  flex: 1,
-};
-
 const $modal: ViewStyle = {
   justifyContent: 'flex-end',
   margin: 0,
@@ -787,94 +592,3 @@ const $container: ViewStyle = {
   borderTopRightRadius: 26,
   borderTopLeftRadius: 26,
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  camera: {
-    flex: 1,
-  },
-  passportCameraFrame: {
-    width: Dimensions.get('window').width,
-    height: 260,
-    overflow: 'hidden',
-    backgroundColor: 'black',
-  },
-  buttonContainer: {
-    flex: 0,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    zIndex: 1000,
-  },
-  captureButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 35,
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  innerCaptureButton: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: 'red',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  overlayTop: {
-    flex: 1,
-    backgroundColor: 'black',
-    width: '100%',
-  },
-  overlayCenter: {
-    flexDirection: 'row',
-  },
-  overlayLeft: {
-    flex: 1,
-    backgroundColor: 'black',
-  },
-  overlayRect: {
-    width: '90%',
-    height: 100,
-    borderColor: 'white',
-    borderWidth: 2,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  instructionText: {
-    color: 'white',
-    textAlign: 'center',
-    paddingHorizontal: 10,
-    fontSize: 14,
-    position: 'absolute',
-    top: -50,
-  },
-  overlayRight: {
-    flex: 1,
-    backgroundColor: 'black',
-  },
-  overlayBottom: {
-    flex: 1,
-    backgroundColor: 'black',
-    width: '100%',
-  },
-  mrzContainer: {
-    padding: 10,
-  },
-  mrzText: {
-    fontSize: 16,
-  },
-});