VACMS - 19549 19800 conditional render services select, and loading indicator until CCP services loaded

src/applications/facility-locator/api/LocatorApi.js

@@ -133,7 +133,12 @@ class LocatorApi {
       fetch(url, api.settings)
         .then(res => res.json())
         .then(
-          data => resolve(data.data.map(specialty => specialty.attributes)),
+          data => {
+            if (data.errors?.length) {
+              return reject(data.errors[0]);
+            }
+            return resolve(data.data.map(specialty => specialty.attributes));
+          },
           error => reject(error),
         );
     });

src/applications/facility-locator/components/PpmsServiceError.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setFocus } from '../utils/helpers';
+
+function PpmsServiceError({ currentQuery }) {
+  const shownAlert = useRef(null);
+  useEffect(
+    () => {
+      if (
+        shownAlert.current &&
+        currentQuery?.fetchSvcsError &&
+        !shownAlert.current.hasAttribute('tabindex')
+      ) {
+        setTimeout(() => {
+          // We need the timeout because the alert is rendered after the error is set
+          // and we need to wait for the alert to be rendered before setting focus
+          // Also, the required field (facilityType) steals focus immediately no matter how it is set
+          setFocus(shownAlert.current);
+        }, 50);
+      }
+    },
+    [shownAlert, currentQuery],
+  );
+  if (currentQuery?.fetchSvcsError) {
+    return (
+      <va-alert
+        status="error"
+        class="vads-u-margin-bottom--4"
+        id="fetch-ppms-services-error"
+        ref={shownAlert}
+      >
+        <h2 slot="headline">We’ve run into a problem</h2>
+        <p className="vads-u-margin-y--0">
+          Community provider searches aren’t working right now. Try again later.
+        </p>
+      </va-alert>
+    );
+  }
+  return null;
+}
+
+PpmsServiceError.propTypes = {
+  currentQuery: PropTypes.object,
+};
+
+const mapStateToProps = state => {
+  return {
+    currentQuery: state.searchQuery,
+  };
+};
+
+export default connect(mapStateToProps)(PpmsServiceError);

src/applications/facility-locator/components/SearchControls.jsx

