Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update VAOS appointment card styling on VA in person appointments (#2…
…9286) * Adds additional video type functions to the appointment service Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Refactors some of the video types logic to take advantage of new functions in the appointment service Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Adds AppointmentCard and AppointmentCardIcon components to appointment list Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Adds AppointmentCard component to DetailsVA, DetailsCC Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Fixes typo Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Adds va_online_scheduling_card_icon feature flag Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Stubs out unit test for AppointmentCardIcon Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Removes vaOnlineSchedulingCardIcon feature flag Will be using the featureAppointmentDetailsRedesign flag instead Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Updated tests Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Updates test Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Cleanup Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Adds testid Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Changes children props to not required Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Adds test for feature flag behavior Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Changed back to fa icons from using the va-icon component va-icon component is currently a “use with caution” component and there were some display issues. https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default * WIP: skip tests * WIP: re-enabled flaky test * Moved cancel alerts out of wrapper Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Moves AppointmentCard and associated components and tests into new detail page layout Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Removes unused var Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Skip tests for video appointments Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Comment Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Removes duplicate function Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Renames AppointmentCard component Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> * Swaps out v3 icons and updates unit teats Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us> --------- Signed-off-by: Ryan Shaw <ryan.shaw@adhocteam.us>
- Loading branch information
Showing
9 changed files
with
609 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
src/applications/vaos/components/AppointmentCard/AppointmentCardIcon.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| isVAPhoneAppointment, | ||
| isClinicVideoAppointment, | ||
| isAtlasVideoAppointment, | ||
| isVideoHome, | ||
| isGfeVideoAppointment, | ||
| isInPersonVAAppointment, | ||
| } from '../../services/appointment'; | ||
|
|
||
| const appointmentIcon = appointment => { | ||
| const isPhone = isVAPhoneAppointment(appointment); | ||
| const { | ||
| isCommunityCare, | ||
| isCompAndPenAppointment, | ||
| isCOVIDVaccine, | ||
| } = appointment.vaos; | ||
|
|
||
| if (isPhone) { | ||
| return 'phone'; | ||
| } | ||
|
|
||
| if (isCommunityCare) { | ||
| return 'calendar_today'; | ||
| } | ||
|
|
||
| if ( | ||
| isInPersonVAAppointment(appointment) || | ||
| isCOVIDVaccine || | ||
| isCompAndPenAppointment || | ||
| isClinicVideoAppointment(appointment) || | ||
| isAtlasVideoAppointment(appointment) | ||
| ) { | ||
| return 'location_city'; | ||
| } | ||
|
|
||
| if (isVideoHome(appointment) || isGfeVideoAppointment(appointment)) { | ||
| return 'videocam'; | ||
| } | ||
| return 'calendar_today'; | ||
| }; | ||
|
|
||
| export default function AppointmentCardIcon({ appointment }) { | ||
| return ( | ||
| <div className="vaos-appts__appointment-details--icon"> | ||
| <va-icon | ||
| icon={appointmentIcon(appointment)} | ||
| aria-hidden="true" | ||
| data-testid="appointment-icon" | ||
| size={3} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| AppointmentCardIcon.propTypes = { | ||
| appointment: PropTypes.object.isRequired, | ||
| }; |
33 changes: 33 additions & 0 deletions
33
src/applications/vaos/components/AppointmentCard/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import PropTypes from 'prop-types'; | ||
| import AppointmentCardIcon from './AppointmentCardIcon'; | ||
| import { selectFeatureAppointmentDetailsRedesign } from '../../redux/selectors'; | ||
|
|
||
| export default function AppointmentCard({ children, appointment }) { | ||
| const featureAppointmentDetailsRedesign = useSelector(state => | ||
| selectFeatureAppointmentDetailsRedesign(state), | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {featureAppointmentDetailsRedesign && ( | ||
| <div | ||
| className="vaos-appts__appointment-details--container vads-u-margin-top--2 vads-u-border--2px vads-u-border-color--gray-lighter vads-u-padding-x--2p5 vads-u-padding-top--5 vads-u-padding-bottom--3" | ||
| data-testid="appointment-card" | ||
| > | ||
| <AppointmentCardIcon appointment={appointment} /> | ||
|
|
||
| {children} | ||
| </div> | ||
| )} | ||
|
|
||
| {!featureAppointmentDetailsRedesign && children} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| AppointmentCard.propTypes = { | ||
| appointment: PropTypes.object.isRequired, | ||
| children: PropTypes.node, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
src/applications/vaos/components/tests/AppointmentCard.unit.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React from 'react'; | ||
| import { expect } from 'chai'; | ||
| import { renderWithStoreAndRouter } from '~/platform/testing/unit/react-testing-library-helpers'; | ||
| import AppointmentCard from '../AppointmentCard'; | ||
| import AppointmentDateTime from '../../appointment-list/components/AppointmentDateTime'; | ||
| import { createTestStore } from '../../tests/mocks/setup'; | ||
|
|
||
| const appointmentData = { | ||
| start: '2024-07-19T08:00:00-07:00', | ||
| version: 2, | ||
| vaos: { | ||
| isCanceled: false, | ||
| appointmentType: 'vaAppointment', | ||
| isUpcomingAppointment: true, | ||
| isPastAppointment: false, | ||
| isCompAndPenAppointment: false, | ||
| }, | ||
| videoData: { | ||
| isVideo: false, | ||
| }, | ||
| location: { | ||
| vistaId: '983', | ||
| clinicId: '848', | ||
| stationId: '983', | ||
| clinicName: 'CHY PC VAR2', | ||
| }, | ||
| }; | ||
|
|
||
| describe('VAOS Component: AppointmentCard', () => { | ||
| const initialState = { | ||
| featureToggles: {}, | ||
| }; | ||
|
|
||
| it('should display appointment card when vaOnlineSchedulingAppointmentDetailsRedesign is true', async () => { | ||
| const state = { | ||
| ...initialState, | ||
| featureToggles: { | ||
| ...initialState.featureToggles, | ||
| vaOnlineSchedulingAppointmentDetailsRedesign: true, | ||
| }, | ||
| }; | ||
|
|
||
| const store = createTestStore(state); | ||
|
|
||
| const appointment = { | ||
| ...appointmentData, | ||
| }; | ||
|
|
||
| const wrapper = renderWithStoreAndRouter( | ||
| <AppointmentCard appointment={appointment}> | ||
| <h1 className="vads-u-margin-y--2p5"> | ||
| <AppointmentDateTime appointment={appointment} /> | ||
| </h1> | ||
| </AppointmentCard>, | ||
| { | ||
| store, | ||
| }, | ||
| ); | ||
|
|
||
| expect(wrapper.getByTestId('appointment-card')).to.exist; | ||
| }); | ||
|
|
||
| it('should not display appointment card when vaOnlineSchedulingAppointmentDetailsRedesign is false', async () => { | ||
| const state = { | ||
| ...initialState, | ||
| featureToggles: { | ||
| ...initialState.featureToggles, | ||
| vaOnlineSchedulingAppointmentDetailsRedesign: false, | ||
| }, | ||
| }; | ||
|
|
||
| const store = createTestStore(state); | ||
|
|
||
| const appointment = { | ||
| ...appointmentData, | ||
| }; | ||
|
|
||
| const wrapper = renderWithStoreAndRouter( | ||
| <AppointmentCard appointment={appointment}> | ||
| <h1 className="vads-u-margin-y--2p5"> | ||
| <AppointmentDateTime appointment={appointment} /> | ||
| </h1> | ||
| </AppointmentCard>, | ||
| { | ||
| store, | ||
| }, | ||
| ); | ||
|
|
||
| expect(wrapper.queryByTestId('appointment-card')).to.be.null; | ||
| }); | ||
| }); |
Oops, something went wrong.