react-native-timacare 3.3.64 → 3.3.65

package/src/screens/selfie/index.tsx

@@ -1,33 +1,26 @@
 //@ts-nocheck
-import React, { useState, Fragment } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
-  Dimensions,
+  Animated,
+  Easing,
   Image,
-  ImageStyle,
-  Platform,
   SafeAreaView,
   ScrollView,
-  TextStyle,
+  StyleSheet,
   View,
-  ViewStyle,
 } from 'react-native';
-import {
-  CommonActions,
-  useNavigation,
-  StackActions,
-} from '@react-navigation/native';
-import { observer, Observer } from 'mobx-react-lite';
+import { useNavigation, StackActions } from '@react-navigation/native';
+import { observer } from 'mobx-react-lite';
+import LinearGradient from 'react-native-linear-gradient';
 import { commonStyles } from '../CommonStyles';
-import KeyboardSpacer from '../../components/keyboardspace';
 import MButton from '../../components/MButton';
-import { color } from '../../theme';
 import { MText } from '../../components/MText';
 import {
   CIMBBank,
-  IconBack,
-  IconBackWhite,
-  IconCamera,
+  IConCamera,
+  Tick2,
+  TimaSmall,
   TimaSmallWhite,
 } from '../../assets/icons';
 import { ScreenNames } from '../../navigation';
@@ -35,36 +28,55 @@ import appStore from '../../AppStore';
 import selfieStore from './SelfieStore';
 import nationalIDStore from '../nationalID/Store';
 import Loading from '../../components/Loading';
-import LinearGradient from 'react-native-linear-gradient';
-import livenessStore from '../liveness/LivenessStore';
 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, và khớp với khung ở màn CimbSelfie