@@ -8,7 +8,6 @@
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import {
   healthServices,
-  benefitsServices,
   urgentCareServices,
   facilityTypesOptions,
   emergencyCareServices,
@@ -18,6 +17,7 @@
 import ServiceTypeAhead from './ServiceTypeAhead';
 import { setFocus } from '../utils/helpers';
 import { SearchControlsTypes } from '../types';
+import ServicesLoadingOrShow from './ServicesLoadingOrShow';
 
 const SearchControls = props => {
   const {
@@ -56,6 +56,8 @@
     onChange({
       facilityType: e.target.value,
       serviceType: null,
+      // Since the facility type may cause an error (PPMS), reset it if the type is changed
+      fetchSvcsError: null,
     });
   };
 
@@ -167,7 +169,7 @@
               <span aria-live="assertive">Finding your location...</span>
             </div>
           ) : (
             <button
               onClick={handleGeolocationButtonClick}
               type="button"
               className="use-my-location-link"
@@ -195,7 +197,7 @@
             value={searchString}
           />
           {searchString?.length > 0 && (
             <button
               aria-label="Clear your zip code or city, state"
               type="button"
               id="clear-input"
@@ -277,21 +279,20 @@
       case LocationType.EMERGENCY_CARE:
         services = emergencyCareServices;
         break;
-      case LocationType.BENEFITS:
-        services = benefitsServices;
-        break;
       case LocationType.CC_PROVIDER:
         return (
-          <div id="service-typeahead-container" className="typeahead">
-            <ServiceTypeAhead
-              handleServiceTypeChange={handleServiceTypeChange}
-              initialSelectedServiceType={serviceType}
-              showError={showError}
-            />
-          </div>
+          <ServicesLoadingOrShow serviceType="ppms_services">
+            <div id="service-typeahead-container" className="typeahead">
+              <ServiceTypeAhead
+                handleServiceTypeChange={handleServiceTypeChange}
+                initialSelectedServiceType={serviceType}
+                showError={showError}
+              />
+            </div>
+          </ServicesLoadingOrShow>
         );
       default:
-        services = {};
+        return null;
     }
 
     // Create option elements for each VA service type.

src/applications/facility-locator/components/ServiceTypeAhead.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Downshift from 'downshift';
 import classNames from 'classnames';
-import { getProviderSpecialties } from '../actions';
 import MessagePromptDiv from './MessagePromptDiv';
 
 const MIN_SEARCH_CHARS = 2;
@@ -23,13 +22,21 @@ class ServiceTypeAhead extends Component {
     this.getServices();
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      !prevProps.currentQuery.specialties &&
+      this.state.services.length === 0
+    ) {
+      this.getServices();
+    }
+  }
+
   getServices = async () => {
-    const services = await this.props.getProviderSpecialties();
     this.setState({
-      services,
+      services: this.props.currentQuery?.fetchSvcsRawData || [],
       defaultSelectedItem:
         this.props.initialSelectedServiceType &&
-        services.find(
+        this.props.currentQuery?.fetchSvcsRawData?.find(
           ({ specialtyCode }) =>
             specialtyCode === this.props.initialSelectedServiceType,
         ),
@@ -67,7 +74,7 @@ class ServiceTypeAhead extends Component {
   };
 
   matchingServices = inputValue => {
-    if (inputValue) {
+    if (inputValue && this.state.services?.length) {
       return this.state.services.filter(specialty =>
         this.shouldShow(inputValue, specialty),
       );
@@ -134,7 +141,10 @@ class ServiceTypeAhead extends Component {
   };
 
   render() {
-    const { defaultSelectedItem } = this.state;
+    const { defaultSelectedItem, services } = this.state;
+    if (!services) {
+      return null;
+    }
     const { showError, currentQuery, handleServiceTypeChange } = this.props;
     return (
       <Downshift
@@ -214,14 +224,14 @@ class ServiceTypeAhead extends Component {
 }
 
 ServiceTypeAhead.propTypes = {
-  getProviderSpecialties: PropTypes.func.isRequired,
-  initialSelectedServiceType: PropTypes.string,
   handleServiceTypeChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
+  currentQuery: PropTypes.object,
+  initialSelectedServiceType: PropTypes.string,
   showError: PropTypes.bool,
+  onBlur: PropTypes.func,
 };
 
-const mapDispatch = { getProviderSpecialties };
+const mapDispatch = {};
 
 const mapStateToProps = state => {
   return {

src/applications/facility-locator/components/ServicesLoadingOrShow.jsx

@@ -0,0 +1,66 @@
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import { getProviderSpecialties } from '../actions';
+
+function ServicesLoadingOrShow({
+  children,
+  serviceType = '',
+  currentQuery,
+  ...dispatchProps
+}) {
+  const [loadingMessage, setLoadingMessage] = useState('Loading services');
+  useEffect(
+    () => {
+      let ignore = false;
+      if (ignore) return;
+      switch (serviceType) {
+        case 'ppms_services':
+          setLoadingMessage('Loading community provider services');
+          dispatchProps.getProviderSpecialties();
+          break;
+        case 'vamc_services':
+          setLoadingMessage('Loading VAMC services');
+          break;
+        default:
+          break;
+      }
+      // eslint-disable-next-line consistent-return
+      return () => {
+        ignore = true;
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [serviceType],
+  );
+  if (currentQuery.fetchSvcsInProgress) {
+    return (
+      <VaLoadingIndicator
+        id="service-type-loading"
+        message={loadingMessage}
+        className="vads-u-margin-bottom--2"
+      />
+    );
+  }
+  return children;
+}
+
+ServicesLoadingOrShow.propTypes = {
+  children: PropTypes.node,
+  currentQuery: PropTypes.object,
+  serviceType: PropTypes.string,
+};
+
+const mapDispatch = { getProviderSpecialties };
+
+const mapStateToProps = state => {
+  return {
+    currentQuery: state.searchQuery,
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatch,
+)(ServicesLoadingOrShow);

src/applications/facility-locator/containers/FacilitiesMap.jsx

@@ -50,6 +50,7 @@
 import Alert from '../components/Alert';
 import ControlResultsHolder from '../components/ControlResultsHolder';
 import EmergencyCareAlert from '../components/EmergencyCareAlert';
+import PpmsServiceError from '../components/PpmsServiceError';
 
 let lastZoom = 3;
 
@@ -447,12 +448,14 @@
             description="We’re sorry. Searches for non-VA facilities such as community providers and urgent care are currently unavailable. We’re working to fix this. Please check back soon."
           />
         )}
-        {/* a HOC that either returns a div or fragment */}
+        {/* Listens for the query error. If present it displays */}
+        <PpmsServiceError />
         <div
           className={
             isSmallDesktop ? 'desktop-vertical-and-map-holder' : undefined
           }
         >
+          {/* a HOC that either returns a div or fragment */}
           <ControlResultsHolder isSmallDesktop={isSmallDesktop}>
             <SearchControls
               geolocateUser={props.geolocateUser}
@@ -656,7 +659,7 @@
       }
       return () => {
         if (mapboxContainerRef.current) {
           resizeObserver.unobserve(mapboxContainerRef.current);
         }
       };
     },
@@ -692,7 +695,7 @@
     () => {
       searchCurrentArea();
     },
     [props.currentQuery.searchArea],
   );
 
   useEffect(() => {
@@ -705,7 +708,7 @@
     () => {
       handleSearchOnQueryChange();
     },
     [props.currentQuery.id],
   );
 
   useEffect(
@@ -713,7 +716,7 @@
       if (!map) return;
       renderMarkers(props.results);
     },
     [props.results, map],
   );
 
   useEffect(
@@ -729,7 +732,7 @@
     () => {
       handleMapOnNoResultsFound();
     },
     [props.currentQuery.searchCoords, props.results],
   );
 
   useEffect(

src/applications/facility-locator/reducers/searchQuery.js

@@ -95,14 +95,17 @@ export const SearchQueryReducer = (state = INITIAL_STATE, action) => {
     case FETCH_SPECIALTIES:
       return {
         ...state,
-        error: false,
+        fetchSvcsError: null,
         fetchSvcsInProgress: true,
+        specialties: {},
+        fetchSvcsRawData: [],
       };
     case FETCH_SPECIALTIES_DONE:
       return {
         ...state,
-        error: false,
+        fetchSvcsError: null,
         fetchSvcsInProgress: false,
+        fetchSvcsRawData: action.data,
         specialties: action.data
           ? action.data.reduce((acc, cur) => {
               acc[cur.specialtyCode] = cur.name;
@@ -113,8 +116,10 @@ export const SearchQueryReducer = (state = INITIAL_STATE, action) => {
     case FETCH_SPECIALTIES_FAILED:
       return {
         ...state,
-        error: true,
         fetchSvcsInProgress: false,
+        fetchSvcsError: action.error || true,
+        facilityType: '', // resets facility type to the Choose a facility
+        isValid: true,
       };
     case SEARCH_FAILED:
       return {

src/applications/facility-locator/sass/facility-locator.scss

@@ -156,7 +156,7 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
 
   #search-results-title {
     width: calc(100% - 8px);
-    margin-left: 4px;
+    margin: 4px;
   }
 
   .map-and-message-container {
@@ -329,7 +329,6 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
 
       #facility-search {
         margin-top: 24 px;
-
         @media screen and (min-width: $small-desktop-screen) {
           width: 100%;
           max-width: none;

src/applications/facility-locator/tests/e2e/errorMessages.cypress.spec.js

@@ -21,7 +21,7 @@
     cy.axeCheck();
   });
 
   it('shows error message in location field on invalid search', () => {
     cy.get('#facility-search').click({ waitForAnimations: true });
     cy.get('.usa-input-error-message').contains(
       'Please fill in a zip code or city, state.',
@@ -29,7 +29,7 @@
     cy.get('#street-city-state-zip').should('be.focused');
   });
 
   it('shows error message on leaving location field empty', () => {
     cy.get('#street-city-state-zip').focus();
     cy.get('#facility-type-dropdown')
       .shadow()
@@ -42,7 +42,7 @@
     cy.get('.usa-input-error-message').should('not.exist');
   });
 
   it('shows error message when leaving facility type field empty', () => {
     cy.get('#street-city-state-zip').type('Austin, TX');
     cy.get('#facility-type-dropdown')
       .shadow()
@@ -130,4 +130,17 @@
     );
     cy.get('#service-type-ahead-input').should('be.empty');
   });
+  it('shows error message for Community Providers when 500 error is returned', () => {
+    cy.intercept('GET', '/facilities_api/v2/ccp/specialties', {
+      statusCode: 500,
+      error: 'Internal Server Error',
+    }).as('mockServices');
+    cy.get('#street-city-state-zip').type('Austin, TX');
+    cy.get('#facility-type-dropdown')
+      .shadow()
+      .find('select')
+      .select('Community providers (in VA’s network)');
+    cy.get('#fetch-ppms-services-error').should('exist');
+    cy.get('#fetch-ppms-services-error').focused();
+  });
 });

src/applications/facility-locator/tests/e2e/facilitySearch.cypress.spec.js

@@ -63,29 +63,23 @@ Cypress.Commands.add('verifyOptions', () => {
     .shadow()
     .find('select')
     .select('Vet Centers');
-  cy.get('.service-type-dropdown-container')
-    .find('select')
-    .should('not.have', 'disabled');
+
   cy.get('#facility-type-dropdown')
     .shadow()
     .find('select')
     .select('VA cemeteries');
-  cy.get('.service-type-dropdown-container')
-    .find('select')
-    .should('not.have', 'disabled');
+
   cy.get('#facility-type-dropdown')
     .shadow()
     .find('select')
     .select('VA benefits');
-  cy.get('.service-type-dropdown-container') // remember to remove when we allow selection again for VA Benefits
-    .find('select')
-    .should('have.attr', 'disabled');
 
   // CCP care have services available
   cy.get('#facility-type-dropdown')
     .shadow()
     .find('select')
     .select('Community providers (in VA’s network)');
+  cy.get('#service-type-loading').should('exist');
   cy.get('#service-typeahead').should('not.have.attr', 'disabled');
 
   // CCP pharmacies dont have services available