WIP error state for api failure

src/applications/vaos/referral-appointments/ChooseDateAndTime.jsx

@@ -51,7 +51,7 @@ export const ChooseDateAndTime = props => {
       ) {
         setLoading(false);
         setFailed(true);
-        scrollAndFocus('h2');
+        scrollAndFocus('h1');
       }
     },
     [currentReferral.providerId, dispatch, providerFetchStatus, futureStatus],
@@ -71,19 +71,12 @@ export const ChooseDateAndTime = props => {
     );
   }
 
-  if (failed) {
-    return (
-      <va-alert data-testid="error" status="error">
-        <h2>We’re sorry. We’ve run into a problem</h2>
-        <p>
-          We’re having trouble getting your upcoming appointments. Please try
-          again later.
-        </p>
-      </va-alert>
-    );
-  }
   return (
-    <ReferralLayout hasEyebrow>
+    <ReferralLayout
+      hasEyebrow
+      apiFailure={failed}
+      heading="Schedule an appointment with your provider"
+    >
       <DateAndTimeContent
         provider={provider}
         currentReferral={currentReferral}

src/applications/vaos/referral-appointments/ChooseDateAndTime.unit.spec.js

@@ -141,15 +141,14 @@ describe('VAOS ChoseDateAndTime component', () => {
     sandbox.restore();
   });
   it('should fetch provider or appointments from store if it exists and not call API', async () => {
-    const screen = renderWithStoreAndRouter(
+    renderWithStoreAndRouter(
       <ChooseDateAndTime
         currentReferral={createReferral('2024-09-09', 'UUID')}
       />,
       {
         store: createTestStore(initialFullState),
       },
     );
-    expect(await screen.getByTestId('pick-heading')).to.exist;
     sandbox.assert.notCalled(getProviderByIdModule.getProviderById);
     sandbox.assert.notCalled(fetchAppointmentsModule.fetchAppointments);
   });

src/applications/vaos/referral-appointments/ConfirmReferral.jsx

@@ -6,8 +6,10 @@ import ReferralLayout from './components/ReferralLayout';
 export default function ConfirmReferral(props) {
   const { currentReferral } = props;
   return (
-    <ReferralLayout>
-      <h1>Confirm Referral for {currentReferral.CategoryOfCare}</h1>
+    <ReferralLayout
+      hasEyebrow
+      heading={`Confirm Referral for ${currentReferral.CategoryOfCare}`}
+    >
       <p>{currentReferral.UUID}</p>
       <va-button
         className="va-button-link"

src/applications/vaos/referral-appointments/ReferralsAndRequests.jsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import InfoAlert from '../components/InfoAlert';
-import BackendAppointmentServiceAlert from '../appointment-list/components/BackendAppointmentServiceAlert';
 import { setFormCurrentPage } from './redux/actions';
 import ReferralLayout from './components/ReferralLayout';
 import ReferralList from './components/ReferralList';
@@ -51,9 +50,7 @@ export default function ReferralsAndRequests() {
   }
 
   return (
-    <ReferralLayout>
-      <BackendAppointmentServiceAlert />
-      <h1>Referrals and requests</h1>
+    <ReferralLayout hasEyebrow heading="Referrals and requests">
       <p>Find your requested appointments and community care referrals.</p>
       <h2 data-testid="referrals-heading">Community care referrals</h2>
       <p data-testid="referrals-text">

src/applications/vaos/referral-appointments/ScheduleReferral.jsx

@@ -26,9 +26,11 @@ export default function ScheduleReferral(props) {
       ? '1 appointment'
       : `${currentReferral.numberOfAppointments} appointments`;
   return (
-    <ReferralLayout hasEyebrow>
+    <ReferralLayout
+      hasEyebrow
+      heading={`Referral for ${currentReferral.CategoryOfCare}`}
+    >
       <div>
-        <h1>Referral for {currentReferral.CategoryOfCare}</h1>
         <p data-testid="subtitle">
           {`Your referring VA facility approved you for ${appointmentCountString} with a community care provider. You can now schedule your appointment with a community care provider.`}
         </p>

src/applications/vaos/referral-appointments/components/DateAndTimeContent.jsx

@@ -98,9 +98,6 @@ export const DateAndTimeContent = props => {
   return (
     <>
       <div>
-        <h1 data-testid="pick-heading">
-          Schedule an appointment with your provider
-        </h1>
         <p>
           You or your referring VA facility selected to schedule an appointment
           online with this provider:

src/applications/vaos/referral-appointments/components/DateAndTimeContent.unit.spec.js

@@ -65,8 +65,6 @@ describe('VAOS Component: DateAndTimeContent', () => {
         initialState,
       },
     );
-
-    expect(screen.getByTestId('pick-heading')).to.exist;
     expect(screen.getByTestId('cal-widget')).to.exist;
   });
   it('should show error if no date selected', async () => {

src/applications/vaos/referral-appointments/components/ErrorAlert.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ErrorAlert = () => {
+  return (
+    <va-alert data-testid="error" status="error">
+      <h2>We’re sorry. We’ve run into a problem.</h2>
+      <p>
+        Something went wrong on our end. Please refresh the page and try again.
+      </p>
+    </va-alert>
+  );
+};
+
+export default ErrorAlert;

src/applications/vaos/referral-appointments/components/ReferralLayout.jsx

@@ -11,6 +11,7 @@ import ErrorBoundary from '../../components/ErrorBoundary';
 import WarningNotification from '../../components/WarningNotification';
 import { selectCurrentPage } from '../redux/selectors';
 import { routeToPreviousReferralPage } from '../flow';
+import ErrorAlert from './ErrorAlert';
 
 function BreadCrumbNav() {
   const history = useHistory();
@@ -41,8 +42,20 @@ function BreadCrumbNav() {
   );
 }
 
-export default function ReferralLayout({ children, hasEyebrow }) {
+export default function ReferralLayout({
+  children,
+  hasEyebrow,
+  apiFailure,
+  heading,
+}) {
   const location = useLocation();
+  let headingTestId = null;
+  if (heading) {
+    headingTestId = `${heading
+      .replace(/\s+/g, '-')
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '')}-heading`;
+  }
 
   return (
     <>
@@ -62,11 +75,18 @@ export default function ReferralLayout({ children, hasEyebrow }) {
         <div className="vads-l-row">
           <div className="vads-l-col--12 medium-screen:vads-l-col--8">
             {hasEyebrow && (
-              <span className="vaos-form__title vaos-u-margin-bottom--1 vads-u-font-size--sm vads-u-font-weight--normal">
-                New Appointment
-              </span>
+              <>
+                <span className="vaos-form__title vaos-u-margin-bottom--1 vads-u-font-size--sm vads-u-font-weight--normal">
+                  New Appointment
+                </span>
+                {heading && <h1 data-testid={headingTestId}>{heading}</h1>}
+              </>
+            )}
+            {apiFailure ? (
+              <ErrorAlert />
+            ) : (
+              <ErrorBoundary>{children}</ErrorBoundary>
             )}
-            <ErrorBoundary>{children}</ErrorBoundary>
             <NeedHelp />
           </div>
         </div>
@@ -76,6 +96,8 @@ export default function ReferralLayout({ children, hasEyebrow }) {
 }
 
 ReferralLayout.propTypes = {
+  apiFailure: PropTypes.bool,
   children: PropTypes.node,
   hasEyebrow: PropTypes.bool,
+  heading: PropTypes.string,
 };

src/applications/vaos/referral-appointments/components/ReferralLayout.unit.spec.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { expect } from 'chai';
+import ReferralLayout from './ReferralLayout';
+import {
+  renderWithStoreAndRouter,
+  createTestStore,
+} from '../../tests/mocks/setup';
+
+describe('VAOS Component: ReferralLayout', () => {
+  const initialFullState = {
+    featureToggles: {
+      vaOnlineSchedulingCCDirectScheduling: true,
+    },
+  };
+  it('should render the layout with the correct header and children', () => {
+    const screen = renderWithStoreAndRouter(
+      <ReferralLayout
+        hasEyebrow
+        apiFailure={false}
+        heading="A tribute to the best heading in the world"
+      >
+        <div data-testid="child">I'm a child</div>
+      </ReferralLayout>,
+      {
+        store: createTestStore(initialFullState),
+      },
+    );
+
+    expect(screen.getByTestId('child')).to.exist;
+    expect(screen.getByText('A tribute to the best heading in the world')).to
+      .exist;
+    expect(screen.getByText('New Appointment')).to.exist;
+  });
+  it('should render the error with the correct header and children', () => {
+    const screen = renderWithStoreAndRouter(
+      <ReferralLayout
+        hasEyebrow
+        apiFailure
+        heading="A tribute to the best heading in the world"
+      >
+        <div data-testid="child">I'm a child</div>
+      </ReferralLayout>,
+      {
+        store: createTestStore(initialFullState),
+      },
+    );
+
+    expect(screen.getByTestId('error')).to.exist;
+    expect(screen.queryByTestId('child')).to.not.exist;
+    expect(screen.getByText('A tribute to the best heading in the world')).to
+      .exist;
+    expect(screen.getByText('New Appointment')).to.exist;
+  });
+});

src/applications/vaos/referral-appointments/index.jsx

@@ -7,7 +7,6 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import ScheduleReferral from './ScheduleReferral';
 import ReviewAndConfirm from './ReviewAndConfirm';
 import ConfirmReferral from './ConfirmReferral';
@@ -18,6 +17,7 @@ import { useGetReferralById } from './hooks/useGetReferralById';
 import { FETCH_STATUS } from '../utils/constants';
 import FormLayout from '../new-appointment/components/FormLayout';
 import { scrollAndFocus } from '../utils/scrollAndFocus';
+import ErrorAlert from './components/ErrorAlert';
 
 export default function ReferralAppointments() {
   useManualScrollRestoration();
@@ -66,15 +66,9 @@ export default function ReferralAppointments() {
   }
 
   if (referralFetchStatus === FETCH_STATUS.failed) {
-    return (
-      <VaAlert status="error" visible>
-        <h2 slot="headline">
-          There was an error trying to get your referral data
-        </h2>
-        <p>Please try again later, or contact your VA facility for help.</p>
-      </VaAlert>
-    );
+    return <ErrorAlert />;
   }
+
   return (
     <>
       <Switch>

src/applications/vaos/services/mocks/index.js

@@ -496,6 +496,9 @@ const responses = {
     });
   },
   'GET /vaos/v2/epsApi/referralDetails/:referralId': (req, res) => {
+    if (req.params.referralId === 'error') {
+      return res.status(500).json({ error: true });
+    }
     const referrals = referralUtils.createReferrals(3, '2024-12-02');
     const singleReferral = referrals.find(
       referral => referral?.UUID === req.params.referralId,

src/applications/vaos/services/referral/index.js

@@ -9,17 +9,13 @@ export async function getPatientReferrals() {
 }
 
 export async function getPatientReferralById(referralId) {
-  try {
-    const response = await apiRequestWithUrl(
-      `/vaos/v2/epsApi/referralDetails/${referralId}`,
-      {
-        method: 'GET',
-      },
-    );
-    return response.data;
-  } catch (error) {
-    return null;
-  }
+  const response = await apiRequestWithUrl(
+    `/vaos/v2/epsApi/referralDetails/${referralId}`,
+    {
+      method: 'GET',
+    },
+  );
+  return response.data;
 }
 
 export async function getProviderById(providerId) {