@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,247 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import posthog from "posthog-js";
+import {
+  feedbackApi
+} from "@withpotter/lib/api";
+const FeedbackPromptContext = createContext(
+  null
+);
+function FeedbackPromptProvider({
+  children
+}) {
+  const { user, loading, tenant } = useAuth();
+  const [records, setRecords] = useState({});
+  const [ready, setReady] = useState(false);
+  const liveKeyRef = useRef(null);
+  const livePriorityRef = useRef(0);
+  const [liveKey, setLiveKey] = useState(null);
+  const [adoption, setAdoption] = useState(null);
+  const seenSent = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (loading || !user) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const states = await feedbackApi.listPrompts();
+        if (cancelled) return;
+        const list = Array.isArray(states) ? states : [];
+        const next = {};
+        for (const state of list) {
+          next[state.promptKey] = {
+            eligible: state.eligible,
+            seenCount: state.seenCount
+          };
+        }
+        setRecords(next);
+      } catch {
+      } finally {
+        if (!cancelled) setReady(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, user]);
+  const isEligible = useCallback(
+    (promptKey) => {
+      const record = records[promptKey];
+      return record ? record.eligible : true;
+    },
+    [records]
+  );
+  const seenCount = useCallback(
+    (promptKey) => records[promptKey]?.seenCount ?? 0,
+    [records]
+  );
+  const claim = useCallback((promptKey, priority = 0) => {
+    if (liveKeyRef.current !== null && liveKeyRef.current !== promptKey && priority <= livePriorityRef.current)
+      return false;
+    liveKeyRef.current = promptKey;
+    livePriorityRef.current = priority;
+    setLiveKey(promptKey);
+    return true;
+  }, []);
+  const release = useCallback((promptKey) => {
+    if (liveKeyRef.current !== promptKey) return;
+    liveKeyRef.current = null;
+    livePriorityRef.current = 0;
+    setLiveKey(null);
+  }, []);
+  const reportAdoption = useCallback((ratio) => {
+    setAdoption((current) => current === ratio ? current : ratio);
+  }, []);
+  const markSeen = useCallback((promptKey) => {
+    if (seenSent.current.has(promptKey)) return;
+    seenSent.current.add(promptKey);
+    void feedbackApi.markSeen(promptKey).catch(() => {
+    });
+  }, []);
+  const closeLocally = useCallback((promptKey) => {
+    setRecords((current) => ({
+      ...current,
+      [promptKey]: {
+        eligible: false,
+        seenCount: current[promptKey]?.seenCount ?? 0
+      }
+    }));
+    if (liveKeyRef.current === promptKey) {
+      liveKeyRef.current = null;
+      livePriorityRef.current = 0;
+      setLiveKey(null);
+    }
+  }, []);
+  const surroundings = useCallback(() => {
+    if (typeof window === "undefined") return {};
+    const mask = (path) => path.split("/").map(
+      (seg) => /^[0-9a-f]{8}-[0-9a-f]{4}/i.test(seg) || /^\d+$/.test(seg) ? "[id]" : seg
+    ).join("/");
+    let timeZone;
+    try {
+      timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+    }
+    return {
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      locale: navigator.language,
+      timeZone,
+      theme: document.documentElement.dataset.theme,
+      route: mask(window.location.pathname).slice(0, 120),
+      posthogSessionId: posthog.get_session_id?.() || void 0
+    };
+  }, []);
+  const submit = useCallback(
+    async (data) => {
+      if (!data.subjectType) closeLocally(data.promptKey);
+      const signal = await feedbackApi.recordSignal(
+        {
+          ...surroundings(),
+          ...data,
+          pageUrl: data.pageUrl ?? (typeof window === "undefined" ? void 0 : window.location.href)
+        },
+        // The workspace they were in when they answered. Without it the api
+        // has no tenant on the request and the score is refused outright —
+        // see the note on `recordSignal`.
+        tenant?.slug
+      );
+      return signal?.id ?? null;
+    },
+    [closeLocally, surroundings, tenant?.slug]
+  );
+  const dismiss = useCallback(
+    async (promptKey, snoozeDays) => {
+      closeLocally(promptKey);
+      await feedbackApi.dismissPrompt(promptKey, snoozeDays);
+    },
+    [closeLocally]
+  );
+  const value = useMemo(
+    () => ({
+      ready,
+      isEligible,
+      seenCount,
+      claim,
+      release,
+      liveKey,
+      adoption,
+      reportAdoption,
+      markSeen,
+      submit,
+      dismiss
+    }),
+    [
+      ready,
+      isEligible,
+      seenCount,
+      claim,
+      release,
+      liveKey,
+      adoption,
+      reportAdoption,
+      markSeen,
+      submit,
+      dismiss
+    ]
+  );
+  return /* @__PURE__ */ jsx(FeedbackPromptContext.Provider, { value, children });
+}
+function useFeedbackPrompt(promptKey, options = {}) {
+  const context = useContext(FeedbackPromptContext);
+  const { when = true, priority = 0 } = options;
+  const claim = context?.claim;
+  const release = context?.release;
+  const markSeen = context?.markSeen;
+  const liveKey = context?.liveKey ?? null;
+  const eligible = Boolean(context?.ready && context.isEligible(promptKey));
+  const wants = eligible && when;
+  useEffect(() => {
+    if (!claim || !markSeen || !wants || liveKey === promptKey) return;
+    if (claim(promptKey, priority)) markSeen(promptKey);
+  }, [claim, liveKey, markSeen, wants, promptKey, priority]);
+  useEffect(() => {
+    if (!wants) release?.(promptKey);
+  }, [release, wants, promptKey]);
+  useEffect(
+    () => () => {
+      release?.(promptKey);
+    },
+    [release, promptKey]
+  );
+  const visible = wants && liveKey === promptKey;
+  return {
+    visible,
+    seenCount: context?.seenCount(promptKey) ?? 0,
+    submit: async (data) => {
+      if (!context) return null;
+      return context.submit({ ...data, promptKey });
+    },
+    dismiss: async (snoozeDays) => {
+      if (!context) return;
+      await context.dismiss(promptKey, snoozeDays);
+    }
+  };
+}
+function useFeedbackSignal() {
+  const context = useContext(FeedbackPromptContext);
+  return {
+    record: async (data) => {
+      if (!context) return null;
+      return context.submit(data);
+    }
+  };
+}
+function useReportAdoption() {
+  const context = useContext(FeedbackPromptContext);
+  return context?.reportAdoption ?? (() => {
+  });
+}
+function useFeatureAdoption() {
+  const context = useContext(FeedbackPromptContext);
+  return context?.adoption ?? null;
+}
+function usePromptEligible() {
+  const context = useContext(FeedbackPromptContext);
+  return useCallback(
+    (promptKey) => context?.isEligible(promptKey) ?? true,
+    [context]
+  );
+}
+export {
+  FeedbackPromptProvider,
+  useFeatureAdoption,
+  useFeedbackPrompt,
+  useFeedbackSignal,
+  usePromptEligible,
+  useReportAdoption
+};
+//# sourceMappingURL=feedback-prompt-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/feedback-prompt-context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport posthog from 'posthog-js';\nimport {\n  feedbackApi,\n  type CreateFeedbackSignal,\n  type FeedbackPromptState,\n} from '@withpotter/lib/api';\n\n/** Local mirror of the server's verdict on one prompt. */\ninterface PromptRecord {\n  eligible: boolean;\n  seenCount: number;\n}\n\ninterface FeedbackPromptContextValue {\n  ready: boolean;\n  /**\n   * May this prompt be shown at all — has the account answered or dismissed it\n   * on any device. Says nothing about whether another prompt is already on\n   * screen; that is `claim`'s job.\n   */\n  isEligible: (promptKey: string) => boolean;\n  seenCount: (promptKey: string) => number;\n  /**\n   * Ask for the one live slot. Returns whether this prompt got it. Released on\n   * unmount via the returned function.\n   */\n  claim: (promptKey: string, priority?: number) => boolean;\n  release: (promptKey: string) => void;\n  /** Which prompt currently holds the one live slot, if any. */\n  liveKey: string | null;\n  /**\n   * How much of the product this workspace has used, 0..1, or null while\n   * unknown. Reported by the home, which already loads everything it is\n   * measured from; read by prompts that should not ask a newcomer.\n   */\n  adoption: number | null;\n  reportAdoption: (ratio: number) => void;\n  markSeen: (promptKey: string) => void;\n  /** Resolves to the recorded signal's id, so a comment can be attached to it. */\n  submit: (data: CreateFeedbackSignal) => Promise<string | null>;\n  dismiss: (promptKey: string, snoozeDays?: number) => Promise<void>;\n}\n\nconst FeedbackPromptContext = createContext<FeedbackPromptContextValue | null>(\n  null,\n);\n\n/**\n * ONE REQUEST, AND ONE PROMPT AT A TIME.\n *\n * Both halves of this provider exist to stop a feature designed to be\n * everywhere from behaving like it.\n *\n * THE REQUEST. `GET /feedback/prompts` is read once per session and shared.\n * The alternative — every prompt asking about itself — would have added a\n * request per sprinkle to a dashboard whose home already reads 29 endpoints\n * and whose catalogue reads 19, against a limiter that allows 100 a minute per\n * IP. The feature would have started costing pages their data.\n *\n * THE SLOT. Only one prompt may be live anywhere in the app. Two questions on\n * one screen is not twice the feedback, it is a survey, and the second one\n * teaches people to close the first without reading it. Prompts claim the slot\n * as they mount and release it as they unmount, so navigating away from an\n * unanswered one frees it for the next screen rather than burning it.\n *\n * NOTHING HERE THROWS. A prompt is the least important thing on any screen it\n * appears on: if the list fails to load, every prompt stays hidden and the page\n * is untouched. Failing loudly would mean a feedback widget could take down the\n * orders screen.\n */\nexport function FeedbackPromptProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const { user, loading, tenant } = useAuth();\n  const [records, setRecords] = useState<Record<string, PromptRecord>>({});\n  const [ready, setReady] = useState(false);\n  /**\n   * The one live slot, held in a ref rather than state.\n   *\n   * `claim` has to answer \"did I get it\" SYNCHRONOUSLY, in the effect that\n   * asked. A state updater cannot do that — the answer would be read out of a\n   * closure during the render phase, and StrictMode's double-invoke would let\n   * two prompts both believe they won. Nothing renders from this value, so\n   * state buys nothing and costs correctness.\n   */\n  const liveKeyRef = useRef<string | null>(null);\n  const livePriorityRef = useRef(0);\n  /**\n   * The same value as state, which is what prompts actually RENDER from.\n   *\n   * The pair looks redundant and is not. The ref decides — synchronously, in\n   * whichever effect asked first. The state publishes that decision, so a\n   * prompt that lost the slot re-renders and reappears the moment the winner\n   * closes, and so no prompt has to keep a `held` boolean of its own. Deriving\n   * visibility from context state rather than local state is also what keeps\n   * the whole mechanism out of setState-inside-an-effect.\n   */\n  const [liveKey, setLiveKey] = useState<string | null>(null);\n  /**\n   * Null until the home has measured it, and a prompt that needs it stays\n   * hidden while it is null. Unknown is NOT \"assume they qualify\": asking\n   * everybody on first paint is the exact failure the bar exists to prevent.\n   */\n  const [adoption, setAdoption] = useState<number | null>(null);\n  /** Keys already reported as seen this session, so a re-render is not a view. */\n  const seenSent = useRef<Set<string>>(new Set());\n\n  useEffect(() => {\n    if (loading || !user) return;\n    let cancelled = false;\n\n    void (async () => {\n      try {\n        const states = await feedbackApi.listPrompts();\n        if (cancelled) return;\n        // A 200 carrying the wrong body is not caught by the type, so the\n        // shape is checked rather than trusted: a non-array here would make\n        // every prompt in the app eligible forever.\n        const list: FeedbackPromptState[] = Array.isArray(states) ? states : [];\n        const next: Record<string, PromptRecord> = {};\n        for (const state of list) {\n          next[state.promptKey] = {\n            eligible: state.eligible,\n            seenCount: state.seenCount,\n          };\n        }\n        setRecords(next);\n      } catch {\n        // Silence is correct here — see the note above.\n      } finally {\n        if (!cancelled) setReady(true);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [loading, user]);\n\n  const isEligible = useCallback(\n    (promptKey: string) => {\n      // Unknown means never asked, which is askable. Any other reading would\n      // require a backfill before a new prompt could ever ship.\n      const record = records[promptKey];\n      return record ? record.eligible : true;\n    },\n    [records],\n  );\n\n  const seenCount = useCallback(\n    (promptKey: string) => records[promptKey]?.seenCount ?? 0,\n    [records],\n  );\n\n  const claim = useCallback((promptKey: string, priority = 0) => {\n    if (\n      liveKeyRef.current !== null &&\n      liveKeyRef.current !== promptKey &&\n      priority <= livePriorityRef.current\n    )\n      return false;\n    liveKeyRef.current = promptKey;\n    livePriorityRef.current = priority;\n    setLiveKey(promptKey);\n    return true;\n  }, []);\n\n  const release = useCallback((promptKey: string) => {\n    if (liveKeyRef.current !== promptKey) return;\n    liveKeyRef.current = null;\n    livePriorityRef.current = 0;\n    setLiveKey(null);\n  }, []);\n\n  const reportAdoption = useCallback((ratio: number) => {\n    // Only on a real change, so the home re-rendering does not churn every\n    // consumer of this context.\n    setAdoption((current) => (current === ratio ? current : ratio));\n  }, []);\n\n  const markSeen = useCallback((promptKey: string) => {\n    if (seenSent.current.has(promptKey)) return;\n    seenSent.current.add(promptKey);\n    void feedbackApi.markSeen(promptKey).catch(() => {});\n  }, []);\n\n  /**\n   * Close the prompt locally BEFORE the request settles.\n   *\n   * A prompt that stays on screen while its answer is in flight invites a\n   * second press, and the merchant has already told us what they think — the\n   * only thing left to do is get out of the way. If the write fails they are\n   * not asked again this session, which is the right way round: losing one\n   * score is cheaper than asking the same person twice.\n   */\n  const closeLocally = useCallback((promptKey: string) => {\n    setRecords((current) => ({\n      ...current,\n      [promptKey]: {\n        eligible: false,\n        seenCount: current[promptKey]?.seenCount ?? 0,\n      },\n    }));\n    if (liveKeyRef.current === promptKey) {\n      liveKeyRef.current = null;\n      livePriorityRef.current = 0;\n      setLiveKey(null);\n    }\n  }, []);\n\n  /**\n   * THE ROOM THE ANSWER WAS GIVEN IN.\n   *\n   * A score on its own is a number. The same 3 out of 7 means \"our importer is\n   * hard\" from a desk in the afternoon and \"I was doing this on a phone at\n   * midnight\" from a 390px viewport in Lagos, and nothing on the server can\n   * tell those apart — the request carries a user agent and no room.\n   *\n   * The route is a PATTERN, not the address: `/dashboard/orders/[id]` groups\n   * four hundred complaints about the order screen, where four hundred order\n   * ids group nothing. Ids are masked here rather than on the server because\n   * the server cannot know which segment was an id.\n   */\n  const surroundings = useCallback((): Partial<CreateFeedbackSignal> => {\n    if (typeof window === 'undefined') return {};\n    const mask = (path: string) =>\n      path\n        .split('/')\n        .map((seg) =>\n          /^[0-9a-f]{8}-[0-9a-f]{4}/i.test(seg) || /^\\d+$/.test(seg)\n            ? '[id]'\n            : seg,\n        )\n        .join('/');\n    let timeZone: string | undefined;\n    try {\n      timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    } catch {\n      /* an engine without a timezone database is not worth a broken score */\n    }\n    return {\n      viewport: `${window.innerWidth}x${window.innerHeight}`,\n      locale: navigator.language,\n      timeZone,\n      theme: document.documentElement.dataset.theme,\n      route: mask(window.location.pathname).slice(0, 120),\n      posthogSessionId: posthog.get_session_id?.() || undefined,\n    };\n  }, []);\n\n  const submit = useCallback(\n    async (data: CreateFeedbackSignal) => {\n      // A signal about a SUBJECT (a thumb on one answer) is per-thing and must\n      // not close the prompt — the next answer gets its own thumbs. Mirrors\n      // the same test on the server, so the two cannot disagree.\n      if (!data.subjectType) closeLocally(data.promptKey);\n      const signal = await feedbackApi.recordSignal(\n        {\n          ...surroundings(),\n          ...data,\n          pageUrl:\n            data.pageUrl ??\n            (typeof window === 'undefined' ? undefined : window.location.href),\n        },\n        // The workspace they were in when they answered. Without it the api\n        // has no tenant on the request and the score is refused outright —\n        // see the note on `recordSignal`.\n        tenant?.slug,\n      );\n      return signal?.id ?? null;\n    },\n    [closeLocally, surroundings, tenant?.slug],\n  );\n\n  const dismiss = useCallback(\n    async (promptKey: string, snoozeDays?: number) => {\n      closeLocally(promptKey);\n      await feedbackApi.dismissPrompt(promptKey, snoozeDays);\n    },\n    [closeLocally],\n  );\n\n  const value = useMemo(\n    () => ({\n      ready,\n      isEligible,\n      seenCount,\n      claim,\n      release,\n      liveKey,\n      adoption,\n      reportAdoption,\n      markSeen,\n      submit,\n      dismiss,\n    }),\n    [\n      ready,\n      isEligible,\n      seenCount,\n      claim,\n      release,\n      liveKey,\n      adoption,\n      reportAdoption,\n      markSeen,\n      submit,\n      dismiss,\n    ],\n  );\n\n  return (\n    <FeedbackPromptContext.Provider value={value}>\n      {children}\n    </FeedbackPromptContext.Provider>\n  );\n}\n\n/**\n * Whether this prompt should be on screen right now, and what to do when it is\n * answered.\n *\n * Returns `visible: false` outside the provider rather than throwing. A prompt\n * is furniture: a screen rendered in a test, a storybook, or the marketing site\n * should quietly have no prompt, not crash.\n */\nexport function useFeedbackPrompt(\n  promptKey: string,\n  options: {\n    /**\n     * The screen's own condition — \"the import finished\", \"this account is\n     * older than a fortnight\". Kept out of the server because only the screen\n     * knows it, and out of the component because a prompt that mounts and then\n     * hides has already burned the one live slot.\n     */\n    when?: boolean;\n    priority?: number;\n  } = {},\n) {\n  const context = useContext(FeedbackPromptContext);\n  const { when = true, priority = 0 } = options;\n  const claim = context?.claim;\n  const release = context?.release;\n  const markSeen = context?.markSeen;\n  const liveKey = context?.liveKey ?? null;\n\n  const eligible = Boolean(context?.ready && context.isEligible(promptKey));\n  const wants = eligible && when;\n\n  useEffect(() => {\n    if (!claim || !markSeen || !wants || liveKey === promptKey) return;\n    if (claim(promptKey, priority)) markSeen(promptKey);\n  }, [claim, liveKey, markSeen, wants, promptKey, priority]);\n\n  useEffect(() => {\n    if (!wants) release?.(promptKey);\n  }, [release, wants, promptKey]);\n\n  useEffect(\n    () => () => {\n      release?.(promptKey);\n    },\n    [release, promptKey],\n  );\n\n  /**\n   * Read off the provider rather than a local `held` flag. Local state would\n   * have to be set from inside this effect, which is both the lint rule's\n   * complaint and a real one: the flag would then be a second copy of a fact\n   * the provider already knows, free to disagree with it.\n   */\n  const visible = wants && liveKey === promptKey;\n\n  return {\n    visible,\n    seenCount: context?.seenCount(promptKey) ?? 0,\n    submit: async (\n      data: Omit<CreateFeedbackSignal, 'promptKey'>,\n    ): Promise<string | null> => {\n      if (!context) return null;\n      return context.submit({ ...data, promptKey });\n    },\n    dismiss: async (snoozeDays?: number): Promise<void> => {\n      if (!context) return;\n      await context.dismiss(promptKey, snoozeDays);\n    },\n  };\n}\n\n/**\n * Record a score with none of the prompt machinery.\n *\n * THE OTHER HALF OF THE FEATURE, and the distinction is worth stating because\n * getting it wrong is how a product ends up with thumbs that fight each other:\n *\n *   `useFeedbackPrompt` is for a question the PRODUCT asks, once per account —\n *   an NPS, a CSAT after a payout. It competes for the one live slot, it\n *   remembers it was asked, and it interrupts.\n *\n *   This is for a verdict on ONE OBJECT that lives in the content — was this\n *   help topic any good, was that answer right. It takes no slot, it is never\n *   suppressed, and there can be twenty on a page, because they are not\n *   interruptions: they are part of the thing they sit under. Routing those\n *   through the slot would have meant one help topic in a list of seventeen\n *   getting a thumb and the rest silently not.\n *\n * Returns a no-op outside the provider, so a screen rendered in a test has no\n * prompts and no crash.\n */\nexport function useFeedbackSignal() {\n  const context = useContext(FeedbackPromptContext);\n  return {\n    record: async (data: CreateFeedbackSignal): Promise<string | null> => {\n      if (!context) return null;\n      return context.submit(data);\n    },\n  };\n}\n\n/**\n * Report how much of the product this workspace has used.\n *\n * Called by the home, which already loads every number it is measured from.\n * Prompts read it through `useFeatureAdoption`; nothing else needs it.\n */\nexport function useReportAdoption() {\n  const context = useContext(FeedbackPromptContext);\n  return context?.reportAdoption ?? (() => {});\n}\n\n/** How much of the product this workspace has used, or null while unknown. */\nexport function useFeatureAdoption(): number | null {\n  const context = useContext(FeedbackPromptContext);\n  return context?.adoption ?? null;\n}\n\n/**\n * Whether a key could still be asked of this account.\n *\n * For a prompt deciding whether a MORE SPECIFIC question owns the moment it is\n * about to take. The NPS uses it: a flow that carries its own \"how easy was\n * that?\" answers for itself the first time, and the product question waits\n * until that one is spent. Without it the merchant answers the specific\n * question, the slot is released, and the general one arrives on top of the\n * thank-you — two questions for one ending, which is the thing the slot exists\n * to prevent.\n *\n * Unknown reads as askable, matching `isEligible`: while the records are still\n * loading, the specific question is assumed to be coming.\n */\nexport function usePromptEligible(): (promptKey: string) => boolean {\n  const context = useContext(FeedbackPromptContext);\n  return useCallback(\n    (promptKey: string) => context?.isEligible(promptKey) ?? true,\n    [context],\n  );\n}\n"],"mappings":";AAsUI;AApUJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,OAAO,aAAa;AACpB;AAAA,EACE;AAAA,OAGK;AAsCP,MAAM,wBAAwB;AAAA,EAC5B;AACF;AAyBO,SAAS,uBAAuB;AAAA,EACrC;AACF,GAEG;AACD,QAAM,EAAE,MAAM,SAAS,OAAO,IAAI,QAAQ;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuC,CAAC,CAAC;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAUxC,QAAM,aAAa,OAAsB,IAAI;AAC7C,QAAM,kBAAkB,OAAO,CAAC;AAWhC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAM1D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAE5D,QAAM,WAAW,OAAoB,oBAAI,IAAI,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,WAAW,CAAC,KAAM;AACtB,QAAI,YAAY;AAEhB,UAAM,YAAY;AAChB,UAAI;AACF,cAAM,SAAS,MAAM,YAAY,YAAY;AAC7C,YAAI,UAAW;AAIf,cAAM,OAA8B,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC;AACtE,cAAM,OAAqC,CAAC;AAC5C,mBAAW,SAAS,MAAM;AACxB,eAAK,MAAM,SAAS,IAAI;AAAA,YACtB,UAAU,MAAM;AAAA,YAChB,WAAW,MAAM;AAAA,UACnB;AAAA,QACF;AACA,mBAAW,IAAI;AAAA,MACjB,QAAQ;AAAA,MAER,UAAE;AACA,YAAI,CAAC,UAAW,UAAS,IAAI;AAAA,MAC/B;AAAA,IACF,GAAG;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,QAAM,aAAa;AAAA,IACjB,CAAC,cAAsB;AAGrB,YAAM,SAAS,QAAQ,SAAS;AAChC,aAAO,SAAS,OAAO,WAAW;AAAA,IACpC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,cAAsB,QAAQ,SAAS,GAAG,aAAa;AAAA,IACxD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,QAAQ,YAAY,CAAC,WAAmB,WAAW,MAAM;AAC7D,QACE,WAAW,YAAY,QACvB,WAAW,YAAY,aACvB,YAAY,gBAAgB;AAE5B,aAAO;AACT,eAAW,UAAU;AACrB,oBAAgB,UAAU;AAC1B,eAAW,SAAS;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,cAAsB;AACjD,QAAI,WAAW,YAAY,UAAW;AACtC,eAAW,UAAU;AACrB,oBAAgB,UAAU;AAC1B,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,CAAC,UAAkB;AAGpD,gBAAY,CAAC,YAAa,YAAY,QAAQ,UAAU,KAAM;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YAAY,CAAC,cAAsB;AAClD,QAAI,SAAS,QAAQ,IAAI,SAAS,EAAG;AACrC,aAAS,QAAQ,IAAI,SAAS;AAC9B,SAAK,YAAY,SAAS,SAAS,EAAE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EACrD,GAAG,CAAC,CAAC;AAWL,QAAM,eAAe,YAAY,CAAC,cAAsB;AACtD,eAAW,CAAC,aAAa;AAAA,MACvB,GAAG;AAAA,MACH,CAAC,SAAS,GAAG;AAAA,QACX,UAAU;AAAA,QACV,WAAW,QAAQ,SAAS,GAAG,aAAa;AAAA,MAC9C;AAAA,IACF,EAAE;AACF,QAAI,WAAW,YAAY,WAAW;AACpC,iBAAW,UAAU;AACrB,sBAAgB,UAAU;AAC1B,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,CAAC;AAeL,QAAM,eAAe,YAAY,MAAqC;AACpE,QAAI,OAAO,WAAW,YAAa,QAAO,CAAC;AAC3C,UAAM,OAAO,CAAC,SACZ,KACG,MAAM,GAAG,EACT;AAAA,MAAI,CAAC,QACJ,4BAA4B,KAAK,GAAG,KAAK,QAAQ,KAAK,GAAG,IACrD,SACA;AAAA,IACN,EACC,KAAK,GAAG;AACb,QAAI;AACJ,QAAI;AACF,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD,QAAQ;AAAA,IAER;AACA,WAAO;AAAA,MACL,UAAU,GAAG,OAAO,UAAU,IAAI,OAAO,WAAW;AAAA,MACpD,QAAQ,UAAU;AAAA,MAClB;AAAA,MACA,OAAO,SAAS,gBAAgB,QAAQ;AAAA,MACxC,OAAO,KAAK,OAAO,SAAS,QAAQ,EAAE,MAAM,GAAG,GAAG;AAAA,MAClD,kBAAkB,QAAQ,iBAAiB,KAAK;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,OAAO,SAA+B;AAIpC,UAAI,CAAC,KAAK,YAAa,cAAa,KAAK,SAAS;AAClD,YAAM,SAAS,MAAM,YAAY;AAAA,QAC/B;AAAA,UACE,GAAG,aAAa;AAAA,UAChB,GAAG;AAAA,UACH,SACE,KAAK,YACJ,OAAO,WAAW,cAAc,SAAY,OAAO,SAAS;AAAA,QACjE;AAAA;AAAA;AAAA;AAAA,QAIA,QAAQ;AAAA,MACV;AACA,aAAO,QAAQ,MAAM;AAAA,IACvB;AAAA,IACA,CAAC,cAAc,cAAc,QAAQ,IAAI;AAAA,EAC3C;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,WAAmB,eAAwB;AAChD,mBAAa,SAAS;AACtB,YAAM,YAAY,cAAc,WAAW,UAAU;AAAA,IACvD;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAC7B,UACH;AAEJ;AAUO,SAAS,kBACd,WACA,UASI,CAAC,GACL;AACA,QAAM,UAAU,WAAW,qBAAqB;AAChD,QAAM,EAAE,OAAO,MAAM,WAAW,EAAE,IAAI;AACtC,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,SAAS;AACzB,QAAM,WAAW,SAAS;AAC1B,QAAM,UAAU,SAAS,WAAW;AAEpC,QAAM,WAAW,QAAQ,SAAS,SAAS,QAAQ,WAAW,SAAS,CAAC;AACxE,QAAM,QAAQ,YAAY;AAE1B,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,YAAY,UAAW;AAC5D,QAAI,MAAM,WAAW,QAAQ,EAAG,UAAS,SAAS;AAAA,EACpD,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,WAAW,QAAQ,CAAC;AAEzD,YAAU,MAAM;AACd,QAAI,CAAC,MAAO,WAAU,SAAS;AAAA,EACjC,GAAG,CAAC,SAAS,OAAO,SAAS,CAAC;AAE9B;AAAA,IACE,MAAM,MAAM;AACV,gBAAU,SAAS;AAAA,IACrB;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,EACrB;AAQA,QAAM,UAAU,SAAS,YAAY;AAErC,SAAO;AAAA,IACL;AAAA,IACA,WAAW,SAAS,UAAU,SAAS,KAAK;AAAA,IAC5C,QAAQ,OACN,SAC2B;AAC3B,UAAI,CAAC,QAAS,QAAO;AACrB,aAAO,QAAQ,OAAO,EAAE,GAAG,MAAM,UAAU,CAAC;AAAA,IAC9C;AAAA,IACA,SAAS,OAAO,eAAuC;AACrD,UAAI,CAAC,QAAS;AACd,YAAM,QAAQ,QAAQ,WAAW,UAAU;AAAA,IAC7C;AAAA,EACF;AACF;AAsBO,SAAS,oBAAoB;AAClC,QAAM,UAAU,WAAW,qBAAqB;AAChD,SAAO;AAAA,IACL,QAAQ,OAAO,SAAuD;AACpE,UAAI,CAAC,QAAS,QAAO;AACrB,aAAO,QAAQ,OAAO,IAAI;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,SAAS,oBAAoB;AAClC,QAAM,UAAU,WAAW,qBAAqB;AAChD,SAAO,SAAS,mBAAmB,MAAM;AAAA,EAAC;AAC5C;AAGO,SAAS,qBAAoC;AAClD,QAAM,UAAU,WAAW,qBAAqB;AAChD,SAAO,SAAS,YAAY;AAC9B;AAgBO,SAAS,oBAAoD;AAClE,QAAM,UAAU,WAAW,qBAAqB;AAChD,SAAO;AAAA,IACL,CAAC,cAAsB,SAAS,WAAW,SAAS,KAAK;AAAA,IACzD,CAAC,OAAO;AAAA,EACV;AACF;","names":[]}

