@ha_tecno/live-id-sdk 1.0.0

package/src/screens/CadastroFinger/components/CameraCadastro/index.tsx

@@ -0,0 +1,356 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Alert, Text, View, TouchableOpacity, Button } from 'react-native';
+import {
+  Camera,
+  useCameraFormat,
+  type Point,
+  useCameraDevice,
+} from 'react-native-vision-camera';
+import Modal, { type ModalProps } from 'react-native-modal';
+import Orientation from 'react-native-orientation-locker';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+
+import { AjudaCadastro } from '../AjudaCadastro';
+import { ImageDisplayScreen } from '../ImageDisplayScreen';
+import { sendImages } from '../../../../services';
+import { getConfigCamera } from '../../../../utils';
+import { encodeImageToBase64, validarBase64 } from '../../../../utils/file';
+import type { ScreenProps } from '../../../../types/screen';
+import { CameraConfigInfos } from '../../../../components/CameraConfigInfos';
+import { DeviceNullDisplay } from '../../../../components/DeviceNullDisplay';
+import { ErrorDisplay } from '../../../../components/ErrorDisplay';
+import { Gabarito } from '../../../../components/Gabarito';
+import { WaitingForResult } from '../../../../components/WaitingForResult';
+import { styles } from './styles';
+
+let vezesQualidadeDigitalCount = 0;
+
+interface CameraCadastroProps {
+  isVisible?: boolean;
+  onCloseModal?: () => void;
+  onError?: (response?: any) => void;
+  onSuccess?: (response?: any) => void;
+  screenProps?: ScreenProps;
+  onMaxAttempts?: () => void;
+  maxAttempts?: number;
+  ModalParams?: ModalProps;
+}
+
+type GetConfigApi = {
+  id: number;
+  deviceModels: string[];
+  deviceType: string;
+  fps: number;
+  exposure: number;
+  zoom: number;
+  serviceType: string;
+  showButtonInfo: boolean;
+};
+
+export const CameraCadastro: React.FC<CameraCadastroProps> = ({
+  isVisible = false,
+  onCloseModal,
+  onError,
+  onSuccess,
+  screenProps,
+  onMaxAttempts,
+  maxAttempts = 3,
+  ModalParams,
+}) => {
+  const id = screenProps?.id;
+  const camera = useRef<Camera>(null);
+  let base64Image: string[] = [];
+
+  const [showCamera, setShowCamera] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  const [arrayImages, setArrayImages] = useState<any[]>([]);
+  const [load, setLoad] = useState(false);
+  const [fingerErro, setFingerErro] = useState(false);
+  const [badImageModal, setBadImageModal] = 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('finger')
+      .then((config) => {
+        setCameraConfigs(config);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera'],
+  });
+
+  const cameraFormat = useCameraFormat(device, [
+    {
+      photoResolution: {
+        height: 1280,
+        width: 720,
+      },
+    },
+  ]);
+
+  useEffect(() => {
+    if (fingerErro) {
+      Alert.alert('Erro', 'Tentavias excedidas !');
+      onMaxAttempts && onMaxAttempts();
+    }
+  }, [fingerErro, onMaxAttempts]);
+
+  const handleProximaTela = () => {
+    setShowCamera(true);
+  };
+
+  useEffect(() => {
+    return () => {
+      // clean up
+      if (vezesQualidadeDigitalCount >= 3) {
+        vezesQualidadeDigitalCount = 0;
+      }
+      setLoad(false);
+      setArrayImages([]);
+      setFingerErro(false);
+      setBadImageModal(false);
+      setShowCamera(false);
+    };
+  }, []);
+
+  // captura a foto da camera
+  useEffect(() => {
+    requestCameraPermission();
+  }, [requestCameraPermission]);
+
+  const capturedPhoto = async () => {
+    const photo = await camera.current?.takePhoto({
+      qualityPrioritization: 'speed',
+      flash: 'off',
+    });
+    if (photo == null) return;
+    const base64 = await encodeImageToBase64(photo.path);
+    base64Image.push(base64 ?? '');
+    setArrayImages((prevArray) => [...prevArray, ...base64Image]);
+  };
+
+  // Fecha o modal
+  const onCloseModalHandler = useCallback(() => {
+    ResetScreenAndStates();
+    onCloseModal && onCloseModal();
+  }, [onCloseModal]);
+
+  // Envia a imagem para a validação da digital
+  const sendFile = useCallback(async () => {
+    try {
+      let UID = id;
+      let finger = 'DI';
+      let images = arrayImages;
+
+      if (validarBase64(images) === false) return;
+
+      let req =
+        images.length === 3 ? await sendImages(UID, finger, images) : null;
+
+      if (req.code === 0) {
+        Alert.alert('Sucesso !');
+        onSuccess && onSuccess(req);
+        setLoad(false);
+        setArrayImages([]);
+        onCloseModalHandler();
+        setShowOverlay(false);
+      } else if (req.code === 1) {
+        Alert.alert('Já cadastrada !');
+        onCloseModalHandler();
+        setShowOverlay(false);
+      } else {
+        //alert("Erro, por favor, verifique e tente novamente !")
+        vezesQualidadeDigitalCount += 1; // Incrementa a contagem
+        if (arrayImages.length > 0) {
+          setBadImageModal(true);
+        }
+        setLoad(false);
+        setShowOverlay(false);
+        setArrayImages([]);
+      }
+      setLoad(false);
+      setShowOverlay(false);
+    } catch (error) {
+      console.log('Erro ao enviar imagens: ' + error);
+      setLoad(false);
+      setArrayImages([]);
+      onError && onError();
+      Alert.alert('Erro ao enviar imagem !');
+      vezesQualidadeDigitalCount += 1;
+      setShowOverlay(false);
+    }
+  }, [arrayImages, id, onError, onSuccess, onCloseModalHandler]);
+
+  // Envia a imagem para a validação da digital
+  useEffect(() => {
+    if (arrayImages.length === 3) {
+      setLoad(true);
+      setShowOverlay(true);
+      sendFile();
+    }
+    if (vezesQualidadeDigitalCount >= maxAttempts) {
+      setFingerErro(true); // Define fingerErro como true após 2 acessos
+      vezesQualidadeDigitalCount = 0;
+    }
+  }, [arrayImages, id, maxAttempts, sendFile]);
+
+  // Função para resetar os estados da tela
+  const ResetScreenAndStates = () => {
+    setLoad(false);
+    setArrayImages([]);
+    setFingerErro(false);
+    setBadImageModal(false);
+    setShowCamera(false);
+  };
+
+  // Função para focar a camera
+  const focus = useCallback((point: Point) => {
+    const c = camera.current;
+    if (c == null) return;
+    c.focus(point);
+  }, []);
+
+  // Função para focar a camera
+  const gesture = Gesture.Tap().onBegin(({ x, y }) => {
+    runOnJS(focus)({ x, y });
+  });
+
+  if (!showCamera) {
+    return <AjudaCadastro handleProximaTela={handleProximaTela} />;
+  }
+
+  if (!screenProps && isVisible) {
+    return (
+      <ErrorDisplay
+        isVisible={isVisible}
+        onCloseModalHandler={onCloseModalHandler}
+        requestCameraPermission={requestCameraPermission}
+      />
+    );
+  }
+
+  if (device == null) {
+    return (
+      <DeviceNullDisplay
+        isVisible={isVisible}
+        onCloseModalHandler={onCloseModalHandler}
+        requestCameraPermission={requestCameraPermission}
+      />
+    );
+  }
+
+  if (showCamera && screenProps && cameraConfigs !== null) {
+    return (
+      <Modal
+        style={styles.modal}
+        isVisible={isVisible}
+        swipeDirection="down"
+        propagateSwipe={true}
+        onSwipeComplete={onCloseModalHandler}
+        {...ModalParams}
+      >
+        <GestureHandlerRootView style={styles.root}>
+          <View style={styles.container}>
+            {showOverlay && (
+              <WaitingForResult
+                onPress={() => {
+                  setShowOverlay(false);
+                }}
+              />
+            )}
+            {!badImageModal ? (
+              <>
+                <GestureDetector gesture={gesture}>
+                  <View style={styles.cameraContainer}>
+                    <Camera
+                      ref={camera}
+                      style={styles.camera}
+                      isActive={true}
+                      device={device}
+                      format={cameraFormat}
+                      torch={'on'}
+                      focusable={true}
+                      exposure={cameraConfigs?.exposure}
+                      zoom={cameraConfigs?.zoom}
+                      photo={true}
+                      enableHighQualityPhotos={true}
+                    />
+                    {!showOverlay && <Gabarito />}
+                  </View>
+                </GestureDetector>
+                <View style={styles.containerCapture}>
+                  <TouchableOpacity disabled={load} onPress={capturedPhoto}>
+                    <View style={styles.containerButton}>
+                      {!load ? (
+                        <Text style={styles.textButton}>
+                          Tirar Foto ({arrayImages?.length}/3)
+                        </Text>
+                      ) : (
+                        <Text style={styles.textButton}>
+                          Verificando Digital...
+                        </Text>
+                      )}
+                    </View>
+                  </TouchableOpacity>
+                </View>
+                <View style={styles.containerButtonClose}>
+                  <Button
+                    disabled={load}
+                    title="Fechar Camera"
+                    onPress={onCloseModalHandler}
+                  />
+                </View>
+                <View style={styles.cameraConfigs}>
+                  <CameraConfigInfos
+                    exposure={cameraConfigs?.exposure}
+                    zoom={cameraConfigs?.zoom}
+                    showButtonInfo={cameraConfigs?.showButtonInfo}
+                  />
+                </View>
+              </>
+            ) : (
+              <ImageDisplayScreen
+                onCloseModal={() => {
+                  setBadImageModal(false);
+                  setArrayImages([]);
+                }}
+                screenProps={{ base64Image: arrayImages[0] }}
+              />
+            )}
+          </View>
+        </GestureHandlerRootView>
+      </Modal>
+    );
+  }
+  return null;
+};

