Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add step wrapper/controller to onboarding profile wizard (https://github.com/woocommerce/woocommerce-admin/pull/2241) 

* Render profiler step based on query

* Add profile wizard header component

* Add profile wizard header styling

* Add plugin step

* Add header logo as SVG
This commit is contained in:
Joshua T Flowers 2019-05-17 11:04:52 +08:00 committed by GitHub
parent e873144e4a
commit 5e07474d16
7 changed files with 242 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/dashboard/index.js
View File

@ -20,10 +20,12 @@ import ProfileWizard from './profile-wizard';
export default class Dashboard extends Component {
renderDashboardOutput() {
const { query, path } = this.props;
// @todo This should be replaced by a check from the REST API response from #1897.
const profileWizardComplete = true;
if ( window.wcAdminFeatures.onboarding && ! profileWizardComplete ) {
return <ProfileWizard />;
return <ProfileWizard query={ query } />;
}
// @todo This should be replaced by a check of tasks from the REST API response from #1897.
@ -32,8 +34,6 @@ export default class Dashboard extends Component {
return <TaskList />;
}
const { query, path } = this.props;
// @todo When the customizable dashboard is ready to be launched, we can pull `CustomizableDashboard`'s render
// method into `index.js`, and replace both this feature check, and the existing dashboard below.
if ( window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] ) {

93
plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js Normal file
View File

@ -0,0 +1,93 @@
/** @format */
export default () => (
<svg
role="img"
aria-label="Jetpack + Woo"
width="200"
viewBox="0 0 1270 170"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g transform="translate(219 35.082353)">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="72"
width="72"
fill="#bbc9d5"
>
<g xmlns="http://www.w3.org/2000/svg">
<path d="M18 11h-5V6h-2v5H6v2h5v5h2v-5h5" />
</g>
</svg>
</g>
<g fill-rule="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="#BEABCE"
/>
<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="#342148"
fill-rule="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="#342148"
fill-rule="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="#342148"
fill-rule="nonzero"
/>
</g>
<svg height="150" width="150" viewBox="0 0 32 32">
<path
fill="#BEABCE"
d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
/>
<polygon fill="#342148" points="15,19 7,19 15,3 " />
<polygon fill="#342148" points="17,29 17,13 25,13 " />
</svg>
</g>
</g>
</g>
</svg>
);

19
plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js Normal file
View File

@ -0,0 +1,19 @@
/** @format */
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
import HeaderLogo from './header-logo';
export default class ProfileWizardHeader extends Component {
render() {
return (
<div className="woocommerce-profile-wizard__header">
<HeaderLogo />
</div>
);
}
}

53
plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js
View File

@ -2,39 +2,56 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Component, createElement } from '@wordpress/element';
/**
* Internal depdencies
*/
import Plugins from './steps/plugins';
import Start from './steps/start';
import './style.scss';
import { H } from '@woocommerce/components';
const getSteps = () => {
const steps = [];
steps.push( {
key: 'start',
container: Start,
} );
steps.push( {
key: 'plugins',
container: Plugins,
} );
return steps;
};
export default class ProfileWizard extends Component {
componentDidMount() {
document.documentElement.classList.remove( 'wp-toolbar' );
document.body.classList.add( 'woocommerce-profile-wizard__body' );
}
componentWillUnmount() {
document.documentElement.classList.add( 'wp-toolbar' );
document.body.classList.remove( 'woocommerce-profile-wizard__body' );
}
render() {
return (
<div className="woocommerce-profile-wizard__container">
<H className="woocommerce-profile-wizard__header-title">
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
</H>
getStep() {
const { step } = this.props.query;
const currentStep = getSteps().find( s => s.key === step );
<p>
{ __(
'Simplify and enhance the setup of your store with features and benefits offered by Jetpack ' +
'& WooCommerce Services.',
'woocommerce-admin'
) }
</p>
</div>
);
if ( ! currentStep ) {
return getSteps()[ 0 ];
}
return currentStep;
}
render() {
const { query } = this.props;
const step = this.getStep();
return createElement( step.container, { query } );
}
}

35
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js Normal file
View File

@ -0,0 +1,35 @@
/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
/**
* Internal depdencies
*/
import { H } from '@woocommerce/components';
import ProfileWizardHeader from '../header';
export default class Start extends Component {
render() {
return (
<Fragment>
<ProfileWizardHeader />
<div className="woocommerce-profile-wizard__container">
<H className="woocommerce-profile-wizard__header-title">
{ __( 'Installing plugins', 'woocommerce-admin' ) }
</H>
<p>
{ __(
'Once Jetpack and WooCommerce Services are installed you will create or log in to a Jetpack account' +
' and connect your site to WordPress.com to enable the features on your store.',
'woocommerce-admin'
) }
</p>
</div>
</Fragment>
);
}
}

35
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start.js Normal file
View File

@ -0,0 +1,35 @@
/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
/**
* Internal depdencies
*/
import { H } from '@woocommerce/components';
import ProfileWizardHeader from '../header';
export default class Start extends Component {
render() {
return (
<Fragment>
<ProfileWizardHeader />
<div className="woocommerce-profile-wizard__container">
<H className="woocommerce-profile-wizard__header-title">
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
</H>
<p>
{ __(
'Simplify and enhance the setup of your store with features and benefits offered by Jetpack ' +
'& WooCommerce Services.',
'woocommerce-admin'
) }
</p>
</div>
</Fragment>
);
}
}

27
plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
View File

@ -6,6 +6,18 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
.woocommerce-profile-wizard__header {
height: 56px;
border-bottom: 1px solid #1f112e;
display: flex;
align-items: center;
justify-content: center;
svg > g {
transform: translateX(25%);
}
}
.woocommerce-profile-wizard__header-title {
color: #fff;
font-size: 24px;
@ -14,6 +26,14 @@
}
.woocommerce-profile-wizard__container {
margin-top: $gap-larger;
margin-left: auto;
margin-right: auto;
@include breakpoint( '>960px' ) {
width: 70%;
}
p {
font-size: 16px;
line-height: 24px;
@ -23,11 +43,8 @@
#woocommerce-layout__primary {
text-align: center;
margin-left: auto;
margin-right: auto;
@include breakpoint( '>960px' ) {
width: 70%;
}
margin: 0;
width: 100%;
}
.woocommerce-layout .woocommerce-layout__main {