Chore/9630-UseDesignSystemSnackbarComponent

VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch

@@ -1,3 +1,15 @@
+diff --git a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/Snackbar.tsx b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/Snackbar.tsx
+index 6b2f54d..8931ba9 100644
+--- a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/Snackbar.tsx
++++ b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/Snackbar.tsx
+@@ -160,6 +160,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
+       minHeight: 44,
+       padding: spacing.vadsSpaceSm,
+       marginHorizontal: spacing.vadsSpaceLg,
++      marginBottom: spacing.vadsSpaceLg,
+       rowGap: spacing.vadsSpace2xs,
+     },
+   }
 diff --git a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx
 index 2e5c464..a696fa9 100644
 --- a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbar.tsx
@@ -41,3 +53,15 @@ index 2e5c464..a696fa9 100644
 +    }), [show, toast.hideAll, toast.isOpen]
 +  )
  }
+diff --git a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbarDefaultOffset.tsx b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbarDefaultOffset.tsx
+index e7679fa..135c5fa 100644
+--- a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbarDefaultOffset.tsx
++++ b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/Snackbar/useSnackbarDefaultOffset.tsx
+@@ -1,6 +1,6 @@
+ import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+-const NAV_BAR_HEIGHT = 60
++const NAV_BAR_HEIGHT = 56
+
+ /**
+  * Returns default Snackbar offset depending on safe area bottom inset

VAMobile/src/App.tsx

@@ -16,7 +16,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 { SnackbarProvider, useSnackbar } 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'
@@ -406,6 +406,7 @@ export function AppTabs() {
 }
 
 export function AuthedApp() {
+  const snackbar = useSnackbar()
   const headerStyles = useHeaderStyles()
   const { initialUrl } = useNotificationContext()
   const homeScreens = getHomeScreens()
@@ -423,7 +424,19 @@ export function AuthedApp() {
 
   return (
     <>
-      <RootNavStack.Navigator screenOptions={{ ...headerStyles, detachPreviousScreen: false }} initialRouteName="Tabs">
+      <RootNavStack.Navigator
+        screenOptions={{ ...headerStyles, detachPreviousScreen: false }}
+        initialRouteName="Tabs"
+        screenListeners={{
+          transitionStart: (e) => {
+            if (e.data.closing) {
+              snackbar.hide()
+            }
+          },
+          blur: () => {
+            snackbar.hide()
+          },
+        }}>
         <RootNavStack.Screen
           name="Tabs"
           component={AppTabs}

VAMobile/src/components/Templates/MultiStepSubtask.tsx

@@ -3,6 +3,8 @@ import React, { createContext, useCallback, useContext, useState } from 'react'
 import { ParamListBase, useFocusEffect } from '@react-navigation/native'
 import { TransitionPresets, createStackNavigator } from '@react-navigation/stack'
 
+import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { FullScreenSubtask, FullScreenSubtaskProps } from 'components'
 
 /**
@@ -38,13 +40,27 @@ type MultiStepSubtaskProps<T extends ParamListBase> = FullScreenSubtaskProps & {
 }
 
 function MultiStepSubtask<T extends ParamListBase>({ ...props }: MultiStepSubtaskProps<T>) {
+  const snackbar = useSnackbar()
   const { children, stackNavigator } = props
   const [subtaskProps, setSubtaskProps] = useState<FullScreenSubtaskProps>({})
 
   return (
     <FullScreenSubtask {...subtaskProps}>
       <SubtaskContext.Provider value={{ setSubtaskProps }}>
-        <stackNavigator.Navigator screenOptions={subtaskScreenOptions}>{children}</stackNavigator.Navigator>
+        <stackNavigator.Navigator
+          screenOptions={subtaskScreenOptions}
+          screenListeners={{
+            transitionStart: (e) => {
+              if (e.data.closing) {
+                snackbar.hide()
+              }
+            },
+            blur: () => {
+              snackbar.hide()
+            },
+          }}>
+          {children}
+        </stackNavigator.Navigator>
       </SubtaskContext.Provider>
     </FullScreenSubtask>
   )

VAMobile/src/constants/analytics.ts

@@ -1149,14 +1149,6 @@ export const Events = {
       name: 'vama_sm_start',
     }
   },
-  // vama_snackbar_null: (location: string): Event => {
-  //   return {
-  //     name: 'vama_snackbar_null',
-  //     params: {
-  //       location,
-  //     },
-  //   }
-  // },
   vama_sso_cookie_received: (received: boolean): Event => {
     return {
       name: 'vama_sso_cookie_received',

VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/AskForClaimDecision/AskForClaimDecision.tsx

@@ -104,7 +104,8 @@ function AskForClaimDecision({ navigation, route }: AskForClaimDecisionProps) {
         setSubmittedDecision(true)
         snackbar.show('Request sent')
       },
-      onError: () => snackbar.show('Request could not be sent', { isError: true, onActionPressed: () => onSubmit }),
+      onError: () =>
+        snackbar.show('Request could not be sent', { isError: true, offset: 0, onActionPressed: () => onSubmit }),
     }
     submitClaimDecision(claimID, mutateOptions)
   }

VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/UploadFile/UploadFile.tsx

@@ -146,7 +146,11 @@ function UploadFile({ navigation, route }: UploadFileProps) {
         snackbar.show(t('fileUpload.submitted'))
       },
       onError: () =>
-        snackbar.show(t('fileUpload.submitted.error'), { isError: true, onActionPressed: onUploadConfirmed }),
+        snackbar.show(t('fileUpload.submitted.error'), {
+          isError: true,
+          offset: 0,
+          onActionPressed: onUploadConfirmed,
+        }),
     }
     const params: UploadFileToClaimParamaters = { claimID, documentType: documentType, request, files: filesList }
     uploadFileToClaim(params, mutateOptions)

VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/UploadOrAddPhotos/UploadOrAddPhotos.tsx

@@ -149,7 +149,11 @@ function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) {
         snackbar.show(t('fileUpload.submitted'))
       },
       onError: () =>
-        snackbar.show(t('fileUpload.submitted.error'), { isError: true, onActionPressed: onUploadConfirmed }),
+        snackbar.show(t('fileUpload.submitted.error'), {
+          isError: true,
+          offset: 0,
+          onActionPressed: onUploadConfirmed,
+        }),
     }
     const params: UploadFileToClaimParamaters = {
       claimID,

VAMobile/src/screens/HealthScreen/SecureMessaging/CancelConfirmations/ComposeCancelConfirmation.tsx

@@ -82,6 +82,7 @@ export function useComposeCancelConfirmation(): [
             onError: () => {
               snackbar.show(t('secureMessaging.draft.saved.error'), {
                 isError: true,
+                offset: 0,
                 onActionPressed: () => saveDraft(params, mutateOptions),
               })
             },

VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx

@@ -189,6 +189,7 @@ function EditDraft({ navigation, route }: EditDraftProps) {
         const params: SendMessageParameters = { messageData: messageData, uploads: attachmentsList }
         snackbar.show(t('secureMessaging.startNewMessage.sent.error'), {
           isError: true,
+          offset: 0,
           onActionPressed: () => sendMessage(params, mutateOptions),
         })
       }
@@ -271,6 +272,7 @@ function EditDraft({ navigation, route }: EditDraftProps) {
             onError: () => {
               snackbar.show(t('secureMessaging.deleteDraft.snackBarErrorMessage'), {
                 isError: true,
+                offset: 0,
                 onActionPressed: () => deleteDraft(params, mutateOptions),
               })
             },
@@ -478,6 +480,7 @@ function EditDraft({ navigation, route }: EditDraftProps) {
           onError: () => {
             snackbar.show(t('secureMessaging.draft.saved.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () => saveDraft(params, mutateOptions),
             })
           },

VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx

@@ -219,6 +219,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) {
           onError: () => {
             snackbar.show(t('secureMessaging.draft.saved.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () =>
                 saveDraft(
                   {
@@ -253,6 +254,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) {
           } else {
             snackbar.show(t('secureMessaging.startNewMessage.sent.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () =>
                 sendMessage(
                   {

VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx

@@ -306,6 +306,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
           onError: () => {
             snackbar.show(t('secureMessaging.draft.saved.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () => {
                 // passing messageDataRef to ensure we have the latest messageData
                 saveDraft({ messageData: messageDataRef.current }, mutateOptions)
@@ -332,6 +333,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
           } else {
             snackbar.show(t('secureMessaging.startNewMessage.sent.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () => {
                 // passing messageDataRef to ensure we have the latest messageData
                 sendMessage({ messageData: messageDataRef.current, uploads: attachmentsList }, mutateOptions)

VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx

@@ -112,7 +112,11 @@ function AddressValidation({
       const mutateOptions = {
         onSuccess: () => snackbar.show(GenerateAddressMessage(t, addressType, false)),
         onError: () =>
-          snackbar.show(GenerateAddressMessage(t, addressType, true), { isError: true, onActionPressed: () => save }),
+          snackbar.show(GenerateAddressMessage(t, addressType, true), {
+            isError: true,
+            offset: 0,
+            onActionPressed: () => save,
+          }),
       }
       saveAddress({ addressData, revalidate }, mutateOptions)
     }

VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx

@@ -215,6 +215,7 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) {
       onError: () =>
         snackbar.show(t('contactInformation.residentialAddress.removed.error'), {
           isError: true,
+          offset: 0,
           onActionPressed: () => deleteAddress,
         }),
     }
@@ -274,7 +275,11 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) {
             }
           },
           onError: () =>
-            snackbar.show(GenerateAddressMessage(t, addressType, true), { isError: true, onActionPressed: () => save }),
+            snackbar.show(GenerateAddressMessage(t, addressType, true), {
+              isError: true,
+              offset: 0,
+              onActionPressed: () => save,
+            }),
         },
       )
     }

VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx

@@ -99,10 +99,11 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) {
       onError: (error: unknown) => {
         if (isErrorObject(error)) {
           if (error.status === 400) {
-            snackbar.show(t('contactInformation.emailAddress.not.saved'), { isError: true })
+            snackbar.show(t('contactInformation.emailAddress.not.saved'), { isError: true, offset: 0 })
           } else {
             snackbar.show(t('contactInformation.emailAddress.not.saved'), {
               isError: true,
+              offset: 0,
               onActionPressed: () => saveEmail(emailData, mutateOptions),
             })
           }
@@ -130,6 +131,7 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) {
       onError: () =>
         snackbar.show(t('contactInformation.emailAddress.not.removed'), {
           isError: true,
+          offset: 0,
           onActionPressed: () => deleteEmail(emailData, mutateOptions),
         }),
     }

VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx

@@ -130,6 +130,7 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) {
           isErrorObject(error) &&
           snackbar.show(t('contactInformation.phoneNumber.not.saved', { type: displayTitle }), {
             isError: true,
+            offset: 0,
             onActionPressed: save,
           }),
       }
@@ -147,6 +148,7 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) {
           isErrorObject(error) &&
           snackbar.show(t('contactInformation.phoneNumber.not.removed', { type: displayTitle }), {
             isError: true,
+            offset: 0,
             onActionPressed: () => deletePhoneNumber(phoneData, mutateOptions),
           }),
       }

VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/GenderIdentityScreen/GenderIdentityScreen.tsx

@@ -101,6 +101,7 @@ function GenderIdentityScreen({ navigation }: GenderIdentityScreenProps) {
         onError: () =>
           snackbar.show(t('personalInformation.genderIdentity.not.saved'), {
             isError: true,
+            offset: 0,
             onActionPressed: updateGenderIdentity,
           }),
       }

VAMobile/src/screens/HomeScreen/ProfileScreen/PersonalInformationScreen/PreferredNameScreen/PreferredNameScreen.tsx

@@ -69,6 +69,7 @@ function PreferredNameScreen({ navigation }: PreferredNameScreenProps) {
       onError: () =>
         snackbar.show(t('personalInformation.preferredName.notSaved'), {
           isError: true,
+          offset: 0,
           onActionPressed: updatePreferredName,
         }),
     }

VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx

@@ -122,6 +122,7 @@ function EditDirectDepositScreen({ navigation, route }: EditDirectDepositProps)
           if (!routingNumberError) {
             snackbar.show(t('directDeposit.saved.error'), {
               isError: true,
+              offset: 0,
               onActionPressed: () => updateBankInfo(updateBankData, mutateOptions),
             })
           }