@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/sveltekit/src/lib/vicket/TicketDialog.svelte

@@ -1,406 +1,405 @@
-<script lang="ts">
-  import type { Template, FormValues } from "$lib/vicket";
-  import { createTicket, initialFormValues, cn } from "$lib/vicket";
-
-  let {
-    open,
-    onclose,
-    templates,
-  }: {
-    open: boolean;
-    onclose: () => void;
-    templates: Template[];
-  } = $props();
-
-  /* -- Internal state -- */
-  let step = $state<"identify" | "details" | "success">("identify");
-  let selectedTemplateId = $state("");
-  let form = $state<FormValues>({ ...initialFormValues });
-  let isSubmitting = $state(false);
-  let dialogError = $state("");
-  let emailLimitReached = $state(false);
-
-  /* -- Derived -- */
-  let selectedTemplate = $derived(templates.find((t) => t.id === selectedTemplateId) || null);
-  let orderedQuestions = $derived(
-    [...(selectedTemplate?.questions || [])].sort((a, b) => a.order - b.order),
-  );
-  let canContinue = $derived(form.email.trim().length > 0);
-
-  /* -- Sync selectedTemplateId when templates changes -- */
-  $effect(() => {
-    if (templates.length > 0 && !selectedTemplateId) {
-      selectedTemplateId = templates[0].id;
-    }
-  });
-
-  /* -- Reset when dialog opens -- */
-  $effect(() => {
-    if (open) {
-      step = "identify";
-      form = { ...initialFormValues };
-      dialogError = "";
-      emailLimitReached = false;
-      selectedTemplateId = templates.length > 0 ? templates[0].id : "";
-    }
-  });
-
-  /* -- Functions -- */
-  function resetAndClose() {
-    step = "identify";
-    form = { ...initialFormValues };
-    dialogError = "";
-    selectedTemplateId = templates.length > 0 ? templates[0].id : "";
-    onclose();
-  }
-
-  function updateAnswer(questionId: string, value: unknown) {
-    form = { ...form, answers: { ...form.answers, [questionId]: value } };
-  }
-
-  function toggleCheckboxValue(questionId: string, value: string, checked: boolean) {
-    const current = Array.isArray(form.answers[questionId])
-      ? (form.answers[questionId] as string[])
-      : [];
-    const next = checked
-      ? [...new Set([...current, value])]
-      : current.filter((item) => item !== value);
-    updateAnswer(questionId, next);
-  }
-
-  function validateRequired(): string {
-    if (!selectedTemplate) return "Please select a template.";
-    if (!form.email.trim()) return "Email is required.";
-    if (!form.title.trim()) return "Subject is required.";
-
-    for (const question of orderedQuestions) {
-      if (!question.required) continue;
-      const value = form.answers[question.id];
-
-      if (question.type === "CHECKBOX") {
-        if (!Array.isArray(value) || value.length === 0)
-          return `"${question.label}" is required.`;
-        continue;
-      }
-      if (question.type === "FILE") {
-        if (!(value instanceof File)) return `"${question.label}" is required.`;
-        continue;
-      }
-      if (value === null || value === undefined || String(value).trim() === "") {
-        return `"${question.label}" is required.`;
-      }
-    }
-    return "";
-  }
-
-  async function handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    dialogError = "";
-
-    const validationError = validateRequired();
-    if (validationError) {
-      dialogError = validationError;
-      return;
-    }
-    if (!selectedTemplate) {
-      dialogError = "Template is required.";
-      return;
-    }
-
-    isSubmitting = true;
-    try {
-      const fileQuestionIds = orderedQuestions
-        .filter((q) => q.type === "FILE" && form.answers[q.id] instanceof File)
-        .map((q) => q.id);
-
-      const result = await createTicket({
-        email: form.email.trim(),
-        title: form.title.trim(),
-        templateId: selectedTemplate.id,
-        answers: { ...form.answers },
-        hasFiles: fileQuestionIds.length > 0,
-        fileQuestionIds,
-      });
-
-      emailLimitReached = result.emailLimitReached ?? false;
-      step = "success";
-    } catch (submitError) {
-      dialogError = submitError instanceof Error ? submitError.message : "Unexpected error.";
-    } finally {
-      isSubmitting = false;
-    }
-  }
-</script>
-
-{#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onclick={resetAndClose}>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="relative mx-4 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl" onclick={(e) => e.stopPropagation()}>
-      <!-- Close button -->
-      <button
-        type="button"
-        onclick={resetAndClose}
-        class="absolute right-4 top-4 z-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900"
-        aria-label="Close"
-      >
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-      </button>
-
-      {#if step === "success"}
-        <div class="px-6 py-12 text-center">
-          <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-green-50 text-green-600">
-            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
-          </div>
-          <h2 class="m-0 text-xl font-bold text-slate-900">Ticket submitted!</h2>
-          {#if emailLimitReached}
-            <p class="mt-2 text-sm text-slate-500">
-              Your ticket was created, but the daily email limit for this service has been reached. No confirmation email was sent. Please consider using a self-hosted email delivery setup for unlimited emails.
-            </p>
-          {:else}
-            <p class="mt-2 text-sm text-slate-500">
-              Check your email for a secure link to follow your ticket.
-            </p>
-          {/if}
-          <button
-            type="button"
-            class="mt-6 inline-flex items-center gap-2 !rounded-full border border-slate-200 bg-white !px-7 !py-3 text-sm font-semibold text-slate-900 cursor-pointer transition-all hover:border-slate-300 hover:bg-slate-50"
-            onclick={resetAndClose}
-          >
-            Close
-          </button>
-        </div>
-      {:else if step === "identify"}
-        <div class="px-6 py-6">
-          <h2 class="m-0 text-lg font-bold text-slate-900">Submit a request</h2>
-          <p class="mt-1 text-sm text-slate-500">We'll get back to you as soon as possible.</p>
-          <div class="mt-5 space-y-5">
-            {#if dialogError}
-              <div class={cn("flex items-start gap-3 rounded-xl border p-4 text-sm", "border-red-200 bg-red-50 text-red-900")} role="alert">
-                <span class="mt-0.5 shrink-0">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-                </span>
-                <span class="flex-1">{dialogError}</span>
-                <button type="button" onclick={() => (dialogError = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-                </button>
-              </div>
-            {/if}
-
-            <!-- Email -->
-            <div class="space-y-1.5">
-              <label class="text-sm font-semibold text-slate-900" for="vk-dialog-email">Email<span class="text-red-600"> *</span></label>
-              <div class="relative">
-                <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
-                </span>
-                <input
-                  id="vk-dialog-email"
-                  class="w-full rounded-lg border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                  type="email"
-                  placeholder="you@example.com"
-                  bind:value={form.email}
-                  required
-                />
-              </div>
-              <p class="text-xs text-slate-500">We'll contact you at this address.</p>
-            </div>
-
-            <!-- Template selector -->
-            {#if templates.length > 1}
-              <div class="space-y-2">
-                <p class="m-0 text-sm font-semibold text-slate-900">What can we help you with?</p>
-                <div class="grid gap-2">
-                  {#each templates as template (template.id)}
-                    <button
-                      type="button"
-                      class={cn(
-                        "flex w-full cursor-pointer items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3.5 text-left transition-all duration-150 hover:border-slate-300",
-                        selectedTemplateId === template.id && "!border-blue-600 !bg-blue-50 ring-3 ring-blue-600/12",
-                      )}
-                      onclick={() => (selectedTemplateId = template.id)}
-                    >
-                      <span class={cn(
-                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                        selectedTemplateId === template.id
-                          ? "border-blue-600 bg-blue-600"
-                          : "border-slate-300 bg-transparent",
-                      )}>
-                        {#if selectedTemplateId === template.id}
-                          <span class="block h-1.5 w-1.5 rounded-full bg-white"></span>
-                        {/if}
-                      </span>
-                      <div>
-                        <span class="block text-sm font-semibold text-slate-900">{template.name}</span>
-                        {#if template.description}
-                          <span class="mt-0.5 block text-xs text-slate-500">{template.description}</span>
-                        {/if}
-                      </div>
-                    </button>
-                  {/each}
-                </div>
-              </div>
-            {/if}
-
-            <!-- Continue -->
-            <button
-              type="button"
-              class="inline-flex w-full items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
-              disabled={!canContinue}
-              onclick={() => { dialogError = ""; step = "details"; }}
-            >
-              Continue
-            </button>
-          </div>
-        </div>
-      {:else if step === "details"}
-        <div class="px-6 py-6">
-          <button
-            type="button"
-            class="-ml-2 -mt-1 mb-3 inline-flex cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900"
-            onclick={() => { dialogError = ""; step = "identify"; }}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
-            Back
-          </button>
-
-          <h2 class="m-0 text-lg font-bold text-slate-900">
-            {selectedTemplate?.name || "Ticket details"}
-          </h2>
-
-          <form class="mt-5 space-y-4" onsubmit={handleSubmit}>
-            {#if dialogError}
-              <div class={cn("flex items-start gap-3 rounded-xl border p-4 text-sm", "border-red-200 bg-red-50 text-red-900")} role="alert">
-                <span class="mt-0.5 shrink-0">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-                </span>
-                <span class="flex-1">{dialogError}</span>
-                <button type="button" onclick={() => (dialogError = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-                </button>
-              </div>
-            {/if}
-
-            <!-- Subject -->
-            <div class="space-y-1.5">
-              <label class="text-sm font-semibold text-slate-900" for="vk-dialog-subject">Subject<span class="text-red-600"> *</span></label>
-              <input
-                id="vk-dialog-subject"
-                class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                type="text"
-                placeholder="Brief description of your issue"
-                bind:value={form.title}
-                required
-              />
-            </div>
-
-            <!-- Dynamic questions -->
-            {#each orderedQuestions as question (question.id)}
-              <div class="space-y-1.5">
-                <label class="text-sm font-semibold text-slate-900">
-                  {question.label}{#if question.required}<span class="text-red-600"> *</span>{/if}
-                </label>
-
-                {#if question.type === "TEXT"}
-                  <input
-                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                    type="text"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
-                  />
-                {:else if question.type === "TEXTAREA"}
-                  <textarea
-                    class="min-h-[100px] w-full resize-y rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
-                  ></textarea>
-                {:else if question.type === "DATE"}
-                  <input
-                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                    type="date"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
-                  />
-                {:else if question.type === "SELECT"}
-                  <select
-                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                    value={String(form.answers[question.id] || "")}
-                    onchange={(e) => updateAnswer(question.id, e.currentTarget.value)}
-                  >
-                    <option value="">Select an option</option>
-                    {#each question.options || [] as option (option.id)}
-                      <option value={option.value}>{option.label}</option>
-                    {/each}
-                  </select>
-                {:else if question.type === "CHECKBOX"}
-                  <div class="space-y-2 pt-1">
-                    {#each question.options || [] as option (option.id)}
-                      <label class="flex items-center gap-2.5 text-sm text-slate-900">
-                        <input
-                          type="checkbox"
-                          class="h-4 w-4 rounded accent-blue-600"
-                          checked={Array.isArray(form.answers[question.id]) && (form.answers[question.id] as string[]).includes(option.value)}
-                          onchange={(e) => toggleCheckboxValue(question.id, option.value, e.currentTarget.checked)}
-                        />
-                        <span>{option.label}</span>
-                      </label>
-                    {/each}
-                  </div>
-                {:else if question.type === "FILE"}
-                  {#if form.answers[question.id] instanceof File}
-                    <div class="flex flex-wrap gap-1.5">
-                      <span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-500">
-                        {(form.answers[question.id] as File).name}
-                        <button
-                          type="button"
-                          onclick={() => updateAnswer(question.id, null)}
-                          class="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-500 transition-colors hover:text-red-600"
-                          aria-label="Remove file"
-                        >
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-                        </button>
-                      </span>
-                    </div>
-                  {:else}
-                    <input
-                      class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                      type="file"
-                      accept="image/jpeg,image/png,image/gif,image/webp"
-                      onchange={(e) => {
-                        const input = e.currentTarget as HTMLInputElement;
-                        const file = input.files?.[0] || null;
-                        if (file && !["image/png","image/jpeg","image/gif","image/webp"].includes(file.type)) {
-                          input.value = "";
-                          return;
-                        }
-                        updateAnswer(question.id, file);
-                      }}
-                    />
-                  {/if}
-                {/if}
-              </div>
-            {/each}
-
-            <!-- Actions -->
-            <div class="flex items-center gap-3 pt-2">
-              <button
-                class="inline-flex flex-1 items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
-                type="submit"
-                disabled={isSubmitting}
-              >
-                {#if isSubmitting}
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
-                  Submitting...
-                {:else}
-                  Submit
-                {/if}
-              </button>
-            </div>
-          </form>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { cn, createTicket, initialFormValues, type Template, type FormValues } from "vicket";
+
+  let {
+    open,
+    onclose,
+    templates,
+  }: {
+    open: boolean;
+    onclose: () => void;
+    templates: Template[];
+  } = $props();
+
+  /* -- Internal state -- */
+  let step = $state<"identify" | "details" | "success">("identify");
+  let selectedTemplateId = $state("");
+  let form = $state<FormValues>({ ...initialFormValues });
+  let isSubmitting = $state(false);
+  let dialogError = $state("");
+  let emailLimitReached = $state(false);
+
+  /* -- Derived -- */
+  let selectedTemplate = $derived(templates.find((t) => t.id === selectedTemplateId) || null);
+  let orderedQuestions = $derived(
+    [...(selectedTemplate?.questions || [])].sort((a, b) => a.order - b.order),
+  );
+  let canContinue = $derived(form.email.trim().length > 0);
+
+  /* -- Sync selectedTemplateId when templates changes -- */
+  $effect(() => {
+    if (templates.length > 0 && !selectedTemplateId) {
+      selectedTemplateId = templates[0].id;
+    }
+  });
+
+  /* -- Reset when dialog opens -- */
+  $effect(() => {
+    if (open) {
+      step = "identify";
+      form = { ...initialFormValues };
+      dialogError = "";
+      emailLimitReached = false;
+      selectedTemplateId = templates.length > 0 ? templates[0].id : "";
+    }
+  });
+
+  /* -- Functions -- */
+  function resetAndClose() {
+    step = "identify";
+    form = { ...initialFormValues };
+    dialogError = "";
+    selectedTemplateId = templates.length > 0 ? templates[0].id : "";
+    onclose();
+  }
+
+  function updateAnswer(questionId: string, value: unknown) {
+    form = { ...form, answers: { ...form.answers, [questionId]: value } };
+  }
+
+  function toggleCheckboxValue(questionId: string, value: string, checked: boolean) {
+    const current = Array.isArray(form.answers[questionId])
+      ? (form.answers[questionId] as string[])
+      : [];
+    const next = checked
+      ? [...new Set([...current, value])]
+      : current.filter((item) => item !== value);
+    updateAnswer(questionId, next);
+  }
+
+  function validateRequired(): string {
+    if (!selectedTemplate) return "Please select a template.";
+    if (!form.email.trim()) return "Email is required.";
+    if (!form.title.trim()) return "Subject is required.";
+
+    for (const question of orderedQuestions) {
+      if (!question.required) continue;
+      const value = form.answers[question.id];
+
+      if (question.type === "CHECKBOX") {
+        if (!Array.isArray(value) || value.length === 0)
+          return `"${question.label}" is required.`;
+        continue;
+      }
+      if (question.type === "FILE") {
+        if (!(value instanceof File)) return `"${question.label}" is required.`;
+        continue;
+      }
+      if (value === null || value === undefined || String(value).trim() === "") {
+        return `"${question.label}" is required.`;
+      }
+    }
+    return "";
+  }
+
+  async function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    dialogError = "";
+
+    const validationError = validateRequired();
+    if (validationError) {
+      dialogError = validationError;
+      return;
+    }
+    if (!selectedTemplate) {
+      dialogError = "Template is required.";
+      return;
+    }
+
+    isSubmitting = true;
+    try {
+      const fileQuestionIds = orderedQuestions
+        .filter((q) => q.type === "FILE" && form.answers[q.id] instanceof File)
+        .map((q) => q.id);
+
+      const result = await createTicket({
+        email: form.email.trim(),
+        title: form.title.trim(),
+        templateId: selectedTemplate.id,
+        answers: { ...form.answers },
+        hasFiles: fileQuestionIds.length > 0,
+        fileQuestionIds,
+      });
+
+      emailLimitReached = result.emailLimitReached ?? false;
+      step = "success";
+    } catch (submitError) {
+      dialogError = submitError instanceof Error ? submitError.message : "Unexpected error.";
+    } finally {
+      isSubmitting = false;
+    }
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onclick={resetAndClose}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="relative mx-4 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl" onclick={(e) => e.stopPropagation()}>
+      <!-- Close button -->
+      <button
+        type="button"
+        onclick={resetAndClose}
+        class="absolute right-4 top-4 z-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900"
+        aria-label="Close"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+      </button>
+
+      {#if step === "success"}
+        <div class="px-6 py-12 text-center">
+          <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-green-50 text-green-600">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+          </div>
+          <h2 class="m-0 text-xl font-bold text-slate-900">Ticket submitted!</h2>
+          {#if emailLimitReached}
+            <p class="mt-2 text-sm text-slate-500">
+              Your ticket was created, but the daily email limit for this service has been reached. No confirmation email was sent. Please consider using a self-hosted email delivery setup for unlimited emails.
+            </p>
+          {:else}
+            <p class="mt-2 text-sm text-slate-500">
+              Check your email for a secure link to follow your ticket.
+            </p>
+          {/if}
+          <button
+            type="button"
+            class="mt-6 inline-flex items-center gap-2 !rounded-full border border-slate-200 bg-white !px-7 !py-3 text-sm font-semibold text-slate-900 cursor-pointer transition-all hover:border-slate-300 hover:bg-slate-50"
+            onclick={resetAndClose}
+          >
+            Close
+          </button>
+        </div>
+      {:else if step === "identify"}
+        <div class="px-6 py-6">
+          <h2 class="m-0 text-lg font-bold text-slate-900">Submit a request</h2>
+          <p class="mt-1 text-sm text-slate-500">We'll get back to you as soon as possible.</p>
+          <div class="mt-5 space-y-5">
+            {#if dialogError}
+              <div class={cn("flex items-start gap-3 rounded-xl border p-4 text-sm", "border-red-200 bg-red-50 text-red-900")} role="alert">
+                <span class="mt-0.5 shrink-0">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                </span>
+                <span class="flex-1">{dialogError}</span>
+                <button type="button" onclick={() => (dialogError = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+                </button>
+              </div>
+            {/if}
+
+            <!-- Email -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-semibold text-slate-900" for="vk-dialog-email">Email<span class="text-red-600"> *</span></label>
+              <div class="relative">
+                <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
+                </span>
+                <input
+                  id="vk-dialog-email"
+                  class="w-full rounded-lg border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                  type="email"
+                  placeholder="you@example.com"
+                  bind:value={form.email}
+                  required
+                />
+              </div>
+              <p class="text-xs text-slate-500">We'll contact you at this address.</p>
+            </div>
+
+            <!-- Template selector -->
+            {#if templates.length > 1}
+              <div class="space-y-2">
+                <p class="m-0 text-sm font-semibold text-slate-900">What can we help you with?</p>
+                <div class="grid gap-2">
+                  {#each templates as template (template.id)}
+                    <button
+                      type="button"
+                      class={cn(
+                        "flex w-full cursor-pointer items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3.5 text-left transition-all duration-150 hover:border-slate-300",
+                        selectedTemplateId === template.id && "!border-blue-600 !bg-blue-50 ring-3 ring-blue-600/12",
+                      )}
+                      onclick={() => (selectedTemplateId = template.id)}
+                    >
+                      <span class={cn(
+                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                        selectedTemplateId === template.id
+                          ? "border-blue-600 bg-blue-600"
+                          : "border-slate-300 bg-transparent",
+                      )}>
+                        {#if selectedTemplateId === template.id}
+                          <span class="block h-1.5 w-1.5 rounded-full bg-white"></span>
+                        {/if}
+                      </span>
+                      <div>
+                        <span class="block text-sm font-semibold text-slate-900">{template.name}</span>
+                        {#if template.description}
+                          <span class="mt-0.5 block text-xs text-slate-500">{template.description}</span>
+                        {/if}
+                      </div>
+                    </button>
+                  {/each}
+                </div>
+              </div>
+            {/if}
+
+            <!-- Continue -->
+            <button
+              type="button"
+              class="inline-flex w-full items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
+              disabled={!canContinue}
+              onclick={() => { dialogError = ""; step = "details"; }}
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      {:else if step === "details"}
+        <div class="px-6 py-6">
+          <button
+            type="button"
+            class="-ml-2 -mt-1 mb-3 inline-flex cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900"
+            onclick={() => { dialogError = ""; step = "identify"; }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+            Back
+          </button>
+
+          <h2 class="m-0 text-lg font-bold text-slate-900">
+            {selectedTemplate?.name || "Ticket details"}
+          </h2>
+
+          <form class="mt-5 space-y-4" onsubmit={handleSubmit}>
+            {#if dialogError}
+              <div class={cn("flex items-start gap-3 rounded-xl border p-4 text-sm", "border-red-200 bg-red-50 text-red-900")} role="alert">
+                <span class="mt-0.5 shrink-0">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+                </span>
+                <span class="flex-1">{dialogError}</span>
+                <button type="button" onclick={() => (dialogError = "")} class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+                </button>
+              </div>
+            {/if}
+
+            <!-- Subject -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-semibold text-slate-900" for="vk-dialog-subject">Subject<span class="text-red-600"> *</span></label>
+              <input
+                id="vk-dialog-subject"
+                class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                type="text"
+                placeholder="Brief description of your issue"
+                bind:value={form.title}
+                required
+              />
+            </div>
+
+            <!-- Dynamic questions -->
+            {#each orderedQuestions as question (question.id)}
+              <div class="space-y-1.5">
+                <label class="text-sm font-semibold text-slate-900">
+                  {question.label}{#if question.required}<span class="text-red-600"> *</span>{/if}
+                </label>
+
+                {#if question.type === "TEXT"}
+                  <input
+                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                    type="text"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
+                  />
+                {:else if question.type === "TEXTAREA"}
+                  <textarea
+                    class="min-h-[100px] w-full resize-y rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
+                  ></textarea>
+                {:else if question.type === "DATE"}
+                  <input
+                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                    type="date"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e) => updateAnswer(question.id, e.currentTarget.value)}
+                  />
+                {:else if question.type === "SELECT"}
+                  <select
+                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                    value={String(form.answers[question.id] || "")}
+                    onchange={(e) => updateAnswer(question.id, e.currentTarget.value)}
+                  >
+                    <option value="">Select an option</option>
+                    {#each question.options || [] as option (option.id)}
+                      <option value={option.value}>{option.label}</option>
+                    {/each}
+                  </select>
+                {:else if question.type === "CHECKBOX"}
+                  <div class="space-y-2 pt-1">
+                    {#each question.options || [] as option (option.id)}
+                      <label class="flex items-center gap-2.5 text-sm text-slate-900">
+                        <input
+                          type="checkbox"
+                          class="h-4 w-4 rounded accent-blue-600"
+                          checked={Array.isArray(form.answers[question.id]) && (form.answers[question.id] as string[]).includes(option.value)}
+                          onchange={(e) => toggleCheckboxValue(question.id, option.value, e.currentTarget.checked)}
+                        />
+                        <span>{option.label}</span>
+                      </label>
+                    {/each}
+                  </div>
+                {:else if question.type === "FILE"}
+                  {#if form.answers[question.id] instanceof File}
+                    <div class="flex flex-wrap gap-1.5">
+                      <span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-500">
+                        {(form.answers[question.id] as File).name}
+                        <button
+                          type="button"
+                          onclick={() => updateAnswer(question.id, null)}
+                          class="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-500 transition-colors hover:text-red-600"
+                          aria-label="Remove file"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+                        </button>
+                      </span>
+                    </div>
+                  {:else}
+                    <input
+                      class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+                      type="file"
+                      accept="image/jpeg,image/png,image/gif,image/webp"
+                      onchange={(e) => {
+                        const input = e.currentTarget as HTMLInputElement;
+                        const file = input.files?.[0] || null;
+                        if (file && !["image/png","image/jpeg","image/gif","image/webp"].includes(file.type)) {
+                          input.value = "";
+                          return;
+                        }
+                        updateAnswer(question.id, file);
+                      }}
+                    />
+                  {/if}
+                {/if}
+              </div>
+            {/each}
+
+            <!-- Actions -->
+            <div class="flex items-center gap-3 pt-2">
+              <button
+                class="inline-flex flex-1 items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed"
+                type="submit"
+                disabled={isSubmitting}
+              >
+                {#if isSubmitting}
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+                  Submitting...
+                {:else}
+                  Submit
+                {/if}
+              </button>
+            </div>
+          </form>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}