@proteoapp/react-native-onboarding 0.1.0

package/src/constants/camera-error-messages.ts

@@ -0,0 +1,24 @@
+import { CameraRuntimeError } from 'react-native-vision-camera'
+
+export type CameraError = Extract<
+  CameraRuntimeError['code'],
+  | 'device/no-device'
+  | 'device/invalid-device'
+  | 'device/camera-already-in-use'
+  | 'device/configuration-error'
+  | 'session/invalid-output-configuration'
+  | 'system/camera-is-restricted'
+>
+
+export const cameraErrorMessages: Record<CameraError, string> = {
+  'device/no-device': 'Nenhuma câmera (environment) encontrada.',
+  'device/invalid-device': 'A câmera encontrada não é válida.',
+  'device/camera-already-in-use':
+    'A câmera está em uso por outro aplicativo ou não pode ser acessada.',
+  'device/configuration-error':
+    'As configurações da câmera solicitadas não podem ser atendidas.',
+  'session/invalid-output-configuration':
+    'A configuração de saída da sessão da câmera é inválida.',
+  'system/camera-is-restricted':
+    'As permissões da câmera foram negadas pelo sistema.',
+} as const

package/src/constants/environments.ts

@@ -0,0 +1,35 @@
+export const environments = {
+  development: {
+    baseApiUrl: 'https://dev.proteo.com.br/api/v1',
+    baseWssUrl: 'wss://dev.proteo.com.br/cable',
+    baseLogUrl:
+      'https://9crezfwseg.execute-api.us-east-1.amazonaws.com/dev/logs',
+    validateDocumentImgUrl: 'https://scan.dev.proteo.com.br/process-frame',
+    validateDocumentPdfUrl: 'https://scan.dev.proteo.com.br/validate-cnh-pdf',
+    ipInfoUrl: 'https://www.ipinfo.io',
+    ipInfoToken: '2b8bdf9480f687',
+    minimumFaceConfidence: 95,
+  } as const,
+  staging: {
+    baseApiUrl: 'https://dev.proteo.com.br/api/v1',
+    baseWssUrl: 'wss://dev.proteo.com.br/cable',
+    baseLogUrl:
+      'https://9crezfwseg.execute-api.us-east-1.amazonaws.com/dev/logs',
+    validateDocumentImgUrl: 'https://scan.dev.proteo.com.br/process-frame',
+    validateDocumentPdfUrl: 'https://scan.dev.proteo.com.br/validate-cnh-pdf',
+    ipInfoUrl: 'https://www.ipinfo.io',
+    ipInfoToken: '2b8bdf9480f687',
+    minimumFaceConfidence: 95,
+  } as const,
+  production: {
+    baseApiUrl: 'https://dev.proteo.com.br/api/v1',
+    baseWssUrl: 'wss://dev.proteo.com.br/cable',
+    baseLogUrl:
+      'https://9crezfwseg.execute-api.us-east-1.amazonaws.com/dev/logs',
+    validateDocumentImgUrl: 'https://scan.dev.proteo.com.br/process-frame',
+    validateDocumentPdfUrl: 'https://scan.dev.proteo.com.br/validate-cnh-pdf',
+    ipInfoUrl: 'https://www.ipinfo.io',
+    ipInfoToken: '2b8bdf9480f687',
+    minimumFaceConfidence: 95,
+  } as const,
+} as const

package/src/constants/error-header-fields.ts

@@ -0,0 +1,41 @@
+import {
+  CameraErrorCircleSvg,
+  ClockCircleSvg,
+  LocationErrorCircleSvg,
+  ThumbUpSvg,
+  XErrorCircleSvg,
+} from '../../assets/svgs'
+import {
+  CameraPermissionDeniedError,
+  CameraProblemError,
+  GeolocationPermissionDeniedError,
+  NonStandardHoursError,
+  ProcessAlreadyCompletedError,
+} from '../errors'
+
+export const errorHeaderFields = {
+  [CameraPermissionDeniedError.name]: {
+    icon: CameraErrorCircleSvg,
+    title: 'Acesso à câmera negado!',
+  },
+  [CameraProblemError.name]: {
+    icon: CameraErrorCircleSvg,
+    title: 'Problema com a câmera!',
+  },
+  [GeolocationPermissionDeniedError.name]: {
+    icon: LocationErrorCircleSvg,
+    title: 'Acesso à localização negado!',
+  },
+  [NonStandardHoursError.name]: {
+    icon: ClockCircleSvg,
+    title: 'Opsss!',
+  },
+  [ProcessAlreadyCompletedError.name]: {
+    icon: ThumbUpSvg,
+    title: 'Processo já concluído!',
+  },
+  default: {
+    icon: XErrorCircleSvg,
+    title: 'Ocorreu um problema!',
+  },
+} as const

