@withpotter/components 0.13.0-next.101

package/dist/feedback/merchant-feedback-prompt.js

@@ -0,0 +1,289 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Star, ThumbsDown, ThumbsUp } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import {
+  feedbackPromptsApi
+} from "@withpotter/lib/api/feedback-prompts";
+import { cn } from "@withpotter/lib/utils";
+import {
+  VoiceResponseRecorder
+} from "./voice-response-recorder";
+const KIND_LABELS = {
+  nps: "Recommendation score",
+  csat: "Satisfaction score",
+  ces: "Effort score",
+  thumb: "Your response",
+  star: "Star rating"
+};
+function MerchantFeedbackPrompt({
+  tenantSlug,
+  route
+}) {
+  const { toast } = useToast();
+  const seenPromptKeys = useRef(/* @__PURE__ */ new Set());
+  const [prompt, setPrompt] = useState(null);
+  const [score, setScore] = useState(null);
+  const [comment, setComment] = useState("");
+  const [recordedSignalId, setRecordedSignalId] = useState(null);
+  const [voiceResponse, setVoiceResponse] = useState(
+    null
+  );
+  const [uploadedAudio, setUploadedAudio] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  useEffect(() => {
+    let current = true;
+    setPrompt(null);
+    setScore(null);
+    setComment("");
+    setRecordedSignalId(null);
+    setVoiceResponse(null);
+    setUploadedAudio(null);
+    if (!tenantSlug) return () => void 0;
+    feedbackPromptsApi.eligible(tenantSlug, route).then(([eligiblePrompt]) => {
+      if (!current || !eligiblePrompt) return;
+      setPrompt(eligiblePrompt);
+      if (!seenPromptKeys.current.has(eligiblePrompt.key)) {
+        seenPromptKeys.current.add(eligiblePrompt.key);
+        void feedbackPromptsApi.markSeen(tenantSlug, eligiblePrompt.key).catch(() => void 0);
+      }
+    }).catch(() => void 0);
+    return () => {
+      current = false;
+    };
+  }, [route, tenantSlug]);
+  const clearPrompt = () => {
+    setPrompt(null);
+    setScore(null);
+    setComment("");
+    setRecordedSignalId(null);
+    setVoiceResponse(null);
+    setUploadedAudio(null);
+  };
+  const dismiss = async (snooze) => {
+    if (!prompt || !tenantSlug) return;
+    setSubmitting(true);
+    try {
+      await feedbackPromptsApi.dismiss(
+        tenantSlug,
+        prompt.key,
+        snooze ? prompt.snoozeDays : void 0
+      );
+      clearPrompt();
+    } catch {
+      toast({
+        title: "Could not update this prompt",
+        description: "Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const submit = async () => {
+    if (!prompt || !tenantSlug || score === null) return;
+    setSubmitting(true);
+    let signalId = recordedSignalId;
+    let audio = uploadedAudio;
+    try {
+      if (!signalId) {
+        const signal = await feedbackPromptsApi.recordSignal(tenantSlug, {
+          prompt,
+          score,
+          route
+        });
+        signalId = signal.id;
+        setRecordedSignalId(signal.id);
+      }
+      if (prompt.allowVoice && voiceResponse && !audio) {
+        const upload = await feedbackPromptsApi.uploadAudio(
+          tenantSlug,
+          voiceResponse.file
+        );
+        audio = {
+          url: upload.url,
+          seconds: Math.min(
+            120,
+            Math.max(1, Math.round(upload.duration || voiceResponse.seconds))
+          )
+        };
+        setUploadedAudio(audio);
+      }
+      if (prompt.allowComment && comment.trim() || audio) {
+        await feedbackPromptsApi.attachComment(tenantSlug, signalId, {
+          comment: comment.trim() || void 0,
+          audioUrl: audio?.url,
+          audioSeconds: audio?.seconds
+        });
+      }
+      toast({ title: "Thanks for sharing your feedback" });
+      clearPrompt();
+    } catch {
+      toast({
+        title: signalId ? "Your score was saved" : "Could not save your response",
+        description: signalId ? "Your response details were not added. Retry without sending the score or audio again." : "Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: Boolean(prompt),
+      onOpenChange: (open) => {
+        if (!open && !submitting) clearPrompt();
+      },
+      children: prompt ? /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90dvh] w-[calc(100%-2rem)] max-w-xl overflow-y-auto rounded-[4px] border-[var(--border-default)] p-4 sm:p-6", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "pr-7 text-left", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: prompt.question }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "A quick answer helps us improve Box for your team." })
+        ] }),
+        /* @__PURE__ */ jsx(ScorePicker, { prompt, score, onChange: setScore }),
+        prompt.allowComment && score !== null ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: "merchant-prompt-comment",
+              className: "text-sm font-medium text-[var(--text-primary)]",
+              children: [
+                prompt.followUp || "What led to your answer?",
+                /* @__PURE__ */ jsx("span", { className: "ml-1 font-normal text-[var(--text-muted)]", children: "Optional" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "merchant-prompt-comment",
+              value: comment,
+              onChange: (event) => setComment(event.target.value),
+              maxLength: 1e3,
+              rows: 4,
+              disabled: submitting,
+              className: "w-full resize-none rounded-[4px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] disabled:opacity-60",
+              placeholder: "Add a little context"
+            }
+          )
+        ] }) : null,
+        prompt.allowVoice && score !== null ? /* @__PURE__ */ jsx(
+          VoiceResponseRecorder,
+          {
+            disabled: submitting,
+            onChange: (response) => {
+              setVoiceResponse(response);
+              setUploadedAudio(null);
+            }
+          },
+          prompt.key
+        ) : null,
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 sm:space-x-0", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              disabled: submitting,
+              onClick: () => void dismiss(false),
+              children: "Don't ask again"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              disabled: submitting,
+              onClick: () => void dismiss(true),
+              children: "Remind me later"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              loading: submitting,
+              disabled: score === null,
+              onClick: () => void submit(),
+              children: recordedSignalId ? "Retry details" : "Submit"
+            }
+          )
+        ] })
+      ] }) : null
+    }
+  );
+}
+function ScorePicker({
+  prompt,
+  score,
+  onChange
+}) {
+  const values = prompt.kind === "thumb" ? [-1, 1] : Array.from(
+    { length: prompt.scaleMax - prompt.scaleMin + 1 },
+    (_, index) => prompt.scaleMin + index
+  );
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { className: "mb-3 text-sm font-medium text-[var(--text-secondary)]", children: KIND_LABELS[prompt.kind] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        className: cn(
+          "grid gap-2",
+          prompt.kind === "thumb" ? "grid-cols-2" : prompt.kind === "nps" ? "grid-cols-6 sm:grid-cols-11" : "grid-flow-col auto-cols-fr"
+        ),
+        children: values.map((value) => {
+          const selected = score === value;
+          const label = scoreLabel(prompt.kind, value, prompt.scaleMax);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": label,
+              title: label,
+              onClick: () => onChange(value),
+              className: cn(
+                "flex min-h-11 items-center justify-center rounded-[4px] border px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+                selected ? "border-[var(--accent-primary)] bg-[var(--accent-secondary)] text-[var(--accent-primary)]" : "border-[var(--border-default)] bg-[var(--bg-base)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"
+              ),
+              children: prompt.kind === "thumb" ? value === 1 ? /* @__PURE__ */ jsx(ThumbsUp, { className: "size-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ThumbsDown, { className: "size-5", "aria-hidden": "true" }) : prompt.kind === "star" ? /* @__PURE__ */ jsx(
+                Star,
+                {
+                  className: cn("h-5 w-5", selected && "fill-current"),
+                  "aria-hidden": "true"
+                }
+              ) : value
+            },
+            value
+          );
+        })
+      }
+    ),
+    prompt.kind === "nps" ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between text-xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx("span", { children: "Not likely" }),
+      /* @__PURE__ */ jsx("span", { children: "Very likely" })
+    ] }) : null
+  ] });
+}
+function scoreLabel(kind, value, maximum) {
+  if (kind === "thumb") return value === 1 ? "Thumbs up" : "Thumbs down";
+  if (kind === "star") return `${value} out of ${maximum} stars`;
+  return `${value} out of ${maximum}`;
+}
+export {
+  MerchantFeedbackPrompt
+};
+//# sourceMappingURL=merchant-feedback-prompt.js.map

