@proteoapp/react-native-onboarding 0.1.0

package/src/screens/face-auth/analysis/view.tsx

@@ -0,0 +1,31 @@
+import { FaceIdCircleSvg, FaceIdErrorSvg } from '../../../../assets/svgs'
+import { RootLayout } from '../../../layouts'
+import { DescriptionLoading, IdentificationError } from '../../../components'
+import { useFaceAuthAnalysisViewModel } from './view-model'
+
+type FaceAuthAnalysisViewProps = ReturnType<typeof useFaceAuthAnalysisViewModel>
+
+export const FaceAuthAnalysisView = ({
+  descriptionLoadingProps,
+  descriptionLoadingMessage,
+  identificationErrorProps,
+  couldNotBeIdentified,
+  onTryAgainPress,
+}: FaceAuthAnalysisViewProps) => (
+  <RootLayout>
+    {couldNotBeIdentified ? (
+      <IdentificationError
+        {...identificationErrorProps}
+        icon={FaceIdErrorSvg}
+        onTryAgainPress={onTryAgainPress}
+      />
+    ) : (
+      <DescriptionLoading
+        {...descriptionLoadingProps}
+        title="Analisando foto facial"
+        message={descriptionLoadingMessage}
+        icon={FaceIdCircleSvg}
+      />
+    )}
+  </RootLayout>
+)

package/src/screens/face-auth/camera/index.tsx

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

package/src/screens/face-auth/camera/overlay.tsx

@@ -0,0 +1,31 @@
+import { createBox } from '@shopify/restyle'
+import { FaceAuthCameraOverlaySvg } from '../../../../assets/svgs'
+import { type CustomThemeProps } from '../../../theme'
+
+type FaceAuthCameraOverlayProps = {
+  ovalCenterX: number
+  ovalCenterY: number
+  ovalRadiusX: number
+  ovalRadiusY: number
+  backgroundColor: string
+  ellipseBorderColor: string
+}
+
+const Box = createBox<CustomThemeProps>()
+
+export const FaceAuthCameraOverlay = ({
+  backgroundColor,
+  ...props
+}: FaceAuthCameraOverlayProps) => (
+  <Box flex={1}>
+    <FaceAuthCameraOverlaySvg {...props} color={backgroundColor} />
+    <Box
+      position="absolute"
+      bottom={0.1}
+      left={0}
+      right={0}
+      height={0.1}
+      style={{ backgroundColor }}
+    />
+  </Box>
+)

package/src/screens/face-auth/camera/view-model.ts

