@snowcone-app/ui 0.8.2 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",
@@ -103,7 +103,7 @@
     "react-instantsearch": "^7.15.5",
     "react-zoom-pan-pinch": "^3.6.4",
     "tailwind-merge": "^3.0.0",
-    "@snowcone-app/sdk": "0.24.1"
+    "@snowcone-app/sdk": "0.24.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
@@ -121,7 +121,7 @@
     "@vitejs/plugin-react": "^4.7.0",
     "@vueless/storybook-dark-mode": "^10.0.3",
     "jsdom": "^24.1.0",
-    "next": "15.4.6",
+    "next": "16.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.1.2",
@@ -130,7 +130,7 @@
     "tsup": "^8.0.1",
     "typescript": "^5.4.5",
     "vite": "^5.4.21",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.9",
     "@snowcone-app/brand": "0.1.0"
   },
   "scripts": {

package/src/composed/AddToCart.tsx

@@ -14,14 +14,23 @@ export interface AddToCartProps {
   text?: string;
   loadingText?: string;
   successText?: string;
+  /** Button text after a failed add; the error's message is announced in a
+   *  `role="alert"` below the button and the button stays enabled to retry. */
+  errorText?: string;
   disabled?: boolean;
   className?: string;
   quantity?: number;
-  onClick?: (cartDetail: any) => void;
+  /** Performs the add. Return a Promise and the button waits for it: "Added!"
+   *  only after it resolves; a rejection shows the error state. */
+  onClick?: (cartDetail: any) => void | Promise<unknown>;
   onError?: (error: Error) => void;
+  /** Fake delay used only when there is no `onClick` (demos). */
   simulateDelay?: number;
 }
 
+/** `data-add-to-cart` on the button — assert on this, not the label text. */
+export type AddToCartStatus = "idle" | "adding" | "added" | "error";
+
 /**
  * AddToCart - Add to cart button with validation and loading states
  *
@@ -31,8 +40,11 @@ export interface AddToCartProps {
  *
  * Features:
  * - Automatic selection validation before allowing add
- * - Loading state with customizable text
- * - Success state with visual feedback (green background)
+ * - Loading state with customizable text; waits for an async `onClick`
+ * - Success only after `onClick` resolves; a rejection shows `errorText`
+ *   plus the error message in a `role="alert"`, and the button stays
+ *   enabled to retry (never a silent "Added!")
+ * - `data-add-to-cart="idle|adding|added|error"` for tests and agents
  * - Automatic cart detail generation with variant info
  * - Simulated delay for cart operations
  * - Screen reader announcements for state changes
@@ -57,9 +69,10 @@ export interface AddToCartProps {
  * <Product productId="shirt-123">
  *   <ProductOptions />
  *   <AddToCart
- *     onClick={(cartDetail) => {
- *       console.log('Added to cart:', cartDetail);
- *       // Add to your cart state/API
+ *     onClick={async (cartDetail) => {
+ *       // Throw (or reject) if the add fails — the button shows the error.
+ *       const res = await fetch('/api/cart', { method: 'POST', body: JSON.stringify(cartDetail) });
+ *       if (!res.ok) throw new Error('Could not add to cart');
  *     }}
  *   />
  * </Product>
@@ -89,27 +102,26 @@ export interface AddToCartProps {
  *
  * @example
  * ```tsx
- * // Faster simulation for testing
- * <AddToCart
- *   simulateDelay={500}
- *   onClick={(detail) => console.log(detail)}
- * />
+ * // Demo without a real cart: a simulated delay, then "Added!"
+ * <AddToCart simulateDelay={500} />
  * ```
  *
  * @param text - Button text in default state (default: "Add to Bag")
  * @param loadingText - Button text while adding (default: "Adding...")
  * @param successText - Button text after successful add (default: "Added!")
+ * @param errorText - Button text after a failed add (default: "Couldn't add — try again")
  * @param disabled - Force button to disabled state
  * @param className - Additional CSS classes for button
  * @param quantity - Number of items to add (default: 1)
- * @param onClick - Callback with cart detail after successful add
+ * @param onClick - Performs the add with the cart detail; may return a Promise, which the button awaits
  * @param onError - Callback when add fails with error
- * @param simulateDelay - Delay in ms to simulate cart operation (default: 1000)
+ * @param simulateDelay - Delay in ms to simulate a cart operation when there is no `onClick` (default: 1000)
  */
 export function AddToCart({
   text = "Add to Bag",
   loadingText = "Adding...",
   successText = "Added!",
+  errorText = "Couldn't add — try again",
   disabled = false,
   className = "",
   quantity = 1,
@@ -119,8 +131,10 @@ export function AddToCart({
 }: AddToCartProps) {
   const context = useProduct();
   const shopContext = useShopOptional();
-  const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(false);
+  const [status, setStatus] = useState<AddToCartStatus>("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const loading = status === "adding";
+  const success = status === "added";
 
   // Dev-mode warning for missing providers
   useEffect(() => {
@@ -151,7 +165,8 @@ export function AddToCart({
     if (isDisabled || !product) return;
 
     try {
-      setLoading(true);
+      setStatus("adding");
+      setErrorMessage(null);
 
       // Create cart detail using ui-core
       const cartDetail = createCartDetail({
@@ -166,28 +181,26 @@ export function AddToCart({
         throw new Error("Invalid selection - unable to create cart detail");
       }
 
-      // Simulate cart operation delay
-      await simulateCartOperation(simulateDelay);
-
-      // Call onClick handler with cart detail
-      onClick?.(cartDetail);
-
-      // Show success state
-      setSuccess(true);
+      if (onClick) {
+        // The host performs the add; success means it resolved.
+        await onClick(cartDetail);
+      } else {
+        await simulateCartOperation(simulateDelay);
+      }
 
-      // Reset success after 2 seconds
+      setStatus("added");
       setTimeout(() => {
-        setSuccess(false);
+        setStatus((s) => (s === "added" ? "idle" : s));
       }, 2000);
     } catch (error) {
-      onError?.(error as Error);
-      console.error("Add to cart failed:", error);
-    } finally {
-      setLoading(false);
+      const err = error instanceof Error ? error : new Error(String(error));
+      setStatus("error");
+      setErrorMessage(err.message);
+      onError?.(err);
     }
   };
 
-  const buttonText = loading ? loadingText : success ? successText : text;
+  const buttonText = loading ? loadingText : success ? successText : status === "error" ? errorText : text;
 
   // Default styles that work out of the box - LLM-friendly
   // These are always applied, then className can override/extend them
@@ -204,6 +217,7 @@ export function AddToCart({
   const getAriaLabel = () => {
     if (loading) return loadingText;
     if (success) return successText;
+    if (status === "error") return `${errorText} - ${product?.name || "product"}`;
     if (!product) return text;
     return `${text} - ${product.name || 'product'}`;
   };
@@ -221,9 +235,15 @@ export function AddToCart({
         onClick={handleClick}
         aria-label={getAriaLabel()}
         aria-busy={loading}
+        data-add-to-cart={status}
       >
         {buttonText}
       </button>
+      {status === "error" && errorMessage && (
+        <p role="alert" className="mt-2 text-sm text-destructive">
+          {errorMessage}
+        </p>
+      )}
     </>
   );
 }

package/src/composed/PlacementTabs.tsx

@@ -43,8 +43,41 @@ export interface PlacementTabsProps {
   toolbarSize?: number;
   /** Additional className for the container */
   className?: string;
+  /**
+   * Linked placements (ADR-0101): one design on every print area.
+   *
+   * - `true` — LINKED. Renders one non-interactive pill naming the set
+   *   ("Both sides" for two placements, "All N areas" otherwise; the labels
+   *   in its `title`) plus a single **Customize separately** action
+   *   (`onSplitAll`). No per-placement tabs: there is one design to edit.
+   * - `false` — SPLIT. Renders the per-placement tabs plus one
+   *   **Use one design for all** action (`onLinkAll`).
+   * - `undefined` (default) — no link model: plain tabs, exactly as before.
+   */
+  linked?: boolean;
+  /** Linked → split: every placement gets its own copy of the design. */
+  onSplitAll?: () => void;
+  /** Split → linked: drop the per-placement copies, back to one design. */
+  onLinkAll?: () => void;
+  /** Override the linked pill's copy (localisation). */
+  linkedLabel?: string;
+  /** Override the "Customize separately" action copy. */
+  splitAllLabel?: string;
+  /** Override the "Use one design for all" action copy. */
+  linkAllLabel?: string;
 }
 
+/** Default pill copy for a linked set of `count` placements. */
+export function linkedPlacementsLabel(count: number): string {
+  return count === 2 ? "Both sides" : `All ${count} areas`;
+}
+
+const ACTION_CLASS =
+  "transition-colors duration-200 cursor-pointer text-muted-foreground hover:text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground";
+
+const PILL_CLASS =
+  "inline-flex items-center rounded-full bg-foreground/[0.08] px-3 py-1 font-medium text-foreground";
+
 /**
  * PlacementTabs - Renders placement tabs with optional floating toolbar placeholder.
  *
@@ -52,6 +85,11 @@ export interface PlacementTabsProps {
  * to flow around the toolbar placeholder. On desktop, renders simple tabs
  * without the toolbar placeholder (toolbar is typically in header).
  *
+ * The container carries `data-placement-tabs` and, when the link model is in
+ * play, `data-linked="true" | "false"`; the pill is `data-placement-pill`
+ * and the actions are `data-action="split-all" | "link-all"` so hosts and
+ * agents can assert the state instead of reading pixels.
+ *
  * @example
  * ```tsx
  * // Basic usage
@@ -71,6 +109,16 @@ export interface PlacementTabsProps {
  *   onPlacementChange={setSelected}
  *   isDesktop
  * />
+ *
+ * // Linked by default (ADR-0101): one design on every area
+ * <PlacementTabs
+ *   placements={placements}
+ *   selectedPlacement={selected}
+ *   onPlacementChange={setSelected}
+ *   linked={linked}
+ *   onSplitAll={splitAll}
+ *   onLinkAll={linkAll}
+ * />
  * ```
  */
 export function PlacementTabs({
@@ -81,6 +129,12 @@ export function PlacementTabs({
   toolbarPlaceholderId = "toolbar-placeholder",
   toolbarSize = 120,
   className = "",
+  linked,
+  onSplitAll,
+  onLinkAll,
+  linkedLabel,
+  splitAllLabel = "Customize separately",
+  linkAllLabel = "Use one design for all",
 }: PlacementTabsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [lineHeight, setLineHeight] = useState(24); // Default estimate
@@ -103,7 +157,7 @@ export function PlacementTabs({
       return null;
     }
     return (
-      <div className={`flex justify-end w-full ${className}`}>
+      <div className={`flex justify-end w-full ${className}`} data-placement-tabs>
         <span
           id={toolbarPlaceholderId}
           className="block"
@@ -113,15 +167,46 @@ export function PlacementTabs({
     );
   }
 
-  // Desktop: just render placement tabs without toolbar placeholder
-  if (isDesktop) {
+  const dataLinked = linked === undefined ? undefined : linked ? "true" : "false";
+  const labels = placements.map((p) => p.label);
+
+  // The row content is shared by the desktop and mobile layouts; only the
+  // toolbar-placeholder float around it differs.
+  const renderItems = (tabClass: string) => {
+    if (linked === true) {
+      return (
+        <>
+          <span
+            className={`${tabClass} ${PILL_CLASS}`}
+            data-placement-pill
+            title={labels.join(" · ")}
+            aria-label={`One design on ${labels.join(", ")}`}
+          >
+            {linkedLabel ?? linkedPlacementsLabel(placements.length)}
+          </span>
+          {onSplitAll && (
+            <button
+              type="button"
+              onClick={onSplitAll}
+              className={`${tabClass} ${ACTION_CLASS}`}
+              data-action="split-all"
+            >
+              {splitAllLabel}
+            </button>
+          )}
+        </>
+      );
+    }
     return (
-      <div className={`flex flex-wrap gap-x-3 text-sm leading-relaxed w-full ${className}`}>
+      <>
         {placements.map((p) => (
           <button
             key={p.label}
+            type="button"
             onClick={() => onPlacementChange(p.label)}
-            className={`transition-all duration-200 cursor-pointer border-b-2 ${
+            data-placement-tab={p.label}
+            aria-pressed={selectedPlacement === p.label}
+            className={`${tabClass} transition-all duration-200 cursor-pointer border-b-2 ${
               selectedPlacement === p.label
                 ? "text-foreground border-primary"
                 : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"
@@ -130,6 +215,29 @@ export function PlacementTabs({
             {p.label}
           </button>
         ))}
+        {linked === false && onLinkAll && (
+          <button
+            type="button"
+            onClick={onLinkAll}
+            className={`${tabClass} ${ACTION_CLASS}`}
+            data-action="link-all"
+          >
+            {linkAllLabel}
+          </button>
+        )}
+      </>
+    );
+  };
+
+  // Desktop: just render placement tabs without toolbar placeholder
+  if (isDesktop) {
+    return (
+      <div
+        className={`flex flex-wrap items-center gap-x-3 gap-y-1 text-sm leading-relaxed w-full ${className}`}
+        data-placement-tabs
+        data-linked={dataLinked}
+      >
+        {renderItems("")}
       </div>
     );
   }
@@ -144,6 +252,8 @@ export function PlacementTabs({
     <div
       ref={containerRef}
       className={`flex overflow-hidden text-sm leading-relaxed w-full ${className}`}
+      data-placement-tabs
+      data-linked={dataLinked}
     >
       <p className="m-0 w-full">
         <span
@@ -159,20 +269,8 @@ export function PlacementTabs({
           />
         </span>
 
-        {/* Placement tabs */}
-        {placements.map((p) => (
-          <button
-            key={p.label}
-            onClick={() => onPlacementChange(p.label)}
-            className={`inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${
-              selectedPlacement === p.label
-                ? "text-foreground border-primary"
-                : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"
-            }`}
-          >
-            {p.label}
-          </button>
-        ))}
+        {/* Placement tabs (or the linked pill + action) */}
+        {renderItems("inline mr-3")}
       </p>
     </div>
   );

package/src/composed/__tests__/AddToCart.async.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * AddToCart waits for the host's add and never reports a failure as success.
+ *
+ * - An async `onClick` is awaited: "Added!" only after it resolves.
+ * - A rejection shows `errorText`, puts the error message in a role=alert,
+ *   calls `onError`, and leaves the button enabled to retry.
+ * - `data-add-to-cart` exposes idle | adding | added | error.
+ * - With no `onClick`, the demo delay still ends in "Added!".
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import React from "react";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+vi.mock("../../patterns/Product", () => {
+  const ctx = {
+    product: { id: "P1", name: "Framed Canvas" },
+    selection: {},
+    combinations: [],
+    optionAttributes: {},
+  };
+  return { useProduct: () => ctx, useProductOptional: () => ctx };
+});
+vi.mock("../../patterns/ShopProvider", () => ({ useShopOptional: () => null }));
+vi.mock("../../utils/devWarnings", () => ({ checkProviders: () => {} }));
+vi.mock("@snowcone-app/sdk", () => ({
+  validateProductSelection: () => true,
+  createCartDetail: (d: { productId: string; quantity: number }) => ({ productId: d.productId, quantity: d.quantity }),
+  simulateCartOperation: () => Promise.resolve(),
+}));
+
+import { AddToCart } from "../AddToCart";
+
+afterEach(cleanup);
+
+function deferred() {
+  let resolve!: () => void;
+  let reject!: (e: Error) => void;
+  const promise = new Promise<void>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+const button = () => screen.getByRole("button");
+
+describe("AddToCart with an async onClick", () => {
+  it("stays 'adding' until the add resolves, then shows success", async () => {
+    const add = deferred();
+    render(<AddToCart onClick={() => add.promise} />);
+
+    fireEvent.click(button());
+    await act(async () => {});
+    expect(button().getAttribute("data-add-to-cart")).toBe("adding");
+    expect(button().textContent).toBe("Adding...");
+
+    await act(async () => add.resolve());
+    expect(button().getAttribute("data-add-to-cart")).toBe("added");
+    expect(button().textContent).toBe("Added!");
+  });
+
+  it("shows the error, alerts its message, calls onError, and allows a retry", async () => {
+    const onError = vi.fn();
+    const onClick = vi.fn(
+      (): Promise<void> => Promise.reject(new Error("Couldn't add Framed Canvas to your bag (error 500).")),
+    );
+    render(<AddToCart onClick={onClick} onError={onError} errorText="Try again" />);
+
+    await act(async () => fireEvent.click(button()));
+    expect(button().getAttribute("data-add-to-cart")).toBe("error");
+    expect(button().textContent).toBe("Try again");
+    expect(screen.getByRole("alert").textContent).toBe("Couldn't add Framed Canvas to your bag (error 500).");
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect((button() as HTMLButtonElement).disabled).toBe(false);
+
+    onClick.mockImplementationOnce(() => Promise.resolve());
+    await act(async () => fireEvent.click(button()));
+    expect(button().getAttribute("data-add-to-cart")).toBe("added");
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it("treats a synchronous throw like a rejection", async () => {
+    render(
+      <AddToCart
+        onClick={() => {
+          throw new Error("boom");
+        }}
+      />,
+    );
+    await act(async () => fireEvent.click(button()));
+    expect(button().getAttribute("data-add-to-cart")).toBe("error");
+    expect(screen.getByRole("alert").textContent).toBe("boom");
+  });
+});
+
+describe("AddToCart without onClick (demo)", () => {
+  it("ends in success after the simulated delay", async () => {
+    render(<AddToCart />);
+    expect(button().getAttribute("data-add-to-cart")).toBe("idle");
+    await act(async () => fireEvent.click(button()));
+    expect(button().getAttribute("data-add-to-cart")).toBe("added");
+  });
+});

package/src/composed/__tests__/PlacementTabs.linked.test.tsx

@@ -0,0 +1,144 @@
+/**
+ * PlacementTabs linked mode (ADR-0101 §4/§6).
+ *
+ * - `linked` undefined → today's tabs, no link actions (back-compat).
+ * - `linked: true`  → one non-interactive pill ("Both sides" / "All N areas")
+ *                     plus "Customize separately"; no per-placement tabs.
+ * - `linked: false` → the tabs plus "Use one design for all".
+ * - The container exposes `data-linked` so the state is assertable.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import React from "react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { PlacementTabs, linkedPlacementsLabel, type PlacementConfig } from "../PlacementTabs";
+
+afterEach(cleanup);
+
+const two: PlacementConfig[] = [
+  { label: "Left", type: "image", width: 1200, height: 1800 },
+  { label: "Right", type: "image", width: 1200, height: 1800 },
+];
+const four: PlacementConfig[] = [
+  ...two,
+  { label: "Front", type: "image", width: 1200, height: 1800 },
+  { label: "Back", type: "image", width: 1200, height: 1800 },
+];
+
+describe("linkedPlacementsLabel", () => {
+  it("names the set", () => {
+    expect(linkedPlacementsLabel(2)).toBe("Both sides");
+    expect(linkedPlacementsLabel(4)).toBe("All 4 areas");
+  });
+});
+
+describe.each([{ isDesktop: true }, { isDesktop: false }])(
+  "PlacementTabs (isDesktop=$isDesktop)",
+  ({ isDesktop }) => {
+    it("renders plain tabs with no link actions when `linked` is undefined", () => {
+      const { container, queryByText, getByText } = render(
+        <PlacementTabs
+          placements={two}
+          selectedPlacement="Left"
+          onPlacementChange={() => {}}
+          isDesktop={isDesktop}
+          onSplitAll={() => {}}
+          onLinkAll={() => {}}
+        />,
+      );
+      const root = container.querySelector("[data-placement-tabs]");
+      expect(root).not.toBeNull();
+      expect(root!.getAttribute("data-linked")).toBeNull();
+      expect(getByText("Left")).toBeTruthy();
+      expect(getByText("Right")).toBeTruthy();
+      expect(queryByText("Customize separately")).toBeNull();
+      expect(queryByText("Use one design for all")).toBeNull();
+    });
+
+    it("linked: shows one pill and the split action, no tabs", () => {
+      const onSplitAll = vi.fn();
+      const onPlacementChange = vi.fn();
+      const { container, queryByText, getByText } = render(
+        <PlacementTabs
+          placements={two}
+          selectedPlacement="Left"
+          onPlacementChange={onPlacementChange}
+          isDesktop={isDesktop}
+          linked
+          onSplitAll={onSplitAll}
+          onLinkAll={() => {}}
+        />,
+      );
+      const root = container.querySelector("[data-placement-tabs]")!;
+      expect(root.getAttribute("data-linked")).toBe("true");
+      const pill = container.querySelector("[data-placement-pill]")!;
+      expect(pill.textContent).toBe("Both sides");
+      expect(pill.getAttribute("title")).toBe("Left · Right");
+      expect(pill.tagName).not.toBe("BUTTON");
+      // No per-placement tabs while linked — there is one design to edit.
+      expect(container.querySelector("[data-placement-tab]")).toBeNull();
+      expect(queryByText("Use one design for all")).toBeNull();
+
+      fireEvent.click(getByText("Customize separately"));
+      expect(onSplitAll).toHaveBeenCalledTimes(1);
+      expect(onPlacementChange).not.toHaveBeenCalled();
+    });
+
+    it("linked with 4 placements says 'All 4 areas'", () => {
+      const { container } = render(
+        <PlacementTabs
+          placements={four}
+          selectedPlacement="Left"
+          onPlacementChange={() => {}}
+          isDesktop={isDesktop}
+          linked
+          onSplitAll={() => {}}
+        />,
+      );
+      expect(container.querySelector("[data-placement-pill]")!.textContent).toBe(
+        "All 4 areas",
+      );
+    });
+
+    it("split: shows the tabs plus the link action", () => {
+      const onLinkAll = vi.fn();
+      const onPlacementChange = vi.fn();
+      const { container, getByText, queryByText } = render(
+        <PlacementTabs
+          placements={two}
+          selectedPlacement="Left"
+          onPlacementChange={onPlacementChange}
+          isDesktop={isDesktop}
+          linked={false}
+          onSplitAll={() => {}}
+          onLinkAll={onLinkAll}
+        />,
+      );
+      const root = container.querySelector("[data-placement-tabs]")!;
+      expect(root.getAttribute("data-linked")).toBe("false");
+      expect(container.querySelectorAll("[data-placement-tab]")).toHaveLength(2);
+      expect(queryByText("Customize separately")).toBeNull();
+      expect(container.querySelector("[data-placement-pill]")).toBeNull();
+
+      fireEvent.click(getByText("Right"));
+      expect(onPlacementChange).toHaveBeenCalledWith("Right");
+
+      fireEvent.click(getByText("Use one design for all"));
+      expect(onLinkAll).toHaveBeenCalledTimes(1);
+    });
+
+    it("single placement renders no link model at all", () => {
+      const { container, queryByText } = render(
+        <PlacementTabs
+          placements={[two[0]]}
+          selectedPlacement="Left"
+          onPlacementChange={() => {}}
+          isDesktop={isDesktop}
+          linked
+          onSplitAll={() => {}}
+        />,
+      );
+      expect(container.querySelector("[data-placement-pill]")).toBeNull();
+      expect(queryByText("Customize separately")).toBeNull();
+    });
+  },
+);