111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Component, Fragment } from '@wordpress/element';
|
|
import { Button, CheckboxControl } from 'newspack-components';
|
|
import { includes, filter } from 'lodash';
|
|
import { compose } from '@wordpress/compose';
|
|
import { withDispatch } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { H, Card } from '@woocommerce/components';
|
|
import withSelect from 'wc-api/with-select';
|
|
|
|
class Industry extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
selected: [],
|
|
};
|
|
this.onContinue = this.onContinue.bind( this );
|
|
this.onChange = this.onChange.bind( this );
|
|
}
|
|
|
|
async onContinue() {
|
|
const { addNotice, goToNextStep, isError, updateProfileItems } = this.props;
|
|
|
|
await updateProfileItems( { industry: this.state.selected } );
|
|
|
|
if ( ! isError ) {
|
|
goToNextStep();
|
|
} else {
|
|
addNotice( {
|
|
status: 'error',
|
|
message: __( 'There was a problem updating your industries.', 'woocommerce-admin' ),
|
|
} );
|
|
}
|
|
}
|
|
|
|
onChange( slug ) {
|
|
this.setState( state => {
|
|
if ( includes( state.selected, slug ) ) {
|
|
return {
|
|
selected:
|
|
filter( state.selected, value => {
|
|
return value !== slug;
|
|
} ) || [],
|
|
};
|
|
}
|
|
const newSelected = state.selected;
|
|
newSelected.push( slug );
|
|
return {
|
|
selected: newSelected,
|
|
};
|
|
} );
|
|
}
|
|
|
|
render() {
|
|
const { industries } = wcSettings.onboarding;
|
|
const { selected } = this.state;
|
|
return (
|
|
<Fragment>
|
|
<H className="woocommerce-profile-wizard__header-title">
|
|
{ __( 'In which industry does the store operate?', 'woocommerce-admin' ) }
|
|
</H>
|
|
<p>{ __( 'Choose any that apply' ) }</p>
|
|
<Card className="woocommerce-profile-wizard__industry-card">
|
|
<div className="woocommerce-profile-wizard__checkbox-group">
|
|
{ Object.keys( industries ).map( slug => {
|
|
return (
|
|
<CheckboxControl
|
|
key={ slug }
|
|
label={ industries[ slug ] }
|
|
onChange={ () => this.onChange( slug ) }
|
|
/>
|
|
);
|
|
} ) }
|
|
</div>
|
|
|
|
{ selected.length > 0 && (
|
|
<Button isPrimary onClick={ this.onContinue }>
|
|
{ __( 'Continue', 'woocommerce-admin' ) }
|
|
</Button>
|
|
) }
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
withSelect( select => {
|
|
const { getProfileItemsError } = select( 'wc-api' );
|
|
|
|
const isError = Boolean( getProfileItemsError() );
|
|
|
|
return { isError };
|
|
} ),
|
|
withDispatch( dispatch => {
|
|
const { addNotice, updateProfileItems } = dispatch( 'wc-api' );
|
|
|
|
return {
|
|
addNotice,
|
|
updateProfileItems,
|
|
};
|
|
} )
|
|
)( Industry );
|