436 lines
10 KiB
JavaScript
436 lines
10 KiB
JavaScript
/**
|
||
* External dependencies
|
||
*/
|
||
import { __ } from '@wordpress/i18n';
|
||
import apiFetch from '@wordpress/api-fetch';
|
||
import { Button } from '@wordpress/components';
|
||
import { Component, Fragment } from '@wordpress/element';
|
||
import { compose } from '@wordpress/compose';
|
||
import { filter } from 'lodash';
|
||
import { withDispatch, withSelect } from '@wordpress/data';
|
||
|
||
import {
|
||
Card,
|
||
Stepper,
|
||
TextControl,
|
||
ImageUpload,
|
||
} from '@woocommerce/components';
|
||
import { getHistory, getNewPath } from '@woocommerce/navigation';
|
||
import { getSetting, setSetting } from '@woocommerce/wc-admin-settings';
|
||
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||
import { queueRecordEvent, recordEvent } from '@woocommerce/tracks';
|
||
|
||
/**
|
||
* Internal dependencies
|
||
*/
|
||
import { WC_ADMIN_NAMESPACE } from '../../wc-api/constants';
|
||
|
||
class Appearance extends Component {
|
||
constructor( props ) {
|
||
super( props );
|
||
const { hasHomepage, hasProducts } = getSetting( 'onboarding', {} );
|
||
|
||
this.stepVisibility = {
|
||
homepage: ! hasHomepage,
|
||
import: ! hasProducts,
|
||
};
|
||
|
||
this.state = {
|
||
isDirty: false,
|
||
isPending: false,
|
||
logo: null,
|
||
stepIndex: 0,
|
||
isUpdatingLogo: false,
|
||
isUpdatingNotice: false,
|
||
storeNoticeText: props.demoStoreNotice || '',
|
||
};
|
||
|
||
this.completeStep = this.completeStep.bind( this );
|
||
this.createHomepage = this.createHomepage.bind( this );
|
||
this.importProducts = this.importProducts.bind( this );
|
||
this.updateLogo = this.updateLogo.bind( this );
|
||
this.updateNotice = this.updateNotice.bind( this );
|
||
}
|
||
|
||
componentDidMount() {
|
||
const { themeMods } = getSetting( 'onboarding', {} );
|
||
|
||
if ( themeMods.custom_logo ) {
|
||
/* eslint-disable react/no-did-mount-set-state */
|
||
this.setState( { logo: { id: themeMods.custom_logo } } );
|
||
/* eslint-enable react/no-did-mount-set-state */
|
||
}
|
||
}
|
||
|
||
componentDidUpdate( prevProps ) {
|
||
const { isPending, logo } = this.state;
|
||
const { demoStoreNotice } = this.props;
|
||
|
||
if ( logo && ! logo.url && ! isPending ) {
|
||
/* eslint-disable react/no-did-update-set-state */
|
||
this.setState( { isPending: true } );
|
||
wp.media
|
||
.attachment( logo.id )
|
||
.fetch()
|
||
.then( () => {
|
||
const logoUrl = wp.media.attachment( logo.id ).get( 'url' );
|
||
this.setState( {
|
||
isPending: false,
|
||
logo: { id: logo.id, url: logoUrl },
|
||
} );
|
||
} );
|
||
/* eslint-enable react/no-did-update-set-state */
|
||
}
|
||
|
||
if (
|
||
demoStoreNotice &&
|
||
prevProps.demoStoreNotice !== demoStoreNotice
|
||
) {
|
||
/* eslint-disable react/no-did-update-set-state */
|
||
this.setState( {
|
||
storeNoticeText: demoStoreNotice,
|
||
} );
|
||
/* eslint-enable react/no-did-update-set-state */
|
||
}
|
||
}
|
||
|
||
completeStep() {
|
||
const { stepIndex } = this.state;
|
||
const nextStep = this.getSteps()[ stepIndex + 1 ];
|
||
|
||
if ( nextStep ) {
|
||
this.setState( { stepIndex: stepIndex + 1 } );
|
||
} else {
|
||
getHistory().push( getNewPath( {}, '/', {} ) );
|
||
}
|
||
}
|
||
|
||
importProducts() {
|
||
const { createNotice } = this.props;
|
||
this.setState( { isPending: true } );
|
||
|
||
recordEvent( 'tasklist_appearance_import_demo', {} );
|
||
|
||
apiFetch( {
|
||
path: `${ WC_ADMIN_NAMESPACE }/onboarding/tasks/import_sample_products`,
|
||
method: 'POST',
|
||
} )
|
||
.then( ( result ) => {
|
||
if ( result.failed && result.failed.length ) {
|
||
createNotice(
|
||
'error',
|
||
__(
|
||
'There was an error importing some of the sample products.',
|
||
'woocommerce-admin'
|
||
)
|
||
);
|
||
} else {
|
||
createNotice(
|
||
'success',
|
||
__(
|
||
'All sample products have been imported.',
|
||
'woocommerce-admin'
|
||
)
|
||
);
|
||
setSetting( 'onboarding', {
|
||
...getSetting( 'onboarding', {} ),
|
||
hasProducts: true,
|
||
} );
|
||
}
|
||
|
||
this.setState( { isPending: false } );
|
||
this.completeStep();
|
||
} )
|
||
.catch( ( error ) => {
|
||
createNotice( 'error', error.message );
|
||
this.setState( { isPending: false } );
|
||
} );
|
||
}
|
||
|
||
createHomepage() {
|
||
const { createNotice } = this.props;
|
||
this.setState( { isPending: true } );
|
||
|
||
recordEvent( 'tasklist_appearance_create_homepage', {
|
||
create_homepage: true,
|
||
} );
|
||
|
||
apiFetch( {
|
||
path: '/wc-admin/onboarding/tasks/create_homepage',
|
||
method: 'POST',
|
||
} )
|
||
.then( ( response ) => {
|
||
createNotice( response.status, response.message, {
|
||
actions: response.edit_post_link
|
||
? [
|
||
{
|
||
label: __(
|
||
'Customize',
|
||
'woocommerce-admin'
|
||
),
|
||
onClick: () => {
|
||
queueRecordEvent(
|
||
'tasklist_appearance_customize_homepage',
|
||
{}
|
||
);
|
||
window.location = `${ response.edit_post_link }&wc_onboarding_active_task=homepage`;
|
||
},
|
||
},
|
||
]
|
||
: null,
|
||
} );
|
||
|
||
this.setState( { isPending: false } );
|
||
this.completeStep();
|
||
} )
|
||
.catch( ( error ) => {
|
||
createNotice( 'error', error.message );
|
||
this.setState( { isPending: false } );
|
||
} );
|
||
}
|
||
|
||
async updateLogo() {
|
||
const { updateOptions, createNotice } = this.props;
|
||
const { logo } = this.state;
|
||
const { stylesheet, themeMods } = getSetting( 'onboarding', {} );
|
||
const updatedThemeMods = {
|
||
...themeMods,
|
||
custom_logo: logo ? logo.id : null,
|
||
};
|
||
|
||
recordEvent( 'tasklist_appearance_upload_logo' );
|
||
|
||
setSetting( 'onboarding', {
|
||
...getSetting( 'onboarding', {} ),
|
||
themeMods: updatedThemeMods,
|
||
} );
|
||
|
||
this.setState( { isUpdatingLogo: true } );
|
||
const update = await updateOptions( {
|
||
[ `theme_mods_${ stylesheet }` ]: updatedThemeMods,
|
||
} );
|
||
|
||
if ( update.success ) {
|
||
this.setState( { isUpdatingLogo: false } );
|
||
createNotice(
|
||
'success',
|
||
__( 'Store logo updated sucessfully.', 'woocommerce-admin' )
|
||
);
|
||
this.completeStep();
|
||
} else {
|
||
createNotice( 'error', update.message );
|
||
}
|
||
}
|
||
|
||
async updateNotice() {
|
||
const { updateOptions, createNotice } = this.props;
|
||
const { storeNoticeText } = this.state;
|
||
|
||
recordEvent( 'tasklist_appearance_set_store_notice', {
|
||
added_text: Boolean( storeNoticeText.length ),
|
||
} );
|
||
|
||
setSetting( 'onboarding', {
|
||
...getSetting( 'onboarding', {} ),
|
||
isAppearanceComplete: true,
|
||
} );
|
||
|
||
this.setState( { isUpdatingNotice: true } );
|
||
const update = await updateOptions( {
|
||
woocommerce_task_list_appearance_complete: true,
|
||
woocommerce_demo_store: storeNoticeText.length ? 'yes' : 'no',
|
||
woocommerce_demo_store_notice: storeNoticeText,
|
||
} );
|
||
|
||
if ( update.success ) {
|
||
this.setState( { isUpdatingNotice: false } );
|
||
createNotice(
|
||
'success',
|
||
__(
|
||
"🎨 Your store is looking great! Don't forget to continue personalizing it.",
|
||
'woocommerce-admin'
|
||
)
|
||
);
|
||
this.completeStep();
|
||
} else {
|
||
createNotice( 'error', update.message );
|
||
}
|
||
}
|
||
|
||
getSteps() {
|
||
const {
|
||
isDirty,
|
||
isPending,
|
||
logo,
|
||
storeNoticeText,
|
||
isUpdatingLogo,
|
||
} = this.state;
|
||
|
||
const steps = [
|
||
{
|
||
key: 'import',
|
||
label: __( 'Import sample products', 'woocommerce-admin' ),
|
||
description: __(
|
||
'We’ll add some products that will make it easier to see what your store looks like',
|
||
'woocommerce-admin'
|
||
),
|
||
content: (
|
||
<Fragment>
|
||
<Button
|
||
onClick={ this.importProducts }
|
||
isBusy={ isPending }
|
||
isPrimary
|
||
>
|
||
{ __( 'Import products', 'woocommerce-admin' ) }
|
||
</Button>
|
||
<Button onClick={ () => this.completeStep() }>
|
||
{ __( 'Skip', 'woocommerce-admin' ) }
|
||
</Button>
|
||
</Fragment>
|
||
),
|
||
visible: this.stepVisibility.import,
|
||
},
|
||
{
|
||
key: 'homepage',
|
||
label: __( 'Create a custom homepage', 'woocommerce-admin' ),
|
||
description: __(
|
||
'Create a new homepage and customize it to suit your needs',
|
||
'woocommerce-admin'
|
||
),
|
||
content: (
|
||
<Fragment>
|
||
<Button
|
||
isPrimary
|
||
isBusy={ isPending }
|
||
onClick={ this.createHomepage }
|
||
>
|
||
{ __( 'Create homepage', 'woocommerce-admin' ) }
|
||
</Button>
|
||
<Button
|
||
onClick={ () => {
|
||
recordEvent(
|
||
'tasklist_appearance_create_homepage',
|
||
{ create_homepage: false }
|
||
);
|
||
this.completeStep();
|
||
} }
|
||
>
|
||
{ __( 'Skip', 'woocommerce-admin' ) }
|
||
</Button>
|
||
</Fragment>
|
||
),
|
||
visible: this.stepVisibility.homepage,
|
||
},
|
||
{
|
||
key: 'logo',
|
||
label: __( 'Upload a logo', 'woocommerce-admin' ),
|
||
description: __(
|
||
'Ensure your store is on-brand by adding your logo',
|
||
'woocommerce-admin'
|
||
),
|
||
content: isPending ? null : (
|
||
<Fragment>
|
||
<ImageUpload
|
||
image={ logo }
|
||
onChange={ ( image ) =>
|
||
this.setState( { isDirty: true, logo: image } )
|
||
}
|
||
/>
|
||
<Button
|
||
disabled={ ! logo && ! isDirty }
|
||
onClick={ this.updateLogo }
|
||
isBusy={ isUpdatingLogo }
|
||
isPrimary
|
||
>
|
||
{ __( 'Proceed', 'woocommerce-admin' ) }
|
||
</Button>
|
||
<Button
|
||
isTertiary
|
||
onClick={ () => this.completeStep() }
|
||
>
|
||
{ __( 'Skip', 'woocommerce-admin' ) }
|
||
</Button>
|
||
</Fragment>
|
||
),
|
||
visible: true,
|
||
},
|
||
{
|
||
key: 'notice',
|
||
label: __( 'Set a store notice', 'woocommerce-admin' ),
|
||
description: __(
|
||
'Optionally display a prominent notice across all pages of your store',
|
||
'woocommerce-admin'
|
||
),
|
||
content: (
|
||
<Fragment>
|
||
<TextControl
|
||
label={ __(
|
||
'Store notice text',
|
||
'woocommerce-admin'
|
||
) }
|
||
placeholder={ __(
|
||
'Store notice text',
|
||
'woocommerce-admin'
|
||
) }
|
||
value={ storeNoticeText }
|
||
onChange={ ( value ) =>
|
||
this.setState( { storeNoticeText: value } )
|
||
}
|
||
/>
|
||
<Button onClick={ this.updateNotice } isPrimary>
|
||
{ __( 'Complete task', 'woocommerce-admin' ) }
|
||
</Button>
|
||
</Fragment>
|
||
),
|
||
visible: true,
|
||
},
|
||
];
|
||
|
||
return filter( steps, ( step ) => step.visible );
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
isPending,
|
||
stepIndex,
|
||
isUpdatingLogo,
|
||
isUpdatingNotice,
|
||
} = this.state;
|
||
const currentStep = this.getSteps()[ stepIndex ].key;
|
||
|
||
return (
|
||
<div className="woocommerce-task-appearance">
|
||
<Card className="is-narrow">
|
||
<Stepper
|
||
isPending={
|
||
isUpdatingNotice || isUpdatingLogo || isPending
|
||
}
|
||
isVertical
|
||
currentStep={ currentStep }
|
||
steps={ this.getSteps() }
|
||
/>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default compose(
|
||
withSelect( ( select ) => {
|
||
const { getOption } = select( OPTIONS_STORE_NAME );
|
||
|
||
return {
|
||
demoStoreNotice: getOption( 'woocommerce_demo_store_notice' ),
|
||
};
|
||
} ),
|
||
withDispatch( ( dispatch ) => {
|
||
const { createNotice } = dispatch( 'core/notices' );
|
||
const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
|
||
|
||
return {
|
||
createNotice,
|
||
updateOptions,
|
||
};
|
||
} )
|
||
)( Appearance );
|