@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/reply-picker.module.css

@@ -0,0 +1,152 @@
+/* The saved reply picker: search, categories, list and preview, above the
+   composer. */
+
+.popover {
+  z-index: 70;
+  width: min(640px, calc(100vw - 32px));
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-base);
+  animation: rise var(--adm-fast);
+}
+
+.body {
+  display: grid;
+  gap: 8px;
+}
+
+.chips {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.chip {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-base);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast);
+}
+
+.chip:hover {
+  background: var(--adm-hover);
+}
+
+.chip[aria-pressed='true'] {
+  border-color: var(--adm-tint-line);
+  background: var(--adm-tint);
+  color: var(--adm-tint-ink);
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 8px;
+  height: 280px;
+}
+
+.list {
+  display: grid;
+  align-content: start;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.option {
+  display: grid;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.option[aria-selected='true'] {
+  background: var(--adm-tint);
+}
+
+.optionTitle {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionHint {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.preview {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.foot a,
+.note a {
+  color: var(--accent-ink, var(--accent-primary));
+}
+
+.note {
+  margin: 0;
+  padding: 8px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@media (max-width: 560px) {
+  .split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .preview {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .popover {
+    animation: none;
+  }
+}

package/dist/admin/support/saved-replies/library-categories.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FilterSearch } from "../../_ui";
+import { ALL } from "./reply-meta";
+import styles from "./library.module.css";
+function LibraryCategories({
+  query,
+  onQuery,
+  categories,
+  total,
+  active,
+  onSelect
+}) {
+  const rows = [
+    { key: ALL, label: "All replies", count: total },
+    ...categories
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: styles.side, children: [
+    /* @__PURE__ */ jsx(
+      FilterSearch,
+      {
+        fill: true,
+        value: query,
+        onChange: onQuery,
+        placeholder: "Search replies"
+      }
+    ),
+    /* @__PURE__ */ jsx("nav", { className: styles.categories, "aria-label": "Reply categories", children: rows.map((row) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: styles.category,
+        "data-active": row.key === active || void 0,
+        "aria-pressed": row.key === active,
+        onClick: () => onSelect(row.key),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.categoryLabel, title: row.label, children: row.label }),
+          /* @__PURE__ */ jsx("span", { className: styles.categoryCount, children: row.count.toLocaleString() })
+        ]
+      },
+      row.key
+    )) })
+  ] });
+}
+export {
+  LibraryCategories
+};
+//# sourceMappingURL=library-categories.js.map

