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

plugins/woocommerce-admin/client/dashboard/index.js

@@ -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' ] ) {

plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js

@@ -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>
+);

plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js

@@ -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>
+		);
+	}
+}

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

@@ -2,39 +2,56 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Component, createElement } from '@wordpress/element';
-import { Component } 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() {
+	getStep() {
-		return (
+		const { step } = this.props.query;
-			<div className="woocommerce-profile-wizard__container">
+		const currentStep = getSteps().find( s => s.key === step );
-				<H className="woocommerce-profile-wizard__header-title">
-					{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
-				</H>
 
-				<p>
+		if ( ! currentStep ) {
-					{ __(
+			return getSteps()[ 0 ];
-						'Simplify and enhance the setup of your store with features and benefits offered by Jetpack ' +
+		}
-							'& WooCommerce Services.',
+
-						'woocommerce-admin'
+		return currentStep;
-					) }
+	}
-				</p>
+
-			</div>
+	render() {
-		);
+		const { query } = this.props;
+		const step = this.getStep();
+
+		return createElement( step.container, { query } );
 	}
 }

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js

@@ -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>
+		);
+	}
+}

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start.js

@@ -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>
+		);
+	}
+}

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

@@ -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: 0;
-		margin-right: auto;
+		width: 100%;
-		@include breakpoint( '>960px' ) {
-			width: 70%;
-		}
 	}
 
 	.woocommerce-layout .woocommerce-layout__main {