@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/shop/OrdersTab.js

@@ -1,13 +1,15 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { collection, getDocs, limit, onSnapshot, orderBy, query, where } from "firebase/firestore";
+import { collection, doc, getDoc, getDocs, limit, onSnapshot, orderBy, query, where } from "firebase/firestore";
 import { getDb } from "../../firebase/client.js";
 import { formatCents, orderRegelNaam } from "../../schema/shop.js";
 import { Badge, Button, Card, Field, Input, Textarea } from "../ui/primitives.js";
 import { Select } from "../ui/select.js";
 import { Switch } from "../ui/switch.js";
 import { useToast } from "../ui/toast.js";
+import { FoutMelding } from "../ui/LaadStaat.js";
+import { neemOpenVerzoek } from "../navContext.js";
 import { useConfirm } from "../ui/ConfirmDialog.js";
 import { Dialog, DialogContent, DialogClose } from "../ui/dialog.js";
 import { ORDER_STATUS_LABELS, centsToEuroInput, eurosToCents, shopCallable } from "./lib.js";
@@ -31,7 +33,7 @@ function OrdersTab({ siteId }) {
   const { toast } = useToast();
   const confirm = useConfirm();
   const [orders, setOrders] = useState([]);
-  const [selected, setSelected] = useState(null);
+  const [selected, setSelected] = useState(() => neemOpenVerzoek("shop"));
   const [filter, setFilter] = useState("all");
   const [search, setSearch] = useState("");
   const [busy, setBusy] = useState(false);
@@ -62,10 +64,10 @@ function OrdersTab({ siteId }) {
       (snap) => setProducten(
         snap.docs.map((d) => ({ id: d.id, ...d.data() })).sort((a, b) => a.name.localeCompare(b.name, "nl"))
       )
-    );
+    ).catch((e) => console.warn("[xicms] lezen mislukt:", e.message));
     void getDocs(collection(db, "sites", siteId, "shopCategories")).then(
       (snap) => setCatNamen(Object.fromEntries(snap.docs.map((d) => [d.id, String(d.data().name ?? d.id)])))
-    );
+    ).catch((e) => console.warn("[xicms] lezen mislukt:", e.message));
   }, [manualOpen, producten.length, siteId]);
   const productLabel = (p) => {
     const cat = catNamen[p.categoryIds?.[0] ?? ""];
@@ -73,14 +75,21 @@ function OrdersTab({ siteId }) {
   };
   const [trackingUrl, setTrackingUrl] = useState("");
   const [notify, setNotify] = useState(true);
+  const [laadFout, setLaadFout] = useState(null);
+  const [poging, setPoging] = useState(0);
   useEffect(() => {
     const db = getDb();
     if (!db) return;
     return onSnapshot(
       query(collection(db, "sites", siteId, "orders"), orderBy("createdAt", "desc"), limit(300)),
-      (snap) => setOrders(snap.docs.map((d) => ({ id: d.id, ...d.data() })))
+      (snap) => {
+        setOrders(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
+        setLaadFout(null);
+      },
+      // 8.1: een lees-/rechtenfout toonde stil "geen bestellingen".
+      (e) => setLaadFout(e.message)
     );
-  }, [siteId]);
+  }, [siteId, poging]);
   const stats = useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     const startToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
@@ -106,6 +115,26 @@ function OrdersTab({ siteId }) {
     return list;
   }, [orders, filter, search]);
   const current = orders.find((o) => o.id === selected) ?? null;
