@proteoapp/react-native-onboarding 0.1.0

package/src/hooks/use-onboarding-channel.ts

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useNavigation } from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { type RootStackParamList } from '../navigation'
+import {
+  createOnboardingChannel,
+  type OnReceiveOnboardingChannelData,
+} from '../services'
+import { useFlowStore, useProcessStore } from '../store'
+import { ProcessStatus, RequestStatus } from '../enums'
+import { ContactSupportError } from '../errors'
+
+type UseOnboardingChannelProps = {
+  establishConnection?: boolean
+}
+
+export const useOnboardingChannel = (props?: UseOnboardingChannelProps) => {
+  const establishConnection = props?.establishConnection ?? true
+
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isResourceNotFoundError, setIsResourceNotFoundError] = useState(false)
+  const [isProcessingError, setIsProcessingError] = useState(false)
+  const {
+    authToken,
+    tenant,
+    isSimplifiedMode,
+    notRequestDocument,
+    setNotRequestDocument,
+  } = useProcessStore((state) => ({
+    authToken: state.authToken,
+    tenant: state.tenant,
+    isSimplifiedMode: state.isSimplifiedMode,
+    notRequestDocument: state.notRequestDocument,
+    setNotRequestDocument: state.setNotRequestDocument,
+  }))
+  const backgroundCheckExecutionId = useFlowStore(
+    (state) => state.backgroundCheckExecutionId,
+  )
+  const notRequestDocumentRef = useRef(notRequestDocument)
+
+  const onReceiveData = useCallback(
+    (data: OnReceiveOnboardingChannelData) => {
+      const nowProcessing = data.status === RequestStatus.PROCESSING
+      const hasProcessingError = data.status === RequestStatus.ERROR
+      const serverRequiresDocument =
+        !data.not_request_document &&
+        data.status_onboarding === ProcessStatus.DOCUMENTS
+      const shouldRequestDocument =
+        notRequestDocumentRef.current && serverRequiresDocument
+      const canFinish =
+        data.status === RequestStatus.COMPLETED &&
+        data.status_onboarding === ProcessStatus.DONE
+
+      if (hasProcessingError) {
+        return setIsProcessingError(true)
+      }
+
+      if (shouldRequestDocument) {
+        setNotRequestDocument(false)
+
+        if (isSimplifiedMode) {
+          return navigation.replace('DocumentCamera', { side: 'front' })
+        }
+
+        return navigation.replace('Document')
+      }
+
+      if (canFinish) {
+        return navigation.replace('ProcessFinished')
+      }
+
+      setIsProcessing(nowProcessing)
+    },
+    [isSimplifiedMode, navigation, setNotRequestDocument],
+  )
+
+  useEffect(() => {
+    if (!establishConnection) return
+
+    if (!backgroundCheckExecutionId) {
+      return setIsResourceNotFoundError(true)
+    }
+
+    const channel = createOnboardingChannel({
+      authToken,
+      tenant,
+      backgroundCheckExecutionId,
+      onReceiveData,
+    })
+
+    return () => {
+      channel.unsubscribe()
+    }
+  }, [
+    authToken,
+    backgroundCheckExecutionId,
+    establishConnection,
+    onReceiveData,
+    tenant,
+  ])
+
+  useEffect(() => {
+    notRequestDocumentRef.current = notRequestDocument
+  }, [notRequestDocument])
+
+  if (isResourceNotFoundError) throw new ContactSupportError('0416')
+  if (isProcessingError) throw new ContactSupportError()
+
+  return {
+    processingMessage: 'Validando informações',
+    isProcessing,
+  }
+}

package/src/hooks/use-process-status.ts

