@proteoapp/react-native-onboarding 0.1.0

package/src/view-model.ts

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { type OnboardingProps } from '.'
+import { navigationRef, type RouteName } from './navigation'
+import { useEnvVariablesStore, useFlowStore, useProcessStore } from './store'
+import { createProcessErrorLog, generateProcessData } from './services'
+import { useProcessTimeline, useLoading, useProcessStatus } from './hooks'
+import { environments } from './constants'
+import { Objective, TimelineStatus } from './enums'
+import { createCustomTheme, type CustomThemeProps } from './theme'
+import { getErrorMetadata, getRouteStep } from './utils'
+
+export const useAppViewModel = (props: OnboardingProps) => {
+  const previousRouteStepRef = useRef<ReturnType<typeof getRouteStep>>(null)
+  const [isRouteChanged, setIsRouteChanged] = useState(false)
+  const [customTheme, setCustomTheme] = useState<CustomThemeProps | null>(null)
+  const {
+    isConfigured: isEnvVariablesConfigured,
+    configure: configureEnvVariables,
+  } = useEnvVariablesStore((state) => ({
+    isConfigured: state.isConfigured,
+    configure: state.configure,
+  }))
+  const {
+    isSimplifiedMode,
+    isConfigured: isProcessConfigured,
+    configure: configureProcess,
+  } = useProcessStore((state) => ({
+    isSimplifiedMode: state.isSimplifiedMode,
+    isConfigured: state.isConfigured,
+    configure: state.configure,
+  }))
+  const backgroundCheckExecutionId = useFlowStore(
+    (state) => state.backgroundCheckExecutionId,
+  )
+  const {
+    checkIfRouteNeedsAlter: checkIfRouteNeedsAlterProcessStatus,
+    alterToThatRouteNeeds: alterProcessStatusToThatRouteNeeds,
+  } = useProcessStatus()
+  const {
+    create: createProcessTimeline,
+    flushQueue: flushProcessTimelineQueue,
+    checkIfCanFlushQueue: checkIfCanFlushProcessTimelineQueue,
+  } = useProcessTimeline()
+
+  const objective =
+    props.objective === 'face-auth' ? Objective.FACE_AUTH : Objective.ONBOARDING
+  const defaultLoadingMessage =
+    objective === Objective.ONBOARDING
+      ? 'Configurando o onboarding'
+      : 'Configurando a autenticação facial'
+  const initialRouteName: RouteName = isSimplifiedMode
+    ? 'FaceAuthCamera'
+    : 'FaceAuth'
+  const isLoading = !customTheme || !isProcessConfigured
+
+  const {
+    data: processData,
+    error: processDataError,
+    isSuccess: isProcessDataGenerated,
+    isError: isProcessDataError,
+  } = useQuery({
+    queryKey: ['processData', objective, props, isEnvVariablesConfigured],
+    queryFn: () =>
+      generateProcessData({
+        tenant: props.tenant,
+        backgroundCheckId: props.backgroundCheckId,
+        objective,
+      }),
+    enabled:
+      !!props.tenant &&
+      !!props.backgroundCheckId &&
+      isEnvVariablesConfigured &&
+      !customTheme &&
+      !isProcessConfigured,
+  })
+  const loadingProps = useLoading({ isActive: isLoading })
+
+  const onError = useCallback(
+    (error: Error) => {
+      const { message, code } = getErrorMetadata(error)
+
+      if (!backgroundCheckExecutionId || code === '0') return
+
+      createProcessTimeline({
+        status: TimelineStatus.ERROR,
+        message: `Ocorreu um erro na aplicação, mais detalhes nos logs. | Código do erro: ${code} | Mensagem: ${message}`,
+      })
+      createProcessErrorLog({
+        backgroundCheckExecutionId,
+        text: `User document: ${props.document} | The error code is: ${code} | Error message: ${message} | Data: ${error}`,
+      })
+    },
+    [backgroundCheckExecutionId, createProcessTimeline, props],
+  )
+  const onNavigatorReady = useCallback(() => {
+    const navigation = navigationRef.current
+    const currentRoute = navigation?.getCurrentRoute()
+
+    if (!currentRoute) return
+
+    setIsRouteChanged((previous) => !previous)
+
+    const currentRouteStep = getRouteStep(
+      currentRoute.name,
+      currentRoute.params,
+    )
+
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: `Usuário iniciou em ${currentRouteStep.description}`,
+    })
+
+    previousRouteStepRef.current = currentRouteStep
+  }, [createProcessTimeline])
+  const onNavigatorStateChange = useCallback(() => {
+    const navigation = navigationRef.current
+    const currentRoute = navigation?.getCurrentRoute()
+
+    if (!currentRoute) return
+
+    setIsRouteChanged((previous) => !previous)
+
+    const currentRouteStep = getRouteStep(
+      currentRoute.name,
+      currentRoute.params,
+    )
+    const previousRouteStep = previousRouteStepRef.current
+
+    if (!previousRouteStep) return
+
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: `Usuário ${currentRouteStep.index < previousRouteStep.index ? 'voltou' : 'avançou'} de ${previousRouteStep.description} para ${currentRouteStep.description}`,
+    })
+
+    previousRouteStepRef.current = currentRouteStep
+  }, [createProcessTimeline])
+
+  useEffect(() => {
+    if (!isEnvVariablesConfigured) {
+      configureEnvVariables(environments[props.environment])
+    }
+  }, [configureEnvVariables, isEnvVariablesConfigured, props])
+
+  useEffect(() => {
+    if (isProcessDataGenerated && !customTheme && !isProcessConfigured) {
+      const { auth_token, bucket_region, bucket_upload, onboarding_theme } =
+        processData.data
+      const customThemeFromData = createCustomTheme({
+        colors: {
+          primary: onboarding_theme.primary_color,
+          secondary: onboarding_theme.secondary_color,
+          text: onboarding_theme.text_color,
+          textButton: onboarding_theme.text_color_button,
+        },
+      })
+
+      setCustomTheme(customThemeFromData)
+      configureProcess({
+        authToken: auth_token,
+        tenant: props.tenant,
+        backgroundCheckId: props.backgroundCheckId,
+        document: props.document,
+        objective,
+        bucket: {
+          region: bucket_region,
+          upload: bucket_upload,
+        },
+        organizationPicture: onboarding_theme.organization_picture ?? null,
+        isSimplifiedMode: onboarding_theme.simplified,
+        notRequestDocument:
+          objective === Objective.FACE_AUTH
+            ? true
+            : onboarding_theme.not_request_document,
+        hasDigitalFile: onboarding_theme.has_digital_file,
+        onFinish: props.onFinish,
+      })
+    }
+  }, [
+    configureProcess,
+    customTheme,
+    isProcessConfigured,
+    isProcessDataGenerated,
+    objective,
+    processData,
+    props,
+  ])
+
+  useEffect(() => {
+    const routeNeedsAlterProcessStatus = checkIfRouteNeedsAlterProcessStatus()
+
+    if (!routeNeedsAlterProcessStatus) return
+
+    alterProcessStatusToThatRouteNeeds()
+  }, [
+    alterProcessStatusToThatRouteNeeds,
+    checkIfRouteNeedsAlterProcessStatus,
+    isRouteChanged,
+  ])
+
+  useEffect(() => {
+    const canFlushProcessTimelineQueue = checkIfCanFlushProcessTimelineQueue()
+
+    if (!canFlushProcessTimelineQueue) return
+
+    flushProcessTimelineQueue()
+  }, [checkIfCanFlushProcessTimelineQueue, flushProcessTimelineQueue])
+
+  if (isProcessDataError) throw processDataError
+
+  return {
+    customTheme,
+    loadingProps,
+    defaultLoadingMessage,
+    initialRouteName,
+    isLoading,
+    onNavigatorReady,
+    onNavigatorStateChange,
+    onError,
+  }
+}

