Merge pull request #1721 from mailpoet/wizard-update
Wizard update [MAILPOET-1704]
This commit is contained in:
@@ -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} />)
|
||||
|
37
assets/js/src/welcome_wizard/steps/email_course_step.jsx
Normal file
37
assets/js/src/welcome_wizard/steps/email_course_step.jsx
Normal 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;
|
@@ -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;
|
@@ -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
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user