@wix/headless-bookings 0.0.7 → 0.0.8

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

@@ -0,0 +1,5 @@
+/**
+ * API Layer
+ * Exports all Wix Bookings API functions
+ */
+export { getServiceById, getServiceBySlug } from './query-service/index.js';

package/cjs/dist/api/index.js

@@ -0,0 +1,5 @@
+/**
+ * API Layer
+ * Exports all Wix Bookings API functions
+ */
+export { getServiceById, getServiceBySlug } from './query-service/index.js';

package/cjs/dist/api/query-service/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Query Service API
+ * Fetches a single service by ID or slug from Wix Bookings
+ */
+import { services } from '@wix/bookings';
+/**
+ * Fetches a service by its ID
+ * @param id - The service ID
+ * @returns Object containing the service or null if not found
+ */
+export declare const getServiceById: (id: string) => Promise<{
+    service: services.Service;
+} | {
+    service: null;
+}>;
+/**
+ * Fetches a service by its slug
+ * @param slug - The service slug
+ * @returns Object containing the service or null if not found
+ */
+export declare const getServiceBySlug: (slug: string) => Promise<{
+    service: services.Service | null;
+}>;

package/cjs/dist/api/query-service/index.js

@@ -0,0 +1,41 @@
+/**
+ * Query Service API
+ * Fetches a single service by ID or slug from Wix Bookings
+ */
+import { services } from '@wix/bookings';
+/**
+ * Fetches a service by its ID
+ * @param id - The service ID
+ * @returns Object containing the service or null if not found
+ */
+export const getServiceById = async (id) => {
+    try {
+        const service = await services.getService(id);
+        return { service };
+    }
+    catch (error) {
+        console.error(`Failed to load service for id "${id}":`, error);
+        return { service: null };
+    }
+};
+/**
+ * Fetches a service by its slug
+ * @param slug - The service slug
+ * @returns Object containing the service or null if not found
+ */
+export const getServiceBySlug = async (slug) => {
+    try {
+        // Query services where mainSlug.name equals the provided slug
+        const result = await services
+            .queryServices()
+            .eq('mainSlug.name', slug)
+            .limit(1)
+            .find();
+        const service = result.items?.[0] || null;
+        return { service };
+    }
+    catch (error) {
+        console.error(`Failed to load service for slug "${slug}":`, error);
+        return { service: null };
+    }
+};

