@wix/headless-bookings 0.0.28 → 0.0.30

package/cjs/dist/react/service/Service.js

@@ -7,10 +7,9 @@ import React from 'react';
 import * as CoreService from '../core/service/Service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money, GenericList } from '@wix/headless-components/react';
-import { WixMediaImage } from '@wix/headless-media/react';
-import { MediaGallery } from '@wix/headless-media/react';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as Location from '../location/Location.js';
+import * as ServiceMediaModule from './ServiceMedia.js';
 var TestIds;
 (function (TestIds) {
     TestIds["serviceRoot"] = "service-root";
@@ -27,10 +26,6 @@ var TestIds;
     TestIds["locationRoot"] = "location-root";
     TestIds["serviceStaffMembers"] = "service-staff-members";
     TestIds["serviceStaffMemberRepeater"] = "service-staff-member-repeater";
-    TestIds["serviceMedia"] = "service-media";
-    TestIds["serviceMainMedia"] = "service-main-media";
-    TestIds["serviceCoverMedia"] = "service-cover-media";
-    TestIds["serviceMediaItems"] = "service-media-items";
     TestIds["serviceSchedule"] = "service-schedule";
     TestIds["serviceDefaultCapacity"] = "service-default-capacity";
     TestIds["serviceRaw"] = "service-raw";
@@ -538,148 +533,6 @@ export const StaffMemberRepeater = React.forwardRef((props, ref) => {
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, asChild: asChild, children: children }));
 });
 StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