package/src/screens/CadastroFinger/components/CameraCadastro/styles.ts

@@ -0,0 +1,47 @@
+import { StyleSheet, Dimensions, Platform } from 'react-native';
+
+const { height } = Dimensions.get('window');
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  root: {
+    flex: 1,
+  },
+  cameraContainer: {
+    flex: 1,
+  },
+  camera: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingBottom: height * 0.2,
+  },
+  containerCapture: {
+    height: height * 0.2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modal: {
+    margin: 0,
+  },
+  containerButton: {
+    width: 350,
+    height: 100,
+    borderRadius: 80,
+    backgroundColor: 'blue',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textButton: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: '#fff',
+  },
+  containerButtonClose: {
+    marginBottom: Platform.OS === 'ios' ? 48 : 0,
+  },
+  cameraConfigs: {
+    alignItems: 'center',
+  },
+});

package/src/screens/CadastroFinger/components/ImageDisplayScreen/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Image, Text, Button, ScrollView } from 'react-native';
+import { styles } from './styles';
+import type { ScreenProps } from '../../../../types/screen';
+
+interface ImageDisplayScreenProps {
+  isVisible?: boolean;
+  onCloseModal?: () => void;
+  onError?: (response?: any) => void;
+  onSuccess?: (response?: any) => void;
+  screenProps?: ScreenProps;
+}
+
+export const ImageDisplayScreen: React.FC<ImageDisplayScreenProps> = ({
+  onCloseModal,
+  screenProps,
+}) => {
+  const base64Image = screenProps?.base64Image;
+
+  const onCloseModalHandler = () => {
+    onCloseModal && onCloseModal();
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <View style={styles.imageContainer}>
+        {/* Parte gráfica da "Tela 1" */}
+        <Image
+          source={{ uri: `data:image/jpeg;base64,${base64Image}` }}
+          style={styles.image}
+        />
+        <Text style={styles.imageText}>Para cadastro, qualidade ruim !</Text>
+
+        {/* Parte gráfica da "Tela 2" */}
+        <View style={styles.additionalGraphics}>
+          <View style={styles.graphicElement1} />
+          <View style={styles.graphicElement2} />
+        </View>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Tentar Novamente" onPress={onCloseModalHandler} />
+      </View>
+    </ScrollView>
+  );
+};

