@ha_tecno/live-id-sdk 1.0.0

package/src/screens/CadastroScreen/CadastroScreen.tsx

@@ -0,0 +1,212 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Image,
+} from 'react-native';
+import { cadastro } from '../../services';
+import Modal, { type ModalProps } from 'react-native-modal';
+
+import type { ScreenProps } from '../../types/screen';
+
+interface CadastroScreenProps {
+  isVisible: boolean;
+  onCloseModal?: () => void;
+  onError?: (response?: any) => void;
+  onSuccess?: (response?: any) => void;
+  ModalParams?: ModalProps;
+  screenProps?: ScreenProps;
+}
+
+export const CadastroScreen: React.FC<CadastroScreenProps> = ({
+  isVisible = false,
+  onCloseModal,
+  onError,
+  onSuccess,
+  ModalParams,
+}) => {
+  const [cpf, setCpf] = useState('');
+  const [nome, setNome] = useState('');
+  const [senha, setSenha] = useState('');
+  const [confirmarSenha, setConfirmarSenha] = useState('');
+
+  const generateRandomElevenDigits = () => {
+    let cpf = '';
+    for (let i = 0; i < 11; i++) {
+      cpf += Math.floor(Math.random() * 9);
+    }
+    return cpf;
+  };
+
+  const generateRandomName = () => {
+    // uma strin aleatória de 10 caracteres a 14 caracteres
+    let name = '';
+    const length = Math.floor(Math.random() * 5) + 10;
+    for (let i = 0; i < length; i++) {
+      name += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
+    }
+    return name;
+  };
+
+  useEffect(() => {
+    generateRnadomUser();
+  }, []);
+
+  const generateRnadomUser = () => {
+    setCpf(generateRandomElevenDigits());
+    setNome(generateRandomName());
+    setSenha('123');
+    setConfirmarSenha('123');
+  };
+
+  const handleCadastro = async () => {
+    try {
+      if (senha === confirmarSenha) {
+        const response = await cadastro(cpf, nome, senha);
+
+        console.log(response);
+        var jsonString = JSON.stringify(response);
+        onSuccess && onSuccess(response);
+
+        onCloseModalHandler();
+        if (jsonString.includes('person_id')) {
+          if (response.finger === false) {
+            // openModal({
+            //   type: 'ajuda',
+            //   screenProps: {
+            //     id: response.person_id,
+            //   },
+            // });
+          } else {
+            // openModal({
+            //   type: 'login',
+            // });
+          }
+        } else if (jsonString.includes('User exists')) {
+          Alert.alert('Usuário já cadastrado!');
+          // openModal({
+          //   type: 'login',
+          // });
+        } else if (jsonString.includes('erro')) {
+          Alert.alert('Usuário não cadastrado', 'Por favor, cadastre-se!');
+        } else {
+          Alert.alert(
+            'Erro',
+            'Ocorreu um erro ao fazer o Cadastro. Por favor, tente novamente mais tarde.'
+          );
+        }
+      } else {
+        Alert.alert(
+          'Erro',
+          'As senhas não coincidem. Por favor, tente novamente.'
+        );
+        return;
+      }
+    } catch (error) {
+      onError && onError(error);
+      console.error(error);
+    }
+  };
+
+  const onCloseModalHandler = () => {
+    onCloseModal && onCloseModal();
+    generateRnadomUser();
+  };
+
+  return (
+    <Modal
+      style={{ margin: 0 }}
+      isVisible={isVisible}
+      swipeDirection="down"
+      propagateSwipe={true}
+      onSwipeComplete={onCloseModalHandler}
+      {...ModalParams}
+    >
+      <View style={styles.container}>
+        <Image source={require('../../assets/logo.png')} style={styles.logo} />
+        <Text style={styles.title}>Cadastro de usuário</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="CPF"
+          placeholderTextColor="#000"
+          keyboardType="numeric"
+          value={cpf}
+          onChangeText={setCpf}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Nome"
+          placeholderTextColor="#000"
+          value={nome}
+          onChangeText={setNome}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Digite a senha"
+          placeholderTextColor="#000"
+          secureTextEntry={true}
+          value={senha}
+          onChangeText={(text) => setSenha(text)}
+        />
+        <TextInput
+          style={styles.input}
+          placeholderTextColor="#000"
+          placeholder="Digite a senha novamente"
+          secureTextEntry={true}
+          value={confirmarSenha}
+          onChangeText={(text) => setConfirmarSenha(text)}
+        />
+        <TouchableOpacity style={styles.button} onPress={handleCadastro}>
+          <Text style={styles.buttonText}>Cadastrar</Text>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 16,
+    color: '#00bfff',
+  },
+  input: {
+    width: '80%',
+    height: 50,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+    marginBottom: 16,
+    fontSize: 16,
+    color: '#000',
+  },
+  button: {
+    width: '80%',
+    height: 50,
+    backgroundColor: '#00bfff',
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    color: '#fff',
+  },
+  logo: {
+    width: 500,
+    height: 250,
+    resizeMode: 'contain',
+  },
+});

