@vicket/create-support 0.1.0

package/templates/sveltekit/src/routes/support/+page.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import "$lib/vicket.css";
+
+  const API_URL = (import.meta.env.PUBLIC_VICKET_API_URL || "").replace(/\/$/, "");
+  const API_KEY = import.meta.env.PUBLIC_VICKET_API_KEY || "";
+
+  type TemplateOption = {
+    id: string;
+    label: string;
+    value: string;
+  };
+
+  type TemplateQuestion = {
+    id: string;
+    label: string;
+    type: "TEXT" | "TEXTAREA" | "SELECT" | "CHECKBOX" | "DATE" | "FILE";
+    required: boolean;
+    order: number;
+    options?: TemplateOption[];
+  };
+
+  type Template = {
+    id: string;
+    name: string;
+    description: string;
+    questions: TemplateQuestion[];
+  };
+
+  let templates: Template[] = [];
+  let websiteName = "Support";
+  let selectedTemplateId = "";
+  let email = "";
+  let title = "";
+  let answers: Record<string, unknown> = {};
+  let isLoading = true;
+  let isSubmitting = false;
+  let error = "";
+  let success = "";
+
+  $: selectedTemplate = templates.find((template) => template.id === selectedTemplateId) || null;
+  $: orderedQuestions = [...(selectedTemplate?.questions || [])].sort((a, b) => a.order - b.order);
+
+  const loadSupport = async () => {
+    isLoading = true;
+    error = "";
+    try {
+      if (!API_URL || !API_KEY) {
+        throw new Error("Missing PUBLIC_VICKET_API_URL or PUBLIC_VICKET_API_KEY.");
+      }
+
+      const response = await fetch(`${API_URL}/public/support/init`, {
+        method: "GET",
+        headers: {
+          "X-Api-Key": API_KEY,
+          "Content-Type": "application/json",
+        },
+      });
+      const payload = (await response.json()) as {
+        success?: boolean;
+        error?: string;
+        data?: {
+          website?: { name?: string };
+          templates: Template[];
+        };
+      };
+
+      if (!response.ok || !payload?.success || !payload?.data) {
+        throw new Error(payload?.error || "Failed to load support data.");
+      }
+
+      templates = payload.data.templates || [];
+      websiteName = payload.data.website?.name || "Support";
+      if (templates.length > 0) {
+        selectedTemplateId = templates[0].id;
+      }
+    } catch (loadError) {
+      error = loadError instanceof Error ? loadError.message : "Unexpected error.";
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  const updateAnswer = (questionId: string, value: unknown) => {
+    answers = {
+      ...answers,
+      [questionId]: value,
+    };
+  };
+
+  const toggleCheckboxValue = (questionId: string, value: string, checked: boolean) => {
+    const current = Array.isArray(answers[questionId]) ? (answers[questionId] as string[]) : [];
+    const next = checked ? [...new Set([...current, value])] : current.filter((item) => item !== value);
+    updateAnswer(questionId, next);
+  };
+
+  const validateRequired = () => {
+    if (!selectedTemplate) return "Please select a template.";
+    if (!email.trim()) return "Email is required.";
+    if (!title.trim()) return "Subject is required.";
+
+    for (const question of orderedQuestions) {
+      if (!question.required) continue;
+      const value = answers[question.id];
+
+      if (question.type === "CHECKBOX") {
+        if (!Array.isArray(value) || value.length === 0) {
+          return `Question "${question.label}" is required.`;
+        }
+        continue;
+      }
+
+      if (question.type === "FILE") {
+        if (!(value instanceof File)) {
+          return `Question "${question.label}" is required.`;
+        }
+        continue;
+      }
+
+      if (value === null || value === undefined || String(value).trim() === "") {
+        return `Question "${question.label}" is required.`;
+      }
+    }
+
+    return "";
+  };
+
+  const submitTicket = async () => {
+    error = "";
+    success = "";
+
+    const validationError = validateRequired();
+    if (validationError) {
+      error = validationError;
+      return;
+    }
+
+    if (!selectedTemplate) {
+      error = "Template is required.";
+      return;
+    }
+
+    isSubmitting = true;
+    try {
+      const payload = {
+        email: email.trim(),
+        title: title.trim(),
+        templateId: selectedTemplate.id,
+        answers: { ...answers },
+      };
+
+      const hasFiles = orderedQuestions.some(
+        (question) => question.type === "FILE" && payload.answers[question.id] instanceof File,
+      );
+
+      let response: Response;
+      if (hasFiles) {
+        const formData = new FormData();
+        const normalizedAnswers: Record<string, unknown> = {};
+
+        for (const [questionId, answer] of Object.entries(payload.answers)) {
+          if (answer instanceof File) {
+            formData.append(`files[${questionId}]`, answer);
+            normalizedAnswers[questionId] = "__isFile:true";
+          } else {
+            normalizedAnswers[questionId] = answer;
+          }
+        }
+
+        formData.append(
+          "data",
+          JSON.stringify({
+            ...payload,
+            answers: normalizedAnswers,
+          }),
+        );
+
+        response = await fetch(`${API_URL}/public/support/tickets`, {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+          },
+          body: formData,
+        });
+      } else {
+        response = await fetch(`${API_URL}/public/support/tickets`, {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+      }
+
+      const responsePayload = (await response.json()) as { success?: boolean; error?: string };
+      if (!response.ok || !responsePayload?.success) {
+        throw new Error(responsePayload?.error || "Failed to create ticket.");
+      }
+
+      success = "Ticket created. Ask the user to open the secure email link to continue.";
+      email = "";
+      title = "";
+      answers = {};
+    } catch (submitError) {
+      error = submitError instanceof Error ? submitError.message : "Unexpected error.";
+    } finally {
+      isSubmitting = false;
+    }
+  };
+
+  onMount(() => {
+    void loadSupport();
+  });
+</script>
+
+<div class="vk-shell">
+  <div class="vk-card">
+    <header class="vk-header">
+      <h1 class="vk-title">{websiteName}</h1>
+      <p class="vk-subtitle">Create a new support ticket directly from your own page.</p>
+    </header>
+
+    <div class="vk-body">
+      {#if isLoading}
+        <div class="vk-alert">Loading support data...</div>
+      {:else}
+        <form class="vk-stack" on:submit|preventDefault={submitTicket}>
+          {#if error}
+            <div class="vk-alert error">{error}</div>
+          {/if}
+          {#if success}
+            <div class="vk-alert success">{success}</div>
+          {/if}
+
+          <div class="vk-stack">
+            <p class="vk-section-label">Ticket template</p>
+            <div class="vk-grid two">
+              {#each templates as template (template.id)}
+                <button
+                  type="button"
+                  class="vk-template-button {selectedTemplateId === template.id ? 'active' : ''}"
+                  on:click={() => (selectedTemplateId = template.id)}
+                >
+                  <span class="vk-template-name">{template.name}</span>
+                  <span class="vk-template-description">{template.description || "No description"}</span>
+                </button>
+              {/each}
+            </div>
+          </div>
+
+          <div class="vk-grid two">
+            <div class="vk-field">
+              <label class="vk-label required" for="email">Email</label>
+              <input id="email" class="vk-input" type="email" bind:value={email} required />
+            </div>
+
+            <div class="vk-field">
+              <label class="vk-label required" for="title">Subject</label>
+              <input id="title" class="vk-input" type="text" bind:value={title} required />
+            </div>
+          </div>
+
+          {#each orderedQuestions as question (question.id)}
+            <div class="vk-field">
+              <label class="vk-label {question.required ? 'required' : ''}">{question.label}</label>
+
+              {#if question.type === "TEXT"}
+                <input
+                  class="vk-input"
+                  type="text"
+                  value={String(answers[question.id] || "")}
+                  on:input={(event) => updateAnswer(question.id, (event.currentTarget as HTMLInputElement).value)}
+                />
+              {:else if question.type === "TEXTAREA"}
+                <textarea
+                  class="vk-textarea"
+                  on:input={(event) => updateAnswer(question.id, (event.currentTarget as HTMLTextAreaElement).value)}
+                >{String(answers[question.id] || "")}</textarea
+                >
+              {:else if question.type === "DATE"}
+                <input
+                  class="vk-input"
+                  type="date"
+                  value={String(answers[question.id] || "")}
+                  on:input={(event) => updateAnswer(question.id, (event.currentTarget as HTMLInputElement).value)}
+                />
+              {:else if question.type === "SELECT"}
+                <select
+                  class="vk-select"
+                  value={String(answers[question.id] || "")}
+                  on:change={(event) => updateAnswer(question.id, (event.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(answers[question.id]) &&
+                          (answers[question.id] as string[]).includes(option.value)}
+                        on:change={(event) =>
+                          toggleCheckboxValue(
+                            question.id,
+                            option.value,
+                            (event.currentTarget as HTMLInputElement).checked,
+                          )}
+                      />
+                      <span>{option.label}</span>
+                    </label>
+                  {/each}
+                </div>
+              {:else if question.type === "FILE"}
+                <input
+                  class="vk-input"
+                  type="file"
+                  on:change={(event) =>
+                    updateAnswer(question.id, (event.currentTarget as HTMLInputElement).files?.[0] || null)}
+                />
+              {/if}
+            </div>
+          {/each}
+
+          <div class="vk-actions">
+            <button class="vk-button primary" type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit ticket"}
+            </button>
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+</div>

package/templates/sveltekit/src/routes/ticket/+page.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import "$lib/vicket.css";
+
+  const API_URL = (import.meta.env.PUBLIC_VICKET_API_URL || "").replace(/\/$/, "");
+  const API_KEY = import.meta.env.PUBLIC_VICKET_API_KEY || "";
+
+  type Attachment = {
+    id: string;
+    original_filename: string;
+    url: string;
+  };
+
+  type Message = {
+    id: string;
+    content: string;
+    author_type: "reporter" | "user" | "system";
+    created_at: string;
+    attachments?: Attachment[];
+  };
+
+  type TicketThread = {
+    id: string;
+    title: string;
+    status?: { label: string };
+    priority?: { label: string };
+    messages: Message[];
+  };
+
+  let token = "";
+  let thread: TicketThread | null = null;
+  let content = "";
+  let files: File[] = [];
+  let isLoading = true;
+  let isSending = false;
+  let error = "";
+  let success = "";
+
+  const syncToken = () => {
+    token = $page.url.searchParams.get("token") || "";
+  };
+
+  const loadThread = async () => {
+    if (!token.trim()) {
+      isLoading = false;
+      error = "Missing ticket token in URL.";
+      return;
+    }
+
+    isLoading = true;
+    error = "";
+    try {
+      if (!API_URL || !API_KEY) {
+        throw new Error("Missing PUBLIC_VICKET_API_URL or PUBLIC_VICKET_API_KEY.");
+      }
+
+      const response = await fetch(`${API_URL}/public/support/ticket?token=${encodeURIComponent(token)}`, {
+        method: "GET",
+        headers: {
+          "X-Api-Key": API_KEY,
+          "Content-Type": "application/json",
+        },
+      });
+      const payload = (await response.json()) as {
+        success?: boolean;
+        error?: string;
+        error_code?: string;
+        data?: TicketThread;
+      };
+
+      if (!response.ok || !payload?.success || !payload?.data) {
+        if (payload?.error_code === "ticket-link-expired") {
+          throw new Error("Ce lien a expire. Un nouveau lien securise vient d'etre envoye par email.");
+        }
+        throw new Error(payload?.error || "Failed to load ticket.");
+      }
+
+      thread = payload.data;
+    } catch (loadError) {
+      error = loadError instanceof Error ? loadError.message : "Unexpected error.";
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  const submitReply = async () => {
+    error = "";
+    success = "";
+
+    if (!content.trim() && files.length === 0) {
+      error = "Reply content is required.";
+      return;
+    }
+
+    if (!token.trim()) {
+      error = "Missing ticket token.";
+      return;
+    }
+
+    isSending = true;
+    try {
+      let response: Response;
+      if (files.length > 0) {
+        const formData = new FormData();
+        formData.append("data", JSON.stringify({ content: content.trim() }));
+        for (const file of files) {
+          formData.append("files", file);
+        }
+
+        response = await fetch(`${API_URL}/public/support/ticket/messages?token=${encodeURIComponent(token)}`, {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+          },
+          body: formData,
+        });
+      } else {
+        response = await fetch(`${API_URL}/public/support/ticket/messages?token=${encodeURIComponent(token)}`, {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ content: content.trim() }),
+        });
+      }
+
+      const payload = (await response.json()) as {
+        success?: boolean;
+        error?: string;
+        error_code?: string;
+      };
+      if (!response.ok || !payload?.success) {
+        if (payload?.error_code === "ticket-link-expired") {
+          throw new Error("Ce lien a expire. Un nouveau lien securise vient d'etre envoye par email.");
+        }
+        throw new Error(payload?.error || "Failed to send reply.");
+      }
+
+      content = "";
+      files = [];
+      success = "Reply sent.";
+      await loadThread();
+    } catch (sendError) {
+      error = sendError instanceof Error ? sendError.message : "Unexpected error.";
+    } finally {
+      isSending = false;
+    }
+  };
+
+  onMount(() => {
+    syncToken();
+    void loadThread();
+  });
+
+  $: if ($page.url.searchParams.get("token") !== token) {
+    syncToken();
+    void loadThread();
+  }
+</script>
+
+<div class="vk-shell">
+  <div class="vk-card">
+    <header class="vk-header">
+      <h1 class="vk-title">{thread?.title || "Ticket"}</h1>
+      <div class="vk-thread-header">
+        {#if thread?.status?.label}
+          <span class="vk-badge">Status: {thread.status.label}</span>
+        {/if}
+        {#if thread?.priority?.label}
+          <span class="vk-badge">Priority: {thread.priority.label}</span>
+        {/if}
+      </div>
+      <p class="vk-subtitle">Follow and reply to your ticket here.</p>
+    </header>
+
+    <div class="vk-body vk-stack">
+      {#if isLoading}
+        <div class="vk-alert">Loading ticket...</div>
+      {/if}
+      {#if error}
+        <div class="vk-alert error">{error}</div>
+      {/if}
+      {#if success}
+        <div class="vk-alert success">{success}</div>
+      {/if}
+
+      {#if !isLoading && thread}
+        <section class="vk-message-list">
+          {#if thread.messages.length === 0}
+            <div class="vk-alert">No messages yet.</div>
+          {:else}
+            {#each thread.messages as message (message.id)}
+              <article class="vk-message">
+                <div class="vk-message-meta">
+                  <strong>{message.author_type}</strong>
+                  <span>{new Date(message.created_at).toLocaleString()}</span>
+                </div>
+                <div class="vk-message-body">{message.content}</div>
+
+                {#if message.attachments && message.attachments.length > 0}
+                  <div class="vk-attachments">
+                    {#each message.attachments as attachment (attachment.id)}
+                      <a class="vk-attachment" href={attachment.url} target="_blank" rel="noopener noreferrer">
+                        {attachment.original_filename}
+                      </a>
+                    {/each}
+                  </div>
+                {/if}
+              </article>
+            {/each}
+          {/if}
+        </section>
+
+        <form class="vk-stack" on:submit|preventDefault={submitReply}>
+          <div class="vk-field">
+            <label class="vk-label required" for="reply-content">Reply</label>
+            <textarea id="reply-content" class="vk-textarea" bind:value={content} />
+          </div>
+
+          <div class="vk-field">
+            <label class="vk-label" for="reply-files">Attachments</label>
+            <input
+              id="reply-files"
+              class="vk-input"
+              type="file"
+              multiple
+              on:change={(event) => (files = Array.from((event.currentTarget as HTMLInputElement).files || []))}
+            />
+          </div>
+
+          <div class="vk-actions">
+            <button class="vk-button primary" type="submit" disabled={isSending}>
+              {isSending ? "Sending..." : "Send reply"}
+            </button>
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+</div>