From ad3b7cdb3fa075a40ae84cd0dfdedac94f43c6cf Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Tue, 10 Mar 2020 00:16:21 +0100 Subject: [PATCH] Onboarding: Redesign plugin benefits screen (https://github.com/woocommerce/woocommerce-admin/pull/3764) * Remove header and header logo for non-stepper pages * Add new WCS and Jetpack logo svg * Update benefits card layout * Update benefits list descriptions and images * Add benefit card styling * Update plugin actions and notice styling * Remove TOS notice * Fix styling for benefits on mobile * Update plugin name strings * Fix grid columns and alignment * Update button text to start plugin installation --- .../dashboard/profile-wizard/header-logo.js | 144 -------- .../client/dashboard/profile-wizard/header.js | 15 +- .../steps/benefits/images/card.js | 38 -- .../steps/benefits/images/flash_on.js | 24 -- .../steps/benefits/images/local_atm.js | 32 -- .../steps/benefits/images/management.js | 128 +++++++ .../steps/benefits/images/phone_android.js | 30 -- .../steps/benefits/images/print.js | 37 -- .../steps/benefits/images/sales_tax.js | 348 ++++++++++++++++++ .../steps/benefits/images/security.js | 30 -- .../steps/benefits/images/shipping_labels.js | 163 ++++++++ .../steps/benefits/images/speed.js | 275 ++++++++++++++ .../profile-wizard/steps/benefits/index.js | 203 ++++------ .../profile-wizard/steps/benefits/logo.js | 71 ++++ .../dashboard/profile-wizard/style.scss | 113 ++++-- 15 files changed, 1144 insertions(+), 507 deletions(-) delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/card.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/flash_on.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/local_atm.js create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/management.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/phone_android.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/print.js create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/sales_tax.js delete mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/security.js create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/shipping_labels.js create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/speed.js create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/logo.js diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js deleted file mode 100644 index d5fba57eb54..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js +++ /dev/null @@ -1,144 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import classNames from 'classnames'; - -/** - * Internal dependencies - */ -import withSelect from 'wc-api/with-select'; - -class HeaderLogo extends Component { - render() { - const { isJetpackConnected } = this.props; - - const ariaLabel = ! isJetpackConnected - ? __( 'Jetpack + WooCommerce', 'woocommerce-admin' ) - : __( 'WooCommerce', 'woocommerce-admin' ); - const classes = classNames( 'woocommerce-profile-wizard__header-logo', { - 'woocommerce-profile-wizard__header-logo-with-jetpack': ! isJetpackConnected, - } ); - - return ( - - - - - { ! isJetpackConnected && ( - - - - - - - - ) } - - - - - - - { ! isJetpackConnected && ( - - - - - - ) } - - - - - ); - } -} - -export default compose( - withSelect( ( select ) => { - const { isJetpackConnected } = select( 'wc-api' ); - return { - isJetpackConnected: isJetpackConnected(), - }; - } ) -)( HeaderLogo ); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js index d1e974f3f9d..e0d2cee6eb0 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js @@ -3,7 +3,6 @@ */ import { Component } from '@wordpress/element'; import { filter } from 'lodash'; -import classnames from 'classnames'; /** * WooCommerce dependencies @@ -14,7 +13,6 @@ import { updateQueryString } from '@woocommerce/navigation'; * Internal dependencies */ import { Stepper } from '@woocommerce/components'; -import HeaderLogo from './header-logo'; export default class ProfileWizardHeader extends Component { renderStepper() { @@ -44,13 +42,14 @@ export default class ProfileWizardHeader extends Component { const currentStep = this.props.steps.find( ( s ) => s.key === this.props.currentStep ); - const showStepper = ! currentStep || ! currentStep.label ? false : true; - const classes = classnames( 'woocommerce-profile-wizard__header', { - 'is-stepper': showStepper, - } ); + + if ( ! currentStep || ! currentStep.label ) { + return null; + } + return ( -
- { showStepper ? this.renderStepper() : } +
+ { this.renderStepper() }
); } diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/card.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/card.js deleted file mode 100644 index ddac9e4bbf4..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/card.js +++ /dev/null @@ -1,38 +0,0 @@ -/*eslint-disable max-len*/ - -export default () => ( - - - - - - - - - - - - -); - -/*eslint-enable max-len*/ diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/flash_on.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/flash_on.js deleted file mode 100644 index f4226685157..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/flash_on.js +++ /dev/null @@ -1,24 +0,0 @@ -export default () => ( - - - - - - - - -); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/local_atm.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/local_atm.js deleted file mode 100644 index a547c9d5b25..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/local_atm.js +++ /dev/null @@ -1,32 +0,0 @@ -export default () => ( - - - - - - - - -); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/management.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/management.js new file mode 100644 index 00000000000..d2e7fc27ba6 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/management.js @@ -0,0 +1,128 @@ +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/phone_android.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/phone_android.js deleted file mode 100644 index 668bd024c9c..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/phone_android.js +++ /dev/null @@ -1,30 +0,0 @@ -export default () => ( - - - - - - - - -); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/print.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/print.js deleted file mode 100644 index d276b54c2c1..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/print.js +++ /dev/null @@ -1,37 +0,0 @@ -/*eslint-disable max-len*/ - -export default () => ( - - - - - - - - - - - - -); - -/*eslint-enable max-len*/ diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/sales_tax.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/sales_tax.js new file mode 100644 index 00000000000..06376ce7ea4 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/sales_tax.js @@ -0,0 +1,348 @@ +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/security.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/security.js deleted file mode 100644 index 1c19fa9a451..00000000000 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/security.js +++ /dev/null @@ -1,30 +0,0 @@ -export default () => ( - - - - - - - - -); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/shipping_labels.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/shipping_labels.js new file mode 100644 index 00000000000..1ab38424a02 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/shipping_labels.js @@ -0,0 +1,163 @@ +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/speed.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/speed.js new file mode 100644 index 00000000000..c3a1b402b7e --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/images/speed.js @@ -0,0 +1,275 @@ +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/index.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/index.js index 94c1600c8c1..0258a728dbe 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/index.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/index.js @@ -1,28 +1,26 @@ /** * External dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { compose } from '@wordpress/compose'; -import interpolateComponents from 'interpolate-components'; import { withDispatch } from '@wordpress/data'; -import { filter, get } from 'lodash'; +import { filter } from 'lodash'; /** * WooCommerce dependencies */ -import { Card, H, Link } from '@woocommerce/components'; +import { Card, H } from '@woocommerce/components'; /** * Internal dependencies */ -import CardIcon from './images/card'; -import SecurityIcon from './images/security'; -import SalesTaxIcon from './images/local_atm'; -import SpeedIcon from './images/flash_on'; -import MobileAppIcon from './images/phone_android'; -import PrintIcon from './images/print'; +import Logo from './logo'; +import ManagementIcon from './images/management'; +import SalesTaxIcon from './images/sales_tax'; +import ShippingLabels from './images/shipping_labels'; +import SpeedIcon from './images/speed'; import withSelect from 'wc-api/with-select'; import { recordEvent } from 'lib/tracks'; import { pluginNames } from 'wc-api/onboarding/constants'; @@ -101,10 +99,13 @@ class Benefits extends Component { const { description, icon, title } = benefit; return ( -
+
{ icon } -
- +
+ { title }

{ description }

@@ -114,38 +115,11 @@ class Benefits extends Component { } getBenefits() { - const { isJetpackActive, isWcsActive, tosAccepted } = this.props; + const { isJetpackActive, isWcsActive } = this.props; return [ { - title: __( 'Security', 'woocommerce-admin' ), - icon: , - description: __( - 'Jetpack automatically blocks brute force attacks to protect your store from unauthorized access.', - 'woocommerce-admin' - ), - visible: ! isJetpackActive, - }, - { - title: __( 'Sales Tax', 'woocommerce-admin' ), - icon: , - description: __( - 'With WooCommerce Services we ensure that the correct rate of tax is charged on all of your orders.', - 'woocommerce-admin' - ), - visible: ! isWcsActive || ! tosAccepted, - }, - { - title: __( 'Speed', 'woocommerce-admin' ), - icon: , - description: __( - 'Cache your images and static files on our own powerful global network of servers and speed up your site.', - 'woocommerce-admin' - ), - visible: ! isJetpackActive, - }, - { - title: __( 'Mobile App', 'woocommerce-admin' ), - icon: , + title: __( 'Store management on the go', 'woocommerce-admin' ), + icon: , description: __( 'Your store in your pocket. Manage orders, receive sales notifications, and more. Only with a Jetpack connection.', 'woocommerce-admin' @@ -153,25 +127,34 @@ class Benefits extends Component { visible: ! isJetpackActive, }, { - title: __( - 'Print your own shipping labels', - 'woocommerce-admin' - ), - icon: , + title: __( 'Automated sales taxes', 'woocommerce-admin' ), + icon: , description: __( - 'Save time at the Post Office by printing USPS shipping labels at home.', + 'Ensure that the correct rate of tax is charged on all of your orders automatically, and print shipping labels at home.', 'woocommerce-admin' ), - visible: isJetpackActive || ! tosAccepted, + visible: ! isWcsActive || ! isJetpackActive, }, { - title: __( 'Simple payment setup', 'woocommerce-admin' ), - icon: , + title: __( 'Improved speed & security', 'woocommerce-admin' ), + icon: , description: __( - 'WooCommerce Services enables us to provision Stripe and Paypal accounts quickly and easily for you.', + 'Automatically block brute force attacks and speed up your store using our powerful, global server network to cache images.', 'woocommerce-admin' ), - visible: isJetpackActive || ! tosAccepted, + visible: ! isJetpackActive, + }, + { + title: __( + 'Print shipping labels at home', + 'woocommerce-admin' + ), + icon: , + description: __( + 'Save time at the post office by printing shipping labels for your orders at home.', + 'woocommerce-admin' + ), + visible: isJetpackActive && ! isWcsActive, }, ]; } @@ -200,87 +183,55 @@ class Benefits extends Component { } const pluginNamesString = pluginsToInstall .map( ( pluginSlug ) => pluginNames[ pluginSlug ] ) - .join( ' & ' ); + .join( ' ' + __( 'and', 'woocommerce-admin' ) + ' ' ); return ( - + + - { __( - 'Start enhancing your WooCommerce store', - 'woocommerce-admin' + { sprintf( + __( 'Enhance your store with %s', 'woocommerce-admin' ), + pluginNamesString ) } -

- { interpolateComponents( { - mixedString: sprintf( - __( - 'Simplify and enhance the setup of your store with the free features and benefits offered by {{strong}}%s{{/strong}}.', - 'woocommerce-admin' - ), - pluginNamesString - ), - components: { - strong: , - }, - } ) } -

- - - { this.renderBenefits() } - -

- { interpolateComponents( { - mixedString: __( - 'By connecting your site you agree to our fascinating {{tosLink}}Terms of Service{{/tosLink}} and to ' + - '{{detailsLink}}share details{{/detailsLink}} with WordPress.com. ', - 'woocommerce-admin' - ), - components: { - tosLink: ( - - ), - detailsLink: ( - - ), - }, - } ) } -

+ { this.renderBenefits() } +
- + +
- { pluginsToInstall.length !== 0 && ( -

- -

- ) } - +

+ { sprintf( + __( + '%s %s will be installed & activated for free.', + 'woocommerce-admin' + ), + pluginNamesString, + _n( + 'plugin', + 'plugins', + pluginsToInstall.length, + 'woocommerce-admin' + ) + ) } +

+ ); } } @@ -290,20 +241,11 @@ export default compose( const { getProfileItemsError, getActivePlugins, - getOptions, getProfileItems, isGetProfileItemsRequesting, } = select( 'wc-api' ); const isProfileItemsError = Boolean( getProfileItemsError() ); - - const options = getOptions( [ - 'woocommerce_setup_jetpack_opted_in', - 'wc_connect_options', - ] ); - const tosAccepted = get( options, [ 'wc_connect_options' ], {} ) - .tos_accepted; - const activePlugins = getActivePlugins(); const profileItems = getProfileItems(); const isJetpackActive = activePlugins.includes( 'jetpack' ); @@ -313,7 +255,6 @@ export default compose( isJetpackActive, isProfileItemsError, isWcsActive, - tosAccepted, profileItems, isRequesting: isGetProfileItemsRequesting(), }; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/logo.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/logo.js new file mode 100644 index 00000000000..d5c3817e306 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/benefits/logo.js @@ -0,0 +1,71 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; + +class Logo extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + ); + } +} + +export default Logo; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss index 896d9a73ae3..1bbf88e05db 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss @@ -5,13 +5,6 @@ color: $studio-pink-50; } - .woocommerce-profile-wizard__skip.components-button.is-link { - color: $studio-gray-60; - margin-top: 0; - margin-bottom: 0; - font-weight: normal; - } - .woocommerce-profile-wizard__continue { line-height: 32px; } @@ -44,19 +37,6 @@ } } - .woocommerce-profile-wizard__container { - .woocommerce-profile-wizard__tos { - font-size: 12px; - margin-top: 0; - margin-bottom: $gap-large; - padding: $gap-smaller; - - a { - color: $studio-gray-60; - } - } - } - .woocommerce-profile-wizard__header { height: 56px; border-bottom: 1px solid $studio-gray-5; @@ -64,18 +44,6 @@ align-items: center; justify-content: center; background: $studio-white; - - svg.woocommerce-profile-wizard__header-logo > g { - transform: translateX(12%); - } - - svg.woocommerce-profile-wizard__header-logo-with-jetpack > g { - transform: translateX(25%); - } - - .woocommerce-profile-wizard__plus { - stroke: $studio-gray-80; - } } .woocommerce-profile-wizard__header-title { @@ -184,6 +152,50 @@ } } + .woocommerce-profile-wizard__benefits { + display: grid; + grid-gap: $gap; + grid-auto-columns: 1fr; + grid-auto-flow: column; + + @include breakpoint( '<960px' ) { + justify-items: center; + grid-auto-flow: row; + } + } + + .woocommerce-profile-wizard__benefits-logo { + display: block; + margin: 0 auto; + } + + .woocommerce-profile-wizard__benefit-card { + display: flex; + flex-direction: column; + background: $studio-gray-0; + width: 100%; + max-width: 295px; + overflow: hidden; + text-align: left; + + .woocommerce-profile-wizard__benefit-card-title { + font-size: 16px; + font-weight: 600; + margin-top: 0; + margin-bottom: $gap-smaller; + } + + .woocommerce-profile-wizard__benefit-card-content { + padding: #{$gap-small * 2} #{$gap * 2} #{$gap * 2} #{$gap * 2}; + + p { + padding: 0; + margin: 0; + font-size: 14px; + } + } + } + .woocommerce-profile-wizard__business-extension { background: #f6f6f6; padding-right: 4px; @@ -348,6 +360,41 @@ } } +.woocommerce-profile-wizard__benefits-card.woocommerce-card { + display: inline-block; + max-width: 100%; + text-align: center; + + .woocommerce-card__body { + padding: $gap-large * 2; + } + + .woocommerce-profile-wizard__header-title { + margin-top: $gap-large; + margin-bottom: $gap-large; + } + + .woocommerce-profile-wizard__card-actions { + margin-top: $gap; + display: inline-flex; + + .components-button { + width: auto; + + &:first-child { + margin-right: $gap; + } + } + } + + .woocommerce-profile-wizard__benefits-install-notice { + margin-top: $gap-large; + margin-bottom: 0; + font-size: 14px; + color: $studio-gray-40; + } +} + .woocommerce-profile-wizard__plugins-card { .woocommerce-profile-wizard__plugins-actions { text-align: left; @@ -363,7 +410,7 @@ } } -.woocommerce-profile-wizard__header.is-stepper { +.woocommerce-profile-wizard__header { svg > g { transform: initial; }