@ha_tecno/live-id-sdk 2.14.0 → 2.15.0

package/src/components/HAModalMessage/HAModalMessage.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { ActivityIndicator, Modal, Text, TextStyle, TouchableOpacity, View, useColorScheme } from "react-native";
+import { styles } from "./styles";
+
+type Props = {
+  isLoading: boolean;
+  modal?: {
+    title: string;
+    message: string;
+    bpm?: number;
+  };
+  messageLoading: string;
+};
+
+export const ModalMessage = ({ isLoading, messageLoading, modal }: Props) => {
+  const [visible, setVisible] = useState(false);
+  const isDark = useColorScheme() === "dark";
+
+  const backgroundColor = { ...styles.modal, backgroundColor: isDark ? "#333333" : "#fff" };
+  const containerButtonStyle = { ...styles.containerButton, borderColor: isDark ? "#ffffff20" : "#00000020" };
+
+  const messageFilteredByTitle =
+    modal?.message.includes("Tudo certo!") || modal?.message.includes("Cadastro do dispositivo")
+      ? "Confirmar"
+      : "Tentar novamente";
+  const messageFilteredByBPM = modal?.bpm !== 0 ? "Confirmar" : "Tentar novamente";
+  const messageFiltered = modal?.bpm === undefined ? messageFilteredByTitle : messageFilteredByBPM;
+
+  const textColor = useMemo<TextStyle>(() => {
+    return {
+      color: isDark ? "#fff" : "#000"
+    };
+  }, [isDark]);
+
+  const handleModal = () => {
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (isLoading === true) setVisible(true);
+  }, [isLoading]);
+
+  return (
+    <Modal animationType="fade" visible={visible} transparent>
+      <View style={styles.container}>
+        <View style={backgroundColor}>
+          {isLoading ? (
+            <View style={styles.containerContent}>
+              <ActivityIndicator size="large" color="#005EFF" />
+              <Text style={[styles.title, textColor]}>Aguarde!</Text>
+              <Text style={[styles.text]}>{messageLoading}</Text>
+            </View>
+          ) : (
+            <>
+              <View style={styles.containerContent}>
+                <Text style={[styles.title, textColor]}>{modal?.title}</Text>
+                <Text style={styles.text}>{modal?.message}</Text>
+              </View>
+              <View style={containerButtonStyle}>
+                <TouchableOpacity style={styles.button} onPress={handleModal}>
+                  <Text style={styles.textButton}>{messageFiltered}</Text>
+                </TouchableOpacity>
+              </View>
+            </>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalMessage;

package/src/components/{modalMessage → HAModalMessage}/styles.ts

@@ -9,10 +9,8 @@ export const styles = StyleSheet.create({
   modal: {
     maxWidth: 300,
     maxHeight: 200,
-    gap: 12,
     borderRadius: 20,
     padding: 18,
-    alignItems: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -22,24 +20,29 @@ export const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5
   },
+  containerContent: {
+    alignItems: "center",
+    gap: 12
+  },
   title: {
     fontSize: 18,
-    fontWeight: "bold",
-    color: "#000"
+    fontWeight: "600"
   },
   text: {
-    fontSize: 16,
+    fontSize: 14,
     textAlign: "center",
-    color: "#000"
+    fontWeight: "400",
+    color: "#B1B3C2"
   },
+  containerButton: { borderTopWidth: 2, marginTop: 20 },
   button: {
-    backgroundColor: "#0000ff",
+    alignItems: "center",
+    paddingTop: 12,
     paddingHorizontal: 12,
-    paddingVertical: 6,
     borderRadius: 10
   },
   textButton: {
-    color: "#fff",
+    color: "#005EFF",
     fontSize: 14
   }
 });

package/src/components/HARecordButton/HARecordButton.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import RecordButton from "../../assets/svg/recordButton.svg";
+import { TouchableOpacity } from "react-native";
+
+type HARecordButtonType = {
+  onPress: () => void;
+  disabled: boolean;
+};
+
+const HARecordButton = ({ onPress, disabled }: HARecordButtonType) => {
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <RecordButton />
+    </TouchableOpacity>
+  );
+};
+
+export default HARecordButton;

package/src/components/HARecordInstructions/HARecordInstructions.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { SafeAreaView, View, Text, TouchableOpacity } from "react-native";
+import { useTheme } from "../../theme/theme";
+import { data } from "./data";
+import { styles } from "./styles";
+import Phone from "../../assets/svg/phone.svg";
+import Hand from "../../assets/svg/hand.svg";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+
+type HARecordInstructionsType = {
+  onPress: () => void;
+};
+
+const HARecordInstructions = ({ onPress }: HARecordInstructionsType) => {
+  const { backgroundColor, text, blue, gray } = useTheme();
+  const offset = useSharedValue(0);
+
+  const containerStyle = { ...styles.container, backgroundColor };
+  const titleStyle = { ...styles.title, color: text };
+  const cardStyle = { ...styles.containerCard, backgroundColor: gray };
+  const subTitleStyle = { ...styles.subTitle, color: text };
+  const textStyle = { ...styles.text, color: text };
+  const buttonStyle = { ...styles.containerButton, backgroundColor: blue };
+
+  const duration = 2000;
+  const easing = Easing.bezier(0.25, 0, 0.25, 1);
+  useEffect(() => {
+    offset.value = withRepeat(
+      withSequence(withTiming(35, { duration, easing }), withTiming(0, { duration, easing })),
+      -1
+    );
+  }, []);
+
+  const style = useAnimatedStyle(() => ({
+    transform: [{ translateX: offset.value }]
+  }));
+
+  return (
+    <SafeAreaView style={containerStyle}>
+      <Text style={titleStyle}>Como realizar a prova de vida</Text>
+      {data.map((item, index) => (
+        <View style={cardStyle} key={index}>
+          <View style={styles.card}>
+            <View style={styles.content}>
+              <Text style={subTitleStyle}>{item.title}</Text>
+              <Text style={textStyle}>{item.text}</Text>
+            </View>
+            {index === 0 && (
+              <View style={styles.row}>
+                <Animated.View style={[styles.zIndex, style]}>
+                  <Hand width={65} height={98} />
+                </Animated.View>
+                <Phone width={65} height={98} />
+              </View>
+            )}
+          </View>
+        </View>
+      ))}
+      <TouchableOpacity style={buttonStyle} onPress={onPress}>
+        <Text style={styles.buttonText}>Realizar prova de vida</Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+};
+
+export default HARecordInstructions;

package/src/components/HARecordInstructions/data.ts

@@ -0,0 +1,10 @@
+export const data: { title: string; text: string }[] = [
+  {
+    title: "1. Posicione o seu dedo",
+    text: "Coloque seu dedo na câmera conforme indicado na animação."
+  },
+  {
+    title: "Relizar a prova de vida",
+    text: "Faça uma leve pressão na câmera, clique no botão de captura e aguarde 10 segundos."
+  }
+];

package/src/components/HARecordInstructions/styles.ts

@@ -0,0 +1,50 @@
+import { StyleSheet, Platform } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  title: { fontSize: 24, fontWeight: "600", textAlign: "center", paddingBottom: 20 },
+  containerCard: {
+    marginHorizontal: 20,
+    paddingHorizontal: 20,
+    marginBottom: 20,
+    borderRadius: 10
+  },
+  card: { padding: 10, alignItems: "center", gap: 20 },
+  content: {
+    gap: 12
+  },
+  subTitle: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  text: {
+    fontSize: Platform.select({
+      android: 14,
+      ios: 16
+    })
+  },
+  row: {
+    flexDirection: "row"
+  },
+  zIndex: {
+    zIndex: 99
+  },
+  containerButton: {
+    marginHorizontal: 40,
+    padding: 14,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  buttonText: {
+    color: "#FFF",
+    fontSize: Platform.select({
+      android: 16,
+      ios: 18
+    }),
+    fontWeight: "500"
+  }
+});

package/src/components/HAStepIndicator/HAStepIndicator.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { View } from "react-native";
+import Icon from "../icon/icon";
+import { styles } from "./styles";
+
+type Props = {
+  step: number;
+  totalSteps: number;
+};
+
+const HAStepProgress = ({ step, totalSteps }: Props) => {
+  const renderStepIndicator = () => {
+    const indicators = [];
+    for (let i = 1; i <= totalSteps; i++) {
+      indicators.push(
+        <View key={i} style={styles.stepContainer}>
+          <View style={[styles.stepIndicator, i <= step && styles.activeStep]}>
+            <Icon
+              name={i === step ? "ellipsis-horizontal" : "checkmark"}
+              size={24}
+              color={i <= step ? "#FFF" : "transparent"}
+            />
+          </View>
+          {i < totalSteps && <View style={[styles.line, i < step && styles.activeLine]} />}
+        </View>
+      );
+    }
+    return <View style={styles.indicatorContainer}>{indicators}</View>;
+  };
+
+  return <>{renderStepIndicator()}</>;
+};
+
+export default HAStepProgress;

package/src/components/HAStepIndicator/styles.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  indicatorContainer: {
+    flexDirection: "row",
+    marginBottom: 20
+  },
+  stepContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  stepIndicator: {
+    width: 35,
+    height: 35,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: "#ffffff30",
+    backgroundColor: "#ffffff30",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  activeStep: {
+    borderColor: "#005EFF",
+    backgroundColor: "#005EFF"
+  },
+  stepText: {
+    color: "#E7E7E7",
+    fontWeight: "bold",
+    fontSize: 16
+  },
+  activeStepText: {
+    color: "#fff"
+  },
+  line: {
+    width: 100,
+    height: 2,
+    backgroundColor: "#ffffff30"
+  },
+  activeLine: {
+    backgroundColor: "#005EFF"
+  }
+});

package/src/components/index.ts

@@ -1,17 +1,22 @@
 import DeviceNotFound from "./deviceNotFound/deviceNotFound";
-import ModalMessage from "./modalMessage/modalMessage";
+import HAModalMessage from "./HAModalMessage/HAModalMessage";
 import RecordButton from "./recordButton/recordButton";
 import CaptureButton from "./CaptureButton";
 import CameraConfigInfo from "./CameraConfigInfo";
-import Gabarito from "./Gabarito";
+import Gabarito from "./Gabarito/gabarito";
 import HAText from "./Typograph/typograph";
 import Icon from "./icon/icon";
 import HACarouselCalibration from "./HACarouselCalibration/HACarouselCalibration";
 import HACaptureInstructions from "./HACaptureInstructions/HACaptureInstructions";
+import HARecordInstructions from "./HARecordInstructions/HARecordInstructions";
+import HARecordButton from "./HARecordButton/HARecordButton";
+import HACaptureButton from "./HACaptureButton/HACaptureButton";
+import HAStepProgress from "./HAStepIndicator/HAStepIndicator";
+import HAButton from "./HAButton/HAButton";
 
 export {
   DeviceNotFound,
-  ModalMessage,
+  HAModalMessage,
   RecordButton,
   CaptureButton,
   CameraConfigInfo,
@@ -19,5 +24,10 @@ export {
   HAText,
   Icon,
   HACarouselCalibration,
-  HACaptureInstructions
+  HACaptureInstructions,
+  HARecordInstructions,
+  HARecordButton,
+  HACaptureButton,
+  HAStepProgress,
+  HAButton
 };

package/src/index.tsx

@@ -6,7 +6,7 @@ import {
   RegisterOperationPointsLifeCertificate
 } from "./screens";
 
-import { HACarouselCalibration, HACaptureInstructions } from "./components";
+import { HACarouselCalibration, HACaptureInstructions, HARecordInstructions } from "./components";
 
 export {
   LifeCertificate,
@@ -15,5 +15,6 @@ export {
   RegisterOperationPointsBiometrics,
   RegisterOperationPointsLifeCertificate,
   HACarouselCalibration,
-  HACaptureInstructions
+  HACaptureInstructions,
+  HARecordInstructions
 };

package/src/screens/FingerAuth/FingerAuth.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "react-native";
+import { View, StyleSheet, Text } from "react-native";
 import { Camera, useCameraFormat, Point, useCameraDevice, 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 { styles } from "./styles";
-import { DeviceNotFound, Gabarito, CameraConfigInfo, ModalMessage, CaptureButton } from "../../components";
+import { DeviceNotFound, Gabarito, HAModalMessage, HACaptureButton } from "../../components";
 import { useIsForeground } from "../../utils";
 import { useDispatch, useSelector } from "../../store/modules/fingerAuth";
 
@@ -15,10 +15,9 @@ type Props = {
   onSuccess: (code: number) => void;
   isFocused?: boolean;
   mock?: boolean;
-  testID?: string;
 };
 
-const FingerAuth = ({ testID, UID, onSuccess, isFocused, mock }: Props) => {
+const FingerAuth = ({ UID, onSuccess, isFocused, mock }: Props) => {
   const [torch, setTorch] = useState<"off" | "on">("off");
   const cameraRef = useRef<Camera>(null);
   const isForeground = useIsForeground();
@@ -28,8 +27,6 @@ const FingerAuth = ({ testID, UID, onSuccess, isFocused, mock }: Props) => {
   const dispatch = useDispatch();
   const state = useSelector();
 
-  const containerCaptureStyled = [styles.containerCapture, { bottom: state.showButtonInfo ? 75 : 20 }];
-
   useEffect(() => {
     Orientation.lockToPortrait();
     return () => {
@@ -59,12 +56,15 @@ const FingerAuth = ({ testID, UID, onSuccess, isFocused, mock }: Props) => {
 
   useEffect(() => {
     if (state.code === 0) {
-      dispatch.setModal("Sucesso!", "Usuário Identificado!");
+      dispatch.setModal(
+        "Identidade confirmada!",
+        "Sua identidade foi validada com sucesso. Você já pode acessar a aplicação."
+      );
       onSuccess && onSuccess?.(state.code);
       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("Digital não detectada!", `Erro: ${state.message}`);
       dispatch.handleLoading();
     }
     dispatch.resetState();
@@ -94,10 +94,13 @@ const FingerAuth = ({ testID, UID, onSuccess, isFocused, mock }: Props) => {
   return (
     <GestureHandlerRootView style={styles.root}>
       <GestureDetector gesture={gesture}>
-        <View style={styles.cameraContainer}>
+        <View style={styles.camera}>
+          <View style={styles.containerText}>
+            <Text style={styles.text}>Posicione o dedo indicador direito na marcação vermelha para acessar o app.</Text>
+          </View>
           <Camera
             ref={cameraRef}
-            style={styles.camera}
+            style={StyleSheet.absoluteFillObject}
             isActive={isActive}
             device={device}
             format={cameraFormat}
@@ -110,11 +113,14 @@ const FingerAuth = ({ testID, UID, onSuccess, isFocused, mock }: Props) => {
           <Gabarito />
         </View>
       </GestureDetector>
-      <View style={containerCaptureStyled}>
-        <CaptureButton authFinger onPress={takePhoto} loading={state.loading} testID={testID} />
+      <View style={styles.containerCapture}>
+        <HACaptureButton onPress={takePhoto} />
       </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 validando a sua identidade."
+      />
     </GestureHandlerRootView>
   );
 };

package/src/screens/FingerAuth/styles.ts

@@ -1,26 +1,34 @@
-import { StyleSheet, Dimensions } from "react-native";
-
-const { height } = Dimensions.get("window");
+import { StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
   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,
+    gap: 20
+  },
+  text: {
+    color: "#ffffff",
+    fontSize: 20,
+    fontWeight: "600",
+    textAlign: "center",
+    paddingHorizontal: 20
   },
   containerCapture: {
     position: "absolute",
     width: "100%",
-    alignItems: "center"
+    alignItems: "center",
+    bottom: 20
   },
   cameraConfigs: {
     alignItems: "center"