package/dist/admin/support/saved-replies/library-categories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/saved-replies/library-categories.tsx"],"sourcesContent":["'use client';\n\nimport { FilterSearch } from '../../_ui';\nimport { ALL } from './reply-meta';\nimport styles from './library.module.css';\n\ntype CategoryRow = { key: string; label: string; count: number };\n\n/** The library's left pane: search, then every category with its count. */\nexport function LibraryCategories({\n  query,\n  onQuery,\n  categories,\n  total,\n  active,\n  onSelect,\n}: {\n  query: string;\n  onQuery: (value: string) => void;\n  categories: CategoryRow[];\n  total: number;\n  active: string;\n  onSelect: (key: string) => void;\n}) {\n  const rows = [\n    { key: ALL, label: 'All replies', count: total },\n    ...categories,\n  ];\n\n  return (\n    <div className={styles.side}>\n      <FilterSearch\n        fill\n        value={query}\n        onChange={onQuery}\n        placeholder=\"Search replies\"\n      />\n      <nav className={styles.categories} aria-label=\"Reply categories\">\n        {rows.map((row) => (\n          <button\n            key={row.key}\n            type=\"button\"\n            className={styles.category}\n            data-active={row.key === active || undefined}\n            aria-pressed={row.key === active}\n            onClick={() => onSelect(row.key)}\n          >\n            <span className={styles.categoryLabel} title={row.label}>\n              {row.label}\n            </span>\n            <span className={styles.categoryCount}>\n              {row.count.toLocaleString()}\n            </span>\n          </button>\n        ))}\n      </nav>\n    </div>\n  );\n}\n"],"mappings":";AA+BM,cAQI,YARJ;AA7BN,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AACpB,OAAO,YAAY;AAKZ,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,OAAO;AAAA,IACX,EAAE,KAAK,KAAK,OAAO,eAAe,OAAO,MAAM;AAAA,IAC/C,GAAG;AAAA,EACL;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACd;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,YAAY,cAAW,oBAC3C,eAAK,IAAI,CAAC,QACT;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,eAAa,IAAI,QAAQ,UAAU;AAAA,QACnC,gBAAc,IAAI,QAAQ;AAAA,QAC1B,SAAS,MAAM,SAAS,IAAI,GAAG;AAAA,QAE/B;AAAA,8BAAC,UAAK,WAAW,OAAO,eAAe,OAAO,IAAI,OAC/C,cAAI,OACP;AAAA,UACA,oBAAC,UAAK,WAAW,OAAO,eACrB,cAAI,MAAM,eAAe,GAC5B;AAAA;AAAA;AAAA,MAZK,IAAI;AAAA,IAaX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/support/saved-replies/library.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, useConfirm, useToast } from "@withpotter/ui-kit";
+import { LibraryCategories } from "./library-categories";
+import { ALL, categoryCounts, filterReplies } from "./reply-meta";
+import { ReplyList } from "./reply-list";
+import { ReplyPreview } from "./reply-preview";
+import { SavedReplyEditor } from "./saved-reply-editor";
+import { useSavedReplies, useSavedReplyMutations } from "./use-saved-replies";
+import styles from "./library.module.css";
+function SavedRepliesLibrary({ canManage }) {
+  const replies = useSavedReplies();
+  const { remove } = useSavedReplyMutations();
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const [category, setCategory] = useState(ALL);
+  const [query, setQuery] = useState("");
+  const [selectedId, setSelectedId] = useState(null);
+  const [mode, setMode] = useState("view");
+  const all = useMemo(() => replies.data ?? [], [replies.data]);
+  const rows = useMemo(
+    () => filterReplies(all, { category, query }),
+    [all, category, query]
+  );
+  const selected = rows.find((reply) => reply.id === selectedId) ?? rows[0] ?? null;
+  const editing = canManage && mode !== "view";
+  const select = (reply) => {
+    setSelectedId(reply.id);
+    setMode("view");
+  };
+  const deleteReply = async (reply) => {
+    const ok = await confirm({
+      title: `Delete \u201C${reply.title}\u201D?`,
+      description: "It disappears from the reply picker for everyone. Messages already sent keep their text.",
+      confirmLabel: "Delete reply",
+      tone: "danger"
+    });
+    if (!ok) return;
+    remove.mutate(reply.id, {
+      onSuccess: () => setSelectedId(null),
+      onError: (error) => toast({
+        title: "The reply was not deleted",
+        description: error.message,
+        variant: "destructive"
+      })
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: styles.library,
+      "aria-label": "Saved replies library",
+      "aria-busy": replies.isLoading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+          /* @__PURE__ */ jsxs("h2", { className: styles.title, children: [
+            "Library",
+            /* @__PURE__ */ jsx("span", { className: styles.count, children: all.length.toLocaleString() })
+          ] }),
+          canManage && /* @__PURE__ */ jsx(Button, { onClick: () => setMode("new"), children: "New reply" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.panes, children: [
+          /* @__PURE__ */ jsx(
+            LibraryCategories,
+            {
+              query,
+              onQuery: setQuery,
+              categories: categoryCounts(all),
+              total: all.length,
+              active: category,
+              onSelect: (key) => {
+                setCategory(key);
+                if (mode === "edit") setMode("view");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.middle, children: /* @__PURE__ */ jsx(
+            ReplyList,
+            {
+              rows,
+              isLoading: replies.isLoading,
+              isError: replies.isError,
+              filtered: category !== ALL || Boolean(query.trim()),
+              selectedId: mode === "new" ? null : selected?.id ?? null,
+              onSelect: select,
+              onRetry: () => void replies.refetch()
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.right, tabIndex: 0, "aria-label": "Selected reply", children: editing ? /* @__PURE__ */ jsx(
+            SavedReplyEditor,
+            {
+              reply: mode === "new" ? null : selected,
+              onSaved: (reply) => {
+                setCategory(ALL);
+                setQuery("");
+                setSelectedId(reply.id);
+                setMode("view");
+                toast({ title: `Saved \u201C${reply.title}\u201D` });
+              },
+              onCancel: () => setMode("view")
+            },
+            mode === "new" ? "new" : selected?.id
+          ) : /* @__PURE__ */ jsx(
+            ReplyPreview,
+            {
+              reply: replies.isLoading ? null : selected,
+              canManage,
+              onEdit: () => setMode("edit"),
+              onDelete: () => selected && void deleteReply(selected)
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SavedRepliesLibrary
+};
+//# sourceMappingURL=library.js.map

package/dist/admin/support/saved-replies/library.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/saved-replies/library.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { Button, useConfirm, useToast } from '@withpotter/ui-kit';\nimport type { SavedReply } from '@withpotter/lib/admin-saved-replies-api';\nimport { LibraryCategories } from './library-categories';\nimport { ALL, categoryCounts, filterReplies } from './reply-meta';\nimport { ReplyList } from './reply-list';\nimport { ReplyPreview } from './reply-preview';\nimport { SavedReplyEditor } from './saved-reply-editor';\nimport { useSavedReplies, useSavedReplyMutations } from './use-saved-replies';\nimport styles from './library.module.css';\n\ntype Mode = 'view' | 'edit' | 'new';\n\n/**\n * The saved replies manager: categories and search on the left, the replies\n * in the middle, and the chosen one on the right, previewed or edited in\n * place. \"New reply\" opens the editor in that same right pane.\n */\nexport function SavedRepliesLibrary({ canManage }: { canManage: boolean }) {\n  const replies = useSavedReplies();\n  const { remove } = useSavedReplyMutations();\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const [category, setCategory] = useState(ALL);\n  const [query, setQuery] = useState('');\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const [mode, setMode] = useState<Mode>('view');\n  const all = useMemo(() => replies.data ?? [], [replies.data]);\n  const rows = useMemo(\n    () => filterReplies(all, { category, query }),\n    [all, category, query],\n  );\n  const selected =\n    rows.find((reply) => reply.id === selectedId) ?? rows[0] ?? null;\n  const editing = canManage && mode !== 'view';\n\n  const select = (reply: SavedReply) => {\n    setSelectedId(reply.id);\n    setMode('view');\n  };\n\n  const deleteReply = async (reply: SavedReply) => {\n    const ok = await confirm({\n      title: `Delete “${reply.title}”?`,\n      description:\n        'It disappears from the reply picker for everyone. Messages already sent keep their text.',\n      confirmLabel: 'Delete reply',\n      tone: 'danger',\n    });\n\n    if (!ok) return;\n\n    remove.mutate(reply.id, {\n      onSuccess: () => setSelectedId(null),\n      onError: (error) =>\n        toast({\n          title: 'The reply was not deleted',\n          description: error.message,\n          variant: 'destructive',\n        }),\n    });\n  };\n\n  return (\n    <section\n      className={styles.library}\n      aria-label=\"Saved replies library\"\n      aria-busy={replies.isLoading || undefined}\n    >\n      <header className={styles.head}>\n        <h2 className={styles.title}>\n          Library\n          <span className={styles.count}>{all.length.toLocaleString()}</span>\n        </h2>\n        {canManage && <Button onClick={() => setMode('new')}>New reply</Button>}\n      </header>\n      <div className={styles.panes}>\n        <LibraryCategories\n          query={query}\n          onQuery={setQuery}\n          categories={categoryCounts(all)}\n          total={all.length}\n          active={category}\n          onSelect={(key) => {\n            setCategory(key);\n            if (mode === 'edit') setMode('view');\n          }}\n        />\n        <div className={styles.middle}>\n          <ReplyList\n            rows={rows}\n            isLoading={replies.isLoading}\n            isError={replies.isError}\n            filtered={category !== ALL || Boolean(query.trim())}\n            selectedId={mode === 'new' ? null : (selected?.id ?? null)}\n            onSelect={select}\n            onRetry={() => void replies.refetch()}\n          />\n        </div>\n        <div className={styles.right} tabIndex={0} aria-label=\"Selected reply\">\n          {editing ? (\n            <SavedReplyEditor\n              key={mode === 'new' ? 'new' : selected?.id}\n              reply={mode === 'new' ? null : selected}\n              onSaved={(reply) => {\n                // Clear the filters so the saved reply is in view.\n                setCategory(ALL);\n                setQuery('');\n                setSelectedId(reply.id);\n                setMode('view');\n                toast({ title: `Saved “${reply.title}”` });\n              }}\n              onCancel={() => setMode('view')}\n            />\n          ) : (\n            <ReplyPreview\n              reply={replies.isLoading ? null : selected}\n              canManage={canManage}\n              onEdit={() => setMode('edit')}\n              onDelete={() => selected && void deleteReply(selected)}\n            />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/saved-replies/library.module.css

@@ -0,0 +1,157 @@
+/* The saved replies manager: categories | replies | preview or editor. */
+
+.library {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--adm-card-radius);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-base);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.count,
+.categoryCount {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+}
+
+.panes {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.25fr);
+  height: 640px;
+  min-height: 0;
+}
+
+.side,
+.middle,
+.right {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.side,
+.middle {
+  border-right: 1px solid var(--border-subtle);
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--bg-subtle);
+}
+
+.categories {
+  display: grid;
+  gap: 4px;
+}
+
+.category {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast);
+}
+
+.category:hover {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.category[data-active] {
+  background: var(--adm-tint);
+  color: var(--adm-tint-ink);
+}
+
+.category[data-active] .categoryCount {
+  color: var(--adm-tint-ink);
+}
+
+.categoryLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.category:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+@media (max-width: 1100px) {
+  .panes {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+    height: auto;
+  }
+
+  .side {
+    grid-column: 1 / -1;
+    border-right: 0;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .categories {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .category {
+    flex-shrink: 0;
+  }
+
+  .middle,
+  .right {
+    max-height: 640px;
+  }
+}
+
+@media (max-width: 720px) {
+  .panes {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .middle {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+}

package/dist/admin/support/saved-replies/page.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { AdmLoading } from "../../_ui";
+function SavedRepliesRedirect() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/admin/support?tab=saved-replies");
+  }, [router]);
+  return /* @__PURE__ */ jsx(AdmLoading, {});
+}
+export {
+  SavedRepliesRedirect as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/support/saved-replies/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/saved-replies/page.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { AdmLoading } from '../../_ui';\n\n/** Saved replies are a tab of Support now; old links land on it. */\nexport default function SavedRepliesRedirect() {\n  const router = useRouter();\n\n  useEffect(() => {\n    router.replace('/admin/support?tab=saved-replies');\n  }, [router]);\n\n  return <AdmLoading />;\n}\n"],"mappings":";AAcS;AAZT,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAGZ,SAAR,uBAAwC;AAC7C,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACd,WAAO,QAAQ,kCAAkC;AAAA,EACnD,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO,oBAAC,cAAW;AACrB;","names":[]}

package/dist/admin/support/saved-replies/placeholders.js

@@ -0,0 +1,51 @@
+const PLACEHOLDERS = [
+  { key: "first_name", description: "Merchant's first name" },
+  { key: "full_name", description: "Merchant's full name" },
+  { key: "email", description: "Merchant's email" },
+  { key: "business_name", description: "Business name" },
+  { key: "plan", description: "Current plan" },
+  { key: "case_reference", description: "Case reference, e.g. SUP-1042" },
+  { key: "subject", description: "Case subject" }
+];
+const TOKEN = /\{\{\s*([a-z_]+)\s*\}\}/g;
+function placeholderValues(item) {
+  const sender = item.supportContext?.sender;
+  const workspace = item.supportContext?.workspace;
+  const fullName = (sender?.name || item.reporterName || "").trim();
+  return {
+    first_name: fullName.split(/\s+/)[0] || void 0,
+    full_name: fullName || void 0,
+    email: sender?.email || item.reporterEmail || void 0,
+    business_name: workspace?.businessName || item.tenant?.businessName || void 0,
+    plan: workspace?.plan || void 0,
+    case_reference: item.reference || void 0,
+    subject: item.subject || void 0
+  };
+}
+function fillPlaceholders(body, values) {
+  const missing = /* @__PURE__ */ new Set();
+  const text = body.replace(TOKEN, (token, key) => {
+    const value = values[key];
+    if (value) return value;
+    missing.add(key);
+    return token;
+  });
+  return { text, missing: [...missing] };
+}
+function unfilledPlaceholders(text) {
+  return [...new Set([...text.matchAll(TOKEN)].map((match) => match[1]))];
+}
+const MISSING_FACT = /\[REQUIRES HUMAN INPUT(?::\s*([^\]]*))?\]/g;
+function missingFacts(text) {
+  return [...text.matchAll(MISSING_FACT)].map(
+    (match) => match[1]?.trim() || "a missing detail"
+  );
+}
+export {
+  PLACEHOLDERS,
+  fillPlaceholders,
+  missingFacts,
+  placeholderValues,
+  unfilledPlaceholders
+};
+//# sourceMappingURL=placeholders.js.map

package/dist/admin/support/saved-replies/placeholders.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/saved-replies/placeholders.ts"],"sourcesContent":["import type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\n\n/** Placeholders a saved reply can use, in the order the editor lists them. */\nexport const PLACEHOLDERS = [\n  { key: 'first_name', description: \"Merchant's first name\" },\n  { key: 'full_name', description: \"Merchant's full name\" },\n  { key: 'email', description: \"Merchant's email\" },\n  { key: 'business_name', description: 'Business name' },\n  { key: 'plan', description: 'Current plan' },\n  { key: 'case_reference', description: 'Case reference, e.g. SUP-1042' },\n  { key: 'subject', description: 'Case subject' },\n] as const;\n\nexport type PlaceholderKey = (typeof PLACEHOLDERS)[number]['key'];\n\nexport type PlaceholderValues = Partial<Record<PlaceholderKey, string>>;\n\nconst TOKEN = /\\{\\{\\s*([a-z_]+)\\s*\\}\\}/g;\n\nexport function placeholderValues(\n  item: PlatformServiceCase,\n): PlaceholderValues {\n  const sender = item.supportContext?.sender;\n  const workspace = item.supportContext?.workspace;\n  const fullName = (sender?.name || item.reporterName || '').trim();\n\n  return {\n    first_name: fullName.split(/\\s+/)[0] || undefined,\n    full_name: fullName || undefined,\n    email: sender?.email || item.reporterEmail || undefined,\n    business_name:\n      workspace?.businessName || item.tenant?.businessName || undefined,\n    plan: workspace?.plan || undefined,\n    case_reference: item.reference || undefined,\n    subject: item.subject || undefined,\n  };\n}\n\n/**\n * Fill `{{placeholders}}` from the case. Anything unknown stays in the text,\n * braces and all, and is reported so the agent can finish it by hand rather\n * than send a merchant a blank.\n */\nexport function fillPlaceholders(body: string, values: PlaceholderValues) {\n  const missing = new Set<string>();\n\n  const text = body.replace(TOKEN, (token, key: string) => {\n    const value = values[key as PlaceholderKey];\n\n    if (value) return value;\n\n    missing.add(key);\n    return token;\n  });\n\n  return { text, missing: [...missing] };\n}\n\n/** Placeholders that are still unfilled in text about to be sent. */\nexport function unfilledPlaceholders(text: string): string[] {\n  return [...new Set([...text.matchAll(TOKEN)].map((match) => match[1]))];\n}\n\nconst MISSING_FACT = /\\[REQUIRES HUMAN INPUT(?::\\s*([^\\]]*))?\\]/g;\n\n/**\n * Gaps the drafting assistant marked instead of guessing, e.g.\n * `[REQUIRES HUMAN INPUT: payout date]`. Returns what each one asks for.\n */\nexport function missingFacts(text: string): string[] {\n  return [...text.matchAll(MISSING_FACT)].map(\n    (match) => match[1]?.trim() || 'a missing detail',\n  );\n}\n"],"mappings":"AAGO,MAAM,eAAe;AAAA,EAC1B,EAAE,KAAK,cAAc,aAAa,wBAAwB;AAAA,EAC1D,EAAE,KAAK,aAAa,aAAa,uBAAuB;AAAA,EACxD,EAAE,KAAK,SAAS,aAAa,mBAAmB;AAAA,EAChD,EAAE,KAAK,iBAAiB,aAAa,gBAAgB;AAAA,EACrD,EAAE,KAAK,QAAQ,aAAa,eAAe;AAAA,EAC3C,EAAE,KAAK,kBAAkB,aAAa,gCAAgC;AAAA,EACtE,EAAE,KAAK,WAAW,aAAa,eAAe;AAChD;AAMA,MAAM,QAAQ;AAEP,SAAS,kBACd,MACmB;AACnB,QAAM,SAAS,KAAK,gBAAgB;AACpC,QAAM,YAAY,KAAK,gBAAgB;AACvC,QAAM,YAAY,QAAQ,QAAQ,KAAK,gBAAgB,IAAI,KAAK;AAEhE,SAAO;AAAA,IACL,YAAY,SAAS,MAAM,KAAK,EAAE,CAAC,KAAK;AAAA,IACxC,WAAW,YAAY;AAAA,IACvB,OAAO,QAAQ,SAAS,KAAK,iBAAiB;AAAA,IAC9C,eACE,WAAW,gBAAgB,KAAK,QAAQ,gBAAgB;AAAA,IAC1D,MAAM,WAAW,QAAQ;AAAA,IACzB,gBAAgB,KAAK,aAAa;AAAA,IAClC,SAAS,KAAK,WAAW;AAAA,EAC3B;AACF;AAOO,SAAS,iBAAiB,MAAc,QAA2B;AACxE,QAAM,UAAU,oBAAI,IAAY;AAEhC,QAAM,OAAO,KAAK,QAAQ,OAAO,CAAC,OAAO,QAAgB;AACvD,UAAM,QAAQ,OAAO,GAAqB;AAE1C,QAAI,MAAO,QAAO;AAElB,YAAQ,IAAI,GAAG;AACf,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,MAAM,SAAS,CAAC,GAAG,OAAO,EAAE;AACvC;AAGO,SAAS,qBAAqB,MAAwB;AAC3D,SAAO,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,MAAM,CAAC,CAAC,CAAC,CAAC;AACxE;AAEA,MAAM,eAAe;AAMd,SAAS,aAAa,MAAwB;AACnD,SAAO,CAAC,GAAG,KAAK,SAAS,YAAY,CAAC,EAAE;AAAA,IACtC,CAAC,UAAU,MAAM,CAAC,GAAG,KAAK,KAAK;AAAA,EACjC;AACF;","names":[]}

package/dist/admin/support/saved-replies/reply-fields.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button, Input, Textarea } from "@withpotter/ui-kit";
+import { Select } from "@withpotter/ui-kit/select";
+import { PLACEHOLDERS } from "./placeholders";
+import { ANY, CATEGORY_OPTIONS } from "./reply-meta";
+import styles from "./saved-replies.module.css";
+function useReplyDraft(initial) {
+  const [draft, setDraft] = useState(initial);
+  const update = (field, value) => setDraft((current) => ({ ...current, [field]: value }));
+  return {
+    draft,
+    update,
+    invalid: !draft.title.trim() || !draft.body.trim()
+  };
+}
+function TitleField({ form }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      label: "Title",
+      value: form.draft.title,
+      maxLength: 120,
+      placeholder: "e.g. Payout timing",
+      onChange: (event) => form.update("title", event.target.value)
+    }
+  );
+}
+function CategoryField({ form }) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.label, children: "Category" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        ariaLabel: "Category",
+        value: form.draft.category ?? ANY,
+        options: CATEGORY_OPTIONS,
+        searchable: true,
+        onChange: (value) => form.update(
+          "category",
+          value === ANY ? null : value
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: styles.hint, children: "Suggested first on cases in this category." })
+  ] });
+}
+function BodyField({
+  form,
+  rows = 9,
+  placeholders = true
+}) {
+  const bodyRef = useRef(null);
+  const { draft, update } = form;
+  const insertPlaceholder = (key) => {
+    const field = bodyRef.current;
+    const token = `{{${key}}}`;
+    const start = field?.selectionStart ?? draft.body.length;
+    const end = field?.selectionEnd ?? start;
+    update("body", draft.body.slice(0, start) + token + draft.body.slice(end));
+    requestAnimationFrame(() => {
+      field?.focus();
+      field?.setSelectionRange(start + token.length, start + token.length);
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref: bodyRef,
+        label: "Reply",
+        rows,
+        maxLength: 1e4,
+        value: draft.body,
+        onChange: (event) => update("body", event.target.value)
+      }
+    ),
+    placeholders && /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.label, children: "Insert placeholder" }),
+      /* @__PURE__ */ jsx("div", { className: styles.placeholders, children: PLACEHOLDERS.map((placeholder) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          title: placeholder.description,
+          onClick: () => insertPlaceholder(placeholder.key),
+          children: `{{${placeholder.key}}}`
+        },
+        placeholder.key
+      )) }),
+      /* @__PURE__ */ jsx("span", { className: styles.hint, children: "Filled in from the case when you insert the reply." })
+    ] })
+  ] });
+}
+export {
+  BodyField,
+  CategoryField,
+  TitleField,
+  useReplyDraft
+};
+//# sourceMappingURL=reply-fields.js.map