@proteoapp/react-native-onboarding 0.1.0

package/src/screens/document/camera/view.tsx

@@ -0,0 +1,196 @@
+import { Fragment } from 'react'
+import { Image, StyleSheet } from 'react-native'
+import { Camera } from 'react-native-vision-camera'
+import { createBox, createText } from '@shopify/restyle'
+import {
+  CameraPlusSvg,
+  Document2Svg,
+  DocumentCameraOverlaySvg,
+  RefreshSvg,
+  UploadSvg,
+} from '../../../../assets/svgs'
+import { ValidationStatus } from '../../../enums'
+import { type CustomThemeProps } from '../../../theme'
+import { Button, CenteredLoading } from '../../../components'
+import { useDocumentCameraViewModel } from './view-model'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type DocumentCameraViewProps = ReturnType<typeof useDocumentCameraViewModel>
+
+export const DocumentCameraView = ({
+  containerRef,
+  ref,
+  device,
+  bottomSafeArea,
+  loadingLayoutProps,
+  mainImage: MainImage,
+  mainImageColor,
+  title,
+  rectBorderColor,
+  pictureValidationColor,
+  rectWidth,
+  rectHeight,
+  rectX,
+  rectY,
+  originalPictureUri,
+  pictureValidation,
+  captureButtonProps,
+  sendButtonProps,
+  tryAgainButtonProps,
+  isLoadingLayout,
+  isActive,
+  hasPermission,
+  enablePhoto,
+  showFooterButtonContainer,
+  captureButtonDisabled,
+  hasDigitalFile,
+  onContainerLayout,
+  onInitialized,
+  onStopped,
+  onError,
+  onCapturePress,
+  onTryAgainPress,
+  frameProcessor,
+}: DocumentCameraViewProps) => (
+  <Box ref={containerRef} flex={1} onLayout={onContainerLayout}>
+    {isLoadingLayout ? (
+      <CenteredLoading {...loadingLayoutProps} />
+    ) : (
+      <Fragment>
+        {!!device && hasPermission && (
+          <Box bg="black" style={StyleSheet.absoluteFillObject}>
+            <Camera
+              ref={ref}
+              isActive={isActive}
+              photo={enablePhoto}
+              device={device}
+              frameProcessor={frameProcessor}
+              photoQualityBalance="balanced"
+              style={StyleSheet.absoluteFillObject}
+              onInitialized={onInitialized}
+              onStopped={onStopped}
+              onError={onError}
+            />
+          </Box>
+        )}
+        {!isActive && originalPictureUri && (
+          <Image
+            source={{ uri: originalPictureUri }}
+            style={StyleSheet.absoluteFill}
+          />
+        )}
+        <Box
+          position="absolute"
+          top={rectY}
+          left="50%"
+          alignItems="center"
+          rowGap="s"
+          pb="s"
+          zIndex={10}
+          style={{
+            transform: [{ translateX: '-50%' }, { translateY: '-100%' }],
+          }}
+        >
+          <MainImage width={50} height={50} color={mainImageColor} />
+          <Text color="white" mt="s">
+            {title}
+          </Text>
+          <Text color="white">
+            Garanta que o texto e a imagem estejam visíveis
+          </Text>
+        </Box>
+        <DocumentCameraOverlaySvg
+          rectWidth={rectWidth}
+          rectHeight={rectHeight}
+          rectX={rectX}
+          rectY={rectY}
+          rectBorderColor={rectBorderColor}
+        />
+        {!isActive && (
+          <Box
+            position="absolute"
+            top={rectY + rectHeight / 2}
+            left="50%"
+            width="70%"
+            alignItems="center"
+            justifyContent="center"
+            zIndex={10}
+            style={{
+              transform: [{ translateX: '-50%' }, { translateY: '-50%' }],
+            }}
+          >
+            {pictureValidation ? (
+              <Box bg="dark" py="xs" px="s" borderRadius="md">
+                <Text
+                  textAlign="center"
+                  style={{ color: pictureValidationColor }}
+                >
+                  {pictureValidation.statusMessage}.
+                </Text>
+                <Text
+                  textAlign="center"
+                  style={{ color: pictureValidationColor }}
+                >
+                  {pictureValidation.actionMessage}...
+                </Text>
+              </Box>
+            ) : (
+              <Document2Svg />
+            )}
+          </Box>
+        )}
+        <Box
+          position="absolute"
+          top={rectY + rectHeight}
+          left="50%"
+          pt="s"
+          zIndex={10}
+          style={{ transform: [{ translateX: '-50%' }] }}
+        >
+          <Text color="white">Documentos aceitos: RG, CNH ou CIN</Text>
+        </Box>
+        {showFooterButtonContainer && (
+          <Box
+            position="absolute"
+            left="50%"
+            bottom={bottomSafeArea}
+            width="100%"
+            px="m"
+            rowGap="xl"
+            zIndex={10}
+            style={{ transform: [{ translateX: '-50%' }] }}
+          >
+            {pictureValidation?.status === ValidationStatus.INVALID ? (
+              <Button
+                {...tryAgainButtonProps}
+                title="Tentar Novamente"
+                iconLeft={RefreshSvg}
+                onPress={onTryAgainPress}
+              />
+            ) : (
+              <Fragment>
+                <Button
+                  {...captureButtonProps}
+                  title="Capturar"
+                  disabled={captureButtonDisabled}
+                  iconLeft={CameraPlusSvg}
+                  onPress={onCapturePress}
+                />
+                {hasDigitalFile && (
+                  <Button
+                    {...sendButtonProps}
+                    title="Enviar Documento"
+                    iconLeft={UploadSvg}
+                    onPress={() => ({})}
+                  />
+                )}
+              </Fragment>
+            )}
+          </Box>
+        )}
+      </Fragment>
+    )}
+  </Box>
+)