package/src/screens/ProvaVidas/index.tsx

@@ -0,0 +1,308 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Text, View, TouchableOpacity, Button } from 'react-native';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraFormat,
+  type VideoFile,
+} from 'react-native-vision-camera';
+import Modal, { type ModalProps } from 'react-native-modal';
+import { Toast } from '../../components/Toast/Toast';
+import { provaVida } from '../../services';
+import { getConfigCamera } from '../../utils';
+import { Alert } from 'react-native';
+import type { ScreenProps } from '../../types/screen';
+import { Platform } from 'react-native';
+import Orientation from 'react-native-orientation-locker';
+import { WaitingForResult } from '../../components/WaitingForResult';
+import { ErrorDisplay } from '../../components/ErrorDisplay';
+import { DeviceNullDisplay } from '../../components/DeviceNullDisplay';
+import { styles } from './styles';
+import { CameraConfigInfos } from '../../components/CameraConfigInfos';
+
+const IS_IOS = Platform.OS === 'ios';
+
+interface CameraProvaVidasProps {
+  isVisible: boolean;
+  onCloseModal?: () => void;
+  onError?: (response?: any) => void;
+  onSuccess?: (response?: any) => void;
+  ModalParams?: ModalProps;
+  screenProps?: ScreenProps;
+}
+
+type GetConfigApi = {
+  id: number;
+  deviceModels: string[];
+  deviceType: string;
+  fps: number;
+  exposure: number;
+  zoom: number;
+  serviceType: string;
+  showButtonInfo: boolean;
+};
+
+export const CameraProvaVidas: React.FC<CameraProvaVidasProps> = ({
+  isVisible = false,
+  onCloseModal,
+  onError,
+  onSuccess,
+  ModalParams,
+  screenProps,
+}) => {
+  const id = screenProps?.id;
+  const camera = useRef<Camera>(null);
+
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [intervalState, setIntervalState] = useState<NodeJS.Timeout | null>(
+    null
+  );
+
+  const [timer, setTimer] = useState(0);
+  const [load, setLoad] = useState(false);
+  const [stateToastBpm, setStateToastBpm] = useState({
+    message: '',
+    visible: false,
+  });
+  const [isRecording, setIsRecording] = useState(false);
+  const [cameraConfigs, setCameraConfigs] = useState<GetConfigApi>();
+
+  // mantem a tela em modo portrait
+  useEffect(() => {
+    Orientation.lockToPortrait();
+    return () => {
+      Orientation.unlockAllOrientations();
+    };
+  }, []);
+
+  // Pega a permissão da camera do dispositivo
+  const requestCameraPermission = useCallback(async () => {
+    try {
+      await Camera.requestCameraPermission();
+    } catch (error) {}
+  }, []);
+
+  // pra garantir que a permissão da camera seja solicitada
+  useEffect(() => {
+    requestCameraPermission();
+  }, [requestCameraPermission]);
+
+  useEffect(() => {
+    getConfigCamera('liveness')
+      .then((config) => {
+        setCameraConfigs(config);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera'],
+  });
+
+  const cameraFormat = useCameraFormat(device, [
+    {
+      videoResolution: {
+        height: 1280,
+        width: 720,
+      },
+    },
+  ]);
+
+  // Envia o arquivo para a api
+  const sendFile = useCallback(
+    async (file: VideoFile) => {
+      setLoad(true);
+
+      if (!id)
+        return Alert.alert(
+          'Erro ao enviar o arquivo ( id error ), tente novamente mais tarde'
+        );
+
+      let req = await provaVida(file, id, cameraConfigs?.exposure);
+
+      if (req.code === 0 && req.bpm >= 0) {
+        setShowOverlay(false);
+
+        const optionsToast = {
+          message: `Seu batimento esta em: ${req.bpm}.\n Prova de vida concluida !`,
+          visible: true,
+        };
+        setStateToastBpm(optionsToast);
+        onSuccess && onSuccess(req);
+      } else {
+        Alert.alert(req.message);
+        onError && onError(req);
+      }
+      setLoad(false);
+      setShowOverlay(false);
+      return;
+    },
+    [cameraConfigs?.exposure, id, onError, onSuccess]
+  );
+
+  // Limpa tudo
+  useEffect(() => {
+    return () => {
+      // limpa tudo
+      setTimer(0);
+      setIsRecording(false);
+      setLoad(false);
+      setStateToastBpm({ message: '', visible: false });
+    };
+  }, []);
+
+  // Limpa o intervalo do timer
+  useEffect(() => {
+    if (timer < 0) {
+      if (!intervalState) return;
+      clearInterval(intervalState);
+      stopRecodingVideo();
+    }
+  }, [timer, intervalState]);
+
+  // Função para iniciar a gravação do video na referencia da camera
+  const startVideoRecording = useCallback(() => {
+    setIsRecording(true);
+
+    camera.current?.startRecording({
+      fileType: 'mp4',
+      onRecordingFinished: (video) => sendFile(video),
+      onRecordingError: (error) => console.error(error),
+    });
+  }, [sendFile]);
+
+  // Inicia a gravação do video
+  const recordingVideo = useCallback(async () => {
+    startVideoRecording();
+    setTimer(10);
+    setLoad(true);
+
+    setIntervalState(
+      setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1); // Update the timer state
+      }, 1000)
+    );
+  }, [startVideoRecording]);
+
+  // Para a gravação do video
+  const stopRecodingVideo = async () => {
+    setIsRecording(false);
+    await camera.current?.stopRecording();
+    setShowOverlay(true);
+    return;
+  };
+
+  // Fecha o modal
+  const onCloseModalHandler = () => {
+    resetScreenStatesAndCamera();
+    onCloseModal && onCloseModal();
+  };
+
+  // Limpa os estados da tela e a camera
+  const resetScreenStatesAndCamera = () => {
+    setTimer(0);
+    setIsRecording(false);
+    setShowOverlay(false);
+    setLoad(false);
+    setStateToastBpm({ message: '', visible: false });
+  };
+
+  if (!screenProps && isVisible) {
+    return (
+      <ErrorDisplay
+        isVisible={isVisible}
+        modalParams={ModalParams}
+        onCloseModalHandler={onCloseModalHandler}
+        requestCameraPermission={requestCameraPermission}
+      />
+    );
+  }
+
+  if (device == null) {
+    return (
+      <DeviceNullDisplay
+        isVisible={isVisible}
+        modalParams={ModalParams}
+        onCloseModalHandler={onCloseModalHandler}
+        requestCameraPermission={requestCameraPermission}
+      />
+    );
+  }
+
+  return (
+    <Modal
+      style={{ margin: 0 }}
+      isVisible={isVisible}
+      swipeDirection="down"
+      propagateSwipe={true}
+      onSwipeComplete={onCloseModalHandler}
+      {...ModalParams}
+    >
+      <View style={styles.container}>
+        {showOverlay && (
+          <WaitingForResult
+            onPress={() => {
+              setShowOverlay(false);
+            }}
+          />
+        )}
+
+        <Toast
+          message={stateToastBpm.message}
+          isVisible={stateToastBpm.visible}
+          onClose={onCloseModalHandler}
+        />
+
+        <View style={styles.containerCamera}>
+          <Camera
+            ref={camera}
+            style={styles.subContainer}
+            isActive={true}
+            device={device}
+            video={true}
+            torch={'on'}
+            format={cameraFormat}
+            exposure={cameraConfigs?.exposure}
+            zoom={cameraConfigs?.zoom}
+          />
+          <View style={styles.cameraView} />
+          <View style={styles.containerTouch}>
+            <TouchableOpacity
+              onPress={() => recordingVideo()}
+              disabled={isRecording || load}
+            >
+              <View style={styles.containerText}>
+                <Text style={styles.textRecording}>
+                  {isRecording
+                    ? `Aguarde ${timer} segundos`
+                    : load
+                    ? 'Processando...'
+                    : 'Medir Batimentos'}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+          <View
+            style={{
+              marginBottom: IS_IOS ? 48 : 0,
+            }}
+          >
+            <CameraConfigInfos
+              exposure={cameraConfigs?.exposure}
+              zoom={cameraConfigs?.zoom}
+              showButtonInfo={cameraConfigs?.showButtonInfo}
+            />
+            <Button
+              disabled={load}
+              title="Fechar Camera"
+              onPress={onCloseModalHandler}
+            />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/src/screens/ProvaVidas/styles.ts

@@ -0,0 +1,99 @@
+import { StyleSheet } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  subContainer: {
+    flex: 1,
+  },
+
+  image: {
+    width: RFValue(200),
+    height: RFValue(200),
+  },
+
+  modalImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+
+  overlay: {
+    zIndex: 2,
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    backgroundColor: `rgba(44, 45, 46, 0.5)`,
+    alignItems: `center`,
+    justifyContent: `center`,
+    position: `absolute`,
+  },
+
+  textOverlay: {
+    fontSize: RFValue(18),
+    fontWeight: `500`,
+    color: `#fff`,
+    textAlign: `center`,
+    width: RFValue(300),
+    marginBottom: RFValue(20),
+  },
+
+  closeButton: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+  },
+
+  closeIcon: {
+    width: 20,
+    height: 20,
+  },
+
+  containerCamera: {
+    flex: 1,
+  },
+
+  cameraView: {
+    width: '100%',
+    height: RFValue(250),
+    backgroundColor: `rgba(173, 216, 230, 0)`,
+    position: `absolute`,
+    alignSelf: 'center',
+    marginTop: RFValue(50),
+    alignItems: `center`,
+    justifyContent: `center`,
+  },
+
+  containerTouch: {
+    height: RFValue(180),
+    alignItems: 'center',
+  },
+
+  containerText: {
+    width: RFValue(280),
+    height: RFValue(120),
+    borderRadius: 150,
+    backgroundColor: `blue`,
+    alignItems: `center`,
+    justifyContent: `center`,
+    marginTop: 10,
+  },
+
+  textRecording: {
+    fontSize: RFValue(18),
+    fontWeight: `500`,
+    color: `#fff`,
+  },
+  containerTextExposureAndZoom: {},
+  textExposureAndZoom: {
+    fontSize: 18,
+    fontWeight: `500`,
+    color: `#fff`,
+    textAlign: `center`,
+    width: RFValue(300),
+    marginBottom: RFValue(20),
+  },
+});