@wix/headless-bookings 0.0.7 → 0.0.9

package/dist/react/service/Service.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Service - High-level component for displaying service information
+ * Provides components for displaying service details and booking actions
+ */
+import React from 'react';
+import * as CoreService from '../core/service/Service.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+var TestIds;
+(function (TestIds) {
+    TestIds["serviceRoot"] = "service-root";
+    TestIds["serviceName"] = "service-name";
+    TestIds["serviceDescription"] = "service-description";
+    TestIds["serviceActionSelect"] = "service-action-select";
+    TestIds["serviceActionAdd"] = "service-action-add";
+    TestIds["serviceActionRemove"] = "service-action-remove";
+})(TestIds || (TestIds = {}));
+/**
+ * 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 const Root = React.forwardRef((props, ref) => {
+    const { children, service, asChild, className, ...attrs } = props;
+    return (_jsx(CoreService.Root, { serviceServiceConfig: { service }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, customElement: children, ...attrs, children: _jsx("div", { children: children }) }) }));
+});
+Root.displayName = 'Service.Root';
+/**
+ * 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 const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+});
+Name.displayName = 'Service.Name';
+/**
+ * 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 const Description = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreService.Info, { children: ({ description }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDescription, customElement: children, customElementProps: { description }, children: _jsx("div", { children: description }) })) }));
+});
+Description.displayName = 'Service.Description';
+/**
+ * Actions namespace with individual action components
+ */
+export var Actions;
+(function (Actions) {
+    /**
+     * 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>
+     * ```
+     */
+    Actions.Select = React.forwardRef((props, ref) => {
+        const { asChild, children, className, label = 'Select Service', onClicked, } = props;
+        return (_jsx(CoreService.Actions, { children: ({ select, service }) => {
+                const handleClick = (event) => {
+                    select();
+                    onClicked?.(event, service);
+                };
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+            } }));
+    });
+    Actions.Select.displayName = 'Service.Actions.Select';
+    /**
+     * 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 });
+     *   }}
+     * />
+     * ```
+     */
+    Actions.Add = React.forwardRef((props, ref) => {
+        const { asChild, children, className, label = 'Add Service', onClicked, } = props;
+        return (_jsx(CoreService.Actions, { children: ({ add, service }) => {
+                const handleClick = (event) => {
+                    add();
+                    onClicked?.(event, service);
+                };
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+            } }));
+    });
+    Actions.Add.displayName = 'Service.Actions.Add';
+    /**
+     * 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>
+     * ```
+     */
+    Actions.Remove = React.forwardRef((props, ref) => {
+        const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
+        return (_jsx(CoreService.Actions, { children: ({ remove, service }) => {
+                const handleClick = (event) => {
+                    remove();
+                    onClicked?.(event, service);
+                };
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, customElement: children, customElementProps: { onClick: handleClick }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+            } }));
+    });
+    Actions.Remove.displayName = 'Service.Actions.Remove';
+})(Actions || (Actions = {}));

