feature/8467-UseDesignSystemAlertComponent

.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"] |

VAMobile/documentation/docs/Engineering/FrontEnd/CustomHooks/useAutoScrollToElement.mdx

@@ -34,20 +34,20 @@ 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')}>
+        <AlertWithHaptics variant={'warning'} header={t('secureMessaging.reply.youCanNoLonger')} description={t('secureMessaging.reply.olderThan45Days')}>
             <Box mt={theme.dimensions.standardMarginBetween}>
             <Button
                 label={t('secureMessaging.startNewMessage.new')}
                 onPress={onPressCompose}
                 a11yHint={t('secureMessaging.startNewMessage.new.a11yHint')}
             />
             </Box>
-        </AlertBox>
+        </AlertWithHaptics>
         </Box>
     )}
     </VAScrollView>
     {!replyExpired && <ReplyMessageButton messageID={messageID} />}
 </>
 )`
 
-<HooksInfo componentName="useAutoScrollToElement" example={exampleString}/>
+<HooksInfo componentName="useAutoScrollToElement" example={exampleString} />

VAMobile/package.json

@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/mobile-assets": "0.12.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.12.0",
-    "@department-of-veterans-affairs/mobile-component-library": "0.19.1",
+    "@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",

VAMobile/src/components/AlertWithHaptics.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { context, render, screen } from 'testUtils'
+
+import AlertWithHaptics from './AlertWithHaptics'
+
+context('AlertWithHaptics', () => {
+  beforeEach(() => {
+    render(<AlertWithHaptics variant="warning" header={'Warning title'} description={'My warning'} />)
+  })
+
+  it('initializes correctly', () => {
+    expect(screen.getByText('My warning')).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Warning title' })).toBeTruthy()
+  })
+})

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