@wix/headless-bookings 0.0.88 → 0.0.90

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 (53) hide show
  1. package/cjs/dist/react/booking/Book.d.ts +11 -19
  2. package/cjs/dist/react/booking/Book.js +17 -13
  3. package/cjs/dist/react/booking/Booking.d.ts +1 -1
  4. package/cjs/dist/react/booking/Booking.js +1 -1
  5. package/cjs/dist/react/booking-form/BookingForm.d.ts +5 -2
  6. package/cjs/dist/react/booking-form/BookingForm.js +3 -2
  7. package/cjs/dist/react/core/payment/Payment.d.ts +3 -3
  8. package/cjs/dist/react/core/payment/Payment.js +4 -4
  9. package/cjs/dist/react/location/Location.d.ts +3 -4
  10. package/cjs/dist/react/location/Location.js +6 -6
  11. package/cjs/dist/react/location/LocationList.d.ts +2 -4
  12. package/cjs/dist/react/location/LocationList.js +22 -15
  13. package/cjs/dist/react/payment/Payment.d.ts +3 -46
  14. package/cjs/dist/react/payment/Payment.js +4 -37
  15. package/cjs/dist/react/service/Service.d.ts +18 -33
  16. package/cjs/dist/react/service/Service.js +20 -33
  17. package/cjs/dist/react/staff-member/StaffMember.d.ts +9 -4
  18. package/cjs/dist/react/staff-member/StaffMember.js +7 -7
  19. package/cjs/dist/react/staff-member/StaffMemberList.d.ts +9 -4
  20. package/cjs/dist/react/staff-member/StaffMemberList.js +23 -16
  21. package/cjs/dist/react/time-slot-list/TimeSlot.d.ts +17 -21
  22. package/cjs/dist/react/time-slot-list/TimeSlot.js +18 -22
  23. package/cjs/dist/services/booking/book-action/types.d.ts +3 -3
  24. package/cjs/dist/services/payment/payment.d.ts +2 -2
  25. package/cjs/dist/services/payment/payment.def.d.ts +1 -1
  26. package/cjs/dist/services/payment/payment.js +11 -11
  27. package/dist/react/booking/Book.d.ts +11 -19
  28. package/dist/react/booking/Book.js +17 -13
  29. package/dist/react/booking/Booking.d.ts +1 -1
  30. package/dist/react/booking/Booking.js +1 -1
  31. package/dist/react/booking-form/BookingForm.d.ts +5 -2
  32. package/dist/react/booking-form/BookingForm.js +3 -2
  33. package/dist/react/core/payment/Payment.d.ts +3 -3
  34. package/dist/react/core/payment/Payment.js +4 -4
  35. package/dist/react/location/Location.d.ts +3 -4
  36. package/dist/react/location/Location.js +6 -6
  37. package/dist/react/location/LocationList.d.ts +2 -4
  38. package/dist/react/location/LocationList.js +22 -15
  39. package/dist/react/payment/Payment.d.ts +3 -46
  40. package/dist/react/payment/Payment.js +4 -37
  41. package/dist/react/service/Service.d.ts +18 -33
  42. package/dist/react/service/Service.js +20 -33
  43. package/dist/react/staff-member/StaffMember.d.ts +9 -4
  44. package/dist/react/staff-member/StaffMember.js +7 -7
  45. package/dist/react/staff-member/StaffMemberList.d.ts +9 -4
  46. package/dist/react/staff-member/StaffMemberList.js +23 -16
  47. package/dist/react/time-slot-list/TimeSlot.d.ts +17 -21
  48. package/dist/react/time-slot-list/TimeSlot.js +18 -22
  49. package/dist/services/booking/book-action/types.d.ts +3 -3
  50. package/dist/services/payment/payment.d.ts +2 -2
  51. package/dist/services/payment/payment.def.d.ts +1 -1
  52. package/dist/services/payment/payment.js +11 -11
  53. package/package.json +2 -2
