From 543fca4daa34c68c87b7436a5e4909a0ac3c9745 Mon Sep 17 00:00:00 2001 From: Steven Nguyen <stnguyen90@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:56:52 -0800 Subject: [PATCH] Update message detail to show push preview --- .../messaging/message-[message]/+page.svelte | 3 ++ .../message-[message]/pushPreview.svelte | 31 +++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte index 8c5734c02a..c949eba855 100644 --- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte +++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte @@ -6,6 +6,7 @@ import { message } from './store'; import { ProviderTypes } from '../providerType.svelte'; import SMSPreview from './smsPreview.svelte'; + import PushPreview from './pushPreview.svelte'; </script> <Container> @@ -14,6 +15,8 @@ <EmailPreview /> {:else if $message.providerType === ProviderTypes.Sms} <SMSPreview /> + {:else if $message.providerType === ProviderTypes.Push} + <PushPreview /> {/if} <Delete /> </Container> diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte new file mode 100644 index 0000000000..e632394d5c --- /dev/null +++ b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte @@ -0,0 +1,31 @@ +<script lang="ts"> + import { CardGrid, Heading } from '$lib/components'; + import { FormList, InputText, InputTextarea } from '$lib/elements/forms'; + import { message } from './store'; + import PushPhone from '../pushPhone.svelte'; +</script> + +<CardGrid> + <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16"> + <Heading tag="h6" size="7">Preview</Heading> + <PushPhone title={$message.data.title} body={$message.data.body} /> + </div> + <svelte:fragment slot="aside"> + <FormList> + <InputText id="title" label="Title" disabled={true} bind:value={$message.data.title}> + </InputText> + <InputTextarea + id="message" + label="Message" + disabled={true} + bind:value={$message.data.body}> + </InputTextarea> + </FormList> + </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> --> + </svelte:fragment> +</CardGrid>