Add new illustrations and two-column layout for welcome wizard

[MAILPOET-1927]
This commit is contained in:
Ján Mikláš
2019-04-09 12:52:57 +02:00
committed by Ján Mikláš
parent bdaff6fc30
commit 9955d0d937
9 changed files with 92 additions and 55 deletions

View File

@@ -7,12 +7,6 @@ const WelcomeWizardEmailCourseStep = props => (
<h1>{MailPoet.I18n.t('welcomeWizardEmailCourseTitle')}</h1>
<p>{MailPoet.I18n.t('welcomeWizardEmailCourseText')}</p>
<div className="mailpoet_welcome_wizard_course_form_box">
<img
src={props.illustration_url}
alt=""
width="155"
height="155"
/>
<iframe
id="mailpoet_form_iframe"
width="100%"
@@ -31,7 +25,6 @@ const WelcomeWizardEmailCourseStep = props => (
WelcomeWizardEmailCourseStep.propTypes = {
next: PropTypes.func.isRequired,
illustration_url: PropTypes.string.isRequired,
};
export default WelcomeWizardEmailCourseStep;

View File

@@ -82,56 +82,63 @@ const WelcomeWizardStepsController = (props) => {
steps_count={stepsCount}
logo_src={window.mailpoet_logo_url}
/>
{ step === 1 && shouldSetSender
? (
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
) : null
}
<div className="mailpoet_welcome_wizard_flex">
{ step === 1 && !shouldSetSender
? (
<WelcomeWizardMigratedUserStep
next={() => props.history.push('/steps/2')}
/>
) : null
}
<div className="mailpoet_welcome_wizard_illustration">
<img src={window['step_' + step + '_illustration_url']} alt="" />
</div>
<div className="mailpoet_welcome_wizard_step">
{ step === 1 && shouldSetSender
? (
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
) : null
}
{ step === 2
? (
<WelcomeWizardEmailCourseStep
next={() => 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={showWooCommerceStepOrFinish}
allow_action={activateTracking}
allow_text={stepsCount === 4
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading}
/>
) : null
}
{ step === 2
? (
<WelcomeWizardEmailCourseStep
next={() => props.history.push('/steps/3')}
/>
) : null
}
{ step === 4
? (
<WelcomeWizardWooCommerceStep
next={finishWizard}
screenshot_src={window.woocommerce_screenshot_url}
loading={loading}
/>
) : null
}
{ 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.step_4_woocommerce_box_url}
loading={loading}
/>
) : null
}
</div>
</div>
</div>
);
};