feature/9759-Add AppointmentMedicationWording to InPerson Phone & CC

VAMobile/e2e/tests/AppointmentsExpanded.e2e.ts

@@ -6,6 +6,37 @@ export const Appointmentse2eConstants = {
   GET_DIRECTIONS_ID: 'directionsTestID',
 }
 
+const checkMedicationWording = async ({
+  appointmentType,
+  appointmentStatus,
+  pastAppointment,
+}: {
+  appointmentType: string
+  appointmentStatus: string
+  pastAppointment: boolean
+}) => {
+  if (
+    appointmentType === 'Phone' ||
+    appointmentType === 'CC' ||
+    appointmentType === 'Onsite' ||
+    appointmentType === 'VA'
+  ) {
+    if (
+      appointmentStatus === 'Canceled' ||
+      (!pastAppointment && (appointmentStatus === 'Upcoming' || appointmentStatus === 'Confirmed'))
+    ) {
+      await expect(element(by.text('Prepare for your appointment'))).toExist()
+      await expect(element(by.text('Find a full list of things to bring to your appointment'))).toExist()
+    } else {
+      await expect(element(by.text('Prepare for your appointment'))).not.toExist()
+      await expect(element(by.text('Find a full list of things to bring to your appointment'))).not.toExist()
+    }
+  } else {
+    await expect(element(by.text('Prepare for your appointment'))).not.toExist()
+    await expect(element(by.text('Find a full list of things to bring to your appointment'))).not.toExist()
+  }
+}
+
 const checkUpcomingApptDetails = async (
   appointmentType: string,
   appointmentStatus: string,
@@ -255,6 +286,7 @@ const checkUpcomingApptDetails = async (
       await expect(element(by.id('CallTTYTestID')).atIndex(1)).toExist()
     }
   }
+  await checkMedicationWording({ appointmentType, appointmentStatus, pastAppointment })
 
   await element(by.text('Appointments')).tap()
 }

VAMobile/env/constant.env

@@ -1,6 +1,7 @@
 WEBVIEW_URL_CHANGE_LEGAL_NAME=https://www.va.gov/resources/how-to-change-your-legal-name-on-file-with-va/
 WEBVIEW_URL_CORONA_FAQ=https://www.va.gov/coronavirus-veteran-frequently-asked-questions
 WEBVIEW_URL_FACILITY_LOCATOR=https://www.va.gov/find-locations/
+WEBVIEW_URL_WHAT_TO_BRING_TO_APPOINTMENTS=https://www.va.gov/resources/what-should-i-bring-to-my-health-care-appointments/
 LINK_URL_VA_NOTIFICATIONS=https://www.va.gov/profile/notifications/
 LINK_URL_VA_SCHEDULING=https://www.va.gov/health-care/schedule-view-va-appointments/
 LINK_URL_IN_APP_RECRUITMENT=https://docs.google.com/forms/d/e/1FAIpQLSfRb0OtW34qKm8tGoQwwwDFs8IqwOMCLTde3DeM-ukKOEZBnA/viewform

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/CommunityCareAppointment.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { screen } from '@testing-library/react-native'
+import { t } from 'i18next'
 
 import {
   AppointmentAttributes,
@@ -109,6 +110,9 @@ context('CommunityCareAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call your provider.')).toBeTruthy()
     })
@@ -165,6 +169,9 @@ context('CommunityCareAppointment', () => {
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call your provider.')).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('link', { name: 'Find your VA location' })).toBeTruthy()
       expect(screen.getByLabelText('Find your  V-A  location')).toBeTruthy()
       expect(
@@ -319,6 +326,9 @@ context('CommunityCareAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -394,6 +404,9 @@ context('CommunityCareAppointment', () => {
         ),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('link', { name: 'Go to VA.gov to schedule' })).toBeTruthy()
       expect(screen.getByLabelText('Go to  V-A .gov to schedule')).toBeTruthy()
     })

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/CommunityCareAppointment.tsx

@@ -17,6 +17,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentProvider,
   AppointmentReasonAndComment,
