@consilioweb/payload-support 0.8.2 → 0.9.4

package/dist/views/NewTicketView/client.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import s from '../../styles/NewTicket.module.scss';
 
 const CATEGORY_KEYS = [
   { value: "", key: "ticket.category.select" },
@@ -46,8 +47,7 @@ const NewTicketClient = () => {
           const d = await res.json();
           setClientResults(d.docs || []);
         }
-      } catch (err) {
-        console.warn("[support] client search error:", err);
+      } catch {
       }
     }, 300);
     return () => clearTimeout(timer);
@@ -109,47 +109,29 @@ const NewTicketClient = () => {
       setSubmitting(false);
     }
   };
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 720, margin: "0 auto" },
-    header: { marginBottom: 24 },
-    backLink: { fontSize: 13, color: "#2563eb", textDecoration: "none" },
-    title: { fontSize: 24, fontWeight: 700, margin: "8px 0 4px", color: "var(--theme-text)" },
-    subtitle: { fontSize: 14, color: "var(--theme-elevation-500)" },
-    error: { padding: "10px 14px", borderRadius: 8, background: "#fef2f2", color: "#dc2626", fontSize: 13, marginBottom: 16, border: "1px solid #fecaca" },
-    fieldGroup: { marginBottom: 16 },
-    label: { display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6, color: "var(--theme-text)" },
-    required: { color: "#dc2626" },
-    input: { width: "100%", padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
-    select: { width: "100%", padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
-    textarea: { width: "100%", padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, color: "var(--theme-text)", background: "var(--theme-elevation-0)", minHeight: 120, fontFamily: "inherit", resize: "vertical" },
-    row3: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 16 },
-    submitBtn: { padding: "10px 20px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 14, fontWeight: 600, border: "none", cursor: "pointer" },
-    searchResults: { position: "absolute", top: "100%", left: 0, right: 0, background: "var(--theme-elevation-0)", border: "1px solid var(--theme-elevation-200)", borderRadius: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.1)", zIndex: 50, maxHeight: 200, overflowY: "auto" },
-    searchItem: { padding: "8px 12px", cursor: "pointer", fontSize: 13, borderBottom: "1px solid var(--theme-elevation-100)" }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxs("div", { style: S.header, children: [
-      /* @__PURE__ */ jsxs(Link, { href: "/admin/support/inbox", style: S.backLink, children: [
+  return /* @__PURE__ */ jsxs("div", { className: s.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.header, children: [
+      /* @__PURE__ */ jsxs(Link, { href: "/admin/support/inbox", className: s.backLink, children: [
         "\u2190 ",
         t("newTicket.backToInbox")
       ] }),
-      /* @__PURE__ */ jsx("h1", { style: S.title, children: t("newTicket.title") }),
-      /* @__PURE__ */ jsx("p", { style: S.subtitle, children: t("newTicket.subtitle") })
+      /* @__PURE__ */ jsx("h1", { className: s.title, children: t("newTicket.title") }),
+      /* @__PURE__ */ jsx("p", { className: s.subtitle, children: t("newTicket.subtitle") })
     ] }),
-    error && /* @__PURE__ */ jsx("div", { style: S.error, children: error }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-        /* @__PURE__ */ jsxs("label", { style: S.label, children: [
+    error && /* @__PURE__ */ jsx("div", { className: s.error, children: error }),
+    /* @__PURE__ */ jsxs("form", { className: s.form, onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+        /* @__PURE__ */ jsxs("label", { className: s.label, children: [
           t("newTicket.clientLabel"),
           " ",
-          /* @__PURE__ */ jsx("span", { style: S.required, children: "*" })
+          /* @__PURE__ */ jsx("span", { className: s.required, children: "*" })
         ] }),
         selectedClient ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "8px 14px", borderRadius: 10, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-50)" }, children: [
           /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, fontSize: 13, color: "var(--theme-text)" }, children: [
             selectedClient.firstName,
             " ",
             selectedClient.lastName,
-            " -- ",
+            " \u2014 ",
             selectedClient.company
           ] }),
           /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: selectedClient.email }),
@@ -158,18 +140,19 @@ const NewTicketClient = () => {
             setClientId(null);
             setClientSearch("");
           }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", color: "var(--theme-elevation-400)", fontSize: 16 }, children: "\xD7" })
-        ] }) : /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: s.searchWrap, children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
-              style: S.input,
+              className: s.input,
               placeholder: t("newTicket.clientSearchPlaceholder"),
               value: clientSearch,
-              onChange: (e) => setClientSearch(e.target.value)
+              onChange: (e) => setClientSearch(e.target.value),
+              style: { width: "100%" }
             }
           ),
-          clientResults.length > 0 && /* @__PURE__ */ jsx("div", { style: S.searchResults, children: clientResults.map((c) => /* @__PURE__ */ jsxs("div", { style: S.searchItem, onClick: () => {
+          clientResults.length > 0 && /* @__PURE__ */ jsx("div", { className: s.searchResults, children: clientResults.map((c) => /* @__PURE__ */ jsxs("div", { className: s.searchItem, onClick: () => {
             setSelectedClient(c);
             setClientId(c.id);
             setClientSearch("");
@@ -180,43 +163,43 @@ const NewTicketClient = () => {
               " ",
               c.lastName
             ] }),
-            " -- ",
+            " \u2014 ",
             c.company,
             " ",
             /* @__PURE__ */ jsx("span", { style: { color: "var(--theme-elevation-400)", fontSize: 12 }, children: c.email })
           ] }, c.id)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-        /* @__PURE__ */ jsxs("label", { style: S.label, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+        /* @__PURE__ */ jsxs("label", { className: s.label, children: [
           t("newTicket.subjectLabel"),
           " ",
-          /* @__PURE__ */ jsx("span", { style: S.required, children: "*" })
+          /* @__PURE__ */ jsx("span", { className: s.required, children: "*" })
         ] }),
-        /* @__PURE__ */ jsx("input", { type: "text", style: S.input, placeholder: t("newTicket.subjectPlaceholder"), value: subject, onChange: (e) => setSubject(e.target.value) })
+        /* @__PURE__ */ jsx("input", { type: "text", className: s.input, placeholder: t("newTicket.subjectPlaceholder"), value: subject, onChange: (e) => setSubject(e.target.value) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.row3, children: [
-        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { style: S.label, children: t("newTicket.categoryLabel") }),
-          /* @__PURE__ */ jsx("select", { style: S.select, value: category, onChange: (e) => setCategory(e.target.value), children: CATEGORY_KEYS.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: t(c.key) }, c.value)) })
+      /* @__PURE__ */ jsxs("div", { className: s.row3, children: [
+        /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.categoryLabel") }),
+          /* @__PURE__ */ jsx("select", { className: s.select, value: category, onChange: (e) => setCategory(e.target.value), children: CATEGORY_KEYS.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: t(c.key) }, c.value)) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { style: S.label, children: t("newTicket.priorityLabel") }),
-          /* @__PURE__ */ jsx("select", { style: S.select, value: priority, onChange: (e) => setPriority(e.target.value), children: PRIORITY_KEYS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: t(p.key) }, p.value)) })
+        /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.priorityLabel") }),
+          /* @__PURE__ */ jsx("select", { className: s.select, value: priority, onChange: (e) => setPriority(e.target.value), children: PRIORITY_KEYS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: t(p.key) }, p.value)) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { style: S.label, children: t("newTicket.projectLabel") }),
-          /* @__PURE__ */ jsxs("select", { style: S.select, value: projectId || "", onChange: (e) => setProjectId(e.target.value ? Number(e.target.value) : null), children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: t("ticket.noProject") }),
+        /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.projectLabel") }),
+          /* @__PURE__ */ jsxs("select", { className: s.select, value: projectId || "", onChange: (e) => setProjectId(e.target.value ? Number(e.target.value) : null), children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Aucun \u2014" }),
             projects.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
-        /* @__PURE__ */ jsx("label", { style: S.label, children: t("newTicket.descriptionLabel") }),
-        /* @__PURE__ */ jsx("textarea", { style: S.textarea, placeholder: t("newTicket.descriptionPlaceholder"), value: description, onChange: (e) => setDescription(e.target.value) })
+      /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
+        /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.descriptionLabel") }),
+        /* @__PURE__ */ jsx("textarea", { className: s.textarea, placeholder: t("newTicket.descriptionPlaceholder"), value: description, onChange: (e) => setDescription(e.target.value) })
       ] }),
-      /* @__PURE__ */ jsx("button", { type: "submit", style: S.submitBtn, disabled: submitting, children: submitting ? t("newTicket.submitting") : t("newTicket.submitButton") })
+      /* @__PURE__ */ jsx("button", { type: "submit", className: s.submitBtn, disabled: submitting, children: submitting ? t("newTicket.submitting") : t("newTicket.submitButton") })
     ] })
   ] });
 };