Add new illustrations and two-column layout for welcome wizard

[MAILPOET-1927]

assets/css/src/components/_welcomeWizard.scss

@@ -17,6 +17,40 @@
   }
 }
 
+.mailpoet_welcome_wizard_flex {
+  align-items: center;
+  display: flex;
+}
+
+.mailpoet_welcome_wizard_illustration {
+  flex-grow: 1;
+  padding: 60px 40px 40px 60px;
+  text-align: right;
+  width: 50%;
+
+  img {
+    height: 400px;
+    max-width: 100%;
+    width: auto;
+  }
+
+  @media screen and (max-width: 782px) {
+    display: none;
+  }
+}
+
+.mailpoet_welcome_wizard_step {
+  flex-grow: 1;
+  padding: 60px 60px 40px 40px;
+  text-align: left;
+  width: 50%;
+
+  @media screen and (max-width: 782px) {
+    padding: 30px;
+    width: 100%;
+  }
+}
+
 .mailpoet_welcome_wizard_step_content {
   margin-top: 40px;
   max-width: 620px;

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

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

assets/js/src/welcome_wizard/steps_controller.jsx

@@ -82,6 +82,12 @@ const WelcomeWizardStepsController = (props) => {
         steps_count={stepsCount}
         logo_src={window.mailpoet_logo_url}
       />
+      <div className="mailpoet_welcome_wizard_flex">
+
+        <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
@@ -106,7 +112,6 @@ const WelcomeWizardStepsController = (props) => {
             ? (
               <WelcomeWizardEmailCourseStep
                 next={() => props.history.push('/steps/3')}
-            illustration_url={window.email_course_illustration}
               />
             ) : null
           }
@@ -127,12 +132,14 @@ const WelcomeWizardStepsController = (props) => {
             ? (
               <WelcomeWizardWooCommerceStep
                 next={finishWizard}
-            screenshot_src={window.woocommerce_screenshot_url}
+                screenshot_src={window.step_4_woocommerce_box_url}
                 loading={loading}
               />
             ) : null
           }
         </div>
+      </div>
+    </div>
   );
 };
 

views/welcome_wizard.html

@@ -3,8 +3,11 @@
 <% block content %>
 <script>
   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 step_1_illustration_url = '<%= cdn_url('welcome-wizard/step1.20190409.png') %>';
+  var step_2_illustration_url = '<%= cdn_url('welcome-wizard/step2.20190409.png') %>';
+  var step_3_illustration_url = '<%= cdn_url('welcome-wizard/step3.20190409.png') %>';
+  var step_4_illustration_url = '<%= cdn_url('welcome-wizard/step4.20190409.png') %>';
+  var step_4_woocommerce_box_url = '<%= cdn_url('welcome-wizard/step4-woocommerce.20190409.png') %>';
   var is_mp2_migration_complete = <%=  json_encode(is_mp2_migration_complete) %>;
   var is_woocommerce_active = <%= json_encode(is_woocommerce_active)  %>;
   var finish_wizard_url = '<%= finish_wizard_url %>';