package/dist/feedback/merchant-feedback-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/merchant-feedback-prompt.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Star, ThumbsDown, ThumbsUp } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport {\n  EligibleFeedbackPrompt,\n  feedbackPromptsApi,\n} from '@withpotter/lib/api/feedback-prompts';\nimport { cn } from '@withpotter/lib/utils';\nimport {\n  VoiceResponse,\n  VoiceResponseRecorder,\n} from './voice-response-recorder';\n\ninterface MerchantFeedbackPromptProps {\n  tenantSlug?: string;\n  route: string;\n}\n\nconst KIND_LABELS: Record<EligibleFeedbackPrompt['kind'], string> = {\n  nps: 'Recommendation score',\n  csat: 'Satisfaction score',\n  ces: 'Effort score',\n  thumb: 'Your response',\n  star: 'Star rating',\n};\n\nexport function MerchantFeedbackPrompt({\n  tenantSlug,\n  route,\n}: MerchantFeedbackPromptProps) {\n  const { toast } = useToast();\n  const seenPromptKeys = useRef(new Set<string>());\n  const [prompt, setPrompt] = useState<EligibleFeedbackPrompt | null>(null);\n  const [score, setScore] = useState<number | null>(null);\n  const [comment, setComment] = useState('');\n  const [recordedSignalId, setRecordedSignalId] = useState<string | null>(null);\n  const [voiceResponse, setVoiceResponse] = useState<VoiceResponse | null>(\n    null,\n  );\n  const [uploadedAudio, setUploadedAudio] = useState<{\n    url: string;\n    seconds: number;\n  } | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  useEffect(() => {\n    let current = true;\n    setPrompt(null);\n    setScore(null);\n    setComment('');\n    setRecordedSignalId(null);\n    setVoiceResponse(null);\n    setUploadedAudio(null);\n\n    if (!tenantSlug) return () => undefined;\n\n    feedbackPromptsApi\n      .eligible(tenantSlug, route)\n      .then(([eligiblePrompt]) => {\n        if (!current || !eligiblePrompt) return;\n        setPrompt(eligiblePrompt);\n        if (!seenPromptKeys.current.has(eligiblePrompt.key)) {\n          seenPromptKeys.current.add(eligiblePrompt.key);\n          void feedbackPromptsApi\n            .markSeen(tenantSlug, eligiblePrompt.key)\n            .catch(() => undefined);\n        }\n      })\n      .catch(() => undefined);\n\n    return () => {\n      current = false;\n    };\n  }, [route, tenantSlug]);\n\n  const clearPrompt = () => {\n    setPrompt(null);\n    setScore(null);\n    setComment('');\n    setRecordedSignalId(null);\n    setVoiceResponse(null);\n    setUploadedAudio(null);\n  };\n\n  const dismiss = async (snooze: boolean) => {\n    if (!prompt || !tenantSlug) return;\n    setSubmitting(true);\n    try {\n      await feedbackPromptsApi.dismiss(\n        tenantSlug,\n        prompt.key,\n        snooze ? prompt.snoozeDays : undefined,\n      );\n      clearPrompt();\n    } catch {\n      toast({\n        title: 'Could not update this prompt',\n        description: 'Please try again.',\n        variant: 'destructive',\n      });\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const submit = async () => {\n    if (!prompt || !tenantSlug || score === null) return;\n    setSubmitting(true);\n    let signalId = recordedSignalId;\n    let audio = uploadedAudio;\n    try {\n      if (!signalId) {\n        const signal = await feedbackPromptsApi.recordSignal(tenantSlug, {\n          prompt,\n          score,\n          route,\n        });\n        signalId = signal.id;\n        setRecordedSignalId(signal.id);\n      }\n\n      if (prompt.allowVoice && voiceResponse && !audio) {\n        const upload = await feedbackPromptsApi.uploadAudio(\n          tenantSlug,\n          voiceResponse.file,\n        );\n        audio = {\n          url: upload.url,\n          seconds: Math.min(\n            120,\n            Math.max(1, Math.round(upload.duration || voiceResponse.seconds)),\n          ),\n        };\n        setUploadedAudio(audio);\n      }\n\n      if ((prompt.allowComment && comment.trim()) || audio) {\n        await feedbackPromptsApi.attachComment(tenantSlug, signalId, {\n          comment: comment.trim() || undefined,\n          audioUrl: audio?.url,\n          audioSeconds: audio?.seconds,\n        });\n      }\n\n      toast({ title: 'Thanks for sharing your feedback' });\n      clearPrompt();\n    } catch {\n      toast({\n        title: signalId\n          ? 'Your score was saved'\n          : 'Could not save your response',\n        description: signalId\n          ? 'Your response details were not added. Retry without sending the score or audio again.'\n          : 'Please try again.',\n        variant: 'destructive',\n      });\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={Boolean(prompt)}\n      onOpenChange={(open) => {\n        if (!open && !submitting) clearPrompt();\n      }}\n    >\n      {prompt ? (\n        <DialogContent className=\"max-h-[90dvh] w-[calc(100%-2rem)] max-w-xl overflow-y-auto rounded-[4px] border-[var(--border-default)] p-4 sm:p-6\">\n          <DialogHeader className=\"pr-7 text-left\">\n            <DialogTitle>{prompt.question}</DialogTitle>\n            <DialogDescription>\n              A quick answer helps us improve Box for your team.\n            </DialogDescription>\n          </DialogHeader>\n\n          <ScorePicker prompt={prompt} score={score} onChange={setScore} />\n\n          {prompt.allowComment && score !== null ? (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor=\"merchant-prompt-comment\"\n                className=\"text-sm font-medium text-[var(--text-primary)]\"\n              >\n                {prompt.followUp || 'What led to your answer?'}\n                <span className=\"ml-1 font-normal text-[var(--text-muted)]\">\n                  Optional\n                </span>\n              </label>\n              <textarea\n                id=\"merchant-prompt-comment\"\n                value={comment}\n                onChange={(event) => setComment(event.target.value)}\n                maxLength={1000}\n                rows={4}\n                disabled={submitting}\n                className=\"w-full resize-none rounded-[4px] border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] disabled:opacity-60\"\n                placeholder=\"Add a little context\"\n              />\n            </div>\n          ) : null}\n\n          {prompt.allowVoice && score !== null ? (\n            <VoiceResponseRecorder\n              key={prompt.key}\n              disabled={submitting}\n              onChange={(response) => {\n                setVoiceResponse(response);\n                setUploadedAudio(null);\n              }}\n            />\n          ) : null}\n\n          <DialogFooter className=\"gap-2 sm:space-x-0\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={submitting}\n              onClick={() => void dismiss(false)}\n            >\n              Don&apos;t ask again\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              disabled={submitting}\n              onClick={() => void dismiss(true)}\n            >\n              Remind me later\n            </Button>\n            <Button\n              type=\"button\"\n              loading={submitting}\n              disabled={score === null}\n              onClick={() => void submit()}\n            >\n              {recordedSignalId ? 'Retry details' : 'Submit'}\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      ) : null}\n    </Dialog>\n  );\n}\n\nfunction ScorePicker({\n  prompt,\n  score,\n  onChange,\n}: {\n  prompt: EligibleFeedbackPrompt;\n  score: number | null;\n  onChange: (score: number) => void;\n}) {\n  const values =\n    prompt.kind === 'thumb'\n      ? [-1, 1]\n      : Array.from(\n          { length: prompt.scaleMax - prompt.scaleMin + 1 },\n          (_, index) => prompt.scaleMin + index,\n        );\n\n  return (\n    <fieldset>\n      <legend className=\"mb-3 text-sm font-medium text-[var(--text-secondary)]\">\n        {KIND_LABELS[prompt.kind]}\n      </legend>\n      <div\n        role=\"radiogroup\"\n        className={cn(\n          'grid gap-2',\n          prompt.kind === 'thumb'\n            ? 'grid-cols-2'\n            : prompt.kind === 'nps'\n              ? 'grid-cols-6 sm:grid-cols-11'\n              : 'grid-flow-col auto-cols-fr',\n        )}\n      >\n        {values.map((value) => {\n          const selected = score === value;\n          const label = scoreLabel(prompt.kind, value, prompt.scaleMax);\n          return (\n            <button\n              key={value}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={selected}\n              aria-label={label}\n              title={label}\n              onClick={() => onChange(value)}\n              className={cn(\n                'flex min-h-11 items-center justify-center rounded-[4px] border px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]',\n                selected\n                  ? 'border-[var(--accent-primary)] bg-[var(--accent-secondary)] text-[var(--accent-primary)]'\n                  : 'border-[var(--border-default)] bg-[var(--bg-base)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]',\n              )}\n            >\n              {prompt.kind === 'thumb' ? (\n                value === 1 ? (\n                  <ThumbsUp className=\"size-5\" aria-hidden=\"true\" />\n                ) : (\n                  <ThumbsDown className=\"size-5\" aria-hidden=\"true\" />\n                )\n              ) : prompt.kind === 'star' ? (\n                <Star\n                  className={cn('h-5 w-5', selected && 'fill-current')}\n                  aria-hidden=\"true\"\n                />\n              ) : (\n                value\n              )}\n            </button>\n          );\n        })}\n      </div>\n      {prompt.kind === 'nps' ? (\n        <div className=\"mt-2 flex justify-between text-xs text-[var(--text-muted)]\">\n          <span>Not likely</span>\n          <span>Very likely</span>\n        </div>\n      ) : null}\n    </fieldset>\n  );\n}\n\nfunction scoreLabel(\n  kind: EligibleFeedbackPrompt['kind'],\n  value: number,\n  maximum: number,\n) {\n  if (kind === 'thumb') return value === 1 ? 'Thumbs up' : 'Thumbs down';\n  if (kind === 'star') return `${value} out of ${maximum} stars`;\n  return `${value} out of ${maximum}`;\n}\n"],"mappings":"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","names":[]}

package/dist/feedback/report-adoption.d.ts

@@ -0,0 +1,55 @@
+import { type AdoptionInput } from './feature-adoption';
+/**
+ * The home's own data, loosely typed.
+ *
+ * Loose on purpose: this reads eleven fields off a hook that returns forty, and
+ * naming the whole shape here would tie the feedback package to the home's
+ * return type — so a field added there would break a file that does not care.
+ * Every read below is defensive.
+ */
+export interface AdoptionSource {
+    productCount?: number;
+    packageCount?: number;
+    totalCustomers?: number;
+    orderStats?: {
+        total?: number;
+    } | null;
+    bookingStats?: {
+        today?: number;
+    } | null;
+    upcomingBookings?: unknown[];
+    invoiceStats?: {
+        total?: number;
+    } | null;
+    recentSubscriptions?: unknown[];
+    bankAccountCount?: number;
+    storefrontUrl?: string | null;
+    activities?: unknown[];
+}
+/**
+ * Map the home's numbers onto the areas adoption is measured across.
+ *
+ * Here rather than in the page because it is knowledge about ADOPTION, not
+ * about the home — and because the home is at its 500-line limit, which is a
+ * fair signal that derivations like this belong with the thing they feed.
+ */
+export declare function buildAdoptionInput(source: AdoptionSource, archetypes: string[]): AdoptionInput;
+/**
+ * Measures how much of the product a workspace has used, and tells the
+ * feedback provider.
+ *
+ * A COMPONENT RATHER THAN A HOOK IN THE PAGE, for two reasons that are both
+ * about where the home splits. The home returns early for the phone, so hooks
+ * placed after that branch are conditional — React rejects it, and rightly.
+ * And the phone home is the one that most needs measuring, since it is where
+ * the prompts are hardest to earn. Rendered inside both branches, the
+ * measurement happens on both.
+ *
+ * Renders nothing.
+ */
+export declare function ReportAdoption({ source, archetypes, }: {
+    /** The home's data hook result. Read defensively — see `AdoptionSource`. */
+    source: AdoptionSource;
+    /** `activeKeys` from `useIntentConfig` — all of them, never just primary. */
+    archetypes: string[];
+}): null;

package/dist/feedback/report-adoption.js

@@ -0,0 +1,56 @@
+"use client";
+import { useEffect, useMemo } from "react";
+import { useReportAdoption } from "./feedback-prompt-context";
+import { measureAdoption } from "./feature-adoption";
+function buildAdoptionInput(source, archetypes) {
+  return {
+    archetypes,
+    productCount: source.productCount ?? 0,
+    packageCount: source.packageCount ?? 0,
+    totalCustomers: source.totalCustomers ?? 0,
+    orderCount: source.orderStats?.total ?? 0,
+    // `bookingStats` is only `{ today }`, so "has used bookings" is today's
+    // plus what is on the books ahead. A proxy, and the right kind of one:
+    // the bar is a gate, not a grade.
+    bookingCount: (source.bookingStats?.today ?? 0) + (source.upcomingBookings?.length ?? 0),
+    invoiceCount: source.invoiceStats?.total ?? 0,
+    subscriptionCount: source.recentSubscriptions?.length ?? 0,
+    bankAccountCount: source.bankAccountCount ?? 0,
+    hasStorefront: Boolean(source.storefrontUrl),
+    activityCount: source.activities?.length ?? 0
+  };
+}
+function ReportAdoption({
+  source,
+  archetypes
+}) {
+  const report = useReportAdoption();
+  const input = buildAdoptionInput(source, archetypes);
+  const archetypeKey = input.archetypes.join(",");
+  const ratio = useMemo(
+    () => measureAdoption(input).ratio,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      archetypeKey,
+      input.productCount,
+      input.packageCount,
+      input.totalCustomers,
+      input.orderCount,
+      input.bookingCount,
+      input.invoiceCount,
+      input.subscriptionCount,
+      input.bankAccountCount,
+      input.hasStorefront,
+      input.activityCount
+    ]
+  );
+  useEffect(() => {
+    report(ratio);
+  }, [ratio, report]);
+  return null;
+}
+export {
+  ReportAdoption,
+  buildAdoptionInput
+};
+//# sourceMappingURL=report-adoption.js.map

package/dist/feedback/report-adoption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/report-adoption.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo } from 'react';\nimport { useReportAdoption } from './feedback-prompt-context';\nimport { measureAdoption, type AdoptionInput } from './feature-adoption';\n\n/**\n * The home's own data, loosely typed.\n *\n * Loose on purpose: this reads eleven fields off a hook that returns forty, and\n * naming the whole shape here would tie the feedback package to the home's\n * return type — so a field added there would break a file that does not care.\n * Every read below is defensive.\n */\nexport interface AdoptionSource {\n  productCount?: number;\n  packageCount?: number;\n  totalCustomers?: number;\n  orderStats?: { total?: number } | null;\n  bookingStats?: { today?: number } | null;\n  upcomingBookings?: unknown[];\n  invoiceStats?: { total?: number } | null;\n  recentSubscriptions?: unknown[];\n  bankAccountCount?: number;\n  storefrontUrl?: string | null;\n  activities?: unknown[];\n}\n\n/**\n * Map the home's numbers onto the areas adoption is measured across.\n *\n * Here rather than in the page because it is knowledge about ADOPTION, not\n * about the home — and because the home is at its 500-line limit, which is a\n * fair signal that derivations like this belong with the thing they feed.\n */\nexport function buildAdoptionInput(\n  source: AdoptionSource,\n  archetypes: string[],\n): AdoptionInput {\n  return {\n    archetypes,\n    productCount: source.productCount ?? 0,\n    packageCount: source.packageCount ?? 0,\n    totalCustomers: source.totalCustomers ?? 0,\n    orderCount: source.orderStats?.total ?? 0,\n    // `bookingStats` is only `{ today }`, so \"has used bookings\" is today's\n    // plus what is on the books ahead. A proxy, and the right kind of one:\n    // the bar is a gate, not a grade.\n    bookingCount:\n      (source.bookingStats?.today ?? 0) +\n      (source.upcomingBookings?.length ?? 0),\n    invoiceCount: source.invoiceStats?.total ?? 0,\n    subscriptionCount: source.recentSubscriptions?.length ?? 0,\n    bankAccountCount: source.bankAccountCount ?? 0,\n    hasStorefront: Boolean(source.storefrontUrl),\n    activityCount: source.activities?.length ?? 0,\n  };\n}\n\n/**\n * Measures how much of the product a workspace has used, and tells the\n * feedback provider.\n *\n * A COMPONENT RATHER THAN A HOOK IN THE PAGE, for two reasons that are both\n * about where the home splits. The home returns early for the phone, so hooks\n * placed after that branch are conditional — React rejects it, and rightly.\n * And the phone home is the one that most needs measuring, since it is where\n * the prompts are hardest to earn. Rendered inside both branches, the\n * measurement happens on both.\n *\n * Renders nothing.\n */\nexport function ReportAdoption({\n  source,\n  archetypes,\n}: {\n  /** The home's data hook result. Read defensively — see `AdoptionSource`. */\n  source: AdoptionSource;\n  /** `activeKeys` from `useIntentConfig` — all of them, never just primary. */\n  archetypes: string[];\n}) {\n  const report = useReportAdoption();\n  const input = buildAdoptionInput(source, archetypes);\n\n  // Keyed on the values, not the object: the home rebuilds this literal on\n  // every render, and reporting on every render would churn every consumer of\n  // the provider.\n  // Extracted so the dependency list is statically checkable — a join() inline\n  // in the array is a complex expression the lint rule cannot verify.\n  const archetypeKey = input.archetypes.join(',');\n  const ratio = useMemo(\n    () => measureAdoption(input).ratio,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      archetypeKey,\n      input.productCount,\n      input.packageCount,\n      input.totalCustomers,\n      input.orderCount,\n      input.bookingCount,\n      input.invoiceCount,\n      input.subscriptionCount,\n      input.bankAccountCount,\n      input.hasStorefront,\n      input.activityCount,\n    ],\n  );\n\n  useEffect(() => {\n    report(ratio);\n  }, [ratio, report]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,WAAW,eAAe;AACnC,SAAS,yBAAyB;AAClC,SAAS,uBAA2C;AA+B7C,SAAS,mBACd,QACA,YACe;AACf,SAAO;AAAA,IACL;AAAA,IACA,cAAc,OAAO,gBAAgB;AAAA,IACrC,cAAc,OAAO,gBAAgB;AAAA,IACrC,gBAAgB,OAAO,kBAAkB;AAAA,IACzC,YAAY,OAAO,YAAY,SAAS;AAAA;AAAA;AAAA;AAAA,IAIxC,eACG,OAAO,cAAc,SAAS,MAC9B,OAAO,kBAAkB,UAAU;AAAA,IACtC,cAAc,OAAO,cAAc,SAAS;AAAA,IAC5C,mBAAmB,OAAO,qBAAqB,UAAU;AAAA,IACzD,kBAAkB,OAAO,oBAAoB;AAAA,IAC7C,eAAe,QAAQ,OAAO,aAAa;AAAA,IAC3C,eAAe,OAAO,YAAY,UAAU;AAAA,EAC9C;AACF;AAeO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAKG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,QAAQ,mBAAmB,QAAQ,UAAU;AAOnD,QAAM,eAAe,MAAM,WAAW,KAAK,GAAG;AAC9C,QAAM,QAAQ;AAAA,IACZ,MAAM,gBAAgB,KAAK,EAAE;AAAA;AAAA,IAE7B;AAAA,MACE;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAEA,YAAU,MAAM;AACd,WAAO,KAAK;AAAA,EACd,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,SAAO;AACT;","names":[]}

package/dist/feedback/say-why.d.ts

@@ -0,0 +1,26 @@
+/**
+ * "Say why" — a typed note or a spoken one, attached to a score already given.
+ *
+ * ONE FOLLOW-UP FOR EVERY PLACE THAT ASKS. `FeedbackPrompt` had a comment step
+ * with a recorder; `FeedbackVote` had nothing, so a thumb or a star recorded
+ * silently and the only route to saying anything was a down-vote throwing you
+ * out into the whole feedback sheet. That is three different answers to one
+ * question — can I explain this? — and the quiet one was the most used control
+ * in the set.
+ *
+ * SPEAKING IS NOT THE SECOND-CLASS OPTION. It is the likelier one: these
+ * prompts are answered on a phone, one-handed, between two other jobs, and
+ * typing a sentence is exactly the step that does not happen. The score is the
+ * whole ask and this is a bonus, so it has to cost as little as possible — one
+ * press to start talking.
+ *
+ * Attaches to the signal by id, so the score is never waiting on the prose.
+ */
+export declare function SayWhy({ signalId, placeholder, allowComment, allowVoice, onDone, }: {
+    /** The score this explains. Null while it is still being recorded. */
+    signalId: string | null;
+    placeholder: string;
+    allowComment?: boolean;
+    allowVoice?: boolean;
+    onDone: () => void;
+}): import("react").JSX.Element;

package/dist/feedback/say-why.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Textarea } from "@withpotter/ui-kit/textarea";
+import { VoiceComposer } from "@withpotter/components/voice/voice-composer";
+import { useVoiceRecorder } from "@withpotter/hooks/use-voice-recorder";
+import { uploadAudio } from "@withpotter/lib/media-service";
+import { feedbackApi } from "@withpotter/lib/api";
+import { springs } from "@withpotter/lib/motion";
+function SayWhy({
+  signalId,
+  placeholder,
+  allowComment = true,
+  allowVoice = true,
+  onDone
+}) {
+  const [text, setText] = useState("");
+  const [saving, setSaving] = useState(false);
+  const recorder = useVoiceRecorder();
+  const voice = recorder.recording;
+  const reduce = useReducedMotion();
+  const send = async () => {
+    const note = text.trim();
+    if ((note || voice) && signalId) {
+      setSaving(true);
+      try {
+        let audioUrl;
+        let audioSeconds;
+        if (voice) {
+          const uploaded = await uploadAudio(voice.blob, voice.mimeType);
+          audioUrl = uploaded.url;
+          audioSeconds = voice.seconds;
+        }
+        await feedbackApi.attachComment(signalId, {
+          comment: note || void 0,
+          audioUrl,
+          audioSeconds
+        });
+      } catch {
+      } finally {
+        setSaving(false);
+      }
+    }
+    recorder.discard();
+    onDone();
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: reduce ? { opacity: 0 } : { opacity: 0, height: 0 },
+      animate: reduce ? { opacity: 1 } : { opacity: 1, height: "auto" },
+      transition: reduce ? { duration: 0 } : springs.gentle,
+      className: "flex flex-col gap-2 overflow-hidden",
+      children: [
+        allowComment && /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: text,
+            onChange: (event) => setText(event.target.value),
+            placeholder: voice ? "Add a note with it (optional)" : placeholder,
+            rows: voice ? 2 : 3,
+            className: "resize-none"
+          }
+        ),
+        allowVoice && /* @__PURE__ */ jsx(
+          VoiceComposer,
+          {
+            recorder,
+            disabled: saving,
+            hint: allowComment ? "Easier than typing it out." : "Record a response."
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => {
+                recorder.discard();
+                onDone();
+              },
+              children: "Skip"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: send, disabled: saving, children: saving ? "Sending\u2026" : "Send" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SayWhy
+};
+//# sourceMappingURL=say-why.js.map

package/dist/feedback/say-why.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/say-why.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Textarea } from '@withpotter/ui-kit/textarea';\nimport { VoiceComposer } from '@withpotter/components/voice/voice-composer';\nimport { useVoiceRecorder } from '@withpotter/hooks/use-voice-recorder';\nimport { uploadAudio } from '@withpotter/lib/media-service';\nimport { feedbackApi } from '@withpotter/lib/api';\nimport { springs } from '@withpotter/lib/motion';\n\n/**\n * \"Say why\" — a typed note or a spoken one, attached to a score already given.\n *\n * ONE FOLLOW-UP FOR EVERY PLACE THAT ASKS. `FeedbackPrompt` had a comment step\n * with a recorder; `FeedbackVote` had nothing, so a thumb or a star recorded\n * silently and the only route to saying anything was a down-vote throwing you\n * out into the whole feedback sheet. That is three different answers to one\n * question — can I explain this? — and the quiet one was the most used control\n * in the set.\n *\n * SPEAKING IS NOT THE SECOND-CLASS OPTION. It is the likelier one: these\n * prompts are answered on a phone, one-handed, between two other jobs, and\n * typing a sentence is exactly the step that does not happen. The score is the\n * whole ask and this is a bonus, so it has to cost as little as possible — one\n * press to start talking.\n *\n * Attaches to the signal by id, so the score is never waiting on the prose.\n */\nexport function SayWhy({\n  signalId,\n  placeholder,\n  allowComment = true,\n  allowVoice = true,\n  onDone,\n}: {\n  /** The score this explains. Null while it is still being recorded. */\n  signalId: string | null;\n  placeholder: string;\n  allowComment?: boolean;\n  allowVoice?: boolean;\n  onDone: () => void;\n}) {\n  const [text, setText] = useState('');\n  const [saving, setSaving] = useState(false);\n  const recorder = useVoiceRecorder();\n  const voice = recorder.recording;\n  const reduce = useReducedMotion();\n\n  const send = async () => {\n    const note = text.trim();\n    if ((note || voice) && signalId) {\n      setSaving(true);\n      try {\n        let audioUrl: string | undefined;\n        let audioSeconds: number | undefined;\n        if (voice) {\n          const uploaded = await uploadAudio(voice.blob, voice.mimeType);\n          audioUrl = uploaded.url;\n          audioSeconds = voice.seconds;\n        }\n        await feedbackApi.attachComment(signalId, {\n          comment: note || undefined,\n          audioUrl,\n          audioSeconds,\n        });\n      } catch {\n        // The score is already recorded, which is the part that mattered.\n        // Losing the note is not worth an error state on a prompt.\n      } finally {\n        setSaving(false);\n      }\n    }\n    recorder.discard();\n    onDone();\n  };\n\n  return (\n    <motion.div\n      initial={reduce ? { opacity: 0 } : { opacity: 0, height: 0 }}\n      animate={reduce ? { opacity: 1 } : { opacity: 1, height: 'auto' }}\n      transition={reduce ? { duration: 0 } : springs.gentle}\n      className=\"flex flex-col gap-2 overflow-hidden\"\n    >\n      {allowComment && (\n        <Textarea\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          placeholder={voice ? 'Add a note with it (optional)' : placeholder}\n          rows={voice ? 2 : 3}\n          className=\"resize-none\"\n        />\n      )}\n\n      {/* Below the box, not inside it: typing is still the default, and a mic\n          in the field would suggest dictation, which this is not. */}\n      {/* NOT the composer's default line, which promises a reply by email.\n          True of the feedback sheet, which files a ticket a person answers;\n          false here, where this is a note attached to a score. A recorder that\n          promises a reply wherever it is dropped makes a promise the surface\n          cannot keep, and the merchant only finds out by waiting. */}\n      {allowVoice && (\n        <VoiceComposer\n          recorder={recorder}\n          disabled={saving}\n          hint={\n            allowComment ? 'Easier than typing it out.' : 'Record a response.'\n          }\n        />\n      )}\n\n      <div className=\"flex justify-end gap-2\">\n        {/* \"Skip\", not \"Cancel\" — the score is already in, so there is nothing\n            here to abandon. */}\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => {\n            recorder.discard();\n            onDone();\n          }}\n        >\n          Skip\n        </Button>\n        <Button size=\"sm\" onClick={send} disabled={saving}>\n          {saving ? 'Sending…' : 'Send'}\n        </Button>\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";AAsFQ,cA0BF,YA1BE;AApFR,SAAS,gBAAgB;AACzB,SAAS,QAAQ,wBAAwB;AACzC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAoBjB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AACF,GAOG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,iBAAiB;AAClC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,iBAAiB;AAEhC,QAAM,OAAO,YAAY;AACvB,UAAM,OAAO,KAAK,KAAK;AACvB,SAAK,QAAQ,UAAU,UAAU;AAC/B,gBAAU,IAAI;AACd,UAAI;AACF,YAAI;AACJ,YAAI;AACJ,YAAI,OAAO;AACT,gBAAM,WAAW,MAAM,YAAY,MAAM,MAAM,MAAM,QAAQ;AAC7D,qBAAW,SAAS;AACpB,yBAAe,MAAM;AAAA,QACvB;AACA,cAAM,YAAY,cAAc,UAAU;AAAA,UACxC,SAAS,QAAQ;AAAA,UACjB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,QAAQ;AAAA,MAGR,UAAE;AACA,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AACA,aAAS,QAAQ;AACjB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,EAAE;AAAA,MAC3D,SAAS,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,OAAO;AAAA,MAChE,YAAY,SAAS,EAAE,UAAU,EAAE,IAAI,QAAQ;AAAA,MAC/C,WAAU;AAAA,MAET;AAAA,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,YAC/C,aAAa,QAAQ,kCAAkC;AAAA,YACvD,MAAM,QAAQ,IAAI;AAAA,YAClB,WAAU;AAAA;AAAA,QACZ;AAAA,QAUD,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,UAAU;AAAA,YACV,MACE,eAAe,+BAA+B;AAAA;AAAA,QAElD;AAAA,QAGF,qBAAC,SAAI,WAAU,0BAGb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM;AACb,yBAAS,QAAQ;AACjB,uBAAO;AAAA,cACT;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UACA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,UAAU,QACxC,mBAAS,kBAAa,QACzB;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/feedback/setup-csat-dock.d.ts

@@ -0,0 +1,25 @@
+/** Just the shape this needs, so it does not import the onboarding types. */
+interface ChecklistStep {
+    status: string;
+}
+/**
+ * "You're set up. How was that?"
+ *
+ * SETUP IS THE ONE THING IN THIS PRODUCT WITH A REAL ENDING, which is what
+ * makes it the only honest CSAT moment in it. Everything else a merchant does
+ * here recurs — orders, campaigns, payouts — so "how was that?" after any of
+ * them is asking about a Tuesday. Setting up happens once, takes real effort,
+ * and finishing it is a moment the merchant notices.
+ *
+ * It is also the part we can least afford to be bad at and hear least about,
+ * because anybody it defeats never arrives to complain.
+ *
+ * A DOCK RATHER THAN A HOME WIDGET. The board answers "what do I do next, and
+ * is anything wrong", and a survey is neither. Docking also puts it in the
+ * same single live slot as the NPS, so a merchant who has just finished
+ * setting up is asked one question rather than two.
+ */
+export declare function SetupCsatDock({ steps }: {
+    steps: ChecklistStep[];
+}): import("react").JSX.Element;
+export {};

package/dist/feedback/setup-csat-dock.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { csatTone } from "@withpotter/ui-kit/score-scale";
+import { FeedbackPrompt } from "./feedback-prompt";
+import { completeFlow } from "./flow-completion";
+function SetupCsatDock({ steps }) {
+  const finished = steps.length > 0 && steps.every(
+    (step) => step.status === "completed" || step.status === "skipped"
+  );
+  const announced = useRef(false);
+  useEffect(() => {
+    if (!finished || announced.current) return;
+    announced.current = true;
+    completeFlow("setup");
+  }, [finished]);
+  return /* @__PURE__ */ jsx(
+    FeedbackPrompt,
+    {
+      promptKey: "setup.complete.csat",
+      kind: "csat",
+      layout: "dock",
+      when: finished,
+      question: "You're set up. How was that?",
+      minLabel: "Painful",
+      maxLabel: "Easy",
+      toneFor: csatTone,
+      commentPrompt: "What was the most annoying part?"
+    }
+  );
+}
+export {
+  SetupCsatDock
+};
+//# sourceMappingURL=setup-csat-dock.js.map

package/dist/feedback/setup-csat-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/setup-csat-dock.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { csatTone } from '@withpotter/ui-kit/score-scale';\nimport { FeedbackPrompt } from './feedback-prompt';\nimport { completeFlow } from './flow-completion';\n\n/** Just the shape this needs, so it does not import the onboarding types. */\ninterface ChecklistStep {\n  status: string;\n}\n\n/**\n * \"You're set up. How was that?\"\n *\n * SETUP IS THE ONE THING IN THIS PRODUCT WITH A REAL ENDING, which is what\n * makes it the only honest CSAT moment in it. Everything else a merchant does\n * here recurs — orders, campaigns, payouts — so \"how was that?\" after any of\n * them is asking about a Tuesday. Setting up happens once, takes real effort,\n * and finishing it is a moment the merchant notices.\n *\n * It is also the part we can least afford to be bad at and hear least about,\n * because anybody it defeats never arrives to complain.\n *\n * A DOCK RATHER THAN A HOME WIDGET. The board answers \"what do I do next, and\n * is anything wrong\", and a survey is neither. Docking also puts it in the\n * same single live slot as the NPS, so a merchant who has just finished\n * setting up is asked one question rather than two.\n */\nexport function SetupCsatDock({ steps }: { steps: ChecklistStep[] }) {\n  /**\n   * Every step done, AND there were steps. `every()` on an empty array is\n   * true, so without the length check this fires on any account whose\n   * checklist has not loaded yet — which is every account, for the first\n   * frame, which is the worst possible moment to ask.\n   */\n  const finished =\n    steps.length > 0 &&\n    steps.every(\n      (step) => step.status === 'completed' || step.status === 'skipped',\n    );\n\n  /**\n   * Finishing setup is a flow ending, and it is announced as one so the NPS\n   * can see it too. Fired once per mount rather than on every render — this\n   * component re-renders with the home, and a flow that \"completes\" every\n   * few seconds would hold the NPS permanently open.\n   */\n  const announced = useRef(false);\n  useEffect(() => {\n    if (!finished || announced.current) return;\n    announced.current = true;\n    completeFlow('setup');\n  }, [finished]);\n\n  return (\n    <FeedbackPrompt\n      promptKey=\"setup.complete.csat\"\n      kind=\"csat\"\n      layout=\"dock\"\n      when={finished}\n      question=\"You're set up. How was that?\"\n      minLabel=\"Painful\"\n      maxLabel=\"Easy\"\n      toneFor={csatTone}\n      commentPrompt=\"What was the most annoying part?\"\n    />\n  );\n}\n"],"mappings":";AAwDI;AAtDJ,SAAS,WAAW,cAAc;AAClC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAwBtB,SAAS,cAAc,EAAE,MAAM,GAA+B;AAOnE,QAAM,WACJ,MAAM,SAAS,KACf,MAAM;AAAA,IACJ,CAAC,SAAS,KAAK,WAAW,eAAe,KAAK,WAAW;AAAA,EAC3D;AAQF,QAAM,YAAY,OAAO,KAAK;AAC9B,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,UAAU,QAAS;AACpC,cAAU,UAAU;AACpB,iBAAa,OAAO;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAS;AAAA,MACT,UAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAc;AAAA;AAAA,EAChB;AAEJ;","names":[]}