refactor(payments): Update Checkout component to utilize Tailwind

packages/fxa-payments-server/src/components/PayPalButton/index.tsx

@@ -211,7 +211,7 @@ export const PaypalButton = ({
   };
 
   return (
-    <>
+    <div className="w-60 h-24 m-auto relative z-0">
       <div
         className={
           disabled
@@ -231,7 +231,7 @@ export const PaypalButton = ({
           />
         )}
       </div>
-    </>
+    </div>
   );
 };
 

packages/fxa-payments-server/src/components/PaymentMethodHeader/index.tsx

@@ -15,7 +15,7 @@ const returnPaymentMethodHeader = (type: PaymentMethodHeaderType) => {
     case PaymentMethodHeaderType.SecondStep:
       return (
         <Localized id="payment-method-header-second-step">
-          <h2 className="mt-10" data-testid="header-prefix">
+          <h2 className="step-header" data-testid="header-prefix">
             2. Choose your payment method
           </h2>
         </Localized>
@@ -24,7 +24,7 @@ const returnPaymentMethodHeader = (type: PaymentMethodHeaderType) => {
     default:
       return (
         <Localized id="payment-method-header">
-          <h2 className="mt-10" data-testid="header">
+          <h2 className="step-header" data-testid="header">
             Choose your payment method
           </h2>
         </Localized>

packages/fxa-payments-server/src/components/SubscriptionTitle/index.scss

@@ -2,7 +2,10 @@
 
 .subscription-title {
   background-color: #fff;
-  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);  text-align: center;
+  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);
+  padding-top: 20px;
+  text-align: center;
 
   .title {
     font-size: 22px;

packages/fxa-payments-server/src/index.scss

@@ -39,21 +39,11 @@ body {
   }
 }
 
-h3.billing-title {
-  color: #000;
-  display: flex;
-  font-size: 16px;
-  font-weight: 500;
-  justify-content: space-between;
-  margin: 13px 0;
-  text-align: left;
-
-  .card-details {
-    font-size: 14px;
+.card-details {
+  font-size: 14px;
 
-    .last4 {
-      margin-right: 25px;
-    }
+  .last4 {
+    margin-right: 25px;
   }
 }
 

packages/fxa-payments-server/src/routes/Checkout/index.scss

@@ -1,121 +1,41 @@
 @import '../../../../fxa-content-server/app/styles/variables';
 @import '../../../../fxa-content-server/app/styles/breakpoints';
 
-.subscription-title {
-  padding-top: 20px;
-}
-
-.subscription-create-footer {
-  margin-top: 40px;
-}
-
-.assurance-copy {
-  justify-content: left;
-}
-
-.step-header {
-  margin-top: 40px;
-}
-
-.subscription-title + .product-payment {
-  grid-row: 2/3;
-  border-top: 0;
-  border-radius: 0 0 8px 8px;
-  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);
-
+.checkout-payment {
   @include max-width('tablet') {
     grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
-    border-radius: 8px;
-  }
-
-  @media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
-    grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
-    border-radius: 8px;
-  }
-
-  @media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
-    grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
     border-radius: 8px;
-  }
-}
-
-.product-payment {
-  grid-row: 1/3;
-  background: $color-white;
-  box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
-  border-radius: 8px;
-  color: rgba(12, 12, 13, 0.8);
-  padding: 16px 16px 60px;
-
-  @include max-width('tablet') {
-    grid-row: 4/5;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
     grid-row: 4/5;
+    border-radius: 8px;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
     grid-row: 4/5;
+    border-radius: 8px;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @include min-width('desktop') {
     padding: 16px 48px 48px;
   }
+}
 
-  header {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-bottom: initial;
-    margin-top: 20px;
-    padding-bottom: 32px;
-    text-align: center;
-
-    @include min-width('desktop') {
-      margin-top: 32px;
-    }
-
-    p {
-      color: #6d6d6e;
-    }
-  }
-
-  .pay-with-heading {
-    color: rgb(115, 115, 115);
-    margin: 0 0 24px 0;
-    display: grid;
-    width: 100%;
-    align-items: center;
-    text-align: center;
-    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
-    grid-gap: 20px;
-    &:before,
-    &:after {
-      content: '';
-      border-top: 1px solid #e0e0e6;
-    }
-
-    @include max-width('tablet') {
-      margin-top: 16px;
-    }
+.pay-with-heading {
+  &:before,
+  &:after {
+    content: '';
+    border-top: 1px solid #e0e0e6;
   }
 
-  .subscription-create-pay-with-other .paypal-button {
-    width: 240px;
-    height: 96px;
-    margin: auto;
-    position: relative;
-    z-index: 0;
+  @include max-width('tablet') {
+    margin-top: 16px;
   }
 }

packages/fxa-payments-server/src/routes/Checkout/index.stories.tsx

@@ -1,54 +1,26 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import MockApp, {
   defaultAppContextValue,
 } from '../../../.storybook/components/MockApp';
-import { QueryParams } from '../../lib/types';
-import { APIError } from '../../lib/apiClient';
 import { SignInLayout } from '../../components/AppLayout';
-import { Checkout, CheckoutProps } from './index';
+import { APIError } from '../../lib/apiClient';
 import { PLANS } from '../../lib/mock-data';
+import { QueryParams } from '../../lib/types';
+import { Checkout, CheckoutProps } from './index';
+import { Meta } from '@storybook/react';
 
-function init() {
-  storiesOf('routes/Checkout', module)
-    .add('subscribing with a new account', () => (
-      <CheckoutRoute
-        routeProps={{
-          ...MOCK_PROPS,
-        }}
-      />
-    ))
-    .add('plans loading', () => (
-      <CheckoutRoute
-        routeProps={{
-          ...MOCK_PROPS,
-          plans: { loading: true, error: null, result: null },
-        }}
-      />
-    ))
-    .add('plans error', () => (
-      <CheckoutRoute
-        routeProps={{
-          ...MOCK_PROPS,
-          plans: {
-            loading: false,
-            result: null,
-            error: new APIError({
-              statusCode: 500,
-              message: 'Internal Server Error',
-            }),
-          },
-        }}
-      />
-    ));
-}
+export default {
+  title: 'routes/Checkout',
+  component: Checkout,
+} as Meta;
 
 type CheckoutRouteProps = {
   routeProps?: CheckoutProps;
   queryParams?: QueryParams;
   applyStubsToStripe?: (orig: stripe.Stripe) => stripe.Stripe;
 };
+
 const CheckoutRoute = ({
   routeProps = MOCK_PROPS,
   queryParams = defaultAppContextValue.queryParams,
@@ -77,4 +49,28 @@ const MOCK_PROPS: CheckoutProps = {
   fetchCheckoutRouteResources: action('fetchCheckoutRouteResources'),
 };
 
-init();
+const storyWithProps = (routeProps: CheckoutProps) => {
+  const story = () => (
+    <CheckoutRoute routeProps={routeProps} />
+  )
+  return story;
+};
+
+export const SubscribingWithANewAccount = storyWithProps({...MOCK_PROPS});
+
+export const PlansLoading = storyWithProps({
+  ...MOCK_PROPS,
+  plans: { loading: true, error: null, result: null },
+});
+
+export const PlansError = storyWithProps({
+  ...MOCK_PROPS,
+  plans: {
+    loading: false,
+    result: null,
+    error: new APIError({
+      statusCode: 500,
+      message: 'Internal Server Error',
+    }),
+  },
+});