@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/feedback/prompt-delivery-fields.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField, Select } from "@withpotter/ui-kit";
+import { dashboardDestinations } from "@withpotter/lib/dashboard-destinations";
+import { PromptAudienceFields } from "./prompt-audience-fields";
+import { ScheduleField } from "./prompt-schedule-field";
+import styles from "./prompt-builder.module.css";
+const AUDIENCES = [
+  { value: "all", label: "Every merchant" },
+  { value: "workspaces", label: "Chosen workspaces" },
+  { value: "accounts", label: "Chosen accounts" },
+  { value: "segment", label: "A segment" }
+];
+const today = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+function PromptDeliveryFields({
+  draft,
+  update,
+  errorFor
+}) {
+  const routeOptions = draft.routePattern && !dashboardDestinations.some((d) => d.value === draft.routePattern) ? [
+    {
+      value: draft.routePattern,
+      label: `Legacy route (${draft.routePattern})`
+    },
+    ...dashboardDestinations
+  ] : dashboardDestinations;
+  const routeError = errorFor("route");
+  const audienceError = errorFor("audience");
+  return /* @__PURE__ */ jsxs("div", { className: styles.fields, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.pair, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "prompt-audience", className: styles.fieldLabel, children: "Audience" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: "prompt-audience",
+            value: draft.audience.type,
+            options: AUDIENCES,
+            onChange: (type) => update(
+              "audience",
+              type === "all" ? { type: "all" } : type === "workspaces" ? { type, tenantIds: [] } : type === "accounts" ? { type, accountIds: [] } : { type: "segment" }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "prompt-mode", className: styles.fieldLabel, children: "Mode" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: "prompt-mode",
+            value: draft.mode,
+            options: [
+              { value: "campaign", label: "Campaign" },
+              { value: "direct", label: "Direct request" }
+            ],
+            onChange: (value) => update("mode", value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(PromptAudienceFields, { draft, update }),
+    audienceError && /* @__PURE__ */ jsx("span", { className: styles.fieldError, role: "alert", children: audienceError }),
+    /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "prompt-placement", className: styles.fieldLabel, children: "Where it appears" }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: "prompt-placement",
+          value: draft.placement,
+          options: [
+            { value: "next_sign_in", label: "At their next sign-in" },
+            { value: "page", label: "On a specific page" }
+          ],
+          onChange: (value) => update("placement", value)
+        }
+      )
+    ] }),
+    draft.placement === "page" && /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "route-pattern", className: styles.fieldLabel, children: "Dashboard page" }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: "route-pattern",
+          value: draft.routePattern ?? "",
+          onChange: (value) => update("routePattern", value || null),
+          options: routeOptions,
+          searchable: true,
+          searchPlaceholder: "Find a dashboard page",
+          placeholder: "Choose a page"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: routeError ? styles.fieldError : styles.fieldHint, children: routeError ?? "The prompt appears when a merchant opens this page." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScheduleField,
+      {
+        id: "starts-at",
+        label: "Starts",
+        value: draft.startsAt,
+        min: today(),
+        onChange: (value) => update("startsAt", value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScheduleField,
+      {
+        id: "ends-at",
+        label: "Ends",
+        value: draft.endsAt,
+        min: draft.startsAt?.slice(0, 10) ?? today(),
+        error: errorFor("endsAt"),
+        onChange: (value) => update("endsAt", value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberField,
+      {
+        id: "snooze-days",
+        label: "Ask again after",
+        suffix: "days",
+        min: 1,
+        max: 90,
+        value: draft.snoozeDays,
+        hint: "How long a merchant who dismisses it is left alone.",
+        error: errorFor("snooze"),
+        onChange: (value) => update("snoozeDays", value ?? 0)
+      }
+    )
+  ] });
+}
+export {
+  PromptDeliveryFields
+};
+//# sourceMappingURL=prompt-delivery-fields.js.map

