From 0bd73526785f51dcaa5bd11f937f6963e36a53b3 Mon Sep 17 00:00:00 2001 From: Lisa Chan Date: Wed, 24 Aug 2022 10:13:30 -0400 Subject: [PATCH] refactor(payments): Update Checkout component to utilize Tailwind --- .../src/components/PayPalButton/index.tsx | 4 +- .../components/PaymentMethodHeader/index.tsx | 4 +- .../PlanDetails/images/Information.svg | 2 +- .../components/SubscriptionTitle/index.scss | 5 +- packages/fxa-payments-server/src/index.scss | 18 +- .../src/routes/Checkout/index.scss | 102 +------ .../src/routes/Checkout/index.stories.tsx | 72 +++-- .../src/routes/Checkout/index.tsx | 271 +++++++++--------- .../Product/SubscriptionCreate/index.scss | 22 -- .../Product/SubscriptionUpgrade/index.tsx | 8 +- .../Subscriptions/PaymentUpdateForm.tsx | 36 ++- .../src/styles/tailwind.css | 19 +- 12 files changed, 231 insertions(+), 332 deletions(-) diff --git a/packages/fxa-payments-server/src/components/PayPalButton/index.tsx b/packages/fxa-payments-server/src/components/PayPalButton/index.tsx index 5db1e3cc41d..3afad0edf98 100644 --- a/packages/fxa-payments-server/src/components/PayPalButton/index.tsx +++ b/packages/fxa-payments-server/src/components/PayPalButton/index.tsx @@ -211,7 +211,7 @@ export const PaypalButton = ({ }; return ( - <> +
)}
- +
); }; diff --git a/packages/fxa-payments-server/src/components/PaymentMethodHeader/index.tsx b/packages/fxa-payments-server/src/components/PaymentMethodHeader/index.tsx index 06642aa18d1..9e417f488d5 100644 --- a/packages/fxa-payments-server/src/components/PaymentMethodHeader/index.tsx +++ b/packages/fxa-payments-server/src/components/PaymentMethodHeader/index.tsx @@ -15,7 +15,7 @@ const returnPaymentMethodHeader = (type: PaymentMethodHeaderType) => { case PaymentMethodHeaderType.SecondStep: return ( -

+

2. Choose your payment method

@@ -24,7 +24,7 @@ const returnPaymentMethodHeader = (type: PaymentMethodHeaderType) => { default: return ( -

+

Choose your payment method

diff --git a/packages/fxa-payments-server/src/components/PlanDetails/images/Information.svg b/packages/fxa-payments-server/src/components/PlanDetails/images/Information.svg index 93bbef7b598..d550ecf970f 100644 --- a/packages/fxa-payments-server/src/components/PlanDetails/images/Information.svg +++ b/packages/fxa-payments-server/src/components/PlanDetails/images/Information.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/fxa-payments-server/src/components/SubscriptionTitle/index.scss b/packages/fxa-payments-server/src/components/SubscriptionTitle/index.scss index e16b046b414..b1c62840630 100644 --- a/packages/fxa-payments-server/src/components/SubscriptionTitle/index.scss +++ b/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; diff --git a/packages/fxa-payments-server/src/index.scss b/packages/fxa-payments-server/src/index.scss index 8ec5c92b69e..7c8ba405f0a 100644 --- a/packages/fxa-payments-server/src/index.scss +++ b/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; } } diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.scss b/packages/fxa-payments-server/src/routes/Checkout/index.scss index da956e9f183..d0119b90f33 100644 --- a/packages/fxa-payments-server/src/routes/Checkout/index.scss +++ b/packages/fxa-payments-server/src/routes/Checkout/index.scss @@ -1,70 +1,24 @@ @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%; } @@ -72,50 +26,16 @@ @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; } } diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.stories.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.stories.tsx index 782defc1c2c..d6ed4b4d75d 100644 --- a/packages/fxa-payments-server/src/routes/Checkout/index.stories.tsx +++ b/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', () => ( - - )) - .add('plans loading', () => ( - - )) - .add('plans 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 = () => ( + + ) + 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', + }), + }, +}); diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.tsx index 1d9cb81d64a..1f4a15e0cd3 100644 --- a/packages/fxa-payments-server/src/routes/Checkout/index.tsx +++ b/packages/fxa-payments-server/src/routes/Checkout/index.tsx @@ -312,155 +312,156 @@ export const Checkout = ({ return ( <>
+
{newsletterSignupError && } - { - setSubscriptionError(undefined); - setTransactionInProgress(false); - }} - className={classNames({ - hidden: !subscriptionError, - })} - plan={selectedPlan} - showFxaLegalFooterLinks={true} - /> + + { subscriptionError && + { + setSubscriptionError(undefined); + setTransactionInProgress(false); + }} + plan={selectedPlan} + showFxaLegalFooterLinks={true} + /> + } + - -
- -

