feat: 9763 Update Medication Wording | VA Video

department-of-veterans-affairs · Oct 17, 2024 · 8e74c6e · 8e74c6e
1 parent 1c6b40a
commit 8e74c6e
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 124 deletions.
diff --git a/VAMobile/e2e/tests/AppointmentsExpanded.e2e.ts b/VAMobile/e2e/tests/AppointmentsExpanded.e2e.ts
@@ -19,14 +19,32 @@ const checkMedicationWording = async ({
     appointmentType === 'Phone' ||
     appointmentType === 'CC' ||
     appointmentType === 'Onsite' ||
-    appointmentType === 'VA'
+    appointmentType === 'VA' ||
+    appointmentType === 'ATLAS' ||
+    appointmentType === 'GFE' ||
+    appointmentType === 'Home'
   ) {
     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()
+
+      if (appointmentType === 'ATLAS' || appointmentType === 'Home' || appointmentType === 'GFE') {
+        await expect(element(by.text('Get your device ready to join.'))).toExist()
+        await expect(element(by.id('prepareForVideoVisitTestID'))).toExist()
+        await waitFor(element(by.id('prepareForVideoVisitTestID')))
+          .toBeVisible()
+          .whileElement(by.id(pastAppointment ? 'PastApptDetailsTestID' : 'UpcomingApptDetailsTestID'))
+          .scroll(300, 'down')
+        await element(by.id('prepareForVideoVisitTestID')).tap()
+        await expect(element(by.text('Appointments help'))).toExist()
+        await element(by.text('Close')).tap()
+      } else {
+        await expect(element(by.text('Get your device ready to join.'))).not.toExist()
+        await expect(element(by.id('prepareForVideoVisitTestID'))).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()
@@ -564,10 +582,6 @@ export async function apppointmentVerification(pastAppointment = false) {
     if (!pastAppointment) {
       await expect(element(by.text('Video appointment')))
       await expect(element(by.text('You can join 30 minutes before your appointment time.'))).toExist()
-      await expect(element(by.id('prepareForVideoVisitTestID'))).toExist()
-      await element(by.id('prepareForVideoVisitTestID')).tap()
-      await expect(element(by.text('Appointments help'))).toExist()
-      await element(by.text('Close')).tap()
     } else {
       await expect(element(by.text('Past video appointment')))
     }

diff --git a/...ents/AppointmentTypeComponents/SharedComponents/AppointmentJoinSessionPrepareForVideo.tsx b/...ents/AppointmentTypeComponents/SharedComponents/AppointmentJoinSessionPrepareForVideo.tsx
@@ -5,7 +5,7 @@ import { Button } from '@department-of-veterans-affairs/mobile-component-library
 import { DateTime } from 'luxon'
 
 import { AppointmentAttributes } from 'api/types'
-import { Box, LinkWithAnalytics } from 'components'
+import { Box } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import {
   AppointmentDetailsScreenType,
@@ -14,7 +14,7 @@ import {
   AppointmentDetailsTypeConstants,
 } from 'utils/appointments'
 import { getEpochSecondsOfDate } from 'utils/formattingUtils'
-import { useExternalLink, useRouteNavigation, useTheme } from 'utils/hooks'
+import { useExternalLink, useRouteNavigation } from 'utils/hooks'
 
 type AppointmentJoinSessionPrepareForVideoProps = {
   attributes: AppointmentAttributes
@@ -28,7 +28,7 @@ function AppointmentJoinSessionPrepareForVideo({
   type,
 }: AppointmentJoinSessionPrepareForVideoProps) {
   const { t } = useTranslation(NAMESPACE.COMMON)
-  const theme = useTheme()
+
   const navigateTo = useRouteNavigation()
   const launchExternalLink = useExternalLink()
 
@@ -59,17 +59,6 @@ function AppointmentJoinSessionPrepareForVideo({
               onPress={joinSessionOnPress}
             />
           )}
-          <Box
-            py={displayButton ? theme.dimensions.buttonPadding : undefined}
-            mt={displayButton ? undefined : -theme.dimensions.standardMarginBetween}
-            mb={theme.dimensions.condensedMarginBetween}>
-            <LinkWithAnalytics
-              type="custom"
-              text={t('appointments.videoHome.prepareForVideo')}
-              onPress={() => navigateTo('PrepareForVideoVisit')}
-              testID="prepareForVideoVisitTestID"
-            />
-          </Box>
         </Box>
       )
     default:

diff --git a/.../Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx b/.../Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Box, LinkWithAnalytics, TextView } from 'components'
+import { TFunction } from 'i18next'
+
+import { Box, LinkWithAnalytics, TextView, VABulletList } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import {
   AppointmentDetailsScreenType,
@@ -12,6 +14,15 @@ import {
 import getEnv from 'utils/env'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
+const getWebViewLink = (onPress: () => void, t: TFunction) => (
+  <LinkWithAnalytics
+    type="custom"
+    icon={{ name: 'Launch' }}
+    onPress={onPress}
+    text={t('appointmentsTab.medicationWording.whatToBringLink')}
+  />
+)
+
 type AppointmentMedicationWordingProps = {
   subType: AppointmentDetailsSubType
   type: AppointmentDetailsScreenType
@@ -20,42 +31,72 @@ type AppointmentMedicationWordingProps = {
 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()
+  const body = t('appointmentsTab.medicationWording.default.body')
+  const theme = useTheme()
+
+  const openWebviewLink = () => {
+    navigateTo('Webview', {
+      url: WEBVIEW_URL_WHAT_TO_BRING_TO_APPOINTMENTS,
+      displayTitle: t('webview.vagov'),
+      loadingMessage: t('loading'),
+    })
+  }
+
+  const webViewLink = getWebViewLink(openWebviewLink, t)
+
+  const getContent = () => {
+    switch (type) {
+      case AppointmentDetailsTypeConstants.InPersonVA:
+      case AppointmentDetailsTypeConstants.Phone:
+      case AppointmentDetailsTypeConstants.CommunityCare:
+      case AppointmentDetailsTypeConstants.VideoVA:
+        return (
+          <>
+            <TextView variant="MobileBody">{body}</TextView>
+            {webViewLink}
+          </>
+        )
+      case AppointmentDetailsTypeConstants.VideoAtlas:
+      case AppointmentDetailsTypeConstants.VideoGFE:
+      case AppointmentDetailsTypeConstants.VideoHome:
+        return (
+          <>
+            <VABulletList listOfText={[body]} />
+            {webViewLink}
+            <VABulletList listOfText={[t('appointmentsTab.medicationWording.bullet2')]} />
+            <LinkWithAnalytics
+              type="custom"
+              testID="prepareForVideoVisitTestID"
+              text={t('appointmentsTab.medicationWording.howToSetUpDevice')}
+              onPress={() => {
+                navigateTo('PrepareForVideoVisit')
+              }}
+            />
+          </>
+        )
+      default:
+        return null
+    }
+  }
 
   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 <></>
+      const conent = getContent()
+      if (!conent) {
+        return <></>
       }
+
+      return (
+        <Box mb={theme.dimensions.standardMarginBetween}>
+          <TextView variant="MobileBodyBold" accessibilityRole="header">
+            {t('appointmentsTab.medicationWording.title')}
+          </TextView>
+          {conent}
+        </Box>
+      )
     default:
       return <></>
   }

diff --git a/...creens/HealthScreen/Appointments/AppointmentTypeComponents/VideoAtlasAppointment.test.tsx b/...creens/HealthScreen/Appointments/AppointmentTypeComponents/VideoAtlasAppointment.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { screen } from '@testing-library/react-native'
+import { t } from 'i18next'
 
 import {
   AppointmentAttributes,
@@ -106,6 +107,12 @@ context('VideoAtlasAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).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 the scheduling facility.'),
@@ -159,6 +166,12 @@ context('VideoAtlasAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).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 the scheduling facility.'),
@@ -303,6 +316,12 @@ context('VideoAtlasAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -362,6 +381,12 @@ context('VideoAtlasAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(

diff --git a/...src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoAtlasAppointment.tsx b/...src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoAtlasAppointment.tsx
@@ -13,6 +13,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentPreferredModality,
   AppointmentProvider,
@@ -62,6 +63,7 @@ function VideoAtlasAppointment({
         <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}

diff --git a/.../screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoGFEAppointment.test.tsx b/.../screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoGFEAppointment.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,12 @@ context('VideoGFEAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).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 the scheduling facility.'),
@@ -141,6 +148,12 @@ context('VideoGFEAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).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 the scheduling facility.'),
@@ -269,6 +282,12 @@ context('VideoGFEAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(
@@ -320,6 +339,12 @@ context('VideoGFEAppointment', () => {
         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.getByText(t('appointmentsTab.medicationWording.default.body'))).toBeTruthy()
+      expect(screen.getByText(t('appointmentsTab.medicationWording.bullet2'))).toBeTruthy()
+      expect(screen.getByTestId('prepareForVideoVisitTestID')).toBeTruthy()
+
       expect(screen.getByRole('header', { name: 'Need to reschedule?' })).toBeTruthy()
       expect(
         screen.getByText(

diff --git a/...e/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoGFEAppointment.tsx b/...e/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/VideoGFEAppointment.tsx
@@ -13,6 +13,7 @@ import {
   AppointmentDateAndTime,
   AppointmentDetailsModality,
   AppointmentLocation,
+  AppointmentMedicationWording,
   AppointmentPersonalContactInfo,
   AppointmentPreferredModality,
   AppointmentProvider,
@@ -62,6 +63,7 @@ function VideoGFEAppointment({
         <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}