package/src/screens/document/index.tsx

@@ -0,0 +1,8 @@
+import { DocumentView } from './view'
+import { useDocumentViewModel } from './view-model'
+
+export const DocumentScreen = () => {
+  const props = useDocumentViewModel()
+
+  return <DocumentView {...props} />
+}

package/src/screens/document/review/index.tsx

@@ -0,0 +1,8 @@
+import { DocumentReviewView } from './view'
+import { useDocumentReviewViewModel } from './view-model'
+
+export const DocumentReviewScreen = () => {
+  const props = useDocumentReviewViewModel()
+
+  return <DocumentReviewView {...props} />
+}

package/src/screens/document/review/view-model.ts

@@ -0,0 +1,77 @@
+import { useWindowDimensions } from 'react-native'
+import {
+  useNavigation,
+  useRoute,
+  type RouteProp,
+} from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useTheme } from '@shopify/restyle'
+import {
+  BackDocumentCircleSvg,
+  DocumentCircleSvg,
+} from '../../../../assets/svgs'
+import { type RootStackParamList } from '../../../navigation'
+import {
+  useButton,
+  useProcessTimeline,
+  useRecommendedValidations,
+} from '../../../hooks'
+import { TimelineStatus } from '../../../enums'
+import { type CustomThemeProps } from '../../../theme'
+
+export const useDocumentReviewViewModel = () => {
+  const route = useRoute<RouteProp<RootStackParamList, 'DocumentReview'>>()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const { height: windowHeight } = useWindowDimensions()
+  const { colors, borderRadii } = useTheme<CustomThemeProps>()
+  const recommendedValidationsProps = useRecommendedValidations()
+  const repeatCaptureButtonProps = useButton({ variant: 'outline' })
+  const sendDocumentButtonProps = useButton()
+  const { create: createProcessTimeline } = useProcessTimeline()
+
+  const icon =
+    route.params.side === 'front' ? DocumentCircleSvg : BackDocumentCircleSvg
+  const title =
+    route.params.side === 'front'
+      ? 'Captura da frente do documento'
+      : 'Captura da verso do documento'
+  const pictureStyle = {
+    width: '100%',
+    height: windowHeight * 0.28,
+    borderRadius: borderRadii.xs,
+  }
+
+  const onRepeatCapturePress = () => {
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: 'Usuário optou por repetir a captura',
+    })
+    navigation.replace('DocumentCamera', { side: route.params.side })
+  }
+  const onSendDocumentPress = () => {
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: 'Usuário optou por enviar a foto',
+    })
+
+    if (route.params.side === 'front') {
+      return navigation.replace('DocumentCamera', { side: 'back' })
+    }
+
+    return navigation.replace('DocumentAnalysis')
+  }
+
+  return {
+    icon,
+    iconColor: colors.text,
+    title,
+    pictureUri: route.params.pictureUri,
+    pictureStyle,
+    recommendedValidationsProps,
+    repeatCaptureButtonProps,
+    sendDocumentButtonProps,
+    onRepeatCapturePress,
+    onSendDocumentPress,
+  }
+}

