npm - @cimplify/sdk - Versions diffs - 0.73.0 → 0.74.0 - Mend

@cimplify/sdk 0.73.0 → 0.74.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/react.d.mts +36 -2
package/dist/react.d.ts +36 -2
package/dist/react.js +187 -66
package/dist/react.mjs +187 -67
package/package.json +1 -1
package/registry/product-customizer.json +1 -1

package/dist/react.d.mts CHANGED Viewed

@@ -3,7 +3,7 @@ import { d as AdSlot, c as AdPosition, a as AdContextValue, S as SignInOptions }
 export { A as AdConfig, g as getVariantDisplayName } from './sign-in-DQlIdqsi.mjs';
 import { ad as CimplifyClient, cj as ProcessCheckoutResult, aa as CheckoutStatus, ab as CheckoutStatusContext, aV as EnrichedOrderItem, aU as EnrichedOrder, w as Business, bp as Location, cA as ReorderResult, b$ as OrderStatus, bF as Order, cl as QuoteBundleSelectionInput, cm as QuoteCompositeSelectionInput, cf as PriceQuote, cp as QuoteUiMessage, cV as Service, r as AvailableSlot, av as DayAvailability, an as CustomerBooking, M as CancelBookingResult, f as ActivityStateResponse, d2 as SessionMessage, c as ActivityRecommendation, ax as DeliveryFeeResponse, b6 as FxRateResponse, db as StorefrontBootstrap, Y as ChatWidgetStarter, X as ChatMessage, h as AddressInfo, n as AuthenticatedData, aT as ElementsOptions, c9 as PaymentMethodInfo, aR as ElementsCheckoutResult, ci as ProcessCheckoutOptions, ag as CimplifyElements, bg as LineItem, d5 as Staff, cQ as Room } from './client-C7EMuGoz.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ab as CurrencyCode, aX as Product, aO as Pagination, T as CimplifyError, b9 as ProductWithDetails, Q as Category, aM as Money, C as BundleSelectionInput, $ as ComponentSelectionInput, z as BundleSelectionData, a8 as CompositeSelectionData, U as Collection, b4 as ProductTaxonomy, bt as TaxonomyWithChildren, b5 as ProductTimeProfile, ah as Deal, b0 as ProductDealInfo, an as DiscountValidation, E as BundleSummary, a6 as CompositePriceResult, bo as SubscriptionWithDetails, bn as SubscriptionStatus, bk as Subscription, ac as CustomAttributeDefinition, ba as PropertyFacet, a$ as ProductBillingPlan, bL as VariantView, bF as VariantAxisWithValues, f as AddOnWithOptions, w as BundleComponentView, x as BundlePriceType, a4 as CompositeGroupView, aq as DisplayCart, b1 as ProductInputField, bg as SchedulingMode, at as DurationUnit, ad as CustomAttributeValue, b2 as ProductProperty, bc as QuantityPricingTier } from './product-B_kS4Oxa.mjs';
+import { ab as CurrencyCode, aX as Product, aO as Pagination, T as CimplifyError, b9 as ProductWithDetails, Q as Category, aM as Money, C as BundleSelectionInput, $ as ComponentSelectionInput, z as BundleSelectionData, a8 as CompositeSelectionData, U as Collection, b4 as ProductTaxonomy, bt as TaxonomyWithChildren, b5 as ProductTimeProfile, ah as Deal, b0 as ProductDealInfo, an as DiscountValidation, E as BundleSummary, a6 as CompositePriceResult, bo as SubscriptionWithDetails, bn as SubscriptionStatus, bk as Subscription, ac as CustomAttributeDefinition, ba as PropertyFacet, a$ as ProductBillingPlan, bL as VariantView, bF as VariantAxisWithValues, f as AddOnWithOptions, w as BundleComponentView, x as BundlePriceType, a4 as CompositeGroupView, aq as DisplayCart, b1 as ProductInputField, bg as SchedulingMode, at as DurationUnit, aj as DepositType, ad as CustomAttributeValue, b2 as ProductProperty, bc as QuantityPricingTier } from './product-B_kS4Oxa.mjs';
 import { P as ProductWithPrice } from './price-Cm0tU0V5.mjs';
 import { ClassValue } from 'clsx';
 import { Matcher } from 'react-day-picker';
