Change pitch after sending

[MAILPOET-2471]

assets/js/src/newsletters/send/congratulate/success_pitch_mss.jsx

@@ -3,21 +3,36 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
 import WelcomeWizardStepLayoutBody from '../../../wizard/layout/step_layout_body.jsx';
-import WelcomeWizardPitchMSSStep from '../../../wizard/steps/pitch_mss_step.jsx';
+import { BenefitsList, Controls } from '../../../wizard/steps/pitch_mss_step.jsx';
 
 function PitchMss(props) {
   return (
     <div className="mailpoet_congratulate_success mailpoet_congratulate_mss_pitch">
-      <h1>{MailPoet.I18n.t('congratulationsMSSPitchHeader')}</h1>
       <WelcomeWizardStepLayoutBody
         illustrationUrl={props.MSSPitchIllustrationUrl}
         displayProgressBar={false}
       >
-        <WelcomeWizardPitchMSSStep
+        <div className="mailpoet_welcome_wizard_step_content">
-          next={props.onFinish}
+          <h1>{MailPoet.I18n.t('congratulationsMSSPitchHeader')}</h1>
-          subscribersCount={props.subscribersCount}
+          <h2>{MailPoet.I18n.t('congratulationsMSSPitchSubHeader')}</h2>
-          mailpoetAccountUrl={props.mailpoetAccountUrl}
+          <p>
-        />
+            {
+            MailPoet.I18n.t(props.subscribersCount < 1000
+              ? 'welcomeWizardMSSFreeSubtitle'
+              : 'welcomeWizardMSSNotFreeSubtitle')
+          }
+          </p>
+          <p>
+            {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
+            :
+          </p>
+          <BenefitsList />
+          <Controls
+            mailpoetAccountUrl={props.mailpoetAccountUrl}
+            next={props.onFinish}
+            nextButtonText={MailPoet.I18n.t('welcomeWizardMSSFreeButton')}
+          />
+        </div>
       </WelcomeWizardStepLayoutBody>
     </div>
   );

assets/js/src/wizard/steps/pitch_mss_step.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-const BenefitsList = () => (
+export const BenefitsList = () => (
   <ul className="welcome_wizard_tracking_list">
     <li>{MailPoet.I18n.t('welcomeWizardMSSList1')}</li>
     <li>{MailPoet.I18n.t('welcomeWizardMSSList2')}</li>
@@ -11,7 +11,7 @@ const BenefitsList = () => (
   </ul>
 );
 
-const Controls = (props) => (
+export const Controls = (props) => (
   <div className="mailpoet_welcome_wizard_step_controls">
     <p>
       <a
@@ -77,7 +77,7 @@ FreePlanSubscribers.propTypes = {
 
 const NotFreePlanSubscribers = (props) => (
   <>
-    <h>{MailPoet.I18n.t('welcomeWizardMSSNotFreeTitle')}</h>
+    <h1>{MailPoet.I18n.t('welcomeWizardMSSNotFreeTitle')}</h1>
     <p>
       {MailPoet.I18n.t('welcomeWizardMSSNotFreeSubtitle')}
       :

views/newsletters.html

@@ -353,7 +353,8 @@
     'congratulationsSendFailExplain': __('Rest assured, this is fairly common and is usually fixed quickly. [link]See our quick guide[/link] to help you solve this and get your website sending.'),
     'congratulationsLoadingHeader': __('Congrats, you’re sending your first newsletter! We’re doing a quick verification to make sure everything works fine.'),
 
-    'congratulationsMSSPitchHeader': __('Your email has been sent'),
+    'congratulationsMSSPitchHeader': __('Your email has been sent!'),
+    'congratulationsMSSPitchSubHeader': __('What’s next? Sign up to MailPoet Premium to see who clicked and opened your email. It’s entirely free for you!'),
 
     'reviewRequestHeading': _x('Thank you! Time to tell the world?', 'After a user gives us positive feedback via the NPS poll, we ask them to review our plugin on WordPress.org.'),
     'reviewRequestDidYouKnow': __('[username], did you know that hundreds of WordPress users read the reviews on the plugin repository? They’re also a source of inspiration for our team.'),