[MMI] Add transaction-failed functional component (#18623)

* Finished component

* Fixed test mock variable

* Using design system colors

* Using design system icons

* removed uneeded css

app/_locales/en/messages.json

@@ -2810,6 +2810,9 @@
   "openSeaNew": {
     "message": "OpenSea"
   },
+  "operationFailed": {
+    "message": "Operation Failed"
+  },
   "optional": {
     "message": "Optional"
   },
@@ -4478,6 +4481,10 @@
   "transactionErrored": {
     "message": "Transaction encountered an error."
   },
+  "transactionFailed": {
+    "message": "Transaction Failed"
+  },
+
   "transactionFee": {
     "message": "Transaction fee"
   },

ui/components/app/app-components.scss

@@ -104,3 +104,6 @@
 @import 'network-account-balance-header/index';
 @import 'approve-content-card/index';
 @import 'transaction-alerts/transaction-alerts';
+///: BEGIN:ONLY_INCLUDE_IN(mmi)
+@import '../institutional/transaction-failed-modal/index';
+///: END:ONLY_INCLUDE_IN

ui/components/institutional/transaction-failed-modal/index.js

@@ -0,0 +1 @@
+export { default } from './transaction-failed';

ui/components/institutional/transaction-failed-modal/index.scss

@@ -0,0 +1,7 @@
+.transaction-failed {
+  &__description {
+    border: 1px solid var(--color-border-muted);
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+}

ui/components/institutional/transaction-failed-modal/transaction-failed.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Modal from '../../app/modal';
+import Box from '../../ui/box/box';
+import {
+  AlignItems,
+  BorderRadius,
+  DISPLAY,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  TEXT_ALIGN,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { Text, Icon, IconName, IconSize } from '../../component-library';
+
+const TransactionFailedModal = ({
+  hideModal,
+  closeNotification,
+  operationFailed,
+  errorMessage,
+}) => {
+  const t = useI18nContext();
+  const handleSubmit = () => {
+    if (closeNotification) {
+      global.platform.closeCurrentWindow();
+    }
+    hideModal();
+  };
+
+  return (
+    <Modal onSubmit={handleSubmit} submitText={t('ok')}>
+      <Box
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+        alignItems={AlignItems.center}
+        paddingLeft={4}
+        paddingRight={4}
+        style={{ flex: 1, overflowY: 'auto' }}
+      >
+        <Icon name={IconName.Warning} size={IconSize.Xl} />
+        <Text
+          as="h1"
+          variant={TextVariant.displayMd}
+          textAlign={TEXT_ALIGN.CENTER}
+          fontWeight={FONT_WEIGHT.BOLD}
+          paddingTop={4}
+          paddingBottom={4}
+        >
+          {operationFailed
+            ? `${t('operationFailed')}!`
+            : `${t('transactionFailed')}!`}
+        </Text>
+        <Text
+          textAlign={TEXT_ALIGN.CENTER}
+          variant={TextVariant.bodySm}
+          paddingTop={4}
+          paddingBottom={4}
+          paddingLeft={4}
+          paddingRight={4}
+          borderRadius={BorderRadius.MD}
+          className="transaction-failed__description"
+        >
+          {errorMessage}
+        </Text>
+      </Box>
+    </Modal>
+  );
+};
+
+TransactionFailedModal.propTypes = {
+  hideModal: PropTypes.func,
+  errorMessage: PropTypes.string,
+  closeNotification: PropTypes.bool,
+  operationFailed: PropTypes.bool,
+};
+
+export default withModalProps(TransactionFailedModal);

ui/components/institutional/transaction-failed-modal/transaction-failed.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import TransactionFailedModal from '.';
+
+export default {
+  title: 'Components/Institutional/TransactionFailedModal',
+  argTypes: {},
+  args: {
+    errorMessage: 'test',
+    operationFailed: false,
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <TransactionFailedModal {...args} />;
+};
+
+DefaultStory.storyName = 'TransactionFailedModal';

ui/components/institutional/transaction-failed-modal/transaction-failed.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import testData from '../../../../.storybook/test-data';
+import TransactionFailed from '.';
+
+const mockErrorMessage = 'Something went wrong';
+
+describe('Transaction Failed', () => {
+  const mockStore = {
+    ...testData,
+  };
+
+  const store = configureMockStore()(mockStore);
+
+  it('renders the error message', () => {
+    renderWithProvider(
+      <TransactionFailed errorMessage={mockErrorMessage} />,
+      store,
+    );
+    const errorMessageElement = screen.getByText(mockErrorMessage);
+    expect(errorMessageElement).toBeInTheDocument();
+  });
+
+  it('renders the correct title when operation fails', () => {
+    const operationFailed = true;
+    const title = 'Operation Failed!';
+    renderWithProvider(
+      <TransactionFailed
+        operationFailed={operationFailed}
+        errorMessage={mockErrorMessage}
+      />,
+      store,
+    );
+    const titleElement = screen.getByText(title);
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('renders the correct title when transaction fails', () => {
+    const operationFailed = false;
+    const title = 'Transaction Failed!';
+    renderWithProvider(
+      <TransactionFailed
+        operationFailed={operationFailed}
+        errorMessage={mockErrorMessage}
+      />,
+      store,
+    );
+    const titleElement = screen.getByText(title);
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('closes window when closeNotification is true', () => {
+    global.platform = {
+      closeCurrentWindow: jest.fn(),
+    };
+    renderWithProvider(<TransactionFailed closeNotification />, store);
+    const okButton = screen.getByText('Ok');
+    fireEvent.click(okButton);
+    expect(global.platform.closeCurrentWindow).toHaveBeenCalledTimes(1);
+  });
+});