@@ -2632,6 +2632,40 @@ interface StaffPickerProps {
 }
 declare function StaffPicker({ staff, selectedStaffId, onStaffSelect, showAnyOption, anyLabel, className, classNames, }: StaffPickerProps): React$1.ReactElement;
+interface BookingSummaryClassNames {
+    root?: string;
+    header?: string;
+    row?: string;
+    label?: string;
+    value?: string;
+    totals?: string;
+    deposit?: string;
+    balance?: string;
+}
+interface BookingSummaryProps {
+    /** The chosen slot — provides the date and time. */
+    slot: AvailableSlot;
+    /** Resolved per-booking total (variant/add-ons included), pre-deposit. */
+    total: number;
+    /** Selected staff member's name, when one was chosen. */
+    staffName?: string | null;
+    /** Service duration, shown in the header. */
+    durationMinutes?: number;
+    /** Deposit policy — drives the "due now" / "balance" split. */
+    depositType?: DepositType;
+    depositAmount?: Money;
+    currency?: CurrencyCode;
+    className?: string;
+    classNames?: BookingSummaryClassNames;
+}
+/**
+ * BookingSummary — a live recap of a service booking: who, when, and the
+ * deposit-due / balance split derived from the product's deposit policy.
+ *
+ * Presentational: the host owns the selected slot, staff and quote total.
+ */
+declare function BookingSummary({ slot, total, staffName, durationMinutes, depositType, depositAmount, currency, className, classNames, }: BookingSummaryProps): React$1.ReactElement;
 interface BookingCardClassNames {
     root?: string;
     service?: string;
@@ -3662,4 +3696,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountLineItem, type AccountLineItemData, type AccountLineItemProps, AccountLineItems, type AccountLineItemsProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrderView, type AccountOrderViewProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, CimplifyUserButton, type CimplifyUserButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, type CustomerInput, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, type CustomerInputType, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, type DeliveryLive, type DeliveryRider, DeliveryTracker, type DeliveryTrackerProps, DeliveryTruckIcon, type DigitalFulfillment, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LineItemDetails, type LineItemSemanticKind, type LineScheduling, type LineSelection, type LineStateTone, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, type OrderStatusTone, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, type OrderViewDelivery, type OrderViewPayment, type OrderViewPaymentRow, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, type ToAccountOrderViewOptions, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, type UserButtonLink, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountLineItem, type AccountLineItemData, type AccountLineItemProps, AccountLineItems, type AccountLineItemsProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrderView, type AccountOrderViewProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingSummary, type BookingSummaryClassNames, type BookingSummaryProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, CimplifyUserButton, type CimplifyUserButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, type CustomerInput, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, type CustomerInputType, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, type DeliveryLive, type DeliveryRider, DeliveryTracker, type DeliveryTrackerProps, DeliveryTruckIcon, type DigitalFulfillment, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LineItemDetails, type LineItemSemanticKind, type LineScheduling, type LineSelection, type LineStateTone, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, type OrderStatusTone, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, type OrderViewDelivery, type OrderViewPayment, type OrderViewPaymentRow, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, type ToAccountOrderViewOptions, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, type UserButtonLink, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { d as AdSlot, c as AdPosition, a as AdContextValue, S as SignInOptions }
 export { A as AdConfig, g as getVariantDisplayName } from './sign-in-DQlIdqsi.js';
 import { ad as CimplifyClient, cj as ProcessCheckoutResult, aa as CheckoutStatus, ab as CheckoutStatusContext, aV as EnrichedOrderItem, aU as EnrichedOrder, w as Business, bp as Location, cA as ReorderResult, b$ as OrderStatus, bF as Order, cl as QuoteBundleSelectionInput, cm as QuoteCompositeSelectionInput, cf as PriceQuote, cp as QuoteUiMessage, cV as Service, r as AvailableSlot, av as DayAvailability, an as CustomerBooking, M as CancelBookingResult, f as ActivityStateResponse, d2 as SessionMessage, c as ActivityRecommendation, ax as DeliveryFeeResponse, b6 as FxRateResponse, db as StorefrontBootstrap, Y as ChatWidgetStarter, X as ChatMessage, h as AddressInfo, n as AuthenticatedData, aT as ElementsOptions, c9 as PaymentMethodInfo, aR as ElementsCheckoutResult, ci as ProcessCheckoutOptions, ag as CimplifyElements, bg as LineItem, d5 as Staff, cQ as Room } from './client-D6CZ2Ggp.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ab as CurrencyCode, aX as Product, aO as Pagination, T as CimplifyError, b9 as ProductWithDetails, Q as Category, aM as Money, C as BundleSelectionInput, $ as ComponentSelectionInput, z as BundleSelectionData, a8 as CompositeSelectionData, U as Collection, b4 as ProductTaxonomy, bt as TaxonomyWithChildren, b5 as ProductTimeProfile, ah as Deal, b0 as ProductDealInfo, an as DiscountValidation, E as BundleSummary, a6 as CompositePriceResult, bo as SubscriptionWithDetails, bn as SubscriptionStatus, bk as Subscription, ac as CustomAttributeDefinition, ba as PropertyFacet, a$ as ProductBillingPlan, bL as VariantView, bF as VariantAxisWithValues, f as AddOnWithOptions, w as BundleComponentView, x as BundlePriceType, a4 as CompositeGroupView, aq as DisplayCart, b1 as ProductInputField, bg as SchedulingMode, at as DurationUnit, ad as CustomAttributeValue, b2 as ProductProperty, bc as QuantityPricingTier } from './product-B_kS4Oxa.js';
+import { ab as CurrencyCode, aX as Product, aO as Pagination, T as CimplifyError, b9 as ProductWithDetails, Q as Category, aM as Money, C as BundleSelectionInput, $ as ComponentSelectionInput, z as BundleSelectionData, a8 as CompositeSelectionData, U as Collection, b4 as ProductTaxonomy, bt as TaxonomyWithChildren, b5 as ProductTimeProfile, ah as Deal, b0 as ProductDealInfo, an as DiscountValidation, E as BundleSummary, a6 as CompositePriceResult, bo as SubscriptionWithDetails, bn as SubscriptionStatus, bk as Subscription, ac as CustomAttributeDefinition, ba as PropertyFacet, a$ as ProductBillingPlan, bL as VariantView, bF as VariantAxisWithValues, f as AddOnWithOptions, w as BundleComponentView, x as BundlePriceType, a4 as CompositeGroupView, aq as DisplayCart, b1 as ProductInputField, bg as SchedulingMode, at as DurationUnit, aj as DepositType, ad as CustomAttributeValue, b2 as ProductProperty, bc as QuantityPricingTier } from './product-B_kS4Oxa.js';
 import { P as ProductWithPrice } from './price-9T1Y47oS.js';
 import { ClassValue } from 'clsx';
 import { Matcher } from 'react-day-picker';
@@ -2632,6 +2632,40 @@ interface StaffPickerProps {
 }
 declare function StaffPicker({ staff, selectedStaffId, onStaffSelect, showAnyOption, anyLabel, className, classNames, }: StaffPickerProps): React$1.ReactElement;
+interface BookingSummaryClassNames {
+    root?: string;
+    header?: string;
+    row?: string;
+    label?: string;
+    value?: string;
+    totals?: string;
+    deposit?: string;
+    balance?: string;
+}
+interface BookingSummaryProps {
+    /** The chosen slot — provides the date and time. */
+    slot: AvailableSlot;
+    /** Resolved per-booking total (variant/add-ons included), pre-deposit. */
+    total: number;
+    /** Selected staff member's name, when one was chosen. */
+    staffName?: string | null;
+    /** Service duration, shown in the header. */
+    durationMinutes?: number;
+    /** Deposit policy — drives the "due now" / "balance" split. */
+    depositType?: DepositType;
+    depositAmount?: Money;
+    currency?: CurrencyCode;
+    className?: string;
+    classNames?: BookingSummaryClassNames;
+}
+/**
+ * BookingSummary — a live recap of a service booking: who, when, and the
+ * deposit-due / balance split derived from the product's deposit policy.
+ *
+ * Presentational: the host owns the selected slot, staff and quote total.
+ */
+declare function BookingSummary({ slot, total, staffName, durationMinutes, depositType, depositAmount, currency, className, classNames, }: BookingSummaryProps): React$1.ReactElement;
 interface BookingCardClassNames {
     root?: string;
     service?: string;
@@ -3662,4 +3696,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountLineItem, type AccountLineItemData, type AccountLineItemProps, AccountLineItems, type AccountLineItemsProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrderView, type AccountOrderViewProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, CimplifyUserButton, type CimplifyUserButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, type CustomerInput, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, type CustomerInputType, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, type DeliveryLive, type DeliveryRider, DeliveryTracker, type DeliveryTrackerProps, DeliveryTruckIcon, type DigitalFulfillment, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LineItemDetails, type LineItemSemanticKind, type LineScheduling, type LineSelection, type LineStateTone, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, type OrderStatusTone, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, type OrderViewDelivery, type OrderViewPayment, type OrderViewPaymentRow, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, type ToAccountOrderViewOptions, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, type UserButtonLink, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountLineItem, type AccountLineItemData, type AccountLineItemProps, AccountLineItems, type AccountLineItemsProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrderView, type AccountOrderViewProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingSummary, type BookingSummaryClassNames, type BookingSummaryProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, CimplifyUserButton, type CimplifyUserButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, type CustomerInput, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, type CustomerInputType, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, type DeliveryLive, type DeliveryRider, DeliveryTracker, type DeliveryTrackerProps, DeliveryTruckIcon, type DigitalFulfillment, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LineItemDetails, type LineItemSemanticKind, type LineScheduling, type LineSelection, type LineStateTone, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, type OrderStatusTone, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, type OrderViewDelivery, type OrderViewPayment, type OrderViewPaymentRow, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, type ToAccountOrderViewOptions, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, type UserButtonLink, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.js CHANGED Viewed

@@ -7311,6 +7311,144 @@ function formatDuration2(value, unit) {
   const label = value === 1 ? labels.singular : labels.plural;
   return `${value} ${label}`;
 }
+var ANY_VALUE = "__any__";
+function StaffPicker({
+  staff,
+  selectedStaffId,
+  onStaffSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  className,
+  classNames
+}) {
+  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-staff-picker": true,
+      className: cn(className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onStaffSelect?.(value === ANY_VALUE ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === null || void 0,
+            "data-any": true,
+            className: classNames?.option,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
+          }
+        ),
+        staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
+          radio.Radio.Root,
+          {
+            value: member.id,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === member.id || void 0,
+            className: classNames?.option,
+            children: [
+              member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: member.avatar_url,
+                  alt: member.name,
+                  "data-cimplify-staff-avatar": true,
+                  className: classNames?.avatar
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
+              member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
+            ]
+          },
+          member.id
+        ))
+      ]
+    }
+  );
+}
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function BookingSummary({
+  slot,
+  total,
+  staffName,
+  durationMinutes,
+  depositType,
+  depositAmount,
+  currency,
+  className,
+  classNames
+}) {
+  const depositValue = depositAmount != null ? chunk7Y2O3E4D_js.parsePrice(depositAmount) : 0;
+  const depositDue = depositType === "percentage" ? total * depositValue / 100 : depositType === "fixed" ? depositValue : 0;
+  const hasDeposit = depositDue > 0;
+  const balance = Math.max(0, total - depositDue);
+  const rowClass = cn("flex items-center justify-between", classNames?.row);
+  const labelClass = cn("text-muted-foreground", classNames?.label);
+  const valueClass = cn("font-medium", classNames?.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-cimplify-booking-summary": true,
+      className: cn("rounded-lg border border-border p-4 space-y-3", className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between", classNames?.header), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Your booking" }),
+          durationMinutes != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            durationMinutes,
+            " min"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 text-sm", children: [
+          staffName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "With" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: staffName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: formatDate(slot.start_time) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Time" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: formatTime(slot.start_time) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-t border-border pt-3 space-y-1.5 text-sm", classNames?.totals), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Subtotal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: total, currency }) })
+          ] }),
+          hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(rowClass, classNames?.deposit), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Due now (deposit)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositDue, currency }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(rowClass, "text-xs text-muted-foreground", classNames?.balance), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Balance at appointment" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: balance, currency })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 var FREQUENCY_LABELS = {
   weekly: "Weekly",
   biweekly: "Biweekly",