package/dist/services/booking/booking.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Booking Service - Global booking store
+ * Manages booking flow state (selected service, and future: time slot, payment option, participants)
+ * Persists across page navigation in SPA until page refresh
+ */
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { services, availabilityTimeSlots } from '@wix/bookings';
+/**
+ * Booking Service interface
+ * Note: This is NOT an "API" service - it only exposes signals for state storage
+ */
+export interface BookingService {
+    /** Signal containing the currently selected services (can be multiple) */
+    selectedServices: Signal<services.Service[]>;
+    /** Signal containing the currently selected time slot */
+    selectedTimeSlot: Signal<availabilityTimeSlots.TimeSlot | null>;
+}
+/**
+ * Service definition for Booking
+ */
+export declare const BookingServiceDefinition: string & {
+    __api: BookingService;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & BookingService;
+/**
+ * Configuration interface for BookingService
+ */
+export interface BookingServiceConfig {
+    /** Optional initial services to pre-populate (default: empty array) */
+    initialServices?: services.Service[];
+    /** Optional initial time slot to pre-populate (default: null) */
+    initialTimeSlot?: availabilityTimeSlots.TimeSlot | null;
+}
+/**
+ * Implementation of BookingService
+ *
+ * This service stores booking state in memory during the session.
+ * State persists across page navigation (SPA behavior) until page refresh.
+ *
+ * @example
+ * ```tsx
+ * // In BaseLayout.astro
+ * const bookingConfig = await loadBookingServiceConfig();
+ *
+ * // Wrap app with provider
+ * <Booking.Root bookingServiceConfig={bookingConfig}>
+ *   {children}
+ * </Booking.Root>
+ *
+ * // In any page - access booking data
+ * <Booking.Data>
+ *   {({ selectedServices }) => (
+ *     <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *   )}
+ * </Booking.Data>
+ *
+ * // Modify booking data (via action to be added later)
+ * const booking = useService(BookingServiceDefinition);
+ * booking.selectedServices.set([...currentServices, newService]);
+ * ```
+ */
+export declare const BookingService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: BookingService;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & BookingService, BookingServiceConfig>;
+/**
+ * Load configuration for BookingService
+ *
+ * This function is called during SSR to initialize the service.
+ * Currently returns null state - can be extended to load from API in future.
+ *
+ * @returns Promise resolving to BookingServiceConfig
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { loadBookingServiceConfig } from '@wix/headless-bookings/services';
+ *
+ * const bookingConfig = await loadBookingServiceConfig();
+ * ---
+ * ```
+ */
+export declare function loadBookingServiceConfig(): Promise<BookingServiceConfig>;

package/dist/services/booking/booking.js

@@ -0,0 +1,74 @@
+/**
+ * Booking Service - Global booking store
+ * Manages booking flow state (selected service, and future: time slot, payment option, participants)
+ * Persists across page navigation in SPA until page refresh
+ */
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for Booking
+ */
+export const BookingServiceDefinition = defineService('booking');
+/**
+ * Implementation of BookingService
+ *
+ * This service stores booking state in memory during the session.
+ * State persists across page navigation (SPA behavior) until page refresh.
+ *
+ * @example
+ * ```tsx
+ * // In BaseLayout.astro
+ * const bookingConfig = await loadBookingServiceConfig();
+ *
+ * // Wrap app with provider
+ * <Booking.Root bookingServiceConfig={bookingConfig}>
+ *   {children}
+ * </Booking.Root>
+ *
+ * // In any page - access booking data
+ * <Booking.Data>
+ *   {({ selectedServices }) => (
+ *     <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *   )}
+ * </Booking.Data>
+ *
+ * // Modify booking data (via action to be added later)
+ * const booking = useService(BookingServiceDefinition);
+ * booking.selectedServices.set([...currentServices, newService]);
+ * ```
+ */
+export const BookingService = implementService.withConfig()(BookingServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    // Initialize selectedServices signal with config or empty array
+    const selectedServices = signalsService.signal(config.initialServices || []);
+    // Initialize selectedTimeSlot signal with config or null
+    const selectedTimeSlot = signalsService.signal(config.initialTimeSlot || null);
+    return {
+        selectedServices,
+        selectedTimeSlot,
+    };
+});
+/**
+ * Load configuration for BookingService
+ *
+ * This function is called during SSR to initialize the service.
+ * Currently returns null state - can be extended to load from API in future.
+ *
+ * @returns Promise resolving to BookingServiceConfig
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { loadBookingServiceConfig } from '@wix/headless-bookings/services';
+ *
+ * const bookingConfig = await loadBookingServiceConfig();
+ * ---
+ * ```
+ */
+export async function loadBookingServiceConfig() {
+    // Future: Load persisted selections from API by selection ID
+    return {
+        initialServices: [],
+        initialTimeSlot: null,
+    };
+}

package/dist/services/index.d.ts

@@ -1 +1,6 @@
-export * from './services-list-service.js';
+/**
+ * Bookings Services
+ * Main export file for all service definitions and implementations
+ */
+export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, loadServiceServiceConfig, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
+export { BookingService, BookingServiceDefinition, type BookingServiceConfig, loadBookingServiceConfig, } from './booking/booking.js';

package/dist/services/index.js

@@ -1 +1,6 @@
-export * from './services-list-service.js';
+/**
+ * Bookings Services
+ * Main export file for all service definitions and implementations
+ */
+export { ServiceService, ServiceServiceDefinition, loadServiceServiceConfig, } from './service/service.js';
+export { BookingService, BookingServiceDefinition, loadBookingServiceConfig, } from './booking/booking.js';

package/dist/services/{service-service.d.ts → service/service.d.ts}

@@ -1,8 +1,11 @@
+/**
+ * Service Service - Reactive service data management
+ * Handles loading and managing a single service's data, loading state, and errors.
+ */
 import { type Signal } from '@wix/services-definitions/core-services/signals';
 import { services } from '@wix/bookings';
 /**
  * API interface for the Service service, providing reactive service data management.
- * This service handles loading and managing a single service's data, loading state, and errors.
  *
  * @interface ServiceServiceAPI
  */
