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
This commit is contained in:
Joshua T Flowers
GitHub
parent
525718c3ba
commit
ad3b7cdb3f
|
|
@ -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 (
|
||||
<svg
|
||||
role="img"
|
||||
aria-label={ ariaLabel }
|
||||
width="200"
|
||||
viewBox="0 0 1270 170"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={ classes }
|
||||
>
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
{ ! isJetpackConnected && (
|
||||
<g
|
||||
transform="translate(219 35.082353)"
|
||||
className="woocommerce-profile-wizard__plus"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
height="72"
|
||||
width="72"
|
||||
fill="#2B2D2F"
|
||||
>
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 11h-5V6h-2v5H6v2h5v5h2v-5h5" />
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
) }
|
||||
<g fillRule="nonzero" transform="translate(360)">
|
||||
<path
|
||||
d="M23.7,0.2 L222.8,0.2 C235.4,0.2 245.6,10.4 245.6,23
|
||||
L245.6,99 C245.6,111.6 235.4,121.8 222.8,121.8 L151.4,121.8
|
||||
L161.2,145.8 L118.1,121.8 L23.8,121.8 C11.2,121.8 1,111.6 1,99
|
||||
L1,23 C0.9,10.5 11.1,0.2 23.7,0.2 Z"
|
||||
id="Shape"
|
||||
fill="#2B2D2F"
|
||||
/>
|
||||
<path
|
||||
d="M13.2,20.9 C14.6,19 16.7,18 19.5,17.8 C24.6,17.4 27.5,19.8 28.2,25
|
||||
C31.3,45.9 34.7,63.6 38.3,78.1 L60.2,36.4 C62.2,32.6 64.7,30.6 67.7,30.4
|
||||
C72.1,30.1 74.8,32.9 75.9,38.8 C78.4,52.1 81.6,63.4 85.4,73 C88,47.6 92.4,29.3
|
||||
98.6,18 C100.1,15.2 102.3,13.8 105.2,13.6 C107.5,13.4 109.6,14.1 111.5,15.6
|
||||
C113.4,17.1 114.4,19 114.6,21.3 C114.7,23.1 114.4,24.6 113.6,26.1 C109.7,33.3
|
||||
106.5,45.4 103.9,62.2 C101.4,78.5 100.5,91.2 101.1,100.3 C101.3,102.8
|
||||
100.9,105 99.9,106.9 C98.7,109.1 96.9,110.3 94.6,110.5 C92,110.7 89.3,109.5
|
||||
86.7,106.8 C77.4,97.3 70,83.1 64.6,64.2 C58.1,77 53.3,86.6 50.2,93 C44.3,104.3
|
||||
39.3,110.1 35.1,110.4 C32.4,110.6 30.1,108.3 28.1,103.5 C23,90.4 17.5,65.1
|
||||
11.6,27.6 C11.3,25 11.8,22.7 13.2,20.9 Z"
|
||||
id="Shape"
|
||||
fill="#F6F6F6"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
<path
|
||||
d="M228.2,36.6 C224.6,30.3 219.3,26.5 212.2,25 C210.3,24.6 208.5,24.4 206.8,24.4
|
||||
C197.2,24.4 189.4,29.4 183.3,39.4 C178.1,47.9 175.5,57.3 175.5,67.6 C175.5,75.3
|
||||
177.1,81.9 180.3,87.4 C183.9,93.7 189.2,97.5 196.3,99 C198.2,99.4 200,99.6
|
||||
201.7,99.6 C211.4,99.6 219.2,94.6 225.2,84.6 C230.4,76 233,66.6 233,56.3
|
||||
C233,48.5 231.4,42 228.2,36.6 Z M215.6,64.3 C214.2,70.9 211.7,75.8 208,79.1
|
||||
C205.1,81.7 202.4,82.8 199.9,82.3 C197.5,81.8 195.5,79.7 194,75.8 C192.8,72.7
|
||||
192.2,69.6 192.2,66.7 C192.2,64.2 192.4,61.7 192.9,59.4 C193.8,55.3 195.5,51.3
|
||||
198.2,47.5 C201.5,42.6 205,40.6 208.6,41.3 C211,41.8 213,43.9 214.5,47.8
|
||||
C215.7,50.9 216.3,54 216.3,56.9 C216.3,59.5 216,62 215.6,64.3 Z"
|
||||
id="Shape"
|
||||
fill="#F6F6F6"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
<path
|
||||
d="M165.5,36.6 C161.9,30.3 156.5,26.5 149.5,25 C147.6,24.6 145.8,24.4 144.1,24.4
|
||||
C134.5,24.4 126.7,29.4 120.6,39.4 C115.4,47.9 112.8,57.3 112.8,67.6 C112.8,75.3
|
||||
114.4,81.9 117.6,87.4 C121.2,93.7 126.5,97.5 133.6,99 C135.5,99.4 137.3,99.6
|
||||
139,99.6 C148.7,99.6 156.5,94.6 162.5,84.6 C167.7,76 170.3,66.6 170.3,56.3
|
||||
C170.3,48.5 168.7,42 165.5,36.6 Z M152.9,64.3 C151.5,70.9 149,75.8 145.3,79.1
|
||||
C142.4,81.7 139.7,82.8 137.2,82.3 C134.8,81.8 132.8,79.7 131.3,75.8 C130.1,72.7
|
||||
129.5,69.6 129.5,66.7 C129.5,64.2 129.7,61.7 130.2,59.4 C131.1,55.3 132.8,51.3
|
||||
135.5,47.5 C138.8,42.6 142.3,40.6 145.9,41.3 C148.3,41.8 150.3,43.9 151.8,47.8
|
||||
C153,50.9 153.6,54 153.6,56.9 C153.6,59.5 153.4,62 152.9,64.3 Z"
|
||||
id="Shape"
|
||||
fill="#F6F6F6"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
{ ! isJetpackConnected && (
|
||||
<svg
|
||||
height="150"
|
||||
width="150"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path
|
||||
fill="#2B2D2F"
|
||||
d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
|
||||
/>
|
||||
<polygon
|
||||
fill="#F6F6F6"
|
||||
points="15,19 7,19 15,3 "
|
||||
/>
|
||||
<polygon
|
||||
fill="#F6F6F6"
|
||||
points="17,29 17,13 25,13 "
|
||||
/>
|
||||
</svg>
|
||||
) }
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { isJetpackConnected } = select( 'wc-api' );
|
||||
return {
|
||||
isJetpackConnected: isJetpackConnected(),
|
||||
};
|
||||
} )
|
||||
)( HeaderLogo );
|
||||
|
|
@ -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 (
|
||||
<div className={ classes }>
|
||||
{ showStepper ? this.renderStepper() : <HeaderLogo /> }
|
||||
<div className="woocommerce-profile-wizard__header">
|
||||
{ this.renderStepper() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
/*eslint-disable max-len*/
|
||||
|
||||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<mask
|
||||
id="card_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="4"
|
||||
width="20"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
id="icon/action/payment_24px_2"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM20 18H4V12H20V18ZM4 8H20V6H4V8Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#card_mask)">
|
||||
<g>
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
/*eslint-enable max-len*/
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="flash_on_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="7"
|
||||
y="2"
|
||||
width="10"
|
||||
height="20"
|
||||
>
|
||||
<path d="M7 2V13H10V22L17 10H13L16 2H7Z" fill="white" />
|
||||
</mask>
|
||||
<g mask="url(#flash_on_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="local_atm_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="4"
|
||||
width="20"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11
|
||||
20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM11 17H13V16H14C14.55 16 15 15.55 15 15V12C15
|
||||
11.45 14.55 11 14 11H11V10H15V8H13V7H11V8H10C9.45 8 9 8.45 9 9V12C9 12.55 9.45 13 10
|
||||
13H13V14H9V16H11V17ZM4 18H20V6H4V18Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#local_atm_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="295"
|
||||
height="160"
|
||||
viewBox="0 0 295 160"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#management-svg)">
|
||||
<path
|
||||
d="M0 6C0 2.6863 2.68629 0 6 0H289C292.314 0 295 2.68629 295 6V160H0V6Z"
|
||||
fill="#F7EDF7"
|
||||
/>
|
||||
<path
|
||||
opacity="0.05"
|
||||
d="M268 125.429L188.122 25.6443C184.495 28.9602 180.026 31.2158 175.204 32.165C160.166 35.1256 145.48 24.8598 142.402 9.23575C140.226 -1.80872 144.438 -12.5683 152.403 -18.9762L125.167 -53L-30 79.5708L112.833 258L268 125.429Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.05"
|
||||
d="M169 27C181.703 27 192 16.9264 192 4.5C192 -7.9264 181.703 -18 169 -18C156.297 -18 146 -7.9264 146 4.5C146 16.9264 156.297 27 169 27Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
d="M84.0826 16.6412H147.092C150.132 16.6411 153.082 17.6756 155.457 19.5743C157.832 21.4731 159.489 24.1232 160.158 27.0891L191.995 168.296C192.343 169.836 192.349 171.434 192.013 172.977C191.678 174.52 191.009 175.97 190.054 177.227C189.098 178.484 187.879 179.517 186.482 180.253C185.086 180.989 183.545 181.411 181.968 181.489L117.194 184.68C113.725 184.851 110.313 183.754 107.594 181.594C104.875 179.434 103.035 176.359 102.417 172.942L84.3566 73.107L83.013 73.4908L79.5574 54.5684L80.9405 54.2226L75.8993 26.3551C75.6834 25.1615 75.7334 23.9349 76.0459 22.7629C76.3584 21.5908 76.9257 20.5021 77.7072 19.5744C78.4887 18.6467 79.4653 17.9029 80.5673 17.3958C81.6693 16.8888 82.8696 16.6311 84.0826 16.6412Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M138.797 19.6853H146.152C148.264 19.6853 150.313 20.4076 151.958 21.7324C153.603 23.0572 154.745 24.9047 155.195 26.9683L185.755 167.023C185.931 167.83 185.931 168.665 185.754 169.471C185.578 170.277 185.23 171.036 184.733 171.695C184.237 172.355 183.604 172.899 182.878 173.292C182.152 173.684 181.35 173.915 180.526 173.969L115.962 178.2C114.14 178.32 112.339 177.764 110.901 176.64C109.463 175.516 108.489 173.901 108.165 172.105L82.0889 27.3445C81.9201 26.4075 81.959 25.4449 82.2029 24.5247C82.4468 23.6044 82.8897 22.7489 83.5003 22.0185C84.111 21.288 84.8745 20.7005 85.737 20.2974C86.5995 19.8942 87.54 19.6853 88.4921 19.6853H95.4695C96.1448 19.6853 96.8013 19.9079 97.3373 20.3187C97.8734 20.7294 98.259 21.3054 98.4346 21.9575C98.5895 22.5331 98.93 23.0416 99.4032 23.4043C99.8764 23.7669 100.456 23.9634 101.052 23.9634H134.176C135.344 23.9634 136.468 23.5228 137.325 22.7296C138.181 21.9365 138.707 20.8492 138.797 19.6853L138.797 19.6853Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M159.366 55.8843H92.5569V56.2134H159.366V55.8843Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M161.999 66.5796H94.532V66.9087H161.999V66.5796Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M96.7759 55.3634L98.294 53.3396L98.0308 53.1421L96.7189 54.8913L91.6633 50.7551L91.4551 51.0102L96.7759 55.3634Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M105.498 103.081L107.016 101.057L106.752 100.86L105.44 102.609L100.385 98.4729L100.177 98.7277L105.498 103.081Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M169.4 103.109L99.4648 104.59L99.4718 104.919L169.407 103.438L169.4 103.109Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M171.539 112.816L100.287 114.462L100.295 114.791L171.547 113.146L171.539 112.816Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
opacity="0.1"
|
||||
d="M127.854 140.871C127.854 145.017 129.501 148.993 132.433 151.924C135.364 154.856 139.341 156.503 143.487 156.503C147.633 156.503 151.609 154.856 154.54 151.924C157.472 148.993 159.119 145.017 159.119 140.871C159.119 140.675 159.116 140.481 159.108 140.287C158.955 136.195 157.202 132.326 154.226 129.512C151.25 126.699 147.289 125.166 143.194 125.242C139.099 125.319 135.198 126.999 132.33 129.922C129.461 132.844 127.854 136.776 127.854 140.871H127.854Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
opacity="0.1"
|
||||
d="M129.335 146.96C129.335 147.155 129.338 147.349 129.346 147.544C130.863 150.756 133.428 153.355 136.619 154.915C139.81 156.475 143.438 156.901 146.904 156.125C150.37 155.348 153.468 153.414 155.688 150.642C157.908 147.869 159.118 144.423 159.119 140.871C159.119 140.676 159.116 140.481 159.107 140.287C157.591 137.075 155.026 134.476 151.835 132.916C148.643 131.356 145.016 130.93 141.55 131.706C138.084 132.483 134.986 134.417 132.765 137.189C130.545 139.962 129.335 143.408 129.335 146.96H129.335Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M224.461 59.1491C229.783 59.1491 234.098 54.8348 234.098 49.513C234.098 44.1912 229.783 39.877 224.461 39.877C219.139 39.877 214.824 44.1912 214.824 49.513C214.824 54.8348 219.139 59.1491 224.461 59.1491Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M236.166 86.9957C236.166 86.9957 235.643 98.2553 235.119 99.0408C234.595 99.8264 229.881 111.086 229.881 111.086L227.525 103.754C227.525 103.754 231.191 97.7316 230.667 94.3275C230.143 90.9235 230.473 86.7346 230.473 86.7346L236.166 86.9957Z"
|
||||
fill="#9F616A"
|
||||
/>
|
||||
<path
|
||||
d="M221.24 59.7637C225.29 59.7637 228.572 56.4811 228.572 52.4319C228.572 48.3827 225.29 45.1001 221.24 45.1001C217.191 45.1001 213.908 48.3827 213.908 52.4319C213.908 56.4811 217.191 59.7637 221.24 59.7637Z"
|
||||
fill="#9F616A"
|
||||
/>
|
||||
<path
|
||||
d="M227.263 53.217C227.263 53.217 227.001 63.691 228.834 65.2621C230.667 66.8332 218.359 65.524 218.359 65.524C218.359 65.524 220.978 58.1922 218.883 56.6211C216.788 55.05 227.263 53.217 227.263 53.217Z"
|
||||
fill="#9F616A"
|
||||
/>
|
||||
<path
|
||||
d="M217.574 65.0008C217.574 65.0008 219.145 62.1205 221.24 62.3823C223.335 62.6442 230.144 63.1679 230.406 63.6916C230.667 64.2153 231.453 66.0482 231.977 66.5719C232.501 67.0956 236.429 67.8812 236.69 71.0234C236.952 74.1656 227.263 93.2806 227.263 93.2806C227.263 93.2806 228.573 97.732 228.311 98.7794C228.049 99.8268 229.62 102.969 229.358 104.278C229.096 105.588 233.286 113.443 231.191 123.655V140.152C231.191 140.152 238.262 168.693 236.167 170.788C234.072 172.883 227.001 171.574 225.692 170.788C224.383 170.003 218.884 130.463 218.884 130.463L216.265 117.109L216.003 146.436C216.003 146.436 216.527 171.05 214.694 171.836C212.861 172.621 205.79 172.883 205.266 171.312C204.858 170.087 202.857 137.484 201.996 123.193C201.697 118.26 202.085 113.309 203.149 108.483C204.238 103.54 205.821 97.7324 207.623 95.3754C211.028 90.9239 213.122 76.7841 213.122 76.7841L208.671 68.6667C208.671 68.6667 211.289 66.0482 212.861 66.0482C214.432 66.0482 217.574 65.0008 217.574 65.0008Z"
|
||||
fill="#444053"
|
||||
/>
|
||||
<path
|
||||
d="M235.119 69.1902L236.5 70.1301C236.5 70.1301 237.476 86.996 236.69 88.0434C235.904 89.0908 230.443 88.5796 230.031 87.6569C229.62 86.7341 235.119 69.1902 235.119 69.1902Z"
|
||||
fill="#444053"
|
||||
/>
|
||||
<path
|
||||
d="M211.767 84.5249C212.533 89.8422 213.205 94.5756 209.286 98.8578C205.347 103.192 200.904 107.039 196.053 110.319C195.572 111.593 188.515 120.943 188.156 117.213C187.797 113.484 190.235 110.56 193.7 107.406C197.165 104.252 202.012 97.4081 204.747 93.6531C207.482 89.898 206.356 87.5565 206.261 84.42C206.166 81.2835 210.691 84.5628 211.767 84.5249Z"
|
||||
fill="#9F616A"
|
||||
/>
|
||||
<path
|
||||
d="M212.337 67.8806L208.671 68.6662C208.671 68.6662 208.671 74.4269 207.623 76.7835C206.576 79.1402 204.743 84.639 205.528 84.9008C206.314 85.1627 213.646 88.8286 214.17 86.7338C214.694 84.639 216.003 67.8806 212.337 67.8806Z"
|
||||
fill="#444053"
|
||||
/>
|
||||
<path
|
||||
d="M234.901 46.4615C240.223 46.4615 244.537 42.1473 244.537 36.8255C244.537 31.5037 240.223 27.1895 234.901 27.1895C229.579 27.1895 225.264 31.5037 225.264 36.8255C225.264 42.1473 229.579 46.4615 234.901 46.4615Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M243.213 44.8046C241.966 45.706 240.521 46.2957 238.999 46.5242C237.477 46.7527 235.922 46.6134 234.465 46.118C233.008 45.6226 231.691 44.7855 230.624 43.6767C229.557 42.5679 228.771 41.2197 228.331 39.7449C228.498 41.0666 228.936 42.3395 229.619 43.4832C230.302 44.6269 231.215 45.6166 232.3 46.3898C233.384 47.163 234.618 47.7029 235.922 47.9754C237.226 48.2479 238.572 48.2471 239.876 47.973C241.18 47.699 242.412 47.1576 243.496 46.3831C244.58 45.6087 245.492 44.6179 246.173 43.4734C246.855 42.3288 247.292 41.0554 247.456 39.7335C247.621 38.4116 247.51 37.07 247.13 35.7932C247.346 37.5085 247.096 39.2503 246.407 40.8358C245.718 42.4214 244.614 43.7922 243.213 44.8046Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M227.031 58.1854C230.934 58.1854 234.098 55.0216 234.098 51.1189C234.098 47.2162 230.934 44.0525 227.031 44.0525C223.128 44.0525 219.964 47.2162 219.964 51.1189C219.964 55.0216 223.128 58.1854 227.031 58.1854Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M221.088 53.3669C224.548 53.3669 227.352 51.1739 227.352 48.4686C227.352 45.7634 224.548 43.5703 221.088 43.5703C217.629 43.5703 214.824 45.7634 214.824 48.4686C214.824 51.1739 217.629 53.3669 221.088 53.3669Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M219.417 55.5916C220.074 55.5916 220.606 54.65 220.606 53.4884C220.606 52.3269 220.074 51.3853 219.417 51.3853C218.761 51.3853 218.229 52.3269 218.229 53.4884C218.229 54.65 218.761 55.5916 219.417 55.5916Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="management-svg">
|
||||
<path
|
||||
d="M0 6C0 2.6863 2.68629 0 6 0H289C292.314 0 295 2.68629 295 6V160H0V6Z"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="phone_android_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="5"
|
||||
y="1"
|
||||
width="14"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 1H8C6.34 1 5 2.34 5 4V20C5 21.66 6.34 23 8 23H16C17.66 23 19 21.66 19 20V4C19
|
||||
2.34 17.66 1 16 1ZM14 21H10V20H14V21ZM7 18H17V4H7V18Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#phone_android_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/*eslint-disable max-len*/
|
||||
|
||||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<mask
|
||||
id="print_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="3"
|
||||
width="20"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19 8H18V3H6V8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM8 5H16V8H8V5ZM16 19V17V15H8V19H16ZM18 15V13H6V15H4V11C4 10.45 4.45 10 5 10H19C19.55 10 20 10.45 20 11V15H18ZM17 11.5C17 10.9477 17.4477 10.5 18 10.5C18.5523 10.5 19 10.9477 19 11.5C19 12.0523 18.5523 12.5 18 12.5C17.4477 12.5 17 12.0523 17 11.5Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#print_mask)">
|
||||
<g>
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
/*eslint-enable max-len*/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,30 +0,0 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="security_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="3"
|
||||
y="1"
|
||||
width="18"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3 5L12 1L21 5V11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5ZM19
|
||||
11.99H12V3.19L5 6.3V12H12V20.93C15.72 19.78 18.47 16.11 19 11.99Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#security_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="295"
|
||||
height="160"
|
||||
viewBox="0 0 295 160"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#shipping-labels-svg)">
|
||||
<path
|
||||
d="M0 6C0 2.6863 2.68629 0 6 0H289C292.314 0 295 2.68629 295 6V160H0V6Z"
|
||||
fill="#F7EDF7"
|
||||
/>
|
||||
<path
|
||||
opacity="0.05"
|
||||
d="M297.839 152.033C290.282 167.747 274.937 178.255 259.035 185.184C237.627 194.516 214.051 198.218 190.8 196.652C186.725 196.379 182.663 195.942 178.613 195.342C164.546 193.274 150.833 189.248 137.864 183.381C134.121 181.682 130.454 179.827 126.862 177.816C120.864 174.465 115.117 170.676 109.666 166.48C108.295 165.425 106.943 164.343 105.61 163.235C104.686 162.466 103.77 161.681 102.84 160.918C100.878 159.31 98.8582 157.782 96.6056 156.638C95.9259 156.292 95.2292 155.982 94.518 155.709C87.3847 152.974 79.1593 154.006 71.7331 156.139C66.0845 157.762 60.5781 159.983 54.9352 161.569C52.4252 162.296 49.8677 162.844 47.2815 163.209C41.5074 163.946 35.6437 163.426 30.0854 161.686L29.6105 161.537C28.8141 161.285 28.0243 161.009 27.2412 160.709L26.7663 160.525C26.0078 160.231 25.2655 159.915 24.5392 159.576L24.0643 159.358C23.3058 159.003 22.5635 158.627 21.8373 158.232C21.5756 158.094 21.3168 157.945 21.0608 157.805C16.9289 155.478 13.1731 152.531 9.92289 149.063C9.82903 148.969 9.74086 148.871 9.63847 148.776C9.18624 148.283 8.74255 147.782 8.31307 147.268C8.1538 147.079 7.99452 146.89 7.83809 146.695C7.32803 146.068 6.83598 145.427 6.36195 144.771C6.29085 144.677 6.22259 144.579 6.15433 144.485C4.21218 141.776 2.60205 138.841 1.359 135.743C1.31918 135.648 1.28221 135.551 1.24808 135.456C0.868851 134.472 0.522806 133.471 0.209944 132.455C0.0819547 132.03 -0.0403466 131.595 -0.148426 131.17C-0.185401 131.044 -0.219532 130.915 -0.250818 130.789C-1.82082 124.559 -2 118.082 -2 111.643C-2 110.892 -2 110.142 -2 109.393C-1.95449 98.9768 -1.79522 88.3833 -0.270727 78.1109C-0.270727 78.0392 -0.250817 77.9675 -0.239441 77.8987C0.270798 74.4405 0.964835 71.0124 1.83967 67.6291C2.75527 64.0792 3.92542 60.601 5.34088 57.222C8.84778 48.9077 13.9474 41.3417 19.6102 34.3291C33.8739 16.6827 52.5802 1.86901 74.4749 -3.67574C98.0675 -9.64768 124.288 -3.92517 143.319 11.3473C149.121 16.0033 154.334 21.5165 160.85 25.0859C166.539 28.1937 173.197 29.481 179.289 27.0354C184.324 25.0142 187.6 24.0108 193.254 24.3175C204.96 24.985 216.5 27.4215 227.487 31.5452C227.931 31.7086 228.375 31.8778 228.815 32.0469C257.459 43.0934 282.082 65.0403 294.881 93.2428C295.22 93.9882 295.549 94.7394 295.868 95.4963C303.499 113.464 306.257 134.522 297.839 152.033Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
d="M238.595 87.2081H167V163.188H238.595V87.2081Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M170.312 125.071V90.0034H174.389L194.39 90.6387L193.498 95.848V125.071H170.312Z"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.44 93.561H172.86V94.5775H190.44V93.561Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.44 98.1351H172.86V99.1516H190.44V98.1351Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.44 102.709H180.504V103.726H190.44V102.709Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M177.701 101.184H172.86V105.25H177.701V101.184Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.441 117.702H179.994V121.768H190.441V117.702Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.44 107.283H172.86V108.3H190.44V107.283Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M190.44 111.857H172.86V112.874H190.44V111.857Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
d="M209.04 140.572H196.555V162.934H209.04V140.572Z"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
<path
|
||||
d="M112.731 122.276H61.5195V163.442H112.731V122.276Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M88.7813 151.499H80.1187V163.188H88.7813V151.499Z"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
<path
|
||||
d="M185.577 98.8864C183.646 102.254 170.048 96.6409 170.048 96.6409L144.067 86.2055L137.786 81.5686L133.785 78.6144L142.672 76.1334L142.921 76.2524L149.113 79.2016L172.864 93.3487C172.864 93.3487 190.613 90.1043 185.577 98.8864Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
<path
|
||||
d="M120.088 59.773C120.088 59.773 116.745 61.1143 116.358 64.8721C115.971 68.63 115.939 89.8314 115.939 89.8314C115.939 89.8314 124.674 84.8159 129.371 84.7133C134.068 84.6107 144.979 76.708 144.979 76.708C144.979 76.708 124.421 58.1896 120.088 59.773Z"
|
||||
fill="#67647E"
|
||||
/>
|
||||
<path
|
||||
opacity="0.1"
|
||||
d="M120.088 59.773C120.088 59.773 116.745 61.1143 116.358 64.8721C115.971 68.63 115.939 89.8314 115.939 89.8314C115.939 89.8314 124.674 84.8159 129.371 84.7133C134.068 84.6107 144.979 76.708 144.979 76.708C144.979 76.708 124.421 58.1896 120.088 59.773Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M152.86 129.137L145.726 129.645C145.726 129.645 145.507 142.995 144.579 146.417L156.809 156.073L154.261 147.942L152.86 129.137Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
<path
|
||||
d="M157.501 156.35L157.501 156.35L157.501 156.35C156.994 156.171 157.064 156.073 157.064 156.073V155.565L144.599 145.588C144.478 146.035 144.344 146.329 144.197 146.417C143.74 146.69 143.086 147.585 142.435 148.621C141.678 149.834 141.193 151.196 141.013 152.614C140.833 154.032 140.964 155.472 141.394 156.835V156.835L140.885 165.475H142.923L143.433 157.598H145.98C145.98 157.598 150.312 163.188 151.586 165.221C152.86 167.254 158.465 167.762 164.07 163.951C168.807 160.73 160.263 157.328 157.501 156.35Z"
|
||||
fill="#444053"
|
||||
/>
|
||||
<path
|
||||
d="M90.1827 99.0244C90.1827 99.0244 77.6983 114.017 89.6732 123.165C94.9424 127.191 99.5703 134.808 103.101 142.076C105.871 147.808 109.869 152.863 114.813 156.884C119.757 160.906 125.526 163.795 131.713 165.348C131.713 165.348 174.262 115.796 159.739 101.82C145.216 87.8434 105.779 99.1902 105.779 99.1902L90.1827 99.0244Z"
|
||||
fill="#444053"
|
||||
/>
|
||||
<path
|
||||
d="M125.529 86.3823C125.585 89.729 124.943 93.4035 122.031 94.1963C116.425 95.721 115.916 94.9587 115.916 94.9587C115.916 94.9587 114.897 96.7375 115.152 98.7704C115.406 100.803 112.731 99.1516 112.731 99.1516C112.731 99.1516 85.5965 102.582 86.6157 98.7704C87.6348 94.9587 97.3166 81.7447 97.3166 81.7447C97.3166 81.7447 113.113 59.6368 116.425 60.3992C116.538 60.4246 116.652 60.4551 116.772 60.4881C120.145 61.469 125.87 65.7965 126.362 67.5144C126.872 69.2931 124.833 80.4742 124.833 80.4742C125.248 82.4178 125.481 84.3957 125.529 86.3823Z"
|
||||
fill="#67647E"
|
||||
/>
|
||||
<path
|
||||
d="M165.599 117.575C162.287 119.608 160.249 105.123 160.249 105.123L136.299 90.6388L130.852 85.0508L127.381 81.4907L136.554 80.4742L136.78 80.6318L142.414 84.5401L163.561 102.328C163.561 102.328 168.911 115.542 165.599 117.575Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
<path
|
||||
opacity="0.1"
|
||||
d="M124.833 80.4741C125.248 82.4178 125.481 84.3957 125.529 86.3823C123.748 86.705 122.14 86.8219 121.012 86.5729C116.425 85.5564 106.744 88.3517 106.744 88.3517C106.744 88.3517 111.839 67.7684 113.113 64.2108C113.417 63.3632 113.901 62.5914 114.533 61.9487C115.164 61.3059 115.928 60.8076 116.772 60.488C120.145 61.4689 125.87 65.7965 126.362 67.5143C126.872 69.2931 124.833 80.4741 124.833 80.4741Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M124.717 57.2728C119.214 54.6655 116.866 48.0884 119.472 42.5824C122.077 37.0763 128.651 34.7264 134.154 37.3336C139.657 39.9409 142.006 46.518 139.4 52.024C136.794 57.5301 130.221 59.88 124.717 57.2728Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
opacity="0.1"
|
||||
d="M138.082 82.5072C138.082 82.5072 134.724 83.8743 130.852 85.0508L127.381 81.4907L136.554 80.4742L136.78 80.6318C137.601 81.7982 138.082 82.5072 138.082 82.5072Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M132.131 54.7977L128.077 71.9742L118.3 62.9339C118.3 62.9339 123.308 56.0031 123.308 54.195C123.308 52.3869 132.131 54.7977 132.131 54.7977Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
<path
|
||||
d="M118.719 58.8744C118.719 58.8744 115.152 59.3827 113.878 62.9403C112.604 66.4979 107.508 87.0811 107.508 87.0811C107.508 87.0811 117.19 84.2859 121.776 85.3023C126.362 86.3188 138.847 81.2365 138.847 81.2365C138.847 81.2365 123.305 58.3662 118.719 58.8744Z"
|
||||
fill="#67647E"
|
||||
/>
|
||||
<path
|
||||
d="M127.459 59.6811C123.207 57.6664 121.392 52.5841 123.406 48.3295C125.419 44.0748 130.499 42.2589 134.751 44.2736C139.003 46.2883 140.818 51.3706 138.805 55.6253C136.791 59.8799 131.712 61.6958 127.459 59.6811Z"
|
||||
fill="#9F616A"
|
||||
/>
|
||||
<path
|
||||
d="M122.429 55.079C118.426 53.1828 116.718 48.3995 118.613 44.3951C120.508 40.3907 125.289 38.6816 129.291 40.5778C133.294 42.474 135.002 47.2573 133.107 51.2617C131.211 55.2661 126.431 56.9752 122.429 55.079Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M117.254 40.5669C113.557 38.8153 111.979 34.3967 113.729 30.6977C115.48 26.9987 119.896 25.4199 123.593 27.1715C127.29 28.9231 128.868 33.3417 127.117 37.0407C125.367 40.7397 120.951 42.3185 117.254 40.5669Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M112.267 36.8522C112.843 37.8846 113.659 38.7679 114.645 39.4279C115.632 40.088 116.762 40.5057 117.939 40.6462C119.116 40.7866 120.308 40.6457 121.413 40.2351C122.518 39.8246 123.506 39.1564 124.292 38.2865C123.746 39.1413 123.025 39.8724 122.177 40.4339C121.328 40.9954 120.369 41.375 119.361 41.5487C118.352 41.7224 117.317 41.6865 116.318 41.4432C115.32 41.1999 114.382 40.7546 113.562 40.1353C112.742 39.5159 112.059 38.7361 111.555 37.845C111.052 36.9538 110.739 35.9708 110.636 34.9579C110.534 33.945 110.644 32.9243 110.959 31.9601C111.275 30.996 111.79 30.1093 112.471 29.3562C111.761 30.4654 111.368 31.7467 111.332 33.0656C111.297 34.3845 111.619 35.6924 112.267 36.8522Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M130.914 53.5515C127.412 51.8923 125.63 48.3155 126.933 45.5625C128.236 42.8095 132.131 41.9227 135.633 43.5819C139.135 45.241 140.917 48.8178 139.614 51.5708C138.311 54.3239 134.416 55.2106 130.914 53.5515Z"
|
||||
fill="#2F2E41"
|
||||
/>
|
||||
<path
|
||||
d="M131.416 56.008C130.665 55.6525 130.537 54.3498 131.129 53.0984C131.721 51.8471 132.81 51.1208 133.56 51.4764C134.311 51.8319 134.439 53.1346 133.847 54.3859C133.254 55.6373 132.166 56.3635 131.416 56.008Z"
|
||||
fill="#A0616A"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="shipping-labels-svg">
|
||||
<path
|
||||
d="M0 6C0 2.6863 2.68629 0 6 0H289C292.314 0 295 2.68629 295 6V160H0V6Z"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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 (
|
||||
<div className="woocommerce-profile-wizard__benefit" key={ title }>
|
||||
<div
|
||||
className="woocommerce-profile-wizard__benefit-card"
|
||||
key={ title }
|
||||
>
|
||||
{ icon }
|
||||
<div className="woocommerce-profile-wizard__benefit-content">
|
||||
<H className="woocommerce-profile-wizard__benefit-title">
|
||||
<div className="woocommerce-profile-wizard__benefit-card-content">
|
||||
<H className="woocommerce-profile-wizard__benefit-card-title">
|
||||
{ title }
|
||||
</H>
|
||||
<p>{ description }</p>
|
||||
|
|
@ -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: <SecurityIcon />,
|
||||
description: __(
|
||||
'Jetpack automatically blocks brute force attacks to protect your store from unauthorized access.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
visible: ! isJetpackActive,
|
||||
},
|
||||
{
|
||||
title: __( 'Sales Tax', 'woocommerce-admin' ),
|
||||
icon: <SalesTaxIcon />,
|
||||
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: <SpeedIcon />,
|
||||
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: <MobileAppIcon />,
|
||||
title: __( 'Store management on the go', 'woocommerce-admin' ),
|
||||
icon: <ManagementIcon />,
|
||||
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: <PrintIcon />,
|
||||
title: __( 'Automated sales taxes', 'woocommerce-admin' ),
|
||||
icon: <SalesTaxIcon />,
|
||||
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: <CardIcon />,
|
||||
title: __( 'Improved speed & security', 'woocommerce-admin' ),
|
||||
icon: <SpeedIcon />,
|
||||
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: <ShippingLabels />,
|
||||
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 (
|
||||
<Fragment>
|
||||
<Card className="woocommerce-profile-wizard__benefits-card">
|
||||
<Logo />
|
||||
<H className="woocommerce-profile-wizard__header-title">
|
||||
{ __(
|
||||
'Start enhancing your WooCommerce store',
|
||||
'woocommerce-admin'
|
||||
{ sprintf(
|
||||
__( 'Enhance your store with %s', 'woocommerce-admin' ),
|
||||
pluginNamesString
|
||||
) }
|
||||
</H>
|
||||
|
||||
<p>
|
||||
{ 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: <strong />,
|
||||
},
|
||||
} ) }
|
||||
</p>
|
||||
|
||||
<Card>
|
||||
{ this.renderBenefits() }
|
||||
|
||||
<p className="woocommerce-profile-wizard__tos">
|
||||
{ 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: (
|
||||
<Link
|
||||
href="https://wordpress.com/tos"
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
),
|
||||
detailsLink: (
|
||||
<Link
|
||||
href="https://jetpack.com/support/what-data-does-jetpack-sync"
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
</p>
|
||||
{ this.renderBenefits() }
|
||||
|
||||
<div className="woocommerce-profile-wizard__card-actions">
|
||||
<Button
|
||||
isPrimary
|
||||
isBusy={ isPending }
|
||||
onClick={ this.startPluginInstall }
|
||||
className="woocommerce-profile-wizard__continue"
|
||||
>
|
||||
{ __( 'Get started', 'woocommerce-admin' ) }
|
||||
{ __( 'Yes please!', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</Card>
|
||||
<Button
|
||||
isDefault
|
||||
isBusy={ isPending }
|
||||
className="woocommerce-profile-wizard__skip"
|
||||
onClick={ this.skipPluginInstall }
|
||||
>
|
||||
{ __( 'No thanks', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{ pluginsToInstall.length !== 0 && (
|
||||
<p>
|
||||
<Button
|
||||
isLink
|
||||
isBusy={ isPending }
|
||||
className="woocommerce-profile-wizard__skip"
|
||||
onClick={ this.skipPluginInstall }
|
||||
>
|
||||
{ sprintf(
|
||||
__( 'Proceed without %s', 'woocommerce-admin' ),
|
||||
pluginNamesString
|
||||
) }
|
||||
</Button>
|
||||
</p>
|
||||
) }
|
||||
</Fragment>
|
||||
<p className="woocommerce-profile-wizard__benefits-install-notice">
|
||||
{ sprintf(
|
||||
__(
|
||||
'%s %s will be installed & activated for free.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
pluginNamesString,
|
||||
_n(
|
||||
'plugin',
|
||||
'plugins',
|
||||
pluginsToInstall.length,
|
||||
'woocommerce-admin'
|
||||
)
|
||||
) }
|
||||
</p>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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(),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
|
||||
class Logo extends Component {
|
||||
render() {
|
||||
return (
|
||||
<svg
|
||||
width="161"
|
||||
height="46"
|
||||
viewBox="0 0 161 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
ariaLabel={ __( 'WooCommerce + Jetpack', 'woocommerce-admin' ) }
|
||||
className="woocommerce-profile-wizard__benefits-logo"
|
||||
>
|
||||
<path
|
||||
d="M139.071 45.4503C150.906 45.4503 160.5 35.7679 160.5 23.824C160.5 11.8802 150.906 2.19775 139.071 2.19775C127.236 2.19775 117.642 11.8802 117.642 23.824C117.642 35.7679 127.236 45.4503 139.071 45.4503Z"
|
||||
fill="#008710"
|
||||
/>
|
||||
<path
|
||||
d="M140.134 20.1919V41.1578L150.849 20.1919H140.134Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M137.967 27.4144V6.48975L127.293 27.4144H137.967Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M95.7021 24.668H100.542V21.6445H95.7021V16.8633H92.7138V21.6445H87.8857V24.668H92.7138V29.4609H95.7021V24.668Z"
|
||||
fill="#2C3338"
|
||||
/>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.52123 2.25732H66.5046C70.2374 2.25732 73.2591 5.27907 73.2591 9.01182V31.5268C73.2591 35.2596 70.2374 38.2813 66.5046 38.2813H45.3524L48.2556 45.3913L35.4872 38.2813H7.55086C3.81811 38.2813 0.796359 35.2596 0.796359 31.5268V9.01182C0.766734 5.3087 3.78848 2.25732 7.52123 2.25732Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
d="M4.41042 8.38982C4.82517 7.82695 5.4473 7.5307 6.2768 7.47145C7.78767 7.35295 8.6468 8.06395 8.85417 9.60445C9.77255 15.7961 10.7798 21.0397 11.8463 25.3353L18.3342 12.9817C18.9267 11.8559 19.6673 11.2634 20.5561 11.2042C21.8596 11.1153 22.6594 11.9448 22.9853 13.6927C23.7259 17.6328 24.6739 20.9805 25.7997 23.8245C26.5699 16.2997 27.8734 10.8783 29.7102 7.5307C30.1546 6.7012 30.8063 6.28645 31.6654 6.2272C32.3468 6.16795 32.9689 6.37533 33.5318 6.8197C34.0947 7.26408 34.3909 7.82695 34.4502 8.50832C34.4798 9.04157 34.3909 9.48595 34.1539 9.93033C32.9986 12.0633 32.0506 15.648 31.2803 20.625C30.5397 25.4538 30.2731 29.2162 30.4508 31.9121C30.5101 32.6527 30.3916 33.3045 30.0953 33.8673C29.7398 34.5191 29.2066 34.8746 28.5252 34.9338C27.7549 34.9931 26.955 34.6376 26.1848 33.8377C23.4297 31.0233 21.2374 26.8166 19.6377 21.2175C17.7121 25.0095 16.29 27.8535 15.3717 29.7495C13.6238 33.0971 12.1426 34.8153 10.8983 34.9042C10.0984 34.9635 9.41705 34.2821 8.82455 32.8601C7.31368 28.9792 5.6843 21.4841 3.93643 10.3747C3.84755 9.60445 3.99567 8.92307 4.41042 8.38982Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M68.1043 13.041C67.0378 11.1746 65.4677 10.0489 63.3643 9.60451C62.8015 9.48601 62.2682 9.42676 61.7646 9.42676C58.9206 9.42676 56.6098 10.908 54.8027 13.8705C53.2622 16.3886 52.4919 19.1734 52.4919 22.2248C52.4919 24.5059 52.9659 26.4611 53.9139 28.0905C54.9804 29.9569 56.5506 31.0826 58.6539 31.527C59.2168 31.6455 59.7501 31.7048 60.2537 31.7048C63.1273 31.7048 65.4381 30.2235 67.2156 27.261C68.7561 24.7133 69.5263 21.9285 69.5263 18.8771C69.5263 16.5664 69.0523 14.6408 68.1043 13.041ZM64.3716 21.2471C63.9568 23.2024 63.2162 24.654 62.1201 25.6316C61.2609 26.4019 60.4611 26.7278 59.7204 26.5796C59.0094 26.4315 58.4169 25.8094 57.9726 24.654C57.6171 23.7356 57.4393 22.8173 57.4393 21.9581C57.4393 21.2175 57.4986 20.4769 57.6467 19.7955C57.9133 18.5809 58.417 17.3959 59.2168 16.2701C60.1945 14.8185 61.2313 14.226 62.2978 14.4334C63.0088 14.5815 63.6013 15.2036 64.0457 16.359C64.4012 17.2774 64.5789 18.1958 64.5789 19.0549C64.5789 19.8251 64.4901 20.5658 64.3716 21.2471Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M49.5294 13.041C48.4629 11.1746 46.8631 10.0489 44.7894 9.60451C44.2265 9.48601 43.6932 9.42676 43.1896 9.42676C40.3456 9.42676 38.0349 10.908 36.2277 13.8705C34.6872 16.3886 33.917 19.1734 33.917 22.2248C33.917 24.5059 34.391 26.4611 35.339 28.0905C36.4055 29.9569 37.9756 31.0826 40.079 31.527C40.6419 31.6455 41.1751 31.7048 41.6787 31.7048C44.5524 31.7048 46.8631 30.2235 48.6406 27.261C50.1811 24.7133 50.9514 21.9285 50.9514 18.8771C50.9514 16.5664 50.4774 14.6408 49.5294 13.041ZM45.7966 21.2471C45.3819 23.2024 44.6412 24.654 43.5451 25.6316C42.686 26.4019 41.8861 26.7278 41.1455 26.5796C40.4345 26.4315 39.842 25.8094 39.3976 24.654C39.0421 23.7356 38.8644 22.8173 38.8644 21.9581C38.8644 21.2175 38.9236 20.4769 39.0717 19.7955C39.3384 18.5809 39.842 17.3959 40.6419 16.2701C41.6195 14.8185 42.6564 14.226 43.7229 14.4334C44.4339 14.5815 45.0264 15.2036 45.4707 16.359C45.8262 17.2774 46.004 18.1958 46.004 19.0549C46.004 19.8251 45.9447 20.5658 45.7966 21.2471Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect
|
||||
x="0.5"
|
||||
y="2.19775"
|
||||
width="72.8775"
|
||||
height="43.2525"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Logo;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue