From 6512cacec837b79703e7a76c949d05f1b0a4f722 Mon Sep 17 00:00:00 2001
From: Pritam Dhara <46365255+pritam1813@users.noreply.github.com>
Date: Wed, 16 Aug 2023 03:29:29 +0530
Subject: [PATCH] Replaced ActionableMessage in confirm-page-container-content
 (#20417)

* Replaced ActionableMessage in confirm-page-container-content

* Updated Snapshot of confirm-transaction-base

* Updated BannerAlert className

* Using component API and replacing ErrorMessage

* Update snapshot

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ...onfirm-page-container-content.component.js | 88 +++++++++----------
 .../confirm-page-container-content/index.scss |  4 -
 .../confirm-transaction-base.test.js.snap     | 35 +++-----
 3 files changed, 56 insertions(+), 71 deletions(-)

diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index a1656c5c1..4630cc5f9 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -2,15 +2,17 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Tabs, Tab } from '../../../ui/tabs';
-///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
-import Button from '../../../ui/button';
-///: END:ONLY_INCLUDE_IN
-import ActionableMessage from '../../../ui/actionable-message/actionable-message';
+import {
+  ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+  Button,
+  BUTTON_SIZES,
+  BUTTON_VARIANT,
+  ///: END:ONLY_INCLUDE_IN
+  BannerAlert,
+} from '../../../component-library';
 import { PageContainerFooter } from '../../../ui/page-container';
-import ErrorMessage from '../../../ui/error-message';
 import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys';
-import Typography from '../../../ui/typography';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import { Severity } from '../../../../helpers/constants/design-system';
 
 import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils';
 ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
@@ -256,46 +258,42 @@ export default class ConfirmPageContainerContent extends Component {
         {!supportsEIP1559 &&
           !showInsuffienctFundsError &&
           (errorKey || errorMessage) && (
-            <div className="confirm-page-container-content__error-container">
-              <ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
-            </div>
+            <BannerAlert
+              severity={Severity.Danger}
+              description={errorKey ? t(errorKey) : errorMessage}
+              marginBottom={4}
+              marginLeft={4}
+              marginRight={4}
+            />
           )}
         {showInsuffienctFundsError && (
-          <div className="confirm-page-container-content__error-container">
-            <ActionableMessage
-              className="actionable-message--warning"
-              message={
-                isBuyableChain ? (
-                  <Typography variant={TypographyVariant.H7} align="left">
-                    {t('insufficientCurrencyBuyOrDeposit', [
-                      nativeCurrency,
-                      networkName,
-                      ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
-                      <Button
-                        type="inline"
-                        className="confirm-page-container-content__link"
-                        onClick={openBuyCryptoInPdapp}
-                        key={`${nativeCurrency}-buy-button`}
-                      >
-                        {t('buyAsset', [nativeCurrency])}
-                      </Button>,
-                      ///: END:ONLY_INCLUDE_IN
-                    ])}
-                  </Typography>
-                ) : (
-                  <Typography variant={TypographyVariant.H7} align="left">
-                    {t('insufficientCurrencyDeposit', [
-                      nativeCurrency,
-                      networkName,
-                    ])}
-                  </Typography>
-                )
-              }
-              useIcon
-              iconFillColor="var(--color-error-default)"
-              type="danger"
-            />
-          </div>
+          <BannerAlert
+            severity={Severity.Danger}
+            marginBottom={4}
+            marginLeft={4}
+            marginRight={4}
+            description={
+              isBuyableChain
+                ? t('insufficientCurrencyBuyOrDeposit', [
+                    nativeCurrency,
+                    networkName,
+                    ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+                    <Button
+                      variant={BUTTON_VARIANT.LINK}
+                      size={BUTTON_SIZES.INHERIT}
+                      onClick={openBuyCryptoInPdapp}
+                      key={`${nativeCurrency}-buy-button`}
+                    >
+                      {t('buyAsset', [nativeCurrency])}
+                    </Button>,
+                    ///: END:ONLY_INCLUDE_IN
+                  ])
+                : t('insufficientCurrencyDeposit', [
+                    nativeCurrency,
+                    networkName,
+                  ])
+            }
+          />
         )}
         <PageContainerFooter
           onCancel={onCancel}
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
index 5b58b4a32..f8e6fb512 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
@@ -12,10 +12,6 @@
     border-top: 1px solid var(--color-border-muted);
   }
 
-  &__error-container {
-    padding: 0 16px 16px 16px;
-  }
-
   &__details {
     box-sizing: border-box;
     padding: 0 24px;
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 7386530bf..0f6120341 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -489,30 +489,21 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="confirm-page-container-content__error-container"
+        class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-right-4 box--margin-bottom-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
       >
-        <div
-          class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon"
-        >
-          <svg
-            viewBox="0 0 10 10"
-            xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
+          style="mask-image: url('./images/icons/danger.svg');"
+        />
+        <div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
           >
-            <path
-              d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
-              fill="var(--color-error-default)"
-            />
-          </svg>
-          
-          <div
-            class="actionable-message__message"
-          >
-            <h6
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
-            >
-              You do not have enough  in your account to pay for transaction fees on Goerli network. Deposit  from another account.
-            </h6>
-          </div>
+            You do not have enough  in your account to pay for transaction fees on Goerli network. Deposit  from another account.
+          </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          />
         </div>
       </div>
       <div