package/src/screens/document/review/view.tsx

@@ -0,0 +1,69 @@
+import { Image } from 'react-native'
+import { createBox, createText } from '@shopify/restyle'
+import { ArrowRightSvg, RefreshSvg } from '../../../../assets/svgs'
+import { RootLayout } from '../../../layouts'
+import { type CustomThemeProps } from '../../../theme'
+import { Button, RecommendedValidations } from '../../../components'
+import { useDocumentReviewViewModel } from './view-model'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type DocumentReviewViewProps = ReturnType<typeof useDocumentReviewViewModel>
+
+export const DocumentReviewView = ({
+  icon: Icon,
+  iconColor,
+  title,
+  pictureUri,
+  pictureStyle,
+  recommendedValidationsProps,
+  repeatCaptureButtonProps,
+  sendDocumentButtonProps,
+  onRepeatCapturePress,
+  onSendDocumentPress,
+}: DocumentReviewViewProps) => (
+  <RootLayout>
+    <Box flex={1} justifyContent="space-between" mt="xl">
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        alignSelf="center"
+        columnGap="m"
+      >
+        <Icon width={40} height={40} color={iconColor} />
+        <Text>{title}</Text>
+      </Box>
+      <Box
+        borderWidth={1}
+        borderStyle="dashed"
+        borderColor="text"
+        borderRadius="s"
+        px="s"
+        py="4xl"
+      >
+        <Image source={{ uri: pictureUri }} style={pictureStyle} />
+      </Box>
+      <Button
+        {...repeatCaptureButtonProps}
+        title="Repetir Captura"
+        iconLeft={RefreshSvg}
+        onPress={onRepeatCapturePress}
+      />
+      <RecommendedValidations
+        {...recommendedValidationsProps}
+        mode="check"
+        recommendations={[
+          'Os dados do documento estão visíveis?',
+          'O documento possui cortes ou reflexo?',
+        ]}
+      />
+      <Button
+        {...sendDocumentButtonProps}
+        title="Enviar Documento"
+        iconRight={ArrowRightSvg}
+        onPress={onSendDocumentPress}
+      />
+    </Box>
+  </RootLayout>
+)

package/src/screens/document/view-model.ts

@@ -0,0 +1,29 @@
+import { useNavigation } from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useTheme } from '@shopify/restyle'
+import { type RootStackParamList } from '../../navigation'
+import { useProcessStore } from '../../store'
+import { useButton } from '../../hooks'
+import { type CustomThemeProps } from '../../theme'
+
+export const useDocumentViewModel = () => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme<CustomThemeProps>()
+  const organizationPicture = useProcessStore(
+    (state) => state.organizationPicture,
+  )
+  const startButtonProps = useButton()
+
+  const onStartPress = () => {
+    navigation.replace('DocumentCamera', { side: 'front' })
+  }
+
+  return {
+    mainImageColor: colors.primary,
+    shieldColor: colors.text,
+    organizationPicture,
+    startButtonProps,
+    onStartPress,
+  }
+}

package/src/screens/document/view.tsx

