From 7382e8a01080d12aa4c96df6bddb64dfc99b6746 Mon Sep 17 00:00:00 2001
From: Jhonatan Gonzalez <jhesgodi@gmail.com>
Date: Mon, 11 Mar 2024 12:24:14 +0900
Subject: [PATCH] use insufficient coins banner

---
 .../src/widgets/sale/views/PaymentMethods.tsx | 40 ++-----------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
index a41d7184f0..b5492d5093 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx
@@ -1,6 +1,4 @@
-import {
-  Banner, Box, Heading, Link,
-} from '@biom3/react';
+import { Box, Heading } from '@biom3/react';
 import { useContext, useEffect } from 'react';
 
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
@@ -22,10 +20,11 @@ import { PaymentOptions } from '../components/PaymentOptions';
 import { useSaleContext } from '../context/SaleContextProvider';
 import { useSaleEvent } from '../hooks/useSaleEvents';
 import { SaleErrorTypes, SignPaymentTypes } from '../types';
+import { InsufficientCoinsBanner } from '../components/InsufficientCoinsBanner';
 
 export function PaymentMethods() {
   const { t } = useTranslation();
-  const { viewState, viewDispatch } = useContext(ViewContext);
+  const { viewDispatch } = useContext(ViewContext);
   const {
     sign,
     goToErrorView,
@@ -82,35 +81,6 @@ export function PaymentMethods() {
     }
   }, [paymentMethod]);
 
-  const onClickInsufficientCoinsBanner = () => {
-    viewDispatch({
-      payload: {
-        type: ViewActions.UPDATE_VIEW,
-        view: {
-          type: SharedViews.TOP_UP_VIEW,
-        },
-      },
-    });
-  };
-
-  const insufficientCoinsBanner = (
-    <Box sx={{ paddingX: 'base.spacing.x2' }}>
-      <Banner>
-        <Banner.Icon icon="InformationCircle" />
-        <Banner.Caption>
-          {t('views.PAYMENT_METHODS.insufficientCoinsBanner.caption')}
-          <Link
-            sx={{ mx: 'base.spacing.x1' }}
-            onClick={() => onClickInsufficientCoinsBanner()}
-          >
-            {t('views.PAYMENT_METHODS.insufficientCoinsBanner.captionCTA')}
-          </Link>
-          {t('views.PAYMENT_METHODS.insufficientCoinsBanner.captionEnd')}
-        </Banner.Caption>
-      </Banner>
-    </Box>
-  );
-
   useEffect(() => sendPageView(SaleWidgetViews.PAYMENT_METHODS), []);
   useEffect(() => {
     if (!invalidParameters) return;
@@ -150,9 +120,7 @@ export function PaymentMethods() {
             onClick={handleOptionClick}
           />
         </Box>
-        {viewState.view.data?.showInsufficientCoinsBanner
-          ? insufficientCoinsBanner
-          : null}
+        <InsufficientCoinsBanner />
       </Box>
     </SimpleLayout>
   );