@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/newsletters/audience/contacts.js

@@ -0,0 +1,99 @@
+const AUDIENCE_HREF = "/admin/newsletters/audience";
+const contactHref = (id) => `${AUDIENCE_HREF}/${id}`;
+const GROUPS = [
+  { id: "", label: "All", title: "All contacts", count: "all" },
+  {
+    id: "subscribed",
+    label: "Subscribed",
+    title: "Subscribed",
+    count: "subscribed"
+  },
+  {
+    id: "unsubscribed",
+    label: "Unsubscribed",
+    title: "Unsubscribed",
+    count: "unsubscribed"
+  },
+  { id: "bounced", label: "Bounced", title: "Bounced", count: "bounced" },
+  {
+    id: "not_emailable",
+    label: "Not emailable",
+    title: "Not emailable",
+    count: "notEmailable"
+  }
+];
+const groupFromParam = (value) => GROUPS.find((group) => group.id === value) ?? GROUPS[0];
+const groupTabs = (counts) => GROUPS.map((group) => ({
+  id: group.id || "all",
+  label: group.label,
+  count: counts?.[group.count]
+}));
+const groupOfTab = (tab) => groupFromParam(tab === "all" ? "" : tab).id;
+const CONTACT_STATUS = {
+  subscribed: { key: "active", label: "Subscribed", quiet: true },
+  unsubscribed: { key: "cancelled", label: "Unsubscribed", quiet: true },
+  bounced: { key: "failed", label: "Bounced", quiet: true },
+  unverified: { key: "pending", label: "Unverified", quiet: true },
+  inactive: { key: "inactive", label: "Inactive", quiet: true }
+};
+const SOURCE_LABEL = {
+  account: "Merchant account",
+  manual: "Added by hand",
+  import: "Imported"
+};
+const SOURCE_OPTIONS = [
+  { value: "", label: "All sources" },
+  ...Object.keys(SOURCE_LABEL).map((value) => ({
+    value,
+    label: SOURCE_LABEL[value]
+  }))
+];
+const sourceFromValue = (value) => Object.keys(SOURCE_LABEL).find((s) => s === value);
+const VIA_LABEL = {
+  link: "Link in the email",
+  mailbox: "Unsubscribe button in their mailbox",
+  admin: "By an admin"
+};
+function contactsQuery(filter, paging) {
+  const qs = new URLSearchParams();
+  const search = filter.search?.trim();
+  if (filter.status) qs.set("status", filter.status);
+  if (filter.source) qs.set("source", filter.source);
+  if (search) qs.set("search", search);
+  if (paging) {
+    qs.set("page", String(paging.page));
+    qs.set("limit", String(paging.limit));
+  }
+  const text = qs.toString();
+  return text ? `?${text}` : "";
+}
+function statusReason(c) {
+  switch (c.status) {
+    case "unsubscribed":
+      return "They asked to stop getting newsletters.";
+    case "bounced":
+      return "An email to this address could not be delivered.";
+    case "unverified":
+      return "Their merchant account has not confirmed this email yet.";
+    case "inactive":
+      return "Their merchant account is closed or suspended.";
+    default:
+      return c.source === "account" ? "They have a merchant account with a confirmed email." : "An admin added them and recorded that they agreed to email.";
+  }
+}
+export {
+  AUDIENCE_HREF,
+  CONTACT_STATUS,
+  GROUPS,
+  SOURCE_LABEL,
+  SOURCE_OPTIONS,
+  VIA_LABEL,
+  contactHref,
+  contactsQuery,
+  groupFromParam,
+  groupOfTab,
+  groupTabs,
+  sourceFromValue,
+  statusReason
+};
+//# sourceMappingURL=contacts.js.map

