refactor(payments): update PaymentErrorView component to utilize Tail…

…wind

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

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;
-  }
 }

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');

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();

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>