package/cjs/dist/react/booking/Booking.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Booking - High-level component for managing bookings
+ * Provides root component for booking context
+ */
+import React from 'react';
+import type { BookingServiceConfig } from '../../services/booking/booking.js';
+/**
+ * Props for Booking.Root component
+ */
+export interface BookingRootProps {
+    children: React.ReactNode;
+    bookingServiceConfig: BookingServiceConfig;
+}
+/**
+ * Root component that provides booking context to the entire app.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Booking } from '@wix/bookings/components';
+ *
+ * function App() {
+ *   return (
+ *     <Booking.Root bookingServiceConfig={config}>
+ *       {children}
+ *     </Booking.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: {
+    (props: BookingRootProps): React.ReactNode;
+    displayName: string;
+};

package/cjs/dist/react/booking/Booking.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CoreBooking from '../core/booking/Booking.js';
+/**
+ * Root component that provides booking context to the entire app.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Booking } from '@wix/bookings/components';
+ *
+ * function App() {
+ *   return (
+ *     <Booking.Root bookingServiceConfig={config}>
+ *       {children}
+ *     </Booking.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = (props) => {
+    const { children, bookingServiceConfig } = props;
+    return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
+};
+Root.displayName = 'Booking.Root';

package/cjs/dist/react/core/booking/Booking.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Core Booking Components
+ * Provides low-level access to BookingService via render props and service setup
+ */
+import React from 'react';
+import { type BookingServiceConfig } from '../../../services/booking/booking.js';
+import type { services, availabilityTimeSlots } from '@wix/bookings';
+/**
+ * Props for Booking.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    bookingServiceConfig: BookingServiceConfig;
+}
+/**
+ * Root component that provides booking context to the entire app.
+ *
+ * **IMPORTANT**: This should wrap the entire application at BaseLayout level,
+ * not individual pages. This ensures selections persist across navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // In BaseLayout.astro
+ * <Booking.Root bookingServiceConfig={config}>
+ *   {children}
+ * </Booking.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Data render prop component
+ */
+export interface DataProps {
+    children: (data: {
+        selectedServices: services.Service[];
+        selectedTimeSlot: availabilityTimeSlots.TimeSlot | null;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to booking data via render props.
+ * Used internally by higher-level Booking components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Data>
+ *   {({ selectedServices }) => (
+ *     selectedServices.length > 0 ? (
+ *       <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *     ) : (
+ *       <div>No services selected</div>
+ *     )
+ *   )}
+ * </Booking.Data>
+ * ```
+ */
+export declare function Data(props: DataProps): React.ReactNode;

package/cjs/dist/react/core/booking/Booking.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { BookingServiceDefinition, BookingService, } from '../../../services/booking/booking.js';
+/**
+ * Root component that provides booking context to the entire app.
+ *
+ * **IMPORTANT**: This should wrap the entire application at BaseLayout level,
+ * not individual pages. This ensures selections persist across navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // In BaseLayout.astro
+ * <Booking.Root bookingServiceConfig={config}>
+ *   {children}
+ * </Booking.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, props.bookingServiceConfig), children: props.children }));
+}
+/**
+ * Core component that provides access to booking data via render props.
+ * Used internally by higher-level Booking components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Data>
+ *   {({ selectedServices }) => (
+ *     selectedServices.length > 0 ? (
+ *       <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *     ) : (
+ *       <div>No services selected</div>
+ *     )
+ *   )}
+ * </Booking.Data>
+ * ```
+ */
+export function Data(props) {
+    const { children } = props;
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedServices = bookingService.selectedServices.get();
+    const selectedTimeSlot = bookingService.selectedTimeSlot.get();
+    return children({
+        selectedServices,
+        selectedTimeSlot,
+    });
+}

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

@@ -0,0 +1,106 @@
+/**
+ * Core Service Components
+ * Provides low-level access to ServiceService via render props
+ */
+import React from 'react';
+import { type ServiceServiceConfig } from '../../../services/service/service.js';
+import type { services } from '@wix/bookings';
+/**
+ * Props for Service.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    serviceServiceConfig: ServiceServiceConfig;
+}
+/**
+ * Root component that provides service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Root serviceServiceConfig={{ service }}>
+ *   {children}
+ * </Service.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Service render prop component
+ */
+export interface ServiceProps {
+    children: (data: {
+        service: services.Service;
+        isLoading: boolean;
+        error: string | null;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to full service data via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Service>
+ *   {({ service, isLoading, error }) => (
+ *     isLoading ? <div>Loading...</div> : <div>{service.name}</div>
+ *   )}
+ * </Service.Service>
+ * ```
+ */
+export declare function Service(props: ServiceProps): React.ReactNode;
+/**
+ * Props for Info render prop component
+ */
+export interface InfoProps {
+    children: (data: {
+        name: string;
+        description: string;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service catalog info via render props.
+ * Includes name and description for static catalog display.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Info>
+ *   {({ name, description }) => (
+ *     <div>
+ *       <h1>{name}</h1>
+ *       <p>{description}</p>
+ *     </div>
+ *   )}
+ * </Service.Info>
+ * ```
+ */
+export declare function Info(props: InfoProps): React.ReactNode;
+/**
+ * Props for Actions render prop component
+ */
+export interface ActionsProps {
+    children: (actions: {
+        select: () => void;
+        add: () => void;
+        remove: () => void;
+        service: services.Service;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides booking selection actions via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Actions>
+ *   {({ select, add, remove, service }) => (
+ *     <div>
+ *       <button onClick={select}>Select</button>
+ *       <button onClick={add}>Add</button>
+ *       <button onClick={remove}>Remove</button>
+ *     </div>
+ *   )}
+ * </Service.Actions>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ServiceServiceDefinition, ServiceService, } from '../../../services/service/service.js';
+/**
+ * Root component that provides service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Root serviceServiceConfig={{ service }}>
+ *   {children}
+ * </Service.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceServiceDefinition, ServiceService, props.serviceServiceConfig), children: props.children }));
+}
+/**
+ * Core component that provides access to full service data via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Service>
+ *   {({ service, isLoading, error }) => (
+ *     isLoading ? <div>Loading...</div> : <div>{service.name}</div>
+ *   )}
+ * </Service.Service>
+ * ```
+ */
+export function Service(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    const isLoading = serviceService.isLoading.get();
+    const error = serviceService.error.get();
+    return props.children({ service, isLoading, error });
+}
+/**
+ * Core component that provides access to service catalog info via render props.
+ * Includes name and description for static catalog display.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Info>
+ *   {({ name, description }) => (
+ *     <div>
+ *       <h1>{name}</h1>
+ *       <p>{description}</p>
+ *     </div>
+ *   )}
+ * </Service.Info>
+ * ```
+ */
+export function Info(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    return props.children({
+        name: service.name || '',
+        description: service.description || '',
+    });
+}
+/**
+ * Core component that provides booking selection actions via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Actions>
+ *   {({ select, add, remove, service }) => (
+ *     <div>
+ *       <button onClick={select}>Select</button>
+ *       <button onClick={add}>Add</button>
+ *       <button onClick={remove}>Remove</button>
+ *     </div>
+ *   )}
+ * </Service.Actions>
+ * ```
+ */
+export function Actions(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    return props.children({
+        select: serviceService.select,
+        add: serviceService.add,
+        remove: serviceService.remove,
+        service,
+    });
+}

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

@@ -1,4 +1,2 @@
-export * as ServiceList from './ServiceList.js';
-export * as Service from './core/Service.js';
-export * as ServicesSort from './ServiceListSort.js';
-export * from './test-ids.js';
+export * as Booking from './booking/Booking.js';
+export * as Service from './service/Service.js';

package/cjs/dist/react/index.js

@@ -1,5 +1,2 @@
-// Components
-export * as ServiceList from './ServiceList.js';
-export * as Service from './core/Service.js';
-export * as ServicesSort from './ServiceListSort.js';
-export * from './test-ids.js';
+export * as Booking from './booking/Booking.js';
+export * as Service from './service/Service.js';

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

@@ -0,0 +1,208 @@
+/**
+ * Service - High-level component for displaying service information
+ * Provides components for displaying service details and booking actions
+ */
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import type { services } from '@wix/bookings';
+/**
+ * Props for Service.Root component
+ */
+export interface ServiceRootProps {
+    children: React.ReactNode;
+    service: services.Service;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * Root component that provides service context to the entire app.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Service } from '@wix/bookings/components';
+ *
+ * function ServicePage({ service }) {
+ *   return (
+ *     <Service.Root service={service}>
+ *       <Service.Name />
+ *       <Service.Description />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Name component
+ */
+export interface NameProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service name with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Name className="text-4xl font-bold" />
+ *
+ * // asChild with primitive
+ * <Service.Name asChild>
+ *   <h1 className="text-4xl font-bold" />
+ * </Service.Name>
+ *
+ * // asChild with custom component
+ * <Service.Name asChild>
+ *   {React.forwardRef(({name, ...props}, ref) => (
+ *     <h1 ref={ref} {...props} className="text-4xl font-bold">
+ *       {name}
+ *     </h1>
+ *   ))}
+ * </Service.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Description component
+ */
+export interface DescriptionProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service description with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Description className="text-gray-600" />
+ *
+ * // asChild with primitive
+ * <Service.Description asChild>
+ *   <p className="text-gray-600" />
+ * </Service.Description>
+ * ```
+ */
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Actions namespace with individual action components
+ */
+export declare namespace Actions {
+    /**
+     * Props for Select action component
+     */
+    interface SelectProps {
+        asChild?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        label?: string;
+        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
+    }
+    /**
+     * Select action component - replaces selection with only this service.
+     *
+     * @component
+     * @example
+     * ```tsx
+     * // Default button
+     * <Service.Actions.Select label="Select This Service" />
+     *
+     * // With asChild using custom Button component
+     * <Service.Actions.Select asChild>
+     *   <Button variant="primary">Select Service</Button>
+     * </Service.Actions.Select>
+     *
+     * // With onClicked callback for navigation
+     * <Service.Actions.Select
+     *   asChild
+     *   onClicked={(event, service) => {
+     *     router.push(`/booking/time-slots/${service._id}`);
+     *   }}
+     * >
+     *   <Button variant="primary">Select Service</Button>
+     * </Service.Actions.Select>
+     * ```
+     */
+    const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Props for Add action component
+     */
+    interface AddProps {
+        asChild?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        label?: string;
+        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
+    }
+    /**
+     * Add action component - adds service to selection array.
+     *
+     * @component
+     * @example
+     * ```tsx
+     * // Default button
+     * <Service.Actions.Add label="Add to Selection" />
+     *
+     * // With asChild using custom Button component
+     * <Service.Actions.Add asChild>
+     *   <Button variant="secondary">Add Service</Button>
+     * </Service.Actions.Add>
+     *
+     * // With onClicked callback for tracking
+     * <Service.Actions.Add
+     *   label="Add to Cart"
+     *   onClicked={(event, service) => {
+     *     analytics.track('service_added', { serviceId: service._id });
+     *   }}
+     * />
+     * ```
+     */
+    const Add: React.ForwardRefExoticComponent<AddProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Props for Remove action component
+     */
+    interface RemoveProps {
+        asChild?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        label?: string;
+        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
+    }
+    /**
+     * Remove action component - removes service from selection array.
+     *
+     * @component
+     * @example
+     * ```tsx
+     * // Default button
+     * <Service.Actions.Remove label="Remove from Selection" />
+     *
+     * // With asChild using custom Button component
+     * <Service.Actions.Remove asChild>
+     *   <Button variant="destructive">Remove Service</Button>
+     * </Service.Actions.Remove>
+     *
+     * // With onClicked callback for notifications
+     * <Service.Actions.Remove
+     *   asChild
+     *   onClicked={(event, service) => {
+     *     toast.success(`${service.name} removed from selection`);
+     *   }}
+     * >
+     *   <IconButton icon="trash" />
+     * </Service.Actions.Remove>
+     * ```
+     */
+    const Remove: React.ForwardRefExoticComponent<RemoveProps & React.RefAttributes<HTMLButtonElement>>;
+}