@@ -0,0 +1,82 @@
+import { useCallback, useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { navigationRef } from '../navigation'
+import { useFlowStore, useProcessStore } from '../store'
+import { alterProcessStatus } from '../services'
+import { routesNeedAlterStatus } from '../constants'
+import { ProcessStatus } from '../enums'
+import { ContactSupportError } from '../errors'
+
+export const useProcessStatus = () => {
+  const [isError, setIsError] = useState(false)
+  const { authToken, tenant, backgroundCheckId, status, setStatus } =
+    useProcessStore((state) => ({
+      authToken: state.authToken,
+      tenant: state.tenant,
+      backgroundCheckId: state.backgroundCheckId,
+      status: state.status,
+      setStatus: state.setStatus,
+    }))
+  const backgroundCheckExecutionId = useFlowStore(
+    (state) => state.backgroundCheckExecutionId,
+  )
+  const {
+    mutate: alterMutate,
+    error: alterError,
+    isError: isAlterError,
+  } = useMutation({
+    mutationFn: alterProcessStatus,
+  })
+
+  const resolveThatRouteNeeds = useCallback(() => {
+    const routeName = navigationRef.current?.getCurrentRoute()?.name
+    const requiredStatus = routeName && routesNeedAlterStatus[routeName]
+
+    if (!backgroundCheckExecutionId) {
+      return ProcessStatus.START
+    }
+
+    return requiredStatus ?? status
+  }, [backgroundCheckExecutionId, status])
+  const checkIfRouteNeedsAlter = useCallback(() => {
+    const statusThatRouteNeeds = resolveThatRouteNeeds()
+
+    return !!backgroundCheckExecutionId && statusThatRouteNeeds !== status
+  }, [backgroundCheckExecutionId, resolveThatRouteNeeds, status])
+  const alterToThatRouteNeeds = useCallback(() => {
+    const routeNeedsAlter = checkIfRouteNeedsAlter()
+
+    if (!routeNeedsAlter || !backgroundCheckExecutionId) {
+      return setIsError(true)
+    }
+
+    const statusThatRouteNeeds = resolveThatRouteNeeds()
+
+    alterMutate({
+      authToken,
+      tenant,
+      backgroundCheckId,
+      backgroundCheckExecutionId,
+      status: statusThatRouteNeeds,
+    })
+    setStatus(statusThatRouteNeeds)
+  }, [
+    alterMutate,
+    authToken,
+    backgroundCheckExecutionId,
+    backgroundCheckId,
+    checkIfRouteNeedsAlter,
+    resolveThatRouteNeeds,
+    setStatus,
+    tenant,
+  ])
+
+  if (isError) throw new ContactSupportError('0407')
+  if (isAlterError) throw alterError
+
+  return {
+    checkIfRouteNeedsAlter,
+    alterToThatRouteNeeds,
+    resolveThatRouteNeeds,
+  }
+}

package/src/hooks/use-process-timeline.ts

@@ -0,0 +1,155 @@
+import { useCallback, useRef, useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import {
+  useFlowStore,
+  useProcessStore,
+  useProcessTimelineQueueStore,
+} from '../store'
+import { createProcessTimeline } from '../services'
+import { useProcessStatus } from './use-process-status'
+import { ContactSupportError } from '../errors'
+
+export const useProcessTimeline = () => {
+  const isQueueFlushedRef = useRef(false)
+  const [isError, setIsError] = useState(false)
+  const {
+    authToken,
+    tenant,
+    backgroundCheckId,
+    status: processStatus,
+  } = useProcessStore((state) => ({
+    authToken: state.authToken,
+    tenant: state.tenant,
+    backgroundCheckId: state.backgroundCheckId,
+    status: state.status,
+  }))
+  const backgroundCheckExecutionId = useFlowStore(
+    (state) => state.backgroundCheckExecutionId,
+  )
+  const {
+    events,
+    enqueue: enqueueEvent,
+    clear: clearEvents,
+  } = useProcessTimelineQueueStore((state) => ({
+    events: state.events,
+    enqueue: state.enqueue,
+    clear: state.clear,
+  }))
+  const {
+    mutate: createMutate,
+    error: createError,
+    isError: isCreateError,
+  } = useMutation({
+    mutationFn: createProcessTimeline,
+  })
+  const { resolveThatRouteNeeds: resolveProcessStatusThatRouteNeeds } =
+    useProcessStatus()
+
+  const checkIfShouldEnqueueEvent = useCallback(() => {
+    const processStatusThatRouteNeeds = resolveProcessStatusThatRouteNeeds()
+
+    return (
+      !backgroundCheckExecutionId ||
+      processStatusThatRouteNeeds !== processStatus
+    )
+  }, [
+    backgroundCheckExecutionId,
+    processStatus,
+    resolveProcessStatusThatRouteNeeds,
+  ])
+  const checkIfCanFlushQueue = useCallback(() => {
+    const processStatusThatRouteNeeds = resolveProcessStatusThatRouteNeeds()
+
+    return (
+      !isQueueFlushedRef.current &&
+      !!backgroundCheckExecutionId &&
+      processStatusThatRouteNeeds === processStatus
+    )
+  }, [
+    backgroundCheckExecutionId,
+    processStatus,
+    resolveProcessStatusThatRouteNeeds,
+  ])
+  const create = useCallback(
+    (event: Omit<(typeof events)[number], 'processStatus'>) => {
+      const shouldEnqueueEvent = checkIfShouldEnqueueEvent()
+
+      if (shouldEnqueueEvent || !backgroundCheckExecutionId) {
+        const processStatusThatRouteNeeds = resolveProcessStatusThatRouteNeeds()
+
+        enqueueEvent({
+          processStatus: processStatusThatRouteNeeds,
+          status: event.status,
+          message: event.message,
+          image: event.image,
+        })
+        isQueueFlushedRef.current = false
+
+        return
+      }
+
+      return createMutate({
+        authToken,
+        tenant,
+        backgroundCheckId,
+        backgroundCheckExecutionId,
+        processStatus,
+        status: event.status,
+        message: event.message,
+        image: event.image,
+      })
+    },
+    [
+      authToken,
+      backgroundCheckExecutionId,
+      backgroundCheckId,
+      checkIfShouldEnqueueEvent,
+      createMutate,
+      enqueueEvent,
+      processStatus,
+      resolveProcessStatusThatRouteNeeds,
+      tenant,
+    ],
+  )
+  const flushQueue = useCallback(() => {
+    const canFlush = checkIfCanFlushQueue()
+
+    if (!canFlush || !backgroundCheckExecutionId) {
+      return setIsError(true)
+    }
+
+    for (const event of events) {
+      createMutate({
+        authToken,
+        tenant,
+        backgroundCheckId,
+        backgroundCheckExecutionId,
+        processStatus: event.processStatus,
+        status: event.status,
+        message: event.message,
+        image: event.image,
+      })
+    }
+
+    clearEvents()
+    isQueueFlushedRef.current = true
+  }, [
+    authToken,
+    backgroundCheckExecutionId,
+    backgroundCheckId,
+    checkIfCanFlushQueue,
+    clearEvents,
+    createMutate,
+    events,
+    tenant,
+  ])
+
+  if (isError) throw new ContactSupportError('0425')
+  if (isCreateError) throw createError
+
+  return {
+    create,
+    flushQueue,
+    checkIfCanFlushQueue,
+  }
+}

package/src/hooks/use-progress-indicator.ts

@@ -0,0 +1,51 @@
+import { useRoute, type RouteProp } from '@react-navigation/native'
+import { useTheme } from '@shopify/restyle'
+import { type RootStackParamList } from '../navigation'
+import { useProcessStore } from '../store'
+import { progressSteps } from '../constants'
+import { Objective } from '../enums'
+import { type CustomThemeProps } from '../theme'
+
+export const useProgressIndicator = () => {
+  const route = useRoute<RouteProp<RootStackParamList>>()
+  const { objective, notRequestDocument } = useProcessStore((state) => ({
+    objective: state.objective,
+    notRequestDocument: state.notRequestDocument,
+  }))
+  const { colors } = useTheme<CustomThemeProps>()
+
+  const steps = progressSteps.filter((step) => {
+    if (objective === Objective.FACE_AUTH) {
+      return step.routes.includes('FaceAuth')
+    }
+
+    if (notRequestDocument) {
+      return !step.routes.includes('Document')
+    }
+
+    return true
+  })
+  const currentStepIndex = steps.findIndex((step) =>
+    step.routes.includes(route.name),
+  )
+  const currentIndex =
+    currentStepIndex === -1 ? steps.length - 1 : currentStepIndex
+  const currentStep = currentIndex + 1
+  const totalSteps = steps.length
+  const bars = Array(totalSteps)
+    .fill(0)
+    .map((_, index) => ({
+      isCurrent: currentIndex === index,
+      isFirst: index === 0,
+      isLast: index === totalSteps - 1,
+    }))
+  const stepIcon = steps[currentIndex]!.icon
+
+  return {
+    currentStep,
+    totalSteps,
+    bars,
+    stepIcon,
+    stepIconColor: colors.text,
+  }
+}

package/src/hooks/use-recommended-validations.ts

@@ -0,0 +1,52 @@
+import { useCallback, useRef, useState } from 'react'
+import {
+  View,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native'
+
+export const useRecommendedValidations = () => {
+  const [bulletLayouts, setBulletLayouts] = useState<LayoutRectangle[]>([])
+  const [titleMarginLeft, setTitleMarginLeft] = useState(0)
+  const bulletRefs = useRef<React.ComponentRef<typeof View>[]>([])
+
+  const getConnectorHeight = useCallback(
+    (index: number) => {
+      const current = bulletLayouts[index]
+      const next = bulletLayouts[index + 1]
+
+      if (!current || !next) return 0
+
+      return next.y - (current.y + current.height)
+    },
+    [bulletLayouts],
+  )
+  const onBulletLayout = useCallback((index: number) => {
+    const ref = bulletRefs.current[index]
+
+    if (!ref) return
+
+    ref.measureInWindow((x, y, width, height) => {
+      setBulletLayouts((prev) => [
+        ...prev,
+        {
+          x,
+          y,
+          width,
+          height,
+        },
+      ])
+    })
+  }, [])
+  const onRecommendationLayout = useCallback((event: LayoutChangeEvent) => {
+    setTitleMarginLeft(event.nativeEvent.layout.x)
+  }, [])
+
+  return {
+    bulletRefs,
+    titleMarginLeft,
+    getConnectorHeight,
+    onBulletLayout,
+    onRecommendationLayout,
+  }
+}

package/src/hooks/use-rekognition.ts

@@ -0,0 +1,41 @@
+import {
+  DetectFacesCommand,
+  RekognitionClient,
+} from '@aws-sdk/client-rekognition'
+import { useFlowStore, useProcessStore } from '../store'
+import { ContactSupportError } from '../errors'
+
+export const useRekognition = () => {
+  const bucket = useProcessStore((state) => state.bucket)
+  const temporaryCredentials = useFlowStore(
+    (state) => state.temporaryCredentials,
+  )
+
+  if (!bucket || !temporaryCredentials) throw new ContactSupportError('0410')
+
+  const client = new RekognitionClient({
+    region: bucket.region,
+    credentials: {
+      accessKeyId: temporaryCredentials.accessKeyId,
+      secretAccessKey: temporaryCredentials.secretAccessKey,
+      sessionToken: temporaryCredentials.sessionToken,
+      expiration: new Date(temporaryCredentials.expiration),
+    },
+  })
+
+  const checkFaceConfidence = async (
+    pictureBytes: Uint8Array<ArrayBuffer>,
+  ): Promise<number | undefined> => {
+    try {
+      const detectFacesOutput = await client.send(
+        new DetectFacesCommand({ Image: { Bytes: pictureBytes } }),
+      )
+
+      return detectFacesOutput.FaceDetails?.[0]?.Confidence
+    } catch (err) {
+      throw new ContactSupportError('0403.2')
+    }
+  }
+
+  return { checkFaceConfidence }
+}

package/src/hooks/use-s3.ts

@@ -0,0 +1,113 @@
+import { useCallback, useRef } from 'react'
+import { readFile } from 'react-native-fs'
+import { Image } from 'react-native-compressor'
+import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
+import { ImageType } from '../enums'
+import { imageTypeReferences } from '../constants'
+import { useFlowStore, useProcessStore } from '../store'
+import { ContactSupportError } from '../errors'
+
+export const useS3 = (imageType: ImageType) => {
+  const { tenant, bucket } = useProcessStore((state) => ({
+    tenant: state.tenant,
+    bucket: state.bucket,
+  }))
+  const { temporaryCredentials, backgroundCheckExecutionId } = useFlowStore(
+    (state) => ({
+      temporaryCredentials: state.temporaryCredentials,
+      backgroundCheckExecutionId: state.backgroundCheckExecutionId,
+    }),
+  )
+
+  if (!bucket || !temporaryCredentials || !backgroundCheckExecutionId) {
+    throw new ContactSupportError('0410')
+  }
+
+  const client = useRef(
+    new S3Client({
+      region: bucket.region,
+      credentials: {
+        accessKeyId: temporaryCredentials.accessKeyId,
+        secretAccessKey: temporaryCredentials.secretAccessKey,
+        sessionToken: temporaryCredentials.sessionToken,
+        expiration: new Date(temporaryCredentials.expiration),
+      },
+    }),
+  ).current
+
+  const prepare = useCallback(
+    async (uri: string): Promise<Uint8Array<ArrayBuffer>> => {
+      try {
+        const compressed = await Image.compress(uri.replace('file://', ''))
+        const base64 = await readFile(compressed, 'base64')
+
+        return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0))
+      } catch (err) {
+        if (imageType === ImageType.FRONT_DOCUMENT) {
+          throw new ContactSupportError('0411.1.1')
+        }
+
+        if (imageType === ImageType.BACK_DOCUMENT) {
+          throw new ContactSupportError('0411.1.2')
+        }
+
+        if (imageType === ImageType.FACE) {
+          throw new ContactSupportError('0411.1.3')
+        }
+
+        if (imageType === ImageType.DOCUMENT_PDF) {
+          throw new ContactSupportError('0411.1.4')
+        }
+
+        throw new ContactSupportError('0411.1.5')
+      }
+    },
+    [imageType],
+  )
+  const upload = useCallback(
+    async (bytes: Uint8Array<ArrayBuffer>): Promise<string> => {
+      try {
+        const timestamp = Date.now().toString(36)
+        const random = Math.random().toString(36).substring(2, 10)
+        const id = `${timestamp}${random}`
+        const reference = imageTypeReferences[imageType]
+        const key =
+          imageType === ImageType.FACE
+            ? `${tenant}/${reference}_${backgroundCheckExecutionId}.jpeg`
+            : `${tenant}/logs/${reference}_${backgroundCheckExecutionId}_${id}.jpeg`
+
+        await client.send(
+          new PutObjectCommand({
+            Bucket: bucket.upload,
+            Key: key,
+            Body: bytes,
+            ContentType: 'image/jpeg',
+          }),
+        )
+
+        return `https://${bucket.upload}.s3.${bucket.region}.amazonaws.com/${key}`
+      } catch (err) {
+        if (imageType === ImageType.FRONT_DOCUMENT) {
+          throw new ContactSupportError('0411.3.1')
+        }
+
+        if (imageType === ImageType.BACK_DOCUMENT) {
+          throw new ContactSupportError('0411.3.2')
+        }
+
+        if (imageType === ImageType.FACE) {
+          throw new ContactSupportError('0411.3.3')
+        }
+
+        if (imageType === ImageType.DOCUMENT_PDF) {
+          throw new ContactSupportError('0411.3.4')
+        }
+
+        throw new ContactSupportError('0411.3.5')
+      }
+    },
+    [backgroundCheckExecutionId, bucket, client, imageType, tenant],
+  )
+
+  return { prepare, upload }
+}

package/src/index.tsx

@@ -0,0 +1,31 @@
+import 'web-streams-polyfill/polyfill'
+import 'react-native-url-polyfill/auto'
+import { install } from 'react-native-quick-crypto'
+install()
+
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import ErrorBoundary from 'react-native-error-boundary'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { App } from './app'
+import { DefaultErrorFallback } from './components'
+
+const queryClient = new QueryClient()
+
+export type OnboardingProps = {
+  environment: 'development' | 'staging' | 'production'
+  tenant: string
+  backgroundCheckId: string
+  document: string
+  objective?: 'onboarding' | 'face-auth'
+  onFinish: () => void
+}
+
+export const Onboarding = (props: OnboardingProps) => (
+  <SafeAreaProvider>
+    <QueryClientProvider client={queryClient}>
+      <ErrorBoundary FallbackComponent={DefaultErrorFallback}>
+        <App {...props} />
+      </ErrorBoundary>
+    </QueryClientProvider>
+  </SafeAreaProvider>
+)

package/src/layouts/index.ts

@@ -0,0 +1 @@
+export * from './root'

package/src/layouts/root/index.tsx

@@ -0,0 +1,12 @@
+import { RootLayoutView } from './view'
+import { useRootLayoutViewModel } from './view-model'
+
+type RootLayoutProps = {
+  children: React.ReactNode
+}
+
+export const RootLayout = ({ children }: RootLayoutProps) => {
+  const props = useRootLayoutViewModel()
+
+  return <RootLayoutView {...props}>{children}</RootLayoutView>
+}

package/src/layouts/root/view-model.ts

@@ -0,0 +1,13 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useProgressIndicator } from '../../hooks'
+
+export const useRootLayoutViewModel = () => {
+  const insets = useSafeAreaInsets()
+  const progressIndicatorProps = useProgressIndicator()
+
+  return {
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom,
+    progressIndicatorProps,
+  }
+}

package/src/layouts/root/view.tsx

@@ -0,0 +1,24 @@
+import { createBox } from '@shopify/restyle'
+import { type CustomThemeProps } from '../../theme'
+import { ProgressIndicator } from '../../components'
+import { useRootLayoutViewModel } from './view-model'
+
+const Box = createBox<CustomThemeProps>()
+
+type RootLayoutViewProps = ReturnType<typeof useRootLayoutViewModel> & {
+  children: React.ReactNode
+}
+
+export const RootLayoutView = ({
+  paddingTop,
+  paddingBottom,
+  progressIndicatorProps,
+  children,
+}: RootLayoutViewProps) => (
+  <Box flex={1} bg="secondary" style={{ paddingTop, paddingBottom }}>
+    <Box flex={1} p="m">
+      <ProgressIndicator {...progressIndicatorProps} />
+      <Box flex={1}>{children}</Box>
+    </Box>
+  </Box>
+)