@@ -24,9 +24,9 @@ export type ErrorPaymentConfigResult = {
24
24
  * Calls the pricing APIs and returns pre-calculated payment details.
25
25
  *
26
26
  * @param params.pricingServiceSelections - Pricing service selections for calculation
27
- * @param params.numberOfParticipants - Number of participants (default: 1)
27
+ * @param params.totalParticipants - Number of participants (default: 1)
28
28
  */
29
29
  export declare function loadPaymentConfig(params: {
30
30
  pricingServiceSelections: PricingServiceSelection[];
31
- numberOfParticipants?: number;
31
+ totalParticipants?: number;
32
32
  }): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;
@@ -53,7 +53,7 @@ export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
53
53
  /** Booking services for lazy loading (internal use) */
54
54
  pricingServiceSelections?: PricingServiceSelection[];
55
55
  /** Number of participants for lazy loading (internal use) */
56
- numberOfParticipants?: number;
56
+ totalParticipants?: number;
57
57
  }
58
58
  export interface PaymentServiceAPI {
59
59
  paymentDetailsSignal: Signal<PaymentDetails | null>;
@@ -36,15 +36,15 @@ function getPaymentOption(service, hasDeposit) {
36
36
  }
37
37
  return 'FULL_PAYMENT_ONLINE';
38
38
  }
39
- function buildLineItem(service, numberOfParticipants, lineItemId) {
39
+ function buildLineItem(service, totalParticipants, lineItemId) {
40
40
  // Get fixed price from service
41
41
  const servicePrice = service.payment?.fixed?.price?.value;
42
- const price = Number(servicePrice || 0) * numberOfParticipants;
42
+ const price = Number(servicePrice || 0) * totalParticipants;
43
43
  // Get deposit if configured
44
44
  const depositValue = service.payment?.fixed?.deposit?.value;
45
45
  const hasDeposit = !!depositValue && Number(depositValue) > 0;
46
46
  const deposit = hasDeposit
47
- ? Number(depositValue) * numberOfParticipants
47
+ ? Number(depositValue) * totalParticipants
48
48
  : undefined;
49
49
  // Get payment option from service configuration (pass hasDeposit for correct API behavior)
50
50
  const paymentOption = getPaymentOption(service, hasDeposit);
@@ -60,13 +60,13 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
60
60
  paymentOption,
61
61
  };
62
62
  }
