@wix/headless-bookings 0.0.87 → 0.0.88
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 +36 -117
- package/cjs/dist/react/booking/Booking.js +40 -109
- package/cjs/dist/react/booking/BookingItem.d.ts +64 -0
- package/cjs/dist/react/booking/BookingItem.js +71 -0
- package/cjs/dist/react/core/time-slot-list/TimeSlotList.d.ts +2 -0
- package/cjs/dist/react/core/time-slot-list/TimeSlotList.js +3 -0
- package/cjs/dist/react/index.d.ts +1 -0
- package/cjs/dist/react/index.js +1 -0
- package/cjs/dist/react/service/Service.d.ts +0 -2
- package/cjs/dist/react/service/Service.js +3 -3
- package/cjs/dist/react/service/ServiceMedia.d.ts +1 -63
- package/cjs/dist/react/service/ServiceMedia.js +1 -60
- package/cjs/dist/react/time-slot-list/TimeSlot.d.ts +21 -6
- package/cjs/dist/react/time-slot-list/TimeSlot.js +34 -14
- package/cjs/dist/react/time-slot-list/TimeSlotList.d.ts +3 -49
- package/cjs/dist/react/time-slot-list/TimeSlotList.js +24 -21
- package/dist/react/booking/Booking.d.ts +36 -117
- package/dist/react/booking/Booking.js +40 -109
- package/dist/react/booking/BookingItem.d.ts +64 -0
- package/dist/react/booking/BookingItem.js +71 -0
- package/dist/react/core/time-slot-list/TimeSlotList.d.ts +2 -0
- package/dist/react/core/time-slot-list/TimeSlotList.js +3 -0
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +1 -0
- package/dist/react/service/Service.d.ts +0 -2
- package/dist/react/service/Service.js +3 -3
- package/dist/react/service/ServiceMedia.d.ts +1 -63
- package/dist/react/service/ServiceMedia.js +1 -60
- package/dist/react/time-slot-list/TimeSlot.d.ts +21 -6
- package/dist/react/time-slot-list/TimeSlot.js +34 -14
- package/dist/react/time-slot-list/TimeSlotList.d.ts +3 -49
- package/dist/react/time-slot-list/TimeSlotList.js +24 -21
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* ServiceMedia - Compound component for displaying service media
|
|
3
|
-
* Provides components for displaying main media
|
|
3
|
+
* Provides components for displaying main media and cover media images
|
|
4
4
|
*/
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { AsChildChildren } from '@wix/headless-utils/react';
|
|
@@ -105,67 +105,6 @@ export interface CoverProps {
|
|
|
105
105
|
* ```
|
|
106
106
|
*/
|
|
107
107
|
export declare const Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
|
|
108
|
-
/**
|
|
109
|
-
* Props for ServiceMedia.Gallery component
|
|
110
|
-
*/
|
|
111
|
-
export interface GalleryProps {
|
|
112
|
-
/** Child components to render within the gallery (MediaGallery components) */
|
|
113
|
-
children: React.ReactNode;
|
|
114
|
-
/** Whether the gallery should loop infinitely */
|
|
115
|
-
infinite?: boolean;
|
|
116
|
-
/** Auto-play configuration for the gallery */
|
|
117
|
-
autoPlay?: {
|
|
118
|
-
/** Direction of auto-play */
|
|
119
|
-
direction?: 'forward' | 'backward';
|
|
120
|
-
/** Interval between slides in milliseconds */
|
|
121
|
-
intervalMs?: number;
|
|
122
|
-
};
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* Container for service media items gallery.
|
|
126
|
-
* Renders a MediaGallery.Root with the service media items.
|
|
127
|
-
* Supports autoPlay and infinite scroll options for carousel behavior.
|
|
128
|
-
*
|
|
129
|
-
* @component
|
|
130
|
-
* @example
|
|
131
|
-
* ```tsx
|
|
132
|
-
* // Basic usage with MediaGallery components
|
|
133
|
-
* <ServiceMedia.Gallery>
|
|
134
|
-
* <MediaGallery.Thumbnails>
|
|
135
|
-
* <MediaGallery.ThumbnailRepeater>
|
|
136
|
-
* <MediaGallery.ThumbnailItem />
|
|
137
|
-
* </MediaGallery.ThumbnailRepeater>
|
|
138
|
-
* </MediaGallery.Thumbnails>
|
|
139
|
-
* </ServiceMedia.Gallery>
|
|
140
|
-
*
|
|
141
|
-
* // With autoPlay carousel
|
|
142
|
-
* <ServiceMedia.Gallery
|
|
143
|
-
* autoPlay={{ direction: 'forward', intervalMs: 3000 }}
|
|
144
|
-
* infinite
|
|
145
|
-
* >
|
|
146
|
-
* <MediaGallery.Viewport />
|
|
147
|
-
* <MediaGallery.Previous />
|
|
148
|
-
* <MediaGallery.Next />
|
|
149
|
-
* </ServiceMedia.Gallery>
|
|
150
|
-
*
|
|
151
|
-
* // Full gallery with thumbnails and navigation
|
|
152
|
-
* <ServiceMedia.Gallery infinite>
|
|
153
|
-
* <div className="gallery-container">
|
|
154
|
-
* <MediaGallery.Viewport className="main-image" />
|
|
155
|
-
* <div className="controls">
|
|
156
|
-
* <MediaGallery.Previous>Prev</MediaGallery.Previous>
|
|
157
|
-
* <MediaGallery.Next>Next</MediaGallery.Next>
|
|
158
|
-
* </div>
|
|
159
|
-
* <MediaGallery.Thumbnails>
|
|
160
|
-
* <MediaGallery.ThumbnailRepeater>
|
|
161
|
-
* <MediaGallery.ThumbnailItem />
|
|
162
|
-
* </MediaGallery.ThumbnailRepeater>
|
|
163
|
-
* </MediaGallery.Thumbnails>
|
|
164
|
-
* </div>
|
|
165
|
-
* </ServiceMedia.Gallery>
|
|
166
|
-
* ```
|
|
167
|
-
*/
|
|
168
|
-
export declare const Gallery: React.FC<GalleryProps>;
|
|
169
108
|
/**
|
|
170
109
|
* ServiceMedia compound component for displaying service media
|
|
171
110
|
*
|
|
@@ -186,6 +125,5 @@ export declare const Gallery: React.FC<GalleryProps>;
|
|
|
186
125
|
export declare const ServiceMedia: {
|
|
187
126
|
Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
|
|
188
127
|
Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
|
|
189
|
-
Gallery: React.FC<GalleryProps>;
|
|
190
128
|
};
|
|
191
129
|
export default ServiceMedia;
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* ServiceMedia - Compound component for displaying service media
|
|
4
|
-
* Provides components for displaying main media
|
|
4
|
+
* Provides components for displaying main media and cover media images
|
|
5
5
|
*/
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { AsChildSlot } from '@wix/headless-utils/react';
|
|
8
8
|
import { WixMediaImage } from '@wix/headless-media/react';
|
|
9
|
-
import { MediaGallery } from '@wix/headless-media/react';
|
|
10
9
|
import * as CoreServiceMediaMain from '../core/service/ServiceMediaMain.js';
|
|
11
10
|
import * as CoreServiceMediaCover from '../core/service/ServiceMediaCover.js';
|
|
12
|
-
import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
|
|
13
11
|
var TestIds;
|
|
14
12
|
(function (TestIds) {
|
|
15
13
|
TestIds["serviceMediaMain"] = "service-media-main";
|
|
@@ -94,62 +92,6 @@ export const Cover = React.forwardRef((props, ref) => {
|
|
|
94
92
|
return (_jsx(CoreServiceMediaCover.CoverMedia, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaCover, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
|
|
95
93
|
});
|
|
96
94
|
Cover.displayName = 'ServiceMedia.Cover';
|
|
97
|
-
/**
|
|
98
|
-
* Container for service media items gallery.
|
|
99
|
-
* Renders a MediaGallery.Root with the service media items.
|
|
100
|
-
* Supports autoPlay and infinite scroll options for carousel behavior.
|
|
101
|
-
*
|
|
102
|
-
* @component
|
|
103
|
-
* @example
|
|
104
|
-
* ```tsx
|
|
105
|
-
* // Basic usage with MediaGallery components
|
|
106
|
-
* <ServiceMedia.Gallery>
|
|
107
|
-
* <MediaGallery.Thumbnails>
|
|
108
|
-
* <MediaGallery.ThumbnailRepeater>
|
|
109
|
-
* <MediaGallery.ThumbnailItem />
|
|
110
|
-
* </MediaGallery.ThumbnailRepeater>
|
|
111
|
-
* </MediaGallery.Thumbnails>
|
|
112
|
-
* </ServiceMedia.Gallery>
|
|
113
|
-
*
|
|
114
|
-
* // With autoPlay carousel
|
|
115
|
-
* <ServiceMedia.Gallery
|
|
116
|
-
* autoPlay={{ direction: 'forward', intervalMs: 3000 }}
|
|
117
|
-
* infinite
|
|
118
|
-
* >
|
|
119
|
-
* <MediaGallery.Viewport />
|
|
120
|
-
* <MediaGallery.Previous />
|
|
121
|
-
* <MediaGallery.Next />
|
|
122
|
-
* </ServiceMedia.Gallery>
|
|
123
|
-
*
|
|
124
|
-
* // Full gallery with thumbnails and navigation
|
|
125
|
-
* <ServiceMedia.Gallery infinite>
|
|
126
|
-
* <div className="gallery-container">
|
|
127
|
-
* <MediaGallery.Viewport className="main-image" />
|
|
128
|
-
* <div className="controls">
|
|
129
|
-
* <MediaGallery.Previous>Prev</MediaGallery.Previous>
|
|
130
|
-
* <MediaGallery.Next>Next</MediaGallery.Next>
|
|
131
|
-
* </div>
|
|
132
|
-
* <MediaGallery.Thumbnails>
|
|
133
|
-
* <MediaGallery.ThumbnailRepeater>
|
|
134
|
-
* <MediaGallery.ThumbnailItem />
|
|
135
|
-
* </MediaGallery.ThumbnailRepeater>
|
|
136
|
-
* </MediaGallery.Thumbnails>
|
|
137
|
-
* </div>
|
|
138
|
-
* </ServiceMedia.Gallery>
|
|
139
|
-
* ```
|
|
140
|
-
*/
|
|
141
|
-
export const Gallery = (props) => {
|
|
142
|
-
const { children, infinite, autoPlay } = props;
|
|
143
|
-
return (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => {
|
|
144
|
-
const mediaGalleryServiceConfig = {
|
|
145
|
-
media: mediaItems,
|
|
146
|
-
infinite,
|
|
147
|
-
autoPlay,
|
|
148
|
-
};
|
|
149
|
-
return (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }));
|
|
150
|
-
} }));
|
|
151
|
-
};
|
|
152
|
-
Gallery.displayName = 'ServiceMedia.Gallery';
|
|
153
95
|
/**
|
|
154
96
|
* ServiceMedia compound component for displaying service media
|
|
155
97
|
*
|
|
@@ -170,6 +112,5 @@ Gallery.displayName = 'ServiceMedia.Gallery';
|
|
|
170
112
|
export const ServiceMedia = {
|
|
171
113
|
Main,
|
|
172
114
|
Cover,
|
|
173
|
-
Gallery,
|
|
174
115
|
};
|
|
175
116
|
export default ServiceMedia;
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* the necessary context. There is no public TimeSlot.Root - context is managed internally.
|
|
7
7
|
*/
|
|
8
8
|
import React from 'react';
|
|
9
|
+
import { type DateData } from '@wix/headless-components/react';
|
|
9
10
|
import { AsChildChildren } from '@wix/headless-utils/react';
|
|
10
11
|
import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
|
|
11
12
|
import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
|
|
@@ -46,9 +47,10 @@ export declare enum TestIds {
|
|
|
46
47
|
timeSlotStaffMemberActionSelect = "time-slot-staff-member-action-select"
|
|
47
48
|
}
|
|
48
49
|
/**
|
|
49
|
-
* Props for TimeSlot.StartDate component
|
|
50
|
+
* Props for TimeSlot.StartDate component.
|
|
51
|
+
* Inherits formatting options from DateData (dateTimeFormatOptions, locale).
|
|
50
52
|
*/
|
|
51
|
-
export interface StartDateProps {
|
|
53
|
+
export interface StartDateProps extends Omit<DateData, 'date'> {
|
|
52
54
|
asChild?: boolean;
|
|
53
55
|
children?: AsChildChildren<{
|
|
54
56
|
startDate: Date;
|
|
@@ -65,7 +67,13 @@ export interface StartDateProps {
|
|
|
65
67
|
* // Default usage - displays "10:00 AM"
|
|
66
68
|
* <TimeSlot.StartDate className="text-foreground" />
|
|
67
69
|
*
|
|
68
|
-
* // With custom
|
|
70
|
+
* // With custom date format
|
|
71
|
+
* <TimeSlot.StartDate
|
|
72
|
+
* className="text-foreground"
|
|
73
|
+
* dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
|
|
74
|
+
* />
|
|
75
|
+
*
|
|
76
|
+
* // With custom formatting via asChild
|
|
69
77
|
* <TimeSlot.StartDate asChild>
|
|
70
78
|
* {({ startDate }) => (
|
|
71
79
|
* <span>{formatTime(startDate)}</span>
|
|
@@ -75,9 +83,10 @@ export interface StartDateProps {
|
|
|
75
83
|
*/
|
|
76
84
|
export declare const StartDate: React.ForwardRefExoticComponent<StartDateProps & React.RefAttributes<HTMLElement>>;
|
|
77
85
|
/**
|
|
78
|
-
* Props for TimeSlot.EndDate component
|
|
86
|
+
* Props for TimeSlot.EndDate component.
|
|
87
|
+
* Inherits formatting options from DateData (dateTimeFormatOptions, locale).
|
|
79
88
|
*/
|
|
80
|
-
export interface EndDateProps {
|
|
89
|
+
export interface EndDateProps extends Omit<DateData, 'date'> {
|
|
81
90
|
asChild?: boolean;
|
|
82
91
|
children?: AsChildChildren<{
|
|
83
92
|
endDate: Date;
|
|
@@ -94,7 +103,13 @@ export interface EndDateProps {
|
|
|
94
103
|
* // Default usage - displays "11:00 AM"
|
|
95
104
|
* <TimeSlot.EndDate className="text-foreground" />
|
|
96
105
|
*
|
|
97
|
-
* // With custom
|
|
106
|
+
* // With custom date format
|
|
107
|
+
* <TimeSlot.EndDate
|
|
108
|
+
* className="text-foreground"
|
|
109
|
+
* dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
|
|
110
|
+
* />
|
|
111
|
+
*
|
|
112
|
+
* // With custom formatting via asChild
|
|
98
113
|
* <TimeSlot.EndDate asChild>
|
|
99
114
|
* {({ endDate }) => (
|
|
100
115
|
* <span>{formatTime(endDate)}</span>
|
|
@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
7
7
|
* the necessary context. There is no public TimeSlot.Root - context is managed internally.
|
|
8
8
|
*/
|
|
9
9
|
import React from 'react';
|
|
10
|
-
import { GenericList } from '@wix/headless-components/react';
|
|
10
|
+
import { GenericList, Date, } from '@wix/headless-components/react';
|
|
11
11
|
import { AsChildSlot } from '@wix/headless-utils/react';
|
|
12
12
|
import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
|
|
13
13
|
/**
|
|
@@ -56,7 +56,13 @@ export var TestIds;
|
|
|
56
56
|
* // Default usage - displays "10:00 AM"
|
|
57
57
|
* <TimeSlot.StartDate className="text-foreground" />
|
|
58
58
|
*
|
|
59
|
-
* // With custom
|
|
59
|
+
* // With custom date format
|
|
60
|
+
* <TimeSlot.StartDate
|
|
61
|
+
* className="text-foreground"
|
|
62
|
+
* dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
|
|
63
|
+
* />
|
|
64
|
+
*
|
|
65
|
+
* // With custom formatting via asChild
|
|
60
66
|
* <TimeSlot.StartDate asChild>
|
|
61
67
|
* {({ startDate }) => (
|
|
62
68
|
* <span>{formatTime(startDate)}</span>
|
|
@@ -65,11 +71,15 @@ export var TestIds;
|
|
|
65
71
|
* ```
|
|
66
72
|
*/
|
|
67
73
|
export const StartDate = React.forwardRef((props, ref) => {
|
|
68
|
-
const { asChild, children, className } = props;
|
|
69
|
-
return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
const { asChild, children, className, dateTimeFormatOptions, locale } = props;
|
|
75
|
+
return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx(Date, { date: {
|
|
76
|
+
date: startDate,
|
|
77
|
+
locale,
|
|
78
|
+
dateTimeFormatOptions: dateTimeFormatOptions ?? {
|
|
79
|
+
hour: '2-digit',
|
|
80
|
+
minute: '2-digit',
|
|
81
|
+
},
|
|
82
|
+
} }) })) }));
|
|
73
83
|
});
|
|
74
84
|
StartDate.displayName = 'TimeSlot.StartDate';
|
|
75
85
|
/**
|
|
@@ -82,7 +92,13 @@ StartDate.displayName = 'TimeSlot.StartDate';
|
|
|
82
92
|
* // Default usage - displays "11:00 AM"
|
|
83
93
|
* <TimeSlot.EndDate className="text-foreground" />
|
|
84
94
|
*
|
|
85
|
-
* // With custom
|
|
95
|
+
* // With custom date format
|
|
96
|
+
* <TimeSlot.EndDate
|
|
97
|
+
* className="text-foreground"
|
|
98
|
+
* dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
|
|
99
|
+
* />
|
|
100
|
+
*
|
|
101
|
+
* // With custom formatting via asChild
|
|
86
102
|
* <TimeSlot.EndDate asChild>
|
|
87
103
|
* {({ endDate }) => (
|
|
88
104
|
* <span>{formatTime(endDate)}</span>
|
|
@@ -91,11 +107,15 @@ StartDate.displayName = 'TimeSlot.StartDate';
|
|
|
91
107
|
* ```
|
|
92
108
|
*/
|
|
93
109
|
export const EndDate = React.forwardRef((props, ref) => {
|
|
94
|
-
const { asChild, children, className } = props;
|
|
95
|
-
return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
110
|
+
const { asChild, children, className, dateTimeFormatOptions, locale } = props;
|
|
111
|
+
return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx(Date, { date: {
|
|
112
|
+
date: endDate,
|
|
113
|
+
locale,
|
|
114
|
+
dateTimeFormatOptions: dateTimeFormatOptions ?? {
|
|
115
|
+
hour: '2-digit',
|
|
116
|
+
minute: '2-digit',
|
|
117
|
+
},
|
|
118
|
+
} }) })) }));
|
|
99
119
|
});
|
|
100
120
|
EndDate.displayName = 'TimeSlot.EndDate';
|
|
101
121
|
/**
|
|
@@ -168,7 +188,7 @@ export const Select = React.forwardRef((props, ref) => {
|
|
|
168
188
|
disabled: !bookable,
|
|
169
189
|
isSelected,
|
|
170
190
|
bookable,
|
|
171
|
-
}, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
|
|
191
|
+
}, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: children || label }) }));
|
|
172
192
|
} }));
|
|
173
193
|
});
|
|
174
194
|
Select.displayName = 'TimeSlot.Actions.Select';
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { ListVariant } from '@wix/headless-components/react';
|
|
7
7
|
import { AsChildChildren } from '@wix/headless-utils/react';
|
|
8
|
-
import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
|
|
9
8
|
import type { TimeSlotListServiceConfig } from '../../services/time-slot-list/time-slot-list.def.js';
|
|
10
9
|
export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlotEndDateProps, DurationProps as TimeSlotDurationProps, SelectProps as TimeSlotSelectProps, LocationNameProps as TimeSlotLocationNameProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, ClearStaffSelectionProps as TimeSlotClearStaffSelectionProps, } from './TimeSlot.js';
|
|
11
10
|
/**
|
|
@@ -120,32 +119,11 @@ export interface TimeSlotsProps {
|
|
|
120
119
|
* ```
|
|
121
120
|
*/
|
|
122
121
|
export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
|
|
123
|
-
/**
|
|
124
|
-
* Data provided to TimeSlotRepeater function children
|
|
125
|
-
*/
|
|
126
|
-
export interface TimeSlotRepeaterChildProps {
|
|
127
|
-
/** Whether the slot is currently selected */
|
|
128
|
-
isSelected: boolean;
|
|
129
|
-
/** Whether the slot can be booked */
|
|
130
|
-
bookable: boolean;
|
|
131
|
-
/** Start date/time as Date (constructed from the raw localStartDate string) */
|
|
132
|
-
startDate: Date;
|
|
133
|
-
/** End date/time as Date (constructed from the raw localEndDate string) */
|
|
134
|
-
endDate: Date;
|
|
135
|
-
/** Duration in minutes */
|
|
136
|
-
durationInMinutes: number;
|
|
137
|
-
/** The raw time slot data */
|
|
138
|
-
timeSlot: TimeSlotType;
|
|
139
|
-
}
|
|
140
|
-
/**
|
|
141
|
-
* Children type for TimeSlotRepeater - can be ReactNode or function
|
|
142
|
-
*/
|
|
143
|
-
type TimeSlotRepeaterChildren = React.ReactNode | ((props: TimeSlotRepeaterChildProps) => React.ReactNode);
|
|
144
122
|
/**
|
|
145
123
|
* Props for TimeSlotList.TimeSlotRepeater component
|
|
146
124
|
*/
|
|
147
125
|
export interface TimeSlotRepeaterProps {
|
|
148
|
-
children:
|
|
126
|
+
children: React.ReactNode;
|
|
149
127
|
}
|
|
150
128
|
export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;
|
|
151
129
|
/**
|
|
@@ -193,36 +171,12 @@ export interface DateRangeInputProps {
|
|
|
193
171
|
startDate: Date;
|
|
194
172
|
endDate: Date;
|
|
195
173
|
onChange: (start: Date, end: Date) => void;
|
|
174
|
+
/** IANA timezone string for the time slots (e.g., "America/New_York") */
|
|
175
|
+
timezone: string | undefined;
|
|
196
176
|
}>;
|
|
197
177
|
/** CSS classes to apply to the container */
|
|
198
178
|
className?: string;
|
|
199
179
|
}
|
|
200
|
-
/**
|
|
201
|
-
* Date range input for setting the start and end date filter.
|
|
202
|
-
* Uses the core DateRange component to access service data.
|
|
203
|
-
* Both dates are set together and trigger a single fetch.
|
|
204
|
-
*
|
|
205
|
-
* Default rendering provides two native date inputs.
|
|
206
|
-
*
|
|
207
|
-
* @component
|
|
208
|
-
* @example
|
|
209
|
-
* ```tsx
|
|
210
|
-
* // Default usage - renders two date inputs
|
|
211
|
-
* <TimeSlotList.DateRange.Input className="flex gap-2" />
|
|
212
|
-
*
|
|
213
|
-
* // With asChild for custom rendering
|
|
214
|
-
* <TimeSlotList.DateRange.Input asChild>
|
|
215
|
-
* {({ startDate, endDate, onChange }) => (
|
|
216
|
-
* <MyDateRangePicker
|
|
217
|
-
* start={startDate}
|
|
218
|
-
* end={endDate}
|
|
219
|
-
* onRangeChange={(start, end) => onChange(start, end)}
|
|
220
|
-
* />
|
|
221
|
-
* )}
|
|
222
|
-
* </TimeSlotList.DateRange.Input>
|
|
223
|
-
* ```
|
|
224
|
-
*/
|
|
225
|
-
export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
|
|
226
180
|
/**
|
|
227
181
|
* DateRange namespace for TimeSlotList date range filter
|
|
228
182
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* TimeSlotList - High-level component for displaying time slot list information
|
|
4
4
|
* Provides components for displaying timezone and time slot data
|
|
@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { GenericList } from '@wix/headless-components/react';
|
|
8
8
|
import { AsChildSlot } from '@wix/headless-utils/react';
|
|
9
|
+
import { startOfDay, endOfDay, parse, format } from 'date-fns';
|
|
9
10
|
import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
|
|
10
11
|
import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
|
|
11
12
|
import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
|
|
@@ -14,9 +15,19 @@ import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, A
|
|
|
14
15
|
// ============================================================================
|
|
15
16
|
/**
|
|
16
17
|
* Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
|
|
18
|
+
* Uses the specified timezone or falls back to local timezone
|
|
17
19
|
*/
|
|
18
|
-
function toISODateString(date) {
|
|
19
|
-
|
|
20
|
+
function toISODateString(date, timezone) {
|
|
21
|
+
if (timezone) {
|
|
22
|
+
const formatter = new Intl.DateTimeFormat('en-CA', {
|
|
23
|
+
timeZone: timezone,
|
|
24
|
+
year: 'numeric',
|
|
25
|
+
month: '2-digit',
|
|
26
|
+
day: '2-digit',
|
|
27
|
+
});
|
|
28
|
+
return formatter.format(date);
|
|
29
|
+
}
|
|
30
|
+
return format(date, 'yyyy-MM-dd');
|
|
20
31
|
}
|
|
21
32
|
/**
|
|
22
33
|
* TimeSlot with required id field for GenericList
|
|
@@ -117,34 +128,22 @@ export const TimeSlots = React.forwardRef((props, ref) => {
|
|
|
117
128
|
TimeSlots.displayName = 'TimeSlotList.TimeSlots';
|
|
118
129
|
/**
|
|
119
130
|
* Internal component that wraps each time slot item with context provider.
|
|
120
|
-
* Supports both ReactNode and function children patterns.
|
|
121
131
|
*/
|
|
122
132
|
const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
|
|
123
|
-
return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children:
|
|
133
|
+
return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: children })) }) }));
|
|
124
134
|
};
|
|
125
135
|
/**
|
|
126
|
-
* Repeater component that renders each time slot.
|
|
136
|
+
* Repeater component that renders TimeSlot.Root for each time slot.
|
|
127
137
|
* Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
|
|
128
|
-
* Automatically provides TimeSlot context to children.
|
|
129
138
|
*
|
|
130
139
|
* @component
|
|
131
140
|
* @example
|
|
132
141
|
* ```tsx
|
|
133
|
-
* // Standard usage with nested components
|
|
134
142
|
* <TimeSlotList.TimeSlotRepeater>
|
|
135
143
|
* <TimeSlot.StartDate />
|
|
136
144
|
* <TimeSlot.Duration />
|
|
137
145
|
* <TimeSlot.Actions.Select />
|
|
138
146
|
* </TimeSlotList.TimeSlotRepeater>
|
|
139
|
-
*
|
|
140
|
-
* // Function children pattern - all data available directly
|
|
141
|
-
* <TimeSlotList.TimeSlotRepeater>
|
|
142
|
-
* {({ isSelected, bookable, startDate }) => (
|
|
143
|
-
* <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
|
|
144
|
-
* {formatTime(startDate)}
|
|
145
|
-
* </button>
|
|
146
|
-
* )}
|
|
147
|
-
* </TimeSlotList.TimeSlotRepeater>
|
|
148
147
|
* ```
|
|
149
148
|
*/
|
|
150
149
|
const generateSlotKey = (timeSlot) => {
|
|
@@ -152,7 +151,7 @@ const generateSlotKey = (timeSlot) => {
|
|
|
152
151
|
};
|
|
153
152
|
export const TimeSlotRepeater = React.forwardRef((props, ref) => {
|
|
154
153
|
const { children } = props;
|
|
155
|
-
return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children:
|
|
154
|
+
return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, generateSlotKey(timeSlot))), children: children }));
|
|
156
155
|
});
|
|
157
156
|
TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
|
|
158
157
|
/**
|
|
@@ -203,14 +202,18 @@ export const Actions = {
|
|
|
203
202
|
* </TimeSlotList.DateRange.Input>
|
|
204
203
|
* ```
|
|
205
204
|
*/
|
|
206
|
-
|
|
205
|
+
const DateRangeInput = React.forwardRef((props, ref) => {
|
|
207
206
|
const { asChild, children, className, ...otherProps } = props;
|
|
208
|
-
return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => {
|
|
209
|
-
const defaultContent = (
|
|
207
|
+
return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange, timezone }) => {
|
|
208
|
+
const defaultContent = (_jsx("input", { ref: ref, type: "date", className: className, "data-testid": TestIds.timeSlotListDateRangeInput, value: toISODateString(startDate, timezone), required: true, onChange: (e) => {
|
|
209
|
+
const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
|
|
210
|
+
setDateRange(startOfDay(date), endOfDay(date));
|
|
211
|
+
} }));
|
|
210
212
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
|
|
211
213
|
startDate,
|
|
212
214
|
endDate,
|
|
213
215
|
onChange: setDateRange,
|
|
216
|
+
timezone,
|
|
214
217
|
}, ...otherProps, children: defaultContent }));
|
|
215
218
|
} }));
|
|
216
219
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/headless-bookings",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.88",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"groupId": "com.wixpress.headless-components"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
|
-
"falconPackageHash": "
|
|
75
|
+
"falconPackageHash": "812d699830f343f6c162ed64b79333910ca8641451f43f1090ae9c17"
|
|
76
76
|
}
|