@withpotter/components 0.13.0-next.101

package/dist/business-setup/step-name.js

@@ -0,0 +1,235 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Store } from "lucide-react";
+import { onboardingApi } from "@withpotter/lib/api/onboarding";
+import { isValidSlug, sanitizeSlug, slugify } from "@withpotter/lib/slug";
+import { COUNTRIES } from "@withpotter/lib/countries";
+import { CountryFlag } from "@withpotter/ui-kit/country-flag";
+import { Input, Select, inputErrorClass } from "@withpotter/ui-kit";
+import {
+  BUSINESS_CATEGORIES,
+  suggestBusinessCategory
+} from "@withpotter/lib/business-categories";
+const COUNTRY_CHOICES = COUNTRIES.map((item) => ({
+  value: item.name,
+  label: item.name,
+  leading: /* @__PURE__ */ jsx(CountryFlag, { code: item.code })
+}));
+function StepName({
+  initialName,
+  initialSlug,
+  initialCountry,
+  initialCategory,
+  initialPhone,
+  showCategory = false,
+  onEnter,
+  submitAttempt = 0,
+  onLiveChange
+}) {
+  const [name, setName] = useState(initialName);
+  const [slug, setSlug] = useState(initialSlug || slugify(initialName));
+  const slugTouched = false;
+  const [country, setCountry] = useState(initialCountry);
+  const [phone] = useState(initialPhone);
+  const [category, setCategory] = useState(initialCategory);
+  const [categoryTouched, setCategoryTouched] = useState(
+    initialCategory !== ""
+  );
+  const checkSeq = useRef(0);
+  const nameRef = useRef(null);
+  const suggestedCategory = suggestBusinessCategory({ businessName: name });
+  const effectiveCategory = showCategory ? category : categoryTouched ? category : suggestedCategory || category;
+  const onNameChange = (v) => {
+    setName(v);
+    if (!slugTouched) setSlug(slugify(v));
+  };
+  const localStatus = slug.length === 0 ? "idle" : !isValidSlug(slug) ? "invalid" : null;
+  const [remote, setRemote] = useState({
+    slug: "",
+    status: "idle"
+  });
+  const status = localStatus ?? (remote.slug === slug ? remote.status : "checking");
+  const MAX_TRIES = 5;
+  const attempt = useRef(0);
+  useEffect(() => {
+    attempt.current = 0;
+  }, [name]);
+  useEffect(() => {
+    if (localStatus) return;
+    const seq = ++checkSeq.current;
+    const handle = setTimeout(async () => {
+      try {
+        const res = await onboardingApi.checkSlug(slug);
+        if (seq !== checkSeq.current) return;
+        if (!res.available && !slugTouched) {
+          const base = slugify(name) || slug;
+          const cc = COUNTRIES.find((c) => c.name === country)?.code;
+          const trade = effectiveCategory ? slugify(effectiveCategory).split("-")[0] : "";
+          const ladder = [
+            base.replace(/-/g, ""),
+            cc ? `${base}-${cc.toLowerCase()}` : "",
+            trade && !base.includes(trade) ? `${base}-${trade}` : ""
+          ].filter((c) => c && c !== base && isValidSlug(c));
+          if (attempt.current < MAX_TRIES) {
+            const next = ladder[attempt.current] ?? `${base}-${Math.random().toString(36).slice(2, 6)}`;
+            attempt.current += 1;
+            setSlug(sanitizeSlug(next));
+            return;
+          }
+        }
+        setRemote({ slug, status: res.available ? "available" : "taken" });
+      } catch {
+        if (seq === checkSeq.current) setRemote({ slug, status: "error" });
+      }
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [slug, localStatus, slugTouched, name, country, effectiveCategory]);
+  const attempted = submitAttempt > 0;
+  const nameError = !attempted ? null : name.trim().length === 0 ? "Enter your business name." : name.trim().length < 3 ? "Use at least 3 characters." : null;
+  const categoryError = attempted && showCategory && !category ? "Choose a category." : null;
+  const countryError = attempted && !country ? "Choose your country." : null;
+  useEffect(() => {
+    if (submitAttempt === 0) return;
+    if (nameError) nameRef.current?.focus();
+    else if (countryError) document.getElementById("ob-country")?.focus();
+    else if (categoryError) document.getElementById("ob-category")?.focus();
+  }, [submitAttempt]);
+  const valid = name.trim().length >= 3 && isValidSlug(slug) && country !== "" && (status === "available" || status === "error") && (!showCategory || category !== "");
+  useEffect(() => {
+    onLiveChange({
+      businessName: name,
+      slug,
+      country,
+      phone,
+      category: effectiveCategory,
+      valid
+    });
+  }, [
+    name,
+    slug,
+    country,
+    phone,
+    effectiveCategory,
+    valid,
+    onLiveChange
+    // the stable stand-in for `describedIntents`; see the note above.
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: "ob-name",
+        className: "mb-2 block text-sm font-medium text-[var(--text-primary)]",
+        children: "Business name"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Store, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-muted)]" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "ob-name",
+          ref: nameRef,
+          value: name,
+          autoFocus: true,
+          "aria-label": "Business name",
+          "aria-invalid": nameError ? true : void 0,
+          "aria-describedby": nameError ? "ob-name-error" : void 0,
+          enterKeyHint: onEnter ? "go" : void 0,
+          onKeyDown: (e) => {
+            if (e.key !== "Enter" || e.nativeEvent.isComposing || !onEnter)
+              return;
+            e.preventDefault();
+            onEnter();
+          },
+          onChange: (e) => {
+            const v = e.target.value;
+            onNameChange(v.charAt(0).toUpperCase() + v.slice(1));
+          },
+          placeholder: "e.g. \xCClera Wellness",
+          className: `h-12 w-full pl-10 pr-4 text-base ${nameError ? inputErrorClass : ""}`
+        }
+      )
+    ] }),
+    nameError && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: "ob-name-error",
+        role: "alert",
+        className: "mt-2 text-xs text-[var(--error)]",
+        children: nameError
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "ob-country",
+          className: "mb-2 block text-sm font-medium text-[var(--text-primary)]",
+          children: "Country"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: "ob-country",
+          value: country,
+          onChange: setCountry,
+          options: COUNTRY_CHOICES,
+          placeholder: "Select your country",
+          searchable: true,
+          searchPlaceholder: "Search countries",
+          ariaLabel: "Country",
+          invalid: !!countryError,
+          triggerClassName: "min-h-12 text-base"
+        }
+      ),
+      countryError && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-2 text-xs text-[var(--error)]", children: countryError })
+    ] }),
+    showCategory && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "ob-category",
+          className: "mb-2 block text-sm font-medium text-[var(--text-primary)]",
+          children: "Business category"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          id: "ob-category",
+          value: category,
+          onChange: (value) => {
+            setCategory(value);
+            setCategoryTouched(true);
+          },
+          options: [
+            ...category && !BUSINESS_CATEGORIES.some((item) => item.id === category) ? [{ value: category, label: category }] : [],
+            ...BUSINESS_CATEGORIES.map((item) => ({
+              value: item.id,
+              label: item.name,
+              leading: /* @__PURE__ */ jsx(item.icon, { className: "size-4 text-[var(--text-secondary)]" })
+            }))
+          ],
+          placeholder: "Select your business category",
+          searchable: true,
+          searchPlaceholder: "Search categories",
+          ariaLabel: "Business category",
+          invalid: !!categoryError,
+          onCreateOption: (value) => {
+            setCategory(value);
+            setCategoryTouched(true);
+          },
+          triggerClassName: "min-h-12 text-base"
+        }
+      ),
+      categoryError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-2 text-xs text-[var(--error)]", children: categoryError }) : /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: "Can\u2019t find yours? Search or add a custom category." })
+    ] })
+  ] });
+}
+export {
+  StepName
+};
+//# sourceMappingURL=step-name.js.map