@@ -0,0 +1,462 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Platform,
+  View,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native'
+import {
+  useNavigation,
+  useRoute,
+  type RouteProp,
+} from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useTheme } from '@shopify/restyle'
+import { type Frame } from 'react-native-vision-camera'
+import {
+  type Face,
+  type FaceDetectionOptions,
+} from 'react-native-vision-camera-face-detector'
+import Geolocation from '@react-native-community/geolocation'
+import { useDebounce } from 'use-debounce'
+import { type RootStackParamList } from '../../../navigation'
+import { useFlowStore, useProcessStore } from '../../../store'
+import {
+  generateTemporaryCredentials,
+  getLocationFromUserIp,
+  startProcess,
+} from '../../../services'
+import {
+  useCamera,
+  useProcessTimeline,
+  useDescriptionLoading,
+  useLoading,
+  useRecommendedValidations,
+} from '../../../hooks'
+import { Objective, TimelineStatus } from '../../../enums'
+import { type CustomThemeProps } from '../../../theme'
+import { GeolocationPermissionDeniedError } from '../../../errors'
+
+export const useFaceAuthCameraViewModel = () => {
+  const route = useRoute<RouteProp<RootStackParamList, 'FaceAuthCamera'>>()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const [overlayAreaLayout, setOverlayAreaLayout] = useState<LayoutRectangle>({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  })
+  const [recommendedValidationsLayout, setRecommendedValidationsLayout] =
+    useState<LayoutRectangle>({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+    })
+  const [coordinates, setCoordinates] = useState<{
+    latitude: number
+    longitude: number
+  } | null>(null)
+  const [isLoading, setIsLoading] = useState(!route.params?.retry)
+  const [descriptionLoadingMessage, setDescriptionLoadingMessage] =
+    useState<string>()
+  const [isGeolocationPermissionDenied, setIsGeolocationPermissionDenied] =
+    useState(false)
+  const [faceIsAligned, setFaceIsAligned] = useState(false)
+  const [shouldCapture, setShouldCapture] = useState(false)
+  const { colors } = useTheme<CustomThemeProps>()
+  const [faceIsAlignedVisualDebounced] = useDebounce(faceIsAligned, 300)
+  const [faceIsAlignedDebounced] = useDebounce(
+    faceIsAlignedVisualDebounced,
+    800,
+  )
+  const overlayAreaRef = useRef<React.ComponentRef<typeof View>>(null)
+  const prevFaceIsAlignedDebouncedRef = useRef(false)
+  const faceDetectionOptions = useMemo<FaceDetectionOptions>(
+    () => ({
+      windowWidth: overlayAreaLayout.width,
+      windowHeight: overlayAreaLayout.height,
+      performanceMode: 'accurate',
+      landmarkMode: 'all',
+      contourMode: 'none',
+      classificationMode: 'all',
+      trackingEnabled: true,
+      autoMode: true,
+    }),
+    [overlayAreaLayout],
+  )
+  const {
+    authToken,
+    tenant,
+    backgroundCheckId,
+    document,
+    objective,
+    isSimplifiedMode,
+  } = useProcessStore((state) => ({
+    authToken: state.authToken,
+    tenant: state.tenant,
+    backgroundCheckId: state.backgroundCheckId,
+    document: state.document,
+    objective: state.objective,
+    isSimplifiedMode: state.isSimplifiedMode,
+  }))
+  const { setTemporaryCredentials, setBackgroundCheckExecutionId } =
+    useFlowStore((state) => ({
+      setTemporaryCredentials: state.setTemporaryCredentials,
+      setBackgroundCheckExecutionId: state.setBackgroundCheckExecutionId,
+    }))
+  const {
+    ref,
+    device,
+    hasPermission,
+    isReady,
+    enablePhoto,
+    onInitialized,
+    onError,
+    takePicture,
+  } = useCamera('front')
+  const { create: createProcessTimeline } = useProcessTimeline()
+  const {
+    data: location,
+    error: locationError,
+    isSuccess: isLocationGetted,
+    isError: isLocationError,
+  } = useQuery({
+    queryKey: ['location', coordinates, route.params?.retry],
+    queryFn: getLocationFromUserIp,
+    enabled: !!coordinates && !route.params?.retry,
+  })
+  const {
+    data: temporaryCredentials,
+    error: temporaryCredentialsError,
+    isSuccess: isTemporaryCredentialsGenerated,
+    isError: isTemporaryCredentialsError,
+  } = useQuery({
+    queryKey: [
+      'temporaryCredentials',
+      authToken,
+      tenant,
+      backgroundCheckId,
+      route.params?.retry,
+    ],
+    queryFn: () => {
+      setDescriptionLoadingMessage('Gerando as credenciais')
+
+      return generateTemporaryCredentials({
+        authToken,
+        tenant,
+        backgroundCheckId,
+      })
+    },
+    enabled: !route.params?.retry,
+  })
+  const {
+    mutate: startProcessMutate,
+    error: startProcessError,
+    isError: isStartProcessError,
+  } = useMutation({
+    mutationFn: startProcess,
+    onSuccess: ({ data }) => {
+      setBackgroundCheckExecutionId(data.background_check_execution_id)
+      setIsLoading(false)
+    },
+    onError: () => {
+      setIsLoading(false)
+    },
+  })
+
+  const ellipseBorderColor = !isReady
+    ? colors.gray
+    : faceIsAlignedVisualDebounced
+      ? colors.green
+      : colors.red
+  const ovalWidth = isSimplifiedMode
+    ? overlayAreaLayout.width * 0.7
+    : overlayAreaLayout.width * 0.8
+  const ovalHeight = isSimplifiedMode
+    ? overlayAreaLayout.height * 0.75
+    : overlayAreaLayout.height * 0.65
+  const ovalRadiusX = ovalWidth / 2
+  const ovalRadiusY = ovalHeight / 2
+  const ovalCenterX = overlayAreaLayout.width / 2
+  const ovalCenterY = overlayAreaLayout.height / 2
+  const ovalTop = ovalCenterY - ovalRadiusY
+  const ovalBottom = ovalCenterY + ovalRadiusY
+  const ovalLeft = ovalCenterX - ovalRadiusX
+  const ovalRight = ovalCenterX + ovalRadiusX
+  const ovalToleranceX = ovalRadiusX * 0.05
+  const ovalToleranceY = ovalRadiusY * 0.05
+  const overlayWithRecommendedValidationsHeight =
+    overlayAreaLayout.height + recommendedValidationsLayout.height
+  const overlayCompressionRatio =
+    overlayAreaLayout.height / overlayWithRecommendedValidationsHeight
+  const androidMinDistanceFactor = isSimplifiedMode ? 0.31 : 0.36
+  const androidMaxDistanceFactor = androidMinDistanceFactor * 1.05
+  const iosMinDistanceFactor = isSimplifiedMode ? 0.15 : 0.17
+  const iosMaxDistanceFactor = iosMinDistanceFactor * 1.05
+  const minDistanceFactor =
+    Platform.OS === 'android' ? androidMinDistanceFactor : iosMinDistanceFactor
+  const maxDistanceFactor =
+    Platform.OS === 'android' ? androidMaxDistanceFactor : iosMaxDistanceFactor
+  const isLoadingOverlayLayout = !ovalWidth || !ovalHeight
+
+  const descriptionLoadingProps = useDescriptionLoading({ isActive: isLoading })
+  const recommendedValidationsProps = useRecommendedValidations()
+  const loadingOverlayLayoutProps = useLoading({
+    isActive: isLoadingOverlayLayout,
+  })
+
+  const onOverlayAreaLayout = useCallback(() => {
+    overlayAreaRef.current?.measureInWindow((x, y, width, height) => {
+      setOverlayAreaLayout({ x, y, width, height })
+    })
+  }, [])
+  const onRecommendedValidationsLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      setRecommendedValidationsLayout(event.nativeEvent.layout)
+    },
+    [],
+  )
+  const transformLandmark = useCallback(
+    (landmark: { x: number; y: number }, frame: Frame) => {
+      if (Platform.OS === 'android') {
+        const offsetY = isSimplifiedMode
+          ? overlayAreaLayout.y * overlayCompressionRatio
+          : overlayAreaLayout.y
+
+        return {
+          x: landmark.x,
+          y: landmark.y - offsetY,
+        }
+      }
+
+      const scaleX = overlayAreaLayout.width / frame.height
+      const scaleY = overlayAreaLayout.height / frame.width
+      const scaledX = landmark.y * scaleX
+      const scaledY = landmark.x * scaleY
+      const offsetX = overlayAreaLayout.x * scaleX
+      const offsetY = overlayAreaLayout.y * scaleY
+
+      return {
+        x: scaledX - offsetX,
+        y: scaledY - offsetY,
+      }
+    },
+    [isSimplifiedMode, overlayAreaLayout, overlayCompressionRatio],
+  )
+  const handleFacesDetection = useCallback(
+    async (faces: Face[], frame: Frame) => {
+      const face = faces?.[0]
+
+      if (
+        !face ||
+        !frame ||
+        !face.landmarks?.LEFT_EYE ||
+        !face.landmarks?.RIGHT_EYE ||
+        !face.landmarks?.NOSE_BASE ||
+        !face.landmarks?.MOUTH_BOTTOM ||
+        overlayAreaLayout.width === 0 ||
+        overlayAreaLayout.height === 0
+      ) {
+        setFaceIsAligned(false)
+        prevFaceIsAlignedDebouncedRef.current = false
+
+        return
+      }
+
+      const rawLeftEye = face.landmarks.LEFT_EYE
+      const rawRightEye = face.landmarks.RIGHT_EYE
+      const rawNose = face.landmarks.NOSE_BASE
+      const rawMouth = face.landmarks.MOUTH_BOTTOM
+      const rawFaceTop = Math.min(rawLeftEye.y, rawRightEye.y, rawNose.y)
+      const rawFaceBottom = rawMouth.y
+      const rawFaceHeight = rawFaceBottom - rawFaceTop
+      const isDistanceGood =
+        rawFaceHeight >= frame.height * minDistanceFactor &&
+        rawFaceHeight <= frame.height * maxDistanceFactor
+
+      if (!isDistanceGood) {
+        setFaceIsAligned(false)
+        prevFaceIsAlignedDebouncedRef.current = false
+
+        return
+      }
+
+      const leftEye = transformLandmark(face.landmarks.LEFT_EYE, frame)
+      const rightEye = transformLandmark(face.landmarks.RIGHT_EYE, frame)
+      const nose = transformLandmark(face.landmarks.NOSE_BASE, frame)
+      const mouth = transformLandmark(face.landmarks.MOUTH_BOTTOM, frame)
+      const faceLeft = Math.min(leftEye.x, rightEye.x, nose.x, mouth.x)
+      const faceRight = Math.max(leftEye.x, rightEye.x, nose.x, mouth.x)
+      const faceTop = Math.min(leftEye.y, rightEye.y, nose.y, mouth.y)
+      const faceBottom = Math.max(leftEye.y, rightEye.y, nose.y, mouth.y)
+      const faceCenterX = (faceLeft + faceRight) / 2
+      const faceCenterY = (faceTop + faceBottom) / 2
+      const allPointsInside =
+        faceLeft >= ovalLeft + ovalToleranceX &&
+        faceRight <= ovalRight - ovalToleranceX &&
+        faceTop >= ovalTop + ovalToleranceY &&
+        faceBottom <= ovalBottom - ovalToleranceY
+      const isAngleGood =
+        Math.abs(face.rollAngle) < 8 && Math.abs(face.yawAngle) < 8
+      const isCentered =
+        Math.abs((faceCenterX - ovalCenterX) / ovalRadiusX) <= 0.05 &&
+        Math.abs((faceCenterY - ovalCenterY) / ovalRadiusY) <= 0.05
+      const isAligned = allPointsInside && isAngleGood && isCentered
+
+      setFaceIsAligned(isAligned)
+
+      if (faceIsAlignedDebounced && !prevFaceIsAlignedDebouncedRef.current) {
+        setShouldCapture(true)
+      }
+
+      prevFaceIsAlignedDebouncedRef.current = faceIsAlignedDebounced
+    },
+    [
+      faceIsAlignedDebounced,
+      maxDistanceFactor,
+      minDistanceFactor,
+      ovalBottom,
+      ovalCenterX,
+      ovalCenterY,
+      ovalLeft,
+      ovalRadiusX,
+      ovalRadiusY,
+      ovalRight,
+      ovalToleranceX,
+      ovalToleranceY,
+      ovalTop,
+      overlayAreaLayout,
+      transformLandmark,
+    ],
+  )
+  const capture = useCallback(async () => {
+    const picture = await takePicture()
+
+    if (!picture) return
+
+    createProcessTimeline({
+      status: TimelineStatus.SUCCESS,
+      message: 'Usuário posicionou o rosto e a captura foi realizada',
+    })
+    navigation.replace('FaceAuthAnalysis', {
+      pictureUri: `file://${picture.path}`,
+    })
+  }, [createProcessTimeline, navigation, takePicture])
+
+  useEffect(() => {
+    if (!coordinates) {
+      Geolocation.getCurrentPosition(
+        (position) => {
+          createProcessTimeline({
+            status: TimelineStatus.SUCCESS,
+            message: 'Acesso à localização permitido pelo usuário',
+          })
+          setCoordinates({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          })
+        },
+        (error) => {
+          if (error.PERMISSION_DENIED) {
+            setIsGeolocationPermissionDenied(true)
+          }
+        },
+        { timeout: 15000 },
+      )
+    }
+  }, [coordinates, createProcessTimeline])
+
+  useEffect(() => {
+    if (isTemporaryCredentialsGenerated) {
+      setTemporaryCredentials({
+        accessKeyId: temporaryCredentials.data.access_key_id,
+        secretAccessKey: temporaryCredentials.data.secret_access_key,
+        sessionToken: temporaryCredentials.data.session_token,
+        expiration: temporaryCredentials.data.expiration,
+      })
+    }
+  }, [
+    isTemporaryCredentialsGenerated,
+    setTemporaryCredentials,
+    temporaryCredentials,
+  ])
+
+  useEffect(() => {
+    if (
+      isLocationGetted &&
+      !!coordinates &&
+      !!temporaryCredentials &&
+      !route.params?.retry
+    ) {
+      setDescriptionLoadingMessage(
+        objective === Objective.ONBOARDING
+          ? 'Iniciando onboarding'
+          : 'Iniciando autenticação facial',
+      )
+      startProcessMutate({
+        authToken,
+        tenant,
+        backgroundCheckId,
+        document,
+        objective,
+        location,
+        geolocation: coordinates,
+      })
+    }
+  }, [
+    authToken,
+    backgroundCheckId,
+    coordinates,
+    document,
+    isLocationGetted,
+    location,
+    objective,
+    route.params?.retry,
+    startProcessMutate,
+    temporaryCredentials,
+    tenant,
+  ])
+
+  useEffect(() => {
+    if (shouldCapture) {
+      capture()
+    }
+  }, [shouldCapture, capture])
+
+  if (isGeolocationPermissionDenied)
+    throw new GeolocationPermissionDeniedError()
+  if (isLocationError) throw locationError
+  if (isTemporaryCredentialsError) throw temporaryCredentialsError
+  if (isStartProcessError) throw startProcessError
+
+  return {
+    descriptionLoadingProps,
+    descriptionLoadingMessage,
+    loadingOverlayLayoutProps,
+    recommendedValidationsProps,
+    device,
+    ref,
+    overlayAreaRef,
+    overlayColor: colors.secondary,
+    ellipseBorderColor,
+    ovalCenterX,
+    ovalCenterY,
+    ovalRadiusX,
+    ovalRadiusY,
+    faceDetectionOptions,
+    isLoading,
+    isLoadingOverlayLayout,
+    hasPermission,
+    isReady,
+    enablePhoto,
+    isSimplifiedMode,
+    onOverlayAreaLayout,
+    onRecommendedValidationsLayout,
+    onInitialized,
+    onError,
+    handleFacesDetection,
+  }
+}

