Show rendering issue in listing status

[MAILPOET-4983]

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

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

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

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.'),