VACMS 19548 - orientation of map and controls for Facility Locator

config/webpack.dev.config.js

@@ -52,7 +52,7 @@ function generateWebpackDevConfig(buildOptions) {
     },
     port: buildOptions.port,
     host: buildOptions.host,
-    client: { webSocketURL },
+    client: { webSocketURL, overlay: false },
     devMiddleware: {
       publicPath: '/generated/',
       stats: {

src/applications/facility-locator/actions/mapbox/genBBoxFromAddress.js

@@ -90,6 +90,7 @@ export const genBBoxFromAddress = (query, expandedRadius = false) => {
             Math.max(featureBox[3], coordinates[1] + searchBoundingRadius),
           ];
         }
+
         const radius = radiusFromBoundingBox(
           features?.[0]?.bbox
             ? features

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/ControlResultsHolder.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ControlResultsHolder({ children, isSmallDesktop }) {
+  // If the screen is smaller than small desktop we just return the children
+  if (!isSmallDesktop) {
+    return children;
+  }
+
+  return <div id="vertical-oriented-left-controls">{children}</div>;
+}
+
+ControlResultsHolder.propTypes = {
+  children: PropTypes.node.isRequired,
+  isSmallDesktop: PropTypes.bool.isRequired,
+};
+
+export default ControlResultsHolder;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function EmergencyCareAlert({ shouldShow = false }) {
+  if (!shouldShow) {
+    return null;
+  }
+  return (
+    <va-alert
+      slim
+      full-width
+      status="info"
+      class="vads-u-margin-top--1"
+      data-testid="emergency-care-info-note"
+      id="emergency-care-info-note"
+    >
+      <strong>Note:</strong> If you think your life or health is in danger, call{' '}
+      <va-telephone contact="911" /> or go to the nearest emergency department
+      right away.
+    </va-alert>
+  );
+}
+
+EmergencyCareAlert.propTypes = {
+  shouldShow: PropTypes.bool,
+};
+
+export default EmergencyCareAlert;

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 {
@@ -31,6 +31,7 @@
 
   const [selectedServiceType, setSelectedServiceType] = useState(null);
   const locationInputFieldRef = useRef(null);
+  const facilityTypeDropdownRef = useRef(null);
 
   const onlySpaces = str => /^\s+$/.test(str);
 
@@ -55,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,
     });
   };
 
@@ -68,6 +71,7 @@
 
   const handleSubmit = e => {
     e.preventDefault();
+    e.stopPropagation();
 
     const {
       facilityType,
@@ -77,7 +81,6 @@
       searchString,
       specialties,
     } = currentQuery;
-
     let analyticsServiceType = serviceType;
 
     const updateReduxState = propName => {
@@ -120,7 +123,6 @@
       'fl-search-svc-type': analyticsServiceType,
       'fl-current-zoom-depth': zoomLevel,
     });
-
     onSubmit();
   };
 
@@ -158,7 +160,7 @@
             htmlFor="street-city-state-zip"
             id="street-city-state-zip-label"
           >
-            <span id="city-state-zip-text">City, state or postal code</span>{' '}
+            <span id="city-state-zip-text">Zip code or city, state</span>{' '}
             <span className="form-required-span">(*Required)</span>
           </label>
           {geolocationInProgress ? (
@@ -167,7 +169,7 @@
               <span aria-live="assertive">Finding your location...</span>
             </div>
           ) : (
             <button
               onClick={handleGeolocationButtonClick}
               type="button"
               className="use-my-location-link"
@@ -181,7 +183,7 @@
         {showError && (
           <span className="usa-input-error-message" role="alert">
             <span className="sr-only">Error</span>
-            Please fill in a city, state, or postal code.
+            Please fill in a zip code or city, state.
           </span>
         )}
         <div className="input-container">
@@ -193,11 +195,10 @@
             onChange={handleQueryChange}
             onBlur={handleLocationBlur}
             value={searchString}
-            title="Your location: Street, City, State or Postal code"
           />
           {searchString?.length > 0 && (
             <button
-              aria-label="Clear your city, state or postal code"
+              aria-label="Clear your zip code or city, state"
               type="button"
               id="clear-input"
               className="clear-button"
@@ -228,7 +229,6 @@
         {locationOptions[facility]}
       </option>
     ));
-
     return (
       <div
         className={classNames(
@@ -237,18 +237,20 @@
           `facility-type-dropdown-val-${facilityType || 'none'}`,
         )}
       >
-        <VaSelect
-          uswds
-          required
-          id="facility-type-dropdown"
-          className={showError ? 'vads-u-padding-left--1p5' : null}
-          label="Facility Type"
-          value={facilityType || ''}
-          onVaSelect={e => handleFacilityTypeChange(e)}
-          error={showError ? 'Please choose a facility type.' : null}
-        >
-          {options}
-        </VaSelect>
+        <div className="facility-type-dropdown-block">
+          <VaSelect
+            ref={facilityTypeDropdownRef}
+            required
+            id="facility-type-dropdown"
+            className={showError ? 'vads-u-padding-left--1p5' : null}
+            label="Facility type"
+            value={facilityType || ''}
+            onVaSelect={e => handleFacilityTypeChange(e)}
+            error={showError ? 'Please choose a facility type.' : null}
+          >
+            {options}
+          </VaSelect>
+        </div>
       </div>
     );
   };
@@ -277,21 +279,20 @@
       case LocationType.EMERGENCY_CARE:
         services = emergencyCareServices;
         break;
-      case LocationType.BENEFITS:
-        services = benefitsServices;
-        break;
       case LocationType.CC_PROVIDER:
         return (
-          <div 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.
@@ -302,7 +303,7 @@
     ));
 
     return (
-      <span className="service-type-dropdown-container">
+      <div className="service-type-dropdown-container">
         <label htmlFor="service-type-dropdown">Service type</label>
         <select
           id="service-type-dropdown"
@@ -312,7 +313,7 @@
         >
           {options}
         </select>
-      </span>
+      </div>
     );
   };
 
@@ -383,13 +384,11 @@
         id="facility-search-controls"
         onSubmit={handleSubmit}
       >
-        <div className="columns">
+        <div className="columns vads-u-margin--0 vads-u-padding--0">
           {renderLocationInputField()}
-          <div id="search-controls-bottom-row">
-            {renderFacilityTypeDropdown()}
-            {renderServiceTypeDropdown()}
-            <input id="facility-search" type="submit" value="Search" />
-          </div>
+          {renderFacilityTypeDropdown()}
+          {renderServiceTypeDropdown()}
+          <va-button id="facility-search" submit="prevent" text="Search" />
         </div>
       </form>
     </div>