From dbcf1b95dbe8f9367ec11784b5a3fecb97a395bc Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Thu, 10 Sep 2020 00:07:29 +0200
Subject: [PATCH] Redesign sending error page

---
 .../_newsletter-congratulate.scss                  |  3 ++-
 .../js/src/newsletters/send/congratulate/fail.jsx  | 14 +++++++++-----
 views/newsletters.html                             |  3 ++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/assets/css/src/components-plugin/_newsletter-congratulate.scss b/assets/css/src/components-plugin/_newsletter-congratulate.scss
index 3ac2f34df0..1d3a14d44d 100644
--- a/assets/css/src/components-plugin/_newsletter-congratulate.scss
+++ b/assets/css/src/components-plugin/_newsletter-congratulate.scss
@@ -17,7 +17,8 @@
   }
 }
 
-.mailpoet_congratulate_success {
+.mailpoet_congratulate_success,
+.mailpoet_congratulate_fail {
   width: 100%;
 
   h1 {
diff --git a/assets/js/src/newsletters/send/congratulate/fail.jsx b/assets/js/src/newsletters/send/congratulate/fail.jsx
index 47d9071bac..7a5945eeae 100644
--- a/assets/js/src/newsletters/send/congratulate/fail.jsx
+++ b/assets/js/src/newsletters/send/congratulate/fail.jsx
@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
 import MailPoet from 'mailpoet';
 
+import { Button } from 'common';
+import Heading from 'common/typography/heading/heading';
+
 function Fail(props) {
   return (
-    <div className="mailpoet_centered">
-      <h1>{MailPoet.I18n.t('congratulationsSendFailHeader')}</h1>
-      <p>
+    <div className="mailpoet_congratulate_fail">
+      <Heading level={1}>{MailPoet.I18n.t('congratulationsSendFailHeader')}</Heading>
+      <h1>
         { ReactStringReplace(
           MailPoet.I18n.t('congratulationsSendFailExplain'),
           /\[link\](.*?)\[\/link\]/g,
@@ -23,8 +26,9 @@ function Fail(props) {
             </a>
           )
         )}
-      </p>
-      <button type="button" className="button" onClick={props.failClicked}>{MailPoet.I18n.t('close')}</button>
+      </h1>
+      <img src={window.mailpoet_congratulations_error_image} alt="" width="500" />
+      <Button dimension="small" type="button" onClick={props.failClicked}>{MailPoet.I18n.t('close')}</Button>
     </div>
   );
 }
diff --git a/views/newsletters.html b/views/newsletters.html
index daaf9133d6..2671efe5a8 100644
--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -47,6 +47,7 @@
         '<%= cdn_url('newsletter/congratulate-3.png') %>',
         '<%= cdn_url('newsletter/congratulate-4.png') %>',
       ];
+      var mailpoet_congratulations_error_image = '<%= cdn_url('newsletter/error.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') %>';
@@ -388,7 +389,7 @@
     'congratulationsPostNotificationSuccessBody': __('Your Post Notification is now active.'),
     'congratulationsWelcomeEmailSuccessBody': __('Your Welcome Email is now active.'),
     
-    'congratulationsSendFailHeader': __('Oops! We can’t send your newsletter 😕'),
+    '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'),
     'congratulationsLoadingBody': __('Congrats, you’re sending your first newsletter! We’re doing a quick verification to make sure everything works fine.'),