feature/9452-ClaimFileUploadEmbeddedScreens

VAMobile/src/App.tsx

@@ -24,6 +24,7 @@ import { QueryClientProvider } from '@tanstack/react-query'
 import { ThemeProvider } from 'styled-components'
 
 import queryClient from 'api/queryClient'
+import { ClaimData } from 'api/types'
 import { NavigationTabBar } from 'components'
 import SnackBar from 'components/SnackBar'
 import { CloseSnackbarOnNavigation, EnvironmentTypesConstants } from 'constants/common'
@@ -42,6 +43,8 @@ import {
   getHomeScreens,
   getPaymentsScreens,
 } from 'screens'
+import FileRequestSubtask from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestSubtask'
+import SubmitEvidenceSubtask from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SubmitEvidenceSubtask'
 import { profileAddressType } from 'screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressSummary'
 import EditAddressScreen from 'screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen'
 import BiometricsPreferenceScreen from 'screens/auth/BiometricsPreferenceScreen'
@@ -98,6 +101,13 @@ export type RootNavStackParamList = WebviewStackParams & {
   EditDirectDeposit: {
     displayTitle: string
   }
+  FileRequestSubtask: {
+    claimID: string
+    claim: ClaimData | undefined
+  }
+  SubmitEvidenceSubtask: {
+    claimID: string
+  }
   Tabs: undefined
 }
 
