Redesign congratulation page

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>
   );
 }