@ha_tecno/live-id-sdk 2.12.3 → 2.14.0

package/src/components/HACarouselCalibration/HACarouselItem/styles.ts

@@ -0,0 +1,43 @@
+import { Dimensions } from "react-native";
+import { StyleSheet } from "react-native";
+
+const { width } = Dimensions.get("window");
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+  },
+  card: {
+    justifyContent: "center",
+    minHeight: "60%",
+    borderRadius: 20,
+    gap: 20,
+    padding: 20
+  },
+  content: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 20
+  },
+  title: {
+    textAlign: "center"
+  },
+  text: {
+    textAlign: "center"
+  },
+  containerPagination: {
+    alignSelf: "center"
+  },
+  containerButton: {
+    height: 80,
+    width: 80,
+    alignSelf: "center",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 50
+  }
+});

package/src/components/HACarouselCalibration/HAPagination/HAPagination.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Dimensions, View } from "react-native";
+import Animated, { Extrapolation, SharedValue, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useTheme } from "../../../theme/theme";
+import { styles } from "./styles";
+
+type PaginationType = {
+  item: {
+    title: string;
+    text: string;
+    ImageComponent?: React.FC<React.SVGProps<SVGSVGElement>>;
+  }[];
+  paginationIndex: number;
+  scrollX: SharedValue<number>;
+};
+
+const { width } = Dimensions.get("screen");
+
+export const HAPagination = ({ item, paginationIndex, scrollX }: PaginationType) => {
+  const { blue, isDark } = useTheme();
+  const dotWithoutFocused = isDark ? "#ffffff25" : "#00000025";
+
+  return (
+    <View style={styles.container}>
+      {item.map((_, index) => {
+        const pgAnimationStyle = useAnimatedStyle(() => {
+          const dotWidth = interpolate(
+            scrollX.value,
+            [(index - 1) * width, index * width, (index + 1) * width],
+            [8, 30, 8],
+            Extrapolation.CLAMP
+          );
+          return { width: dotWidth };
+        });
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              {
+                backgroundColor: paginationIndex === index ? blue : dotWithoutFocused
+              },
+              styles.pagination,
+              pgAnimationStyle
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};

package/src/components/HACarouselCalibration/HAPagination/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  pagination: {
+    height: 8,
+    width: 8,
+    marginHorizontal: 2,
+    borderRadius: 8
+  }
+});

package/src/components/HACarouselCalibration/data.ts

@@ -0,0 +1,27 @@
+import ExampleCalibration1 from "../../assets/svg/exampleCalibration1.svg";
+import ExampleCalibration2 from "../../assets/svg/exampleCalibration2.svg";
+import FingerPrint from "../../assets/svg/fingerPrint.svg";
+
+const data: { title: string; ImageComponent?: React.FC<React.SVGProps<SVGSVGElement>>; text: string }[] = [
+  {
+    title: "BOAS VINDAS AO LIVEID",
+    text: `Antes de começarmos, precisamos garantir que seu dispositivo esteja configurado para a melhor experiência possível.\n\nSiga as etapas a seguir para calibrar a captura no seu aparelho.`
+  },
+  {
+    title: "Preparando para a captura perfeita!",
+    ImageComponent: ExampleCalibration1,
+    text: "Para garantir uma leitura precisa, escolha um fundo neutro, como uma parede lisa ou até mesmo uma folha de papel."
+  },
+  {
+    title: "Posicione-se para a melhor leitura!",
+    ImageComponent: ExampleCalibration2,
+    text: "Coloque o dedo indicador direito sobre o diagrama vermelho. Ajuste o zoom, se necessário, para um melhor encaixe."
+  },
+  {
+    title: "Finalizando a calibração!",
+    ImageComponent: FingerPrint,
+    text: "Certifique-se de que sua digital está bem focada. Testaremos diferentes iluminações — se a tela escurecer, não se preocupe, faz parte do processo!"
+  }
+];
+
+export default data;

package/src/components/Typograph/typograph.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Text, TextStyle, useColorScheme } from "react-native";
+import { RFValue } from "react-native-responsive-fontsize";
+
+type Props = {
+  children: string | string[] | undefined;
+  bold?: boolean;
+  style?: TextStyle;
+};
+
+const HAText = ({ children, bold, style }: Props) => {
+  const isDark = useColorScheme() === "dark";
+
+  const textStyle: TextStyle = {
+    fontWeight: bold ? "bold" : "normal",
+    color: isDark ? "white" : "black",
+    fontSize: RFValue(16),
+    ...style
+  };
+
+  return <Text style={textStyle}>{children}</Text>;
+};
+
+export default HAText;

package/src/components/index.ts

@@ -4,5 +4,20 @@ import RecordButton from "./recordButton/recordButton";
 import CaptureButton from "./CaptureButton";
 import CameraConfigInfo from "./CameraConfigInfo";
 import Gabarito from "./Gabarito";
+import HAText from "./Typograph/typograph";
+import Icon from "./icon/icon";
+import HACarouselCalibration from "./HACarouselCalibration/HACarouselCalibration";
+import HACaptureInstructions from "./HACaptureInstructions/HACaptureInstructions";
 
-export { DeviceNotFound, ModalMessage, RecordButton, CaptureButton, CameraConfigInfo, Gabarito };
+export {
+  DeviceNotFound,
+  ModalMessage,
+  RecordButton,
+  CaptureButton,
+  CameraConfigInfo,
+  Gabarito,
+  HAText,
+  Icon,
+  HACarouselCalibration,
+  HACaptureInstructions
+};

package/src/index.tsx

@@ -1,3 +1,19 @@
-import { LifeCertificate, FingerRegister, FingerAuth } from "./screens";
+import {
+  LifeCertificate,
+  FingerRegister,
+  FingerAuth,
+  RegisterOperationPointsBiometrics,
+  RegisterOperationPointsLifeCertificate
+} from "./screens";
 
-export { LifeCertificate, FingerRegister, FingerAuth };
+import { HACarouselCalibration, HACaptureInstructions } from "./components";
+
+export {
+  LifeCertificate,
+  FingerRegister,
+  FingerAuth,
+  RegisterOperationPointsBiometrics,
+  RegisterOperationPointsLifeCertificate,
+  HACarouselCalibration,
+  HACaptureInstructions
+};

package/src/screens/RegisterOperations/registerOperationPointsBiometrics.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Alert, BackHandler, Modal, View, useColorScheme } from "react-native";
+import { Camera, Point, useCameraDevice, useCameraFormat, useCameraPermission } from "react-native-vision-camera";
+import { runOnJS } from "react-native-reanimated";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { readFile } from "react-native-fs";
+import Slider from "@react-native-community/slider";
+
+import { useDispatch, useSelector } from "../../store/modules/operationPoints";
+import { scale0to1Inverse, useIsForeground } from "../../utils";
+import { CaptureButton, DeviceNotFound, Gabarito, HAText } from "../../components";
+import { styles } from "./styles";
+
+type Props = {
+  onSuccess: () => void;
+};
+
+const RegisterOperationPointsBiometrics = ({ onSuccess }: Props) => {
+  const isDark = useColorScheme() === "dark";
+  const backgroundColor = isDark ? "black" : "white";
+  const [zoom, setZoom] = useState<number>(2);
+  const [torch, setTorch] = useState<"off" | "on">("off");
+  const dispatch = useDispatch();
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const cameraRef = useRef<Camera>(null);
+  const isForeground = useIsForeground();
+  const isActive = isForeground;
+
+  const { loading, exposureScaleZeroToOneBiometrics, message, base64Images } = useSelector();
+  const imagesCount = base64Images.length;
+
+  const containerCaptureStyled = [styles.containerCapture, { bottom: 20 }];
+
+  const device = useCameraDevice("back");
+  const cameraFormat = useCameraFormat(device, [
+    {
+      photoResolution: {
+        width: 1280,
+        height: 720
+      }
+    }
+  ]);
+
+  const cameraPermission = useCallback(async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  useEffect(() => {
+    cameraPermission();
+  }, [cameraPermission]);
+
+  useEffect(() => {
+    if (imagesCount === 3 && device != null) {
+      dispatch.sendImagesBase64({
+        base64Images,
+        exposureScaleZeroToOneBiometrics,
+        exposureMin: device.minExposure,
+        exposureMax: device.maxExposure,
+        zoomMin: device.minZoom,
+        zoomMax: device.maxZoom
+      });
+    }
+  }, [imagesCount, device, dispatch]);
+
+  const takePhoto = async () => {
+    const photo = await cameraRef.current?.takePhoto();
+    if (photo != null) {
+      const imageBase64 = await readFile(photo.path, "base64");
+      dispatch.setImageBase64(imageBase64);
+    }
+  };
+
+  const focus = useCallback((point: Point) => {
+    const camera = cameraRef.current;
+    if (camera != null) {
+      camera.focus(point);
+    }
+  }, []);
+
+  const gesture = Gesture.Tap().onBegin(({ x, y }) => {
+    runOnJS(focus)({ x, y });
+  });
+
+  useEffect(() => {
+    if (loading === "succeeded") {
+      Alert.alert("Sucesso", message, [{ text: "OK", onPress: () => onSuccess && onSuccess() }]);
+    }
+    if (loading === "failed") {
+      Alert.alert("Continue", message, [
+        {
+          text: "OK",
+          onPress: () => dispatch.changeExposureBiometrics()
+        }
+      ]);
+    }
+  }, [loading, message, dispatch]);
+
+  const backAction = () => {
+    const exit = BackHandler.exitApp;
+    Alert.alert("Atenção!", "Tem certeza que deseja sair?", [
+      {
+        text: "Cancelar",
+        onPress: () => null,
+        style: "cancel"
+      },
+      { text: "Sim", onPress: exit }
+    ]);
+    return true;
+  };
+
+  useEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        backAction();
+        return true;
+      };
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+      return () => {
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [backAction])
+  );
+
+  const onInitialized = () => setTorch("on");
+
+  if (device == null || hasPermission === false)
+    return <DeviceNotFound hasPermission cameraPermission={cameraPermission} />;
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <GestureDetector gesture={gesture}>
+        <View style={styles.containerCamera}>
+          <Camera
+            ref={cameraRef}
+            device={device}
+            style={styles.camera}
+            format={cameraFormat}
+            isActive={isActive}
+            torch={torch}
+            exposure={scale0to1Inverse(exposureScaleZeroToOneBiometrics, device.minExposure, device.maxExposure)}
+            zoom={zoom}
+            onInitialized={onInitialized}
+            photo
+          />
+          <Gabarito />
+        </View>
+      </GestureDetector>
+      <View style={containerCaptureStyled}>
+        <CaptureButton onPress={takePhoto} imagesCount={imagesCount} />
+      </View>
+      <View style={[styles.containerSlider, { backgroundColor }]}>
+        <HAText bold>{`Ponto de operação`}</HAText>
+        <Slider maximumValue={4} minimumValue={2} value={zoom} onValueChange={(value) => setZoom(value)} step={1} />
+      </View>
+      {loading === "pending" && (
+        <Modal animationType="fade" transparent visible={true}>
+          <View style={styles.containerModalLoading}>
+            <ActivityIndicator size="large" color="#fff" />
+          </View>
+        </Modal>
+      )}
+    </GestureHandlerRootView>
+  );
+};
+
+export default RegisterOperationPointsBiometrics;

