@ha_tecno/live-id-sdk 2.14.1 → 2.16.0

package/src/screens/RegisterOperations/registerOperationPointsBiometrics.tsx

@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Alert, BackHandler, Modal, View, useColorScheme } from "react-native";
+import { StyleSheet, Alert, BackHandler, View, Text, Dimensions } 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";
+// @ts-ignore
+import TabSelectorAnimation from "react-native-tab-selector";
+import { RulerPicker } from "react-native-ruler-picker";
 
 import { useDispatch, useSelector } from "../../store/modules/operationPoints";
-import { scale0to1Inverse, useIsForeground } from "../../utils";
-import { CaptureButton, DeviceNotFound, Gabarito, HAText } from "../../components";
+import { scale0to1, useIsForeground } from "../../utils";
+import { DeviceNotFound, Gabarito, HACaptureButton, HAModalMessage, HAStepProgress } from "../../components";
 import { styles } from "./styles";
 
 type Props = {
@@ -16,22 +18,20 @@ type Props = {
 };
 
 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 { width } = Dimensions.get("screen");
+  const device = useCameraDevice("back");
 
-  const { loading, exposureScaleZeroToOneBiometrics, message, base64Images } = useSelector();
+  const { loading, message, base64Images, exposure, zoom, modal } = useSelector();
   const imagesCount = base64Images.length;
-
-  const containerCaptureStyled = [styles.containerCapture, { bottom: 20 }];
-
-  const device = useCameraDevice("back");
+  const minExposure = device != null ? device.minExposure : 0;
+  const maxExposure = device != null ? device.maxExposure : 0;
+  const exposureScaleZeroToOneBiometrics = scale0to1(exposure, minExposure, maxExposure);
   const cameraFormat = useCameraFormat(device, [
     {
       photoResolution: {
@@ -48,6 +48,7 @@ const RegisterOperationPointsBiometrics = ({ onSuccess }: Props) => {
   }, [hasPermission, requestPermission]);
 
   useEffect(() => {
+    dispatch.resetZoomAndExposure();
     cameraPermission();
   }, [cameraPermission]);
 
@@ -85,18 +86,27 @@ const RegisterOperationPointsBiometrics = ({ onSuccess }: Props) => {
 
   useEffect(() => {
     if (loading === "succeeded") {
-      Alert.alert("Sucesso", message, [{ text: "OK", onPress: () => onSuccess && onSuccess() }]);
+      dispatch.setModal("Biometria cadastrada!", "Você pode fazer uma nova captura ou voltar para a home.");
+      onSuccess && onSuccess();
+      dispatch.resetState();
     }
     if (loading === "failed") {
-      Alert.alert("Continue", message, [
-        {
-          text: "OK",
-          onPress: () => dispatch.changeExposureBiometrics()
-        }
-      ]);
+      dispatch.setModal(
+        "Erro na captura!",
+        "Houve um problema ao capturar sua digital. Tente de novo em um fundo neutro."
+      );
+      dispatch.resetState();
     }
   }, [loading, message, dispatch]);
 
+  const handleExposure = (value: string) => {
+    dispatch.handleExposure(Number(value));
+  };
+
+  const handleZoom = (value: number) => {
+    dispatch.handleZoom(value + 1);
+  };
+
   const backAction = () => {
     const exit = BackHandler.exitApp;
     Alert.alert("Atenção!", "Tem certeza que deseja sair?", [
@@ -129,17 +139,23 @@ const RegisterOperationPointsBiometrics = ({ onSuccess }: Props) => {
     return <DeviceNotFound hasPermission cameraPermission={cameraPermission} />;
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.root}>
       <GestureDetector gesture={gesture}>
         <View style={styles.containerCamera}>
+          <View style={styles.containerStepProgress}>
+            <View style={styles.containerTextStep}>
+              <Text style={styles.textStep}>Calibrando:</Text>
+            </View>
+            <HAStepProgress totalSteps={3} step={base64Images.length + 1} />
+          </View>
           <Camera
             ref={cameraRef}
             device={device}
-            style={styles.camera}
+            style={StyleSheet.absoluteFillObject}
             format={cameraFormat}
             isActive={isActive}
             torch={torch}
-            exposure={scale0to1Inverse(exposureScaleZeroToOneBiometrics, device.minExposure, device.maxExposure)}
+            exposure={exposure}
             zoom={zoom}
             onInitialized={onInitialized}
             photo
@@ -147,20 +163,37 @@ const RegisterOperationPointsBiometrics = ({ onSuccess }: Props) => {
           <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 style={styles.containerContent}>
+        <TabSelectorAnimation
+          tabs={[{ title: "1x" }, { title: "2x" }, { title: "3x" }, { title: "4x" }]}
+          style={styles.marginTabSelector}
+          onChangeTab={handleZoom}
+        />
+        <View style={styles.containerRuler}>
+          <RulerPicker
+            width={width * 0.8}
+            height={50}
+            min={minExposure / 4}
+            max={maxExposure / 4}
+            valueTextStyle={styles.textStyleRuler}
+            indicatorColor="#FFB200"
+            indicatorHeight={50}
+            step={0.1}
+            initialValue={0}
+            fractionDigits={1}
+            onValueChange={handleExposure}
+            unit=""
+          />
+        </View>
+        <View style={styles.containerButton}>
+          <HACaptureButton onPress={takePhoto} />
+        </View>
+        <HAModalMessage
+          isLoading={loading === "pending"}
+          modal={modal}
+          messageLoading="Estamos processando suas capturas"
+        />
       </View>
-      {loading === "pending" && (
-        <Modal animationType="fade" transparent visible={true}>
-          <View style={styles.containerModalLoading}>
-            <ActivityIndicator size="large" color="#fff" />
-          </View>
-        </Modal>
-      )}
     </GestureHandlerRootView>
   );
 };

package/src/screens/RegisterOperations/registerOperationPointsLifeCertificate.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Alert, BackHandler, Modal, View } from "react-native";
+import { Alert, BackHandler, View, StyleSheet, Text } from "react-native";
 import { Camera, useCameraDevice, useCameraFormat, useCameraPermission } from "react-native-vision-camera";
+// @ts-ignore
+import TabSelectorAnimation from "react-native-tab-selector";
 
 import { useDispatch, useSelector } from "../../store/modules/operationPoints";
 import { scale0to1Inverse, useIsForeground } from "../../utils";
-import { DeviceNotFound, RecordButton } from "../../components";
+import { DeviceNotFound, HAModalMessage, HARecordButton } from "../../components";
 import { styles } from "./styles";
 
 type Props = {
@@ -23,7 +25,7 @@ const RegisterOperationPointsLifeCertificate = ({ onSuccess }: Props) => {
   const [timer, setTimer] = useState(10);
   const [isRecord, setIsRecord] = useState(false);
 
-  const { loading, registered, exposureScaleZeroToOneLifeCertificate, message } = useSelector();
+  const { loading, registered, exposureScaleZeroToOneLifeCertificate, message, modal, exposure } = useSelector();
 
   const device = useCameraDevice("back");
   const cameraFormat = useCameraFormat(device, [
@@ -34,11 +36,6 @@ const RegisterOperationPointsLifeCertificate = ({ onSuccess }: Props) => {
       }
     }
   ]);
-  const exposure = scale0to1Inverse(
-    exposureScaleZeroToOneLifeCertificate,
-    device !== undefined ? device.minExposure : 0,
-    device !== undefined ? device.maxExposure : 0
-  );
 
   const cameraPermission = useCallback(async () => {
     if (!hasPermission) {
@@ -47,27 +44,23 @@ const RegisterOperationPointsLifeCertificate = ({ onSuccess }: Props) => {
   }, [hasPermission, requestPermission]);
 
   useEffect(() => {
+    dispatch.resetZoomAndExposure();
     cameraPermission();
+    dispatch.handleExposure(scale0to1Inverse(0.3, device?.minExposure ?? 0, device?.maxExposure ?? 0));
   }, [cameraPermission]);
 
   useEffect(() => {
     if (loading === "succeeded") {
-      Alert.alert("Sucesso", message, [
-        {
-          text: "OK",
-          onPress: () => {
-            registered ? () => onSuccess && onSuccess() : null;
-          }
-        }
-      ]);
+      dispatch.setModal("Prova de vida concluída!", message ?? "");
+      registered ? onSuccess && onSuccess() : null;
+      dispatch.resetState();
     }
     if (loading === "failed") {
-      Alert.alert("Continue", message, [
-        {
-          text: "OK",
-          onPress: () => dispatch.changeExposureLifeCertificate()
-        }
-      ]);
+      dispatch.setModal(
+        "Algo deu errado!",
+        "Não conseguimos ler seus batimentos cardíacos. Tente novamente, por favor."
+      );
+      dispatch.resetState();
     }
     setTimer(10);
   }, [loading, message, dispatch]);
@@ -137,38 +130,71 @@ const RegisterOperationPointsLifeCertificate = ({ onSuccess }: Props) => {
     }
   }, [timer, intervalState, stopRecodingVideo]);
 
+  const handleExposure = (value: number) => {
+    if (device !== undefined) {
+      switch (value) {
+        case 0:
+          dispatch.handleExposure(scale0to1Inverse(0.3, device.minExposure, device.maxExposure));
+          break;
+        case 1:
+          dispatch.handleExposure(scale0to1Inverse(0.4, device.minExposure, device.maxExposure));
+          break;
+        case 2:
+          dispatch.handleExposure(scale0to1Inverse(0.5, device.minExposure, device.maxExposure));
+          break;
+        case 3:
+          dispatch.handleExposure(scale0to1Inverse(0.6, device.minExposure, device.maxExposure));
+          break;
+        case 4:
+          dispatch.handleExposure(scale0to1Inverse(0.7, device.minExposure, device.maxExposure));
+          break;
+        default:
+          console.log("Invalid");
+      }
+    }
+  };
+
   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 style={styles.containerCameraRecord}>
+      <View style={styles.containerCameraContent}>
+        <View style={styles.containerCameraTimer}>
+          <Text style={styles.textRecord}>{timer < 0 ? 0 : timer} s</Text>
+        </View>
+        <Text style={styles.textRecord}>
+          Coloque o dedo na câmera, pressione suavemente, clique no botão de captura e aguarde por 10 segundos.
+        </Text>
       </View>
-      <View style={[styles.containerCapture, { bottom: 0 }]}>
-        <RecordButton onPress={recordingVideo} disabled={loading === "pending"} timer={timer} isRecording={isRecord} />
+      <Camera
+        ref={cameraRef}
+        device={device}
+        style={StyleSheet.absoluteFillObject}
+        format={cameraFormat}
+        isActive={isActive}
+        torch={torch}
+        exposure={exposure}
+        zoom={0}
+        onInitialized={onInitialized}
+        video
+      />
+      <View style={styles.containerRecordButton}>
+        <TabSelectorAnimation
+          style={styles.marginTabSelector}
+          tabs={[{ title: "0.3" }, { title: "0.4" }, { title: "0.5" }, { title: "0.6" }, { title: "0.7" }]}
+          onChangeTab={handleExposure}
+        />
+        <HARecordButton onPress={recordingVideo} disabled={loading === "pending" || isRecord} />
       </View>
-      {loading === "pending" && (
-        <Modal animationType="fade" transparent visible>
-          <View style={styles.containerModalLoading}>
-            <ActivityIndicator size="large" color="#fff" />
-          </View>
-        </Modal>
-      )}
-    </>
+      <HAModalMessage
+        isLoading={loading === "pending"}
+        modal={modal}
+        messageLoading="Estamos verificando sua prova de vida."
+      />
+    </View>
   );
 };
 

package/src/screens/RegisterOperations/styles.ts

@@ -1,41 +1,84 @@
 import { StyleSheet, Platform } from "react-native";
 
 export const styles = StyleSheet.create({
+  root: { flex: 1 },
   containerCamera: {
     flex: 1,
     justifyContent: "center"
   },
-  camera: {
-    flex: 1
+  containerStepProgress: {
+    position: "absolute",
+    top: 0,
+    width: "100%",
+    alignItems: "center",
+    zIndex: 99,
+    paddingVertical: 20
   },
-  box: {
+  containerTextStep: {
     flexDirection: "row",
-    height: 50,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 50,
-    backgroundColor: "#1F75FF",
-    marginVertical: Platform.OS === "android" ? 100 : 120
+    width: "100%",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingBottom: 20
   },
-  text: {
-    position: "absolute",
-    color: "#fff"
+  textStep: {
+    fontSize: Platform.select({
+      ios: 16,
+      android: 14
+    }),
+    color: "#fff",
+    fontWeight: "bold"
+  },
+  containerContent: { position: "absolute", alignSelf: "center", bottom: 20 },
+  marginTabSelector: {
+    marginHorizontal: Platform.select({
+      ios: 100,
+      android: 80
+    })
+  },
+  containerRuler: {
+    paddingTop: 30
   },
-  containerCapture: {
+  textStyleRuler: {
+    color: "#FFB200",
+    fontSize: Platform.select({
+      ios: 14,
+      android: 12
+    }),
+    fontWeight: "bold"
+  },
+  containerButton: {
+    marginTop: 20,
+    alignSelf: "center"
+  },
+  containerRecordButton: {
     position: "absolute",
     width: "100%",
-    marginBottom: "30%",
-    alignItems: "center"
+    alignItems: "center",
+    bottom: 20,
+    gap: 10
   },
-  containerModalLoading: {
+  containerCameraRecord: {
     flex: 1,
-    justifyContent: "center",
+    backgroundColor: "#0d0d0d"
+  },
+  containerCameraContent: {
+    position: "absolute",
+    top: 0,
     alignItems: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
+    zIndex: 99,
+    paddingVertical: 20,
+    gap: 20
   },
-  containerSlider: {
-    height: Platform.OS === "android" ? 100 : 120,
-    padding: 20,
-    gap: 10
+  containerCameraTimer: { backgroundColor: "#00000075", borderRadius: 25, padding: 6 },
+  textRecord: {
+    color: "#ffffff",
+    fontSize: Platform.select({
+      ios: 20,
+      android: 18
+    }),
+    fontWeight: "600",
+    textAlign: "center",
+    paddingHorizontal: 20
   }
 });

package/src/services/services.ts

@@ -45,7 +45,7 @@ export const registerFingerImages = async ({
 }: RegisterFingerImagesType): Promise<RegisterFingerResponse> => {
   try {
     const { data } = await axiosInstance.post(
-      "/enroll-images",
+      "/v1/enroll-images",
       {
         device_model: deviceModel,
         UID,
@@ -78,7 +78,7 @@ export const authFinger = async ({ UID, image, exposure, zoom }: AuthFingerType)
   try {
     const finger = "RI";
     const { data } = await axiosInstance.post(
-      "/verify",
+      "/v1/verify",
       { device_model: deviceModel, UID, finger, image, exposure, zoom },
       {
         headers: {
@@ -122,7 +122,7 @@ export const lifeCertificate = async ({
     formData.append("device_model", deviceModel);
     formData.append("exposure", exposure);
 
-    const { data } = await axiosInstance.post("/liveness", formData, {
+    const { data } = await axiosInstance.post("/v1/liveness", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
         Authorization: `Bearer ${TOKEN}`
@@ -165,7 +165,7 @@ export const sendImagesForRegisterOperationPoints = async ({
 }: SendImagesForRegisterOperationPointsType): Promise<SendImagesForRegisterOperationPointsResponse> => {
   try {
     const { data } = await axiosInstance.post(
-      "/images-quality",
+      "/v1/images-quality",
       {
         device_model: deviceModel,
         images,
@@ -227,7 +227,7 @@ export const sendVideoForRegisterOperationPoints = async ({
     formData.append("exposureMax", exposureMax);
     formData.append("exposureScaleZeroToOne", exposureScaleZeroToOneLifeCertificate);
 
-    const { data } = await axiosInstance.post("/video-quality", formData, {
+    const { data } = await axiosInstance.post("/v1/video-quality", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
         Authorization: `Bearer ${TOKEN}`
@@ -236,8 +236,8 @@ export const sendVideoForRegisterOperationPoints = async ({
     const hasConfig = data.config !== undefined;
     return {
       message: hasConfig
-        ? "Cadastro de ponto de operação realizado com sucesso!"
-        : "A calibração foi um sucesso, faça novamente mais uma vez!",
+        ? "Cadastro do dispositivo foi realizado com sucesso! Agora você pode acessar o LiveID."
+        : "Tudo certo! Repita o processo mais uma vez!",
       status: data.status,
       hasConfig
     };

package/src/store/modules/lifeCertificate/slice.ts

@@ -15,7 +15,8 @@ const initialState: InitialState = {
     message: "",
     modal: {
       title: "",
-      message: ""
+      message: "",
+      bpm: 0
     }
   }
 };
@@ -62,13 +63,14 @@ const sendLifeCertificate = async ({ videoFile, UID, exposure, mock }: SendLifeC
   }));
 };
 
-const setModal = (title: string, message: string) => {
+const setModal = (title: string, message: string, bpm: number) => {
   slice.setState((state) => ({
     state: {
       ...state.state,
       modal: {
         title,
-        message
+        message,
+        bpm
       }
     }
   }));

package/src/store/modules/lifeCertificate/types.ts

@@ -12,6 +12,7 @@ type State = {
   modal?: {
     title: string;
     message: string;
+    bpm: number;
   };
 };
 
@@ -21,7 +22,7 @@ type Dispatch = {
   handleLoading: () => void;
   setIsRecording: (recoding: boolean) => void;
   resetState: () => void;
-  setModal: (title: string, message: string) => void;
+  setModal: (title: string, message: string, bpm: number) => void;
 };
 
 export type InitialState = {

package/src/store/modules/operationPoints/slice.ts

@@ -25,7 +25,12 @@ const initialState: InitialState = {
     exposureScaleZeroToOneBiometrics: Platform.OS === "android" ? 0.12 : 0.3,
     exposureScaleZeroToOneLifeCertificate: Platform.OS === "android" ? 0.12 : 0.3,
     registered: false,
-    helpStep: "introduction"
+    exposure: 0,
+    zoom: 0,
+    modal: {
+      title: "",
+      message: ""
+    }
   }
 };
 
@@ -35,8 +40,17 @@ const resetState = () => {
       ...state.state,
       loading: "idle",
       base64Images: [],
-      registered: false,
-      helpStep: "introduction"
+      registered: false
+    }
+  }));
+};
+
+const resetZoomAndExposure = () => {
+  slice.setState((state) => ({
+    state: {
+      ...state.state,
+      exposure: 0,
+      zoom: 0
     }
   }));
 };
@@ -111,18 +125,6 @@ const changeExposureLifeCertificate = () => {
   });
 };
 
-const handleStepHelp = () => {
-  slice.setState((state) => {
-    const { helpStep } = state.state;
-    return {
-      state: {
-        ...state.state,
-        helpStep: helpStep === "introduction" ? "instruction" : "introduction"
-      }
-    };
-  });
-};
-
 // separar a lógica do store
 const getConfigDefault = async (operation: "finger" | "liveness") => {
   const configs = await getConfigOperationPoints();
@@ -222,6 +224,36 @@ const sendVideosLifeCertificate = async ({
   }));
 };
 
+const handleZoom = (zoom: number) => {
+  slice.setState((state) => ({
+    state: {
+      ...state.state,
+      zoom
+    }
+  }));
+};
+
+const handleExposure = (exposure: number) => {
+  slice.setState((state) => ({
+    state: {
+      ...state.state,
+      exposure
+    }
+  }));
+};
+
+const setModal = (title: string, message: string) => {
+  slice.setState((state) => ({
+    state: {
+      ...state.state,
+      modal: {
+        title,
+        message
+      }
+    }
+  }));
+};
+
 const slice = create<OperationPointsState>(() => ({
   ...initialState,
   dispatch: {
@@ -229,11 +261,14 @@ const slice = create<OperationPointsState>(() => ({
     resetState,
     changeExposureBiometrics,
     changeExposureLifeCertificate,
-    handleStepHelp,
     getConfigDefaultBiometrics,
     getConfigDefaultLifeCertificate,
     sendImagesBase64,
-    sendVideosLifeCertificate
+    sendVideosLifeCertificate,
+    handleZoom,
+    handleExposure,
+    setModal,
+    resetZoomAndExposure
   }
 }));