feat: add error case

app/javascript/dashboard/components-next/message/EmailMessages.story.vue

@@ -3,6 +3,17 @@ import Message from './Message.vue';
 
 import simpleEmail from './fixtures/simpleEmail.js';
 import newsletterEmail from './fixtures/newsletterEmail.js';
+
+const failedEmail = {
+  ...simpleEmail[0],
+  status: 'failed',
+  senderId: 1,
+  senderType: 'User',
+  contentAttributes: {
+    ...simpleEmail[0].contentAttributes,
+    externalError: 'Failed to send email',
+  },
+};
 </script>
 
 <template>
@@ -24,5 +35,10 @@ import newsletterEmail from './fixtures/newsletterEmail.js';
         </template>
       </div>
     </Variant>
+    <Variant title="Failed Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="failedEmail" />
+      </div>
+    </Variant>
   </Story>
 </template>

app/javascript/dashboard/components-next/message/Message.vue

@@ -140,13 +140,13 @@ const props = defineProps({
  */
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
-  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
   if (props.isEmailInbox) {
     const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
     if (emailInboxTypes.includes(props.messageType)) {
       return MESSAGE_VARIANTS.EMAIL;
     }
   }
+  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
 
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,

app/javascript/dashboard/components-next/message/bubbles/Email.vue

@@ -3,6 +3,7 @@ import { computed, useTemplateRef, ref, watch } from 'vue';
 import { Letter } from 'vue-letter';
 import Icon from 'next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
+import { MESSAGE_STATUS } from '../constants';
 
 const props = defineProps({
   content: {
@@ -13,6 +14,11 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
   sender: {
     type: Object,
     default: () => ({}),
@@ -33,6 +39,10 @@ watch(
   { immediate: true }
 );
 
+const hasError = computed(() => {
+  return props.status === MESSAGE_STATUS.FAILED;
+});
+
 const contentToShow = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
 });
@@ -86,10 +96,13 @@ const showMeta = computed(() => {
   <BaseBubble class="w-full overflow-hidden">
     <div
       v-if="showMeta"
-      class="p-4 text-n-slate-11 space-y-1 pr-9 border-b border-n-strong"
+      class="p-4 space-y-1 pr-9 border-b border-n-strong"
+      :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
     >
       <div v-if="fromEmail[0]">
-        <span class="text-n-slate-12">{{ senderName }}</span>
+        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
+          {{ senderName }}
+        </span>
         &lt;{{ fromEmail[0] }}&gt;
       </div>
       <div v-if="toEmail.length">