From 4d16bb1cb0b960703d2a85fb7e0fa209fc073eba Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 12 Feb 2024 18:25:19 -0800
Subject: [PATCH 1/4] Fix message status pill colors

---
 .../messaging/messageStatusPill.svelte                 | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/messageStatusPill.svelte b/src/routes/console/project-[project]/messaging/messageStatusPill.svelte
index 46b309abc7..1bca4d2de6 100644
--- a/src/routes/console/project-[project]/messaging/messageStatusPill.svelte
+++ b/src/routes/console/project-[project]/messaging/messageStatusPill.svelte
@@ -5,15 +5,11 @@
 </script>
 
 <Pill
-    success={status === 'sent'}
     info={status === 'scheduled'}
-    button={status == 'failed'}
+    warning={status === 'processing'}
+    success={status === 'sent'}
+    danger={status == 'failed'}
     on:click>
-    {#if status === 'sent'}
-        <span class="icon-check-circle" aria-hidden="true"></span>
-    {:else if status === 'scheduled'}
-        <span class="icon-clock" aria-hidden="true"></span>
-    {/if}
     <span class="text u-trim">
         {status}
     </span>

From 5eb791d459cadab9fddfceffb359945cf68da766 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 12 Feb 2024 18:41:56 -0800
Subject: [PATCH 2/4] Update messages table to show Details link for errors

---
 .../project-[project]/messaging/+page.svelte  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/+page.svelte b/src/routes/console/project-[project]/messaging/+page.svelte
index 54802667eb..3f7d149640 100644
--- a/src/routes/console/project-[project]/messaging/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/+page.svelte
@@ -169,13 +169,18 @@
                                     </TableCellText>
                                 {:else if column.id === 'status'}
                                     <TableCellText onlyDesktop title="Status">
-                                        <MessageStatusPill
-                                            status={message.status}
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                errors = message.deliveryErrors;
-                                                showFailed = true;
-                                            }} />
+                                        <span class="u-inline-flex u-gap-12 u-cross-center">
+                                            <MessageStatusPill status={message.status} />
+                                            {#if message.status === 'failed'}
+                                                <Button
+                                                    link
+                                                    on:click={(e) => {
+                                                        e.preventDefault();
+                                                        errors = message.deliveryErrors;
+                                                        showFailed = true;
+                                                    }}>Details</Button>
+                                            {/if}
+                                        </span>
                                     </TableCellText>
                                 {:else if column.type === 'datetime'}
                                     <TableCellText title={column.title} width={column.width}>

From adc1075ddc7fe14db37b13e8a592a5e002c6abda Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:04:10 -0800
Subject: [PATCH 3/4] Update copy on the message errors modal

---
 .../project-[project]/messaging/failedModal.svelte    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/failedModal.svelte b/src/routes/console/project-[project]/messaging/failedModal.svelte
index 6ee183ffd1..208350b71c 100644
--- a/src/routes/console/project-[project]/messaging/failedModal.svelte
+++ b/src/routes/console/project-[project]/messaging/failedModal.svelte
@@ -9,7 +9,16 @@
 
 <Modal title="Message error" headerDivider={false} bind:show size="big">
     <div class="box u-flex-vertical u-gap-24">
-        <p>Some messages failed to send.</p>
+        <p class="u-inline-flex u-cross-center u-gap-8">
+            <span
+                class="icon-exclamation-circle u-font-size-20"
+                aria-hidden="true"
+                style="color:hsl(var(--color-danger-100));" />Message failed
+        </p>
+        <p>
+            The message has been sent with errors. Please refer to the logs below for more
+            information.
+        </p>
         <div style="max-inline-size: 524px">
             <Code language="html" code={errors.join('\n')} noMargin noBoxPadding allowScroll />
         </div>

From 76defd71bb4ce86a0e20399b40b62f7d0db920ea Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:05:49 -0800
Subject: [PATCH 4/4] Add a button to view logs in message details

---
 .../message-[message]/overview.svelte         | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
index 7413cfd794..1654500dc4 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
@@ -5,8 +5,13 @@
     import ProviderType from '../providerType.svelte';
     import MessageStatusPill from '../messageStatusPill.svelte';
     import { MessagingProviderType } from '@appwrite.io/console';
+    import { Button } from '$lib/elements/forms';
+    import FailedModal from '../failedModal.svelte';
 
     let scheduledAt: string = '';
+    let showFailed = false;
+    let errors: string[] = [];
+
     if ($message.status === 'sent') {
         scheduledAt = $message.deliveredAt;
     } else if ($message.status === 'scheduled') {
@@ -46,8 +51,16 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <!-- TODO: Add support for editing draft messages -->
-        <!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
-            >Edit message</Button> -->
+        {#if $message.status === 'failed'}
+            <Button
+                text
+                on:click={(e) => {
+                    e.preventDefault();
+                    errors = $message.deliveryErrors;
+                    showFailed = true;
+                }}>View logs</Button>
+        {/if}
     </svelte:fragment>
 </CardGrid>
+
+<FailedModal bind:show={showFailed} {errors} />