@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
|
@@ -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.
|
|
27
|
+
* @param params.totalParticipants - Number of participants (default: 1)
|
|
28
28
|
*/
|
|
29
29
|
export declare function loadPaymentConfig(params: {
|
|
30
30
|
pricingServiceSelections: PricingServiceSelection[];
|
|
31
|
-
|
|
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
|
-
|
|
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,
|
|
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) *
|
|
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) *
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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.
|
|
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.
|
|
162
|
+
* @param params.totalParticipants - Number of participants (default: 1)
|
|
163
163
|
*/
|
|
164
164
|
export async function loadPaymentConfig(params) {
|
|
165
165
|
try {
|
|
166
|
-
const { pricingServiceSelections,
|
|
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,
|
|
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={(
|
|
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
|
*/
|