From fe93b1a1503ad7d8f391029f1cf1c44ab82abc85 Mon Sep 17 00:00:00 2001
From: Sam Najian <sam.najian@automattic.com>
Date: Tue, 21 Feb 2023 20:53:14 +0100
Subject: [PATCH] Show rendering issue in listing status

[MAILPOET-4983]
---
 .../components-plugin/_listing-newsletters.scss    |  9 +++++++++
 .../common/listings/_stories/newsletter_status.tsx |  3 ++-
 .../js/src/common/listings/newsletter_status.tsx   | 14 +++++++++++---
 mailpoet/views/layout.html                         |  1 +
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/mailpoet/assets/css/src/components-plugin/_listing-newsletters.scss b/mailpoet/assets/css/src/components-plugin/_listing-newsletters.scss
index 20a21a7144..ea7422c9d0 100644
--- a/mailpoet/assets/css/src/components-plugin/_listing-newsletters.scss
+++ b/mailpoet/assets/css/src/components-plugin/_listing-newsletters.scss
@@ -202,6 +202,15 @@ h1.title.mailpoet-newsletter-listing-heading {
   }
 }
 
+.mailpoet-listing-status-corrupt {
+  color: $color-destructive;
+  padding-left: 0;
+
+  .mailpoet-listing-status-label {
+    padding-left: 0;
+  }
+}
+
 .mailpoet-listing-status-percentage {
   stroke-width: 2px;
 }
diff --git a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
index aea464f6bc..6e624a0c73 100644
--- a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
@@ -2,6 +2,7 @@ import { addHours, subHours } from 'date-fns';
 import { MailPoet } from 'mailpoet';
 import { NewsletterStatus } from '../newsletter_status';
 import { Heading } from '../../typography/heading/heading';
+import { NewsletterStatus as NewsletterStatusEnum } from '../../../newsletters/models';
 
 MailPoet.I18n.add('notSentYet', 'Not sent yet!');
 MailPoet.I18n.add('sent', 'Sent');
@@ -57,7 +58,7 @@ export function NewsletterStatuses() {
       <div className="mailpoet-gap" />
 
       <Heading level={3}>Sent without queue</Heading>
-      <NewsletterStatus status="sent" />
+      <NewsletterStatus status={NewsletterStatusEnum.Sent} />
     </>
   );
 }
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
index a11878c094..6033b912af 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { addDays, differenceInMinutes, isFuture, isPast } from 'date-fns';
 import { t } from 'common/functions/t';
 import { Tooltip } from '../tooltip/tooltip';
+import { NewsletterStatus as NewsletterStatusEnum } from '../../newsletters/models';
 
 type CircularProgressProps = {
   percentage: number;
@@ -60,7 +61,7 @@ type NewsletterStatusProps = {
   processed?: number;
   total?: number;
   isPaused?: boolean;
-  status?: string;
+  status?: NewsletterStatusEnum;
 };
 
 function NewsletterStatus({
@@ -70,10 +71,11 @@ function NewsletterStatus({
   isPaused,
   status,
 }: NewsletterStatusProps) {
+  const isCorrupt = status === 'corrupt';
   const unknown = !scheduledFor && !processed && !total;
   const scheduled = scheduledFor && isFuture(scheduledFor);
   const inProgress =
-    (!scheduledFor || isPast(scheduledFor)) && processed < total;
+    (!scheduledFor || isPast(scheduledFor)) && processed < total && !isCorrupt;
   const sent = (!scheduledFor || isPast(scheduledFor)) && processed >= total;
   const sentWithoutQueue = status === 'sent' && total === undefined;
   let percentage = 0;
@@ -134,6 +136,11 @@ function NewsletterStatus({
   if (isPaused && !sent && !sentWithoutQueue) {
     label = t('paused');
   }
+
+  if (isCorrupt) {
+    label = t('renderingProblem');
+  }
+
   return (
     <div
       className={classnames({
@@ -142,10 +149,11 @@ function NewsletterStatus({
         'mailpoet-listing-status-scheduled': scheduled,
         'mailpoet-listing-status-in-progress': inProgress,
         'mailpoet-listing-status-sent': sent || sentWithoutQueue,
+        'mailpoet-listing-status-corrupt': isCorrupt,
       })}
     >
       {scheduled && <ScheduledIcon />}
-      <CircularProgress percentage={percentage} />
+      {!isCorrupt && <CircularProgress percentage={percentage} />}
       <div className="mailpoet-listing-status-label">{label}</div>
     </div>
   );
diff --git a/mailpoet/views/layout.html b/mailpoet/views/layout.html
index 4db2dbba28..80772ae487 100644
--- a/mailpoet/views/layout.html
+++ b/mailpoet/views/layout.html
@@ -189,6 +189,7 @@ jQuery('#adminmenu #toplevel_page_mailpoet-newsletters')
 
   'sent': __('Sent'),
   'notSentYet': __('Not sent yet!'),
+  'renderingProblem': __('There was a problem with rendering!', 'mailpoet'),
 
   'allSendingPausedHeader': __('All sending is currently paused!'),
   'allSendingPausedBody': __('Your [link]API key[/link] to send with MailPoet is invalid.'),