@btst/stack 5.1.0 → 5.2.0

package/dist/packages/stack/src/plugins/newsletter/client/components/pages/subscribers-page.internal.cjs

@@ -0,0 +1,503 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const input = require('../../../../../../../ui/src/components/input.cjs');
+const textarea = require('../../../../../../../ui/src/components/textarea.cjs');
+const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
+const plugins_newsletter_client_hooks_index = require('../../../../../../../../plugins/newsletter/client/hooks/index.cjs');
+const plugins_newsletter_permissions = require('../../../../../../../../plugins/newsletter/permissions.cjs');
+const constants = require('../../constants.cjs');
+const shared = require('../shared.cjs');
+
+function SubscribersPage() {
+  const id = React.useId();
+  const [query, setQuery] = React.useState("");
+  const [status, setStatus] = React.useState("");
+  const [tag, setTag] = React.useState("");
+  const [offset, setOffset] = React.useState(0);
+  const [editing, setEditing] = React.useState();
+  const [deleting, setDeleting] = React.useState();
+  const [importing, setImporting] = React.useState(false);
+  const [message, setMessage] = React.useState("");
+  const [error, setError] = React.useState("");
+  const { data } = plugins_newsletter_client_hooks_index.useSubscribers({
+    query: query || void 0,
+    status: status || void 0,
+    tag: tag || void 0,
+    offset,
+    limit: 25
+  });
+  const formRef = React.useRef(null);
+  React.useEffect(() => {
+    if (editing !== void 0)
+      formRef.current?.querySelector("input")?.focus();
+  }, [editing]);
+  const create = plugins_newsletter_client_hooks_index.useCreateSubscriber();
+  const update = plugins_newsletter_client_hooks_index.useUpdateSubscriber();
+  const remove = plugins_newsletter_client_hooks_index.useDeleteSubscriber();
+  const importCSV = plugins_newsletter_client_hooks_index.useImportSubscribers();
+  const exportCSV = plugins_newsletter_client_hooks_index.useSubscriberExport();
+  const { localization } = context.usePluginOverrides(constants.NEWSLETTER_PLUGIN_ID);
+  const pending = create.isPending || update.isPending || remove.isPending || importCSV.isPending || exportCSV.isFetching;
+  const run = async (action) => {
+    setError("");
+    setMessage("");
+    try {
+      await action();
+    } catch (caught) {
+      setError(
+        caught instanceof Error ? caught.message : "The subscriber change failed. Try again."
+      );
+    }
+  };
+  const save = (event) => {
+    event.preventDefault();
+    const fields = new FormData(event.currentTarget);
+    const input = {
+      email: String(fields.get("email")),
+      name: String(fields.get("name") || ""),
+      tags: String(fields.get("tags") || "").split(",").map((tag2) => tag2.trim()).filter(Boolean),
+      status: String(fields.get("status"))
+    };
+    void run(async () => {
+      if (editing) await update.mutateAsync({ id: editing.id, data: input });
+      else await create.mutateAsync(input);
+      setEditing(void 0);
+      setMessage("Subscriber saved");
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    shared.NewsletterPage,
+    {
+      title: localization?.subscribers ?? "Subscribers",
+      description: "Keep your audience up to date. Target a campaign with the tags you assign here.",
+      action: /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: plugins_newsletter_permissions.newsletterPermissions.subscriber.create(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              onClick: () => {
+                setEditing(null);
+                setImporting(false);
+              },
+              children: "Add subscriber"
+            }
+          )
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: plugins_newsletter_permissions.newsletterPermissions.analytics.read(), children: /* @__PURE__ */ jsxRuntime.jsx(SubscriberGrowthSection, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            context.PermissionAccess,
+            {
+              permission: plugins_newsletter_permissions.newsletterPermissions.subscriber.import(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  disabled: pending,
+                  onClick: () => {
+                    setImporting(!importing);
+                    setEditing(void 0);
+                  },
+                  children: "Import CSV"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            context.PermissionAccess,
+            {
+              permission: plugins_newsletter_permissions.newsletterPermissions.subscriber.export(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  disabled: pending,
+                  onClick: () => void run(async () => {
+                    const result = await exportCSV.refetch();
+                    if (result.error) throw result.error;
+                    const csv = result.data?.csv;
+                    if (csv === void 0)
+                      throw new Error("CSV could not be exported. Try again.");
+                    const url = URL.createObjectURL(
+                      new Blob([csv], { type: "text/csv;charset=utf-8" })
+                    );
+                    const anchor = document.createElement("a");
+                    anchor.href = url;
+                    anchor.download = "subscribers.csv";
+                    anchor.click();
+                    URL.revokeObjectURL(url);
+                    setMessage("Subscribers exported");
+                  }),
+                  children: "Export CSV"
+                }
+              )
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }),
+        message && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: "text-sm", children: message }),
+        editing !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            ref: formRef,
+            className: "space-y-5 rounded-lg border p-5",
+            onSubmit: save,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-medium", children: editing ? "Edit subscriber" : "Add subscriber" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-email`, label: "Email", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  input.Input,
+                  {
+                    id: `${id}-email`,
+                    name: "email",
+                    type: "email",
+                    required: true,
+                    maxLength: 254,
+                    defaultValue: editing?.email
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-name`, label: "Name", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  input.Input,
+                  {
+                    id: `${id}-name`,
+                    name: "name",
+                    maxLength: 200,
+                    defaultValue: editing?.name ?? ""
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  shared.Field,
+                  {
+                    id: `${id}-tags`,
+                    label: "Tags",
+                    hint: "Separate tags with commas.",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      input.Input,
+                      {
+                        id: `${id}-tags`,
+                        name: "tags",
+                        defaultValue: editing?.tags.join(", ")
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-status`, label: "Status", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
+                  {
+                    id: `${id}-status`,
+                    name: "status",
+                    className: shared.selectClass,
+                    defaultValue: editing?.status ?? "subscribed",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "subscribed", children: "Subscribed" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unsubscribed", children: "Unsubscribed" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "bounced", children: "Bounced" })
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: pending, children: "Save subscriber" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    onClick: () => setEditing(void 0),
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ]
+          },
+          editing?.id ?? "new"
+        ),
+        importing && /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            className: "space-y-4 rounded-lg border p-5",
+            onSubmit: (event) => {
+              event.preventDefault();
+              const csv = String(new FormData(event.currentTarget).get("csv"));
+              void run(async () => {
+                const result = await importCSV.mutateAsync(csv);
+                setMessage(`${result.imported} subscribers imported`);
+                setImporting(false);
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                shared.Field,
+                {
+                  id: `${id}-csv`,
+                  label: "CSV data",
+                  hint: "Use email, name, status and tags columns. Tags are a JSON array in a quoted CSV cell.",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    textarea.Textarea,
+                    {
+                      id: `${id}-csv`,
+                      name: "csv",
+                      rows: 6,
+                      required: true,
+                      placeholder: "email,name,status,tags\nreader@example.com,Alex,subscribed,"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: pending, children: "Import subscribers" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-search`, label: "Search subscribers", children: /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              id: `${id}-search`,
+              type: "search",
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOffset(0);
+              },
+              placeholder: "Email or name"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-filter-status`, label: "Filter by status", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: `${id}-filter-status`,
+              className: shared.selectClass,
+              value: status,
+              onChange: (e) => {
+                setStatus(e.target.value);
+                setOffset(0);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All statuses" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "subscribed", children: "Subscribed" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unsubscribed", children: "Unsubscribed" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "bounced", children: "Bounced" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-filter-tag`, label: "Filter by tag", children: /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              id: `${id}-filter-tag`,
+              value: tag,
+              onChange: (e) => {
+                setTag(e.target.value);
+                setOffset(0);
+              },
+              placeholder: "Any tag"
+            }
+          ) })
+        ] }),
+        data.items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-muted-foreground", children: "No subscribers match. Add a subscriber or adjust your filters." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full min-w-[650px] text-left text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: "Newsletter subscribers" }),
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "border-b bg-muted/40", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 font-medium", children: "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 font-medium", children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 font-medium", children: "Tags" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "p-4 font-medium", children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.items.map((subscriber) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b last:border-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "p-4", children: [
+              subscriber.email,
+              subscriber.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: subscriber.name })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(shared.Status, { value: subscriber.status }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4", children: subscriber.tags.join(", ") || "\u2014" }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.PermissionAccess,
+                {
+                  permission: plugins_newsletter_permissions.newsletterPermissions.subscriber.update({
+                    subscriberId: subscriber.id,
+                    status: subscriber.status
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      size: "sm",
+                      className: "min-h-11",
+                      variant: "outline",
+                      "aria-label": `Edit ${subscriber.email}`,
+                      onClick: () => {
+                        setEditing(subscriber);
+                        setImporting(false);
+                      },
+                      children: "Edit"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.PermissionAccess,
+                {
+                  permission: plugins_newsletter_permissions.newsletterPermissions.subscriber.delete({
+                    subscriberId: subscriber.id,
+                    status: subscriber.status
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      size: "sm",
+                      className: "min-h-11",
+                      variant: "outline",
+                      "aria-label": `Delete ${subscriber.email}`,
+                      disabled: pending,
+                      onClick: () => setDeleting(subscriber),
+                      children: "Delete"
+                    }
+                  )
+                }
+              )
+            ] }) })
+          ] }, subscriber.id)) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(shared.Pagination, { offset, total: data.total, onChange: setOffset }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialog,
+          {
+            open: !!deleting,
+            onOpenChange: (open) => {
+              if (!open) setDeleting(void 0);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete subscriber?" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogDescription, { children: [
+                  deleting?.email,
+                  " will be removed from your subscriber list."
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  alertDialog.AlertDialogAction,
+                  {
+                    onClick: () => {
+                      const subscriber = deleting;
+                      if (subscriber)
+                        void run(async () => {
+                          await remove.mutateAsync(subscriber.id);
+                          setMessage("Subscriber deleted");
+                          if (data.items.length === 1 && offset > 0)
+                            setOffset(offset - 25);
+                        });
+                    },
+                    children: "Delete subscriber"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function SubscriberGrowthSection() {
+  const { data: growth } = plugins_newsletter_client_hooks_index.useSubscriberGrowth();
+  return /* @__PURE__ */ jsxRuntime.jsx(SubscriberGrowthChart, { growth });
+}
+function SubscriberGrowthChart({ growth }) {
+  const max = Math.max(1, ...growth.points.map((point) => point.count));
+  const points = growth.points.map(
+    (point, index) => `${growth.points.length === 1 ? 300 : 20 + index / (growth.points.length - 1) * 560},${130 - point.count / max * 110}`
+  ).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-labelledby": "newsletter-growth-title",
+      className: "grid gap-6 border-b pb-6 sm:grid-cols-[1fr_2fr]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "newsletter-growth-title", className: "text-lg font-medium", children: "Subscriber growth" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-3xl font-semibold tabular-nums", children: [
+            growth.total.toLocaleString(),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-normal text-muted-foreground", children: "total subscribers" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            growth.subscribed,
+            " subscribed, ",
+            growth.unsubscribed,
+            " unsubscribed,",
+            " ",
+            growth.bounced,
+            " bounced"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: growth.points.length ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 600 150",
+              role: "img",
+              "aria-label": "Cumulative subscribers over time",
+              className: "h-32 w-full text-primary",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Cumulative subscribers over time" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: "20",
+                    y1: "130",
+                    x2: "580",
+                    y2: "130",
+                    stroke: "currentColor",
+                    opacity: "0.2"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "polyline",
+                  {
+                    points,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3"
+                  }
+                ),
+                growth.points.length === 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "300",
+                    cy: 130 - growth.points[0].count / max * 110,
+                    r: "4",
+                    fill: "currentColor"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: growth.points[0]?.date }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: growth.points.at(-1)?.date })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer", children: "View growth data" }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: growth.points.map((point) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+              point.date,
+              ": ",
+              point.count,
+              " subscribers"
+            ] }, point.date)) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-sm text-muted-foreground", children: "Growth appears after your first subscriber joins." }) })
+      ]
+    }
+  );
+}
+
+exports.SubscribersPage = SubscribersPage;