react-native-timacare 3.3.16 → 3.3.18

package/src/screens/home/DigitalTopupItem.tsx

@@ -29,8 +29,20 @@ import {
 } from '../../assets/digital_topup';
 import { color } from '../../theme';
 import { ScreenNames } from '../../navigation';
-import { Info } from '../../assets/icons';
+import { Close2Icon, Info } from '../../assets/icons';
 import { Api } from '../../services/api';
+import {
+  Icon10,
+  Icon2,
+  Icon3,
+  Icon4,
+  Icon5,
+  Icon6,
+  Icon7,
+  Icon8,
+  Icon9,
+  IconSuccess,
+} from '../../assets/v3';
 
 interface IProps {
   item?: any;
@@ -597,9 +609,9 @@ export default function DigitalTopupItem({
         )}
       </View>
       <Modal
-        visible={showModalInfo}
-        backdropColor={'rgba(0,0,0,0.5)'}
-        backdropOpacity={1}
+        isVisible={showModalInfo}
+        backdropColor="#000"
+        backdropOpacity={0.5}
       >
         <View
           style={{
@@ -715,6 +727,262 @@ export default function DigitalTopupItem({
           </View>
         </View>
       </Modal>
+
+      <Modal
+        isVisible={showModal}
+        backdropColor="#000"
+        backdropOpacity={0.5}
+        onBackdropPress={() => setShowModal(false)}
+      >
+        <View
+          style={{
+            borderRadius: 12,
+            backgroundColor: 'white',
+            padding: 16,
+          }}
+        >
+          <MText
+            style={{
+              fontSize: 16,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              marginTop: 16,
+            }}
+          >
+            Các bước hoàn thiện khoản vay
+          </MText>
+          <MText
+            style={{
+              textAlign: 'center',
+              color: '#828282',
+            }}
+          >
+            Thực hiện theo các bước sau
+          </MText>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon2 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 1
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
+                  THÔNG TIN KHOẢN VAY
+                </MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Nhập thông tin: Số tiền vay, Thời hạn vay, ...
+            </MText>
+          </View>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon3 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 2
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
+                  THÔNG TIN CÁ NHÂN
+                </MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Thực hiện NFC/ OCR giấy tờ CCCD/CC và chụp 1 ảnh chân dung
+            </MText>
+          </View>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon4 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 3
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>EKYC</MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Thực hiện eKYC khuôn mặt
+            </MText>
+          </View>
+          <View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 4,
+                  backgroundColor: '#FFF2F2',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon5 />
+              </View>
+              <View>
+                <MText
+                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
+                >
+                  Bước 4
+                </MText>
+                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
+                  KÝ HỢP ĐỒNG
+                </MText>
+              </View>
+            </View>
+            <MText style={{ fontSize: 10, marginTop: 5 }}>
+              Ký số bằng OTP hoặc qua Ứng dụng Mysign
+            </MText>
+            <MText style={{ fontSize: 10, color: '#999999' }}>
+              Lưu ý: Để bảo mật thông tin cá nhân, hợp đồng sẽ được ký tại
+              Viettel qua Ứng dụng MySign, Website hopdongdientu.viettel.vn,...
+            </MText>
+          </View>
+          <View
+            style={{
+              backgroundColor: '#FFF8F2',
+              padding: 12,
+              borderRadius: 8,
+              marginTop: 16,
+            }}
+          >
+            <MText style={{ fontSize: 12, fontWeight: 'bold' }}>
+              Ý nghĩa biểu tượng
+            </MText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Đang cần thực hiện
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <Icon2 />
+                <Icon3 />
+                <Icon4 />
+                <Icon5 />
+              </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Chưa thể thực hiện
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <Icon7 />
+                <Icon8 />
+                <Icon9 />
+                <Icon10 />
+              </View>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}
+            >
+              <MText style={{ fontSize: 10, width: '35%' }}>
+                Đã hoàn thành
+              </MText>
+              <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+              >
+                <IconSuccess />
+              </View>
+            </View>
+          </View>
+
+          <TouchableOpacity
+            style={{ position: 'absolute', top: 16, right: 16 }}
+            onPress={() => setShowModal(false)}
+          >
+            <Close2Icon />
+          </TouchableOpacity>
+        </View>
+      </Modal>
     </>
   );
 }

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

@@ -300,7 +300,7 @@ export const OCR = observer(function OCR(props: any) {
       fixOrientation: false,
       forceUpOrientation: false,
       orientation: RNCamera.Constants.Orientation.portrait,
-      quality: 0.8,
+      quality: 0.9,
       pictureSize: '1280x720',
     };
     const data = await myCamera.current.takePictureAsync(options);

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

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
@@ -6,17 +6,13 @@ import {
   Image,
   ImageStyle,
   Platform,
-  SafeAreaView,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
+  Alert,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -27,12 +23,7 @@ import { RNCamera } from 'react-native-camera';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  CloseIcon,
-  IconBackWhite,
-  TakePhotoSvg,
-  TimaSmall,
-} from '../../assets/icons';
+import { CloseIcon, TakePhotoSvg, TimaSmall } from '../../assets/icons';
 import MButton from '../../components/MButton';
 import { commonStyles } from '../CommonStyles';
 import { load, OCR_V3, save } from '../../utils/storage';
@@ -41,8 +32,10 @@ import DeviceInfo from 'react-native-device-info';
 import ImagePicker from 'react-native-image-crop-picker';
 import { IconUpload } from '../../assets/svgs';
 import { launchImageLibrary } from 'react-native-image-picker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function RegisterCamera(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
@@ -252,7 +245,7 @@ export default function RegisterCamera(props: any) {
           <View
             style={{
               marginVertical: 16,
-              marginTop: DeviceInfo.hasNotch() ? 70 : 8,
+              marginTop: insets.top + 16,
             }}
           >
             <TouchableOpacity
@@ -305,48 +298,39 @@ export default function RegisterCamera(props: any) {
             {({ camera, status, recordAudioPermissionStatus }) => {
               if (status !== 'READY') return <ActivityIndicator />;
             }}
-            <View
-              style={{
-                alignItems: 'center',
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                right: 0,
-              }}
-            >
-              <TouchableOpacity
-                onPress={() => {
-                  pickImageFromGallery();
-                }}
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 8,
-                  marginTop: 16,
-                }}
-              >
-                <IconUpload />
-                <MText
-                  style={{
-                    color: 'white',
-                    fontSize: 12,
-                  }}
-                >
-                  Tải ảnh từ thư viện
-                </MText>
-              </TouchableOpacity>
-            </View>
           </RNCamera>
           <View
             style={{
               position: 'absolute',
-              bottom: DeviceInfo.hasNotch() ? 16 : 8,
+              bottom: insets.bottom,
               left: 0,
               right: 0,
             }}
           >
             {!taking && (
               <>
+                <View style={{ alignItems: 'center', marginBottom: 8 }}>
+                  <TouchableOpacity
+                    onPress={() => {
+                      pickImageFromGallery();
+                    }}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}
+                  >
+                    <IconUpload />
+                    <MText
+                      style={{
+                        color: 'white',
+                        fontSize: 12,
+                      }}
+                    >
+                      Tải ảnh từ thư viện
+                    </MText>
+                  </TouchableOpacity>
+                </View>
                 <MText
                   style={{
                     color: 'white',

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

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
@@ -7,11 +7,7 @@ import {
   Platform,
   View,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import {
   request,
   PERMISSIONS,
@@ -26,11 +22,12 @@ import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
 import Loading from '../../components/Loading';
 import { Api } from '../../services/api';
 import { ScreenNames } from '../../navigation';
-import DeviceInfo from 'react-native-device-info';
 import appStore from '../../AppStore';
 import { logEvent, logEventFb } from '../../utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function TTSSelfie(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
   const navigation = useNavigation();
@@ -221,7 +218,7 @@ export default function TTSSelfie(props: any) {
               flexDirection: 'row',
               alignItems: 'center',
               justifyContent: 'center',
-              marginTop: DeviceInfo.hasNotch() ? 70 : 16,
+              marginTop: insets.top + 16,
             }}
           >
             <MButton

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

@@ -1,23 +1,18 @@
-//@ts-nocheck
+// @ts-nocheck
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  ActivityIndicator,
+  Alert,
   Dimensions,
   Image,
   ImageStyle,
   Platform,
-  SafeAreaView,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  useIsFocused,
-} from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Modal from 'react-native-modal';
 import { MText } from '../../components/MText';
 import LinearGradient from 'react-native-linear-gradient';
@@ -41,14 +36,14 @@ import { load, OCR_V2, save } from '../../utils/storage';
 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';
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+const { width: screenWidth } = 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;
 
 export default function VehicleCamera(props: any) {
+  const insets = useSafeAreaInsets();
   const isFocused = useIsFocused();
   const [cameraKey, setCameraKey] = useState(0);
 
@@ -276,15 +271,14 @@ export default function VehicleCamera(props: any) {
               buttonPositive: 'Ok',
               buttonNegative: 'Cancel',
             }}
-            quality={0.8}
+            quality={0.9}
             pictureSize="1280x720"
           >
             <View style={$overlay}>
               <View style={$darkOverlayTop} />
-              <View style={$row}>
+              <View style={$overlayRow}>
                 <View style={$darkOverlaySide} />
                 <View style={$frameBorder}>
-                  {/* Top Left */}
                   <Corner
                     style={{
                       top: 0,
@@ -295,7 +289,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Top Right */}
                   <Corner
                     style={{
                       top: 0,
@@ -306,7 +299,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Bottom Left */}
                   <Corner
                     style={{
                       bottom: 0,
@@ -317,7 +309,6 @@ export default function VehicleCamera(props: any) {
                     }}
                   />
 
-                  {/* Bottom Right */}
                   <Corner
                     style={{
                       bottom: 0,
@@ -394,7 +385,7 @@ export default function VehicleCamera(props: any) {
               </>
             )}
           </View>
-          <SafeAreaView
+          <View
             style={[
               commonStyles.fill,
               { position: 'absolute', width: '100%', height: '100%' },
@@ -404,7 +395,7 @@ export default function VehicleCamera(props: any) {
               style={[
                 commonStyles.row,
                 commonStyles.alignCenter,
-                { paddingVertical: 16 },
+                { paddingVertical: 16, marginTop: insets.top },
               ]}
             >
               <MButton
@@ -436,7 +427,7 @@ export default function VehicleCamera(props: any) {
             >
               {title}
             </MText>
-          </SafeAreaView>
+          </View>
         </View>
       ) : (
         <View></View>
@@ -592,17 +583,17 @@ const $overlay: ViewStyle = {
 
 const $darkOverlayTop: ViewStyle = {
   width: '100%',
-  height: (screenHeight - frameHeight) / 2,
+  flex: 1,
   backgroundColor: overlayColor,
 };
 
 const $darkOverlayBottom: ViewStyle = {
   width: '100%',
-  height: (screenHeight - frameHeight) / 2,
+  flex: 1,
   backgroundColor: overlayColor,
 };
 const $darkOverlaySide: ViewStyle = {
-  width: (screenWidth - frameWidth) / 2,
+  flex: 1,
   height: frameHeight,
   backgroundColor: overlayColor,
 };
@@ -611,6 +602,13 @@ const $frameBorder: ViewStyle = {
   height: frameHeight,
 };
 
+const $overlayRow: ViewStyle = {
+  width: '100%',
+  height: frameHeight,
+  flexDirection: 'row',
+  alignItems: 'center',
+};
+
 const $row: ViewStyle = {
   flexDirection: 'row',
   alignItems: 'center',