react-native-timacare 3.3.64 → 3.3.66

package/src/screens/full-submit/selfie.tsx

@@ -1,20 +1,19 @@
 //@ts-nocheck
 import { StackActions, useNavigation } from '@react-navigation/native';
-import { observer, Observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  Dimensions,
+  Animated,
+  Easing,
   Image,
-  ImageStyle,
   SafeAreaView,
   ScrollView,
-  StatusBar,
-  TouchableOpacity,
+  StyleSheet,
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { CIMBBank, IconBackWhite } from '../../assets/icons';
+import { CIMBBank, IConCamera, Tick2, TimaSmall } from '../../assets/icons';
 import CIMBLoading from '../../components/CIMBLoading';
 import MButton from '../../components/MButton';
 import { MText } from '../../components/MText';
@@ -23,30 +22,55 @@ import { commonStyles } from '../CommonStyles';
 import FullSubmitStore from './store';
 import MHeader from '../../components/MHeader';
 
-const logoView: ImageStyle = {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  resizeMode: 'cover',
-};
+// require() ở module scope: không phải resolve lại asset mỗi lần render
+const BACKGROUND = require('../../assets/img/EKYC.png');
+const PLACEHOLDER = require('../../assets/img/selfie.png');
+
+// Khung dọc 3:4 - đúng tỉ lệ ảnh máy ảnh trước trả về nên ảnh khách chụp
+// không bị cắt hai bên như khung 356/534 cũ
+const PREVIEW_ASPECT = 3 / 4;
+
+const NOTES = [
+  'Nhìn thẳng vào máy ảnh, khuôn mặt nằm gọn trong khung hình',
+  'Chụp nơi đủ sáng, tránh ngược sáng hoặc bóng đổ lên mặt',
+  'Không đeo kính, khẩu trang, mũ và để lộ rõ đường nét khuôn mặt',
+];
 
 export const CimbSelfie = observer(function CimbSelfie(props: any) {
-  const [isLoading, setIsLoading] = useState(false);
   const navigation = useNavigation();
+  const [isLoading, setIsLoading] = useState(false);
   const [photo, setPhoto] = useState(null);
+  // Chặn double-submit: setIsLoading là bất đồng bộ nên hai lần bấm liên tiếp
+  // vẫn lọt qua được nếu chỉ dựa vào state.
+  const submitting = useRef(false);
   const loan = props?.route.params?.loan;
-  const takePhoto = () => {
-    navigation.push(ScreenNames.Camera, {
+
+  // Ảnh vừa chụp hiện lên bằng fade + scale nhẹ để thấy rõ khung ảnh đã đổi
+  const reveal = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!photo) return;
+    reveal.setValue(0);
+    Animated.timing(reveal, {
+      toValue: 1,
+      duration: 260,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [photo, reveal]);
+
+  const takePhoto = useCallback(() => {
+    navigation.push(ScreenNames.SelfieCamera, {
       front: true,
       selfie: true,
-      callback: (photo) => {
-        setPhoto(photo);
-      },
+      callback: setPhoto,
     });
-  };
+  }, [navigation]);
 
-  const nextStep = () => {
+  const nextStep = useCallback(() => {
+    if (!photo || submitting.current) return;
+    submitting.current = true;
     setIsLoading(true);
+
     const formData = new FormData();
     formData.append('loanbriefId', loan?.id);
     formData.append('TypeDocumentId', 487);
@@ -55,126 +79,123 @@ export const CimbSelfie = observer(function CimbSelfie(props: any) {
       type: 'image/jpg',
       name: 'image.jpg',
     });
+
     FullSubmitStore.uploadDocument(
       formData,
       () => {
+        submitting.current = false;
         setIsLoading(false);
         setTimeout(() => {
           navigation.dispatch(
-            StackActions.push(ScreenNames.MRZScanner, {
-              loan: loan,
-            })
+            StackActions.push(ScreenNames.MRZScanner, { loan })
           );
         }, 600);
       },
       () => {
+        submitting.current = false;
         setIsLoading(false);
       }
     );
-  };
+  }, [photo, loan, navigation]);
+
+  const goBack = useCallback(() => navigation.goBack(), [navigation]);
+
+  const canSubmit = !!photo && !isLoading;
 
   return (
-    <View style={{ flex: 1 }}>
-      <Image source={require('../../assets/img/EKYC.png')} style={logoView} />
-      <MHeader title="Xác thực khuôn mặt" onBack={() => navigation.goBack()} />
+    <View style={commonStyles.fill}>
+      <Image source={BACKGROUND} style={styles.background} />
+      <MHeader title="Xác thực khuôn mặt" onBack={goBack} />
       <SafeAreaView style={commonStyles.fill}>
-        <ScrollView style={commonStyles.fill}>
-          <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
-            <Image
-              source={
-                photo ? { uri: photo } : require('../../assets/img/selfie.png')
-              }
-              style={{
-                width: Dimensions.get('window').width - 32,
-                height: ((Dimensions.get('window').width - 32) * 534) / 356,
-                borderWidth: 6,
-                borderRadius: 6,
-                borderColor: '#FFFFFF',
-                marginTop: 16,
-              }}
-            />
+        <ScrollView
+          style={commonStyles.fill}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.card}>
+            {/* Bọc một lớp cắt riêng: để Image tự bo góc thì mép ảnh vẫn thò ra
+                ngoài đường cong của card trên Android */}
+            <View style={styles.previewFrame}>
+              <Animated.Image
+                source={photo ? { uri: photo } : PLACEHOLDER}
+                resizeMode="cover"
+                style={[
+                  styles.preview,
+                  {
+                    opacity: reveal,
+                    transform: [
+                      {
+                        scale: reveal.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0.97, 1],
+                        }),
+                      },
+                    ],
+                  },
+                ]}
+              />
+            </View>
+            {/* Nhãn trạng thái: phân biệt rõ ảnh mẫu minh hoạ và ảnh đã chụp */}
+            <View style={[styles.badge, photo && styles.badgeDone]}>
+              {photo ? <Tick2 /> : null}
+              <MText style={[styles.badgeText, photo && styles.badgeTextDone]}>
+                {photo ? 'Ảnh của bạn' : 'Ảnh mẫu'}
+              </MText>
+            </View>
+          </View>
+
+          <View style={styles.noteCard}>
+            <MText style={styles.noteTitle}>Lưu ý khi chụp ảnh khuôn mặt</MText>
+            {NOTES.map((note) => (
+              <View key={note} style={styles.noteRow}>
+                <TimaSmall style={styles.noteBullet} />
+                <MText style={styles.noteText}>{note}</MText>
+              </View>
+            ))}
           </View>
         </ScrollView>
-        <View
-          style={{
-            flexDirection: 'row',
-            paddingHorizontal: 16,
-            marginBottom: 30,
-          }}
-        >
+
+        <View style={styles.footer}>
           <MButton
-            //@ts-ignore
-            onPress={() => {
-              takePhoto();
-            }}
+            onPress={takePhoto}
             disabled={isLoading}
-            style={[
-              commonStyles.row,
-              commonStyles.alignCenter,
-              commonStyles.justifyCenter,
-              {
-                backgroundColor: '#FFFFFF',
-                height: 40,
-                borderRadius: 30,
-                flex: 1,
-                marginRight: 8,
-                borderWidth: 1,
-                borderColor: '#EF4123',
-              },
-            ]}
+            style={[styles.captureButton, isLoading && styles.buttonMuted]}
           >
-            <MText style={[commonStyles.textNormal, { color: '#F05123' }]}>
-              Chụp ảnh
+            <IConCamera width={16} height={16} />
+            <MText style={styles.captureText}>
+              {photo ? 'Chụp lại' : 'Chụp ảnh'}
             </MText>
           </MButton>
 
-          <Observer>
-            {() => (
-              <MButton
-                //@ts-ignore
-                disabled={!photo || isLoading}
-                onPress={nextStep}
-                style={{ flex: 1 }}
+          <MButton
+            disabled={!canSubmit}
+            onPress={nextStep}
+            style={commonStyles.fill}
+          >
+            {canSubmit ? (
+              <LinearGradient
+                colors={['#FF7A00', '#EF4123']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+                style={[styles.submitButton, styles.submitShadow]}
               >
-                <LinearGradient
-                  colors={
-                    photo ? ['#FF7A00', '#EF4123'] : ['#BDBDBD', '#BDBDBD']
-                  }
-                  style={[
-                    commonStyles.alignCenter,
-                    commonStyles.justifyCenter,
-                    {
-                      height: 40,
-                      borderRadius: 30,
-                      marginLeft: 8,
-                    },
-                  ]}
-                >
-                  {isLoading ? (
-                    <ActivityIndicator color={'white'} size="small" />
-                  ) : (
-                    <MText
-                      style={[commonStyles.textNormal, { color: 'white' }]}
-                    >
-                      Tiếp tục
-                    </MText>
-                  )}
-                </LinearGradient>
-              </MButton>
+                <MText style={styles.submitText}>Tiếp tục</MText>
+              </LinearGradient>
+            ) : (
+              // Trạng thái chưa chụp/đang xử lý phải nhìn là biết chưa bấm được
+              <View style={[styles.submitButton, styles.submitDisabled]}>
+                {isLoading ? (
+                  <ActivityIndicator color={'#FFFFFF'} size="small" />
+                ) : (
+                  <MText style={styles.submitText}>Tiếp tục</MText>
+                )}
+              </View>
             )}
-          </Observer>
+          </MButton>
         </View>
-        <View
-          style={{
-            marginBottom: 24,
-            marginTop: 8,
-            flexDirection: 'row',
-            justifyContent: 'center',
-          }}
-        >
-          <MText style={{ fontSize: 12, color: '#333333' }}>
-            Cung cấp bởi{' '}
-          </MText>
+
+        <View style={styles.cimbRow}>
+          <MText style={styles.cimbText}>Cung cấp bởi </MText>
           <CIMBBank />
         </View>
       </SafeAreaView>
@@ -182,3 +203,125 @@ export const CimbSelfie = observer(function CimbSelfie(props: any) {
     </View>
   );
 });
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  scrollContent: { paddingHorizontal: 24, paddingBottom: 24 },
+
+  card: {
+    marginTop: 20,
+    padding: 8,
+    borderRadius: 20,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#7A2E12',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.18,
+    shadowRadius: 20,
+    elevation: 8,
+  },
+  // Bán kính trong = bán kính card (20) - padding (8) để hai đường cong khớp nhau
+  previewFrame: {
+    width: '100%',
+    aspectRatio: PREVIEW_ASPECT,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F5EDE9',
+  },
+  preview: { width: '100%', height: '100%' },
+  badge: {
+    position: 'absolute',
+    left: 20,
+    bottom: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+  },
+  badgeDone: { backgroundColor: 'rgba(255, 255, 255, 0.94)' },
+  badgeText: { color: '#FFFFFF', fontSize: 11, fontWeight: '600' },
+  badgeTextDone: { color: '#28A745', marginLeft: 6 },
+
+  noteCard: {
+    marginTop: 20,
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.75)',
+    borderWidth: 1,
+    borderColor: '#FFE1D3',
+  },
+  noteTitle: {
+    ...commonStyles.textNormalBold,
+    fontSize: 15,
+    color: '#333333',
+  },
+  noteRow: { flexDirection: 'row', marginTop: 12 },
+  noteBullet: { marginTop: 5 },
+  noteText: {
+    color: '#5A5A5A',
+    marginLeft: 10,
+    fontSize: 13,
+    lineHeight: 20,
+    flex: 1,
+  },
+
+  // SafeAreaView đã cộng inset dưới trên iOS nên chỉ cần khoảng thở cố định
+  footer: {
+    flexDirection: 'row',
+    paddingHorizontal: 24,
+    paddingTop: 4,
+    marginBottom: 16,
+  },
+  captureButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    height: 48,
+    borderRadius: 24,
+    flex: 1,
+    marginRight: 10,
+    borderWidth: 1.5,
+    borderColor: '#EF4123',
+  },
+  buttonMuted: { opacity: 0.5 },
+  captureText: {
+    ...commonStyles.textNormal,
+    color: '#F05123',
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+  submitButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 48,
+    borderRadius: 24,
+  },
+  submitShadow: {
+    shadowColor: '#EF4123',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  submitDisabled: { backgroundColor: '#D8D2CF' },
+  submitText: {
+    ...commonStyles.textNormal,
+    color: '#FFFFFF',
+    fontWeight: '600',
+  },
+
+  cimbRow: {
+    marginBottom: 24,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cimbText: { fontSize: 12, color: '#333333' },
+});

package/src/screens/motobike/InfoLoanMotobike.tsx

@@ -353,8 +353,8 @@ export default function InfoLoanMotobike(props: any) {
                             {values.gender === 0
                               ? 'Nam'
                               : values.gender === 1
-                                ? 'Nữ'
-                                : ''}
+                              ? 'Nữ'
+                              : ''}
                           </MText>
                           <DropDown2 />
                         </TouchableOpacity>
@@ -625,6 +625,7 @@ const $textInput: ViewStyle = {
   height: 40,
   paddingHorizontal: 8,
   fontFamily: 'BeVietnamPro-Medium',
+  fontSize: 14,
 };
 
 const $label: TextStyle = {

package/src/screens/motobike/ReviewLoanMotobike.tsx

@@ -402,6 +402,7 @@ const $textInput: ViewStyle = {
   height: 40,
   paddingHorizontal: 8,
   fontFamily: 'BeVietnamPro-Medium',
+  fontSize: 14,
 };
 
 const $label: TextStyle = {