63
- async function calculatePaymentDetails(pricingServiceSelections, numberOfParticipants) {
63
+ async function calculatePaymentDetails(pricingServiceSelections, totalParticipants) {
64
64
  // Ensure all booking services have a lineItemId
65
65
  const data = pricingServiceSelections.map((selection) => ({
66
66
  ...selection,
67
67
  lineItemId: selection.lineItemId || generateLineItemId(),
68
68
  }));
69
- const lineItems = data.map((item) => buildLineItem(item.service, numberOfParticipants, item.lineItemId));
69
+ const lineItems = data.map((item) => buildLineItem(item.service, totalParticipants, item.lineItemId));
70
70
  const response = await calculateTotals({
71
71
  lineItems,
72
72
  });
@@ -96,7 +96,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
96
96
  const isLoadingSignal = signalsService.signal(false);
97
97
  const errorSignal = signalsService.signal(null);
98
98
  // Internal calculate function
99
- const calculate = async (pricingServiceSelections, numberOfParticipants) => {
99
+ const calculate = async (pricingServiceSelections, totalParticipants) => {
100
100
  if (!pricingServiceSelections.length) {
101
101
  paymentDetailsSignal.set(null);
102
102
  return;
@@ -104,7 +104,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
104
104
  isLoadingSignal.set(true);
105
105
  errorSignal.set(null);
106
106
  try {
107
- const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
107
+ const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
108
108
  paymentDetailsSignal.set(paymentDetails);
109
109
  }
110
110
  catch (error) {
@@ -124,7 +124,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
124
124
  }
125
125
  // Mode 2: Lazy loading - pricingServiceSelections provided via internal config
126
126
  else if (config.pricingServiceSelections?.length) {
127
- void calculate(config.pricingServiceSelections, config.numberOfParticipants ?? 1);
127
+ void calculate(config.pricingServiceSelections, config.totalParticipants ?? 1);
128
128
  }
129
129
  // Mode 3: Reactive - observe BookingService signals (client-side only)
130
130
  else if (typeof window !== 'undefined' && bookingService) {
@@ -159,18 +159,18 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
159
159
  * Calls the pricing APIs and returns pre-calculated payment details.
160
160
  *
161
161
  * @param params.pricingServiceSelections - Pricing service selections for calculation
162
- * @param params.numberOfParticipants - Number of participants (default: 1)
162
+ * @param params.totalParticipants - Number of participants (default: 1)
163
163
  */
164
164
  export async function loadPaymentConfig(params) {
165
165
  try {
166
- const { pricingServiceSelections, numberOfParticipants = 1 } = params;
166
+ const { pricingServiceSelections, totalParticipants = 1 } = params;
167
167
  if (!pricingServiceSelections.length) {
168
168
  return {
169
169
  type: 'success',
170
170
  config: { paymentDetails: undefined },
171
171
  };
172
172
  }
173
- const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
173
+ const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
174
174
  return {
175
175
  type: 'success',
176
176
  config: { paymentDetails },
@@ -7,28 +7,23 @@ import type { BookChildProps, BookingError } from '../../services/booking/book-a
7
7
  /**
8
8
  * Props for the high-level Book component
9
9
  */
10
- export interface BookProps {
10
+ export interface BookProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onError' | 'onClick'> {
11
11
  asChild?: boolean;
12
12
  children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
13
- className?: string;
14
13
  label?: string;
15
14
  loadingState?: string;
16
15
  disabled?: boolean;
17
- /**
18
- * URL to redirect to after the checkout flow completes.
19
- * Required for navigating to checkout.
20
- */
21
- postFlowUrl: string;
22
16
  /**
23
17
  * Called when checkout is required for payment.
18
+ * Receives navigateToCheckout function that accepts postFlowUrl.
24
19
  * The navigateToCheckout function already has the checkoutId captured - just call it to navigate.
25
20
  *
26
21
  * To keep loading active during navigation, return navigateToCheckout():
27
- * `onCheckout={({ navigateToCheckout }) => navigateToCheckout()}`
22
+ * `onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}`
28
23
  */
29
- onCheckout?: (result: {
30
- navigateToCheckout: () => Promise<void>;
31
- }) => void | Promise<unknown>;
24
+ onCheckout?: (navigateToCheckout: (options: {
25
+ postFlowUrl: string;
26
+ }) => Promise<void>) => void | Promise<unknown>;
32
27
  /**
33
28
  * Called when booking completes without requiring checkout (free/offline services).
34
29
  * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
@@ -39,6 +34,7 @@ export interface BookProps {
39
34
  orderId: string;
40
35
  }) => void | Promise<unknown>;
41
36
  onError?: (error: BookingError) => void;
37
+ onClick?: (data: BookChildProps) => void;
42
38
  }
43
39
  /**
44
40
  * Book action button component with AsChildSlot pattern.
@@ -53,22 +49,19 @@ export interface BookProps {
53
49
  * ```tsx
54
50
  * // Basic usage - call navigateToCheckout when ready
55
51
  * <Booking.Actions.Book
56
- * postFlowUrl="/thank-you"
57
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
52
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
58
53
  * />
59
54
  *
60
55
  * // With callbacks
61
56
  * <Booking.Actions.Book
62
- * postFlowUrl="/thank-you"
63
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
57
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
64
58
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
65
59
  * onError={(error) => console.error(error.message)}
66
60
  * />
67
61
  *
68
62
  * // With render function
69
63
  * <Booking.Actions.Book
70
- * postFlowUrl="/thank-you"
71
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
64
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
72
65
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
73
66
  * >
74
67
  * {({ isLoading, error, canBook, onClick, disabled }) => (
@@ -81,8 +74,7 @@ export interface BookProps {
81
74
  * // With asChild
82
75
  * <Booking.Actions.Book
83
76
  * asChild
84
- * postFlowUrl="/thank-you"
85
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
77
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
86
78
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
87
79
  * >
88
80
  * <CustomBookButton />
@@ -24,22 +24,19 @@ var TestIds;
24
24
  * ```tsx
25
25
  * // Basic usage - call navigateToCheckout when ready
26
26
  * <Booking.Actions.Book
27
- * postFlowUrl="/thank-you"
28
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
27
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
29
28
  * />
30
29
  *
31
30
  * // With callbacks
32
31
  * <Booking.Actions.Book
33
- * postFlowUrl="/thank-you"
34
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
32
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
35
33
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
36
34
  * onError={(error) => console.error(error.message)}
37
35
  * />
38
36
  *
39
37
  * // With render function
40
38
  * <Booking.Actions.Book
41
- * postFlowUrl="/thank-you"
42
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
39
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
43
40
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
44
41
  * >
45
42
  * {({ isLoading, error, canBook, onClick, disabled }) => (
@@ -52,8 +49,7 @@ var TestIds;
52
49
  * // With asChild
53
50
  * <Booking.Actions.Book
54
51
  * asChild
55
- * postFlowUrl="/thank-you"
56
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
52
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
57
53
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
58
54
  * >
59
55
  * <CustomBookButton />
@@ -61,17 +57,25 @@ var TestIds;
61
57
  * ```
62
58
  */
63
59
  export const Book = React.forwardRef((props, ref) => {
64
- const { asChild, children, className, label = 'Book Now', loadingState = 'Booking...', disabled, postFlowUrl, onCheckout, onComplete, onError, } = props;
60
+ const { asChild, children, className, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...buttonProps } = props;
65
61
  return (_jsx(CoreBook.Book, { onCheckout: (result) => {
66
62
  // Create navigateToCheckout with checkoutId captured
67
- const navigateToCheckout = () => navigateToCheckoutUtil({
63
+ const navigateToCheckout = (options) => navigateToCheckoutUtil({
68
64
  checkoutId: result.checkoutId,
69
- navigationInfo: { postFlowUrl },
65
+ navigationInfo: { postFlowUrl: options.postFlowUrl },
70
66
  });
71
67
  // Return user's callback result so core can await it
72
- return onCheckout?.({ navigateToCheckout });
68
+ return onCheckout?.(navigateToCheckout);
73
69
  }, onComplete: (result) => {
74
70
  return onComplete?.({ orderId: result.orderId });
75
- }, onError: onError, disabled: disabled, children: (childProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { onClick: childProps.onClick, disabled: childProps.disabled, children: childProps.isLoading ? loadingState : label }) })) }));
71
+ }, onError: onError, disabled: disabled, children: (childProps) => {
72
+ const handleClick = () => {
73
+ childProps.onClick();
74
+ onClick?.(childProps);
75
+ };
76
+ return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: childProps.disabled, children: childProps.isLoading
77
+ ? loadingState
78
+ : children || label }) }));
79
+ } }));
76
80
  });
