@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.
- package/cjs/dist/react/booking/Book.d.ts +11 -19
- package/cjs/dist/react/booking/Book.js +17 -13
- package/cjs/dist/react/booking/Booking.d.ts +1 -1
- package/cjs/dist/react/booking/Booking.js +1 -1
- package/cjs/dist/react/booking-form/BookingForm.d.ts +5 -2
- package/cjs/dist/react/booking-form/BookingForm.js +3 -2
- package/cjs/dist/react/core/payment/Payment.d.ts +3 -3
- package/cjs/dist/react/core/payment/Payment.js +4 -4
- package/cjs/dist/react/location/Location.d.ts +3 -4
- package/cjs/dist/react/location/Location.js +6 -6
- package/cjs/dist/react/location/LocationList.d.ts +2 -4
- package/cjs/dist/react/location/LocationList.js +22 -15
- package/cjs/dist/react/payment/Payment.d.ts +3 -46
- package/cjs/dist/react/payment/Payment.js +4 -37
- package/cjs/dist/react/service/Service.d.ts +18 -33
- package/cjs/dist/react/service/Service.js +20 -33
- package/cjs/dist/react/staff-member/StaffMember.d.ts +9 -4
- package/cjs/dist/react/staff-member/StaffMember.js +7 -7
- package/cjs/dist/react/staff-member/StaffMemberList.d.ts +9 -4
- package/cjs/dist/react/staff-member/StaffMemberList.js +23 -16
- package/cjs/dist/react/time-slot-list/TimeSlot.d.ts +17 -21
- package/cjs/dist/react/time-slot-list/TimeSlot.js +18 -22
- package/cjs/dist/services/booking/book-action/types.d.ts +3 -3
- package/cjs/dist/services/payment/payment.d.ts +2 -2
- package/cjs/dist/services/payment/payment.def.d.ts +1 -1
- package/cjs/dist/services/payment/payment.js +11 -11
- package/dist/react/booking/Book.d.ts +11 -19
- package/dist/react/booking/Book.js +17 -13
- package/dist/react/booking/Booking.d.ts +1 -1
- package/dist/react/booking/Booking.js +1 -1
- package/dist/react/booking-form/BookingForm.d.ts +5 -2
- package/dist/react/booking-form/BookingForm.js +3 -2
- package/dist/react/core/payment/Payment.d.ts +3 -3
- package/dist/react/core/payment/Payment.js +4 -4
- package/dist/react/location/Location.d.ts +3 -4
- package/dist/react/location/Location.js +6 -6
- package/dist/react/location/LocationList.d.ts +2 -4
- package/dist/react/location/LocationList.js +22 -15
- package/dist/react/payment/Payment.d.ts +3 -46
- package/dist/react/payment/Payment.js +4 -37
- package/dist/react/service/Service.d.ts +18 -33
- package/dist/react/service/Service.js +20 -33
- package/dist/react/staff-member/StaffMember.d.ts +9 -4
- package/dist/react/staff-member/StaffMember.js +7 -7
- package/dist/react/staff-member/StaffMemberList.d.ts +9 -4
- package/dist/react/staff-member/StaffMemberList.js +23 -16
- package/dist/react/time-slot-list/TimeSlot.d.ts +17 -21
- package/dist/react/time-slot-list/TimeSlot.js +18 -22
- package/dist/services/booking/book-action/types.d.ts +3 -3
- package/dist/services/payment/payment.d.ts +2 -2
- package/dist/services/payment/payment.def.d.ts +1 -1
- package/dist/services/payment/payment.js +11 -11
- package/package.json +2 -2
|
@@ -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={(
|
|
22
|
+
* `onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}`
|
|
28
23
|
*/
|
|
29
|
-
onCheckout?: (
|
|
30
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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?.(
|
|
68
|
+
return onCheckout?.(navigateToCheckout);
|
|
73
69
|
}, onComplete: (result) => {
|
|
74
70
|
return onComplete?.({ orderId: result.orderId });
|
|
75
|
-
}, onError: onError, disabled: disabled, children: (childProps) =>
|
|
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={(
|
|
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={(
|
|
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
|
|
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
|
-
|
|
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 +
|
|
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={[...]}
|
|
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 +
|
|
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={[...]}
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
230
|
+
* // With onClick callback
|
|
231
231
|
* <Location.Actions.Select
|
|
232
232
|
* label="Select"
|
|
233
|
-
*
|
|
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,
|
|
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 (
|
|
252
|
-
|
|
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
|
-
},
|
|
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
|
-
|
|
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
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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
|
-
|
|
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 +
|
|
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}
|
|
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
|
*/
|
|
@@ -12,7 +12,6 @@ var TestIds;
|
|
|
12
12
|
TestIds["paymentRoot"] = "payment-root";
|
|
13
13
|
TestIds["paymentSubtotal"] = "payment-subtotal";
|
|
14
14
|
TestIds["paymentTax"] = "payment-tax";
|
|
15
|
-
TestIds["paymentDiscount"] = "payment-discount";
|
|
16
15
|
TestIds["paymentTotal"] = "payment-total";
|
|
17
16
|
TestIds["paymentPayNow"] = "payment-pay-now";
|
|
18
17
|
TestIds["paymentPayLater"] = "payment-pay-later";
|
|
@@ -21,14 +20,13 @@ var TestIds;
|
|
|
21
20
|
TestIds["paymentLineItemRepeater"] = "payment-line-item-repeater";
|
|
22
21
|
TestIds["paymentLineItemTotal"] = "payment-line-item-total";
|
|
23
22
|
TestIds["paymentLineItemSubtotal"] = "payment-line-item-subtotal";
|
|
24
|
-
TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
|
|
25
23
|
TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
|
|
26
24
|
})(TestIds || (TestIds = {}));
|
|
27
25
|
/**
|
|
28
26
|
* Root component that provides payment context to the entire app.
|
|
29
27
|
* Supports 3 modes:
|
|
30
28
|
* 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
|
|
31
|
-
* 2. Lazy loading: pricingServiceSelections +
|
|
29
|
+
* 2. Lazy loading: pricingServiceSelections + totalParticipants props - calls API via useEffect
|
|
32
30
|
* 3. Reactive: no config/props - reads from BookingService signals
|
|
33
31
|
*
|
|
34
32
|
* @order 1
|
|
@@ -49,7 +47,7 @@ var TestIds;
|
|
|
49
47
|
* // Lazy loading mode
|
|
50
48
|
* function LazyPayment({ slotServices }) {
|
|
51
49
|
* return (
|
|
52
|
-
* <Payment.Root slotServices={slotServices}
|
|
50
|
+
* <Payment.Root slotServices={slotServices} totalParticipants={2}>
|
|
53
51
|
* {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
|
|
54
52
|
* </Payment.Root>
|
|
55
53
|
* );
|
|
@@ -57,8 +55,8 @@ var TestIds;
|
|
|
57
55
|
* ```
|
|
58
56
|
*/
|
|
59
57
|
export const Root = React.forwardRef((props, ref) => {
|
|
60
|
-
const { children, paymentServiceConfig, pricingServiceSelections,
|
|
61
|
-
return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, pricingServiceSelections: pricingServiceSelections,
|
|
58
|
+
const { children, paymentServiceConfig, pricingServiceSelections, totalParticipants, asChild, className, ...attrs } = props;
|
|
59
|
+
return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, pricingServiceSelections: pricingServiceSelections, totalParticipants: totalParticipants, children: ({ isLoading, hasError }) => {
|
|
62
60
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
|
|
63
61
|
} }));
|
|
64
62
|
});
|
|
@@ -106,21 +104,6 @@ export const Tax = React.forwardRef((props, ref) => {
|
|
|
106
104
|
return (_jsx(CorePayment.Data, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: hasTax && _jsx(Money, { money: tax }) })) }));
|
|
107
105
|
});
|
|
108
106
|
Tax.displayName = 'Payment.Tax';
|
|
109
|
-
/**
|
|
110
|
-
* Displays the payment discount.
|
|
111
|
-
* Uses data-has-discount attribute for conditional visibility.
|
|
112
|
-
*
|
|
113
|
-
* @component
|
|
114
|
-
* @example
|
|
115
|
-
* ```tsx
|
|
116
|
-
* <Payment.Discount className="text-green-500" />
|
|
117
|
-
* ```
|
|
118
|
-
*/
|
|
119
|
-
export const Discount = React.forwardRef((props, ref) => {
|
|
120
|
-
const { asChild, children, className } = props;
|
|
121
|
-
return (_jsx(CorePayment.Data, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
|
|
122
|
-
});
|
|
123
|
-
Discount.displayName = 'Payment.Discount';
|
|
124
107
|
/**
|
|
125
108
|
* Displays the payment total.
|
|
126
109
|
* Always displays the monetary value. Exposes customPrice for custom rendering.
|
|
@@ -249,7 +232,6 @@ const LineItemWrapper = ({ item, currency, children, }) => {
|
|
|
249
232
|
* ```tsx
|
|
250
233
|
* <Payment.LineItemRepeater>
|
|
251
234
|
* <Payment.LineItemTotal />
|
|
252
|
-
* <Payment.LineItemDiscount />
|
|
253
235
|
* </Payment.LineItemRepeater>
|
|
254
236
|
* ```
|
|
255
237
|
*/
|
|
@@ -289,21 +271,6 @@ export const LineItemSubtotal = React.forwardRef((props, ref) => {
|
|
|
289
271
|
return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { subtotal, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
|
|
290
272
|
});
|
|
291
273
|
LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
|
|
292
|
-
/**
|
|
293
|
-
* Displays the line item discount.
|
|
294
|
-
* Uses data-has-discount attribute for conditional visibility.
|
|
295
|
-
*
|
|
296
|
-
* @component
|
|
297
|
-
* @example
|
|
298
|
-
* ```tsx
|
|
299
|
-
* <Payment.LineItemDiscount className="text-green-500" />
|
|
300
|
-
* ```
|
|
301
|
-
*/
|
|
302
|
-
export const LineItemDiscount = React.forwardRef((props, ref) => {
|
|
303
|
-
const { asChild, children, className } = props;
|
|
304
|
-
return (_jsx(CorePayment.LineItemInfo, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
|
|
305
|
-
});
|
|
306
|
-
LineItemDiscount.displayName = 'Payment.LineItemDiscount';
|
|
307
274
|
/**
|
|
308
275
|
* Displays the line item deposit amount.
|
|
309
276
|
* Uses data-has-deposit attribute for conditional visibility.
|