package/src/constants/image-type-references.ts

@@ -0,0 +1,8 @@
+import { ImageType } from '../enums'
+
+export const imageTypeReferences: Record<ImageType, string> = {
+  [ImageType.DOCUMENT_PDF]: 'doc-img',
+  [ImageType.FRONT_DOCUMENT]: 'doc-img-a',
+  [ImageType.BACK_DOCUMENT]: 'doc-img-b',
+  [ImageType.FACE]: 'doc-img-f',
+} as const

package/src/constants/index.ts

@@ -0,0 +1,8 @@
+export * from './error-header-fields'
+export * from './camera-error-messages'
+export * from './environments'
+export * from './image-type-references'
+export * from './progress-steps'
+export * from './route-step-indexes'
+export * from './route-step-index-descriptions'
+export * from './routes-need-alter-status'

package/src/constants/progress-steps.ts

@@ -0,0 +1,23 @@
+import { type RouteName } from '../navigation'
+import { FaceIdSvg, DocumentSvg } from '../../assets/svgs'
+
+type ProgressStep = {
+  icon: React.ComponentType
+  routes: RouteName[]
+}
+
+export const progressSteps: ProgressStep[] = [
+  {
+    icon: FaceIdSvg,
+    routes: ['FaceAuth', 'FaceAuthCamera', 'FaceAuthAnalysis'],
+  },
+  {
+    icon: DocumentSvg,
+    routes: [
+      'Document',
+      'DocumentCamera',
+      'DocumentReview',
+      'DocumentAnalysis',
+    ],
+  },
+]

package/src/constants/route-step-index-descriptions.ts

@@ -0,0 +1,14 @@
+import { type RouteStepIndex } from './route-step-indexes'
+
+export const routeStepIndexDescriptions: Record<RouteStepIndex, string> = {
+  0: 'Início da autenticação facial',
+  1: 'Autenticação facial',
+  2: 'Análise de foto facial',
+  3: 'Início do processo de documento',
+  4: 'Foto da frente do documento',
+  5: 'Revisão da foto da frente do documento',
+  6: 'Foto do verso do documento',
+  7: 'Revisão da foto do verso do documento',
+  8: 'Análise de documento',
+  9: 'Processo finalizado',
+} as const

package/src/constants/route-step-indexes.ts

@@ -0,0 +1,20 @@
+import { type RootStackParamList, type RouteName } from '../navigation'
+
+export type RouteStepIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+type RouteStepIndexes = {
+  [K in RouteName]: (
+    params: RootStackParamList[K] | undefined,
+  ) => RouteStepIndex
+}
+
+export const routeStepIndexes: RouteStepIndexes = {
+  FaceAuth: () => 0,
+  FaceAuthCamera: () => 1,
+  FaceAuthAnalysis: () => 2,
+  Document: () => 3,
+  DocumentCamera: (params) => (params?.side === 'back' ? 6 : 4),
+  DocumentReview: (params) => (params?.side === 'back' ? 7 : 5),
+  DocumentAnalysis: () => 8,
+  ProcessFinished: () => 9,
+} as const

package/src/constants/routes-need-alter-status.ts

@@ -0,0 +1,8 @@
+import { type RouteName } from '../navigation'
+import { ProcessStatus } from '../enums'
+
+export const routesNeedAlterStatus: Partial<Record<RouteName, ProcessStatus>> =
+  {
+    FaceAuthCamera: ProcessStatus.LIVENESS,
+    DocumentCamera: ProcessStatus.DOCUMENTS,
+  } as const

package/src/enums/document-type.ts

@@ -0,0 +1,5 @@
+export enum DocumentType {
+  RG = 'RG',
+  CNH = 'CNH',
+  CIN = 'CIN',
+}

