ConsumablesProduct

Source: apps/jti-next/src/components/ConsumablesProduct/

Server component (RSC) for consumable product PDPs (e.g. nicotine pouches or tabs sold in multi-flavour matrices). Fetches consumable product data and a "product" model Builder.io entry with productType: "consumables".

Props

ProductTemplateProps plus:

Prop	Type	Description
slug	string	Magento url_key of the product
locale	string	Active locale
categoryUrlKey	string	Parent category URL key (for breadcrumbs)
activeVariantSku	string?	Pre-selected variant SKU
sticksMatrixData	SticksMatrixData?	Sticks matrix data if applicable
consumablesMatrixData	ConsumablesMatrixData	Consumables matrix (packaging formats, flavours, purchase types)

Builder.io "product" model data bindings

Key	Description
productSku	Product SKU
productName	Display name
productDescription / productShortDescription	Long and short descriptions
productBadgeText / productOverwriteBadgeText	Badge text from Magento and editorial override
productKnowMoreUrl	"Learn more" link
productIsCommerceDisabled	Commerce kill-switch
productIsMultiPackEnabled / productMultiPackName / productMultiPackDescription / productMultiPackProducts	Multi-pack configuration
productCustomBuyCtaLabel	Override CTA label
productConsumablesMatrixData	Full consumables matrix for flavour selector
productIsSubscriptionsEnabled	Whether subscriptions are available
teaserProducts / products	Cross-sell and variant product data

UI primitive: @jti/ui ConsumablesFormStepSection

Source: packages/ui/src/components/ConsumablesFormStepSection/ConsumablesFormStepSection.tsx
Exported from @jti/ui index: ✅

Renders a <fieldset> / <legend> step wrapper for each section of the consumables purchase form (e.g. "Choose format", "Choose flavour").

type ConsumablesFormStepSectionProps = {
  title: React.ReactNode;
  children: React.ReactNode;
} & Omit<React.FieldsetHTMLAttributes<HTMLElement>, "title">;

All standard fieldset HTML attributes are forwarded except title.

UI primitive: @jti/ui MultipleFlavorsSelector / MultibrandMultipleFlavorsSelector

Source: packages/ui/src/components/MultipleFlavorsSelector/MultipleFlavorsSelector.tsx
Exported from @jti/ui index: ✅ (MultipleFlavorsSelector); MultibrandMultipleFlavorsSelector is in its own barrel but not at the package root.

// Single-brand variant
type MultipleFlavorsSelectorProps = {
  items: MultipleFlavorsSelectorItem[];
  stockStatusElements: StockStatusElements;
  onChange: (flavorSelection: FlavorsSelection) => void;
  limit: number;
  defaultFlavorsSelection?: FlavorsSelection | null;
  shouldValidate?: boolean;
  hasError?: boolean;
  isProductDataLoading?: boolean;
  error?: string;
  className?: string;
};

// Multi-brand variant
type MultibrandMultipleFlavorsSelectorProps = {
  brands: BrandWithFlavorItems[];
  stockStatusElements: StockStatusElements;
  onChange: (flavorSelection: FlavorsSelection) => void;
  title: string;
  limit: number;
  defaultFlavorsSelection?: FlavorsSelection | null;
  showValidation?: boolean;
  hasError?: boolean;
  isProductDataLoading?: boolean;
  error?: string;
};