package/dist/admin/feedback/prompt-delivery-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-delivery-fields.tsx"],"sourcesContent":["import { NumberField, Select } from '@withpotter/ui-kit';\nimport type { AdminFeedbackPromptInput } from '@withpotter/lib/admin-feedback-api';\nimport { dashboardDestinations } from '@withpotter/lib/dashboard-destinations';\nimport { PromptAudienceFields } from './prompt-audience-fields';\nimport type { UpdatePrompt } from './prompt-draft';\nimport { ScheduleField } from './prompt-schedule-field';\nimport styles from './prompt-builder.module.css';\n\nconst AUDIENCES = [\n  { value: 'all', label: 'Every merchant' },\n  { value: 'workspaces', label: 'Chosen workspaces' },\n  { value: 'accounts', label: 'Chosen accounts' },\n  { value: 'segment', label: 'A segment' },\n];\n\nconst today = () => new Date().toISOString().slice(0, 10);\n\n/** Step 3: who sees it, where, from when to when, and how often. */\nexport function PromptDeliveryFields({\n  draft,\n  update,\n  errorFor,\n}: {\n  draft: AdminFeedbackPromptInput;\n  update: UpdatePrompt;\n  errorFor: (field: string) => string | undefined;\n}) {\n  const routeOptions =\n    draft.routePattern &&\n    !dashboardDestinations.some((d) => d.value === draft.routePattern)\n      ? [\n          {\n            value: draft.routePattern,\n            label: `Legacy route (${draft.routePattern})`,\n          },\n          ...dashboardDestinations,\n        ]\n      : dashboardDestinations;\n  const routeError = errorFor('route');\n  const audienceError = errorFor('audience');\n\n  return (\n    <div className={styles.fields}>\n      <div className={styles.pair}>\n        <div className={styles.field}>\n          <label htmlFor=\"prompt-audience\" className={styles.fieldLabel}>\n            Audience\n          </label>\n          <Select\n            id=\"prompt-audience\"\n            value={draft.audience.type}\n            options={AUDIENCES}\n            onChange={(type) =>\n              update(\n                'audience',\n                type === 'all'\n                  ? { type: 'all' }\n                  : type === 'workspaces'\n                    ? { type, tenantIds: [] }\n                    : type === 'accounts'\n                      ? { type, accountIds: [] }\n                      : { type: 'segment' },\n              )\n            }\n          />\n        </div>\n        <div className={styles.field}>\n          <label htmlFor=\"prompt-mode\" className={styles.fieldLabel}>\n            Mode\n          </label>\n          <Select\n            id=\"prompt-mode\"\n            value={draft.mode}\n            options={[\n              { value: 'campaign', label: 'Campaign' },\n              { value: 'direct', label: 'Direct request' },\n            ]}\n            onChange={(value) =>\n              update('mode', value as AdminFeedbackPromptInput['mode'])\n            }\n          />\n        </div>\n      </div>\n      <PromptAudienceFields draft={draft} update={update} />\n      {audienceError && (\n        <span className={styles.fieldError} role=\"alert\">\n          {audienceError}\n        </span>\n      )}\n      <div className={styles.field}>\n        <label htmlFor=\"prompt-placement\" className={styles.fieldLabel}>\n          Where it appears\n        </label>\n        <Select\n          id=\"prompt-placement\"\n          value={draft.placement}\n          options={[\n            { value: 'next_sign_in', label: 'At their next sign-in' },\n            { value: 'page', label: 'On a specific page' },\n          ]}\n          onChange={(value) =>\n            update('placement', value as AdminFeedbackPromptInput['placement'])\n          }\n        />\n      </div>\n      {draft.placement === 'page' && (\n        <div className={styles.field}>\n          <label htmlFor=\"route-pattern\" className={styles.fieldLabel}>\n            Dashboard page\n          </label>\n          <Select\n            id=\"route-pattern\"\n            value={draft.routePattern ?? ''}\n            onChange={(value) => update('routePattern', value || null)}\n            options={routeOptions}\n            searchable\n            searchPlaceholder=\"Find a dashboard page\"\n            placeholder=\"Choose a page\"\n          />\n          <span className={routeError ? styles.fieldError : styles.fieldHint}>\n            {routeError ??\n              'The prompt appears when a merchant opens this page.'}\n          </span>\n        </div>\n      )}\n      <ScheduleField\n        id=\"starts-at\"\n        label=\"Starts\"\n        value={draft.startsAt}\n        min={today()}\n        onChange={(value) => update('startsAt', value)}\n      />\n      <ScheduleField\n        id=\"ends-at\"\n        label=\"Ends\"\n        value={draft.endsAt}\n        min={draft.startsAt?.slice(0, 10) ?? today()}\n        error={errorFor('endsAt')}\n        onChange={(value) => update('endsAt', value)}\n      />\n      <NumberField\n        id=\"snooze-days\"\n        label=\"Ask again after\"\n        suffix=\"days\"\n        min={1}\n        max={90}\n        value={draft.snoozeDays}\n        hint=\"How long a merchant who dismisses it is left alone.\"\n        error={errorFor('snooze')}\n        onChange={(value) => update('snoozeDays', value ?? 0)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/feedback/prompt-dialog.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import {
+  Banner,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle
+} from "@withpotter/ui-kit";
+import { Reveal } from "../_fx";
+import { PromptStepper } from "./prompt-stepper";
+import { useSteps } from "./use-steps";
+import styles from "./prompt-dialog.module.css";
+function PromptDialog({
+  title,
+  subtitle,
+  steps,
+  preview,
+  saveLabel,
+  saving,
+  error,
+  onClearError,
+  onSave,
+  onRequestClose
+}) {
+  const nav = useSteps(steps);
+  const contentRef = useRef(null);
+  const { current } = nav;
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => !open && onRequestClose(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      ref: contentRef,
+      className: `adm-shell ${styles.dialog} max-w-[960px] gap-0 overflow-hidden p-0`,
+      onEscapeKeyDown: (event) => {
+        event.preventDefault();
+        const target = event.target;
+        if (target?.closest?.('[aria-expanded="true"]') || target && !contentRef.current?.contains(target))
+          return;
+        onRequestClose();
+      },
+      onPointerDownOutside: (event) => event.preventDefault(),
+      onInteractOutside: (event) => event.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+          /* @__PURE__ */ jsx(PromptStepper, { steps, index: nav.index, onGoTo: nav.goTo }),
+          /* @__PURE__ */ jsxs("section", { className: styles.main, "aria-label": current?.label, children: [
+            error && /* @__PURE__ */ jsx(Banner, { tone: "error", title: "Not saved", onDismiss: onClearError, children: error }),
+            nav.blocked && /* @__PURE__ */ jsx(Banner, { tone: "neutral", onDismiss: nav.clearBlocked, children: nav.blocked }),
+            /* @__PURE__ */ jsxs("div", { className: styles.stepHead, children: [
+              /* @__PURE__ */ jsxs("p", { className: styles.eyebrow, children: [
+                "Step ",
+                nav.index + 1,
+                " of ",
+                steps.length
+              ] }),
+              /* @__PURE__ */ jsx("h3", { className: styles.stepTitle, children: current?.label }),
+              /* @__PURE__ */ jsx("p", { className: styles.stepDesc, children: current?.description })
+            ] }),
+            /* @__PURE__ */ jsx(Reveal, { children: current?.content }, current?.key)
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.preview, children: preview })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: styles.foot, children: [
+          nav.isFirst ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: onRequestClose,
+              disabled: saving,
+              children: "Cancel"
+            }
+          ) : /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: nav.back, disabled: saving, children: "Back" }),
+          nav.isLast ? /* @__PURE__ */ jsx(Button, { onClick: () => nav.passes() && onSave(), loading: saving, children: saveLabel }) : /* @__PURE__ */ jsx(Button, { onClick: nav.next, disabled: saving, children: "Next" })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  PromptDialog
+};
+//# sourceMappingURL=prompt-dialog.js.map