77
81
  Book.displayName = 'Booking.Actions.Book';
@@ -46,7 +46,7 @@ export declare const Root: {
46
46
  *
47
47
  * // With callbacks - navigateToCheckout has checkoutId captured, triggers loading when called
48
48
  * <Booking.Actions.Book
49
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
49
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
50
50
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
51
51
  * onError={(error) => toast.error(error.message)}
52
52
  * />
@@ -61,7 +61,7 @@ Root.displayName = 'Booking.Root';
61
61
  *
62
62
  * // With callbacks - navigateToCheckout has checkoutId captured, triggers loading when called
63
63
  * <Booking.Actions.Book
64
- * onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
64
+ * onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
65
65
  * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
66
66
  * onError={(error) => toast.error(error.message)}
67
67
  * />
@@ -105,20 +105,23 @@ export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React
105
105
  /**
106
106
  * Props for BookingForm.Actions.ValidateFormSubmission component
107
107
  */
108
- export interface ValidateFormSubmissionProps {
108
+ export interface ValidateFormSubmissionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
109
109
  asChild?: boolean;
110
110
  children?: React.ReactNode | ((props: {
111
111
  onClick: () => Promise<void>;
112
112
  valid: boolean | null;
113
113
  validationFailures: string[];
114
114
  }) => React.ReactNode);
115
- className?: string;
116
115
  label?: string;
117
116
  /** Callback when validation completes */
118
117
  onValidationComplete?: (result: {
119
118
  valid: boolean;
120
119
  validationFailures: string[];
121
120
  }) => void;
121
+ onClick?: (result: {
122
+ valid: boolean;
123
+ validationFailures: string[];
124
+ }) => void;
122
125
  }
123
126
  /**
124
127
  * Button to validate the booking form submission.
@@ -171,7 +171,7 @@ Fields.displayName = 'BookingForm.Fields';
171
171
  * ```
172
172
  */
173
173
  export const ValidateFormSubmission = React.forwardRef((props, ref) => {
174
- const { asChild, children, className, label = 'Validate', onValidationComplete, } = props;
174
+ const { asChild, children, className, label, onValidationComplete, onClick, ...buttonProps } = props;
175
175
  const [valid, setValid] = React.useState(null);
176
176
  const [validationFailures, setValidationFailures] = React.useState([]);
177
177
  return (_jsx(CoreBookingForm.Actions, { children: ({ validateFormSubmission }) => {
@@ -182,12 +182,13 @@ export const ValidateFormSubmission = React.forwardRef((props, ref) => {
182
182
  if (onValidationComplete) {
183
183
  onValidationComplete(result);
184
184
  }
185
+ onClick?.(result);
185
186
  };
186
187
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
187
188
  onClick: handleClick,
188
189
  valid,
189
190
  validationFailures,
190
- }, children: _jsx("button", { onClick: handleClick, children: label }) }));
191
+ }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
191
192
  } }));
