bug/9395-ProfileScreenErrorState (#9433)

Co-authored-by: Jon Bindbeutel <[email protected]>
department-of-veterans-affairs · Aug 26, 2024 · eb38d19 · eb38d19
1 parent 0f3235e
commit eb38d19
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 52 deletions.
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ProfileScreen.test.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ProfileScreen.test.tsx
@@ -83,13 +83,15 @@ context('ProfileScreen', () => {
   })
 
   describe('when common error occurs', () => {
-    it('should render error component', async () => {
+    it('renders error message', async () => {
       when(api.get as jest.Mock)
         .calledWith('/v0/military-service-history')
         .mockRejectedValue({ networkError: true } as api.APIError)
       initializeTestInstance()
 
-      await waitFor(() => expect(screen.getByText("The app can't be loaded.")).toBeTruthy())
+      await waitFor(() =>
+        expect(screen.getByText('We can’t show all your information right now. Check back later.')).toBeTruthy(),
+      )
     })
   })
 })
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ProfileScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ProfileScreen.tsx
@@ -6,45 +6,40 @@ import { StackScreenProps } from '@react-navigation/stack'
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { useServiceHistory } from 'api/militaryService'
 import { usePersonalInformation } from 'api/personalInformation/getPersonalInformation'
-import { Box, ChildTemplate, ErrorComponent, LargeNavButton, LoadingComponent, NameTag, TextView } from 'components'
+import {
+  Box,
+  CategoryLandingAlert,
+  ChildTemplate,
+  ErrorComponent,
+  LargeNavButton,
+  LoadingComponent,
+  NameTag,
+  TextView,
+} from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { HomeStackParamList } from 'screens/HomeScreen/HomeStackScreens'
-import { ScreenIDTypesConstants } from 'store/api/types'
-import { useError, useRouteNavigation, useTheme } from 'utils/hooks'
+import { DowntimeFeatureTypeConstants, ScreenIDTypesConstants } from 'store/api/types'
+import { useDowntime, useRouteNavigation, useTheme } from 'utils/hooks'
 
 type ProfileScreenProps = StackScreenProps<HomeStackParamList, 'Profile'>
 
 function ProfileScreen({ navigation }: ProfileScreenProps) {
+  const theme = useTheme()
+  const navigateTo = useRouteNavigation()
+  const { t } = useTranslation(NAMESPACE.COMMON)
+
   const {
     data: userAuthorizedServices,
     isLoading: loadingUserAuthorizedServices,
     error: getUserAuthorizedServicesError,
     refetch: refetchUserAuthorizedServices,
   } = useAuthorizedServices()
-
-  const {
-    isLoading: loadingServiceHistory,
-    error: serviceHistoryError,
-    refetch: refetchServiceHistory,
-  } = useServiceHistory()
-  const navigateTo = useRouteNavigation()
-  const theme = useTheme()
-  const { t } = useTranslation(NAMESPACE.COMMON)
   const { data: personalInfo } = usePersonalInformation()
+  const { isLoading: loadingServiceHistory, isError: serviceHistoryError } = useServiceHistory()
 
-  /**
-   * Function used on error to reload the data for this page. This combines all calls necessary to load the page rather
-   * than checking the needsDataLoad flag because if something went wrong we assume we want to reload all of the necessary data
-   */
-  const getInfoTryAgain = (): void => {
-    refetchUserAuthorizedServices()
-    if (userAuthorizedServices?.militaryServiceHistory && serviceHistoryError) {
-      refetchServiceHistory()
-    }
-  }
+  const serviceHistoryInDowntime = useDowntime(DowntimeFeatureTypeConstants.militaryServiceHistory)
 
   const loadingCheck = loadingServiceHistory || loadingUserAuthorizedServices
-  const errorCheck = useError(ScreenIDTypesConstants.PROFILE_SCREEN_ID) || serviceHistoryError
 
   const displayName = !!personalInfo?.fullName && (
     <Box>
@@ -77,37 +72,26 @@ function ProfileScreen({ navigation }: ProfileScreenProps) {
           screenID={ScreenIDTypesConstants.PROFILE_SCREEN_ID}
           error={getUserAuthorizedServicesError}
         />
-      ) : errorCheck ? (
-        <Box>
-          <ErrorComponent
-            onTryAgain={getInfoTryAgain}
-            screenID={ScreenIDTypesConstants.PROFILE_SCREEN_ID}
-            error={serviceHistoryError}
-          />
-          <Box mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
-            <LargeNavButton title={t('settings.title')} onPress={() => navigateTo('Settings')} />
-          </Box>
-        </Box>
       ) : (
         <>
           {displayName}
           <NameTag />
-          <Box mb={theme.dimensions.standardMarginBetween}>
-            {userAuthorizedServices?.userProfileUpdate && (
-              <>
-                <LargeNavButton
-                  title={t('personalInformation.title')}
-                  onPress={() => navigateTo('PersonalInformation')}
-                />
-                <LargeNavButton
-                  title={t('contactInformation.title')}
-                  onPress={() => navigateTo('ContactInformation')}
-                />
-              </>
-            )}
-            <LargeNavButton title={t('militaryInformation.title')} onPress={() => navigateTo('MilitaryInformation')} />
-            <LargeNavButton title={t('settings.title')} onPress={() => navigateTo('Settings')} />
-          </Box>
+          {userAuthorizedServices?.userProfileUpdate && (
+            <>
+              <LargeNavButton
+                title={t('personalInformation.title')}
+                onPress={() => navigateTo('PersonalInformation')}
+              />
+              <LargeNavButton title={t('contactInformation.title')} onPress={() => navigateTo('ContactInformation')} />
+            </>
+          )}
+          <LargeNavButton title={t('militaryInformation.title')} onPress={() => navigateTo('MilitaryInformation')} />
+          <LargeNavButton title={t('settings.title')} onPress={() => navigateTo('Settings')} />
+          {(serviceHistoryError || serviceHistoryInDowntime) && (
+            <Box mx={theme.dimensions.condensedMarginBetween}>
+              <CategoryLandingAlert text={t('aboutYou.error.cantShowAllInfo')} isError={serviceHistoryError} />
+            </Box>
+          )}
         </>
       )}
     </ChildTemplate>