package/dist/admin/feedback/prompt-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, type ReactNode } from 'react';\nimport {\n  Banner,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n} from '@withpotter/ui-kit';\nimport { Reveal } from '../_fx';\nimport { PromptStepper } from './prompt-stepper';\nimport { useSteps, type DialogStep } from './use-steps';\nimport styles from './prompt-dialog.module.css';\n\n/**\n * A stepped create/edit flow as a large dialog over the console, so the\n * sidebar and the page stay in view behind it: steps on the left, the\n * current step's fields in the middle, the live preview on the right.\n * Every way out (Escape, the close button, Cancel) goes through\n * `onRequestClose`, which decides whether to ask first.\n */\nexport function PromptDialog({\n  title,\n  subtitle,\n  steps,\n  preview,\n  saveLabel,\n  saving,\n  error,\n  onClearError,\n  onSave,\n  onRequestClose,\n}: {\n  title: string;\n  subtitle: string;\n  steps: DialogStep[];\n  preview: ReactNode;\n  saveLabel: string;\n  saving: boolean;\n  error: string | null;\n  onClearError: () => void;\n  onSave: () => void;\n  onRequestClose: () => void;\n}) {\n  const nav = useSteps(steps);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const { current } = nav;\n\n  return (\n    <Dialog open onOpenChange={(open) => !open && onRequestClose()}>\n      <DialogContent\n        ref={contentRef}\n        className={`adm-shell ${styles.dialog} max-w-[960px] gap-0 overflow-hidden p-0`}\n        onEscapeKeyDown={(event) => {\n          event.preventDefault();\n          const target = event.target as Element | null;\n          // Escape in an open menu closes the menu, never the dialog.\n          if (\n            target?.closest?.('[aria-expanded=\"true\"]') ||\n            (target && !contentRef.current?.contains(target))\n          )\n            return;\n          onRequestClose();\n        }}\n        // A stray click (or one on a portalled menu) never throws work away.\n        onPointerDownOutside={(event) => event.preventDefault()}\n        onInteractOutside={(event) => event.preventDefault()}\n      >\n        <header className={styles.head}>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{subtitle}</DialogDescription>\n        </header>\n        <div className={styles.body}>\n          <PromptStepper steps={steps} index={nav.index} onGoTo={nav.goTo} />\n          <section className={styles.main} aria-label={current?.label}>\n            {error && (\n              <Banner tone=\"error\" title=\"Not saved\" onDismiss={onClearError}>\n                {error}\n              </Banner>\n            )}\n            {nav.blocked && (\n              <Banner tone=\"neutral\" onDismiss={nav.clearBlocked}>\n                {nav.blocked}\n              </Banner>\n            )}\n            <div className={styles.stepHead}>\n              <p className={styles.eyebrow}>\n                Step {nav.index + 1} of {steps.length}\n              </p>\n              <h3 className={styles.stepTitle}>{current?.label}</h3>\n              <p className={styles.stepDesc}>{current?.description}</p>\n            </div>\n            <Reveal key={current?.key}>{current?.content}</Reveal>\n          </section>\n          <div className={styles.preview}>{preview}</div>\n        </div>\n        <footer className={styles.foot}>\n          {nav.isFirst ? (\n            <Button\n              variant=\"secondary\"\n              onClick={onRequestClose}\n              disabled={saving}\n            >\n              Cancel\n            </Button>\n          ) : (\n            <Button variant=\"secondary\" onClick={nav.back} disabled={saving}>\n              Back\n            </Button>\n          )}\n          {nav.isLast ? (\n            <Button onClick={() => nav.passes() && onSave()} loading={saving}>\n              {saveLabel}\n            </Button>\n          ) : (\n            <Button onClick={nav.next} disabled={saving}>\n              Next\n            </Button>\n          )}\n        </footer>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAsEQ,SACE,KADF;AApER,SAAS,cAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,gBAAiC;AAC1C,OAAO,YAAY;AASZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,QAAM,MAAM,SAAS,KAAK;AAC1B,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,EAAE,QAAQ,IAAI;AAEpB,SACE,oBAAC,UAAO,MAAI,MAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,eAAe,GAC3D;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,OAAO,MAAM;AAAA,MACrC,iBAAiB,CAAC,UAAU;AAC1B,cAAM,eAAe;AACrB,cAAM,SAAS,MAAM;AAErB,YACE,QAAQ,UAAU,wBAAwB,KACzC,UAAU,CAAC,WAAW,SAAS,SAAS,MAAM;AAE/C;AACF,uBAAe;AAAA,MACjB;AAAA,MAEA,sBAAsB,CAAC,UAAU,MAAM,eAAe;AAAA,MACtD,mBAAmB,CAAC,UAAU,MAAM,eAAe;AAAA,MAEnD;AAAA,6BAAC,YAAO,WAAW,OAAO,MACxB;AAAA,8BAAC,eAAa,iBAAM;AAAA,UACpB,oBAAC,qBAAmB,oBAAS;AAAA,WAC/B;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA,8BAAC,iBAAc,OAAc,OAAO,IAAI,OAAO,QAAQ,IAAI,MAAM;AAAA,UACjE,qBAAC,aAAQ,WAAW,OAAO,MAAM,cAAY,SAAS,OACnD;AAAA,qBACC,oBAAC,UAAO,MAAK,SAAQ,OAAM,aAAY,WAAW,cAC/C,iBACH;AAAA,YAED,IAAI,WACH,oBAAC,UAAO,MAAK,WAAU,WAAW,IAAI,cACnC,cAAI,SACP;AAAA,YAEF,qBAAC,SAAI,WAAW,OAAO,UACrB;AAAA,mCAAC,OAAE,WAAW,OAAO,SAAS;AAAA;AAAA,gBACtB,IAAI,QAAQ;AAAA,gBAAE;AAAA,gBAAK,MAAM;AAAA,iBACjC;AAAA,cACA,oBAAC,QAAG,WAAW,OAAO,WAAY,mBAAS,OAAM;AAAA,cACjD,oBAAC,OAAE,WAAW,OAAO,UAAW,mBAAS,aAAY;AAAA,eACvD;AAAA,YACA,oBAAC,UAA2B,mBAAS,WAAxB,SAAS,GAAuB;AAAA,aAC/C;AAAA,UACA,oBAAC,SAAI,WAAW,OAAO,SAAU,mBAAQ;AAAA,WAC3C;AAAA,QACA,qBAAC,YAAO,WAAW,OAAO,MACvB;AAAA,cAAI,UACH;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,UAAU;AAAA,cACX;AAAA;AAAA,UAED,IAEA,oBAAC,UAAO,SAAQ,aAAY,SAAS,IAAI,MAAM,UAAU,QAAQ,kBAEjE;AAAA,UAED,IAAI,SACH,oBAAC,UAAO,SAAS,MAAM,IAAI,OAAO,KAAK,OAAO,GAAG,SAAS,QACvD,qBACH,IAEA,oBAAC,UAAO,SAAS,IAAI,MAAM,UAAU,QAAQ,kBAE7C;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/admin/feedback/prompt-dialog.module.css

@@ -0,0 +1,199 @@
+/* The prompt dialog: steps left, fields centre, merchant preview right. */
+
+.dialog {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  height: min(760px, calc(100dvh - 2rem));
+  overflow: hidden;
+}
+
+.head {
+  display: grid;
+  gap: 4px;
+  padding: 24px 56px 16px 24px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.body {
+  display: grid;
+  grid-template-columns: 208px minmax(0, 1fr) 280px;
+  min-height: 0;
+}
+
+/* ---- Left rail ---- */
+.rail {
+  padding: 16px 12px;
+  overflow-y: auto;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--bg-subtle);
+}
+
+.steps {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stepItem {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-secondary);
+  text-align: left;
+  cursor: default;
+  transition: background var(--adm-fast);
+}
+
+.stepItem[data-state='done'] {
+  cursor: pointer;
+}
+
+.stepItem[data-state='done']:hover {
+  background: var(--adm-hover);
+}
+
+.stepItem[data-state='current'] {
+  background: var(--bg-base);
+  box-shadow: inset 0 0 0 1px var(--adm-line);
+  color: var(--text-primary);
+}
+
+.stepItem[data-state='upcoming'] {
+  color: var(--text-tertiary);
+}
+
+.stepItem:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.stepMark {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--border-default);
+  color: var(--text-tertiary);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.stepItem[data-state='current'] .stepMark {
+  background: var(--brand-500);
+  color: var(--adm-on-accent);
+}
+
+.stepItem[data-state='done'] .stepMark {
+  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
+  color: var(--brand-600);
+}
+
+.stepText {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.stepLabel {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.stepHint {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* ---- Centre ---- */
+.main {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.stepHead {
+  display: grid;
+}
+
+.stepHead > * {
+  margin: 0;
+}
+
+.eyebrow {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.stepTitle {
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.stepDesc {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+/* ---- Right: the preview stage brings its own brand tint ---- */
+.preview {
+  padding: 16px;
+  overflow-y: auto;
+  border-left: 1px solid var(--border-subtle);
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 24px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-subtle);
+}
+
+@media (max-width: 900px) {
+  /* Narrow: one scroll, rail on top, the preview after the fields. */
+  .body {
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    overflow-y: auto;
+  }
+
+  .rail,
+  .main,
+  .preview {
+    overflow: visible;
+  }
+
+  .rail {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .steps {
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .preview {
+    border-top: 1px solid var(--border-subtle);
+    border-left: 0;
+  }
+}

package/dist/admin/feedback/prompt-draft.js

@@ -0,0 +1,71 @@
+const KIND_OPTIONS = [
+  { value: "nps", label: "NPS (0-10)" },
+  { value: "csat", label: "CSAT (1-5)" },
+  { value: "ces", label: "CES (1-7)" },
+  { value: "thumb", label: "Thumbs down/up" },
+  { value: "star", label: "Stars (1-5)" }
+];
+const SCALE_BY_KIND = {
+  nps: [0, 10],
+  csat: [1, 5],
+  ces: [1, 7],
+  thumb: [-1, 1],
+  star: [1, 5]
+};
+const KEY_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)*$/;
+function emptyDraft(voice = true) {
+  return {
+    key: "",
+    name: "",
+    question: "",
+    followUp: null,
+    kind: "nps",
+    scaleMin: 0,
+    scaleMax: 10,
+    allowComment: true,
+    allowVoice: voice,
+    mode: "campaign",
+    audience: { type: "all" },
+    placement: "next_sign_in",
+    routePattern: null,
+    startsAt: null,
+    endsAt: null,
+    snoozeDays: 14
+  };
+}
+function toInput(prompt) {
+  return {
+    key: prompt.key,
+    name: prompt.name,
+    question: prompt.question,
+    followUp: prompt.followUp,
+    kind: prompt.kind,
+    scaleMin: prompt.scaleMin,
+    scaleMax: prompt.scaleMax,
+    allowComment: prompt.allowComment,
+    allowVoice: prompt.allowVoice,
+    mode: prompt.mode,
+    audience: prompt.audience,
+    placement: prompt.placement,
+    routePattern: prompt.routePattern,
+    startsAt: prompt.startsAt,
+    endsAt: prompt.endsAt,
+    snoozeDays: prompt.snoozeDays
+  };
+}
+function isInvalid(draft) {
+  return draft.key.trim().length < 3 || !KEY_PATTERN.test(draft.key) || !draft.name.trim() || !draft.question.trim() || draft.snoozeDays < 1 || draft.snoozeDays > 90 || draft.placement === "page" && !draft.routePattern?.trim() || Boolean(
+    draft.startsAt && draft.endsAt && new Date(draft.startsAt) >= new Date(draft.endsAt)
+  ) || draft.audience.type !== "all" && Object.values(draft.audience).every(
+    (value) => !Array.isArray(value) || value.length === 0
+  );
+}
+export {
+  KEY_PATTERN,
+  KIND_OPTIONS,
+  SCALE_BY_KIND,
+  emptyDraft,
+  isInvalid,
+  toInput
+};
+//# sourceMappingURL=prompt-draft.js.map

package/dist/admin/feedback/prompt-draft.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/feedback/prompt-draft.ts"],"sourcesContent":["import type {\n  AdminFeedbackPrompt,\n  AdminFeedbackPromptInput,\n} from '@withpotter/lib/admin-feedback-api';\n\nexport type UpdatePrompt = <K extends keyof AdminFeedbackPromptInput>(\n  field: K,\n  value: AdminFeedbackPromptInput[K],\n) => void;\n\nexport const KIND_OPTIONS = [\n  { value: 'nps', label: 'NPS (0-10)' },\n  { value: 'csat', label: 'CSAT (1-5)' },\n  { value: 'ces', label: 'CES (1-7)' },\n  { value: 'thumb', label: 'Thumbs down/up' },\n  { value: 'star', label: 'Stars (1-5)' },\n];\n\nexport const SCALE_BY_KIND = {\n  nps: [0, 10],\n  csat: [1, 5],\n  ces: [1, 7],\n  thumb: [-1, 1],\n  star: [1, 5],\n} as const;\n\nexport const KEY_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)*$/;\n\n/** A new prompt; voice notes start on only where the engine takes them. */\nexport function emptyDraft(voice = true): AdminFeedbackPromptInput {\n  return {\n    key: '',\n    name: '',\n    question: '',\n    followUp: null,\n    kind: 'nps',\n    scaleMin: 0,\n    scaleMax: 10,\n    allowComment: true,\n    allowVoice: voice,\n    mode: 'campaign',\n    audience: { type: 'all' },\n    placement: 'next_sign_in',\n    routePattern: null,\n    startsAt: null,\n    endsAt: null,\n    snoozeDays: 14,\n  };\n}\n\nexport function toInput(prompt: AdminFeedbackPrompt): AdminFeedbackPromptInput {\n  return {\n    key: prompt.key,\n    name: prompt.name,\n    question: prompt.question,\n    followUp: prompt.followUp,\n    kind: prompt.kind,\n    scaleMin: prompt.scaleMin,\n    scaleMax: prompt.scaleMax,\n    allowComment: prompt.allowComment,\n    allowVoice: prompt.allowVoice,\n    mode: prompt.mode,\n    audience: prompt.audience,\n    placement: prompt.placement,\n    routePattern: prompt.routePattern,\n    startsAt: prompt.startsAt,\n    endsAt: prompt.endsAt,\n    snoozeDays: prompt.snoozeDays,\n  };\n}\n\n/** True when the draft cannot be saved as it stands. */\nexport function isInvalid(draft: AdminFeedbackPromptInput) {\n  return (\n    draft.key.trim().length < 3 ||\n    !KEY_PATTERN.test(draft.key) ||\n    !draft.name.trim() ||\n    !draft.question.trim() ||\n    draft.snoozeDays < 1 ||\n    draft.snoozeDays > 90 ||\n    (draft.placement === 'page' && !draft.routePattern?.trim()) ||\n    Boolean(\n      draft.startsAt &&\n      draft.endsAt &&\n      new Date(draft.startsAt) >= new Date(draft.endsAt),\n    ) ||\n    (draft.audience.type !== 'all' &&\n      Object.values(draft.audience).every(\n        (value) => !Array.isArray(value) || value.length === 0,\n      ))\n  );\n}\n"],"mappings":"AAUO,MAAM,eAAe;AAAA,EAC1B,EAAE,OAAO,OAAO,OAAO,aAAa;AAAA,EACpC,EAAE,OAAO,QAAQ,OAAO,aAAa;AAAA,EACrC,EAAE,OAAO,OAAO,OAAO,YAAY;AAAA,EACnC,EAAE,OAAO,SAAS,OAAO,iBAAiB;AAAA,EAC1C,EAAE,OAAO,QAAQ,OAAO,cAAc;AACxC;AAEO,MAAM,gBAAgB;AAAA,EAC3B,KAAK,CAAC,GAAG,EAAE;AAAA,EACX,MAAM,CAAC,GAAG,CAAC;AAAA,EACX,KAAK,CAAC,GAAG,CAAC;AAAA,EACV,OAAO,CAAC,IAAI,CAAC;AAAA,EACb,MAAM,CAAC,GAAG,CAAC;AACb;AAEO,MAAM,cAAc;AAGpB,SAAS,WAAW,QAAQ,MAAgC;AACjE,SAAO;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU,EAAE,MAAM,MAAM;AAAA,IACxB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;AAEO,SAAS,QAAQ,QAAuD;AAC7E,SAAO;AAAA,IACL,KAAK,OAAO;AAAA,IACZ,MAAM,OAAO;AAAA,IACb,UAAU,OAAO;AAAA,IACjB,UAAU,OAAO;AAAA,IACjB,MAAM,OAAO;AAAA,IACb,UAAU,OAAO;AAAA,IACjB,UAAU,OAAO;AAAA,IACjB,cAAc,OAAO;AAAA,IACrB,YAAY,OAAO;AAAA,IACnB,MAAM,OAAO;AAAA,IACb,UAAU,OAAO;AAAA,IACjB,WAAW,OAAO;AAAA,IAClB,cAAc,OAAO;AAAA,IACrB,UAAU,OAAO;AAAA,IACjB,QAAQ,OAAO;AAAA,IACf,YAAY,OAAO;AAAA,EACrB;AACF;AAGO,SAAS,UAAU,OAAiC;AACzD,SACE,MAAM,IAAI,KAAK,EAAE,SAAS,KAC1B,CAAC,YAAY,KAAK,MAAM,GAAG,KAC3B,CAAC,MAAM,KAAK,KAAK,KACjB,CAAC,MAAM,SAAS,KAAK,KACrB,MAAM,aAAa,KACnB,MAAM,aAAa,MAClB,MAAM,cAAc,UAAU,CAAC,MAAM,cAAc,KAAK,KACzD;AAAA,IACE,MAAM,YACN,MAAM,UACN,IAAI,KAAK,MAAM,QAAQ,KAAK,IAAI,KAAK,MAAM,MAAM;AAAA,EACnD,KACC,MAAM,SAAS,SAAS,SACvB,OAAO,OAAO,MAAM,QAAQ,EAAE;AAAA,IAC5B,CAAC,UAAU,CAAC,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAAA,EACvD;AAEN;","names":[]}

package/dist/admin/feedback/prompt-insights.js

@@ -0,0 +1,120 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button, TableShell, Th } from "@withpotter/ui-kit";
+import { Select } from "@withpotter/ui-kit/select";
+import {
+  adminFeedbackPromptsApi
+} from "@withpotter/lib/admin-feedback-api";
+import { EmptyState, Skeleton } from "../_ui";
+import styles from "./prompt-operations.module.css";
+const PERIODS = [
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" },
+  { value: "365", label: "Last year" }
+];
+const percent = (value) => value === null ? "\u2013" : `${Math.round(value * 100)}%`;
+function PromptInsights({ prompt }) {
+  const [days, setDays] = useState("90");
+  const insights = useQuery({
+    queryKey: [
+      "platform-admin",
+      "feedback",
+      "prompts",
+      prompt.id,
+      "insights",
+      days
+    ],
+    queryFn: () => adminFeedbackPromptsApi.insights(prompt.id, Number(days))
+  });
+  const data = insights.data;
+  const isNps = prompt.kind === "nps";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "adm-panel",
+      "aria-labelledby": "insights-heading",
+      "aria-busy": insights.isLoading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.head, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { id: "insights-heading", className: styles.title, children: "Prompt insights" }),
+            /* @__PURE__ */ jsx("p", { className: styles.caption, children: "Aggregate delivery and response health. No merchant identities." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.period, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              size: "sm",
+              triggerClassName: "h-7",
+              ariaLabel: "Period",
+              value: days,
+              onChange: setDays,
+              options: PERIODS
+            }
+          ) })
+        ] }),
+        insights.isLoading && /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(Skeleton, { height: 136 }) }),
+        insights.isError && /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            tone: "error",
+            title: "Prompt insights could not be loaded",
+            action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void insights.refetch(), children: "Try again" })
+          }
+        ),
+        data && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dl", { className: styles.figures, children: [
+            ["Audience", data.audienceSize.toLocaleString()],
+            ["Reached", data.reached.toLocaleString()],
+            ["Shown", data.shown.toLocaleString()],
+            ["Answered", data.answered.toLocaleString()],
+            ["Dismissed", data.dismissed.toLocaleString()],
+            ["Waiting", data.waiting.toLocaleString()],
+            ["Response rate", percent(data.responseRate)],
+            ["Dismissal rate", percent(data.dismissalRate)],
+            [
+              isNps ? "NPS" : "Average score",
+              isNps ? data.nps ?? "\u2013" : data.average?.toFixed(1) ?? "\u2013"
+            ],
+            ["With context", data.withContext.toLocaleString()]
+          ].map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: styles.figure, children: [
+            /* @__PURE__ */ jsx("dt", { children: label }),
+            /* @__PURE__ */ jsx("dd", { children: value })
+          ] }, label)) }),
+          /* @__PURE__ */ jsx("h4", { className: styles.subTitle, children: "Recent response trend" }),
+          data.trend.length ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.trend,
+              tabIndex: 0,
+              "aria-label": "Recent response trend",
+              children: /* @__PURE__ */ jsx(
+                TableShell,
+                {
+                  bare: true,
+                  minWidth: 320,
+                  density: "compact",
+                  head: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx(Th, { children: "Date" }),
+                    /* @__PURE__ */ jsx(Th, { align: "right", children: "Answers" }),
+                    /* @__PURE__ */ jsx(Th, { align: "right", children: "Average" })
+                  ] }),
+                  children: data.trend.slice(-14).map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { className: styles.date, children: row.date }),
+                    /* @__PURE__ */ jsx("td", { className: styles.num, children: row.answered }),
+                    /* @__PURE__ */ jsx("td", { className: styles.num, children: row.average?.toFixed(1) ?? "\u2013" })
+                  ] }, row.date))
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("p", { className: styles.caption, children: "No responses in this period." })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PromptInsights
+};
+//# sourceMappingURL=prompt-insights.js.map