From 9c98d229a9bd6a0ecfed81e9056f2f86ef3375a1 Mon Sep 17 00:00:00 2001 From: Chris Alexander Date: Wed, 18 Sep 2024 13:46:33 -0600 Subject: [PATCH 1/6] Add useOldLinkComponent feature flag --- VAMobile/src/utils/remoteConfig.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/VAMobile/src/utils/remoteConfig.ts b/VAMobile/src/utils/remoteConfig.ts index 2a2d6e0e4cb..bcca00c2fc7 100644 --- a/VAMobile/src/utils/remoteConfig.ts +++ b/VAMobile/src/utils/remoteConfig.ts @@ -31,6 +31,7 @@ export type FeatureToggleType = | 'prescriptions' | 'submitEvidenceExpansion' | 'testFeature' + | 'useOldLinkComponent' | 'whatsNewUI' type FeatureToggleValues = { @@ -49,6 +50,7 @@ type FeatureToggleValues = { prescriptions: boolean submitEvidenceExpansion: boolean testFeature: boolean + useOldLinkComponent: boolean whatsNewUI: boolean } @@ -68,6 +70,7 @@ export const defaults: FeatureToggleValues = { prescriptions: true, submitEvidenceExpansion: false, testFeature: false, + useOldLinkComponent: false, whatsNewUI: true, } From db808c6a6f8af85fc0807b70adf0c0fe27003769 Mon Sep 17 00:00:00 2001 From: Chris Alexander Date: Thu, 19 Sep 2024 10:26:35 -0600 Subject: [PATCH 2/6] Use ClickForActionLinkDeprecated when flag is enabled --- VAMobile/src/components/AttachmentLink.tsx | 56 +++++-- VAMobile/src/components/LinkWithAnalytics.tsx | 65 +++++++- .../ClaimExamAppointment.tsx | 23 ++- .../CommunityCareAppointment.tsx | 23 ++- .../InPersonVAAppointment.tsx | 23 ++- .../PhoneAppointment.tsx | 23 ++- .../DEPRECATED_AppointmentCalendarButton.tsx | 147 ++++++++++++++++++ .../SharedComponents/index.ts | 2 + .../VideoAtlasAppointment.tsx | 23 ++- .../VideoGFEAppointment.tsx | 23 ++- .../VideoHomeAppointment.tsx | 23 ++- .../VideoVAAppointment.tsx | 23 ++- 12 files changed, 391 insertions(+), 63 deletions(-) create mode 100644 VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/DEPRECATED_AppointmentCalendarButton.tsx diff --git a/VAMobile/src/components/AttachmentLink.tsx b/VAMobile/src/components/AttachmentLink.tsx index 1d0efaae26f..3f0d2e403e1 100644 --- a/VAMobile/src/components/AttachmentLink.tsx +++ b/VAMobile/src/components/AttachmentLink.tsx @@ -1,6 +1,14 @@ import React, { FC } from 'react' +import { AccessibilityProps, Pressable, PressableProps } from 'react-native' +import { a11yHintProp } from 'utils/accessibility' +import { useTheme } from 'utils/hooks' +import { featureEnabled } from 'utils/remoteConfig' + +import Box from './Box' import LinkWithAnalytics from './LinkWithAnalytics' +import TextView from './TextView' +import VAIcon from './VAIcon' export type AttachmentLinkProps = { /** Name of link/attachment */ @@ -31,15 +39,43 @@ const AttachmentLink: FC = ({ const text = [name, formattedSize].join(' ').trim() const textA11y = [name, formattedSizeA11y].join(' ').trim() - return ( - - ) + const theme = useTheme() + if (featureEnabled('useOldLinkComponent')) { + const pressableProps: PressableProps = { + onPress: onPress, + accessibilityRole: 'button', + accessible: true, + } + + const a11yProps: AccessibilityProps = { + accessibilityLabel: textA11y, + ...a11yHintProp(a11yHint || ''), + accessibilityValue: a11yValue ? { text: a11yValue } : {}, + } + + return ( + + + + + + + {text} + + + + ) + } else { + return ( + + ) + } } export default AttachmentLink diff --git a/VAMobile/src/components/LinkWithAnalytics.tsx b/VAMobile/src/components/LinkWithAnalytics.tsx index 822c5849928..bd3e570f3f1 100644 --- a/VAMobile/src/components/LinkWithAnalytics.tsx +++ b/VAMobile/src/components/LinkWithAnalytics.tsx @@ -1,13 +1,18 @@ import React from 'react' import { Link, LinkProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Link/Link' +import { LocationData } from '@department-of-veterans-affairs/mobile-component-library/src/utils/OSfunctions' import _ from 'lodash' import { Events } from 'constants/analytics' import { logAnalyticsEvent } from 'utils/analytics' import { useTheme } from 'utils/hooks' +import { isIOS } from 'utils/platform' +import { featureEnabled } from 'utils/remoteConfig' import Box from './Box' +import ClickForActionLinkDeprecated, { LinkTypeOptionsConstants, LinkUrlIconType } from './ClickForActionLinkDeprecated' +import TextView from './TextView' export type LinkWithAnalyticsProps = LinkProps & { /** optional additional analytics function */ @@ -17,6 +22,28 @@ export type LinkWithAnalyticsProps = LinkProps & { /** optional boolean to turn off padding */ disablePadding?: boolean } +/** Function to convert location data into a URL for handling by Apple/Google Maps */ +const FormDirectionsUrl = (location: LocationData): string => { + const { name, address, latitude, longitude } = location + const addressString = Object.values(address || {}).join(' ') + + const APPLE_MAPS_BASE_URL = 'https://maps.apple.com/' + const GOOGLE_MAPS_BASE_URL = 'https://www.google.com/maps/dir/' + + if (isIOS()) { + const queryString = new URLSearchParams({ + t: 'm', // type: map + daddr: `${addressString}+${name}+${latitude},${longitude}`, + }).toString() + return `${APPLE_MAPS_BASE_URL}?${queryString}` + } else { + const queryString = new URLSearchParams({ + api: '1', + destination: addressString || `${latitude},${longitude}`, + }).toString() + return `${GOOGLE_MAPS_BASE_URL}?${queryString}` + } +} /** Wrapper for the Link component which adds analytics */ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, ...props }: LinkWithAnalyticsProps) => { @@ -36,11 +63,39 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, . onConfirm: () => logAnalyticsEvent(Events.vama_link_confirm(definedProps)), } - return ( - - - - ) + if (featureEnabled('useOldLinkComponent')) { + let linkType = '' + if (props.type === 'attachment') { + return ERROR: Type "attachment" not supported with useOldLinkComponent enabled + } else if (props.type === 'call TTY') { + linkType = 'callTTY' + } else { + linkType = props.type + } + + const directionsURL = locationData ? FormDirectionsUrl(locationData) : '' + + return ( + { + props.analytics?.onPress?.() + analyticsOnPress && analyticsOnPress() + }} + testID={props.testID} + /> + ) + } else { + return ( + + + + ) + } } export default LinkWithAnalytics diff --git a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/ClaimExamAppointment.tsx b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/ClaimExamAppointment.tsx index 4b81bf1b091..8cb9103cd63 100644 --- a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/ClaimExamAppointment.tsx +++ b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/ClaimExamAppointment.tsx @@ -5,6 +5,7 @@ import { UseMutateFunction } from '@tanstack/react-query' import { AppointmentAttributes } from 'api/types' import { Box, TextArea } from 'components' import { AppointmentDetailsSubType, AppointmentDetailsTypeConstants } from 'utils/appointments' +import { featureEnabled } from 'utils/remoteConfig' import { AppointmentCalendarButton, @@ -17,6 +18,7 @@ import { AppointmentProvider, AppointmentReasonAndComment, AppointmentTypeOfCare, + DEPRECATED_AppointmentCalendarButton, } from './SharedComponents' type ClaimExamAppointmentProps = { @@ -40,12 +42,21 @@ function ClaimExamAppointment({