package/src/enums/image-type.ts

@@ -0,0 +1,6 @@
+export enum ImageType {
+  FACE = 'face',
+  FRONT_DOCUMENT = 'front',
+  BACK_DOCUMENT = 'back',
+  DOCUMENT_PDF = 'document_pdf',
+}

package/src/enums/index.ts

@@ -0,0 +1,7 @@
+export * from './objective'
+export * from './request-status'
+export * from './process-status'
+export * from './timeline-status'
+export * from './image-type'
+export * from './document-type'
+export * from './validation-status'

package/src/enums/objective.ts

@@ -0,0 +1,4 @@
+export enum Objective {
+  ONBOARDING = 'onboarding',
+  FACE_AUTH = 'face-auth',
+}

package/src/enums/process-status.ts

@@ -0,0 +1,6 @@
+export enum ProcessStatus {
+  START = 'start',
+  LIVENESS = 'liveness',
+  DOCUMENTS = 'documents',
+  DONE = 'done',
+}

package/src/enums/request-status.ts

@@ -0,0 +1,8 @@
+export enum RequestStatus {
+  PENDING = 'pending',
+  PROCESSING = 'processing',
+  PARTIALLY_COMPLETED = 'partially_completed',
+  COMPLETED = 'completed',
+  LOST = 'lost',
+  ERROR = 'error',
+}

package/src/enums/timeline-status.ts

@@ -0,0 +1,6 @@
+export enum TimelineStatus {
+  SUCCESS = 'success',
+  INFO = 'info',
+  FAILURE = 'failure',
+  ERROR = 'error',
+}

package/src/enums/validation-status.ts

@@ -0,0 +1,5 @@
+export enum ValidationStatus {
+  VALIDATING = 'validating',
+  VALID = 'valid',
+  INVALID = 'invalid',
+}

package/src/errors/camera-permission-denied.ts

@@ -0,0 +1,9 @@
+export class CameraPermissionDeniedError extends Error {
+  constructor() {
+    super(
+      'Precisamos da câmera para seguir com o onboarding. Habilite a permissão para tirar sua foto e validar sua identidade.',
+    )
+
+    this.name = 'CameraPermissionDeniedError'
+  }
+}

package/src/errors/camera-problem.ts

@@ -0,0 +1,7 @@
+export class CameraProblemError extends Error {
+  constructor(message: string) {
+    super(message)
+
+    this.name = 'CameraProblemError'
+  }
+}

package/src/errors/contact-support.ts

@@ -0,0 +1,10 @@
+export class ContactSupportError extends Error {
+  readonly code: string
+
+  constructor(code?: string) {
+    super(`Entre em contato com o suporte, Erro ${code ?? '0'}.`)
+
+    this.name = 'ContactSupportError'
+    this.code = code ?? '0'
+  }
+}

package/src/errors/geolocation-permission-denied.ts

@@ -0,0 +1,9 @@
+export class GeolocationPermissionDeniedError extends Error {
+  constructor() {
+    super(
+      'Precisamos da sua localização para seguir com o onboarding. Habilite a permissão para continuar e validar sua identidade.',
+    )
+
+    this.name = 'GeolocationPermissionDeniedError'
+  }
+}

package/src/errors/index.ts

@@ -0,0 +1,6 @@
+export * from './contact-support'
+export * from './process-already-completed'
+export * from './non-standard-hours'
+export * from './camera-permission-denied'
+export * from './camera-problem'
+export * from './geolocation-permission-denied'

package/src/errors/non-standard-hours.ts

@@ -0,0 +1,11 @@
+export class NonStandardHoursError extends Error {
+  readonly code = '0427'
+
+  constructor() {
+    super(
+      'Não é possível prosseguir, a data e o horário do seu dispositivo não está configurado corretamente.',
+    )
+
+    this.name = 'NonStandardHoursError'
+  }
+}

package/src/errors/process-already-completed.ts