package/dist/admin/newsletters/audience/contacts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/newsletters/audience/contacts.ts"],"sourcesContent":["import type {\n  Contact,\n  ContactCounts,\n  ContactSource,\n  ContactStatus,\n  UnsubscribedVia,\n} from '@withpotter/lib/admin-newsletter-contacts-api';\n\nexport const AUDIENCE_HREF = '/admin/newsletters/audience';\nexport const contactHref = (id: string) => `${AUDIENCE_HREF}/${id}`;\n\n/** What `?status=` may hold: one status, or unverified and inactive together. */\nexport type GroupId =\n  | ''\n  | 'subscribed'\n  | 'unsubscribed'\n  | 'bounced'\n  | 'not_emailable';\n\n/** The groups of the audience, in the order their tabs stand. */\nexport const GROUPS: ReadonlyArray<{\n  id: GroupId;\n  label: string;\n  title: string;\n  count: keyof ContactCounts;\n}> = [\n  { id: '', label: 'All', title: 'All contacts', count: 'all' },\n  {\n    id: 'subscribed',\n    label: 'Subscribed',\n    title: 'Subscribed',\n    count: 'subscribed',\n  },\n  {\n    id: 'unsubscribed',\n    label: 'Unsubscribed',\n    title: 'Unsubscribed',\n    count: 'unsubscribed',\n  },\n  { id: 'bounced', label: 'Bounced', title: 'Bounced', count: 'bounced' },\n  {\n    id: 'not_emailable',\n    label: 'Not emailable',\n    title: 'Not emailable',\n    count: 'notEmailable',\n  },\n];\n\n/** The group `?status=` names; All when it is missing or unknown. */\nexport const groupFromParam = (value: string | null | undefined) =>\n  GROUPS.find((group) => group.id === value) ?? GROUPS[0];\n\n/** The tab strip: every group, with its count once the counts are in. */\nexport const groupTabs = (counts: ContactCounts | undefined) =>\n  GROUPS.map((group) => ({\n    id: group.id || 'all',\n    label: group.label,\n    count: counts?.[group.count],\n  }));\n\n/** A tab's id back to the group's `?status=` value. */\nexport const groupOfTab = (tab: string) =>\n  groupFromParam(tab === 'all' ? '' : tab).id;\n\n/**\n * How each status reads in `StatusBadge`. None of them asks for anyone, so\n * all are stated quietly: the word carries it, not a colour.\n */\nexport const CONTACT_STATUS: Record<\n  ContactStatus,\n  { key: string; label: string; quiet: boolean }\n> = {\n  subscribed: { key: 'active', label: 'Subscribed', quiet: true },\n  unsubscribed: { key: 'cancelled', label: 'Unsubscribed', quiet: true },\n  bounced: { key: 'failed', label: 'Bounced', quiet: true },\n  unverified: { key: 'pending', label: 'Unverified', quiet: true },\n  inactive: { key: 'inactive', label: 'Inactive', quiet: true },\n};\n\nexport const SOURCE_LABEL: Record<ContactSource, string> = {\n  account: 'Merchant account',\n  manual: 'Added by hand',\n  import: 'Imported',\n};\n\nexport const SOURCE_OPTIONS = [\n  { value: '', label: 'All sources' },\n  ...(Object.keys(SOURCE_LABEL) as ContactSource[]).map((value) => ({\n    value,\n    label: SOURCE_LABEL[value],\n  })),\n];\n\nexport const sourceFromValue = (value: string): ContactSource | undefined =>\n  (Object.keys(SOURCE_LABEL) as ContactSource[]).find((s) => s === value);\n\nexport const VIA_LABEL: Record<UnsubscribedVia, string> = {\n  link: 'Link in the email',\n  mailbox: 'Unsubscribe button in their mailbox',\n  admin: 'By an admin',\n};\n\n/** The query string of a contacts request; empty filters are left out. */\nexport function contactsQuery(\n  filter: { status?: GroupId; source?: ContactSource; search?: string },\n  paging?: { page: number; limit: number },\n) {\n  const qs = new URLSearchParams();\n  const search = filter.search?.trim();\n\n  if (filter.status) qs.set('status', filter.status);\n  if (filter.source) qs.set('source', filter.source);\n  if (search) qs.set('search', search);\n\n  if (paging) {\n    qs.set('page', String(paging.page));\n    qs.set('limit', String(paging.limit));\n  }\n\n  const text = qs.toString();\n\n  return text ? `?${text}` : '';\n}\n\n/** Why a contact has the status it has, in one plain sentence. */\nexport function statusReason(c: Pick<Contact, 'status' | 'source'>) {\n  switch (c.status) {\n    case 'unsubscribed':\n      return 'They asked to stop getting newsletters.';\n    case 'bounced':\n      return 'An email to this address could not be delivered.';\n    case 'unverified':\n      return 'Their merchant account has not confirmed this email yet.';\n    case 'inactive':\n      return 'Their merchant account is closed or suspended.';\n    default:\n      return c.source === 'account'\n        ? 'They have a merchant account with a confirmed email.'\n        : 'An admin added them and recorded that they agreed to email.';\n  }\n}\n"],"mappings":"AAQO,MAAM,gBAAgB;AACtB,MAAM,cAAc,CAAC,OAAe,GAAG,aAAa,IAAI,EAAE;AAW1D,MAAM,SAKR;AAAA,EACH,EAAE,IAAI,IAAI,OAAO,OAAO,OAAO,gBAAgB,OAAO,MAAM;AAAA,EAC5D;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,WAAW,OAAO,UAAU;AAAA,EACtE;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAGO,MAAM,iBAAiB,CAAC,UAC7B,OAAO,KAAK,CAAC,UAAU,MAAM,OAAO,KAAK,KAAK,OAAO,CAAC;AAGjD,MAAM,YAAY,CAAC,WACxB,OAAO,IAAI,CAAC,WAAW;AAAA,EACrB,IAAI,MAAM,MAAM;AAAA,EAChB,OAAO,MAAM;AAAA,EACb,OAAO,SAAS,MAAM,KAAK;AAC7B,EAAE;AAGG,MAAM,aAAa,CAAC,QACzB,eAAe,QAAQ,QAAQ,KAAK,GAAG,EAAE;AAMpC,MAAM,iBAGT;AAAA,EACF,YAAY,EAAE,KAAK,UAAU,OAAO,cAAc,OAAO,KAAK;AAAA,EAC9D,cAAc,EAAE,KAAK,aAAa,OAAO,gBAAgB,OAAO,KAAK;AAAA,EACrE,SAAS,EAAE,KAAK,UAAU,OAAO,WAAW,OAAO,KAAK;AAAA,EACxD,YAAY,EAAE,KAAK,WAAW,OAAO,cAAc,OAAO,KAAK;AAAA,EAC/D,UAAU,EAAE,KAAK,YAAY,OAAO,YAAY,OAAO,KAAK;AAC9D;AAEO,MAAM,eAA8C;AAAA,EACzD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,iBAAiB;AAAA,EAC5B,EAAE,OAAO,IAAI,OAAO,cAAc;AAAA,EAClC,GAAI,OAAO,KAAK,YAAY,EAAsB,IAAI,CAAC,WAAW;AAAA,IAChE;AAAA,IACA,OAAO,aAAa,KAAK;AAAA,EAC3B,EAAE;AACJ;AAEO,MAAM,kBAAkB,CAAC,UAC7B,OAAO,KAAK,YAAY,EAAsB,KAAK,CAAC,MAAM,MAAM,KAAK;AAEjE,MAAM,YAA6C;AAAA,EACxD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAGO,SAAS,cACd,QACA,QACA;AACA,QAAM,KAAK,IAAI,gBAAgB;AAC/B,QAAM,SAAS,OAAO,QAAQ,KAAK;AAEnC,MAAI,OAAO,OAAQ,IAAG,IAAI,UAAU,OAAO,MAAM;AACjD,MAAI,OAAO,OAAQ,IAAG,IAAI,UAAU,OAAO,MAAM;AACjD,MAAI,OAAQ,IAAG,IAAI,UAAU,MAAM;AAEnC,MAAI,QAAQ;AACV,OAAG,IAAI,QAAQ,OAAO,OAAO,IAAI,CAAC;AAClC,OAAG,IAAI,SAAS,OAAO,OAAO,KAAK,CAAC;AAAA,EACtC;AAEA,QAAM,OAAO,GAAG,SAAS;AAEzB,SAAO,OAAO,IAAI,IAAI,KAAK;AAC7B;AAGO,SAAS,aAAa,GAAuC;AAClE,UAAQ,EAAE,QAAQ;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,EAAE,WAAW,YAChB,yDACA;AAAA,EACR;AACF;","names":[]}