192
193
  });
193
194
  ValidateFormSubmission.displayName =
@@ -19,13 +19,13 @@ export interface RootProps {
19
19
  /** Pricing service selections for lazy loading (triggers API call) */
20
20
  pricingServiceSelections?: PricingServiceSelection[];
21
21
  /** Number of participants for lazy loading */
22
- numberOfParticipants?: number;
22
+ totalParticipants?: number;
23
23
  }
24
24
  /**
25
25
  * Root component that provides payment context.
26
26
  * Supports 3 modes:
27
27
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
28
- * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
28
+ * 2. Lazy loading: pricingServiceSelections + totalParticipants props - calls API on init
29
29
  * 3. Reactive: no config/props - reads from BookingService signals
30
30
  *
31
31
  * @component
@@ -37,7 +37,7 @@ export interface RootProps {
37
37
  * </Payment.Root>
38
38
  *
39
39
  * // Lazy loading mode
40
- * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
40
+ * <Payment.Root pricingServiceSelections={[...]} totalParticipants={2}>
41
41
  * {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
42
42
  * </Payment.Root>
43
43
  *
@@ -26,7 +26,7 @@ function RootContent({ children, }) {
26
26
  * Root component that provides payment context.
27
27
  * Supports 3 modes:
28
28
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
29
- * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
29
+ * 2. Lazy loading: pricingServiceSelections + totalParticipants props - calls API on init
30
30
  * 3. Reactive: no config/props - reads from BookingService signals
31
31
  *
32
32
  * @component
@@ -38,7 +38,7 @@ function RootContent({ children, }) {
38
38
  * </Payment.Root>
39
39
  *
40
40
  * // Lazy loading mode
41
- * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
41
+ * <Payment.Root pricingServiceSelections={[...]} totalParticipants={2}>
42
42
  * {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
43
43
  * </Payment.Root>
44
44
  *
@@ -49,12 +49,12 @@ function RootContent({ children, }) {
49
49
  * ```
50
50
  */
51
51
  export function Root(props) {
52
- const { children, paymentServiceConfig = {}, pricingServiceSelections, numberOfParticipants, } = props;
52
+ const { children, paymentServiceConfig = {}, pricingServiceSelections, totalParticipants, } = props;
53
53
  // Merge public config with lazy loading props into internal config
54
54
  const internalConfig = {
55
55
  ...paymentServiceConfig,
56
56
  pricingServiceSelections,
57
- numberOfParticipants,
57
+ totalParticipants,
58
58
  };
59
59
  return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), disposeOnUnmount: true, children: _jsx(RootContent, { children: children }) }));
60
60
  }
@@ -229,18 +229,17 @@ export declare const Raw: React.FC<RawProps>;
229
229
  /**
230
230
  * Props for Location.Actions.Select component
231
231
  */
