Merge pull request #1721 from mailpoet/wizard-update

Wizard update [MAILPOET-1704]

assets/css/src/welcome_wizard.styl

@@ -16,7 +16,7 @@
 .mailpoet_welcome_wizard_step_content
   margin-top: 40px
   max-width: 620px
-  min-height: 35%vh;
+  min-height: 30%vh;
   h1
     font-weight: 400
     padding-bottom: 10px
@@ -50,57 +50,24 @@
 .mailpoet_sender_form_loading
   opacity: .5
 
-.mailpoet_welcome_wizard_help_info_block
-  padding-left: 180px
-  position: relative
+.mailpoet_welcome_wizard_course_form_box
   margin-bottom: 10px
-  p
-    text-align: left
+  padding-top: 30px
+  position: relative
+  img
+    position: absolute
+    top: 0
+    left: 0
+  iframe
+    margin-left:155px
 
-.mailpoet_welcome_wizard_support_button
-  background: #32a8d9 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAA3lBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ymXGKAAAASXRSTlMAAQIFBwoPEBIUFRscHR8jKCkqLC0/Q0RGSEpNUFFXYHFzeXp9gIKFjKCjpamwvL7Aw8bIy8zN0NLT1dja3ODk5ujq7PT19/3+6Nyy9QAAAklJREFUeAGl1/1W4jwQBvAHBapi0erLK7XsKmLxAyp+SBEVAUXluf8b2ibHnqUk0LT7+3+anJlpMoGe1Wh3B9MZOZsOuu2GBWN2q//NhO9+y4YJtzenxrznIs1xyJXCY6xTDfhj3Gl6jm1ZtuM1O2P+CKpY6eST0sh3kOD4I0qfJ9ArXVG6cwtQFNw7SlclaGzdU3ipY4X6C4X7LSh2n2VN/CJWKvqygs+7yroydlLDWrWJjF5auyT3PKwgRWUod17CIpmrhzJSlR9k1hI1kuuWYaAs116oWFXUd1KBkcpE1LuKWCDyXIOhmsh5gB/HjPgw5jMS93koeqMIY0XRLSEkl5E6Mqgz4kLoiX5G7PKLy74usUT0eQ8Rex5/RviPOodIcknObQAtkqNCtuDCiGQLQF+mOtu2ZcL7gCWq5uCvTWvZJhSO6AwLDZJjZDYm2UCbZAeZdUi20SXZRGZNkl0MSHrIzCM5wFTmKzOH5BQzkjbWlkpXMZvkDIxYgNIkKb1iMfJPwXm3vc2ImjC1w3SNdkDyPW+pXJJPeZvklGSQtz2vSV7k/THeSDaUX9LMPiM7usNALY7ijGSYdgwdQqvwSvJcPQCNgo8Y2VOPXqNt35C81R36m2pPaRf28l03eCQ53Mh30ZXkwrmu2Ph3VC9382BlrMgXrA405sHqKGUerA5x5sHq+GgebDy4/v/IBZlG5qMbJpgP6/tnr0z6MHkmbB+4p9dvXPbxO+sDZehZsYxPI956G/keZQzP95BGfQ7y/Sm4+LUDrT+vKBtiP2phEAAAAABJRU5ErkJggg==') center center no-repeat
-  background-size: 30px
-  display: inline-block
-  height: 54px
-  width: 54px
-  border-radius: 28px
-  position: absolute
-  top: 10px
-  left: 70px
-  box-shadow: 2px 2px 8px #666;
-  transform: scale(0.8)
-
-.mailpoet_welcome_wizard_video_badge
-  cursor: default
-  position: absolute
-  top: 20px
-  left: 30px
-  line-height: 1.5em
-  padding-bottom: 0
-  .dashicons
-    line-height: 1em
-  &:hover
-    background: $video-guide-badge-color
-
-.mailpoet_welcome_wizard_mail_icon
-  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABrCAYAAADw4IlaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABT9JREFUeNrsnTFSGz0YhhWSgpJJkS4z9tBS4JbKOUHwDfAJYp8AcwLDCSBdOpwT4IoWCoo0jJ1JlybcIPmEvw0LwyTG1iftrp5nRjGh+PktHmv16t3YzgEA5Mqrp9/Y297pysMnGftMDwRmIuPk8vZm+qyAIt9AHsbMExjTFwnPHgko8vkV75y5gUj0RMLJRukbrHwQk/HfFVD3fRfMCUSmU6yALeYCErCFgJCUDaYAEBAQEAABAQEBYvImwc+8k3F0eXtzzPRXC61iD2VsNVlA/+TG8mQ/yuNQRLzmV59cvF15OJWxm9MluCvjSp78CAWSibclw1diVynkq8oe8FAmYaZ1IMSTr6viDXLbAz5HS8aFTMqZXpbvUMRu1dPLbSXu91x1BZz6IKGBIiQHMmZ6axjYhIyZgXzeg6F6EecSLKuU37t1VvmhS4SUc5ksvyK20CaIeC0/n25xC1TohOvvcu6seqqx1h5Qfuhcxgf5smewGhJSwsg30lUv9B577hY3lfoxTxpC/J2t8tCWcWawGvqQcqVHBfCCkOHDnVuc64XmWFe9SWVCiAaHvjzpz7rJDXn53NXV0D/xI0LKf0PGoVG6vdaQGGzbFfwYxv/PyWhrSAnNQEUkpDwv375ebkPLV7RXnZDymQgYIaS0NKSc66sd8R5CxrlByJjq5dZkL256EO1rNg0pQ4OQcv9q16OF3I9WrgxCxv2Wyv/+1gkZSQUsiXisIWUS+D9d9MoXuYUU/3x9ODM6WvFhsl38211LolVxPjj4yO4WRzahX1Fdl8mRjXF/638vfsXrxwp60btgje4djfKhaXSvbNzfHulebxrzOSXpgvXVNSwd2YR8JfuQ0qhe2bi/nbqEt8UlvRtGQ0rH0Sv/S74DZ9jfashIdk9mJW7Jp1f+59HKqatYf9s4AVXColfuu8x7ZcP+1s/r2v1tIwUsiXh/BOAy7JW1v/Uhw6q/bYfob2sfQpYMKdn0ynXrbxu9Aj4Rcap7Q8teuZtYPqv+1jmj/jYbAYvV0LhXvkjRK2vI8N2tVX/btupvsxKwJGJjeuVSf2txtGLe32YpYEnEY10NLXvllpF4lv3txEXqb7MWUCWcG/fKs5BHNtrfjpxtf9urY+tT6/eGqUOvXOpvLY5WkvS3IXnjak6pV/6qlzaLXvnFRzbG/e217vVq/7YmjXl3LP2nAFa98sC9oFeO0N92mvKeOo17e7aUvXIu/S0CLhdSrHvlwRP5Ri6T/hYBlxfRH0lY9cpj7ZUPcutvCSEvDymWvfKpUcgY1jndsgI+E1KcXa8cksr3twi4xmpoGFLWZepq0t8i4PoiWvbKq4SMWvW3CBhORKteeVlq2d8SQsJK6Fednh4yj12cz82b66o3zX3++ZyQBxEte+VHIcPVvL9lBTQMKc6uV25Mf8sKaC9iyF65cf0tAsYTceTWO7JpZH/LJTh+SPmgd7gseydzcbQyYQZZAUOJeOaW65Ub39+yAqYNKUWv/Mkt7nzZ0hXPX6ZPSLcIGCWkuOpVeVyCARAQEBAAAQEBARAQEBAAAQEBARAQEBAAAQEBARAQEBAQEAABAQEBEBAQEAABAQEBEBAQEAABAQEBEBAQEAABAQEBEBAQEAABoX6s+g6p3b3tnd9MH7ACAgICICAgIAACQi0FnDMVkFJAPsURUnD3qvhqb3tn5uJ8WjjA/VX38vamXd4DDpkTiEjf//G6+NuPXz+/vX/77rt8uc/cgLV8xaeJvi5/VyS8Fgn9x9Vv6uV4k7mCUPs9GV9k9PhEUagMfwQYAFppkb3J5HUdAAAAAElFTkSuQmCC') center center no-repeat
-  background-size: 40px 27px
-  display: inline-block
-  width: 40px
-  height: 27px
-  position: absolute
-  top: 50px
-  left: 75px
-
-@media screen and (max-width 520px)
-  .mailpoet_welcome_wizard_help_info_block
-    padding-left: 150px
-  .mailpoet_welcome_wizard_support_button
-    left: 40px
-  .mailpoet_welcome_wizard_video_badge
-    left: 10px
-  .mailpoet_welcome_wizard_mail_icon
-    left: 50px
+  @media screen and (max-width 520px)
+    padding: 0 10px
+    text-align: center
+    iframe
+      margin-left: 0
+    img
+      position: static
 
 .mailpoet_welcome_wizard_step_controls
   margin-top: 50px