package/dist/admin/newsletters/audience/page.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { AudienceList } from "./audience-list";
+function Page() {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(AudienceList, {}) });
+}
+export {
+  Page as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/newsletters/audience/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/newsletters/audience/page.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\nimport { AudienceList } from './audience-list';\n\n/** `/admin/newsletters/audience`. The group reads `?status=`. */\nexport default function Page() {\n  return (\n    <Suspense>\n      <AudienceList />\n    </Suspense>\n  );\n}\n"],"mappings":";AASM;AAPN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAGd,SAAR,OAAwB;AAC7B,SACE,oBAAC,YACC,8BAAC,gBAAa,GAChB;AAEJ;","names":[]}

package/dist/admin/newsletters/audience/status-change.js

@@ -0,0 +1,53 @@
+const NOTE_MIN = 3;
+const NOTE_MAX = 500;
+function changeFor(c) {
+  if (c.status === "unsubscribed") return "resubscribe";
+  if (c.unsubscribedAt) return null;
+  return "unsubscribe";
+}
+function noteProblem(note) {
+  const length = note.trim().length;
+  if (length === 0) return "Write why, so the next person can see it.";
+  if (length < NOTE_MIN) return `Use at least ${NOTE_MIN} characters.`;
+  if (length > NOTE_MAX) return `Keep it to ${NOTE_MAX} characters or fewer.`;
+  return null;
+}
+const CHANGE_COPY = {
+  unsubscribe: {
+    action: "Unsubscribe",
+    title: (email) => `Unsubscribe ${email}?`,
+    effect: "This only stops newsletters. Receipts, password resets and security emails still reach them.",
+    noteLabel: "Why are you unsubscribing them?",
+    noteHint: "For example: asked by email on 12 Oct.",
+    done: "Unsubscribed",
+    failed: "Not unsubscribed"
+  },
+  resubscribe: {
+    action: "Resubscribe",
+    title: (email) => `Resubscribe ${email}?`,
+    effect: "They will get newsletters again. Only do this when the person asked for it.",
+    noteLabel: "What did they ask for?",
+    noteHint: "For example: asked by email on 12 Oct to be added back.",
+    done: "Resubscribed",
+    failed: "Not resubscribed"
+  }
+};
+function refusalLine(change, error) {
+  const { status, message } = error ?? {};
+  if (status === 404) {
+    return "This is not available on this environment yet.";
+  }
+  if (change === "resubscribe" && status === 409) {
+    return "This contact cannot be resubscribed: the address bounced, or its merchant account is unverified or inactive.";
+  }
+  return message || "The change was not saved.";
+}
+export {
+  CHANGE_COPY,
+  NOTE_MAX,
+  NOTE_MIN,
+  changeFor,
+  noteProblem,
+  refusalLine
+};
+//# sourceMappingURL=status-change.js.map

package/dist/admin/newsletters/audience/status-change.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/newsletters/audience/status-change.ts"],"sourcesContent":["import type { Contact } from '@withpotter/lib/admin-newsletter-contacts-api';\n\nexport type StatusChange = 'unsubscribe' | 'resubscribe';\n\nexport const NOTE_MIN = 3;\nexport const NOTE_MAX = 500;\n\n/**\n * What an admin may do to a contact by hand. Only someone who unsubscribed\n * can be brought back: a bounced address does not work, and an unverified or\n * inactive one follows its merchant account. Anyone not yet unsubscribed can be.\n */\nexport function changeFor(\n  c: Pick<Contact, 'status' | 'unsubscribedAt'>,\n): StatusChange | null {\n  if (c.status === 'unsubscribed') return 'resubscribe';\n  if (c.unsubscribedAt) return null;\n\n  return 'unsubscribe';\n}\n\n/** What is wrong with the note, or null when it can be sent. */\nexport function noteProblem(note: string) {\n  const length = note.trim().length;\n\n  if (length === 0) return 'Write why, so the next person can see it.';\n  if (length < NOTE_MIN) return `Use at least ${NOTE_MIN} characters.`;\n  if (length > NOTE_MAX) return `Keep it to ${NOTE_MAX} characters or fewer.`;\n\n  return null;\n}\n\n/** The words of each dialog. */\nexport const CHANGE_COPY: Record<\n  StatusChange,\n  {\n    action: string;\n    title: (email: string) => string;\n    effect: string;\n    noteLabel: string;\n    noteHint: string;\n    done: string;\n    failed: string;\n  }\n> = {\n  unsubscribe: {\n    action: 'Unsubscribe',\n    title: (email) => `Unsubscribe ${email}?`,\n    effect:\n      'This only stops newsletters. Receipts, password resets and security emails still reach them.',\n    noteLabel: 'Why are you unsubscribing them?',\n    noteHint: 'For example: asked by email on 12 Oct.',\n    done: 'Unsubscribed',\n    failed: 'Not unsubscribed',\n  },\n  resubscribe: {\n    action: 'Resubscribe',\n    title: (email) => `Resubscribe ${email}?`,\n    effect:\n      'They will get newsletters again. Only do this when the person asked for it.',\n    noteLabel: 'What did they ask for?',\n    noteHint: 'For example: asked by email on 12 Oct to be added back.',\n    done: 'Resubscribed',\n    failed: 'Not resubscribed',\n  },\n};\n\n/** A refusal from the API, in words. 409 is the one the contract names. */\nexport function refusalLine(change: StatusChange, error: unknown) {\n  const { status, message } = (error ?? {}) as {\n    status?: number;\n    message?: string;\n  };\n\n  if (status === 404) {\n    return 'This is not available on this environment yet.';\n  }\n\n  if (change === 'resubscribe' && status === 409) {\n    return 'This contact cannot be resubscribed: the address bounced, or its merchant account is unverified or inactive.';\n  }\n\n  return message || 'The change was not saved.';\n}\n"],"mappings":"AAIO,MAAM,WAAW;AACjB,MAAM,WAAW;AAOjB,SAAS,UACd,GACqB;AACrB,MAAI,EAAE,WAAW,eAAgB,QAAO;AACxC,MAAI,EAAE,eAAgB,QAAO;AAE7B,SAAO;AACT;AAGO,SAAS,YAAY,MAAc;AACxC,QAAM,SAAS,KAAK,KAAK,EAAE;AAE3B,MAAI,WAAW,EAAG,QAAO;AACzB,MAAI,SAAS,SAAU,QAAO,gBAAgB,QAAQ;AACtD,MAAI,SAAS,SAAU,QAAO,cAAc,QAAQ;AAEpD,SAAO;AACT;AAGO,MAAM,cAWT;AAAA,EACF,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO,CAAC,UAAU,eAAe,KAAK;AAAA,IACtC,QACE;AAAA,IACF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO,CAAC,UAAU,eAAe,KAAK;AAAA,IACtC,QACE;AAAA,IACF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAGO,SAAS,YAAY,QAAsB,OAAgB;AAChE,QAAM,EAAE,QAAQ,QAAQ,IAAK,SAAS,CAAC;AAKvC,MAAI,WAAW,KAAK;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,iBAAiB,WAAW,KAAK;AAC9C,WAAO;AAAA,EACT;AAEA,SAAO,WAAW;AACpB;","names":[]}

package/dist/admin/newsletters/audience/status-dialog.js

@@ -0,0 +1,103 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Banner,
+  Button,
+  FormDialog,
+  Textarea,
+  useToast
+} from "@withpotter/ui-kit";
+import {
+  CHANGE_COPY,
+  NOTE_MAX,
+  noteProblem,
+  refusalLine
+} from "./status-change";
+import { useStatusChange } from "./use-contacts";
+function StatusDialog({
+  open,
+  contact,
+  change,
+  onClose
+}) {
+  const copy = CHANGE_COPY[change];
+  const { toast } = useToast();
+  const mutation = useStatusChange(contact.id);
+  const [note, setNote] = useState("");
+  const [touched, setTouched] = useState(false);
+  const [refused, setRefused] = useState(null);
+  const problem = noteProblem(note);
+  const close = () => {
+    setNote("");
+    setTouched(false);
+    setRefused(null);
+    onClose();
+  };
+  const submit = async () => {
+    setTouched(true);
+    if (problem) return;
+    try {
+      await mutation.mutateAsync({ change, note });
+      toast({ title: `${copy.done}: ${contact.email}` });
+      close();
+    } catch (error) {
+      setRefused(refusalLine(change, error));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      title: copy.title(contact.email),
+      onClose: close,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: change === "unsubscribe" ? "danger" : "primary",
+            loading: mutation.isPending,
+            onClick: () => void submit(),
+            children: copy.action
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Banner, { tone: "info", children: copy.effect }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              label: copy.noteLabel,
+              rows: 3,
+              value: note,
+              maxLength: NOTE_MAX,
+              required: true,
+              "aria-invalid": touched && problem ? true : void 0,
+              "aria-describedby": "status-note-help",
+              onChange: (e) => {
+                setNote(e.target.value);
+                setRefused(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: "status-note-help",
+              role: touched && problem ? "alert" : void 0,
+              className: touched && problem ? "text-xs text-[var(--error)]" : "text-xs text-[var(--text-tertiary)]",
+              children: touched && problem ? problem : copy.noteHint
+            }
+          )
+        ] }),
+        refused && /* @__PURE__ */ jsx(Banner, { tone: "error", title: copy.failed, children: refused })
+      ] })
+    }
+  );
+}
+export {
+  StatusDialog
+};
+//# sourceMappingURL=status-dialog.js.map

