@wix/headless-bookings 0.0.1 → 0.0.2

package/cjs/dist/react/core/ServiceList.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ServicesListService, ServicesListServiceDefinition, } from '../../services/services-list-service.js';
+/**
+ * Root component that provides ServiceList service context to its children.
+ * This component sets up the necessary services for managing services list state,
+ * including filtering, sorting, and pagination functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList, Service } from '@wix/headless-services/react';
+ *
+ * function ServiceListPage() {
+ *   return (
+ *     <ServiceList.Root
+ *       servicesListConfig={{
+ *         services: myServices,
+ *         searchOptions: {
+ *           cursorPaging: { limit: 10 },
+ *           sort: [{ fieldName: 'name', order: 'ASC' }]
+ *         },
+ *         pagingMetadata: { count: 10, hasNext: true }
+ *       }}
+ *     >
+ *       <ServiceList.Options>
+ *         <ServiceList.ServiceRepeater>
+ *           <Service.Name>
+ *             {({ name }) => <h3>{name}</h3>}
+ *           </Service.Name>
+ *           <Service.Price>
+ *             {({ price }) => price && <div>{price.value} {price.currency}</div>}
+ *           </Service.Price>
+ *         </ServiceList.ServiceRepeater>
+ *       </ServiceList.Options>
+ *     </ServiceList.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServicesListServiceDefinition, ServicesListService, props.servicesListConfig), children: props.children }));
+}
+/**
+ * Component that renders content when the services list is empty.
+ * Only displays its children when there are no services, no loading state, and no errors.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList } from '@wix/headless-services/react';
+ *
+ * function EmptyServicesMessage() {
+ *   return (
+ *     <ServiceList.EmptyState>
+ *       {() => (
+ *         <div className="empty-state">
+ *           <h3>No services found</h3>
+ *           <p>Try adjusting your search or filter criteria</p>
+ *           <button>Clear Filters</button>
+ *         </div>
+ *       )}
+ *     </ServiceList.EmptyState>
+ *   );
+ * }
+ * ```
+ */
+export function EmptyState(props) {
+    const { isLoading, error, services: servicesList, } = useService(ServicesListServiceDefinition);
+    const isLoadingValue = isLoading.get();
+    const errorValue = error.get();
+    const servicesValue = servicesList.get();
+    if (!isLoadingValue && !errorValue && servicesValue.length === 0) {
+        return typeof props.children === 'function'
+            ? props.children({})
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content during loading state.
+ * Only displays its children when the services list is currently loading.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList } from '@wix/headless-services/react';
+ *
+ * function ServicesLoading() {
+ *   return (
+ *     <ServiceList.Loading>
+ *       {() => (
+ *         <div className="loading-spinner">
+ *           <div>Loading services...</div>
+ *           <div className="spinner"></div>
+ *         </div>
+ *       )}
+ *     </ServiceList.Loading>
+ *   );
+ * }
+ * ```
+ */
+export function Loading(props) {
+    const { isLoading } = useService(ServicesListServiceDefinition);
+    const isLoadingValue = isLoading.get();
+    if (isLoadingValue) {
+        return typeof props.children === 'function'
+            ? props.children({})
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content when there's an error loading services.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList } from '@wix/headless-services/react';
+ *
+ * function ServicesError() {
+ *   return (
+ *     <ServiceList.Error>
+ *       {({ error }) => (
+ *         <div className="error-state">
+ *           <h3>Error loading services</h3>
+ *           <p>{error}</p>
+ *           <button onClick={() => window.location.reload()}>
+ *             Try Again
+ *           </button>
+ *         </div>
+ *       )}
+ *     </ServiceList.Error>
+ *   );
+ * }
+ * ```
+ */
+export function Error(props) {
+    const { error } = useService(ServicesListServiceDefinition);
+    const errorValue = error.get();
+    if (errorValue) {
+        return typeof props.children === 'function'
+            ? props.children({ error: errorValue })
+            : props.children;
+    }
+    return null;
+}
+/**
+ * Component that renders content for each service in the list.
+ * Maps over all services and provides each service through a service context.
+ * Only renders when services are successfully loaded (not loading, no error, and has services).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList, Service } from '@wix/headless-services/react';
+ *
+ * function ServicesGrid() {
+ *   return (
+ *     <ServiceList.ItemContent>
+ *       {({ service }) => (
+ *         <div className="service-card">
+ *           <Service.Image>
+ *             {({ image, alt }) => <img src={image} alt={alt} />}
+ *           </Service.Image>
+ *           <Service.Name>
+ *             {({ name }) => <h3>{name}</h3>}
+ *           </Service.Name>
+ *           <Service.Price>
+ *             {({ price }) => price && <p>{price.value} {price.currency}</p>}
+ *           </Service.Price>
+ *           <button>Book Now</button>
+ *         </div>
+ *       )}
+ *     </ServiceList.ItemContent>
+ *   );
+ * }
+ * ```
+ */
+export function ItemContent(props) {
+    const { services: servicesList, isLoading, error, } = useService(ServicesListServiceDefinition);
+    const servicesValue = servicesList.get();
+    if (isLoading.get() || error.get() || servicesValue.length === 0) {
+        return null;
+    }
+    return servicesValue.map((service) => (_jsx(WixServices, { servicesMap: createServicesMap(), children: typeof props.children === 'function'
+            ? props.children({ service })
+            : props.children }, service._id)));
+}
+export function Items(props) {
+    const { services: servicesList } = useService(ServicesListServiceDefinition);
+    const servicesValue = servicesList.get();
+    return typeof props.children === 'function'
+        ? props.children({ services: servicesValue })
+        : props.children;
+}

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

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

package/cjs/dist/react/index.js

@@ -0,0 +1,5 @@
+// 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';

package/cjs/dist/react/test-ids.d.ts

@@ -0,0 +1,18 @@
+export declare enum TestIds {
+    servicesList = "services-list",
+    servicesOptions = "services-options",
+    serviceRepeater = "service-repeater",
+    serviceRoot = "service-root",
+    serviceName = "service-name",
+    serviceDescription = "service-description",
+    servicePrice = "service-price",
+    serviceDuration = "service-duration",
+    serviceImage = "service-image",
+    serviceCategory = "service-category",
+    serviceError = "service-error",
+    serviceLoadMore = "service-load-more",
+    serviceTotalsDisplayed = "service-totals-displayed",
+    serviceSort = "service-sort",
+    serviceFilter = "service-filter",
+    serviceFilterResetTrigger = "service-filter-reset-trigger"
+}

package/cjs/dist/react/test-ids.js

@@ -0,0 +1,24 @@
+export var TestIds;
+(function (TestIds) {
+    // Container Level
+    TestIds["servicesList"] = "services-list";
+    // List Container Level
+    TestIds["servicesOptions"] = "services-options";
+    // Repeater Level
+    TestIds["serviceRepeater"] = "service-repeater";
+    // Entity Root and Components
+    TestIds["serviceRoot"] = "service-root";
+    TestIds["serviceName"] = "service-name";
+    TestIds["serviceDescription"] = "service-description";
+    TestIds["servicePrice"] = "service-price";
+    TestIds["serviceDuration"] = "service-duration";
+    TestIds["serviceImage"] = "service-image";
+    TestIds["serviceCategory"] = "service-category";
+    // Additional Components
+    TestIds["serviceError"] = "service-error";
+    TestIds["serviceLoadMore"] = "service-load-more";
+    TestIds["serviceTotalsDisplayed"] = "service-totals-displayed";
+    TestIds["serviceSort"] = "service-sort";
+    TestIds["serviceFilter"] = "service-filter";
+    TestIds["serviceFilterResetTrigger"] = "service-filter-reset-trigger";
+})(TestIds || (TestIds = {}));

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

@@ -0,0 +1,52 @@
+import { services } from '@wix/bookings';
+export interface ServiceListConfig {
+    services: services.Service[];
+    searchOptions: {
+        cursorPaging: {
+            limit: number;
+        };
+    };
+    pagingMetadata: {
+        count: number;
+    };
+    aggregations: {
+        results: any[];
+    };
+    customizations: any[];
+}
+export interface ServiceContextValue {
+    service: services.Service;
+}
+export interface ServiceListRenderProps {
+    services: services.Service[];
+}
+export interface ServiceRenderProps {
+    service: services.Service;
+}
+export interface ErrorRenderProps {
+    error: string | null;
+}
+export interface ServiceListState {
+    services: services.Service[];
+    pagingMetadata: {
+        count: number;
+    };
+    filters: Record<string, any>;
+    error: string | null;
+}
+export interface ServiceListServiceValue {
+    services: {
+        get: () => services.Service[];
+    };
+    pagingMetadata: {
+        get: () => {
+            count: number;
+        };
+    };
+    filters: {
+        get: () => Record<string, any>;
+    };
+    error: {
+        get: () => string | null;
+    };
+}

package/cjs/dist/react/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from './services-list-service.js';

package/cjs/dist/services/index.js

@@ -0,0 +1 @@
+export * from './services-list-service.js';

package/cjs/dist/services/service-service.d.ts

@@ -0,0 +1,136 @@
+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
+ */
+export interface ServiceServiceAPI {
+    /** Reactive signal containing the current service data */
+    service: Signal<services.Service>;
+    /** Reactive signal indicating if a service is currently being loaded */
+    isLoading: Signal<boolean>;
+    /** Reactive signal containing any error message, or null if no error */
+    error: Signal<string | null>;
+    /** Function to load a service by its id */
+    loadService: (id: string) => Promise<void>;
+}
+/**
+ * Service definition for the Service service.
+ * This defines the contract that the ServiceService must implement.
+ *
+ * @constant
+ */
+export declare const ServiceServiceDefinition: string & {
+    __api: ServiceServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & ServiceServiceAPI;
+/**
+ * Configuration interface required to initialize the ServiceService.
+ * Contains the initial service data that will be loaded into the service.
+ *
+ * @interface ServiceServiceConfig
+ */
+export interface ServiceServiceConfig {
+    /** The initial service data to configure the service with */
+    service?: services.Service;
+    /** The service ID to load if no initial service is provided */
+    serviceId?: string;
+}
+/**
+ * Implementation of the Service service that manages reactive service data.
+ * This service provides signals for service data, loading state, and error handling,
+ * along with methods to dynamically load services.
+ *
+ * @example
+ * ```tsx
+ * import { ServiceService, ServiceServiceDefinition } from '@wix/services/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function ServiceComponent({ serviceConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [ServiceServiceDefinition, ServiceService.withConfig(serviceConfig)]
+ *     ])}>
+ *       <ServiceDisplay />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function ServiceDisplay() {
+ *   const serviceService = useService(ServiceServiceDefinition);
+ *   const service = serviceService.service.get();
+ *   const isLoading = serviceService.isLoading.get();
+ *   const error = serviceService.error.get();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return <h1>{service.name}</h1>;
+ * }
+ * ```
+ */
+export declare const ServiceService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: ServiceServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & ServiceServiceAPI, ServiceServiceConfig>;
+/**
+ * Success result interface for service service configuration loading.
+ * Returned when a service is successfully found and loaded.
+ *
+ * @interface SuccessServiceServiceConfigResult
+ */
+export interface SuccessServiceServiceConfigResult {
+    /** Type "success" means that the service was found and the config is valid */
+    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 */
+    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.
+ *
+ * @param serviceId The service id to load
+ * @returns Promise that resolves to ServiceServiceConfigResult (success with config or notFound)
+ *
+ * @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;
+ *
+ * // Load service data during SSR
+ * const serviceResult = await loadServiceServiceConfig(id);
+ *
+ * // 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>
+ * ```
+ */
+export declare function loadServiceServiceConfig(serviceId: string): Promise<SuccessServiceServiceConfigResult | NotFoundServiceServiceConfigResult>;

package/cjs/dist/services/service-service.js

@@ -0,0 +1,140 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { services } from '@wix/bookings';
+/**
+ * Service definition for the Service service.
+ * This defines the contract that the ServiceService must implement.
+ *
+ * @constant
+ */
+export const ServiceServiceDefinition = defineService('service');
+/**
+ * Implementation of the Service service that manages reactive service data.
+ * This service provides signals for service data, loading state, and error handling,
+ * along with methods to dynamically load services.
+ *
+ * @example
+ * ```tsx
+ * import { ServiceService, ServiceServiceDefinition } from '@wix/services/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function ServiceComponent({ serviceConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [ServiceServiceDefinition, ServiceService.withConfig(serviceConfig)]
+ *     ])}>
+ *       <ServiceDisplay />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function ServiceDisplay() {
+ *   const serviceService = useService(ServiceServiceDefinition);
+ *   const service = serviceService.service.get();
+ *   const isLoading = serviceService.isLoading.get();
+ *   const error = serviceService.error.get();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return <h1>{service.name}</h1>;
+ * }
+ * ```
+ */
+export const ServiceService = implementService.withConfig()(ServiceServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    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);
+        if (!serviceResponse.service) {
+            error.set('Service not found');
+        }
+        else {
+            service.set(serviceResponse.service);
+            error.set(null);
+        }
+        isLoading.set(false);
+    };
+    if (config.serviceId) {
+        loadService(config.serviceId);
+    }
+    return {
+        service,
+        isLoading,
+        error,
+        loadService,
+    };
+});
+/**
+ * Internal helper function to load a service by its ID from the Wix Services API.
+ * Fetches comprehensive service data including description, categories, media, etc.
+ *
+ * @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)
+ *
+ * @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;
+ *
+ * // Load service data during SSR
+ * const serviceResult = await loadServiceServiceConfig(id);
+ *
+ * // 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>
+ * ```
+ */
+export async function loadServiceServiceConfig(serviceId) {
+    try {
+        const serviceResponse = await loadServiceById(serviceId);
+        if (!serviceResponse.service) {
+            return { type: 'notFound' };
+        }
+        return {
+            type: 'success',
+            config: {
+                service: serviceResponse.service,
+            },
+        };
+    }
+    catch (error) {
+        console.error(`Failed to load service for id "${serviceId}":`, error);
+        return { type: 'notFound' };
+    }
+}