From 6bcc63f2de50c2ea7f8bbfeda70a83c81f888ea8 Mon Sep 17 00:00:00 2001
From: Justin Shreve <justin.shreve@gmail.com>
Date: Fri, 4 Oct 2019 09:46:27 -0400
Subject: [PATCH] Disable profile wizard continue buttons until fields are
 complete (https://github.com/woocommerce/woocommerce-admin/pull/2983)

---
 .../client/dashboard/profile-wizard/steps/business-details.js | 3 ++-
 .../client/dashboard/profile-wizard/steps/industry.js         | 4 ++--
 .../client/dashboard/profile-wizard/steps/product-types.js    | 3 ++-
 .../client/dashboard/profile-wizard/steps/store-details.js    | 4 ++--
 .../client/dashboard/profile-wizard/style.scss                | 3 +--
 .../woocommerce-admin/packages/components/src/form/index.js   | 1 +
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
index f32e3f3bf38..388146fc34e 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
@@ -304,7 +304,7 @@ class BusinessDetails extends Component {
 				onSubmitCallback={ this.onContinue }
 				validate={ this.validate }
 			>
-				{ ( { getInputProps, handleSubmit, values } ) => {
+				{ ( { getInputProps, handleSubmit, values, isValidForm } ) => {
 					// Show extensions when the currently selling elsewhere checkbox has been answered.
 					const showExtensions = '' !== values.selling_venues;
 					return (
@@ -360,6 +360,7 @@ class BusinessDetails extends Component {
 										isPrimary
 										className="woocommerce-profile-wizard__continue"
 										onClick={ handleSubmit }
+										disabled={ ! isValidForm }
 									>
 										{ __( 'Continue', 'woocommerce-admin' ) }
 									</Button>
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
index 8a3a3a5f8ed..31a453d05ee 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
@@ -85,7 +85,7 @@ class Industry extends Component {
 
 	render() {
 		const { industries } = onboarding;
-		const { error } = this.state;
+		const { error, selected } = this.state;
 		return (
 			<Fragment>
 				<H className="woocommerce-profile-wizard__header-title">
@@ -108,7 +108,7 @@ class Industry extends Component {
 						{ error && <span className="woocommerce-profile-wizard__error">{ error }</span> }
 					</div>
 
-					<Button isPrimary onClick={ this.onContinue }>
+					<Button isPrimary onClick={ this.onContinue } disabled={ ! selected.length }>
 						{ __( 'Continue', 'woocommerce-admin' ) }
 					</Button>
 				</Card>
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
index 22be060cffe..626fe874d85 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
@@ -87,7 +87,7 @@ class ProductTypes extends Component {
 
 	render() {
 		const { productTypes } = wcSettings.onboarding;
-		const { error } = this.state;
+		const { error, selected } = this.state;
 		return (
 			<Fragment>
 				<H className="woocommerce-profile-wizard__header-title">
@@ -134,6 +134,7 @@ class ProductTypes extends Component {
 						isPrimary
 						className="woocommerce-profile-wizard__continue"
 						onClick={ this.onContinue }
+						disabled={ ! selected.length }
 					>
 						{ __( 'Continue', 'woocommerce-admin' ) }
 					</Button>
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js
index 36b0044bb3a..12fe2ee4163 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js
@@ -92,7 +92,7 @@ class StoreDetails extends Component {
 						onSubmitCallback={ this.onContinue }
 						validate={ validateStoreAddress }
 					>
-						{ ( { getInputProps, handleSubmit } ) => (
+						{ ( { getInputProps, handleSubmit, isValidForm } ) => (
 							<Fragment>
 								<StoreAddress getInputProps={ getInputProps } />
 								<CheckboxControl
@@ -100,7 +100,7 @@ class StoreDetails extends Component {
 									{ ...getInputProps( 'isClient' ) }
 								/>
 
-								<Button isPrimary onClick={ handleSubmit }>
+								<Button isPrimary onClick={ handleSubmit } disabled={ ! isValidForm }>
 									{ __( 'Continue', 'woocommerce-admin' ) }
 								</Button>
 							</Fragment>
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
index cd512230b7f..5627f065d0d 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
@@ -130,8 +130,7 @@
 
 	.woocommerce-profile-wizard__error {
 		display: block;
-		margin-top: $gap;
-		margin-bottom: $gap;
+		padding: $gap;
 		font-size: 12px;
 		color: $studio-red-50;
 	}
diff --git a/plugins/woocommerce-admin/packages/components/src/form/index.js b/plugins/woocommerce-admin/packages/components/src/form/index.js
index db97dfef0d9..6eaedc54834 100644
--- a/plugins/woocommerce-admin/packages/components/src/form/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/form/index.js
@@ -106,6 +106,7 @@ class Form extends Component {
 			setValue: this.setValue,
 			handleSubmit: this.handleSubmit,
 			getInputProps: this.getInputProps,
+			isValidForm: ! Object.keys( errors ).length,
 		};
 	}