package/dist/admin/newsletters/audience/status-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/newsletters/audience/status-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Banner,\n  Button,\n  FormDialog,\n  Textarea,\n  useToast,\n} from '@withpotter/ui-kit';\nimport type { Contact } from '@withpotter/lib/admin-newsletter-contacts-api';\nimport {\n  CHANGE_COPY,\n  NOTE_MAX,\n  noteProblem,\n  refusalLine,\n  type StatusChange,\n} from './status-change';\nimport { useStatusChange } from './use-contacts';\n\n/**\n * Unsubscribe or resubscribe one contact. Either needs a note saying why,\n * which is kept on the contact for the next person to read.\n */\nexport function StatusDialog({\n  open,\n  contact,\n  change,\n  onClose,\n}: {\n  open: boolean;\n  contact: Contact;\n  change: StatusChange;\n  onClose: () => void;\n}) {\n  const copy = CHANGE_COPY[change];\n  const { toast } = useToast();\n  const mutation = useStatusChange(contact.id);\n  const [note, setNote] = useState('');\n  const [touched, setTouched] = useState(false);\n  const [refused, setRefused] = useState<string | null>(null);\n  const problem = noteProblem(note);\n  const close = () => {\n    setNote('');\n    setTouched(false);\n    setRefused(null);\n    onClose();\n  };\n  const submit = async () => {\n    setTouched(true);\n\n    if (problem) return;\n\n    try {\n      await mutation.mutateAsync({ change, note });\n      toast({ title: `${copy.done}: ${contact.email}` });\n      close();\n    } catch (error) {\n      setRefused(refusalLine(change, error));\n    }\n  };\n\n  return (\n    <FormDialog\n      open={open}\n      title={copy.title(contact.email)}\n      onClose={close}\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={close}>\n            Cancel\n          </Button>\n          <Button\n            variant={change === 'unsubscribe' ? 'danger' : 'primary'}\n            loading={mutation.isPending}\n            onClick={() => void submit()}\n          >\n            {copy.action}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Banner tone=\"info\">{copy.effect}</Banner>\n        <div className=\"flex flex-col gap-1\">\n          <Textarea\n            label={copy.noteLabel}\n            rows={3}\n            value={note}\n            maxLength={NOTE_MAX}\n            required\n            aria-invalid={touched && problem ? true : undefined}\n            aria-describedby=\"status-note-help\"\n            onChange={(e) => {\n              setNote(e.target.value);\n              setRefused(null);\n            }}\n          />\n          <p\n            id=\"status-note-help\"\n            role={touched && problem ? 'alert' : undefined}\n            className={\n              touched && problem\n                ? 'text-xs text-[var(--error)]'\n                : 'text-xs text-[var(--text-tertiary)]'\n            }\n          >\n            {touched && problem ? problem : copy.noteHint}\n          </p>\n        </div>\n        {refused && (\n          <Banner tone=\"error\" title={copy.failed}>\n            {refused}\n          </Banner>\n        )}\n      </div>\n    </FormDialog>\n  );\n}\n"],"mappings":";AAoEQ,mBACE,KADF;AAlER,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,uBAAuB;AAMzB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,OAAO,YAAY,MAAM;AAC/B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,WAAW,gBAAgB,QAAQ,EAAE;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,QAAQ,MAAM;AAClB,YAAQ,EAAE;AACV,eAAW,KAAK;AAChB,eAAW,IAAI;AACf,YAAQ;AAAA,EACV;AACA,QAAM,SAAS,YAAY;AACzB,eAAW,IAAI;AAEf,QAAI,QAAS;AAEb,QAAI;AACF,YAAM,SAAS,YAAY,EAAE,QAAQ,KAAK,CAAC;AAC3C,YAAM,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,QAAQ,KAAK,GAAG,CAAC;AACjD,YAAM;AAAA,IACR,SAAS,OAAO;AACd,iBAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,IACvC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,KAAK,MAAM,QAAQ,KAAK;AAAA,MAC/B,SAAS;AAAA,MACT,QACE,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,OAAO,oBAE5C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,WAAW,gBAAgB,WAAW;AAAA,YAC/C,SAAS,SAAS;AAAA,YAClB,SAAS,MAAM,KAAK,OAAO;AAAA,YAE1B,eAAK;AAAA;AAAA,QACR;AAAA,SACF;AAAA,MAGF,+BAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAO,MAAK,QAAQ,eAAK,QAAO;AAAA,QACjC,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,KAAK;AAAA,cACZ,MAAM;AAAA,cACN,OAAO;AAAA,cACP,WAAW;AAAA,cACX,UAAQ;AAAA,cACR,gBAAc,WAAW,UAAU,OAAO;AAAA,cAC1C,oBAAiB;AAAA,cACjB,UAAU,CAAC,MAAM;AACf,wBAAQ,EAAE,OAAO,KAAK;AACtB,2BAAW,IAAI;AAAA,cACjB;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAM,WAAW,UAAU,UAAU;AAAA,cACrC,WACE,WAAW,UACP,gCACA;AAAA,cAGL,qBAAW,UAAU,UAAU,KAAK;AAAA;AAAA,UACvC;AAAA,WACF;AAAA,QACC,WACC,oBAAC,UAAO,MAAK,SAAQ,OAAO,KAAK,QAC9B,mBACH;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/newsletters/audience/use-contacts.js

@@ -0,0 +1,84 @@
+"use client";
+import { useState } from "react";
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient
+} from "@tanstack/react-query";
+import { useToast } from "@withpotter/ui-kit";
+import {
+  adminNewsletterContactsApi
+} from "@withpotter/lib/admin-newsletter-contacts-api";
+import { isNotAvailable, retryUnlessMissing } from "../not-available";
+import { saveCsv } from "../save-file";
+import { NEWSLETTERS_KEY, PAGE_SIZE } from "../use-newsletters";
+import { contactsQuery } from "./contacts";
+const CONTACTS_KEY = [...NEWSLETTERS_KEY, "contacts"];
+const contactKey = (id) => [...CONTACTS_KEY, "one", id];
+const useContacts = (filter, page) => useQuery({
+  queryKey: [...CONTACTS_KEY, "list", filter, page],
+  queryFn: () => adminNewsletterContactsApi.list(
+    contactsQuery(filter, { page, limit: PAGE_SIZE })
+  ),
+  placeholderData: keepPreviousData,
+  retry: retryUnlessMissing
+});
+const useContact = (id) => useQuery({
+  queryKey: contactKey(id),
+  queryFn: () => adminNewsletterContactsApi.get(id),
+  retry: retryUnlessMissing
+});
+const useContactDeliveries = (id, page) => useQuery({
+  queryKey: [...contactKey(id), "deliveries", page],
+  queryFn: () => adminNewsletterContactsApi.deliveries(
+    id,
+    contactsQuery({}, { page, limit: PAGE_SIZE })
+  ),
+  placeholderData: keepPreviousData,
+  retry: retryUnlessMissing
+});
+function useStatusChange(id) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ change, note }) => adminNewsletterContactsApi[change](id, note.trim()),
+    onSuccess: (contact) => {
+      queryClient.setQueryData(contactKey(id), contact);
+      return queryClient.invalidateQueries({
+        queryKey: [...CONTACTS_KEY, "list"]
+      });
+    }
+  });
+}
+function useContactsExport() {
+  const { toast } = useToast();
+  const [exporting, setExporting] = useState(false);
+  return {
+    exporting,
+    async exportCsv(filter) {
+      setExporting(true);
+      try {
+        const text = await adminNewsletterContactsApi.exportCsv(
+          contactsQuery(filter)
+        );
+        saveCsv(text ?? "", "newsletter-audience.csv");
+      } catch (error) {
+        toast({
+          title: "Export not made",
+          description: isNotAvailable(error) ? "The export is not available on this environment yet." : error.message,
+          variant: "destructive"
+        });
+      } finally {
+        setExporting(false);
+      }
+    }
+  };
+}
+export {
+  useContact,
+  useContactDeliveries,
+  useContacts,
+  useContactsExport,
+  useStatusChange
+};
+//# sourceMappingURL=use-contacts.js.map

