diff --git a/assets/css/src/components-plugin/_newsletter-congratulate.scss b/assets/css/src/components-plugin/_newsletter-congratulate.scss index e16adf8588..3ac2f34df0 100644 --- a/assets/css/src/components-plugin/_newsletter-congratulate.scss +++ b/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; } diff --git a/assets/js/src/newsletters/send/congratulate/congratulate.jsx b/assets/js/src/newsletters/send/congratulate/congratulate.jsx index 502f4ca3d6..950828f843 100644 --- a/assets/js/src/newsletters/send/congratulate/congratulate.jsx +++ b/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.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; diff --git a/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx b/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx index ebfae46372..3a22f9a74c 100644 --- a/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx +++ b/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 (
-

{renderHeader(props.newsletter)}

- - + {MailPoet.I18n.t('congratulationsSuccessHeader')} +

{getSuccessMessage(props.newsletter)}

+ +
); } diff --git a/plugin_repository/assets/newsletter/congratulate-1.png b/plugin_repository/assets/newsletter/congratulate-1.png new file mode 100644 index 0000000000..828d13ba45 Binary files /dev/null and b/plugin_repository/assets/newsletter/congratulate-1.png differ diff --git a/plugin_repository/assets/newsletter/congratulate-2.png b/plugin_repository/assets/newsletter/congratulate-2.png new file mode 100644 index 0000000000..597beab20f Binary files /dev/null and b/plugin_repository/assets/newsletter/congratulate-2.png differ diff --git a/plugin_repository/assets/newsletter/congratulate-3.png b/plugin_repository/assets/newsletter/congratulate-3.png new file mode 100644 index 0000000000..ef8addb02b Binary files /dev/null and b/plugin_repository/assets/newsletter/congratulate-3.png differ diff --git a/plugin_repository/assets/newsletter/congratulate-4.png b/plugin_repository/assets/newsletter/congratulate-4.png new file mode 100644 index 0000000000..40e657c35c Binary files /dev/null and b/plugin_repository/assets/newsletter/congratulate-4.png differ diff --git a/plugin_repository/assets/newsletter/error.png b/plugin_repository/assets/newsletter/error.png new file mode 100644 index 0000000000..4f8a03c68c Binary files /dev/null and b/plugin_repository/assets/newsletter/error.png differ diff --git a/views/newsletters.html b/views/newsletters.html index 4f5742b108..a28fbe55ff 100644 --- a/views/newsletters.html +++ b/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'),