package/src/screens/RegisterOperations/registerOperationPointsLifeCertificate.tsx

@@ -0,0 +1,175 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Alert, BackHandler, Modal, View } from "react-native";
+import { Camera, useCameraDevice, useCameraFormat, useCameraPermission } from "react-native-vision-camera";
+
+import { useDispatch, useSelector } from "../../store/modules/operationPoints";
+import { scale0to1Inverse, useIsForeground } from "../../utils";
+import { DeviceNotFound, RecordButton } from "../../components";
+import { styles } from "./styles";
+
+type Props = {
+  onSuccess: () => void;
+};
+
+const RegisterOperationPointsLifeCertificate = ({ onSuccess }: Props) => {
+  const [torch, setTorch] = useState<"off" | "on">("off");
+  const dispatch = useDispatch();
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const cameraRef = useRef<Camera>(null);
+  const isForeground = useIsForeground();
+  const isActive = isForeground;
+
+  const [intervalState, setIntervalState] = useState<NodeJS.Timeout | null>(null);
+  const [timer, setTimer] = useState(10);
+  const [isRecord, setIsRecord] = useState(false);
+
+  const { loading, registered, exposureScaleZeroToOneLifeCertificate, message } = useSelector();
+
+  const device = useCameraDevice("back");
+  const cameraFormat = useCameraFormat(device, [
+    {
+      videoResolution: {
+        width: 1280,
+        height: 720
+      }
+    }
+  ]);
+  const exposure = scale0to1Inverse(
+    exposureScaleZeroToOneLifeCertificate,
+    device !== undefined ? device.minExposure : 0,
+    device !== undefined ? device.maxExposure : 0
+  );
+
+  const cameraPermission = useCallback(async () => {
+    if (!hasPermission) {
+      await requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  useEffect(() => {
+    cameraPermission();
+  }, [cameraPermission]);
+
+  useEffect(() => {
+    if (loading === "succeeded") {
+      Alert.alert("Sucesso", message, [
+        {
+          text: "OK",
+          onPress: () => {
+            registered ? () => onSuccess && onSuccess() : null;
+          }
+        }
+      ]);
+    }
+    if (loading === "failed") {
+      Alert.alert("Continue", message, [
+        {
+          text: "OK",
+          onPress: () => dispatch.changeExposureLifeCertificate()
+        }
+      ]);
+    }
+    setTimer(10);
+  }, [loading, message, dispatch]);
+
+  const backAction = () => {
+    const exit = BackHandler.exitApp;
+    Alert.alert("Atenção!", "Tem certeza que deseja sair?", [
+      {
+        text: "Cancelar",
+        onPress: () => null,
+        style: "cancel"
+      },
+      { text: "Sim", onPress: exit }
+    ]);
+    return true;
+  };
+
+  useEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        backAction();
+        return true;
+      };
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+      return () => {
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [backAction])
+  );
+
+  const startVideoRecording = useCallback(() => {
+    setIsRecord(true);
+    if (device !== undefined) {
+      cameraRef.current?.startRecording({
+        fileType: "mp4",
+        onRecordingFinished: (video) =>
+          dispatch.sendVideosLifeCertificate({
+            exposureScaleZeroToOneLifeCertificate,
+            exposureMax: device.maxExposure,
+            exposureMin: device.minExposure,
+            videoPath: video.path
+          }),
+        onRecordingError: (error) => console.error(error)
+      });
+    }
+  }, [dispatch]);
+
+  const recordingVideo = useCallback(() => {
+    startVideoRecording();
+    setIntervalState(
+      setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000)
+    );
+  }, [startVideoRecording]);
+
+  const stopRecodingVideo = useCallback(async () => {
+    setIsRecord(false);
+    await cameraRef.current?.stopRecording();
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (timer < 0) {
+      if (!intervalState) return;
+      clearInterval(intervalState);
+      stopRecodingVideo();
+    }
+  }, [timer, intervalState, stopRecodingVideo]);
+
+  const onInitialized = () => setTorch("on");
+
+  if (device == null || hasPermission === false)
+    return <DeviceNotFound hasPermission={hasPermission} cameraPermission={cameraPermission} />;
+
+  return (
+    <>
+      <View style={styles.containerCamera}>
+        <Camera
+          ref={cameraRef}
+          device={device}
+          style={styles.camera}
+          format={cameraFormat}
+          isActive={isActive}
+          torch={torch}
+          exposure={exposure}
+          zoom={0}
+          onInitialized={onInitialized}
+          video
+        />
+      </View>
+      <View style={[styles.containerCapture, { bottom: 0 }]}>
+        <RecordButton onPress={recordingVideo} disabled={loading === "pending"} timer={timer} isRecording={isRecord} />
+      </View>
+      {loading === "pending" && (
+        <Modal animationType="fade" transparent visible>
+          <View style={styles.containerModalLoading}>
+            <ActivityIndicator size="large" color="#fff" />
+          </View>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default RegisterOperationPointsLifeCertificate;

package/src/screens/RegisterOperations/styles.ts

@@ -0,0 +1,41 @@
+import { StyleSheet, Platform } from "react-native";
+
+export const styles = StyleSheet.create({
+  containerCamera: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  camera: {
+    flex: 1
+  },
+  box: {
+    flexDirection: "row",
+    height: 50,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 50,
+    backgroundColor: "#1F75FF",
+    marginVertical: Platform.OS === "android" ? 100 : 120
+  },
+  text: {
+    position: "absolute",
+    color: "#fff"
+  },
+  containerCapture: {
+    position: "absolute",
+    width: "100%",
+    marginBottom: "30%",
+    alignItems: "center"
+  },
+  containerModalLoading: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  containerSlider: {
+    height: Platform.OS === "android" ? 100 : 120,
+    padding: 20,
+    gap: 10
+  }
+});

package/src/screens/index.ts

@@ -1,5 +1,13 @@
 import FingerRegister from "./FingerRegister/FingerRegister";
 import LifeCertificate from "./LifeCertificate/LifeCertificate";
 import FingerAuth from "./FingerAuth/FingerAuth";
+import RegisterOperationPointsBiometrics from "./RegisterOperations/registerOperationPointsBiometrics";
+import RegisterOperationPointsLifeCertificate from "./RegisterOperations/registerOperationPointsLifeCertificate";
 
-export { FingerRegister, LifeCertificate, FingerAuth };
+export {
+  FingerRegister,
+  LifeCertificate,
+  FingerAuth,
+  RegisterOperationPointsBiometrics,
+  RegisterOperationPointsLifeCertificate
+};

package/src/services/index.ts

@@ -1,4 +1,12 @@
-import { lifeCertificate, getConfigsApi, registerFingerImages, authFinger } from "./services";
+import {
+  lifeCertificate,
+  getConfigsApi,
+  registerFingerImages,
+  authFinger,
+  getConfigOperationPoints,
+  sendImagesForRegisterOperationPoints,
+  sendVideoForRegisterOperationPoints
+} from "./services";
 
 const BASE_URL = "https://api.liveid.app.br";
 const TOKEN =
@@ -39,4 +47,12 @@ export const verificaCPF = async (cpf: any) => {
   return data;
 };
 
-export { lifeCertificate, getConfigsApi, registerFingerImages, authFinger };
+export {
+  lifeCertificate,
+  getConfigsApi,
+  registerFingerImages,
+  authFinger,
+  getConfigOperationPoints,
+  sendImagesForRegisterOperationPoints,
+  sendVideoForRegisterOperationPoints
+};