68 lines
2.1 KiB
Svelte
68 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
let { emailData = $bindable() } = $props<{
|
|
emailData: {
|
|
subject: string;
|
|
body: string;
|
|
};
|
|
}>();
|
|
|
|
const templateVariables = [
|
|
{ name: '{name}', description: "Participant's first name" },
|
|
{ name: '{surname}', description: "Participant's last name" }
|
|
];
|
|
|
|
const subjectTemplatesDetected = $derived(
|
|
templateVariables.filter((v) => emailData.subject && emailData.subject.includes(v.name))
|
|
);
|
|
const bodyTemplatesDetected = $derived(
|
|
templateVariables.filter((v) => emailData.body && emailData.body.includes(v.name))
|
|
);
|
|
</script>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label for="emailSubject" class="mb-2 block text-sm font-medium text-gray-700">
|
|
Email Subject *
|
|
</label>
|
|
<input
|
|
id="emailSubject"
|
|
type="text"
|
|
bind:value={emailData.subject}
|
|
class="w-full rounded border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder="Event invitation subject"
|
|
/>
|
|
{#if subjectTemplatesDetected.length > 0}
|
|
<p class="mt-1 text-xs text-gray-500">
|
|
Detected templates: {subjectTemplatesDetected.map((v) => v.name).join(', ')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="emailBody" class="mb-2 block text-sm font-medium text-gray-700">
|
|
Email Body *
|
|
</label>
|
|
<textarea
|
|
id="emailBody"
|
|
bind:value={emailData.body}
|
|
rows="8"
|
|
class="w-full rounded border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder="Email message content..."
|
|
></textarea>
|
|
{#if bodyTemplatesDetected.length > 0}
|
|
<p class="text-xs text-gray-500">
|
|
Detected templates: {bodyTemplatesDetected.map((v) => v.name).join(', ')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<p class="mt-2 mb-2 block text-sm font-medium text-gray-700">Tip:</p>
|
|
<p class="text-xs text-gray-500">
|
|
Use <code class="rounded bg-gray-100 px-1 py-0.5 text-xs">{name}</code> and
|
|
<code class="rounded bg-gray-100 px-1 py-0.5 text-xs">{surname}</code> to personalize
|
|
your message. Works for both subject and body. (e.g., "Hello {name}, welcome to our event!")
|
|
</p>
|
|
</div>
|
|
</div>
|