@vicket/create-support 0.1.0

package/templates/react/src/vicket/SupportPage.tsx

@@ -0,0 +1,399 @@
+import { useEffect, useMemo, useState } from "react";
+import "./vicket.css";
+
+const API_URL = ((import.meta as { env?: Record<string, string> }).env?.VITE_VICKET_API_URL || "").replace(
+  /\/$/,
+  "",
+);
+const API_KEY = (import.meta as { env?: Record<string, string> }).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 SupportInitResponse = {
+  success: boolean;
+  data?: {
+    website?: { name?: string };
+    templates: Template[];
+  };
+  error?: string;
+};
+
+type FormValues = {
+  email: string;
+  title: string;
+  answers: Record<string, unknown>;
+};
+
+const initialFormValues: FormValues = {
+  email: "",
+  title: "",
+  answers: {},
+};
+
+export default function SupportPage() {
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [websiteName, setWebsiteName] = useState("Support");
+  const [selectedTemplateId, setSelectedTemplateId] = useState("");
+  const [form, setForm] = useState<FormValues>(initialFormValues);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  useEffect(() => {
+    let isMounted = true;
+    const load = async () => {
+      setIsLoading(true);
+      setError("");
+      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",
+          cache: "no-store",
+          headers: {
+            "X-Api-Key": API_KEY,
+            "Content-Type": "application/json",
+          },
+        });
+        const payload = (await response.json()) as SupportInitResponse;
+
+        if (!response.ok || !payload?.success || !payload?.data) {
+          throw new Error(payload?.error || "Failed to load support data.");
+        }
+
+        if (!isMounted) return;
+        const nextTemplates = payload.data.templates || [];
+        setTemplates(nextTemplates);
+        setWebsiteName(payload.data.website?.name || "Support");
+        if (nextTemplates.length > 0) {
+          setSelectedTemplateId(nextTemplates[0].id);
+        }
+      } catch (loadError) {
+        if (!isMounted) return;
+        setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    load();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const selectedTemplate = useMemo(
+    () => templates.find((template) => template.id === selectedTemplateId) || null,
+    [templates, selectedTemplateId],
+  );
+
+  const orderedQuestions = useMemo(
+    () => [...(selectedTemplate?.questions || [])].sort((a, b) => a.order - b.order),
+    [selectedTemplate],
+  );
+
+  const updateAnswer = (questionId: string, value: unknown) => {
+    setForm((prev) => ({
+      ...prev,
+      answers: {
+        ...prev.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) 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 "${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 handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    setSuccess("");
+
+    const validationError = validateRequired();
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    if (!selectedTemplate) {
+      setError("Template is required.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const payload = {
+        email: form.email.trim(),
+        title: form.title.trim(),
+        templateId: selectedTemplate.id,
+        answers: { ...form.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 { error?: string; success?: boolean };
+      if (!response.ok || !responsePayload?.success) {
+        throw new Error(responsePayload?.error || "Failed to create ticket.");
+      }
+
+      setSuccess("Ticket created. Ask the user to open the secure email link to continue.");
+      setForm(initialFormValues);
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "Unexpected error.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="vk-shell">
+      <div className="vk-card">
+        <header className="vk-header">
+          <h1 className="vk-title">{websiteName}</h1>
+          <p className="vk-subtitle">Create a new support ticket directly from your own page.</p>
+        </header>
+
+        <div className="vk-body">
+          {isLoading ? (
+            <div className="vk-alert">Loading support data...</div>
+          ) : (
+            <form className="vk-stack" onSubmit={handleSubmit}>
+              {error ? <div className="vk-alert error">{error}</div> : null}
+              {success ? <div className="vk-alert success">{success}</div> : null}
+
+              <div className="vk-stack">
+                <p className="vk-section-label">Ticket template</p>
+                <div className="vk-grid two">
+                  {templates.map((template) => (
+                    <button
+                      key={template.id}
+                      type="button"
+                      className={`vk-template-button ${selectedTemplateId === template.id ? "active" : ""}`}
+                      onClick={() => setSelectedTemplateId(template.id)}
+                    >
+                      <span className="vk-template-name">{template.name}</span>
+                      <span className="vk-template-description">
+                        {template.description || "No description"}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="vk-grid two">
+                <div className="vk-field">
+                  <label className="vk-label required" htmlFor="email">
+                    Email
+                  </label>
+                  <input
+                    id="email"
+                    className="vk-input"
+                    type="email"
+                    value={form.email}
+                    onChange={(event) => setForm((prev) => ({ ...prev, email: event.target.value }))}
+                    required
+                  />
+                </div>
+
+                <div className="vk-field">
+                  <label className="vk-label required" htmlFor="title">
+                    Subject
+                  </label>
+                  <input
+                    id="title"
+                    className="vk-input"
+                    type="text"
+                    value={form.title}
+                    onChange={(event) => setForm((prev) => ({ ...prev, title: event.target.value }))}
+                    required
+                  />
+                </div>
+              </div>
+
+              {orderedQuestions.map((question) => (
+                <div className="vk-field" key={question.id}>
+                  <label className={`vk-label ${question.required ? "required" : ""}`}>{question.label}</label>
+
+                  {question.type === "TEXT" ? (
+                    <input
+                      className="vk-input"
+                      type="text"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(event) => updateAnswer(question.id, event.target.value)}
+                    />
+                  ) : null}
+
+                  {question.type === "TEXTAREA" ? (
+                    <textarea
+                      className="vk-textarea"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(event) => updateAnswer(question.id, event.target.value)}
+                    />
+                  ) : null}
+
+                  {question.type === "DATE" ? (
+                    <input
+                      className="vk-input"
+                      type="date"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(event) => updateAnswer(question.id, event.target.value)}
+                    />
+                  ) : null}
+
+                  {question.type === "SELECT" ? (
+                    <select
+                      className="vk-select"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(event) => updateAnswer(question.id, event.target.value)}
+                    >
+                      <option value="">Select an option</option>
+                      {(question.options || []).map((option) => (
+                        <option key={option.id} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  ) : null}
+
+                  {question.type === "CHECKBOX" ? (
+                    <div className="vk-checkbox-list">
+                      {(question.options || []).map((option) => (
+                        <label className="vk-checkbox-item" key={option.id}>
+                          <input
+                            type="checkbox"
+                            checked={
+                              Array.isArray(form.answers[question.id]) &&
+                              (form.answers[question.id] as string[]).includes(option.value)
+                            }
+                            onChange={(event) =>
+                              toggleCheckboxValue(question.id, option.value, event.target.checked)
+                            }
+                          />
+                          <span>{option.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                  ) : null}
+
+                  {question.type === "FILE" ? (
+                    <input
+                      className="vk-input"
+                      type="file"
+                      onChange={(event) => updateAnswer(question.id, event.target.files?.[0] || null)}
+                    />
+                  ) : null}
+                </div>
+              ))}
+
+              <div className="vk-actions">
+                <button className="vk-button primary" type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Submitting..." : "Submit ticket"}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react/src/vicket/TicketPage.tsx

@@ -0,0 +1,247 @@
+import { FormEvent, useEffect, useMemo, useState } from "react";
+import "./vicket.css";
+
+const API_URL = ((import.meta as { env?: Record<string, string> }).env?.VITE_VICKET_API_URL || "").replace(
+  /\/$/,
+  "",
+);
+const API_KEY = (import.meta as { env?: Record<string, string> }).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[];
+};
+
+export default function TicketPage() {
+  const token = useMemo(() => new URLSearchParams(window.location.search).get("token") || "", []);
+  const [thread, setThread] = useState<TicketThread | null>(null);
+  const [content, setContent] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const hasToken = useMemo(() => token.trim().length > 0, [token]);
+
+  const loadThread = async () => {
+    if (!hasToken) {
+      setIsLoading(false);
+      setError("Missing ticket token in URL.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    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)}`, {
+        method: "GET",
+        cache: "no-store",
+        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.");
+      }
+
+      setThread(payload.data);
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadThread();
+  }, [token]);
+
+  const onSubmitReply = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    setSuccess("");
+
+    if (!content.trim() && files.length === 0) {
+      setError("Reply content is required.");
+      return;
+    }
+
+    if (!hasToken) {
+      setError("Missing ticket token.");
+      return;
+    }
+
+    setIsSending(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.");
+      }
+
+      setContent("");
+      setFiles([]);
+      setSuccess("Reply sent.");
+      await loadThread();
+    } catch (replyError) {
+      setError(replyError instanceof Error ? replyError.message : "Unexpected error.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className="vk-shell">
+      <div className="vk-card">
+        <header className="vk-header">
+          <h1 className="vk-title">{thread?.title || "Ticket"}</h1>
+          <div className="vk-thread-header">
+            {thread?.status?.label ? <span className="vk-badge">Status: {thread.status.label}</span> : null}
+            {thread?.priority?.label ? <span className="vk-badge">Priority: {thread.priority.label}</span> : null}
+          </div>
+          <p className="vk-subtitle">Follow and reply to your ticket here.</p>
+        </header>
+
+        <div className="vk-body vk-stack">
+          {isLoading ? <div className="vk-alert">Loading ticket...</div> : null}
+          {error ? <div className="vk-alert error">{error}</div> : null}
+          {success ? <div className="vk-alert success">{success}</div> : null}
+
+          {!isLoading && thread ? (
+            <>
+              <section className="vk-message-list">
+                {thread.messages.length === 0 ? (
+                  <div className="vk-alert">No messages yet.</div>
+                ) : (
+                  thread.messages.map((message) => (
+                    <article className="vk-message" key={message.id}>
+                      <div className="vk-message-meta">
+                        <strong>{message.author_type}</strong>
+                        <span>{new Date(message.created_at).toLocaleString()}</span>
+                      </div>
+                      <div className="vk-message-body">{message.content}</div>
+                      {message.attachments && message.attachments.length > 0 ? (
+                        <div className="vk-attachments">
+                          {message.attachments.map((attachment) => (
+                            <a
+                              className="vk-attachment"
+                              href={attachment.url}
+                              key={attachment.id}
+                              rel="noopener noreferrer"
+                              target="_blank"
+                            >
+                              {attachment.original_filename}
+                            </a>
+                          ))}
+                        </div>
+                      ) : null}
+                    </article>
+                  ))
+                )}
+              </section>
+
+              <form className="vk-stack" onSubmit={onSubmitReply}>
+                <div className="vk-field">
+                  <label className="vk-label required" htmlFor="reply-content">
+                    Reply
+                  </label>
+                  <textarea
+                    id="reply-content"
+                    className="vk-textarea"
+                    value={content}
+                    onChange={(event) => setContent(event.target.value)}
+                    placeholder="Write your reply"
+                  />
+                </div>
+
+                <div className="vk-field">
+                  <label className="vk-label" htmlFor="reply-files">
+                    Attachments
+                  </label>
+                  <input
+                    id="reply-files"
+                    className="vk-input"
+                    multiple
+                    type="file"
+                    onChange={(event) => setFiles(Array.from(event.target.files || []))}
+                  />
+                </div>
+
+                <div className="vk-actions">
+                  <button className="vk-button primary" disabled={isSending} type="submit">
+                    {isSending ? "Sending..." : "Send reply"}
+                  </button>
+                </div>
+              </form>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}