@@ -0,0 +1,80 @@
+import { Image, type ImageProps } from 'react-native'
+import {
+  border,
+  createBox,
+  createRestyleComponent,
+  createText,
+  layout,
+  type BorderProps,
+  type LayoutProps,
+} from '@shopify/restyle'
+import {
+  ArrowRightSvg,
+  DocumentAvatarSvg,
+  ShieldCheckCircleSvg,
+} from '../../../assets/svgs'
+import { RootLayout } from '../../layouts'
+import { type CustomThemeProps } from '../../theme'
+import { Button } from '../../components'
+import { useDocumentViewModel } from './view-model'
+
+type ImageStyledProps = ImageProps &
+  LayoutProps<CustomThemeProps> &
+  BorderProps<CustomThemeProps>
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+const ImageStyled = createRestyleComponent<ImageStyledProps, CustomThemeProps>(
+  [layout, border],
+  Image,
+)
+
+type DocumentViewProps = ReturnType<typeof useDocumentViewModel>
+
+export const DocumentView = ({
+  mainImageColor,
+  shieldColor,
+  organizationPicture,
+  startButtonProps,
+  onStartPress,
+}: DocumentViewProps) => (
+  <RootLayout>
+    <Box alignItems="center" my="5xl" rowGap="5xl">
+      <DocumentAvatarSvg color={mainImageColor} />
+      <Box width="80%" alignItems="center" rowGap="s">
+        <Text variant="subtitle" width="80%" textAlign="center">
+          Vamos começar a validação do seu documento
+        </Text>
+        <Text textAlign="center">
+          Escolha um documento para seguir com a validação da sua identidade.
+        </Text>
+      </Box>
+    </Box>
+    <Box flex={1} rowGap="xl">
+      <Button
+        {...startButtonProps}
+        title="Começar"
+        iconRight={ArrowRightSvg}
+        onPress={onStartPress}
+      />
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+        columnGap="s"
+      >
+        <ShieldCheckCircleSvg color={shieldColor} />
+        <Text variant="caption">Seus dados 100% protegidos</Text>
+      </Box>
+    </Box>
+    {!!organizationPicture && (
+      <ImageStyled
+        source={{ uri: organizationPicture }}
+        width={108}
+        height={32}
+        borderRadius="md"
+        alignSelf="center"
+      />
+    )}
+  </RootLayout>
+)

package/src/screens/face-auth/analysis/index.tsx

@@ -0,0 +1,8 @@
+import { FaceAuthAnalysisView } from './view'
+import { useFaceAuthAnalysisViewModel } from './view-model'
+
+export const FaceAuthAnalysisScreen = () => {
+  const props = useFaceAuthAnalysisViewModel()
+
+  return <FaceAuthAnalysisView {...props} />
+}