package/src/view.tsx

@@ -0,0 +1,52 @@
+import ErrorBoundary from 'react-native-error-boundary'
+import { ThemeProvider } from '@shopify/restyle'
+import { RootNavigator } from './navigation'
+import { useErrorFallback } from './hooks'
+import { DefaultLoading, ErrorFallback } from './components'
+import { useAppViewModel } from './view-model'
+
+type ErrorBoundaryFallbackProps = {
+  error: Error
+  resetError: () => void
+}
+
+const ErrorBoundaryFallback = ({
+  error,
+  resetError,
+}: ErrorBoundaryFallbackProps) => {
+  const props = useErrorFallback({
+    error,
+    resetError,
+  })
+
+  return <ErrorFallback {...props} />
+}
+
+type AppViewProps = ReturnType<typeof useAppViewModel>
+
+export const AppView = ({
+  customTheme,
+  loadingProps,
+  defaultLoadingMessage,
+  initialRouteName,
+  isLoading,
+  onNavigatorReady,
+  onNavigatorStateChange,
+  onError,
+}: AppViewProps) =>
+  isLoading ? (
+    <DefaultLoading {...loadingProps} message={defaultLoadingMessage} />
+  ) : (
+    <ThemeProvider theme={customTheme}>
+      <ErrorBoundary
+        FallbackComponent={ErrorBoundaryFallback}
+        onError={onError}
+      >
+        <RootNavigator
+          initialRouteName={initialRouteName}
+          onReady={onNavigatorReady}
+          onStateChange={onNavigatorStateChange}
+        />
+      </ErrorBoundary>
+    </ThemeProvider>
+  )