Add onboarding step 4 (https://github.com/woocommerce/woocommerce-admin/pull/2304)

* Add store details onboarding step

* Hide hide disabled buttons in card content area

* Save store details to wc settings

* Remove email field from store details

* Add city field to store details

* Store countryState options in state to avoid recalculating on rerender

* Add muriel component style changes

* Continue to next form step if form input is valid

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

@@ -2,6 +2,7 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Component, createElement, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
@@ -21,8 +22,8 @@ import ProfileWizardHeader from './header';
 import Plugins from './steps/plugins';
 import Start from './steps/start';
 import Industry from './steps/industry';
+import StoreDetails from './steps/store-details';
 import './style.scss';
-import { __ } from '@wordpress/i18n';
 
 const getSteps = () => {
 	const steps = [];
@@ -36,7 +37,7 @@ const getSteps = () => {
 	} );
 	steps.push( {
 		key: 'store-details',
-		container: Fragment,
+		container: StoreDetails,
 		label: __( 'Store Details', 'woocommerce-admin' ),
 	} );
 	steps.push( {

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

@@ -0,0 +1,191 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, SelectControl, TextControl } from 'newspack-components';
+import { Component, Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { withDispatch } from '@wordpress/data';
+
+/**
+ * Internal depdencies
+ */
+import { H, Card } from '@woocommerce/components';
+import withSelect from 'wc-api/with-select';
+
+class StoreDetails extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			addressLine1: '',
+			addressLine2: '',
+			city: '',
+			countryState: '',
+			countryStateOptions: [],
+			postCode: '',
+		};
+
+		this.onContinue = this.onContinue.bind( this );
+	}
+
+	componentWillMount() {
+		const countryStateOptions = this.getCountryStateOptions();
+		this.setState( { countryStateOptions } );
+	}
+
+	isValidForm() {
+		const { addressLine1, city, countryState, postCode } = this.state;
+
+		if ( addressLine1.length && city.length && countryState.length && postCode.length ) {
+			return true;
+		}
+
+		return false;
+	}
+
+	async onContinue() {
+		if ( ! this.isValidForm() ) {
+			return;
+		}
+
+		const { addNotice, goToNextStep, isError, updateSettings } = this.props;
+		const { addressLine1, addressLine2, city, countryState, postCode } = this.state;
+
+		await updateSettings( {
+			general: {
+				woocommerce_store_address: addressLine1,
+				woocommerce_store_address_2: addressLine2,
+				woocommerce_default_country: countryState,
+				woocommerce_store_city: city,
+				woocommerce_store_postcode: postCode,
+			},
+		} );
+
+		if ( ! isError ) {
+			goToNextStep();
+		} else {
+			addNotice( {
+				status: 'error',
+				message: __( 'There was a problem saving your store details.', 'woocommerce-admin' ),
+			} );
+		}
+	}
+
+	getCountryStateOptions() {
+		const countries = ( wcSettings.dataEndpoints && wcSettings.dataEndpoints.countries ) || [];
+
+		const countryStateOptions = countries.reduce( ( acc, country ) => {
+			if ( ! country.states.length ) {
+				acc.push( {
+					value: country.code,
+					label: decodeEntities( country.name ),
+				} );
+
+				return acc;
+			}
+
+			const countryStates = country.states.map( state => {
+				return {
+					value: country.code + ':' + state.code,
+					label: decodeEntities( country.name ) + ' -- ' + decodeEntities( state.name ),
+				};
+			} );
+
+			acc.push( ...countryStates );
+
+			return acc;
+		}, [] );
+
+		countryStateOptions.unshift( { value: '', label: '' } );
+
+		return countryStateOptions;
+	}
+
+	render() {
+		const {
+			addressLine1,
+			addressLine2,
+			city,
+			countryState,
+			countryStateOptions,
+			postCode,
+		} = this.state;
+
+		return (
+			<Fragment>
+				<H className="woocommerce-profile-wizard__header-title">
+					{ __( 'Store Details', 'woocommerce-admin' ) }
+				</H>
+				<H className="woocommerce-profile-wizard__header-subtitle">
+					{ __( 'Tell us about your store', 'woocommerce-admin' ) }
+				</H>
+
+				<Card>
+					<TextControl
+						label={ __( 'Address line 1', 'woocommerce-admin' ) }
+						onChange={ value => this.setState( { addressLine1: value } ) }
+						required
+						value={ addressLine1 }
+					/>
+
+					<TextControl
+						label={ __( 'Address line 2', 'woocommerce-admin' ) }
+						onChange={ value => this.setState( { addressLine2: value } ) }
+						required
+						value={ addressLine2 }
+					/>
+
+					<SelectControl
+						label={ __( 'Country / State', 'woocommerce-admin' ) }
+						onChange={ value => this.setState( { countryState: value } ) }
+						options={ countryStateOptions }
+						value={ countryState }
+						required
+					/>
+
+					<TextControl
+						label={ __( 'City', 'woocommerce-admin' ) }
+						onChange={ value => this.setState( { city: value } ) }
+						required
+						value={ city }
+					/>
+
+					<TextControl
+						label={ __( 'Post code', 'woocommerce-admin' ) }
+						onChange={ value => this.setState( { postCode: value } ) }
+						required
+						value={ postCode }
+					/>
+
+					<Button isPrimary onClick={ this.onContinue } disabled={ ! this.isValidForm() }>
+						{ __( 'Continue', 'woocommerce-admin' ) }
+					</Button>
+				</Card>
+			</Fragment>
+		);
+	}
+}
+
+export default compose(
+	withSelect( select => {
+		const { getSettings, getSettingsError, isGetSettingsRequesting } = select( 'wc-api' );
+
+		const settings = getSettings( 'general' );
+		const isError = Boolean( getSettingsError( 'general' ) );
+		const isRequesting = isGetSettingsRequesting( 'general' );
+
+		return { getSettings, isError, isRequesting, settings };
+	} ),
+	withDispatch( dispatch => {
+		const { addNotice } = dispatch( 'wc-api' );
+		const { updateSettings } = dispatch( 'wc-api' );
+
+		return {
+			addNotice,
+			updateSettings,
+		};
+	} )
+)( StoreDetails );

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

