Redesign congratulation page

assets/css/src/components-plugin/_newsletter-congratulate.scss

@@ -26,8 +26,9 @@
   }
 
   img,
-  .button {
+  .mailpoet-button {
     display: block;
+    margin-bottom: 15px;
     margin-left: auto;
     margin-right: auto;
   }

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

@@ -27,9 +27,10 @@ function renderSuccess(newsletter, testingPassed) {
       'Cron is working': 'true',
     });
   }
+  const successImgIndex = Math.floor(Math.random() * 4);
   return (
     <Success
-      illustrationImageUrl={window.mailpoet_congratulations_success_image}
+      illustrationImageUrl={window.mailpoet_congratulations_success_images[successImgIndex]}
       MSSPitchIllustrationUrl={window.MSS_pitch_illustration_url}
       successClicked={successPageClosed}
       newsletter={newsletter}

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

@@ -4,8 +4,7 @@ import PropTypes from 'prop-types';
 import MSSUserSuccess from './success_for_mss_users.jsx';
 import PitchMss from './success_pitch_mss.jsx';
 
-
-function SuccessContent(props) {
+function Success(props) {
   if (!window.has_mss_key_specified) {
     return (
       <PitchMss
@@ -25,19 +24,6 @@ function SuccessContent(props) {
   );
 }
 
-function Success(props) {
-  return (
-    <SuccessContent
-      successClicked={props.successClicked}
-      illustrationImageUrl={props.illustrationImageUrl}
-      MSSPitchIllustrationUrl={props.MSSPitchIllustrationUrl}
-      newsletter={props.newsletter}
-      subscribersCount={props.subscribersCount}
-      mailpoetAccountUrl={props.mailpoetAccountUrl}
-    />
-  );
-}
-
 Success.propTypes = {
   successClicked: PropTypes.func.isRequired,
   illustrationImageUrl: PropTypes.string.isRequired,
@@ -50,16 +36,4 @@ Success.propTypes = {
   mailpoetAccountUrl: PropTypes.string.isRequired,
 };
 
-SuccessContent.propTypes = {
-  successClicked: PropTypes.func.isRequired,
-  illustrationImageUrl: PropTypes.string.isRequired,
-  MSSPitchIllustrationUrl: PropTypes.string.isRequired,
-  newsletter: PropTypes.shape({
-    status: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  subscribersCount: PropTypes.number.isRequired,
-  mailpoetAccountUrl: PropTypes.string.isRequired,
-};
-
 export default Success;

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

@@ -1,29 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
+import Heading from 'common/typography/heading/heading';
+import { Button } from 'common';
 
-function renderHeader(newsletter) {
+function getSuccessMessage(newsletter) {
   if (newsletter.type === 'welcome') {
-    return MailPoet.I18n.t('congratulationsWelcomeEmailSuccessHeader');
+    return MailPoet.I18n.t('congratulationsWelcomeEmailSuccessBody');
   }
   if (newsletter.type === 'notification') {
-    return MailPoet.I18n.t('congratulationsPostNotificationSuccessHeader');
+    return MailPoet.I18n.t('congratulationsPostNotificationSuccessBody');
   }
   if (newsletter.type === 'automatic') {
-    return MailPoet.I18n.t('congratulationsWooSuccessHeader');
+    return MailPoet.I18n.t('congratulationsWooSuccessBody');
   }
   if (newsletter.status === 'scheduled') {
-    return MailPoet.I18n.t('congratulationsScheduleSuccessHeader');
+    return MailPoet.I18n.t('congratulationsScheduleSuccessBody');
   }
-  return MailPoet.I18n.t('congratulationsSendSuccessHeader');
+  return MailPoet.I18n.t('congratulationsSendSuccessBody');
 }
 
 function MSSUserSuccess(props) {
   return (
     <div className="mailpoet_congratulate_success">
-      <h1>{renderHeader(props.newsletter)}</h1>
-      <img src={props.illustrationImageUrl} alt="" width="750" height="250" />
-      <button type="button" className="button" onClick={props.successClicked}>{MailPoet.I18n.t('close')}</button>
+      <Heading level={0}>{MailPoet.I18n.t('congratulationsSuccessHeader')}</Heading>
+      <h1>{getSuccessMessage(props.newsletter)}</h1>
+      <img src={props.illustrationImageUrl} alt="" width="500" />
+      <Button type="button" dimension="small" onClick={props.successClicked}>{MailPoet.I18n.t('close')}</Button>
     </div>
   );
 }

views/newsletters.html

@@ -42,7 +42,12 @@
       var mailpoet_feature_announcement_has_news = <%= json_encode(feature_announcement_has_news) %>;
       var mailpoet_last_announcement_seen = <%= json_encode(last_announcement_seen) %>;
       var mailpoet_user_locale = '<%= get_locale() %>';
-      var mailpoet_congratulations_success_image = '<%= cdn_url('newsletter/congrat-illu-success.20181121-1440.png') %>';
+      var mailpoet_congratulations_success_images = [
+        '<%= cdn_url('newsletter/congratulate-1.png') %>',
+        '<%= cdn_url('newsletter/congratulate-2.png') %>',
+        '<%= cdn_url('newsletter/congratulate-3.png') %>',
+        '<%= cdn_url('newsletter/congratulate-4.png') %>',
+      ];
       var mailpoet_congratulations_loading_image = '<%= cdn_url('newsletter/congratulation-page-illustration-transparent-LQ.20181121-1440.png') %>';
       var mailpoet_main_page = '<%= mailpoet_main_page %>';
       var mailpoet_review_request_illustration_url = '<%= cdn_url('review-request/review-request-illustration.20190815-1427.svg') %>';
@@ -377,11 +382,13 @@
     'whatsNew': __("What’s new"),
     'updateMailPoetNotice': __('[link]Update MailPoet[/link] to see the latest changes'),
 
-    'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
-    'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),
-    'congratulationsWooSuccessHeader': __('Congratulations, your WooCommerce email has been activated.'),
-    'congratulationsPostNotificationSuccessHeader': __('Congratulations, your Post Notification is now active.'),
-    'congratulationsWelcomeEmailSuccessHeader': __('Congratulations, your Welcome Email is now active.'),
+    'congratulationsSuccessHeader': __('Congratulations!'),
+    'congratulationsSendSuccessBody': __('Your newsletter is being sent!'),
+    'congratulationsScheduleSuccessBody': __('Your newsletter is scheduled to be sent.'),
+    'congratulationsWooSuccessBody': __('Your WooCommerce email has been activated.'),
+    'congratulationsPostNotificationSuccessBody': __('Your Post Notification is now active.'),
+    'congratulationsWelcomeEmailSuccessBody': __('Your Welcome Email is now active.'),
+    
     'congratulationsSendFailHeader': __('Oops! We can’t send your newsletter 😕'),
     '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': __('Verification'),