From 90617e6d2821931aa06a0a218d911ee128bda5a8 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    | 66 ++++++++++++++-----
 .../src/components/PaymentErrorView/index.tsx | 24 +++++--
 2 files changed, 65 insertions(+), 25 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..b2ab7757a90 100644
--- a/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss
+++ b/packages/fxa-payments-server/src/components/PaymentErrorView/index.scss
@@ -2,21 +2,59 @@
 @import '../../../../fxa-content-server/app/styles/variables';
 @import '../../../../fxa-content-server/app/styles/breakpoints';
 
-.subscription-title + .payment-error {
-  @include checkout-title();
-}
-
 .payment-error {
-  @include checkout-view();
-  // override grid-row rule from checkout-view FXA-3237
+  box-shadow: 0 -1px white, 0 1px white, -2px 2px 2px -2px rgba(12, 12, 13, 0.1),
+    2px 2px 2px -2px rgba(12, 12, 13, 0.1);
+  color: rgba(12, 12, 13, 0.8);
+  padding: 16px 16px 60px;
   grid-row: 3/4;
-  margin-top: 0px;
 
-  .wrapper {
-    margin-bottom: 60px;
+  @include max-width("tablet") {
+    position: relative; // md:relative
+  }
+
+  @include min-width("tablet") {
+    grid-row: 2/3;
+    margin: 0 0 32px;
+  }
+
+  @include min-width("desktop") {
+    min-width: 60%;
+    padding: 0 48px 48px;
+  }
+
+  .options {
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .button {
+      align-items: center;
+      background: #0060df;
+      color: $color-white;
+      display: flex;
+      font-size: 15px;
+      font-weight: 600;
+      height: 48px;
+      justify-content: center;
+      margin: 32px 0;
+      text-decoration: none;
+      width: 100%;
+    }
 
+    .button:hover {
+      background: #003eaa;
+    }
+
+    .button:active {
+      background: #002275;
+    }
+  }
+
+  .wrapper {
     p {
-      line-height: 22px;
+      color: $grey-50;
 
       @include max-width('tablet') {
         padding: 0 30px;
@@ -28,14 +66,6 @@
     }
   }
 
-  .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.tsx b/packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
index 18dcbe179a7..b7679dbade3 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,24 +85,34 @@ export const PaymentErrorView = ({
     <>
       {title}
       <section
-        className={`container card payment-error ${className}`}
+        className={`container card payment-error bg-white border-t-0 rounded-b-lg mt-0 ${className}`}
         data-testid="payment-error"
       >
-        <div className="wrapper">
-          <img id="error-icon" src={errorIcon} alt="error icon" />
+        <div className="wrapper flex flex-col text-center mb-14">
+          <img
+            className="mt-16 ml-auto mb-10 mr-auto"
+            src={errorIcon}
+            alt="error icon"
+          />
           <div>
             <Localized
               id={getErrorMessage(error)}
               vars={{ productName, ...contentProps }}
             >
-              <p data-testid="error-payment-submission">
+              <p
+                className="m-0 leading-6"
+                data-testid="error-payment-submission"
+              >
                 {getErrorMessage(error)}
               </p>
             </Localized>
           </div>
         </div>
 
-        <div className="footer" data-testid="footer">
+        <div
+          className="footer border-0 flex flex-col justify-center pt-14"
+          data-testid="footer"
+        >
           {/* This error code means the subscription was created successfully, but
           there was an error loading the information on the success screen. In this
           case, we do not want a "Try again" or "Manage subscription" button. */}