@tima2025/react-native-timalender 1.0.0

package/src/screens/EKYC/Screens/LiveNess.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Text } from 'react-native';
+import Container from '../../../common/Container';
+
+const LiveNess = () => {
+  return (
+    <Container>
+      <Text>LiveNess</Text>
+    </Container>
+  );
+};
+
+export default LiveNess;

package/src/screens/EKYC/Screens/NationalIDBack.tsx

@@ -0,0 +1,84 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { Dimensions, ScrollView } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import EImages from '../../../assets/images/EKYC';
+import AppHeader from '../../../common/AppHeader';
+import BSubmit from '../../../common/BSubmit/BSubmit';
+import Colors from '../../../common/Colors';
+import Container from '../../../common/Container';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import Screens from '../../../components/Navigation/Screens';
+import ModalGuide from '../Components/ModalGuide';
+
+export const NationalIDBack = ({ navigation }: any) => {
+  const [openGuide, setOpenGuide] = useState(false);
+  const [photo, setPhoto] = useState(null);
+  const [base64, setBase64] = useState(null);
+  useEffect(() => {
+    setOpenGuide(true);
+  }, []);
+
+  const nextStep = async () => {};
+
+  const takePhoto = async () => {
+    navigation.push(Screens.Camera, {
+      front: false,
+      callback: (photo: React.SetStateAction<null>) => {
+        setPhoto(photo);
+      },
+      base64: (data: React.SetStateAction<null>) => {
+        setBase64(data);
+      },
+    });
+  };
+
+  return (
+    <Container style={{ backgroundColor: Colors.BLACK }}>
+      <AppHeader title="EKYC" backColor={Colors.BLACK} />
+      <ScrollView>
+        <RText
+          textStyle={{
+            fontSize: 16,
+            color: '#FFFFFF',
+            marginLeft: 8,
+            fontWeight: '700',
+            textAlign: 'center',
+          }}
+        >
+          Chụp CMND/ CCCD mặt sau
+        </RText>
+
+        <FastImage
+          source={photo ? { uri: photo } : EImages.national_id_back}
+          style={{
+            width: Dimensions.get('window').width - 32,
+            height: ((Dimensions.get('window').width - 32) * 216) / 360,
+            borderWidth: 8,
+            borderRadius: 6,
+            borderColor: '#FFFFFF',
+            marginTop: 16,
+            alignSelf: 'center',
+          }}
+        />
+      </ScrollView>
+      <SpaceBetween style={{ padding: actuatedNormalize(24) }}>
+        <BSubmit
+          text={'Chụp ảnh'}
+          buttonStyle={{ width: '45%' }}
+          onPress={takePhoto}
+        />
+        <BSubmit
+          text={'Tiếp tục'}
+          disabled={!photo}
+          buttonStyle={{ width: '45%' }}
+          onPress={nextStep}
+        />
+      </SpaceBetween>
+      <ModalGuide isVisible={openGuide} onclose={() => setOpenGuide(false)} />
+    </Container>
+  );
+};

package/src/screens/EKYC/Screens/Selfie.tsx

@@ -0,0 +1,93 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { Dimensions, ScrollView } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import EImages from '../../../assets/images/EKYC';
+import AppHeader from '../../../common/AppHeader';
+import BSubmit from '../../../common/BSubmit/BSubmit';
+import Colors from '../../../common/Colors';
+import Container from '../../../common/Container';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import Screens from '../../../components/Navigation/Screens';
+import ModalGuideSelfie from '../Components/ModalGuiDeSelfie';
+
+const Selfie = ({ navigation }: any) => {
+  const [photo, setPhoto] = useState(null);
+  const [openGuide, setOpenGuide] = useState(false);
+  const [base64, setBase64] = useState(null);
+
+  useEffect(() => {
+    setOpenGuide(true);
+  }, []);
+
+  const nextStep = async () => {
+    navigation.navigate(Screens.LiveNess);
+  };
+
+  const takePhoto = async () => {
+    navigation.push(Screens.Camera, {
+      front: false,
+      selfie: true,
+      callback: (photo: React.SetStateAction<null>) => {
+        setPhoto(photo);
+      },
+      base64: (data: React.SetStateAction<null>) => {
+        setBase64(data);
+      },
+    });
+  };
+
+  return (
+    <Container style={{ backgroundColor: Colors.BLACK }}>
+      <AppHeader title="Xác thực khách hàng" backColor={Colors.BLACK} />
+      <ScrollView>
+        <RText
+          textStyle={{
+            fontSize: 16,
+            color: '#FFFFFF',
+            marginLeft: 8,
+            fontWeight: '700',
+            textAlign: 'center',
+          }}
+        >
+          Ảnh chụp khuôn mặt
+        </RText>
+
+        <FastImage
+          source={photo ? { uri: photo } : EImages.national_id_back}
+          style={{
+            width: Dimensions.get('window').width - 32,
+            height: ((Dimensions.get('window').width - 32) * 216) / 360,
+            borderWidth: 8,
+            borderRadius: 6,
+            borderColor: '#FFFFFF',
+            marginTop: 16,
+            alignSelf: 'center',
+          }}
+        />
+      </ScrollView>
+      <SpaceBetween style={{ padding: actuatedNormalize(24) }}>
+        <BSubmit
+          text={'Chụp ảnh'}
+          buttonStyle={{ width: '45%' }}
+          onPress={takePhoto}
+        />
+        <BSubmit
+          text={'Tiếp tục'}
+          disabled={!photo}
+          buttonStyle={{ width: '45%' }}
+          onPress={nextStep}
+        />
+      </SpaceBetween>
+      <ModalGuideSelfie
+        isVisible={openGuide}
+        onclose={() => setOpenGuide(false)}
+      />
+    </Container>
+  );
+};
+
+export default Selfie;

