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

package/src/navigation/primary-navigator.tsx

@@ -83,6 +83,8 @@ import LoanBuyCar from '../screens/v3/LoanBuyCar';
 import InfoLoanMotobike from '../screens/motobike/InfoLoanMotobike';
 import ReviewLoanMotobike from '../screens/motobike/ReviewLoanMotobike';
 import PolicyF88 from '../screens/motobike/PolicyF88';
+import OcrStart from '../screens/NFC/OcrStart';
+import ScanMRZ from '../screens/NFC/ScanMRZ';
 
 export const ScreenNames = {
   Main: 'HomeTimaCare',
@@ -157,6 +159,9 @@ export const ScreenNames = {
   InfoLoanMotobike: 'InfoLoanMotobike',
   ReviewLoanMotobike: 'ReviewLoanMotobike',
   PolicyF88: 'PolicyF88',
+  OcrStart: 'OcrStart',
+  ScanMRZ: 'ScanMRZ',
+  CameraVehicleRegistration: 'CameraVehicleRegistration',
 };
 
 const Stack = createNativeStackNavigator();
@@ -332,6 +337,8 @@ export function PrimaryNavigator(props) {
         component={ReviewLoanMotobike}
       />
       <Stack.Screen name={ScreenNames.PolicyF88} component={PolicyF88} />
+      <Stack.Screen name={ScreenNames.OcrStart} component={OcrStart} />
+      <Stack.Screen name={ScreenNames.ScanMRZ} component={ScanMRZ} />
     </Stack.Navigator>
   );
 }

package/src/screens/NFC/OcrStart.tsx

@@ -0,0 +1,171 @@
+//@ts-nocheck
+import React from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import { IconBack, IconUserSecurity, TimaSmall } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import LinearGradient from 'react-native-linear-gradient';
+import { ScreenNames } from '../../navigation';
+
+export default function OcrStart(props: any) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
+        <TouchableOpacity
+          onPress={() => navigation.goBack()}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+        >
+          <IconBack />
+        </TouchableOpacity>
+      </View>
+      <ScrollView style={{ flex: 1 }}>
+        <View style={styles.column_top}>
+          <IconUserSecurity />
+          <MText style={styles.title}>Xác thực giấy tờ để tiếp tục</MText>
+        </View>
+        <View style={styles.content}>
+          <MText style={styles.label}>
+            Cách 1: NFC (Áp dụng cho CCCD gắn chip)
+          </MText>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Đưa phần chip của CCCD đến vị trí đọc NFC trên mặt lưng điện
+              thoại.
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Giữ nguyên để hệ thống đọc giữ liệu trong 5-10 giây
+            </MText>
+          </View>
+          <Image
+            source={require('../../assets/tts/Frame1000011953.png')}
+            style={{
+              width: '100%',
+              height: 82,
+              resizeMode: 'contain',
+              marginTop: 16,
+            }}
+          />
+          <MText style={[styles.label, { marginTop: 16 }]}>
+            Cách 2: Chụp 2 mặt
+          </MText>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Nên đặt CCCD/ CC lên mặt phẳng để chụp
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Đặt CCCD/ CC nằm gọn trong khung hình (Không quá nhỏ hay quá to
+              làm mất chi tiết)
+            </MText>
+          </View>
+          <View style={styles.row}>
+            <TimaSmall />
+            <MText style={styles.description}>
+              Chọn nơi ánh sáng tốt, tránh lóa/ chói hình chụp
+            </MText>
+          </View>
+          <Image
+            source={require('../../assets/tts/Frame1000011947.png')}
+            style={{
+              width: '100%',
+              height: 82,
+              resizeMode: 'contain',
+              marginTop: 16,
+            }}
+          />
+        </View>
+      </ScrollView>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate(ScreenNames.ScanMRZ, props);
+        }}
+        style={{
+          marginHorizontal: 16,
+          marginBottom: 24,
+        }}
+      >
+        <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',
+            }}
+          >
+            Xác thực ngay
+          </MText>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    backgroundColor: '#FFF3E9',
+  },
+  title: {
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: 16,
+  },
+  column_top: {
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: 16,
+    backgroundColor: '#FFF3E9',
+    paddingBottom: 16,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  label: {
+    fontFamily: 'BeVietnamPro-SemiBold',
+    fontWeight: '600',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  description: {
+    fontSize: 12,
+    flex: 1,
+  },
+});