Skip to content

Commit a6a7eb2

Browse files
stnguyen90stnguyen90
committed
Update create message wizard to support SMS
1 parent 81dbe6e commit a6a7eb2

3 files changed

Lines changed: 139 additions & 3 deletions

File tree

‎src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<script context="module" lang="ts">
2+
export async function createSMSMessage(params: EmailMessageParams) {
3+
const response = await sdk.forProject.client.call(
4+
'POST',
5+
new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/sms'),
6+
{
7+
'X-Appwrite-Project': sdk.forProject.client.config.project,
8+
'content-type': 'application/json',
9+
'X-Appwrite-Mode': 'admin'
10+
},
11+
params
12+
);
13+
14+
return response.json();
15+
}
16+
</script>
17+
18+
<script lang="ts">
19+
import { messageParams, providerType, type EmailMessageParams, MessageStatuses } from './store';
20+
import {
21+
Button,
22+
FormList,
23+
InputEmail,
24+
InputRadio,
25+
InputTextarea
26+
} from '$lib/elements/forms';
27+
import { Pill } from '$lib/elements';
28+
import { CustomId, Modal } from '$lib/components';
29+
import { user } from '$lib/stores/user';
30+
import { clickOnEnter } from '$lib/helpers/a11y';
31+
import { ID } from '@appwrite.io/console';
32+
import { sdk } from '$lib/stores/sdk';
33+
import { ProviderTypes } from '../providerType.svelte';
34+
35+
let showCustomId = false;
36+
let showTest = false;
37+
let selected = 'self';
38+
let otherEmail = '';
39+
40+
async function sendTestSMS() {
41+
const email = selected === 'self' ? $user.email : otherEmail;
42+
console.log(email);
43+
44+
createSMSMessage({
45+
topics: $messageParams[ProviderTypes.Email]?.topics || [],
46+
targets: $messageParams[ProviderTypes.Email]?.targets || [],
47+
description: $messageParams[ProviderTypes.Email]?.description || 'Test message',
48+
status: MessageStatuses.PROCESSING,
49+
messageId: ID.unique(),
50+
// TODO: properly handle the test email address
51+
users: ['steven'],
52+
subject: $messageParams[ProviderTypes.Email]?.subject || '',
53+
content: $messageParams[ProviderTypes.Email]?.content || '',
54+
html: $messageParams[ProviderTypes.Email]?.html || false
55+
});
56+
}
57+
58+
$: otherEmail = selected === 'self' ? '' : otherEmail;
59+
</script>
60+
61+
<div class="u-flex u-gap-24">
62+
<FormList class="u-stretch">
63+
<div class="u-colum-gap-2">
64+
<InputTextarea
65+
id="message"
66+
label="Message"
67+
placeholder="Type here..."
68+
bind:value={$messageParams[$providerType]['content']}>
69+
</InputTextarea>
70+
<!-- TODO: Add support for draft messages -->
71+
<!-- <div class="u-flex u-main-end">
72+
<Button text on:click={() => (showTest = true)}>Send test message</Button>
73+
</div> -->
74+
<Modal title="Send test message" bind:show={showTest} onSubmit={sendTestSMS} size="big">
75+
<slot />
76+
<InputRadio
77+
label={$user.phone}
78+
bind:group={selected}
79+
value="self"
80+
id="self"
81+
name="selected" />
82+
<InputRadio
83+
label="Other"
84+
bind:group={selected}
85+
value="other"
86+
id="other"
87+
name="selected"
88+
fullWidth>
89+
<svelte:fragment slot="description">
90+
Enter the phone number to which the test message will be
91+
<div
92+
on:click={() => (selected = 'other')}
93+
on:keyup|self={clickOnEnter}
94+
role="button"
95+
tabindex="0">
96+
<InputEmail
97+
showLabel={false}
98+
id="email"
99+
label="Email"
100+
placeholder="Enter email"
101+
bind:value={otherEmail} />
102+
</div>
103+
</svelte:fragment>
104+
</InputRadio>
105+
106+
<svelte:fragment slot="footer">
107+
<Button secondary on:click={() => (showTest = false)}>Cancel</Button>
108+
<Button submit>Send</Button>
109+
</svelte:fragment>
110+
</Modal>
111+
</div>
112+
{#if !showCustomId}
113+
<div>
114+
<Pill button on:click={() => (showCustomId = !showCustomId)}
115+
><span class="icon-pencil" aria-hidden="true" /><span class="text">
116+
Message ID
117+
</span></Pill>
118+
</div>
119+
{:else}
120+
<CustomId
121+
bind:show={showCustomId}
122+
name="Message"
123+
bind:id={$messageParams[$providerType].messageId}
124+
autofocus={false} />
125+
{/if}
126+
</FormList>
127+
<!-- TODO: show a preview of the SMS -->
128+
<!-- <div class="u-width-250 card is-only-desktop">
129+
aksldjfk
130+
</div> -->
131+
</div>

‎src/routes/console/project-[project]/messaging/wizard/step1.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
import { WizardStep } from '$lib/layout';
33
import { messageParams, providerType } from './store';
44
import { providers } from '../providers/store';
5+
import { ProviderTypes } from '../providerType.svelte';
56
import EmailFormList from './emailFormList.svelte';
7+
import SmsFormList from './smsFormList.svelte';
68
79
async function beforeSubmit() {
810
console.log($messageParams[$providerType]);
@@ -16,5 +18,9 @@
1618
Create an {providers[$providerType].text} that will be displayed to your subscribers. Learn more
1719
in our documentation.
1820
</svelte:fragment>
19-
<EmailFormList />
21+
{#if $providerType === ProviderTypes.Email}
22+
<EmailFormList />
23+
{:else if $providerType === ProviderTypes.Sms}
24+
<SmsFormList />
25+
{/if}
2026
</WizardStep>

‎src/routes/console/project-[project]/messaging/wizard/step2.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import { Card } from '$lib/components';
33
import UserTargetsModal, { type Target } from '../userTargetsModal.svelte';
4-
import { ProviderTypes } from '../providerType.svelte';
54
import { Button } from '$lib/elements/forms';
65
import {
76
Table,
@@ -93,7 +92,7 @@
9392
</WizardStep>
9493

9594
<UserTargetsModal
96-
providerType={ProviderTypes.Email}
95+
providerType={$providerType}
9796
bind:show={showDropdown}
9897
bind:targetsById={$targetsById}
9998
on:update={update} />

0 commit comments

Comments
 (0)