@@ -0,0 +1,10 @@
+export class ProcessAlreadyCompletedError extends Error {
+  readonly code: string
+
+  constructor(code: string) {
+    super('Não é possível prosseguir, este processo já foi finalizado.')
+
+    this.name = 'ProcessAlreadyCompletedError'
+    this.code = code
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from './use-loading'
+export * from './use-error-fallback'
+export * from './use-progress-indicator'
+export * from './use-description-loading'
+export * from './use-button'
+export * from './use-camera'
+export * from './use-recommended-validations'
+export * from './use-identification-error'
+export * from './use-rekognition'
+export * from './use-s3'
+export * from './use-process-status'
+export * from './use-process-timeline'
+export * from './use-onboarding-channel'

package/src/hooks/use-button.ts

@@ -0,0 +1,22 @@
+import { useTheme, type ColorProps, type VariantProps } from '@shopify/restyle'
+import { type CustomThemeProps } from '../theme'
+
+type UseButtonProps = VariantProps<CustomThemeProps, 'buttonVariants'> & {
+  mainColor?: ColorProps<CustomThemeProps>['color']
+}
+
+export const useButton = (props?: UseButtonProps) => {
+  const { colors } = useTheme<CustomThemeProps>()
+
+  const isOutline = props?.variant === 'outline'
+  const mainColor = isOutline ? colors.primary : colors.textButton
+
+  return {
+    variant: props?.variant,
+    mainColor: props?.mainColor ? colors[props?.mainColor] : mainColor,
+    ...(isOutline &&
+      props?.mainColor && {
+        borderColor: props?.mainColor,
+      }),
+  }
+}

package/src/hooks/use-camera.ts

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Camera,
+  CameraRuntimeError,
+  useCameraDevice,
+  useCameraPermission,
+  type CameraPosition,
+} from 'react-native-vision-camera'
+import { useDebounce } from 'use-debounce'
+import { useFlowStore } from '../store'
+import { useProcessTimeline } from './use-process-timeline'
+import { cameraErrorMessages, type CameraError } from '../constants'
+import { TimelineStatus } from '../enums'
+import { CameraPermissionDeniedError, CameraProblemError } from '../errors'
+
+export const useCamera = (position: CameraPosition) => {
+  const ref = useRef<Camera>(null)
+  const hasRetriedRef = useRef(false)
+  const isInvalidConfigFromPreviousSessionRef = useRef(false)
+  const permissionTimelineSentRef = useRef(false)
+  const [isReady, setIsReady] = useState(false)
+  const [isTakingPicture, setIsTakingPicture] = useState(false)
+  const [enablePhoto, setEnablePhoto] = useState(true)
+  const [error, setError] = useState<Error>()
+  const { hasPermission, requestPermission } = useCameraPermission()
+  const device = useCameraDevice(position)
+  const [isReadyDebounced] = useDebounce(isReady, 500)
+  const backgroundCheckExecutionId = useFlowStore(
+    (state) => state.backgroundCheckExecutionId,
+  )
+  const { create: createProcessTimeline } = useProcessTimeline()
+
+  const onInitialized = useCallback(() => {
+    setIsReady(true)
+  }, [])
+  const onError = useCallback(
+    (err: CameraRuntimeError) => {
+      if (err.code === 'session/invalid-output-configuration') {
+        if (!hasRetriedRef.current) {
+          hasRetriedRef.current = true
+          isInvalidConfigFromPreviousSessionRef.current = true
+          setEnablePhoto(false)
+
+          return
+        }
+
+        if (isInvalidConfigFromPreviousSessionRef.current) {
+          isInvalidConfigFromPreviousSessionRef.current = false
+
+          return
+        }
+      }
+
+      setIsReady(false)
+
+      const message =
+        err.code in cameraErrorMessages
+          ? cameraErrorMessages[err.code as CameraError]
+          : `Erro ao acessar a câmera: ${err.message}`
+
+      createProcessTimeline({
+        status: TimelineStatus.ERROR,
+        message,
+      })
+      setError(new CameraProblemError(message))
+    },
+    [createProcessTimeline],
+  )
+  const takePicture = useCallback(async () => {
+    if (!ref.current) return
+
+    setIsTakingPicture(true)
+
+    const picture = enablePhoto
+      ? await ref.current.takePhoto()
+      : await ref.current.takeSnapshot()
+
+    setIsTakingPicture(false)
+
+    return picture
+  }, [enablePhoto])
+  const handlePermission = useCallback(async () => {
+    const granted = await requestPermission()
+
+    if (!granted) {
+      createProcessTimeline({
+        status: TimelineStatus.ERROR,
+        message: 'Permissão para acessar a câmera foi negada',
+      })
+      setError(new CameraPermissionDeniedError())
+    }
+  }, [createProcessTimeline, requestPermission])
+
+  useEffect(() => {
+    if (!backgroundCheckExecutionId) return
+
+    if (!hasPermission) {
+      handlePermission()
+
+      return
+    }
+
+    if (permissionTimelineSentRef.current) return
+
+    createProcessTimeline({
+      status: TimelineStatus.SUCCESS,
+      message: 'Acesso à câmera permitido pelo usuário',
+    })
+
+    permissionTimelineSentRef.current = true
+  }, [
+    backgroundCheckExecutionId,
+    createProcessTimeline,
+    handlePermission,
+    hasPermission,
+  ])
+
+  if (error) throw error
+
+  return {
+    ref,
+    device,
+    hasPermission,
+    isReady: isReadyDebounced,
+    isTakingPicture,
+    enablePhoto,
+    onInitialized,
+    onError,
+    takePicture,
+  }
+}

package/src/hooks/use-description-loading.ts

@@ -0,0 +1,19 @@
+import { useTheme } from '@shopify/restyle'
+import { useLoading } from './use-loading'
+import { type CustomThemeProps } from '../theme'
+
+type UseDescriptionLoadingProps = {
+  isActive: boolean
+}
+
+export const useDescriptionLoading = ({
+  isActive,
+}: UseDescriptionLoadingProps) => {
+  const { colors } = useTheme<CustomThemeProps>()
+  const loadingProps = useLoading({ isActive })
+
+  return {
+    iconColor: colors.primary,
+    loadingProps,
+  }
+}

package/src/hooks/use-error-fallback.ts

@@ -0,0 +1,33 @@
+import { useTheme } from '@shopify/restyle'
+import { useProcessStore } from '../store'
+import { useButton } from './use-button'
+import { type CustomThemeProps } from '../theme'
+import { getErrorMetadata } from '../utils'
+
+type UseErrorFallbackProps = {
+  error: Error
+  resetError: () => void
+}
+
+export const useErrorFallback = ({
+  error,
+  resetError,
+}: UseErrorFallbackProps) => {
+  const { icon, title, message, isPermissionDenied } = getErrorMetadata(error)
+  const onFinish = useProcessStore((state) => state.onFinish)
+  const { colors } = useTheme<CustomThemeProps>()
+  const tryAgainButtonProps = useButton()
+  const finishProcessButtonProps = useButton({ variant: 'outline' })
+
+  return {
+    title,
+    message,
+    icon,
+    miniIconColor: colors.secondary,
+    tryAgainButtonProps,
+    finishProcessButtonProps,
+    showFooterButtons: isPermissionDenied,
+    onTryAgainPress: resetError,
+    onFinishProcessPress: onFinish,
+  }
+}

package/src/hooks/use-identification-error.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@shopify/restyle'
+import { type CustomThemeProps } from '../theme'
+import { useButton } from './use-button'
+
+export const useIdentificationError = () => {
+  const { colors } = useTheme<CustomThemeProps>()
+  const tryAgainButtonProps = useButton()
+
+  return {
+    miniIconColor: colors.secondary,
+    tryAgainButtonProps,
+  }
+}

package/src/hooks/use-loading.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+import { useTheme } from '@shopify/restyle'
+import {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+import { type CustomThemeProps } from '../theme'
+
+type UseLoadingProps = {
+  isActive: boolean
+}
+
+export const useLoading = ({ isActive }: UseLoadingProps) => {
+  const { colors } = useTheme<CustomThemeProps>()
+  const rotation = useSharedValue(0)
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }))
+
+  useEffect(() => {
+    if (!isActive) {
+      cancelAnimation(rotation)
+      rotation.value = 0
+
+      return
+    }
+
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1,
+      false,
+    )
+
+    return () => {
+      cancelAnimation(rotation)
+      rotation.value = 0
+    }
+  }, [isActive, rotation])
+
+  return {
+    animatedStyle,
+    backgroundColor: colors.gray,
+    color: colors.primary,
+  }
+}