@vicket/create-support 1.1.1

package/templates/nuxt/app/components/VicketTicketDialog.vue

@@ -0,0 +1,499 @@
+<script setup lang="ts">
+import type { Template, FormValues } from "~/composables/useVicket";
+import { cn, initialFormValues, createTicket } from "~/composables/useVicket";
+
+/* ---------------------------------------------- */
+/*  Props & Emits                                  */
+/* ---------------------------------------------- */
+const props = defineProps<{
+  modelValue: boolean;
+  templates: Template[];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+/* ---------------------------------------------- */
+/*  Internal state                                 */
+/* ---------------------------------------------- */
+const MAX_FILES = 3;
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+
+const dialogStep = ref<"identify" | "details" | "success">("identify");
+const selectedTemplateId = ref("");
+const form = ref<FormValues>({ ...initialFormValues, answers: {} });
+const isSubmitting = ref(false);
+const dialogError = ref("");
+const emailLimitReached = ref(false);
+
+/* ---------------------------------------------- */
+/*  Computed                                       */
+/* ---------------------------------------------- */
+const selectedTemplate = computed(
+  () => props.templates.find((t) => t.id === selectedTemplateId.value) || null,
+);
+
+const orderedQuestions = computed(() =>
+  [...(selectedTemplate.value?.questions || [])].sort((a, b) => a.order - b.order),
+);
+
+const canContinue = computed(() => form.value.email.trim().length > 0);
+
+/* ---------------------------------------------- */
+/*  Helpers                                        */
+/* ---------------------------------------------- */
+const updateAnswer = (questionId: string, value: unknown) => {
+  form.value = {
+    ...form.value,
+    answers: { ...form.value.answers, [questionId]: value },
+  };
+};
+
+const fileInputRefs = ref<Record<string, HTMLInputElement | null>>({});
+
+const getFileArray = (questionId: string): File[] => {
+  const val = form.value.answers[questionId];
+  if (Array.isArray(val)) return val as File[];
+  if (val instanceof File) return [val];
+  return [];
+};
+
+const createObjectURL = (file: File) => URL.createObjectURL(file);
+
+const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+
+const handleFileAdd = (questionId: string, event: Event) => {
+  const input = event.target 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 = "";
+};
+
+const removeFileAt = (questionId: string, index: number) => {
+  const current = getFileArray(questionId);
+  const next = current.filter((_, i) => i !== index);
+  updateAnswer(questionId, next.length > 0 ? next : null);
+};
+
+const toggleCheckboxValue = (questionId: string, value: string, checked: boolean) => {
+  const current = Array.isArray(form.value.answers[questionId])
+    ? (form.value.answers[questionId] as string[])
+    : [];
+  const next = checked
+    ? [...new Set([...current, value])]
+    : current.filter((item) => item !== value);
+  updateAnswer(questionId, next);
+};
+
+const resetAndClose = () => {
+  dialogStep.value = "identify";
+  form.value = { ...initialFormValues, answers: {} };
+  dialogError.value = "";
+  selectedTemplateId.value = props.templates.length > 0 ? props.templates[0].id : "";
+  emit("update:modelValue", false);
+};
+
+const validateRequired = (): string => {
+  if (!selectedTemplate.value) return "Please select a template.";
+  if (!form.value.email.trim()) return "Email is required.";
+  if (!form.value.title.trim()) return "Subject is required.";
+
+  for (const question of orderedQuestions.value) {
+    if (!question.required) continue;
+    const value = form.value.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 "";
+};
+
+const handleSubmit = async () => {
+  dialogError.value = "";
+
+  const validationError = validateRequired();
+  if (validationError) {
+    dialogError.value = validationError;
+    return;
+  }
+  if (!selectedTemplate.value) {
+    dialogError.value = "Template is required.";
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const fileQuestionIds = orderedQuestions.value
+      .filter((q) => {
+        const val = form.value.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.value.email.trim(),
+      title: form.value.title.trim(),
+      templateId: selectedTemplate.value.id,
+      answers: { ...form.value.answers },
+      hasFiles: fileQuestionIds.length > 0,
+      fileQuestionIds,
+    });
+
+    emailLimitReached.value = result.emailLimitReached ?? false;
+    dialogStep.value = "success";
+  } catch (submitError) {
+    dialogError.value = submitError instanceof Error ? submitError.message : "Unexpected error.";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+/* ---------------------------------------------- */
+/*  Initialize selectedTemplateId when templates   */
+/*  are provided or change                         */
+/* ---------------------------------------------- */
+watch(
+  () => props.templates,
+  (templates) => {
+    if (templates.length > 0 && !selectedTemplateId.value) {
+      selectedTemplateId.value = templates[0].id;
+    }
+  },
+  { immediate: true },
+);
+
+/* ---------------------------------------------- */
+/*  Reset state when dialog is closed              */
+/* ---------------------------------------------- */
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) {
+      dialogStep.value = "identify";
+      form.value = { ...initialFormValues, answers: {} };
+      dialogError.value = "";
+      selectedTemplateId.value = props.templates.length > 0 ? props.templates[0].id : "";
+    }
+  },
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="vk-dialog-overlay" @click="resetAndClose">
+      <div class="vk-dialog vk-slide-up" @click.stop>
+        <button
+          type="button"
+          class="vk-dialog-close"
+          aria-label="Close"
+          @click="resetAndClose"
+        >
+          &#10005;
+        </button>
+
+        <!-- Success state -->
+        <div v-if="dialogStep === 'success'" 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>
+            <p v-if="emailLimitReached" 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>
+            <p v-else class="vk-empty-text">
+              Check your email for a secure link to follow your ticket.
+            </p>
+            <button
+              type="button"
+              class="vk-button pill"
+              @click="resetAndClose"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+
+        <!-- Step 1: Identify -->
+        <div v-if="dialogStep === 'identify'" 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">
+            <!-- Error alert -->
+            <div
+              v-if="dialogError"
+              :class="cn('vk-alert vk-slide-up', 'error')"
+              role="alert"
+            >
+              <span>&#9888;</span>
+              <span>{{ dialogError }}</span>
+              <button
+                type="button"
+                class="vk-alert-dismiss"
+                aria-label="Dismiss"
+                @click="dialogError = ''"
+              >
+                &#10005;
+              </button>
+            </div>
+
+            <!-- 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"
+                  v-model="form.email"
+                  class="vk-input"
+                  type="email"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+              <p class="vk-hint">We'll contact you at this address.</p>
+            </div>
+
+            <!-- Template selector -->
+            <div v-if="templates.length > 1" class="vk-field">
+              <p class="vk-label">What can we help you with?</p>
+              <div class="vk-grid">
+                <button
+                  v-for="template in templates"
+                  :key="template.id"
+                  type="button"
+                  :class="cn('vk-radio-card', selectedTemplateId === template.id && 'active')"
+                  @click="selectedTemplateId = template.id"
+                >
+                  <span class="vk-radio-dot">
+                    <span class="vk-radio-dot-inner" />
+                  </span>
+                  <div>
+                    <span class="vk-radio-name">{{ template.name }}</span>
+                    <span v-if="template.description" class="vk-radio-description">
+                      {{ template.description }}
+                    </span>
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <!-- Continue -->
+            <button
+              type="button"
+              class="vk-button primary full"
+              :disabled="!canContinue"
+              @click="dialogError = ''; dialogStep = 'details'"
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+
+        <!-- Step 2: Details -->
+        <div v-if="dialogStep === 'details'" class="vk-dialog-body">
+          <button
+            type="button"
+            class="vk-button ghost"
+            @click="dialogError = ''; dialogStep = 'identify'"
+          >
+            &#8592; Back
+          </button>
+
+          <h2 class="vk-dialog-title">
+            {{ selectedTemplate?.name || 'Ticket details' }}
+          </h2>
+
+          <form class="vk-stack" @submit.prevent="handleSubmit">
+            <!-- Error alert -->
+            <div
+              v-if="dialogError"
+              :class="cn('vk-alert vk-slide-up', 'error')"
+              role="alert"
+            >
+              <span>&#9888;</span>
+              <span>{{ dialogError }}</span>
+              <button
+                type="button"
+                class="vk-alert-dismiss"
+                aria-label="Dismiss"
+                @click="dialogError = ''"
+              >
+                &#10005;
+              </button>
+            </div>
+
+            <!-- Subject -->
+            <div class="vk-field">
+              <label class="vk-label required" for="vk-dialog-subject">Subject</label>
+              <input
+                id="vk-dialog-subject"
+                v-model="form.title"
+                class="vk-input"
+                type="text"
+                placeholder="Brief description of your issue"
+                required
+              />
+            </div>
+
+            <!-- Dynamic questions -->
+            <div v-for="question in orderedQuestions" :key="question.id" class="vk-field">
+              <label :class="cn('vk-label', question.required && 'required')">
+                {{ question.label }}
+              </label>
+
+              <!-- TEXT -->
+              <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 -->
+              <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)"
+              />
+
+              <!-- DATE -->
+              <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 -->
+              <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>
+
+              <!-- CHECKBOX -->
+              <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>
+
+              <!-- FILE (multi-image, up to 3) -->
+              <template v-else-if="question.type === 'FILE'">
+                <div
+                  v-if="getFileArray(question.id).length > 0"
+                  class="vk-image-grid"
+                >
+                  <div
+                    v-for="(file, idx) in getFileArray(question.id)"
+                    :key="`${file.name}-${idx}`"
+                    class="vk-image-thumb"
+                  >
+                    <img :src="createObjectURL(file)" :alt="file.name" />
+                    <button
+                      type="button"
+                      class="vk-image-thumb-remove"
+                      aria-label="Remove"
+                      @click="removeFileAt(question.id, idx)"
+                    >
+                      &#10005;
+                    </button>
+                    <span class="vk-image-thumb-name">{{ file.name }}</span>
+                  </div>
+                </div>
+                <template v-if="getFileArray(question.id).length < MAX_FILES">
+                  <input
+                    :ref="(el: any) => (fileInputRefs[question.id] = el)"
+                    type="file"
+                    accept="image/jpeg,image/png,image/gif,image/webp"
+                    multiple
+                    style="display: none"
+                    @change="handleFileAdd(question.id, $event)"
+                  />
+                  <button
+                    type="button"
+                    class="vk-add-image-btn"
+                    @click="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>
+                </template>
+              </template>
+            </div>
+
+            <!-- Submit -->
+            <button
+              class="vk-button primary full"
+              type="submit"
+              :disabled="isSubmitting"
+            >
+              <template v-if="isSubmitting">
+                <span class="vk-spinner" />
+                Submitting...
+              </template>
+              <template v-else>Submit</template>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>