@wix/headless-bookings 0.0.49 → 0.0.51
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/Booking.d.ts +213 -2
- package/cjs/dist/react/booking/Booking.js +221 -0
- package/cjs/dist/react/core/booking/Booking.d.ts +139 -11
- package/cjs/dist/react/core/booking/Booking.js +208 -1
- package/cjs/dist/services/booking/book-action/isCheckoutRequired.d.ts +1 -1
- package/cjs/dist/services/booking/book-action/isCheckoutRequired.js +3 -3
- package/dist/react/booking/Booking.d.ts +213 -2
- package/dist/react/booking/Booking.js +221 -0
- package/dist/react/core/booking/Booking.d.ts +139 -11
- package/dist/react/core/booking/Booking.js +208 -1
- package/dist/services/booking/book-action/isCheckoutRequired.d.ts +1 -1
- package/dist/services/booking/book-action/isCheckoutRequired.js +3 -3
- package/package.json +2 -2
|
@@ -1,6 +1,31 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Booking - High-level component for managing bookings
|
|
4
|
+
* Provides root component for booking context and booking item display components
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
2
7
|
import * as CoreBooking from '../core/booking/Booking.js';
|
|
3
8
|
import { Book } from './Book.js';
|
|
9
|
+
import { AsChildSlot } from '@wix/headless-utils/react';
|
|
10
|
+
import * as ServiceComponent from '../service/Service.js';
|
|
11
|
+
import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
|
|
12
|
+
import * as PaymentComponent from '../payment/Payment.js';
|
|
13
|
+
import * as LocationComponent from '../location/Location.js';
|
|
14
|
+
import { GenericList } from '@wix/headless-components/react';
|
|
15
|
+
// ============================================================================
|
|
16
|
+
// TestIds
|
|
17
|
+
// ============================================================================
|
|
18
|
+
var TestIds;
|
|
19
|
+
(function (TestIds) {
|
|
20
|
+
TestIds["bookingItemsRoot"] = "booking-items-root";
|
|
21
|
+
TestIds["bookingItems"] = "booking-items";
|
|
22
|
+
TestIds["bookingItem"] = "booking-item";
|
|
23
|
+
TestIds["bookingItemService"] = "booking-item-service";
|
|
24
|
+
TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
|
|
25
|
+
TestIds["bookingItemPayment"] = "booking-item-payment";
|
|
26
|
+
TestIds["bookingLocation"] = "booking-location";
|
|
27
|
+
TestIds["bookingStaffName"] = "booking-staff-name";
|
|
28
|
+
})(TestIds || (TestIds = {}));
|
|
4
29
|
/**
|
|
5
30
|
* Root component that provides booking context to the entire app.
|
|
6
31
|
*
|
|
@@ -24,6 +49,9 @@ export const Root = (props) => {
|
|
|
24
49
|
return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
|
|
25
50
|
};
|
|
26
51
|
Root.displayName = 'Booking.Root';
|
|
52
|
+
// ============================================================================
|
|
53
|
+
// Actions Namespace
|
|
54
|
+
// ============================================================================
|
|
27
55
|
/**
|
|
28
56
|
* Actions namespace containing action components for booking
|
|
29
57
|
*
|
|
@@ -42,3 +70,196 @@ Root.displayName = 'Booking.Root';
|
|
|
42
70
|
export const Actions = {
|
|
43
71
|
Book,
|
|
44
72
|
};
|
|
73
|
+
// ============================================================================
|
|
74
|
+
// BookingItem Context (re-export from core)
|
|
75
|
+
// ============================================================================
|
|
76
|
+
/**
|
|
77
|
+
* Hook to access the current BookingItem from context.
|
|
78
|
+
* Must be used within Booking.ItemRepeater.
|
|
79
|
+
*
|
|
80
|
+
* @throws Error if used outside of ItemRepeater context
|
|
81
|
+
*/
|
|
82
|
+
export const useBookingItem = CoreBooking.useBookingItemContext;
|
|
83
|
+
/**
|
|
84
|
+
* Container component that provides GenericList.Root context for booking items.
|
|
85
|
+
* Use Booking.Items inside for list container with emptyState support.
|
|
86
|
+
*
|
|
87
|
+
* @component
|
|
88
|
+
* @example
|
|
89
|
+
* ```tsx
|
|
90
|
+
* <Booking.ItemsRoot>
|
|
91
|
+
* <Booking.Items emptyState={<div>No bookings selected</div>}>
|
|
92
|
+
* <Booking.ItemRepeater>
|
|
93
|
+
* <div className="booking-card">
|
|
94
|
+
* <Booking.Service>
|
|
95
|
+
* <Service.Name />
|
|
96
|
+
* </Booking.Service>
|
|
97
|
+
* </div>
|
|
98
|
+
* </Booking.ItemRepeater>
|
|
99
|
+
* </Booking.Items>
|
|
100
|
+
* </Booking.ItemsRoot>
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
export const ItemsRoot = React.forwardRef((props, ref) => {
|
|
104
|
+
const { children, ...otherProps } = props;
|
|
105
|
+
return (_jsx(CoreBooking.ItemsData, { children: ({ items }) => (_jsx(GenericList.Root, { ref: ref, items: items.map((item) => ({
|
|
106
|
+
...item,
|
|
107
|
+
id: item.instanceId,
|
|
108
|
+
})), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItemsRoot, ...otherProps, children: children })) }));
|
|
109
|
+
});
|
|
110
|
+
ItemsRoot.displayName = 'Booking.ItemsRoot';
|
|
111
|
+
/**
|
|
112
|
+
* List container component with emptyState support.
|
|
113
|
+
* Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
|
|
114
|
+
*
|
|
115
|
+
* @component
|
|
116
|
+
* @example
|
|
117
|
+
* ```tsx
|
|
118
|
+
* <Booking.ItemsRoot>
|
|
119
|
+
* <Booking.Items emptyState={<div>No bookings selected</div>}>
|
|
120
|
+
* <Booking.ItemRepeater>
|
|
121
|
+
* <Booking.Service>
|
|
122
|
+
* <Service.Name />
|
|
123
|
+
* </Booking.Service>
|
|
124
|
+
* </Booking.ItemRepeater>
|
|
125
|
+
* </Booking.Items>
|
|
126
|
+
* </Booking.ItemsRoot>
|
|
127
|
+
* ```
|
|
128
|
+
*/
|
|
129
|
+
export const Items = React.forwardRef((props, ref) => {
|
|
130
|
+
const { children, ...otherProps } = props;
|
|
131
|
+
return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.bookingItems, ...otherProps, children: children }));
|
|
132
|
+
});
|
|
133
|
+
Items.displayName = 'Booking.Items';
|
|
134
|
+
/**
|
|
135
|
+
* Internal component that wraps each booking item with context provider.
|
|
136
|
+
*/
|
|
137
|
+
const BookingItemWrapper = ({ item, children, }) => {
|
|
138
|
+
return (_jsx(CoreBooking.BookingItemProvider, { item: item, children: children }));
|
|
139
|
+
};
|
|
140
|
+
/**
|
|
141
|
+
* Repeater component that maps over booking items and provides context per item.
|
|
142
|
+
* Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
|
|
143
|
+
* Children have access to Booking.Service, Booking.TimeSlot, etc.
|
|
144
|
+
*
|
|
145
|
+
* @component
|
|
146
|
+
* @example
|
|
147
|
+
* ```tsx
|
|
148
|
+
* <Booking.ItemRepeater>
|
|
149
|
+
* <div className="booking-card">
|
|
150
|
+
* <Booking.Service>
|
|
151
|
+
* <Service.Name />
|
|
152
|
+
* <Service.Price />
|
|
153
|
+
* </Booking.Service>
|
|
154
|
+
* <Booking.TimeSlot>
|
|
155
|
+
* <TimeSlot.StartDate />
|
|
156
|
+
* </Booking.TimeSlot>
|
|
157
|
+
* <Booking.StaffName />
|
|
158
|
+
* </div>
|
|
159
|
+
* </Booking.ItemRepeater>
|
|
160
|
+
* ```
|
|
161
|
+
*/
|
|
162
|
+
export const ItemRepeater = React.forwardRef((props, ref) => {
|
|
163
|
+
const { children } = props;
|
|
164
|
+
return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
|
|
165
|
+
});
|
|
166
|
+
ItemRepeater.displayName = 'Booking.ItemRepeater';
|
|
167
|
+
/**
|
|
168
|
+
* Wraps Service.Root with the service from the current booking item context.
|
|
169
|
+
* Children can use all Service.* components (Service.Name, Service.Price, etc.).
|
|
170
|
+
*
|
|
171
|
+
* @component
|
|
172
|
+
* @example
|
|
173
|
+
* ```tsx
|
|
174
|
+
* <Booking.Service>
|
|
175
|
+
* <Service.Name className="text-xl font-bold" />
|
|
176
|
+
* <Service.Description />
|
|
177
|
+
* <Service.Price />
|
|
178
|
+
* </Booking.Service>
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
export function Service(props) {
|
|
182
|
+
const { children } = props;
|
|
183
|
+
return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Wraps TimeSlot.Root with the timeSlot from the current booking item context.
|
|
187
|
+
* Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
|
|
188
|
+
* Always renders with data-has-time-slot attribute for CSS targeting.
|
|
189
|
+
*
|
|
190
|
+
* @component
|
|
191
|
+
* @example
|
|
192
|
+
* ```tsx
|
|
193
|
+
* <Booking.TimeSlot>
|
|
194
|
+
* <TimeSlot.StartDate />
|
|
195
|
+
* <TimeSlot.Duration />
|
|
196
|
+
* </Booking.TimeSlot>
|
|
197
|
+
* ```
|
|
198
|
+
*/
|
|
199
|
+
export function TimeSlot(props) {
|
|
200
|
+
const { children } = props;
|
|
201
|
+
return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Wraps Payment.Root with all services from all booking items.
|
|
205
|
+
* Should be used outside of ItemRepeater - it calculates payment for all items.
|
|
206
|
+
* Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
|
|
207
|
+
* Always renders with data-has-payment attribute for CSS targeting.
|
|
208
|
+
*
|
|
209
|
+
* @component
|
|
210
|
+
* @example
|
|
211
|
+
* ```tsx
|
|
212
|
+
* <Booking.Root>
|
|
213
|
+
* <Booking.ItemsRoot>
|
|
214
|
+
* <Booking.Items>
|
|
215
|
+
* <Booking.ItemRepeater>
|
|
216
|
+
* <Booking.Service><Service.Name /></Booking.Service>
|
|
217
|
+
* </Booking.ItemRepeater>
|
|
218
|
+
* </Booking.Items>
|
|
219
|
+
* </Booking.ItemsRoot>
|
|
220
|
+
*
|
|
221
|
+
* <Booking.Payment>
|
|
222
|
+
* <Payment.Total className="text-xl font-bold" />
|
|
223
|
+
* <Payment.Subtotal />
|
|
224
|
+
* </Booking.Payment>
|
|
225
|
+
* </Booking.Root>
|
|
226
|
+
* ```
|
|
227
|
+
*/
|
|
228
|
+
export function Payment(props) {
|
|
229
|
+
const { children } = props;
|
|
230
|
+
return (_jsx(CoreBooking.PaymentData, { children: ({ slotServices }) => (_jsx(PaymentComponent.Root, { slotServices: slotServices, children: children })) }));
|
|
231
|
+
}
|
|
232
|
+
/**
|
|
233
|
+
* Wraps Location.Root with the location from the booking context.
|
|
234
|
+
* Children can use all Location.* components (Location.Name, Location.Address, etc.).
|
|
235
|
+
* Always renders with data-has-location attribute for CSS targeting.
|
|
236
|
+
*
|
|
237
|
+
* @component
|
|
238
|
+
* @example
|
|
239
|
+
* ```tsx
|
|
240
|
+
* <Booking.Location>
|
|
241
|
+
* <Location.Name className="font-bold" />
|
|
242
|
+
* <Location.Address />
|
|
243
|
+
* <Location.Phone />
|
|
244
|
+
* </Booking.Location>
|
|
245
|
+
* ```
|
|
246
|
+
*/
|
|
247
|
+
export function Location(props) {
|
|
248
|
+
const { children } = props;
|
|
249
|
+
return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(LocationComponent.Root, { location: location, children: children })) : null }));
|
|
250
|
+
}
|
|
251
|
+
/**
|
|
252
|
+
* Displays the first staff member's name from the current booking item.
|
|
253
|
+
* Always renders with data-has-staff-name attribute for CSS targeting.
|
|
254
|
+
*
|
|
255
|
+
* @component
|
|
256
|
+
* @example
|
|
257
|
+
* ```tsx
|
|
258
|
+
* <Booking.StaffName className="text-foreground" />
|
|
259
|
+
* ```
|
|
260
|
+
*/
|
|
261
|
+
export const StaffName = React.forwardRef((props, ref) => {
|
|
262
|
+
const { asChild, children, className } = props;
|
|
263
|
+
return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingStaffName, "data-has-staff-name": Boolean(staffName), customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) })) }));
|
|
264
|
+
});
|
|
265
|
+
StaffName.displayName = 'Booking.StaffName';
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { type BookingServiceConfig, type ServiceSelection, type BookingServiceActions } from '../../../services/booking/booking.js';
|
|
7
7
|
import type { FormValues } from '@wix/form-public';
|
|
8
|
-
import type {
|
|
8
|
+
import type { TimeSlot, Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
|
|
9
|
+
import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
|
|
10
|
+
import type { SlotService } from '../../../services/payment/payment.js';
|
|
9
11
|
/**
|
|
10
12
|
* Props for Booking.Root component
|
|
11
13
|
*/
|
|
@@ -35,7 +37,7 @@ export declare function Root(props: RootProps): React.ReactNode;
|
|
|
35
37
|
*/
|
|
36
38
|
export interface BookingData {
|
|
37
39
|
serviceSelections: ServiceSelection[];
|
|
38
|
-
location:
|
|
40
|
+
location: ServiceLocationType | null;
|
|
39
41
|
timezone: string | undefined;
|
|
40
42
|
formSubmission: FormValues | null;
|
|
41
43
|
actions: BookingServiceActions;
|
|
@@ -46,22 +48,148 @@ export interface BookingData {
|
|
|
46
48
|
export interface DataProps {
|
|
47
49
|
children: (data: BookingData) => React.ReactNode;
|
|
48
50
|
}
|
|
51
|
+
export declare function Data(props: DataProps): React.ReactNode;
|
|
52
|
+
/**
|
|
53
|
+
* Unified data object for a single booking item.
|
|
54
|
+
* Contains resolved data ready for use - no raw serviceSelection duplication.
|
|
55
|
+
*/
|
|
56
|
+
export interface BookingItem {
|
|
57
|
+
/** SDK Service object */
|
|
58
|
+
service: Service;
|
|
59
|
+
/** Adapted SDK TimeSlot (or null if no time slot selected) */
|
|
60
|
+
timeSlot: TimeSlot | null;
|
|
61
|
+
/** Resolved staff: timeSlot.resources ?? selection.resources, or null if none */
|
|
62
|
+
staff: Resource[] | null;
|
|
63
|
+
/** Unique identifier for this booking instance */
|
|
64
|
+
instanceId: string;
|
|
65
|
+
/** Position in the serviceSelections array */
|
|
66
|
+
index: number;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Hook to access the current BookingItem from context.
|
|
70
|
+
* Must be used within BookingItemProvider.
|
|
71
|
+
*
|
|
72
|
+
* @throws Error if used outside of BookingItemProvider context
|
|
73
|
+
*/
|
|
74
|
+
export declare function useBookingItemContext(): BookingItem;
|
|
75
|
+
/**
|
|
76
|
+
* Props for BookingItemProvider
|
|
77
|
+
*/
|
|
78
|
+
export interface BookingItemProviderProps {
|
|
79
|
+
children: React.ReactNode;
|
|
80
|
+
item: BookingItem;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Provider component used by repeaters to provide BookingItem context.
|
|
84
|
+
* Can be used by core consumers to create their own repeater.
|
|
85
|
+
*
|
|
86
|
+
* @component
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* {items.map((item) => (
|
|
90
|
+
* <BookingItemProvider key={item.instanceId} item={item}>
|
|
91
|
+
* {children}
|
|
92
|
+
* </BookingItemProvider>
|
|
93
|
+
* ))}
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
export declare function BookingItemProvider(props: BookingItemProviderProps): React.ReactNode;
|
|
97
|
+
/**
|
|
98
|
+
* Props for BookingItemInfo render prop component
|
|
99
|
+
*/
|
|
100
|
+
export interface BookingItemInfoProps {
|
|
101
|
+
children: (data: {
|
|
102
|
+
/** SDK Service object */
|
|
103
|
+
service: Service;
|
|
104
|
+
/** Adapted SDK TimeSlot (or null if no time slot selected) */
|
|
105
|
+
timeSlot: TimeSlot | null;
|
|
106
|
+
/** First staff member's name, empty string if none */
|
|
107
|
+
staffName: string;
|
|
108
|
+
/** Unique identifier for this booking instance */
|
|
109
|
+
instanceId: string;
|
|
110
|
+
/** Position in the serviceSelections array */
|
|
111
|
+
index: number;
|
|
112
|
+
/** The raw BookingItem object */
|
|
113
|
+
item: BookingItem;
|
|
114
|
+
}) => React.ReactNode;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Core component that provides access to booking item info via render props.
|
|
118
|
+
* Must be used within BookingItemProvider.
|
|
119
|
+
*
|
|
120
|
+
* @component
|
|
121
|
+
* @example
|
|
122
|
+
* ```tsx
|
|
123
|
+
* <BookingItemInfo>
|
|
124
|
+
* {({ service, timeSlot, staffName }) => (
|
|
125
|
+
* <div>
|
|
126
|
+
* <span>{service.name}</span>
|
|
127
|
+
* <span>{staffName}</span>
|
|
128
|
+
* </div>
|
|
129
|
+
* )}
|
|
130
|
+
* </BookingItemInfo>
|
|
131
|
+
* ```
|
|
132
|
+
*/
|
|
133
|
+
export declare function BookingItemInfo(props: BookingItemInfoProps): React.ReactNode;
|
|
134
|
+
/**
|
|
135
|
+
* Data exposed by ItemsData render prop
|
|
136
|
+
*/
|
|
137
|
+
export interface ItemsDataRenderProps {
|
|
138
|
+
/** Array of BookingItem objects */
|
|
139
|
+
items: BookingItem[];
|
|
140
|
+
}
|
|
49
141
|
/**
|
|
50
|
-
*
|
|
51
|
-
|
|
142
|
+
* Props for ItemsData render prop component
|
|
143
|
+
*/
|
|
144
|
+
export interface ItemsDataProps {
|
|
145
|
+
children: (data: ItemsDataRenderProps) => React.ReactNode;
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* Core component that provides access to booking items array via render props.
|
|
149
|
+
* Transforms serviceSelections into BookingItem objects.
|
|
52
150
|
*
|
|
53
151
|
* @component
|
|
54
152
|
* @example
|
|
55
153
|
* ```tsx
|
|
56
|
-
* <Booking.
|
|
57
|
-
* {({
|
|
58
|
-
*
|
|
59
|
-
* <div>{
|
|
154
|
+
* <Booking.ItemsData>
|
|
155
|
+
* {({ items }) => (
|
|
156
|
+
* items.length > 0 ? (
|
|
157
|
+
* <div>{items.length} bookings</div>
|
|
60
158
|
* ) : (
|
|
61
|
-
* <div>No
|
|
159
|
+
* <div>No bookings</div>
|
|
62
160
|
* )
|
|
63
161
|
* )}
|
|
64
|
-
* </Booking.
|
|
162
|
+
* </Booking.ItemsData>
|
|
65
163
|
* ```
|
|
66
164
|
*/
|
|
67
|
-
export declare function
|
|
165
|
+
export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
|
|
166
|
+
/**
|
|
167
|
+
* Data exposed by PaymentData render prop
|
|
168
|
+
*/
|
|
169
|
+
export interface PaymentDataRenderProps {
|
|
170
|
+
/** SlotServices array for Payment.Root */
|
|
171
|
+
slotServices: SlotService[];
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Props for PaymentData render prop component
|
|
175
|
+
*/
|
|
176
|
+
export interface PaymentDataProps {
|
|
177
|
+
children: (data: PaymentDataRenderProps) => React.ReactNode;
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Core component that provides payment data via render props.
|
|
181
|
+
* Computes slotServices from serviceSelections.
|
|
182
|
+
*
|
|
183
|
+
* @component
|
|
184
|
+
* @example
|
|
185
|
+
* ```tsx
|
|
186
|
+
* <Booking.PaymentData>
|
|
187
|
+
* {({ slotServices }) => (
|
|
188
|
+
* <Payment.Root slotServices={slotServices}>
|
|
189
|
+
* <Payment.TotalPrice />
|
|
190
|
+
* </Payment.Root>
|
|
191
|
+
* )}
|
|
192
|
+
* </Booking.PaymentData>
|
|
193
|
+
* ```
|
|
194
|
+
*/
|
|
195
|
+
export declare function PaymentData(props: PaymentDataProps): React.ReactNode;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Core Booking Components
|
|
4
|
+
* Provides low-level access to BookingService via render props and service setup
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
2
7
|
import { WixServices, useService } from '@wix/services-manager-react';
|
|
3
8
|
import { createServicesMap } from '@wix/services-manager';
|
|
4
9
|
import { BookingServiceDefinition, BookingService, } from '../../../services/booking/booking.js';
|
|
@@ -39,14 +44,42 @@ export function Root(props) {
|
|
|
39
44
|
* </Booking.Data>
|
|
40
45
|
* ```
|
|
41
46
|
*/
|
|
47
|
+
/**
|
|
48
|
+
* Maps a TimeSlotLocationType to ServiceLocationType.
|
|
49
|
+
* These types are structurally similar but have subtle differences
|
|
50
|
+
* (e.g., _id being string | null | undefined vs string | undefined).
|
|
51
|
+
*/
|
|
52
|
+
function mapTimeSlotLocationToServiceLocation(timeSlotLocation) {
|
|
53
|
+
return {
|
|
54
|
+
...timeSlotLocation,
|
|
55
|
+
_id: timeSlotLocation._id ?? undefined,
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Resolves the location with fallback logic:
|
|
60
|
+
* 1. First, use the explicitly set booking location
|
|
61
|
+
* 2. If not set, fall back to the first service selection's slot location
|
|
62
|
+
*/
|
|
63
|
+
function resolveLocation(bookingLocation, serviceSelections) {
|
|
64
|
+
if (bookingLocation) {
|
|
65
|
+
return bookingLocation;
|
|
66
|
+
}
|
|
67
|
+
// Fallback to first slot's location
|
|
68
|
+
const firstSlotLocation = serviceSelections[0]?.timeSlot?.location;
|
|
69
|
+
if (firstSlotLocation) {
|
|
70
|
+
return mapTimeSlotLocationToServiceLocation(firstSlotLocation);
|
|
71
|
+
}
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
42
74
|
export function Data(props) {
|
|
43
75
|
const { children } = props;
|
|
44
76
|
const bookingService = useService(BookingServiceDefinition);
|
|
45
77
|
const serviceSelections = bookingService.serviceSelections.get();
|
|
46
|
-
const
|
|
78
|
+
const bookingLocation = bookingService.location.get();
|
|
47
79
|
const timezone = bookingService.timezone.get();
|
|
48
80
|
const formSubmission = bookingService.formSubmission.get();
|
|
49
81
|
const { actions } = bookingService;
|
|
82
|
+
const location = resolveLocation(bookingLocation, serviceSelections);
|
|
50
83
|
return children({
|
|
51
84
|
serviceSelections,
|
|
52
85
|
location,
|
|
@@ -55,3 +88,177 @@ export function Data(props) {
|
|
|
55
88
|
actions,
|
|
56
89
|
});
|
|
57
90
|
}
|
|
91
|
+
/**
|
|
92
|
+
* Context for the current BookingItem
|
|
93
|
+
*/
|
|
94
|
+
const BookingItemContext = React.createContext(null);
|
|
95
|
+
/**
|
|
96
|
+
* Hook to access the current BookingItem from context.
|
|
97
|
+
* Must be used within BookingItemProvider.
|
|
98
|
+
*
|
|
99
|
+
* @throws Error if used outside of BookingItemProvider context
|
|
100
|
+
*/
|
|
101
|
+
export function useBookingItemContext() {
|
|
102
|
+
const context = React.useContext(BookingItemContext);
|
|
103
|
+
if (!context) {
|
|
104
|
+
throw new Error('BookingItem components must be used within BookingItemProvider');
|
|
105
|
+
}
|
|
106
|
+
return context;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Provider component used by repeaters to provide BookingItem context.
|
|
110
|
+
* Can be used by core consumers to create their own repeater.
|
|
111
|
+
*
|
|
112
|
+
* @component
|
|
113
|
+
* @example
|
|
114
|
+
* ```tsx
|
|
115
|
+
* {items.map((item) => (
|
|
116
|
+
* <BookingItemProvider key={item.instanceId} item={item}>
|
|
117
|
+
* {children}
|
|
118
|
+
* </BookingItemProvider>
|
|
119
|
+
* ))}
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
export function BookingItemProvider(props) {
|
|
123
|
+
const { children, item } = props;
|
|
124
|
+
return (_jsx(BookingItemContext.Provider, { value: item, children: children }));
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Core component that provides access to booking item info via render props.
|
|
128
|
+
* Must be used within BookingItemProvider.
|
|
129
|
+
*
|
|
130
|
+
* @component
|
|
131
|
+
* @example
|
|
132
|
+
* ```tsx
|
|
133
|
+
* <BookingItemInfo>
|
|
134
|
+
* {({ service, timeSlot, staffName }) => (
|
|
135
|
+
* <div>
|
|
136
|
+
* <span>{service.name}</span>
|
|
137
|
+
* <span>{staffName}</span>
|
|
138
|
+
* </div>
|
|
139
|
+
* )}
|
|
140
|
+
* </BookingItemInfo>
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
export function BookingItemInfo(props) {
|
|
144
|
+
const item = useBookingItemContext();
|
|
145
|
+
const staffName = item.staff?.[0]?.name || '';
|
|
146
|
+
return props.children({
|
|
147
|
+
service: item.service,
|
|
148
|
+
timeSlot: item.timeSlot,
|
|
149
|
+
staffName,
|
|
150
|
+
instanceId: item.instanceId,
|
|
151
|
+
index: item.index,
|
|
152
|
+
item,
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
// ============================================================================
|
|
156
|
+
// Helper: Convert ServiceSelectionTimeSlot to SDK TimeSlot
|
|
157
|
+
// ============================================================================
|
|
158
|
+
/**
|
|
159
|
+
* Converts a ServiceSelectionTimeSlot to SDK TimeSlot format
|
|
160
|
+
* for compatibility with TimeSlot.Root component.
|
|
161
|
+
*/
|
|
162
|
+
function mapSelectionTimeSlotToTimeSlot(serviceSelectionTimeSlot) {
|
|
163
|
+
if (!serviceSelectionTimeSlot) {
|
|
164
|
+
return null;
|
|
165
|
+
}
|
|
166
|
+
const availableResources = serviceSelectionTimeSlot.resources?.length
|
|
167
|
+
? [{ resources: serviceSelectionTimeSlot.resources }]
|
|
168
|
+
: undefined;
|
|
169
|
+
return {
|
|
170
|
+
localStartDate: serviceSelectionTimeSlot.startDate,
|
|
171
|
+
localEndDate: serviceSelectionTimeSlot.endDate,
|
|
172
|
+
bookable: true,
|
|
173
|
+
totalCapacity: serviceSelectionTimeSlot.totalCapacity,
|
|
174
|
+
remainingCapacity: serviceSelectionTimeSlot.remainingCapacity,
|
|
175
|
+
scheduleId: serviceSelectionTimeSlot.scheduleId,
|
|
176
|
+
eventInfo: serviceSelectionTimeSlot.eventInfo,
|
|
177
|
+
location: serviceSelectionTimeSlot.location,
|
|
178
|
+
availableResources,
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
// ============================================================================
|
|
182
|
+
// Helper: Resolve Staff with Priority Logic
|
|
183
|
+
// ============================================================================
|
|
184
|
+
/**
|
|
185
|
+
* Gets selected staff resources with priority:
|
|
186
|
+
* 1. From selected time slot (if resources exist)
|
|
187
|
+
* 2. From service selection resources
|
|
188
|
+
* Returns null if no staff is chosen
|
|
189
|
+
*/
|
|
190
|
+
function getSelectedStaff(serviceSelection) {
|
|
191
|
+
// Priority 1: From selected time slot
|
|
192
|
+
if (serviceSelection.timeSlot?.resources?.length) {
|
|
193
|
+
return serviceSelection.timeSlot.resources;
|
|
194
|
+
}
|
|
195
|
+
// Priority 2: From service selection
|
|
196
|
+
if (serviceSelection.resources?.length) {
|
|
197
|
+
return serviceSelection.resources;
|
|
198
|
+
}
|
|
199
|
+
// No staff chosen
|
|
200
|
+
return null;
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* Creates a BookingItem from a ServiceSelection
|
|
204
|
+
*/
|
|
205
|
+
function createBookingItem(serviceSelection, index) {
|
|
206
|
+
return {
|
|
207
|
+
service: serviceSelection.service,
|
|
208
|
+
timeSlot: mapSelectionTimeSlotToTimeSlot(serviceSelection.timeSlot),
|
|
209
|
+
staff: getSelectedStaff(serviceSelection),
|
|
210
|
+
instanceId: serviceSelection.instanceId,
|
|
211
|
+
index,
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Core component that provides access to booking items array via render props.
|
|
216
|
+
* Transforms serviceSelections into BookingItem objects.
|
|
217
|
+
*
|
|
218
|
+
* @component
|
|
219
|
+
* @example
|
|
220
|
+
* ```tsx
|
|
221
|
+
* <Booking.ItemsData>
|
|
222
|
+
* {({ items }) => (
|
|
223
|
+
* items.length > 0 ? (
|
|
224
|
+
* <div>{items.length} bookings</div>
|
|
225
|
+
* ) : (
|
|
226
|
+
* <div>No bookings</div>
|
|
227
|
+
* )
|
|
228
|
+
* )}
|
|
229
|
+
* </Booking.ItemsData>
|
|
230
|
+
* ```
|
|
231
|
+
*/
|
|
232
|
+
export function ItemsData(props) {
|
|
233
|
+
const { children } = props;
|
|
234
|
+
const bookingService = useService(BookingServiceDefinition);
|
|
235
|
+
const serviceSelections = bookingService.serviceSelections.get();
|
|
236
|
+
const items = serviceSelections.map((selection, index) => createBookingItem(selection, index));
|
|
237
|
+
return children({ items });
|
|
238
|
+
}
|
|
239
|
+
/**
|
|
240
|
+
* Core component that provides payment data via render props.
|
|
241
|
+
* Computes slotServices from serviceSelections.
|
|
242
|
+
*
|
|
243
|
+
* @component
|
|
244
|
+
* @example
|
|
245
|
+
* ```tsx
|
|
246
|
+
* <Booking.PaymentData>
|
|
247
|
+
* {({ slotServices }) => (
|
|
248
|
+
* <Payment.Root slotServices={slotServices}>
|
|
249
|
+
* <Payment.TotalPrice />
|
|
250
|
+
* </Payment.Root>
|
|
251
|
+
* )}
|
|
252
|
+
* </Booking.PaymentData>
|
|
253
|
+
* ```
|
|
254
|
+
*/
|
|
255
|
+
export function PaymentData(props) {
|
|
256
|
+
const { children } = props;
|
|
257
|
+
const bookingService = useService(BookingServiceDefinition);
|
|
258
|
+
const serviceSelections = bookingService.serviceSelections.get();
|
|
259
|
+
const slotServices = serviceSelections.map((selection) => ({
|
|
260
|
+
service: selection.service,
|
|
261
|
+
lineItemId: selection.instanceId,
|
|
262
|
+
}));
|
|
263
|
+
return children({ slotServices });
|
|
264
|
+
}
|
|
@@ -11,7 +11,7 @@ import type { Service } from '@wix/auto_sdk_bookings_services';
|
|
|
11
11
|
* - Offline payment: payNow = 0
|
|
12
12
|
*
|
|
13
13
|
* Force checkout when:
|
|
14
|
-
* - Service has cancellation fee
|
|
14
|
+
* - Service has cancellation fee policy
|
|
15
15
|
*
|
|
16
16
|
* @param checkout - The checkout response from createCheckout
|
|
17
17
|
* @param service - The service being booked
|
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
* - Offline payment: payNow = 0
|
|
10
10
|
*
|
|
11
11
|
* Force checkout when:
|
|
12
|
-
* - Service has cancellation fee
|
|
12
|
+
* - Service has cancellation fee policy
|
|
13
13
|
*
|
|
14
14
|
* @param checkout - The checkout response from createCheckout
|
|
15
15
|
* @param service - The service being booked
|
|
16
16
|
* @returns true if checkout page is required, false if can skip to order
|
|
17
17
|
*/
|
|
18
18
|
export function isCheckoutRequired(checkout, service) {
|
|
19
|
-
// Force checkout for cancellation fee
|
|
20
|
-
const hasCancellationFee = service.bookingPolicy?.
|
|
19
|
+
// Force checkout for cancellation fee policy
|
|
20
|
+
const hasCancellationFee = service.bookingPolicy?.cancellationFeePolicy?.enabled;
|
|
21
21
|
if (hasCancellationFee) {
|
|
22
22
|
return true;
|
|
23
23
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/headless-bookings",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.51",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"groupId": "com.wixpress.headless-components"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
|
-
"falconPackageHash": "
|
|
75
|
+
"falconPackageHash": "ef1225253b65e6a7c3e1ea15bc390bb4afebcfad2ef8f5c0d7337bde"
|
|
76
76
|
}
|