feat: add MultipleAlertModal component

app/components/Views/confirmations/AlertSystem/AlertModal/AlertModal.test.tsx

@@ -55,17 +55,17 @@ const mockAlerts = [
 
 describe('AlertModal', () => {
   const baseMockUseAlerts = {
+    alertKey: 'alert1',
     alerts: mockAlerts,
     fieldAlerts: mockAlerts,
     hideAlertModal: jest.fn(),
     alertModalVisible: true,
+    setAlertKey: jest.fn(),
   };
 
   const baseMockUseAlertsConfirmed = {
-    alertKey: 'alert1',
     isAlertConfirmed: jest.fn().mockReturnValue(false),
     setAlertConfirmed: jest.fn(),
-    setAlertKey: jest.fn(),
     unconfirmedDangerAlerts: [],
     unconfirmedFieldDangerAlerts: [],
     hasUnconfirmedDangerAlerts: false,
@@ -93,8 +93,8 @@ describe('AlertModal', () => {
     expect(icon).toBeDefined();
     expect(icon.props.name).toBe(IconName.Danger);
 
-    (useAlertsConfirmed as jest.Mock).mockReturnValue({
-      ...baseMockUseAlertsConfirmed,
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
       alertKey: 'alert3', // Info
     });
     const { getByTestId: getByTestIdInfo } = render(<AlertModal />);
@@ -103,14 +103,13 @@ describe('AlertModal', () => {
   });
 
   it('handles checkbox click correctly', async () => {
-    (useAlertsConfirmed as jest.Mock).mockReturnValue({
-      ...baseMockUseAlertsConfirmed,
-      alertKey: 'alert2',
-    });
     const setAlertConfirmed = jest.fn();
     (useAlertsConfirmed as jest.Mock).mockReturnValueOnce({
       ...baseMockUseAlertsConfirmed,
       setAlertConfirmed,
+    });
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
       alertKey: 'alert2',
     });
 
@@ -171,17 +170,17 @@ describe('AlertModal', () => {
   });
 
   it('does not render the checkbox if the severity is not Danger', () => {
-    (useAlertsConfirmed as jest.Mock).mockReturnValue({
-      ...baseMockUseAlertsConfirmed,
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
       alertKey: 'alert1',
     });
     const { queryByText } = render(<AlertModal />);
     expect(queryByText(CHECKBOX_LABEL)).toBeNull();
   });
 
   it('renders checkbox if the severity is Danger', async () => {
-    (useAlertsConfirmed as jest.Mock).mockReturnValue({
-      ...baseMockUseAlertsConfirmed,
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
       alertKey: 'alert2',
     });
     const { queryByText } = render(<AlertModal />);
@@ -211,4 +210,45 @@ describe('AlertModal', () => {
     const { queryByText } = render(<AlertModal />);
     expect(queryByText(CHECKBOX_LABEL)).toBeNull();
   });
+
+  it('renders header accessory when provided', () => {
+    const headerAccessory = <Text>Header Accessory</Text>;
+    const { getByText } = render(<AlertModal headerAccessory={headerAccessory} />);
+    expect(getByText('Header Accessory')).toBeDefined();
+  });
+
+  it('calls onAcknowledgeClick when modal is closed', async () => {
+    const onAcknowledgeClick = jest.fn();
+    const { getByText } = render(<AlertModal onAcknowledgeClick={onAcknowledgeClick} />);
+    await act(async () => {
+      fireEvent.press(getByText('Got it'));
+    });
+    expect(onAcknowledgeClick).toHaveBeenCalled();
+  });
+
+  it('renders default title when alert title is not provided', () => {
+    const alertWithoutTitle = {
+      ...mockAlerts[0],
+      title: undefined,
+    };
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
+      fieldAlerts: [alertWithoutTitle],
+    });
+    const { getByText } = render(<AlertModal />);
+    expect(getByText('Alert')).toBeDefined();
+  });
+
+  it('handles alert without message correctly', () => {
+    const alertWithoutMessage = {
+      ...mockAlerts[0],
+      message: undefined,
+    };
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
+      fieldAlerts: [alertWithoutMessage],
+    });
+    const { queryByText } = render(<AlertModal />);
+    expect(queryByText(ALERT_MESSAGE_MOCK)).toBeNull();
+  });
 });

app/components/Views/confirmations/AlertSystem/AlertModal/AlertModal.tsx

@@ -7,49 +7,31 @@ import Button, { ButtonSize, ButtonVariants, ButtonWidthTypes } from '../../../.
 import Checkbox from '../../../../../component-library/components/Checkbox';
 import Icon, { IconName, IconSize } from '../../../../../component-library/components/Icons/Icon';
 import Text, { TextVariant } from '../../../../../component-library/components/Texts/Text';
-import { ThemeColors } from '@metamask/design-tokens';
 import { useStyles } from '../../../../hooks/useStyles';
 import styleSheet from './AlertModal.styles';
 import { strings } from '../../../../../../locales/i18n';
 import { Alert, Severity } from '../../types/alerts';
 import { useAlertsConfirmed } from '../../../../hooks/useAlertsConfirmed';
-
-const getSeverityStyle = (severity: Severity, colors: ThemeColors) => {
-  switch (severity) {
-    case Severity.Warning:
-      return {
-        background: colors.warning.muted,
-        icon: colors.warning.default,
-      };
-    case Severity.Danger:
-      return {
-        background: colors.error.muted,
-        icon: colors.error.default,
-      };
-    default:
-      return {
-        background: colors.background.default,
-        icon: colors.info.default,
-      };
-  }
-};
+import { getSeverityStyle } from '../utils';
 
 interface HeaderProps {
   iconColor: string;
   selectedAlert: Alert;
   styles: Record<string, ViewStyle>;
+  headerAccessory?: React.ReactNode;
 }
 
-const Header: React.FC<HeaderProps> = ({ selectedAlert, iconColor, styles }) => (
+const Header: React.FC<HeaderProps> = ({ selectedAlert, iconColor, styles, headerAccessory }) => (
   <>
-    <View style={styles.iconWrapper}>
+    {headerAccessory ?? <View style={styles.iconWrapper}>
       <Icon
         name={selectedAlert.severity === Severity.Info ? IconName.Info : IconName.Danger}
         size={IconSize.Xl}
         color={iconColor}
         testID="alert-modal-icon"
       />
     </View>
+    }
     <View style={styles.headerContainer}>
       <Text style={styles.headerText} variant={TextVariant.BodyMDBold}>
         {selectedAlert.title ?? strings('alert_system.alert_modal.title')}
@@ -65,18 +47,22 @@ interface ContentProps {
 }
 
 const Content: React.FC<ContentProps> = ({ backgroundColor, selectedAlert, styles }) => (
-  <View style={[styles.content, {backgroundColor}]}>
+  <View style={[styles.content, { backgroundColor }]}>
     {selectedAlert.content ?? (
       <>
         <Text style={styles.message}>{selectedAlert.message}</Text>
-        <Text style={styles.message} variant={TextVariant.BodyMDBold}>
-          {strings('alert_system.alert_modal.alert_details')}
-        </Text>
-        {selectedAlert.alertDetails?.map((detail, index) => (
-          <Text key={`details-${index}`} style={styles.detailsText} variant={TextVariant.BodyMD}>
-            {'• ' + detail}
-          </Text>
-        ))}
+        {selectedAlert.alertDetails && (
+          <>
+            <Text style={styles.message} variant={TextVariant.BodyMDBold}>
+              {strings('alert_system.alert_modal.alert_details')}
+            </Text>
+            {selectedAlert.alertDetails.map((detail, index) => (
+              <Text key={`details-${index}`} style={styles.detailsText} variant={TextVariant.BodyMD}>
+                {'• ' + detail}
+              </Text>
+            ))}
+          </>
+        )}
       </>
     )}
   </View>
@@ -139,17 +125,26 @@ const Buttons: React.FC<ButtonsProps> = ({ hideAlertModal, action, styles, onHan
   </View>
 );
 
-const AlertModal = () => {
+interface AlertModalProps {
+  headerAccessory?: React.ReactNode;
+  onAcknowledgeClick?: () => void;
+}
+
+const AlertModal: React.FC<AlertModalProps> = ({headerAccessory, onAcknowledgeClick}) => {
   const { colors } = useTheme();
   const styles = (useStyles(styleSheet, {})).styles as Record<string, ViewStyle>;
-  const { hideAlertModal, alertModalVisible, fieldAlerts } = useAlerts();
-  const { isAlertConfirmed, setAlertConfirmed, alertKey } = useAlertsConfirmed(fieldAlerts);
+  const { hideAlertModal, alertModalVisible, fieldAlerts, alertKey } = useAlerts();
+  const { isAlertConfirmed, setAlertConfirmed } = useAlertsConfirmed(fieldAlerts);
 
   const handleClose = useCallback(
     () => {
+      if (onAcknowledgeClick) {
+        onAcknowledgeClick();
+        return;
+      }
       hideAlertModal();
     },
-    [hideAlertModal],
+    [hideAlertModal, onAcknowledgeClick],
   );
 
   const handleCheckboxClick = useCallback(
@@ -177,12 +172,13 @@ const AlertModal = () => {
   const severityStyle = getSeverityStyle(selectedAlert.severity, colors);
 
   return (
-    <BottomModal onClose={handleClose}>
+    <BottomModal onClose={hideAlertModal}>
       <View style={styles.modalContainer}>
         <Header
           selectedAlert={selectedAlert}
           iconColor={severityStyle.icon}
           styles={styles}
+          headerAccessory={headerAccessory}
         />
         <View>
           <Content

app/components/Views/confirmations/AlertSystem/GeneralAlertBanner/GeneralAlertBanner.test.tsx

@@ -4,7 +4,8 @@ import { BannerAlertSeverity } from '../../../../../component-library/components
 import Text from '../../../../../component-library/components/Texts/Text';
 import { Alert, Severity } from '../../types/alerts';
 import { useAlerts } from '../context';
-import GeneralAlertBanner, { getBannerAlertSeverity } from './GeneralAlertBanner';
+import GeneralAlertBanner from './GeneralAlertBanner';
+import { getBannerAlertSeverity } from '../utils';
 
 jest.mock('../context', () => ({
   useAlerts: jest.fn(),

app/components/Views/confirmations/AlertSystem/GeneralAlertBanner/GeneralAlertBanner.tsx

@@ -2,29 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 import { useAlerts } from '../context';
 import BannerAlert from '../../../../../component-library/components/Banners/Banner/variants/BannerAlert';
-import { Severity } from '../../types/alerts';
-import { BannerAlertSeverity } from '../../../../../component-library/components/Banners/Banner';
 import styleSheet from './GeneralAlertBanner.styles';
 import { useStyles } from '../../../../hooks/useStyles';
-
-/**
- * Converts the severity of a banner alert to the corresponding BannerAlertSeverity.
- *
- * @param severity - The severity of the banner alert.
- * @returns The corresponding BannerAlertSeverity.
- */
-export function getBannerAlertSeverity(
-  severity: Severity,
-): BannerAlertSeverity {
-  switch (severity) {
-    case Severity.Danger:
-      return BannerAlertSeverity.Error;
-    case Severity.Warning:
-      return BannerAlertSeverity.Warning;
-    default:
-      return BannerAlertSeverity.Info;
-  }
-}
+import { getBannerAlertSeverity } from '../utils';
 
 const GeneralAlertBanner = () => {
   const { generalAlerts } = useAlerts();

app/components/Views/confirmations/AlertSystem/MultipleAlertModal/MultipleAlertModal.styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () => StyleSheet.create({
+    navAlertHeader: {
+      padding: 0,
+    },
+    pageNavigation: { flexDirection: 'row', alignItems: 'center' },
+  });
+
+export default styleSheet;