+  const [slugs, setSlugs] = useState({});
+  const [detailPath, setDetailPath] = useState("/product");
+  useEffect(() => {
+    const db = getDb();
+    if (!db || !current) return;
+    const ids = [...new Set(current.items.map((i) => i.productId).filter((x) => !!x))];
+    void Promise.all(ids.map((id) => getDoc(doc(db, "sites", siteId, "products", id)))).then(
+      (snaps) => setSlugs((p) => ({ ...p, ...Object.fromEntries(snaps.filter((x) => x.exists()).map((x) => [x.id, String(x.data()?.slug ?? "")])) }))
+    ).catch(() => void 0);
+    void getDoc(doc(db, "sites", siteId, "settings", "public")).then((snap) => {
+      const entry = snap.data()?.modules?.shop;
+      const dp = typeof entry === "object" && entry !== null ? entry.config?.detailPath : void 0;
+      if (dp) setDetailPath(dp);
+    }).catch(() => void 0);
+  }, [current?.id, siteId]);
+  const productHref = (i) => {
+    const slug = i.productId ? slugs[i.productId] : "";
+    if (!slug) return null;
+    return `${detailPath}?p=${encodeURIComponent(slug)}${i.variantKey ? `&v=${encodeURIComponent(i.variantKey)}` : ""}`;
+  };
   useEffect(() => {
     const o = orders.find((x) => x.id === selected);
     setNoteInput(o?.adminNote ?? "");
@@ -401,6 +430,10 @@ function OrdersTab({ siteId }) {
     URL.revokeObjectURL(a.href);
   }
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+    laadFout && /* @__PURE__ */ jsx(FoutMelding, { wat: "de bestellingen", detail: laadFout, opnieuw: () => {
+      setLaadFout(null);
+      setPoging((n) => n + 1);
+    } }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: [
       { label: "Vandaag", value: String(stats.today) },
       { label: "Deze week", value: String(stats.week) },
@@ -441,7 +474,7 @@ function OrdersTab({ siteId }) {
                     /* @__PURE__ */ jsx("span", { className: "truncate", children: o.customer.name }),
                     /* @__PURE__ */ jsx("span", { children: formatCents(o.amount.totalCents) })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: fmtDate(o.createdAt) })
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: fmtDate(o.createdAt) })
                 ]
               }
             ) }, o.id);
@@ -487,7 +520,7 @@ function OrdersTab({ siteId }) {
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Verzendadres" }),
+            /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: current.pickup ? "Afhalen" : "Verzendadres" }),
             current.shipping ? /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
               current.shipping.address,
               /* @__PURE__ */ jsx("br", {}),
@@ -497,7 +530,7 @@ function OrdersTab({ siteId }) {
               " (",
               current.shipping.country,
               ")"
-            ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Geen verzending (donatie)." }),
+            ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: current.pickup ? "Afhalen \u2014 geen verzending." : "Geen verzending (donatie)." }),
             current.trackingUrl && /* @__PURE__ */ jsx("a", { className: "text-sm text-brand-700 underline", href: current.trackingUrl, target: "_blank", rel: "noreferrer", children: "Track & trace \u2197" })
           ] }),
           current.billing && /* @__PURE__ */ jsxs("div", { children: [
@@ -547,7 +580,7 @@ function OrdersTab({ siteId }) {
               m.subject,
               m.automatisch && /* @__PURE__ */ jsx(Badge, { tone: m.mislukt ? "amber" : "slate", children: m.mislukt ? "mislukt" : "automatisch" })
             ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: new Date(m.at).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: new Date(m.at).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) }),
             /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap text-slate-600", children: m.body })
           ] }, i)) })
         ] }),
