From 3f5c125650d4d5562abcd650a26b9af790469b2c Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Wed, 20 Nov 2024 12:21:56 -0700 Subject: [PATCH 01/19] Incorporated SnackbarProvider --- VAMobile/src/App.tsx | 5 ++++- VAMobile/src/testUtils.tsx | 9 +++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/VAMobile/src/App.tsx b/VAMobile/src/App.tsx index bce892ba296..64961526d50 100644 --- a/VAMobile/src/App.tsx +++ b/VAMobile/src/App.tsx @@ -19,6 +19,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native' import { createStackNavigator } from '@react-navigation/stack' +import { SnackbarProvider } from '@department-of-veterans-affairs/mobile-component-library' import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet' import { QueryClientProvider } from '@tanstack/react-query' import { ThemeProvider } from 'styled-components' @@ -186,7 +187,9 @@ function MainApp() { barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'} backgroundColor={currentTheme.colors.background.main} /> - + + + diff --git a/VAMobile/src/testUtils.tsx b/VAMobile/src/testUtils.tsx index be051175d9a..3c2ce9384a3 100644 --- a/VAMobile/src/testUtils.tsx +++ b/VAMobile/src/testUtils.tsx @@ -6,6 +6,7 @@ import { Provider } from 'react-redux' import { NavigationContainer } from '@react-navigation/native' +import { SnackbarProvider } from '@department-of-veterans-affairs/mobile-component-library' import { AnyAction, Store, configureStore } from '@reduxjs/toolkit' import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query' import { render as rtlRender } from '@testing-library/react-native' @@ -215,7 +216,9 @@ function render(ui, { preloadedState, navigationProvided = false, queriesData, . - {children} + + {children} + @@ -228,7 +231,9 @@ function render(ui, { preloadedState, navigationProvided = false, queriesData, . - {children} + + {children} + From 4289723e77793e18d8eb0e06316da6d214219c0a Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Thu, 21 Nov 2024 12:05:01 -0700 Subject: [PATCH 02/19] Incorporated Design System Snackbar Component into all Benefits screens --- .../screens/BenefitsScreen/BenefitsScreen.tsx | 10 ++++++---- .../AskForClaimDecision/AskForClaimDecision.tsx | 10 +++++----- .../SelectFile/UploadFile/UploadFile.tsx | 16 +++++----------- .../UploadOrAddPhotos/UploadOrAddPhotos.tsx | 16 +++++----------- .../ClaimLettersScreen/ClaimLettersScreen.tsx | 12 +++++------- 5 files changed, 26 insertions(+), 38 deletions(-) diff --git a/VAMobile/src/screens/BenefitsScreen/BenefitsScreen.tsx b/VAMobile/src/screens/BenefitsScreen/BenefitsScreen.tsx index 60fbcfaf95e..f49a503bea8 100644 --- a/VAMobile/src/screens/BenefitsScreen/BenefitsScreen.tsx +++ b/VAMobile/src/screens/BenefitsScreen/BenefitsScreen.tsx @@ -4,10 +4,11 @@ import { useTranslation } from 'react-i18next' import { useIsFocused } from '@react-navigation/native' import { CardStyleInterpolators, StackScreenProps, createStackNavigator } from '@react-navigation/stack' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' + import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices' import { useClaimsAndAppeals } from 'api/claimsAndAppeals' import { Box, CategoryLanding, CategoryLandingAlert, LargeNavButton } from 'components' -import { CloseSnackbarOnNavigation } from 'constants/common' import { NAMESPACE } from 'constants/namespaces' import { FEATURE_LANDING_TEMPLATE_OPTIONS } from 'constants/screens' import ClaimsScreen from 'screens/BenefitsScreen/ClaimsScreen' @@ -101,6 +102,7 @@ const BenefitsScreenStack = createStackNavigator() * Stack screen for the Benefits tab. Screens placed within this stack will appear in the context of the app level tab navigator */ function BenefitsStackScreen() { + const snackbar = useSnackbar() const screenOptions = { headerShown: false, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, @@ -111,11 +113,11 @@ function BenefitsStackScreen() { screenListeners={{ transitionStart: (e) => { if (e.data.closing) { - CloseSnackbarOnNavigation(e.target) + snackbar.hide() } }, - blur: (e) => { - CloseSnackbarOnNavigation(e.target) + blur: () => { + snackbar.hide() }, }}> diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision.tsx index dcc19beb709..04ad2ed0156 100644 --- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision.tsx +++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useClaim, useSubmitClaimDecision } from 'api/claimsAndAppeals' import { @@ -27,17 +28,16 @@ import { ScreenIDTypesConstants } from 'store/api/types/Screens' import { a11yLabelVA } from 'utils/a11yLabel' import { logAnalyticsEvent } from 'utils/analytics' import { numberOfItemsNeedingAttentionFromVet } from 'utils/claims' -import { showSnackBar } from 'utils/common' -import { useAppDispatch, useDestructiveActionSheet, useRouteNavigation, useTheme } from 'utils/hooks' +import { useDestructiveActionSheet, useRouteNavigation, useTheme } from 'utils/hooks' import { FileRequestStackParams } from '../FileRequestSubtask' type AskForClaimDecisionProps = StackScreenProps function AskForClaimDecision({ navigation, route }: AskForClaimDecisionProps) { + const snackbar = useSnackbar() const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) - const dispatch = useAppDispatch() const { claimID } = route.params const { data: claim, error: loadingClaimError, refetch: refetchClaim, isFetching: loadingClaim } = useClaim(claimID) const { @@ -102,9 +102,9 @@ function AskForClaimDecision({ navigation, route }: AskForClaimDecisionProps) { const mutateOptions = { onSuccess: () => { setSubmittedDecision(true) - showSnackBar('Request sent', dispatch, undefined, true, false, true) + snackbar.show('Request sent') }, - onError: () => showSnackBar('Request could not be sent', dispatch, () => onSubmit, false, true), + onError: () => snackbar.show('Request could not be sent', { isError: true, onActionPressed: () => onSubmit }), } submitClaimDecision(claimID, mutateOptions) } diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile.tsx index ddab96776e9..09e3293a7e0 100644 --- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile.tsx +++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile.tsx @@ -7,7 +7,7 @@ import { ScrollView } from 'react-native/types' import { StackActions } from '@react-navigation/native' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' -import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, ButtonVariants, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useUploadFileToClaim } from 'api/claimsAndAppeals' import { ClaimEventData, UploadFileToClaimParamaters } from 'api/types' @@ -22,7 +22,6 @@ import { VAScrollView, } from 'components' import FileList from 'components/FileList' -import { SnackbarMessages } from 'components/SnackBar' import { useSubtaskProps } from 'components/Templates/MultiStepSubtask' import SubtaskTitle from 'components/Templates/SubtaskTitle' import { Events } from 'constants/analytics' @@ -32,9 +31,7 @@ import { NAMESPACE } from 'constants/namespaces' import { DocumentPickerResponse } from 'screens/BenefitsScreen/BenefitsStackScreens' import { logAnalyticsEvent, logNonFatalErrorToFirebase } from 'utils/analytics' import { MAX_TOTAL_FILE_SIZE_IN_BYTES, isValidFileType } from 'utils/claims' -import { showSnackBar } from 'utils/common' import { - useAppDispatch, useBeforeNavBackListener, useDestructiveActionSheet, useRouteNavigation, @@ -48,11 +45,11 @@ import { FileRequestStackParams } from '../../FileRequestSubtask' type UploadFileProps = StackScreenProps function UploadFile({ navigation, route }: UploadFileProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() const { claimID, request: originalRequest, fileUploaded } = route.params const [filesUploadedSuccess, setFilesUploadedSuccess] = useState(false) - const dispatch = useAppDispatch() const navigateTo = useRouteNavigation() const [filesList, setFilesList] = useState([fileUploaded]) const { mutate: uploadFileToClaim, isPending: loadingFileUpload } = useUploadFileToClaim( @@ -62,10 +59,6 @@ function UploadFile({ navigation, route }: UploadFileProps) { ) const confirmAlert = useDestructiveActionSheet() const [request, setRequest] = useState(originalRequest) - const snackbarMessages: SnackbarMessages = { - successMsg: t('fileUpload.submitted'), - errorMsg: t('fileUpload.submitted.error'), - } const [error, setError] = useState('') const [isActionSheetVisible, setIsActionSheetVisible] = useState(false) const [filesEmptyError, setFilesEmptyError] = useState(false) @@ -150,9 +143,10 @@ function UploadFile({ navigation, route }: UploadFileProps) { 'file', ), ) - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true) + snackbar.show(t('fileUpload.submitted')) }, - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, onUploadConfirmed, false, true), + onError: () => + snackbar.show(t('fileUpload.submitted.error'), { isError: true, onActionPressed: onUploadConfirmed }), } const params: UploadFileToClaimParamaters = { claimID, documentType: documentType, request, files: filesList } uploadFileToClaim(params, mutateOptions) diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos.tsx index 5e951643bb7..77cca34159d 100644 --- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos.tsx +++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos.tsx @@ -6,7 +6,7 @@ import { Asset, ImagePickerResponse } from 'react-native-image-picker/src/types' import { StackActions } from '@react-navigation/native' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' -import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import _ from 'underscore' import { useUploadFileToClaim } from 'api/claimsAndAppeals' @@ -23,7 +23,6 @@ import { TextView, VAScrollView, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { useSubtaskProps } from 'components/Templates/MultiStepSubtask' import SubtaskTitle from 'components/Templates/SubtaskTitle' import { Events } from 'constants/analytics' @@ -33,9 +32,7 @@ import { NAMESPACE } from 'constants/namespaces' import { logAnalyticsEvent } from 'utils/analytics' import { deletePhoto, onAddPhotos } from 'utils/claims' import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common' -import { showSnackBar } from 'utils/common' import { - useAppDispatch, useBeforeNavBackListener, useDestructiveActionSheet, useOrientation, @@ -50,12 +47,12 @@ import { FileRequestStackParams } from '../../FileRequestSubtask' type UploadOrAddPhotosProps = StackScreenProps function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() const showActionSheetWithOptions = useShowActionSheet() const { claimID, request: originalRequest, firstImageResponse } = route.params const [filesUploadedSuccess, setFilesUploadedSuccess] = useState(false) - const dispatch = useAppDispatch() const isPortrait = useOrientation() const [imagesList, setImagesList] = useState(firstImageResponse.assets) const { mutate: uploadFileToClaim, isPending: loadingFileUpload } = useUploadFileToClaim( @@ -71,10 +68,6 @@ function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) { const navigateTo = useRouteNavigation() const [request, setRequest] = useState(originalRequest) const scrollViewRef = useRef(null) - const snackbarMessages: SnackbarMessages = { - successMsg: t('fileUpload.submitted'), - errorMsg: t('fileUpload.submitted.error'), - } const [imagesEmptyError, setImagesEmptyError] = useState(false) const waygate = getWaygateToggles().WG_UploadOrAddPhotos @@ -153,9 +146,10 @@ function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) { 'photo', ), ) - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true) + snackbar.show(t('fileUpload.submitted')) }, - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, onUploadConfirmed, false, true), + onError: () => + snackbar.show(t('fileUpload.submitted.error'), { isError: true, onActionPressed: onUploadConfirmed }), } const params: UploadFileToClaimParamaters = { claimID, diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimLettersScreen/ClaimLettersScreen.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimLettersScreen/ClaimLettersScreen.tsx index f97a6583a39..0bd0a17c7a7 100644 --- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimLettersScreen/ClaimLettersScreen.tsx +++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimLettersScreen/ClaimLettersScreen.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next' import { useNavigationState } from '@react-navigation/native' import { StackScreenProps } from '@react-navigation/stack' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useQueryClient } from '@tanstack/react-query' import { useDecisionLetters, useDownloadDecisionLetter } from 'api/decisionLetters' @@ -23,7 +24,7 @@ import { BenefitsStackParamList } from 'screens/BenefitsScreen/BenefitsStackScre import { DowntimeFeatureTypeConstants, ScreenIDTypesConstants } from 'store/api/types' import { VATypographyThemeVariants } from 'styles/theme' import { logAnalyticsEvent } from 'utils/analytics' -import { getA11yLabelText, isErrorObject, showSnackBar } from 'utils/common' +import { getA11yLabelText, isErrorObject } from 'utils/common' import { formatDateMMMMDDYYYY } from 'utils/formattingUtils' import { useAppDispatch, useDowntime, useTheme } from 'utils/hooks' import { screenContentAllowed } from 'utils/waygateConfig' @@ -33,6 +34,7 @@ import NoClaimLettersScreen from './NoClaimLettersScreen/NoClaimLettersScreen' type ClaimLettersScreenProps = StackScreenProps const ClaimLettersScreen = ({ navigation }: ClaimLettersScreenProps) => { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() const dispatch = useAppDispatch() @@ -61,13 +63,9 @@ const ClaimLettersScreen = ({ navigation }: ClaimLettersScreenProps) => { useEffect(() => { if (downloadLetterErrorDetails && isErrorObject(downloadLetterErrorDetails)) { - if (!snackBar) { - logAnalyticsEvent(Events.vama_snackbar_null('ClaimLetters view letter')) - } - snackBar?.hideAll() - showSnackBar(t('claimLetters.download.error'), dispatch, refetchLetter, false, true, true) + snackbar.show(t('claimLetters.download.error'), { isError: true, onActionPressed: refetchLetter }) } - }, [downloadLetterErrorDetails, queryClient, dispatch, t, refetchLetter]) + }, [downloadLetterErrorDetails, queryClient, dispatch, t, refetchLetter, snackbar]) const letterButtons = decisionLetters.map((letter, index) => { const { typeDescription, receivedAt } = letter.attributes From 8ce113acd3c3b5e4b1e3faf1f44f4c8e24703446 Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:07:37 -0700 Subject: [PATCH 03/19] Incorporated Design System Snackbar Component into all Health screens --- .../AppointmentCancelReschedule.tsx | 32 +++-------- .../src/screens/HealthScreen/HealthScreen.tsx | 10 ++-- .../ComposeCancelConfirmation.tsx | 18 +++--- .../SecureMessaging/EditDraft/EditDraft.tsx | 50 +++++++--------- .../ReplyMessage/ReplyMessage.tsx | 48 +++++----------- .../StartNewMessage/StartNewMessage.tsx | 53 +++++++---------- .../ViewMessage/ViewMessageScreen.tsx | 57 +++++-------------- 7 files changed, 93 insertions(+), 175 deletions(-) diff --git a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentCancelReschedule.tsx b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentCancelReschedule.tsx index 01ef5df9e66..53e8d6c006a 100644 --- a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentCancelReschedule.tsx +++ b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentCancelReschedule.tsx @@ -2,6 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { UseMutateFunction } from '@tanstack/react-query' import { TFunction } from 'i18next' @@ -9,7 +10,6 @@ import { AppointmentAttributes, AppointmentLocation } from 'api/types' import { Box, BoxProps, ClickToCallPhoneNumber, LinkWithAnalytics, TextView } from 'components' import { Events } from 'constants/analytics' import { NAMESPACE } from 'constants/namespaces' -import { AppDispatch } from 'store' import { VATheme } from 'styles/theme' import { a11yLabelVA } from 'utils/a11yLabel' import { logAnalyticsEvent } from 'utils/analytics' @@ -21,9 +21,8 @@ import { getAppointmentAnalyticsDays, getAppointmentAnalyticsStatus, } from 'utils/appointments' -import { showSnackBar } from 'utils/common' import getEnv from 'utils/env' -import { useAppDispatch, useDestructiveActionSheet, useDestructiveActionSheetProps, useTheme } from 'utils/hooks' +import { useDestructiveActionSheet, useDestructiveActionSheetProps, useTheme } from 'utils/hooks' const { LINK_URL_VA_SCHEDULING, WEBVIEW_URL_FACILITY_LOCATOR } = getEnv() @@ -57,7 +56,7 @@ const cancelButton = ( goBack: () => void, t: TFunction, theme: VATheme, - dispatch: AppDispatch, + snackbar: ReturnType, confirmAlert: (props: useDestructiveActionSheetProps) => void, cancelId?: string, cancelAppointment?: UseMutateFunction, @@ -76,14 +75,7 @@ const cancelButton = ( const mutateOptions = { onSuccess: () => { goBack() - showSnackBar( - pendingAppointment ? t('appointments.requestCanceled') : t('appointments.appointmentCanceled'), - dispatch, - undefined, - true, - false, - true, - ) + snackbar.show(pendingAppointment ? t('appointments.requestCanceled') : t('appointments.appointmentCanceled')) logAnalyticsEvent( Events.vama_appt_cancel( pendingAppointment, @@ -95,15 +87,9 @@ const cancelButton = ( ) }, onError: () => { - showSnackBar( + snackbar.show( pendingAppointment ? t('appointments.requestNotCanceled') : t('appointments.appointmentNotCanceled'), - dispatch, - () => { - cancelAppointment(cancelId, mutateOptions) - }, - false, - true, - true, + { isError: true, onActionPressed: () => cancelAppointment(cancelId, mutateOptions) }, ) }, } @@ -296,9 +282,9 @@ function AppointmentCancelReschedule({ goBack, cancelAppointment, }: AppointmentCancelRescheduleProps) { + const snackbar = useSnackbar() const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) - const dispatch = useAppDispatch() const confirmAlert = useDestructiveActionSheet() const { location, cancelId } = attributes || ({} as AppointmentAttributes) @@ -320,7 +306,7 @@ function AppointmentCancelReschedule({ goBack, t, theme, - dispatch, + snackbar, confirmAlert, cancelId, cancelAppointment, @@ -366,7 +352,7 @@ function AppointmentCancelReschedule({ goBack, t, theme, - dispatch, + snackbar, confirmAlert, cancelId, cancelAppointment, diff --git a/VAMobile/src/screens/HealthScreen/HealthScreen.tsx b/VAMobile/src/screens/HealthScreen/HealthScreen.tsx index 2e5c64dc43d..afbc5830edb 100644 --- a/VAMobile/src/screens/HealthScreen/HealthScreen.tsx +++ b/VAMobile/src/screens/HealthScreen/HealthScreen.tsx @@ -6,6 +6,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage' import { useIsFocused } from '@react-navigation/native' import { CardStyleInterpolators, StackScreenProps, createStackNavigator } from '@react-navigation/stack' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' + import { useAppointments } from 'api/appointments' import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices' import { useFacilitiesInfo } from 'api/facilities/getFacilitiesInfo' @@ -13,7 +15,6 @@ import { usePrescriptions } from 'api/prescriptions' import { useFolders } from 'api/secureMessaging' import { AnnouncementBanner, Box, CategoryLanding, CategoryLandingAlert, LargeNavButton, TextView } from 'components' import { TimeFrameTypeConstants } from 'constants/appointments' -import { CloseSnackbarOnNavigation } from 'constants/common' import { NAMESPACE } from 'constants/namespaces' import { FEATURE_LANDING_TEMPLATE_OPTIONS } from 'constants/screens' import { DowntimeFeatureTypeConstants } from 'store/api/types' @@ -200,6 +201,7 @@ const HealthScreenStack = createStackNavigator() * Stack screen for the Health tab. Screens placed within this stack will appear in the context of the app level tab navigator */ function HealthStackScreen({}: HealthStackScreenProps) { + const snackbar = useSnackbar() const screenOptions = { headerShown: false, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, @@ -210,11 +212,11 @@ function HealthStackScreen({}: HealthStackScreenProps) { screenListeners={{ transitionStart: (e) => { if (e.data.closing) { - CloseSnackbarOnNavigation(e.target) + snackbar.hide() } }, - blur: (e) => { - CloseSnackbarOnNavigation(e.target) + blur: () => { + snackbar.hide() }, }}> diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/CancelConfirmations/ComposeCancelConfirmation.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/CancelConfirmations/ComposeCancelConfirmation.tsx index 73a8bbf40d2..feaa5d3b91e 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/CancelConfirmations/ComposeCancelConfirmation.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/CancelConfirmations/ComposeCancelConfirmation.tsx @@ -1,17 +1,16 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useQueryClient } from '@tanstack/react-query' import { secureMessagingKeys, useSaveDraft } from 'api/secureMessaging' import { SaveDraftParameters, SecureMessagingFormData, SecureMessagingSystemFolderIdConstants } from 'api/types' -import { SnackbarMessages } from 'components/SnackBar' import { Events } from 'constants/analytics' import { NAMESPACE } from 'constants/namespaces' import { FolderNameTypeConstants, FormHeaderType, FormHeaderTypeConstants } from 'constants/secureMessaging' import { logAnalyticsEvent } from 'utils/analytics' -import { showSnackBar } from 'utils/common' -import { useAppDispatch, useDestructiveActionSheet, useRouteNavigation } from 'utils/hooks' +import { useDestructiveActionSheet, useRouteNavigation } from 'utils/hooks' type ComposeCancelConfirmationProps = { /** Contents of the message */ @@ -30,18 +29,14 @@ export function useComposeCancelConfirmation(): [ isDiscarded: boolean, composeCancelConfirmation: (props: ComposeCancelConfirmationProps) => void, ] { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) - const dispatch = useAppDispatch() const navigateTo = useRouteNavigation() const confirmationAlert = useDestructiveActionSheet() const goToDrafts = useGoToDrafts() const queryClient = useQueryClient() const [isDiscarded, setIsDiscarded] = useState(false) const { mutate: saveDraft } = useSaveDraft() - const snackbarMessages: SnackbarMessages = { - successMsg: t('secureMessaging.draft.saved'), - errorMsg: t('secureMessaging.draft.saved.error'), - } return [ isDiscarded, @@ -70,7 +65,7 @@ export function useComposeCancelConfirmation(): [ const params: SaveDraftParameters = { messageData: message, replyID: replyToID, messageID: draftMessageID } const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.draft.saved')) logAnalyticsEvent(Events.vama_sm_save_draft(messageData.category)) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, SecureMessagingSystemFolderIdConstants.DRAFTS], @@ -85,7 +80,10 @@ export function useComposeCancelConfirmation(): [ }) }, onError: () => { - showSnackBar(snackbarMessages.errorMsg, dispatch, () => saveDraft(params, mutateOptions), false, true) + snackbar.show(t('secureMessaging.draft.saved.error'), { + isError: true, + onActionPressed: () => saveDraft(params, mutateOptions), + }) }, } saveDraft(params, mutateOptions) diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx index ac68fa5c401..9beab5a9523 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx @@ -4,7 +4,7 @@ import { ScrollView } from 'react-native' import { StackScreenProps } from '@react-navigation/stack' -import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useQueryClient } from '@tanstack/react-query' import { DateTime } from 'luxon' import _ from 'underscore' @@ -45,7 +45,6 @@ import { TextView, } from 'components' import { MenuViewActionsType } from 'components/Menu' -import { SnackbarMessages } from 'components/SnackBar' import { Events } from 'constants/analytics' import { SecureMessagingErrorCodesConstants } from 'constants/errors' import { NAMESPACE } from 'constants/namespaces' @@ -54,10 +53,9 @@ import { HealthStackParamList } from 'screens/HealthScreen/HealthStackScreens' import { ScreenIDTypesConstants } from 'store/api/types' import { a11yLabelVA } from 'utils/a11yLabel' import { logAnalyticsEvent } from 'utils/analytics' -import { isErrorObject, showSnackBar } from 'utils/common' +import { isErrorObject } from 'utils/common' import { hasErrorCode } from 'utils/errors' import { - useAppDispatch, useAttachments, useBeforeNavBackListener, useDestructiveActionSheet, @@ -78,26 +76,12 @@ import { renderMessages } from '../ViewMessage/ViewMessageScreen' type EditDraftProps = StackScreenProps function EditDraft({ navigation, route }: EditDraftProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() - const dispatch = useAppDispatch() const goToDrafts = useGoToDrafts() const navigateTo = useRouteNavigation() const queryClient = useQueryClient() - const snackbarMessages: SnackbarMessages = { - successMsg: t('secureMessaging.deleteDraft.snackBarMessage'), - errorMsg: t('secureMessaging.deleteDraft.snackBarErrorMessage'), - } - const saveSnackbarMessages: SnackbarMessages = { - successMsg: t('secureMessaging.draft.saved'), - errorMsg: t('secureMessaging.draft.saved.error'), - } - - const snackbarSentMessages: SnackbarMessages = { - successMsg: t('secureMessaging.startNewMessage.sent'), - errorMsg: t('secureMessaging.startNewMessage.sent.error'), - } - const { data: recipients, isFetched: hasLoadedRecipients, @@ -197,21 +181,23 @@ function EditDraft({ navigation, route }: EditDraftProps) { : { recipient_id: parseInt(to, 10), category, body, subject, draft_id: messageID } const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarSentMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.startNewMessage.sent')) logAnalyticsEvent(Events.vama_sm_send_message(messageData.category, undefined)) navigateTo('SecureMessaging', { activeTab: 1 }) }, } const params: SendMessageParameters = { messageData: messageData, uploads: attachmentsList } - showSnackBar(snackbarSentMessages.errorMsg, dispatch, () => sendMessage(params, mutateOptions), false, true) + snackbar.show(t('secureMessaging.startNewMessage.sent.error'), { + isError: true, + onActionPressed: () => sendMessage(params, mutateOptions), + }) } } }, [ - dispatch, + snackbar, + t, sendMessageError, sendMessageErrorDetails, - snackbarSentMessages.successMsg, - snackbarSentMessages.errorMsg, attachmentsList, category, messageID, @@ -271,7 +257,7 @@ function EditDraft({ navigation, route }: EditDraftProps) { const params: DeleteMessageParameters = { messageID: messageID } const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.deleteDraft.snackBarMessage')) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, SecureMessagingSystemFolderIdConstants.DRAFTS], }) @@ -283,7 +269,10 @@ function EditDraft({ navigation, route }: EditDraftProps) { goToDraftFolder(false) }, onError: () => { - showSnackBar(snackbarMessages.errorMsg, dispatch, () => deleteDraft(params, mutateOptions), false, true) + snackbar.show(t('secureMessaging.deleteDraft.snackBarErrorMessage'), { + isError: true, + onActionPressed: () => deleteDraft(params, mutateOptions), + }) }, } deleteDraft(params, mutateOptions) @@ -476,7 +465,7 @@ function EditDraft({ navigation, route }: EditDraftProps) { const params: SaveDraftParameters = { messageData: messageData, messageID: messageID, replyID: replyToID } const mutateOptions = { onSuccess: () => { - showSnackBar(saveSnackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.draft.saved')) logAnalyticsEvent(Events.vama_sm_save_draft(messageData.category)) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.message, messageID], @@ -487,7 +476,10 @@ function EditDraft({ navigation, route }: EditDraftProps) { goToDraftFolder(true) }, onError: () => { - showSnackBar(saveSnackbarMessages.errorMsg, dispatch, () => saveDraft(params, mutateOptions), false, true) + snackbar.show(t('secureMessaging.draft.saved.error'), { + isError: true, + onActionPressed: () => saveDraft(params, mutateOptions), + }) }, } saveDraft(params, mutateOptions) @@ -495,7 +487,7 @@ function EditDraft({ navigation, route }: EditDraftProps) { } else { const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarSentMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.startNewMessage.sent')) logAnalyticsEvent(Events.vama_sm_send_message(messageData.category, undefined)) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, SecureMessagingSystemFolderIdConstants.DRAFTS], diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx index 893a9ff49c1..8e6ef12da0d 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx @@ -4,7 +4,7 @@ import { ScrollView } from 'react-native' import { StackScreenProps } from '@react-navigation/stack' -import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useQueryClient } from '@tanstack/react-query' import _ from 'underscore' @@ -37,17 +37,15 @@ import { TextArea, TextView, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { Events } from 'constants/analytics' import { SecureMessagingErrorCodesConstants } from 'constants/errors' import { NAMESPACE } from 'constants/namespaces' import { FolderNameTypeConstants, FormHeaderTypeConstants, PREPOPULATE_SIGNATURE } from 'constants/secureMessaging' import { HealthStackParamList } from 'screens/HealthScreen/HealthStackScreens' import { logAnalyticsEvent } from 'utils/analytics' -import { isErrorObject, showSnackBar } from 'utils/common' +import { isErrorObject } from 'utils/common' import { hasErrorCode } from 'utils/errors' import { - useAppDispatch, useAttachments, useBeforeNavBackListener, useDestructiveActionSheet, @@ -64,9 +62,9 @@ import { renderMessages } from '../ViewMessage/ViewMessageScreen' type ReplyMessageProps = StackScreenProps function ReplyMessage({ navigation, route }: ReplyMessageProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() - const dispatch = useAppDispatch() const draftAttachmentAlert = useDestructiveActionSheet() const navigateTo = useRouteNavigation() const queryClient = useQueryClient() @@ -125,16 +123,6 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { const messageDataRef = useRef(messageData) messageDataRef.current = messageData - const snackbarMessages: SnackbarMessages = { - successMsg: t('secureMessaging.draft.saved'), - errorMsg: t('secureMessaging.draft.saved.error'), - } - - const snackbarSentMessages: SnackbarMessages = { - successMsg: t('secureMessaging.startNewMessage.sent'), - errorMsg: t('secureMessaging.startNewMessage.sent.error'), - } - const goToCancel = () => { replyCancelConfirmation({ origin: FormHeaderTypeConstants.reply, @@ -216,7 +204,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { const params: SaveDraftParameters = { messageData: reducedMessageData, replyID: message.messageId } const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.draft.saved')) logAnalyticsEvent(Events.vama_sm_save_draft(reducedMessageData.category)) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, SecureMessagingSystemFolderIdConstants.DRAFTS], @@ -229,13 +217,12 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { }) }, onError: () => { - showSnackBar( - snackbarMessages.errorMsg, - dispatch, - // passing messageDataRef to ensure we have the latest messageData - () => + snackbar.show(t('secureMessaging.draft.saved.error'), { + isError: true, + onActionPressed: () => saveDraft( { + // passing messageDataRef to ensure we have the latest messageData messageData: { body: messageDataRef.current.body, category: messageDataRef.current.category, @@ -244,9 +231,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { }, mutateOptions, ), - false, - true, - ) + }) }, } saveDraft(params, mutateOptions) @@ -254,7 +239,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { } else { const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarSentMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.startNewMessage.sent')) logAnalyticsEvent(Events.vama_sm_send_message(messageData.category, undefined)) navigateTo('SecureMessaging', { activeTab: 0 }) }, @@ -266,22 +251,19 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) { ) { setReplyTriageError(true) } else { - showSnackBar( - snackbarSentMessages.errorMsg, - dispatch, - // passing messageDataRef to ensure we have the latest messageData - () => + snackbar.show(t('secureMessaging.startNewMessage.sent.error'), { + isError: true, + onActionPressed: () => sendMessage( { + // passing messageDataRef to ensure we have the latest messageData messageData: messageDataRef.current, uploads: attachmentsList, replyToID: message.messageId, }, mutateOptions, ), - false, - true, - ) + }) } }, } diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx index bc5b464dfa7..609be4adaf0 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx @@ -4,7 +4,7 @@ import { ScrollView } from 'react-native' import { StackScreenProps } from '@react-navigation/stack' -import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useQueryClient } from '@tanstack/react-query' import _ from 'underscore' @@ -37,7 +37,6 @@ import { PickerItem, TextArea, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { Events } from 'constants/analytics' import { SecureMessagingErrorCodesConstants } from 'constants/errors' import { NAMESPACE } from 'constants/namespaces' @@ -46,10 +45,9 @@ import { HealthStackParamList } from 'screens/HealthScreen/HealthStackScreens' import { ScreenIDTypesConstants } from 'store/api/types' import { a11yLabelVA } from 'utils/a11yLabel' import { logAnalyticsEvent } from 'utils/analytics' -import { isErrorObject, showSnackBar } from 'utils/common' +import { isErrorObject } from 'utils/common' import { hasErrorCode } from 'utils/errors' import { - useAppDispatch, useAttachments, useBeforeNavBackListener, useDestructiveActionSheet, @@ -70,23 +68,12 @@ import { useComposeCancelConfirmation } from '../CancelConfirmations/ComposeCanc type StartNewMessageProps = StackScreenProps function StartNewMessage({ navigation, route }: StartNewMessageProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() - const dispatch = useAppDispatch() const draftAttachmentAlert = useDestructiveActionSheet() const navigateTo = useRouteNavigation() const queryClient = useQueryClient() - - const snackbarMessages: SnackbarMessages = { - successMsg: t('secureMessaging.draft.saved'), - errorMsg: t('secureMessaging.draft.saved.error'), - } - - const snackbarSentMessages: SnackbarMessages = { - successMsg: t('secureMessaging.startNewMessage.sent'), - errorMsg: t('secureMessaging.startNewMessage.sent.error'), - } - const { mutate: saveDraft, isPending: savingDraft } = useSaveDraft() const { mutate: sendMessage, @@ -304,7 +291,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) { const params: SaveDraftParameters = { messageData: messageData } const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.draft.saved')) logAnalyticsEvent(Events.vama_sm_save_draft(messageData.category)) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, SecureMessagingSystemFolderIdConstants.DRAFTS], @@ -317,14 +304,13 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) { }) }, onError: () => { - showSnackBar( - snackbarMessages.errorMsg, - dispatch, - // passing messageDataRef to ensure we have the latest messageData - () => saveDraft({ messageData: messageDataRef.current }, mutateOptions), - false, - true, - ) + snackbar.show(t('secureMessaging.draft.saved.error'), { + isError: true, + onActionPressed: () => { + // passing messageDataRef to ensure we have the latest messageData + saveDraft({ messageData: messageDataRef.current }, mutateOptions) + }, + }) }, } saveDraft(params, mutateOptions) @@ -332,7 +318,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) { } else { const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarSentMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('secureMessaging.startNewMessage.sent')) logAnalyticsEvent(Events.vama_sm_send_message(messageData.category, undefined)) navigateTo('SecureMessaging', { activeTab: 0 }) }, @@ -344,14 +330,13 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) { ) { setReplyTriageError(true) } else { - showSnackBar( - snackbarSentMessages.errorMsg, - dispatch, - // passing messageDataRef to ensure we have the latest messageData - () => sendMessage({ messageData: messageDataRef.current, uploads: attachmentsList }, mutateOptions), - false, - true, - ) + snackbar.show(t('secureMessaging.startNewMessage.sent.error'), { + isError: true, + onActionPressed: () => { + // passing messageDataRef to ensure we have the latest messageData + sendMessage({ messageData: messageDataRef.current, uploads: attachmentsList }, mutateOptions) + }, + }) } }, } diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx index f4b215db10a..70bcd588b81 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { IconProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon' import { useQueryClient } from '@tanstack/react-query' import { DateTime } from 'luxon' @@ -40,7 +41,6 @@ import { VAIconProps, VAModalPicker, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { Events, UserAnalytics } from 'constants/analytics' import { NAMESPACE } from 'constants/namespaces' import { FolderNameTypeConstants, READ, REPLY_WINDOW_IN_DAYS } from 'constants/secureMessaging' @@ -50,8 +50,7 @@ import { ScreenIDTypesConstants } from 'store/api/types/Screens' import { DemoState } from 'store/slices/demoSlice' import { GenerateFolderMessage } from 'translations/en/functions' import { logAnalyticsEvent, setAnalyticsUserProperty } from 'utils/analytics' -import { showSnackBar } from 'utils/common' -import { useAppDispatch, useDowntimeByScreenID, useTheme } from 'utils/hooks' +import { useDowntimeByScreenID, useTheme } from 'utils/hooks' import { registerReviewEvent } from 'utils/inAppReviews' import { getfolderName } from 'utils/secureMessaging' import { screenContentAllowed } from 'utils/waygateConfig' @@ -105,9 +104,9 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { const folderWhereMessageIs = useRef(currentFolderIdParam.toString()) const folderWhereMessagePreviousewas = useRef(folderWhereMessageIs.current) + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() - const dispatch = useAppDispatch() const queryClient = useQueryClient() const { demoMode } = useSelector((state) => state.demo) @@ -271,12 +270,6 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { const currentFolder = Number(folderWhereMessageIs.current) folderWhereMessagePreviousewas.current = currentFolder.toString() const newFolder = Number(value) - const snackbarMessages: SnackbarMessages = { - successMsg: GenerateFolderMessage(t, newFolder, folders, false, false), - errorMsg: GenerateFolderMessage(t, newFolder, folders, false, true), - undoMsg: GenerateFolderMessage(t, currentFolder, folders, true, false), - undoErrorMsg: GenerateFolderMessage(t, currentFolder, folders, true, true), - } if (folderWhereMessageIs.current !== value) { setNewCurrentFolderID(value) folderWhereMessageIs.current = value @@ -299,10 +292,8 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.message, messageID] }) queryClient.invalidateQueries({ queryKey: [secureMessagingKeys.folderMessages, currentFolderIdParam] }) logAnalyticsEvent(Events.vama_sm_move_outcome(folder())) - showSnackBar( - snackbarMessages.successMsg, - dispatch, - () => { + snackbar.show(GenerateFolderMessage(t, newFolder, folders, false, false), { + onActionPressed: () => { const undoParams: MoveMessageParameters = { messageID: messageID, newFolderID: currentFolder } const undoMutateOptions = { onSuccess: () => { @@ -311,46 +302,28 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { queryKey: [secureMessagingKeys.folderMessages, currentFolderIdParam], }) logAnalyticsEvent(Events.vama_sm_move_outcome(folder())) - showSnackBar( - snackbarMessages.undoMsg ? snackbarMessages.undoMsg : snackbarMessages.successMsg, - dispatch, - undefined, - true, - false, - true, - ) + snackbar.show(GenerateFolderMessage(t, currentFolder, folders, true, false)) setNewCurrentFolderID(folderWhereMessagePreviousewas.current) folderWhereMessageIs.current = folderWhereMessagePreviousewas.current }, onError: () => { - showSnackBar( - snackbarMessages.undoErrorMsg ? snackbarMessages.undoErrorMsg : snackbarMessages.errorMsg, - dispatch, - () => moveMessage(undoParams, undoMutateOptions), - false, - true, - true, - ) + snackbar.show(GenerateFolderMessage(t, currentFolder, folders, true, true), { + isError: true, + onActionPressed: () => moveMessage(undoParams, undoMutateOptions), + }) setNewCurrentFolderID(folderWhereMessagePreviousewas.current) folderWhereMessageIs.current = folderWhereMessagePreviousewas.current }, } moveMessage(undoParams, undoMutateOptions) }, - false, - false, - true, - ) + }) }, onError: () => { - showSnackBar( - snackbarMessages.undoErrorMsg ? snackbarMessages.undoErrorMsg : snackbarMessages.errorMsg, - dispatch, - () => moveMessage(params, mutateOptions), - false, - true, - true, - ) + snackbar.show(GenerateFolderMessage(t, currentFolder, folders, true, true), { + isError: true, + onActionPressed: () => moveMessage(params, mutateOptions), + }) setNewCurrentFolderID(folderWhereMessagePreviousewas.current) folderWhereMessageIs.current = folderWhereMessagePreviousewas.current }, From 7a1fa17b736f3ec5b52ef9aa6a59d84d353020ad Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Fri, 22 Nov 2024 09:54:28 -0700 Subject: [PATCH 04/19] Incorporated Design System Snackbar Component into all Home screens --- .../src/screens/HomeScreen/HomeScreen.tsx | 9 ++-- .../AddressValidation.test.tsx | 9 +--- .../AddressValidation/AddressValidation.tsx | 20 ++++---- .../EditAddressScreen/EditAddressScreen.tsx | 37 +++++---------- .../EditEmailScreen/EditEmailScreen.tsx | 47 ++++++------------- .../EditPhoneNumberScreen.tsx | 41 ++++++---------- .../GenderIdentityScreen.tsx | 20 ++++---- .../PreferredNameScreen.tsx | 21 ++++----- .../DeveloperScreen/DeveloperScreen.tsx | 7 +-- .../DeveloperScreen/RemoteConfigScreen.tsx | 6 +-- VAMobile/src/translations/en/functions.ts | 14 ++---- 11 files changed, 92 insertions(+), 139 deletions(-) diff --git a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx index 54512751724..163b70aff24 100644 --- a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx @@ -8,6 +8,7 @@ import { useIsFocused } from '@react-navigation/native' import { CardStyleInterpolators, createStackNavigator } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon' import { colors as DSColors } from '@department-of-veterans-affairs/mobile-tokens' import { DateTime } from 'luxon' @@ -41,7 +42,6 @@ import { } from 'components' import { Events } from 'constants/analytics' import { TimeFrameTypeConstants } from 'constants/appointments' -import { CloseSnackbarOnNavigation } from 'constants/common' import { NAMESPACE } from 'constants/namespaces' import { FEATURE_LANDING_TEMPLATE_OPTIONS } from 'constants/screens' import { FolderNameTypeConstants } from 'constants/secureMessaging' @@ -534,6 +534,7 @@ const HomeScreenStack = createStackNavigator() * Stack screen for the Home tab. Screens placed within this stack will appear in the context of the app level tab navigator */ function HomeStackScreen({}: HomeStackScreenProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const screenOptions = { headerShown: false, @@ -547,11 +548,11 @@ function HomeStackScreen({}: HomeStackScreenProps) { screenListeners={{ transitionStart: (e) => { if (e.data.closing) { - CloseSnackbarOnNavigation(e.target) + snackbar.hide() } }, - blur: (e) => { - CloseSnackbarOnNavigation(e.target) + blur: () => { + snackbar.hide() }, }}> diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.test.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.test.tsx index 8ab7ac287dd..e0c09eedf85 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.test.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.test.tsx @@ -3,9 +3,9 @@ import React from 'react' import { fireEvent, screen } from '@testing-library/react-native' import { AddressData, ValidateAddressData } from 'api/types' -import { SnackbarMessages } from 'components/SnackBar' import { render } from 'testUtils' +import { profileAddressOptions } from '../AddressSummary' import AddressValidation from './AddressValidation' const mockAddress: AddressData = { @@ -19,11 +19,6 @@ const mockAddress: AddressData = { zipCode: '95403', } -const snackbarMessages: SnackbarMessages = { - successMsg: 'Address saved', - errorMsg: 'Address could not be saved', -} - const validationData: ValidateAddressData = { confirmedSuggestedAddresses: [ { @@ -75,7 +70,7 @@ describe('AddressValidation', () => { setShowAddressValidation: (shouldShow: boolean) => void @@ -33,12 +34,12 @@ export type AddressValidationProps = { function AddressValidation({ addressEntered, addressId, - snackbarMessages, + addressType, validationData, saveAddress, setShowAddressValidation, }: AddressValidationProps) { - const dispatch = useAppDispatch() + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const navigation = useNavigation() const theme = useTheme() @@ -109,8 +110,9 @@ function AddressValidation({ const save = () => { const mutateOptions = { - onSuccess: () => showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true), - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, () => save, false, true), + onSuccess: () => snackbar.show(GenerateAddressMessage(t, addressType, false)), + onError: () => + snackbar.show(GenerateAddressMessage(t, addressType, true), { isError: true, onActionPressed: () => save }), } saveAddress({ addressData, revalidate }, mutateOptions) } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx index 0cc8459b7ef..929084faa1c 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx @@ -4,7 +4,7 @@ import { ScrollView, TextInput } from 'react-native' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' -import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, ButtonVariants, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { RootNavStackParamList } from 'App' import { useContactInformation } from 'api/contactInformation' @@ -22,15 +22,13 @@ import { VATextInputTypes, ValidationFunctionItems, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { Countries } from 'constants/countries' import { MilitaryPostOffices } from 'constants/militaryPostOffices' import { MilitaryStates } from 'constants/militaryStates' import { NAMESPACE } from 'constants/namespaces' import { States } from 'constants/states' -import { GenerateAddressMessages } from 'translations/en/functions' -import { showSnackBar } from 'utils/common' -import { useAlert, useAppDispatch, useBeforeNavBackListener, useDestructiveActionSheet, useTheme } from 'utils/hooks' +import { GenerateAddressMessage } from 'translations/en/functions' +import { useAlert, useBeforeNavBackListener, useDestructiveActionSheet, useTheme } from 'utils/hooks' import { getAddressDataPayload } from 'utils/personalInformation' import { profileAddressOptions } from '../AddressSummary' @@ -79,9 +77,9 @@ export type AddressDataEditedFields = type IEditAddressScreen = StackScreenProps function EditAddressScreen({ navigation, route }: IEditAddressScreen) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() - const dispatch = useAppDispatch() const { displayTitle, addressType } = route.params const { data: contactInformation } = useContactInformation() const { mutate: deleteAddress, isPending: deletingAddress, isSuccess: addressDeleted } = useDeleteAddress() @@ -97,13 +95,6 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) { const zipCodeRef = useRef(null) const cityRef = useRef(null) - const snackbarMessages: SnackbarMessages = GenerateAddressMessages(t, addressType) - - const removalSnackbarMessages: SnackbarMessages = { - successMsg: t('contactInformation.residentialAddress.removed'), - errorMsg: t('contactInformation.residentialAddress.removed.error'), - } - const getInitialState = (itemToGet: AddressDataEditedFields): string => { const item = contactInformation?.[addressType]?.[itemToGet] return item ? item : '' @@ -220,15 +211,12 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) { } const mutateOptions = { - onSuccess: () => showSnackBar(removalSnackbarMessages.successMsg, dispatch, undefined, true, false, true), + onSuccess: () => snackbar.show(t('contactInformation.residentialAddress.removed')), onError: () => - showSnackBar( - removalSnackbarMessages.errorMsg, - dispatch, - () => deleteAddress(currentAddressData, mutateOptions), - false, - true, - ), + snackbar.show(t('contactInformation.residentialAddress.removed.error'), { + isError: true, + onActionPressed: () => deleteAddress, + }), } deleteAddress(currentAddressData, mutateOptions) } @@ -282,10 +270,11 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) { setShowAddressValidation(true) } else { setAddressValidated(true) - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(GenerateAddressMessage(t, addressType, false)) } }, - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, () => save, false, true), + onError: () => + snackbar.show(GenerateAddressMessage(t, addressType, true), { isError: true, onActionPressed: () => save }), }, ) } @@ -578,7 +567,7 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) { @@ -30,7 +29,7 @@ type EditEmailScreenProps = StackScreenProps * Screen for editing a users email in the personal info section */ function EditEmailScreen({ navigation }: EditEmailScreenProps) { - const dispatch = useAppDispatch() + const snackbar = useSnackbar() const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) const { data: contactInformation } = useContactInformation() @@ -56,11 +55,6 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) { setSaveDisabled(formContainsError) }, [formContainsError]) - const saveSnackbarMessages: SnackbarMessages = { - successMsg: t('contactInformation.emailAddress.saved'), - errorMsg: t('contactInformation.emailAddress.not.saved'), - } - useBeforeNavBackListener(navigation, (e) => { if (noPageChanges()) { return @@ -100,20 +94,17 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) { const mutateOptions = { onSuccess: () => { - showSnackBar(saveSnackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('contactInformation.emailAddress.saved')) }, onError: (error: unknown) => { if (isErrorObject(error)) { if (error.status === 400) { - showSnackBar(saveSnackbarMessages.errorMsg, dispatch, undefined, true, true) + snackbar.show(t('contactInformation.emailAddress.not.saved'), { isError: true }) } else { - showSnackBar( - saveSnackbarMessages.errorMsg, - dispatch, - () => saveEmail(emailData, mutateOptions), - false, - true, - ) + snackbar.show(t('contactInformation.emailAddress.not.saved'), { + isError: true, + onActionPressed: () => saveEmail(emailData, mutateOptions), + }) } } }, @@ -121,11 +112,6 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) { saveEmail(emailData, mutateOptions) } - const removeSnackbarMessages: SnackbarMessages = { - successMsg: t('contactInformation.emailAddress.removed'), - errorMsg: t('contactInformation.emailAddress.not.removed'), - } - const onDelete = (): void => { const originalEmail = contactInformation?.contactEmail?.emailAddress @@ -140,15 +126,12 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) { } const mutateOptions = { - onSuccess: () => showSnackBar(removeSnackbarMessages.successMsg, dispatch, undefined, true, false, true), + onSuccess: () => snackbar.show(t('contactInformation.emailAddress.removed')), onError: () => - showSnackBar( - removeSnackbarMessages.errorMsg, - dispatch, - () => deleteEmail(emailData, mutateOptions), - false, - true, - ), + snackbar.show(t('contactInformation.emailAddress.not.removed'), { + isError: true, + onActionPressed: () => deleteEmail(emailData, mutateOptions), + }), } deleteEmail(emailData, mutateOptions) } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx index 99c72e77d9c..8e3db9afdae 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx @@ -4,7 +4,7 @@ import { ScrollView } from 'react-native' import { StackScreenProps } from '@react-navigation/stack' -import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, ButtonVariants, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { useDeletePhoneNumber, useSavePhoneNumber } from 'api/contactInformation' import { useContactInformation } from 'api/contactInformation/getContactInformation' @@ -18,18 +18,17 @@ import { FullScreenSubtask, LoadingComponent, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { MAX_DIGITS, MAX_DIGITS_AFTER_FORMAT } from 'constants/common' import { NAMESPACE } from 'constants/namespaces' import { HomeStackParamList } from 'screens/HomeScreen/HomeStackScreens' -import { getFormattedPhoneNumber, isErrorObject, showSnackBar } from 'utils/common' +import { getFormattedPhoneNumber, isErrorObject } from 'utils/common' import { formatPhoneNumber, getNumbersFromString } from 'utils/formattingUtils' -import { useAlert, useAppDispatch, useBeforeNavBackListener, useDestructiveActionSheet, useTheme } from 'utils/hooks' +import { useAlert, useBeforeNavBackListener, useDestructiveActionSheet, useTheme } from 'utils/hooks' type IEditPhoneNumberScreen = StackScreenProps function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) { - const dispatch = useAppDispatch() + const snackbar = useSnackbar() const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) const { displayTitle, phoneType, phoneData } = route.params @@ -55,11 +54,6 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) { } }, [phoneNumberDeleted, phoneNumberSaved, navigation]) - const saveSnackbarMessages: SnackbarMessages = { - successMsg: t('contactInformation.phoneNumber.saved', { type: displayTitle }), - errorMsg: t('contactInformation.phoneNumber.not.saved', { type: displayTitle }), - } - useBeforeNavBackListener(navigation, (e) => { if (noPageChanges()) { return @@ -130,10 +124,14 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) { const save = (): void => { const mutateOptions = { onSuccess: () => { - showSnackBar(saveSnackbarMessages.successMsg, dispatch, undefined, true, false, true) + snackbar.show(t('contactInformation.phoneNumber.saved', { type: displayTitle })) }, onError: (error: unknown) => - isErrorObject(error) && showSnackBar(saveSnackbarMessages.errorMsg, dispatch, save, false, true, true), + isErrorObject(error) && + snackbar.show(t('contactInformation.phoneNumber.not.saved', { type: displayTitle }), { + isError: true, + onActionPressed: save, + }), } savePhoneNumber(phoneDataPayload, mutateOptions) } @@ -141,25 +139,16 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) { save() } - const removeSnackbarMessages: SnackbarMessages = { - successMsg: t('contactInformation.phoneNumber.removed', { type: displayTitle }), - errorMsg: t('contactInformation.phoneNumber.not.removed', { type: displayTitle }), - } - const onDelete = (): void => { if (phoneData) { const mutateOptions = { - onSuccess: () => showSnackBar(removeSnackbarMessages.successMsg, dispatch, undefined, true, false, true), + onSuccess: () => snackbar.show(t('contactInformation.phoneNumber.removed', { type: displayTitle })), onError: (error: unknown) => isErrorObject(error) && - showSnackBar( - removeSnackbarMessages.errorMsg, - dispatch, - () => deletePhoneNumber(phoneData, mutateOptions), - false, - true, - true, - ), + snackbar.show(t('contactInformation.phoneNumber.not.removed', { type: displayTitle }), { + isError: true, + onActionPressed: () => deletePhoneNumber(phoneData, mutateOptions), + }), } deletePhoneNumber(phoneData, mutateOptions) } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/GenderIdentityScreen/GenderIdentityScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/GenderIdentityScreen/GenderIdentityScreen.tsx index 2362cc268ca..1dc9dfec566 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/GenderIdentityScreen/GenderIdentityScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/GenderIdentityScreen/GenderIdentityScreen.tsx @@ -4,6 +4,8 @@ import { Pressable } from 'react-native' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' + import { useDemographics } from 'api/demographics/getDemographics' import { useGenderIdentityOptions } from 'api/demographics/getGenderIdentityOptions' import { useUpdateGenderIdentity } from 'api/demographics/updateGenderIdentity' @@ -17,15 +19,12 @@ import { TextView, radioOption, } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { Events } from 'constants/analytics' import { NAMESPACE } from 'constants/namespaces' import { HomeStackParamList } from 'screens/HomeScreen/HomeStackScreens' import { ScreenIDTypesConstants } from 'store/api/types/Screens' import { logAnalyticsEvent } from 'utils/analytics' -import { showSnackBar } from 'utils/common' import { - useAppDispatch, useBeforeNavBackListener, useDestructiveActionSheet, useDowntimeByScreenID, @@ -51,10 +50,10 @@ function GenderIdentityScreen({ navigation }: GenderIdentityScreenProps) { error: getGenderIdentityOptionsError, refetch: refetchGenderIdentityOptions, } = useGenderIdentityOptions() + const snackbar = useSnackbar() const genderIdentityMutation = useUpdateGenderIdentity() const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) - const dispatch = useAppDispatch() const navigateTo = useRouteNavigation() const confirmAlert = useDestructiveActionSheet() const genderIdentityInDowntime = useDowntimeByScreenID(ScreenIDTypesConstants.GENDER_IDENTITY_SCREEN_ID) @@ -62,11 +61,6 @@ function GenderIdentityScreen({ navigation }: GenderIdentityScreenProps) { const [error, setError] = useState('') const [genderIdentity, setGenderIdentity] = useState(demographics?.genderIdentity) - const snackbarMessages: SnackbarMessages = { - successMsg: t('personalInformation.genderIdentity.saved'), - errorMsg: t('personalInformation.genderIdentity.not.saved'), - } - useEffect(() => { if (genderIdentityMutation.isSuccess) { navigation.goBack() @@ -103,8 +97,12 @@ function GenderIdentityScreen({ navigation }: GenderIdentityScreenProps) { const updateGenderIdentity = () => { if (genderIdentity) { const mutateOptions = { - onSuccess: () => showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false, true), - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, updateGenderIdentity, false, true, true), + onSuccess: () => snackbar.show(t('personalInformation.genderIdentity.saved')), + onError: () => + snackbar.show(t('personalInformation.genderIdentity.not.saved'), { + isError: true, + onActionPressed: updateGenderIdentity, + }), } genderIdentityMutation.mutate(genderIdentity, mutateOptions) } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/PreferredNameScreen/PreferredNameScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/PreferredNameScreen/PreferredNameScreen.tsx index ac10720d395..05741771a39 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/PreferredNameScreen/PreferredNameScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/PreferredNameScreen/PreferredNameScreen.tsx @@ -3,25 +3,25 @@ import { useTranslation } from 'react-i18next' import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' + import { useDemographics } from 'api/demographics/getDemographics' import { useUpdatePreferredName } from 'api/demographics/updatePreferredName' import { Box, FieldType, FormFieldType, FormWrapper, FullScreenSubtask, LoadingComponent } from 'components' -import { SnackbarMessages } from 'components/SnackBar' import { NAMESPACE } from 'constants/namespaces' import { HomeStackParamList } from 'screens/HomeScreen/HomeStackScreens' -import { showSnackBar } from 'utils/common' import { stringToTitleCase } from 'utils/formattingUtils' -import { useAppDispatch, useDestructiveActionSheet, useTheme } from 'utils/hooks' +import { useDestructiveActionSheet, useTheme } from 'utils/hooks' type PreferredNameScreenProps = StackScreenProps const MAX_NAME_LENGTH = 25 function PreferredNameScreen({ navigation }: PreferredNameScreenProps) { + const snackbar = useSnackbar() const { data: demographics } = useDemographics() const preferredNameMutation = useUpdatePreferredName() const { t } = useTranslation(NAMESPACE.COMMON) - const dispatch = useAppDispatch() const theme = useTheme() const confirmAlert = useDestructiveActionSheet() @@ -34,11 +34,6 @@ function PreferredNameScreen({ navigation }: PreferredNameScreenProps) { const [onSaveClicked, setOnSaveClicked] = useState(false) const [resetErrors, setResetErrors] = useState(false) - const snackbarMessages: SnackbarMessages = { - successMsg: t('personalInformation.preferredName.saved'), - errorMsg: t('personalInformation.preferredName.notSaved'), - } - const onConfirmCancel = (): void => { if (preferredName !== getInitialState()) { confirmAlert({ @@ -68,10 +63,14 @@ function PreferredNameScreen({ navigation }: PreferredNameScreenProps) { const updatePreferredName = () => { const mutateOptions = { onSuccess: () => { - showSnackBar(snackbarMessages.successMsg, dispatch, undefined, true, false) + snackbar.show(t('personalInformation.preferredName.saved')) navigation.goBack() }, - onError: () => showSnackBar(snackbarMessages.errorMsg, dispatch, updatePreferredName, false, true, true), + onError: () => + snackbar.show(t('personalInformation.preferredName.notSaved'), { + isError: true, + onActionPressed: updatePreferredName, + }), } preferredNameMutation.mutate(preferredName, mutateOptions) } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/DeveloperScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/DeveloperScreen.tsx index 3d0c0425eb1..a23c2657664 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/DeveloperScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/DeveloperScreen.tsx @@ -7,6 +7,7 @@ import { useFocusEffect } from '@react-navigation/native' import { StackScreenProps } from '@react-navigation/stack' import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { pick } from 'underscore' import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices' @@ -27,7 +28,6 @@ import { RootState } from 'store' import { AnalyticsState } from 'store/slices' import { toggleFirebaseDebugMode } from 'store/slices/analyticsSlice' import { AuthState, debugResetFirstTimeLogin } from 'store/slices/authSlice' -import { showSnackBar } from 'utils/common' import getEnv, { EnvVars } from 'utils/env' import { FeatureConstants, @@ -43,6 +43,7 @@ import { STORAGE_REVIEW_EVENT_KEY, resetReviewActionCount } from 'utils/inAppRev type DeveloperScreenSettingsScreenProps = StackScreenProps function DeveloperScreen({ navigation }: DeveloperScreenSettingsScreenProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const { authCredentials } = useSelector((state) => state.auth) const { data: userAuthorizedServices } = useAuthorizedServices() @@ -152,9 +153,9 @@ function DeveloperScreen({ navigation }: DeveloperScreenSettingsScreenProps) { try { await resetReviewActionCount() getAsyncStoredData(STORAGE_REVIEW_EVENT_KEY, setReviewCount) - showSnackBar('In app review actions reset', dispatch, undefined, true, false, true) + snackbar.show('In app review actions reset') } catch { - showSnackBar('Failed to reset in app review actions', dispatch, resetInAppReview, false, true) + snackbar.show('Failed to reset in app review actions', { isError: true, onActionPressed: resetInAppReview }) } } diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/RemoteConfigScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/RemoteConfigScreen.tsx index 9043e7bf6c0..e36a89bf5b0 100644 --- a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/RemoteConfigScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/DeveloperScreen/RemoteConfigScreen.tsx @@ -5,7 +5,7 @@ import remoteConfig from '@react-native-firebase/remote-config' import { useIsFocused } from '@react-navigation/native' import { StackScreenProps } from '@react-navigation/stack' -import { Button } from '@department-of-veterans-affairs/mobile-component-library' +import { Button, useSnackbar } from '@department-of-veterans-affairs/mobile-component-library' import { forEach } from 'underscore' import { @@ -21,7 +21,6 @@ import { import { NAMESPACE } from 'constants/namespaces' import { HomeStackParamList } from 'screens/HomeScreen/HomeStackScreens' import { logout } from 'store/slices/authSlice' -import { showSnackBar } from 'utils/common' import { useAppDispatch, useRouteNavigation, useTheme } from 'utils/hooks' import { FeatureToggleType, getFeatureToggles, setDebugConfig } from 'utils/remoteConfig' import { getWaygateToggles, setWaygateDebugConfig } from 'utils/waygateConfig' @@ -29,6 +28,7 @@ import { getWaygateToggles, setWaygateDebugConfig } from 'utils/waygateConfig' type RemoteConfigScreenSettingsScreenProps = StackScreenProps function RemoteConfigScreen({ navigation }: RemoteConfigScreenSettingsScreenProps) { + const snackbar = useSnackbar() const { t } = useTranslation(NAMESPACE.COMMON) const theme = useTheme() const dispatch = useAppDispatch() @@ -137,7 +137,7 @@ function RemoteConfigScreen({ navigation }: RemoteConfigScreenSettingsScreenProp