ShoppingListPickerButton

Multi-list picker (business mode): a list trigger that opens a panel listing every shopping list with a per-list toggle, plus "New shopping list". Renders a popover on desktop and a bottom-sheet dialog on mobile.

import { ShoppingListPickerButton } from "@evolve-storefront/feature-shopping-list/shopping-list-picker-button";

Renders inside ShoppingListProvider.

Preview

DefaultOpen in Storybook ↗

Usage

// Business mode: the provider has a businessUnitId, so the shopper picks a list.
<ShoppingListPickerButton
  sku={product.sku}
  productName={product.name}
  setActiveShoppingListId={setActiveShoppingListId}
/>;

Props

Prop	Type	Description
sku	string
productName?	string
activeShoppingList?	ShoppingListOverviewItem	Injected active-list seam — used when creating a new list from the menu.
setActiveShoppingListId?	((id: string) => void)
className?	string

Any other props go to the root element, like on a plain HTML element.