From 7add4dca889b65728b66508f19e793978517f851 Mon Sep 17 00:00:00 2001 From: Chris Aprea Date: Thu, 5 May 2022 15:04:27 +1000 Subject: [PATCH 1/3] Implement the new subscriptions page design --- .../client/subscriptions/cards/amex.js | 27 ++ .../client/subscriptions/cards/diners.js | 255 ++++++++++++++++++ .../client/subscriptions/cards/discover.js | 47 ++++ .../client/subscriptions/cards/jcb.js | 39 +++ .../client/subscriptions/cards/maestro.js | 67 +++++ .../client/subscriptions/cards/mastercard.js | 39 +++ .../client/subscriptions/cards/unionpay.js | 111 ++++++++ .../client/subscriptions/cards/visa.js | 41 +++ .../client/subscriptions/index.tsx | 194 ++++++++++--- .../client/subscriptions/style.scss | 126 +++++++-- .../subscriptions-empty-state-unconnected.svg | 42 --- 11 files changed, 881 insertions(+), 107 deletions(-) create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/amex.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/diners.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/discover.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/jcb.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/maestro.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/mastercard.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/unionpay.js create mode 100644 plugins/woocommerce-admin/client/subscriptions/cards/visa.js delete mode 100644 plugins/woocommerce-admin/client/subscriptions/subscriptions-empty-state-unconnected.svg diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/amex.js b/plugins/woocommerce-admin/client/subscriptions/cards/amex.js new file mode 100644 index 00000000000..1ebef0bdda9 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/amex.js @@ -0,0 +1,27 @@ +export default () => ( + /* eslint-disable */ + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/diners.js b/plugins/woocommerce-admin/client/subscriptions/cards/diners.js new file mode 100644 index 00000000000..6a7e03f4208 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/diners.js @@ -0,0 +1,255 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/discover.js b/plugins/woocommerce-admin/client/subscriptions/cards/discover.js new file mode 100644 index 00000000000..42439da3e86 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/discover.js @@ -0,0 +1,47 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/jcb.js b/plugins/woocommerce-admin/client/subscriptions/cards/jcb.js new file mode 100644 index 00000000000..aac8d382666 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/jcb.js @@ -0,0 +1,39 @@ +export default () => ( + /* eslint-disable */ + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/maestro.js b/plugins/woocommerce-admin/client/subscriptions/cards/maestro.js new file mode 100644 index 00000000000..a8b580579f4 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/maestro.js @@ -0,0 +1,67 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/mastercard.js b/plugins/woocommerce-admin/client/subscriptions/cards/mastercard.js new file mode 100644 index 00000000000..6830585f03b --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/mastercard.js @@ -0,0 +1,39 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/unionpay.js b/plugins/woocommerce-admin/client/subscriptions/cards/unionpay.js new file mode 100644 index 00000000000..3f364be6948 --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/unionpay.js @@ -0,0 +1,111 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/cards/visa.js b/plugins/woocommerce-admin/client/subscriptions/cards/visa.js new file mode 100644 index 00000000000..2634d362b8a --- /dev/null +++ b/plugins/woocommerce-admin/client/subscriptions/cards/visa.js @@ -0,0 +1,41 @@ +export default () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/subscriptions/index.tsx b/plugins/woocommerce-admin/client/subscriptions/index.tsx index 2df5a4b6965..3a923f09dcc 100644 --- a/plugins/woocommerce-admin/client/subscriptions/index.tsx +++ b/plugins/woocommerce-admin/client/subscriptions/index.tsx @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { createInterpolateElement, useState } from '@wordpress/element'; -import { Button, Notice } from '@wordpress/components'; +import { Button, Card, CardBody, Notice } from '@wordpress/components'; import { PLUGINS_STORE_NAME } from '@woocommerce/data'; import { useDispatch } from '@wordpress/data'; import { recordEvent } from '@woocommerce/tracks'; @@ -11,9 +11,14 @@ import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies */ -import unconnectedImage from './subscriptions-empty-state-unconnected.svg'; +import Visa from './cards/visa.js'; +import MasterCard from './cards/mastercard.js'; +import Amex from './cards/amex.js'; +import DinersClub from './cards/diners.js'; +import Discover from './cards/discover.js'; +import JCB from './cards/jcb.js'; +import UnionPay from './cards/unionpay.js'; import './style.scss'; - declare global { interface Window { wcWcpaySubscriptions: { @@ -28,11 +33,9 @@ const { onboardingUrl, } = window.wcWcpaySubscriptions; -const ErrorNotice = ( { isError }: { isError: boolean } ) => { - if ( ! isError ) { - return null; - } +type setHasErrorFunction = React.Dispatch< React.SetStateAction< boolean > >; +const ErrorNotice = () => { return ( { ); }; -const TOS = () => ( -

- { createInterpolateElement( - __( - 'By clicking "Get started", you agree to the Terms of Service', - 'woocommerce' - ), - { - a: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - } - ) } -

-); +type GetStartedButtonProps = { + setHasError: setHasErrorFunction; +}; -// eslint-disable-next-line @typescript-eslint/ban-types -const GetStartedButton = ( { setIsError }: { setIsError: Function } ) => { +const GetStartedButton: React.FC< GetStartedButtonProps > = ( { + setHasError, +} ) => { const [ isGettingStarted, setIsGettingStarted ] = useState( false ); const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME ); @@ -109,7 +96,7 @@ const GetStartedButton = ( { setIsError }: { setIsError: Function } ) => { } ) .catch( () => { setIsGettingStarted( false ); - setIsError( true ); + setHasError( true ); } ); } } > @@ -119,22 +106,151 @@ const GetStartedButton = ( { setIsError }: { setIsError: Function } ) => { ); }; -const SubscriptionsPage = () => { - const [ isError, setIsError ] = useState( false ); +const StepNumber: React.FC = ( { children } ) => ( + + { children } + +); +const TermsOfService = () => ( + + { createInterpolateElement( + __( + 'By clicking “Get started”, the WooCommerce Payments plugin will be installed and you agree to the Terms of Service', + 'woocommerce' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + } + ) } + +); + +type MainContentProps = { + setHasError: setHasErrorFunction; +}; + +const MainContent: React.FC< MainContentProps > = ( { setHasError } ) => { return ( -
- - -

+ <> +

+ { __( 'Start selling subscriptions today', 'woocommerce' ) } +

+

{ __( - 'Track recurring revenue and manage active subscriptions directly from your store’s dashboard — powered by WooCommerce Payments.', + 'With WooCommerce Payments, you can sell subscriptions with no setup costs or monthly fees. Create subscription products, track recurring revenue, and manages subscriptions directly from your store’s dashboard.', 'woocommerce' ) } +
+ + { __( 'Learn more', 'woocommerce' ) } +

- - + +

{ __( 'Accepted payment methods', 'woocommerce' ) }

+ +
+ + + + + + + +
+ +
+ +

+ +

+ + + + ); +}; + +const OnboardingSteps = () => ( + <> +

+ { __( + 'You’re only steps away from selling subscriptions', + 'woocommerce' + ) } +

+
+
+ 1 +

+ { __( 'Create and connect your account', 'woocommerce' ) } +

+

+ { __( + 'To ensure safe and secure transactions, a WordPress.com account is required.', + 'woocommerce' + ) } +

+
+
+ 2 +

+ { __( 'Provide a few business details', 'woocommerce' ) } +

+

+ { __( + 'Next we’ll ask you to verify your business and payment details to enable deposits.', + 'woocommerce' + ) } +

+
+
+ 3 +

{ __( 'Create subscriptions', 'woocommerce' ) }

+

+ { __( + 'Finally, publish subscription products to offer on your store.', + 'woocommerce' + ) } +

+
+ +); + +const SubscriptionsPage = () => { + const [ hasError, setHasError ] = useState( false ); + + return ( + <> + { hasError && } +
+
+ + +
+ +
+ + + + + + + +
+
+ ); }; diff --git a/plugins/woocommerce-admin/client/subscriptions/style.scss b/plugins/woocommerce-admin/client/subscriptions/style.scss index f03a7f32c68..4e979e1f6b7 100644 --- a/plugins/woocommerce-admin/client/subscriptions/style.scss +++ b/plugins/woocommerce-admin/client/subscriptions/style.scss @@ -1,35 +1,109 @@ -.wcpay-empty-subscriptions__container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 48px 0; - position: static; - height: 344px; - left: calc(50% - 1240px / 2); - top: 271px; - flex: none; - order: 1; - flex-grow: 0; - margin: 0; - text-align: center; +$max-width: 680px; - .wcpay-empty-subscriptions__description { - max-width: 535px; - margin: 15px 0; +.wcpay-empty-subscriptions__error { + margin: 0 auto 24px; + max-width: $max-width; +} + +.subscriptions-page { + margin: 0 auto; + max-width: $max-width; + + .components-card { + margin-bottom: 24px; } - .wcpay-empty-subscriptions__tos { - font-size: 11px; - color: #757575; - margin-bottom: 6px; + .wcpay-empty-subscriptions-page-payment-methods { + svg { + display: inline-block; + height: 35px; + width: 52px; + margin-right: 0.5em; + margin-bottom: 0.5em; + } } - .wcpay-empty-subscriptions__button_container { - margin: 8px 0; + .wcpay-empty-subscriptions-page-terms-of-service { + display: block; + margin: 0.5em 0; } - .wcpay-empty-subscriptions__error { - margin: 15px 0; + .subscriptions-page-onboarding-steps { + @include breakpoint( '>600px' ) { + display: flex; + flex-direction: row; + } + + .subscriptions-page-onboarding-steps-item { + margin-top: 30px; + + @include breakpoint( '>600px' ) { + margin-top: 0; + margin-right: 80px; + } + } + } + + .wcpay-empty-subscriptions-page-step-number { + background-color: $studio-woocommerce-purple-50; + color: $white; + font-size: 20px; + border-radius: 50%; + min-height: 32px; + min-width: 32px; + display: inline-block; + text-align: center; + line-height: 32px; + } + + .subscriptions { + h2 { + font-size: 20px; + font-weight: 300; + margin-top: 0; + } + + h3 { + font-size: 1em; + } + + p { + color: #3c434a; + } + + .subscriptions__card { + .components-card__body { + padding: 0; + + .content { + padding: 24px; + + a { + text-decoration: none; + } + + hr { + position: relative; + left: -24px; + width: calc( 100% + 48px ); + } + } + } + } + + .subscriptions__action { + margin-top: 16px; + margin-bottom: 0; + } + + .subscriptions__steps { + .components-card__body { + padding: 24px; + } + + h2 { + margin-top: 0; + } + } } } diff --git a/plugins/woocommerce-admin/client/subscriptions/subscriptions-empty-state-unconnected.svg b/plugins/woocommerce-admin/client/subscriptions/subscriptions-empty-state-unconnected.svg deleted file mode 100644 index 8823ffa6132..00000000000 --- a/plugins/woocommerce-admin/client/subscriptions/subscriptions-empty-state-unconnected.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From b223ed27f6b59303184a0df16e968b0273288ec7 Mon Sep 17 00:00:00 2001 From: Chris Aprea Date: Mon, 9 May 2022 10:47:06 +1000 Subject: [PATCH 2/3] Fix typo. --- plugins/woocommerce-admin/client/subscriptions/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/subscriptions/index.tsx b/plugins/woocommerce-admin/client/subscriptions/index.tsx index 3a923f09dcc..82e6e56aa7b 100644 --- a/plugins/woocommerce-admin/client/subscriptions/index.tsx +++ b/plugins/woocommerce-admin/client/subscriptions/index.tsx @@ -145,7 +145,7 @@ const MainContent: React.FC< MainContentProps > = ( { setHasError } ) => {

{ __( - 'With WooCommerce Payments, you can sell subscriptions with no setup costs or monthly fees. Create subscription products, track recurring revenue, and manages subscriptions directly from your store’s dashboard.', + 'With WooCommerce Payments, you can sell subscriptions with no setup costs or monthly fees. Create subscription products, track recurring revenue, and manage subscribers directly from your store’s dashboard.', 'woocommerce' ) }
From f34fcab0400db34393865071c6feee14530573d2 Mon Sep 17 00:00:00 2001 From: Chris Aprea Date: Mon, 9 May 2022 10:55:04 +1000 Subject: [PATCH 3/3] Fix font weight. --- plugins/woocommerce-admin/client/subscriptions/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/subscriptions/style.scss b/plugins/woocommerce-admin/client/subscriptions/style.scss index 4e979e1f6b7..b9eaa4a2ba9 100644 --- a/plugins/woocommerce-admin/client/subscriptions/style.scss +++ b/plugins/woocommerce-admin/client/subscriptions/style.scss @@ -59,7 +59,7 @@ $max-width: 680px; .subscriptions { h2 { font-size: 20px; - font-weight: 300; + font-weight: 400; margin-top: 0; }