@scalio-cloud/ui 0.6.2 → 0.8.0

package/react/support.js

@@ -0,0 +1,336 @@
+"use strict";
+// Support desk in the apps (ADR 0022): tickets go to the central Scalio support desk in Compass, the app only
+// relays them. The backend routes come from scalio-connect (`scalio_connect.support.web`); supportApi(api) maps
+// them for an axios-like client. SupportDesk is the body of SupportDrawer when it gets a `client`:
+// "Neue Anfrage" (category, subject, description, diagnostics) and "Meine Tickets" (list, detail, reply, rating).
+// SupportConnection is the settings card "Support-Verbindung" (portal address + one-time code).
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+
+const CATEGORIES = ["question", "bug", "wish", "license", "billing"];
+const DONE = ["resolved", "closed"];
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// api: axios instance with the app's base URL (/api). Every method resolves to the response body.
+function supportApi(api) {
+  const data = (p) => p.then((r) => r.data);
+  const enc = encodeURIComponent;
+  return {
+    create: (ticket) => data(api.post("/support/tickets", ticket)),
+    list: () => data(api.get("/support/tickets")),
+    get: (id) => data(api.get(`/support/tickets/${enc(id)}`)),
+    reply: (id, body) => data(api.post(`/support/tickets/${enc(id)}/messages`, { body })),
+    rate: (id, score) => data(api.post(`/support/tickets/${enc(id)}/rating`, { score })),
+    connection: () => data(api.get("/support/connection")),
+    connect: (portal_url, code) => data(api.post("/support/connection", { portal_url, code })),
+    check: () => data(api.post("/support/connection/check")),
+    disconnect: () => data(api.delete("/support/connection")),
+  };
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (d && typeof d.message === "string") return d.message;
+  return (err && err.message) || String(err);
+}
+
+function fmtDate(value, lang) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+function statusText(L, s) {
+  return (L.supportStatus && L.supportStatus[s]) || s;
+}
+
+function NewTicket({ client, page, L, onSent }) {
+  const [category, setCategory] = React.useState("question");
+  const [subject, setSubject] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [diagnostics, setDiagnostics] = React.useState(true);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const submit = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      const browser = diagnostics && typeof navigator !== "undefined" ? String(navigator.userAgent || "").slice(0, 300) : "";
+      const res = await client.create({ category, subject, description, url: page || "", diagnostics, browser });
+      setSubject("");
+      setDescription("");
+      setCategory("question");
+      onSent(res && res.number ? L.supportSentAs.replace("{n}", res.number) : L.supportQueued);
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return h(
+    "form",
+    { className: "scalio-support-form", onSubmit: submit },
+    h("label", { className: "scalio-field-label", htmlFor: "support-category" }, L.supportCategory),
+    h(
+      "select",
+      { id: "support-category", className: "scalio-input", value: category, onChange: (e) => setCategory(e.target.value), "data-testid": "ticket-category-select" },
+      CATEGORIES.map((c) => h("option", { key: c, value: c }, L.supportCategories[c]))
+    ),
+    h("label", { className: "scalio-field-label", htmlFor: "support-subject" }, L.subject),
+    h("input", {
+      id: "support-subject", className: "scalio-input", value: subject, required: true, minLength: 3, maxLength: 200,
+      onChange: (e) => setSubject(e.target.value), "data-testid": "ticket-subject-input",
+    }),
+    h("label", { className: "scalio-field-label", htmlFor: "support-description" }, L.description),
+    h("textarea", {
+      id: "support-description", className: "scalio-input scalio-textarea", rows: 5, value: description, required: true,
+      minLength: 3, maxLength: 5000, onChange: (e) => setDescription(e.target.value), "data-testid": "ticket-description-input",
+    }),
+    h(
+      "label",
+      { className: "scalio-support-check", "data-testid": "ticket-diagnostics-toggle" },
+      h("input", { type: "checkbox", checked: diagnostics, onChange: (e) => setDiagnostics(e.target.checked) }),
+      h("span", null, L.supportDiagnostics)
+    ),
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "ticket-submit-btn" }, busy ? L.sending : L.send)
+  );
+}
+
+function Waiting({ item, L }) {
+  return h(
+    "div",
+    { className: "scalio-support-item is-waiting" },
+    item.subject ? h("div", { className: "scalio-support-item-title" }, item.subject) : null,
+    h("div", { className: "scalio-support-meta" }, item.state === "failed" ? L.supportNotSent : L.supportWaiting)
+  );
+}
+
+function MyTickets({ client, L, lang, onOpen }) {
+  const [data, setData] = React.useState(null);
+  React.useEffect(() => {
+    let alive = true;
+    client.list().then((d) => alive && setData(d)).catch(() => alive && setData({ tickets: [], queued: [], reachable: false }));
+    return () => { alive = false; };
+  }, [client]);
+  if (!data) return h("div", { className: "scalio-support-meta" }, L.loading);
+  const tickets = data.tickets || [];
+  const queued = data.queued || [];
+  return h(
+    "div",
+    { className: "scalio-support-list", "data-testid": "support-my-tickets" },
+    data.connected === false ? h("div", { className: "scalio-support-meta" }, L.supportNotConnected) : null,
+    data.reachable === false ? h("div", { className: "scalio-notice is-warn" }, L.supportUnreachable) : null,
+    queued.map((q) => h(Waiting, { key: q.id, item: q, L })),
+    tickets.map((t) =>
+      h(
+        "button",
+        { key: t.id, type: "button", className: "scalio-support-item", onClick: () => onOpen(t.id), "data-testid": `support-ticket-${t.id}` },
+        h(
+          "div",
+          { className: "scalio-support-item-head" },
+          h("span", { className: "scalio-support-item-title" }, t.title),
+          t.number ? h("span", { className: "scalio-support-number" }, t.number) : null
+        ),
+        h("div", { className: "scalio-support-meta" }, `${statusText(L, t.status)} · ${fmtDate(t.last_activity_at || t.created_at, lang)}`)
+      )
+    ),
+    !tickets.length && !queued.length ? h("div", { className: "scalio-support-empty" }, L.supportNone) : null
+  );
+}
+
+function TicketDetail({ client, id, L, lang, onBack }) {
+  const [tk, setTk] = React.useState(null);
+  const [reply, setReply] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [note, setNote] = React.useState("");
+  const load = React.useCallback(() => client.get(id).then(setTk).catch((err) => { setError(errorText(err)); setTk(false); }), [client, id]);
+  React.useEffect(() => { load(); }, [load]);
+  const send = async (fn, ok) => {
+    setBusy(true);
+    setError("");
+    try {
+      await fn();
+      setReply("");
+      setNote(ok);
+      await load();
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const back = h("button", { type: "button", className: "scalio-support-back", onClick: onBack, "data-testid": "support-back" }, `‹ ${L.supportMine}`);
+  if (tk === null) return h("div", null, back, h("div", { className: "scalio-support-meta" }, L.loading));
+  if (tk === false) return h("div", null, back, h("div", { className: "scalio-notice is-error", role: "alert" }, error));
+  return h(
+    "div",
+    { className: "scalio-support-detail", "data-testid": "support-ticket-detail" },
+    back,
+    h("div", { className: "scalio-support-number" }, `${tk.number || ""} · ${statusText(L, tk.status)}`),
+    h("h4", { className: "scalio-support-item-title" }, tk.title),
+    tk.description ? h("p", { className: "scalio-support-msg" }, tk.description) : null,
+    (tk.messages || []).map((m) =>
+      h(
+        "div",
+        { key: m.id, className: cx("scalio-support-msg", m.from_support && "is-support") },
+        h("div", { className: "scalio-support-meta" }, `${m.from_support ? L.supportFromSupport : m.author_name || ""} · ${fmtDate(m.created_at, lang)}`),
+        h("div", null, m.body)
+      )
+    ),
+    (tk.queued || []).map((q) => h(Waiting, { key: q.id, item: q, L })),
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    tk.status !== "closed"
+      ? h(
+          "div",
+          { className: "scalio-support-form" },
+          h("textarea", {
+            className: "scalio-input scalio-textarea", rows: 3, value: reply, placeholder: L.supportReplyPlaceholder,
+            "aria-label": L.supportReply, onChange: (e) => setReply(e.target.value), "data-testid": "ticket-reply-input",
+          }),
+          h(
+            "button",
+            { type: "button", className: "scalio-btn-primary", disabled: busy || !reply.trim(), "data-testid": "ticket-reply-btn",
+              onClick: () => send(() => client.reply(id, reply.trim()), L.supportReplySent) },
+            L.supportReply
+          )
+        )
+      : null,
+    DONE.includes(tk.status) && !tk.csat_score
+      ? h(
+          "div",
+          { className: "scalio-support-rating", "data-testid": "ticket-rating" },
+          h("div", { className: "scalio-support-meta" }, L.supportRate),
+          h(
+            "div",
+            { className: "scalio-support-stars" },
+            [1, 2, 3, 4, 5].map((n) =>
+              h("button", { key: n, type: "button", disabled: busy, "aria-label": String(n), "data-testid": `ticket-rate-${n}`,
+                onClick: () => send(() => client.rate(id, n), L.supportThanks) }, "★")
+            )
+          )
+        )
+      : null
+  );
+}
+
+function SupportDesk({ client, page, lang, labels }) {
+  const L = labelsFor(lang, labels);
+  const [tab, setTab] = React.useState("new");
+  const [ticket, setTicket] = React.useState(null);
+  const [note, setNote] = React.useState("");
+  const tabBtn = (key, label) =>
+    h("button", {
+      type: "button", role: "tab", "aria-selected": tab === key, className: cx("scalio-support-tab", tab === key && "is-active"),
+      onClick: () => { setTab(key); setTicket(null); setNote(""); }, "data-testid": `support-tab-${key}`,
+    }, label);
+  return h(
+    React.Fragment,
+    null,
+    h("div", { className: "scalio-support-tabs", role: "tablist" }, tabBtn("new", L.supportNew), tabBtn("mine", L.supportMine)),
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
+    tab === "new" ? h(NewTicket, { client, page, L, onSent: (text) => { setNote(text); setTab("mine"); } }) : null,
+    tab === "mine" && !ticket ? h(MyTickets, { client, L, lang, onOpen: (id) => { setNote(""); setTicket(id); } }) : null,
+    tab === "mine" && ticket ? h(TicketDetail, { client, id: ticket, L, lang, onBack: () => setTicket(null) }) : null
+  );
+}
+
+const CONN_TONE = { active: "is-ok", pending: "is-warn", blocked: "is-error", unpaired: "is-neutral" };
+
+// Settings card. client: supportApi(api). Shown to admins only; the backend answers 403 for others.
+function SupportConnection({ client, lang, labels, onChange }) {
+  const L = labelsFor(lang, labels);
+  const [st, setSt] = React.useState(null);
+  const [portal, setPortal] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [note, setNote] = React.useState("");
+  React.useEffect(() => {
+    let alive = true;
+    client.connection().then((d) => alive && setSt(d)).catch((err) => alive && (setError(errorText(err)), setSt(false)));
+    return () => { alive = false; };
+  }, [client]);
+  const run = async (fn, ok) => {
+    setBusy(true);
+    setError("");
+    setNote("");
+    try {
+      const d = await fn();
+      setSt(d);
+      setCode("");
+      setNote(ok);
+      if (onChange) onChange(d);
+    } catch (err) {
+      setError(errorText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (st === null) return h("div", { className: "scalio-support-meta" }, L.loading);
+  if (st === false) return h("div", { className: "scalio-notice is-error", role: "alert" }, error);
+  const connected = st.status !== "unpaired";
+  const outbox = st.outbox || {};
+  return h(
+    "div",
+    { className: "scalio-support-conn", "data-testid": "support-connection" },
+    h(
+      "div",
+      { className: "scalio-support-conn-head" },
+      h("span", { className: cx("scalio-badge", CONN_TONE[st.status] || "is-neutral"), "data-testid": "support-connection-status" },
+        (L.supportConnStatus && L.supportConnStatus[st.status]) || st.status),
+      st.status === "active" && st.detail ? h("span", null, st.detail) : null
+    ),
+    h("p", { className: "scalio-support-meta" }, connected ? L.supportConnHelpConnected : L.supportConnHelp),
+    st.status === "pending" ? h("div", { className: "scalio-notice is-warn" }, L.supportConnPending) : null,
+    st.status === "blocked" ? h("div", { className: "scalio-notice is-error" }, L.supportConnBlocked) : null,
+    connected && st.key_ok === false ? h("div", { className: "scalio-notice is-error" }, L.supportConnKeyLost) : null,
+    connected
+      ? h(
+          "dl",
+          { className: "scalio-support-conn-facts" },
+          h("dt", null, L.supportPortal), h("dd", null, st.portal_url),
+          h("dt", null, L.supportInstance), h("dd", null, st.instance_id),
+          st.paired_at ? h(React.Fragment, null, h("dt", null, L.supportSince), h("dd", null, fmtDate(st.paired_at, lang))) : null
+        )
+      : null,
+    outbox.pending || outbox.failed
+      ? h("div", { className: "scalio-support-meta", "data-testid": "support-outbox" },
+          L.supportOutbox.replace("{pending}", outbox.pending || 0).replace("{failed}", outbox.failed || 0))
+      : null,
+    note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
+    error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    connected
+      ? h(
+          "div",
+          { className: "scalio-support-conn-actions" },
+          h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "support-connection-check",
+            onClick: () => run(() => client.check(), L.supportChecked) }, L.supportCheck),
+          h("button", { type: "button", className: "scalio-btn scalio-btn-danger", disabled: busy, "data-testid": "support-connection-remove",
+            onClick: () => (typeof window === "undefined" || window.confirm(L.supportRemoveConfirm)) && run(() => client.disconnect(), L.supportRemoved) },
+            L.supportRemove)
+        )
+      : h(
+          "form",
+          { className: "scalio-support-form", onSubmit: (e) => { e.preventDefault(); run(() => client.connect(portal.trim(), code.trim()), L.supportConnected); } },
+          h("label", { className: "scalio-field-label", htmlFor: "support-portal" }, L.supportPortal),
+          h("input", { id: "support-portal", className: "scalio-input", placeholder: "https://portal.scaliocloud.com", value: portal, required: true,
+            onChange: (e) => setPortal(e.target.value), "data-testid": "support-portal-input" }),
+          h("label", { className: "scalio-field-label", htmlFor: "support-code" }, L.supportCode),
+          h("input", { id: "support-code", className: "scalio-input", placeholder: "spc_…", value: code, required: true,
+            onChange: (e) => setCode(e.target.value), "data-testid": "support-code-input" }),
+          h("button", { type: "submit", className: "scalio-btn-primary", disabled: busy, "data-testid": "support-connect-btn" }, L.supportConnect)
+        )
+  );
+}
+
+module.exports = { supportApi, SupportDesk, SupportConnection, SUPPORT_CATEGORIES: CATEGORIES };