package/dist/business-setup/step-name.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/business-setup/step-name.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Store } from 'lucide-react';\nimport { onboardingApi } from '@withpotter/lib/api/onboarding';\nimport { isValidSlug, sanitizeSlug, slugify } from '@withpotter/lib/slug';\nimport { COUNTRIES } from '@withpotter/lib/countries';\nimport { CountryFlag } from '@withpotter/ui-kit/country-flag';\nimport { Input, Select, inputErrorClass } from '@withpotter/ui-kit';\nimport {\n  BUSINESS_CATEGORIES,\n  suggestBusinessCategory,\n} from '@withpotter/lib/business-categories';\n\nexport type SlugStatus =\n  'idle' | 'checking' | 'available' | 'taken' | 'invalid' | 'error';\n\ninterface StepNameProps {\n  initialName: string;\n  initialSlug: string;\n  initialCountry: string;\n  initialCategory: string;\n  /**\n   * Fires on every keystroke and every pick. The card beside this form is the\n   * point of the screen, and a card that only caught up on Continue would be a\n   * summary rather than a thing being made.\n   */\n  initialPhone: string;\n  showCategory?: boolean;\n  /**\n   * Enter in the name field. The shell owns Continue, so the field cannot\n   * advance on its own; a shell that wants Enter to continue passes this.\n   */\n  onEnter?: () => void;\n  /**\n   * How many times Continue has been pressed while this screen was not ready.\n   * Zero until the first; from then on a field still wrong shows it, and the\n   * first wrong one takes focus. Nothing is red before that — a form that\n   * scolds an empty field the moment it renders is shouting at a blank page.\n   */\n  submitAttempt?: number;\n  onLiveChange: (patch: {\n    businessName: string;\n    slug: string;\n    country: string;\n    phone: string;\n    category: string;\n    /** The shell owns the Continue button, so it needs to know when to enable it. */\n    valid: boolean;\n  }) => void;\n  /** The mark sits beside the name; the flow owns the file. */\n  /**\n   * Draw the mark inline.\n   *\n   * False inside the sign-in frame, where the left panel is the mark and a\n   * second copy beside the name would be the same control twice on one screen.\n   * True in the in-dashboard modal, which has no panel.\n   */\n}\n\nconst COUNTRY_CHOICES = COUNTRIES.map((item) => ({\n  value: item.name,\n  label: item.name,\n  leading: <CountryFlag code={item.code} />,\n}));\n\n/**\n * One question, and two answers the merchant does not have to type.\n *\n * What this screen used to be: a heading, a subtitle, a label repeating the\n * heading, a name field, a full web-address field, a status line under it, and\n * a wordless dashed square for a logo. Seven things for one decision, with the\n * address stated three times over (the field, its tick, and the card).\n *\n * Now the card is the display and this is only the control. The address derives\n * silently and collapses to a line you can open if you want to change it. The\n * country is guessed from the browser and never asked about — it is derivable,\n * correctable elsewhere, and was a whole control for a fact nobody disputes.\n * The logo moved onto the card artwork, where the thing it changes actually is.\n *\n * The slug stays decoupled from the display name once edited, so \"Lekki Padel\n * Club\" can live at `lekki-padel`. Availability is checked against the real\n * endpoint, debounced, with a sequence guard so a slow answer for an old slug\n * can never overwrite the answer for the current one.\n */\nexport function StepName({\n  initialName,\n  initialSlug,\n  initialCountry,\n  initialCategory,\n  initialPhone,\n  showCategory = false,\n  onEnter,\n  submitAttempt = 0,\n  onLiveChange,\n}: StepNameProps) {\n  const [name, setName] = useState(initialName);\n  const [slug, setSlug] = useState(initialSlug || slugify(initialName));\n  const slugTouched = false;\n  // ASKED, NEVER GUESSED. Country decides the currency, the payment methods\n  // and which features can be activated, so a merchant on a VPN or a travelling\n  // laptop must not be set up for the wrong market without ever being shown it.\n  // A country carried in from a draft is kept; otherwise the field starts empty\n  // and Continue waits for an answer.\n  const [country, setCountry] = useState(initialCountry);\n  // Carried, not asked: the draft and the provision contract still hold a\n  // phone, and another surface may arrive with one. See the note below.\n  const [phone] = useState(initialPhone);\n  const [category, setCategory] = useState(initialCategory);\n  // Touched once the merchant has had an opinion — either they picked here, or\n  // they arrived with a category already chosen. Until then the guess is free\n  // to keep changing under them as the name takes shape.\n  // Still honoured, never set here any more: the category is read from the\n  // sentence now, and a merchant who arrived with one already chosen (adding a\n  // second business, or coming back to a draft) keeps it.\n  const [categoryTouched, setCategoryTouched] = useState(\n    initialCategory !== '',\n  );\n  const checkSeq = useRef(0);\n  const nameRef = useRef<HTMLInputElement>(null);\n\n  // The category guesses itself from the name. Nobody should have to classify\n  // their own business to get past screen one, and the name is usually the\n  // answer: Ìtura Bodywork is wellness, Mama's Kitchen is food. It abstains\n  // rather than guess when the name gives nothing away — \"Ember Palm\" could be\n  // anything, and a confidently wrong label is worse than an empty one.\n  //\n  // Derived, not stored. The guess is a function of the name, and a name that\n  // is still being typed would otherwise need an effect writing state on every\n  // keystroke to keep up. The moment the merchant picks anything themselves,\n  // `categoryTouched` freezes it and their answer is the only one that counts.\n  /**\n   * A first guess from the NAME, and only that.\n   *\n   * The sentence that used to feed this is gone (see the note on the removed\n   * field below), so this is back to what it always was: \"Mama's Kitchen\" is\n   * food, \"Ìtura Bodywork\" is wellness, and a name that gives nothing away\n   * yields nothing. The real answer arrives one screen later — the shape step's\n   * intents resolve a category through `INTENT_CATEGORY`, which is why asking\n   * here was redundant.\n   */\n  const suggestedCategory = suggestBusinessCategory({ businessName: name });\n  const effectiveCategory = showCategory\n    ? category\n    : categoryTouched\n      ? category\n      : suggestedCategory || category;\n\n  const onNameChange = (v: string) => {\n    setName(v);\n    if (!slugTouched) setSlug(slugify(v));\n  };\n\n  /**\n   * Availability, in two halves.\n   *\n   * Whether a slug is well-formed is knowable during render, so it is derived\n   * rather than pushed into state by an effect. Only the answer from the server\n   * is stored, tagged with the slug it belongs to — which also means \"we have\n   * not asked about this one yet\" reads as `checking` without anyone having to\n   * set it, and a slow reply for an old slug can never overwrite the current\n   * one.\n   */\n  const localStatus: SlugStatus | null =\n    slug.length === 0 ? 'idle' : !isValidSlug(slug) ? 'invalid' : null;\n  const [remote, setRemote] = useState<{ slug: string; status: SlugStatus }>({\n    slug: '',\n    status: 'idle',\n  });\n  const status: SlugStatus =\n    localStatus ?? (remote.slug === slug ? remote.status : 'checking');\n\n  /**\n   * A DERIVED ADDRESS IS NEVER \"TAKEN\". It just becomes the next free one.\n   *\n   * John, 2026-09-07: *\"the domain already taken shoudl only happen if you are\n   * tryingto chnage the deafutl domain... when you write your business name we\n   * shoudl give you a domain that refernces your business name and we should\n   * make sure its not taken\"*.\n   *\n   * He is right, and the old behaviour was the product blaming the merchant for\n   * something they had not done: type \"Ada Stores\", and if `ada-stores` happens\n   * to exist you were shown an error and a blocked Continue for an address you\n   * never chose. The merchant's answer was their NAME, and the name is fine.\n   *\n   * So while the address is still derived, a taken one is resolved rather than\n   * reported. The moment the merchant edits it themselves it is their answer,\n   * and then \"taken\" is the truth and has to be said.\n   *\n   * ── AND IT NEVER COUNTS ──\n   *\n   * The first version of this went `ada-stores` → `ada-stores-2` → `-3`, and\n   * John's reaction was the right one: *\"i dont liek the idea or 1 and 2 makes\n   * person think they are the second or soemthing yikes\"*. A number ranks you.\n   * Someone naming their own business does not want to be told they are the\n   * second Ada Stores — it is the one moment in the product that should feel\n   * like theirs alone, and a queue position is the opposite of that.\n   *\n   * So every candidate is still THEIR NAME, in a different dress:\n   *\n   *   ada-stores  →  adastores        the same words, closed up\n   *               →  ada-stores-ng    their own country, if we know it\n   *               →  ada-stores-shop  what they sell, if they have said\n   *               →  ada-stores-k4f2  last resort, and reads as an id\n   *\n   * None of them says \"you are the Nth\". The random tail is last precisely\n   * because it is the only one that carries no meaning, and by then the name\n   * is popular enough that any readable variant is gone too.\n   *\n   * AND IT GIVES UP. Measured with every address taken, the first version kept\n   * minting a new random one for each refusal — an unbounded loop against the\n   * API from a screen nobody had touched. After `MAX_TRIES` it stops and says\n   * \"taken\", which is honest: we could not find them one, so the choice goes\n   * back to the merchant.\n   */\n  /** Ladder rungs plus two random tries. Past this, ask the merchant. */\n  const MAX_TRIES = 5;\n  const attempt = useRef(0);\n  useEffect(() => {\n    attempt.current = 0;\n  }, [name]);\n\n  useEffect(() => {\n    if (localStatus) return;\n    const seq = ++checkSeq.current;\n    const handle = setTimeout(async () => {\n      try {\n        const res = await onboardingApi.checkSlug(slug);\n        if (seq !== checkSeq.current) return;\n        if (!res.available && !slugTouched) {\n          const base = slugify(name) || slug;\n          const cc = COUNTRIES.find((c) => c.name === country)?.code;\n          const trade = effectiveCategory\n            ? slugify(effectiveCategory).split('-')[0]\n            : '';\n          const ladder = [\n            base.replace(/-/g, ''),\n            cc ? `${base}-${cc.toLowerCase()}` : '',\n            trade && !base.includes(trade) ? `${base}-${trade}` : '',\n          ].filter((c) => c && c !== base && isValidSlug(c));\n\n          if (attempt.current < MAX_TRIES) {\n            const next =\n              ladder[attempt.current] ??\n              `${base}-${Math.random().toString(36).slice(2, 6)}`;\n            attempt.current += 1;\n            setSlug(sanitizeSlug(next));\n            return;\n          }\n        }\n        setRemote({ slug, status: res.available ? 'available' : 'taken' });\n      } catch {\n        // A failing check must not trap the merchant on this screen; the real\n        // uniqueness constraint is enforced at provision either way.\n        if (seq === checkSeq.current) setRemote({ slug, status: 'error' });\n      }\n    }, 250);\n    return () => clearTimeout(handle);\n  }, [slug, localStatus, slugTouched, name, country, effectiveCategory]);\n\n  const attempted = submitAttempt > 0;\n  const nameError = !attempted\n    ? null\n    : name.trim().length === 0\n      ? 'Enter your business name.'\n      : name.trim().length < 3\n        ? 'Use at least 3 characters.'\n        : null;\n  const categoryError =\n    attempted && showCategory && !category ? 'Choose a category.' : null;\n  const countryError = attempted && !country ? 'Choose your country.' : null;\n\n  // The first wrong field takes focus, so the person is already where the fix is.\n  useEffect(() => {\n    if (submitAttempt === 0) return;\n    if (nameError) nameRef.current?.focus();\n    else if (countryError) document.getElementById('ob-country')?.focus();\n    else if (categoryError) document.getElementById('ob-category')?.focus();\n    // Only a new press moves focus; typing must not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [submitAttempt]);\n\n  const valid =\n    name.trim().length >= 3 &&\n    isValidSlug(slug) &&\n    country !== '' &&\n    (status === 'available' || status === 'error') &&\n    (!showCategory || category !== '');\n\n  useEffect(() => {\n    onLiveChange({\n      businessName: name,\n      slug,\n      country,\n      phone,\n      category: effectiveCategory,\n      valid,\n    });\n  }, [\n    name,\n    slug,\n    country,\n    phone,\n    effectiveCategory,\n    valid,\n    onLiveChange,\n\n    // the stable stand-in for `describedIntents`; see the note above.\n  ]);\n\n  return (\n    <div className=\"w-full\">\n      {/* NO MARK HERE. John, 2026-09-08: *\"delete this — J / Add / Your\n          mark / We made one from your name\"*, said of this control in both\n          places it has stood: on the photograph, and here on the form.\n\n          The argument for it was that the first thing a merchant types should\n          produce an object rather than only fill a box. What it does in\n          practice is ask for a file nobody has ninety seconds after naming a\n          business, and offer a monogram as the alternative — a monogram\n          `BusinessMark` derives from the name anyway, everywhere it is shown.\n          So the control's whole job was to display something that needs no\n          control. A real logo belongs in settings, where a merchant goes when\n          they have one. */}\n      {/* Leading icons at 16px to match the status glyphs already sitting at\n          the other end of these fields. The 13px app-wide standard is for\n          inline and nav icons; two sizes inside one 44px field would read as a\n          mistake. */}\n      <label\n        htmlFor=\"ob-name\"\n        className=\"mb-2 block text-sm font-medium text-[var(--text-primary)]\"\n      >\n        Business name\n      </label>\n      <div className=\"relative\">\n        <Store className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-muted)]\" />\n        <Input\n          id=\"ob-name\"\n          ref={nameRef}\n          value={name}\n          autoFocus\n          aria-label=\"Business name\"\n          aria-invalid={nameError ? true : undefined}\n          aria-describedby={nameError ? 'ob-name-error' : undefined}\n          enterKeyHint={onEnter ? 'go' : undefined}\n          onKeyDown={(e) => {\n            // `isComposing`: Enter that commits an IME candidate is not a submit.\n            if (e.key !== 'Enter' || e.nativeEvent.isComposing || !onEnter)\n              return;\n            e.preventDefault();\n            onEnter();\n          }}\n          onChange={(e) => {\n            const v = e.target.value;\n            onNameChange(v.charAt(0).toUpperCase() + v.slice(1));\n          }}\n          placeholder=\"e.g. Ìlera Wellness\"\n          className={`h-12 w-full pl-10 pr-4 text-base ${nameError ? inputErrorClass : ''}`}\n        />\n      </div>\n      {nameError && (\n        <p\n          id=\"ob-name-error\"\n          role=\"alert\"\n          className=\"mt-2 text-xs text-[var(--error)]\"\n        >\n          {nameError}\n        </p>\n      )}\n\n      <div className=\"mt-4\">\n        <label\n          htmlFor=\"ob-country\"\n          className=\"mb-2 block text-sm font-medium text-[var(--text-primary)]\"\n        >\n          Country\n        </label>\n        <Select\n          id=\"ob-country\"\n          value={country}\n          onChange={setCountry}\n          options={COUNTRY_CHOICES}\n          placeholder=\"Select your country\"\n          searchable\n          searchPlaceholder=\"Search countries\"\n          ariaLabel=\"Country\"\n          invalid={!!countryError}\n          triggerClassName=\"min-h-12 text-base\"\n        />\n        {countryError && (\n          <p role=\"alert\" className=\"mt-2 text-xs text-[var(--error)]\">\n            {countryError}\n          </p>\n        )}\n      </div>\n\n      {showCategory && (\n        <div className=\"mt-4\">\n          <label\n            htmlFor=\"ob-category\"\n            className=\"mb-2 block text-sm font-medium text-[var(--text-primary)]\"\n          >\n            Business category\n          </label>\n          <Select\n            id=\"ob-category\"\n            value={category}\n            onChange={(value) => {\n              setCategory(value);\n              setCategoryTouched(true);\n            }}\n            options={[\n              ...(category &&\n              !BUSINESS_CATEGORIES.some((item) => item.id === category)\n                ? [{ value: category, label: category }]\n                : []),\n              ...BUSINESS_CATEGORIES.map((item) => ({\n                value: item.id,\n                label: item.name,\n                leading: (\n                  <item.icon className=\"size-4 text-[var(--text-secondary)]\" />\n                ),\n              })),\n            ]}\n            placeholder=\"Select your business category\"\n            searchable\n            searchPlaceholder=\"Search categories\"\n            ariaLabel=\"Business category\"\n            invalid={!!categoryError}\n            onCreateOption={(value) => {\n              setCategory(value);\n              setCategoryTouched(true);\n            }}\n            triggerClassName=\"min-h-12 text-base\"\n          />\n          {categoryError ? (\n            <p role=\"alert\" className=\"mt-2 text-xs text-[var(--error)]\">\n              {categoryError}\n            </p>\n          ) : (\n            <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">\n              Can’t find yours? Search or add a custom category.\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* NO PHONE FIELD (John, 2026-09-07: *\"remove the phone and whatsapp\n          input thingy there\"*). It was optional, and an optional field on the\n          first screen of a first run is a question asked at the worst possible\n          moment: the merchant has committed to nothing yet and is being shown\n          something they can ignore. Settings asks for it where it belongs, and\n          the go-live gate asks for it at the one moment it actually matters —\n          when a customer would otherwise have no way to reach them.\n\n          `phone` stays in the draft and the provision contract, so the value\n          still flows when another surface collects it. Nothing downstream had\n          to change. */}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/business-setup/step-plan.d.ts

@@ -0,0 +1,28 @@
+interface StepPlanProps {
+    initial?: 'free' | 'paid';
+    /** The country answered on screen one, so the price is quoted in their money. */
+    country?: string;
+    onChange: (billingIntent: 'free' | 'paid') => void;
+}
+/**
+ * How they want to start: free, or on a plan.
+ *
+ * The last screen before the business exists, and the only one that mentions
+ * money. It takes no card and creates no subscription — `paid` changes nothing
+ * about provisioning, only where the merchant lands afterwards. Asking for
+ * payment details here would mean charging before the merchant has seen a
+ * single screen of what they are buying, and it would put a Paystack redirect
+ * inside a flow whose worst failure is a half-created business.
+ *
+ * Free is preselected and named first. That is the honest default for a product
+ * a merchant has not used yet, and it is also the true one: every business
+ * provisioned here starts on the free tier regardless of which card is lit.
+ *
+ * The paid card quotes a real price fetched from `/billing/plans` (public, so
+ * it resolves before a tenant exists). When the fetch fails or the catalogue is
+ * empty the card stays and the price line goes — a plan that cannot name its
+ * cost is still a plan, and inventing a figure on the screen where a merchant
+ * decides to spend money is the one place a placeholder must never appear.
+ */
+export declare function StepPlan({ initial, country, onChange }: StepPlanProps): import("react").JSX.Element;
+export {};

package/dist/business-setup/step-plan.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
+import { useQuery } from "@tanstack/react-query";
+import { Rocket, Sparkles } from "lucide-react";
+import { springs, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { apiFetch } from "@withpotter/lib/api/core";
+import { DEFAULT_CURRENCY, currencyForCountry } from "@withpotter/lib/countries";
+import { formatCurrency } from "@withpotter/lib/utils";
+function StepPlan({ initial, country, onChange }) {
+  const [choice, setChoice] = useState(initial ?? "free");
+  useEffect(() => {
+    onChange(choice);
+  }, [choice, onChange]);
+  const { data: plans } = useQuery({
+    queryKey: ["billing-plans-public"],
+    queryFn: () => apiFetch("/billing/plans"),
+    staleTime: 5 * 60 * 1e3,
+    // A price is a nicety on this screen, not a gate. The merchant can create
+    // their business whether or not this resolves, so a failure is silent.
+    retry: false
+  });
+  const currency = currencyForCountry(country ?? "") ?? DEFAULT_CURRENCY;
+  const cheapest = (plans ?? []).map((p) => ({ plan: p, amount: p.prices?.[currency] })).filter(
+    (p) => Boolean(p.amount && p.amount > 0)
+  ).sort((a, b) => a.amount - b.amount)[0];
+  const OPTIONS = [
+    {
+      id: "free",
+      label: "Start without a card",
+      hint: "Set the business up, put a storefront online, take your first orders.",
+      icon: Sparkles,
+      price: null
+    },
+    {
+      id: "paid",
+      label: "Start on a plan",
+      // Not "a lower cut of each sale": the fee is for hosting, and saying it
+      // buys a smaller cut is a promise the checkout does not keep.
+      hint: "More businesses and the paid tools switched on.",
+      icon: Rocket,
+      price: cheapest ? `from ${formatCurrency(cheapest.amount, currency)}/${cheapest.plan.interval === "year" ? "year" : "month"}` : null
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
+    OPTIONS.map((o) => {
+      const selected = choice === o.id;
+      return /* @__PURE__ */ jsx(
+        motion.button,
+        {
+          type: "button",
+          onClick: () => setChoice(o.id),
+          "aria-pressed": selected,
+          whileTap: { scale: PRESS_SCALE_LARGE },
+          transition: springs.snappy,
+          className: `w-full rounded-lg border px-3 py-3 text-left transition-colors ${selected ? "border-brand-500/60 bg-brand-500/10" : "border-[var(--border-subtle)] bg-[color-mix(in_srgb,var(--bg-muted)_82%,black)] hover:border-[var(--border-default)]"}`,
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              o.icon,
+              {
+                className: `mt-0.5 h-[15px] w-[15px] shrink-0 ${selected ? "text-brand-500" : "text-[var(--text-muted)]"}`
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-baseline justify-between gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-md text-[var(--text-primary)]", children: o.label }),
+                o.price && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-[var(--text-tertiary)]", children: o.price })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-[var(--text-tertiary)]", children: o.hint })
+            ] })
+          ] })
+        },
+        o.id
+      );
+    }),
+    /* @__PURE__ */ jsx("p", { className: "pt-1 text-xs text-[var(--text-tertiary)]", children: choice === "paid" ? "We\u2019ll create the business first, then take you to the plans to pick one. Nothing is charged yet." : "You can move onto a plan whenever you want. Nothing is charged now." })
+  ] });
+}
+export {
+  StepPlan
+};
+//# sourceMappingURL=step-plan.js.map

