feature/8898-UpdateClaimPhaseComponent (#9083)

Co-authored-by: Rachael Bontrager <[email protected]>

VAMobile/src/api/types/ClaimsAndAppealsData.ts

@@ -472,6 +472,7 @@ export type ClaimAttributesData = {
   currentPhaseBack: boolean
   requestedDecision: boolean
   claimType: string
+  claimTypeCode: string
   updatedAt: string
   contentionList: Array<string>
   vaRepresentative: string

VAMobile/src/constants/claims.ts

@@ -8,4 +8,44 @@ export const ClaimTypeConstants: {
 
 export type ClaimType = 'ACTIVE' | 'CLOSED'
 
+// These are claim type codes for Disability Compensation claims. Claim type codes listed here
+// are used in isDisabilityCompensationClaim() to show the 8 claim phase steps instead of 5.
+export const DISABILITY_COMPENSATION_CLAIM_TYPE_CODES = [
+  '010INITMORE8',
+  '010LCMPPIDES',
+  '010LCOMP',
+  '010LCOMPBDD',
+  '010LCOMPD2D',
+  '010LCOMPIDES',
+  '010NADIDES8',
+  '020BDDNO',
+  '020CLMINC',
+  '020EPDSUPP',
+  '020IDESRRNAD',
+  '020NADIDESNO',
+  '020NEW',
+  '020NEWIDES',
+  '020NEWPMC',
+  '020NHPNH10',
+  '020NI',
+  '020PNI',
+  '020PREDSUPP',
+  '020RCOMP',
+  '020RI',
+  '020RN',
+  '020RRNADIDES',
+  '020RSCDTH',
+  '020RSCDTHPMC',
+  '020SD2D',
+  '020SMB',
+  '020SUPP',
+  '110INITLESS8',
+  '110LCMP7IDES',
+  '110LCOMP7',
+  '110LCOMP7BDD',
+  '110LCOMPD2D',
+  '110LCOMPIDES',
+  '110NADIDES7',
+]
+
 export const MAX_NUM_PHOTOS = 10

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

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ScrollView } from 'react-native'
 
 import { useFocusEffect } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
@@ -42,6 +43,7 @@ type ClaimDetailsScreenProps = StackScreenProps<BenefitsStackParamList, 'ClaimDe
 function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
   const theme = useTheme()
   const { t } = useTranslation(NAMESPACE.COMMON)
+  const scrollViewRef = useRef<ScrollView>(null)
   const navigateTo = useRouteNavigation()
   const controlLabels = [
     t('claimDetails.status'),
@@ -207,6 +209,7 @@ function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
       backLabel={backLabel}
       backLabelOnPress={navigation.goBack}
       title={t('claimDetails.title')}
+      scrollViewProps={{ scrollViewRef }}
       testID="ClaimDetailsScreen">
       {loadingClaim ? (
         <LoadingComponent text={t('claimInformation.loading')} />
@@ -234,7 +237,9 @@ function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
             </Box>
           </Box>
           <Box mt={theme.dimensions.condensedMarginBetween}>
-            {claim && selectedTab === 0 && <ClaimStatus claim={claim || ({} as ClaimData)} claimType={claimType} />}
+            {claim && selectedTab === 0 && (
+              <ClaimStatus claim={claim || ({} as ClaimData)} claimType={claimType} scrollViewRef={scrollViewRef} />
+            )}
             {claim && selectedTab === 1 && !featureEnabled('claimPhaseExpansion') && <ClaimDetails claim={claim} />}
             {claim && selectedTab === 1 && featureEnabled('claimPhaseExpansion') && <ClaimFiles claim={claim} />}
           </Box>

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

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { RefObject } from 'react'
+import { ScrollView } from 'react-native'
 
 import { fireEvent, screen } from '@testing-library/react-native'
 
@@ -27,6 +28,7 @@ context('ClaimStatus', () => {
     const props = mockNavProps({
       claim: { ...claim, attributes: { ...claim.attributes, maxEstDate: maxEstDate } },
       claimType,
+      scrollViewRef: {} as RefObject<ScrollView>,
     })
     render(<ClaimStatus {...props} />)
   }
@@ -37,14 +39,14 @@ context('ClaimStatus', () => {
   })
 
   it('Renders ClaimStatus', () => {
-    expect(screen.getAllByText('You have 2 file requests from VA')).toBeTruthy()
-    expect(screen.getByTestId('Step 1 of 5. completed. Claim received June 6, 2019')).toBeTruthy()
-    expect(screen.getByTestId('Step 2 of 5. completed. Initial review June 6, 2019')).toBeTruthy()
-    expect(
-      screen.getByTestId('Step 3 of 5. current. Evidence gathering, review, and decision July 16, 2020'),
-    ).toBeTruthy()
-    expect(screen.getByTestId('Step 4 of 5.  Preparation for notification')).toBeTruthy()
-    expect(screen.getByTestId('Step 5 of 5.  Complete')).toBeTruthy()
+    expect(screen.getByLabelText('Step 1. Claim received. Complete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 2. Initial review. Complete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 3. Evidence gathering. Current step. Step 1 through 2 complete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 4. Evidence review. Incomplete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 5. Rating. Incomplete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 6. Preparing decision letter. Incomplete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 7. Final review. Incomplete.')).toBeTruthy()
+    expect(screen.getByLabelText('Step 8. Claim decided. Incomplete.')).toBeTruthy()
     expect(screen.getByText('Why does VA sometimes combine claims?')).toBeTruthy()
     expect(screen.getByText("What should I do if I disagree with VA's decision on my disability claim?")).toBeTruthy()
   })

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

@@ -1,5 +1,6 @@
-import React, { useRef } from 'react'
+import React, { RefObject, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ScrollView } from 'react-native'
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
@@ -26,12 +27,14 @@ type ClaimStatusProps = {
   claim: ClaimData
   /** indicates either open or closed claim */
   claimType: ClaimType
+  /** ref to parent scrollView, used for auto scroll */
+  scrollViewRef: RefObject<ScrollView>
 }
 
 /**
  * Component for rendering the details area of a claim when selected on the ClaimDetailsScreen
  */
-function ClaimStatus({ claim, claimType }: ClaimStatusProps) {
+function ClaimStatus({ claim, claimType, scrollViewRef }: ClaimStatusProps) {
   const { t } = useTranslation(NAMESPACE.COMMON)
   const navigateTo = useRouteNavigation()
   const { data: userAuthorizedServices } = useAuthorizedServices()
@@ -81,7 +84,7 @@ function ClaimStatus({ claim, claimType }: ClaimStatusProps) {
 
       return (
         <Box>
-          {claim && <ClaimTimeline attributes={claim.attributes} claimID={claim.id} />}
+          {claim && <ClaimTimeline attributes={claim.attributes} claimID={claim.id} scrollViewRef={scrollViewRef} />}
           {false && <EstimatedDecisionDate maxEstDate={claim?.attributes?.maxEstDate} showCovidMessage={false} />}
           <Box>
             <SimpleList items={detailsFAQListItems} />

VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimPhase.test.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { RefObject } from 'react'
+import { ScrollView } from 'react-native'
 
 import { fireEvent, screen } from '@testing-library/react-native'
 
-import { context, render } from 'testUtils'
+import { context, render, when } from 'testUtils'
+import { featureEnabled } from 'utils/remoteConfig'
 
 import { claim } from '../../../claimData'
-import ClaimPhase from './ClaimPhase'
+import ClaimPhase, { ClaimPhaseProps } from './ClaimPhase'
 
 const mockNavigationSpy = jest.fn()
 jest.mock('utils/hooks', () => {
@@ -16,91 +18,70 @@ jest.mock('utils/hooks', () => {
   }
 })
 
+jest.mock('utils/remoteConfig')
+when(featureEnabled).calledWith('claimPhaseExpansion').mockReturnValue(true)
+
 context('ClaimPhase', () => {
   const initializeTestInstance = (phase: number, current: number) => {
-    const props = {
+    const props: ClaimPhaseProps = {
       phase,
-      current,
-      attributes: claim.attributes,
+      attributes: { ...claim.attributes, phase: current },
       claimID: claim.id,
+      scrollViewRef: {} as RefObject<ScrollView>,
     }
 
     render(<ClaimPhase {...props} />)
   }
 
   it('initializes correctly', () => {
     initializeTestInstance(1, 1)
-    expect(screen.getByTestId('Step 1 of 5. current. Claim received June 6, 2019')).toBeTruthy()
+    expect(screen.getByLabelText('Step 1. Claim received. Current step.')).toBeTruthy()
     expect(screen.getByRole('tab')).toBeTruthy()
   })
 
   describe('when phase is less than current', () => {
-    it('should render text details after pressing icon', () => {
+    it('renders correct label and text after press', () => {
       initializeTestInstance(1, 2)
+      expect(screen.getByLabelText('Step 1. Claim received. Complete.')).toBeTruthy()
       fireEvent.press(screen.getAllByRole('tab')[0])
-      expect(screen.getByText('Thank you. VA received your claim')).toBeTruthy()
+      expect(screen.getByText('We received your claim in our system.')).toBeTruthy()
     })
   })
 
   describe('when phase is equal to current', () => {
-    it('should render text details after pressing icon', () => {
+    it('renders correct label and text without press', () => {
       initializeTestInstance(2, 2)
-      fireEvent.press(screen.getAllByRole('tab')[0])
+      expect(screen.getByLabelText('Step 2. Initial review. Current step. Step 1 complete.')).toBeTruthy()
       expect(
         screen.getByText(
-          'Your claim has been assigned to a reviewer who is determining if additional information is needed.',
+          "We'll check your claim for basic information we need, like your name and Social Security number.\n\nIf information is missing, we'll contact you.",
         ),
       ).toBeTruthy()
     })
   })
 
-  describe('when phase is 3', () => {
-    describe('if there are files that can be uploaded', () => {
-      beforeEach(() => {
-        claim.attributes.decisionLetterSent = false
-        claim.attributes.open = true
-        claim.attributes.documentsNeeded = true
-        claim.attributes.eventsTimeline = [
-          {
-            type: 'still_need_from_you_list',
-            date: '2020-07-16',
-            status: 'NEEDED',
-            uploaded: false,
-            uploadsAllowed: true,
-          },
-          {
-            type: 'still_need_from_you_list',
-            date: '2020-07-16',
-            status: 'NEEDED',
-            uploaded: false,
-            uploadsAllowed: true,
-          },
-        ]
-        initializeTestInstance(3, 2)
-      })
-
-      it('should display the view file requests va button', () => {
-        expect(screen.getByText('You have 2 file requests from VA')).toBeTruthy()
-        expect(screen.getByRole('button', { name: 'Review file requests' })).toBeTruthy()
-        fireEvent.press(screen.getByRole('button', { name: 'Review file requests' }))
-        expect(mockNavigationSpy).toHaveBeenCalledWith('FileRequest', { claimID: '600156928' })
-      })
+  describe('when phase is equal to current with multiple steps complete', () => {
+    it('renders correct label and text without press', () => {
+      initializeTestInstance(6, 6)
+      expect(
+        screen.getByLabelText('Step 6. Preparing decision letter. Current step. Step 1 through 5 complete.'),
+      ).toBeTruthy()
+      expect(
+        screen.getByText(
+          'We’ll prepare your decision letter.\n\nIf we need more evidence or you submit more evidence, your claim will go back to Step 3.',
+        ),
+      ).toBeTruthy()
+    })
+  })
 
-      describe('when number of requests is equal to 1', () => {
-        it('should display the text "You have 1 file request from VA"', () => {
-          claim.attributes.eventsTimeline = [
-            {
-              type: 'still_need_from_you_list',
-              date: '2020-07-16',
-              status: 'NEEDED',
-              uploaded: false,
-              uploadsAllowed: true,
-            },
-          ]
-          initializeTestInstance(3, 2)
-          expect(screen.getByText('You have 1 file request from VA')).toBeTruthy()
-        })
-      })
+  describe('when phase is greater than current', () => {
+    it('renders correct label and text after press', () => {
+      initializeTestInstance(8, 7)
+      expect(screen.getByLabelText('Step 8. Claim decided. Incomplete.')).toBeTruthy()
+      fireEvent.press(screen.getAllByRole('tab')[0])
+      expect(
+        screen.getByText("You’ll be able to view and download your decision letter. We'll also mail you this letter."),
+      ).toBeTruthy()
     })
   })
 })