woocommerce/plugins/woocommerce-admin/client/profile-wizard/index.js

381 lines
9.8 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { applyFilters } from '@wordpress/hooks';
import { Component, createElement } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { identity, pick } from 'lodash';
import { withDispatch, withSelect } from '@wordpress/data';
import {
getHistory,
getNewPath,
updateQueryString,
} from '@woocommerce/navigation';
import {
NOTES_STORE_NAME,
ONBOARDING_STORE_NAME,
OPTIONS_STORE_NAME,
PLUGINS_STORE_NAME,
withPluginsHydration,
QUERY_DEFAULTS,
} from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { getAdminLink, getSetting } from '@woocommerce/settings';
/**
* Internal dependencies
*/
import { BusinessDetailsStep } from './steps/business-details';
import Industry from './steps/industry';
import ProductTypes from './steps/product-types';
import ProfileWizardHeader from './header';
import StoreDetails from './steps/store-details';
import Theme from './steps/theme';
import { getAdminSetting } from '~/utils/admin-settings';
import './style.scss';
const STEPS_FILTER = 'woocommerce_admin_profile_wizard_steps';
class ProfileWizard extends Component {
constructor( props ) {
super( props );
this.cachedActivePlugins = props.activePlugins;
this.goToNextStep = this.goToNextStep.bind( this );
this.trackStepValueChanges = this.trackStepValueChanges.bind( this );
this.updateCurrentStepValues = this.updateCurrentStepValues.bind(
this
);
this.stepValueChanges = {};
}
componentDidUpdate( prevProps ) {
const { step: prevStep } = prevProps.query;
const { step } = this.props.query;
const {
isError,
isGetProfileItemsRequesting,
createNotice,
} = this.props;
const isRequestError =
! isGetProfileItemsRequesting && prevProps.isRequesting && isError;
if ( isRequestError ) {
createNotice(
'error',
__(
'There was a problem finishing the setup wizard',
'woocommerce'
)
);
}
if ( prevStep !== step ) {
window.document.documentElement.scrollTop = 0;
recordEvent( 'storeprofiler_step_view', {
step: this.getCurrentStep().key,
wc_version: getSetting( 'wcVersion' ),
} );
}
}
componentDidMount() {
document.body.classList.remove( 'woocommerce-admin-is-loading' );
document.body.classList.add( 'woocommerce-profile-wizard__body' );
document.body.classList.add( 'woocommerce-admin-full-screen' );
document.body.classList.add( 'is-wp-toolbar-disabled' );
recordEvent( 'storeprofiler_step_view', {
step: this.getCurrentStep().key,
wc_version: getSetting( 'wcVersion' ),
} );
}
componentWillUnmount() {
document.body.classList.remove( 'woocommerce-profile-wizard__body' );
document.body.classList.remove( 'woocommerce-admin-full-screen' );
document.body.classList.remove( 'is-wp-toolbar-disabled' );
}
/**
* Set the initial and current values of a step to track the state of the step.
* This is used to determine if the step has been changes or not.
*
* @param {string} step key of the step
* @param {*} initialValues the initial values of the step
* @param {*} currentValues the current values of the step
* @param {Function} onSave a function to call when the step is saved
*/
trackStepValueChanges( step, initialValues, currentValues, onSave ) {
this.stepValueChanges[ step ] = {
initialValues,
currentValues,
onSave,
};
}
/**
* Update currentValues of the given step.
*
* @param {string} step key of the step
* @param {*} currentValues the current values of the step
*/
updateCurrentStepValues( step, currentValues ) {
if ( ! this.stepValueChanges[ step ] ) {
return;
}
this.stepValueChanges[ step ].currentValues = currentValues;
}
getSteps() {
const { profileItems } = this.props;
const steps = [];
steps.push( {
key: 'store-details',
container: StoreDetails,
label: __( 'Store Details', 'woocommerce' ),
isComplete:
profileItems.hasOwnProperty( 'setup_client' ) &&
profileItems.setup_client !== null,
} );
steps.push( {
key: 'industry',
container: Industry,
label: __( 'Industry', 'woocommerce' ),
isComplete:
profileItems.hasOwnProperty( 'industry' ) &&
profileItems.industry !== null,
} );
steps.push( {
key: 'product-types',
container: ProductTypes,
label: __( 'Product Types', 'woocommerce' ),
isComplete:
profileItems.hasOwnProperty( 'product_types' ) &&
profileItems.product_types !== null,
} );
steps.push( {
key: 'business-details',
container: BusinessDetailsStep,
label: __( 'Business Details', 'woocommerce' ),
isComplete:
profileItems.hasOwnProperty( 'product_count' ) &&
profileItems.product_count !== null,
} );
steps.push( {
key: 'theme',
container: Theme,
label: __( 'Theme', 'woocommerce' ),
isComplete:
profileItems.hasOwnProperty( 'theme' ) &&
profileItems.theme !== null,
} );
/**
* Filter for Onboarding steps configuration.
*
* @filter woocommerce_admin_profile_wizard_steps
* @param {Array.<Object>} steps Array of steps for Onboarding Wizard.
*/
return applyFilters( STEPS_FILTER, steps );
}
getCurrentStep() {
const { step } = this.props.query;
const currentStep = this.getSteps().find( ( s ) => s.key === step );
if ( ! currentStep ) {
return this.getSteps()[ 0 ];
}
return currentStep;
}
/**
* @param {Object} tracksArgs optional track arguments for the storeprofiler_step_complete track.
*/
async goToNextStep( tracksArgs = {} ) {
const { activePlugins } = this.props;
const currentStep = this.getCurrentStep();
const currentStepIndex = this.getSteps().findIndex(
( s ) => s.key === currentStep.key
);
recordEvent( 'storeprofiler_step_complete', {
step: currentStep.key,
wc_version: getSetting( 'wcVersion' ),
...tracksArgs,
} );
// Update the activePlugins cache in case plugins were installed
// in the current step that affect the visibility of the next step.
this.cachedActivePlugins = activePlugins;
const nextStep = this.getSteps()[ currentStepIndex + 1 ];
if ( typeof nextStep === 'undefined' ) {
this.completeProfiler();
return;
}
return updateQueryString( { step: nextStep.key } );
}
completeProfiler() {
const {
activePlugins,
isJetpackConnected,
notes,
updateNote,
updateProfileItems,
connectToJetpack,
} = this.props;
recordEvent( 'storeprofiler_complete' );
const shouldConnectJetpack =
activePlugins.includes( 'jetpack' ) && ! isJetpackConnected;
const profilerNote = notes.find(
( note ) => note.name === 'wc-admin-onboarding-profiler-reminder'
);
if ( profilerNote ) {
updateNote( profilerNote.id, { status: 'actioned' } );
}
updateProfileItems( { completed: true } ).then( () => {
const homescreenUrl = new URL(
getNewPath( {}, '/', {} ),
window.location.href
).href;
if ( shouldConnectJetpack ) {
document.body.classList.add( 'woocommerce-admin-is-loading' );
connectToJetpack( () => {
return homescreenUrl;
} );
} else {
window.location.href = homescreenUrl;
}
} );
}
skipProfiler() {
const { createNotice, updateProfileItems } = this.props;
updateProfileItems( { skipped: true } )
.then( () => {
recordEvent( 'storeprofiler_store_details_skip' );
getHistory().push( getNewPath( {}, '/', {} ) );
} )
.catch( () => {
createNotice(
'error',
__(
'There was a problem skipping the setup wizard',
'woocommerce'
)
);
} );
}
render() {
const { query } = this.props;
const step = this.getCurrentStep();
const stepKey = step.key;
const container = createElement( step.container, {
query,
step,
goToNextStep: this.goToNextStep,
skipProfiler: () => {
this.skipProfiler();
},
trackStepValueChanges: this.trackStepValueChanges,
updateCurrentStepValues: this.updateCurrentStepValues,
} );
const steps = this.getSteps().map( ( _step ) =>
pick( _step, [ 'key', 'label', 'isComplete' ] )
);
const classNames = `woocommerce-profile-wizard__container ${ stepKey }`;
return (
<>
<ProfileWizardHeader
currentStep={ stepKey }
steps={ steps }
stepValueChanges={ this.stepValueChanges }
/>
<div className={ classNames }>{ container }</div>
</>
);
}
}
export default compose(
withSelect( ( select ) => {
const { getNotes } = select( NOTES_STORE_NAME );
const { getProfileItems, getOnboardingError } = select(
ONBOARDING_STORE_NAME
);
const {
getActivePlugins,
getPluginsError,
isJetpackConnected,
} = select( PLUGINS_STORE_NAME );
const profileItems = getProfileItems();
const notesQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
type: 'update',
status: 'unactioned',
};
const notes = getNotes( notesQuery );
const activePlugins = getActivePlugins();
return {
getPluginsError,
isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),
isJetpackConnected: isJetpackConnected(),
notes,
profileItems,
activePlugins,
};
} ),
withDispatch( ( dispatch ) => {
const {
connectToJetpackWithFailureRedirect,
createErrorNotice,
} = dispatch( PLUGINS_STORE_NAME );
const { updateNote } = dispatch( NOTES_STORE_NAME );
const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
const { updateProfileItems } = dispatch( ONBOARDING_STORE_NAME );
const { createNotice } = dispatch( 'core/notices' );
const connectToJetpack = ( failureRedirect ) => {
connectToJetpackWithFailureRedirect(
failureRedirect,
createErrorNotice,
getAdminLink
);
};
return {
connectToJetpack,
createNotice,
updateNote,
updateOptions,
updateProfileItems,
};
} ),
getAdminSetting( 'plugins' )
? withPluginsHydration( {
...getAdminSetting( 'plugins' ),
jetpackStatus: getAdminSetting( 'dataEndpoints', {} )
.jetpackStatus,
} )
: identity
)( ProfileWizard );