package/dist/admin/newsletters/audience/use-contacts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/newsletters/audience/use-contacts.ts"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  keepPreviousData,\n  useMutation,\n  useQuery,\n  useQueryClient,\n} from '@tanstack/react-query';\nimport { useToast } from '@withpotter/ui-kit';\nimport {\n  adminNewsletterContactsApi,\n  type Contact,\n  type ContactSource,\n} from '@withpotter/lib/admin-newsletter-contacts-api';\nimport { isNotAvailable, retryUnlessMissing } from '../not-available';\nimport { saveCsv } from '../save-file';\nimport { NEWSLETTERS_KEY, PAGE_SIZE } from '../use-newsletters';\nimport { contactsQuery, type GroupId } from './contacts';\nimport type { StatusChange } from './status-change';\n\nconst CONTACTS_KEY = [...NEWSLETTERS_KEY, 'contacts'] as const;\nconst contactKey = (id: string) => [...CONTACTS_KEY, 'one', id] as const;\n\nexport interface ContactFilter {\n  status?: GroupId;\n  source?: ContactSource;\n  search?: string;\n}\n\n/** One page of the audience, with the count of each group. */\nexport const useContacts = (filter: ContactFilter, page: number) =>\n  useQuery({\n    queryKey: [...CONTACTS_KEY, 'list', filter, page],\n    queryFn: () =>\n      adminNewsletterContactsApi.list(\n        contactsQuery(filter, { page, limit: PAGE_SIZE }),\n      ),\n    placeholderData: keepPreviousData,\n    retry: retryUnlessMissing,\n  });\n\nexport const useContact = (id: string) =>\n  useQuery({\n    queryKey: contactKey(id),\n    queryFn: () => adminNewsletterContactsApi.get(id),\n    retry: retryUnlessMissing,\n  });\n\n/** What one contact was sent, newest first. */\nexport const useContactDeliveries = (id: string, page: number) =>\n  useQuery({\n    queryKey: [...contactKey(id), 'deliveries', page],\n    queryFn: () =>\n      adminNewsletterContactsApi.deliveries(\n        id,\n        contactsQuery({}, { page, limit: PAGE_SIZE }),\n      ),\n    placeholderData: keepPreviousData,\n    retry: retryUnlessMissing,\n  });\n\n/**\n * Unsubscribe or resubscribe one contact, with the note saying why. The\n * dialog shows a refusal itself, so this hands the error back untouched.\n */\nexport function useStatusChange(id: string) {\n  const queryClient = useQueryClient();\n\n  return useMutation({\n    mutationFn: ({ change, note }: { change: StatusChange; note: string }) =>\n      adminNewsletterContactsApi[change](id, note.trim()),\n    onSuccess: (contact: Contact) => {\n      queryClient.setQueryData(contactKey(id), contact);\n\n      return queryClient.invalidateQueries({\n        queryKey: [...CONTACTS_KEY, 'list'],\n      });\n    },\n  });\n}\n\n/** The CSV of the audience as it is filtered now. */\nexport function useContactsExport() {\n  const { toast } = useToast();\n  const [exporting, setExporting] = useState(false);\n\n  return {\n    exporting,\n    async exportCsv(filter: ContactFilter) {\n      setExporting(true);\n\n      try {\n        const text = await adminNewsletterContactsApi.exportCsv(\n          contactsQuery(filter),\n        );\n\n        saveCsv(text ?? '', 'newsletter-audience.csv');\n      } catch (error) {\n        toast({\n          title: 'Export not made',\n          description: isNotAvailable(error)\n            ? 'The export is not available on this environment yet.'\n            : (error as Error).message,\n          variant: 'destructive',\n        });\n      } finally {\n        setExporting(false);\n      }\n    },\n  };\n}\n"],"mappings":";AAEA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,gBAAgB,0BAA0B;AACnD,SAAS,eAAe;AACxB,SAAS,iBAAiB,iBAAiB;AAC3C,SAAS,qBAAmC;AAG5C,MAAM,eAAe,CAAC,GAAG,iBAAiB,UAAU;AACpD,MAAM,aAAa,CAAC,OAAe,CAAC,GAAG,cAAc,OAAO,EAAE;AASvD,MAAM,cAAc,CAAC,QAAuB,SACjD,SAAS;AAAA,EACP,UAAU,CAAC,GAAG,cAAc,QAAQ,QAAQ,IAAI;AAAA,EAChD,SAAS,MACP,2BAA2B;AAAA,IACzB,cAAc,QAAQ,EAAE,MAAM,OAAO,UAAU,CAAC;AAAA,EAClD;AAAA,EACF,iBAAiB;AAAA,EACjB,OAAO;AACT,CAAC;AAEI,MAAM,aAAa,CAAC,OACzB,SAAS;AAAA,EACP,UAAU,WAAW,EAAE;AAAA,EACvB,SAAS,MAAM,2BAA2B,IAAI,EAAE;AAAA,EAChD,OAAO;AACT,CAAC;AAGI,MAAM,uBAAuB,CAAC,IAAY,SAC/C,SAAS;AAAA,EACP,UAAU,CAAC,GAAG,WAAW,EAAE,GAAG,cAAc,IAAI;AAAA,EAChD,SAAS,MACP,2BAA2B;AAAA,IACzB;AAAA,IACA,cAAc,CAAC,GAAG,EAAE,MAAM,OAAO,UAAU,CAAC;AAAA,EAC9C;AAAA,EACF,iBAAiB;AAAA,EACjB,OAAO;AACT,CAAC;AAMI,SAAS,gBAAgB,IAAY;AAC1C,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,EAAE,QAAQ,KAAK,MAC1B,2BAA2B,MAAM,EAAE,IAAI,KAAK,KAAK,CAAC;AAAA,IACpD,WAAW,CAAC,YAAqB;AAC/B,kBAAY,aAAa,WAAW,EAAE,GAAG,OAAO;AAEhD,aAAO,YAAY,kBAAkB;AAAA,QACnC,UAAU,CAAC,GAAG,cAAc,MAAM;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAGO,SAAS,oBAAoB;AAClC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SAAO;AAAA,IACL;AAAA,IACA,MAAM,UAAU,QAAuB;AACrC,mBAAa,IAAI;AAEjB,UAAI;AACF,cAAM,OAAO,MAAM,2BAA2B;AAAA,UAC5C,cAAc,MAAM;AAAA,QACtB;AAEA,gBAAQ,QAAQ,IAAI,yBAAyB;AAAA,MAC/C,SAAS,OAAO;AACd,cAAM;AAAA,UACJ,OAAO;AAAA,UACP,aAAa,eAAe,KAAK,IAC7B,yDACC,MAAgB;AAAA,UACrB,SAAS;AAAA,QACX,CAAC;AAAA,MACH,UAAE;AACA,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/admin/newsletters/autosave.js

