Merge pull request #1721 from mailpoet/wizard-update

Wizard update [MAILPOET-1704]
This commit is contained in:
M. Shull
2019-01-11 23:23:05 -05:00
committed by GitHub
8 changed files with 62 additions and 124 deletions

View File

@@ -4,7 +4,7 @@ import SteppedProgressBar from '../common/stepped_progess_bar.jsx';
const WelcomeWizardHeader = props => (
<div className="mailpoet_welcome_wizard_centered_column mailpoet_welcome_wizard_header">
<img src={props.logo_src} width="200" alt="MailPoet logo" />
<img src={props.logo_src} width="200" height="87" alt="MailPoet logo" />
{
props.current_step <= props.steps_count ?
(<SteppedProgressBar steps_count={props.steps_count} step={props.current_step} />)

View File

@@ -0,0 +1,37 @@
import PropTypes from 'prop-types';
import React from 'react';
import MailPoet from 'mailpoet';
const WelcomeWizardEmailCourseStep = props => (
<div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
<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%"
scrolling="no"
frameBorder="0"
title="Apply to course"
src="https://newsletters.mailpoet.com?mailpoet_form_iframe=13"
className="mailpoet_form_iframe"
marginWidth="0"
marginHeight="0"
/>
</div>
<button className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
</div>
);
WelcomeWizardEmailCourseStep.propTypes = {
next: PropTypes.func.isRequired,
illustration_url: PropTypes.string.isRequired,
};
export default WelcomeWizardEmailCourseStep;

View File

@@ -1,67 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import MailPoet from 'mailpoet';
import ReactStringReplace from 'react-string-replace';
const WelcomeWizardHelpInfoStep = props => (
<div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
<div className="mailpoet_welcome_wizard_help_info_block">
<span className="mailpoet_welcome_wizard_support_button" />
<p>
{
ReactStringReplace(
MailPoet.I18n.t('welcomeWizardYouCanContactText'),
/\[strong\](.*?)\[\/strong\]/g,
match => (<strong key={match}>{ match }</strong>)
)
}
</p>
</div>
<div className="mailpoet_welcome_wizard_help_info_block">
<span className="mailpoet_badge mailpoet_badge_video mailpoet_welcome_wizard_video_badge">
<span className="dashicons dashicons-format-video" />
{MailPoet.I18n.t('seeVideoGuide')}
</span>
<p>
{
ReactStringReplace(
MailPoet.I18n.t('welcomeWizardAboutVideosText'),
/\[strong\](.*?)\[\/strong\]/g,
match => (<strong key={match}>{ match }</strong>)
)
}
</p>
</div>
<div className="mailpoet_welcome_wizard_help_info_block">
<span className="mailpoet_welcome_wizard_mail_icon" />
<p>
{
ReactStringReplace(
MailPoet.I18n.t('welcomeWizardAboutCourseText'),
/\[strong\](.*?)\[\/strong\]/g,
match => (<strong key={match}>{ match }</strong>)
)
}
</p>
<iframe
id="mailpoet_form_iframe"
width="100%"
scrolling="no"
frameBorder="0"
title="Apply to course"
src="https://newsletters.mailpoet.com?mailpoet_form_iframe=13"
className="mailpoet_form_iframe"
marginWidth="0"
marginHeight="0"
allowtransparency="true" // eslint-disable-line react/no-unknown-property
/>
</div>
<button className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
</div>
);
WelcomeWizardHelpInfoStep.propTypes = {
next: PropTypes.func.isRequired,
};
export default WelcomeWizardHelpInfoStep;

View File

@@ -4,7 +4,7 @@ import MailPoet from 'mailpoet';
import WelcomeWizardHeader from './header.jsx';
import WelcomeWizardSenderStep from './steps/sender_step.jsx';
import WelcomeWizardMigratedUserStep from './steps/migrated_user_step.jsx';
import WelcomeWizardHelpInfoStep from './steps/help_info_step.jsx';
import WelcomeWizardEmailCourseStep from './steps/email_course_step.jsx';
import WelcomeWizardUsageTrackingStep from './steps/usage_tracking_step.jsx';
import WelcomeWizardWooCommerceStep from './steps/woo_commerce_step.jsx';
@@ -109,8 +109,9 @@ class WelcomeWizardStepsController extends React.Component {
}
{ step === 2 ?
<WelcomeWizardHelpInfoStep
<WelcomeWizardEmailCourseStep
next={() => this.props.history.push('/steps/3')}
illustration_url={window.email_course_illustration}
/> : null
}