package/src/screens/CadastroFinger/components/ImageDisplayScreen/styles.ts

@@ -0,0 +1,55 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 30,
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  imageContainer: {
+    marginBottom: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '90%',
+    aspectRatio: 1,
+    resizeMode: 'contain',
+  },
+  imageText: {
+    marginTop: 15,
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  buttonContainer: {
+    marginBottom: 150,
+    alignItems: 'center',
+  },
+  additionalGraphics: {
+    width: '100%',
+    height: Dimensions.get('window').height * 0.4,
+    backgroundColor: 'transparent', // Ajuste a cor de fundo desejada
+    position: 'absolute',
+    alignSelf: 'center',
+    marginTop: '35%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  graphicElement1: {
+    width: Dimensions.get('window').width * 0.5,
+    height: Dimensions.get('window').height * 0.3,
+    backgroundColor: 'transparent', // Ajuste o estilo desejado
+    borderWidth: 3,
+    borderColor: 'yellow',
+    marginLeft: 40,
+    borderTopLeftRadius: 60,
+    borderBottomLeftRadius: 60,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    transform: [{ scaleX: 2 }],
+  },
+  graphicElement2: {
+    // Defina o estilo para o segundo elemento gráfico
+  },
+});

package/src/screens/CadastroFinger/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { CameraCadastro } from './components/CameraCadastro';
+import Modal, { type ModalProps } from 'react-native-modal';
+import type { ScreenProps } from '../../types/screen';
+
+interface CadastroFingerProps {
+  isVisible: boolean;
+  onCloseModal?: () => void;
+  onError?: (response?: any) => void;
+  onSuccess?: (response?: any) => void;
+  ModalParams?: ModalProps;
+  screenProps?: ScreenProps;
+  onMaxAttempts?: () => void;
+  maxAttempts?: number;
+}
+
+export const CadastroFinger: React.FC<CadastroFingerProps> = ({
+  isVisible = false,
+  onCloseModal,
+  onError,
+  onSuccess,
+  ModalParams,
+  screenProps,
+  onMaxAttempts,
+  maxAttempts,
+}) => {
+  const onCloseModalHandler = () => {
+    onCloseModal && onCloseModal();
+  };
+
+  return (
+    <Modal
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={{ margin: 0 }}
+      isVisible={isVisible}
+      swipeDirection="down"
+      propagateSwipe={true}
+      onSwipeComplete={onCloseModalHandler}
+      {...ModalParams}
+    >
+      <CameraCadastro
+        maxAttempts={maxAttempts}
+        onMaxAttempts={onMaxAttempts}
+        isVisible={isVisible}
+        onCloseModal={onCloseModalHandler}
+        screenProps={screenProps}
+        onError={() => {
+          onError && onError();
+        }}
+        onSuccess={() => {
+          onSuccess && onSuccess();
+        }}
+      />
+    </Modal>
+  );
+};