1. Create a Firefox account

- - - toggleSubscribeToNewsletter(!subscribeToNewsletter) - } - /> -
- setCheckboxSet(!checkboxSet)} - type={PaymentMethodHeaderType.SecondStep} - /> - <> - {paypalScriptLoaded && ( - <> -
- Loading...
}> -
- -
- -
+ { (transactionInProgress || subscriptionError) + ? null + : ( + <> + + +
+ +

1. Create a Firefox account

+ + + + toggleSubscribeToNewsletter(!subscribeToNewsletter) + } + /> + +
+ + setCheckboxSet(!checkboxSet)} + type={PaymentMethodHeaderType.SecondStep} + /> + + <> + {paypalScriptLoaded && ( + <> +
+ Loading...
}> + + +
+ + <> + +

Or pay with card

+ + + + + )} + + {!paypalScriptLoaded && ( + <> + +

Pay with card

+ + + + + )} + +
- -

Or pay with card

+ +
Enter your card information
 - + +
- - )} - {!paypalScriptLoaded && ( -
- -

Pay with card

- - -
- )} - -
-

- - Enter your card information - -

- -
-
- <> - - +
+ + + +
+
-
- + ) + } { (transactionInProgress && isMobile) ? null diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss index 5fd5e2e00ea..8c15ec69d27 100644 --- a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss +++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss @@ -77,14 +77,6 @@ } .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: ''; @@ -95,18 +87,4 @@ margin-top: 16px; } } - - .subscription-create-pay-with-other .paypal-button { - width: 240px; - height: 48px + 48; - margin: auto; - position: relative; - z-index: 0; - } - - .billing-title { - font-size: 15px; - font-weight: 600; - margin-bottom: 20px; - } } diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx index 25d420ee61b..3e653c786fe 100644 --- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx +++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx @@ -136,11 +136,9 @@ export const SubscriptionUpgrade = ({ ) : null}
-

- - Payment information - -

+ + Payment information +
diff --git a/packages/fxa-payments-server/src/routes/Subscriptions/PaymentUpdateForm.tsx b/packages/fxa-payments-server/src/routes/Subscriptions/PaymentUpdateForm.tsx index cfcd241d09c..be969759ebb 100644 --- a/packages/fxa-payments-server/src/routes/Subscriptions/PaymentUpdateForm.tsx +++ b/packages/fxa-payments-server/src/routes/Subscriptions/PaymentUpdateForm.tsx @@ -258,32 +258,28 @@ export const PaymentUpdateForm = ({ {paypalScriptLoaded && ( Loading...}> -
- -
+ )} )}
-

- - Payment information - -

+ + Payment information +
{!updateRevealed ? (
diff --git a/packages/fxa-payments-server/src/styles/tailwind.css b/packages/fxa-payments-server/src/styles/tailwind.css index 477e1ba2d27..ea5f34ade3a 100644 --- a/packages/fxa-payments-server/src/styles/tailwind.css +++ b/packages/fxa-payments-server/src/styles/tailwind.css @@ -15,6 +15,10 @@ @tailwind components; @tailwind utilities; +.label-title { + @apply font-semibold my-3 text-base text-grey-600 text-left; +} + /* borders */ /* after '@tailwind base' has been enabled for payments remove border-0 border-solid */ .row-divider-grey-200 { @@ -38,6 +42,19 @@ @apply mt-5; } +/* shared styles used in Checkout and SubscriptionCreate*/ +.pay-with-heading { + @apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mt-0 mx-0 mb-6 text-center text-grey-400 w-full; +} + +.subscription-create-footer { + @apply mt-10; +} + +.step-header { + @apply mt-10 text-lg; +} + /* shared styles used in PlanDetails and PlanUpgradeDetails */ .accordion-btn { @apply bg-transparent border-transparent cursor-pointer text-blue-500 leading-5 my-2 outline-none py-2 pr-2 pl-6 relative w-auto h-auto focus:border focus:border-solid focus:border-blue-400 focus:py-2 focus:pr-4 focus:pl-10 focus:shadow-none; @@ -48,7 +65,7 @@ } .coupon-info { - @apply flex items-center justify-center gap-2 pt-6 text-sm text-green-700; + @apply flex items-center justify-center gap-2 pt-6 font-medium text-sm text-green-900; } .plan-details-component-card {