@proteoapp/react-native-onboarding 0.1.0

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

@@ -0,0 +1,570 @@
+import { useCallback, useRef, useState } from 'react'
+import { View } from 'react-native'
+import { Image, Platform, type LayoutRectangle } from 'react-native'
+import { Worklets } from 'react-native-worklets-core'
+import {
+  useNavigation,
+  useRoute,
+  type RouteProp,
+} from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '@shopify/restyle'
+import { runAtTargetFps, useFrameProcessor } from 'react-native-vision-camera'
+import { useResizePlugin } from 'vision-camera-resize-plugin'
+import {
+  ColorConversionCodes,
+  ContourApproximationModes,
+  MorphShapes,
+  MorphTypes,
+  ObjectType,
+  OpenCV,
+  RetrievalModes,
+} from 'react-native-fast-opencv'
+import ImageEditor from '@react-native-community/image-editor'
+import { useDebounce } from 'use-debounce'
+import {
+  BackDocumentCircleSvg,
+  DocumentCircleSvg,
+} from '../../../../assets/svgs'
+import { type RootStackParamList } from '../../../navigation'
+import { useFlowStore, useProcessStore } from '../../../store'
+import { validateDocumentPicture } from '../../../services'
+import {
+  useButton,
+  useCamera,
+  useLoading,
+  useProcessTimeline,
+  useS3,
+} from '../../../hooks'
+import { ImageType, TimelineStatus, ValidationStatus } from '../../../enums'
+import { type CustomThemeProps } from '../../../theme'
+import { ContactSupportError } from '../../../errors'
+
+type PictureValidation = {
+  status: ValidationStatus
+  statusMessage: string
+  actionMessage: string
+}
+
+export const useDocumentCameraViewModel = () => {
+  const route = useRoute<RouteProp<RootStackParamList, 'DocumentCamera'>>()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const insets = useSafeAreaInsets()
+  const containerRef = useRef<React.ComponentRef<typeof View>>(null)
+  const [containerLayout, setContainerLayout] = useState<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+  const [originalPictureUri, setOriginalPictureUri] = useState<string | null>(
+    null,
+  )
+  const [pictureValidation, setPictureValidation] =
+    useState<PictureValidation | null>(null)
+  const [pictureValidationError, setPictureValidationError] =
+    useState<Error | null>(null)
+  const [documentIsAligned, setDocumentIsAligned] = useState(false)
+  const [documentIsAlignedDebounced] = useDebounce(documentIsAligned, 300)
+  const { colors, spacing } = useTheme<CustomThemeProps>()
+  const { tenant, isSimplifiedMode, hasDigitalFile } = useProcessStore(
+    (state) => ({
+      tenant: state.tenant,
+      isSimplifiedMode: state.isSimplifiedMode,
+      hasDigitalFile: state.hasDigitalFile,
+    }),
+  )
+  const {
+    backgroundCheckExecutionId,
+    setFrontDocumentPictureUrl,
+    setBackDocumentPictureUrl,
+  } = useFlowStore((state) => ({
+    backgroundCheckExecutionId: state.backgroundCheckExecutionId,
+    facePictureUrl: state.facePictureUrl,
+    faceConfidence: state.faceConfidence,
+    frontDocumentPictureUrl: state.frontDocumentPictureUrl,
+    setFrontDocumentPictureUrl: state.setFrontDocumentPictureUrl,
+    setBackDocumentPictureUrl: state.setBackDocumentPictureUrl,
+  }))
+  const {
+    ref,
+    device,
+    hasPermission,
+    isReady,
+    isTakingPicture,
+    enablePhoto,
+    onInitialized,
+    onError,
+    takePicture,
+  } = useCamera('back')
+  const s3 = useS3(
+    route.params.side === 'front'
+      ? ImageType.FRONT_DOCUMENT
+      : ImageType.BACK_DOCUMENT,
+  )
+  const { resize } = useResizePlugin()
+  const { create: createProcessTimeline } = useProcessTimeline()
+
+  const mainImage =
+    route.params.side === 'front' ? DocumentCircleSvg : BackDocumentCircleSvg
+  const title =
+    route.params.side === 'front'
+      ? 'Foque na frente do documento'
+      : 'Foque no verso do documento'
+  const bottomSafeArea = insets.bottom + spacing.xs
+  const pictureTaken = Boolean(originalPictureUri)
+  const pictureValidationColor =
+    pictureValidation?.status === ValidationStatus.VALIDATING
+      ? colors.loading
+      : pictureValidation?.status === ValidationStatus.VALID
+        ? colors.success
+        : colors.failure
+  const isActive = isReady && !pictureTaken
+  const rectBorderColor =
+    !isActive && !pictureValidation
+      ? colors.gray
+      : pictureValidation
+        ? pictureValidationColor
+        : documentIsAlignedDebounced
+          ? colors.green
+          : colors.red
+  const rectWidth = containerLayout.width * 0.9
+  const rectHeight = containerLayout.height * 0.28
+  const rectX = (containerLayout.width - rectWidth) / 2
+  const rectY = (containerLayout.height - rectHeight) / 2
+  const rectToleranceX = rectWidth * 0.05
+  const rectToleranceY = rectHeight * 0.05
+  const rectCenterX = rectX + rectWidth / 2
+  const rectCenterY = rectY + rectHeight / 2
+  const isLoadingLayout = !rectWidth || !rectHeight
+
+  const captureButtonProps = useButton()
+  const sendButtonProps = useButton({
+    variant: 'outline',
+    mainColor: 'white',
+  })
+  const tryAgainButtonProps = useButton()
+  const loadingLayoutProps = useLoading({ isActive: isLoadingLayout })
+
+  if (!backgroundCheckExecutionId) throw new ContactSupportError('0416')
+
+  const onContainerLayout = useCallback(() => {
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      setContainerLayout({ x, y, width, height })
+    })
+  }, [])
+  const onStopped = useCallback(() => {
+    setDocumentIsAligned(false)
+  }, [])
+  const handlePictureValidation = useCallback(
+    async (pictureUri: string): Promise<void> => {
+      try {
+        const pictureBytes = await s3.prepare(pictureUri)
+
+        setPictureValidation({
+          status: ValidationStatus.VALIDATING,
+          statusMessage: 'Foto processada',
+          actionMessage: 'Enviando para validação',
+        })
+
+        const pictureUrl = await s3.upload(pictureBytes)
+
+        setPictureValidation({
+          status: ValidationStatus.VALIDATING,
+          statusMessage: 'Estamos validando o seu documento',
+          actionMessage: 'Aguarde um momento',
+        })
+
+        const data = await validateDocumentPicture({
+          tenant,
+          backgroundCheckExecutionId,
+          url: pictureUrl,
+        })
+
+        const isFailed = data.ValidationFeedback.length > 0
+        const isError = data.status === 'error'
+        const isDifferentSide = data.class.toLowerCase() !== route.params.side
+        const isSuccess = !isFailed && !isError && !isDifferentSide
+        const validationStatus = isSuccess
+          ? ValidationStatus.VALID
+          : ValidationStatus.INVALID
+        const validationStatusMessage = isSuccess
+          ? 'Foto validada com sucesso'
+          : isFailed
+            ? data.ValidationFeedback[0]!.replace(/\.$/, '')
+            : isDifferentSide
+              ? `A foto enviada não corresponde ${route.params.side === 'front' ? 'a frente' : 'ao verso'} do documento`
+              : 'Foto fora do padrão'
+        const validationActionMessage = isSuccess
+          ? 'Você será redirecionado em instantes'
+          : isDifferentSide
+            ? 'Tire a foto novamente'
+            : 'Por favor, tente novamente'
+        const timelineStatus = isSuccess
+          ? TimelineStatus.SUCCESS
+          : TimelineStatus.FAILURE
+        const timelineMessage = isSuccess
+          ? validationStatusMessage
+          : `${validationStatusMessage}. Usuário direcionado para tentar novamente`
+
+        setPictureValidation({
+          status: validationStatus,
+          statusMessage: validationStatusMessage,
+          actionMessage: validationActionMessage,
+        })
+        createProcessTimeline({
+          status: timelineStatus,
+          message: timelineMessage,
+          image: {
+            type:
+              route.params.side === 'front'
+                ? ImageType.FRONT_DOCUMENT
+                : ImageType.BACK_DOCUMENT,
+            url: pictureUrl,
+          },
+        })
+
+        if (isSuccess) {
+          route.params.side === 'front'
+            ? setFrontDocumentPictureUrl(pictureUrl)
+            : setBackDocumentPictureUrl(pictureUrl)
+
+          setTimeout(async () => {
+            if (isSimplifiedMode) {
+              if (route.params.side === 'front') {
+                return navigation.replace('DocumentCamera', { side: 'back' })
+              }
+
+              return navigation.replace('DocumentAnalysis')
+            }
+
+            return navigation.replace('DocumentReview', {
+              pictureUri,
+              side: route.params.side,
+            })
+          }, 1500)
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          setPictureValidationError(err)
+        }
+      }
+    },
+    [
+      backgroundCheckExecutionId,
+      createProcessTimeline,
+      isSimplifiedMode,
+      navigation,
+      route.params.side,
+      s3,
+      setBackDocumentPictureUrl,
+      setFrontDocumentPictureUrl,
+      tenant,
+    ],
+  )
+  const onCapturePress = useCallback(async () => {
+    const picture = await takePicture()
+
+    if (!picture) return
+
+    const originalUri = `file://${picture.path}`
+
+    setOriginalPictureUri(originalUri)
+    setPictureValidation({
+      status: ValidationStatus.VALIDATING,
+      statusMessage: 'A foto está sendo enviada',
+      actionMessage: 'Aguarde um momento',
+    })
+    createProcessTimeline({
+      status: TimelineStatus.SUCCESS,
+      message: 'Usuário posicionou o documento e realizou a captura',
+    })
+
+    const { width, height } = await new Promise<{
+      width: number
+      height: number
+    }>((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        return resolve({
+          width: picture.width,
+          height: picture.height,
+        })
+      }
+
+      Image.getSize(
+        originalUri,
+        (w, h) => resolve({ width: w, height: h }),
+        reject,
+      )
+    })
+    const scaleX = width / containerLayout.width
+    const scaleY = height / containerLayout.height
+    const centerXImage = rectCenterX * scaleX
+    const centerYImage = rectCenterY * scaleY
+    const rectHeightImage = rectHeight * scaleY
+    const squareSize = rectHeightImage * 1.5
+    const halfSquare = squareSize / 2
+    const rawCropX = centerXImage - halfSquare
+    const rawCropY = centerYImage - halfSquare
+    const cropX = Math.max(0, Math.min(rawCropX, width - squareSize))
+    const cropY = Math.max(0, Math.min(rawCropY, height - squareSize))
+    const croppedPicture = await ImageEditor.cropImage(originalUri, {
+      offset: {
+        x: Math.round(cropX),
+        y: Math.round(cropY),
+      },
+      size: {
+        width: Math.round(squareSize),
+        height: Math.round(squareSize),
+      },
+    })
+
+    await handlePictureValidation(croppedPicture.uri)
+  }, [
+    containerLayout,
+    createProcessTimeline,
+    handlePictureValidation,
+    rectCenterX,
+    rectCenterY,
+    rectHeight,
+    takePicture,
+  ])
+  const onTryAgainPress = () => {
+    setOriginalPictureUri(null)
+
+    createProcessTimeline({
+      status: TimelineStatus.INFO,
+      message: 'Usuário optou por tentar tirar a foto novamente',
+    })
+
+    setTimeout(() => {
+      setPictureValidation(null)
+
+      route.params.side === 'front'
+        ? setFrontDocumentPictureUrl(null)
+        : setBackDocumentPictureUrl(null)
+    }, 500)
+  }
+  const onAlignmentChange = Worklets.createRunOnJS((value: boolean) => {
+    setDocumentIsAligned(value)
+  })
+  const frameProcessor = useFrameProcessor(
+    (frame) => {
+      'worklet'
+
+      runAtTargetFps(5, () => {
+        if (
+          !frame ||
+          containerLayout.width === 0 ||
+          containerLayout.height === 0
+        ) {
+          onAlignmentChange(false)
+          OpenCV.clearBuffers()
+
+          return
+        }
+
+        const ratio = 500 / frame.width
+        const resizedWidth = frame.width * ratio
+        const resizedHeight = frame.height * ratio
+
+        const resized = resize(frame, {
+          dataType: 'uint8',
+          pixelFormat: 'bgr',
+          scale: {
+            width: resizedWidth,
+            height: resizedHeight,
+          },
+        })
+
+        const source = OpenCV.bufferToMat(
+          'uint8',
+          resizedHeight,
+          resizedWidth,
+          3,
+          resized,
+        )
+        const kernel = OpenCV.createObject(ObjectType.Size, 4, 4)
+        const blurKernel = OpenCV.createObject(ObjectType.Size, 7, 7)
+        const structuringElement = OpenCV.invoke(
+          'getStructuringElement',
+          MorphShapes.MORPH_RECT,
+          kernel,
+        )
+        const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors)
+
+        OpenCV.invoke(
+          'cvtColor',
+          source,
+          source,
+          ColorConversionCodes.COLOR_BGR2GRAY,
+        )
+        OpenCV.invoke('GaussianBlur', source, source, blurKernel, 0)
+        OpenCV.invoke(
+          'morphologyEx',
+          source,
+          source,
+          MorphTypes.MORPH_OPEN,
+          structuringElement,
+        )
+        OpenCV.invoke(
+          'morphologyEx',
+          source,
+          source,
+          MorphTypes.MORPH_CLOSE,
+          structuringElement,
+        )
+        OpenCV.invoke('threshold', source, source, 0, 255, 8)
+        OpenCV.invoke(
+          'findContours',
+          source,
+          contours,
+          RetrievalModes.RETR_EXTERNAL,
+          ContourApproximationModes.CHAIN_APPROX_SIMPLE,
+        )
+
+        const totalArea = resizedWidth * resizedHeight
+        const minArea =
+          Platform.OS === 'android' ? totalArea * 0.12 : totalArea * 0.14
+        const maxArea =
+          Platform.OS === 'android' ? totalArea * 0.18 : totalArea * 0.2
+        const contoursMats = OpenCV.toJSValue(contours)
+        const contoursWithArea = contoursMats.array
+          .map((_, index) => {
+            const contour = OpenCV.copyObjectFromVector(contours, index)
+            const peri = OpenCV.invoke('arcLength', contour, true)
+            const approx = OpenCV.createObject(ObjectType.PointVector)
+
+            OpenCV.invoke(
+              'approxPolyDP',
+              contour,
+              approx,
+              peri.value * 0.1,
+              true,
+            )
+
+            const points = OpenCV.toJSValue(approx)
+
+            if (points.array.length < 4 || points.array.length > 6) return
+
+            const contourArea = OpenCV.invoke('contourArea', contour)
+
+            if (contourArea.value < minArea || contourArea.value > maxArea)
+              return
+
+            const boundingRect = OpenCV.invoke('boundingRect', contour)
+            const rect = OpenCV.toJSValue(boundingRect)
+            const aspectRatio =
+              rect.width > rect.height
+                ? rect.width / rect.height
+                : rect.height / rect.width
+
+            if (aspectRatio < 1.3 || aspectRatio > 1.7) return
+
+            return {
+              points: points.array,
+              area: contourArea.value,
+            }
+          })
+          .filter((item) => !!item)
+
+        if (contoursWithArea.length === 0) {
+          onAlignmentChange(false)
+          OpenCV.clearBuffers()
+
+          return
+        }
+
+        const largestContour = contoursWithArea.reduce((prev, current) =>
+          current.area > prev.area ? current : prev,
+        )
+        const transformedPoints = largestContour.points.map((point) => ({
+          x:
+            (resizedHeight - point.y) * (containerLayout.width / resizedHeight),
+          y: (resizedWidth - point.x) * (containerLayout.height / resizedWidth),
+        }))
+        const allPointsInside = transformedPoints.every((point) => {
+          const normalizedX = (point.x - rectX) / rectWidth
+          const normalizedY = (point.y - rectY) / rectHeight
+
+          return (
+            normalizedX >= 0 &&
+            normalizedX <= 1 &&
+            normalizedY >= 0 &&
+            normalizedY <= 1
+          )
+        })
+        const centroid = transformedPoints.reduce(
+          (acc, point, index, array) => {
+            const isLast = index === array.length - 1
+            const sumX = acc.x + point.x
+            const sumY = acc.y + point.y
+
+            if (isLast) {
+              return {
+                x: sumX / array.length,
+                y: sumY / array.length,
+              }
+            }
+
+            return {
+              x: sumX,
+              y: sumY,
+            }
+          },
+          { x: 0, y: 0 },
+        )
+        const isCentered =
+          Math.abs(centroid.x - rectCenterX) <= rectToleranceX &&
+          Math.abs(centroid.y - rectCenterY) <= rectToleranceY
+        const isAligned = allPointsInside && isCentered
+
+        onAlignmentChange(isAligned)
+        OpenCV.clearBuffers()
+      })
+    },
+    [containerLayout, onAlignmentChange],
+  )
+
+  if (pictureValidationError) throw pictureValidationError
+
+  return {
+    containerRef,
+    ref,
+    device,
+    bottomSafeArea,
+    loadingLayoutProps,
+    mainImage,
+    mainImageColor: colors.white,
+    title,
+    rectBorderColor,
+    pictureValidationColor,
+    rectWidth,
+    rectHeight,
+    rectX,
+    rectY,
+    originalPictureUri,
+    pictureValidation,
+    captureButtonProps,
+    sendButtonProps,
+    tryAgainButtonProps,
+    isLoadingLayout,
+    isActive,
+    hasPermission,
+    enablePhoto,
+    showFooterButtonContainer:
+      !pictureTaken ||
+      (pictureTaken && pictureValidation?.status === ValidationStatus.INVALID),
+    captureButtonDisabled: !documentIsAlignedDebounced || isTakingPicture,
+    hasDigitalFile,
+    onContainerLayout,
+    onInitialized,
+    onStopped,
+    onError,
+    onCapturePress,
+    onTryAgainPress,
+    frameProcessor,
+  }
+}