@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.
@@ -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 { Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
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: TimeSlotLocationType | null;
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
- * Core component that provides access to booking data via render props.
51
- * Used internally by higher-level Booking components.
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.Data>
57
- * {({ serviceSelections, location, timezone, formSubmission, actions }) => (
58
- * serviceSelections.length > 0 ? (
59
- * <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
154
+ * <Booking.ItemsData>
155
+ * {({ items }) => (
156
+ * items.length > 0 ? (
157
+ * <div>{items.length} bookings</div>
60
158
  * ) : (
61
- * <div>No services selected</div>
159
+ * <div>No bookings</div>
62
160
  * )
63
161
  * )}
64
- * </Booking.Data>
162
+ * </Booking.ItemsData>
65
163
  * ```
66
164
  */
67
- export declare function Data(props: DataProps): React.ReactNode;
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 location = bookingService.location.get();
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?.cancellationPolicy?.enabled;
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.49",
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": "ce9857f84a2dc23726f81fe1b20c314c9c652cbe712b90742c92d448"
75
+ "falconPackageHash": "ef1225253b65e6a7c3e1ea15bc390bb4afebcfad2ef8f5c0d7337bde"
76
76
  }