@vicket/create-support 1.1.1

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

@@ -0,0 +1,444 @@
+<script setup lang="ts">
+/* ── Props / Emits ──────────────────────────────── */
+const props = defineProps<{
+  open: boolean;
+  templates: Template[];
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+/* ── Reactive state ─────────────────────────────── */
+const step = 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);
+
+/* ── Methods ────────────────────────────────────── */
+const updateAnswer = (questionId: string, value: unknown) => {
+  form.value = {
+    ...form.value,
+    answers: { ...form.value.answers, [questionId]: value },
+  };
+};
+
+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 validateRequired = () => {
+  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") {
+      if (!(value instanceof File)) return `"${question.label}" is required.`;
+      continue;
+    }
+    if (value === null || value === undefined || String(value).trim() === "") {
+      return `"${question.label}" is required.`;
+    }
+  }
+  return "";
+};
+
+const resetAndClose = () => {
+  step.value = "identify";
+  form.value = { ...initialFormValues, answers: {} };
+  dialogError.value = "";
+  emailLimitReached.value = false;
+  selectedTemplateId.value = props.templates.length > 0 ? props.templates[0].id : "";
+  emit("close");
+};
+
+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) => q.type === "FILE" && form.value.answers[q.id] instanceof File)
+      .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;
+    step.value = "success";
+  } catch (submitError) {
+    dialogError.value = submitError instanceof Error ? submitError.message : "Unexpected error.";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+/* ── Initialize selectedTemplateId when templates are provided ── */
+watch(
+  () => props.templates,
+  (newTemplates) => {
+    if (newTemplates.length > 0 && !selectedTemplateId.value) {
+      selectedTemplateId.value = newTemplates[0].id;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" @click="resetAndClose">
+    <div
+      class="relative mx-4 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl"
+      @click.stop
+    >
+      <!-- Close button -->
+      <button
+        type="button"
+        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"
+        @click="resetAndClose"
+      >
+        <!-- IconX -->
+        <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>
+
+      <!-- Success state -->
+      <div v-if="step === 'success'" 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">
+          <!-- IconCheck -->
+          <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>
+        <p v-if="emailLimitReached" 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>
+        <p v-else class="mt-2 text-sm text-slate-500">
+          Check your email for a secure link to follow your ticket.
+        </p>
+        <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"
+          @click="resetAndClose"
+        >
+          Close
+        </button>
+      </div>
+
+      <!-- Step 1: Identify -->
+      <div v-if="step === 'identify'" 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">
+          <!-- Error alert -->
+          <div
+            v-if="dialogError"
+            class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900"
+            role="alert"
+          >
+            <span class="mt-0.5 shrink-0">
+              <!-- IconAlert -->
+              <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"
+              class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
+              aria-label="Dismiss"
+              @click="dialogError = ''"
+            >
+              <!-- IconX -->
+              <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>
+
+          <!-- 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">
+                <!-- IconMail -->
+                <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"
+                v-model="form.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"
+                required
+              />
+            </div>
+            <p class="text-xs text-slate-500">We'll contact you at this address.</p>
+          </div>
+
+          <!-- Template selector -->
+          <div v-if="templates.length > 1" 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">
+              <button
+                v-for="template in templates"
+                :key="template.id"
+                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',
+                )"
+                @click="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',
+                  )"
+                >
+                  <span
+                    v-if="selectedTemplateId === template.id"
+                    class="block h-1.5 w-1.5 rounded-full bg-white"
+                  />
+                </span>
+                <div>
+                  <span class="block text-sm font-semibold text-slate-900">{{ template.name }}</span>
+                  <span v-if="template.description" class="mt-0.5 block text-xs text-slate-500">{{ template.description }}</span>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <!-- 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"
+            @click="dialogError = ''; step = 'details'"
+          >
+            Continue
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 2: Details -->
+      <div v-if="step === 'details'" 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"
+          @click="dialogError = ''; step = 'identify'"
+        >
+          <!-- IconArrowLeft -->
+          <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" @submit.prevent="handleSubmit">
+          <!-- Error alert -->
+          <div
+            v-if="dialogError"
+            class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900"
+            role="alert"
+          >
+            <span class="mt-0.5 shrink-0">
+              <!-- IconAlert -->
+              <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"
+              class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
+              aria-label="Dismiss"
+              @click="dialogError = ''"
+            >
+              <!-- IconX -->
+              <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>
+
+          <!-- 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"
+              v-model="form.title"
+              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"
+              required
+            />
+          </div>
+
+          <!-- Dynamic questions -->
+          <div v-for="question in orderedQuestions" :key="question.id" class="space-y-1.5">
+            <label class="text-sm font-semibold text-slate-900">
+              {{ question.label }}<span v-if="question.required" class="text-red-600"> *</span>
+            </label>
+
+            <!-- TEXT -->
+            <input
+              v-if="question.type === 'TEXT'"
+              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] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLInputElement).value)"
+            />
+
+            <!-- TEXTAREA -->
+            <textarea
+              v-else-if="question.type === '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] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLTextAreaElement).value)"
+            />
+
+            <!-- DATE -->
+            <input
+              v-else-if="question.type === 'DATE'"
+              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] || '')"
+              @input="updateAnswer(question.id, ($event.target as HTMLInputElement).value)"
+            />
+
+            <!-- SELECT -->
+            <select
+              v-else-if="question.type === '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] || '')"
+              @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="space-y-2 pt-1">
+              <label
+                v-for="option in question.options || []"
+                :key="option.id"
+                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)
+                  "
+                  @change="toggleCheckboxValue(question.id, option.value, ($event.target as HTMLInputElement).checked)"
+                />
+                <span>{{ option.label }}</span>
+              </label>
+            </div>
+
+            <!-- FILE -->
+            <template v-else-if="question.type === 'FILE'">
+              <div v-if="form.answers[question.id] instanceof File" 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"
+                    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"
+                    @click="updateAnswer(question.id, null)"
+                  >
+                    <!-- IconX -->
+                    <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>
+              <input
+                v-else
+                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"
+                @change="(e: Event) => {
+                  const input = e.target 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);
+                }"
+              />
+            </template>
+          </div>
+
+          <!-- 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"
+            >
+              <template v-if="isSubmitting">
+                <!-- IconSpinner -->
+                <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...
+              </template>
+              <template v-else>
+                Submit
+              </template>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>