FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
pinterest-for-woocommerce
/
assets
/
source
/
setup-guide
/
app
/
views
Edit File: WizardApp.js
/** * External dependencies */ import '@wordpress/notices'; import { __ } from '@wordpress/i18n'; import { createElement, useState, useEffect } from '@wordpress/element'; import { Spinner, Stepper } from '@woocommerce/components'; import { recordEvent } from '@woocommerce/tracks'; import { updateQueryString } from '@woocommerce/navigation'; /** * Internal dependencies */ import SetupAccount from '../steps/SetupAccount'; import ClaimWebsite from '../steps/ClaimWebsite'; import OnboardingTopBar from '../components/TopBar'; import { useSettingsSelect, useBodyClasses, useCreateNotice, } from '../helpers/effects'; /** * Onboarding Wizard component. * * @param {Object} props React props. * @param {Object} props.query The current query string, parsed into an object, from the page URL. * * @fires wcadmin_pfw_setup with `{ target: 'setup-account' | 'claim-website', trigger: 'wizard-stepper' }` when wizard's header step is clicked. * @fires wcadmin_pfw_setup with `{ target: 'claim-website' , trigger: 'setup-account-continue' }` when continue button is clicked. * * @return {JSX.Element} Rendered element. */ const WizardApp = ( { query } ) => { const [ isConnected, setIsConnected ] = useState( wcSettings.pinterest_for_woocommerce.isConnected ); const [ isBusinessConnected, setIsBusinessConnected ] = useState( wcSettings.pinterest_for_woocommerce.isBusinessConnected ); const appSettings = useSettingsSelect(); const createNotice = useCreateNotice(); useEffect( () => { if ( ! isConnected ) { setIsBusinessConnected( false ); } createNotice( 'error', wcSettings.pinterest_for_woocommerce.error ); }, [ isConnected, setIsBusinessConnected, createNotice ] ); useBodyClasses( 'wizard' ); const steps = [ { key: 'setup-account', container: SetupAccount, label: __( 'Set up your business account', 'pinterest-for-woocommerce' ), props: { setIsConnected, isConnected, setIsBusinessConnected, isBusinessConnected, }, isClickable: true, }, { key: 'claim-website', container: ClaimWebsite, label: __( 'Claim your website', 'pinterest-for-woocommerce' ), isClickable: isBusinessConnected, }, ]; const getSteps = () => { return steps.map( ( step ) => { const container = createElement( step.container, { query, step, goToNextStep: () => goToNextStep( step ), view: 'wizard', ...step.props, } ); step.content = ( <div className={ `woocommerce-setup-guide__container ${ step.key }` } > { container } </div> ); if ( step.isClickable ) { step.onClick = ( key ) => { recordEvent( 'pfw_setup', { target: key, trigger: 'wizard-stepper', } ); updateQueryString( { step: key } ); }; } return step; } ); }; const getCurrentStep = () => { const step = steps.find( ( s ) => s.key === query.step ); if ( ! step ) { return steps[ 0 ].key; } return step.key; }; const goToNextStep = ( step ) => { const currentStepIndex = steps.findIndex( ( s ) => s.key === step.key ); const nextStep = steps[ currentStepIndex + 1 ]; recordEvent( 'pfw_setup', { target: nextStep.key, trigger: step.key + '-continue', } ); if ( typeof nextStep === 'undefined' ) { return; } return updateQueryString( { step: nextStep.key } ); }; const currentStep = getCurrentStep(); return ( <div className="pinterest-for-woocommerce-setup-guide"> <OnboardingTopBar /> <div className="woocommerce-setup-guide__main"> { appSettings ? ( <Stepper currentStep={ currentStep } steps={ getSteps() } /> ) : ( <Spinner /> ) } </div> </div> ); }; export default WizardApp;
Save
Back