@proteoapp/react-native-onboarding 0.1.0

package/src/navigation/index.tsx

@@ -0,0 +1,92 @@
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import {
+  FaceAuthScreen,
+  FaceAuthCameraScreen,
+  FaceAuthAnalysisScreen,
+  DocumentScreen,
+  DocumentCameraScreen,
+  DocumentReviewScreen,
+  DocumentAnalysisScreen,
+  ProcessFinishedScreen,
+} from '../screens'
+
+export type RootStackParamList = {
+  FaceAuth: undefined
+  FaceAuthCamera: { retry?: boolean } | undefined
+  FaceAuthAnalysis: {
+    pictureUri: string
+  }
+  Document: undefined
+  DocumentCamera: {
+    side: 'front' | 'back'
+  }
+  DocumentReview: {
+    pictureUri: string
+    side: 'front' | 'back'
+  }
+  DocumentAnalysis: undefined
+  ProcessFinished: undefined
+}
+
+export type RouteName = keyof RootStackParamList
+
+export const navigationRef = createNavigationContainerRef<RootStackParamList>()
+
+const RootStack = createNativeStackNavigator<RootStackParamList>()
+
+type RootNavigatorProps = {
+  initialRouteName: RouteName
+  onReady: () => void
+  onStateChange: () => void
+}
+
+export const RootNavigator = ({
+  initialRouteName,
+  onReady,
+  onStateChange,
+}: RootNavigatorProps) => (
+  <NavigationContainer
+    ref={navigationRef}
+    onReady={onReady}
+    onStateChange={onStateChange}
+  >
+    <RootStack.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={{
+        headerShown: false,
+        animation: 'slide_from_right',
+      }}
+    >
+      <RootStack.Screen name="FaceAuth" component={FaceAuthScreen} />
+      <RootStack.Screen
+        name="FaceAuthCamera"
+        component={FaceAuthCameraScreen}
+      />
+      <RootStack.Screen
+        name="FaceAuthAnalysis"
+        component={FaceAuthAnalysisScreen}
+      />
+      <RootStack.Screen name="Document" component={DocumentScreen} />
+      <RootStack.Screen
+        name="DocumentCamera"
+        component={DocumentCameraScreen}
+      />
+      <RootStack.Screen
+        name="DocumentReview"
+        component={DocumentReviewScreen}
+      />
+      <RootStack.Screen
+        name="DocumentAnalysis"
+        component={DocumentAnalysisScreen}
+      />
+      <RootStack.Screen
+        name="ProcessFinished"
+        component={ProcessFinishedScreen}
+      />
+    </RootStack.Navigator>
+  </NavigationContainer>
+)

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

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

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

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { doneProcess } from '../../../services'
+import { useFlowStore, useProcessStore } from '../../../store'
+import { useDescriptionLoading, useOnboardingChannel } from '../../../hooks'
+import { ContactSupportError } from '../../../errors'
+
+export const useDocumentAnalysisViewModel = () => {
+  const isAnalyzingRef = useRef(false)
+  const { authToken, tenant, backgroundCheckId, document, objective } =
+    useProcessStore((state) => ({
+      authToken: state.authToken,
+      tenant: state.tenant,
+      backgroundCheckId: state.backgroundCheckId,
+      document: state.document,
+      objective: state.objective,
+    }))
+  const {
+    backgroundCheckExecutionId,
+    faceConfidence,
+    facePictureUrl,
+    frontDocumentPictureUrl,
+    backDocumentPictureUrl,
+  } = useFlowStore((state) => ({
+    backgroundCheckExecutionId: state.backgroundCheckExecutionId,
+    faceConfidence: state.faceConfidence,
+    facePictureUrl: state.facePictureUrl,
+    frontDocumentPictureUrl: state.frontDocumentPictureUrl,
+    backDocumentPictureUrl: state.backDocumentPictureUrl,
+  }))
+  const descriptionLoadingProps = useDescriptionLoading({ isActive: true })
+  const {
+    processingMessage: onboardingChannelProcessingMessage,
+    isProcessing: isOnboardingChannelProcessing,
+  } = useOnboardingChannel()
+  const {
+    mutate: doneProcessMutate,
+    error: doneProcessError,
+    isError: isDoneProcessError,
+  } = useMutation({ mutationFn: doneProcess })
+
+  if (
+    !backgroundCheckExecutionId ||
+    !faceConfidence ||
+    !facePictureUrl ||
+    !frontDocumentPictureUrl ||
+    !backDocumentPictureUrl
+  ) {
+    throw new ContactSupportError('0416')
+  }
+
+  useEffect(() => {
+    if (!isAnalyzingRef.current) {
+      isAnalyzingRef.current = true
+
+      doneProcessMutate({
+        authToken,
+        tenant,
+        backgroundCheckId,
+        backgroundCheckExecutionId: backgroundCheckExecutionId,
+        document,
+        objective,
+        faceAuth: {
+          confidence: faceConfidence,
+          pictureUrl: facePictureUrl,
+        },
+        documentPictureUrls: {
+          front: frontDocumentPictureUrl,
+          back: backDocumentPictureUrl,
+        },
+      })
+    }
+  }, [
+    authToken,
+    backDocumentPictureUrl,
+    backgroundCheckExecutionId,
+    backgroundCheckId,
+    document,
+    doneProcessMutate,
+    faceConfidence,
+    facePictureUrl,
+    frontDocumentPictureUrl,
+    objective,
+    tenant,
+  ])
+
+  if (isDoneProcessError) throw doneProcessError
+
+  return {
+    descriptionLoadingProps,
+    descriptionLoadingMessage: isOnboardingChannelProcessing
+      ? onboardingChannelProcessingMessage
+      : undefined,
+  }
+}

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

@@ -0,0 +1,20 @@
+import { DocumentCircleSvg } from '../../../../assets/svgs'
+import { RootLayout } from '../../../layouts'
+import { DescriptionLoading } from '../../../components'
+import { useDocumentAnalysisViewModel } from './view-model'
+
+type DocumentAnalysisViewProps = ReturnType<typeof useDocumentAnalysisViewModel>
+
+export const DocumentAnalysisView = ({
+  descriptionLoadingProps,
+  descriptionLoadingMessage,
+}: DocumentAnalysisViewProps) => (
+  <RootLayout>
+    <DescriptionLoading
+      {...descriptionLoadingProps}
+      title="Analisando o seu documento"
+      message={descriptionLoadingMessage}
+      icon={DocumentCircleSvg}
+    />
+  </RootLayout>
+)

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

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