From 6160087ec2180ac92f8a4c4fb3fe9d7ed53b415f Mon Sep 17 00:00:00 2001
From: Meghan Sardesai <msardesai@mozilla.com>
Date: Mon, 25 Jul 2022 11:18:12 -0700
Subject: [PATCH] refactor(payments): update PaymentErrorView component to
 utilize Tailwind Because:

* We want to convert to Tailwind across fxa for consistency and to improve overall maintenance
* We want to improve responsiveness and UI/UX
* We want to improve accessibility

This commit:

* Replaces all CSS/SCSS with Tailwind utility classes
* Removes .css and .scss files
* Reworks Storybook files

Closes #13583
---
 .../components/PaymentErrorView/index.scss    | 31 -------------
 .../PaymentErrorView/index.stories.tsx        | 46 ++++++++++++-------
 .../PaymentErrorView/index.test.tsx           |  2 -
 .../src/components/PaymentErrorView/index.tsx | 15 +++---
 4 files changed, 38 insertions(+), 56 deletions(-)

diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss b/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss
index c83419c8c13..f24e1be89b8 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss
@@ -8,35 +8,4 @@
 
 .payment-error {
   @include checkout-view();
-  // override grid-row rule from checkout-view FXA-3237
-  grid-row: 3/4;
-  margin-top: 0px;
-
-  .wrapper {
-    margin-bottom: 60px;
-
-    p {
-      line-height: 22px;
-
-      @include max-width('tablet') {
-        padding: 0 30px;
-      }
-
-      @include min-width('desktop') {
-        padding: 0 100px;
-      }
-    }
-  }
-
-  .button.primary-button {
-    margin-bottom: 40px;
-  }
-
-  #error-icon {
-    margin: 60px auto 40px;
-  }
-
-  @include max-width('tablet') {
-    margin-top: 10px;
-  }
 }
diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.stories.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.stories.tsx
index 7066763a3a6..66dda5978d0 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.stories.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.stories.tsx
@@ -1,22 +1,34 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { PaymentErrorView } from './index';
 import { SELECTED_PLAN } from '../../lib/mock-data';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Meta } from '@storybook/react';
 
-storiesOf('components/PaymentError', module).add('default', () => (
-  <BrowserRouter>
-    <Routes>
-      <Route
-        path="*"
-        element={
-          <PaymentErrorView
-            error={{ code: 'general-paypal-error' }}
-            actionFn={() => {}}
-            plan={SELECTED_PLAN}
-          />
-        }
-      />
-    </Routes>
-  </BrowserRouter>
-));
+export default {
+  title: 'components/PaymentError',
+  component: PaymentErrorView,
+} as Meta;
+
+const storyWithContext = (storyName?: string) => {
+  const story = () => (
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="*"
+          element={
+            <PaymentErrorView
+              error={{ code: 'general-paypal-error' }}
+              actionFn={() => {}}
+              plan={SELECTED_PLAN}
+            />
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+
+  if (storyName) story.storyName = storyName;
+  return story;
+};
+
+export const Default = storyWithContext('default');
diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.test.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.test.tsx
index b0fdfdc01e7..c1b014d1f8c 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.test.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.test.tsx
@@ -32,8 +32,6 @@ describe('PaymentErrorView test with l10n', () => {
         plan={SELECTED_PLAN}
       />
     );
-    const spinner = queryByAltText('error icon');
-    expect(spinner).toBeInTheDocument();
 
     const mainBlock = queryByTestId('payment-error');
     expect(mainBlock).toBeInTheDocument();
diff --git a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
index 18dcbe179a7..df604a2689d 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
@@ -28,7 +28,7 @@ const retryButtonFn = (onRetry: PaymentErrorViewProps['actionFn']) =>
     <Localized id="payment-error-retry-button">
       <button
         data-testid="retry-link"
-        className="button retry-link primary-button"
+        className="button retry-link primary-button mb-10"
         onClick={() => onRetry()}
       >
         Try again
@@ -41,7 +41,7 @@ const manageSubButtonFn = (onClick: VoidFunction) => {
     <Localized id="payment-error-manage-subscription-button">
       <button
         data-testid="manage-subscription-link"
-        className="button primary-button"
+        className="button primary-button mb-10"
         onClick={onClick}
       >
         Manage my subscription
@@ -85,17 +85,20 @@ export const PaymentErrorView = ({
     <>
       {title}
       <section
-        className={`container card payment-error ${className}`}
+        className={`payment-error row-start-3 row-end-4 mt-6 mx-4 tablet:mt-0 ${className}`}
         data-testid="payment-error"
       >
-        <div className="wrapper">
-          <img id="error-icon" src={errorIcon} alt="error icon" />
+        <div className="wrapper mb-16">
+          <img className="mt-16 mb-10 mx-auto" src={errorIcon} alt="" />
           <div>
             <Localized
               id={getErrorMessage(error)}
               vars={{ productName, ...contentProps }}
             >
-              <p data-testid="error-payment-submission">
+              <p
+                className="py-0 px-7 desktop:px-24"
+                data-testid="error-payment-submission"
+              >
                 {getErrorMessage(error)}
               </p>
             </Localized>