@@ -75,6 +76,7 @@ function CommunityCareAppointment({
           <AppointmentLocation attributes={attributes} subType={subType} type={type} />
         )}
         <AppointmentReasonAndComment attributes={attributes} subType={subType} type={type} />
+        <AppointmentMedicationWording subType={subType} type={type} />
         <AppointmentPersonalContactInfo attributes={attributes} subType={subType} />
         <AppointmentCancelReschedule
           appointmentID={appointmentID}

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/InPersonVAAppointment.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { screen } from '@testing-library/react-native'
+import { t } from 'i18next'
 
 import {
   AppointmentAttributes,
@@ -115,6 +116,9 @@ context('InPersonVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(
         screen.getByText('You can cancel this appointment in the app. But if you need to reschedule, call us.'),
@@ -176,6 +180,9 @@ context('InPersonVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call us.')).toBeTruthy()
 
@@ -348,6 +355,9 @@ context('InPersonVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -414,6 +424,9 @@ context('InPersonVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/InPersonVAAppointment.tsx

@@ -13,6 +13,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentPreferredModality,
   AppointmentProvider,
@@ -62,6 +63,7 @@ function InPersonVAAppointment({
         <AppointmentProvider attributes={attributes} subType={subType} type={type} />
         <AppointmentLocation attributes={attributes} subType={subType} type={type} />
         <AppointmentReasonAndComment attributes={attributes} subType={subType} type={type} />
+        <AppointmentMedicationWording subType={subType} type={type} />
         <AppointmentPersonalContactInfo attributes={attributes} subType={subType} />
         <AppointmentCancelReschedule
           appointmentID={appointmentID}

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/PhoneAppointment.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { screen } from '@testing-library/react-native'
+import { t } from 'i18next'
 
 import {
   AppointmentAttributes,
@@ -98,6 +99,9 @@ context('PhoneAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(
         screen.getByText('You can cancel this appointment in the app. But if you need to reschedule, call us.'),
@@ -139,6 +143,9 @@ context('PhoneAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call us.')).toBeTruthy()
 
@@ -260,6 +267,9 @@ context('PhoneAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -307,6 +317,9 @@ context('PhoneAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/PhoneAppointment.tsx

@@ -13,6 +13,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentPreferredModality,
   AppointmentProvider,
@@ -56,6 +57,7 @@ function PhoneAppointment({ appointmentID, attributes, subType, goBack, cancelAp
         <AppointmentProvider attributes={attributes} subType={subType} type={type} />
         <AppointmentLocation attributes={attributes} subType={subType} type={type} />
         <AppointmentReasonAndComment attributes={attributes} subType={subType} type={type} />
+        <AppointmentMedicationWording subType={subType} type={type} />
         <AppointmentPersonalContactInfo attributes={attributes} subType={subType} />
         <AppointmentCancelReschedule
           appointmentID={appointmentID}

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Box, LinkWithAnalytics, TextView } from 'components'
+import { NAMESPACE } from 'constants/namespaces'
+import {
+  AppointmentDetailsScreenType,
+  AppointmentDetailsSubType,
+  AppointmentDetailsSubTypeConstants,
+  AppointmentDetailsTypeConstants,
+} from 'utils/appointments'
+import getEnv from 'utils/env'
+import { useRouteNavigation, useTheme } from 'utils/hooks'
+
+type AppointmentMedicationWordingProps = {
+  subType: AppointmentDetailsSubType
+  type: AppointmentDetailsScreenType
+}
+
+const { WEBVIEW_URL_WHAT_TO_BRING_TO_APPOINTMENTS } = getEnv()
+
+function AppointmentMedicationWording({ subType, type }: AppointmentMedicationWordingProps) {
+  const theme = useTheme()
+  const { t } = useTranslation(NAMESPACE.COMMON)
+  const navigateTo = useRouteNavigation()
+
+  switch (subType) {
+    case AppointmentDetailsSubTypeConstants.Upcoming:
+    case AppointmentDetailsSubTypeConstants.Canceled:
+      switch (type) {
+        case AppointmentDetailsTypeConstants.InPersonVA:
+        case AppointmentDetailsTypeConstants.Phone:
+        case AppointmentDetailsTypeConstants.CommunityCare:
+        case AppointmentDetailsTypeConstants.VideoVA:
+          const body = t('appointmentsTab.medicationWording.default.body')
+          return (
+            <Box mb={theme.dimensions.standardMarginBetween}>
+              <TextView variant="MobileBodyBold" accessibilityRole="header">
+                {t('appointmentsTab.medicationWording.title')}
+              </TextView>
+              <TextView variant="MobileBody">{body}</TextView>
+              <LinkWithAnalytics
+                type="custom"
+                icon={{ name: 'Launch' }}
+                onPress={() => {
+                  navigateTo('Webview', {
+                    url: WEBVIEW_URL_WHAT_TO_BRING_TO_APPOINTMENTS,
+                    displayTitle: t('webview.vagov'),
+                    loadingMessage: t('loading'),
+                  })
+                }}
+                text={t('appointmentsTab.medicationWording.whatToBringLink')}
+              />
+            </Box>
+          )
+        default:
+          return <></>
+      }
+    default:
+      return <></>
+  }
+}
+
+export default AppointmentMedicationWording

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/index.ts

@@ -10,6 +10,8 @@ export { default as AppointmentDetailsModality } from './AppointmentDetailsModal
 export * from './AppointmentDetailsModality'
 export { default as AppointmentJoinSessionPrepareForVideo } from './AppointmentJoinSessionPrepareForVideo'
 export * from './AppointmentJoinSessionPrepareForVideo'
+export { default as AppointmentMedicationWording } from './AppointmentMedicationWording'
+export * from './AppointmentMedicationWording'
 export { default as AppointmentLocation } from './AppointmentLocation'
 export * from './AppointmentLocation'
 export { default as AppointmentPersonalContactInfo } from './AppointmentPersonalContactInfo'

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoVAAppointment.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { screen } from '@testing-library/react-native'
+import { t } from 'i18next'
 
 import {
   AppointmentAttributes,
@@ -116,6 +117,9 @@ context('VideoVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call us.')).toBeTruthy()
     })
@@ -173,6 +177,9 @@ context('VideoVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule or cancel?' })).toBeTruthy()
       expect(screen.getByText('If you need to reschedule or cancel this appointment, call us.')).toBeTruthy()
 
@@ -345,6 +352,9 @@ context('VideoVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -411,6 +421,9 @@ context('VideoVAAppointment', () => {
         screen.getByText('Other details: Please arrive 20 minutes before the start of your appointment'),
       ).toBeTruthy()
 
+      expect(screen.getByRole('header', { name: t('appointmentsTab.medicationWording.title') })).toBeTruthy()
+      expect(screen.getByRole('link', { name: t('appointmentsTab.medicationWording.whatToBringLink') })).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(

VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoVAAppointment.tsx

@@ -13,6 +13,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentPreferredModality,
   AppointmentProvider,
@@ -62,6 +63,7 @@ function VideoVAAppointment({
         <AppointmentProvider attributes={attributes} subType={subType} type={type} />
         <AppointmentLocation attributes={attributes} subType={subType} type={type} />
         <AppointmentReasonAndComment attributes={attributes} subType={subType} type={type} />
+        <AppointmentMedicationWording subType={subType} type={type} />
         <AppointmentPersonalContactInfo attributes={attributes} subType={subType} />
         <AppointmentCancelReschedule
           appointmentID={appointmentID}

VAMobile/src/translations/en/common.json

@@ -323,6 +323,9 @@
   "appointmentsTab.past.a11yHint": "review your past appointments",
   "appointmentsTab.upcoming": "Upcoming",
   "appointmentsTab.upcoming.a11yHint": "review your upcoming appointments",
+  "appointmentsTab.medicationWording.title": "Prepare for your appointment",
+  "appointmentsTab.medicationWording.default.body": "Bring your insurance cards. And bring a list of your medications and other information to share with your provider.",
+  "appointmentsTab.medicationWording.whatToBringLink": "Find a full list of things to bring to your appointment",
   "areYouSure": "Are you sure?",
   "askForClaimDecision.alertBtnTitle": "Request evaluation",
   "askForClaimDecision.alertTitle": "Request claim evaluation?",