From 76edbea29508284147c21fc47f391de14e5015ec Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Wed, 6 Nov 2024 16:58:53 -0700
Subject: [PATCH] task: [View Institution profile] Show page-level alert for
 API error instead of 500 page

---
 .../Filing/ViewInstitutionProfile/index.tsx   | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/pages/Filing/ViewInstitutionProfile/index.tsx b/src/pages/Filing/ViewInstitutionProfile/index.tsx
index 8c2cb341..659fa520 100644
--- a/src/pages/Filing/ViewInstitutionProfile/index.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/index.tsx
@@ -1,13 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchInstitutionDetails } from 'api/requests';
 import useSblAuth from 'api/useSblAuth';
+import CommonLinks from 'components/CommonLinks';
 import CrumbTrail from 'components/CrumbTrail';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import { Link } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
+import { Alert } from 'design-system-react';
 import { useParams } from 'react-router-dom';
-import { Error500 } from '../../Error/Error500';
 import { AffiliateInformation } from './AffiliateInformation';
 import { FinancialInstitutionDetails } from './FinancialInstitutionDetails';
 import { IdentifyingInformation } from './IdentifyingInformation';
@@ -23,10 +24,25 @@ function InstitutionDetails(): JSX.Element | null {
   );
 
   if (isLoading) return <LoadingContent />;
-  if (isError)
-    return (
-      <Error500 error={{ message: 'Unable to fetch institution details.' }} />
-    );
+
+  const errorMessage = 'A problem occurred when trying to load your profile';
+
+  const content = isError ? (
+    <Alert status='error' message={errorMessage}>
+      Try again in a few minutes. If this issues persists,{' '}
+      <CommonLinks.EmailSupportStaff subject={`[Error] ${errorMessage}`} />.
+    </Alert>
+  ) : (
+    <>
+      <FinancialInstitutionDetails data={data} />
+      <IdentifyingInformation data={data} />
+      <AffiliateInformation data={data} />
+      {/* TODO: include history of changes after MVP
+          https://github.com/cfpb/sbl-project/issues/39
+        <ChangeHistory /> 
+        */}
+    </>
+  );
 
   return (
     <main id='main'>
@@ -39,13 +55,7 @@ function InstitutionDetails(): JSX.Element | null {
         <FormHeaderWrapper>
           <PageIntro />
         </FormHeaderWrapper>
-        <FinancialInstitutionDetails data={data} />
-        <IdentifyingInformation data={data} />
-        <AffiliateInformation data={data} />
-        {/* TODO: include history of changes after MVP
-          https://github.com/cfpb/sbl-project/issues/39
-        <ChangeHistory /> 
-        */}
+        {content}
       </FormWrapper>
     </main>
   );