@@ -0,0 +1,58 @@
+const initialSave = (updatedAt) => ({
+  status: "saved",
+  updatedAt,
+  queued: false
+});
+function saveReducer(state, action) {
+  if (state.status === "locked") return state;
+  switch (action.type) {
+    case "edit":
+      if (state.status === "saving") return { ...state, queued: true };
+      if (state.status === "conflict") return state;
+      return { ...state, status: "dirty" };
+    case "start":
+      return { ...state, status: "saving", queued: false };
+    case "saved":
+      return {
+        status: state.queued ? "dirty" : "saved",
+        updatedAt: action.updatedAt,
+        queued: false
+      };
+    case "failed":
+      return { ...state, status: "failed", queued: false };
+    case "conflict":
+      return { ...state, status: "conflict", queued: false };
+    case "locked":
+      return { ...state, status: "locked", queued: false };
+    case "reloaded":
+      return initialSave(action.updatedAt);
+  }
+}
+const canAutosave = (status) => status === "dirty" || status === "failed";
+function refusalOutcome(httpStatus, serverStatus) {
+  if (httpStatus !== 409) return "failed";
+  return serverStatus && serverStatus !== "draft" ? "locked" : "conflict";
+}
+function saveLabel(status) {
+  if (status === "dirty" || status === "saving") return "Saving";
+  if (status === "saved") return "Saved";
+  if (status === "failed" || status === "conflict") return "Not saved";
+  return null;
+}
+function savePatch(draft, savedSignatureId, updatedAt) {
+  const { signatureId, ...text } = draft;
+  return {
+    ...text,
+    ...updatedAt ? { updatedAt } : {},
+    ...signatureId === savedSignatureId ? {} : { signatureId }
+  };
+}
+export {
+  canAutosave,
+  initialSave,
+  refusalOutcome,
+  saveLabel,
+  savePatch,
+  saveReducer
+};
+//# sourceMappingURL=autosave.js.map