package/dist/business-setup/step-plan.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/business-setup/step-plan.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { useQuery } from '@tanstack/react-query';\nimport { Rocket, Sparkles } from 'lucide-react';\nimport { springs, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport { apiFetch } from '@withpotter/lib/api/core';\nimport { DEFAULT_CURRENCY, currencyForCountry } from '@withpotter/lib/countries';\nimport { formatCurrency } from '@withpotter/lib/utils';\n\n/**\n * Plans, as the API knows them. Only the two fields this screen reads — the\n * whole shape lives in settings/billing, which is the surface that transacts.\n */\ninterface PlanOption {\n  id: string;\n  name: string;\n  prices: Record<string, number>;\n  interval: string;\n}\n\ninterface StepPlanProps {\n  initial?: 'free' | 'paid';\n  /** The country answered on screen one, so the price is quoted in their money. */\n  country?: string;\n  onChange: (billingIntent: 'free' | 'paid') => void;\n}\n\n/**\n * How they want to start: free, or on a plan.\n *\n * The last screen before the business exists, and the only one that mentions\n * money. It takes no card and creates no subscription — `paid` changes nothing\n * about provisioning, only where the merchant lands afterwards. Asking for\n * payment details here would mean charging before the merchant has seen a\n * single screen of what they are buying, and it would put a Paystack redirect\n * inside a flow whose worst failure is a half-created business.\n *\n * Free is preselected and named first. That is the honest default for a product\n * a merchant has not used yet, and it is also the true one: every business\n * provisioned here starts on the free tier regardless of which card is lit.\n *\n * The paid card quotes a real price fetched from `/billing/plans` (public, so\n * it resolves before a tenant exists). When the fetch fails or the catalogue is\n * empty the card stays and the price line goes — a plan that cannot name its\n * cost is still a plan, and inventing a figure on the screen where a merchant\n * decides to spend money is the one place a placeholder must never appear.\n */\nexport function StepPlan({ initial, country, onChange }: StepPlanProps) {\n  const [choice, setChoice] = useState<'free' | 'paid'>(initial ?? 'free');\n\n  useEffect(() => {\n    onChange(choice);\n  }, [choice, onChange]);\n\n  const { data: plans } = useQuery({\n    queryKey: ['billing-plans-public'],\n    queryFn: () => apiFetch<PlanOption[]>('/billing/plans'),\n    staleTime: 5 * 60 * 1000,\n    // A price is a nicety on this screen, not a gate. The merchant can create\n    // their business whether or not this resolves, so a failure is silent.\n    retry: false,\n  });\n\n  // Falls back to what provisioning will actually use, not to USD. Quoting a\n  // price in a currency the workspace is then NOT created in is the same bug\n  // the comment below guards against, arriving from the other side.\n  const currency = currencyForCountry(country ?? '') ?? DEFAULT_CURRENCY;\n\n  // The cheapest plan that actually costs something. `Object.values(...)[0]` is\n  // deliberately not used: plans carry per-currency prices, and reading an\n  // arbitrary key would quote a merchant in Lagos a figure in pounds.\n  const cheapest = (plans ?? [])\n    .map((p) => ({ plan: p, amount: p.prices?.[currency] }))\n    .filter((p): p is { plan: PlanOption; amount: number } =>\n      Boolean(p.amount && p.amount > 0),\n    )\n    .sort((a, b) => a.amount - b.amount)[0];\n\n  const OPTIONS = [\n    {\n      id: 'free' as const,\n      label: 'Start without a card',\n      hint: 'Set the business up, put a storefront online, take your first orders.',\n      icon: Sparkles,\n      price: null,\n    },\n    {\n      id: 'paid' as const,\n      label: 'Start on a plan',\n      // Not \"a lower cut of each sale\": the fee is for hosting, and saying it\n      // buys a smaller cut is a promise the checkout does not keep.\n      hint: 'More businesses and the paid tools switched on.',\n      icon: Rocket,\n      price: cheapest\n        ? `from ${formatCurrency(cheapest.amount, currency)}/${cheapest.plan.interval === 'year' ? 'year' : 'month'}`\n        : null,\n    },\n  ];\n\n  return (\n    <div className=\"w-full space-y-2\">\n      {OPTIONS.map((o) => {\n        const selected = choice === o.id;\n        return (\n          <motion.button\n            key={o.id}\n            type=\"button\"\n            onClick={() => setChoice(o.id)}\n            aria-pressed={selected}\n            whileTap={{ scale: PRESS_SCALE_LARGE }}\n            transition={springs.snappy}\n            className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${\n              selected\n                ? 'border-brand-500/60 bg-brand-500/10'\n                : 'border-[var(--border-subtle)] bg-[color-mix(in_srgb,var(--bg-muted)_82%,black)] hover:border-[var(--border-default)]'\n            }`}\n          >\n            <span className=\"flex items-start gap-3\">\n              <o.icon\n                className={`mt-0.5 h-[15px] w-[15px] shrink-0 ${\n                  selected ? 'text-brand-500' : 'text-[var(--text-muted)]'\n                }`}\n              />\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"flex items-baseline justify-between gap-3\">\n                  <span className=\"text-md text-[var(--text-primary)]\">\n                    {o.label}\n                  </span>\n                  {o.price && (\n                    <span className=\"shrink-0 text-xs tabular-nums text-[var(--text-tertiary)]\">\n                      {o.price}\n                    </span>\n                  )}\n                </span>\n                <span className=\"mt-0.5 block text-xs text-[var(--text-tertiary)]\">\n                  {o.hint}\n                </span>\n              </span>\n            </span>\n          </motion.button>\n        );\n      })}\n\n      {/* Said once, under both cards, because it is true of both. On the paid\n          card alone it would read as a caveat attached to spending money; it is\n          not a caveat, it is what the button does. */}\n      <p className=\"pt-1 text-xs text-[var(--text-tertiary)]\">\n        {choice === 'paid'\n          ? 'We’ll create the business first, then take you to the plans to pick one. Nothing is charged yet.'\n          : 'You can move onto a plan whenever you want. Nothing is charged now.'}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAwHc,cAME,YANF;AAtHd,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,SAAS,yBAAyB;AAC3C,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,sBAAsB;AAwCxB,SAAS,SAAS,EAAE,SAAS,SAAS,SAAS,GAAkB;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0B,WAAW,MAAM;AAEvE,YAAU,MAAM;AACd,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,QAAM,EAAE,MAAM,MAAM,IAAI,SAAS;AAAA,IAC/B,UAAU,CAAC,sBAAsB;AAAA,IACjC,SAAS,MAAM,SAAuB,gBAAgB;AAAA,IACtD,WAAW,IAAI,KAAK;AAAA;AAAA;AAAA,IAGpB,OAAO;AAAA,EACT,CAAC;AAKD,QAAM,WAAW,mBAAmB,WAAW,EAAE,KAAK;AAKtD,QAAM,YAAY,SAAS,CAAC,GACzB,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,QAAQ,EAAE,SAAS,QAAQ,EAAE,EAAE,EACtD;AAAA,IAAO,CAAC,MACP,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;AAAA,EAClC,EACC,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;AAExC,QAAM,UAAU;AAAA,IACd;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA;AAAA;AAAA,MAGP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO,WACH,QAAQ,eAAe,SAAS,QAAQ,QAAQ,CAAC,IAAI,SAAS,KAAK,aAAa,SAAS,SAAS,OAAO,KACzG;AAAA,IACN;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,oBACZ;AAAA,YAAQ,IAAI,CAAC,MAAM;AAClB,YAAM,WAAW,WAAW,EAAE;AAC9B,aACE;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,UAAU,EAAE,EAAE;AAAA,UAC7B,gBAAc;AAAA,UACd,UAAU,EAAE,OAAO,kBAAkB;AAAA,UACrC,YAAY,QAAQ;AAAA,UACpB,WAAW,kEACT,WACI,wCACA,sHACN;AAAA,UAEA,+BAAC,UAAK,WAAU,0BACd;AAAA;AAAA,cAAC,EAAE;AAAA,cAAF;AAAA,gBACC,WAAW,qCACT,WAAW,mBAAmB,0BAChC;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,UAAK,WAAU,kBACd;AAAA,mCAAC,UAAK,WAAU,6CACd;AAAA,oCAAC,UAAK,WAAU,sCACb,YAAE,OACL;AAAA,gBACC,EAAE,SACD,oBAAC,UAAK,WAAU,6DACb,YAAE,OACL;AAAA,iBAEJ;AAAA,cACA,oBAAC,UAAK,WAAU,oDACb,YAAE,MACL;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QAjCK,EAAE;AAAA,MAkCT;AAAA,IAEJ,CAAC;AAAA,IAKD,oBAAC,OAAE,WAAU,4CACV,qBAAW,SACR,0GACA,uEACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/business-setup/step-shape.d.ts

@@ -0,0 +1,21 @@
+interface StepShapeProps {
+    initial: string[];
+    initialOffers?: string[];
+    initialOfferNote?: string;
+    category?: string;
+    onChange: (patch: {
+        intents: string[];
+        offerIds: string[];
+        offerNote: string;
+        valid: boolean;
+    }) => void;
+}
+/**
+ * The capabilities Box can turn on for this business.
+ *
+ * This uses the same intent registry as Explore ("Do more with your
+ * business"), so onboarding cannot promise a capability that the dashboard
+ * does not support.
+ */
+export declare function StepShape({ initial, initialOffers, initialOfferNote, category, onChange, }: StepShapeProps): import("react").JSX.Element;
+export {};

package/dist/business-setup/step-shape.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Check } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { INTENT_CARDS } from "@withpotter/lib/business-intents";
+import { PRESS_SCALE_LARGE, springs } from "@withpotter/lib/motion";
+import { OptionButton } from "@withpotter/ui-kit";
+const ACTION_LABELS = {
+  "sell-products": "Sell products",
+  "take-bookings": "Take bookings",
+  "rent-property": "Rent property",
+  "food-orders": "Take food orders",
+  "dine-in": "Run a restaurant",
+  subscriptions: "Offer subscriptions",
+  "digital-products": "Sell digital products",
+  "event-tickets": "Sell event tickets",
+  "send-invoices": "Send invoices",
+  "capture-leads": "Capture leads"
+};
+function StepShape({
+  initial,
+  initialOffers = [],
+  initialOfferNote = "",
+  category = "",
+  onChange
+}) {
+  const defaultIntentsByCategory = {
+    food: ["food-orders", "dine-in"],
+    beauty: ["take-bookings"],
+    fashion: ["sell-products"],
+    wellness: ["take-bookings"],
+    fitness: ["take-bookings", "subscriptions"],
+    hospitality: ["take-bookings", "event-tickets"],
+    realestate: ["rent-property"],
+    retail: ["sell-products"],
+    creative: ["take-bookings", "capture-leads"],
+    creator: ["digital-products", "subscriptions"],
+    education: ["take-bookings", "digital-products"],
+    services: ["take-bookings", "send-invoices"],
+    technology: ["digital-products", "capture-leads"],
+    professional: ["take-bookings", "send-invoices"],
+    "legal-finance": ["send-invoices", "capture-leads"],
+    marketing: ["capture-leads", "send-invoices"]
+  };
+  const knownIntentIds = useMemo(
+    () => new Set(INTENT_CARDS.map((card) => card.id)),
+    []
+  );
+  const [selected, setSelected] = useState(() => {
+    const carried = initialOffers.filter((id) => knownIntentIds.has(id));
+    return carried.length ? carried : initial.filter((id) => knownIntentIds.has(id)).length ? initial.filter((id) => knownIntentIds.has(id)) : (
+      // Only the main one. A second default assumed more than most
+      // businesses are (a restaurant that is also a takeaway), and each
+      // pick turns on real features — and "food orders" and "sell
+      // products" add the channel screen — so the rest is theirs to add.
+      (defaultIntentsByCategory[category] ?? []).slice(0, 1).filter((id) => knownIntentIds.has(id))
+    );
+  });
+  const [offerNote] = useState(initialOfferNote);
+  const reduceMotion = useReducedMotion() ?? false;
+  const toggle = (id) => {
+    setSelected(
+      (current) => current.includes(id) ? current.filter((value) => value !== id) : [...current, id]
+    );
+  };
+  useEffect(() => {
+    onChange({
+      intents: selected,
+      offerIds: selected,
+      offerNote,
+      valid: selected.length > 0
+    });
+  }, [offerNote, onChange, selected]);
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap justify-center gap-2", children: INTENT_CARDS.map((card) => {
+    const isSelected = selected.includes(card.id);
+    const actionLabel = ACTION_LABELS[card.id] ?? card.setupLabel ?? card.label;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        whileTap: { scale: PRESS_SCALE_LARGE },
+        transition: springs.snappy,
+        children: /* @__PURE__ */ jsx(
+          OptionButton,
+          {
+            selected: isSelected,
+            shape: "pill",
+            onClick: () => toggle(card.id),
+            "aria-label": `${isSelected ? "Deselect" : "Select"} ${actionLabel}`,
+            className: `!border-[color-mix(in_srgb,var(--border-default)_45%,var(--bg-base))] !bg-[color-mix(in_srgb,var(--bg-muted)_55%,var(--bg-base))] min-h-11 px-4 py-[9.5px] text-lg ${isSelected ? "!border-[color-mix(in_srgb,var(--text-primary)_45%,var(--bg-base))] !bg-[var(--text-primary)] !text-[var(--bg-base)]" : ""}`,
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", children: [
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isSelected && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  initial: { width: 0, opacity: 0 },
+                  animate: { width: "auto", opacity: 1 },
+                  exit: { width: 0, opacity: 0 },
+                  transition: reduceMotion ? { duration: 0 } : springs.snappy,
+                  className: "inline-flex overflow-hidden",
+                  children: /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: "mr-2 size-5 shrink-0",
+                      strokeWidth: 2.5
+                    }
+                  )
+                },
+                "tick"
+              ) }),
+              actionLabel
+            ] })
+          }
+        )
+      },
+      card.id
+    );
+  }) });
+}
+export {
+  StepShape
+};
+//# sourceMappingURL=step-shape.js.map

