diff --git a/assets/js/src/wizard/steps_numbers.jsx b/assets/js/src/wizard/steps_numbers.jsx new file mode 100644 index 0000000000..728087b4e2 --- /dev/null +++ b/assets/js/src/wizard/steps_numbers.jsx @@ -0,0 +1,31 @@ + +export const getStepsCount = () => { + let stepsCount = 3; + if (window.is_woocommerce_active) { + stepsCount += 1; + } + return stepsCount; +}; + +export const redirectToNextStep = (history, finishWizard, currentStep) => { + if (currentStep === 1) { + history.push('/steps/2'); + return; + } + if (currentStep === 2) { + history.push('/steps/3'); + return; + } + const stepsCount = getStepsCount(); + if (currentStep === 3 && stepsCount > 3) { + history.push('/steps/4'); + return; + } + if (currentStep === 3 && stepsCount === 3) { + finishWizard(); + return; + } + if (currentStep === 4) { + finishWizard(); + } +}; diff --git a/assets/js/src/wizard/welcome_wizard_controller.jsx b/assets/js/src/wizard/welcome_wizard_controller.jsx index 1f79979a49..bfcdff58fb 100644 --- a/assets/js/src/wizard/welcome_wizard_controller.jsx +++ b/assets/js/src/wizard/welcome_wizard_controller.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React, { useState, useEffect } from 'react'; +import { partial } from 'underscore'; import MailPoet from 'mailpoet'; import WelcomeWizardSenderStep from './steps/sender_step.jsx'; import WelcomeWizardMigratedUserStep from './steps/migrated_user_step.jsx'; @@ -9,9 +10,10 @@ import WelcomeWizardWooCommerceStep from './steps/woo_commerce_step.jsx'; import WelcomeWizardStepLayout from './steps/step_layout.jsx'; import CreateSenderSettings from './create_sender_settings.jsx'; +import { getStepsCount, redirectToNextStep } from './steps_numbers.jsx'; const WelcomeWizardStepsController = (props) => { - const stepsCount = window.is_woocommerce_active ? 4 : 3; + const stepsCount = getStepsCount(); const shouldSetSender = !window.is_mp2_migration_complete; const step = parseInt(props.match.params.step, 10); @@ -29,13 +31,7 @@ const WelcomeWizardStepsController = (props) => { window.location = window.finish_wizard_url; } - function showWooCommerceStepOrFinish() { - if (stepsCount === 4) { - props.history.push('/steps/4'); - } else { - finishWizard(); - } - } + const redirect = partial(redirectToNextStep, props.history, finishWizard); function updateSettings(data) { setLoading(true); @@ -57,7 +53,7 @@ const WelcomeWizardStepsController = (props) => { function activateTracking() { updateSettings({ analytics: { enabled: true } }).then(() => ( - showWooCommerceStepOrFinish())); + redirect(step))); } function updateSender(data) { @@ -66,7 +62,7 @@ const WelcomeWizardStepsController = (props) => { function submitSender() { updateSettings(CreateSenderSettings(sender)) - .then(() => (props.history.push('/steps/2'))); + .then(() => (redirect(step))); } function skipSenderStep() { @@ -103,7 +99,7 @@ const WelcomeWizardStepsController = (props) => { illustrationUrl={window.wizard_sender_illustration_url} > props.history.push('/steps/2')} + next={() => redirect(step)} /> ) : null @@ -117,7 +113,7 @@ const WelcomeWizardStepsController = (props) => { illustrationUrl={window.wizard_email_course_illustration_url} > props.history.push('/steps/3')} + next={() => redirect(step)} /> ) : null @@ -131,9 +127,9 @@ const WelcomeWizardStepsController = (props) => { illustrationUrl={window.wizard_tracking_illustration_url} > redirect(step)} allow_action={activateTracking} - allow_text={stepsCount === 4 + allow_text={stepsCount > 3 ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')} loading={loading} /> @@ -149,7 +145,7 @@ const WelcomeWizardStepsController = (props) => { illustrationUrl={window.wizard_woocommerce_illustration_url} > redirect(step)} screenshot_src={window.wizard_woocommerce_box_url} loading={loading} />