@@ -15,6 +18,12 @@ export interface ServiceServiceAPI {
     error: Signal<string | null>;
     /** Function to load a service by its id */
     loadService: (id: string) => Promise<void>;
+    /** Function to select this service (replaces entire selection) */
+    select: () => void;
+    /** Function to add this service to the selection */
+    add: () => void;
+    /** Function to remove this service from the selection */
+    remove: () => void;
 }
 /**
  * Service definition for the Service service.
@@ -46,7 +55,7 @@ export interface ServiceServiceConfig {
  *
  * @example
  * ```tsx
- * import { ServiceService, ServiceServiceDefinition } from '@wix/services/services';
+ * import { ServiceService, ServiceServiceDefinition } from '@wix/bookings/services';
  * import { useService } from '@wix/services-manager-react';
  *
  * function ServiceComponent({ serviceConfig }) {
@@ -78,59 +87,35 @@ export declare const ServiceService: import("@wix/services-definitions").Service
     isServiceDefinition?: boolean;
 } & ServiceServiceAPI, ServiceServiceConfig>;
 /**
- * Success result interface for service service configuration loading.
- * Returned when a service is successfully found and loaded.
- *
- * @interface SuccessServiceServiceConfigResult
+ * Result types for service loading operations
  */
-export interface SuccessServiceServiceConfigResult {
-    /** Type "success" means that the service was found and the config is valid */
+export type SuccessServiceServiceConfigResult = {
     type: 'success';
-    /** The service config containing the loaded service data */
     config: ServiceServiceConfig;
-}
-/**
- * Not found result interface for service service configuration loading.
- * Returned when a service with the given id cannot be found.
- *
- * @interface NotFoundServiceServiceConfigResult
- */
-export interface NotFoundServiceServiceConfigResult {
-    /** Type "notFound" means that the service was not found */
+};
+export type NotFoundServiceServiceConfigResult = {
     type: 'notFound';
-}
+};
 /**
- * Loads service service configuration from the Wix Services API for SSR initialization.
- * This function is designed to be used during Server-Side Rendering (SSR) to preload
- * a specific service by id that will be used to configure the ServiceService.
+ * Load service configuration for Server-Side Rendering (SSR).
+ * This function is designed to be called during the build or server-side rendering phase
+ * to pre-fetch service data before the React components are hydrated on the client.
  *
- * @param serviceId The service id to load
- * @returns Promise that resolves to ServiceServiceConfigResult (success with config or notFound)
+ * @param slug - The slug of the service to load (e.g., "group-trainings", "yoga-class")
+ * @returns A promise that resolves to either a success result with the config or a notFound result
  *
  * @example
- * ```astro
- * ---
- * // Astro page example - pages/service/[id].astro
- * import { loadServiceServiceConfig } from '@wix/services/services';
- * import { Service } from '@wix/services/components';
- *
- * // Get service id from URL params
- * const { id } = Astro.params;
+ * ```ts
+ * // In an Astro page or API route
+ * import { loadServiceServiceConfig } from '@wix/headless-bookings/services';
  *
- * // Load service data during SSR
- * const serviceResult = await loadServiceServiceConfig(id);
+ * const serviceResult = await loadServiceServiceConfig('group-trainings');
  *
- * // Handle not found case
  * if (serviceResult.type === 'notFound') {
  *   return Astro.redirect('/404');
  * }
- * ---
  *
- * <Service.Root serviceConfig={serviceResult.config}>
- *   <Service.Name>
- *     {({ name }) => <h1>{name}</h1>}
- *   </Service.Name>
- * </Service.Root>
+ * const serviceConfig = serviceResult.config;
  * ```
  */
-export declare function loadServiceServiceConfig(serviceId: string): Promise<SuccessServiceServiceConfigResult | NotFoundServiceServiceConfigResult>;
+export declare function loadServiceServiceConfig(slug: string): Promise<SuccessServiceServiceConfigResult | NotFoundServiceServiceConfigResult>;

package/dist/services/{service-service.js → service/service.js}