package/src/screens/face-auth/camera/view.tsx

@@ -0,0 +1,128 @@
+import { Fragment } from 'react'
+import { StyleSheet } from 'react-native'
+import { createBox, createText } from '@shopify/restyle'
+import { Camera } from 'react-native-vision-camera-face-detector'
+import { ChecklistCircleSvg } from '../../../../assets/svgs'
+import { RootLayout } from '../../../layouts'
+import { type CustomThemeProps } from '../../../theme'
+import {
+  CenteredLoading,
+  DescriptionLoading,
+  RecommendedValidations,
+} from '../../../components'
+import { useFaceAuthCameraViewModel } from './view-model'
+import { FaceAuthCameraOverlay } from './overlay'
+
+const Box = createBox<CustomThemeProps>()
+const Text = createText<CustomThemeProps>()
+
+type FaceAuthCameraViewProps = ReturnType<typeof useFaceAuthCameraViewModel>
+
+export const FaceAuthCameraView = ({
+  descriptionLoadingProps,
+  descriptionLoadingMessage,
+  loadingOverlayLayoutProps,
+  recommendedValidationsProps,
+  device,
+  ref,
+  overlayAreaRef,
+  overlayColor,
+  ellipseBorderColor,
+  ovalCenterX,
+  ovalCenterY,
+  ovalRadiusX,
+  ovalRadiusY,
+  faceDetectionOptions,
+  isLoading,
+  isLoadingOverlayLayout,
+  hasPermission,
+  isReady,
+  enablePhoto,
+  isSimplifiedMode,
+  onOverlayAreaLayout,
+  onRecommendedValidationsLayout,
+  onInitialized,
+  onError,
+  handleFacesDetection,
+}: FaceAuthCameraViewProps) => (
+  <RootLayout>
+    {isLoading ? (
+      <DescriptionLoading
+        {...descriptionLoadingProps}
+        title="Estamos preparando tudo"
+        message={descriptionLoadingMessage}
+        icon={ChecklistCircleSvg}
+      />
+    ) : (
+      <Box flex={1}>
+        <Box ref={overlayAreaRef} flex={1} onLayout={onOverlayAreaLayout}>
+          {isLoadingOverlayLayout ? (
+            <CenteredLoading {...loadingOverlayLayoutProps} />
+          ) : (
+            <Fragment>
+              {!!device && hasPermission && (
+                <Box bg="black" style={StyleSheet.absoluteFillObject}>
+                  <Camera
+                    ref={ref}
+                    isActive={isReady}
+                    photo={enablePhoto}
+                    device={device}
+                    faceDetectionOptions={faceDetectionOptions}
+                    faceDetectionCallback={handleFacesDetection}
+                    photoQualityBalance="balanced"
+                    style={StyleSheet.absoluteFillObject}
+                    onInitialized={onInitialized}
+                    onError={onError}
+                  />
+                </Box>
+              )}
+              <Box
+                position="absolute"
+                top={ovalCenterY - ovalRadiusY}
+                left="50%"
+                pb="m"
+                zIndex={10}
+                style={{
+                  transform: [{ translateX: '-50%' }, { translateY: '-100%' }],
+                }}
+              >
+                <Text variant="subtitle">Mantenha a posição</Text>
+              </Box>
+              <FaceAuthCameraOverlay
+                ovalCenterX={ovalCenterX}
+                ovalCenterY={ovalCenterY}
+                ovalRadiusX={ovalRadiusX}
+                ovalRadiusY={ovalRadiusY}
+                backgroundColor={overlayColor}
+                ellipseBorderColor={ellipseBorderColor}
+              />
+              <Box
+                position="absolute"
+                top={ovalCenterY + ovalRadiusY}
+                left="50%"
+                pt="m"
+                zIndex={10}
+                style={{ transform: [{ translateX: '-50%' }] }}
+              >
+                <Text>Coloque o seu rosto dentro do círculo.</Text>
+              </Box>
+            </Fragment>
+          )}
+        </Box>
+        {isSimplifiedMode && (
+          <RecommendedValidations
+            {...recommendedValidationsProps}
+            mode="tip"
+            title="Antes de começar, siga estas dicas:"
+            recommendations={[
+              'Encontre um ambiente bem iluminado;',
+              'Remova acessórios como óculos, bonés ou máscaras;',
+              'Evite fundo muito escuro ou com muitas distrações.',
+            ]}
+            onLayout={onRecommendedValidationsLayout}
+          />
+        )}
+      </Box>
+    )}
+  </RootLayout>
+)

package/src/screens/face-auth/index.tsx

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

package/src/screens/face-auth/view-model.ts

@@ -0,0 +1,25 @@
+import { useNavigation } from '@react-navigation/native'
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { useTheme } from '@shopify/restyle'
+import { type RootStackParamList } from '../../navigation'
+import { useButton, useRecommendedValidations } from '../../hooks'
+import { type CustomThemeProps } from '../../theme'
+
+export const useFaceAuthViewModel = () => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme<CustomThemeProps>()
+  const startButtonProps = useButton()
+  const recommendedValidationsProps = useRecommendedValidations()
+
+  const onStartPress = () => {
+    navigation.replace('FaceAuthCamera')
+  }
+
+  return {
+    mainImageColor: colors.primary,
+    startButtonProps,
+    recommendedValidationsProps,
+    onStartPress,
+  }
+}