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

package/src/screens/camera/CCCDCameraScreen.tsx

@@ -1,8 +1,13 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ActivityIndicator,
-  Dimensions,
   Platform,
   StyleSheet,
   TouchableOpacity,
@@ -10,10 +15,9 @@ 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';
@@ -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;
     }
   };
 
@@ -135,6 +185,9 @@ export default function CCCDCameraScreen(props) {
 
   useEffect(() => {
     requestPermissions();
+    return () => {
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+    };
   }, []);
 
   useEffect(() => {
@@ -160,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

@@ -50,7 +50,7 @@ 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 Modal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import RNFS from 'react-native-fs';
 

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

@@ -35,7 +35,7 @@ import MHeader from '../../components/MHeader';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import moment from 'moment';
-import ReactNativeModal from 'react-native-modal';
+import ReactNativeModal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import {
   TourGuideProvider, // Main provider

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

@@ -28,7 +28,7 @@ import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { formatMoney } from '../../utils';
 import MHeader from '../../components/MHeader';
-import ReactNativeModal from 'react-native-modal';
+import ReactNativeModal from '../../components/AppModal';
 import LinearGradient from 'react-native-linear-gradient';
 import moment from 'moment';
 import {

package/src/screens/digital-lending/Step6.tsx

@@ -24,7 +24,7 @@ import {
 import { MText } from '../../components/MText';
 import digitalLendingStore from './store';
 import { ScreenNames } from '../../navigation';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 
 export const Step6 = observer(function Step6() {

package/src/screens/eSign/index.tsx

@@ -31,7 +31,7 @@ import Slack from 'react-native-slack-webhook';
 import homeStore from '../home/Store';
 import appStore from '../../AppStore';
 import Pdf from 'react-native-pdf';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import KeyboardSpacer from '../../components/keyboardspace';
 import Loading from '../../components/Loading';
 import MHeader from '../../components/MHeader';

package/src/screens/home/DigitalTopupItem.tsx

@@ -12,7 +12,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { IconMoney2, IconQuestion, IconTick } from '../../assets/svgs';
 import { formatMoney } from '../../utils';
 import { MText } from '../../components/MText';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import {
   IconStep1,
   IconStep1Disable,

package/src/screens/home/ItemMotoBikeLoan.tsx

@@ -22,7 +22,7 @@ import {
 } from '../../assets/v3';
 import { ScreenNames } from '../../navigation';
 import { CheckBox, CheckBoxActive, Close2Icon, Info } from '../../assets/icons';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import { Api } from '../../services/api';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 

package/src/screens/home/index.tsx

@@ -11,22 +11,16 @@ import {
   RefreshControl,
   SafeAreaView,
   ScrollView,
-  StatusBar,
   StyleSheet,
   TouchableOpacity,
   View,
-  ViewStyle,
 } from 'react-native';
-import {
-  useNavigation,
-  StackActions,
-  CommonActions,
-} from '@react-navigation/native';
+import { useNavigation, StackActions } from '@react-navigation/native';
 import { observer, Observer } from 'mobx-react-lite';
 import { commonStyles } from '../CommonStyles';
 import { MText } from '../../components/MText';
 import { color } from '../../theme';
-import { diffDays, formatDDMMYYY, formatMoney } from '../../utils';
+import { formatDDMMYYY, formatMoney } from '../../utils';
 import homeStore from './Store';
 import { ScreenNames } from '../../navigation';
 import {
@@ -37,40 +31,25 @@ import {
   CheckBoxActive,
   CIMBSmall,
   Close2Icon,
-  CloseIcon,
   Contract,
   ContractActive,
   ContractTimeIcon,
-  IconBackWhite,
   IconEviden,
-  IconNavClose,
-  IconNotify,
   IconSchedule,
-  IconSign,
   IconSign2,
   IconVideo,
   Info,
   LogoSmall,
   NotFoundSvg,
-  OcrSvg,
-  SignDisable,
-  TimaNormal,
-  TopupSuccessSvg,
   TopupSvg,
   UpdateIcon,
 } from '../../assets/icons';
 import Geolocation from 'react-native-geolocation-service';
-import axios from 'axios';
-import {
-  getUniqueId,
-  getManufacturer,
-  getDeviceId,
-} from 'react-native-device-info';
+
 import FullSubmitStore from '../full-submit/store';
 import QuickSubmitStore from '../quick-submit/store';
 import LinearGradient from 'react-native-linear-gradient';
-import { SliderBox } from 'react-native-image-slider-box';
-import notificationStore from '../notification/store';
+
 import {
   openSettings,
   PERMISSIONS,
@@ -78,7 +57,7 @@ import {
   RESULTS,
 } from 'react-native-permissions';
 import appStore from '../../AppStore';
-import Modal from 'react-native-modal';
+import Modal from '../../components/AppModal';
 import Pdf from 'react-native-pdf';
 import { Api } from '../../services/api';
 import { load, save } from '../../utils/storage';
@@ -87,24 +66,7 @@ import SkeletonLoanList, {
 } from '../../components/SkeletonLoanCard';
 import MButton from '../../components/MButton';
 import ttsStore from '../toan-trinh-so/store';
-import {
-  IconOCRSuccess,
-  IconEdit,
-  IconEditSuccess,
-  IconEkyc,
-  IconEkycSuccess,
-  IconEkycDisable,
-  IconSignDisable,
-  IconTima16,
-  IconExpand,
-  IconExpandUp,
-  IconSignSuccess,
-  IconMoney2,
-  IconEditDisable,
-  IconTick,
-  IconOcr,
-} from '../../assets/svgs';
-import { o } from 'ramda';
+import { IconMoney2 } from '../../assets/svgs';
 import ItemTimaOne from '../../components/ItemTimaOne';
 import ModalOptionLoan from '../../components/ModalOptionLoan';
 import AlertLoan from '../../components/AlertLoan';
@@ -114,21 +76,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ItemMotoBikeLoan from './ItemMotoBikeLoan';
 import BoxGuidline from './BoxGuidline';
 import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
-
-const listBanners = [
-  require('../../assets/img/banner1.png'),
-  require('../../assets/img/banner2.png'),
-];
-
-const $action: ViewStyle = {
-  flexDirection: 'column',
-  alignItems: 'center',
-};
+import MHeader from '../../components/MHeader';
 
 // Gradient cam thương hiệu, dùng lặp lại ở nhiều nút trong màn hình
 const GRADIENT_ORANGE = ['#FF8E4F', '#EF592E'];
 
-let _unsubscribe;
 // Dữ liệu tham chiếu tĩnh (ngân hàng, nghề nghiệp, tỉnh...) chỉ cần prefetch 1 lần/phiên
 let _didPrefetchRefData = false;
 
@@ -161,7 +113,6 @@ export const Home = observer(function Home() {
   // Hành động điều hướng chờ chạy SAU khi modal đóng hẳn (onModalHide)
   const pendingNavRef = React.useRef<(() => void) | null>(null);
   const [listLoan, setListLoan] = useState<any[]>([]);
-  const [checkEKYC, setCheckEKYC] = useState<any>({});
   const [isLoading, setIsLoading] = useState(false);
   const [loanCimb, setLoanCimb] = useState(null);
   const [loan, setLoan] = useState(null);
@@ -594,63 +545,7 @@ export const Home = observer(function Home() {
     <View
       style={[commonStyles.fill, { zIndex: 1, backgroundColor: '#FFFFFF' }]}
     >
-      <LinearGradient colors={GRADIENT_ORANGE}>
-        <View style={{ marginTop: insets.top + 16 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              paddingHorizontal: 16,
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              paddingBottom: 8,
-            }}
-          >
-            <MText
-              style={{
-                fontWeight: 'bold',
-                color: 'white',
-                fontSize: 14,
-              }}
-            >
-              Vay Online 24/7
-            </MText>
-            <View
-              style={{
-                borderWidth: 1,
-                borderColor: 'white',
-                flexDirection: 'row',
-                borderRadius: 16,
-                height: 30,
-                alignItems: 'center',
-              }}
-            >
-              <TouchableOpacity
-                style={{
-                  paddingHorizontal: 10,
-                }}
-                onPress={() => {
-                  Linking.openURL(`tel:1900633688`);
-                }}
-              >
-                <Call />
-              </TouchableOpacity>
-              <View
-                style={{ width: 1, height: 30, backgroundColor: 'white' }}
-              />
-              <TouchableOpacity
-                style={{
-                  paddingHorizontal: 10,
-                }}
-                onPress={() => {
-                  navigation.navigate('MyBank.Main');
-                }}
-              >
-                <CloseIcon />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </View>
-      </LinearGradient>
+      <MHeader title="Vay Online 24/7" />
       <ScrollView
         refreshControl={
           <RefreshControl