@ha_tecno/live-id-sdk 2.14.0 → 2.15.0

package/src/screens/FingerRegister/FingerRegister.tsx

@@ -1,16 +1,24 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, Text } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { Camera, Point, useCameraDevice, useCameraFormat, useCameraPermission } from "react-native-vision-camera";
 import Orientation from "react-native-orientation-locker";
 import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS } from "react-native-reanimated";
-import Picker, { PickerStyle } from "react-native-picker-select";
-
-import { CameraConfigInfo, CaptureButton, DeviceNotFound, Gabarito, ModalMessage } from "../../components";
-import { styles } from "./styles";
+import { BottomSheetModal, BottomSheetModalProvider, BottomSheetFlatList } from "@gorhom/bottom-sheet";
+
+import {
+  DeviceNotFound,
+  Gabarito,
+  HAButton,
+  HACaptureButton,
+  HAModalMessage,
+  HAStepProgress,
+  Icon
+} from "../../components";
 import { useDispatch, useSelector } from "../../store/modules/fingerRegister";
-import { filteredFingers, useIsForeground } from "../../utils";
-import Icon from "../../components/icon/icon";
+import { useIsForeground } from "../../utils";
+import { styles } from "./styles";
+import data from "./data";
 
 enum Finger {
   LEFT_THUMB = "LT",
@@ -30,36 +38,22 @@ type Props = {
   onSuccess: (code: number) => void;
   isFocused?: boolean;
   mock?: boolean;
-  testID?: string;
   registerUser?: boolean;
   registeredFingers?: string[];
 };
 
-const MultiFingerRegister = ({ testID, UID, onSuccess, isFocused, mock, registerUser, registeredFingers }: Props) => {
+const MultiFingerRegister = ({ UID, onSuccess, isFocused, mock, registerUser, registeredFingers }: Props) => {
   const [torch, setTorch] = useState<"off" | "on">("off");
   const cameraRef = useRef<Camera>(null);
   const isForeground = useIsForeground();
   const isActive = isFocused !== undefined ? isForeground && isFocused : isForeground;
   const { hasPermission, requestPermission } = useCameraPermission();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const device = useCameraDevice("back");
   const state = useSelector();
   const dispatch = useDispatch();
 
   const containerCaptureStyled = [styles.containerCapture, { bottom: state.showButtonInfo ? 75 : 20 }];
-  const pickerStyled: PickerStyle = {
-    chevronDown: { display: "none" },
-    chevronUp: { display: "none" },
-    inputIOS: {
-      fontSize: 16,
-      color: "#000",
-      textAlign: "center"
-    },
-    inputAndroid: {
-      fontSize: 14,
-      color: "#000",
-      textAlign: "center"
-    }
-  };
 
   const itemsPicker = [
     { label: "Indicador Direito", value: Finger.RIGHT_INDEX },
@@ -74,7 +68,7 @@ const MultiFingerRegister = ({ testID, UID, onSuccess, isFocused, mock, register
     { label: "Polegar Esquerdo", value: Finger.LEFT_THUMB }
   ];
 
-  const filteredItemsPicker = filteredFingers(registeredFingers ?? [], itemsPicker);
+  const fingerName = itemsPicker.find((i) => i.value === state.currentFinger)?.label;
 
   useEffect(() => {
     Orientation.lockToPortrait();
@@ -115,7 +109,7 @@ const MultiFingerRegister = ({ testID, UID, onSuccess, isFocused, mock, register
 
   useEffect(() => {
     if (state.code === 0) {
-      dispatch.setModal("Sucesso!", "Cadastro de digital realizado com sucesso!");
+      dispatch.setModal("Tudo certo!", "Sua biometria foi cadastrada com sucesso. Agora você pode acessar o LiveID!");
       onSuccess && onSuccess?.(state.code);
       mock === true ? setTimeout(() => dispatch.handleLoading(), 2000) : dispatch.handleLoading();
       dispatch.handleFinger();
@@ -135,6 +129,7 @@ const MultiFingerRegister = ({ testID, UID, onSuccess, isFocused, mock, register
   };
 
   const focus = useCallback((point: Point) => {
+    bottomSheetModalRef.current?.dismiss();
     const camera = cameraRef.current;
     if (camera != null) {
       camera.focus(point);
@@ -145,56 +140,105 @@ const MultiFingerRegister = ({ testID, UID, onSuccess, isFocused, mock, register
     runOnJS(focus)({ x, y });
   });
 
+  const onInitialized = () => setTorch("on");
+
   const handleCurrentFinger = (value: string) => {
+    bottomSheetModalRef.current?.dismiss();
     dispatch.setCurrentFinger(value as Finger);
   };
 
-  const onInitialized = () => setTorch("on");
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+
+  const snapPoints = useMemo(() => ["25%", "50%"], []);
+
+  const renderItem = useCallback(({ item, index }) => {
+    const isRegistered = registeredFingers?.some((registeredItem) => registeredItem === item.finger);
+
+    return (
+      <View style={styles.containerItem} key={index}>
+        {index === 0 && <Text style={styles.textItem}>Mão Esquerda</Text>}
+        {index === 1 && <Text style={styles.textItem}>Mão Direita</Text>}
+        <TouchableOpacity
+          style={styles.containerItemContent}
+          onPress={() => handleCurrentFinger(item.finger)}
+          disabled={isRegistered}
+        >
+          {isRegistered && (
+            <View style={styles.iconCheckmark}>
+              <Icon name="checkmark" size={14} color="#fff" />
+            </View>
+          )}
+          {item.ImageComponent && <item.ImageComponent width={85} height={118} />}
+          <Text style={styles.textItemContent}>{item.text}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }, []);
 
   if (device == null || hasPermission === false)
     return <DeviceNotFound hasPermission={hasPermission} cameraPermission={cameraPermission} />;
 
+  const ListHeaderComponent = () => {
+    return (
+      <View style={styles.headerBottomSheet}>
+        <Text style={styles.titleBottomSheet}>Escolha o dedo que deseja cadastrar.</Text>
+        <View style={{ width: "100%", marginTop: 20, borderTopWidth: 2, borderColor: "#ffffff20" }} />
+      </View>
+    );
+  };
+
   return (
     <GestureHandlerRootView style={styles.root}>
-      <GestureDetector gesture={gesture}>
-        <View style={styles.cameraContainer}>
-          <Camera
-            ref={cameraRef}
-            style={styles.camera}
-            device={device}
-            format={cameraFormat}
-            isActive={isActive}
-            torch={torch}
-            exposure={state.exposure}
-            zoom={state.zoom}
-            onInitialized={onInitialized}
-            photo
-          />
-          <Gabarito />
-        </View>
-      </GestureDetector>
-      <View style={containerCaptureStyled}>
-        <CaptureButton onPress={takePhoto} imagesCount={state.base64Images.length} testID={testID} />
-      </View>
-      {state.showButtonInfo && <CameraConfigInfo exposure={state.exposure} zoom={state.zoom} />}
-      <ModalMessage isLoading={state.loading} modal={state.modal} />
-      <View style={styles.containerModal}>
-        <View style={styles.modal}>
-          {!registerUser && <Text>Se quiser outro dedo, clique abaixo</Text>}
-          <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
-            <Picker
-              disabled={registerUser}
-              style={pickerStyled}
-              useNativeAndroidPickerStyle={false}
-              placeholder={{}}
-              items={filteredItemsPicker}
-              value={state.currentFinger}
-              onValueChange={handleCurrentFinger}
+      <BottomSheetModalProvider>
+        <GestureDetector gesture={gesture}>
+          <View style={styles.camera}>
+            <View style={styles.containerText}>
+              <HAStepProgress totalSteps={3} step={state.base64Images.length + 1} />
+              <Text style={styles.text}>Posicione o dedo {fingerName} na marcação vermelha.</Text>
+            </View>
+            <Camera
+              ref={cameraRef}
+              style={StyleSheet.absoluteFillObject}
+              device={device}
+              format={cameraFormat}
+              isActive={isActive}
+              torch={torch}
+              exposure={state.exposure}
+              zoom={state.zoom}
+              onInitialized={onInitialized}
+              photo
             />
-            <Icon name="arrow-down" size={20} color="#000" />
+            <Gabarito finger={state.currentFinger} />
           </View>
+        </GestureDetector>
+        <View style={containerCaptureStyled}>
+          {!registerUser && <HAButton text="Selecionar outro dedo" onPress={handlePresentModalPress} />}
+          <HACaptureButton onPress={takePhoto} />
         </View>
-      </View>
+        <HAModalMessage
+          isLoading={state.loading}
+          modal={state.modal}
+          messageLoading="Estamos processando suas capturas."
+        />
+        <BottomSheetModal
+          ref={bottomSheetModalRef}
+          index={1}
+          enableDynamicSizing
+          snapPoints={snapPoints}
+          handleStyle={styles.handleStyle}
+          handleIndicatorStyle={styles.handleIndicatorStyle}
+        >
+          <BottomSheetFlatList
+            data={data}
+            numColumns={2}
+            renderItem={renderItem}
+            ListHeaderComponent={ListHeaderComponent}
+            contentContainerStyle={styles.contentContainerBottomSheet}
+          />
+        </BottomSheetModal>
+      </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
 };

package/src/screens/FingerRegister/data.ts

@@ -0,0 +1,65 @@
+import LT from "../../assets/svg/fingers/LT.svg";
+import RT from "../../assets/svg/fingers/RT.svg";
+import LI from "../../assets/svg/fingers/LI.svg";
+import RI from "../../assets/svg/fingers/RI.svg";
+import LM from "../../assets/svg/fingers/LM.svg";
+import RM from "../../assets/svg/fingers/RM.svg";
+import LR from "../../assets/svg/fingers/LR.svg";
+import RR from "../../assets/svg/fingers/RR.svg";
+import LP from "../../assets/svg/fingers/LP.svg";
+import RP from "../../assets/svg/fingers/RP.svg";
+
+const data: { text: string; ImageComponent: React.FC<React.SVGProps<SVGSVGElement>>; finger: string }[] = [
+  {
+    text: "Indicador",
+    ImageComponent: LI,
+    finger: "LI"
+  },
+  {
+    text: "Indicador",
+    ImageComponent: RI,
+    finger: "RI"
+  },
+  {
+    text: "Médio",
+    ImageComponent: LM,
+    finger: "LM"
+  },
+  {
+    text: "Médio",
+    ImageComponent: RM,
+    finger: "RM"
+  },
+  {
+    text: "Anelar",
+    ImageComponent: LR,
+    finger: "LR"
+  },
+  {
+    text: "Anelar",
+    ImageComponent: RR,
+    finger: "RR"
+  },
+  {
+    text: "Mínimo",
+    ImageComponent: LP,
+    finger: "LP"
+  },
+  {
+    text: "Mínimo",
+    ImageComponent: RP,
+    finger: "RP"
+  },
+  {
+    text: "Polegar",
+    ImageComponent: LT,
+    finger: "LT"
+  },
+  {
+    text: "Polegar",
+    ImageComponent: RT,
+    finger: "RT"
+  }
+];
+
+export default data;

package/src/screens/FingerRegister/styles.ts

@@ -1,6 +1,4 @@
-import { StyleSheet, Dimensions, Platform } from "react-native";
-
-const { height } = Dimensions.get("window");
+import { StyleSheet, Platform } from "react-native";
 
 export const styles = StyleSheet.create({
   container: {
@@ -9,51 +7,86 @@ export const styles = StyleSheet.create({
   root: {
     flex: 1
   },
-  cameraContainer: {
+  camera: {
     flex: 1,
     justifyContent: "center"
   },
-  camera: {
-    flex: 1,
-    paddingBottom: height * 0.2
+  containerText: {
+    position: "absolute",
+    top: 0,
+    width: "100%",
+    alignItems: "center",
+    zIndex: 99,
+    paddingVertical: 20
+  },
+  text: {
+    color: "#ffffff",
+    fontSize: Platform.select({
+      ios: 20,
+      android: 18
+    }),
+    fontWeight: "600",
+    textAlign: "center",
+    paddingHorizontal: 20
   },
   containerCapture: {
     position: "absolute",
     width: "100%",
-    alignItems: "center"
+    alignItems: "center",
+    gap: 20
   },
   cameraConfigs: {
     alignItems: "center"
   },
-  containerModalIcon: {
-    position: "absolute",
-    top: 10,
-    right: 10,
-    zIndex: 9999
+  containerItem: {
+    alignItems: "center"
   },
-  containerModal: {
-    position: "absolute",
-    justifyContent: "flex-start",
-    alignSelf: "center"
+  textItem: {
+    fontSize: 18,
+    color: "#fff",
+    fontWeight: "bold",
+    paddingVertical: 10
   },
-  modal: {
-    margin: 20,
-    alignItems: "center",
-    backgroundColor: "white",
+  containerItemContent: {
+    padding: 6,
+    marginHorizontal: 20,
+    marginVertical: 10,
+    borderWidth: 2,
+    borderColor: "#FFF",
     borderRadius: 20,
-    padding: Platform.OS === "ios" ? 35 : 20,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  iconClose: {
+    width: 150,
+    height: 150,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  iconCheckmark: {
     position: "absolute",
-    alignSelf: "flex-end",
-    padding: 8
+    top: 0,
+    right: 0,
+    margin: 7,
+    padding: 5,
+    backgroundColor: "#005EFF",
+    borderRadius: 50
+  },
+  textItemContent: {
+    color: "#fff",
+    fontWeight: "bold"
+  },
+  handleStyle: {
+    backgroundColor: "#0d0d0d"
+  },
+  handleIndicatorStyle: {
+    backgroundColor: "#fff"
+  },
+  headerBottomSheet: {
+    backgroundColor: "#0d0d0d",
+    alignItems: "center",
+    padding: 10
+  },
+  titleBottomSheet: { fontSize: 22, fontWeight: "bold", textAlign: "center", color: "#fff" },
+  contentContainerBottomSheet: {
+    backgroundColor: "#0d0d0d",
+    alignItems: "center",
+    paddingVertical: 20
   }
 });

package/src/screens/LifeCertificate/LifeCertificate.tsx

@@ -1,19 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { StatusBar, View } from "react-native";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, Text } from "react-native";
 import Orientation from "react-native-orientation-locker";
 import { Camera, VideoFile, useCameraDevice, useCameraFormat, useCameraPermission } from "react-native-vision-camera";
 import { useDispatch, useSelector } from "../../store/modules/lifeCertificate";
-import { DeviceNotFound, ModalMessage, RecordButton, CameraConfigInfo } from "../../components";
+import { DeviceNotFound, HAModalMessage, HARecordButton } from "../../components";
 import { styles } from "./styles";
 import { useIsForeground } from "../../utils";
 
 type Props = {
   UID: string;
   mock?: boolean;
-  testID?: string;
 };
 
-const LifeCertificate = ({ testID, UID, mock }: Props) => {
+const LifeCertificate = ({ UID, mock }: Props) => {
   const [torch, setTorch] = useState<"on" | "off">("off");
   const camera = useRef<Camera>(null);
   const isActive = useIsForeground();
@@ -44,22 +43,25 @@ const LifeCertificate = ({ testID, UID, mock }: Props) => {
     dispatch.getConfig("liveness");
   }, [cameraPermission, dispatch.getConfig]);
 
-  const containerRecordStyled = useMemo(
-    () => [styles.containerRecord, { bottom: state.showButtonInfo ? 75 : 20 }],
-    [state.showButtonInfo]
-  );
-
   useEffect(() => {
     Orientation.lockToPortrait();
   }, []);
 
   useEffect(() => {
-    if (state.code === 0) {
-      dispatch.setModal("Sucesso!", `Seu batimento está em: ${state.bpm}.\nProva de vida concluída!`);
+    if (state.code === 0 && state.bpm != null) {
+      dispatch.setModal(
+        "Prova de vida concluída!",
+        `Tudo certo! Seu batimento cardíaco está em: ${state.bpm} bpm.`,
+        state.bpm
+      );
       mock === true ? setTimeout(() => dispatch.handleLoading(), 2000) : dispatch.handleLoading();
     }
     if (state.code !== 0 && state.code !== null) {
-      dispatch.setModal("Ocorreu um erro!", `Erro: ${state.message}`);
+      dispatch.setModal(
+        "Algo deu errado!",
+        `Não conseguimos ler seus batimentos cardíacos. Tente novamente, por favor.`,
+        0
+      );
       dispatch.handleLoading();
     }
     setTimer(10);
@@ -69,7 +71,7 @@ const LifeCertificate = ({ testID, UID, mock }: Props) => {
   const sendFile = useCallback(
     async (file: VideoFile) => {
       if (!UID) {
-        dispatch.setModal("Ocorreu um erro!", "Erro ao enviar o arquivo (id error)");
+        dispatch.setModal("Ocorreu um erro!", "Erro ao enviar o arquivo (id error)", 0);
       }
       dispatch.sendLifeCertificate({
         videoFile: file,
@@ -126,7 +128,14 @@ const LifeCertificate = ({ testID, UID, mock }: Props) => {
 
   return (
     <View style={styles.containerCamera}>
-      <StatusBar barStyle="light-content" />
+      <View style={styles.containerContent}>
+        <View style={styles.containerTimer}>
+          <Text style={styles.text}>{timer < 0 ? 0 : timer} s</Text>
+        </View>
+        <Text style={styles.text}>
+          Coloque o dedo na câmera, pressione suavemente, clique no botão de captura e aguarde por 10 segundos.
+        </Text>
+      </View>
       <Camera
         ref={camera}
         style={styles.camera}
@@ -141,17 +150,14 @@ const LifeCertificate = ({ testID, UID, mock }: Props) => {
         onInitialized={onInitialized}
         video
       />
-      <View style={containerRecordStyled}>
-        <RecordButton
-          testID={testID}
-          onPress={recordingVideo}
-          disabled={state.isRecording || state.loading}
-          timer={timer}
-          isRecording={state.isRecording}
-        />
+      <View style={styles.containerRecord}>
+        <HARecordButton onPress={recordingVideo} disabled={state.isRecording || state.loading} />
       </View>
-      {state.showButtonInfo && <CameraConfigInfo exposure={state.exposure} zoom={state.zoom} />}
-      <ModalMessage isLoading={state.loading} modal={state.modal} />
+      <HAModalMessage
+        isLoading={state.loading}
+        modal={state.modal}
+        messageLoading="Estamos verificando sua prova de vida."
+      />
     </View>
   );
 };

package/src/screens/LifeCertificate/styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Platform } from "react-native";
 
 export const styles = StyleSheet.create({
   containerCamera: {
@@ -11,11 +11,23 @@ export const styles = StyleSheet.create({
   containerRecord: {
     position: "absolute",
     width: "100%",
-    alignItems: "center"
+    alignItems: "center",
+    bottom: 20
+  },
+  containerContent: { position: "absolute", top: 0, alignItems: "center", zIndex: 99, paddingVertical: 20, gap: 20 },
+  containerTimer: {
+    backgroundColor: "#00000075",
+    borderRadius: 25,
+    padding: 6
   },
   text: {
-    fontSize: 20,
-    fontWeight: "500",
-    color: "#000"
+    color: "#ffffff",
+    fontSize: Platform.select({
+      ios: 20,
+      android: 18
+    }),
+    fontWeight: "600",
+    textAlign: "center",
+    paddingHorizontal: 20
   }
 });