@@ -557,8 +590,12 @@ function OrdersTab({ siteId }) {
             current.items.map((i, idx) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-slate-100 align-top", children: [
               /* @__PURE__ */ jsxs("td", { className: "py-1 pr-2", children: [
                 i.qty,
-                "\xD7 ",
-                orderRegelNaam(i),
+                "\xD7",
+                " ",
+                productHref(i) ? /* @__PURE__ */ jsxs("a", { className: "text-brand-700 underline", href: productHref(i), target: "_blank", rel: "noreferrer", children: [
+                  orderRegelNaam(i),
+                  " \u2197"
+                ] }) : orderRegelNaam(i),
                 i.variantKey && /* @__PURE__ */ jsxs("span", { className: "text-slate-500", children: [
                   " (",
                   i.variantKey.split("|").join(" \xB7 "),
@@ -609,7 +646,7 @@ function OrdersTab({ siteId }) {
         ] }) : current.mail?.confirmationSentAt ? (
           /* Geslaagde verzending werd wél vastgelegd maar nergens getoond: je zag alleen
              iets bij een FOUT, en moest dus maar aannemen dat de mail was aangekomen. */
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-400", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-500", children: [
             "Bevestigingsmail verstuurd op ",
             fmtDate(current.mail.confirmationSentAt)
           ] })
@@ -715,7 +752,7 @@ function OrdersTab({ siteId }) {
                   placeholder: "Uitvoering\u2026",
                   options: varianten.map((v) => ({ value: v.key, label: v.key.split("|").join(", ") }))
                 }
-              ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "\u2014" }),
+              ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: "\u2014" }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -743,7 +780,7 @@ function OrdersTab({ siteId }) {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
-        /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => void createManual(), children: busy ? "Bezig\u2026" : "Bestelling aanmaken" })
+        /* @__PURE__ */ jsx(Button, { loading: busy, disabled: busy, onClick: () => void createManual(), children: "Bestelling aanmaken" })
       ] })
     ] }) }) }),
     /* @__PURE__ */ jsx(Dialog, { open: editOpen, onOpenChange: setEditOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: current ? `Bestelling ${current.number} bewerken` : "Bestelling bewerken", width: "min(92vw, 44rem)", children: current && /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
@@ -782,7 +819,7 @@ function OrdersTab({ siteId }) {
                     placeholder: "Uitvoering\u2026",
                     options: varianten.map((v) => ({ value: v.key, label: v.key.split("|").join(", ") }))
                   }
-                ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "\u2014" }),
+                ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: "\u2014" }),
                 /* @__PURE__ */ jsx(
                   Input,
                   {
@@ -805,7 +842,7 @@ function OrdersTab({ siteId }) {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
-        /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => void saveEdit(current), children: busy ? "Bezig\u2026" : "Opslaan" })
+        /* @__PURE__ */ jsx(Button, { loading: busy, disabled: busy, onClick: () => void saveEdit(current), children: "Opslaan" })
       ] })
     ] }) }) }),
     /* @__PURE__ */ jsx(Dialog, { open: mailOpen, onOpenChange: setMailOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: current ? `Mail ${current.customer.name}` : "Klant mailen", width: "min(92vw, 34rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
@@ -819,7 +856,7 @@ function OrdersTab({ siteId }) {
       /* @__PURE__ */ jsx(Switch, { checked: mailCopy, onCheckedChange: setMailCopy, label: "Kopie naar mijzelf" }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
-        /* @__PURE__ */ jsx(Button, { disabled: busy || !mailSubject.trim() || !mailBody.trim(), onClick: () => current && void mailKlant(current), children: busy ? "Bezig\u2026" : "Versturen" })
+        /* @__PURE__ */ jsx(Button, { loading: busy, disabled: busy || !mailSubject.trim() || !mailBody.trim(), onClick: () => current && void mailKlant(current), children: "Versturen" })
       ] })
     ] }) }) }),
     /* @__PURE__ */ jsx(Dialog, { open: refundOpen, onOpenChange: setRefundOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: current ? `Terugbetalen \u2014 ${current.number}` : "Terugbetalen", width: "min(92vw, 26rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
@@ -838,6 +875,7 @@ function OrdersTab({ siteId }) {
         /* @__PURE__ */ jsx(
           Button,
           {
+            loading: busy,
             variant: "danger",
             disabled: busy,
             onClick: () => {
@@ -849,7 +887,7 @@ function OrdersTab({ siteId }) {
               }
               void refund(current, Math.min(cents, openstaand(current)));
             },
-            children: busy ? "Bezig\u2026" : "Terugbetalen"
+            children: "Terugbetalen"
           }
         )
       ] })