package/dist/admin/newsletters/autosave.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/autosave.ts"],"sourcesContent":["import type {\n  NewsletterPatch,\n  NewsletterStatus,\n} from '@withpotter/lib/admin-newsletters-api';\nimport type { EditorDraft } from './content';\n\n/**\n * Where a draft stands against the server.\n *\n * - `dirty`    changed here, a save is due\n * - `saving`   a save is on its way\n * - `saved`    the server holds what is on screen\n * - `failed`   the last save did not land; the admin can retry\n * - `conflict` the server holds a newer draft than the one edited here\n * - `locked`   it is no longer a draft, so nothing more can be saved\n */\nexport type SaveStatus =\n  | 'dirty'\n  | 'saving'\n  | 'saved'\n  | 'failed'\n  | 'conflict'\n  | 'locked';\n\nexport interface SaveState {\n  status: SaveStatus;\n  /** The `updatedAt` of the copy the next save is based on. */\n  updatedAt: string;\n  /** Edited again while a save was in flight: save once more when it lands. */\n  queued: boolean;\n}\n\nexport type SaveAction =\n  | { type: 'edit' }\n  | { type: 'start' }\n  | { type: 'saved'; updatedAt: string }\n  | { type: 'failed' }\n  | { type: 'conflict' }\n  | { type: 'locked' }\n  | { type: 'reloaded'; updatedAt: string };\n\nexport const initialSave = (updatedAt: string): SaveState => ({\n  status: 'saved',\n  updatedAt,\n  queued: false,\n});\n\nexport function saveReducer(state: SaveState, action: SaveAction): SaveState {\n  // Once it is sent there is nothing left to save, whatever happens next.\n  if (state.status === 'locked') return state;\n\n  switch (action.type) {\n    case 'edit':\n      if (state.status === 'saving') return { ...state, queued: true };\n\n      // A conflict stays until the admin picks a side.\n      if (state.status === 'conflict') return state;\n\n      return { ...state, status: 'dirty' };\n    case 'start':\n      return { ...state, status: 'saving', queued: false };\n    case 'saved':\n      return {\n        status: state.queued ? 'dirty' : 'saved',\n        updatedAt: action.updatedAt,\n        queued: false,\n      };\n    case 'failed':\n      return { ...state, status: 'failed', queued: false };\n    case 'conflict':\n      return { ...state, status: 'conflict', queued: false };\n    case 'locked':\n      return { ...state, status: 'locked', queued: false };\n    case 'reloaded':\n      return initialSave(action.updatedAt);\n  }\n}\n\n/** A save may start on its own only from here. */\nexport const canAutosave = (status: SaveStatus) =>\n  status === 'dirty' || status === 'failed';\n\n/**\n * What a refused save means. A 409 is either \"it was sent\" or \"someone else\n * changed it\"; the server's current copy tells the two apart.\n */\nexport function refusalOutcome(\n  httpStatus: number | undefined,\n  serverStatus: NewsletterStatus | undefined,\n): 'locked' | 'conflict' | 'failed' {\n  if (httpStatus !== 409) return 'failed';\n\n  return serverStatus && serverStatus !== 'draft' ? 'locked' : 'conflict';\n}\n\n/** The quiet indicator beside the header buttons. */\nexport function saveLabel(status: SaveStatus): string | null {\n  if (status === 'dirty' || status === 'saving') return 'Saving';\n\n  if (status === 'saved') return 'Saved';\n\n  if (status === 'failed' || status === 'conflict') return 'Not saved';\n\n  return null;\n}\n\n/**\n * The body of one save. `signatureId` goes only when the choice differs from\n * what the server last took, so a text save never copies the signature again.\n * Without `updatedAt` the save replaces whatever the server holds.\n */\nexport function savePatch(\n  draft: EditorDraft,\n  savedSignatureId: string | null,\n  updatedAt?: string,\n): NewsletterPatch {\n  const { signatureId, ...text } = draft;\n\n  return {\n    ...text,\n    ...(updatedAt ? { updatedAt } : {}),\n    ...(signatureId === savedSignatureId ? {} : { signatureId }),\n  };\n}\n"],"mappings":"AAyCO,MAAM,cAAc,CAAC,eAAkC;AAAA,EAC5D,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AACV;AAEO,SAAS,YAAY,OAAkB,QAA+B;AAE3E,MAAI,MAAM,WAAW,SAAU,QAAO;AAEtC,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,UAAI,MAAM,WAAW,SAAU,QAAO,EAAE,GAAG,OAAO,QAAQ,KAAK;AAG/D,UAAI,MAAM,WAAW,WAAY,QAAO;AAExC,aAAO,EAAE,GAAG,OAAO,QAAQ,QAAQ;AAAA,IACrC,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,QAAQ,UAAU,QAAQ,MAAM;AAAA,IACrD,KAAK;AACH,aAAO;AAAA,QACL,QAAQ,MAAM,SAAS,UAAU;AAAA,QACjC,WAAW,OAAO;AAAA,QAClB,QAAQ;AAAA,MACV;AAAA,IACF,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,QAAQ,UAAU,QAAQ,MAAM;AAAA,IACrD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,QAAQ,YAAY,QAAQ,MAAM;AAAA,IACvD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,QAAQ,UAAU,QAAQ,MAAM;AAAA,IACrD,KAAK;AACH,aAAO,YAAY,OAAO,SAAS;AAAA,EACvC;AACF;AAGO,MAAM,cAAc,CAAC,WAC1B,WAAW,WAAW,WAAW;AAM5B,SAAS,eACd,YACA,cACkC;AAClC,MAAI,eAAe,IAAK,QAAO;AAE/B,SAAO,gBAAgB,iBAAiB,UAAU,WAAW;AAC/D;AAGO,SAAS,UAAU,QAAmC;AAC3D,MAAI,WAAW,WAAW,WAAW,SAAU,QAAO;AAEtD,MAAI,WAAW,QAAS,QAAO;AAE/B,MAAI,WAAW,YAAY,WAAW,WAAY,QAAO;AAEzD,SAAO;AACT;AAOO,SAAS,UACd,OACA,kBACA,WACiB;AACjB,QAAM,EAAE,aAAa,GAAG,KAAK,IAAI;AAEjC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,IACjC,GAAI,gBAAgB,mBAAmB,CAAC,IAAI,EAAE,YAAY;AAAA,EAC5D;AACF;","names":[]}

package/dist/admin/newsletters/brand-image-field.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Field } from "@withpotter/ui-kit";
+import {
+  ImageError,
+  ImageThumb,
+  UploadImageButton
+} from "./image-picker";
+function BrandImageField({
+  label,
+  shape,
+  value,
+  upload,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsx(Field, { label: `${label} (optional)`, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    value ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(ImageThumb, { src: value, shape }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          "aria-label": `Remove ${label.toLowerCase()}`,
+          onClick: () => {
+            upload.clearError();
+            onRemove();
+          },
+          children: "Remove"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(UploadImageButton, { upload }),
+    /* @__PURE__ */ jsx(ImageError, { upload })
+  ] }) });
+}
+export {
+  BrandImageField
+};
+//# sourceMappingURL=brand-image-field.js.map

