From a65ef1ab95b10711097bc323cca3aeaae9a712d0 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Thu, 27 Jun 2024 15:34:38 -0600
Subject: [PATCH 01/21] Upgrade mobile-component-library and
 eslint-config-mobile

---
 VAMobile/package.json |  4 +--
 VAMobile/yarn.lock    | 67 ++++++++++++++-----------------------------
 2 files changed, 23 insertions(+), 48 deletions(-)

diff --git a/VAMobile/package.json b/VAMobile/package.json
index c5d266630e7..9f0735ee1ed 100644
--- a/VAMobile/package.json
+++ b/VAMobile/package.json
@@ -37,7 +37,7 @@
     "pods": "cd ios && pod install && cd .."
   },
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-component-library": "0.16.0",
+    "@department-of-veterans-affairs/mobile-component-library": "0.19.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-firebase/analytics": "^18.9.0",
@@ -90,7 +90,7 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/runtime": "^7.24.7",
-    "@department-of-veterans-affairs/eslint-config-mobile": "0.15.0",
+    "@department-of-veterans-affairs/eslint-config-mobile": "0.18.0",
     "@react-native/babel-preset": "0.74.83",
     "@react-native/eslint-config": "^0.73.2",
     "@react-native/metro-config": "^0.74.84",
diff --git a/VAMobile/yarn.lock b/VAMobile/yarn.lock
index 67bce470eab..d17c3fce2d7 100644
--- a/VAMobile/yarn.lock
+++ b/VAMobile/yarn.lock
@@ -1386,35 +1386,35 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@department-of-veterans-affairs/eslint-config-mobile@0.15.0":
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/eslint-config-mobile/-/eslint-config-mobile-0.15.0.tgz#f86b29f5ef8bad6c8a36cea8340e5cfa18ff93a1"
-  integrity sha512-sEFu9Akkommf9y7aDWXjvWfwDfY50cqjMBTAIaYctixGonUX0wKzk2yEhgGzlwF3Feo/zkyLhLBi1VixrhT3xg==
+"@department-of-veterans-affairs/eslint-config-mobile@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/eslint-config-mobile/-/eslint-config-mobile-0.18.0.tgz#4187517fb890af6f271a23364255f52cfe106cfd"
+  integrity sha512-JTLMMiRWhriVMo3hkG88nhXvF0q1W4nxhSFIQPQaBTrSmX6JcX/gaThSMz1MsoFokFNgDlzeimbk60PRSTQJlg==
   dependencies:
     eslint-plugin-deprecate "^0.8.4"
 
-"@department-of-veterans-affairs/mobile-assets@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-assets/-/mobile-assets-0.4.1.tgz#d25af3609f71356e68994a733bf86670a7334b05"
-  integrity sha512-H5hv4IKmbC+aqudb/NH10J6ZvtNkWz+zPqfFPFmBk/fUuU7ScpDorJnGD0jH8oZjGTZ93V35PdKeU79QTDuvrg==
+"@department-of-veterans-affairs/mobile-assets@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-assets/-/mobile-assets-0.12.0.tgz#8656683640d2f11d79adb202535f4ce324c92d2d"
+  integrity sha512-85h4yb4Nq0A3PMh5wG5NKya2RnSYsZ/H7Xk9arMhyZpF3IuMi8I9rmGs0Qo+PiI4oi99kj+12VVtIElzyvGJAw==
 
-"@department-of-veterans-affairs/mobile-component-library@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.16.0.tgz#6cd56523410a25220b44ecad74c8d164fc1bea38"
-  integrity sha512-9z9ZqmwPrqtAZfhd3KCnQS6kgqkQZcFRzorYZSkP3QEbFS8c0tsSNJ29f5Uz/LbzzzQ2cZksWpkfNDAW665XZQ==
+"@department-of-veterans-affairs/mobile-component-library@0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.19.0.tgz#65f6baf164f569875867c2835a711deee5d881e2"
+  integrity sha512-l9WT4Zl8f/yQPqG74GoUfVEDU1aNuEsc6jxJeomqlOHlI7abXuDMojuZHJVg3+YD0h2XQXfWbprdl1mKe2VF1w==
   dependencies:
-    "@department-of-veterans-affairs/mobile-assets" "^0.4.1"
-    "@department-of-veterans-affairs/mobile-tokens" "0.5.1"
+    "@department-of-veterans-affairs/mobile-assets" "0.12.0"
+    "@department-of-veterans-affairs/mobile-tokens" "0.12.0"
     "@os-team/i18next-react-native-language-detector" "^1.0.31"
     i18next "^23.8.2"
     react-i18next "^14.0.5"
     react-native-svg "15.2.0"
     styled-components "^6.1.8"
 
-"@department-of-veterans-affairs/mobile-tokens@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.5.1.tgz#afb4d38cd2bfa49cb61a244ae356cc6efdb379c3"
-  integrity sha512-IWaYMenb0m8/FCI719Woknr5RO9x5iys0Isgk0ytJJzZZXNOnbmArb8y2zgztFMwPjA5maAj7INgA+YbwbFH+w==
+"@department-of-veterans-affairs/mobile-tokens@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.12.0.tgz#df255401790dbb8ac0ecac02f956d6512a1645b2"
+  integrity sha512-cACiKuaU1154l42U+cnnSOa1bRedFiQPG9lX/s+Sb8eJZjCsEmQW4SkqEbRzy5lViYj/59ACnY5JCD7+wslvRw==
 
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
@@ -10240,7 +10240,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10257,15 +10257,6 @@ string-width@^2.0.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -10387,7 +10378,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10408,13 +10399,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -11272,7 +11256,7 @@ word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
   integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11290,15 +11274,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 4a9326d40e86ed728e791e49d2edff218cadfa08 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Wed, 3 Jul 2024 09:21:37 -0600
Subject: [PATCH 02/21] Convert first set of components to use Alert component

---
 .../CommonErrorComponents/CallHelpCenter.tsx  | 16 ++++-----
 .../CommonErrorComponents/DowntimeError.tsx   | 18 +++++-----
 .../CommonErrorComponents/ErrorAlert.tsx      |  8 ++---
 VAMobile/src/components/EncourageUpdate.tsx   |  8 ++---
 .../ClaimTimeline/ClaimTimeline.tsx           | 12 ++++---
 .../EstimatedDecisionDate.tsx                 |  8 ++---
 .../ClaimsHistoryScreen.tsx                   |  6 ++--
 .../Letters/GenericLetter/GenericLetter.tsx   |  8 ++---
 .../PrescriptionHistoryNoPrescriptions.tsx    | 13 ++++----
 .../PrescriptionHistoryNotAuthorized.tsx      | 10 +++---
 .../RefillScreens/RefillRequestSummary.tsx    | 33 +++++++------------
 .../screens/auth/LoginScreen/LoginScreen.tsx  |  6 ++--
 12 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
index 7535a55ea13..e686c185fae 100644
--- a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
@@ -3,9 +3,9 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -64,11 +64,11 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <AlertBox
-          title={titleText ? titleText : t('errors.callHelpCenter.vaAppNotWorking')}
-          titleA11yLabel={titleA11yHint ? titleA11yHint : a11yLabelVA(t('errors.callHelpCenter.vaAppNotWorking'))}
-          text={onTryAgain ? t('errors.callHelpCenter.sorryWithRefresh') : t('errors.callHelpCenter.sorry')}
-          border="error">
+        <Alert
+          variant="error"
+          header={titleText ? titleText : t('errors.callHelpCenter.vaAppNotWorking')}
+          headerA11yLabel={titleA11yHint ? titleA11yHint : a11yLabelVA(t('errors.callHelpCenter.vaAppNotWorking'))}
+          description={onTryAgain ? t('errors.callHelpCenter.sorryWithRefresh') : t('errors.callHelpCenter.sorry')}>
           <Box>
             <TextView
               variant="MobileBody"
@@ -88,7 +88,7 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
               </Box>
             )}
           </Box>
