@vicket/create-support 0.1.0

package/templates/vue/src/vicket/SupportPage.vue

@@ -0,0 +1,348 @@
+<script setup lang="ts">
+const API_URL = (import.meta.env.VITE_VICKET_API_URL || "").replace(/\/$/, "");
+const API_KEY = import.meta.env.VITE_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[];
+};
+
+type InitPayload = {
+  success?: boolean;
+  error?: string;
+  data?: {
+    website?: { name?: string };
+    templates: Template[];
+  };
+};
+
+const templates = ref<Template[]>([]);
+const websiteName = ref("Support");
+const selectedTemplateId = ref("");
+const form = reactive<{
+  email: string;
+  title: string;
+  answers: Record<string, unknown>;
+}>({
+  email: "",
+  title: "",
+  answers: {},
+});
+
+const isLoading = ref(true);
+const isSubmitting = ref(false);
+const error = ref("");
+const success = ref("");
+
+const selectedTemplate = computed(
+  () => templates.value.find((template) => template.id === selectedTemplateId.value) || null,
+);
+const orderedQuestions = computed(() =>
+  [...(selectedTemplate.value?.questions || [])].sort((a, b) => a.order - b.order),
+);
+
+const loadSupport = async () => {
+  isLoading.value = true;
+  error.value = "";
+  try {
+    if (!API_URL || !API_KEY) {
+      throw new Error("Missing VITE_VICKET_API_URL or VITE_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 InitPayload;
+    if (!response.ok || !payload?.success || !payload?.data) {
+      throw new Error(payload?.error || "Failed to load support data.");
+    }
+
+    templates.value = payload.data.templates || [];
+    websiteName.value = payload.data.website?.name || "Support";
+    if (templates.value.length > 0) {
+      selectedTemplateId.value = templates.value[0].id;
+    }
+  } catch (loadError) {
+    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const updateAnswer = (questionId: string, value: unknown) => {
+  form.answers = {
+    ...form.answers,
+    [questionId]: value,
+  };
+};
+
+const 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);
+};
+
+const validateRequired = () => {
+  if (!selectedTemplate.value) 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.value) {
+    if (!question.required) continue;
+    const value = form.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.value = "";
+  success.value = "";
+
+  const validationError = validateRequired();
+  if (validationError) {
+    error.value = validationError;
+    return;
+  }
+
+  if (!selectedTemplate.value) {
+    error.value = "Template is required.";
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      email: form.email.trim(),
+      title: form.title.trim(),
+      templateId: selectedTemplate.value.id,
+      answers: { ...form.answers },
+    };
+
+    const hasFiles = orderedQuestions.value.some(
+      (question) => question.type === "FILE" && payload.answers[question.id] instanceof File,
+    );
+
+    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,
+        }),
+      );
+
+      const response = await fetch(`${API_URL}/public/support/tickets`, {
+        method: "POST",
+        headers: {
+          "X-Api-Key": API_KEY,
+        },
+        body: formData,
+      });
+      const responsePayload = (await response.json()) as { success?: boolean; error?: string };
+      if (!response.ok || !responsePayload?.success) {
+        throw new Error(responsePayload?.error || "Failed to create ticket.");
+      }
+    } else {
+      const 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.value = "Ticket created. Ask the user to open the secure email link to continue.";
+    form.email = "";
+    form.title = "";
+    form.answers = {};
+  } catch (submitError) {
+    error.value = submitError instanceof Error ? submitError.message : "Unexpected error.";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(() => {
+  void loadSupport();
+});
+</script>
+
+<template>
+  <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">
+        <div v-if="isLoading" class="vk-alert">Loading support data...</div>
+        <form v-else class="vk-stack" @submit.prevent="submitTicket">
+          <div v-if="error" class="vk-alert error">{{ error }}</div>
+          <div v-if="success" class="vk-alert success">{{ success }}</div>
+
+          <div class="vk-stack">
+            <p class="vk-section-label">Ticket template</p>
+            <div class="vk-grid two">
+              <button
+                v-for="template in templates"
+                :key="template.id"
+                type="button"
+                class="vk-template-button"
+                :class="{ active: selectedTemplateId === template.id }"
+                @click="selectedTemplateId = template.id"
+              >
+                <span class="vk-template-name">{{ template.name }}</span>
+                <span class="vk-template-description">{{ template.description || "No description" }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="vk-grid two">
+            <div class="vk-field">
+              <label class="vk-label required" for="email">Email</label>
+              <input id="email" v-model="form.email" class="vk-input" type="email" required />
+            </div>
+
+            <div class="vk-field">
+              <label class="vk-label required" for="title">Subject</label>
+              <input id="title" v-model="form.title" class="vk-input" type="text" required />
+            </div>
+          </div>
+
+          <div v-for="question in orderedQuestions" :key="question.id" class="vk-field">
+            <label class="vk-label" :class="{ required: question.required }">{{ question.label }}</label>
+
+            <input
+              v-if="question.type === 'TEXT'"
+              class="vk-input"
+              type="text"
+              :value="String(form.answers[question.id] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLInputElement).value)"
+            />
+
+            <textarea
+              v-else-if="question.type === 'TEXTAREA'"
+              class="vk-textarea"
+              :value="String(form.answers[question.id] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLTextAreaElement).value)"
+            />
+
+            <input
+              v-else-if="question.type === 'DATE'"
+              class="vk-input"
+              type="date"
+              :value="String(form.answers[question.id] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLInputElement).value)"
+            />
+
+            <select
+              v-else-if="question.type === 'SELECT'"
+              class="vk-select"
+              :value="String(form.answers[question.id] || '')"
+              @change="updateAnswer(question.id, ($event.target as HTMLSelectElement).value)"
+            >
+              <option value="">Select an option</option>
+              <option v-for="option in question.options || []" :key="option.id" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+
+            <div v-else-if="question.type === 'CHECKBOX'" class="vk-checkbox-list">
+              <label v-for="option in question.options || []" :key="option.id" class="vk-checkbox-item">
+                <input
+                  type="checkbox"
+                  :checked="
+                    Array.isArray(form.answers[question.id]) &&
+                    (form.answers[question.id] as string[]).includes(option.value)
+                  "
+                  @change="
+                    toggleCheckboxValue(
+                      question.id,
+                      option.value,
+                      ($event.target as HTMLInputElement).checked,
+                    )
+                  "
+                />
+                <span>{{ option.label }}</span>
+              </label>
+            </div>
+
+            <input
+              v-else-if="question.type === 'FILE'"
+              class="vk-input"
+              type="file"
+              @change="updateAnswer(question.id, ($event.target as HTMLInputElement).files?.[0] || null)"
+            />
+          </div>
+
+          <div class="vk-actions">
+            <button class="vk-button primary" type="submit" :disabled="isSubmitting">
+              {{ isSubmitting ? "Submitting..." : "Submit ticket" }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./vicket.css"></style>

package/templates/vue/src/vicket/TicketPage.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+const API_URL = (import.meta.env.VITE_VICKET_API_URL || "").replace(/\/$/, "");
+const API_KEY = import.meta.env.VITE_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[];
+};
+
+const token = ref("");
+const thread = ref<TicketThread | null>(null);
+const content = ref("");
+const files = ref<File[]>([]);
+const isLoading = ref(true);
+const isSending = ref(false);
+const error = ref("");
+const success = ref("");
+
+const loadThread = async () => {
+  if (!token.value.trim()) {
+    isLoading.value = false;
+    error.value = "Missing ticket token in URL.";
+    return;
+  }
+
+  isLoading.value = true;
+  error.value = "";
+  try {
+    if (!API_URL || !API_KEY) {
+      throw new Error("Missing VITE_VICKET_API_URL or VITE_VICKET_API_KEY.");
+    }
+
+    const response = await fetch(`${API_URL}/public/support/ticket?token=${encodeURIComponent(token.value)}`, {
+      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.value = payload.data;
+  } catch (loadError) {
+    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const submitReply = async () => {
+  error.value = "";
+  success.value = "";
+
+  if (!content.value.trim() && files.value.length === 0) {
+    error.value = "Reply content is required.";
+    return;
+  }
+
+  if (!token.value.trim()) {
+    error.value = "Missing ticket token.";
+    return;
+  }
+
+  isSending.value = true;
+  try {
+    if (files.value.length > 0) {
+      const formData = new FormData();
+      formData.append("data", JSON.stringify({ content: content.value.trim() }));
+      for (const file of files.value) {
+        formData.append("files", file);
+      }
+
+      const response = await fetch(
+        `${API_URL}/public/support/ticket/messages?token=${encodeURIComponent(token.value)}`,
+        {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+          },
+          body: formData,
+        },
+      );
+      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.");
+      }
+    } else {
+      const response = await fetch(
+        `${API_URL}/public/support/ticket/messages?token=${encodeURIComponent(token.value)}`,
+        {
+          method: "POST",
+          headers: {
+            "X-Api-Key": API_KEY,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            content: content.value.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.value = "";
+    files.value = [];
+    success.value = "Reply sent.";
+    await loadThread();
+  } catch (sendError) {
+    error.value = sendError instanceof Error ? sendError.message : "Unexpected error.";
+  } finally {
+    isSending.value = false;
+  }
+};
+
+onMounted(() => {
+  token.value = new URLSearchParams(window.location.search).get("token") || "";
+  void loadThread();
+});
+</script>
+
+<template>
+  <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">
+          <span v-if="thread?.status?.label" class="vk-badge">Status: {{ thread.status.label }}</span>
+          <span v-if="thread?.priority?.label" class="vk-badge">Priority: {{ thread.priority.label }}</span>
+        </div>
+        <p class="vk-subtitle">Follow and reply to your ticket here.</p>
+      </header>
+
+      <div class="vk-body vk-stack">
+        <div v-if="isLoading" class="vk-alert">Loading ticket...</div>
+        <div v-if="error" class="vk-alert error">{{ error }}</div>
+        <div v-if="success" class="vk-alert success">{{ success }}</div>
+
+        <template v-if="!isLoading && thread">
+          <section class="vk-message-list">
+            <div v-if="thread.messages.length === 0" class="vk-alert">No messages yet.</div>
+            <article v-for="message in thread.messages" :key="message.id" 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>
+
+              <div v-if="message.attachments?.length" class="vk-attachments">
+                <a
+                  v-for="attachment in message.attachments"
+                  :key="attachment.id"
+                  class="vk-attachment"
+                  :href="attachment.url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {{ attachment.original_filename }}
+                </a>
+              </div>
+            </article>
+          </section>
+
+          <form class="vk-stack" @submit.prevent="submitReply">
+            <div class="vk-field">
+              <label class="vk-label required" for="reply-content">Reply</label>
+              <textarea
+                id="reply-content"
+                v-model="content"
+                class="vk-textarea"
+                placeholder="Write your reply"
+              />
+            </div>
+
+            <div class="vk-field">
+              <label class="vk-label" for="reply-files">Attachments</label>
+              <input
+                id="reply-files"
+                class="vk-input"
+                type="file"
+                multiple
+                @change="files = Array.from(($event.target as HTMLInputElement).files || [])"
+              />
+            </div>
+
+            <div class="vk-actions">
+              <button class="vk-button primary" type="submit" :disabled="isSending">
+                {{ isSending ? "Sending..." : "Send reply" }}
+              </button>
+            </div>
+          </form>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./vicket.css"></style>