diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index 88a79a7ad1c..6f4fde45af7 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -1,63 +1,126 @@ /** * External dependencies */ -import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components'; +import { Card, CardBody, CardFooter } from '@wordpress/components'; import { Text } from '@woocommerce/experimental'; import { createElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; +import interpolateComponents from '@automattic/interpolate-components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods'; -import WCPayLogo from '../../images/wcpay-logo'; - -export const WCPayCardHeader = ( { - logoWidth = 196, - logoHeight = 41, - children, -} ) => ( - - - { children } - -); +import WCPayHeroImage from '../../images/wcpay-hero-image'; +import WCPayBenefit1 from '../../images/wcpay-benefit-1'; +import WCPayBenefit2 from '../../images/wcpay-benefit-2'; +import WCPayBenefit3 from '../../images/wcpay-benefit-3'; export const WCPayCardBody = ( { - description, heading, + children, onLinkClick = () => {}, } ) => ( - { heading && { heading } } - - - { description } -
- - { __( 'Learn more', 'woocommerce' ) } - - - - +
+
+ { heading && ( + + { heading } + + ) } + + { interpolateComponents( { + mixedString: __( + 'By using WooCommerce Payments you agree to be bound by our {{tosLink /}} and acknowledge that you have read our {{privacyLink /}}', + 'woocommerce' + ), + components: { + tosLink: ( + + { __( 'Terms of Service', 'woocommerce' ) } + + ), + privacyLink: ( + + { __( 'Privacy Policy', 'woocommerce' ) } + + ), + }, + } ) } +
+ +
{ children }
+
+
+ +
+
); -export const WCPayCardFooter = ( { children } ) => ( - { children } +export const WCPayCardFooter = () => ( + + + ); export const WCPayCard = ( { children } ) => { - return { children }; + return ( + + { children } + + ); +}; + +export const WCPayBenefitCard = () => { + return ( + + +
+
+ + { __( + 'Offer your customers their preferred way to pay including debit and credit card payments, Apple Pay, Sofort, SEPA, iDeal and many more.', + 'woocommerce' + ) } +
+
+ + { __( + 'Sell to international markets and accept more than 135 currencies with local payment methods.', + 'woocommerce' + ) } +
+
+ + { __( + 'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.', + 'woocommerce' + ) } +
+
+ + + ); }; diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index c21e835ff68..21b1407c54c 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -1,6 +1,44 @@ .woocommerce-task-payments .woocommerce-task-payment-wcpay { + + .vstack, .hstack { + display: flex; + &.content-center { + justify-content: center; + } + + &.content-around { + justify-content: space-around; + } + + &.flex-1 { + flex: 1; + } + } + + .vstack { + flex-direction: column; + } + + .hstack { + flex-direction: row; + } + + .wcpay-hero-image { + margin-right: -32px; + margin-bottom: -28px; + } + + .woocommerce-task-payment-wcpay__heading { + letter-spacing: 0.6px; + max-width: 250px; + margin-right: $gap-small; + margin-bottom: $gap; + } + .woocommerce-task-payment-wcpay__description { - font-size: 16px; + font-size: 13px; + max-width: 325px; + margin-right: $gap-small; margin-bottom: $gap-large; } @@ -40,4 +78,15 @@ color: #40464d; } } + + .woocommerce-task-payment-wcpay__benefit { + svg { + margin: 0 auto; + } + max-width: 170px; + text-align: center; + font-size: 15px; + line-height: 24px; + letter-spacing: normal; + } } diff --git a/packages/js/onboarding/src/images/wcpay-benefit-1.js b/packages/js/onboarding/src/images/wcpay-benefit-1.js new file mode 100644 index 00000000000..f2e7ee9497b --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-1.js @@ -0,0 +1,134 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 141, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-2.js b/packages/js/onboarding/src/images/wcpay-benefit-2.js new file mode 100644 index 00000000000..3bcd83d6d99 --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-2.js @@ -0,0 +1,102 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 140, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-3.js b/packages/js/onboarding/src/images/wcpay-benefit-3.js new file mode 100644 index 00000000000..9d29102f3e8 --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-3.js @@ -0,0 +1,188 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 157, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-hero-image.js b/packages/js/onboarding/src/images/wcpay-hero-image.js new file mode 100644 index 00000000000..2d70f3d126d --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-hero-image.js @@ -0,0 +1,140 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 293, height = 275, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js index ee4ad87a861..786ee03c58b 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js @@ -3,15 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import interpolateComponents from '@automattic/interpolate-components'; -import { Link, Pill } from '@woocommerce/components'; +import { Link } from '@woocommerce/components'; import { recordEvent } from '@woocommerce/tracks'; -import { Text } from '@woocommerce/experimental'; import { WCPayCard, - WCPayCardHeader, WCPayCardFooter, WCPayCardBody, - SetupRequired, + WCPayBenefitCard, } from '@woocommerce/onboarding'; import { useDispatch } from '@wordpress/data'; @@ -41,7 +39,6 @@ const TosPrompt = () => export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { const { - description, id, needsSetup, installed, @@ -62,27 +59,14 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { } return ( - - - { installed && needsSetup ? ( - - ) : ( - { __( 'Recommended', 'woocommerce' ) } - ) } - - - { - recordEvent( 'tasklist_payment_learn_more' ); - } } - /> - - - <> - - - + <> + + { + recordEvent( 'tasklist_payment_learn_more' ); + } } + > { isRecommended={ true } isInstalled={ isInstalled } hasPlugins={ true } - setupButtonText={ __( 'Get started', 'woocommerce' ) } + setupButtonText={ + installed && needsSetup + ? __( 'Finish setup', 'woocommerce' ) + : __( 'Install', 'woocommerce' ) + } onSetupCallback={ onSetupCallback } /> - - - + + + + + ); }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss index 8e408b15e20..8298e321dbe 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss @@ -22,7 +22,6 @@ margin: 0; } - .components-card__footer { a.components-button { .gridicon {