Disable profile wizard continue buttons until fields are complete (https://github.com/woocommerce/woocommerce-admin/pull/2983)
This commit is contained in:
parent
9f38e2d619
commit
6bcc63f2de
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -106,6 +106,7 @@ class Form extends Component {
|
|||
setValue: this.setValue,
|
||||
handleSubmit: this.handleSubmit,
|
||||
getInputProps: this.getInputProps,
|
||||
isValidForm: ! Object.keys( errors ).length,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue