Update Profile Wizard Header to Display Stepper (https://github.com/woocommerce/woocommerce-admin/pull/2296)

* Update Profile Wizard Header to contain steps * Handle PR Feedback: Fix wpbody-content height only applying on onboarding routes, fix width/alignment of stepper.
2019-05-27 12:37:02 -04:00 · 2019-05-27 12:37:02 -04:00 · fa673a66c6
parent e21a8f6b91
commit fa673a66c6
5 changed files with 155 additions and 93 deletions
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js
@ -3,17 +3,26 @@
 * External dependencies
 */
 import { Component } from '@wordpress/element';
+import { filter } from 'lodash';
+import classnames from 'classnames';

 /**
 * Internal dependencies
 */
+import { Stepper } from '@woocommerce/components';
 import HeaderLogo from './header-logo';
+
 export default class ProfileWizardHeader extends Component {
+	renderStepper() {
+		const steps = filter( this.props.steps, step => !! step.label );
+		return <Stepper steps={ steps } currentStep={ this.props.currentStep } />;
+	}
 	render() {
-		return (
-			<div className="woocommerce-profile-wizard__header">
-				<HeaderLogo />
-			</div>
-		);
+		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,
+		} );
+		return <div className={ classes }>{ showStepper ? this.renderStepper() : <HeaderLogo /> }</div>;
 	}
 }
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js
@ -2,18 +2,20 @@
 /**
 * External dependencies
 */
-import { Component, createElement } from '@wordpress/element';
+import { Component, createElement, Fragment } from '@wordpress/element';
+import { pick } from 'lodash';

 /**
 * Internal depdencies
 */
+import ProfileWizardHeader from './header';
 import Plugins from './steps/plugins';
-import Start from './steps/start/';
+import Start from './steps/start';
 import './style.scss';
+import { __ } from '@wordpress/i18n';

 const getSteps = () => {
 	const steps = [];
-
 	steps.push( {
 		key: 'start',
 		container: Start,
@ -22,7 +24,31 @@ const getSteps = () => {
 		key: 'plugins',
 		container: Plugins,
 	} );
-
+	steps.push( {
+		key: 'store-details',
+		container: Fragment,
+		label: __( 'Store Details', 'woocommerce-admin' ),
+	} );
+	steps.push( {
+		key: 'industry',
+		container: Fragment,
+		label: __( 'Industry', 'woocommerce-admin' ),
+	} );
+	steps.push( {
+		key: 'product-types',
+		container: Fragment,
+		label: __( 'Product Types', 'woocommerce-admin' ),
+	} );
+	steps.push( {
+		key: 'business-details',
+		container: Fragment,
+		label: __( 'Business Details', 'woocommerce-admin' ),
+	} );
+	steps.push( {
+		key: 'theme',
+		container: Fragment,
+		label: __( 'Theme', 'woocommerce-admin' ),
+	} );
 	return steps;
 };

@ -52,6 +78,14 @@ export default class ProfileWizard extends Component {
 		const { query } = this.props;
 		const step = this.getStep();

-		return createElement( step.container, { query } );
+		const container = createElement( step.container, { query } );
+		const steps = getSteps().map( _step => pick( _step, [ 'key', 'label' ] ) );
+
+		return (
+			<Fragment>
+				<ProfileWizardHeader currentStep={ step.key } steps={ steps } />
+				<div className="woocommerce-profile-wizard__container">{ container }</div>
+			</Fragment>
+		);
 	}
 }
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js
@ -14,7 +14,6 @@ import { withDispatch } from '@wordpress/data';
 * Internal depdencies
 */
 import { H, Stepper, Card } from '@woocommerce/components';
-import ProfileWizardHeader from '../header';

 const plugins = [ 'jetpack', 'woocommerce-services' ];