assets/js/src/welcome_wizard/header.jsx

@@ -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} />)

assets/js/src/welcome_wizard/steps/email_course_step.jsx

@@ -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;

assets/js/src/welcome_wizard/steps/help_info_step.jsx

@@ -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;

assets/js/src/welcome_wizard/steps_controller.jsx

@@ -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
         }
 

views/welcome_wizard.html

@@ -2,7 +2,8 @@
 
 <% block content %>
 <script>
-  var mailpoet_logo_url = '<%= cdn_url('welcome-wizard/mailpoet-logo.20181121-1440.png') %>';
+  var mailpoet_logo_url = '<%= cdn_url('welcome-wizard/mailpoet-logo.20190109-1400.png') %>';
+  var email_course_illustration = '<%= cdn_url('welcome-wizard/wizard-email-course.20190109-1400.png') %>';
   var woocommerce_screenshot_url = '<%= cdn_url('welcome-wizard/woocommerce-auto-emails-tilted.20181121-1440.png') %>';
   var is_mp2_migration_complete = <%=  json_encode(is_mp2_migration_complete) %>;
   var is_woocommerce_active = <%= json_encode(is_woocommerce_active)  %>;
@@ -25,12 +26,11 @@
 'welcomeWizardSenderMigratedUserText': __('We have a few things to tell you before you begin to ensure you have a good experience.'),
 'welcomeWizardUsageTrackingStepTitle': __('Help MailPoet improve with usage tracking.'),
 'welcomeWizardWooCommerceStepTitle': __('Automate your WooCommerce emails.'),
