Refactor welcome wizard controller to function component
[MAILPOET-1916]
This commit is contained in:
Rostislav Wolny
committed by
M. Shull
M. Shull
parent
496103da5e
commit
3ddf14213d
@@ -1,5 +1,5 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import WelcomeWizardHeader from './header.jsx';
|
||||
import WelcomeWizardSenderStep from './steps/sender_step.jsx';
|
||||
@@ -8,57 +8,42 @@ import WelcomeWizardEmailCourseStep from './steps/email_course_step.jsx';
|
||||
import WelcomeWizardUsageTrackingStep from './steps/usage_tracking_step.jsx';
|
||||
import WelcomeWizardWooCommerceStep from './steps/woo_commerce_step.jsx';
|
||||
|
||||
class WelcomeWizardStepsController extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const WelcomeWizardStepsController = (props) => {
|
||||
const [stepsCount] = useState(window.is_woocommerce_active ? 4 : 3);
|
||||
const [shouldSetSender] = useState(!window.is_mp2_migration_complete);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sender, setSender] = useState(window.sender_data);
|
||||
const [replyTo, setReplyTo] = useState(window.reply_to_data);
|
||||
|
||||
this.state = {
|
||||
stepsCount: window.is_woocommerce_active ? 4 : 3,
|
||||
shouldSetSender: !window.is_mp2_migration_complete,
|
||||
loading: false,
|
||||
sender: window.sender_data,
|
||||
replyTo: window.reply_to_data,
|
||||
};
|
||||
|
||||
this.finishWizard = this.finishWizard.bind(this);
|
||||
this.updateSettings = this.updateSettings.bind(this);
|
||||
this.activateTracking = this.activateTracking.bind(this);
|
||||
this.updateSender = this.updateSender.bind(this);
|
||||
this.updateReplyTo = this.updateReplyTo.bind(this);
|
||||
this.submitSender = this.submitSender.bind(this);
|
||||
this.showWooCommerceStepOrFinish = this.showWooCommerceStepOrFinish.bind(this);
|
||||
this.componentDidUpdate();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const step = parseInt(this.props.match.params.step, 10);
|
||||
if (step > this.state.stepsCount || step < 1) {
|
||||
this.props.history.push('/steps/1');
|
||||
useEffect(() => {
|
||||
const step = parseInt(props.match.params.step, 10);
|
||||
if (step > stepsCount || step < 1) {
|
||||
props.history.push('/steps/1');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
finishWizard() {
|
||||
this.setState({ loading: true });
|
||||
function finishWizard() {
|
||||
setLoading(true);
|
||||
window.location = window.finish_wizard_url;
|
||||
}
|
||||
|
||||
showWooCommerceStepOrFinish() {
|
||||
if (this.state.stepsCount === 4) {
|
||||
this.props.history.push('/steps/4');
|
||||
function showWooCommerceStepOrFinish() {
|
||||
if (stepsCount === 4) {
|
||||
props.history.push('/steps/4');
|
||||
} else {
|
||||
this.finishWizard();
|
||||
finishWizard();
|
||||
}
|
||||
}
|
||||
|
||||
updateSettings(data) {
|
||||
this.setState({ loading: true });
|
||||
function updateSettings(data) {
|
||||
setLoading(true);
|
||||
return MailPoet.Ajax.post({
|
||||
api_version: window.mailpoet_api_version,
|
||||
endpoint: 'settings',
|
||||
action: 'set',
|
||||
data,
|
||||
}).then(() => this.setState({ loading: false })).fail((response) => {
|
||||
this.setState({ loading: false });
|
||||
}).then(() => setLoading(false)).fail((response) => {
|
||||
setLoading(false);
|
||||
if (response.errors.length > 0) {
|
||||
MailPoet.Notice.error(
|
||||
response.errors.map(error => error.message),
|
||||
@@ -68,95 +53,90 @@ class WelcomeWizardStepsController extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
activateTracking() {
|
||||
this.updateSettings({ analytics: { enabled: true } }).then(() => (
|
||||
this.showWooCommerceStepOrFinish()));
|
||||
function activateTracking() {
|
||||
updateSettings({ analytics: { enabled: true } }).then(() => (
|
||||
showWooCommerceStepOrFinish()));
|
||||
}
|
||||
|
||||
updateSender(data) {
|
||||
this.setState(prevState => ({
|
||||
sender: { ...prevState.sender, ...data },
|
||||
}));
|
||||
function updateSender(data) {
|
||||
setSender({ ...sender, ...data });
|
||||
}
|
||||
|
||||
updateReplyTo(data) {
|
||||
this.setState(prevState => ({
|
||||
replyTo: { ...prevState.replyTo, ...data },
|
||||
}));
|
||||
function updateReplyTo(data) {
|
||||
setReplyTo({ ...replyTo, ...data });
|
||||
}
|
||||
|
||||
submitSender() {
|
||||
this.updateSettings({
|
||||
sender: this.state.sender,
|
||||
reply_to: this.state.replyTo,
|
||||
}).then(() => (this.props.history.push('/steps/2')));
|
||||
function submitSender() {
|
||||
updateSettings({
|
||||
sender,
|
||||
reply_to: replyTo,
|
||||
}).then(() => (props.history.push('/steps/2')));
|
||||
}
|
||||
|
||||
render() {
|
||||
const step = parseInt(this.props.match.params.step, 10);
|
||||
return (
|
||||
<div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
|
||||
<WelcomeWizardHeader
|
||||
current_step={step}
|
||||
steps_count={this.state.stepsCount}
|
||||
logo_src={window.mailpoet_logo_url}
|
||||
/>
|
||||
{ step === 1 && this.state.shouldSetSender
|
||||
? (
|
||||
<WelcomeWizardSenderStep
|
||||
update_sender={this.updateSender}
|
||||
submit_sender={this.submitSender}
|
||||
update_reply_to={this.updateReplyTo}
|
||||
finish={this.finishWizard}
|
||||
loading={this.state.loading}
|
||||
sender={this.state.sender}
|
||||
reply_to={this.state.replyTo}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
const step = parseInt(props.match.params.step, 10);
|
||||
|
||||
{ step === 1 && !this.state.shouldSetSender
|
||||
? (
|
||||
<WelcomeWizardMigratedUserStep
|
||||
next={() => this.props.history.push('/steps/2')}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
return (
|
||||
<div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
|
||||
<WelcomeWizardHeader
|
||||
current_step={step}
|
||||
steps_count={stepsCount}
|
||||
logo_src={window.mailpoet_logo_url}
|
||||
/>
|
||||
{ step === 1 && shouldSetSender
|
||||
? (
|
||||
<WelcomeWizardSenderStep
|
||||
update_sender={updateSender}
|
||||
submit_sender={submitSender}
|
||||
update_reply_to={updateReplyTo}
|
||||
finish={finishWizard}
|
||||
loading={loading}
|
||||
sender={sender}
|
||||
reply_to={replyTo}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ step === 2
|
||||
? (
|
||||
<WelcomeWizardEmailCourseStep
|
||||
next={() => this.props.history.push('/steps/3')}
|
||||
illustration_url={window.email_course_illustration}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
{ step === 1 && !shouldSetSender
|
||||
? (
|
||||
<WelcomeWizardMigratedUserStep
|
||||
next={() => props.history.push('/steps/2')}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ step === 3
|
||||
? (
|
||||
<WelcomeWizardUsageTrackingStep
|
||||
skip_action={this.showWooCommerceStepOrFinish}
|
||||
allow_action={this.activateTracking}
|
||||
allow_text={this.state.stepsCount === 4
|
||||
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
{ step === 2
|
||||
? (
|
||||
<WelcomeWizardEmailCourseStep
|
||||
next={() => props.history.push('/steps/3')}
|
||||
illustration_url={window.email_course_illustration}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ step === 4
|
||||
? (
|
||||
<WelcomeWizardWooCommerceStep
|
||||
next={this.finishWizard}
|
||||
screenshot_src={window.woocommerce_screenshot_url}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
{ step === 3
|
||||
? (
|
||||
<WelcomeWizardUsageTrackingStep
|
||||
skip_action={showWooCommerceStepOrFinish}
|
||||
allow_action={activateTracking}
|
||||
allow_text={stepsCount === 4
|
||||
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
|
||||
loading={loading}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ step === 4
|
||||
? (
|
||||
<WelcomeWizardWooCommerceStep
|
||||
next={finishWizard}
|
||||
screenshot_src={window.woocommerce_screenshot_url}
|
||||
loading={loading}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
WelcomeWizardStepsController.propTypes = {
|
||||
match: PropTypes.shape({
|
||||
|
||||
Reference in New Issue
Block a user