232
- export interface SelectProps {
232
+ export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
233
233
  asChild?: boolean;
234
234
  children?: React.ReactNode | AsChildChildren<{
235
235
  onClick: () => void;
236
236
  selected: boolean;
237
237
  location: CoreLocation.Location | null;
238
238
  }>;
239
- /** Callback fired after location is selected - receives the location */
240
- onClicked?: (location: CoreLocation.Location) => void;
241
239
  /** Label for the button */
242
240
  label?: string;
243
- className?: string;
241
+ /** Called after selection with the selected location */
242
+ onClick?: (location: CoreLocation.Location) => void;
244
243
  }
245
244
  /**
246
245
  * Actions namespace for location-related actions
@@ -227,10 +227,10 @@ Raw.displayName = 'Location.Raw';
227
227
  * ```tsx
228
228
  * <Location.Actions.Select label="Choose Location" />
229
229
  *
230
- * // With onClicked callback for navigation
230
+ * // With onClick callback
231
231
  * <Location.Actions.Select
232
232
  * label="Select"
233
- * onClicked={(location) => navigate('/time-slots')}
233
+ * onClick={() => navigate('/time-slots')}
234
234
  * />
235
235
  *
236
236
  * // With asChild
@@ -244,19 +244,19 @@ Raw.displayName = 'Location.Raw';
244
244
  * ```
245
245
  */
246
246
  const Select = React.forwardRef((props, ref) => {
247
- const { asChild, children, onClicked, label = 'Select', className, ...attrs } = props;
247
+ const { asChild, children, onClick, label, className, ...buttonProps } = props;
248
248
  return (_jsx(CoreLocation.Actions, { children: ({ select, selected, rawLocation }) => {
249
249
  const handleClick = () => {
250
250
  select();
251
- if (onClicked && rawLocation) {
252
- onClicked(rawLocation);
251
+ if (rawLocation) {
252
+ onClick?.(rawLocation);
253
253
  }
254
254
  };
255
255
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationActionSelect, "data-selected": selected, customElement: children, customElementProps: {
256
256
  onClick: handleClick,
257
257
  selected,
258
258
  location: rawLocation,
259
- }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
259
+ }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
260
260
  } }));
261
261
  });
262
262
  Select.displayName = 'Location.Actions.Select';
@@ -103,15 +103,13 @@ export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React
103
103
  /**
104
104
  * Props for LocationList.Actions.Clear component
105
105
  */
106
- export interface ClearProps {
106
+ export interface ClearProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
107
107
  asChild?: boolean;
108
108
  children?: React.ReactNode | ((props: {
109
109
  onClick: () => void;
110
110
  }) => React.ReactNode);
111
- className?: string;
112
111
  label?: string;
113
- /** Callback fired when the clear button is clicked */
114
- onClicked?: () => void;
112
+ onClick?: (location: Location | null) => void;
115
113
  }
116
114
  /**
117
115
  * Actions namespace for location list-level actions
@@ -153,6 +153,11 @@ Totals.displayName = 'LocationList.Totals';
153
153
  * // With custom label
154
154
  * <LocationList.Actions.Clear label="Clear selection" />
155
155
  *
156
+ * // With children as button content
157
+ * <LocationList.Actions.Clear className="text-destructive">
158
+ * <span>Reset Location</span>
159
+ * </LocationList.Actions.Clear>
160
+ *
156
161
  * // With asChild
157
162
  * <LocationList.Actions.Clear asChild>
158
163
  * <button className="btn-secondary">Clear location</button>
@@ -165,21 +170,23 @@ Totals.displayName = 'LocationList.Totals';
165
170
  * ```
166
171
  */
167
172
  const Clear = React.forwardRef((props, ref) => {
168
- const { asChild, children, className, label = 'Clear', onClicked } = props;
169
- let bookingService = null;
170
- try {
171
- bookingService = useService(BookingServiceDefinition);
172
- }
173
- catch {
174
- // BookingService not available - likely no ServiceManagerProvider
175
- }
176
- const handleClick = () => {
177
- bookingService?.actions.clearLocation();
178
- onClicked?.();
179
- };
180
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
181
- onClick: handleClick,
182
- }, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
173
+ const { asChild, children, className, label, onClick, ...buttonProps } = props;
174
+ return (_jsx(CoreLocationList.Actions, { children: ({ selectedLocation }) => {
175
+ let bookingService = null;
176
+ try {
177
+ bookingService = useService(BookingServiceDefinition);
178
+ }
179
+ catch {
180
+ // BookingService not available - likely no ServiceManagerProvider
181
+ }
182
+ const handleClick = () => {
183
+ bookingService?.actions.clearLocation();
184
+ onClick?.(selectedLocation);
185
+ };
186
+ return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
187
+ onClick: handleClick,
188
+ }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
189
+ } }));
183
190
  });
