No provider slots error

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

@@ -97,6 +97,8 @@
     routeToNextReferralPage(history, currentPage, currentReferral.UUID);
   };
 
+  const noSlotsAvailable = !provider.slots.length;
+
   return (
     <>
       <div>
@@ -165,51 +167,70 @@
           {provider.driveTime} ({provider.driveDistance})
         </p>
         <h2>Choose a date and time</h2>
-        <p>
-          Select an available date and time from the calendar below. Appointment
-          times are displayed in{' '}
-          {`${getTimezoneDescByFacilityId(
-            currentReferral.ReferringFacilityInfo.FacilityCode,
-          )}`}
-          .
-        </p>
+        {!noSlotsAvailable && (
+          <p>
+            Select an available date and time from the calendar below.
+            Appointment times are displayed in{' '}
+            {`${getTimezoneDescByFacilityId(
+              currentReferral.ReferringFacilityInfo.FacilityCode,
+            )}`}
+            .
+          </p>
+        )}
       </div>
-      <div data-testid="cal-widget">
-        <CalendarWidget
-          maxSelections={1}
-          availableSlots={provider.slots}
-          value={[selectedDate]}
-          id="dateTime"
-          timezone={facilityTimeZone}
-          additionalOptions={{
-            required: true,
-          }}
-          // disabled={loadingSlots}
-          disabledMessage={
-            <va-loading-indicator
-              data-testid="loadingIndicator"
-              set-focus
-              message="Finding appointment availability..."
+      {noSlotsAvailable && (
+        <va-alert
+          status="warning"
+          data-testid="no-slots-alert"
+          class="vads-u-margin-top--3"
+        >
+          <h2 slot="headline">
+            We’re sorry. We couldn’t find any open time slots.
+          </h2>
+          <p>Please call this provider to schedule an appointment</p>
+          <va-telephone contact={provider.orgPhone} />
+        </va-alert>
+      )}
+      {!noSlotsAvailable && (
+        <>
+          <div data-testid="cal-widget">
+            <CalendarWidget
+              maxSelections={1}
+              availableSlots={provider.slots}
+              value={[selectedDate]}
+              id="dateTime"
+              timezone={facilityTimeZone}
+              additionalOptions={{
+                required: true,
+              }}
+              // disabled={loadingSlots}
+              disabledMessage={
+                <va-loading-indicator
+                  data-testid="loadingIndicator"
+                  set-focus
+                  message="Finding appointment availability..."
+                />
+              }
+              onChange={onChange}
+              onNextMonth={null}
+              onPreviousMonth={null}
+              minDate={format(new Date(), 'yyyy-MM-dd')}
+              maxDate={format(latestAvailableSlot, 'yyyy-MM-dd')}
+              required
+              requiredMessage={error}
+              startMonth={format(new Date(), 'yyyy-MM')}
+              showValidation={error.length > 0}
+              showWeekends
+              overrideMaxDays
             />
-          }
-          onChange={onChange}
-          onNextMonth={null}
-          onPreviousMonth={null}
-          minDate={format(new Date(), 'yyyy-MM-dd')}
-          maxDate={format(latestAvailableSlot, 'yyyy-MM-dd')}
-          required
-          requiredMessage={error}
-          startMonth={format(new Date(), 'yyyy-MM')}
-          showValidation={error.length > 0}
-          showWeekends
-          overrideMaxDays
-        />
-      </div>
-      <FormButtons
-        onBack={() => onBack()}
-        onSubmit={() => onSubmit()}
-        loadingText="Page change in progress"
-      />
+          </div>
+          <FormButtons
+            onBack={() => onBack()}
+            onSubmit={() => onSubmit()}
+            loadingText="Page change in progress"
+          />
+        </>
+      )}
     </>
   );
 };

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

@@ -145,4 +145,17 @@ describe('VAOS Component: DateAndTimeContent', () => {
     // Routes to next page if selection exists
     expect(screen.history.push.called).to.be.true;
   });
+  it('should show error if no slots available', async () => {
+    const screen = renderWithStoreAndRouter(
+      <DateAndTimeContent
+        currentReferral={referral}
+        provider={createProviderDetails(0)}
+        appointmentsByMonth={appointmentsByMonth}
+      />,
+      {
+        initialState,
+      },
+    );
+    expect(screen.getByTestId('no-slots-alert')).to.exist;
+  });
 });

src/applications/vaos/referral-appointments/utils/provider.js

@@ -3,6 +3,23 @@ const dateFns = require('date-fns');
 const dateFnsTz = require('date-fns-tz');
 
 const providers = {
+  '0': {
+    providerName: 'Dr. Perpetually Unavailable',
+    typeOfCare: 'Physical Therapy',
+    orgName: 'Ethereal Adjunct of Deferred Care',
+    orgAddress: {
+      street1: '421 Promethean Circuit',
+      street2: 'Suite 300',
+      street3: '',
+      city: 'Portland',
+      state: 'Oregon',
+      zip: '97214',
+    },
+    orgPhone: '555-687-6736',
+    driveTime: '1 hour drive',
+    driveDistance: '100 miles',
+    location: 'Hypothetical Adjunct Node, Sublime Care Complex',
+  },
   '111': {
     providerName: 'Dr. Bones',
     typeOfCare: 'Physical Therapy',

src/applications/vaos/referral-appointments/utils/referrals.js

@@ -66,10 +66,7 @@ const createReferrals = (numberOfReferrals = 3, baseDate) => {
   const baseDateObject = new Date(year, month - 1, day);
   const referrals = [];
   const baseUUID = 'add2f0f4-a1ea-4dea-a504-a54ab57c68';
-  const providerIds = ['111', '222'];
-  const isOdd = number => {
-    return number % 2;
-  };
+  const providerIds = ['111', '222', '0'];
 
   for (let i = 0; i < numberOfReferrals; i++) {
     const startDate = addDays(baseDateObject, i);
@@ -79,7 +76,7 @@ const createReferrals = (numberOfReferrals = 3, baseDate) => {
       createReferral(
         referralDate,
         `${baseUUID}${i.toString().padStart(2, '0')}`,
-        isOdd(i) ? providerIds[0] : providerIds[1],
+        providerIds[i % providerIds.length],
       ),
     );
   }

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

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 /* eslint-disable camelcase */
 const delay = require('mocker-api/lib/delay');
 const moment = require('moment');
 // var
 const confirmedVA = require('./var/confirmed_va.json');
 const confirmedCC = require('./var/confirmed_cc.json');
@@ -352,10 +352,10 @@
               Array.isArray(requestedPeriods) &&
               requestedPeriods.length > 0
             ) {
               date = moment(requestedPeriods[0].start);
             }
           } else if (status === 'booked') {
             date = moment(appointment.attributes.start);
           }
 
           if (
@@ -415,10 +415,10 @@
     req,
     res,
   ) => {
     const start = moment(req.query.start);
     const end = moment(req.query.end);
     const slots = appointmentSlotsV2.data.filter(slot => {
       const slotStartDate = moment(slot.attributes.start);
       return slotStartDate.isBetween(start, end, '[]');
     });
     return res.json({
@@ -675,6 +675,12 @@
     if (req.params.providerId === '3') {
       return res.status(500).json({ error: true });
     }
+    // Provider 0 has no available slots
+    if (req.params.providerId === '0') {
+      return res.json({
+        data: providerUtils.createProviderDetails(0, req.params.providerId),
+      });
+    }
     return res.json({
       data: providerUtils.createProviderDetails(5, req.params.providerId),
     });