@@ -1,6 +1,11 @@
+/**
+ * Service Service - Reactive service data management
+ * Handles loading and managing a single service's data, loading state, and errors.
+ */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { services } from '@wix/bookings';
+import { getServiceById, getServiceBySlug, } from '../../api/query-service/index.js';
+import { BookingServiceDefinition } from '../booking/booking.js';
 /**
  * Service definition for the Service service.
  * This defines the contract that the ServiceService must implement.
@@ -15,7 +20,7 @@ export const ServiceServiceDefinition = defineService('service');
  *
  * @example
  * ```tsx
- * import { ServiceService, ServiceServiceDefinition } from '@wix/services/services';
+ * import { ServiceService, ServiceServiceDefinition } from '@wix/bookings/services';
  * import { useService } from '@wix/services-manager-react';
  *
  * function ServiceComponent({ serviceConfig }) {
@@ -43,86 +48,82 @@ export const ServiceServiceDefinition = defineService('service');
  */
 export const ServiceService = implementService.withConfig()(ServiceServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const bookingService = getService(BookingServiceDefinition);
     const service = signalsService.signal(config.service);
     const isLoading = signalsService.signal(!!config.serviceId);
     const error = signalsService.signal(null);
     const loadService = async (id) => {
         isLoading.set(true);
-        const serviceResponse = await loadServiceById(id);
+        error.set(null);
+        const serviceResponse = await getServiceById(id);
         if (!serviceResponse.service) {
             error.set('Service not found');
+            isLoading.set(false);
         }
         else {
             service.set(serviceResponse.service);
             error.set(null);
+            isLoading.set(false);
         }
-        isLoading.set(false);
     };
-    if (config.serviceId) {
+    // Auto-load if serviceId is provided but no service data
+    if (config.serviceId && !config.service) {
         loadService(config.serviceId);
     }
+    // Action methods for booking
+    const select = () => {
+        const currentService = service.get();
+        bookingService.selectedServices.set([currentService]);
+    };
+    const add = () => {
+        const currentService = service.get();
+        const selectedServices = bookingService.selectedServices.get();
+        bookingService.selectedServices.set([
+            ...selectedServices,
+            currentService,
+        ]);
+    };
+    const remove = () => {
+        const currentService = service.get();
+        const selectedServices = bookingService.selectedServices.get();
+        const filtered = selectedServices.filter((s) => s._id !== currentService._id);
+        bookingService.selectedServices.set(filtered);
+    };
     return {
         service,
         isLoading,
         error,
         loadService,
+        select,
+        add,
+        remove,
     };
 });
 /**
- * Internal helper function to load a service by its ID from the Wix Services API.
- * Fetches comprehensive service data including description, categories, media, etc.
+ * Load service configuration for Server-Side Rendering (SSR).
+ * This function is designed to be called during the build or server-side rendering phase
+ * to pre-fetch service data before the React components are hydrated on the client.
  *
- * @private
- * @param {string} id - The service ID to load
- * @returns {Promise} Service response from the API
- */
-const loadServiceById = 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 };
-    }
-};
-/**
- * Loads service service configuration from the Wix Services API for SSR initialization.
- * This function is designed to be used during Server-Side Rendering (SSR) to preload
- * a specific service by id that will be used to configure the ServiceService.
- *
- * @param serviceId The service id to load
- * @returns Promise that resolves to ServiceServiceConfigResult (success with config or notFound)
+ * @param slug - The slug of the service to load (e.g., "group-trainings", "yoga-class")
+ * @returns A promise that resolves to either a success result with the config or a notFound result
  *
  * @example
- * ```astro
- * ---
- * // Astro page example - pages/service/[id].astro
- * import { loadServiceServiceConfig } from '@wix/services/services';
- * import { Service } from '@wix/services/components';
- *
- * // Get service id from URL params
- * const { id } = Astro.params;
+ * ```ts
+ * // In an Astro page or API route
+ * import { loadServiceServiceConfig } from '@wix/headless-bookings/services';
  *
- * // Load service data during SSR
- * const serviceResult = await loadServiceServiceConfig(id);
+ * const serviceResult = await loadServiceServiceConfig('group-trainings');
  *
- * // Handle not found case
  * if (serviceResult.type === 'notFound') {
  *   return Astro.redirect('/404');
  * }
- * ---
  *
- * <Service.Root serviceConfig={serviceResult.config}>
- *   <Service.Name>
- *     {({ name }) => <h1>{name}</h1>}
- *   </Service.Name>
- * </Service.Root>
+ * const serviceConfig = serviceResult.config;
  * ```
  */
-export async function loadServiceServiceConfig(serviceId) {
+export async function loadServiceServiceConfig(slug) {
     try {
-        const serviceResponse = await loadServiceById(serviceId);
+        const serviceResponse = await getServiceBySlug(slug);
         if (!serviceResponse.service) {
             return { type: 'notFound' };
         }
@@ -134,7 +135,7 @@ export async function loadServiceServiceConfig(serviceId) {
         };
     }
     catch (error) {
-        console.error(`Failed to load service for id "${serviceId}":`, error);
+        console.error(`Failed to load service for slug "${slug}":`, error);
         return { type: 'notFound' };
     }
 }