package/dist/business-setup/step-shape.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/business-setup/step-shape.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { INTENT_CARDS } from '@withpotter/lib/business-intents';\nimport { PRESS_SCALE_LARGE, springs } from '@withpotter/lib/motion';\nimport { OptionButton } from '@withpotter/ui-kit';\n\nconst ACTION_LABELS: Record<string, string> = {\n  'sell-products': 'Sell products',\n  'take-bookings': 'Take bookings',\n  'rent-property': 'Rent property',\n  'food-orders': 'Take food orders',\n  'dine-in': 'Run a restaurant',\n  subscriptions: 'Offer subscriptions',\n  'digital-products': 'Sell digital products',\n  'event-tickets': 'Sell event tickets',\n  'send-invoices': 'Send invoices',\n  'capture-leads': 'Capture leads',\n};\n\ninterface StepShapeProps {\n  initial: string[];\n  initialOffers?: string[];\n  initialOfferNote?: string;\n  category?: string;\n  onChange: (patch: {\n    intents: string[];\n    offerIds: string[];\n    offerNote: string;\n    valid: boolean;\n  }) => void;\n}\n\n/**\n * The capabilities Box can turn on for this business.\n *\n * This uses the same intent registry as Explore (\"Do more with your\n * business\"), so onboarding cannot promise a capability that the dashboard\n * does not support.\n */\nexport function StepShape({\n  initial,\n  initialOffers = [],\n  initialOfferNote = '',\n  category = '',\n  onChange,\n}: StepShapeProps) {\n  const defaultIntentsByCategory: Record<string, string[]> = {\n    food: ['food-orders', 'dine-in'],\n    beauty: ['take-bookings'],\n    fashion: ['sell-products'],\n    wellness: ['take-bookings'],\n    fitness: ['take-bookings', 'subscriptions'],\n    hospitality: ['take-bookings', 'event-tickets'],\n    realestate: ['rent-property'],\n    retail: ['sell-products'],\n    creative: ['take-bookings', 'capture-leads'],\n    creator: ['digital-products', 'subscriptions'],\n    education: ['take-bookings', 'digital-products'],\n    services: ['take-bookings', 'send-invoices'],\n    technology: ['digital-products', 'capture-leads'],\n    professional: ['take-bookings', 'send-invoices'],\n    'legal-finance': ['send-invoices', 'capture-leads'],\n    marketing: ['capture-leads', 'send-invoices'],\n  };\n  const knownIntentIds = useMemo(\n    () => new Set(INTENT_CARDS.map((card) => card.id)),\n    [],\n  );\n  const [selected, setSelected] = useState<string[]>(() => {\n    const carried = initialOffers.filter((id) => knownIntentIds.has(id));\n    return carried.length\n      ? carried\n      : initial.filter((id) => knownIntentIds.has(id)).length\n        ? initial.filter((id) => knownIntentIds.has(id))\n        : // Only the main one. A second default assumed more than most\n          // businesses are (a restaurant that is also a takeaway), and each\n          // pick turns on real features — and \"food orders\" and \"sell\n          // products\" add the channel screen — so the rest is theirs to add.\n          (defaultIntentsByCategory[category] ?? [])\n            .slice(0, 1)\n            .filter((id) => knownIntentIds.has(id));\n  });\n  const [offerNote] = useState(initialOfferNote);\n  const reduceMotion = useReducedMotion() ?? false;\n\n  const toggle = (id: string) => {\n    setSelected((current) =>\n      current.includes(id)\n        ? current.filter((value) => value !== id)\n        : [...current, id],\n    );\n  };\n\n  useEffect(() => {\n    onChange({\n      intents: selected,\n      offerIds: selected,\n      offerNote,\n      valid: selected.length > 0,\n    });\n  }, [offerNote, onChange, selected]);\n\n  return (\n    <div className=\"flex w-full flex-wrap justify-center gap-2\">\n      {INTENT_CARDS.map((card) => {\n        const isSelected = selected.includes(card.id);\n        const actionLabel =\n          ACTION_LABELS[card.id] ?? card.setupLabel ?? card.label;\n        return (\n          <motion.div\n            key={card.id}\n            whileTap={{ scale: PRESS_SCALE_LARGE }}\n            transition={springs.snappy}\n          >\n            <OptionButton\n              selected={isSelected}\n              shape=\"pill\"\n              onClick={() => toggle(card.id)}\n              aria-label={`${isSelected ? 'Deselect' : 'Select'} ${actionLabel}`}\n              className={`!border-[color-mix(in_srgb,var(--border-default)_45%,var(--bg-base))] !bg-[color-mix(in_srgb,var(--bg-muted)_55%,var(--bg-base))] min-h-11 px-4 py-[9.5px] text-lg ${\n                isSelected\n                  ? '!border-[color-mix(in_srgb,var(--text-primary)_45%,var(--bg-base))] !bg-[var(--text-primary)] !text-[var(--bg-base)]'\n                  : ''\n              }`}\n            >\n              <span className=\"inline-flex items-center\">\n                {/* The tick opens the chip's width as it arrives, so choosing\n                    reads as the chip taking something in rather than a label\n                    swapping for another. */}\n                <AnimatePresence initial={false}>\n                  {isSelected && (\n                    <motion.span\n                      key=\"tick\"\n                      aria-hidden\n                      initial={{ width: 0, opacity: 0 }}\n                      animate={{ width: 'auto', opacity: 1 }}\n                      exit={{ width: 0, opacity: 0 }}\n                      transition={\n                        reduceMotion ? { duration: 0 } : springs.snappy\n                      }\n                      className=\"inline-flex overflow-hidden\"\n                    >\n                      <Check\n                        className=\"mr-2 size-5 shrink-0\"\n                        strokeWidth={2.5}\n                      />\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n                {actionLabel}\n              </span>\n            </OptionButton>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}