@@ -15,6 +15,8 @@
 	}
 
 	.woocommerce-card {
+		margin-top: $gap;
+
 		h1,
 		h2,
 		h3 {
@@ -26,6 +28,13 @@
 		button {
 			display: flex;
 			margin: 0 auto;
+			min-width: 310px;
+			max-width: 100%;
+			justify-content: center;
+
+			&:disabled {
+				display: none;
+			}
 		}
 	}
 
@@ -37,7 +46,7 @@
 		&.is-active,
 		&.is-complete {
 			.woocommerce-stepper__step-icon {
-				background: $muriel-gray-900;
+				background: $muriel-hot-purple-600;
 				color: $muriel-white;
 			}
 
@@ -47,7 +56,7 @@
 		}
 
 		.woocommerce-spinner__circle {
-			stroke: $muriel-gray-900;
+			stroke: $muriel-hot-purple-600;
 		}
 	}
 
@@ -73,6 +82,16 @@
 		font-size: 24px;
 		line-height: 32px;
 		font-weight: 400;
+		margin-bottom: $gap-smaller;
+	}
+
+	.woocommerce-profile-wizard__header-subtitle {
+		color: $muriel-gray-600;
+		font-size: 16px;
+		line-height: 24px;
+		font-weight: 400;
+		margin-top: $gap-smaller;
+		margin-bottom: $gap;
 	}
 
 	.woocommerce-profile-wizard__container {
@@ -116,7 +135,7 @@
 			}
 
 			input {
-				top: 15px;
+				top: 14px;
 			}
 		}
 
@@ -146,14 +165,25 @@
 		margin-top: -$gap-smallest;
 	}
 
+	.muriel-input-text,
+	.muriel-select {
+		&.with-value,
+		&.active {
+			label {
+				top: 8px;
+			}
+
+			input,
+			select {
+				top: 24px;
+			}
+		}
+	}
+
 	.muriel-input-text.active,
 	.muriel-select.active {
-		border: 2px solid $muriel-hot-purple-600;
-
-		input,
-		select {
-			top: 25px;
-		}
+		box-shadow: 0 0 0 2px $muriel-hot-purple-600;
+		border-color: transparent;
 	}
 
 	.muriel-checkbox input[type='checkbox'] {
@@ -241,6 +271,8 @@
 		min-height: 28px;
 
 		button {
+			height: 40px;
+			min-width: none;
 			display: initial;
 		}
 	}