@wix/headless-bookings 0.0.28 → 0.0.30

package/cjs/dist/__mocks__/booking.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Shared mock data for booking service tests
+ */
+import type { Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { FormValues } from '@wix/form-public';
+import type { ServiceSelection, ServiceSelectionTimeSlot, Location, BookingServiceConfig } from '../services/booking/booking.js';
+/**
+ * Mock time slot data
+ */
+export declare const mockTimeSlot: ServiceSelectionTimeSlot;
+/**
+ * Mock time slot for afternoon
+ */
+export declare const mockTimeSlotAfternoon: ServiceSelectionTimeSlot;
+/**
+ * Mock resource (staff member)
+ */
+export declare const mockResource: Resource;
+/**
+ * Mock resource (another staff member)
+ */
+export declare const mockResourceTwo: Resource;
+/**
+ * Mock resource (room)
+ */
+export declare const mockResourceRoom: Resource;
+/**
+ * Mock service selection with all data
+ */
+export declare const mockServiceSelection: ServiceSelection;
+/**
+ * Mock service selection without time slot (incomplete)
+ */
+export declare const mockServiceSelectionWithoutTimeSlot: ServiceSelection;
+/**
+ * Mock service selection for class
+ */
+export declare const mockServiceSelectionClass: ServiceSelection;
+/**
+ * Mock location
+ */
+export declare const mockLocation: Location;
+/**
+ * Mock location (second)
+ */
+export declare const mockLocationTwo: Location;
+/**
+ * Mock form submission (contact info)
+ */
+export declare const mockFormSubmission: FormValues;
+/**
+ * Mock form submission (minimal)
+ */
+export declare const mockFormSubmissionMinimal: FormValues;
+/**
+ * Mock form submission with custom fields
+ */
+export declare const mockFormSubmissionWithCustomFields: FormValues;
+/**
+ * Default timezone for tests
+ */
+export declare const mockTimezone = "America/New_York";
+/**
+ * Mock booking service config (empty)
+ */
+export declare const mockEmptyBookingConfig: BookingServiceConfig;
+/**
+ * Mock booking service config with initial data
+ */
+export declare const mockBookingConfigWithData: BookingServiceConfig;
+/**
+ * Mock booking service config with multiple selections
+ */
+export declare const mockBookingConfigMultipleSelections: BookingServiceConfig;
+/**
+ * Helper to create a service selection with custom instanceId
+ */
+export declare function createMockServiceSelection(overrides?: Partial<ServiceSelection>): Omit<ServiceSelection, 'instanceId'>;
+/**
+ * Helper to create multiple service selections
+ */
+export declare function createMockServiceSelections(count: number): ServiceSelection[];

package/cjs/dist/__mocks__/booking.js

@@ -0,0 +1,163 @@
+/**
+ * Shared mock data for booking service tests
+ */
+import { mockService, mockServiceClass } from './services.js';
+/**
+ * Mock time slot data
+ */
+export const mockTimeSlot = {
+    startDate: '2024-03-15T10:00:00Z',
+    endDate: '2024-03-15T11:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 5,
+    scheduleId: 'schedule-123',
+};
+/**
+ * Mock time slot for afternoon
+ */
+export const mockTimeSlotAfternoon = {
+    startDate: '2024-03-15T14:00:00Z',
+    endDate: '2024-03-15T15:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 8,
+    scheduleId: 'schedule-456',
+};
+/**
+ * Mock resource (staff member)
+ */
+export const mockResource = {
+    _id: 'resource-1',
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    tag: 'STAFF',
+};
+/**
+ * Mock resource (another staff member)
+ */
+export const mockResourceTwo = {
+    _id: 'resource-2',
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    tag: 'STAFF',
+};
+/**
+ * Mock resource (room)
+ */
+export const mockResourceRoom = {
+    _id: 'resource-room-1',
+    name: 'Conference Room A',
+    tag: 'RESOURCE',
+};
+/**
+ * Mock service selection with all data
+ */
+export const mockServiceSelection = {
+    instanceId: 'instance-1',
+    service: mockService,
+    resources: [mockResource],
+    timeSlot: mockTimeSlot,
+    totalParticipants: 1,
+};
+/**
+ * Mock service selection without time slot (incomplete)
+ */
+export const mockServiceSelectionWithoutTimeSlot = {
+    instanceId: 'instance-2',
+    service: mockService,
+    resources: [],
+    totalParticipants: 1,
+};
+/**
+ * Mock service selection for class
+ */
+export const mockServiceSelectionClass = {
+    instanceId: 'instance-3',
+    service: mockServiceClass,
+    resources: [mockResource],
+    timeSlot: mockTimeSlotAfternoon,
+    totalParticipants: 3,
+};
+/**
+ * Mock location
+ */
+export const mockLocation = {
+    id: 'location-1',
+    name: 'Main Office',
+};
+/**
+ * Mock location (second)
+ */
+export const mockLocationTwo = {
+    id: 'location-2',
+    name: 'Downtown Branch',
+};
+/**
+ * Mock form submission (contact info)
+ */
+export const mockFormSubmission = {
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@example.com',
+    phone: '+1234567890',
+};
+/**
+ * Mock form submission (minimal)
+ */
+export const mockFormSubmissionMinimal = {
+    email: 'test@example.com',
+};
+/**
+ * Mock form submission with custom fields
+ */
+export const mockFormSubmissionWithCustomFields = {
+    firstName: 'Jane',
+    lastName: 'Smith',
+    email: 'jane.smith@example.com',
+    notes: 'Please call before the appointment',
+    customField1: 'Custom value 1',
+};
+/**
+ * Default timezone for tests
+ */
+export const mockTimezone = 'America/New_York';
+/**
+ * Mock booking service config (empty)
+ */
+export const mockEmptyBookingConfig = {};
+/**
+ * Mock booking service config with initial data
+ */
+export const mockBookingConfigWithData = {
+    serviceSelections: [mockServiceSelection],
+    location: mockLocation,
+    timezone: mockTimezone,
+    formSubmission: mockFormSubmission,
+};
+/**
+ * Mock booking service config with multiple selections
+ */
+export const mockBookingConfigMultipleSelections = {
+    serviceSelections: [mockServiceSelection, mockServiceSelectionClass],
+    location: mockLocation,
+    timezone: mockTimezone,
+    formSubmission: mockFormSubmission,
+};
+/**
+ * Helper to create a service selection with custom instanceId
+ */
+export function createMockServiceSelection(overrides = {}) {
+    const { instanceId: _, ...base } = mockServiceSelection;
+    return {
+        ...base,
+        ...overrides,
+    };
+}
+/**
+ * Helper to create multiple service selections
+ */
+export function createMockServiceSelections(count) {
+    return Array.from({ length: count }, (_, i) => ({
+        ...mockServiceSelection,
+        instanceId: `instance-${i + 1}`,
+    }));
+}

package/cjs/dist/react/core/service/ServiceMediaCover.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Core ServiceMediaCover Component
+ * Provides low-level access to service cover media via render props
+ */
+import React from 'react';
+/**
+ * Render props for CoverMedia component
+ */
+export interface CoverMediaRenderProps {
+    /** Cover media object containing the image string */
+    coverMedia: {
+        image?: string;
+    };
+    /** Whether the service has a cover media image */
+    hasCoverMedia: boolean;
+}
+/**
+ * Props for CoverMedia component
+ */
+export interface CoverMediaProps {
+    /** Render prop function that receives cover media data */
+    children: (props: CoverMediaRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service cover media via render props.
+ * The cover media is typically used as a hero/banner image.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaCover.CoverMedia>
+ *   {({ coverMedia, hasCoverMedia }) => (
+ *     hasCoverMedia ? (
+ *       <img src={coverMedia.image} alt="Service Cover" />
+ *     ) : (
+ *       <div>No cover image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaCover.CoverMedia>
+ * ```
+ */
+export declare function CoverMedia(props: CoverMediaProps): React.ReactNode;

package/cjs/dist/react/core/service/ServiceMediaCover.js

@@ -0,0 +1,34 @@
+/**
+ * Core ServiceMediaCover Component
+ * Provides low-level access to service cover media via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service cover media via render props.
+ * The cover media is typically used as a hero/banner image.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaCover.CoverMedia>
+ *   {({ coverMedia, hasCoverMedia }) => (
+ *     hasCoverMedia ? (
+ *       <img src={coverMedia.image} alt="Service Cover" />
+ *     ) : (
+ *       <div>No cover image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaCover.CoverMedia>
+ * ```
+ */
+export function CoverMedia(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const coverMedia = {
+        image: service.media?.coverMedia?.image,
+    };
+    const hasCoverMedia = !!coverMedia.image;
+    return props.children({ coverMedia, hasCoverMedia });
+}

package/cjs/dist/react/core/service/ServiceMediaGallery.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Core ServiceMediaGallery Component
+ * Provides low-level access to service media gallery items via render props
+ */
+import React from 'react';
+/**
+ * Media item type for gallery items
+ */
+export interface MediaItem {
+    image?: string;
+}
+/**
+ * Render props for MediaGallery component
+ */
+export interface MediaGalleryRenderProps {
+    /** Array of media items in the gallery */
+    mediaItems: MediaItem[];
+    /** Whether the service has any media items */
+    hasMediaItems: boolean;
+}
+/**
+ * Props for MediaGallery component
+ */
+export interface MediaGalleryProps {
+    /** Render prop function that receives media gallery data */
+    children: (props: MediaGalleryRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service media gallery items via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaGallery.MediaGallery>
+ *   {({ mediaItems, hasMediaItems }) => (
+ *     hasMediaItems ? (
+ *       <div>
+ *         {mediaItems.map((item, index) => (
+ *           <img key={index} src={item.image} alt={`Gallery item ${index}`} />
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No gallery items available</div>
+ *     )
+ *   )}
+ * </ServiceMediaGallery.MediaGallery>
+ * ```
+ */
+export declare function MediaGallery(props: MediaGalleryProps): React.ReactNode;

package/cjs/dist/react/core/service/ServiceMediaGallery.js

@@ -0,0 +1,37 @@
+/**
+ * Core ServiceMediaGallery Component
+ * Provides low-level access to service media gallery items via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service media gallery items via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaGallery.MediaGallery>
+ *   {({ mediaItems, hasMediaItems }) => (
+ *     hasMediaItems ? (
+ *       <div>
+ *         {mediaItems.map((item, index) => (
+ *           <img key={index} src={item.image} alt={`Gallery item ${index}`} />
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No gallery items available</div>
+ *     )
+ *   )}
+ * </ServiceMediaGallery.MediaGallery>
+ * ```
+ */
+export function MediaGallery(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const mediaItems = service.media?.items?.map((item) => ({
+        image: item.image,
+    })) || [];
+    const hasMediaItems = mediaItems.length > 0;
+    return props.children({ mediaItems, hasMediaItems });
+}

package/cjs/dist/react/core/service/ServiceMediaMain.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Core ServiceMediaMain Component
+ * Provides low-level access to service main media via render props
+ */
+import React from 'react';
+/**
+ * Render props for MainMedia component
+ */
+export interface MainMediaRenderProps {
+    /** Main media object containing the image string */
+    mainMedia: {
+        image?: string;
+    };
+    /** Whether the service has a main media image */
+    hasMainMedia: boolean;
+}
+/**
+ * Props for MainMedia component
+ */
+export interface MainMediaProps {
+    /** Render prop function that receives main media data */
+    children: (props: MainMediaRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service main media via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaMain.MainMedia>
+ *   {({ mainMedia, hasMainMedia }) => (
+ *     hasMainMedia ? (
+ *       <img src={mainMedia.image} alt="Service" />
+ *     ) : (
+ *       <div>No image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaMain.MainMedia>
+ * ```
+ */
+export declare function MainMedia(props: MainMediaProps): React.ReactNode;

package/cjs/dist/react/core/service/ServiceMediaMain.js

@@ -0,0 +1,33 @@
+/**
+ * Core ServiceMediaMain Component
+ * Provides low-level access to service main media via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service main media via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaMain.MainMedia>
+ *   {({ mainMedia, hasMainMedia }) => (
+ *     hasMainMedia ? (
+ *       <img src={mainMedia.image} alt="Service" />
+ *     ) : (
+ *       <div>No image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaMain.MainMedia>
+ * ```
+ */
+export function MainMedia(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const mainMedia = {
+        image: service.media?.mainMedia?.image,
+    };
+    const hasMainMedia = !!mainMedia.image;
+    return props.children({ mainMedia, hasMainMedia });
+}

package/cjs/dist/react/index.d.ts

@@ -1,6 +1,7 @@
 export * as Booking from './booking/Booking.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
+export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';

package/cjs/dist/react/index.js

@@ -1,6 +1,7 @@
 export * as Booking from './booking/Booking.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
+export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';

package/cjs/dist/react/service/Service.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
 import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
+import * as ServiceMediaModule from './ServiceMedia.js';
 /**
  * Props for Service.Root component
  */
@@ -558,159 +559,6 @@ export interface StaffMemberRepeaterProps {
  * ```
  */
 export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Props for Service MainMedia component
- */
-export interface MainMediaProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        media: {
-            image?: string;
-        };
-    }>;
-    className?: string;
-}
-/**
- * Displays the service main media image using WixMediaImage.
- *
- * @component
- * @example
- * ```tsx
- * // Default usage
- * <Service.MainMedia className="w-full h-64 object-cover rounded-lg" />
- * ```
- *
- * @example
- * ```tsx
- * // asChild with primitive img element
- * <Service.MainMedia asChild>
- *   <img className="w-full h-64 object-cover shadow-lg" />
- * </Service.MainMedia>
- * ```
- *
- * @example
- * ```tsx
- * // asChild with custom component accessing media data
- * <Service.MainMedia asChild>
- *   {React.forwardRef(({media, ...props}, ref) => (
- *     <div ref={ref} {...props} className="relative aspect-video">
- *       <WixMediaImage media={media} className="w-full h-full object-cover" />
- *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
- *         <Service.Name className="text-primary-foreground" />
- *       </div>
- *     </div>
- *   ))}
- * </Service.MainMedia>
- * ```
- */
-export declare const MainMedia: React.ForwardRefExoticComponent<MainMediaProps & React.RefAttributes<HTMLImageElement>>;
-/**
- * Props for Service CoverMedia component
- */
-export interface CoverMediaProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        media: {
-            image?: string;
-        };
-    }>;
-    className?: string;
-}
-/**
- * Displays the service cover media image using WixMediaImage.
- * The cover media is typically used as a hero/banner image.
- *
- * @component
- * @example
- * ```tsx
- * // Default usage
- * <Service.CoverMedia className="w-full h-96 object-cover" />
- * ```
- *
- * @example
- * ```tsx
- * // asChild as a background image container
- * <Service.CoverMedia asChild>
- *   <div className="w-full h-96 bg-cover bg-center" />
- * </Service.CoverMedia>
- * ```
- *
- * @example
- * ```tsx
- * // asChild with custom component accessing media data
- * <Service.CoverMedia asChild>
- *   {React.forwardRef(({media, ...props}, ref) => (
- *     <header ref={ref} {...props} className="relative h-96">
- *       <WixMediaImage media={media} className="w-full h-full object-cover" />
- *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
- *         <h1 className="text-4xl font-bold text-primary-foreground">
- *           <Service.Name />
- *         </h1>
- *       </div>
- *     </header>
- *   ))}
- * </Service.CoverMedia>
- * ```
- */
-export declare const CoverMedia: React.ForwardRefExoticComponent<CoverMediaProps & React.RefAttributes<HTMLImageElement>>;
-/**
- * Props for Service MediaItems component
- */
-export interface MediaItemsProps {
-    children: React.ReactNode;
-    infinite?: boolean;
-    autoPlay?: {
-        direction?: 'forward' | 'backward';
-        intervalMs?: number;
-    };
-}
-/**
- * Container for service media items gallery.
- * Renders a MediaGallery.Root with the service media items.
- * Supports autoPlay and infinite scroll options for carousel behavior.
- *
- * @component
- * @example
- * ```tsx
- * // Basic usage with MediaGallery components
- * <Service.MediaItems>
- *   <MediaGallery.Thumbnails>
- *     <MediaGallery.ThumbnailRepeater>
- *       {({ mediaItem, isActive }) => (
- *         <img
- *           src={mediaItem.url}
- *           alt={mediaItem.altText}
- *           className={isActive ? 'active' : ''}
- *         />
- *       )}
- *     </MediaGallery.ThumbnailRepeater>
- *   </MediaGallery.Thumbnails>
- * </Service.MediaItems>
- *
- * // With autoPlay carousel
- * <Service.MediaItems
- *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
- *   infinite
- * >
- *   <MediaGallery.MainImage />
- *   <MediaGallery.Actions.Previous />
- *   <MediaGallery.Actions.Next />
- * </Service.MediaItems>
- *
- * // Full gallery with thumbnails and navigation
- * <Service.MediaItems infinite>
- *   <div className="gallery-container">
- *     <MediaGallery.MainImage className="main-image" />
- *     <div className="controls">
- *       <MediaGallery.Actions.Previous>Prev</MediaGallery.Actions.Previous>
- *       <MediaGallery.Actions.Next>Next</MediaGallery.Actions.Next>
- *     </div>
- *     <MediaGallery.Thumbnails className="thumbnails" />
- *   </div>
- * </Service.MediaItems>
- * ```
- */
-export declare const MediaItems: React.ForwardRefExoticComponent<MediaItemsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Props for Service Raw component
  */
@@ -1210,4 +1058,9 @@ export declare const StaffMembers: typeof StaffMembersBase & {
     List: typeof StaffMembersList;
     StaffMemberRepeater: typeof StaffMemberRepeater;
 };
-export {};
+export declare const MainMedia: React.ForwardRefExoticComponent<ServiceMediaModule.MainProps & React.RefAttributes<HTMLImageElement>>;
+export declare const CoverMedia: React.ForwardRefExoticComponent<ServiceMediaModule.CoverProps & React.RefAttributes<HTMLImageElement>>;
+export declare const MediaGallery: React.FC<ServiceMediaModule.GalleryProps>;
+export type { MainProps as MainMediaProps } from './ServiceMedia.js';
+export type { CoverProps as CoverMediaProps } from './ServiceMedia.js';
+export type { GalleryProps as MediaGalleryProps } from './ServiceMedia.js';