@cimplify/sdk 0.110.2 → 0.111.0

package/registry/product-customizer.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "product-customizer.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport {\n  getProductCurrency,\n  getUnitPriceAtQuantity,\n  getVariantUnitPrice,\n  parsePrice,\n} from \"@cimplify/sdk\";\nimport { isMultiDayService, serviceBillingMultiplier } from \"../utils/price-basis\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { BookingSummary } from \"./booking-summary\";\nimport type { Staff } from \"@cimplify/sdk\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  units?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (variantId: string | undefined, variant: VariantView | undefined) => void;\n  showSpecialInstructions?: boolean;\n  /** Submit button verb; the running total is appended. Defaults to \"Add to Cart\". */\n  submitLabel?: string;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\ninterface VariantSelection {\n  id?: string;\n  variant?: VariantView;\n}\n\nconst REQUIRED_OPTIONS_MESSAGE = \"Please select all required options\";\nconst QUOTE_LOADING_MESSAGE = \"Updating price…\";\nconst QUOTE_UNAVAILABLE_MESSAGE = \"Price is unavailable. Please try again.\";\nconst CUSTOMIZER_VALIDATION_ID = \"cimplify-customizer-validation\";\n\nfunction initialVariantSelection(product: ProductWithDetails): VariantSelection {\n  const variant =\n    product.variants?.find((candidate) => candidate.is_default) ?? product.variants?.[0];\n  return { id: variant?.id, variant };\n}\n\nexport function ProductCustomizer(props: ProductCustomizerProps): React.ReactElement {\n  // A product change represents a new customization session. Keying the\n  // stateful implementation resets it synchronously and avoids an effect that\n  // briefly renders the previous product's variant and quote.\n  return <ProductCustomizerContent key={props.product.id} {...props} />;\n}\n\nfunction ProductCustomizerContent({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  submitLabel,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [variantSelection, setVariantSelection] = useState<VariantSelection>(() =>\n    initialVariantSelection(product),\n  );\n  const selectedVariantId = variantSelection.id;\n  const selectedVariant = variantSelection.variant;\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [unitsCount, setUnitsCount] = useState(1);\n\n  const cart = useCart();\n\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  // Whole-stay services can reserve N interchangeable units (rooms, kayaks,\n  // pitches) per booking — mirrors desk's wizard, which gates the input the\n  // same way; intraday party size is already the quantity.\n  const offersUnits = isService && isMultiDayService(product);\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  // Staff offered for the chosen slot. SlotStaffInfo carries id + name; richer\n  // profiles (avatars/bios) would come from a staff roster fetch.\n  const slotStaff = useMemo<Staff[]>(\n    () =>\n      (selectedSlot?.available_staff ?? []).map((member) => ({\n        id: member.staff_id,\n        name: member.name,\n      })),\n    [selectedSlot],\n  );\n  const selectedStaffName = selectedStaffId\n    ? (slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null)\n    : null;\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(\n      new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean)),\n    ).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = getVariantUnitPrice(product, selectedVariant);\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [\n    product.default_price,\n    selectedVariant,\n    selectedAddOnOptions,\n    quantity,\n    isComposite,\n    compositePrice,\n    isBundle,\n    bundleTotalPrice,\n  ]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [\n      product.id,\n      quantity,\n      selectedVariantId,\n      normalizedAddOnOptionIds,\n      isBundle,\n      bundleSelections,\n      isComposite,\n      compositeSelections,\n    ],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const {\n    quote,\n    isLoading: isQuoteLoading,\n    error: quoteError,\n    isExpired: isQuoteExpired,\n  } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const currency = quote?.currency ?? getProductCurrency(product);\n  const quoteId = quote?.quote_id;\n  const quotedUnitPrice = (quote?.quoted_total_price_info ?? quote?.final_price_info)?.final_price;\n  const quotedTotalPrice = useMemo(() => {\n    if (quotedUnitPrice === undefined || quotedUnitPrice === null) return undefined;\n    return parsePrice(quotedUnitPrice) * quantity;\n  }, [quotedUnitPrice, quantity]);\n\n  const quoteIsReady =\n    quoteEnabled && quote !== null && !isQuoteLoading && !quoteError && !isQuoteExpired;\n  const validationMessage = !quoteEnabled\n    ? REQUIRED_OPTIONS_MESSAGE\n    : quoteError\n      ? QUOTE_UNAVAILABLE_MESSAGE\n      : !quoteIsReady\n        ? QUOTE_LOADING_MESSAGE\n        : null;\n\n  // Services bill by basis × periods × units server-side, not by quantity —\n  // mirror billing_multiplier so the preview matches the cart. Both totals\n  // above already include × quantity, so divide it back out to the unit\n  // price before applying the real multiplier.\n  const displayTotalPrice = useMemo(() => {\n    const total = quotedTotalPrice ?? localTotalPrice;\n    const multiplier = serviceBillingMultiplier(product, {\n      quantity,\n      units: unitsCount,\n      scheduledStart: selectedSlot?.start_time,\n      scheduledEnd: selectedSlot?.end_time,\n    });\n    if (multiplier === null) return total;\n    return (total / Math.max(1, quantity)) * multiplier;\n  }, [quotedTotalPrice, localTotalPrice, product, quantity, unitsCount, selectedSlot]);\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setVariantSelection({ id: variantId, variant });\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (\n      isSubmitting ||\n      !quoteIsReady ||\n      !quote ||\n      quotedUnitPrice === undefined ||\n      quotedUnitPrice === null\n    ) {\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      locationId: quote.location_id ?? undefined,\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? {\n            id: selectedVariant.id,\n            name: selectedVariant.name || \"\",\n            price_adjustment: selectedVariant.price_adjustment,\n            price_info: selectedVariant.price_info,\n          }\n        : undefined,\n      quoteId,\n      quotedUnitPrice,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions:\n        selectedAddOnOptions.length > 0\n          ? selectedAddOnOptions.map((opt) => ({\n              id: opt.id,\n              name: opt.name,\n              add_on_id: opt.add_on_id,\n              default_price: opt.default_price,\n            }))\n          : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n            units: unitsCount > 1 ? unitsCount : undefined,\n          }\n        : {}),\n      customerInputs:\n        Object.keys(customerInputValues).length > 0\n          ? Object.entries(customerInputValues)\n              .filter(([, v]) => v !== undefined && v !== \"\")\n              .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n          : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [\n    product,\n    quantity,\n    selectedVariantId,\n    selectedVariant,\n    quoteId,\n    quotedUnitPrice,\n    normalizedAddOnOptionIds,\n    selectedAddOnOptions,\n    isComposite,\n    compositeSelections,\n    isBundle,\n    bundleSelections,\n    selectedBillingPlan,\n    customerInputValues,\n    specialInstructions,\n    isService,\n    selectedSlot,\n    selectedStaffId,\n    unitsCount,\n    isSubmitting,\n    onAddToCart,\n    cart,\n    quoteIsReady,\n    quote,\n  ]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          currency={currency}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          currency={currency}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => {\n            setSelectedSlot(slot);\n            setSelectedStaffId(null);\n          }}\n          participantCount={quantity}\n          units={offersUnits ? unitsCount : undefined}\n          currency={currency}\n          // Without the resolved mode the picker renders intraday slots for\n          // whole-stay services — stays need the stay-range treatment.\n          schedulingMode={product.scheduling_mode ?? (offersUnits ? \"multi_day\" : \"intraday\")}\n          durationUnit={product.duration_unit}\n          durationValue={product.duration_value}\n        />\n      )}\n\n      {offersUnits && (\n        <div data-cimplify-customizer-units className={classNames?.units}>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Units\n          </label>\n          <QuantitySelector value={unitsCount} onChange={setUnitsCount} min={1} />\n        </div>\n      )}\n\n      {isService && slotStaff.length > 0 && (\n        <div data-cimplify-customizer-staff>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Choose your specialist\n          </label>\n          <StaffPicker\n            staff={slotStaff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={setSelectedStaffId}\n            className=\"flex flex-wrap gap-2\"\n            classNames={{\n              option:\n                \"inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:border-foreground/40 cursor-pointer data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background\",\n              avatar: \"w-6 h-6 rounded-full object-cover\",\n            }}\n          />\n        </div>\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          currency={currency}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n          currency={currency}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          currency={currency}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n          currency={currency}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n          currency={currency}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div\n          data-cimplify-customizer-deposit\n          className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}\n        >\n          {product.deposit_type === \"fixed\" ? (\n            <span>\n              Deposit required: <Price amount={product.deposit_amount} currency={currency} />\n            </span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div\n          data-cimplify-customizer-allergens\n          className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}\n        >\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div\n          data-cimplify-customizer-duration\n          className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}\n        >\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      {isService && selectedSlot && (\n        <BookingSummary\n          slot={selectedSlot}\n          total={displayTotalPrice}\n          staffName={selectedStaffName}\n          durationMinutes={product.duration_minutes}\n          depositType={product.deposit_type}\n          depositAmount={product.deposit_amount}\n          currency={currency}\n        />\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {validationMessage && (\n          <p\n            id={CUSTOMIZER_VALIDATION_ID}\n            data-cimplify-customizer-validation\n            className={cn(\n              \"text-sm mb-3\",\n              quoteError ? \"text-destructive\" : \"text-muted-foreground\",\n              classNames?.validation,\n            )}\n          >\n            {validationMessage}\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span\n                data-cimplify-customizer-min-hint\n                className=\"text-xs text-muted-foreground text-center\"\n              >\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div\n              data-cimplify-customizer-unit-price\n              className=\"text-sm text-muted-foreground text-right shrink-0\"\n            >\n              <Price\n                amount={getUnitPriceAtQuantity(\n                  product.quantity_pricing,\n                  quantity,\n                  parsePrice(product.default_price),\n                )}\n                currency={currency}\n                className=\"font-medium text-foreground\"\n              />{\" \"}\n              ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteIsReady}\n            aria-describedby={validationMessage ? CUSTOMIZER_VALIDATION_ID : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? (\n              \"Added\"\n            ) : !quoteEnabled ? (\n              (submitLabel ?? \"Add to Cart\")\n            ) : !quoteIsReady ? (\n              quoteError ? (\n                QUOTE_UNAVAILABLE_MESSAGE\n              ) : (\n                QUOTE_LOADING_MESSAGE\n              )\n            ) : (\n              <>\n                {submitLabel ?? \"Add to Cart\"} &middot;{\" \"}\n                <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport {\n  getProductCurrency,\n  getUnitPriceAtQuantity,\n  getVariantUnitPrice,\n  parsePrice,\n} from \"@cimplify/sdk\";\nimport { isMultiDayService, serviceBillingMultiplier } from \"../utils/price-basis\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { BookingSummary } from \"./booking-summary\";\nimport type { Staff } from \"@cimplify/sdk\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  units?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (variantId: string | undefined, variant: VariantView | undefined) => void;\n  showSpecialInstructions?: boolean;\n  /** Submit button verb; the running total is appended. Defaults to \"Add to Cart\". */\n  submitLabel?: string;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\ninterface VariantSelection {\n  id?: string;\n  variant?: VariantView;\n}\n\nconst REQUIRED_OPTIONS_MESSAGE = \"Please select all required options\";\nconst QUOTE_LOADING_MESSAGE = \"Updating price…\";\nconst QUOTE_UNAVAILABLE_MESSAGE = \"Price is unavailable. Please try again.\";\nconst CUSTOMIZER_VALIDATION_ID = \"cimplify-customizer-validation\";\n\nfunction initialVariantSelection(product: ProductWithDetails): VariantSelection {\n  const variant =\n    product.variants?.find((candidate) => candidate.is_default) ?? product.variants?.[0];\n  return { id: variant?.id, variant };\n}\n\nexport function ProductCustomizer(props: ProductCustomizerProps): React.ReactElement {\n  // A product change represents a new customization session. Keying the\n  // stateful implementation resets it synchronously and avoids an effect that\n  // briefly renders the previous product's variant and quote.\n  return <ProductCustomizerContent key={props.product.id} {...props} />;\n}\n\nfunction ProductCustomizerContent({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  submitLabel,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [variantSelection, setVariantSelection] = useState<VariantSelection>(() =>\n    initialVariantSelection(product),\n  );\n  const selectedVariantId = variantSelection.id;\n  const selectedVariant = variantSelection.variant;\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [unitsCount, setUnitsCount] = useState(1);\n\n  const cart = useCart();\n\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  // Whole-stay services can reserve N interchangeable units (rooms, kayaks,\n  // pitches) per booking — mirrors desk's wizard, which gates the input the\n  // same way; intraday party size is already the quantity.\n  const offersUnits = isService && isMultiDayService(product);\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  // Staff offered for the chosen slot. SlotStaffInfo carries id + name; richer\n  // profiles (avatars/bios) would come from a staff roster fetch.\n  const slotStaff = useMemo<Staff[]>(\n    () =>\n      (selectedSlot?.available_staff ?? []).map((member) => ({\n        id: member.staff_id,\n        name: member.name,\n      })),\n    [selectedSlot],\n  );\n  const selectedStaffName = selectedStaffId\n    ? (slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null)\n    : null;\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(\n      new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean)),\n    ).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = getVariantUnitPrice(product, selectedVariant);\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [\n    product.default_price,\n    selectedVariant,\n    selectedAddOnOptions,\n    quantity,\n    isComposite,\n    compositePrice,\n    isBundle,\n    bundleTotalPrice,\n  ]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [\n      product.id,\n      quantity,\n      selectedVariantId,\n      normalizedAddOnOptionIds,\n      isBundle,\n      bundleSelections,\n      isComposite,\n      compositeSelections,\n    ],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const {\n    quote,\n    isLoading: isQuoteLoading,\n    error: quoteError,\n    isExpired: isQuoteExpired,\n  } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quotedPriceInfo = quote?.quoted_total_price_info ?? quote?.final_price_info;\n  const currency = quote?.currency ?? quotedPriceInfo?.currency ?? getProductCurrency(product);\n  const quoteId = quote?.quote_id;\n  const quotedUnitPrice = quotedPriceInfo?.final_price;\n  const quotedTotalPrice = useMemo(() => {\n    if (quotedUnitPrice === undefined || quotedUnitPrice === null) return undefined;\n    return parsePrice(quotedUnitPrice) * quantity;\n  }, [quotedUnitPrice, quantity]);\n\n  const quoteIsReady =\n    quoteEnabled && quote !== null && !isQuoteLoading && !quoteError && !isQuoteExpired;\n  const validationMessage = !quoteEnabled\n    ? REQUIRED_OPTIONS_MESSAGE\n    : quoteError\n      ? QUOTE_UNAVAILABLE_MESSAGE\n      : !quoteIsReady\n        ? QUOTE_LOADING_MESSAGE\n        : null;\n\n  // Services bill by basis × periods × units server-side, not by quantity —\n  // mirror billing_multiplier so the preview matches the cart. Both totals\n  // above already include × quantity, so divide it back out to the unit\n  // price before applying the real multiplier.\n  const displayTotalPrice = useMemo(() => {\n    const total = quotedTotalPrice ?? localTotalPrice;\n    const multiplier = serviceBillingMultiplier(product, {\n      quantity,\n      units: unitsCount,\n      scheduledStart: selectedSlot?.start_time,\n      scheduledEnd: selectedSlot?.end_time,\n    });\n    if (multiplier === null) return total;\n    return (total / Math.max(1, quantity)) * multiplier;\n  }, [quotedTotalPrice, localTotalPrice, product, quantity, unitsCount, selectedSlot]);\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setVariantSelection({ id: variantId, variant });\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (\n      isSubmitting ||\n      !quoteIsReady ||\n      !quote ||\n      quotedUnitPrice === undefined ||\n      quotedUnitPrice === null\n    ) {\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      locationId: quote.location_id ?? undefined,\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? {\n            id: selectedVariant.id,\n            name: selectedVariant.name || \"\",\n            price_adjustment: selectedVariant.price_adjustment,\n            price_info: selectedVariant.price_info,\n          }\n        : undefined,\n      quoteId,\n      quotedUnitPrice,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions:\n        selectedAddOnOptions.length > 0\n          ? selectedAddOnOptions.map((opt) => ({\n              id: opt.id,\n              name: opt.name,\n              add_on_id: opt.add_on_id,\n              default_price: opt.default_price,\n            }))\n          : undefined,\n      compositeSelections:\n        isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n            units: unitsCount > 1 ? unitsCount : undefined,\n          }\n        : {}),\n      customerInputs:\n        Object.keys(customerInputValues).length > 0\n          ? Object.entries(customerInputValues)\n              .filter(([, v]) => v !== undefined && v !== \"\")\n              .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n          : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [\n    product,\n    quantity,\n    selectedVariantId,\n    selectedVariant,\n    quoteId,\n    quotedUnitPrice,\n    normalizedAddOnOptionIds,\n    selectedAddOnOptions,\n    isComposite,\n    compositeSelections,\n    isBundle,\n    bundleSelections,\n    selectedBillingPlan,\n    customerInputValues,\n    specialInstructions,\n    isService,\n    selectedSlot,\n    selectedStaffId,\n    unitsCount,\n    isSubmitting,\n    onAddToCart,\n    cart,\n    quoteIsReady,\n    quote,\n  ]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          currency={currency}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          currency={currency}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => {\n            setSelectedSlot(slot);\n            setSelectedStaffId(null);\n          }}\n          participantCount={quantity}\n          units={offersUnits ? unitsCount : undefined}\n          currency={currency}\n          // Without the resolved mode the picker renders intraday slots for\n          // whole-stay services — stays need the stay-range treatment.\n          schedulingMode={product.scheduling_mode ?? (offersUnits ? \"multi_day\" : \"intraday\")}\n          durationUnit={product.duration_unit}\n          durationValue={product.duration_value}\n        />\n      )}\n\n      {offersUnits && (\n        <div data-cimplify-customizer-units className={classNames?.units}>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Units\n          </label>\n          <QuantitySelector value={unitsCount} onChange={setUnitsCount} min={1} />\n        </div>\n      )}\n\n      {isService && slotStaff.length > 0 && (\n        <div data-cimplify-customizer-staff>\n          <label className=\"block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3\">\n            Choose your specialist\n          </label>\n          <StaffPicker\n            staff={slotStaff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={setSelectedStaffId}\n            className=\"flex flex-wrap gap-2\"\n            classNames={{\n              option:\n                \"inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:border-foreground/40 cursor-pointer data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background\",\n              avatar: \"w-6 h-6 rounded-full object-cover\",\n            }}\n          />\n        </div>\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          currency={currency}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n          currency={currency}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          currency={currency}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n          currency={currency}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n          currency={currency}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div\n          data-cimplify-customizer-deposit\n          className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}\n        >\n          {product.deposit_type === \"fixed\" ? (\n            <span>\n              Deposit required: <Price amount={product.deposit_amount} currency={currency} />\n            </span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div\n          data-cimplify-customizer-allergens\n          className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}\n        >\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div\n          data-cimplify-customizer-duration\n          className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}\n        >\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      {isService && selectedSlot && (\n        <BookingSummary\n          slot={selectedSlot}\n          total={displayTotalPrice}\n          staffName={selectedStaffName}\n          durationMinutes={product.duration_minutes}\n          depositType={product.deposit_type}\n          depositAmount={product.deposit_amount}\n          currency={currency}\n        />\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {validationMessage && (\n          <p\n            id={CUSTOMIZER_VALIDATION_ID}\n            data-cimplify-customizer-validation\n            className={cn(\n              \"text-sm mb-3\",\n              quoteError ? \"text-destructive\" : \"text-muted-foreground\",\n              classNames?.validation,\n            )}\n          >\n            {validationMessage}\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span\n                data-cimplify-customizer-min-hint\n                className=\"text-xs text-muted-foreground text-center\"\n              >\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div\n              data-cimplify-customizer-unit-price\n              className=\"text-sm text-muted-foreground text-right shrink-0\"\n            >\n              <Price\n                amount={getUnitPriceAtQuantity(\n                  product.quantity_pricing,\n                  quantity,\n                  parsePrice(product.default_price),\n                )}\n                currency={currency}\n                className=\"font-medium text-foreground\"\n              />{\" \"}\n              ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteIsReady}\n            aria-describedby={validationMessage ? CUSTOMIZER_VALIDATION_ID : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? (\n              \"Added\"\n            ) : !quoteEnabled ? (\n              (submitLabel ?? \"Add to Cart\")\n            ) : !quoteIsReady ? (\n              quoteError ? (\n                QUOTE_UNAVAILABLE_MESSAGE\n              ) : (\n                QUOTE_LOADING_MESSAGE\n              )\n            ) : (\n              <>\n                {submitLabel ?? \"Add to Cart\"} &middot;{\" \"}\n                <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/search-input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "search-input.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Input } from \"@base-ui/react/input\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { useSearch } from \"@cimplify/sdk/react\";\nimport type { UseSearchOptions } from \"@cimplify/sdk/react\";\nimport { prefetchProduct } from \"./hooks/use-product\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatPrice } from \"@cimplify/sdk\";\n\nexport interface SearchInputClassNames {\n  root?: string;\n  input?: string;\n  clearButton?: string;\n  results?: string;\n  resultItem?: string;\n  empty?: string;\n  loading?: string;\n  resultImage?: string;\n  resultName?: string;\n  resultPrice?: string;\n  categoryFilter?: string;\n}\n\nexport interface SearchInputProps {\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Search options forwarded to useSearch. */\n  searchOptions?: UseSearchOptions;\n  /** Called when a product result is clicked. */\n  onResultClick?: (product: Product) => void;\n  /** Custom result item renderer. */\n  renderResult?: (product: Product) => React.ReactNode;\n  /** Show inline results dropdown. Default: true. */\n  showResults?: boolean;\n  /** Optional category ID to scope search results. */\n  categoryId?: string;\n  /** Display name for the active category filter. */\n  categoryName?: string;\n  className?: string;\n  classNames?: SearchInputClassNames;\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    data-cimplify-search-icon\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n);\n\n/**\n * SearchInput — search bar with debounced results dropdown.\n *\n * Wraps `useSearch` with a controlled input and optional inline results list.\n * Uses Base UI Field.Root + Input for accessible form semantics.\n */\nexport function SearchInput({\n  placeholder = \"Search products...\",\n  searchOptions,\n  onResultClick,\n  renderResult,\n  showResults = true,\n  categoryId,\n  categoryName,\n  className,\n  classNames,\n}: SearchInputProps): React.ReactElement {\n  const mergedOptions = useMemo<UseSearchOptions>(\n    () => (categoryId ? { ...searchOptions, category: categoryId } : searchOptions ?? {}),\n    [searchOptions, categoryId],\n  );\n  const { results, isLoading, query, setQuery, clear } = useSearch(mergedOptions);\n\n  const context = useOptionalCimplifyClient();\n  const warmResult = useCallback(\n    (product: Product) => {\n      const client = mergedOptions.client ?? context?.client;\n      if (!client || context?.prefetch.mode === \"off\") return;\n      speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    },\n    [mergedOptions.client, context],\n  );\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <Field.Root\n      data-cimplify-search\n      className={cn(className, classNames?.root)}\n      style={{ position: \"relative\" }}\n    >\n      <Field.Label className=\"sr-only\">Search products</Field.Label>\n\n      <div style={{ position: \"relative\", display: \"flex\", alignItems: \"center\" }}>\n        <span\n          data-cimplify-search-icon-wrapper\n          style={{\n            position: \"absolute\",\n            left: \"0.5rem\",\n            pointerEvents: \"none\",\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <SearchIcon />\n        </span>\n\n        <Input\n          type=\"search\"\n          value={query}\n          onValueChange={handleValueChange}\n          placeholder={placeholder}\n          data-cimplify-search-input\n          className={classNames?.input}\n        />\n\n        {query.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            data-cimplify-search-clear\n            className={classNames?.clearButton}\n            aria-label=\"Clear search\"\n          >\n            &times;\n          </button>\n        )}\n      </div>\n\n      {categoryId && (\n        <div data-cimplify-search-category-filter className={classNames?.categoryFilter}>\n          Filtered by: {categoryName || categoryId}\n        </div>\n      )}\n\n      {showResults && query.length > 0 && (\n        <div data-cimplify-search-results className={classNames?.results}>\n          {isLoading && (\n            <div data-cimplify-search-loading className={classNames?.loading} aria-busy=\"true\">\n              Searching...\n            </div>\n          )}\n\n          {!isLoading && results.length === 0 && query.length >= 2 && (\n            <div data-cimplify-search-empty className={classNames?.empty}>\n              No results found\n            </div>\n          )}\n\n          {!isLoading &&\n            results.map((product) => (\n              <button\n                key={product.id}\n                type=\"button\"\n                onClick={() => onResultClick?.(product)}\n                onPointerEnter={() => warmResult(product)}\n                onFocus={() => warmResult(product)}\n                data-cimplify-search-result\n                className={classNames?.resultItem}\n                style={!renderResult ? { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\", width: \"100%\" } : undefined}\n              >\n                {renderResult ? (\n                  renderResult(product)\n                ) : (\n                  <>\n                    {(product.images?.[0] || product.image_url) && (\n                      <img\n                        src={product.images?.[0] || product.image_url}\n                        alt=\"\"\n                        data-cimplify-search-result-image\n                        className={classNames?.resultImage}\n                        style={{ width: \"2rem\", height: \"2rem\", objectFit: \"cover\", borderRadius: \"0.25rem\", flexShrink: 0 }}\n                      />\n                    )}\n                    <span data-cimplify-search-result-name className={classNames?.resultName} style={{ flex: 1, textAlign: \"left\" }}>\n                      {product.name}\n                    </span>\n                    {product.default_price !== undefined && (\n                      <span data-cimplify-search-result-price className={classNames?.resultPrice} style={{ flexShrink: 0 }}>\n                        {formatPrice(product.default_price)}\n                      </span>\n                    )}\n                  </>\n                )}\n              </button>\n            ))}\n        </div>\n      )}\n    </Field.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Input } from \"@base-ui/react/input\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { useSearch } from \"@cimplify/sdk/react\";\nimport type { UseSearchOptions } from \"@cimplify/sdk/react\";\nimport { prefetchProduct } from \"./hooks/use-product\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\n\nexport interface SearchInputClassNames {\n  root?: string;\n  input?: string;\n  clearButton?: string;\n  results?: string;\n  resultItem?: string;\n  empty?: string;\n  loading?: string;\n  resultImage?: string;\n  resultName?: string;\n  resultPrice?: string;\n  categoryFilter?: string;\n}\n\nexport interface SearchInputProps {\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Search options forwarded to useSearch. */\n  searchOptions?: UseSearchOptions;\n  /** Called when a product result is clicked. */\n  onResultClick?: (product: Product) => void;\n  /** Custom result item renderer. */\n  renderResult?: (product: Product) => React.ReactNode;\n  /** Show inline results dropdown. Default: true. */\n  showResults?: boolean;\n  /** Optional category ID to scope search results. */\n  categoryId?: string;\n  /** Display name for the active category filter. */\n  categoryName?: string;\n  className?: string;\n  classNames?: SearchInputClassNames;\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    data-cimplify-search-icon\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n  </svg>\n);\n\n/**\n * SearchInput — search bar with debounced results dropdown.\n *\n * Wraps `useSearch` with a controlled input and optional inline results list.\n * Uses Base UI Field.Root + Input for accessible form semantics.\n */\nexport function SearchInput({\n  placeholder = \"Search products...\",\n  searchOptions,\n  onResultClick,\n  renderResult,\n  showResults = true,\n  categoryId,\n  categoryName,\n  className,\n  classNames,\n}: SearchInputProps): React.ReactElement {\n  const mergedOptions = useMemo<UseSearchOptions>(\n    () => (categoryId ? { ...searchOptions, category: categoryId } : (searchOptions ?? {})),\n    [searchOptions, categoryId],\n  );\n  const { results, isLoading, query, setQuery, clear } = useSearch(mergedOptions);\n\n  const context = useOptionalCimplifyClient();\n  const warmResult = useCallback(\n    (product: Product) => {\n      const client = mergedOptions.client ?? context?.client;\n      if (!client || context?.prefetch.mode === \"off\") return;\n      speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    },\n    [mergedOptions.client, context],\n  );\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <Field.Root\n      data-cimplify-search\n      className={cn(className, classNames?.root)}\n      style={{ position: \"relative\" }}\n    >\n      <Field.Label className=\"sr-only\">Search products</Field.Label>\n\n      <div style={{ position: \"relative\", display: \"flex\", alignItems: \"center\" }}>\n        <span\n          data-cimplify-search-icon-wrapper\n          style={{\n            position: \"absolute\",\n            left: \"0.5rem\",\n            pointerEvents: \"none\",\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <SearchIcon />\n        </span>\n\n        <Input\n          type=\"search\"\n          value={query}\n          onValueChange={handleValueChange}\n          placeholder={placeholder}\n          data-cimplify-search-input\n          className={classNames?.input}\n        />\n\n        {query.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            data-cimplify-search-clear\n            className={classNames?.clearButton}\n            aria-label=\"Clear search\"\n          >\n            &times;\n          </button>\n        )}\n      </div>\n\n      {categoryId && (\n        <div data-cimplify-search-category-filter className={classNames?.categoryFilter}>\n          Filtered by: {categoryName || categoryId}\n        </div>\n      )}\n\n      {showResults && query.length > 0 && (\n        <div data-cimplify-search-results className={classNames?.results}>\n          {isLoading && (\n            <div data-cimplify-search-loading className={classNames?.loading} aria-busy=\"true\">\n              Searching...\n            </div>\n          )}\n\n          {!isLoading && results.length === 0 && query.length >= 2 && (\n            <div data-cimplify-search-empty className={classNames?.empty}>\n              No results found\n            </div>\n          )}\n\n          {!isLoading &&\n            results.map((product) => (\n              <button\n                key={product.id}\n                type=\"button\"\n                onClick={() => onResultClick?.(product)}\n                onPointerEnter={() => warmResult(product)}\n                onFocus={() => warmResult(product)}\n                data-cimplify-search-result\n                className={classNames?.resultItem}\n                style={\n                  !renderResult\n                    ? { display: \"flex\", alignItems: \"center\", gap: \"0.5rem\", width: \"100%\" }\n                    : undefined\n                }\n              >\n                {renderResult ? (\n                  renderResult(product)\n                ) : (\n                  <>\n                    {(product.images?.[0] || product.image_url) && (\n                      <img\n                        src={product.images?.[0] || product.image_url}\n                        alt=\"\"\n                        data-cimplify-search-result-image\n                        className={classNames?.resultImage}\n                        style={{\n                          width: \"2rem\",\n                          height: \"2rem\",\n                          objectFit: \"cover\",\n                          borderRadius: \"0.25rem\",\n                          flexShrink: 0,\n                        }}\n                      />\n                    )}\n                    <span\n                      data-cimplify-search-result-name\n                      className={classNames?.resultName}\n                      style={{ flex: 1, textAlign: \"left\" }}\n                    >\n                      {product.name}\n                    </span>\n                    {product.default_price !== undefined && (\n                      <span\n                        data-cimplify-search-result-price\n                        className={classNames?.resultPrice}\n                        style={{ flexShrink: 0 }}\n                      >\n                        <Price\n                          amount={product.default_price}\n                          currency={getProductCurrency(product)}\n                        />\n                      </span>\n                    )}\n                  </>\n                )}\n              </button>\n            ))}\n        </div>\n      )}\n    </Field.Root>\n  );\n}\n"
     }
   ]
 }

