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,56 +82,63 @@ const WelcomeWizardStepsController = (props) => {
         steps_count={stepsCount}
         logo_src={window.mailpoet_logo_url}
       />
-      { step === 1 && shouldSetSender
-        ? (
-          <WelcomeWizardSenderStep
-            update_sender={updateSender}
-            submit_sender={submitSender}
-            finish={skipSenderStep}
-            loading={loading}
-            sender={sender}
-          />
-        ) : null
-      }
+      <div className="mailpoet_welcome_wizard_flex">
 
-      { step === 1 && !shouldSetSender
-        ? (
-          <WelcomeWizardMigratedUserStep
-            next={() => props.history.push('/steps/2')}
-          />
-        ) : null
-      }
+        <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
+                update_sender={updateSender}
+                submit_sender={submitSender}
+                finish={skipSenderStep}
+                loading={loading}
+                sender={sender}
+              />
+            ) : null
+          }
 
-      { step === 2
-        ? (
-          <WelcomeWizardEmailCourseStep
-            next={() => props.history.push('/steps/3')}
-            illustration_url={window.email_course_illustration}
-          />
-        ) : null
-      }
+          { step === 1 && !shouldSetSender
+            ? (
+              <WelcomeWizardMigratedUserStep
+                next={() => props.history.push('/steps/2')}
+              />
+            ) : null
+          }
 
-      { step === 3
-        ? (
-          <WelcomeWizardUsageTrackingStep
-            skip_action={showWooCommerceStepOrFinish}
-            allow_action={activateTracking}
-            allow_text={stepsCount === 4
-              ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
-            loading={loading}
-          />
-        ) : null
-      }
+          { step === 2
+            ? (
+              <WelcomeWizardEmailCourseStep
+                next={() => props.history.push('/steps/3')}
+              />
+            ) : null
+          }
 
-      { step === 4
-        ? (
-          <WelcomeWizardWooCommerceStep
-            next={finishWizard}
-            screenshot_src={window.woocommerce_screenshot_url}
-            loading={loading}
-          />
-        ) : null
-      }
+          { step === 3
+            ? (
+              <WelcomeWizardUsageTrackingStep
+                skip_action={showWooCommerceStepOrFinish}
+                allow_action={activateTracking}
+                allow_text={stepsCount === 4
+                  ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
+                loading={loading}
+              />
+            ) : null
+          }
+
+          { step === 4
+            ? (
+              <WelcomeWizardWooCommerceStep
+                next={finishWizard}
+                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 %>';