New wizard step layout

[MAILPOET-2784]
This commit is contained in:
Ján Mikláš
2020-06-23 14:51:08 +02:00
committed by Veljko V
parent 2aaefb8af1
commit 717d33a220
4 changed files with 121 additions and 100 deletions

View File

@@ -5,8 +5,8 @@ import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
const WelcomeWizardStepLayout = (props) => (
<>
<div className="mailpoet_welcome_wizard_header">
<img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
<div className="mailpoet-wizard-logo">
<img src={window.mailpoet_logo_url} width="160" height="50" alt="MailPoet logo" />
</div>
<WelcomeWizardStepLayoutBody
illustrationUrl={props.illustrationUrl}

View File

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
import React from 'react';
const WelcomeWizardStepLayoutBody = (props) => (
<div className="mailpoet_welcome_wizard_flex">
<div className="mailpoet_welcome_wizard_illustration">
<div className="mailpoet-wizard-step">
<div className="mailpoet-wizard-step-illustration">
<img src={props.illustrationUrl} alt="" />
</div>
<div className="mailpoet_welcome_wizard_step">
<div className="mailpoet-wizard-step-content">
{props.children}
</div>
</div>

View File

@@ -78,72 +78,70 @@ const WelcomeWizardStepsController = (props) => {
<>
<Steps count={stepsCount} current={step} />
<StepsContent>
<div className="mailpoet_welcome_wizard_steps">
{ stepName === 'WelcomeWizardSenderStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardSenderStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardMigratedUserStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardMigratedUserStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardMigratedUserStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardMigratedUserStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardEmailCourseStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_email_course_illustration_url}
>
<WelcomeWizardEmailCourseStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardEmailCourseStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_email_course_illustration_url}
>
<WelcomeWizardEmailCourseStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardUsageTrackingStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_tracking_illustration_url}
>
<WelcomeWizardUsageTrackingStep
skip_action={() => redirect(step)}
allow_action={activateTracking}
allow_text={stepsCount > 3
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardUsageTrackingStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_tracking_illustration_url}
>
<WelcomeWizardUsageTrackingStep
skip_action={() => redirect(step)}
allow_action={activateTracking}
allow_text={stepsCount > 3
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardPitchMSSStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_MSS_pitch_illustration_url}
>
<WelcomeWizardPitchMSSStep
next={() => redirect(step)}
subscribersCount={window.subscribers_count}
mailpoetAccountUrl={window.mailpoet_account_url}
/>
</WelcomeWizardStepLayout>
) : null}
</div>
{ stepName === 'WelcomeWizardPitchMSSStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_MSS_pitch_illustration_url}
>
<WelcomeWizardPitchMSSStep
next={() => redirect(step)}
subscribersCount={window.subscribers_count}
mailpoetAccountUrl={window.mailpoet_account_url}
/>
</WelcomeWizardStepLayout>
) : null}
</StepsContent>
</>
);