package/dist/index-6gkHMGAq.d.mts

@@ -1,86 +0,0 @@
-import { M as Money, C as CurrencyCode, dL as PricePathTaxInfo, P as Product, f as ProductWithDetails, el as QuantityPricingTier, cN as MobileMoneyProvider, dq as PaymentErrorDetails, dA as PaymentResponse, dC as PaymentStatusResponse, ea as PurchaseIntentMobileMoneyNetwork } from './elements-DdsRig-2.mjs';
-import { P as ProductWithPrice } from './price-BOzexBww.mjs';
-import { CountryCode } from 'libphonenumber-js';
-
-declare const CURRENCY_SYMBOLS: Record<string, string>;
-declare function getCurrencySymbol(currencyCode: CurrencyCode): string;
-declare function formatNumberCompact(value: number, decimals?: number): string;
-declare function formatPrice(amount: number | Money, currency?: CurrencyCode, locale?: string): string;
-declare function formatPriceAdjustment(amount: number, currency?: CurrencyCode, locale?: string): string;
-declare function formatPriceCompact(amount: number | Money, currency?: CurrencyCode, decimals?: number): string;
-declare function formatMoney(amount: Money | number, currency?: CurrencyCode): string;
-declare function parsePrice(value: Money | string | number | undefined | null): number;
-declare function hasTaxInfo(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): boolean;
-declare function getTaxAmount(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): number;
-declare function isTaxInclusive(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): boolean;
-declare function formatPriceWithTax(priceInfo: {
-    final_price: Money;
-    tax_info?: PricePathTaxInfo;
-}, currency?: CurrencyCode): string;
-declare function getDisplayPrice(product: ProductWithPrice): number;
-declare function getBasePrice(product: ProductWithPrice): number;
-declare function isOnSale(product: ProductWithPrice): boolean;
-declare function getDiscountPercentage(product: ProductWithPrice): number;
-declare function getMarkupPercentage(product: ProductWithPrice): number;
-declare function getProductCurrency(product: ProductWithPrice): CurrencyCode;
-declare function formatProductPrice(product: ProductWithPrice, locale?: string): string;
-declare function getUnitPriceAtQuantity(tiers: QuantityPricingTier[], quantity: number, fallback: number): number;
-declare function getPriceRange(product: Product | ProductWithDetails): {
-    min: number;
-    max: number;
-} | null;
-declare function formatPriceRange(min: number, max: number, currency?: CurrencyCode): string;
-
-declare function categorizePaymentError(error: Error, errorCode?: string): PaymentErrorDetails;
-declare function normalizePaymentResponse(response: unknown): PaymentResponse;
-declare const PAYMENT_TERMINAL_FAILURE_STATUSES: readonly ["failed", "cancelled", "voided", "abandoned", "refunded", "refund_pending", "reversed", "disputed"];
-declare function isPaymentStatusSuccess(status: string | undefined): boolean;
-declare function isPaymentStatusFailure(status: string | undefined): boolean;
-declare function isPaymentStatusRequiresAction(status: string | undefined): boolean;
-declare function normalizeStatusResponse(response: unknown): PaymentStatusResponse;
-declare const MOBILE_MONEY_PROVIDERS: {
-    readonly mtn: {
-        readonly name: "MTN Mobile Money";
-        readonly prefix: readonly ["024", "025", "053", "054", "055", "059"];
-    };
-    readonly vodafone: {
-        readonly name: "Telecel Cash";
-        readonly prefix: readonly ["020", "050"];
-    };
-    readonly airtel: {
-        readonly name: "AirtelTigo Money";
-        readonly prefix: readonly ["026", "027", "056", "057"];
-    };
-};
-type CanonicalMobileMoneyProvider = Extract<MobileMoneyProvider, "mtn" | "telecel" | "airteltigo" | "mpesa">;
-/** Normalize route-catalog and legacy network aliases to storefront provider codes. */
-declare function canonicalMobileMoneyProvider(provider: string | null | undefined): CanonicalMobileMoneyProvider | null;
-/**
- * Collapse storefront aliases to Checkout's closed durable network vocabulary.
- * M-PESA is deliberately absent until the backend can issue a matching
- * PurchaseIntent payment option.
- */
-declare function purchaseIntentMobileMoneyNetwork(provider: string | null | undefined): PurchaseIntentMobileMoneyNetwork | null;
-/**
- * Validate an external payment-authorization URL before browser navigation.
- * Provider payloads are data, not executable navigation instructions: only
- * HTTPS is accepted outside local development.
- */
-declare function paymentAuthorizationUrl(value: unknown): string | null;
-declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;
-
-interface PhoneNormalizationOptions {
-    country?: string | null;
-    currency?: string | null;
-}
-declare function resolvePhoneCountryCode(options?: PhoneNormalizationOptions): CountryCode | undefined;
-declare function normalizePhoneToE164(raw: string, options?: PhoneNormalizationOptions): string | null;
-declare function isValidPhoneForContext(raw: string, options?: PhoneNormalizationOptions): boolean;
-
-export { isTaxInclusive as A, isValidPhoneForContext as B, CURRENCY_SYMBOLS as C, normalizePaymentResponse as D, normalizePhoneToE164 as E, normalizeStatusResponse as F, parsePrice as G, paymentAuthorizationUrl as H, purchaseIntentMobileMoneyNetwork as I, resolvePhoneCountryCode as J, MOBILE_MONEY_PROVIDERS as M, PAYMENT_TERMINAL_FAILURE_STATUSES as P, type CanonicalMobileMoneyProvider as a, categorizePaymentError as b, canonicalMobileMoneyProvider as c, detectMobileMoneyProvider as d, formatNumberCompact as e, formatMoney as f, formatPrice as g, formatPriceAdjustment as h, formatPriceCompact as i, formatPriceRange as j, formatPriceWithTax as k, formatProductPrice as l, getBasePrice as m, getCurrencySymbol as n, getDiscountPercentage as o, getDisplayPrice as p, getMarkupPercentage as q, getPriceRange as r, getProductCurrency as s, getTaxAmount as t, getUnitPriceAtQuantity as u, hasTaxInfo as v, isOnSale as w, isPaymentStatusFailure as x, isPaymentStatusRequiresAction as y, isPaymentStatusSuccess as z };