@ -162,45 +161,42 @@ class Plugins extends Component {
 		const { step, isPending, isError } = this.state;
 		return (
 			<Fragment>
-				<ProfileWizardHeader />
-				<div className="woocommerce-profile-wizard__container">
-					<H className="woocommerce-profile-wizard__header-title">
-						{ __( 'Install plugins', 'woocommerce-admin' ) }
-					</H>
+				<H className="woocommerce-profile-wizard__header-title">
+					{ __( 'Install plugins', 'woocommerce-admin' ) }
+				</H>

-					<Card className="woocommerce-profile-wizard__plugins-card">
-						<Stepper
-							direction="vertical"
-							currentStep={ step }
-							isPending={ isPending }
-							steps={ [
-								{
-									label: __( 'Install Jetpack and WooCommerce Services', 'woocommerce-admin' ),
-									key: 'install',
-								},
-								{
-									label: __( 'Activate Jetpack and WooCommerce Services', 'woocommerce-admin' ),
-									key: 'activate',
-								},
-							] }
-						/>
+				<Card className="woocommerce-profile-wizard__plugins-card">
+					<Stepper
+						direction="vertical"
+						currentStep={ step }
+						isPending={ isPending }
+						steps={ [
+							{
+								label: __( 'Install Jetpack and WooCommerce Services', 'woocommerce-admin' ),
+								key: 'install',
+							},
+							{
+								label: __( 'Activate Jetpack and WooCommerce Services', 'woocommerce-admin' ),
+								key: 'activate',
+							},
+						] }
+					/>

-						<div className="woocommerce-profile-wizard__plugins-actions">
-							{ isError && (
-								<Button isPrimary onClick={ () => location.reload() }>
-									{ __( 'Retry', 'woocommerce-admin' ) }
+					<div className="woocommerce-profile-wizard__plugins-actions">
+						{ isError && (
+							<Button isPrimary onClick={ () => location.reload() }>
+								{ __( 'Retry', 'woocommerce-admin' ) }
+							</Button>
+						) }
+
+						{ ! isError &&
+							'activate' === step && (
+								<Button isPrimary isBusy={ isPending } onClick={ this.activatePlugins }>
+									{ __( 'Activate & continue', 'woocommerce-admin' ) }
 								</Button>
 							) }
-
-							{ ! isError &&
-								'activate' === step && (
-									<Button isPrimary isBusy={ isPending } onClick={ this.activatePlugins }>
-										{ __( 'Activate & continue', 'woocommerce-admin' ) }
-									</Button>
-								) }
-						</div>
-					</Card>
-				</div>
+					</div>
+				</Card>
 			</Fragment>
 		);
 	}
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
@ -11,7 +11,6 @@ import interpolateComponents from 'interpolate-components';
 * Internal depdencies
 */
 import { Card, H, Link } from '@woocommerce/components';
-import ProfileWizardHeader from '../../header';
 import SecurityIcon from './images/security';
 import SalesTaxIcon from './images/local_atm';
 import SpeedIcon from './images/flash_on';
@ -109,58 +108,55 @@ export default class Start extends Component {

 		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>
+				<H className="woocommerce-profile-wizard__header-title">
+					{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
+				</H>

-					<p>
-						{ interpolateComponents( {
-							mixedString: __(
-								'Simplify and enhance the setup of your store with features and benefits offered by ' +
-									'{{strong}}Jetpack & WooCommerce Services{{/strong}}.',
-								'woocommerce-admin'
-							),
-							components: {
-								strong: <strong />,
-							},
-						} ) }
-					</p>
+				<p>
+					{ interpolateComponents( {
+						mixedString: __(
+							'Simplify and enhance the setup of your store with features and benefits offered by ' +
+								'{{strong}}Jetpack & WooCommerce Services{{/strong}}.',
+							'woocommerce-admin'
+						),
+						components: {
+							strong: <strong />,
+						},
+					} ) }
+				</p>

-					<div className="woocommerce-profile-wizard__tracking">
-						<CheckboxControl
-							className="woocommerce-profile-wizard__tracking-checkbox"
-							checked={ trackingChecked }
-							label={ __( trackingLabel, 'woocommerce-admin' ) }
-							onChange={ this.onTrackingChange }
-						/>
+				<div className="woocommerce-profile-wizard__tracking">
+					<CheckboxControl
+						className="woocommerce-profile-wizard__tracking-checkbox"
+						checked={ trackingChecked }
+						label={ __( trackingLabel, 'woocommerce-admin' ) }
+						onChange={ this.onTrackingChange }
+					/>

-						<FormToggle
-							aria-hidden="true"
-							checked={ trackingChecked }
-							onChange={ this.onTrackingChange }
-							onClick={ e => e.stopPropagation() }
-							tabIndex="-1"
-						/>
+					<FormToggle
+						aria-hidden="true"
+						checked={ trackingChecked }
+						onChange={ this.onTrackingChange }
+						onClick={ e => e.stopPropagation() }
+						tabIndex="-1"
+					/>
+				</div>
+
+				<Card>
+					<div className="woocommerce-profile-wizard__benefits">
+						{ benefits.map( benefit => this.renderBenefit( benefit ) ) }
 					</div>

-					<Card>
-						<div className="woocommerce-profile-wizard__benefits">
-							{ benefits.map( benefit => this.renderBenefit( benefit ) ) }
-						</div>
+					<Button isPrimary onClick={ this.startWizard }>
+						{ __( 'Get started', 'woocommerce-admin' ) }
+					</Button>
+				</Card>

-						<Button isPrimary onClick={ this.startWizard }>
-							{ __( 'Get started', 'woocommerce-admin' ) }
-						</Button>
-					</Card>
-
-					<p>
-						<Link href="#" onClick={ this.skipWizard }>
-							{ __( 'Proceed without Jetpack or WooCommerce Services', 'woocommerce-admin' ) }
-						</Link>
-					</p>
-				</div>
+				<p>
+					<Link href="#" onClick={ this.skipWizard }>
+						{ __( 'Proceed without Jetpack or WooCommerce Services', 'woocommerce-admin' ) }
+					</Link>
+				</p>
 			</Fragment>
 		);
 	}
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
@ -6,6 +6,10 @@
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
 		'Helvetica Neue', sans-serif;

+	#wpbody-content {
+		min-height: 100vh;
+	}
+
 	.woocommerce-profile-wizard__container a {
 		color: $muriel-gray-600;
 	}
@ -53,6 +57,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		background: $muriel-white;

 		svg > g {
 			transform: translateX(25%);
@ -140,3 +145,25 @@
 		}
 	}
 }
+
+.woocommerce-profile-wizard__header.is-stepper {
+	svg > g {
+		transform: initial;
+	}
+
+	@include breakpoint( '<782px' ) {
+		position: absolute;
+		width: 100%;
+		bottom: 0;
+		border-top: 1px solid $muriel-gray-50;
+		border-bottom: none;
+	}
+
+	.woocommerce-stepper {
+		margin: 0 $gap 0 $gap;
+		background: transparent;
+		box-shadow: none;
+		margin-bottom: 0;
+		width: 100%;
+	}
+}