-/**
- * 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 const MainMedia = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ mainMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMainMedia, customElement: children, customElementProps: { media: mainMedia }, children: mainMedia?.image ? _jsx(WixMediaImage, { media: mainMedia }) : null })) }));
-});
-MainMedia.displayName = 'Service.MainMedia';
-/**
- * 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 const CoverMedia = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceCoverMedia, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
-});
-CoverMedia.displayName = 'Service.CoverMedia';
-/**
- * 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 const MediaItems = React.forwardRef((props, ref) => {
-    const { children, infinite, autoPlay } = props;
-    return (_jsx(CoreService.Info, { children: ({ mediaItems }) => {
-            if (!mediaItems || mediaItems.length === 0)
-                return null;
-            const mediaGalleryServiceConfig = {
-                media: mediaItems,
-                infinite,
-                autoPlay,
-            };
-            const attributes = {
-                'data-testid': TestIds.serviceMediaItems,
-            };
-            return (_jsx("div", { ...attributes, ref: ref, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }) }));
-        } }));
-});
-MediaItems.displayName = 'Service.MediaItems';
 /**
  * Provides direct access to service object. Should be used only in rare cases.
  *
@@ -1203,3 +1056,10 @@ export const StaffMembers = Object.assign(StaffMembersBase, {
     List: StaffMembersList,
     StaffMemberRepeater,
 });
+// Re-export media components under Service namespace
+export const MainMedia = ServiceMediaModule.Main;
+MainMedia.displayName = 'Service.MainMedia';
+export const CoverMedia = ServiceMediaModule.Cover;
+CoverMedia.displayName = 'Service.CoverMedia';
+export const MediaGallery = ServiceMediaModule.Gallery;
+MediaGallery.displayName = 'Service.MediaGallery';

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

@@ -0,0 +1,191 @@
+/**
+ * ServiceMedia - Compound component for displaying service media
+ * Provides components for displaying main media, cover media, and media galleries
+ */
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+/**
+ * Props for ServiceMedia.Main component
+ */
+export interface MainProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Main className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <ServiceMedia.Main asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </ServiceMedia.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Main 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>
+ *   ))}
+ * </ServiceMedia.Main>
+ * ```
+ */
+export declare const Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for ServiceMedia.Cover component
+ */
+export interface CoverProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    /** CSS class name */
+    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
+ * <ServiceMedia.Cover className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <ServiceMedia.Cover asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </ServiceMedia.Cover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Cover 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>
+ *   ))}
+ * </ServiceMedia.Cover>
+ * ```
+ */
+export declare const Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for ServiceMedia.Gallery component
+ */
+export interface GalleryProps {
+    /** Child components to render within the gallery (MediaGallery components) */
+    children: React.ReactNode;
+    /** Whether the gallery should loop infinitely */
+    infinite?: boolean;
+    /** Auto-play configuration for the gallery */
+    autoPlay?: {
+        /** Direction of auto-play */
+        direction?: 'forward' | 'backward';
+        /** Interval between slides in milliseconds */
+        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
+ * <ServiceMedia.Gallery>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </ServiceMedia.Gallery>
+ *
+ * // With autoPlay carousel
+ * <ServiceMedia.Gallery
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ * </ServiceMedia.Gallery>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <ServiceMedia.Gallery infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.Viewport className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
+ *       <MediaGallery.Next>Next</MediaGallery.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails>
+ *       <MediaGallery.ThumbnailRepeater>
+ *         <MediaGallery.ThumbnailItem />
+ *       </MediaGallery.ThumbnailRepeater>
+ *     </MediaGallery.Thumbnails>
+ *   </div>
+ * </ServiceMedia.Gallery>
+ * ```
+ */
+export declare const Gallery: React.FC<GalleryProps>;
+/**
+ * ServiceMedia compound component for displaying service media
+ *
+ * @example
+ * ```tsx
+ * import { Service, ServiceMedia } from '@wix/headless-bookings/react';
+ *
+ * function ServiceCard({ service }) {
+ *   return (
+ *     <Service.Root serviceServiceConfig={{ service }}>
+ *       <ServiceMedia.Main className="w-full h-48 object-cover" />
+ *       <Service.Name />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const ServiceMedia: {
+    Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
+    Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
+    Gallery: React.FC<GalleryProps>;
+};
+export default ServiceMedia;

package/cjs/dist/react/service/ServiceMedia.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ServiceMedia - Compound component for displaying service media
+ * Provides components for displaying main media, cover media, and media galleries
+ */
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { WixMediaImage } from '@wix/headless-media/react';
+import { MediaGallery } from '@wix/headless-media/react';
+import * as CoreServiceMediaMain from '../core/service/ServiceMediaMain.js';
+import * as CoreServiceMediaCover from '../core/service/ServiceMediaCover.js';
+import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["serviceMediaMain"] = "service-media-main";
+    TestIds["serviceMediaCover"] = "service-media-cover";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Main className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <ServiceMedia.Main asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </ServiceMedia.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Main 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>
+ *   ))}
+ * </ServiceMedia.Main>
+ * ```
+ */
+export const Main = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreServiceMediaMain.MainMedia, { children: ({ mainMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaMain, customElement: children, customElementProps: { media: mainMedia }, children: mainMedia?.image ? _jsx(WixMediaImage, { media: mainMedia }) : null })) }));
+});
+Main.displayName = 'ServiceMedia.Main';
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Cover className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <ServiceMedia.Cover asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </ServiceMedia.Cover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Cover 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>
+ *   ))}
+ * </ServiceMedia.Cover>
+ * ```
+ */
+export const Cover = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    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 })) }));
+});
+Cover.displayName = 'ServiceMedia.Cover';
+/**
+ * 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
+ * <ServiceMedia.Gallery>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </ServiceMedia.Gallery>
+ *
+ * // With autoPlay carousel
+ * <ServiceMedia.Gallery
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ * </ServiceMedia.Gallery>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <ServiceMedia.Gallery infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.Viewport className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
+ *       <MediaGallery.Next>Next</MediaGallery.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails>
+ *       <MediaGallery.ThumbnailRepeater>
+ *         <MediaGallery.ThumbnailItem />
+ *       </MediaGallery.ThumbnailRepeater>
+ *     </MediaGallery.Thumbnails>
+ *   </div>
+ * </ServiceMedia.Gallery>
+ * ```
+ */
+export const Gallery = (props) => {
+    const { children, infinite, autoPlay } = props;
+    return (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => {
+            const mediaGalleryServiceConfig = {
+                media: mediaItems,
+                infinite,
+                autoPlay,
+            };
+            return (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }));
+        } }));
+};
+Gallery.displayName = 'ServiceMedia.Gallery';
+/**
+ * ServiceMedia compound component for displaying service media
+ *
+ * @example
+ * ```tsx
+ * import { Service, ServiceMedia } from '@wix/headless-bookings/react';
+ *
+ * function ServiceCard({ service }) {
+ *   return (
+ *     <Service.Root serviceServiceConfig={{ service }}>
+ *       <ServiceMedia.Main className="w-full h-48 object-cover" />
+ *       <Service.Name />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export const ServiceMedia = {
+    Main,
+    Cover,
+    Gallery,
+};
+export default ServiceMedia;

package/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[];