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

276 lines
7.4 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { Button, CheckboxControl } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { filter, find, findIndex, get } from 'lodash';
import { withDispatch } from '@wordpress/data';
/**
* WooCommerce Dependencies
*/
import { getSetting } from '@woocommerce/wc-admin-settings';
import { ONBOARDING_STORE_NAME, SETTINGS_STORE_NAME } from '@woocommerce/data';
/**
* Internal dependencies
*/
import { H, Card, TextControl } from '@woocommerce/components';
import { getCurrencyRegion } from 'dashboard/utils';
import withSelect from 'wc-api/with-select';
import { recordEvent } from 'lib/tracks';
const onboarding = getSetting( 'onboarding', {} );
class Industry extends Component {
constructor( props ) {
const profileItems = get( props, 'profileItems', {} );
let selected = profileItems.industry || [];
/**
* @todo Remove block on `updateProfileItems` refactor to wp.data dataStores.
*
* The following block is a side effect of wc-api not being truly async
* and is a temporary fix until a refactor to wp.data can take place.
*
* Calls to `updateProfileItems` in the previous screen happen async
* and won't be updated in wc-api's state when this component is initialized.
* As such, we need to make sure cbd is not initialized as selected when a
* user has changed location to non-US based.
*/
const { locationSettings } = props;
const region = getCurrencyRegion(
locationSettings.woocommerce_default_country
);
if ( region !== 'US' ) {
const cbdSlug = 'cbd-other-hemp-derived-products';
selected = selected.filter( ( industry ) => {
return cbdSlug !== industry && cbdSlug !== industry.slug;
} );
}
/**
* End block to be removed after refactor.
*/
super();
this.state = {
error: null,
selected,
textInputListContent: {},
};
this.onContinue = this.onContinue.bind( this );
this.onIndustryChange = this.onIndustryChange.bind( this );
this.onDetailChange = this.onDetailChange.bind( this );
}
async onContinue() {
await this.validateField();
if ( this.state.error ) {
return;
}
const {
createNotice,
goToNextStep,
isError,
updateProfileItems,
} = this.props;
const selectedIndustriesList = this.state.selected.map(
( industry ) => industry.slug
);
// Here the selected industries are converted to a string that is a comma separated list
const industriesWithDetail = this.state.selected
.map( ( industry ) => industry.detail )
.filter( ( n ) => n )
.join( ',' );
recordEvent( 'storeprofiler_store_industry_continue', {
store_industry: selectedIndustriesList,
industries_with_detail: industriesWithDetail,
} );
await updateProfileItems( { industry: this.state.selected } );
if ( ! isError ) {
goToNextStep();
} else {
createNotice(
'error',
__(
'There was a problem updating your industries.',
'woocommerce-admin'
)
);
}
}
async validateField() {
const error = this.state.selected.length
? null
: __( 'Please select at least one industry', 'woocommerce-admin' );
this.setState( { error } );
}
onIndustryChange( slug ) {
this.setState(
( state ) => {
const newSelected = state.selected;
const selectedIndustry = find( newSelected, { slug } );
if ( selectedIndustry ) {
const newTextInputListContent = state.textInputListContent;
newTextInputListContent[ slug ] = selectedIndustry.detail;
return {
selected:
filter( state.selected, ( value ) => {
return value.slug !== slug;
} ) || [],
textInputListContent: newTextInputListContent,
};
}
newSelected.push( {
slug,
detail: state.textInputListContent[ slug ],
} );
return {
selected: newSelected,
};
},
() => this.validateField()
);
}
onDetailChange( value, slug ) {
this.setState( ( state ) => {
const newSelected = state.selected;
const newTextInputListContent = state.textInputListContent;
const industryIndex = findIndex( newSelected, { slug } );
newSelected[ industryIndex ].detail = value;
newTextInputListContent[ slug ] = value;
return {
selected: newSelected,
textInputListContent: newTextInputListContent,
};
} );
}
render() {
const { industries } = onboarding;
const { error, selected, textInputListContent } = this.state;
const { locationSettings } = this.props;
const region = getCurrencyRegion(
locationSettings.woocommerce_default_country
);
const industryKeys = Object.keys( industries );
const filteredIndustryKeys =
region === 'US'
? industryKeys
: industryKeys.filter(
( slug ) => slug !== 'cbd-other-hemp-derived-products'
);
return (
<Fragment>
<H className="woocommerce-profile-wizard__header-title">
{ __(
'In which industry does the store operate?',
'woocommerce-admin'
) }
</H>
<H className="woocommerce-profile-wizard__header-subtitle">
{ __( 'Choose any that apply' ) }
</H>
<Card>
<div className="woocommerce-profile-wizard__checkbox-group">
{ filteredIndustryKeys.map( ( slug ) => {
const selectedIndustry = find( selected, { slug } );
return (
<div key={ `div-${ slug }` }>
<CheckboxControl
key={ `checkbox-control-${ slug }` }
label={ industries[ slug ].label }
onChange={ () =>
this.onIndustryChange( slug )
}
checked={ selectedIndustry || false }
className="woocommerce-profile-wizard__checkbox"
/>
{ industries[ slug ].use_description &&
selectedIndustry && (
<TextControl
key={ `text-control-${ selectedIndustry.slug }` }
label={
industries[
selectedIndustry.slug
].description_label
}
value={
selectedIndustry.detail ||
textInputListContent[
slug
] ||
''
}
onChange={ ( value ) =>
this.onDetailChange(
value,
selectedIndustry.slug
)
}
className="woocommerce-profile-wizard__text"
/>
) }
</div>
);
} ) }
{ error && (
<span className="woocommerce-profile-wizard__error">
{ error }
</span>
) }
</div>
<div className="woocommerce-profile-wizard__card-actions">
<Button
isPrimary
onClick={ this.onContinue }
disabled={ ! selected.length }
>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>
</div>
</Card>
</Fragment>
);
}
}
export default compose(
withSelect( ( select ) => {
const { getProfileItems, getOnboardingError } = select(
ONBOARDING_STORE_NAME
);
const { getSettings } = select( SETTINGS_STORE_NAME );
const { general: locationSettings = {} } = getSettings( 'general' );
return {
isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),
profileItems: getProfileItems(),
locationSettings,
};
} ),
withDispatch( ( dispatch ) => {
const { updateProfileItems } = dispatch( ONBOARDING_STORE_NAME );
const { createNotice } = dispatch( 'core/notices' );
return {
createNotice,
updateProfileItems,
};
} )
)( Industry );