package/dist/admin/newsletters/brand-image-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/newsletters/brand-image-field.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Field } from '@withpotter/ui-kit';\nimport {\n  ImageError,\n  ImageThumb,\n  UploadImageButton,\n  type ImageUpload,\n} from './image-picker';\n\n/**\n * A signature's logo or banner: uploaded, shown in a box of its shape, and\n * removable. There is no address to type; these are always uploads.\n */\nexport function BrandImageField({\n  label,\n  shape,\n  value,\n  upload,\n  onRemove,\n}: {\n  label: string;\n  shape: 'square' | 'wide';\n  value: string;\n  upload: ImageUpload;\n  onRemove: () => void;\n}) {\n  return (\n    <Field label={`${label} (optional)`}>\n      <div className=\"flex flex-col gap-2\">\n        {value ? (\n          <div className=\"flex items-center gap-3\">\n            <ImageThumb src={value} shape={shape} />\n            <Button\n              variant=\"secondary\"\n              aria-label={`Remove ${label.toLowerCase()}`}\n              onClick={() => {\n                upload.clearError();\n                onRemove();\n              }}\n            >\n              Remove\n            </Button>\n          </div>\n        ) : (\n          <UploadImageButton upload={upload} />\n        )}\n        <ImageError upload={upload} />\n      </div>\n    </Field>\n  );\n}\n"],"mappings":";AA+BU,SACE,KADF;AA7BV,SAAS,QAAQ,aAAa;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAMA,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,oBAAC,SAAM,OAAO,GAAG,KAAK,eACpB,+BAAC,SAAI,WAAU,uBACZ;AAAA,YACC,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,KAAK,OAAO,OAAc;AAAA,MACtC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,cAAY,UAAU,MAAM,YAAY,CAAC;AAAA,UACzC,SAAS,MAAM;AACb,mBAAO,WAAW;AAClB,qBAAS;AAAA,UACX;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OACF,IAEA,oBAAC,qBAAkB,QAAgB;AAAA,IAErC,oBAAC,cAAW,QAAgB;AAAA,KAC9B,GACF;AAEJ;","names":[]}

package/dist/admin/newsletters/composer.js

@@ -0,0 +1,122 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Banner, Button, Card, TabNav, useToast } from "@withpotter/ui-kit";
+import { EditorFields } from "./editor-fields";
+import { titleOf } from "./labels";
+import { PreviewPane } from "./preview-pane";
+import { RecordHeader } from "./record-header";
+import { ReviewDialog } from "./review-dialog";
+import { SaveIndicator } from "./save-indicator";
+import { useAutosave } from "./use-autosave";
+import { useNewsletterAccess } from "./use-newsletters";
+import { useSendActions } from "./use-send-actions";
+const PANES = [
+  { id: "edit", label: "Edit" },
+  { id: "preview", label: "Preview" }
+];
+function Composer({ newsletter }) {
+  const { canManage, email } = useNewsletterAccess();
+  const autosave = useAutosave(newsletter, canManage);
+  const send = useSendActions(newsletter.id, email);
+  const { toast } = useToast();
+  const [pane, setPane] = useState("edit");
+  const [reviewing, setReviewing] = useState(false);
+  const { draft, status } = autosave;
+  const locked = status === "locked";
+  const saved = async () => {
+    const ok = await autosave.flush();
+    if (!ok) {
+      toast({
+        title: "Draft not saved",
+        description: "Save the draft before sending it.",
+        variant: "destructive"
+      });
+    }
+    return ok;
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RecordHeader, { title: titleOf(draft), children: canManage && !locked && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SaveIndicator, { status, onRetry: autosave.retry }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          loading: send.testing,
+          onClick: async () => {
+            if (await saved()) await send.sendTest();
+          },
+          children: "Send test"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: async () => {
+            if (await saved()) setReviewing(true);
+          },
+          children: "Review and send"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      locked && /* @__PURE__ */ jsx(
+        Banner,
+        {
+          tone: "info",
+          title: "This newsletter was sent",
+          action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: autosave.reload, children: "View" }),
+          children: "It can no longer be edited."
+        }
+      ),
+      status === "conflict" && /* @__PURE__ */ jsx(
+        Banner,
+        {
+          tone: "warning",
+          title: "This draft changed elsewhere",
+          action: /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: autosave.reload, children: "Reload" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "secondary",
+                onClick: autosave.keepMine,
+                children: "Keep mine"
+              }
+            )
+          ] }),
+          children: "Reload to take the other copy, or keep yours and replace it."
+        }
+      ),
+      !canManage && /* @__PURE__ */ jsx(Banner, { tone: "neutral", children: "You can read this draft. Changing it needs the newsletters.manage permission." }),
+      /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(TabNav, { tabs: PANES, activeTab: pane, onTabChange: setPane }) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx("div", { className: pane === "edit" ? void 0 : "hidden lg:block", children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
+          EditorFields,
+          {
+            draft,
+            carried: newsletter.signature ?? null,
+            disabled: !canManage || locked,
+            onChange: autosave.change
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { className: pane === "preview" ? void 0 : "hidden lg:block", children: /* @__PURE__ */ jsx(PreviewPane, { id: newsletter.id, version: autosave.savedCount }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ReviewDialog,
+      {
+        open: reviewing,
+        draft,
+        carried: newsletter.signature ?? null,
+        send,
+        onClose: () => setReviewing(false)
+      }
+    )
+  ] });
+}
+export {
+  Composer
+};
+//# sourceMappingURL=composer.js.map