@@ -457,6 +467,16 @@ export function AuthedApp() {
           component={EditDirectDepositScreen}
           options={FULLSCREEN_SUBTASK_OPTIONS}
         />
+        <RootNavStack.Screen
+          name="SubmitEvidenceSubtask"
+          component={SubmitEvidenceSubtask}
+          options={FULLSCREEN_SUBTASK_OPTIONS}
+        />
+        <RootNavStack.Screen
+          name="FileRequestSubtask"
+          component={FileRequestSubtask}
+          options={FULLSCREEN_SUBTASK_OPTIONS}
+        />
         {homeScreens}
         {paymentsScreens}
         {benefitsScreens}

VAMobile/src/components/Templates/FullScreenSubtask.tsx

@@ -8,12 +8,13 @@ import { StackActions, useNavigation } from '@react-navigation/native'
 import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 import { IconProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon'
 
-import { Box, CrisisLineButton, TextView, TextViewProps, VAScrollView, WaygateWrapper } from 'components'
+import { Box, CrisisLineButton, VAScrollView, WaygateWrapper } from 'components'
 import { MenuViewActionsType } from 'components/Menu'
 import { NAMESPACE } from 'constants/namespaces'
 import { useDestructiveActionSheet, useTheme } from 'utils/hooks'
 
 import HeaderBanner, { HeaderBannerProps } from './HeaderBanner'
+import SubtaskTitle from './SubtaskTitle'
 
 /*To use this template to wrap the screen you want in <FullScreenSubtask> </FullScreenSubtask> and supply the needed props for them to display
 in the screen navigator update 'screenOptions={{ headerShown: false }}' to hide the previous navigation display for all screens in the navigator.
@@ -97,12 +98,6 @@ export const FullScreenSubtask: FC<FullScreenSubtaskProps> = ({
   const { t } = useTranslation(NAMESPACE.COMMON)
   const confirmAlert = useDestructiveActionSheet()
 
-  const titleTextProps: TextViewProps = {
-    variant: 'BitterHeading',
-    accessibilityLabel: titleA11yLabel,
-    accessibilityRole: 'header',
-  }
-
   const message = t('areYouSure')
 
   const onLeftTitleButtonPress = () => {
@@ -191,11 +186,7 @@ export const FullScreenSubtask: FC<FullScreenSubtaskProps> = ({
       <HeaderBanner {...headerProps} />
       <VAScrollView scrollViewRef={scrollViewRef} testID={testID}>
         {showCrisisLineButton && <CrisisLineButton />}
-        {title && (
-          <Box mt={titleMarginTop} mb={theme.dimensions.buttonPadding} mx={theme.dimensions.gutter}>
-            <TextView {...titleTextProps}>{title}</TextView>
-          </Box>
-        )}
+        {title && <SubtaskTitle title={title} a11yLabel={titleA11yLabel} mt={titleMarginTop} />}
         <WaygateWrapper>{children}</WaygateWrapper>
       </VAScrollView>
       <WaygateWrapper bypassAlertBox={true}>

VAMobile/src/components/Templates/MultiStepSubtask.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { createStackNavigator } from '@react-navigation/stack'
+
+import TextView from 'components/TextView'
+import { context, render, screen } from 'testUtils'
+
+import MultiStepSubtask from './MultiStepSubtask'
+
+context('MultiStepSubtask', () => {
+  type TestStackParams = {
+    TestScreen: undefined
+  }
+
+  const TestStackNavigator = createStackNavigator<TestStackParams>()
+
+  const TestScreen = () => {
+    return <TextView>This is the screen</TextView>
+  }
+
+  beforeEach(() => {
+    render(
+      <MultiStepSubtask<TestStackParams> stackNavigator={TestStackNavigator}>
+        <TestStackNavigator.Screen name="TestScreen" component={TestScreen} />
+      </MultiStepSubtask>,
+    )
+  })
+
+  it('renders child screen inside provided StackNavigator', () => {
+    expect(screen.getByText('This is the screen')).toBeTruthy()
+  })
+})

VAMobile/src/components/Templates/MultiStepSubtask.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useCallback, useContext, useState } from 'react'
+
+import { ParamListBase, useFocusEffect } from '@react-navigation/native'
+import { TransitionPresets, createStackNavigator } from '@react-navigation/stack'
+
+import { FullScreenSubtask, FullScreenSubtaskProps } from 'components'
+
+/**
+ * Hook allowing child screens to set props on parent template
+ * @param props - Props to set on FullScreenSubtask
+ */
+export const useSubtaskProps = (props: FullScreenSubtaskProps) => {
+  const { setSubtaskProps } = useContext(SubtaskContext)
+
+  useFocusEffect(
+    useCallback(() => {
+      setSubtaskProps(props)
+    }, []), // eslint-disable-line react-hooks/exhaustive-deps
+  )
+}
+
+type SubtaskContextValue = {
+  setSubtaskProps: React.Dispatch<React.SetStateAction<FullScreenSubtaskProps>>
+}
+
+export const SubtaskContext = createContext<SubtaskContextValue>({} as SubtaskContextValue)
+
+const subtaskScreenOptions = {
+  headerShown: false,
+  ...TransitionPresets.SlideFromRightIOS,
+}
+
+type MultiStepSubtaskProps<T extends ParamListBase> = FullScreenSubtaskProps & {
+  /** Child routes to render in the StackNavigator */
+  children: React.ReactNode
+  /** Stack navigator to wrap child routes */
+  stackNavigator: ReturnType<typeof createStackNavigator<T>>
+}
+
+function MultiStepSubtask<T extends ParamListBase>({ ...props }: MultiStepSubtaskProps<T>) {
+  const { children, stackNavigator } = props
+  const [subtaskProps, setSubtaskProps] = useState<FullScreenSubtaskProps>({})
+
+  return (
+    <FullScreenSubtask {...subtaskProps}>
+      <SubtaskContext.Provider value={{ setSubtaskProps }}>
+        <stackNavigator.Navigator screenOptions={subtaskScreenOptions}>{children}</stackNavigator.Navigator>
+      </SubtaskContext.Provider>
+    </FullScreenSubtask>
+  )
+}
+
+export default MultiStepSubtask

VAMobile/src/components/Templates/SubtaskTitle.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { context, render, screen } from 'testUtils'
+
+import SubtaskTitle from './SubtaskTitle'
+
+context('SubtaskTitle', () => {
+  beforeEach(() => {
+    render(<SubtaskTitle title="Hello" a11yLabel="The label" />)
+  })
+
+  it('renders title and a11yLabel', () => {
+    expect(screen.getByText('Hello')).toBeTruthy()
+    expect(screen.getByLabelText('The label')).toBeTruthy()
+  })
+})

VAMobile/src/components/Templates/SubtaskTitle.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Box, TextView } from 'components'
+import { useTheme } from 'utils/hooks'
+
+interface SubtaskTitleProps {
+  /** Title to display */
+  title: string
+  /** Accessibility label for title (optional) */
+  a11yLabel?: string
+  /** Top margin (optional, defaults to buttonPadding) */
+  mt?: number
+}
+
+/**
+ * Title for FullScreenSubtask and MultiStepSubtask templates
+ */
+const SubtaskTitle = ({ title, a11yLabel, mt }: SubtaskTitleProps) => {
+  const theme = useTheme()
+  const { buttonPadding, gutter } = theme.dimensions
+
+  return (
+    <Box mt={mt ?? buttonPadding} mb={buttonPadding} mx={gutter}>
+      <TextView variant="BitterHeading" accessibilityLabel={a11yLabel} accessibilityRole="header">
+        {title}
+      </TextView>
+    </Box>
+  )
+}
+
+export default SubtaskTitle

VAMobile/src/screens/BenefitsScreen/BenefitsScreen.tsx

@@ -9,12 +9,10 @@ import { useClaimsAndAppeals } from 'api/claimsAndAppeals'
 import { Box, CategoryLanding, CategoryLandingAlert, LargeNavButton } from 'components'
 import { CloseSnackbarOnNavigation } from 'constants/common'
 import { NAMESPACE } from 'constants/namespaces'
-import { FEATURE_LANDING_TEMPLATE_OPTIONS, FULLSCREEN_SUBTASK_OPTIONS } from 'constants/screens'
+import { FEATURE_LANDING_TEMPLATE_OPTIONS } from 'constants/screens'
 import ClaimsScreen from 'screens/BenefitsScreen/ClaimsScreen'
 import AppealDetailsScreen from 'screens/BenefitsScreen/ClaimsScreen/AppealDetailsScreen/AppealDetailsScreen'
 import ClaimDetailsScreen from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen'
-import FileRequest from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequest'
-import FileRequestDetails from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestDetails/FileRequestDetails'
 import ClaimsHistoryScreen from 'screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen'
 import DisabilityRatingsScreen from 'screens/BenefitsScreen/DisabilityRatingsScreen'
 import { LettersListScreen, LettersOverviewScreen } from 'screens/BenefitsScreen/Letters'
@@ -26,7 +24,6 @@ import { featureEnabled } from 'utils/remoteConfig'
 import { screenContentAllowed } from 'utils/waygateConfig'
 
 import { BenefitsStackParamList } from './BenefitsStackScreens'
-import SubmitEvidence from './ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SubmitEvidence'
 import ClaimLettersScreen from './ClaimsScreen/ClaimLettersScreen/ClaimLettersScreen'
 
 type BenefitsScreenProps = StackScreenProps<BenefitsStackParamList, 'Benefits'>
@@ -148,17 +145,6 @@ function BenefitsStackScreen() {
         component={DisabilityRatingsScreen}
         options={{ headerShown: false }}
       />
-      <BenefitsScreenStack.Screen name="FileRequest" component={FileRequest} options={FULLSCREEN_SUBTASK_OPTIONS} />
-      <BenefitsScreenStack.Screen
-        name="SubmitEvidence"
-        component={SubmitEvidence}
-        options={FULLSCREEN_SUBTASK_OPTIONS}
-      />
-      <BenefitsScreenStack.Screen
-        name="FileRequestDetails"
-        component={FileRequestDetails}
-        options={{ headerShown: false }}
-      />
       <BenefitsScreenStack.Screen
         name="GenericLetter"
         component={GenericLetter}

VAMobile/src/screens/BenefitsScreen/BenefitsStackScreens.tsx

@@ -1,16 +1,10 @@
 import React, { ReactNode } from 'react'
-import { ImagePickerResponse } from 'react-native-image-picker/src/types'
 
 import { createStackNavigator } from '@react-navigation/stack'
 
-import { ClaimData, ClaimEventData, LetterTypes } from 'api/types'
+import { LetterTypes } from 'api/types'
 import { ClaimType } from 'constants/claims'
 import { LARGE_PANEL_OPTIONS } from 'constants/screens'
-import AskForClaimDecision from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision'
-import SelectFile from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile'
-import UploadFile from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile'
-import TakePhotos from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos'
-import UploadOrAddPhotos from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos'
 import ConsolidatedClaimsNote from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ConsolidatedClaimsNote/ConsolidatedClaimsNote'
 import WhatDoIDoIfDisagreement from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/WhatDoIDoIfDisagreement/WhatDoIDoIfDisagreement'
 import { ScreenIDTypes } from 'store/api/types'
@@ -42,7 +36,6 @@ export type BenefitsStackParamList = {
   ClaimDetailsScreen: {
     claimID: string
     claimType: ClaimType
-    focusOnSnackbar?: boolean
   }
   ClaimsHistoryScreen: undefined
   ClaimLettersScreen: undefined
@@ -55,41 +48,6 @@ export type BenefitsStackParamList = {
   AppealDetailsScreen: {
     appealID: string
   }
-  FileRequest: {
-    claimID: string
-    claim: ClaimData | undefined
-  }
-  FileRequestDetails: {
-    claimID: string
-    request: ClaimEventData
-  }
-  AskForClaimDecision: {
-    claimID: string
-  }
-  TakePhotos: {
-    claimID: string
-    request?: ClaimEventData
-    focusOnSnackbar?: boolean
-  }
-  SelectFile: {
-    claimID: string
-    request?: ClaimEventData
-    focusOnSnackbar?: boolean
-  }
-  SubmitEvidence: {
-    claimID: string
-  }
-  UploadOrAddPhotos: {
-    claimID: string
-    firstImageResponse: ImagePickerResponse
-    request?: ClaimEventData
-  }
-  UploadFile: {
-    claimID: string
-    fileUploaded: DocumentPickerResponse
-    imageUploaded: ImagePickerResponse
-    request?: ClaimEventData
-  }
 }
 
 const BenefitsStack = createStackNavigator<BenefitsStackParamList>()
@@ -108,35 +66,5 @@ export const getBenefitsScreens = (): Array<ReactNode> => {
       component={WhatDoIDoIfDisagreement}
       options={LARGE_PANEL_OPTIONS}
     />,
-    <BenefitsStack.Screen
-      key={'AskForClaimDecision'}
-      name="AskForClaimDecision"
-      component={AskForClaimDecision}
-      options={{ headerShown: false }}
-    />,
-    <BenefitsStack.Screen
-      key={'TakePhotos'}
-      name="TakePhotos"
-      component={TakePhotos}
-      options={{ headerShown: false }}
-    />,
-    <BenefitsStack.Screen
-      key={'SelectFile'}
-      name="SelectFile"
-      component={SelectFile}
-      options={{ headerShown: false }}
-    />,
-    <BenefitsStack.Screen
-      key={'UploadOrAddPhotos'}
-      name="UploadOrAddPhotos"
-      component={UploadOrAddPhotos}
-      options={{ headerShown: false }}
-    />,
-    <BenefitsStack.Screen
-      key={'UploadFile'}
-      name="UploadFile"
-      component={UploadFile}
-      options={{ headerShown: false }}
-    />,
   ]
 }

VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx

@@ -178,12 +178,12 @@ function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
 
   const fileRequestsPress = () => {
     logAnalyticsEvent(Events.vama_claim_review(claimID, attributes.claimType, count))
-    navigateTo('FileRequest', { claimID, claim })
+    navigateTo('FileRequestSubtask', { claimID, claim })
   }
 
   const submitEvidencePress = () => {
     logAnalyticsEvent(Events.vama_claim_submit_tap(claimID, attributes.claimType))
-    navigateTo('SubmitEvidence', { claimID })
+    navigateTo('SubmitEvidenceSubtask', { claimID })
   }
 
   const getActiveClosedClaimInformationAlertOrSubmitButton = () => {