-'welcomeWizardYouCanContactText': _x('You can [strong]contact[/strong] our team and search our documentation thanks to the blue icon in the bottom right corner.', 'Don’t translate [strong] placeholder'),
-'welcomeWizardAboutVideosText': _x('You’ll find brief [strong]instructional videos[/strong] in English throughout our interface.', 'Don’t translate [strong] placeholder'),
-'welcomeWizardAboutCourseText': _x('Sign up to our 4-part [strong]email course[/strong]. A must for every beginner.', 'Don’t translate [strong] placeholder'),
 'welcomeWizardTrackingText': __('Gathering usage data allows us to make MailPoet better — the way you use MailPoet will be considered as we evaluate new features, judge the quality of an update, or determine if an improvement makes sense. [link]Read more about what we collect[/link].'),
 'welcomeWizardHelpingShopOwnersText': __('We’re making it easier for shop owners to send emails to their customers and make more money.'),
 'welcomeWizardWooCommerceEmailsText': __('Create a new email to find the WooCommerce type of emails:'),
+'welcomeWizardEmailCourseTitle': __('Sign up to our 4-part email course'),
+'welcomeWizardEmailCourseText': __('A must for every beginner (in English only)'),
 'seeVideoGuide': _x('See video guide', 'A label on a button'),
 'skip': _x('Skip', 'A label on a skip button'),
 'noThanksSkip': _x('No thanks. Skip.', 'A label on a skip button'),