@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,459 +1,457 @@
-<script lang="ts">
-  import type { Template, FormValues } from "$lib/vicket/types";
-  import { cn } from "$lib/vicket/utils";
-  import { initialFormValues, createTicket } from "$lib/vicket/api";
-
-  const MAX_FILES = 3;
-  const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
-
-  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 default template when templates change -- */
-  $effect(() => {
-    if (templates.length > 0 && !selectedTemplateId) {
-      selectedTemplateId = 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 } };
-  }
-
-  let fileInputRefs: Record<string, HTMLInputElement | null> = $state({});
-
-  function getFileArray(questionId: string): File[] {
-    const val = form.answers[questionId];
-    if (Array.isArray(val)) return val as File[];
-    if (val instanceof File) return [val];
-    return [];
-  }
-
-  const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
-
-  function handleFileAdd(questionId: string, event: Event) {
-    const input = event.currentTarget as HTMLInputElement;
-    const newFiles = input.files;
-    if (!newFiles) return;
-    const current = getFileArray(questionId);
-    const remaining = MAX_FILES - current.length;
-    if (remaining <= 0) return;
-    const accepted: File[] = [];
-    for (let i = 0; i < Math.min(newFiles.length, remaining); i++) {
-      if (!ALLOWED_TYPES.includes(newFiles[i].type)) continue;
-      if (newFiles[i].size > MAX_FILE_SIZE) continue;
-      accepted.push(newFiles[i]);
-    }
-    if (accepted.length > 0) updateAnswer(questionId, [...current, ...accepted]);
-    input.value = "";
-  }
-
-  function removeFileAt(questionId: string, index: number) {
-    const current = getFileArray(questionId);
-    const next = current.filter((_, i) => i !== index);
-    updateAnswer(questionId, next.length > 0 ? next : null);
-  }
-
-  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") {
-        const hasFiles = Array.isArray(value) ? value.length > 0 : value instanceof File;
-        if (!hasFiles) 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) => {
-          const val = form.answers[q.id];
-          return q.type === "FILE" && (val instanceof File || (Array.isArray(val) && val.length > 0));
-        })
-        .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}
-  <div class="vk-dialog-overlay" onclick={resetAndClose}>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="vk-dialog vk-slide-up" onclick={(e: MouseEvent) => e.stopPropagation()}>
-      <button
-        type="button"
-        onclick={resetAndClose}
-        class="vk-dialog-close"
-        aria-label="Close"
-      >
-        &#10005;
-      </button>
-
-      <!-- Success state -->
-      {#if step === "success"}
-        <div class="vk-dialog-body vk-slide-up">
-          <div class="vk-success-icon">
-            <span>&#10003;</span>
-          </div>
-          <div class="vk-empty-state">
-            <h2 class="vk-dialog-title">Ticket submitted!</h2>
-            {#if emailLimitReached}
-              <p class="vk-empty-text">
-                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="vk-empty-text">
-                Check your email for a secure link to follow your ticket.
-              </p>
-            {/if}
-            <button
-              type="button"
-              class="vk-button pill"
-              onclick={resetAndClose}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      {/if}
-
-      <!-- Step 1: Identify -->
-      {#if step === "identify"}
-        <div class="vk-dialog-body">
-          <h2 class="vk-dialog-title">Submit a request</h2>
-          <p class="vk-dialog-subtitle">
-            We'll get back to you as soon as possible.
-          </p>
-
-          <div class="vk-stack">
-            {#if dialogError}
-              <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
-                <span>&#9888;</span>
-                <span>{dialogError}</span>
-                <button
-                  type="button"
-                  onclick={() => (dialogError = "")}
-                  class="vk-alert-dismiss"
-                  aria-label="Dismiss"
-                >
-                  &#10005;
-                </button>
-              </div>
-            {/if}
-
-            <!-- Email -->
-            <div class="vk-field">
-              <label class="vk-label required" for="vk-dialog-email">
-                Email
-              </label>
-              <div class="vk-input-icon-wrap">
-                <span class="vk-input-icon">&#9993;</span>
-                <input
-                  id="vk-dialog-email"
-                  class="vk-input"
-                  type="email"
-                  placeholder="you@example.com"
-                  bind:value={form.email}
-                  required
-                />
-              </div>
-              <p class="vk-hint">We'll contact you at this address.</p>
-            </div>
-
-            <!-- Template selector -->
-            {#if templates.length > 1}
-              <div class="vk-field">
-                <p class="vk-label">What can we help you with?</p>
-                <div class="vk-grid">
-                  {#each templates as template (template.id)}
-                    <button
-                      type="button"
-                      class={cn(
-                        "vk-radio-card",
-                        selectedTemplateId === template.id && "active",
-                      )}
-                      onclick={() => (selectedTemplateId = template.id)}
-                    >
-                      <span class="vk-radio-dot">
-                        <span class="vk-radio-dot-inner"></span>
-                      </span>
-                      <div>
-                        <span class="vk-radio-name">{template.name}</span>
-                        {#if template.description}
-                          <span class="vk-radio-description">
-                            {template.description}
-                          </span>
-                        {/if}
-                      </div>
-                    </button>
-                  {/each}
-                </div>
-              </div>
-            {/if}
-
-            <!-- Continue -->
-            <button
-              type="button"
-              class="vk-button primary full"
-              disabled={!canContinue}
-              onclick={() => {
-                dialogError = "";
-                step = "details";
-              }}
-            >
-              Continue
-            </button>
-          </div>
-        </div>
-      {/if}
-
-      <!-- Step 2: Details -->
-      {#if step === "details"}
-        <div class="vk-dialog-body">
-          <button
-            type="button"
-            class="vk-button ghost"
-            onclick={() => {
-              dialogError = "";
-              step = "identify";
-            }}
-          >
-            &#8592; Back
-          </button>
-
-          <h2 class="vk-dialog-title">
-            {selectedTemplate?.name || "Ticket details"}
-          </h2>
-
-          <form class="vk-stack" onsubmit={handleSubmit}>
-            {#if dialogError}
-              <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
-                <span>&#9888;</span>
-                <span>{dialogError}</span>
-                <button
-                  type="button"
-                  onclick={() => (dialogError = "")}
-                  class="vk-alert-dismiss"
-                  aria-label="Dismiss"
-                >
-                  &#10005;
-                </button>
-              </div>
-            {/if}
-
-            <!-- Subject -->
-            <div class="vk-field">
-              <label class="vk-label required" for="vk-dialog-subject">
-                Subject
-              </label>
-              <input
-                id="vk-dialog-subject"
-                class="vk-input"
-                type="text"
-                placeholder="Brief description of your issue"
-                bind:value={form.title}
-                required
-              />
-            </div>
-
-            <!-- Dynamic questions -->
-            {#each orderedQuestions as question (question.id)}
-              <div class="vk-field">
-                <label
-                  class={cn("vk-label", question.required && "required")}
-                >
-                  {question.label}
-                </label>
-
-                {#if question.type === "TEXT"}
-                  <input
-                    class="vk-input"
-                    type="text"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLInputElement).value)}
-                  />
-                {:else if question.type === "TEXTAREA"}
-                  <textarea
-                    class="vk-textarea"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLTextAreaElement).value)}
-                  ></textarea>
-                {:else if question.type === "DATE"}
-                  <input
-                    class="vk-input"
-                    type="date"
-                    value={String(form.answers[question.id] || "")}
-                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLInputElement).value)}
-                  />
-                {:else if question.type === "SELECT"}
-                  <select
-                    class="vk-select"
-                    value={String(form.answers[question.id] || "")}
-                    onchange={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLSelectElement).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="vk-checkbox-list">
-                    {#each question.options || [] as option (option.id)}
-                      <label class="vk-checkbox-item">
-                        <input
-                          type="checkbox"
-                          checked={Array.isArray(form.answers[question.id]) &&
-                            (form.answers[question.id] as string[]).includes(option.value)}
-                          onchange={(e: Event) =>
-                            toggleCheckboxValue(
-                              question.id,
-                              option.value,
-                              (e.currentTarget as HTMLInputElement).checked,
-                            )}
-                        />
-                        <span>{option.label}</span>
-                      </label>
-                    {/each}
-                  </div>
-                {:else if question.type === "FILE"}
-                  {#if getFileArray(question.id).length > 0}
-                    <div class="vk-image-grid">
-                      {#each getFileArray(question.id) as file, idx (`${file.name}-${idx}`)}
-                        <div class="vk-image-thumb">
-                          <img src={URL.createObjectURL(file)} alt={file.name} />
-                          <button
-                            type="button"
-                            class="vk-image-thumb-remove"
-                            onclick={() => removeFileAt(question.id, idx)}
-                            aria-label="Remove"
-                          >
-                            &#10005;
-                          </button>
-                          <span class="vk-image-thumb-name">{file.name}</span>
-                        </div>
-                      {/each}
-                    </div>
-                  {/if}
-                  {#if getFileArray(question.id).length < MAX_FILES}
-                    <input
-                      bind:this={fileInputRefs[question.id]}
-                      type="file"
-                      accept="image/jpeg,image/png,image/gif,image/webp"
-                      multiple
-                      style="display: none"
-                      onchange={(e: Event) => handleFileAdd(question.id, e)}
-                    />
-                    <button
-                      type="button"
-                      class="vk-add-image-btn"
-                      onclick={() => fileInputRefs[question.id]?.click()}
-                    >
-                      &#128247;
-                      {getFileArray(question.id).length === 0
-                        ? `Add images (up to ${MAX_FILES})`
-                        : `Add more (${MAX_FILES - getFileArray(question.id).length} remaining)`}
-                    </button>
-                  {/if}
-                {/if}
-              </div>
-            {/each}
-
-            <!-- Actions -->
-            <button
-              class="vk-button primary full"
-              type="submit"
-              disabled={isSubmitting}
-            >
-              {#if isSubmitting}
-                <span class="vk-spinner"></span>
-                Submitting...
-              {:else}
-                Submit
-              {/if}
-            </button>
-          </form>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { cn, createTicket, initialFormValues, type Template, type FormValues } from "vicket";
+
+  const MAX_FILES = 3;
+  const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+
+  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 default template when templates change -- */
+  $effect(() => {
+    if (templates.length > 0 && !selectedTemplateId) {
+      selectedTemplateId = 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 } };
+  }
+
+  let fileInputRefs: Record<string, HTMLInputElement | null> = $state({});
+
+  function getFileArray(questionId: string): File[] {
+    const val = form.answers[questionId];
+    if (Array.isArray(val)) return val as File[];
+    if (val instanceof File) return [val];
+    return [];
+  }
+
+  const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+
+  function handleFileAdd(questionId: string, event: Event) {
+    const input = event.currentTarget as HTMLInputElement;
+    const newFiles = input.files;
+    if (!newFiles) return;
+    const current = getFileArray(questionId);
+    const remaining = MAX_FILES - current.length;
+    if (remaining <= 0) return;
+    const accepted: File[] = [];
+    for (let i = 0; i < Math.min(newFiles.length, remaining); i++) {
+      if (!ALLOWED_TYPES.includes(newFiles[i].type)) continue;
+      if (newFiles[i].size > MAX_FILE_SIZE) continue;
+      accepted.push(newFiles[i]);
+    }
+    if (accepted.length > 0) updateAnswer(questionId, [...current, ...accepted]);
+    input.value = "";
+  }
+
+  function removeFileAt(questionId: string, index: number) {
+    const current = getFileArray(questionId);
+    const next = current.filter((_, i) => i !== index);
+    updateAnswer(questionId, next.length > 0 ? next : null);
+  }
+
+  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") {
+        const hasFiles = Array.isArray(value) ? value.length > 0 : value instanceof File;
+        if (!hasFiles) 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) => {
+          const val = form.answers[q.id];
+          return q.type === "FILE" && (val instanceof File || (Array.isArray(val) && val.length > 0));
+        })
+        .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}
+  <div class="vk-dialog-overlay" onclick={resetAndClose}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="vk-dialog vk-slide-up" onclick={(e: MouseEvent) => e.stopPropagation()}>
+      <button
+        type="button"
+        onclick={resetAndClose}
+        class="vk-dialog-close"
+        aria-label="Close"
+      >
+        &#10005;
+      </button>
+
+      <!-- Success state -->
+      {#if step === "success"}
+        <div class="vk-dialog-body vk-slide-up">
+          <div class="vk-success-icon">
+            <span>&#10003;</span>
+          </div>
+          <div class="vk-empty-state">
+            <h2 class="vk-dialog-title">Ticket submitted!</h2>
+            {#if emailLimitReached}
+              <p class="vk-empty-text">
+                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="vk-empty-text">
+                Check your email for a secure link to follow your ticket.
+              </p>
+            {/if}
+            <button
+              type="button"
+              class="vk-button pill"
+              onclick={resetAndClose}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Step 1: Identify -->
+      {#if step === "identify"}
+        <div class="vk-dialog-body">
+          <h2 class="vk-dialog-title">Submit a request</h2>
+          <p class="vk-dialog-subtitle">
+            We'll get back to you as soon as possible.
+          </p>
+
+          <div class="vk-stack">
+            {#if dialogError}
+              <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
+                <span>&#9888;</span>
+                <span>{dialogError}</span>
+                <button
+                  type="button"
+                  onclick={() => (dialogError = "")}
+                  class="vk-alert-dismiss"
+                  aria-label="Dismiss"
+                >
+                  &#10005;
+                </button>
+              </div>
+            {/if}
+
+            <!-- Email -->
+            <div class="vk-field">
+              <label class="vk-label required" for="vk-dialog-email">
+                Email
+              </label>
+              <div class="vk-input-icon-wrap">
+                <span class="vk-input-icon">&#9993;</span>
+                <input
+                  id="vk-dialog-email"
+                  class="vk-input"
+                  type="email"
+                  placeholder="you@example.com"
+                  bind:value={form.email}
+                  required
+                />
+              </div>
+              <p class="vk-hint">We'll contact you at this address.</p>
+            </div>
+
+            <!-- Template selector -->
+            {#if templates.length > 1}
+              <div class="vk-field">
+                <p class="vk-label">What can we help you with?</p>
+                <div class="vk-grid">
+                  {#each templates as template (template.id)}
+                    <button
+                      type="button"
+                      class={cn(
+                        "vk-radio-card",
+                        selectedTemplateId === template.id && "active",
+                      )}
+                      onclick={() => (selectedTemplateId = template.id)}
+                    >
+                      <span class="vk-radio-dot">
+                        <span class="vk-radio-dot-inner"></span>
+                      </span>
+                      <div>
+                        <span class="vk-radio-name">{template.name}</span>
+                        {#if template.description}
+                          <span class="vk-radio-description">
+                            {template.description}
+                          </span>
+                        {/if}
+                      </div>
+                    </button>
+                  {/each}
+                </div>
+              </div>
+            {/if}
+
+            <!-- Continue -->
+            <button
+              type="button"
+              class="vk-button primary full"
+              disabled={!canContinue}
+              onclick={() => {
+                dialogError = "";
+                step = "details";
+              }}
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Step 2: Details -->
+      {#if step === "details"}
+        <div class="vk-dialog-body">
+          <button
+            type="button"
+            class="vk-button ghost"
+            onclick={() => {
+              dialogError = "";
+              step = "identify";
+            }}
+          >
+            &#8592; Back
+          </button>
+
+          <h2 class="vk-dialog-title">
+            {selectedTemplate?.name || "Ticket details"}
+          </h2>
+
+          <form class="vk-stack" onsubmit={handleSubmit}>
+            {#if dialogError}
+              <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
+                <span>&#9888;</span>
+                <span>{dialogError}</span>
+                <button
+                  type="button"
+                  onclick={() => (dialogError = "")}
+                  class="vk-alert-dismiss"
+                  aria-label="Dismiss"
+                >
+                  &#10005;
+                </button>
+              </div>
+            {/if}
+
+            <!-- Subject -->
+            <div class="vk-field">
+              <label class="vk-label required" for="vk-dialog-subject">
+                Subject
+              </label>
+              <input
+                id="vk-dialog-subject"
+                class="vk-input"
+                type="text"
+                placeholder="Brief description of your issue"
+                bind:value={form.title}
+                required
+              />
+            </div>
+
+            <!-- Dynamic questions -->
+            {#each orderedQuestions as question (question.id)}
+              <div class="vk-field">
+                <label
+                  class={cn("vk-label", question.required && "required")}
+                >
+                  {question.label}
+                </label>
+
+                {#if question.type === "TEXT"}
+                  <input
+                    class="vk-input"
+                    type="text"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLInputElement).value)}
+                  />
+                {:else if question.type === "TEXTAREA"}
+                  <textarea
+                    class="vk-textarea"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLTextAreaElement).value)}
+                  ></textarea>
+                {:else if question.type === "DATE"}
+                  <input
+                    class="vk-input"
+                    type="date"
+                    value={String(form.answers[question.id] || "")}
+                    oninput={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLInputElement).value)}
+                  />
+                {:else if question.type === "SELECT"}
+                  <select
+                    class="vk-select"
+                    value={String(form.answers[question.id] || "")}
+                    onchange={(e: Event) => updateAnswer(question.id, (e.currentTarget as HTMLSelectElement).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="vk-checkbox-list">
+                    {#each question.options || [] as option (option.id)}
+                      <label class="vk-checkbox-item">
+                        <input
+                          type="checkbox"
+                          checked={Array.isArray(form.answers[question.id]) &&
+                            (form.answers[question.id] as string[]).includes(option.value)}
+                          onchange={(e: Event) =>
+                            toggleCheckboxValue(
+                              question.id,
+                              option.value,
+                              (e.currentTarget as HTMLInputElement).checked,
+                            )}
+                        />
+                        <span>{option.label}</span>
+                      </label>
+                    {/each}
+                  </div>
+                {:else if question.type === "FILE"}
+                  {#if getFileArray(question.id).length > 0}
+                    <div class="vk-image-grid">
+                      {#each getFileArray(question.id) as file, idx (`${file.name}-${idx}`)}
+                        <div class="vk-image-thumb">
+                          <img src={URL.createObjectURL(file)} alt={file.name} />
+                          <button
+                            type="button"
+                            class="vk-image-thumb-remove"
+                            onclick={() => removeFileAt(question.id, idx)}
+                            aria-label="Remove"
+                          >
+                            &#10005;
+                          </button>
+                          <span class="vk-image-thumb-name">{file.name}</span>
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                  {#if getFileArray(question.id).length < MAX_FILES}
+                    <input
+                      bind:this={fileInputRefs[question.id]}
+                      type="file"
+                      accept="image/jpeg,image/png,image/gif,image/webp"
+                      multiple
+                      style="display: none"
+                      onchange={(e: Event) => handleFileAdd(question.id, e)}
+                    />
+                    <button
+                      type="button"
+                      class="vk-add-image-btn"
+                      onclick={() => fileInputRefs[question.id]?.click()}
+                    >
+                      &#128247;
+                      {getFileArray(question.id).length === 0
+                        ? `Add images (up to ${MAX_FILES})`
+                        : `Add more (${MAX_FILES - getFileArray(question.id).length} remaining)`}
+                    </button>
+                  {/if}
+                {/if}
+              </div>
+            {/each}
+
+            <!-- Actions -->
+            <button
+              class="vk-button primary full"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {#if isSubmitting}
+                <span class="vk-spinner"></span>
+                Submitting...
+              {:else}
+                Submit
+              {/if}
+            </button>
+          </form>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}