@@ -8675,7 +8813,7 @@ function groupSlots(slots) {
   }
   return ["morning", "afternoon", "evening"].filter((tod) => groups[tod]?.length).map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));
 }
-function formatTime(timeStr) {
+function formatTime2(timeStr) {
   try {
     const date = new Date(timeStr);
     if (!isNaN(date.getTime())) {
@@ -8850,7 +8988,7 @@ function SlotPicker({
                         classNames?.slot
                       ),
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime(slot.start_time) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime2(slot.start_time) }),
                         showPrice && slot.price && /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
                           {
@@ -8884,7 +9022,7 @@ function SlotPicker({
     }
   );
 }
-function formatDate(dateStr) {
+function formatDate2(dateStr) {
   const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
   return date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
 }
@@ -9029,7 +9167,7 @@ function DateSlotPicker({
                     "flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40",
                     classNames?.dateButton
                   ),
-                  children: formatDate(date)
+                  children: formatDate2(date)
                 },
                 date
               );
@@ -9089,6 +9227,7 @@ function ProductCustomizer({
   const [customerInputValues, setCustomerInputValues] = React14.useState({});
   const [specialInstructions, setSpecialInstructions] = React14.useState("");
   const [selectedSlot, setSelectedSlot] = React14.useState(null);
+  const [selectedStaffId, setSelectedStaffId] = React14.useState(null);
   const cart = useCart();
   const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const productType = product.type || "product";
@@ -9116,7 +9255,16 @@ function ProductCustomizer({
     setCustomerInputValues({});
     setSpecialInstructions("");
     setSelectedSlot(null);
+    setSelectedStaffId(null);
   }, [product.id, product.min_order_quantity]);
+  const slotStaff = React14.useMemo(
+    () => (selectedSlot?.available_staff ?? []).map((member) => ({
+      id: member.staff_id,
+      name: member.name
+    })),
+    [selectedSlot]
+  );
+  const selectedStaffName = selectedStaffId ? slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null : null;
   const selectedAddOnOptions = React14.useMemo(() => {
     if (!product.add_ons) return [];
     const options = [];
@@ -9228,7 +9376,7 @@ function ProductCustomizer({
       ...isService && selectedSlot ? {
         scheduledStart: selectedSlot.start_time,
         scheduledEnd: selectedSlot.end_time,
-        staffId: selectedSlot.available_staff?.[0]?.staff_id,
+        staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,
         resourceId: selectedSlot.available_resources?.[0]?.resource_id
       } : {},
       customerInputs: Object.keys(customerInputValues).length > 0 ? Object.entries(customerInputValues).filter(([, v]) => v !== void 0 && v !== "").map(([fieldId, value]) => ({ field_id: fieldId, value })) : void 0,
@@ -9250,7 +9398,7 @@ function ProductCustomizer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);
+  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsxRuntime.jsx(
       CompositeSelector,
@@ -9282,11 +9430,30 @@ function ProductCustomizer({
       {
         serviceId: product.id,
         selectedSlot,
-        onSlotSelect: (slot) => setSelectedSlot(slot),
+        onSlotSelect: (slot) => {
+          setSelectedSlot(slot);
+          setSelectedStaffId(null);
+        },
         participantCount: quantity,
         currency
       }
     ),
+    isService && slotStaff.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-staff": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", children: "Choose your specialist" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StaffPicker,
+        {
+          staff: slotStaff,
+          selectedStaffId,
+          onStaffSelect: setSelectedStaffId,
+          className: "flex flex-wrap gap-2",
+          classNames: {
+            option: "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",
+            avatar: "w-6 h-6 rounded-full object-cover"
+          }
+        }
+      )
+    ] }),
     hasVariants && /* @__PURE__ */ jsxRuntime.jsx(
       VariantSelector,
       {
@@ -9371,6 +9538,18 @@ function ProductCustomizer({
         )
       }
     ) }),
+    isService && selectedSlot && /* @__PURE__ */ jsxRuntime.jsx(
+      BookingSummary,
+      {
+        slot: selectedSlot,
+        total: displayTotalPrice,
+        staffName: selectedStaffName,
+        durationMinutes: product.duration_minutes,
+        depositType: product.deposit_type,
+        depositAmount: product.deposit_amount,
+        currency
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -12486,65 +12665,6 @@ function StoreNav({
     ] })
   ] });
 }
-var ANY_VALUE = "__any__";
-function StaffPicker({
-  staff,
-  selectedStaffId,
-  onStaffSelect,
-  showAnyOption = true,
-  anyLabel = "Any available",
-  className,
-  classNames
-}) {
-  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radioGroup.RadioGroup,
-    {
-      "data-cimplify-staff-picker": true,
-      className: cn(className, classNames?.root),
-      value: groupValue,
-      onValueChange: (value) => {
-        onStaffSelect?.(value === ANY_VALUE ? null : value);
-      },
-      children: [
-        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
-          radio.Radio.Root,
-          {
-            value: ANY_VALUE,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === null || void 0,
-            "data-any": true,
-            className: classNames?.option,
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
-          }
-        ),
-        staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
-          radio.Radio.Root,
-          {
-            value: member.id,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === member.id || void 0,
-            className: classNames?.option,
-            children: [
-              member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: member.avatar_url,
-                  alt: member.name,
-                  "data-cimplify-staff-avatar": true,
-                  className: classNames?.avatar
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
-              member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
-            ]
-          },
-          member.id
-        ))
-      ]
-    }
-  );
-}
 var STATUS_LABELS3 = {
   pending: "Pending",
   confirmed: "Confirmed",
@@ -16668,6 +16788,7 @@ exports.BillingPlanSelector = BillingPlanSelector;
 exports.BookingCard = BookingCard;
 exports.BookingList = BookingList;
 exports.BookingPage = BookingPage;
+exports.BookingSummary = BookingSummary;
 exports.BookingsPage = BookingsPage;
 exports.BoxIcon24 = BoxIcon24;
 exports.BundleProductCard = BundleProductCard;

package/dist/react.mjs CHANGED Viewed

@@ -7306,6 +7306,144 @@ function formatDuration2(value, unit) {
   const label = value === 1 ? labels.singular : labels.plural;
   return `${value} ${label}`;
 }
+var ANY_VALUE = "__any__";
+function StaffPicker({
+  staff,
+  selectedStaffId,
+  onStaffSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  className,
+  classNames
+}) {
+  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
+  return /* @__PURE__ */ jsxs(
+    RadioGroup,
+    {
+      "data-cimplify-staff-picker": true,
+      className: cn(className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onStaffSelect?.(value === ANY_VALUE ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsx(
+          Radio.Root,
+          {
+            value: ANY_VALUE,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === null || void 0,
+            "data-any": true,
+            className: classNames?.option,
+            children: /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
+          }
+        ),
+        staff.map((member) => /* @__PURE__ */ jsxs(
+          Radio.Root,
+          {
+            value: member.id,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === member.id || void 0,
+            className: classNames?.option,
+            children: [
+              member.avatar_url && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: member.avatar_url,
+                  alt: member.name,
+                  "data-cimplify-staff-avatar": true,
+                  className: classNames?.avatar
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
+              member.bio && /* @__PURE__ */ jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
+            ]
+          },
+          member.id
+        ))
+      ]
+    }
+  );
+}
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function BookingSummary({
+  slot,
+  total,
+  staffName,
+  durationMinutes,
+  depositType,
+  depositAmount,
+  currency,
+  className,
+  classNames
+}) {
+  const depositValue = depositAmount != null ? parsePrice(depositAmount) : 0;
+  const depositDue = depositType === "percentage" ? total * depositValue / 100 : depositType === "fixed" ? depositValue : 0;
+  const hasDeposit = depositDue > 0;
+  const balance = Math.max(0, total - depositDue);
+  const rowClass = cn("flex items-center justify-between", classNames?.row);
+  const labelClass = cn("text-muted-foreground", classNames?.label);
+  const valueClass = cn("font-medium", classNames?.value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-booking-summary": true,
+      className: cn("rounded-lg border border-border p-4 space-y-3", className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", classNames?.header), children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Your booking" }),
+          durationMinutes != null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            durationMinutes,
+            " min"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 text-sm", children: [
+          staffName && /* @__PURE__ */ jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsx("span", { className: labelClass, children: "With" }),
+            /* @__PURE__ */ jsx("span", { className: valueClass, children: staffName })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsx("span", { className: labelClass, children: "Date" }),
+            /* @__PURE__ */ jsx("span", { className: valueClass, children: formatDate(slot.start_time) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsx("span", { className: labelClass, children: "Time" }),
+            /* @__PURE__ */ jsx("span", { className: valueClass, children: formatTime(slot.start_time) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("border-t border-border pt-3 space-y-1.5 text-sm", classNames?.totals), children: [
+          /* @__PURE__ */ jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsx("span", { className: labelClass, children: "Subtotal" }),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsx(Price, { amount: total, currency }) })
+          ] }),
+          hasDeposit && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: cn(rowClass, classNames?.deposit), children: [
+              /* @__PURE__ */ jsx("span", { className: labelClass, children: "Due now (deposit)" }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsx(Price, { amount: depositDue, currency }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: cn(rowClass, "text-xs text-muted-foreground", classNames?.balance), children: [
+              /* @__PURE__ */ jsx("span", { children: "Balance at appointment" }),
+              /* @__PURE__ */ jsx(Price, { amount: balance, currency })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 var FREQUENCY_LABELS = {
   weekly: "Weekly",
   biweekly: "Biweekly",
@@ -8670,7 +8808,7 @@ function groupSlots(slots) {
   }
   return ["morning", "afternoon", "evening"].filter((tod) => groups[tod]?.length).map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));
 }
-function formatTime(timeStr) {
+function formatTime2(timeStr) {
   try {
     const date = new Date(timeStr);
     if (!isNaN(date.getTime())) {
@@ -8845,7 +8983,7 @@ function SlotPicker({
                         classNames?.slot
                       ),
                       children: [
-                        /* @__PURE__ */ jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime(slot.start_time) }),
+                        /* @__PURE__ */ jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime2(slot.start_time) }),
                         showPrice && slot.price && /* @__PURE__ */ jsx(
                           "span",
                           {
@@ -8879,7 +9017,7 @@ function SlotPicker({
     }
   );
 }
-function formatDate(dateStr) {
+function formatDate2(dateStr) {
   const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
   return date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
 }
@@ -9024,7 +9162,7 @@ function DateSlotPicker({
                     "flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40",
                     classNames?.dateButton
                   ),
-                  children: formatDate(date)
+                  children: formatDate2(date)
                 },
                 date
               );
@@ -9084,6 +9222,7 @@ function ProductCustomizer({
   const [customerInputValues, setCustomerInputValues] = useState({});
   const [specialInstructions, setSpecialInstructions] = useState("");
   const [selectedSlot, setSelectedSlot] = useState(null);
+  const [selectedStaffId, setSelectedStaffId] = useState(null);
   const cart = useCart();
   const currency = getProductCurrency(product);
   const productType = product.type || "product";
@@ -9111,7 +9250,16 @@ function ProductCustomizer({
     setCustomerInputValues({});
     setSpecialInstructions("");
     setSelectedSlot(null);
+    setSelectedStaffId(null);
   }, [product.id, product.min_order_quantity]);
+  const slotStaff = useMemo(
+    () => (selectedSlot?.available_staff ?? []).map((member) => ({
+      id: member.staff_id,
+      name: member.name
+    })),
+    [selectedSlot]
+  );
+  const selectedStaffName = selectedStaffId ? slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null : null;
   const selectedAddOnOptions = useMemo(() => {
     if (!product.add_ons) return [];
     const options = [];
@@ -9223,7 +9371,7 @@ function ProductCustomizer({
       ...isService && selectedSlot ? {
         scheduledStart: selectedSlot.start_time,
         scheduledEnd: selectedSlot.end_time,
-        staffId: selectedSlot.available_staff?.[0]?.staff_id,
+        staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,
         resourceId: selectedSlot.available_resources?.[0]?.resource_id
       } : {},
       customerInputs: Object.keys(customerInputValues).length > 0 ? Object.entries(customerInputValues).filter(([, v]) => v !== void 0 && v !== "").map(([fieldId, value]) => ({ field_id: fieldId, value })) : void 0,
@@ -9245,7 +9393,7 @@ function ProductCustomizer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);
+  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsx(
       CompositeSelector,
@@ -9277,11 +9425,30 @@ function ProductCustomizer({
       {
         serviceId: product.id,
         selectedSlot,
-        onSlotSelect: (slot) => setSelectedSlot(slot),
+        onSlotSelect: (slot) => {
+          setSelectedSlot(slot);
+          setSelectedStaffId(null);
+        },
         participantCount: quantity,
         currency
       }
     ),
+    isService && slotStaff.length > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer-staff": true, children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", children: "Choose your specialist" }),
+      /* @__PURE__ */ jsx(
+        StaffPicker,
+        {
+          staff: slotStaff,
+          selectedStaffId,
+          onStaffSelect: setSelectedStaffId,
+          className: "flex flex-wrap gap-2",
+          classNames: {
+            option: "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",
+            avatar: "w-6 h-6 rounded-full object-cover"
+          }
+        }
+      )
+    ] }),
     hasVariants && /* @__PURE__ */ jsx(
       VariantSelector,
       {
@@ -9366,6 +9533,18 @@ function ProductCustomizer({
         )
       }
     ) }),
+    isService && selectedSlot && /* @__PURE__ */ jsx(
+      BookingSummary,
+      {
+        slot: selectedSlot,
+        total: displayTotalPrice,
+        staffName: selectedStaffName,
+        durationMinutes: product.duration_minutes,
+        depositType: product.deposit_type,
+        depositAmount: product.deposit_amount,
+        currency
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -12481,65 +12660,6 @@ function StoreNav({
     ] })
   ] });
 }
-var ANY_VALUE = "__any__";
-function StaffPicker({
-  staff,
-  selectedStaffId,
-  onStaffSelect,
-  showAnyOption = true,
-  anyLabel = "Any available",
-  className,
-  classNames
-}) {
-  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
-  return /* @__PURE__ */ jsxs(
-    RadioGroup,
-    {
-      "data-cimplify-staff-picker": true,
-      className: cn(className, classNames?.root),
-      value: groupValue,
-      onValueChange: (value) => {
-        onStaffSelect?.(value === ANY_VALUE ? null : value);
-      },
-      children: [
-        showAnyOption && /* @__PURE__ */ jsx(
-          Radio.Root,
-          {
-            value: ANY_VALUE,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === null || void 0,
-            "data-any": true,
-            className: classNames?.option,
-            children: /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
-          }
-        ),
-        staff.map((member) => /* @__PURE__ */ jsxs(
-          Radio.Root,
-          {
-            value: member.id,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === member.id || void 0,
-            className: classNames?.option,
-            children: [
-              member.avatar_url && /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: member.avatar_url,
-                  alt: member.name,
-                  "data-cimplify-staff-avatar": true,
-                  className: classNames?.avatar
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
-              member.bio && /* @__PURE__ */ jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
-            ]
-          },
-          member.id
-        ))
-      ]
-    }
-  );
-}
 var STATUS_LABELS3 = {
   pending: "Pending",
   confirmed: "Confirmed",
@@ -16632,4 +16752,4 @@ function SparkleIcon({ className }) {
   );
 }
-export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountLineItem, AccountLineItems, AccountNav, AccountOrderDetailPage, AccountOrderView, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTracker, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LineItemDetails, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountLineItem, AccountLineItems, AccountNav, AccountOrderDetailPage, AccountOrderView, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingSummary, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTracker, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LineItemDetails, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/product-customizer.json CHANGED Viewed

@@ -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 { parsePrice, getUnitPriceAtQuantity, getProductCurrency } from \"@cimplify/sdk\";\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 { 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  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?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => void;\n  showSpecialInstructions?: boolean;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\nexport function ProductCustomizer({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\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 [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\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\n  const cart = useCart();\n\n  const currency = getProductCurrency(product);\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  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  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n  }, [product.id, product.min_order_quantity]);\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(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).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 = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\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  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\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: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\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 { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\n\n  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setSelectedVariantId(variantId);\n      setSelectedVariant(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 (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: 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: 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: selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n          }\n        : {}),\n      customerInputs: 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  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);\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) => setSelectedSlot(slot)}\n          participantCount={quantity}\n          currency={currency}\n        />\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 data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} currency={currency} /></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 data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\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 data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\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      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\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 data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} currency={currency} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : 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 ? \"Added to Cart\" : (\n              <>\n                Add to Cart &middot; <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\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 { parsePrice, getUnitPriceAtQuantity, getProductCurrency } from \"@cimplify/sdk\";\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  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?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => void;\n  showSpecialInstructions?: boolean;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\nexport function ProductCustomizer({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\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 [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\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\n  const cart = useCart();\n\n  const currency = getProductCurrency(product);\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  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  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n    setSelectedStaffId(null);\n  }, [product.id, product.min_order_quantity]);\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(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).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 = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\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  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\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: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\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 { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\n\n  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setSelectedVariantId(variantId);\n      setSelectedVariant(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 (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: 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: 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          }\n        : {}),\n      customerInputs: 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  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);\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          currency={currency}\n        />\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 data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} currency={currency} /></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 data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\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 data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\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        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\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 data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} currency={currency} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : 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 ? \"Added to Cart\" : (\n              <>\n                Add to Cart &middot; <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\n    </div>\n  );\n}\n"
     }
   ]
 }