package/src/screens/face-auth/analysis/view-model.ts

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  useNavigation,
+  useRoute,
+  type RouteProp,
+} from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useMutation } from '@tanstack/react-query'
+import { type RootStackParamList } from '../../../navigation'
+import { doneProcess } from '../../../services'
+import {
+  useEnvVariablesStore,
+  useFlowStore,
+  useProcessStore,
+} from '../../../store'
+import {
+  useProcessTimeline,
+  useDescriptionLoading,
+  useIdentificationError,
+  useRekognition,
+  useS3,
+  useOnboardingChannel,
+} from '../../../hooks'
+import { ImageType, Objective, TimelineStatus } from '../../../enums'
+import { ContactSupportError } from '../../../errors'
+
+export const useFaceAuthAnalysisViewModel = () => {
+  const route = useRoute<RouteProp<RootStackParamList, 'FaceAuthAnalysis'>>()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const isAnalyzingRef = useRef(false)
+  const [descriptionLoadingMessage, setDescriptionLoadingMessage] =
+    useState<string>()
+  const [error, setError] = useState<Error | null>(null)
+  const [couldNotBeIdentified, setCouldNotBeIdentified] = useState(false)
+  const {
+    authToken,
+    tenant,
+    backgroundCheckId,
+    document,
+    objective,
+    isSimplifiedMode,
+    notRequestDocument,
+  } = useProcessStore((state) => ({
+    authToken: state.authToken,
+    tenant: state.tenant,
+    backgroundCheckId: state.backgroundCheckId,
+    document: state.document,
+    objective: state.objective,
+    isSimplifiedMode: state.isSimplifiedMode,
+    notRequestDocument: state.notRequestDocument,
+  }))
+  const { backgroundCheckExecutionId, setFacePictureUrl, setFaceConfidence } =
+    useFlowStore((state) => ({
+      backgroundCheckExecutionId: state.backgroundCheckExecutionId,
+      setFacePictureUrl: state.setFacePictureUrl,
+      setFaceConfidence: state.setFaceConfidence,
+    }))
+  const minimumFaceConfidence = useEnvVariablesStore(
+    (state) => state.minimumFaceConfidence,
+  )
+  const descriptionLoadingProps = useDescriptionLoading({
+    isActive: !couldNotBeIdentified,
+  })
+  const identificationErrorProps = useIdentificationError()
+  const rekognition = useRekognition()
+  const s3 = useS3(ImageType.FACE)
+  const { create: createProcessTimeline } = useProcessTimeline()
+  const {
+    processingMessage: onboardingChannelProcessingMessage,
+    isProcessing: isOnboardingChannelProcessing,
+  } = useOnboardingChannel({
+    establishConnection:
+      objective === Objective.ONBOARDING && notRequestDocument,
+  })
+  const {
+    mutate: doneProcessMutate,
+    error: doneProcessError,
+    isError: isDoneProcessError,
+  } = useMutation({
+    mutationFn: doneProcess,
+    onSuccess: () => {
+      if (objective === Objective.FACE_AUTH) {
+        navigation.replace('ProcessFinished')
+      }
+    },
+  })
+
+  if (!backgroundCheckExecutionId) throw new ContactSupportError('0416')
+
+  const onTryAgainPress = () => {
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: 'Usuário optou por tentar fazer a autenticação facial novamente',
+    })
+    setFacePictureUrl(null)
+    setFaceConfidence(null)
+    navigation.replace('FaceAuthCamera', { retry: true })
+  }
+  const handleAnalysis = useCallback(async () => {
+    try {
+      isAnalyzingRef.current = true
+
+      const pictureBytes = await s3.prepare(route.params.pictureUri)
+
+      setDescriptionLoadingMessage('Identificando rosto')
+
+      const confidence = await rekognition.checkFaceConfidence(pictureBytes)
+
+      if (!confidence || confidence < minimumFaceConfidence) {
+        const partMessage = !confidence
+          ? 'Rosto não identificado'
+          : `Foto do rosto com confiabilidade baixa: ${confidence.toFixed(2)}%`
+
+        createProcessTimeline({
+          status: TimelineStatus.FAILURE,
+          message: `${partMessage}. Usuário direcionado para tentar novamente`,
+        })
+
+        return setCouldNotBeIdentified(true)
+      }
+
+      setFaceConfidence(confidence)
+      setDescriptionLoadingMessage('Enviando foto')
+      createProcessTimeline({
+        status: TimelineStatus.SUCCESS,
+        message: `Rosto identificado com confiabilidade de ${confidence.toFixed(0)}%`,
+      })
+
+      const pictureUrl = await s3.upload(pictureBytes)
+
+      setFacePictureUrl(pictureUrl)
+
+      if (
+        objective === Objective.FACE_AUTH ||
+        (objective === Objective.ONBOARDING && notRequestDocument)
+      ) {
+        return doneProcessMutate({
+          authToken,
+          tenant,
+          backgroundCheckId,
+          backgroundCheckExecutionId: backgroundCheckExecutionId,
+          document,
+          objective,
+          faceAuth: {
+            confidence,
+            pictureUrl,
+          },
+        })
+      }
+
+      if (isSimplifiedMode) {
+        return navigation.replace('DocumentCamera', { side: 'front' })
+      }
+
+      return navigation.replace('Document')
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err)
+      }
+    }
+  }, [
+    authToken,
+    backgroundCheckExecutionId,
+    backgroundCheckId,
+    createProcessTimeline,
+    document,
+    doneProcessMutate,
+    isSimplifiedMode,
+    minimumFaceConfidence,
+    navigation,
+    notRequestDocument,
+    objective,
+    rekognition,
+    route.params.pictureUri,
+    s3,
+    setFaceConfidence,
+    setFacePictureUrl,
+    tenant,
+  ])
+
+  useEffect(() => {
+    if (!isAnalyzingRef.current) {
+      handleAnalysis()
+    }
+  }, [handleAnalysis])
+
+  if (error) throw error
+  if (isDoneProcessError) throw doneProcessError
+
+  return {
+    descriptionLoadingProps,
+    descriptionLoadingMessage: isOnboardingChannelProcessing
+      ? onboardingChannelProcessingMessage
+      : descriptionLoadingMessage,
+    identificationErrorProps,
+    couldNotBeIdentified,
+    onTryAgainPress,
+  }
+}