package/dist/feedback/feedback-prompt.d.ts

@@ -0,0 +1,64 @@
+import { type ScoreTone } from '@withpotter/ui-kit/score-scale';
+import { type FeedbackSignalKind } from '@withpotter/lib/api';
+/**
+ * One question, asked once, that gets out of the way.
+ *
+ * THE SHELL IS SHARED AND THE QUESTION IS NOT. Every prompt in the product —
+ * the NPS on the home, the CSAT after a payout, "how easy was that import" —
+ * is this component with a different `kind` and a different sentence. Three
+ * bespoke prompt cards is how you get three answers to what dismiss means,
+ * three comment boxes with different placeholders, and one of them quietly not
+ * remembering it was already answered.
+ *
+ * THE ORDER OF OPERATIONS IS THE DESIGN.
+ *
+ *   1. The score is recorded THE MOMENT it is pressed. Not on "Send", not on
+ *      unmount. Most people press a number and never write anything, and a
+ *      flow that held the answer back until the comment step resolved would
+ *      have thrown away the majority of its own data.
+ *   2. The comment box then appears, already knowing which answer it belongs
+ *      to, and attaches to it. Skipping it is a complete interaction — the
+ *      button says "Skip", not "Cancel", because nothing is being abandoned.
+ *   3. A short thank-you, then it leaves on its own.
+ *
+ * DISMISSING IS "NOT NOW" BY DEFAULT. The × snoozes rather than kills, because
+ * the honest reading of somebody closing a prompt mid-task is that they are
+ * mid-task. Pass `snoozeDays={undefined}` where a prompt genuinely gets one
+ * chance.
+ */
+export declare function FeedbackPrompt({ promptKey, kind, question, when, commentPrompt, allowVoice, minLabel, maxLabel, toneFor, subject, layout, presentation, snoozeDays, priority, className, }: {
+    promptKey: string;
+    kind: FeedbackSignalKind;
+    /** The whole question, as a sentence. */
+    question: string;
+    /** The screen's own condition — the thing only this screen knows. */
+    when?: boolean;
+    /** What the box asks for once a score is in. Omit to skip the step. */
+    commentPrompt?: string;
+    /** Allow a spoken explanation. Defaults to the existing comment-step behavior. */
+    allowVoice?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    toneFor?: (value: number) => ScoreTone;
+    /** What was rated, when the answer is about one object not the product. */
+    subject?: {
+        type: string;
+        id: string;
+    };
+    /**
+     * `inline` sits in the page's flow where the thing being asked about is.
+     * `dock` floats bottom-centre, for a question that belongs to no one screen.
+     *
+     * Bottom-CENTRE and not the corner: the bottom-right belongs to Box's
+     * launcher on mobile and reads as a help desk everywhere else, and two owners
+     * for one piece of screen is not a spacing problem to be nudged apart.
+     */
+    layout?: 'inline' | 'dock';
+    /** Admin-authored campaigns use a focused popup; product prompts stay cards. */
+    presentation?: 'card' | 'campaign-modal';
+    /** Days until a dismissed prompt returns. `undefined` means never. */
+    snoozeDays?: number;
+    /** Higher-priority questions may replace a generic prompt in the live slot. */
+    priority?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/feedback/feedback-prompt.js

@@ -0,0 +1,231 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check, X } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Card } from "@withpotter/ui-kit/card";
+import { ScoreScale } from "@withpotter/ui-kit/score-scale";
+import { RatingInput } from "@withpotter/ui-kit/star-rating";
+import { ThumbVote } from "@withpotter/ui-kit/thumb-vote";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import { SayWhy } from "./say-why";
+import { springs } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import { useFeedbackPrompt } from "./feedback-prompt-context";
+const SCALES = {
+  nps: { min: 0, max: 10 },
+  csat: { min: 1, max: 5 },
+  ces: { min: 1, max: 7 },
+  thumb: { min: -1, max: 1 },
+  star: { min: 1, max: 5 }
+};
+function FeedbackPrompt({
+  promptKey,
+  kind,
+  question,
+  when = true,
+  commentPrompt,
+  allowVoice,
+  minLabel,
+  maxLabel,
+  toneFor,
+  subject,
+  layout = "inline",
+  presentation = "card",
+  snoozeDays = 14,
+  priority = 0,
+  className
+}) {
+  const prompt = useFeedbackPrompt(promptKey, { when, priority });
+  const [stage, setStage] = useState("asking");
+  const [score, setScore] = useState(null);
+  const [signalId, setSignalId] = useState(null);
+  const reduce = useReducedMotion();
+  const voiceEnabled = allowVoice ?? Boolean(commentPrompt);
+  const hasContextStep = Boolean(commentPrompt) || voiceEnabled;
+  useEffect(() => {
+    if (stage !== "thanking") return;
+    const timer = setTimeout(() => setStage("gone"), 1600);
+    return () => clearTimeout(timer);
+  }, [stage]);
+  const scale = SCALES[kind];
+  const handleScore = (value) => {
+    setScore(value);
+    void prompt.submit({
+      kind,
+      score: value,
+      subjectType: subject?.type,
+      subjectId: subject?.id
+    }).then(setSignalId).catch(() => {
+    });
+    setStage(hasContextStep ? "commenting" : "thanking");
+  };
+  const handleDismiss = () => {
+    setStage("gone");
+    void prompt.dismiss(snoozeDays).catch(() => {
+    });
+  };
+  const showing = stage !== "gone" && (prompt.visible || stage !== "asking");
+  const body = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: stage === "thanking" ? "Thank you." : question }),
+      stage === "asking" && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Not now",
+          onClick: handleDismiss,
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: stage === "thanking" ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0 },
+        transition: reduce ? { duration: 0 } : springs.gentle,
+        className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-5 place-items-center rounded-full bg-[var(--success-bg)] text-[var(--success)]", children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }),
+          "It goes straight to the people building this."
+        ]
+      },
+      "thanks"
+    ) : /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        initial: false,
+        transition: reduce ? { duration: 0 } : springs.gentle,
+        className: "flex flex-col gap-3",
+        children: [
+          kind === "star" ? /* @__PURE__ */ jsx(
+            RatingInput,
+            {
+              value: score,
+              onChange: handleScore,
+              label: question,
+              disabled: stage !== "asking"
+            }
+          ) : kind === "thumb" ? /* @__PURE__ */ jsx(
+            ThumbVote,
+            {
+              value: score === null ? null : score > 0 ? "up" : "down",
+              onVote: (value) => value && handleScore(value === "up" ? 1 : -1),
+              disabled: stage !== "asking"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ScoreScale,
+            {
+              min: scale.min,
+              max: scale.max,
+              value: score,
+              onChange: handleScore,
+              label: question,
+              minLabel,
+              maxLabel,
+              toneFor,
+              disabled: stage !== "asking"
+            }
+          ),
+          stage === "commenting" && hasContextStep && /* The same step `FeedbackVote` uses. It was written twice —
+             textarea, recorder, Send/Skip — and two copies of "can I
+             explain this" is how the two drift on what Skip means. */
+          /* @__PURE__ */ jsx(
+            SayWhy,
+            {
+              signalId,
+              placeholder: commentPrompt || "What led to your answer?",
+              allowComment: Boolean(commentPrompt),
+              allowVoice: voiceEnabled,
+              onDone: () => setStage("thanking")
+            }
+          )
+        ]
+      },
+      "answer"
+    ) })
+  ] });
+  if (presentation === "campaign-modal") {
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: showing,
+        onOpenChange: (open) => {
+          if (!open && stage === "asking") handleDismiss();
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[calc(100%-2rem)] max-w-xl gap-0 overflow-hidden p-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid min-h-36 place-items-center bg-[var(--accent-secondary)] px-6 py-4", children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/_placeholders/3dicons/megaphone.png",
+              alt: "Feedback campaign announcement",
+              width: 144,
+              height: 144,
+              className: "h-28 w-28 object-contain sm:h-32 sm:w-32",
+              priority: true
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6", children: [
+            /* @__PURE__ */ jsxs(DialogHeader, { className: "mb-4 pr-7 text-left", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase text-[var(--accent-primary)]", children: "Box feedback" }),
+              /* @__PURE__ */ jsx(DialogTitle, { children: "We'd value your input" }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: "Share a quick response to help us improve your merchant experience." })
+            ] }),
+            body
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: showing && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: reduce ? { opacity: 0 } : { opacity: 0, y: layout === "dock" ? 24 : 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: reduce ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 },
+      transition: reduce ? { duration: 0 } : springs.gentle,
+      className: cn(
+        layout === "dock" && // Centred, so it never argues with whatever owns the right
+        // corner — Box's launcher on a phone, a help desk everywhere
+        // else.
+        "fixed inset-x-4 z-[80] mx-auto max-w-md",
+        layout === "dock" && /**
+         * `--mb-safe-bottom`, not a number of my own.
+         *
+         * This was `calc(84px + env(safe-area-inset-bottom))`, which is
+         * a guess at the tab bar written out by hand. The real reserved
+         * zone is 54px of bar plus an 18px gap plus the inset — 72 —
+         * so the dock floated twelve pixels higher than `StickyCtaBar`
+         * and everything else anchored down there, which reads as a
+         * misalignment rather than as a choice. The token exists for
+         * exactly this and moves if the bar ever changes height.
+         */
+        "bottom-[var(--mb-safe-bottom)] lg:bottom-6",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          className: layout === "dock" ? "shadow-[var(--shadow-lg)]" : "",
+          children: body
+        }
+      )
+    }
+  ) });
+}
+export {
+  FeedbackPrompt
+};
+//# sourceMappingURL=feedback-prompt.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/feedback-prompt.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport Image from 'next/image';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Check, X } from 'lucide-react';\n// Concrete modules, not the `@withpotter/ui-kit` barrel. `ui/report-page` imports\n// this package for the vote at the foot of every report, so going through the\n// barrel would close a cycle — ui/index -> report-page -> feedback -> ui/index\n// — and the module that loses the race initialises as undefined. The failure\n// is a component rendering as nothing, at runtime, on whichever screen happens\n// to import first, which is the worst shape a bug can take.\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Card } from '@withpotter/ui-kit/card';\nimport { ScoreScale, type ScoreTone } from '@withpotter/ui-kit/score-scale';\nimport { RatingInput } from '@withpotter/ui-kit/star-rating';\nimport { ThumbVote, type ThumbValue } from '@withpotter/ui-kit/thumb-vote';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport { type FeedbackSignalKind } from '@withpotter/lib/api';\nimport { SayWhy } from './say-why';\nimport { springs } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\nimport { useFeedbackPrompt } from './feedback-prompt-context';\n\n/** The bounds each kind is asked on. Mirrors SIGNAL_SCALES on the API. */\nconst SCALES: Record<FeedbackSignalKind, { min: number; max: number }> = {\n  nps: { min: 0, max: 10 },\n  csat: { min: 1, max: 5 },\n  ces: { min: 1, max: 7 },\n  thumb: { min: -1, max: 1 },\n  star: { min: 1, max: 5 },\n};\n\ntype Stage = 'asking' | 'commenting' | 'thanking' | 'gone';\n\n/**\n * One question, asked once, that gets out of the way.\n *\n * THE SHELL IS SHARED AND THE QUESTION IS NOT. Every prompt in the product —\n * the NPS on the home, the CSAT after a payout, \"how easy was that import\" —\n * is this component with a different `kind` and a different sentence. Three\n * bespoke prompt cards is how you get three answers to what dismiss means,\n * three comment boxes with different placeholders, and one of them quietly not\n * remembering it was already answered.\n *\n * THE ORDER OF OPERATIONS IS THE DESIGN.\n *\n *   1. The score is recorded THE MOMENT it is pressed. Not on \"Send\", not on\n *      unmount. Most people press a number and never write anything, and a\n *      flow that held the answer back until the comment step resolved would\n *      have thrown away the majority of its own data.\n *   2. The comment box then appears, already knowing which answer it belongs\n *      to, and attaches to it. Skipping it is a complete interaction — the\n *      button says \"Skip\", not \"Cancel\", because nothing is being abandoned.\n *   3. A short thank-you, then it leaves on its own.\n *\n * DISMISSING IS \"NOT NOW\" BY DEFAULT. The × snoozes rather than kills, because\n * the honest reading of somebody closing a prompt mid-task is that they are\n * mid-task. Pass `snoozeDays={undefined}` where a prompt genuinely gets one\n * chance.\n */\nexport function FeedbackPrompt({\n  promptKey,\n  kind,\n  question,\n  when = true,\n  commentPrompt,\n  allowVoice,\n  minLabel,\n  maxLabel,\n  toneFor,\n  subject,\n  layout = 'inline',\n  presentation = 'card',\n  snoozeDays = 14,\n  priority = 0,\n  className,\n}: {\n  promptKey: string;\n  kind: FeedbackSignalKind;\n  /** The whole question, as a sentence. */\n  question: string;\n  /** The screen's own condition — the thing only this screen knows. */\n  when?: boolean;\n  /** What the box asks for once a score is in. Omit to skip the step. */\n  commentPrompt?: string;\n  /** Allow a spoken explanation. Defaults to the existing comment-step behavior. */\n  allowVoice?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n  toneFor?: (value: number) => ScoreTone;\n  /** What was rated, when the answer is about one object not the product. */\n  subject?: { type: string; id: string };\n  /**\n   * `inline` sits in the page's flow where the thing being asked about is.\n   * `dock` floats bottom-centre, for a question that belongs to no one screen.\n   *\n   * Bottom-CENTRE and not the corner: the bottom-right belongs to Box's\n   * launcher on mobile and reads as a help desk everywhere else, and two owners\n   * for one piece of screen is not a spacing problem to be nudged apart.\n   */\n  layout?: 'inline' | 'dock';\n  /** Admin-authored campaigns use a focused popup; product prompts stay cards. */\n  presentation?: 'card' | 'campaign-modal';\n  /** Days until a dismissed prompt returns. `undefined` means never. */\n  snoozeDays?: number;\n  /** Higher-priority questions may replace a generic prompt in the live slot. */\n  priority?: number;\n  className?: string;\n}) {\n  const prompt = useFeedbackPrompt(promptKey, { when, priority });\n  const [stage, setStage] = useState<Stage>('asking');\n  const [score, setScore] = useState<number | null>(null);\n  /**\n   * State, not a ref: the comment step RENDERS from it now, and a ref read\n   * during render is a value React cannot promise is current.\n   */\n  const [signalId, setSignalId] = useState<string | null>(null);\n  const reduce = useReducedMotion();\n  const voiceEnabled = allowVoice ?? Boolean(commentPrompt);\n  const hasContextStep = Boolean(commentPrompt) || voiceEnabled;\n\n  // The thank-you leaves on its own. Long enough to read four words, short\n  // enough that nobody waits for it.\n  useEffect(() => {\n    if (stage !== 'thanking') return;\n    const timer = setTimeout(() => setStage('gone'), 1600);\n    return () => clearTimeout(timer);\n  }, [stage]);\n\n  const scale = SCALES[kind];\n\n  const handleScore = (value: number) => {\n    setScore(value);\n    // Fire and move on. The merchant has answered; making them watch a\n    // spinner for the part they already did would be the product taking\n    // longer to say thank you than they took to answer.\n    void prompt\n      .submit({\n        kind,\n        score: value,\n        subjectType: subject?.type,\n        subjectId: subject?.id,\n      })\n      .then(setSignalId)\n      .catch(() => {});\n    setStage(hasContextStep ? 'commenting' : 'thanking');\n  };\n\n  const handleDismiss = () => {\n    setStage('gone');\n    void prompt.dismiss(snoozeDays).catch(() => {});\n  };\n\n  /**\n   * `visible` goes false the instant a score is recorded — the provider closes\n   * the prompt locally so nothing can answer it twice — so the local stage is\n   * what keeps the card on screen through the comment and the thank-you.\n   */\n  const showing = stage !== 'gone' && (prompt.visible || stage !== 'asking');\n\n  const body = (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n          {stage === 'thanking' ? 'Thank you.' : question}\n        </p>\n        {stage === 'asking' && (\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label=\"Not now\"\n            onClick={handleDismiss}\n          >\n            <X />\n          </Button>\n        )}\n      </div>\n\n      <AnimatePresence mode=\"wait\" initial={false}>\n        {stage === 'thanking' ? (\n          <motion.div\n            key=\"thanks\"\n            initial={{ opacity: 0, y: 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0 }}\n            transition={reduce ? { duration: 0 } : springs.gentle}\n            className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n          >\n            <span className=\"grid size-5 place-items-center rounded-full bg-[var(--success-bg)] text-[var(--success)]\">\n              <Check className=\"size-4\" />\n            </span>\n            It goes straight to the people building this.\n          </motion.div>\n        ) : (\n          <motion.div\n            key=\"answer\"\n            layout\n            initial={false}\n            transition={reduce ? { duration: 0 } : springs.gentle}\n            className=\"flex flex-col gap-3\"\n          >\n            {kind === 'star' ? (\n              <RatingInput\n                value={score}\n                onChange={handleScore}\n                label={question}\n                disabled={stage !== 'asking'}\n              />\n            ) : kind === 'thumb' ? (\n              <ThumbVote\n                value={\n                  score === null\n                    ? null\n                    : ((score > 0 ? 'up' : 'down') as ThumbValue)\n                }\n                onVote={(value) =>\n                  value && handleScore(value === 'up' ? 1 : -1)\n                }\n                disabled={stage !== 'asking'}\n              />\n            ) : (\n              <ScoreScale\n                min={scale.min}\n                max={scale.max}\n                value={score}\n                onChange={handleScore}\n                label={question}\n                minLabel={minLabel}\n                maxLabel={maxLabel}\n                toneFor={toneFor}\n                disabled={stage !== 'asking'}\n              />\n            )}\n\n            {stage === 'commenting' && hasContextStep && (\n              /* The same step `FeedbackVote` uses. It was written twice —\n                 textarea, recorder, Send/Skip — and two copies of \"can I\n                 explain this\" is how the two drift on what Skip means. */\n              <SayWhy\n                signalId={signalId}\n                placeholder={commentPrompt || 'What led to your answer?'}\n                allowComment={Boolean(commentPrompt)}\n                allowVoice={voiceEnabled}\n                onDone={() => setStage('thanking')}\n              />\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n\n  if (presentation === 'campaign-modal') {\n    return (\n      <Dialog\n        open={showing}\n        onOpenChange={(open) => {\n          if (!open && stage === 'asking') handleDismiss();\n        }}\n      >\n        <DialogContent className=\"w-[calc(100%-2rem)] max-w-xl gap-0 overflow-hidden p-0\">\n          <div className=\"grid min-h-36 place-items-center bg-[var(--accent-secondary)] px-6 py-4\">\n            <Image\n              src=\"/_placeholders/3dicons/megaphone.png\"\n              alt=\"Feedback campaign announcement\"\n              width={144}\n              height={144}\n              className=\"h-28 w-28 object-contain sm:h-32 sm:w-32\"\n              priority\n            />\n          </div>\n          <div className=\"p-4 sm:p-6\">\n            <DialogHeader className=\"mb-4 pr-7 text-left\">\n              <p className=\"text-xs font-semibold uppercase text-[var(--accent-primary)]\">\n                Box feedback\n              </p>\n              <DialogTitle>We&apos;d value your input</DialogTitle>\n              <DialogDescription>\n                Share a quick response to help us improve your merchant\n                experience.\n              </DialogDescription>\n            </DialogHeader>\n            {body}\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n\n  return (\n    <AnimatePresence>\n      {showing && (\n        <motion.div\n          // It ARRIVES rather than appearing. A prompt that cuts in mid-task\n          // reads as an error dialog; one that rises reads as an offer.\n          initial={\n            reduce\n              ? { opacity: 0 }\n              : { opacity: 0, y: layout === 'dock' ? 24 : 8 }\n          }\n          animate={{ opacity: 1, y: 0 }}\n          exit={reduce ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 }}\n          transition={reduce ? { duration: 0 } : springs.gentle}\n          className={cn(\n            layout === 'dock' &&\n              // Centred, so it never argues with whatever owns the right\n              // corner — Box's launcher on a phone, a help desk everywhere\n              // else.\n              'fixed inset-x-4 z-[80] mx-auto max-w-md',\n            layout === 'dock' &&\n              /**\n               * `--mb-safe-bottom`, not a number of my own.\n               *\n               * This was `calc(84px + env(safe-area-inset-bottom))`, which is\n               * a guess at the tab bar written out by hand. The real reserved\n               * zone is 54px of bar plus an 18px gap plus the inset — 72 —\n               * so the dock floated twelve pixels higher than `StickyCtaBar`\n               * and everything else anchored down there, which reads as a\n               * misalignment rather than as a choice. The token exists for\n               * exactly this and moves if the bar ever changes height.\n               */\n              'bottom-[var(--mb-safe-bottom)] lg:bottom-6',\n            className,\n          )}\n        >\n          <Card\n            className={layout === 'dock' ? 'shadow-[var(--shadow-lg)]' : ''}\n          >\n            {body}\n          </Card>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":[]}