package/src/screens/EKYC/index.tsx

@@ -0,0 +1,88 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { Dimensions, ScrollView } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import EImages from '../../assets/images/EKYC';
+import AppHeader from '../../common/AppHeader';
+import BSubmit from '../../common/BSubmit/BSubmit';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import Screens from '../../components/Navigation/Screens';
+import ModalGuide from './Components/ModalGuide';
+
+export const Ekyc = ({ navigation }: any) => {
+  const [openGuide, setOpenGuide] = useState(false);
+  const [photo, setPhoto] = useState(null);
+  const [base64, setBase64] = useState(null);
+
+  useEffect(() => {
+    setOpenGuide(true);
+  }, []);
+
+  const nextStep = async () => {
+    navigation.navigate(Screens.NationalIDBack);
+  };
+
+  const takePhoto = async () => {
+    navigation.push(Screens.Camera, {
+      front: false,
+      callback: (photo: React.SetStateAction<null>) => {
+        setPhoto(photo);
+      },
+      base64: (data: React.SetStateAction<null>) => {
+        setBase64(data);
+      },
+    });
+  };
+
+  return (
+    <Container style={{ backgroundColor: Colors.BLACK }}>
+      <AppHeader title="EKYC" backColor={Colors.BLACK} />
+      <ScrollView>
+        <RText
+          textStyle={{
+            fontSize: 16,
+            color: '#FFFFFF',
+            marginLeft: 8,
+            fontWeight: '700',
+            textAlign: 'center',
+          }}
+        >
+          Chụp CMND/ CCCD mặt trước
+        </RText>
+
+        <FastImage
+          source={photo ? { uri: photo } : EImages.national_id}
+          style={{
+            width: Dimensions.get('window').width - 32,
+            height: ((Dimensions.get('window').width - 32) * 216) / 360,
+            borderWidth: 8,
+            borderRadius: 6,
+            borderColor: '#FFFFFF',
+            marginTop: 16,
+            alignSelf: 'center',
+          }}
+        />
+      </ScrollView>
+      <BSubmit
+        text={'Chụp ảnh'}
+        buttonStyle={{
+          width: '90%',
+          marginBottom: actuatedNormalize(36),
+          alignSelf: 'center',
+        }}
+        onPress={takePhoto}
+      />
+      {/* <BSubmit
+          text={'Tiếp tục'}
+          disabled={!photo}
+          buttonStyle={{width: '45%'}}
+          onPress={nextStep}
+        /> */}
+      <ModalGuide isVisible={openGuide} onclose={() => setOpenGuide(false)} />
+    </Container>
+  );
+};