-        </AlertBox>
+        </Alert>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
index dd7bc6802b3..52fc0402748 100644
--- a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
@@ -3,7 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { AlertBox, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
 import { DowntimeFeatureType, ScreenIDToDowntimeFeatures, ScreenIDTypes } from 'store/api/types'
@@ -50,12 +52,12 @@ const DowntimeError: FC<DowntimeErrorProps> = ({ screenID }) => {
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <AlertBox
-          title={t('downtime.title')}
-          titleA11yLabel={t('downtime.title')}
-          text={t('downtime.message.1', { endTime })}
-          textA11yLabel={t('downtime.message.1.a11yLabel', { endTime })}
-          border="warning">
+        <Alert
+          variant="warning"
+          header={t('downtime.title')}
+          headerA11yLabel={t('downtime.title')}
+          description={t('downtime.message.1', { endTime })}
+          descriptionA11yLabel={t('downtime.message.1.a11yLabel', { endTime })}>
           <TextView accessibilityLabel={t('downtime.message.2.a11yLabel')} my={theme.dimensions.contentMarginTop}>
             {t('downtime.message.2')}
           </TextView>
@@ -64,7 +66,7 @@ const DowntimeError: FC<DowntimeErrorProps> = ({ screenID }) => {
             phone={t('8006982411')}
             a11yLabel={a11yLabelID(t('8006982411'))}
           />
-        </AlertBox>
+        </Alert>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
index 109765eac3a..625f57e1a00 100644
--- a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
@@ -2,9 +2,9 @@ import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, VAScrollView } from 'components'
+import { Box, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { useTheme } from 'utils/hooks'
 
@@ -33,11 +33,11 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ onTryAgain, title, text }) => {
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <AlertBox border="error" title={title || t('errorAlert.title')} text={text}>
+        <Alert variant="error" header={title || t('errorAlert.title')} description={text}>
           <Box mt={theme.dimensions.standardMarginBetween} accessibilityRole="button">
             <Button onPress={onTryAgain} label={t('refresh')} testID={t('refresh')} />
           </Box>
-        </AlertBox>
+        </Alert>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/EncourageUpdate.tsx b/VAMobile/src/components/EncourageUpdate.tsx
index da94c375a05..b0ccf01f8a5 100644
--- a/VAMobile/src/components/EncourageUpdate.tsx
+++ b/VAMobile/src/components/EncourageUpdate.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, WhatsNew } from 'components'
+import { Box, WhatsNew } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
@@ -88,7 +88,7 @@ export const EncourageUpdateAlert = () => {
   if (displayEU) {
     return (
       <Box mb={theme.dimensions.buttonPadding}>
-        <AlertBox title={t('encourageUpdate.title')} text={t('encourageUpdate.body')} border="warning">
+        <Alert variant="warning" header={t('encourageUpdate.title')} description={t('encourageUpdate.body')}>
           <Box>
             <Box my={theme.dimensions.gutter} accessibilityRole="button" mr={theme.dimensions.buttonPadding}>
               <Button onPress={onUpdatePressed} label={t('updateNow')} />
@@ -97,7 +97,7 @@ export const EncourageUpdateAlert = () => {
               <Button onPress={onSkipPressed} label={t('encourageUpdate.skip')} buttonType={ButtonVariants.Secondary} />
             </Box>
           </Box>
-        </AlertBox>
+        </Alert>
       </Box>
     )
   } else if (localVersionName && storeVersion && localVersionName >= storeVersion) {
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
index bc944e53aa2..5e8998d1df7 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from 'react-i18next'
 
 import { useFocusEffect } from '@react-navigation/native'
 
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { ClaimAttributesData } from 'api/types'
-import { AlertBox, Box } from 'components'
+import { Box } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import theme from 'styles/themes/standardTheme'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -37,10 +39,10 @@ function ClaimTimeline({ attributes, claimID }: ClaimTimelineProps) {
     <Box>
       {itemsNeededFromVet && !attributes.waiverSubmitted && (
         <Box my={theme.dimensions.standardMarginBetween}>
-          <AlertBox
-            border={'warning'}
-            titleA11yLabel={a11yLabelVA(t('claimPhase.youHaveFileRequest', { count }))}
-            title={t('claimPhase.youHaveFileRequest', { count })}
+          <Alert
+            variant={'warning'}
+            headerA11yLabel={a11yLabelVA(t('claimPhase.youHaveFileRequest', { count }))}
+            header={t('claimPhase.youHaveFileRequest', { count })}
           />
         </Box>
       )}
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
index eafd6de60aa..b2a58c2c812 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { DateTime } from 'luxon'
 
-import { AlertBox, Box, TextArea, TextView } from 'components'
+import { Box, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { testIdProps } from 'utils/accessibility'
 import getEnv from 'utils/env'
@@ -30,7 +30,7 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
   //Opting to leave this code in place...because removing it will clearly kickstart pandemic part 4000.
   if (showCovidMessage) {
     return (
-      <AlertBox border="warning" text={t('claimDetails.covidMessage')}>
+      <Alert variant="warning" description={t('claimDetails.covidMessage')}>
         <Box mt={theme.dimensions.standardMarginBetween}>
           <Button
             onPress={onAlertLinkPress}
@@ -39,7 +39,7 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
             a11yHint={t('claimDetails.reviewLocationsA11yHint')}
           />
         </Box>
-      </AlertBox>
+      </Alert>
     )
   }
 
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
index 8da2ec97d0f..b7689c74d1c 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { useClaimsAndAppeals } from 'api/claimsAndAppeals'
 import { ClaimsAndAppealsErrorServiceTypesConstants } from 'api/types'
-import { AlertBox, Box, ErrorComponent, FeatureLandingTemplate, LoadingComponent } from 'components'
+import { Box, ErrorComponent, FeatureLandingTemplate, LoadingComponent } from 'components'
 import { Events } from 'constants/analytics'
 import { ClaimTypeConstants } from 'constants/claims'
 import { NAMESPACE } from 'constants/namespaces'
@@ -101,7 +101,7 @@ function ClaimsHistoryScreen({ navigation }: IClaimsHistoryScreen) {
 
       return (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertBox title={alertTitle} text={alertText} border="error" />
+          <Alert variant="error" header={alertTitle} description={alertText} />
         </Box>
       )
     }
diff --git a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
index e57f1788d0c..f0879770f1c 100644
--- a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useDownloadLetter, useLetterBeneficiaryData } from 'api/letters'
 import { LetterTypeConstants, LettersDownloadParams } from 'api/types'
-import { AlertBox, BasicError, Box, FeatureLandingTemplate, LoadingComponent, TextArea, TextView } from 'components'
+import { BasicError, Box, FeatureLandingTemplate, LoadingComponent, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { BenefitsStackParamList } from 'screens/BenefitsScreen/BenefitsStackScreens'
 import { testIdProps } from 'utils/accessibility'
@@ -51,9 +51,9 @@ function GenericLetter({ navigation, route }: GenericLetterProps) {
     <Box mb={theme.dimensions.contentMarginBottom}>
       {letterType === LetterTypeConstants.serviceVerification && (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertBox border="informational">
+          <Alert variant="info">
             <TextView variant="MobileBody">{t('letters.serviceVerificationLetter.informational')}</TextView>
-          </AlertBox>
+          </Alert>
         </Box>
       )}
       <TextArea>
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
index 869bbb6078f..4881e4d8213 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
 import {
-  AlertBox,
   Box,
   BoxProps,
   ClickToCallPhoneNumber,
@@ -54,10 +55,10 @@ function PrescriptionHistoryNoPrescriptions() {
   return (
     <VAScrollView>
       <Box {...alertWrapperProps}>
-        <AlertBox
-          border={'informational'}
-          title={t('prescriptions.notFound.title')}
-          titleA11yLabel={a11yLabelVA(t('prescriptions.notFound.title'))}>
+        <Alert
+          variant="info"
+          header={t('prescriptions.notFound.title')}
+          headerA11yLabel={a11yLabelVA(t('prescriptions.notFound.title'))}>
           <TextView
             pt={theme.paragraphSpacing.spacing20FontSize}
             mb={theme.dimensions.condensedMarginBetween}
@@ -67,7 +68,7 @@ function PrescriptionHistoryNoPrescriptions() {
           <VABulletList listOfText={medicationsNotIncludedList} paragraphSpacing={true} />
           <TextView paragraphSpacing={true}>{t('prescriptions.notFound.bullets.ifYouThink')}</TextView>
           <ClickToCallPhoneNumber displayedText={displayedTextPhoneNumber(t('8773270022'))} phone={t('8773270022')} />
-        </AlertBox>
+        </Alert>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
index d80395eb2e1..008cdfea17c 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
 import { LinkProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Link/Link'
 
 import {
-  AlertBox,
   Box,
   BoxProps,
   ClickToCallPhoneNumber,
@@ -59,10 +59,10 @@ function PrescriptionHistoryNotAuthorized() {
   return (
     <VAScrollView>
       <Box {...alertWrapperProps}>
-        <AlertBox
-          border={'warning'}
-          title={t('prescriptions.notAuthorized.warning')}
-          titleA11yLabel={a11yLabelVA(t('prescriptions.notAuthorized.warning'))}
+        <Alert
+          variant="warning"
+          header={t('prescriptions.notAuthorized.warning')}
+          headerA11yLabel={a11yLabelVA(t('prescriptions.notAuthorized.warning'))}
         />
       </Box>
       <Box mb={theme.dimensions.contentMarginBottom}>
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
index cd9ba3323b6..228f015227f 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
@@ -3,21 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
 
 import { useRequestRefills } from 'api/prescriptions'
 import { PrescriptionsList, RefillStatusConstants } from 'api/types'
-import {
-  AlertBox,
-  AlertBoxProps,
-  Box,
-  BoxProps,
-  LoadingComponent,
-  TextArea,
-  TextView,
-  VAIcon,
-  VAIconProps,
-} from 'components'
+import { Box, BoxProps, LoadingComponent, TextArea, TextView, VAIcon, VAIconProps } from 'components'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -80,28 +71,28 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
   })
 
   const renderAlert = (): ReactElement => {
-    let alertBoxProps: AlertBoxProps
+    let alertBoxProps: AlertProps
     switch (status) {
       case REQUEST_STATUS.SUCCESS:
         alertBoxProps = {
-          border: 'success',
-          title: t('prescriptions.refillRequestSummary.success'),
+          variant: 'success',
+          header: t('prescriptions.refillRequestSummary.success'),
         }
         break
       case REQUEST_STATUS.MIX:
       case REQUEST_STATUS.FAILED:
       default:
         alertBoxProps = {
-          border: 'error',
-          title: t('prescriptions.refillRequestSummary.mix', { count: requestFailed.length }),
-          text: t('prescriptions.refillRequestSummary.tryAgain'),
-          textA11yLabel: a11yLabelVA(t('prescriptions.refillRequestSummary.tryAgain')),
+          variant: 'error',
+          header: t('prescriptions.refillRequestSummary.mix', { count: requestFailed.length }),
+          description: t('prescriptions.refillRequestSummary.tryAgain'),
+          descriptionA11yLabel: a11yLabelVA(t('prescriptions.refillRequestSummary.tryAgain')),
         }
         break
     }
     return (
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <AlertBox {...alertBoxProps}>
+        <Alert {...alertBoxProps}>
           {status !== REQUEST_STATUS.SUCCESS && (
             <Box mt={theme.dimensions.standardMarginBetween}>
               <Button
@@ -115,7 +106,7 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
               />
             </Box>
           )}
-        </AlertBox>
+        </Alert>
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx b/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
index 82dbdfb21f3..002f443d832 100644
--- a/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
+++ b/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { Pressable, StyleProp, ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, BoxProps, CrisisLineCta, TextView, VAIcon, VAScrollView, WaygateWrapper } from 'components'
+import { Box, BoxProps, CrisisLineCta, TextView, VAIcon, VAScrollView, WaygateWrapper } from 'components'
 import AppVersionAndBuild from 'components/AppVersionAndBuild'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -101,7 +101,7 @@ function LoginScreen() {
     <VAScrollView {...testIdProps('Login-page', true)} contentContainerStyle={mainViewStyle} removeInsets={true}>
       <DemoAlert visible={demoPromptVisible} setVisible={setDemoPromptVisible} onConfirm={handleUpdateDemoMode} />
       <CrisisLineCta onPress={onCrisisLine} />
-      {demoMode && <AlertBox border={'informational'} title={'DEMO MODE'} />}
+      {demoMode && <Alert variant="info" header="DEMO MODE" />}
       <WaygateWrapper waygateName="WG_Login" />
       <Box
         flex={1}

From 7911bd8c2cbe59a8ad88139eab7e72f0c231965c Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 8 Jul 2024 11:16:16 -0600
Subject: [PATCH 03/21] Second set of conversions to Alert component

---
 .../SecureMessaging/EditDraft/EditDraft.tsx      |  7 +++----
 .../StartNewMessage/StartNewMessage.tsx          | 15 +++++++--------
 .../IndividualMessageErrorComponent.tsx          | 16 ++++++++--------
 .../ViewMessage/ViewMessageScreen.tsx            |  6 +++---
 .../NoVaccineRecords/NoVaccineRecords.tsx        | 16 +++++++++-------
 .../EditPhoneNumberScreen.tsx                    |  6 +++---
 .../NotificationsSettingsScreen.tsx              | 13 ++++++-------
 .../HowToUpdateDirectDepositScreen.tsx           |  8 +++++---
 .../NoPayments/NoPaymentsScreen.tsx              |  8 +++++---
 9 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
index 77086a8c4d7..c998d92d1be 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 { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import { DateTime } from 'luxon'
 import _ from 'underscore'
@@ -30,7 +30,6 @@ import {
   SendMessageParameters,
 } from 'api/types'
 import {
-  AlertBox,
   Box,
   ErrorComponent,
   FieldType,
@@ -511,11 +510,11 @@ function EditDraft({ navigation, route }: EditDraftProps) {
   function renderAlert() {
     return (
       <Box my={theme.dimensions.standardMarginBetween}>
-        <AlertBox border={'warning'} title={t('secureMessaging.reply.youCanNoLonger')}>
+        <Alert variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
           <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
             {t('secureMessaging.reply.olderThan45Days')}
           </TextView>
-        </AlertBox>
+        </Alert>
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx
index aeaee3615a2..ce7ee5eaa5a 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 { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import _ from 'underscore'
 
@@ -24,7 +24,6 @@ import {
   SendMessageParameters,
 } from 'api/types'
 import {
-  AlertBox,
   Box,
   ErrorComponent,
   FieldType,
@@ -375,13 +374,13 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
   function renderContent() {
     if (noProviderError) {
       return (
-        <AlertBox
-          title={t('secureMessaging.startNewMessage.noMatchWithProvider')}
-          text={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
-          textA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}
-          border="error">
+        <Alert
+          variant="error"
+          header={t('secureMessaging.startNewMessage.noMatchWithProvider')}
+          description={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
+          descriptionA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}>
           <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-        </AlertBox>
+        </Alert>
       )
     }
 
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
index 07c113ce199..cbd89e788a3 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
 import { ErrorsState } from 'store/slices'
@@ -21,11 +21,11 @@ function IndividualMessageErrorComponent() {
   return (
     <VAScrollView>
       <Box justifyContent="center">
-        <AlertBox
-          title={t('secureMessaging.viewMessage.errorTitle')}
-          titleA11yLabel={t('secureMessaging.viewMessage.errorTitle')}
-          text={t('errors.callHelpCenter.sorryWithRefresh')}
-          border="error">
+        <Alert
+          variant="error"
+          header={t('secureMessaging.viewMessage.errorTitle')}
+          headerA11yLabel={t('secureMessaging.viewMessage.errorTitle')}
+          description={t('errors.callHelpCenter.sorryWithRefresh')}>
           <Box>
             <TextView
               variant="MobileBody"
@@ -40,7 +40,7 @@ function IndividualMessageErrorComponent() {
               </Box>
             )}
           </Box>
-        </AlertBox>
+        </Alert>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
index 731768e42c6..32474567102 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 { Alert } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import { DateTime } from 'luxon'
 import _ from 'underscore'
@@ -22,7 +23,6 @@ import {
   SecureMessagingSystemFolderIdConstants,
 } from 'api/types'
 import {
-  AlertBox,
   Box,
   ChildTemplate,
   ErrorComponent,
@@ -405,11 +405,11 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) {
           )}
           {replyExpired && (
             <Box my={theme.dimensions.standardMarginBetween}>
-              <AlertBox border={'warning'} title={t('secureMessaging.reply.youCanNoLonger')}>
+              <Alert variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
                 <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
                   {t('secureMessaging.reply.olderThan45Days')}
                 </TextView>
-              </AlertBox>
+              </Alert>
             </Box>
           )}
           <MessageCard message={message} />
diff --git a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
index dd20165ef07..5a26fb4b152 100644
--- a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
+++ b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { AlertBox, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -13,16 +15,16 @@ function NoVaccineRecords() {
 
   return (
     <VAScrollView>
-      <AlertBox
-        title={t('noVaccineRecords.alert.title')}
-        border="informational"
-        text={t('noVaccineRecords.alert.text.1')}
-        titleA11yLabel={a11yLabelVA(t('noVaccineRecords.alert.title'))}>
+      <Alert
+        variant="info"
+        header={t('noVaccineRecords.alert.title')}
+        headerA11yLabel={a11yLabelVA(t('noVaccineRecords.alert.title'))}
+        description={t('noVaccineRecords.alert.text.1')}>
         <TextView paragraphSpacing={true} mt={theme.paragraphSpacing.spacing20FontSize} variant="MobileBody">
           {t('noVaccineRecords.alert.text.2')}
         </TextView>
         <ClickToCallPhoneNumber phone={t('8006982411')} displayedText={displayedTextPhoneNumber(t('8006982411'))} />
-      </AlertBox>
+      </Alert>
     </VAScrollView>
   )
 }
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
index e4975b7a3ba..4acaa6be404 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
@@ -4,12 +4,12 @@ import { ScrollView } from 'react-native'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useDeletePhoneNumber, useSavePhoneNumber } from 'api/contactInformation'
 import { useContactInformation } from 'api/contactInformation/getContactInformation'
 import { PhoneData, PhoneType, PhoneTypeToFormattedNumber, UserContactInformation } from 'api/types'
-import { AlertBox, Box, FieldType, FormFieldType, FormWrapper, FullScreenSubtask, LoadingComponent } from 'components'
+import { Box, FieldType, FormFieldType, FormWrapper, FullScreenSubtask, LoadingComponent } from 'components'
 import { SnackbarMessages } from 'components/SnackBar'
 import { MAX_DIGITS, MAX_DIGITS_AFTER_FORMAT } from 'constants/common'
 import { NAMESPACE } from 'constants/namespaces'
@@ -267,7 +267,7 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) {
               />
             </Box>
           )}
-          <AlertBox text={t('editPhoneNumber.weCanOnlySupportUSNumbers')} border="informational" />
+          <Alert variant="info" description={t('editPhoneNumber.weCanOnlySupportUSNumbers')} />
           {formContainsError && (
             <Box mt={theme.dimensions.standardMarginBetween}>
               <AlertBox
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
index 2da67cff283..b11b61d1205 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
@@ -6,10 +6,9 @@ import { useSelector } from 'react-redux'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
 import {
-  AlertBox,
   Box,
   ButtonDecoratorType,
   ErrorComponent,
@@ -110,14 +109,14 @@ function NotificationsSettingsScreen({ navigation }: NotificationsSettingsScreen
               {preferenceList()}
             </>
           ) : (
-            <AlertBox
-              border={'informational'}
-              title={t('notifications.settings.alert.title')}
-              text={t('notifications.settings.alert.text')}>
+            <Alert
+              variant="info"
+              header={t('notifications.settings.alert.title')}
+              description={t('notifications.settings.alert.text')}>
               <Box mt={standardMarginBetween}>
                 <Button onPress={goToSettings} label={t('notifications.settings.alert.openSettings')} />
               </Box>
-            </AlertBox>
+            </Alert>
           )}
           <TextView variant={'TableFooterLabel'} mx={gutter} mt={condensedMarginBetween}>
             {t('notifications.settings.privacy')}
diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
index a6055638466..f662ec599bd 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
@@ -3,7 +3,9 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { AlertBox, Box, ClickToCallPhoneNumber, FeatureLandingTemplate, TextArea, TextView } from 'components'
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { Box, ClickToCallPhoneNumber, FeatureLandingTemplate, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { PaymentsStackParamList } from 'screens/PaymentsScreen/PaymentsStackScreens'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -25,7 +27,7 @@ function HowToUpdateDirectDepositScreen({ navigation }: HowToUpdateDirectDeposit
         backLabel={t('payments.title')}
         backLabelOnPress={navigation.goBack}
         title={t('directDeposit.title')}>
-        <AlertBox border="warning">
+        <Alert variant="warning">
           <TextView variant="MobileBodyBold" accessibilityRole="header" paragraphSpacing={true}>
             {t('howToUpdateDirectDeposit.alert.title')}
           </TextView>
@@ -33,7 +35,7 @@ function HowToUpdateDirectDepositScreen({ navigation }: HowToUpdateDirectDeposit
             {t('howToUpdateDirectDeposit.alert.body.1')}
           </TextView>
           <TextView variant="MobileBody">{t('howToUpdateDirectDeposit.alert.body.2')}</TextView>
-        </AlertBox>
+        </Alert>
         <Box mt={standardMarginBetween} mb={theme.dimensions.contentMarginBottom}>
           <TextArea>
             <TextView
diff --git a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
index cb2942ddb9c..dc594224106 100644
--- a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { AlertBox, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -13,7 +15,7 @@ function NoPaymentsScreen() {
 
   return (
     <VAScrollView>
-      <AlertBox border="informational">
+      <Alert variant="info">
         <TextView variant="MobileBodyBold" accessibilityLabel={a11yLabelVA(t('payments.noPayments.title'))}>
           {t('payments.noPayments.title')}
         </TextView>
@@ -37,7 +39,7 @@ function NoPaymentsScreen() {
           {t('payments.noPayments.body.2')}
         </TextView>
         <ClickToCallPhoneNumber phone={t('8008271000')} displayedText={displayedTextPhoneNumber(t('8008271000'))} />
-      </AlertBox>
+      </Alert>
     </VAScrollView>
   )
 }

From 02d0f930fb80554b5a60c12aacd45588eb916e48 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 8 Jul 2024 18:20:01 -0600
Subject: [PATCH 04/21] Create and use AlertWithScroll component

---
 .../CustomHooks/useAutoScrollToElement.mdx    |   6 +-
 VAMobile/src/components/AlertBox.tsx          | 104 ------------------
 ...tBox.test.tsx => AlertWithScroll.test.tsx} |   6 +-
 VAMobile/src/components/AlertWithScroll.tsx   |  47 ++++++++
 VAMobile/src/components/MessageAlert.tsx      |  36 +++---
 VAMobile/src/components/WaygateWrapper.tsx    |  21 ++--
 VAMobile/src/components/index.ts              |   4 +-
 .../ClaimFileUpload/SelectFile/SelectFile.tsx |   4 +-
 .../ClaimFileUpload/TakePhotos/TakePhotos.tsx |   4 +-
 .../UploadOrAddPhotos/UploadOrAddPhotos.tsx   |  12 +-
 .../Appointments/Appointments.tsx             |  14 +--
 .../Pharmacy/RefillScreens/RefillScreen.tsx   |   8 +-
 .../SecureMessaging/EditDraft/EditDraft.tsx   |  15 +--
 .../ReplyMessage/ReplyMessage.tsx             |   2 +-
 .../Attachments/Attachments.tsx               |   9 +-
 .../StartNewMessage/StartNewMessage.tsx       |   2 +-
 .../EditAddressScreen/EditAddressScreen.tsx   |  10 +-
 .../EditEmailScreen/EditEmailScreen.tsx       |  18 ++-
 .../EditPhoneNumberScreen.tsx                 |  18 ++-
 .../EditDirectDepositScreen.tsx               |  20 ++--
 20 files changed, 163 insertions(+), 197 deletions(-)
 delete mode 100644 VAMobile/src/components/AlertBox.tsx
 rename VAMobile/src/components/{AlertBox.test.tsx => AlertWithScroll.test.tsx} (60%)
 create mode 100644 VAMobile/src/components/AlertWithScroll.tsx

diff --git a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
index e10a6e364dc..c5dea0c423f 100644
--- a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
+++ b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
@@ -34,7 +34,7 @@ return (
     </Box>
     {replyExpired && (
         <Box mt={theme.dimensions.standardMarginBetween} mx={theme.dimensions.gutter} mb={theme.dimensions.contentMarginBottom}>
-        <AlertBox border={'warning'} title={t('secureMessaging.reply.youCanNoLonger')} text={t('secureMessaging.reply.olderThan45Days')}>
+        <AlertWithScroll variant={'warning'} header={t('secureMessaging.reply.youCanNoLonger')} description={t('secureMessaging.reply.olderThan45Days')}>
             <Box mt={theme.dimensions.standardMarginBetween}>
             <Button
                 label={t('secureMessaging.startNewMessage.new')}
@@ -42,7 +42,7 @@ return (
                 a11yHint={t('secureMessaging.startNewMessage.new.a11yHint')}
             />
             </Box>
-        </AlertBox>
+        </AlertWithScroll>
         </Box>
     )}
     </VAScrollView>
@@ -50,4 +50,4 @@ return (
 </>
 )`
 
-<HooksInfo componentName="useAutoScrollToElement" example={exampleString}/>
+<HooksInfo componentName="useAutoScrollToElement" example={exampleString} />
diff --git a/VAMobile/src/components/AlertBox.tsx b/VAMobile/src/components/AlertBox.tsx
deleted file mode 100644
index 97574c0df76..00000000000
--- a/VAMobile/src/components/AlertBox.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { FC, RefObject, useEffect, useState } from 'react'
-import { AccessibilityRole, ScrollView, View } from 'react-native'
-import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
-
-import { VABorderColors } from 'styles/theme'
-import { triggerHaptic } from 'utils/haptics'
-import { useAutoScrollToElement, useTheme } from 'utils/hooks'
-
-import { Box, BoxProps, TextView } from './index'
-
-export type AlertBoxProps = {
-  /** color of the border */
-  border: keyof VABorderColors
-  /** Optional boolean for determining when to focus on error alert boxes (e.g. onSaveClicked). */
-  focusOnError?: boolean
-  /** Optional ref for the parent scroll view. Used for scrolling to error alert boxes. */
-  scrollViewRef?: RefObject<ScrollView>
-  /** body of the alert */
-  text?: string
-  /** optional bolded title text */
-  title?: string
-  /** optional accessibility label for the text */
-  textA11yLabel?: string
-  /** optional accessibility label for the title */
-  titleA11yLabel?: string
-  /** optional accessibility role for the title */
-  titleRole?: AccessibilityRole
-  /** optional testID */
-  testId?: string
-}
-
-/**
- * Displays content in a box styled as an alert
- */
-const AlertBox: FC<AlertBoxProps> = ({
-  border,
-  children,
-  focusOnError = true,
-  scrollViewRef,
-  title,
-  text,
-  textA11yLabel,
-  titleA11yLabel,
-  titleRole,
-  testId,
-}) => {
-  const theme = useTheme()
-  const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
-  const [shouldFocus, setShouldFocus] = useState(true)
-
-  const boxPadding = 20
-
-  useEffect(() => {
-    if (border === 'error' && scrollViewRef?.current && (title || text)) {
-      scrollRef.current = scrollViewRef.current
-      scrollToAlert(-boxPadding)
-    }
-    setShouldFocus(focusOnError)
-  }, [border, focusOnError, scrollRef, scrollToAlert, scrollViewRef, text, title])
-
-  const boxProps: BoxProps = {
-    backgroundColor: 'alertBox',
-    borderLeftWidth: theme.dimensions.alertBorderWidth,
-    borderLeftColor: border,
-    py: boxPadding,
-    px: boxPadding,
-    testID: testId,
-  }
-
-  const vibrate = (): void => {
-    if (border === 'error') {
-      triggerHaptic(HapticFeedbackTypes.notificationError)
-    } else if (border === 'warning') {
-      triggerHaptic(HapticFeedbackTypes.notificationWarning)
-    }
-  }
-
-  const titleAccessibilityRole = titleRole ? titleRole : text || children ? 'header' : undefined
-
-  return (
-    <Box {...boxProps}>
-      {!!title && (
-        <View
-          ref={viewRef}
-          accessible={true}
-          accessibilityLabel={titleA11yLabel || title}
-          accessibilityRole={titleAccessibilityRole}>
-          <TextView variant="MobileBodyBold" mb={text ? theme.dimensions.standardMarginBetween : 0}>
-            {title}
-          </TextView>
-        </View>
-      )}
-      {!!text && (
-        <View ref={!title ? viewRef : undefined} accessible={true} accessibilityLabel={textA11yLabel || text}>
-          <TextView variant="MobileBody">{text}</TextView>
-        </View>
-      )}
-      {children}
-      {shouldFocus && vibrate()}
-    </Box>
-  )
-}
-
-export default AlertBox
diff --git a/VAMobile/src/components/AlertBox.test.tsx b/VAMobile/src/components/AlertWithScroll.test.tsx
similarity index 60%
rename from VAMobile/src/components/AlertBox.test.tsx
rename to VAMobile/src/components/AlertWithScroll.test.tsx
index 0f90578f8e8..9785c596ae1 100644
--- a/VAMobile/src/components/AlertBox.test.tsx
+++ b/VAMobile/src/components/AlertWithScroll.test.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 
 import { context, render, screen } from 'testUtils'
 
-import AlertBox from './AlertBox'
+import AlertWithScroll from './AlertWithScroll'
 
-context('AlertBox', () => {
+context('AlertWithScroll', () => {
   beforeEach(() => {
-    render(<AlertBox border="warning" text={'My warning'} title={'Warning title'} />)
+    render(<AlertWithScroll variant="warning" header={'Warning title'} description={'My warning'} />)
   })
 
   it('initializes correctly', () => {
diff --git a/VAMobile/src/components/AlertWithScroll.tsx b/VAMobile/src/components/AlertWithScroll.tsx
new file mode 100644
index 00000000000..02834c53cb2
--- /dev/null
+++ b/VAMobile/src/components/AlertWithScroll.tsx
@@ -0,0 +1,47 @@
+import React, { FC, RefObject, useEffect } from 'react'
+import { ScrollView, View } from 'react-native'
+import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
+
+import { Alert, AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
+
+import { triggerHaptic } from 'utils/haptics'
+import { useAutoScrollToElement } from 'utils/hooks'
+
+export type AlertWithScrollProps = AlertProps & {
+  /** Ref for the parent scrollView so we can scroll to the Alert */
+  scrollViewRef: RefObject<ScrollView>
+  /** Optional boolean indicating when Alert is focused. Default is true */
+  isFocused?: boolean
+}
+
+/**
+ * Wrapper for the Alert component which scrolls to the Alert
+ */
+const AlertWithScroll: FC<AlertWithScrollProps> = ({ children, scrollViewRef, isFocused = true, ...props }) => {
+  const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
+  const { variant, header, description } = props
+  const boxPadding = 20
+
+  useEffect(() => {
+    if (variant === 'error' && scrollViewRef?.current && (header || description)) {
+      scrollRef.current = scrollViewRef.current
+      scrollToAlert(-boxPadding)
+    }
+  }, [variant, scrollRef, scrollViewRef, scrollToAlert, header, description])
+
+  if (isFocused) {
+    if (variant === 'error') {
+      triggerHaptic(HapticFeedbackTypes.notificationError)
+    } else if (variant === 'warning') {
+      triggerHaptic(HapticFeedbackTypes.notificationWarning)
+    }
+  }
+
+  return (
+    <View ref={viewRef}>
+      <Alert {...props}>{children}</Alert>
+    </View>
+  )
+}
+
+export default AlertWithScroll
diff --git a/VAMobile/src/components/MessageAlert.tsx b/VAMobile/src/components/MessageAlert.tsx
index 1657ac38871..276965606a1 100644
--- a/VAMobile/src/components/MessageAlert.tsx
+++ b/VAMobile/src/components/MessageAlert.tsx
@@ -2,19 +2,19 @@ import React, { FC, RefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView } from 'react-native'
 
-import { AlertBox, Box, LinkWithAnalytics, TextView, VABulletList } from 'components'
+import { AlertWithScroll, Box, LinkWithAnalytics, TextView, VABulletList } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
 export type MessageAlertProps = {
-  /** Optional boolean for determining when to focus on error alert boxes. */
-  focusOnError?: boolean
+  /** ref for parent scroll view */
+  scrollViewRef: RefObject<ScrollView>
+  /** Optional boolean indicating when Alert is focused. Default is true */
+  isFocused?: boolean
   /**sets if there is validation errors */
   hasValidationError?: boolean
   /**sets if attempted to save a draft */
   saveDraftAttempted?: boolean
-  /** optional ref for parent scroll view */
-  scrollViewRef?: RefObject<ScrollView>
   /** optional list of alertbox failed reasons, supplied by FormWrapper component */
   errorList?: { [key: number]: string }
   /** sets if triage error returned from api */
@@ -26,7 +26,7 @@ const MessageAlert: FC<MessageAlertProps> = ({
   hasValidationError,
   saveDraftAttempted,
   scrollViewRef,
-  focusOnError,
+  isFocused = true,
   errorList,
   replyTriageError,
 }) => {
@@ -53,24 +53,22 @@ const MessageAlert: FC<MessageAlertProps> = ({
 
   return hasValidationError ? (
     <Box mb={theme.dimensions.standardMarginBetween}>
-      <AlertBox
-        border={'error'}
-        title={t('secureMessaging.formMessage.weNeedMoreInfo')}
-        text={text}
-        titleRole={'header'}
+      <AlertWithScroll
+        variant="error"
+        header={t('secureMessaging.formMessage.weNeedMoreInfo')}
+        description={text}
         scrollViewRef={scrollViewRef}
-        focusOnError={focusOnError}>
+        isFocused={isFocused}>
         <VABulletList listOfText={bulletedListOfText} />
-      </AlertBox>
+      </AlertWithScroll>
     </Box>
   ) : replyTriageError ? (
     <Box mb={theme.dimensions.standardMarginBetween}>
-      <AlertBox
-        border={'error'}
-        title={t('secureMessaging.sendError.title')}
-        titleRole={'header'}
+      <AlertWithScroll
+        variant="error"
+        header={t('secureMessaging.sendError.title')}
         scrollViewRef={scrollViewRef}
-        focusOnError={focusOnError}>
+        isFocused={isFocused}>
         <TextView variant="MobileBody" my={theme.dimensions.standardMarginBetween}>
           {t('secureMessaging.reply.error.youCantSend')}
         </TextView>
@@ -81,7 +79,7 @@ const MessageAlert: FC<MessageAlertProps> = ({
           {t('secureMessaging.reply.error.ifYouThink')}
         </TextView>
         <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-      </AlertBox>
+      </AlertWithScroll>
     </Box>
   ) : (
     <></>
diff --git a/VAMobile/src/components/WaygateWrapper.tsx b/VAMobile/src/components/WaygateWrapper.tsx
index 04536d259eb..82de095c8b6 100644
--- a/VAMobile/src/components/WaygateWrapper.tsx
+++ b/VAMobile/src/components/WaygateWrapper.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 
 import { useIsFocused, useNavigationState } from '@react-navigation/native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, ClickToCallPhoneNumber } from 'components'
+import { Box, ClickToCallPhoneNumber } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -49,14 +49,13 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
       waygate.errorPhoneNumber && waygate.errorPhoneNumber.length > 0 ? waygate.errorPhoneNumber : t('8006982411')
     return (
       <Box mb={theme.dimensions.condensedMarginBetween}>
-        <AlertBox
-          border={waygate.type === 'DenyContent' ? 'error' : 'warning'}
-          title={waygate.errorMsgTitle}
-          titleA11yLabel={a11yLabelVA(waygate.errorMsgTitle || '')}
-          text={text}
-          textA11yLabel={a11yLabelVA(text || '')}
-          focusOnError={false}
-          testId="AFUseCase2TestID">
+        <Alert
+          variant={waygate.type === 'DenyContent' ? 'error' : 'warning'}
+          header={waygate.errorMsgTitle}
+          headerA11yLabel={a11yLabelVA(waygate.errorMsgTitle || '')}
+          description={text}
+          descriptionA11yLabel={a11yLabelVA(text || '')}
+          testID="AFUseCase2TestID">
           <Box my={theme.dimensions.standardMarginBetween}>
             <ClickToCallPhoneNumber
               displayedText={displayedTextPhoneNumber(phoneNumber)}
@@ -65,7 +64,7 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
             />
           </Box>
           {waygate.appUpdateButton === true && <Button onPress={onUpdateButtonPress} label={t('updateNow')} />}
-        </AlertBox>
+        </Alert>
       </Box>
     )
   }
diff --git a/VAMobile/src/components/index.ts b/VAMobile/src/components/index.ts
index d921922c99c..3cd75ec1a2c 100644
--- a/VAMobile/src/components/index.ts
+++ b/VAMobile/src/components/index.ts
@@ -40,8 +40,8 @@ export { default as FormAttachments } from './FormWrapper/FormFields/FormAttachm
 export * from './FormWrapper/FormFields/FormAttachments'
 export { default as VAImage } from './VAImage/VAImage'
 export * from './VAImage/VAImage'
-export { default as AlertBox } from './AlertBox'
-export * from './AlertBox'
+export { default as AlertWithScroll } from './AlertWithScroll'
+export * from './AlertWithScroll'
 export { default as Switch } from './Switch'
 export * from './Switch'
 export * from './types'
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
index 80e64de799b..47b2270cd10 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
@@ -7,7 +7,7 @@ import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/typ
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, TextArea, TextView } from 'components'
+import { AlertWithScroll, Box, TextArea, TextView } from 'components'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -115,7 +115,7 @@ function SelectFile({ navigation, route }: SelectFilesProps) {
       <Box mb={theme.dimensions.contentMarginBottom}>
         {!!error && (
           <Box mb={theme.dimensions.standardMarginBetween}>
-            <AlertBox scrollViewRef={scrollViewRef} text={error} border="error" />
+            <AlertWithScroll variant="error" description={error} scrollViewRef={scrollViewRef} />
           </Box>
         )}
         <TextArea>
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index 0f52a6ad691..816edffbe41 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -7,7 +7,7 @@ import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/typ
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, LinkWithAnalytics, TextArea, TextView } from 'components'
+import { AlertWithScroll, Box, LinkWithAnalytics, TextArea, TextView } from 'components'
 import CollapsibleAlert from 'components/CollapsibleAlert'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
@@ -81,7 +81,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
       testID="takePhotosTestID">
       {!!error && (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertBox scrollViewRef={scrollViewRef} text={error} border="error" />
+          <AlertWithScroll variant="error" description={error} scrollViewRef={scrollViewRef} />
         </Box>
       )}
       <Box mb={theme.dimensions.standardMarginBetween}>
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 78367ad4373..d25b76c683e 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
@@ -12,7 +12,7 @@ import _ from 'underscore'
 import { useClaim, useUploadFileToClaim } from 'api/claimsAndAppeals'
 import { ClaimEventData, UploadFileToClaimParamaters } from 'api/types'
 import {
-  AlertBox,
+  AlertWithScroll,
   Box,
   FieldType,
   FormFieldType,
@@ -334,12 +334,12 @@ function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) {
         <Box mb={theme.dimensions.contentMarginBottom}>
           {!!errorMessage && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertBox
+              <AlertWithScroll
+                variant="error"
+                header={t('fileUpload.PhotosNotUploaded')}
+                description={errorMessage}
                 scrollViewRef={scrollViewRef}
-                title={t('fileUpload.PhotosNotUploaded')}
-                text={errorMessage}
-                border="error"
-                focusOnError={onSaveClicked}
+                isFocused={onSaveClicked}
               />
             </Box>
           )}
diff --git a/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx b/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
index bb0f5da01d7..5b69c41d107 100644
--- a/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
+++ b/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
@@ -9,7 +9,7 @@ import { SegmentedControl } from '@department-of-veterans-affairs/mobile-compone
 import { useAppointments } from 'api/appointments'
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { AppointmentsErrorServiceTypesConstants } from 'api/types'
-import { AlertBox, Box, ErrorComponent, FeatureLandingTemplate } from 'components'
+import { AlertWithScroll, Box, ErrorComponent, FeatureLandingTemplate } from 'components'
 import { VAScrollViewProps } from 'components/VAScrollView'
 import { Events } from 'constants/analytics'
 import { TimeFrameTypeConstants } from 'constants/appointments'
@@ -86,13 +86,13 @@ function Appointments({ navigation }: AppointmentsScreenProps) {
     if (serviceError) {
       return (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertBox
+          <AlertWithScroll
+            variant="error"
+            header={t('appointments.appointmentsStatusSomeUnavailable')}
+            headerA11yLabel={a11yLabelVA(t('appointments.appointmentsStatusSomeUnavailable'))}
+            description={t('appointments.troubleLoadingSomeAppointments')}
+            descriptionA11yLabel={a11yLabelVA(t('appointments.troubleLoadingSomeAppointments'))}
             scrollViewRef={scrollViewRef}
-            title={t('appointments.appointmentsStatusSomeUnavailable')}
-            text={t('appointments.troubleLoadingSomeAppointments')}
-            border="error"
-            titleA11yLabel={a11yLabelVA(t('appointments.appointmentsStatusSomeUnavailable'))}
-            textA11yLabel={a11yLabelVA(t('appointments.troubleLoadingSomeAppointments'))}
           />
         </Box>
       )
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
index 02380b52693..256d98d07de 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
@@ -9,7 +9,7 @@ import { filter } from 'underscore'
 
 import { usePrescriptions, useRequestRefills } from 'api/prescriptions'
 import { PrescriptionsList, RefillRequestSummaryItems } from 'api/types'
-import { AlertBox, Box, ErrorComponent, LoadingComponent, TextView } from 'components'
+import { AlertWithScroll, Box, ErrorComponent, LoadingComponent, TextView } from 'components'
 import SelectionList from 'components/SelectionList'
 import { SelectionListItemObj } from 'components/SelectionList/SelectionListItem'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
@@ -199,7 +199,11 @@ export function RefillScreen({ navigation, route }: RefillScreenProps) {
         <>
           {showAlert && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertBox border="error" title={t('prescriptions.refill.pleaseSelect')} scrollViewRef={scrollViewRef} />
+              <AlertWithScroll
+                variant="error"
+                header={t('prescriptions.refill.pleaseSelect')}
+                scrollViewRef={scrollViewRef}
+              />
             </Box>
           )}
           <Box mx={theme.dimensions.gutter}>
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
index c998d92d1be..8cdc6ad27ae 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
@@ -30,6 +30,7 @@ import {
   SendMessageParameters,
 } from 'api/types'
 import {
+  AlertWithScroll,
   Box,
   ErrorComponent,
   FieldType,
@@ -522,14 +523,14 @@ function EditDraft({ navigation, route }: EditDraftProps) {
   function renderForm() {
     if (noProviderError) {
       return (
-        <AlertBox
-          title={t('secureMessaging.startNewMessage.noMatchWithProvider')}
-          text={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
-          textA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}
-          border="error"
+        <AlertWithScroll
+          variant="error"
+          header={t('secureMessaging.startNewMessage.noMatchWithProvider')}
+          description={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
+          descriptionA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}
           scrollViewRef={scrollViewRef}>
           <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-        </AlertBox>
+        </AlertWithScroll>
       )
     }
 
@@ -558,7 +559,7 @@ function EditDraft({ navigation, route }: EditDraftProps) {
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
           scrollViewRef={scrollViewRef}
-          focusOnError={onSendClicked}
+          isFocused={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
index 89091a2643d..c01ac1e9565 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
@@ -294,7 +294,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) {
           scrollViewRef={scrollViewRef}
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
-          focusOnError={onSendClicked}
+          isFocused={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
index 5fb0aa0b63c..d79f9d84d27 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
@@ -9,7 +9,7 @@ import { StackScreenProps } from '@react-navigation/stack'
 import styled from 'styled-components'
 import _ from 'underscore'
 
-import { AlertBox, Box, FullScreenSubtask, TextView, VABulletList } from 'components'
+import { AlertWithScroll, Box, FullScreenSubtask, TextView, VABulletList } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { FormHeaderTypeConstants } from 'constants/secureMessaging'
@@ -183,7 +183,12 @@ function Attachments({ navigation, route }: AttachmentsProps) {
       <Box mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
         {!!error && (
           <Box mb={theme.dimensions.standardMarginBetween}>
-            <AlertBox scrollViewRef={scrollViewRef} text={error} textA11yLabel={errorA11y} border="error" />
+            <AlertWithScroll
+              variant="error"
+              description={error}
+              descriptionA11yLabel={errorA11y}
+              scrollViewRef={scrollViewRef}
+            />
           </Box>
         )}
         <TextView variant="MobileBodyBold" accessibilityRole="header">
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx
index ce7ee5eaa5a..8bad09d524d 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx
@@ -395,7 +395,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
           scrollViewRef={scrollViewRef}
-          focusOnError={onSendClicked}
+          isFocused={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
index 03cceac133a..5476c210074 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
@@ -11,7 +11,7 @@ import { useContactInformation } from 'api/contactInformation'
 import { useDeleteAddress, useSaveAddress, useValidateAddress } from 'api/contactInformation'
 import { AddressData, addressTypeFields, addressTypes } from 'api/types'
 import {
-  AlertBox,
+  AlertWithScroll,
   Box,
   FieldType,
   FormFieldType,
@@ -593,11 +593,11 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) {
           )}
           {formContainsError && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertBox
-                title={t('editAddress.alertError')}
-                border="error"
+              <AlertWithScroll
+                variant="error"
+                header={t('editAddress.alertError')}
+                isFocused={onSaveClicked}
                 scrollViewRef={scrollViewRef}
-                focusOnError={onSaveClicked}
               />
             </Box>
           )}
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
index 3b7f9a7b9f1..1192527988c 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
@@ -8,7 +8,15 @@ import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-c
 
 import { useContactInformation, useDeleteEmail, useSaveEmail } from 'api/contactInformation'
 import { SaveEmailData } from 'api/types'
-import { AlertBox, Box, FieldType, FormFieldType, FormWrapper, FullScreenSubtask, LoadingComponent } from 'components'
+import {
+  AlertWithScroll,
+  Box,
+  FieldType,
+  FormFieldType,
+  FormWrapper,
+  FullScreenSubtask,
+  LoadingComponent,
+} from 'components'
 import { SnackbarMessages } from 'components/SnackBar'
 import { EMAIL_REGEX_EXP } from 'constants/common'
 import { NAMESPACE } from 'constants/namespaces'
@@ -222,11 +230,11 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) {
           )}
           {formContainsError && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertBox
+              <AlertWithScroll
+                variant="error"
+                header={t('editEmail.alertError')}
+                isFocused={onSaveClicked}
                 scrollViewRef={scrollViewRef}
-                title={t('editEmail.alertError')}
-                border="error"
-                focusOnError={onSaveClicked}
               />
             </Box>
           )}
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
index 4acaa6be404..1c5b042c909 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
@@ -9,7 +9,15 @@ import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/m
 import { useDeletePhoneNumber, useSavePhoneNumber } from 'api/contactInformation'
 import { useContactInformation } from 'api/contactInformation/getContactInformation'
 import { PhoneData, PhoneType, PhoneTypeToFormattedNumber, UserContactInformation } from 'api/types'
-import { Box, FieldType, FormFieldType, FormWrapper, FullScreenSubtask, LoadingComponent } from 'components'
+import {
+  AlertWithScroll,
+  Box,
+  FieldType,
+  FormFieldType,
+  FormWrapper,
+  FullScreenSubtask,
+  LoadingComponent,
+} from 'components'
 import { SnackbarMessages } from 'components/SnackBar'
 import { MAX_DIGITS, MAX_DIGITS_AFTER_FORMAT } from 'constants/common'
 import { NAMESPACE } from 'constants/namespaces'
@@ -270,11 +278,11 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) {
           <Alert variant="info" description={t('editPhoneNumber.weCanOnlySupportUSNumbers')} />
           {formContainsError && (
             <Box mt={theme.dimensions.standardMarginBetween}>
-              <AlertBox
+              <AlertWithScroll
+                variant="error"
+                header={t('editPhoneNumber.checkPhoneNumber')}
+                isFocused={onSaveClicked}
                 scrollViewRef={scrollViewRef}
-                title={t('editPhoneNumber.checkPhoneNumber')}
-                border="error"
-                focusOnError={onSaveClicked}
               />
             </Box>
           )}
diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
index e5e208c8ec3..4341ebee7b2 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
@@ -9,7 +9,7 @@ import { RootNavStackParamList } from 'App'
 import { checkIfRoutingNumberIsInvalid, useUpdateBankInfo } from 'api/directDeposit'
 import { AccountTypes, PaymentAccountData } from 'api/types'
 import {
-  AlertBox,
+  AlertWithScroll,
   Box,
   CollapsibleView,
   FieldType,
@@ -248,22 +248,22 @@ function EditDirectDepositScreen({ navigation, route }: EditDirectDepositProps)
           <Box mb={contentMarginBottom}>
             {formContainsError && (
               <Box mb={standardMarginBetween}>
-                <AlertBox
+                <AlertWithScroll
+                  variant="error"
+                  header={t('editDirectDeposit.pleaseCheckDDInfo')}
+                  isFocused={onSaveClicked}
                   scrollViewRef={scrollViewRef}
-                  title={t('editDirectDeposit.pleaseCheckDDInfo')}
-                  border="error"
-                  focusOnError={onSaveClicked}
                 />
               </Box>
             )}
             {invalidRoutingNumberError && (
               <Box mb={standardMarginBetween}>
-                <AlertBox
+                <AlertWithScroll
+                  variant="error"
+                  header={t('editDirectDeposit.error')}
+                  description={t('editDirectDeposit.errorInvalidRoutingNumber')}
+                  isFocused={onSaveClicked}
                   scrollViewRef={scrollViewRef}
-                  title={t('editDirectDeposit.error')}
-                  text={t('editDirectDeposit.errorInvalidRoutingNumber')}
-                  border="error"
-                  focusOnError={onSaveClicked}
                 />
               </Box>
             )}

From eba1446d3c3929aee4a568d650e498ba42e00821 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 8 Jul 2024 18:35:21 -0600
Subject: [PATCH 05/21] Remove adjustment to alert scroll position

---
 VAMobile/src/components/AlertWithScroll.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/VAMobile/src/components/AlertWithScroll.tsx b/VAMobile/src/components/AlertWithScroll.tsx
index 02834c53cb2..16ab555197b 100644
--- a/VAMobile/src/components/AlertWithScroll.tsx
+++ b/VAMobile/src/components/AlertWithScroll.tsx
@@ -20,12 +20,11 @@ export type AlertWithScrollProps = AlertProps & {
 const AlertWithScroll: FC<AlertWithScrollProps> = ({ children, scrollViewRef, isFocused = true, ...props }) => {
   const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
   const { variant, header, description } = props
-  const boxPadding = 20
 
   useEffect(() => {
     if (variant === 'error' && scrollViewRef?.current && (header || description)) {
       scrollRef.current = scrollViewRef.current
-      scrollToAlert(-boxPadding)
+      scrollToAlert()
     }
   }, [variant, scrollRef, scrollViewRef, scrollToAlert, header, description])
 

From 43559887c17ca9be31983777b979eeefcfde2826 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 08:20:43 -0600
Subject: [PATCH 06/21] Change name to AlertWithHaptics

---
 .../CustomHooks/useAutoScrollToElement.mdx    |  4 +-
 ...oll.test.tsx => AlertWithHaptics.test.tsx} |  6 +--
 VAMobile/src/components/AlertWithHaptics.tsx  | 54 +++++++++++++++++++
 VAMobile/src/components/AlertWithScroll.tsx   | 46 ----------------
 .../CommonErrorComponents/CallHelpCenter.tsx  |  8 +--
 .../CommonErrorComponents/DowntimeError.tsx   |  8 ++-
 .../CommonErrorComponents/ErrorAlert.tsx      |  8 +--
 VAMobile/src/components/EncourageUpdate.tsx   |  8 +--
 VAMobile/src/components/MessageAlert.tsx      | 20 +++----
 VAMobile/src/components/WaygateWrapper.tsx    |  8 +--
 VAMobile/src/components/index.ts              |  4 +-
 .../ClaimFileUpload/SelectFile/SelectFile.tsx |  4 +-
 .../ClaimFileUpload/TakePhotos/TakePhotos.tsx |  4 +-
 .../UploadOrAddPhotos/UploadOrAddPhotos.tsx   |  6 +--
 .../ClaimTimeline/ClaimTimeline.tsx           |  6 +--
 .../EstimatedDecisionDate.tsx                 |  8 +--
 .../ClaimsHistoryScreen.tsx                   |  6 +--
 .../Letters/GenericLetter/GenericLetter.tsx   | 16 ++++--
 .../Appointments/Appointments.tsx             |  4 +-
 .../PrescriptionHistoryNoPrescriptions.tsx    |  7 ++-
 .../PrescriptionHistoryNotAuthorized.tsx      |  4 +-
 .../RefillScreens/RefillRequestSummary.tsx    | 21 +++++---
 .../Pharmacy/RefillScreens/RefillScreen.tsx   |  4 +-
 .../SecureMessaging/EditDraft/EditDraft.tsx   | 14 ++---
 .../ReplyMessage/ReplyMessage.tsx             |  2 +-
 .../Attachments/Attachments.tsx               |  4 +-
 .../StartNewMessage/StartNewMessage.tsx       |  9 ++--
 .../IndividualMessageErrorComponent.tsx       |  8 +--
 .../ViewMessage/ViewMessageScreen.tsx         |  6 +--
 .../NoVaccineRecords/NoVaccineRecords.tsx     |  8 ++-
 .../EditAddressScreen/EditAddressScreen.tsx   |  6 +--
 .../EditEmailScreen/EditEmailScreen.tsx       |  6 +--
 .../EditPhoneNumberScreen.tsx                 | 10 ++--
 .../NotificationsSettingsScreen.tsx           |  7 +--
 .../EditDirectDepositScreen.tsx               | 10 ++--
 .../HowToUpdateDirectDepositScreen.tsx        |  8 ++-
 .../NoPayments/NoPaymentsScreen.tsx           |  8 ++-
 .../screens/auth/LoginScreen/LoginScreen.tsx  | 17 ++++--
 38 files changed, 206 insertions(+), 181 deletions(-)
 rename VAMobile/src/components/{AlertWithScroll.test.tsx => AlertWithHaptics.test.tsx} (60%)
 create mode 100644 VAMobile/src/components/AlertWithHaptics.tsx
 delete mode 100644 VAMobile/src/components/AlertWithScroll.tsx

diff --git a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
index c5dea0c423f..ac743d85576 100644
--- a/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
+++ b/VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx
@@ -34,7 +34,7 @@ return (
     </Box>
     {replyExpired && (
         <Box mt={theme.dimensions.standardMarginBetween} mx={theme.dimensions.gutter} mb={theme.dimensions.contentMarginBottom}>
-        <AlertWithScroll variant={'warning'} header={t('secureMessaging.reply.youCanNoLonger')} description={t('secureMessaging.reply.olderThan45Days')}>
+        <AlertWithHaptics variant={'warning'} header={t('secureMessaging.reply.youCanNoLonger')} description={t('secureMessaging.reply.olderThan45Days')}>
             <Box mt={theme.dimensions.standardMarginBetween}>
             <Button
                 label={t('secureMessaging.startNewMessage.new')}
@@ -42,7 +42,7 @@ return (
                 a11yHint={t('secureMessaging.startNewMessage.new.a11yHint')}
             />
             </Box>
-        </AlertWithScroll>
+        </AlertWithHaptics>
         </Box>
     )}
     </VAScrollView>
diff --git a/VAMobile/src/components/AlertWithScroll.test.tsx b/VAMobile/src/components/AlertWithHaptics.test.tsx
similarity index 60%
rename from VAMobile/src/components/AlertWithScroll.test.tsx
rename to VAMobile/src/components/AlertWithHaptics.test.tsx
index 9785c596ae1..802253863f6 100644
--- a/VAMobile/src/components/AlertWithScroll.test.tsx
+++ b/VAMobile/src/components/AlertWithHaptics.test.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 
 import { context, render, screen } from 'testUtils'
 
-import AlertWithScroll from './AlertWithScroll'
+import AlertWithHaptics from './AlertWithHaptics'
 
-context('AlertWithScroll', () => {
+context('AlertWithHaptics', () => {
   beforeEach(() => {
-    render(<AlertWithScroll variant="warning" header={'Warning title'} description={'My warning'} />)
+    render(<AlertWithHaptics variant="warning" header={'Warning title'} description={'My warning'} />)
   })
 
   it('initializes correctly', () => {
diff --git a/VAMobile/src/components/AlertWithHaptics.tsx b/VAMobile/src/components/AlertWithHaptics.tsx
new file mode 100644
index 00000000000..be1e42bfa96
--- /dev/null
+++ b/VAMobile/src/components/AlertWithHaptics.tsx
@@ -0,0 +1,54 @@
+import React, { FC, RefObject, useEffect, useState } from 'react'
+import { ScrollView, View } from 'react-native'
+import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
+
+import { Alert, AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
+
+import { triggerHaptic } from 'utils/haptics'
+import { useAutoScrollToElement } from 'utils/hooks'
+
+export type AlertWithHapticsProps = AlertProps & {
+  /** Optional boolean for determining when to focus on error alert boxes (e.g. onSaveClicked). Default is true */
+  focusOnError?: boolean
+  /** Optional ref for the parent scrollView so we can scroll to the Alert */
+  scrollViewRef?: RefObject<ScrollView>
+}
+
+/**
+ * Wrapper for the Alert component which triggers haptics and optionally scrolls
+ */
+const AlertWithHaptics: FC<AlertWithHapticsProps> = ({
+  children,
+  scrollViewRef,
+  focusOnError = true,
+  ...alertProps
+}) => {
+  const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
+  const [shouldFocus, setShouldFocus] = useState(true)
+  const { variant, header, description } = alertProps
+
+  useEffect(() => {
+    if (variant === 'error' && scrollViewRef?.current && (header || description)) {
+      scrollRef.current = scrollViewRef.current
+      scrollToAlert()
+    }
+    setShouldFocus(focusOnError)
+  }, [variant, focusOnError, scrollRef, scrollToAlert, scrollViewRef, header, description])
+
+  const vibrate = () => {
+    if (variant === 'error') {
+      triggerHaptic(HapticFeedbackTypes.notificationError)
+    } else if (variant === 'warning') {
+      triggerHaptic(HapticFeedbackTypes.notificationWarning)
+    }
+  }
+
+  return (
+    <View ref={viewRef}>
+      <Alert {...alertProps}>{children}</Alert>
+      {shouldFocus && vibrate()}
+    </View>
+  )
+}
+
+export default AlertWithHaptics
diff --git a/VAMobile/src/components/AlertWithScroll.tsx b/VAMobile/src/components/AlertWithScroll.tsx
deleted file mode 100644
index 16ab555197b..00000000000
--- a/VAMobile/src/components/AlertWithScroll.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { FC, RefObject, useEffect } from 'react'
-import { ScrollView, View } from 'react-native'
-import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
-
-import { Alert, AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
-
-import { triggerHaptic } from 'utils/haptics'
-import { useAutoScrollToElement } from 'utils/hooks'
-
-export type AlertWithScrollProps = AlertProps & {
-  /** Ref for the parent scrollView so we can scroll to the Alert */
-  scrollViewRef: RefObject<ScrollView>
-  /** Optional boolean indicating when Alert is focused. Default is true */
-  isFocused?: boolean
-}
-
-/**
- * Wrapper for the Alert component which scrolls to the Alert
- */
-const AlertWithScroll: FC<AlertWithScrollProps> = ({ children, scrollViewRef, isFocused = true, ...props }) => {
-  const [scrollRef, viewRef, scrollToAlert] = useAutoScrollToElement()
-  const { variant, header, description } = props
-
-  useEffect(() => {
-    if (variant === 'error' && scrollViewRef?.current && (header || description)) {
-      scrollRef.current = scrollViewRef.current
-      scrollToAlert()
-    }
-  }, [variant, scrollRef, scrollViewRef, scrollToAlert, header, description])
-
-  if (isFocused) {
-    if (variant === 'error') {
-      triggerHaptic(HapticFeedbackTypes.notificationError)
-    } else if (variant === 'warning') {
-      triggerHaptic(HapticFeedbackTypes.notificationWarning)
-    }
-  }
-
-  return (
-    <View ref={viewRef}>
-      <Alert {...props}>{children}</Alert>
-    </View>
-  )
-}
-
-export default AlertWithScroll
diff --git a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
index e686c185fae..8d888e1379d 100644
--- a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
@@ -3,9 +3,9 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -64,7 +64,7 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <Alert
+        <AlertWithHaptics
           variant="error"
           header={titleText ? titleText : t('errors.callHelpCenter.vaAppNotWorking')}
           headerA11yLabel={titleA11yHint ? titleA11yHint : a11yLabelVA(t('errors.callHelpCenter.vaAppNotWorking'))}
@@ -88,7 +88,7 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
               </Box>
             )}
           </Box>
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
index 52fc0402748..1dcfaeda4a6 100644
--- a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
 import { DowntimeFeatureType, ScreenIDToDowntimeFeatures, ScreenIDTypes } from 'store/api/types'
@@ -52,7 +50,7 @@ const DowntimeError: FC<DowntimeErrorProps> = ({ screenID }) => {
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <Alert
+        <AlertWithHaptics
           variant="warning"
           header={t('downtime.title')}
           headerA11yLabel={t('downtime.title')}
@@ -66,7 +64,7 @@ const DowntimeError: FC<DowntimeErrorProps> = ({ screenID }) => {
             phone={t('8006982411')}
             a11yLabel={a11yLabelID(t('8006982411'))}
           />
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
index 625f57e1a00..e20c67f4e1b 100644
--- a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
@@ -2,9 +2,9 @@ import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { useTheme } from 'utils/hooks'
 
@@ -33,11 +33,11 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ onTryAgain, title, text }) => {
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <Alert variant="error" header={title || t('errorAlert.title')} description={text}>
+        <AlertWithHaptics variant="error" header={title || t('errorAlert.title')} description={text}>
           <Box mt={theme.dimensions.standardMarginBetween} accessibilityRole="button">
             <Button onPress={onTryAgain} label={t('refresh')} testID={t('refresh')} />
           </Box>
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/EncourageUpdate.tsx b/VAMobile/src/components/EncourageUpdate.tsx
index b0ccf01f8a5..45739e605c2 100644
--- a/VAMobile/src/components/EncourageUpdate.tsx
+++ b/VAMobile/src/components/EncourageUpdate.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, WhatsNew } from 'components'
+import { AlertWithHaptics, Box, WhatsNew } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
@@ -88,7 +88,7 @@ export const EncourageUpdateAlert = () => {
   if (displayEU) {
     return (
       <Box mb={theme.dimensions.buttonPadding}>
-        <Alert variant="warning" header={t('encourageUpdate.title')} description={t('encourageUpdate.body')}>
+        <AlertWithHaptics variant="warning" header={t('encourageUpdate.title')} description={t('encourageUpdate.body')}>
           <Box>
             <Box my={theme.dimensions.gutter} accessibilityRole="button" mr={theme.dimensions.buttonPadding}>
               <Button onPress={onUpdatePressed} label={t('updateNow')} />
@@ -97,7 +97,7 @@ export const EncourageUpdateAlert = () => {
               <Button onPress={onSkipPressed} label={t('encourageUpdate.skip')} buttonType={ButtonVariants.Secondary} />
             </Box>
           </Box>
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     )
   } else if (localVersionName && storeVersion && localVersionName >= storeVersion) {
diff --git a/VAMobile/src/components/MessageAlert.tsx b/VAMobile/src/components/MessageAlert.tsx
index 276965606a1..3398784bf92 100644
--- a/VAMobile/src/components/MessageAlert.tsx
+++ b/VAMobile/src/components/MessageAlert.tsx
@@ -2,15 +2,15 @@ import React, { FC, RefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView } from 'react-native'
 
-import { AlertWithScroll, Box, LinkWithAnalytics, TextView, VABulletList } from 'components'
+import { AlertWithHaptics, Box, LinkWithAnalytics, TextView, VABulletList } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
 export type MessageAlertProps = {
   /** ref for parent scroll view */
   scrollViewRef: RefObject<ScrollView>
-  /** Optional boolean indicating when Alert is focused. Default is true */
-  isFocused?: boolean
+  /** Optional boolean for determining when to focus on error alert boxes (e.g. onSaveClicked). Default is true */
+  focusOnError?: boolean
   /**sets if there is validation errors */
   hasValidationError?: boolean
   /**sets if attempted to save a draft */
@@ -26,7 +26,7 @@ const MessageAlert: FC<MessageAlertProps> = ({
   hasValidationError,
   saveDraftAttempted,
   scrollViewRef,
-  isFocused = true,
+  focusOnError = true,
   errorList,
   replyTriageError,
 }) => {
@@ -53,22 +53,22 @@ const MessageAlert: FC<MessageAlertProps> = ({
 
   return hasValidationError ? (
     <Box mb={theme.dimensions.standardMarginBetween}>
-      <AlertWithScroll
+      <AlertWithHaptics
         variant="error"
         header={t('secureMessaging.formMessage.weNeedMoreInfo')}
         description={text}
         scrollViewRef={scrollViewRef}
-        isFocused={isFocused}>
+        focusOnError={focusOnError}>
         <VABulletList listOfText={bulletedListOfText} />
-      </AlertWithScroll>
+      </AlertWithHaptics>
     </Box>
   ) : replyTriageError ? (
     <Box mb={theme.dimensions.standardMarginBetween}>
-      <AlertWithScroll
+      <AlertWithHaptics
         variant="error"
         header={t('secureMessaging.sendError.title')}
         scrollViewRef={scrollViewRef}
-        isFocused={isFocused}>
+        focusOnError={focusOnError}>
         <TextView variant="MobileBody" my={theme.dimensions.standardMarginBetween}>
           {t('secureMessaging.reply.error.youCantSend')}
         </TextView>
@@ -79,7 +79,7 @@ const MessageAlert: FC<MessageAlertProps> = ({
           {t('secureMessaging.reply.error.ifYouThink')}
         </TextView>
         <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-      </AlertWithScroll>
+      </AlertWithHaptics>
     </Box>
   ) : (
     <></>
diff --git a/VAMobile/src/components/WaygateWrapper.tsx b/VAMobile/src/components/WaygateWrapper.tsx
index 82de095c8b6..c627d62ee87 100644
--- a/VAMobile/src/components/WaygateWrapper.tsx
+++ b/VAMobile/src/components/WaygateWrapper.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 
 import { useIsFocused, useNavigationState } from '@react-navigation/native'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, ClickToCallPhoneNumber } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -49,7 +49,7 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
       waygate.errorPhoneNumber && waygate.errorPhoneNumber.length > 0 ? waygate.errorPhoneNumber : t('8006982411')
     return (
       <Box mb={theme.dimensions.condensedMarginBetween}>
-        <Alert
+        <AlertWithHaptics
           variant={waygate.type === 'DenyContent' ? 'error' : 'warning'}
           header={waygate.errorMsgTitle}
           headerA11yLabel={a11yLabelVA(waygate.errorMsgTitle || '')}
@@ -64,7 +64,7 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
             />
           </Box>
           {waygate.appUpdateButton === true && <Button onPress={onUpdateButtonPress} label={t('updateNow')} />}
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     )
   }
diff --git a/VAMobile/src/components/index.ts b/VAMobile/src/components/index.ts
index 3cd75ec1a2c..8fdec031331 100644
--- a/VAMobile/src/components/index.ts
+++ b/VAMobile/src/components/index.ts
@@ -40,8 +40,8 @@ export { default as FormAttachments } from './FormWrapper/FormFields/FormAttachm
 export * from './FormWrapper/FormFields/FormAttachments'
 export { default as VAImage } from './VAImage/VAImage'
 export * from './VAImage/VAImage'
-export { default as AlertWithScroll } from './AlertWithScroll'
-export * from './AlertWithScroll'
+export { default as AlertWithHaptics } from './AlertWithHaptics'
+export * from './AlertWithHaptics'
 export { default as Switch } from './Switch'
 export * from './Switch'
 export * from './types'
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
index 47b2270cd10..dc6c55ee618 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.tsx
@@ -7,7 +7,7 @@ import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/typ
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertWithScroll, Box, TextArea, TextView } from 'components'
+import { AlertWithHaptics, Box, TextArea, TextView } from 'components'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -115,7 +115,7 @@ function SelectFile({ navigation, route }: SelectFilesProps) {
       <Box mb={theme.dimensions.contentMarginBottom}>
         {!!error && (
           <Box mb={theme.dimensions.standardMarginBetween}>
-            <AlertWithScroll variant="error" description={error} scrollViewRef={scrollViewRef} />
+            <AlertWithHaptics variant="error" description={error} scrollViewRef={scrollViewRef} />
           </Box>
         )}
         <TextArea>
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index 816edffbe41..25386155105 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -7,7 +7,7 @@ import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/typ
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertWithScroll, Box, LinkWithAnalytics, TextArea, TextView } from 'components'
+import { AlertWithHaptics, Box, LinkWithAnalytics, TextArea, TextView } from 'components'
 import CollapsibleAlert from 'components/CollapsibleAlert'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
@@ -81,7 +81,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
       testID="takePhotosTestID">
       {!!error && (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertWithScroll variant="error" description={error} scrollViewRef={scrollViewRef} />
+          <AlertWithHaptics variant="error" description={error} scrollViewRef={scrollViewRef} />
         </Box>
       )}
       <Box mb={theme.dimensions.standardMarginBetween}>
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 d25b76c683e..03294268af9 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
@@ -12,7 +12,7 @@ import _ from 'underscore'
 import { useClaim, useUploadFileToClaim } from 'api/claimsAndAppeals'
 import { ClaimEventData, UploadFileToClaimParamaters } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   FieldType,
   FormFieldType,
@@ -334,12 +334,12 @@ function UploadOrAddPhotos({ navigation, route }: UploadOrAddPhotosProps) {
         <Box mb={theme.dimensions.contentMarginBottom}>
           {!!errorMessage && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertWithScroll
+              <AlertWithHaptics
                 variant="error"
                 header={t('fileUpload.PhotosNotUploaded')}
                 description={errorMessage}
                 scrollViewRef={scrollViewRef}
-                isFocused={onSaveClicked}
+                focusOnError={onSaveClicked}
               />
             </Box>
           )}
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
index 5e8998d1df7..62a47667cc7 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/ClaimTimeline.tsx
@@ -3,10 +3,8 @@ import { useTranslation } from 'react-i18next'
 
 import { useFocusEffect } from '@react-navigation/native'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { ClaimAttributesData } from 'api/types'
-import { Box } from 'components'
+import { AlertWithHaptics, Box } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import theme from 'styles/themes/standardTheme'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -39,7 +37,7 @@ function ClaimTimeline({ attributes, claimID }: ClaimTimelineProps) {
     <Box>
       {itemsNeededFromVet && !attributes.waiverSubmitted && (
         <Box my={theme.dimensions.standardMarginBetween}>
-          <Alert
+          <AlertWithHaptics
             variant={'warning'}
             headerA11yLabel={a11yLabelVA(t('claimPhase.youHaveFileRequest', { count }))}
             header={t('claimPhase.youHaveFileRequest', { count })}
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
index b2a58c2c812..e744debe88e 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { DateTime } from 'luxon'
 
-import { Box, TextArea, TextView } from 'components'
+import { AlertWithHaptics, Box, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { testIdProps } from 'utils/accessibility'
 import getEnv from 'utils/env'
@@ -30,7 +30,7 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
   //Opting to leave this code in place...because removing it will clearly kickstart pandemic part 4000.
   if (showCovidMessage) {
     return (
-      <Alert variant="warning" description={t('claimDetails.covidMessage')}>
+      <AlertWithHaptics variant="warning" description={t('claimDetails.covidMessage')}>
         <Box mt={theme.dimensions.standardMarginBetween}>
           <Button
             onPress={onAlertLinkPress}
@@ -39,7 +39,7 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
             a11yHint={t('claimDetails.reviewLocationsA11yHint')}
           />
         </Box>
-      </Alert>
+      </AlertWithHaptics>
     )
   }
 
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
index f45b3f599fd..ed04b36e65e 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimsHistoryScreen/ClaimsHistoryScreen.tsx
@@ -4,12 +4,12 @@ import { ScrollView } from 'react-native'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert, SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
+import { SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { useClaimsAndAppeals } from 'api/claimsAndAppeals'
 import { ClaimsAndAppealsErrorServiceTypesConstants } from 'api/types'
-import { Box, ErrorComponent, FeatureLandingTemplate, LoadingComponent } from 'components'
+import { AlertWithHaptics, Box, ErrorComponent, FeatureLandingTemplate, LoadingComponent } from 'components'
 import { VAScrollViewProps } from 'components/VAScrollView'
 import { Events } from 'constants/analytics'
 import { ClaimTypeConstants } from 'constants/claims'
@@ -109,7 +109,7 @@ function ClaimsHistoryScreen({ navigation }: IClaimsHistoryScreen) {
 
       return (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <Alert variant="error" header={alertTitle} description={alertText} />
+          <AlertWithHaptics variant="error" header={alertTitle} description={alertText} />
         </Box>
       )
     }
diff --git a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
index f0879770f1c..27218bb53f7 100644
--- a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
@@ -3,11 +3,19 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useDownloadLetter, useLetterBeneficiaryData } from 'api/letters'
 import { LetterTypeConstants, LettersDownloadParams } from 'api/types'
-import { BasicError, Box, FeatureLandingTemplate, LoadingComponent, TextArea, TextView } from 'components'
+import {
+  AlertWithHaptics,
+  BasicError,
+  Box,
+  FeatureLandingTemplate,
+  LoadingComponent,
+  TextArea,
+  TextView,
+} from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { BenefitsStackParamList } from 'screens/BenefitsScreen/BenefitsStackScreens'
 import { testIdProps } from 'utils/accessibility'
@@ -51,9 +59,9 @@ function GenericLetter({ navigation, route }: GenericLetterProps) {
     <Box mb={theme.dimensions.contentMarginBottom}>
       {letterType === LetterTypeConstants.serviceVerification && (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <Alert variant="info">
+          <AlertWithHaptics variant="info">
             <TextView variant="MobileBody">{t('letters.serviceVerificationLetter.informational')}</TextView>
-          </Alert>
+          </AlertWithHaptics>
         </Box>
       )}
       <TextArea>
diff --git a/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx b/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
index 5b69c41d107..a28b8de94b3 100644
--- a/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
+++ b/VAMobile/src/screens/HealthScreen/Appointments/Appointments.tsx
@@ -9,7 +9,7 @@ import { SegmentedControl } from '@department-of-veterans-affairs/mobile-compone
 import { useAppointments } from 'api/appointments'
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { AppointmentsErrorServiceTypesConstants } from 'api/types'
-import { AlertWithScroll, Box, ErrorComponent, FeatureLandingTemplate } from 'components'
+import { AlertWithHaptics, Box, ErrorComponent, FeatureLandingTemplate } from 'components'
 import { VAScrollViewProps } from 'components/VAScrollView'
 import { Events } from 'constants/analytics'
 import { TimeFrameTypeConstants } from 'constants/appointments'
@@ -86,7 +86,7 @@ function Appointments({ navigation }: AppointmentsScreenProps) {
     if (serviceError) {
       return (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertWithScroll
+          <AlertWithHaptics
             variant="error"
             header={t('appointments.appointmentsStatusSomeUnavailable')}
             headerA11yLabel={a11yLabelVA(t('appointments.appointmentsStatusSomeUnavailable'))}
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
index 4881e4d8213..154e9091d88 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
 import {
+  AlertWithHaptics,
   Box,
   BoxProps,
   ClickToCallPhoneNumber,
@@ -55,7 +54,7 @@ function PrescriptionHistoryNoPrescriptions() {
   return (
     <VAScrollView>
       <Box {...alertWrapperProps}>
-        <Alert
+        <AlertWithHaptics
           variant="info"
           header={t('prescriptions.notFound.title')}
           headerA11yLabel={a11yLabelVA(t('prescriptions.notFound.title'))}>
@@ -68,7 +67,7 @@ function PrescriptionHistoryNoPrescriptions() {
           <VABulletList listOfText={medicationsNotIncludedList} paragraphSpacing={true} />
           <TextView paragraphSpacing={true}>{t('prescriptions.notFound.bullets.ifYouThink')}</TextView>
           <ClickToCallPhoneNumber displayedText={displayedTextPhoneNumber(t('8773270022'))} phone={t('8773270022')} />
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
index 008cdfea17c..29d9af39029 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNotAuthorized.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
 import { LinkProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Link/Link'
 
 import {
+  AlertWithHaptics,
   Box,
   BoxProps,
   ClickToCallPhoneNumber,
@@ -59,7 +59,7 @@ function PrescriptionHistoryNotAuthorized() {
   return (
     <VAScrollView>
       <Box {...alertWrapperProps}>
-        <Alert
+        <AlertWithHaptics
           variant="warning"
           header={t('prescriptions.notAuthorized.warning')}
           headerA11yLabel={a11yLabelVA(t('prescriptions.notAuthorized.warning'))}
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
index 228f015227f..292e0798296 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
@@ -3,12 +3,21 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
-import { AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
+import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useRequestRefills } from 'api/prescriptions'
 import { PrescriptionsList, RefillStatusConstants } from 'api/types'
-import { Box, BoxProps, LoadingComponent, TextArea, TextView, VAIcon, VAIconProps } from 'components'
+import {
+  AlertWithHaptics,
+  AlertWithHapticsProps,
+  Box,
+  BoxProps,
+  LoadingComponent,
+  TextArea,
+  TextView,
+  VAIcon,
+  VAIconProps,
+} from 'components'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -71,7 +80,7 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
   })
 
   const renderAlert = (): ReactElement => {
-    let alertBoxProps: AlertProps
+    let alertBoxProps: AlertWithHapticsProps
     switch (status) {
       case REQUEST_STATUS.SUCCESS:
         alertBoxProps = {
@@ -92,7 +101,7 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
     }
     return (
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <Alert {...alertBoxProps}>
+        <AlertWithHaptics {...alertBoxProps}>
           {status !== REQUEST_STATUS.SUCCESS && (
             <Box mt={theme.dimensions.standardMarginBetween}>
               <Button
@@ -106,7 +115,7 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
               />
             </Box>
           )}
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
index 256d98d07de..ed2cd0db947 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillScreen.tsx
@@ -9,7 +9,7 @@ import { filter } from 'underscore'
 
 import { usePrescriptions, useRequestRefills } from 'api/prescriptions'
 import { PrescriptionsList, RefillRequestSummaryItems } from 'api/types'
-import { AlertWithScroll, Box, ErrorComponent, LoadingComponent, TextView } from 'components'
+import { AlertWithHaptics, Box, ErrorComponent, LoadingComponent, TextView } from 'components'
 import SelectionList from 'components/SelectionList'
 import { SelectionListItemObj } from 'components/SelectionList/SelectionListItem'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
@@ -199,7 +199,7 @@ export function RefillScreen({ navigation, route }: RefillScreenProps) {
         <>
           {showAlert && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertWithScroll
+              <AlertWithHaptics
                 variant="error"
                 header={t('prescriptions.refill.pleaseSelect')}
                 scrollViewRef={scrollViewRef}
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
index 8cdc6ad27ae..ea593962e4f 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 { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import { DateTime } from 'luxon'
 import _ from 'underscore'
@@ -30,7 +30,7 @@ import {
   SendMessageParameters,
 } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   ErrorComponent,
   FieldType,
@@ -511,11 +511,11 @@ function EditDraft({ navigation, route }: EditDraftProps) {
   function renderAlert() {
     return (
       <Box my={theme.dimensions.standardMarginBetween}>
-        <Alert variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
+        <AlertWithHaptics variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
           <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
             {t('secureMessaging.reply.olderThan45Days')}
           </TextView>
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     )
   }
@@ -523,14 +523,14 @@ function EditDraft({ navigation, route }: EditDraftProps) {
   function renderForm() {
     if (noProviderError) {
       return (
-        <AlertWithScroll
+        <AlertWithHaptics
           variant="error"
           header={t('secureMessaging.startNewMessage.noMatchWithProvider')}
           description={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
           descriptionA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}
           scrollViewRef={scrollViewRef}>
           <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-        </AlertWithScroll>
+        </AlertWithHaptics>
       )
     }
 
@@ -559,7 +559,7 @@ function EditDraft({ navigation, route }: EditDraftProps) {
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
           scrollViewRef={scrollViewRef}
-          isFocused={onSendClicked}
+          focusOnError={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
index c01ac1e9565..89091a2643d 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ReplyMessage/ReplyMessage.tsx
@@ -294,7 +294,7 @@ function ReplyMessage({ navigation, route }: ReplyMessageProps) {
           scrollViewRef={scrollViewRef}
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
-          isFocused={onSendClicked}
+          focusOnError={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
index d79f9d84d27..2307727456f 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.tsx
@@ -9,7 +9,7 @@ import { StackScreenProps } from '@react-navigation/stack'
 import styled from 'styled-components'
 import _ from 'underscore'
 
-import { AlertWithScroll, Box, FullScreenSubtask, TextView, VABulletList } from 'components'
+import { AlertWithHaptics, Box, FullScreenSubtask, TextView, VABulletList } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { FormHeaderTypeConstants } from 'constants/secureMessaging'
@@ -183,7 +183,7 @@ function Attachments({ navigation, route }: AttachmentsProps) {
       <Box mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
         {!!error && (
           <Box mb={theme.dimensions.standardMarginBetween}>
-            <AlertWithScroll
+            <AlertWithHaptics
               variant="error"
               description={error}
               descriptionA11yLabel={errorA11y}
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/StartNewMessage.tsx
index 8bad09d524d..bc6d054d929 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 { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import _ from 'underscore'
 
@@ -24,6 +24,7 @@ import {
   SendMessageParameters,
 } from 'api/types'
 import {
+  AlertWithHaptics,
   Box,
   ErrorComponent,
   FieldType,
@@ -374,13 +375,13 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
   function renderContent() {
     if (noProviderError) {
       return (
-        <Alert
+        <AlertWithHaptics
           variant="error"
           header={t('secureMessaging.startNewMessage.noMatchWithProvider')}
           description={t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled')}
           descriptionA11yLabel={a11yLabelVA(t('secureMessaging.startNewMessage.bothYouAndProviderMustBeEnrolled'))}>
           <LinkWithAnalytics type="custom" text={t('secureMessaging.goToInbox')} onPress={onGoToInbox} />
-        </Alert>
+        </AlertWithHaptics>
       )
     }
 
@@ -395,7 +396,7 @@ function StartNewMessage({ navigation, route }: StartNewMessageProps) {
           hasValidationError={formContainsError}
           saveDraftAttempted={onSaveDraftClicked}
           scrollViewRef={scrollViewRef}
-          isFocused={onSendClicked}
+          focusOnError={onSendClicked}
           errorList={errorList}
           replyTriageError={replyTriageError}
         />
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
index cbd89e788a3..a5f3d667a55 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
 import { ErrorsState } from 'store/slices'
@@ -21,7 +21,7 @@ function IndividualMessageErrorComponent() {
   return (
     <VAScrollView>
       <Box justifyContent="center">
-        <Alert
+        <AlertWithHaptics
           variant="error"
           header={t('secureMessaging.viewMessage.errorTitle')}
           headerA11yLabel={t('secureMessaging.viewMessage.errorTitle')}
@@ -40,7 +40,7 @@ function IndividualMessageErrorComponent() {
               </Box>
             )}
           </Box>
-        </Alert>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
index 32474567102..4a555fef26a 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux'
 
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
 import { useQueryClient } from '@tanstack/react-query'
 import { DateTime } from 'luxon'
 import _ from 'underscore'
@@ -23,6 +22,7 @@ import {
   SecureMessagingSystemFolderIdConstants,
 } from 'api/types'
 import {
+  AlertWithHaptics,
   Box,
   ChildTemplate,
   ErrorComponent,
@@ -405,11 +405,11 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) {
           )}
           {replyExpired && (
             <Box my={theme.dimensions.standardMarginBetween}>
-              <Alert variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
+              <AlertWithHaptics variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
                 <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
                   {t('secureMessaging.reply.olderThan45Days')}
                 </TextView>
-              </Alert>
+              </AlertWithHaptics>
             </Box>
           )}
           <MessageCard message={message} />
diff --git a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
index 5a26fb4b152..6b5db2e422f 100644
--- a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
+++ b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -15,7 +13,7 @@ function NoVaccineRecords() {
 
   return (
     <VAScrollView>
-      <Alert
+      <AlertWithHaptics
         variant="info"
         header={t('noVaccineRecords.alert.title')}
         headerA11yLabel={a11yLabelVA(t('noVaccineRecords.alert.title'))}
@@ -24,7 +22,7 @@ function NoVaccineRecords() {
           {t('noVaccineRecords.alert.text.2')}
         </TextView>
         <ClickToCallPhoneNumber phone={t('8006982411')} displayedText={displayedTextPhoneNumber(t('8006982411'))} />
-      </Alert>
+      </AlertWithHaptics>
     </VAScrollView>
   )
 }
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
index 5476c210074..c84f9a78123 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditAddressScreen/EditAddressScreen.tsx
@@ -11,7 +11,7 @@ import { useContactInformation } from 'api/contactInformation'
 import { useDeleteAddress, useSaveAddress, useValidateAddress } from 'api/contactInformation'
 import { AddressData, addressTypeFields, addressTypes } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   FieldType,
   FormFieldType,
@@ -593,10 +593,10 @@ function EditAddressScreen({ navigation, route }: IEditAddressScreen) {
           )}
           {formContainsError && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertWithScroll
+              <AlertWithHaptics
                 variant="error"
                 header={t('editAddress.alertError')}
-                isFocused={onSaveClicked}
+                focusOnError={onSaveClicked}
                 scrollViewRef={scrollViewRef}
               />
             </Box>
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
index 1192527988c..65119af6fde 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditEmailScreen/EditEmailScreen.tsx
@@ -9,7 +9,7 @@ import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-c
 import { useContactInformation, useDeleteEmail, useSaveEmail } from 'api/contactInformation'
 import { SaveEmailData } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   FieldType,
   FormFieldType,
@@ -230,10 +230,10 @@ function EditEmailScreen({ navigation }: EditEmailScreenProps) {
           )}
           {formContainsError && (
             <Box mb={theme.dimensions.standardMarginBetween}>
-              <AlertWithScroll
+              <AlertWithHaptics
                 variant="error"
                 header={t('editEmail.alertError')}
-                isFocused={onSaveClicked}
+                focusOnError={onSaveClicked}
                 scrollViewRef={scrollViewRef}
               />
             </Box>
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
index 1c5b042c909..ab622679bd4 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/EditPhoneNumberScreen/EditPhoneNumberScreen.tsx
@@ -4,13 +4,13 @@ import { ScrollView } from 'react-native'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { useDeletePhoneNumber, useSavePhoneNumber } from 'api/contactInformation'
 import { useContactInformation } from 'api/contactInformation/getContactInformation'
 import { PhoneData, PhoneType, PhoneTypeToFormattedNumber, UserContactInformation } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   FieldType,
   FormFieldType,
@@ -275,13 +275,13 @@ function EditPhoneNumberScreen({ navigation, route }: IEditPhoneNumberScreen) {
               />
             </Box>
           )}
-          <Alert variant="info" description={t('editPhoneNumber.weCanOnlySupportUSNumbers')} />
+          <AlertWithHaptics variant="info" description={t('editPhoneNumber.weCanOnlySupportUSNumbers')} />
           {formContainsError && (
             <Box mt={theme.dimensions.standardMarginBetween}>
-              <AlertWithScroll
+              <AlertWithHaptics
                 variant="error"
                 header={t('editPhoneNumber.checkPhoneNumber')}
-                isFocused={onSaveClicked}
+                focusOnError={onSaveClicked}
                 scrollViewRef={scrollViewRef}
               />
             </Box>
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
index b11b61d1205..41d3ef09298 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
@@ -6,9 +6,10 @@ import { useSelector } from 'react-redux'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert, Button } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
 import {
+  AlertWithHaptics,
   Box,
   ButtonDecoratorType,
   ErrorComponent,
@@ -109,14 +110,14 @@ function NotificationsSettingsScreen({ navigation }: NotificationsSettingsScreen
               {preferenceList()}
             </>
           ) : (
-            <Alert
+            <AlertWithHaptics
               variant="info"
               header={t('notifications.settings.alert.title')}
               description={t('notifications.settings.alert.text')}>
               <Box mt={standardMarginBetween}>
                 <Button onPress={goToSettings} label={t('notifications.settings.alert.openSettings')} />
               </Box>
-            </Alert>
+            </AlertWithHaptics>
           )}
           <TextView variant={'TableFooterLabel'} mx={gutter} mt={condensedMarginBetween}>
             {t('notifications.settings.privacy')}
diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
index 4341ebee7b2..d48add1628d 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/EditDirectDepositScreen/EditDirectDepositScreen.tsx
@@ -9,7 +9,7 @@ import { RootNavStackParamList } from 'App'
 import { checkIfRoutingNumberIsInvalid, useUpdateBankInfo } from 'api/directDeposit'
 import { AccountTypes, PaymentAccountData } from 'api/types'
 import {
-  AlertWithScroll,
+  AlertWithHaptics,
   Box,
   CollapsibleView,
   FieldType,
@@ -248,21 +248,21 @@ function EditDirectDepositScreen({ navigation, route }: EditDirectDepositProps)
           <Box mb={contentMarginBottom}>
             {formContainsError && (
               <Box mb={standardMarginBetween}>
-                <AlertWithScroll
+                <AlertWithHaptics
                   variant="error"
                   header={t('editDirectDeposit.pleaseCheckDDInfo')}
-                  isFocused={onSaveClicked}
+                  focusOnError={onSaveClicked}
                   scrollViewRef={scrollViewRef}
                 />
               </Box>
             )}
             {invalidRoutingNumberError && (
               <Box mb={standardMarginBetween}>
-                <AlertWithScroll
+                <AlertWithHaptics
                   variant="error"
                   header={t('editDirectDeposit.error')}
                   description={t('editDirectDeposit.errorInvalidRoutingNumber')}
-                  isFocused={onSaveClicked}
+                  focusOnError={onSaveClicked}
                   scrollViewRef={scrollViewRef}
                 />
               </Box>
diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
index f662ec599bd..0ad54f43edf 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { Box, ClickToCallPhoneNumber, FeatureLandingTemplate, TextArea, TextView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, FeatureLandingTemplate, TextArea, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { PaymentsStackParamList } from 'screens/PaymentsScreen/PaymentsStackScreens'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -27,7 +25,7 @@ function HowToUpdateDirectDepositScreen({ navigation }: HowToUpdateDirectDeposit
         backLabel={t('payments.title')}
         backLabelOnPress={navigation.goBack}
         title={t('directDeposit.title')}>
-        <Alert variant="warning">
+        <AlertWithHaptics variant="warning">
           <TextView variant="MobileBodyBold" accessibilityRole="header" paragraphSpacing={true}>
             {t('howToUpdateDirectDeposit.alert.title')}
           </TextView>
@@ -35,7 +33,7 @@ function HowToUpdateDirectDepositScreen({ navigation }: HowToUpdateDirectDeposit
             {t('howToUpdateDirectDeposit.alert.body.1')}
           </TextView>
           <TextView variant="MobileBody">{t('howToUpdateDirectDeposit.alert.body.2')}</TextView>
-        </Alert>
+        </AlertWithHaptics>
         <Box mt={standardMarginBetween} mb={theme.dimensions.contentMarginBottom}>
           <TextArea>
             <TextView
diff --git a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
index dc594224106..46d8da4827a 100644
--- a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Alert } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
@@ -15,7 +13,7 @@ function NoPaymentsScreen() {
 
   return (
     <VAScrollView>
-      <Alert variant="info">
+      <AlertWithHaptics variant="info">
         <TextView variant="MobileBodyBold" accessibilityLabel={a11yLabelVA(t('payments.noPayments.title'))}>
           {t('payments.noPayments.title')}
         </TextView>
@@ -39,7 +37,7 @@ function NoPaymentsScreen() {
           {t('payments.noPayments.body.2')}
         </TextView>
         <ClickToCallPhoneNumber phone={t('8008271000')} displayedText={displayedTextPhoneNumber(t('8008271000'))} />
-      </Alert>
+      </AlertWithHaptics>
     </VAScrollView>
   )
 }
diff --git a/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx b/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
index 8d0f156bb97..1fbcc8a9cae 100644
--- a/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
+++ b/VAMobile/src/screens/auth/LoginScreen/LoginScreen.tsx
@@ -5,9 +5,18 @@ import { useSelector } from 'react-redux'
 
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
-import { Alert, Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { Box, BoxProps, CrisisLineButton, TextView, VAIcon, VAScrollView, WaygateWrapper } from 'components'
+import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+
+import {
+  AlertWithHaptics,
+  Box,
+  BoxProps,
+  CrisisLineButton,
+  TextView,
+  VAIcon,
+  VAScrollView,
+  WaygateWrapper,
+} from 'components'
 import AppVersionAndBuild from 'components/AppVersionAndBuild'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -113,7 +122,7 @@ function LoginScreen() {
     <VAScrollView {...testIdProps('Login-page', true)} contentContainerStyle={mainViewStyle} removeInsets={true}>
       <DemoAlert visible={demoPromptVisible} setVisible={setDemoPromptVisible} onConfirm={handleUpdateDemoMode} />
       <CrisisLineButton />
-      {demoMode && <Alert variant="info" header="DEMO MODE" />}
+      {demoMode && <AlertWithHaptics variant="info" header="DEMO MODE" />}
       <WaygateWrapper waygateName="WG_Login" />
       <Box
         flex={1}

From 1a8810563f72683dd09570f594147e36f33cb978 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 08:22:50 -0600
Subject: [PATCH 07/21] Further update to mobile-component-library

---
 VAMobile/package.json |  2 +-
 VAMobile/yarn.lock    | 34 +++++++++++++++++-----------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/VAMobile/package.json b/VAMobile/package.json
index b6786dc4830..6266e41357e 100644
--- a/VAMobile/package.json
+++ b/VAMobile/package.json
@@ -37,7 +37,7 @@
     "pods": "cd ios && pod install && cd .."
   },
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-component-library": "0.19.0",
+    "@department-of-veterans-affairs/mobile-component-library": "0.19.1",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-firebase/analytics": "^18.9.0",
diff --git a/VAMobile/yarn.lock b/VAMobile/yarn.lock
index 19c3e4af9f8..f02b73e7ad5 100644
--- a/VAMobile/yarn.lock
+++ b/VAMobile/yarn.lock
@@ -1398,16 +1398,16 @@
   resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-assets/-/mobile-assets-0.12.0.tgz#8656683640d2f11d79adb202535f4ce324c92d2d"
   integrity sha512-85h4yb4Nq0A3PMh5wG5NKya2RnSYsZ/H7Xk9arMhyZpF3IuMi8I9rmGs0Qo+PiI4oi99kj+12VVtIElzyvGJAw==
 
-"@department-of-veterans-affairs/mobile-component-library@0.19.0":
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.19.0.tgz#65f6baf164f569875867c2835a711deee5d881e2"
-  integrity sha512-l9WT4Zl8f/yQPqG74GoUfVEDU1aNuEsc6jxJeomqlOHlI7abXuDMojuZHJVg3+YD0h2XQXfWbprdl1mKe2VF1w==
+"@department-of-veterans-affairs/mobile-component-library@0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.19.1.tgz#fa543b98bb4f904cc9bbdf1387c775a47dce92b7"
+  integrity sha512-zWZoMRj5XG5HQYqrP5pNhSi/esaVqGB1+zpy3xKiXSfK6zt89GGKmwa6Q5cva55hoxOWhHuVt2j8wJz+2JCa0A==
   dependencies:
     "@department-of-veterans-affairs/mobile-assets" "0.12.0"
     "@department-of-veterans-affairs/mobile-tokens" "0.12.0"
     "@os-team/i18next-react-native-language-detector" "^1.0.31"
-    i18next "^23.8.2"
-    react-i18next "^14.0.5"
+    i18next "^23.11.5"
+    react-i18next "^14.1.2"
     react-native-svg "15.2.0"
     styled-components "^6.1.8"
 
@@ -6391,6 +6391,13 @@ husky@^9.0.11:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
+i18next@^23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next@^23.7.18:
   version "23.7.18"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.18.tgz#4f219e3702b08342c5519bc2cda7d09c67edebb9"
@@ -6398,13 +6405,6 @@ i18next@^23.7.18:
   dependencies:
     "@babel/runtime" "^7.23.2"
 
-i18next@^23.8.2:
-  version "23.10.0"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
-  integrity sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==
-  dependencies:
-    "@babel/runtime" "^7.23.2"
-
 iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -9165,10 +9165,10 @@ react-i18next@^14.0.1:
     "@babel/runtime" "^7.22.5"
     html-parse-stringify "^3.0.1"
 
-react-i18next@^14.0.5:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.0.tgz#44da74fbffd416f5d0c5307ef31735cf10cc91d9"
-  integrity sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==
+react-i18next@^14.1.2:
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
+  integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
   dependencies:
     "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"

From a0559dbd9a6b7dc0cf0bf37da6ebcc537f301630 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 08:49:49 -0600
Subject: [PATCH 08/21] Simplify MessageAlert changes

---
 VAMobile/src/components/MessageAlert.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/VAMobile/src/components/MessageAlert.tsx b/VAMobile/src/components/MessageAlert.tsx
index 3398784bf92..0e937b6d1ff 100644
--- a/VAMobile/src/components/MessageAlert.tsx
+++ b/VAMobile/src/components/MessageAlert.tsx
@@ -7,14 +7,14 @@ import { NAMESPACE } from 'constants/namespaces'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
 export type MessageAlertProps = {
-  /** ref for parent scroll view */
-  scrollViewRef: RefObject<ScrollView>
-  /** Optional boolean for determining when to focus on error alert boxes (e.g. onSaveClicked). Default is true */
+  /** Optional boolean for determining when to focus on error alert boxes. */
   focusOnError?: boolean
   /**sets if there is validation errors */
   hasValidationError?: boolean
   /**sets if attempted to save a draft */
   saveDraftAttempted?: boolean
+  /** optional ref for parent scroll view */
+  scrollViewRef?: RefObject<ScrollView>
   /** optional list of alertbox failed reasons, supplied by FormWrapper component */
   errorList?: { [key: number]: string }
   /** sets if triage error returned from api */
@@ -26,7 +26,7 @@ const MessageAlert: FC<MessageAlertProps> = ({
   hasValidationError,
   saveDraftAttempted,
   scrollViewRef,
-  focusOnError = true,
+  focusOnError,
   errorList,
   replyTriageError,
 }) => {

From eeebcca4140150341a7dca6e6ff258f5f1580627 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 09:02:30 -0600
Subject: [PATCH 09/21] Update E2E mapping

---
 .github/workflows/e2e_detox_mapping.yml | 27 ++++++++++++-------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/e2e_detox_mapping.yml b/.github/workflows/e2e_detox_mapping.yml
index 9970f8eb634..88cd33e475c 100644
--- a/.github/workflows/e2e_detox_mapping.yml
+++ b/.github/workflows/e2e_detox_mapping.yml
@@ -2,18 +2,18 @@
 # Detox e2e tests in CI
 #
 
-name: '[e2e] Detox Mapping'
+name: "[e2e] Detox Mapping"
 
 on:
   workflow_call:
-      outputs:
-        test_matrix:
-          description: "The matrix output for the e2e tests"
-          value: ${{ jobs.find_detox_tests_to_run.outputs.output1 }}
-        test_run:
-          description: "String saying test has been run"
-          value: ${{ jobs.find_detox_tests_to_run.outputs.output2}}
-  
+    outputs:
+      test_matrix:
+        description: "The matrix output for the e2e tests"
+        value: ${{ jobs.find_detox_tests_to_run.outputs.output1 }}
+      test_run:
+        description: "String saying test has been run"
+        value: ${{ jobs.find_detox_tests_to_run.outputs.output2}}
+
 defaults:
   run:
     working-directory: VAMobile
@@ -39,11 +39,11 @@ env:
 jobs:
   find_detox_tests_to_run:
     runs-on: ubuntu-latest
-    outputs: 
+    outputs:
       output1: ${{ steps.testing_matrix.outputs.TESTING_MATRIX }}
       output2: ${{ steps.testing_matrix.outputs.TEST_RUN}}
 
-    steps: 
+    steps:
       - name: Checkout
         uses: actions/checkout@v3
         with:
@@ -61,7 +61,7 @@ jobs:
       - name: Get file difference by file name
         id: changed_files_file_name
         uses: tj-actions/changed-files@v41
-        with: 
+        with:
           json: true
           base_sha: "${{ steps.get-sha.outputs.sha }}"
       - name: Get testing matrix array
@@ -130,10 +130,9 @@ jobs:
             select(contains(["RadioGroup"])) += ["PersonalInformationScreen", "ContactInformation"] |
             select(contains(["VATextInput"]) or contains(["WaygateWrapper"])) += ["AvailabilityFramework"] |
             select(contains(["AccordionCollapsible"])) += ["Claims", "Messages"] |
-            select(contains(["AlertBox"])) += ["AvailabilityFramework", "VALetters", "Appointments", "Prescriptions", "Messages", "ContactInformation", "DirectDeposit"] |
+            select(contains(["AlertWithHaptics"])) += ["AvailabilityFramework", "VALetters", "Appointments", "Prescriptions", "Messages", "ContactInformation", "DirectDeposit", "Cerner", "Prescriptions", "ContactInformation"] |
             select(contains(["AppVersionAndBuild"])) += ["LoginScreen", "SettingsScreen"] |
             select(contains(["ClickForActionLink"]) or contains(["ClickToCallPhoneNumber"])) += ["AvailabilityFramework", "Claims", "Appeals", "DisabilityRatings", "Appointments", "Prescriptions", "Messages", "MilitaryInformation", "HomeScreen", "VeteransCrisisLine", "VeteranStatusCard", "DirectDeposit", "Payments", "PersonalInformationScreen"] |
-            select(contains(["CollapsibileAlert"])) += ["Cerner", "Prescriptions", "ContactInformation"] |
             select(contains(["CollapsibleView"])) += ["Appeals", "AppealsExpanded", "Messages", "DirectDeposit"] |
             select(contains(["DefaultList"])) += ["Claims", "DisabilityRattings", "VALetters", "ContactInformation", "Appointments", "VaccineRecords", "MilitaryInformation", "PersonalInformationScreen", "DirectDeposit", "Prescriptions", "Payments", "SettingsScreen"] |
             select(contains(["LabelTag"])) += ["Prescriptions", "Messages"] |

From 3e516ba90a008ceb858404badd9bb0c76c4bfcb4 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 12:18:15 -0600
Subject: [PATCH 10/21] Replace and remove CollapsibleAlert component

---
 .../src/components/CollapsibleAlert.test.tsx  |  30 -----
 VAMobile/src/components/CollapsibleAlert.tsx  | 108 ------------------
 VAMobile/src/components/WaygateWrapper.tsx    |   1 +
 VAMobile/src/components/WhatsNew.tsx          |  51 ++++-----
 VAMobile/src/components/index.ts              |   2 -
 .../ClaimFileUpload/TakePhotos/TakePhotos.tsx |  14 +--
 .../HealthScreen/CernerAlert/CernerAlert.tsx  |  18 +--
 .../PrescriptionsDetailsBanner.tsx            |  18 +--
 .../PrescriptionHistory.tsx                   |  31 +++--
 .../CernerAlertSM/CernerAlertSM.tsx           |  18 +--
 .../AddressValidation/AddressValidation.tsx   |  19 +--
 11 files changed, 81 insertions(+), 229 deletions(-)
 delete mode 100644 VAMobile/src/components/CollapsibleAlert.test.tsx
 delete mode 100644 VAMobile/src/components/CollapsibleAlert.tsx

diff --git a/VAMobile/src/components/CollapsibleAlert.test.tsx b/VAMobile/src/components/CollapsibleAlert.test.tsx
deleted file mode 100644
index 608ca709703..00000000000
--- a/VAMobile/src/components/CollapsibleAlert.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { fireEvent, screen } from '@testing-library/react-native'
-
-import { context, render } from 'testUtils'
-
-import CollapsibleAlert from './CollapsibleAlert'
-import TextView from './TextView'
-
-context('CollapsibleAlert', () => {
-  beforeEach(() => {
-    render(
-      <CollapsibleAlert
-        border="informational"
-        headerText="HEADER"
-        body={<TextView>EXPANDED</TextView>}
-        a11yLabel="A11YLABEL"
-      />,
-    )
-  })
-
-  it('renders header text', () => {
-    expect(screen.getByRole('tab', { name: 'HEADER' })).toBeTruthy()
-  })
-
-  it('shows body text when pressed', () => {
-    fireEvent.press(screen.getByRole('tab', { name: 'HEADER' }))
-    expect(screen.getByText('EXPANDED')).toBeTruthy()
-  })
-})
diff --git a/VAMobile/src/components/CollapsibleAlert.tsx b/VAMobile/src/components/CollapsibleAlert.tsx
deleted file mode 100644
index 2b4254fbfcb..00000000000
--- a/VAMobile/src/components/CollapsibleAlert.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { FC, ReactNode, useState } from 'react'
-import { Pressable, PressableProps, View } from 'react-native'
-
-import { TextView } from 'components'
-import { VABorderColors } from 'styles/theme'
-import { useAccessibilityFocus, useTheme } from 'utils/hooks'
-import { isAndroid } from 'utils/platform'
-
-import TextArea from './TextArea'
-import { Box, BoxProps, VAIcon, VA_ICON_MAP } from './index'
-
-export type CollapsibleAlertProps = {
-  /** color of the border */
-  border: keyof VABorderColors
-  /** accordion Header text */
-  headerText: string
-  /** accordion Body text */
-  body: ReactNode
-  /** acccessibilityLabel needs to be provided due to accessibilityState being neccessary */
-  a11yLabel: string
-  /** handles anything needed when expanding the alert*/
-  onExpand?: () => void
-  /** handles anything needed when collapsing the alert*/
-  onCollapse?: () => void
-  /** Optional TestID */
-  testID?: string
-}
-
-const CollapsibleAlert: FC<CollapsibleAlertProps> = ({
-  border,
-  headerText,
-  body,
-  a11yLabel,
-  onExpand,
-  onCollapse,
-  testID,
-}) => {
-  const theme = useTheme()
-  const [expanded, setExpanded] = useState(false)
-  const [focusRef, setFocus] = useAccessibilityFocus<View>()
-
-  const onPress = (): void => {
-    if (expanded && onCollapse) {
-      onCollapse()
-    } else if (!expanded && onExpand) {
-      onExpand()
-    }
-    setExpanded(!expanded)
-
-    // TODO: This is a temporary workaround for a react-native bug that prevents 'expanded' state
-    // changes from being announced in TalkBack: https://github.com/facebook/react-native/issues/30841
-    // This can be removed once the fix makes it into a release and we upgrade react-native
-    if (isAndroid()) {
-      setFocus()
-    }
-  }
-
-  const pressableProps: PressableProps = {
-    onPress,
-    accessibilityState: { expanded },
-    accessibilityLabel: a11yLabel,
-    accessibilityRole: 'tab',
-  }
-
-  const iconName: keyof typeof VA_ICON_MAP = expanded ? 'ChevronUp' : 'ChevronDown'
-
-  const accordionHeader = () => {
-    const data = (
-      <Box flexDirection="row">
-        <Box flex={1}>
-          <TextView variant="MobileBodyBold">{headerText}</TextView>
-        </Box>
-        <Box justifyContent={'center'} ml={10}>
-          <VAIcon name={iconName} fill={theme.colors.icon.chevronCollapsible} width={16} height={10} />
-        </Box>
-      </Box>
-    )
-
-    return (
-      <Pressable {...pressableProps} ref={focusRef} accessible={true}>
-        {data}
-      </Pressable>
-    )
-  }
-
-  const leftBorderProps = {
-    borderLeftWidth: theme.dimensions.alertBorderWidth,
-    borderLeftColor: border,
-  }
-
-  const boxProps: BoxProps = {
-    ...leftBorderProps,
-    borderBottomColor: 'primary',
-    borderBottomWidth: theme.dimensions.borderWidth,
-    accessibilityRole: 'tablist',
-  }
-
-  return (
-    <Box testID={testID} {...boxProps}>
-      <TextArea>
-        {accordionHeader()}
-        {expanded && body}
-      </TextArea>
-    </Box>
-  )
-}
-
-export default CollapsibleAlert
diff --git a/VAMobile/src/components/WaygateWrapper.tsx b/VAMobile/src/components/WaygateWrapper.tsx
index c627d62ee87..c1b1013fc07 100644
--- a/VAMobile/src/components/WaygateWrapper.tsx
+++ b/VAMobile/src/components/WaygateWrapper.tsx
@@ -55,6 +55,7 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
           headerA11yLabel={a11yLabelVA(waygate.errorMsgTitle || '')}
           description={text}
           descriptionA11yLabel={a11yLabelVA(text || '')}
+          focusOnError={false}
           testID="AFUseCase2TestID">
           <Box my={theme.dimensions.standardMarginBetween}>
             <ClickToCallPhoneNumber
diff --git a/VAMobile/src/components/WhatsNew.tsx b/VAMobile/src/components/WhatsNew.tsx
index 407fe195101..b1b12ce3781 100644
--- a/VAMobile/src/components/WhatsNew.tsx
+++ b/VAMobile/src/components/WhatsNew.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { Box, CollapsibleAlert, CollapsibleAlertProps, TextView, VABulletList, VABulletListText } from 'components'
+import { AlertWithHaptics, Box, TextView, VABulletList, VABulletListText } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
@@ -60,15 +60,10 @@ export const WhatsNew = () => {
     }
   }, [displayWN])
 
-  const expandCollapsible = (): void => {
-    logAnalyticsEvent(Events.vama_whatsnew_more())
-  }
-
-  const closeCollapsible = (): void => {
-    logAnalyticsEvent(Events.vama_whatsnew_close())
-  }
+  const expandCollapsible = () => logAnalyticsEvent(Events.vama_whatsnew_more())
+  const closeCollapsible = () => logAnalyticsEvent(Events.vama_whatsnew_close())
 
-  const onPress = (): void => {
+  const onPress = () => {
     logAnalyticsEvent(Events.vama_whatsnew_dont_show())
     setVersionSkipped(FeatureConstants.WHATSNEW, localVersion || '0.0')
     setSkippedVersionHomeScreen(localVersion || '0.0')
@@ -97,31 +92,25 @@ export const WhatsNew = () => {
 
   const bullets = getBullets() || []
 
-  const props: CollapsibleAlertProps = {
-    border: 'informational',
-    headerText: t('whatsNew.title'),
-    body: (
-      <>
-        <Box my={theme.dimensions.standardMarginBetween}>
-          <TextView accessibilityLabel={bodyA11yLabel}>{body}</TextView>
-          {bullets.length ? (
-            <Box mt={theme.dimensions.standardMarginBetween}>
-              <VABulletList listOfText={bullets} />
-            </Box>
-          ) : undefined}
-        </Box>
-        <Button onPress={onPress} label={t('whatsNew.dismissMessage')} buttonType={ButtonVariants.Secondary} />
-      </>
-    ),
-    a11yLabel: t('whatsNew.title'),
-    onExpand: expandCollapsible,
-    onCollapse: closeCollapsible,
-  }
-
   if (displayWN) {
     return (
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <CollapsibleAlert {...props} />
+        <AlertWithHaptics
+          variant="info"
+          expandable={true}
+          header={t('whatsNew.title')}
+          headerA11yLabel={t('whatsNew.title')}
+          analytics={{ onExpand: expandCollapsible, onCollapse: closeCollapsible }}>
+          <Box my={theme.dimensions.standardMarginBetween}>
+            <TextView accessibilityLabel={bodyA11yLabel}>{body}</TextView>
+            {bullets.length ? (
+              <Box mt={theme.dimensions.standardMarginBetween}>
+                <VABulletList listOfText={bullets} />
+              </Box>
+            ) : undefined}
+          </Box>
+          <Button onPress={onPress} label={t('whatsNew.dismissMessage')} buttonType={ButtonVariants.Secondary} />
+        </AlertWithHaptics>
       </Box>
     )
   } else {
diff --git a/VAMobile/src/components/index.ts b/VAMobile/src/components/index.ts
index 8fdec031331..66d7f99abdc 100644
--- a/VAMobile/src/components/index.ts
+++ b/VAMobile/src/components/index.ts
@@ -32,8 +32,6 @@ export { default as VATextInput } from './FormWrapper/FormFields/VATextInput'
 export * from './FormWrapper/FormFields/VATextInput'
 export { default as CollapsibleView } from './CollapsibleView'
 export * from './CollapsibleView'
-export { default as CollapsibleAlert } from './CollapsibleAlert'
-export * from './CollapsibleAlert'
 export { default as VASelector } from './FormWrapper/FormFields/VASelector'
 export * from './FormWrapper/FormFields/VASelector'
 export { default as FormAttachments } from './FormWrapper/FormFields/FormAttachments'
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index 25386155105..5feeab59a44 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -8,7 +8,6 @@ import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/typ
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { AlertWithHaptics, Box, LinkWithAnalytics, TextArea, TextView } from 'components'
-import CollapsibleAlert from 'components/CollapsibleAlert'
 import FullScreenSubtask from 'components/Templates/FullScreenSubtask'
 import { Events } from 'constants/analytics'
 import { MAX_NUM_PHOTOS } from 'constants/claims'
@@ -85,12 +84,13 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
         </Box>
       )}
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <CollapsibleAlert
-          border="informational"
-          headerText={t('fileUpload.accessibilityAlert.title')}
-          body={collapsibleContent}
-          a11yLabel={t('fileUpload.accessibilityAlert.title')}
-        />
+        <AlertWithHaptics
+          variant="info"
+          expandable={true}
+          header={t('fileUpload.accessibilityAlert.title')}
+          headerA11yLabel={t('fileUpload.accessibilityAlert.title')}>
+          {collapsibleContent}
+        </AlertWithHaptics>
       </Box>
       <TextArea>
         <TextView variant="MobileBodyBold" accessibilityRole="header">
diff --git a/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx b/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
index 791b1cb5454..e3f1e7cf05f 100644
--- a/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
+++ b/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
@@ -5,7 +5,7 @@ import { LinkProps } from '@department-of-veterans-affairs/mobile-component-libr
 
 import { useFacilitiesInfo } from 'api/facilities/getFacilitiesInfo'
 import { Facility } from 'api/types/FacilityData'
-import { Box, CollapsibleAlert, LinkWithAnalytics, TextView } from 'components'
+import { AlertWithHaptics, Box, LinkWithAnalytics, TextView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -83,13 +83,15 @@ function CernerAlert() {
   }
 
   return (
-    <CollapsibleAlert
-      border="warning"
-      headerText={headerText}
-      body={accordionContent()}
-      a11yLabel={headerA11yLabel}
-      onExpand={() => logAnalyticsEvent(Events.vama_cerner_alert_exp())}
-    />
+    <AlertWithHaptics
+      variant="warning"
+      expandable={true}
+      focusOnError={false}
+      header={headerText}
+      headerA11yLabel={headerA11yLabel}
+      analytics={{ onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()) }}>
+      {accordionContent()}
+    </AlertWithHaptics>
   )
 }
 
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
index de8f349f1e7..c3581233336 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Box, ClickToCallPhoneNumber, CollapsibleAlert, TextView, VABulletList, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VABulletList, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -65,13 +65,15 @@ function PrescriptionsDetailsBanner() {
   return (
     <VAScrollView>
       <Box mb={contentMarginBottom}>
-        <CollapsibleAlert
-          border="warning"
-          headerText={t('prescription.details.banner.title')}
-          body={getContent()}
-          a11yLabel={t('prescription.details.banner.title')}
-          onExpand={() => logAnalyticsEvent(Events.vama_cerner_alert_exp())}
-        />
+        <AlertWithHaptics
+          variant="warning"
+          expandable={true}
+          focusOnError={false}
+          header={t('prescription.details.banner.title')}
+          headerA11yLabel={t('prescription.details.banner.title')}
+          analytics={{ onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()) }}>
+          {getContent()}
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
index 3bfbb67ae7d..e1094142200 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
@@ -19,10 +19,9 @@ import {
   RefillStatusConstants,
 } from 'api/types'
 import {
+  AlertWithHaptics,
   Box,
   BoxProps,
-  CollapsibleAlert,
-  CollapsibleAlertProps,
   ErrorComponent,
   FeatureLandingTemplate,
   LinkWithAnalytics,
@@ -404,11 +403,17 @@ function PrescriptionHistory({ navigation, route }: PrescriptionHistoryProps) {
       a11yLabel: a11yLabelVA(t('goToMyVAHealth')),
     }
 
-    const props: CollapsibleAlertProps = {
-      border: 'warning',
-      headerText: t('prescription.history.transferred.title'),
-      body: (
-        <>
+    return (
+      <Box mt={theme.dimensions.standardMarginBetween}>
+        <AlertWithHaptics
+          variant="warning"
+          expandable={true}
+          focusOnError={false}
+          header={t('prescription.history.transferred.title')}
+          headerA11yLabel={t('prescription.history.transferred.title')}
+          analytics={{
+            onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()),
+          }}>
           <TextView
             mt={theme.dimensions.standardMarginBetween}
             accessibilityLabel={a11yLabelVA(t('prescription.history.transferred.instructions'))}
@@ -421,17 +426,7 @@ function PrescriptionHistory({ navigation, route }: PrescriptionHistoryProps) {
             {t('prescription.history.transferred.youCan')}
           </TextView>
           <LinkWithAnalytics {...linkProps} />
-        </>
-      ),
-      a11yLabel: t('prescription.history.transferred.title'),
-      onExpand() {
-        logAnalyticsEvent(Events.vama_cerner_alert_exp())
-      },
-    }
-
-    return (
-      <Box mt={theme.dimensions.standardMarginBetween}>
-        <CollapsibleAlert {...props} />
+        </AlertWithHaptics>
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
index 858dd7d72d4..0c2741a447e 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
@@ -5,7 +5,7 @@ import { LinkProps } from '@department-of-veterans-affairs/mobile-component-libr
 
 import { useFacilitiesInfo } from 'api/facilities/getFacilitiesInfo'
 import { Facility } from 'api/types/FacilityData'
-import { Box, CollapsibleAlert, LinkWithAnalytics, TextView, VABulletList, VABulletListText } from 'components'
+import { AlertWithHaptics, Box, LinkWithAnalytics, TextView, VABulletList, VABulletListText } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -77,13 +77,15 @@ function CernerAlertSM() {
   }
 
   return (
-    <CollapsibleAlert
-      border="warning"
-      headerText={headerText}
-      body={accordionContent()}
-      a11yLabel={headerText}
-      onExpand={() => logAnalyticsEvent(Events.vama_cerner_alert_exp())}
-    />
+    <AlertWithHaptics
+      variant="warning"
+      expandable={true}
+      focusOnError={false}
+      header={headerText}
+      headerA11yLabel={headerText}
+      analytics={{ onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()) }}>
+      {accordionContent()}
+    </AlertWithHaptics>
   )
 }
 
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
index bf2b701cbd0..0f64cacac79 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
@@ -10,8 +10,7 @@ import { map, pick } from 'underscore'
 
 import { useContactInformation } from 'api/contactInformation'
 import { AddressData, SaveAddressParameters, SuggestedAddress, ValidateAddressData } from 'api/types'
-import { Box, RadioGroup, TextArea, TextView, VAScrollView, radioOption } from 'components'
-import CollapsibleAlert from 'components/CollapsibleAlert'
+import { AlertWithHaptics, Box, RadioGroup, TextArea, TextView, VAScrollView, radioOption } from 'components'
 import { SnackbarMessages } from 'components/SnackBar'
 import { NAMESPACE } from 'constants/namespaces'
 import { EditResponseData } from 'store/api'
@@ -228,13 +227,15 @@ function AddressValidation({
   return (
     <VAScrollView testID="AddressVerificationTestID" contentContainerStyle={scrollStyles}>
       <Box flex={1}>
-        <CollapsibleAlert
-          border="warning"
-          headerText={t('editAddress.validation.verifyAddress.title')}
-          body={getAlert()}
-          a11yLabel={t('editAddress.validation.verifyAddress.title')}
-          testID="verifyYourAddressTestID"
-        />
+        <AlertWithHaptics
+          variant="warning"
+          expandable={true}
+          focusOnError={false}
+          header={t('editAddress.validation.verifyAddress.title')}
+          headerA11yLabel={t('editAddress.validation.verifyAddress.title')}
+          testID="verifyYourAddressTestID">
+          {getAlert()}
+        </AlertWithHaptics>
         <Box mt={contentMarginTop}>{getSuggestedAddresses()}</Box>
       </Box>
       <Box {...containerStyles}>{getFooterButtons()}</Box>

From 6699f6ae0ebb8947b0bde122218ee9ef947c83ab Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 9 Jul 2024 15:15:03 -0600
Subject: [PATCH 11/21] Unit test fixes

---
 VAMobile/src/components/AlertWithHaptics.test.tsx             | 2 +-
 .../components/CommonErrorComponents/DowntimeError.test.tsx   | 2 +-
 VAMobile/src/components/MessageAlert.test.tsx                 | 4 ++--
 .../HealthScreen/SecureMessaging/EditDraft/EditDraft.test.tsx | 2 +-
 .../Vaccines/NoVaccineRecords/NoVaccineRecords.test.tsx       | 2 +-
 .../Vaccines/VaccineList/VaccineListScreen.test.tsx           | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/VAMobile/src/components/AlertWithHaptics.test.tsx b/VAMobile/src/components/AlertWithHaptics.test.tsx
index 802253863f6..36043b2b054 100644
--- a/VAMobile/src/components/AlertWithHaptics.test.tsx
+++ b/VAMobile/src/components/AlertWithHaptics.test.tsx
@@ -11,6 +11,6 @@ context('AlertWithHaptics', () => {
 
   it('initializes correctly', () => {
     expect(screen.getByText('My warning')).toBeTruthy()
-    expect(screen.getByRole('header', { name: 'Warning title' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Warning title' })).toBeTruthy()
   })
 })
diff --git a/VAMobile/src/components/CommonErrorComponents/DowntimeError.test.tsx b/VAMobile/src/components/CommonErrorComponents/DowntimeError.test.tsx
index 46e2bc8e221..b32b3c81770 100644
--- a/VAMobile/src/components/CommonErrorComponents/DowntimeError.test.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/DowntimeError.test.tsx
@@ -11,6 +11,6 @@ context('DowntimeError', () => {
   })
 
   it('initializes correctly', () => {
-    expect(screen.getByRole('header', { name: 'Maintenance on mobile app' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Maintenance on mobile app' })).toBeTruthy()
   })
 })
diff --git a/VAMobile/src/components/MessageAlert.test.tsx b/VAMobile/src/components/MessageAlert.test.tsx
index 0e44edef52a..b9c10b813b6 100644
--- a/VAMobile/src/components/MessageAlert.test.tsx
+++ b/VAMobile/src/components/MessageAlert.test.tsx
@@ -18,14 +18,14 @@ context('MessageAlert', () => {
   it('displays save draft validation', async () => {
     initializeTestInstance({ hasValidationError: true, saveDraftAttempted: true })
     expect(screen.getByText('We need more information')).toBeTruthy()
-    expect(screen.getByRole('header', { name: 'We need more information' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'We need more information' })).toBeTruthy()
     expect(screen.getByText('To save this message, provide this information:')).toBeTruthy()
   })
 
   it('displays send validation', async () => {
     initializeTestInstance({ hasValidationError: true, saveDraftAttempted: false })
     expect(screen.getByText('We need more information')).toBeTruthy()
-    expect(screen.getByRole('header', { name: 'We need more information' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'We need more information' })).toBeTruthy()
     expect(screen.getByText('To send this message, provide this information:')).toBeTruthy()
   })
 })
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.test.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.test.tsx
index dedcd136be9..383b8ed2c21 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.test.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.test.tsx
@@ -273,7 +273,7 @@ context('EditDraft', () => {
         .mockResolvedValue(recipients)
       initializeTestInstance()
       await waitFor(() =>
-        expect(screen.getByRole('header', { name: 'This conversation is too old for new replies' })).toBeTruthy(),
+        expect(screen.getByRole('heading', { name: 'This conversation is too old for new replies' })).toBeTruthy(),
       )
       await waitFor(() => expect(screen.queryByRole('button', { name: 'Add Files' })).toBeFalsy())
       await waitFor(() => expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy())
diff --git a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.test.tsx b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.test.tsx
index adf5a6122f9..9671b22ee10 100644
--- a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.test.tsx
+++ b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.test.tsx
@@ -13,7 +13,7 @@ context('NoVaccineRecords', () => {
   })
 
   it('initializes correctly', () => {
-    expect(screen.getByRole('header', { name: "We couldn't find information about your VA vaccines" })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: "We couldn't find information about your VA vaccines" })).toBeTruthy()
     expect(
       screen.getByText(
         "We're sorry. We update your vaccine records every 24 hours, but new records can take up to 36 hours to appear.",
diff --git a/VAMobile/src/screens/HealthScreen/Vaccines/VaccineList/VaccineListScreen.test.tsx b/VAMobile/src/screens/HealthScreen/Vaccines/VaccineList/VaccineListScreen.test.tsx
index 4a326756daa..38f0791cfcc 100644
--- a/VAMobile/src/screens/HealthScreen/Vaccines/VaccineList/VaccineListScreen.test.tsx
+++ b/VAMobile/src/screens/HealthScreen/Vaccines/VaccineList/VaccineListScreen.test.tsx
@@ -72,7 +72,7 @@ context('VaccineListScreen', () => {
       initializeTestInstance()
       await waitFor(() =>
         expect(
-          screen.getByRole('header', { name: "We couldn't find information about your VA vaccines" }),
+          screen.getByRole('heading', { name: "We couldn't find information about your VA vaccines" }),
         ).toBeTruthy(),
       )
       await waitFor(() =>

From b0adffdda48652b66ea620fb704c4a9321d30bd6 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Wed, 10 Jul 2024 17:46:36 -0600
Subject: [PATCH 12/21] Fixes based on PR reviews

---
 VAMobile/package.json                         |  2 +-
 .../CommonErrorComponents/CallHelpCenter.tsx  | 12 ++-------
 .../CommonErrorComponents/DowntimeError.tsx   |  1 -
 .../CommonErrorComponents/ErrorAlert.tsx      | 13 +++++-----
 VAMobile/src/components/EncourageUpdate.tsx   | 19 ++++++--------
 VAMobile/src/components/MessageAlert.tsx      |  4 +--
 VAMobile/src/components/WaygateWrapper.tsx    |  6 ++---
 VAMobile/src/components/WhatsNew.tsx          | 18 +++++--------
 .../ClaimFileUpload/TakePhotos/TakePhotos.tsx |  6 +----
 .../EstimatedDecisionDate.tsx                 | 21 ++++++++--------
 .../Letters/GenericLetter/GenericLetter.tsx   |  4 +--
 .../PrescriptionsDetailsBanner.tsx            |  1 -
 .../PrescriptionHistory.tsx                   |  8 ++----
 .../PrescriptionHistoryNoPrescriptions.tsx    | 14 +++++------
 .../RefillScreens/RefillRequestSummary.tsx    | 25 ++++++++-----------
 .../CernerAlertSM/CernerAlertSM.tsx           |  1 -
 .../SecureMessaging/EditDraft/EditDraft.tsx   | 10 ++++----
 .../IndividualMessageErrorComponent.tsx       | 11 ++------
 .../ViewMessage/ViewMessageScreen.tsx         | 10 ++++----
 .../AddressValidation/AddressValidation.tsx   |  1 -
 .../NotificationsSettingsScreen.tsx           | 15 ++++++-----
 .../HowToUpdateDirectDepositScreen.tsx        | 13 +++++-----
 .../NoPayments/NoPaymentsScreen.tsx           | 20 ++++++---------
 VAMobile/yarn.lock                            |  8 +++---
 24 files changed, 93 insertions(+), 150 deletions(-)

diff --git a/VAMobile/package.json b/VAMobile/package.json
index 44ab301457f..6f34bd6707a 100644
--- a/VAMobile/package.json
+++ b/VAMobile/package.json
@@ -91,7 +91,7 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/runtime": "^7.24.7",
-    "@department-of-veterans-affairs/eslint-config-mobile": "0.18.0",
+    "@department-of-veterans-affairs/eslint-config-mobile": "0.15.0",
     "@react-native/babel-preset": "0.74.83",
     "@react-native/eslint-config": "^0.73.2",
     "@react-native/metro-config": "^0.74.84",
diff --git a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
index 8d888e1379d..743453f0eae 100644
--- a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
@@ -3,8 +3,6 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -52,8 +50,6 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
     logAnalyticsEvent(Events.vama_fail())
   }, [])
 
-  const standardMarginBetween = theme.dimensions.standardMarginBetween
-
   const tryAgain = () => {
     logAnalyticsEvent(Events.vama_fail_refresh())
     if (onTryAgain) {
@@ -68,7 +64,8 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
           variant="error"
           header={titleText ? titleText : t('errors.callHelpCenter.vaAppNotWorking')}
           headerA11yLabel={titleA11yHint ? titleA11yHint : a11yLabelVA(t('errors.callHelpCenter.vaAppNotWorking'))}
-          description={onTryAgain ? t('errors.callHelpCenter.sorryWithRefresh') : t('errors.callHelpCenter.sorry')}>
+          description={onTryAgain ? t('errors.callHelpCenter.sorryWithRefresh') : t('errors.callHelpCenter.sorry')}
+          primaryButton={onTryAgain && { label: t('refresh'), onPress: tryAgain, testID: t('refresh') }}>
           <Box>
             <TextView
               variant="MobileBody"
@@ -82,11 +79,6 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
               displayedText={callPhone ? undefined : displayedTextPhoneNumber(t('8006982411'))}
               phone={callPhone ? callPhone : t('8006982411')}
             />
-            {onTryAgain && (
-              <Box mt={standardMarginBetween} accessibilityRole="button">
-                <Button onPress={tryAgain} label={t('refresh')} testID={t('refresh')} />
-              </Box>
-            )}
           </Box>
         </AlertWithHaptics>
       </Box>
diff --git a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
index 1dcfaeda4a6..9dc441a9217 100644
--- a/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/DowntimeError.tsx
@@ -53,7 +53,6 @@ const DowntimeError: FC<DowntimeErrorProps> = ({ screenID }) => {
         <AlertWithHaptics
           variant="warning"
           header={t('downtime.title')}
-          headerA11yLabel={t('downtime.title')}
           description={t('downtime.message.1', { endTime })}
           descriptionA11yLabel={t('downtime.message.1.a11yLabel', { endTime })}>
           <TextView accessibilityLabel={t('downtime.message.2.a11yLabel')} my={theme.dimensions.contentMarginTop}>
diff --git a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
index e20c67f4e1b..1057ab80fdb 100644
--- a/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/ErrorAlert.tsx
@@ -2,8 +2,6 @@ import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { AlertWithHaptics, Box, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { useTheme } from 'utils/hooks'
@@ -33,11 +31,12 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ onTryAgain, title, text }) => {
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <AlertWithHaptics variant="error" header={title || t('errorAlert.title')} description={text}>
-          <Box mt={theme.dimensions.standardMarginBetween} accessibilityRole="button">
-            <Button onPress={onTryAgain} label={t('refresh')} testID={t('refresh')} />
-          </Box>
-        </AlertWithHaptics>
+        <AlertWithHaptics
+          variant="error"
+          header={title || t('errorAlert.title')}
+          description={text}
+          primaryButton={{ label: t('refresh'), onPress: onTryAgain, testID: t('refresh') }}
+        />
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/components/EncourageUpdate.tsx b/VAMobile/src/components/EncourageUpdate.tsx
index 45739e605c2..dbc43ae449d 100644
--- a/VAMobile/src/components/EncourageUpdate.tsx
+++ b/VAMobile/src/components/EncourageUpdate.tsx
@@ -2,8 +2,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { AlertWithHaptics, Box, WhatsNew } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -88,16 +86,13 @@ export const EncourageUpdateAlert = () => {
   if (displayEU) {
     return (
       <Box mb={theme.dimensions.buttonPadding}>
-        <AlertWithHaptics variant="warning" header={t('encourageUpdate.title')} description={t('encourageUpdate.body')}>
-          <Box>
-            <Box my={theme.dimensions.gutter} accessibilityRole="button" mr={theme.dimensions.buttonPadding}>
-              <Button onPress={onUpdatePressed} label={t('updateNow')} />
-            </Box>
-            <Box mr={theme.dimensions.buttonPadding} accessibilityRole="button">
-              <Button onPress={onSkipPressed} label={t('encourageUpdate.skip')} buttonType={ButtonVariants.Secondary} />
-            </Box>
-          </Box>
-        </AlertWithHaptics>
+        <AlertWithHaptics
+          variant="warning"
+          header={t('encourageUpdate.title')}
+          description={t('encourageUpdate.body')}
+          primaryButton={{ label: t('updateNow'), onPress: onUpdatePressed }}
+          secondaryButton={{ label: t('encourageUpdate.skip'), onPress: onSkipPressed }}
+        />
       </Box>
     )
   } else if (localVersionName && storeVersion && localVersionName >= storeVersion) {
diff --git a/VAMobile/src/components/MessageAlert.tsx b/VAMobile/src/components/MessageAlert.tsx
index 0e937b6d1ff..98117289374 100644
--- a/VAMobile/src/components/MessageAlert.tsx
+++ b/VAMobile/src/components/MessageAlert.tsx
@@ -67,11 +67,9 @@ const MessageAlert: FC<MessageAlertProps> = ({
       <AlertWithHaptics
         variant="error"
         header={t('secureMessaging.sendError.title')}
+        description={t('secureMessaging.reply.error.youCantSend')}
         scrollViewRef={scrollViewRef}
         focusOnError={focusOnError}>
-        <TextView variant="MobileBody" my={theme.dimensions.standardMarginBetween}>
-          {t('secureMessaging.reply.error.youCantSend')}
-        </TextView>
         <TextView
           variant="MobileBody"
           paragraphSpacing={true}
diff --git a/VAMobile/src/components/WaygateWrapper.tsx b/VAMobile/src/components/WaygateWrapper.tsx
index c1b1013fc07..0099e953f4a 100644
--- a/VAMobile/src/components/WaygateWrapper.tsx
+++ b/VAMobile/src/components/WaygateWrapper.tsx
@@ -3,8 +3,6 @@ import { useTranslation } from 'react-i18next'
 
 import { useIsFocused, useNavigationState } from '@react-navigation/native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { AlertWithHaptics, Box, ClickToCallPhoneNumber } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
@@ -55,6 +53,9 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
           headerA11yLabel={a11yLabelVA(waygate.errorMsgTitle || '')}
           description={text}
           descriptionA11yLabel={a11yLabelVA(text || '')}
+          primaryButton={
+            waygate.appUpdateButton === true ? { label: t('updateNow'), onPress: onUpdateButtonPress } : undefined
+          }
           focusOnError={false}
           testID="AFUseCase2TestID">
           <Box my={theme.dimensions.standardMarginBetween}>
@@ -64,7 +65,6 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
               a11yLabel={a11yLabelID(phoneNumber)}
             />
           </Box>
-          {waygate.appUpdateButton === true && <Button onPress={onUpdateButtonPress} label={t('updateNow')} />}
         </AlertWithHaptics>
       </Box>
     )
diff --git a/VAMobile/src/components/WhatsNew.tsx b/VAMobile/src/components/WhatsNew.tsx
index b1b12ce3781..e0a4e1658aa 100644
--- a/VAMobile/src/components/WhatsNew.tsx
+++ b/VAMobile/src/components/WhatsNew.tsx
@@ -2,9 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { AlertWithHaptics, Box, TextView, VABulletList, VABulletListText } from 'components'
+import { AlertWithHaptics, Box, VABulletList, VABulletListText } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
@@ -99,17 +97,13 @@ export const WhatsNew = () => {
           variant="info"
           expandable={true}
           header={t('whatsNew.title')}
-          headerA11yLabel={t('whatsNew.title')}
+          description={body}
+          descriptionA11yLabel={bodyA11yLabel}
+          secondaryButton={{ label: t('whatsNew.dismissMessage'), onPress }}
           analytics={{ onExpand: expandCollapsible, onCollapse: closeCollapsible }}>
-          <Box my={theme.dimensions.standardMarginBetween}>
-            <TextView accessibilityLabel={bodyA11yLabel}>{body}</TextView>
-            {bullets.length ? (
-              <Box mt={theme.dimensions.standardMarginBetween}>
-                <VABulletList listOfText={bullets} />
-              </Box>
-            ) : undefined}
+          <Box mt={theme.dimensions.standardMarginBetween}>
+            {bullets.length ? <VABulletList listOfText={bullets} /> : undefined}
           </Box>
-          <Button onPress={onPress} label={t('whatsNew.dismissMessage')} buttonType={ButtonVariants.Secondary} />
         </AlertWithHaptics>
       </Box>
     )
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index 5feeab59a44..b6ce2e4bc33 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -84,11 +84,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
         </Box>
       )}
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <AlertWithHaptics
-          variant="info"
-          expandable={true}
-          header={t('fileUpload.accessibilityAlert.title')}
-          headerA11yLabel={t('fileUpload.accessibilityAlert.title')}>
+        <AlertWithHaptics variant="info" expandable={true} header={t('fileUpload.accessibilityAlert.title')}>
           {collapsibleContent}
         </AlertWithHaptics>
       </Box>
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
index e744debe88e..8dabac4878c 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/EstimatedDecisionDate/EstimatedDecisionDate.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 import { DateTime } from 'luxon'
 
 import { AlertWithHaptics, Box, TextArea, TextView } from 'components'
@@ -30,16 +29,16 @@ function EstimatedDecisionDate({ maxEstDate, showCovidMessage }: EstimatedDecisi
   //Opting to leave this code in place...because removing it will clearly kickstart pandemic part 4000.
   if (showCovidMessage) {
     return (
-      <AlertWithHaptics variant="warning" description={t('claimDetails.covidMessage')}>
-        <Box mt={theme.dimensions.standardMarginBetween}>
-          <Button
-            onPress={onAlertLinkPress}
-            testID={t('claimDetails.reviewLocations')}
-            label={t('claimDetails.reviewLocations')}
-            a11yHint={t('claimDetails.reviewLocationsA11yHint')}
-          />
-        </Box>
-      </AlertWithHaptics>
+      <AlertWithHaptics
+        variant="warning"
+        description={t('claimDetails.covidMessage')}
+        primaryButton={{
+          label: t('claimDetails.reviewLocations'),
+          a11yHint: t('claimDetails.reviewLocationsA11yHint'),
+          onPress: onAlertLinkPress,
+          testID: t('claimDetails.reviewLocations'),
+        }}
+      />
     )
   }
 
diff --git a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
index 27218bb53f7..a71a41a1fc5 100644
--- a/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/Letters/GenericLetter/GenericLetter.tsx
@@ -59,9 +59,7 @@ function GenericLetter({ navigation, route }: GenericLetterProps) {
     <Box mb={theme.dimensions.contentMarginBottom}>
       {letterType === LetterTypeConstants.serviceVerification && (
         <Box mb={theme.dimensions.standardMarginBetween}>
-          <AlertWithHaptics variant="info">
-            <TextView variant="MobileBody">{t('letters.serviceVerificationLetter.informational')}</TextView>
-          </AlertWithHaptics>
+          <AlertWithHaptics variant="info" description={t('letters.serviceVerificationLetter.informational')} />
         </Box>
       )}
       <TextArea>
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
index c3581233336..40393443584 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionDetails/PrescriptionsDetailsBanner.tsx
@@ -70,7 +70,6 @@ function PrescriptionsDetailsBanner() {
           expandable={true}
           focusOnError={false}
           header={t('prescription.details.banner.title')}
-          headerA11yLabel={t('prescription.details.banner.title')}
           analytics={{ onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()) }}>
           {getContent()}
         </AlertWithHaptics>
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
index e1094142200..604d338c7a0 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistory.tsx
@@ -410,17 +410,13 @@ function PrescriptionHistory({ navigation, route }: PrescriptionHistoryProps) {
           expandable={true}
           focusOnError={false}
           header={t('prescription.history.transferred.title')}
-          headerA11yLabel={t('prescription.history.transferred.title')}
+          description={t('prescription.history.transferred.instructions')}
+          descriptionA11yLabel={a11yLabelVA(t('prescription.history.transferred.instructions'))}
           analytics={{
             onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()),
           }}>
           <TextView
             mt={theme.dimensions.standardMarginBetween}
-            accessibilityLabel={a11yLabelVA(t('prescription.history.transferred.instructions'))}
-            paragraphSpacing={true}>
-            {t('prescription.history.transferred.instructions')}
-          </TextView>
-          <TextView
             paragraphSpacing={true}
             accessibilityLabel={a11yLabelVA(t('prescription.history.transferred.youCan'))}>
             {t('prescription.history.transferred.youCan')}
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
index 154e9091d88..979970d31aa 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/PrescriptionHistory/PrescriptionHistoryNoPrescriptions.tsx
@@ -57,14 +57,12 @@ function PrescriptionHistoryNoPrescriptions() {
         <AlertWithHaptics
           variant="info"
           header={t('prescriptions.notFound.title')}
-          headerA11yLabel={a11yLabelVA(t('prescriptions.notFound.title'))}>
-          <TextView
-            pt={theme.paragraphSpacing.spacing20FontSize}
-            mb={theme.dimensions.condensedMarginBetween}
-            accessibilityLabel={a11yLabelVA(t('prescriptions.notFound.yourVA'))}>
-            {t('prescriptions.notFound.yourVA')}
-          </TextView>
-          <VABulletList listOfText={medicationsNotIncludedList} paragraphSpacing={true} />
+          headerA11yLabel={a11yLabelVA(t('prescriptions.notFound.title'))}
+          description={t('prescriptions.notFound.yourVA')}
+          descriptionA11yLabel={a11yLabelVA(t('prescriptions.notFound.yourVA'))}>
+          <Box mt={theme.dimensions.standardMarginBetween}>
+            <VABulletList listOfText={medicationsNotIncludedList} paragraphSpacing={true} />
+          </Box>
           <TextView paragraphSpacing={true}>{t('prescriptions.notFound.bullets.ifYouThink')}</TextView>
           <ClickToCallPhoneNumber displayedText={displayedTextPhoneNumber(t('8773270022'))} phone={t('8773270022')} />
         </AlertWithHaptics>
diff --git a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
index 292e0798296..7940b303718 100644
--- a/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
+++ b/VAMobile/src/screens/HealthScreen/Pharmacy/RefillScreens/RefillRequestSummary.tsx
@@ -96,26 +96,21 @@ function RefillRequestSummary({ navigation, route }: RefillRequestSummaryProps)
           header: t('prescriptions.refillRequestSummary.mix', { count: requestFailed.length }),
           description: t('prescriptions.refillRequestSummary.tryAgain'),
           descriptionA11yLabel: a11yLabelVA(t('prescriptions.refillRequestSummary.tryAgain')),
+          primaryButton: {
+            label: t('tryAgain'),
+            onPress: () => {
+              requestRefill(requestFailed)
+              const prescriptionIds = requestFailed.map((prescription) => prescription.id)
+              logAnalyticsEvent(Events.vama_rx_refill_retry(prescriptionIds))
+            },
+            a11yHint: t('prescriptions.refillRequestSummary.tryAgain.a11yLabel'),
+          },
         }
         break
     }
     return (
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <AlertWithHaptics {...alertBoxProps}>
-          {status !== REQUEST_STATUS.SUCCESS && (
-            <Box mt={theme.dimensions.standardMarginBetween}>
-              <Button
-                onPress={() => {
-                  requestRefill(requestFailed)
-                  const prescriptionIds = requestFailed.map((prescription) => prescription.id)
-                  logAnalyticsEvent(Events.vama_rx_refill_retry(prescriptionIds))
-                }}
-                label={t('tryAgain')}
-                a11yHint={t('prescriptions.refillRequestSummary.tryAgain.a11yLabel')}
-              />
-            </Box>
-          )}
-        </AlertWithHaptics>
+        <AlertWithHaptics {...alertBoxProps} />
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
index 0c2741a447e..4059dc9d862 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
@@ -82,7 +82,6 @@ function CernerAlertSM() {
       expandable={true}
       focusOnError={false}
       header={headerText}
-      headerA11yLabel={headerText}
       analytics={{ onExpand: () => logAnalyticsEvent(Events.vama_cerner_alert_exp()) }}>
       {accordionContent()}
     </AlertWithHaptics>
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
index ea593962e4f..3332154dc4a 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/EditDraft/EditDraft.tsx
@@ -511,11 +511,11 @@ function EditDraft({ navigation, route }: EditDraftProps) {
   function renderAlert() {
     return (
       <Box my={theme.dimensions.standardMarginBetween}>
-        <AlertWithHaptics variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
-          <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
-            {t('secureMessaging.reply.olderThan45Days')}
-          </TextView>
-        </AlertWithHaptics>
+        <AlertWithHaptics
+          variant="warning"
+          header={t('secureMessaging.reply.youCanNoLonger')}
+          description={t('secureMessaging.reply.olderThan45Days')}
+        />
       </Box>
     )
   }
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
index a5f3d667a55..78552f71622 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/IndividualMessageErrorComponent.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
 import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
@@ -24,8 +22,8 @@ function IndividualMessageErrorComponent() {
         <AlertWithHaptics
           variant="error"
           header={t('secureMessaging.viewMessage.errorTitle')}
-          headerA11yLabel={t('secureMessaging.viewMessage.errorTitle')}
-          description={t('errors.callHelpCenter.sorryWithRefresh')}>
+          description={t('errors.callHelpCenter.sorryWithRefresh')}
+          primaryButton={tryAgain ? { label: t('refresh'), onPress: tryAgain, testID: t('refresh') } : undefined}>
           <Box>
             <TextView
               variant="MobileBody"
@@ -34,11 +32,6 @@ function IndividualMessageErrorComponent() {
               {t('secureMessaging.sendError.ifTheAppStill')}
             </TextView>
             <ClickToCallPhoneNumber displayedText={displayedTextPhoneNumber(t('8773270022'))} phone={t('8773270022')} />
-            {tryAgain && (
-              <Box mt={standardMarginBetween} accessibilityRole="button">
-                <Button onPress={tryAgain} label={t('refresh')} testID={t('refresh')} />
-              </Box>
-            )}
           </Box>
         </AlertWithHaptics>
       </Box>
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
index 4a555fef26a..8f48a6f5f76 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx
@@ -405,11 +405,11 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) {
           )}
           {replyExpired && (
             <Box my={theme.dimensions.standardMarginBetween}>
-              <AlertWithHaptics variant="warning" header={t('secureMessaging.reply.youCanNoLonger')}>
-                <TextView mt={theme.dimensions.standardMarginBetween} variant="MobileBody">
-                  {t('secureMessaging.reply.olderThan45Days')}
-                </TextView>
-              </AlertWithHaptics>
+              <AlertWithHaptics
+                variant="warning"
+                header={t('secureMessaging.reply.youCanNoLonger')}
+                description={t('secureMessaging.reply.olderThan45Days')}
+              />
             </Box>
           )}
           <MessageCard message={message} />
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
index 0f64cacac79..e116c4fbefb 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
@@ -232,7 +232,6 @@ function AddressValidation({
           expandable={true}
           focusOnError={false}
           header={t('editAddress.validation.verifyAddress.title')}
-          headerA11yLabel={t('editAddress.validation.verifyAddress.title')}
           testID="verifyYourAddressTestID">
           {getAlert()}
         </AlertWithHaptics>
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
index 41d3ef09298..1d9386aefcb 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/SettingsScreen/NotificationsSettingsScreen/NotificationsSettingsScreen.tsx
@@ -6,8 +6,6 @@ import { useSelector } from 'react-redux'
 
 import { StackScreenProps } from '@react-navigation/stack'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
 import {
   AlertWithHaptics,
   Box,
@@ -35,7 +33,7 @@ function NotificationsSettingsScreen({ navigation }: NotificationsSettingsScreen
   const { t } = useTranslation(NAMESPACE.COMMON)
   const hasError = useError(ScreenIDTypesConstants.NOTIFICATIONS_SETTINGS_SCREEN)
   const theme = useTheme()
-  const { gutter, contentMarginBottom, standardMarginBetween, condensedMarginBetween } = theme.dimensions
+  const { gutter, contentMarginBottom, condensedMarginBetween } = theme.dimensions
   const { deviceToken, preferences, loadingPreferences, registeringDevice, systemNotificationsOn, settingPreference } =
     useSelector<RootState, NotificationsState>((state) => state.notifications)
   const goToSettings = () => {
@@ -113,11 +111,12 @@ function NotificationsSettingsScreen({ navigation }: NotificationsSettingsScreen
             <AlertWithHaptics
               variant="info"
               header={t('notifications.settings.alert.title')}
-              description={t('notifications.settings.alert.text')}>
-              <Box mt={standardMarginBetween}>
-                <Button onPress={goToSettings} label={t('notifications.settings.alert.openSettings')} />
-              </Box>
-            </AlertWithHaptics>
+              description={t('notifications.settings.alert.text')}
+              primaryButton={{
+                label: t('notifications.settings.alert.openSettings'),
+                onPress: goToSettings,
+              }}
+            />
           )}
           <TextView variant={'TableFooterLabel'} mx={gutter} mt={condensedMarginBetween}>
             {t('notifications.settings.privacy')}
diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
index 0ad54f43edf..05d934539f7 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.tsx
@@ -25,14 +25,13 @@ function HowToUpdateDirectDepositScreen({ navigation }: HowToUpdateDirectDeposit
         backLabel={t('payments.title')}
         backLabelOnPress={navigation.goBack}
         title={t('directDeposit.title')}>
-        <AlertWithHaptics variant="warning">
-          <TextView variant="MobileBodyBold" accessibilityRole="header" paragraphSpacing={true}>
-            {t('howToUpdateDirectDeposit.alert.title')}
+        <AlertWithHaptics
+          variant="warning"
+          header={t('howToUpdateDirectDeposit.alert.title')}
+          description={t('howToUpdateDirectDeposit.alert.body.1')}>
+          <TextView variant="MobileBody" mt={theme.dimensions.contentMarginTop}>
+            {t('howToUpdateDirectDeposit.alert.body.2')}
           </TextView>
-          <TextView variant="MobileBody" paragraphSpacing={true}>
-            {t('howToUpdateDirectDeposit.alert.body.1')}
-          </TextView>
-          <TextView variant="MobileBody">{t('howToUpdateDirectDeposit.alert.body.2')}</TextView>
         </AlertWithHaptics>
         <Box mt={standardMarginBetween} mb={theme.dimensions.contentMarginBottom}>
           <TextArea>
diff --git a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
index 46d8da4827a..5fb2bfe52bb 100644
--- a/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/PaymentHistory/NoPayments/NoPaymentsScreen.tsx
@@ -13,21 +13,17 @@ function NoPaymentsScreen() {
 
   return (
     <VAScrollView>
-      <AlertWithHaptics variant="info">
-        <TextView variant="MobileBodyBold" accessibilityLabel={a11yLabelVA(t('payments.noPayments.title'))}>
-          {t('payments.noPayments.title')}
-        </TextView>
-        <TextView
-          variant="MobileBody"
-          mt={theme.dimensions.standardMarginBetween}
-          paragraphSpacing={true}
-          accessibilityLabel={a11yLabelVA(t('payments.noPayments.body.1'))}>
-          {t('payments.noPayments.body.1')}
-        </TextView>
+      <AlertWithHaptics
+        variant="info"
+        header={t('payments.noPayments.title')}
+        headerA11yLabel={a11yLabelVA(t('payments.noPayments.title'))}
+        description={t('payments.noPayments.body.1')}
+        descriptionA11yLabel={a11yLabelVA(t('payments.noPayments.body.1'))}>
         <TextView
           variant="MobileBody"
           paragraphSpacing={true}
-          accessibilityLabel={a11yLabelVA(t('payments.missingOrNoPayments.body.1'))}>
+          accessibilityLabel={a11yLabelVA(t('payments.missingOrNoPayments.body.1'))}
+          mt={theme.dimensions.contentMarginTop}>
           {t('payments.missingOrNoPayments.body.1')}
         </TextView>
         <TextView
diff --git a/VAMobile/yarn.lock b/VAMobile/yarn.lock
index 43090c89e65..eda87eb9881 100644
--- a/VAMobile/yarn.lock
+++ b/VAMobile/yarn.lock
@@ -1386,10 +1386,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@department-of-veterans-affairs/eslint-config-mobile@0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/eslint-config-mobile/-/eslint-config-mobile-0.18.0.tgz#4187517fb890af6f271a23364255f52cfe106cfd"
-  integrity sha512-JTLMMiRWhriVMo3hkG88nhXvF0q1W4nxhSFIQPQaBTrSmX6JcX/gaThSMz1MsoFokFNgDlzeimbk60PRSTQJlg==
+"@department-of-veterans-affairs/eslint-config-mobile@0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/eslint-config-mobile/-/eslint-config-mobile-0.15.0.tgz#f86b29f5ef8bad6c8a36cea8340e5cfa18ff93a1"
+  integrity sha512-sEFu9Akkommf9y7aDWXjvWfwDfY50cqjMBTAIaYctixGonUX0wKzk2yEhgGzlwF3Feo/zkyLhLBi1VixrhT3xg==
   dependencies:
     eslint-plugin-deprecate "^0.8.4"
 

From 74c0ccf26b17420bfc3b09c69bd3b3a430f2696b Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Thu, 11 Jul 2024 08:25:06 -0600
Subject: [PATCH 13/21] Unit test fix

---
 .../HowToUpdateDirectDepositScreen.test.tsx                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.test.tsx b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.test.tsx
index cd34087cb71..efd91c6069d 100644
--- a/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.test.tsx
+++ b/VAMobile/src/screens/PaymentsScreen/DirectDepositScreen/HowToUpdateDirectDepositScreen/HowToUpdateDirectDepositScreen.test.tsx
@@ -15,7 +15,7 @@ context('HowToUpdateDirectDepositScreen', () => {
   it('initializes correctly', () => {
     expect(screen.getByLabelText('Direct deposit')).toBeTruthy()
     expect(
-      screen.getByRole('header', {
+      screen.getByRole('heading', {
         name: 'You’ll need to sign in with a verified ID.me or Login.gov account to update your direct deposit information',
       }),
     ).toBeTruthy()

From 7505d991cf51e3890a6f1c0279acf26669cfb873 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Jul 2024 10:26:02 -0700
Subject: [PATCH 14/21] Bump component-library to 0.20.3. Add mobile-assets and
 mobile-tokens as dependencies

---
 VAMobile/package.json |  4 +++-
 VAMobile/yarn.lock    | 18 ++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/VAMobile/package.json b/VAMobile/package.json
index 6f34bd6707a..718d4c91bf2 100644
--- a/VAMobile/package.json
+++ b/VAMobile/package.json
@@ -37,7 +37,9 @@
     "pods": "cd ios && pod install && cd .."
   },
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-component-library": "0.19.1",
+    "@department-of-veterans-affairs/mobile-assets": "0.12.0",
+    "@department-of-veterans-affairs/mobile-component-library": "0.20.3",
+    "@department-of-veterans-affairs/mobile-tokens": "0.13.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-firebase/analytics": "^18.9.0",
diff --git a/VAMobile/yarn.lock b/VAMobile/yarn.lock
index eda87eb9881..bc756594333 100644
--- a/VAMobile/yarn.lock
+++ b/VAMobile/yarn.lock
@@ -1398,23 +1398,21 @@
   resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-assets/-/mobile-assets-0.12.0.tgz#8656683640d2f11d79adb202535f4ce324c92d2d"
   integrity sha512-85h4yb4Nq0A3PMh5wG5NKya2RnSYsZ/H7Xk9arMhyZpF3IuMi8I9rmGs0Qo+PiI4oi99kj+12VVtIElzyvGJAw==
 
-"@department-of-veterans-affairs/mobile-component-library@0.19.1":
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.19.1.tgz#fa543b98bb4f904cc9bbdf1387c775a47dce92b7"
-  integrity sha512-zWZoMRj5XG5HQYqrP5pNhSi/esaVqGB1+zpy3xKiXSfK6zt89GGKmwa6Q5cva55hoxOWhHuVt2j8wJz+2JCa0A==
+"@department-of-veterans-affairs/mobile-component-library@0.20.3":
+  version "0.20.3"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.20.3.tgz#13136bed350b270c6bfec8841bcd027d5e204788"
+  integrity sha512-UCg+0TwojjlHtm7dUhT8OFnXu8KD0T7cyJRSlayYnR+l4ys1x6OatcH4Pmz9N72rzlGVUcG0pMQxhmWceEwL3g==
   dependencies:
-    "@department-of-veterans-affairs/mobile-assets" "0.12.0"
-    "@department-of-veterans-affairs/mobile-tokens" "0.12.0"
     "@os-team/i18next-react-native-language-detector" "^1.0.31"
     i18next "^23.11.5"
     react-i18next "^14.1.2"
     react-native-svg "15.2.0"
     styled-components "^6.1.8"
 
-"@department-of-veterans-affairs/mobile-tokens@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.12.0.tgz#df255401790dbb8ac0ecac02f956d6512a1645b2"
-  integrity sha512-cACiKuaU1154l42U+cnnSOa1bRedFiQPG9lX/s+Sb8eJZjCsEmQW4SkqEbRzy5lViYj/59ACnY5JCD7+wslvRw==
+"@department-of-veterans-affairs/mobile-tokens@0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.13.0.tgz#5dbc25e256b8364293c8ac5468d815ae0ca9d24f"
+  integrity sha512-XnR6xlZGt0nzQG/Gs3RWV6dggk/7uK+vwnLAb+OHZO9xuoieOuq8NBYcJuBHL2wEvmxgHLPq8+kquECjwYt4LQ==
 
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"

From 332529bde1b8ebb5f9bbbea358cdfa4ef74b7fb1 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 15 Jul 2024 10:26:16 -0700
Subject: [PATCH 15/21] Update design system colors imports

---
 VAMobile/src/screens/HomeScreen/HomeScreen.tsx | 4 ++--
 VAMobile/src/styles/themes/colorSchemes.ts     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
index 174230fd369..0a9d8551691 100644
--- a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
@@ -8,7 +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 { Colors } from '@department-of-veterans-affairs/mobile-tokens'
+import { colors as DSColors } from '@department-of-veterans-affairs/mobile-tokens'
 import { DateTime } from 'luxon'
 
 import { useAppointments } from 'api/appointments'
@@ -334,7 +334,7 @@ export function HomeScreen({}: HomeScreenProps) {
                 accessibilityLabel={`${t('icon.success')} ${t('noActivity')}`}>
                 <VAIcon
                   name={'CircleCheckMark'}
-                  fill={Colors.vadsColorSuccessDark}
+                  fill={DSColors.vadsColorSuccessDark}
                   fill2={theme.colors.icon.transparent}
                 />
                 <TextView
diff --git a/VAMobile/src/styles/themes/colorSchemes.ts b/VAMobile/src/styles/themes/colorSchemes.ts
index 44219d0a1b2..130ef3f7459 100644
--- a/VAMobile/src/styles/themes/colorSchemes.ts
+++ b/VAMobile/src/styles/themes/colorSchemes.ts
@@ -1,4 +1,4 @@
-import { Colors as DSColors } from '@department-of-veterans-affairs/mobile-tokens'
+import { colors as DSColors } from '@department-of-veterans-affairs/mobile-tokens'
 
 import colors from './VAColors'
 

From f24ece114d588c11cdbe4ec39e26e912a3ef5313 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 19 Aug 2024 12:03:13 -0600
Subject: [PATCH 16/21] Convert additional AlertBoxes to AlertWithHaptics

---
 .../components/CommonErrorComponents/CustomError.tsx   |  9 ++++++---
 .../ClaimTimeline/DEPRECATED_ClaimTimeline.tsx         | 10 +++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/VAMobile/src/components/CommonErrorComponents/CustomError.tsx b/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
index d6c6e7e2cd1..91e9e167edb 100644
--- a/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
@@ -5,7 +5,7 @@ import { ViewStyle } from 'react-native'
 
 import { Button } from '@department-of-veterans-affairs/mobile-component-library'
 
-import { AlertBox, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -60,7 +60,10 @@ const CustomError: FC<CustomErrorProps> = ({ onTryAgain, titleText, errorText, c
   return (
     <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
-        <AlertBox title={fixSpacingAndSpecialCharacters(titleText)} titleA11yLabel={titleA11y} border="error">
+        <AlertWithHaptics
+          variant="error"
+          header={fixSpacingAndSpecialCharacters(titleText)}
+          headerA11yLabel={titleA11y}>
           <Box>
             <TextView
               variant="MobileBody"
@@ -76,7 +79,7 @@ const CustomError: FC<CustomErrorProps> = ({ onTryAgain, titleText, errorText, c
               </Box>
             )}
           </Box>
-        </AlertBox>
+        </AlertWithHaptics>
       </Box>
     </VAScrollView>
   )
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimTimeline.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimTimeline.tsx
index 5836696b378..1dd407ba4e7 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimTimeline.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimTimeline/DEPRECATED_ClaimTimeline.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useFocusEffect } from '@react-navigation/native'
 
 import { ClaimAttributesData } from 'api/types'
-import { AlertBox, Box } from 'components'
+import { AlertWithHaptics, Box } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import theme from 'styles/themes/standardTheme'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -37,10 +37,10 @@ function DEPRECATED_ClaimTimeline({ attributes, claimID }: ClaimTimelineProps) {
     <Box>
       {itemsNeededFromVet && !attributes.waiverSubmitted && (
         <Box my={theme.dimensions.standardMarginBetween}>
-          <AlertBox
-            border={'warning'}
-            titleA11yLabel={a11yLabelVA(t('claimPhase.youHaveFileRequestVA', { count }))}
-            title={t('claimPhase.youHaveFileRequestVA', { count })}
+          <AlertWithHaptics
+            variant="warning"
+            header={t('claimPhase.youHaveFileRequestVA', { count })}
+            headerA11yLabel={a11yLabelVA(t('claimPhase.youHaveFileRequestVA', { count }))}
           />
         </Box>
       )}

From a613bb93f34937863d95d5847351e03ef6d66e64 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 19 Aug 2024 13:10:36 -0600
Subject: [PATCH 17/21] Upgrade mobile-component-library and mobile-tokens to
 latest

---
 VAMobile/package.json                         |  4 +-
 .../src/screens/HomeScreen/HomeScreen.tsx     |  4 +-
 VAMobile/yarn.lock                            | 43 +++++++++++--------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/VAMobile/package.json b/VAMobile/package.json
index 9b4c6bd815d..d479d5c0dde 100644
--- a/VAMobile/package.json
+++ b/VAMobile/package.json
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/mobile-assets": "0.12.0",
-    "@department-of-veterans-affairs/mobile-component-library": "0.19.1",
-    "@department-of-veterans-affairs/mobile-tokens": "0.12.0",
+    "@department-of-veterans-affairs/mobile-component-library": "0.21.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.14.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-firebase/analytics": "^18.9.0",
diff --git a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
index c039e50ecbd..511a777ab6c 100644
--- a/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
+++ b/VAMobile/src/screens/HomeScreen/HomeScreen.tsx
@@ -8,7 +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 { Colors } from '@department-of-veterans-affairs/mobile-tokens'
+import { colors as DSColors } from '@department-of-veterans-affairs/mobile-tokens'
 import { DateTime } from 'luxon'
 
 import { useAppointments } from 'api/appointments'
@@ -345,7 +345,7 @@ export function HomeScreen({}: HomeScreenProps) {
                   accessibilityLabel={`${t('icon.success')} ${t('noActivity')}`}>
                   <VAIcon
                     name={'CircleCheckMark'}
-                    fill={Colors.vadsColorSuccessDark}
+                    fill={DSColors.vadsColorSuccessDark}
                     fill2={theme.colors.icon.transparent}
                   />
                   <TextView
diff --git a/VAMobile/yarn.lock b/VAMobile/yarn.lock
index 25e762f3a02..718ead7daab 100644
--- a/VAMobile/yarn.lock
+++ b/VAMobile/yarn.lock
@@ -1398,23 +1398,22 @@
   resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-assets/-/mobile-assets-0.12.0.tgz#8656683640d2f11d79adb202535f4ce324c92d2d"
   integrity sha512-85h4yb4Nq0A3PMh5wG5NKya2RnSYsZ/H7Xk9arMhyZpF3IuMi8I9rmGs0Qo+PiI4oi99kj+12VVtIElzyvGJAw==
 
-"@department-of-veterans-affairs/mobile-component-library@0.19.1":
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.19.1.tgz#fa543b98bb4f904cc9bbdf1387c775a47dce92b7"
-  integrity sha512-zWZoMRj5XG5HQYqrP5pNhSi/esaVqGB1+zpy3xKiXSfK6zt89GGKmwa6Q5cva55hoxOWhHuVt2j8wJz+2JCa0A==
-  dependencies:
-    "@department-of-veterans-affairs/mobile-assets" "0.12.0"
-    "@department-of-veterans-affairs/mobile-tokens" "0.12.0"
-    "@os-team/i18next-react-native-language-detector" "^1.0.31"
-    i18next "^23.11.5"
-    react-i18next "^14.1.2"
+"@department-of-veterans-affairs/mobile-component-library@0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-component-library/-/mobile-component-library-0.21.0.tgz#dc213b42c0eeb7dae04134ab369f1e4f4afc464a"
+  integrity sha512-U8vTYoIPAgbFnbtPLsTni0VD+e6SRUwf5jr4lLKOidhD+nl1VuuUd/5AMxs+mazMxyMPkHLzle6MzG4ZE0MSXg==
+  dependencies:
+    "@os-team/i18next-react-native-language-detector" "^1.0.34"
+    i18next "^23.12.2"
+    react-i18next "^15.0.0"
     react-native-svg "15.2.0"
-    styled-components "^6.1.8"
+    react-native-toast-notifications "^3.4.0"
+    styled-components "^6.1.12"
 
-"@department-of-veterans-affairs/mobile-tokens@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.12.0.tgz#df255401790dbb8ac0ecac02f956d6512a1645b2"
-  integrity sha512-cACiKuaU1154l42U+cnnSOa1bRedFiQPG9lX/s+Sb8eJZjCsEmQW4SkqEbRzy5lViYj/59ACnY5JCD7+wslvRw==
+"@department-of-veterans-affairs/mobile-tokens@0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/mobile-tokens/-/mobile-tokens-0.14.0.tgz#be98e600034a548d74b862c15cf17b9a6f25efb6"
+  integrity sha512-lLbTOuT5ajMLlj3oqiAJwH9zbyG75983wCNFTjJLfRyTR7IwZlY6x1DsJjf4CG5fd9VII8oJkrfHvijU1Y0B+w==
 
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
@@ -1922,7 +1921,7 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@os-team/i18next-react-native-language-detector@^1.0.31":
+"@os-team/i18next-react-native-language-detector@^1.0.34":
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/@os-team/i18next-react-native-language-detector/-/i18next-react-native-language-detector-1.0.34.tgz#fd7a44eebccf8ca621cbe6535066a51366778cad"
   integrity sha512-3i4KhddewzlLnCoYxNnovfk1CyagFOOy5gQ7ML5RruqfSFovCBl94GUVW1W6Bku9nZqK4vVKOy76VHDik4wrLQ==
@@ -6405,7 +6404,7 @@ husky@^9.0.11:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
-i18next@^23.11.5:
+i18next@^23.12.2:
   version "23.14.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.14.0.tgz#d415a858390cc849f3db0df539cb2bbfe24a3cdb"
   integrity sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==
@@ -9180,6 +9179,14 @@ react-i18next@^14.1.2:
     "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
+react-i18next@^15.0.0:
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.0.1.tgz#fc662d93829ecb39683fe2757a47ebfbc5c912a0"
+  integrity sha512-NwxLqNM6CLbeGA9xPsjits0EnXdKgCRSS6cgkgOdNcPXqL+1fYNl8fBg1wmnnHvFy812Bt4IWTPE9zjoPmFj3w==
+  dependencies:
+    "@babel/runtime" "^7.24.8"
+    html-parse-stringify "^3.0.1"
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -10488,7 +10495,7 @@ styled-components@^5.3.10:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-components@^6.1.8:
+styled-components@^6.1.12:
   version "6.1.12"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.12.tgz#0d9d511aacfb9052936146dcc2856559e6fae4df"
   integrity sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==

From fdaa27bd991d8ac6f05cb25ebc8af47281c7ca07 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 19 Aug 2024 13:36:46 -0600
Subject: [PATCH 18/21] Use AlertWithHaptics on ClaimDetailsScreen

---
 .../ClaimDetailsScreen/ClaimDetailsScreen.tsx    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx
index d20e5166e3a..182307033d0 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx
@@ -5,7 +5,7 @@ import { ScrollView } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 
-import { Alert, ButtonVariants, SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
+import { ButtonVariants, SegmentedControl } from '@department-of-veterans-affairs/mobile-component-library'
 import { AlertProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Alert/Alert'
 import { ButtonProps } from '@department-of-veterans-affairs/mobile-component-library/src/components/Button/Button'
 import { useQueryClient } from '@tanstack/react-query'
@@ -16,7 +16,15 @@ import { useClaim } from 'api/claimsAndAppeals'
 import { claimsAndAppealsKeys } from 'api/claimsAndAppeals/queryKeys'
 import { useDecisionLetters } from 'api/decisionLetters'
 import { ClaimAttributesData, ClaimData } from 'api/types'
-import { Box, ErrorComponent, FeatureLandingTemplate, LinkWithAnalytics, LoadingComponent, TextView } from 'components'
+import {
+  AlertWithHaptics,
+  Box,
+  ErrorComponent,
+  FeatureLandingTemplate,
+  LinkWithAnalytics,
+  LoadingComponent,
+  TextView,
+} from 'components'
 import { Events } from 'constants/analytics'
 import { ClaimTypeConstants } from 'constants/claims'
 import { NAMESPACE } from 'constants/namespaces'
@@ -189,7 +197,7 @@ function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
 
       return (
         <Box mt={theme.dimensions.standardMarginBetween}>
-          <Alert {...alertProps} />
+          <AlertWithHaptics {...alertProps} />
         </Box>
       )
     }
@@ -209,7 +217,7 @@ function ClaimDetailsScreen({ navigation, route }: ClaimDetailsScreenProps) {
         }
         return (
           <Box mt={theme.dimensions.standardMarginBetween}>
-            <Alert {...alertProps} />
+            <AlertWithHaptics {...alertProps} />
           </Box>
         )
       }

From d9dcaa2e2e31a368ca741f4a9394d1e07114c846 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 19 Aug 2024 17:58:52 -0600
Subject: [PATCH 19/21] Spacing tweaks for alert content

---
 .../src/components/CommonErrorComponents/CallHelpCenter.tsx | 1 -
 VAMobile/src/components/WhatsNew.tsx                        | 4 +---
 .../ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx   | 4 ++--
 .../src/screens/HealthScreen/CernerAlert/CernerAlert.tsx    | 4 ++--
 .../SecureMessaging/CernerAlertSM/CernerAlertSM.tsx         | 6 +++---
 .../Vaccines/NoVaccineRecords/NoVaccineRecords.tsx          | 4 +---
 .../AddressValidation/AddressValidation.tsx                 | 5 +----
 7 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
index 743453f0eae..6daeab11c43 100644
--- a/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx
@@ -70,7 +70,6 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({
             <TextView
               variant="MobileBody"
               paragraphSpacing={true}
-              mt={theme.paragraphSpacing.spacing20FontSize}
               accessibilityLabel={errorA11y ? errorA11y : t('errors.callHelpCenter.informationLine.a11yLabel')}>
               {errorText ? errorText : t('errors.callHelpCenter.informationLine')}
             </TextView>
diff --git a/VAMobile/src/components/WhatsNew.tsx b/VAMobile/src/components/WhatsNew.tsx
index eb1607b5be0..2000ae15486 100644
--- a/VAMobile/src/components/WhatsNew.tsx
+++ b/VAMobile/src/components/WhatsNew.tsx
@@ -101,9 +101,7 @@ export const WhatsNew = () => {
           descriptionA11yLabel={bodyA11yLabel}
           secondaryButton={{ label: t('whatsNew.dismissMessage'), onPress }}
           analytics={{ onExpand: expandCollapsible, onCollapse: closeCollapsible }}>
-          <Box mt={theme.dimensions.standardMarginBetween}>
-            {bullets.length ? <VABulletList listOfText={bullets} paragraphSpacing={true} /> : undefined}
-          </Box>
+          {bullets.length ? <VABulletList listOfText={bullets} paragraphSpacing={true} /> : undefined}
         </AlertWithHaptics>
       </Box>
     )
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index b6ce2e4bc33..d057e2cb05b 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -50,7 +50,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
   }
 
   const collapsibleContent = (
-    <Box mt={theme.dimensions.standardMarginBetween}>
+    <>
       <TextView
         variant="MobileBody"
         paragraphSpacing={true}
@@ -63,7 +63,7 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
         text={t('goToVAGov')}
         a11yLabel={a11yLabelVA(t('goToVAGov'))}
       />
-    </Box>
+    </>
   )
 
   const onCancel = () => {
diff --git a/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx b/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
index 6a063155863..75e10e1ef41 100644
--- a/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
+++ b/VAMobile/src/screens/HealthScreen/CernerAlert/CernerAlert.tsx
@@ -66,7 +66,7 @@ function CernerAlert() {
     }
 
     return (
-      <Box mt={theme.paragraphSpacing.spacing20FontSize}>
+      <>
         <TextView variant="MobileBody" paragraphSpacing={true}>
           {t('cernerAlert.ourRecordsShow')}
         </TextView>
@@ -78,7 +78,7 @@ function CernerAlert() {
           {t('cernerAlert.footer')}
         </TextView>
         <LinkWithAnalytics {...linkProps} />
-      </Box>
+      </>
     )
   }
 
diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
index 2628a4da680..ea362cf0656 100644
--- a/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
+++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/CernerAlertSM/CernerAlertSM.tsx
@@ -5,7 +5,7 @@ import { LinkProps } from '@department-of-veterans-affairs/mobile-component-libr
 
 import { useFacilitiesInfo } from 'api/facilities/getFacilitiesInfo'
 import { Facility } from 'api/types/FacilityData'
-import { AlertWithHaptics, Box, LinkWithAnalytics, TextView, VABulletList, VABulletListText } from 'components'
+import { AlertWithHaptics, LinkWithAnalytics, TextView, VABulletList, VABulletListText } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
@@ -63,7 +63,7 @@ function CernerAlertSM() {
     }
 
     return (
-      <Box mt={theme.dimensions.standardMarginBetween}>
+      <>
         <TextView variant="MobileBody" mb={theme.dimensions.standardMarginBetween}>
           {intro}
         </TextView>
@@ -72,7 +72,7 @@ function CernerAlertSM() {
           {outro}
         </TextView>
         <LinkWithAnalytics {...linkProps} />
-      </Box>
+      </>
     )
   }
 
diff --git a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
index 6b5db2e422f..14b569943cd 100644
--- a/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
+++ b/VAMobile/src/screens/HealthScreen/Vaccines/NoVaccineRecords/NoVaccineRecords.tsx
@@ -5,11 +5,9 @@ import { AlertWithHaptics, ClickToCallPhoneNumber, TextView, VAScrollView } from
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelVA } from 'utils/a11yLabel'
 import { displayedTextPhoneNumber } from 'utils/formattingUtils'
-import { useTheme } from 'utils/hooks'
 
 function NoVaccineRecords() {
   const { t } = useTranslation(NAMESPACE.COMMON)
-  const theme = useTheme()
 
   return (
     <VAScrollView>
@@ -18,7 +16,7 @@ function NoVaccineRecords() {
         header={t('noVaccineRecords.alert.title')}
         headerA11yLabel={a11yLabelVA(t('noVaccineRecords.alert.title'))}
         description={t('noVaccineRecords.alert.text.1')}>
-        <TextView paragraphSpacing={true} mt={theme.paragraphSpacing.spacing20FontSize} variant="MobileBody">
+        <TextView paragraphSpacing={true} variant="MobileBody">
           {t('noVaccineRecords.alert.text.2')}
         </TextView>
         <ClickToCallPhoneNumber phone={t('8006982411')} displayedText={displayedTextPhoneNumber(t('8006982411'))} />
diff --git a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
index e116c4fbefb..69770d67bcf 100644
--- a/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
+++ b/VAMobile/src/screens/HomeScreen/ProfileScreen/ContactInformationScreen/AddressValidation/AddressValidation.tsx
@@ -148,14 +148,11 @@ function AddressValidation({
       <Box>
         <TextView
           variant="MobileBody"
-          mt={standardMarginBetween}
           paragraphSpacing={true}
           accessibilityLabel={t('editAddress.validation.verifyAddress.body.1.a11yLabel')}>
           {t('editAddress.validation.verifyAddress.body.1')}
         </TextView>
-        <TextView variant="MobileBody" mb={standardMarginBetween}>
-          {t('editAddress.validation.verifyAddress.body.2')}
-        </TextView>
+        <TextView variant="MobileBody">{t('editAddress.validation.verifyAddress.body.2')}</TextView>
       </Box>
     )
   }

From 2b4a465dc89bd132afd7e71995cd6537abd1aa07 Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Mon, 19 Aug 2024 19:28:41 -0600
Subject: [PATCH 20/21] Remove extra spacing in WaygateWrapper alert

---
 VAMobile/src/components/WaygateWrapper.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/VAMobile/src/components/WaygateWrapper.tsx b/VAMobile/src/components/WaygateWrapper.tsx
index 91d5ec31041..b46a5d94211 100644
--- a/VAMobile/src/components/WaygateWrapper.tsx
+++ b/VAMobile/src/components/WaygateWrapper.tsx
@@ -57,13 +57,11 @@ export const WaygateWrapper: FC<WaygateWrapperProps> = ({ children, waygateName,
           }
           focusOnError={false}
           testID="AFUseCase2TestID">
-          <Box my={theme.dimensions.standardMarginBetween}>
-            <ClickToCallPhoneNumber
-              displayedText={displayedTextPhoneNumber(phoneNumber)}
-              phone={phoneNumber}
-              a11yLabel={a11yLabelID(phoneNumber)}
-            />
-          </Box>
+          <ClickToCallPhoneNumber
+            displayedText={displayedTextPhoneNumber(phoneNumber)}
+            phone={phoneNumber}
+            a11yLabel={a11yLabelID(phoneNumber)}
+          />
         </AlertWithHaptics>
       </Box>
     )

From c759cf164826878cf5e8f9202d6d6d6888830dfa Mon Sep 17 00:00:00 2001
From: Chris Alexander <chris.alexander@adhocteam.us>
Date: Tue, 20 Aug 2024 13:47:49 -0600
Subject: [PATCH 21/21] Improvements for CustomError and TakePhotos alerts

---
 .../CommonErrorComponents/CustomError.tsx     | 27 ++++------------
 .../ClaimFileUpload/TakePhotos/TakePhotos.tsx | 31 +++++++------------
 2 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/VAMobile/src/components/CommonErrorComponents/CustomError.tsx b/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
index 91e9e167edb..9b6902a1132 100644
--- a/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
+++ b/VAMobile/src/components/CommonErrorComponents/CustomError.tsx
@@ -3,9 +3,7 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ViewStyle } from 'react-native'
 
-import { Button } from '@department-of-veterans-affairs/mobile-component-library'
-
-import { AlertWithHaptics, Box, ClickToCallPhoneNumber, TextView, VAScrollView } from 'components'
+import { AlertWithHaptics, Box, ClickToCallPhoneNumber, VAScrollView } from 'components'
 import { Events } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yLabelID, a11yLabelVA } from 'utils/a11yLabel'
@@ -41,8 +39,6 @@ const CustomError: FC<CustomErrorProps> = ({ onTryAgain, titleText, errorText, c
     logAnalyticsEvent(Events.vama_be_af_shown())
   }, [])
 
-  const standardMarginBetween = theme.dimensions.standardMarginBetween
-
   const fixSpacingAndSpecialCharacters = (text: string) => {
     return fixedWhiteSpaceString(fixSpecialCharacters(text))
   }
@@ -63,22 +59,11 @@ const CustomError: FC<CustomErrorProps> = ({ onTryAgain, titleText, errorText, c
         <AlertWithHaptics
           variant="error"
           header={fixSpacingAndSpecialCharacters(titleText)}
-          headerA11yLabel={titleA11y}>
-          <Box>
-            <TextView
-              variant="MobileBody"
-              paragraphSpacing={true}
-              mt={theme.dimensions.standardMarginBetween}
-              accessibilityLabel={errorA11y}>
-              {fixSpacingAndSpecialCharacters(errorText)}
-            </TextView>
-            {!!callPhone && <ClickToCallPhoneNumber a11yLabel={a11yLabelID(callPhone)} phone={callPhone} />}
-            {onTryAgain && (
-              <Box mt={standardMarginBetween} accessibilityRole="button">
-                <Button onPress={tryAgain} label={t('refresh')} testID={t('refresh')} />
-              </Box>
-            )}
-          </Box>
+          headerA11yLabel={titleA11y}
+          description={fixSpacingAndSpecialCharacters(errorText)}
+          descriptionA11yLabel={errorA11y}
+          primaryButton={onTryAgain && { label: t('refresh'), onPress: tryAgain, testID: t('refresh') }}>
+          {!!callPhone && <ClickToCallPhoneNumber a11yLabel={a11yLabelID(callPhone)} phone={callPhone} />}
         </AlertWithHaptics>
       </Box>
     </VAScrollView>
diff --git a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
index d057e2cb05b..9567abac2f7 100644
--- a/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
+++ b/VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/TakePhotos/TakePhotos.tsx
@@ -49,23 +49,6 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
     }
   }
 
-  const collapsibleContent = (
-    <>
-      <TextView
-        variant="MobileBody"
-        paragraphSpacing={true}
-        accessibilityLabel={a11yLabelVA(t('fileUpload.accessibilityAlert.body'))}>
-        {t('fileUpload.accessibilityAlert.body')}
-      </TextView>
-      <LinkWithAnalytics
-        type="url"
-        url={LINK_URL_GO_TO_VA_GOV}
-        text={t('goToVAGov')}
-        a11yLabel={a11yLabelVA(t('goToVAGov'))}
-      />
-    </>
-  )
-
   const onCancel = () => {
     logAnalyticsEvent(Events.vama_evidence_cancel_1(claimID, request.trackedItemId || null, request.type, 'photo'))
     navigation.goBack()
@@ -84,8 +67,18 @@ function TakePhotos({ navigation, route }: TakePhotosProps) {
         </Box>
       )}
       <Box mb={theme.dimensions.standardMarginBetween}>
-        <AlertWithHaptics variant="info" expandable={true} header={t('fileUpload.accessibilityAlert.title')}>
-          {collapsibleContent}
+        <AlertWithHaptics
+          variant="info"
+          expandable={true}
+          header={t('fileUpload.accessibilityAlert.title')}
+          description={t('fileUpload.accessibilityAlert.body')}
+          descriptionA11yLabel={a11yLabelVA(t('fileUpload.accessibilityAlert.body'))}>
+          <LinkWithAnalytics
+            type="url"
+            url={LINK_URL_GO_TO_VA_GOV}
+            text={t('goToVAGov')}
+            a11yLabel={a11yLabelVA(t('goToVAGov'))}
+          />
         </AlertWithHaptics>
       </Box>
       <TextArea>