@tima2025/react-native-timalender 1.0.0

package/src/screens/EkycLiveness/index.tsx

@@ -0,0 +1,408 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import { useIsFocused } from '@react-navigation/native';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { createThumbnail } from 'react-native-create-thumbnail';
+import { showMessage } from 'react-native-flash-message';
+import RNFS, { CachesDirectoryPath } from 'react-native-fs';
+import { Camera, useCameraDevices } from 'react-native-vision-camera';
+import { useSelector } from 'react-redux';
+import Colors from '../../common/Colors';
+import Loading from '../../common/Loading';
+import { actuatedNormalize } from '../../common/Metrics';
+import { compare_liveness_cif } from '../../components/Features/user/userSlice';
+import Screens from '../../components/Navigation/Screens';
+import { userInfor } from '../../components/Redux/selector';
+import { useAppDispatch } from '../../components/Redux/store';
+import { PortalFrame } from './Components/PortalFrame';
+import { RecordingGuildStep } from './Components/RecordingGuildStep';
+
+const deviceWidth = Dimensions.get('window').width;
+const frameWidth = Dimensions.get('window').width * 0.8;
+const frameHeight = frameWidth;
+const dataAction = ['pitch_head', 'yaw_head', 'eyes', 'mouth'];
+const durationTime = Platform.OS === 'ios' ? 4200 : 5000;
+
+const EkycLiveness = ({ navigation, route }: any) => {
+  const reference_id = route?.params?.reference_id;
+  const camera = useRef<Camera>(null);
+  const devices = useCameraDevices('wide-angle-camera');
+  const device = devices.front;
+  const [hasPermission, setHasPermission] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [listStep, setListStep] = useState(['intro']);
+  const interestRef = useRef<ScrollView>(null);
+  const user_Infor = useSelector(userInfor);
+  const dispatch = useAppDispatch();
+  const isFocused = useIsFocused();
+
+  useEffect(() => {
+    (async () => {
+      const status = await Camera.requestCameraPermission();
+      setHasPermission(status === 'authorized');
+    })();
+    setListStep([
+      ...listStep,
+      dataAction[Math.floor(Math.random() * 4)],
+      dataAction[Math.floor(Math.random() * 4)],
+      dataAction[Math.floor(Math.random() * 4)],
+    ]);
+  }, []);
+
+  const extractFramesFromVideo = async (
+    videoPath: string,
+    duration: number,
+    interval: number
+  ) => {
+    const thumbnails: string[] = [];
+    const numFrames = Math.floor(duration / interval);
+
+    for (let i = 0; i < numFrames; i++) {
+      const time = i * interval;
+      try {
+        const result = await createThumbnail({
+          url: videoPath,
+          timeStamp: time,
+        });
+        console.log(`Thumbnail at ${time}ms: `, result.path);
+        thumbnails.push(result.path);
+      } catch (err) {
+        console.warn(`Failed at ${time}ms`, err);
+      }
+    }
+
+    return thumbnails;
+  };
+
+  const onConfirm = async (data: any) => {
+    console.log('data', data);
+    const time = new Date().getTime();
+    const template = CachesDirectoryPath + '/' + time;
+    const output = template + '_img_%04d.jpg';
+    console.log('template', template);
+
+    const interval = 500;
+    const paths = await extractFramesFromVideo(
+      data.path,
+      parseInt(data.duration) * 1000,
+      interval
+    );
+
+    const listImage: string[] = [];
+    const listFloatArray: Float32Array[] = [];
+    for (const path of paths) {
+      try {
+        const base64 = await RNFS.readFile(path, 'base64');
+        listImage.push(base64);
+      } catch (err) {
+        console.warn('Read base64 error:', err);
+      }
+    }
+
+    const params = {
+      phone: '0982515705',
+      files: listImage,
+    };
+    dispatch(compare_liveness_cif(params))
+      .then((res1) => {
+        console.log('res compare----', res1);
+        setLoading(false);
+        if (res1?.payload?.data?.meta.errorCode !== 200) {
+          console.log('-=-=-=-=-=');
+          // WToastShowError(res1?.payload?.data?.meta?.errorMessage);
+          showMessage({
+            message: 'Thông báo',
+            description: res1?.payload?.data?.meta?.errorMessage,
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          navigation.navigate(Screens.Optional);
+        } else {
+          console.log('------');
+          navigation.navigate(Screens.ConfirmContract, {
+            data: reference_id,
+          });
+        }
+      })
+      .catch((err) => {
+        // WToastShowError('Có lôi xảy ra,vui lòng thử lại sau');
+        showMessage({
+          message: 'Thông báo thất bại',
+          description: 'Có lỗi xảy ra,vui lòng thử lại sau',
+          type: 'danger',
+          icon: 'warning',
+          backgroundColor: Colors.DANGER,
+        });
+        navigation.navigate(Screens.Optional);
+        setLoading(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const uploadFile = async (temp: string) => {
+    setLoading(true);
+    console.log('----uploadFile!!!: ', temp);
+    let listImage = [];
+    for (let i = 1; i <= 20; i++) {
+      const file = 'file://' + temp + `_img_${('000' + i).slice(-4)}.jpg`;
+      console.log('file ', file);
+      try {
+        const imgBase64 = await RNFS.readFile(file, 'base64');
+        listImage.push(imgBase64);
+      } catch (error) {
+        console.log('error file: ', error);
+      }
+      // console.log('imgBase64 ', imgBase64)
+      console.log('------');
+    }
+    // console.log('listImage: ', listImage);
+
+    const params = {
+      phone: '0982515705',
+      files: listImage,
+    };
+
+    dispatch(compare_liveness_cif(params))
+      .then((res1) => {
+        console.log('res compare----', res1);
+        setLoading(false);
+        if (res1?.payload?.data?.meta.errorCode !== 200) {
+          // WToastShowError(res1?.payload?.data?.meta?.errorMessage);
+          showMessage({
+            message: 'Thông báo',
+            description: res1?.payload?.data?.meta?.errorMessage,
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          });
+          navigation.navigate(Screens.Optional);
+        } else {
+          navigation.navigate(Screens.ConfirmContract, {
+            data: reference_id,
+          });
+        }
+      })
+      .catch((err) => {
+        // WToastShowError('Có lôi xảy ra,vui lòng thử lại sau');
+        showMessage({
+          message: 'Thông báo',
+          description: 'Có lỗi xảy ra,vui lòng thử lại sau',
+          type: 'danger',
+          icon: 'warning',
+          backgroundColor: Colors.DANGER,
+        });
+        navigation.navigate(Screens.Optional);
+        setLoading(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const onRecording = async () => {
+    console.log('onRecording');
+    console.log('camera.current: ', camera.current);
+    if (camera.current) {
+      console.log('test');
+      camera.current.startRecording({
+        videoCodec: 'h264',
+        fileType: 'mp4',
+        flash: 'off',
+        onRecordingFinished: (video) => {
+          console.log('video: ', video);
+          onConfirm(video);
+        },
+        onRecordingError: (error) =>
+          // WToastShowError('Lỗi không quay được. Hãy thử lại '),
+          showMessage({
+            message: 'Thông báo lỗi',
+            description: 'Lỗi không quay được. Hãy thử lại',
+            type: 'danger',
+            icon: 'warning',
+            backgroundColor: Colors.DANGER,
+          }),
+      });
+      console.log('---pass start recording!!!');
+      setTimeout(async () => {
+        if (camera.current) {
+          camera.current.pauseRecording();
+          if (interestRef.current) {
+            interestRef?.current.scrollTo({
+              animated: true,
+              x: 2 * deviceWidth,
+            });
+          }
+        }
+      }, durationTime);
+    }
+  };
+  const onContinueRecording = async (isFinish: boolean, step: number) => {
+    console.log('ahihi', step);
+    if (camera.current) {
+      camera.current.resumeRecording();
+      setTimeout(async () => {
+        if (camera.current) {
+          if (isFinish) {
+            setLoading(true);
+            camera.current.stopRecording();
+          } else {
+            camera.current.pauseRecording();
+            if (interestRef.current) {
+              interestRef?.current.scrollTo({
+                animated: true,
+                x: (step + 1) * deviceWidth,
+              });
+            }
+          }
+        }
+      }, durationTime);
+    }
+  };
+
+  const onNextStep = (index: number) => {
+    switch (index) {
+      case 0:
+        if (interestRef.current) {
+          interestRef?.current.scrollTo({ animated: true, x: deviceWidth });
+        }
+        break;
+      case 1:
+        onRecording();
+        break;
+      case 2:
+        onContinueRecording(false, 2);
+        break;
+      case 3:
+        onContinueRecording(true, 3);
+        break;
+      default:
+        break;
+    }
+  };
+
+  if (device == null) {
+    return <ActivityIndicator size={20} color={'red'} />;
+  }
+
+  return (
+    <View style={{ width: deviceWidth }}>
+      <View
+        style={{
+          width: deviceWidth,
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <View style={styles.frameContainer}>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
+            <PortalFrame />
+            {device != null && hasPermission ? (
+              <Camera
+                fps={60}
+                // preset="iframe-960x540"
+                ref={camera}
+                style={{ flex: 1, zIndex: 1 }}
+                device={device}
+                // isActive
+                isActive={isFocused && hasPermission}
+                video
+              />
+            ) : null}
+          </View>
+          <View style={styles.container}>
+            <ScrollView
+              nestedScrollEnabled
+              ref={interestRef}
+              style={{ width: deviceWidth }}
+              horizontal
+              pagingEnabled
+              snapToInterval={deviceWidth}
+              scrollEventThrottle={16}
+              scrollEnabled={false}
+              bounces={true}
+              showsHorizontalScrollIndicator={false}
+            >
+              {listStep.map((item, index) => (
+                <RecordingGuildStep
+                  key={index.toString()}
+                  stepName={item as any}
+                  step={index}
+                  onNextStep={() => onNextStep(index)}
+                />
+              ))}
+            </ScrollView>
+          </View>
+        </View>
+      </View>
+      {isLoading && <Loading />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: deviceWidth,
+    backgroundColor: 'black',
+    justifyContent: 'flex-end',
+    paddingVertical: actuatedNormalize(16),
+    alignItems: 'center',
+  },
+  lable: {
+    fontSize: 15,
+    color: 'white',
+    fontWeight: 'normal',
+    maxWidth: '80%',
+    textAlign: 'center',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'white',
+    maxWidth: '75%',
+  },
+  textButton: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  borderFrame: {
+    width: frameWidth / 4,
+    height: frameWidth / 4,
+    borderColor: 'white',
+  },
+  frameContainer: {
+    width: deviceWidth,
+    height: '100%',
+    borderRadius: 50,
+    zIndex: 2,
+    position: 'absolute',
+  },
+  frame: {
+    flexDirection: 'row',
+    width: deviceWidth,
+    height: frameHeight,
+    zIndex: 3,
+    position: 'absolute',
+  },
+  video: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+});
+
+export default EkycLiveness;

package/src/screens/EnterOTPGpay/index.tsx

@@ -0,0 +1,144 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, 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 { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { verifyOTPGPay } from '../../components/Features/bank/bankSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import styles from './styles';
+
+const CELL_COUNT = 6;
+
+export const EnterOTPGpay = ({ navigation, route }: any) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoading = useSelector(selectLoading);
+  const [expire_time, setExpireTime] = useState(120);
+  const [value, setValue] = useState('');
+  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT });
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  useEffect(() => {
+    let interval = setInterval(() => {
+      if (expire_time > 0) {
+        setExpireTime(expire_time - 1);
+      } else {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [expire_time]);
+
+  const renderRight = () => {
+    return (
+      <RText
+        textStyle={{
+          color: Colors.WHITE,
+          fontWeight: '600',
+        }}
+      >
+        {moment.utc(expire_time * 1000).format('mm:ss')}
+      </RText>
+    );
+  };
+
+  const onSubmit = async () => {
+    const params = {
+      otp: value,
+      bankRef: route?.params?.bankRef,
+    };
+    const resp: any = await dispatch(verifyOTPGPay(params));
+    console.log('resp', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      navigation.navigate(Screens.WithdrawSuccess, {
+        data: resp?.payload?.data,
+      });
+    } else {
+      // WToastShowError(resp?.payload?.meta?.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp?.payload?.meta?.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader title="Nhập mã OTP" renderRight={renderRight} />
+      <ScrollView scrollEnabled={false}>
+        <RText
+          textStyle={{
+            textAlign: 'center',
+            marginVertical: actuatedNormalize(16),
+          }}
+        >
+          Tin nhắn SMS sẽ được gửi tới {'\n'} số điện thoại của bạn có hạn là 2
+          phút
+        </RText>
+
+        <CodeField
+          ref={ref}
+          {...props}
+          value={value}
+          onChangeText={setValue}
+          cellCount={CELL_COUNT}
+          rootStyle={styles.codeFieldRoot}
+          keyboardType="numeric"
+          textContentType="jobTitle"
+          renderCell={({ index, symbol, isFocused }) => (
+            <View
+              // Make sure that you pass onLayout={getCellOnLayoutHandler(index)} prop to root component of "Cell"
+              onLayout={getCellOnLayoutHandler(index)}
+              key={index}
+              style={[styles.cellRoot]}
+            >
+              <Text style={styles.cellText}>
+                {symbol || (isFocused ? <Cursor /> : null)}
+              </Text>
+            </View>
+          )}
+        />
+
+        <TouchableOpacity onPress={onSubmit} style={styles.buttonSubmit}>
+          <RText
+            textStyle={{
+              color: Colors.WHITE,
+            }}
+          >
+            Xác nhận rút tiền
+          </RText>
+        </TouchableOpacity>
+        {/* <TouchableOpacity
+          style={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: 16,
+          }}>
+          <RText>Gửi lại SMS</RText>
+        </TouchableOpacity> */}
+      </ScrollView>
+      {isLoading && <Loading />}
+    </Container>
+  );
+};

package/src/screens/EnterOTPGpay/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import Colors from '../../common/Colors';
+import { actuatedNormalize } from '../../common/Metrics';
+
+const styles = StyleSheet.create({
+  codeFieldRoot: {
+    width: '80%',
+    fontWeight: '700',
+    color: '#333333',
+    alignSelf: 'center',
+    marginBottom: actuatedNormalize(40),
+  },
+  cellRoot: {
+    width: actuatedNormalize(48),
+    height: actuatedNormalize(48),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#EFEFEF',
+    marginHorizontal: 4,
+    borderRadius: actuatedNormalize(8),
+  },
+  cellText: {
+    color: '#000',
+    fontSize: 24,
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+  buttonSubmit: {
+    backgroundColor: Colors.ORANGE,
+    width: '90%',
+    height: 40,
+    borderRadius: 8,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default styles;

package/src/screens/ExtendContract/index.tsx

@@ -0,0 +1,102 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import Pdf from 'react-native-pdf';
+import { useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Button from '../../common/Button';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import Loading from '../../common/Loading';
+import { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { IoIconApp } from '../../common/VectorIcon/Icon';
+import { beginExtendContract } from '../../components/Features/Loans/loanSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { useAppDispatch } from '../../components/Redux/store';
+
+const ExtendContract = ({ navigation, route }: any) => {
+  const dispatch = useAppDispatch();
+  const { loanId, urlEsign } = route?.params;
+  const isLoading = useSelector(selectLoading);
+  const [checked, setChecked] = useState(false);
+
+  const onSubmit = async () => {
+    const resp: any = await dispatch(beginExtendContract(loanId));
+    // console.log('resp sign---', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      // WToastShowSuccess('Mã OTP đã được gửi về SĐT của bạn,vui lòng kiểm tra');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Mã OTP đã được gửi về SĐT của bạn,vui lòng kiểm tra',
+        type: 'info',
+        icon: 'success',
+        backgroundColor: Colors.SUCCESS,
+      });
+      navigation.navigate(Screens.ExtendContractOTP, {
+        ref_id: resp?.payload?.data,
+        loanId: loanId,
+      });
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader title="Phụ lục gia hạn" />
+
+      <Pdf
+        showsVerticalScrollIndicator={false}
+        source={{ uri: urlEsign, cache: true }}
+        style={{ width: '100%', height: '100%' }}
+        trustAllCerts={false}
+      />
+
+      <View
+        style={{
+          marginBottom: actuatedNormalize(32),
+          paddingHorizontal: actuatedNormalize(16),
+          paddingTop: actuatedNormalize(16),
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => setChecked(!checked)}
+          style={{
+            marginBottom: actuatedNormalize(16),
+          }}
+        >
+          <FlexRow>
+            <IoIconApp
+              name={checked ? 'checkbox' : 'checkbox-outline'}
+              size={20}
+              color={!checked ? Colors.GRAY_4 : Colors.ORANGE}
+            />
+            <RText textStyle={{ paddingLeft: actuatedNormalize(8) }}>
+              Tôi đồng ý với tất cả những điều kiện trong hợp đồng.
+            </RText>
+          </FlexRow>
+        </TouchableOpacity>
+        <Button
+          text={'Ký hợp đồng'}
+          onPress={onSubmit}
+          textStyle={{ color: Colors.WHITE }}
+          buttonStyle={{
+            borderRadius: 8,
+            backgroundColor: !checked ? Colors.GRAY_4 : Colors.ORANGE,
+          }}
+          disabled={!checked}
+        />
+      </View>
+      {isLoading && <Loading />}
+    </Container>
+  );
+};
+
+export default ExtendContract;