package/src/screens/EkycLiveness/Components/PortalFrame.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {Dimensions, StyleSheet, View} from 'react-native';
+
+const screenWidth = Dimensions.get('window').width;
+const frameWidth = screenWidth * 0.9;
+const frameHeight = frameWidth;
+const borderWidth = 3;
+const borderRadius = 30;
+
+export const PortalFrame = () => {
+  return (
+    <View style={styles.frame}>
+      <View style={{height: frameHeight, width: '15%'}} />
+      <View style={{flex: 1, justifyContent: 'space-between'}}>
+        <View style={styles.row}>
+          <View style={[styles.borderFrame, styles.borderTopLeft]}></View>
+          <View style={[styles.borderFrame, styles.borderTopRight]} />
+        </View>
+
+        <View style={styles.row}>
+          <View style={[styles.borderFrame, styles.borderBottomLeft]} />
+          <View style={[styles.borderFrame, styles.borderBottomRight]} />
+        </View>
+      </View>
+      <View style={{height: frameHeight, width: '15%'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  frame: {
+    flexDirection: 'row',
+    width: screenWidth,
+    position: 'absolute',
+    zIndex: 3,
+  },
+  borderFrame: {
+    width: frameHeight / 4,
+    height: frameHeight / 4,
+    borderColor: 'white',
+  },
+  borderTopRight: {
+    borderRightWidth: borderWidth,
+    borderTopWidth: borderWidth,
+    borderTopEndRadius: borderRadius,
+  },
+  borderTopLeft: {
+    borderLeftWidth: borderWidth,
+    borderTopWidth: borderWidth,
+    borderTopStartRadius: borderRadius,
+  },
+  borderBottomRight: {
+    borderRightWidth: borderWidth,
+    borderBottomWidth: borderWidth,
+    borderBottomEndRadius: borderRadius,
+  },
+  borderBottomLeft: {
+    borderLeftWidth: borderWidth,
+    borderBottomWidth: borderWidth,
+    borderBottomStartRadius: borderRadius,
+  },
+  containerButton: {
+    width: screenWidth,
+    flexDirection: 'row',
+    backgroundColor: 'black',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  frameContainer: {
+    width: screenWidth,
+    height: '100%',
+    zIndex: 2,
+    position: 'absolute',
+  },
+});

package/src/screens/EkycLiveness/Components/RecordingGuildStep.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable react-native/no-inline-styles */
+import * as React from 'react';
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Colors from '../../../common/Colors';
+import { actuatedNormalize } from '../../../common/Metrics';
+
+export interface RecordingGuildStepProps {
+  step: number;
+  stepName: 'intro' | 'pitch_head' | 'yaw_head' | 'eyes' | 'mouth';
+  onNextStep: () => void;
+}
+const deviceWidth = Dimensions.get('window').width;
+const title = 'Cách thiết lập';
+export const RecordingGuildStep: React.FC<RecordingGuildStepProps> = React.memo(
+  (props) => {
+    const { step, onNextStep, stepName } = props;
+    const [isStart, setStart] = React.useState(false);
+    // const countdown = useCountDown(isStart ? 5 : 0);
+
+    const renderLabel = React.useMemo(() => {
+      switch (stepName) {
+        case 'intro':
+          return 'Định vị khuôn mặt của bạn trong khung hình camera. Sau đó làm theo từng bước theo hướng dẫn (gật đầu, xoay đầu, chớp mắt và đóng mở miệng), mỗi bước sẽ có 5 giây thực hiện';
+        case 'pitch_head':
+          return 'Vui lòng gật đầu';
+        case 'eyes':
+          return 'Vui lòng chớp mắt';
+        case 'yaw_head':
+          return 'Vui lòng xoay đầu hai bên';
+        case 'mouth':
+          return 'Vui lòng đóng mở miệng';
+        default:
+          return '';
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step]);
+
+    const onPress = React.useCallback(() => {
+      if (step !== 0) {
+        setStart(true);
+      }
+      onNextStep();
+      setTimeout(() => {
+        setStart(false);
+      }, 5000);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step]);
+
+    return (
+      <View style={styles.container}>
+        <View style={{ alignItems: 'center' }}>
+          {step == 0 && <Text style={styles.title}>{title}</Text>}
+          <Text style={styles.lable}>{renderLabel}</Text>
+        </View>
+        {step == 0 ? (
+          <TouchableOpacity
+            onPress={onPress}
+            style={{
+              backgroundColor: Colors.ORANGE,
+              paddingVertical: actuatedNormalize(12),
+              paddingHorizontal: actuatedNormalize(16),
+              borderRadius: 8,
+              marginTop: actuatedNormalize(8),
+            }}
+          >
+            <Text
+              style={{
+                color: Colors.WHITE,
+              }}
+            >
+              Bắt đầu
+            </Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            disabled={isStart}
+            onPress={onPress}
+            style={{
+              width: actuatedNormalize(60),
+              height: actuatedNormalize(60),
+              borderRadius: actuatedNormalize(40),
+              borderColor: isStart ? Colors.BLACK : Colors.WHITE,
+              borderWidth: 2,
+              backgroundColor: isStart ? Colors.BLACK : Colors.RED,
+              marginTop: actuatedNormalize(8),
+            }}
+          />
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  lable: {
+    fontSize: 15,
+    color: 'white',
+    fontWeight: 'normal',
+    maxWidth: '90%',
+    textAlign: 'center',
+  },
+  container: {
+    width: deviceWidth,
+    alignItems: 'center',
+    paddingVertical: 16,
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'white',
+    maxWidth: '75%',
+  },
+  textButton: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  textCountDown: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: 'white',
+    lineHeight: 34,
+  },
+  borderTextCountDown: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    borderWidth: 2,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/screens/EkycLiveness/EkycCamera.tsx

@@ -0,0 +1,184 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import axios from 'axios';
+import React, { useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  SafeAreaView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { RNCamera } from 'react-native-camera';
+import { useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import Loading from '../../common/Loading';
+import RText from '../../common/RText';
+import Screens from '../../components/Navigation/Screens';
+import { userInfor } from '../../components/Redux/selector';
+import ModalSuccess from '../Camera/ModalSuccess';
+import ModalGuideSelfie from '../EKYC/Components/ModalGuiDeSelfie';
+
+export const EkycCamera = ({ navigation }) => {
+  const userData = useSelector(userInfor);
+  const [photo, setPhoto] = useState(null);
+  const [openGuide, setOpenGuide] = useState(true);
+  const [modalSuccess, setModalSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [cameraBack, setCameraBack] = useState(false);
+
+  const myCamera = useRef<any>(null);
+
+  const nextStep = async () => {
+    const options = {
+      width: 720,
+      base64: true,
+      pauseAfterCapture: true,
+      fixOrientation: false,
+      forceUpOrientation: false,
+      orientation: RNCamera.Constants.Orientation.portrait,
+    };
+    const data = await myCamera?.current?.takePictureAsync(options);
+    console.log('data', data.uri);
+    const form: any = new FormData();
+    form.append('selfie', {
+      uri: data?.uri,
+      type: 'image/jpg',
+      name: 'image.jpg',
+    });
+
+    await axios({
+      method: 'POST',
+      baseURL:
+        'https://apidevlos.tima.vn/api/v1.0/timacare/crm_compare_selfie_and_nationalcard',
+      data: form,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        'Accept': 'application/json',
+        'Authorization': userData?.accessToken,
+      },
+    })
+      .then(async (res) => {
+        console.log('res----', res);
+        const data = res?.data?.data;
+        // if (res.data.meta.errorCode !== 200) {
+        //   WToastShowError(res?.data?.meta?.errorMessage);
+        //   navigation.navigate(Screens.EkycLiveness);
+        // } else {
+
+        // }
+      })
+      .catch((err) => console.log(err));
+  };
+  return (
+    <Container style={{ backgroundColor: Colors.BLACK }}>
+      <AppHeader title="Chụp ảnh khuôn mặt" backColor={Colors.BLACK} />
+      <View
+        style={[
+          {
+            position: 'absolute',
+            width: Dimensions.get('window').width,
+            height: Dimensions.get('window').height,
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+        ]}
+      >
+        {/* <TouchableOpacity
+          onPress={() => setCameraBack(!cameraBack)}
+          style={{
+            alignSelf: 'flex-end',
+            marginBottom: actuatedNormalize(16),
+            marginRight: actuatedNormalize(16),
+            alignItems: 'center',
+          }}>
+          <RText textStyle={{color: Colors.WHITE}}>Xoay camera</RText>
+          <Icon name="repeat" color={Colors.WHITE} size={24} />
+        </TouchableOpacity> */}
+        <RNCamera
+          ref={myCamera}
+          defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
+          style={{
+            width: Dimensions.get('window').width,
+            height: (Dimensions.get('window').width * 4) / 3.1,
+          }}
+          type={RNCamera.Constants.Type.front}
+          flashMode={RNCamera.Constants.FlashMode.off}
+          // onFacesDetected={handlerFace}
+        >
+          {({ camera, status, recordAudioPermissionStatus }) => {
+            if (status !== 'READY') {
+              return <ActivityIndicator />;
+            }
+          }}
+        </RNCamera>
+      </View>
+
+      <SafeAreaView
+        style={[
+          { position: 'absolute', width: '100%', height: '100%', flex: 1 },
+        ]}
+      >
+        <View style={{ flex: 1 }} />
+        <View
+          style={{
+            flex: 0,
+            justifyContent: 'center',
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+          }}
+        >
+          <RText
+            style={[
+              {
+                color: 'white',
+                textAlign: 'center',
+                backgroundColor: '#00000099',
+                paddingVertical: 12,
+              },
+            ]}
+          >
+            Xin vui lòng nhìn thẳng, khuôn mặt ở trong{'\n'}khung hình, ánh sáng
+            đủ rõ nét khuôn mặt
+          </RText>
+
+          <TouchableOpacity
+            onPress={() => nextStep()}
+            style={[
+              {
+                flex: 0,
+                borderRadius: 64 / 2,
+                width: 64,
+                height: 64,
+                borderWidth: 5,
+                backgroundColor: Colors.WHITE,
+                borderColor: 'grey',
+                paddingHorizontal: 20,
+                alignSelf: 'center',
+                margin: 24,
+                justifyContent: 'center',
+                alignItems: 'center',
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+      <ModalGuideSelfie
+        isVisible={openGuide}
+        onclose={() => setOpenGuide(false)}
+      />
+      <ModalSuccess
+        isVisible={modalSuccess}
+        onclose={() => {
+          setModalSuccess(false);
+          navigation.replace(Screens.MainTab);
+        }}
+      />
+      {loading ? <Loading /> : <View />}
+    </Container>
+  );
+};