+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 Selfie = observer(function Selfie(props: any) {
   const navigation = useNavigation();
-  const step = 3;
   const [isLoading, setIsLoading] = useState(false);
   const [photo, setPhoto] = useState(null);
-  const [base64, setBase64] = 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 nextStep = (values) => {
-    const form = new FormData();
+  // Ảnh vừa chụp hiện lên bằng fade + scale nhẹ để người dùng thấy rõ là khung
+  // ảnh đã đổi nội dung (trước đây ảnh thay thầm lặng, dễ tưởng chưa chụp được)
+  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 nextStep = useCallback(() => {
+    if (!photo || submitting.current) return;
+    submitting.current = true;
     setIsLoading(true);
-    form.append('images', {
-      uri: photo,
-      type: 'image/jpg',
-      name: 'image.jpg',
-    });
-    form.append('loanbriefId', loan.id);
-    form.append('TypeDocumentId', 125);
-    form.append('UploadFrom', 3);
+
+    const stopLoading = () => {
+      submitting.current = false;
+      setIsLoading(false);
+    };
+
     const formSelfie = new FormData();
     formSelfie.append('NationalCard', {
       uri: nationalIDStore.photo,
@@ -81,171 +93,289 @@ export const Selfie = observer(function Selfie(props: any) {
       formSelfie,
       loan.id,
       () => {
+        // Chỉ dựng form upload khi ảnh đã qua bước đối chiếu
+        const form = new FormData();
+        form.append('images', {
+          uri: photo,
+          type: 'image/jpg',
+          name: 'image.jpg',
+        });
+        form.append('loanbriefId', loan.id);
+        form.append('TypeDocumentId', 125);
+        form.append('UploadFrom', 3);
+
         selfieStore.uploadImage(
           form,
           () => {
-            setIsLoading(false);
-            livenessStore.getConfigLiveness((data) => {
-              if (data === 1) {
-                navigation.dispatch(
-                  StackActions.push(ScreenNames.LiveNess, { loan })
-                );
-              } else {
-                navigation.dispatch(
-                  StackActions.push(ScreenNames.LivenessV2, { loan })
-                );
-              }
-            });
+            stopLoading();
+            navigation.dispatch(
+              StackActions.push(ScreenNames.LivenessV2, { loan })
+            );
           },
-          () => {
-            setIsLoading(false);
-          }
+          stopLoading
         );
       },
-      () => {
-        setIsLoading(false);
-      }
+      stopLoading
     );
-  };
+  }, [photo, loan, navigation]);
 
-  const takePhoto = () => {
-    //@ts-ignore
-    navigation.push(ScreenNames.Camera, {
+  const takePhoto = useCallback(() => {
+    navigation.push(ScreenNames.SelfieCamera, {
       front: true,
       selfie: true,
-      callback: (photo) => {
-        selfieStore.photo = photo;
-        setPhoto(photo);
+      callback: (uri) => {
+        selfieStore.photo = uri;
+        setPhoto(uri);
       },
       base64: (data) => {
-        setBase64(data);
         selfieStore.photoBase64 = data;
       },
     });
-  };
+  }, [navigation]);
+
+  const goBack = useCallback(() => navigation.goBack(), [navigation]);
+
+  const capturing = appStore.isLoading || selfieStore.isLoading;
+  const canSubmit = !!photo && !isLoading;
 
   return (
-    <View style={{ flex: 1 }}>
-      <Image source={require('../../assets/img/EKYC.png')} style={logoView} />
-      <MHeader title="Xác thực khách hàng" onBack={() => navigation.goBack()} />
+    <View style={commonStyles.fill}>
+      <Image source={BACKGROUND} style={styles.background} />
+      <MHeader title="Xác thực khách hàng" onBack={goBack} />
       <SafeAreaView style={commonStyles.fill}>
-        <ScrollView style={commonStyles.fill}>
-          <View style={{ paddingHorizontal: 16, paddingVertical: 16 }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                marginTop: 16,
-              }}
-            >
-              <TimaSmallWhite />
-              <MText
+        <ScrollView
+          style={commonStyles.fill}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.titleRow}>
+            <TimaSmallWhite />
+            <MText style={styles.title}>Ảnh chụp khuôn mặt</MText>
+          </View>
+
+          <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={[
-                  commonStyles.textNormalBold,
-                  { fontSize: 16, color: '#FFFFFF', marginLeft: 8 },
+                  styles.preview,
+                  {
+                    opacity: reveal,
+                    transform: [
+                      {
+                        scale: reveal.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0.97, 1],
+                        }),
+                      },
+                    ],
+                  },
                 ]}
-              >
-                Ảnh chụp khuôn mặt
+              />
+            </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>
-            <Image
-              source={
-                photo ? { uri: photo } : require('../../assets/img/selfie.png')
-              }
-              style={{
-                width: Dimensions.get('window').width - 32,
-                height: ((Dimensions.get('window').width - 32) * 534) / 564,
-                borderWidth: 8,
-                borderRadius: 6,
-                borderColor: '#FFFFFF',
-                marginTop: 16,
-              }}
-            />
+          </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();
-            }}
-            disabled={appStore.isLoading || selfieStore.isLoading}
-            style={[
-              commonStyles.row,
-              commonStyles.alignCenter,
-              commonStyles.justifyCenter,
-              {
-                backgroundColor: '#FFFFFF',
-                height: 40,
-                borderRadius: 30,
-                flex: 1,
-                marginRight: 8,
-                borderWidth: 1,
-                borderColor: '#EF4123',
-              },
-            ]}
+            onPress={takePhoto}
+            disabled={capturing}
+            style={[styles.captureButton, capturing && 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
-                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={['#FF7A00', '#EF4123']}
-                  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.submitTextDisabled}>Tiếp tục</MText>
+                )}
+              </View>
             )}
-          </Observer>
+          </MButton>
         </View>
+
         {loan?.isPipelineCIMB && (
-          <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>
         )}
-        <KeyboardSpacer />
       </SafeAreaView>
       <Loading isLoading={isLoading} />
     </View>
   );
 });
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  scrollContent: { paddingHorizontal: 24, paddingBottom: 24 },
+
+  titleRow: { flexDirection: 'row', alignItems: 'center', marginTop: 20 },
+  title: {
+    ...commonStyles.textNormalBold,
+    fontSize: 16,
+    color: '#FFFFFF',
+    marginLeft: 8,
+    letterSpacing: 0.2,
+  },
+
+  card: {
+    marginTop: 16,
+    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: 24,
+  },
+  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',
+  },
+  submitTextDisabled: { ...commonStyles.textNormal, color: '#FFFFFF' },
+
+  cimbRow: {
+    marginTop: -8,
+    marginBottom: 24,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cimbText: { fontSize: 12, color: '#333333' },
+});