provider mock redux stuff

department-of-veterans-affairs · Nov 13, 2024 · 820e40e · 820e40e
1 parent 0cb309c
commit 820e40e
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 19 deletions.
diff --git a/src/applications/vaos/referral-appointments/ChooseDateAndTime.jsx b/src/applications/vaos/referral-appointments/ChooseDateAndTime.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { startOfMonth, format, addMinutes, isWithinInterval } from 'date-fns';
 import { zonedTimeToUtc } from 'date-fns-tz';
@@ -11,18 +11,21 @@ import { referral } from './temp-data/referral';
 import { getSelectedDate } from '../new-appointment/redux/selectors';
 import { selectUpcomingAppointments } from '../appointment-list/redux/selectors';
 import { routeToNextReferralPage, routeToPreviousReferralPage } from './flow';
-import { setFormCurrentPage } from './redux/actions';
-import { selectCurrentPage } from './redux/selectors';
+import { setFormCurrentPage, fetchProviderDetails } from './redux/actions';
+import { selectCurrentPage, getProviderInfo } from './redux/selectors';
+import { FETCH_STATUS } from '../utils/constants';
+import { scrollAndFocus } from '../utils/scrollAndFocus';
 
 export const ChooseDateAndTime = () => {
+  const dispatch = useDispatch();
+
   const history = useHistory();
   const selectedDate = useSelector(state => getSelectedDate(state));
   const upcomingAppointments = useSelector(state =>
     selectUpcomingAppointments(state),
   );
   const location = useLocation();
   const currentPage = useSelector(selectCurrentPage);
-  const dispatch = useDispatch();
   const startMonth = format(startOfMonth(referral.preferredDate), 'yyyy-MM');
   const [error, setError] = useState('');
   const pageTitle = 'Schedule an appointment with your provider';
@@ -55,6 +58,23 @@ export const ChooseDateAndTime = () => {
     [dispatch],
   );
 
+  const { provider, providerFetchStatus } = useSelector(
+    state => getProviderInfo(state),
+    shallowEqual,
+  );
+
+  useEffect(
+    () => {
+      if (providerFetchStatus === FETCH_STATUS.notStarted) {
+        dispatch(fetchProviderDetails(referral.provider));
+      } else if (providerFetchStatus === FETCH_STATUS.succeeded) {
+        scrollAndFocus('h1');
+      } else if (providerFetchStatus === FETCH_STATUS.failed) {
+        scrollAndFocus('h2');
+      }
+    },
+    [dispatch, providerFetchStatus],
+  );
   useEffect(
     () => {
       dispatch(setFormCurrentPage('scheduleAppointment'));
@@ -142,6 +162,28 @@ export const ChooseDateAndTime = () => {
     },
     [hasConflict, selectedDate, upcomingAppointments],
   );
+  if (
+    providerFetchStatus === FETCH_STATUS.loading ||
+    providerFetchStatus === FETCH_STATUS.notStarted
+  ) {
+    return (
+      <div className="vads-u-margin-y--8">
+        <va-loading-indicator message="Loading available appointments times..." />
+      </div>
+    );
+  }
+
+  if (providerFetchStatus === FETCH_STATUS.failed) {
+    return (
+      <va-alert 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 (
     <FormLayout pageTitle={pageTitle}>
       <>
@@ -152,29 +194,29 @@ export const ChooseDateAndTime = () => {
             appointment online with this provider:
           </p>
           <p className="vads-u-font-weight--bold vads-u-margin--0">
-            {referral.providerName}
+            {provider.providerName}
           </p>
           <p className="vads-u-margin-top--0">{referral.typeOfCare}</p>
           <p className="vads-u-margin--0 vads-u-font-weight--bold">
-            {referral.orgName}
+            {provider.orgName}
           </p>
           <address>
             <p className="vads-u-margin--0">
-              {referral.orgAddress.street1} <br />
-              {referral.orgAddress.street2 && (
+              {provider.orgAddress.street1} <br />
+              {provider.orgAddress.street2 && (
                 <>
-                  {referral.orgAddress.street2}
+                  {provider.orgAddress.street2}
                   <br />
                 </>
               )}
-              {referral.orgAddress.street3 && (
+              {provider.orgAddress.street3 && (
                 <>
-                  {referral.orgAddress.street3}
+                  {provider.orgAddress.street3}
                   <br />
                 </>
               )}
-              {referral.orgAddress.city}, {referral.orgAddress.state},{' '}
-              {referral.orgAddress.zip}
+              {provider.orgAddress.city}, {provider.orgAddress.state},{' '}
+              {provider.orgAddress.zip}
             </p>
             <div
               data-testid="directions-link-wrapper"
@@ -188,19 +230,19 @@ export const ChooseDateAndTime = () => {
               <a
                 data-testid="directions-link"
                 href={`https://maps.google.com?addr=Current+Location&daddr=${fullAddress(
-                  referral.orgAddress,
+                  provider.orgAddress,
                 )}`}
-                aria-label={`directions to ${referral.orgName}`}
+                aria-label={`directions to ${provider.orgName}`}
                 target="_blank"
                 rel="noreferrer"
               >
                 Directions
               </a>
             </div>
           </address>
-          <p>Phone: {referral.orgPhone}</p>
+          <p>Phone: {provider.orgPhone}</p>
           <p>
-            {referral.driveTime} ({referral.driveDistance})
+            {provider.driveTime} ({provider.driveDistance})
           </p>
           <h2>Choose a date and time</h2>
           <p>
@@ -211,7 +253,7 @@ export const ChooseDateAndTime = () => {
         <div>
           <CalendarWidget
             maxSelections={1}
-            availableSlots={referral.slots}
+            availableSlots={provider.slots}
             value={[selectedDate]}
             id="dateTime"
             timezone={referral.timezone}

diff --git a/src/applications/vaos/referral-appointments/redux/actions.js b/src/applications/vaos/referral-appointments/redux/actions.js
@@ -1,8 +1,15 @@
+import { captureError } from '../../utils/error';
+import { getProviderById } from '../../services/referral';
+
 export const SET_FACILITY = 'SET_FACILITY';
 export const SET_APPOINTMENT_DETAILS = 'SET_APPOINTMENT_DETAILS';
 export const SET_SORT_PROVIDER_BY = 'SET_SORT_PROVIDER_BY';
 export const SET_SELECTED_PROVIDER = 'SET_SELECTED_PROVIDER';
 export const SET_FORM_CURRENT_PAGE = 'SET_FORM_CURRENT_PAGE';
+export const FETCH_PROVIDER_DETAILS = 'FETCH_PROVIDER_DETAILS';
+export const FETCH_PROVIDER_DETAILS_SUCCEEDED =
+  'FETCH_PROVIDER_DETAILS_SUCCEEDED';
+export const FETCH_PROVIDER_DETAILS_FAILED = 'FETCH_PROVIDER_DETAILS_FAILED';
 
 export function setFacility(facility) {
   return {
@@ -41,3 +48,25 @@ export function setFormCurrentPage(currentPage) {
     payload: currentPage,
   };
 }
+
+export function fetchProviderDetails(id) {
+  return async dispatch => {
+    try {
+      dispatch({
+        type: FETCH_PROVIDER_DETAILS,
+      });
+      const providerDetails = await getProviderById(id);
+
+      dispatch({
+        type: FETCH_PROVIDER_DETAILS_SUCCEEDED,
+        data: providerDetails,
+      });
+      return providerDetails;
+    } catch (error) {
+      dispatch({
+        type: FETCH_PROVIDER_DETAILS_FAILED,
+      });
+      return captureError(error);
+    }
+  };
+}
diff --git a/src/applications/vaos/referral-appointments/redux/reducers.js b/src/applications/vaos/referral-appointments/redux/reducers.js
@@ -4,13 +4,18 @@ import {
   SET_SORT_PROVIDER_BY,
   SET_SELECTED_PROVIDER,
   SET_FORM_CURRENT_PAGE,
+  FETCH_PROVIDER_DETAILS,
+  FETCH_PROVIDER_DETAILS_FAILED,
+  FETCH_PROVIDER_DETAILS_SUCCEEDED,
 } from './actions';
+import { FETCH_STATUS } from '../../utils/constants';
 
 const initialState = {
   facility: null,
   sortProviderBy: '',
   selectedProvider: '',
   currentPage: null,
+  providerFetchStatus: FETCH_STATUS.notStarted,
 };
 
 function ccAppointmentReducer(state = initialState, action) {
@@ -41,6 +46,22 @@ function ccAppointmentReducer(state = initialState, action) {
         ...state,
         currentPage: action.payload,
       };
+    case FETCH_PROVIDER_DETAILS:
+      return {
+        ...state,
+        providerFetchStatus: FETCH_STATUS.loading,
+      };
+    case FETCH_PROVIDER_DETAILS_SUCCEEDED:
+      return {
+        ...state,
+        providerFetchStatus: FETCH_STATUS.succeeded,
+        selectedProvider: action.data,
+      };
+    case FETCH_PROVIDER_DETAILS_FAILED:
+      return {
+        ...state,
+        providerFetchStatus: FETCH_STATUS.failed,
+      };
     default:
       return state;
   }

diff --git a/src/applications/vaos/referral-appointments/redux/selectors.js b/src/applications/vaos/referral-appointments/redux/selectors.js
@@ -2,3 +2,10 @@ export const selectCCAppointment = state => state.ccAppointment;
 export const selectProvider = state => state.referral.selectedProvider;
 export const selectProviderSortBy = state => state.referral.sortProviderBy;
 export const selectCurrentPage = state => state.referral.currentPage;
+
+export function getProviderInfo(state) {
+  return {
+    provider: state.referral.selectedProvider,
+    providerFetchStatus: state.referral.providerFetchStatus,
+  };
+}
diff --git a/src/applications/vaos/referral-appointments/temp-data/referral.js b/src/applications/vaos/referral-appointments/temp-data/referral.js
@@ -19,6 +19,7 @@ const getAvailableSlots = (number = 2) => {
 const referral = {
   id: 123456,
   providerName: 'Dr. Face',
+  provider: '111',
   typeOfCare: 'Dermatology',
   appointmentCount: 2,
   orgName: 'New Skin Technologies',

diff --git a/src/applications/vaos/services/mocks/index.js b/src/applications/vaos/services/mocks/index.js
@@ -672,7 +672,7 @@ const responses = {
       data: getSlot.find(slot => slot?.id === req.params.slotId),
     });
   },
-  'GET /vaos/v2/epsApi/providerDetails': (req, res) => {
+  'GET /vaos/v2/epsApi/providerDetails/:providerId': (req, res) => {
     return res.json({ data: providerUtils.createProviderDetails(5) });
   },
   'GET /vaos/v2/epsApi/referrals': (req, res) => {

diff --git a/src/applications/vaos/services/referral/index.js b/src/applications/vaos/services/referral/index.js
@@ -28,3 +28,17 @@ export async function getPatientReferralById(referralId) {
     return null;
   }
 }
+
+export async function getProviderById(providerId) {
+  try {
+    const response = await apiRequestWithUrl(
+      `/vaos/v2/epsApi/providerDetails/${providerId}`,
+      {
+        method: 'GET',
+      },
+    );
+    return response.data;
+  } catch (error) {
+    return null;
+  }
+}