184
191
  Clear.displayName = 'LocationList.Actions.Clear';
185
192
  /**
@@ -19,7 +19,7 @@ export interface RootProps {
19
19
  /** Pricing service selections for lazy loading (triggers API call) */
20
20
  pricingServiceSelections?: PricingServiceSelection[];
21
21
  /** Number of participants for lazy loading */
22
- numberOfParticipants?: number;
22
+ totalParticipants?: number;
23
23
  asChild?: boolean;
24
24
  className?: string;
25
25
  }
@@ -27,7 +27,7 @@ export interface RootProps {
27
27
  * Root component that provides payment context to the entire app.
28
28
  * Supports 3 modes:
29
29
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
30
- * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API via useEffect
30
+ * 2. Lazy loading: pricingServiceSelections + totalParticipants props - calls API via useEffect
31
31
  * 3. Reactive: no config/props - reads from BookingService signals
32
32
  *
33
33
  * @order 1
@@ -48,7 +48,7 @@ export interface RootProps {
48
48
  * // Lazy loading mode
49
49
  * function LazyPayment({ slotServices }) {
50
50
  * return (
51
- * <Payment.Root slotServices={slotServices} numberOfParticipants={2}>
51
+ * <Payment.Root slotServices={slotServices} totalParticipants={2}>
52
52
  * {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
53
53
  * </Payment.Root>
54
54
  * );
@@ -109,27 +109,6 @@ export interface TaxProps {
109
109
  * ```
110
110
  */
111
111
  export declare const Tax: React.ForwardRefExoticComponent<TaxProps & React.RefAttributes<HTMLElement>>;
112
- /**
113
- * Props for Payment.Discount component
114
- */
115
- export interface DiscountProps {
116
- asChild?: boolean;
117
- children?: AsChildChildren<{
118
- discount: MoneyData | null;
119
- }>;
120
- className?: string;
121
- }
122
- /**
123
- * Displays the payment discount.
124
- * Uses data-has-discount attribute for conditional visibility.
125
- *
126
- * @component
127
- * @example
128
- * ```tsx
129
- * <Payment.Discount className="text-green-500" />
130
- * ```
131
- */
132
- export declare const Discount: React.ForwardRefExoticComponent<DiscountProps & React.RefAttributes<HTMLElement>>;
133
112
  /**
134
113
  * Props for Payment.Total component
135
114
  */
@@ -280,7 +259,6 @@ export interface LineItemRepeaterProps {
280
259
  * ```tsx
281
260
  * <Payment.LineItemRepeater>
282
261
  * <Payment.LineItemTotal />
283
- * <Payment.LineItemDiscount />
284
262
  * </Payment.LineItemRepeater>
285
263
  * ```
286
264
  */
@@ -329,27 +307,6 @@ export interface LineItemSubtotalProps {
329
307
  * ```
330
308
  */
331
309
  export declare const LineItemSubtotal: React.ForwardRefExoticComponent<LineItemSubtotalProps & React.RefAttributes<HTMLElement>>;
332
- /**
333
- * Props for Payment.LineItemDiscount component
334
- */
335
- export interface LineItemDiscountProps {
336
- asChild?: boolean;
337
- children?: AsChildChildren<{
338
- discount: MoneyData | null;
339
- }>;
340
- className?: string;
341
- }
342
- /**
343
- * Displays the line item discount.
344
- * Uses data-has-discount attribute for conditional visibility.
345
- *
346
- * @component
347
- * @example
348
- * ```tsx
349
- * <Payment.LineItemDiscount className="text-green-500" />
350
- * ```
351
- */
352
- export declare const LineItemDiscount: React.ForwardRefExoticComponent<LineItemDiscountProps & React.RefAttributes<HTMLElement>>;
353
310
  /**
354
311
  * Props for Payment.LineItemDeposit component
355
312
  */