package/dist/index-B_ByTtIT.d.ts

@@ -1,86 +0,0 @@
-import { M as Money, C as CurrencyCode, dL as PricePathTaxInfo, P as Product, f as ProductWithDetails, el as QuantityPricingTier, cN as MobileMoneyProvider, dq as PaymentErrorDetails, dA as PaymentResponse, dC as PaymentStatusResponse, ea as PurchaseIntentMobileMoneyNetwork } from './elements-DdsRig-2.js';
-import { P as ProductWithPrice } from './price-C1h9sPxE.js';
-import { CountryCode } from 'libphonenumber-js';
-
-declare const CURRENCY_SYMBOLS: Record<string, string>;
-declare function getCurrencySymbol(currencyCode: CurrencyCode): string;
-declare function formatNumberCompact(value: number, decimals?: number): string;
-declare function formatPrice(amount: number | Money, currency?: CurrencyCode, locale?: string): string;
-declare function formatPriceAdjustment(amount: number, currency?: CurrencyCode, locale?: string): string;
-declare function formatPriceCompact(amount: number | Money, currency?: CurrencyCode, decimals?: number): string;
-declare function formatMoney(amount: Money | number, currency?: CurrencyCode): string;
-declare function parsePrice(value: Money | string | number | undefined | null): number;
-declare function hasTaxInfo(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): boolean;
-declare function getTaxAmount(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): number;
-declare function isTaxInclusive(priceInfo: {
-    tax_info?: PricePathTaxInfo;
-}): boolean;
-declare function formatPriceWithTax(priceInfo: {
-    final_price: Money;
-    tax_info?: PricePathTaxInfo;
-}, currency?: CurrencyCode): string;
-declare function getDisplayPrice(product: ProductWithPrice): number;
-declare function getBasePrice(product: ProductWithPrice): number;
-declare function isOnSale(product: ProductWithPrice): boolean;
-declare function getDiscountPercentage(product: ProductWithPrice): number;
-declare function getMarkupPercentage(product: ProductWithPrice): number;
-declare function getProductCurrency(product: ProductWithPrice): CurrencyCode;
-declare function formatProductPrice(product: ProductWithPrice, locale?: string): string;
-declare function getUnitPriceAtQuantity(tiers: QuantityPricingTier[], quantity: number, fallback: number): number;
-declare function getPriceRange(product: Product | ProductWithDetails): {
-    min: number;
-    max: number;
-} | null;
-declare function formatPriceRange(min: number, max: number, currency?: CurrencyCode): string;
-
-declare function categorizePaymentError(error: Error, errorCode?: string): PaymentErrorDetails;
-declare function normalizePaymentResponse(response: unknown): PaymentResponse;
-declare const PAYMENT_TERMINAL_FAILURE_STATUSES: readonly ["failed", "cancelled", "voided", "abandoned", "refunded", "refund_pending", "reversed", "disputed"];
-declare function isPaymentStatusSuccess(status: string | undefined): boolean;
-declare function isPaymentStatusFailure(status: string | undefined): boolean;
-declare function isPaymentStatusRequiresAction(status: string | undefined): boolean;
-declare function normalizeStatusResponse(response: unknown): PaymentStatusResponse;
-declare const MOBILE_MONEY_PROVIDERS: {
-    readonly mtn: {
-        readonly name: "MTN Mobile Money";
-        readonly prefix: readonly ["024", "025", "053", "054", "055", "059"];
-    };
-    readonly vodafone: {
-        readonly name: "Telecel Cash";
-        readonly prefix: readonly ["020", "050"];
-    };
-    readonly airtel: {
-        readonly name: "AirtelTigo Money";
-        readonly prefix: readonly ["026", "027", "056", "057"];
-    };
-};
-type CanonicalMobileMoneyProvider = Extract<MobileMoneyProvider, "mtn" | "telecel" | "airteltigo" | "mpesa">;
-/** Normalize route-catalog and legacy network aliases to storefront provider codes. */
-declare function canonicalMobileMoneyProvider(provider: string | null | undefined): CanonicalMobileMoneyProvider | null;
-/**
- * Collapse storefront aliases to Checkout's closed durable network vocabulary.
- * M-PESA is deliberately absent until the backend can issue a matching
- * PurchaseIntent payment option.
- */
-declare function purchaseIntentMobileMoneyNetwork(provider: string | null | undefined): PurchaseIntentMobileMoneyNetwork | null;
-/**
- * Validate an external payment-authorization URL before browser navigation.
- * Provider payloads are data, not executable navigation instructions: only
- * HTTPS is accepted outside local development.
- */
-declare function paymentAuthorizationUrl(value: unknown): string | null;
-declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;
-
-interface PhoneNormalizationOptions {
-    country?: string | null;
-    currency?: string | null;
-}
-declare function resolvePhoneCountryCode(options?: PhoneNormalizationOptions): CountryCode | undefined;
-declare function normalizePhoneToE164(raw: string, options?: PhoneNormalizationOptions): string | null;
-declare function isValidPhoneForContext(raw: string, options?: PhoneNormalizationOptions): boolean;
-
-export { isTaxInclusive as A, isValidPhoneForContext as B, CURRENCY_SYMBOLS as C, normalizePaymentResponse as D, normalizePhoneToE164 as E, normalizeStatusResponse as F, parsePrice as G, paymentAuthorizationUrl as H, purchaseIntentMobileMoneyNetwork as I, resolvePhoneCountryCode as J, MOBILE_MONEY_PROVIDERS as M, PAYMENT_TERMINAL_FAILURE_STATUSES as P, type CanonicalMobileMoneyProvider as a, categorizePaymentError as b, canonicalMobileMoneyProvider as c, detectMobileMoneyProvider as d, formatNumberCompact as e, formatMoney as f, formatPrice as g, formatPriceAdjustment as h, formatPriceCompact as i, formatPriceRange as j, formatPriceWithTax as k, formatProductPrice as l, getBasePrice as m, getCurrencySymbol as n, getDiscountPercentage as o, getDisplayPrice as p, getMarkupPercentage as q, getPriceRange as r, getProductCurrency as s, getTaxAmount as t, getUnitPriceAtQuantity as u, hasTaxInfo as v, isOnSale as w, isPaymentStatusFailure as x, isPaymentStatusRequiresAction as y, isPaymentStatusSuccess as z };