@wix/headless-bookings 0.0.0

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ServicesListServiceConfig } from '../services/services-list-service.js';
+import { services } from '@wix/bookings';
+/**
+ * Props for the ServiceList root component following the documented API
+ */
+export interface ServiceListRootProps {
+    children: ((props: {
+        services: services.Service[];
+    }) => React.ReactNode) | React.ReactNode;
+    services?: services.Service[];
+    servicesListConfig?: ServicesListServiceConfig;
+    className?: string;
+}
+/**
+ * Root component that provides the ServiceList context for rendering service lists.
+ * This component manages the service data and provides it to child components through context.
+ */
+export declare const List: React.ForwardRefExoticComponent<ServiceListRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceOptionsProps {
+    children: ((props: {
+        services: services.Service[];
+    }) => React.ReactNode) | React.ReactNode;
+    emptyState?: React.ReactNode;
+    infiniteScroll?: boolean;
+    pageSize?: number;
+    className?: string;
+}
+export declare const Options: React.ForwardRefExoticComponent<ServiceOptionsProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceRepeaterProps {
+    children: ((props: {
+        service: services.Service;
+    }) => React.ReactNode) | React.ReactNode;
+    className?: string;
+}
+export declare const ServiceRepeater: React.ForwardRefExoticComponent<ServiceRepeaterProps & React.RefAttributes<HTMLDivElement>>;
+export interface RawProps {
+    children: ((props: {
+        totalServices: number;
+        displayedServices: number;
+        isFiltered: boolean;
+    }) => React.ReactNode) | React.ReactNode;
+}
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLDivElement>>;
+export interface ErrorProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLDivElement>>;

package/cjs/dist/react/ServiceList.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useService } from '@wix/services-manager-react';
+import { TestIds } from './test-ids.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Root as CoreServiceListRoot, Error as CoreServiceListError, } from './core/ServiceList.js';
+import { Root as CoreServiceRoot } from './core/Service.js';
+import { ServicesListServiceDefinition, } from '../services/services-list-service.js';
+/**
+ * Root component that provides the ServiceList context for rendering service lists.
+ * This component manages the service data and provides it to child components through context.
+ */
+export const List = React.forwardRef((props, ref) => {
+    const { children, services = [], servicesListConfig, className } = props;
+    const serviceConfig = servicesListConfig || {
+        services: services,
+        searchOptions: {
+            cursorPaging: { limit: 10 },
+        },
+        pagingMetadata: {
+            count: services?.length || 0,
+        },
+        aggregations: {
+            results: [],
+        },
+        customizations: [],
+    };
+    return (_jsx(CoreServiceListRoot, { servicesListConfig: serviceConfig, children: _jsx(ListContent, { children: children, className: className, ref: ref }) }));
+});
+List.displayName = 'Services.List';
+const ListContent = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const services = servicesListService.services.get();
+    const pagingMetadata = servicesListService.pagingMetadata.get();
+    const displayedServices = services.length;
+    const totalServices = pagingMetadata?.count || services.length;
+    const isFiltered = Object.keys(servicesListService.filters.get()).length > 0;
+    const attributes = {
+        'data-testid': TestIds.servicesList,
+        'data-total-services': totalServices,
+        'data-displayed-services': displayedServices,
+        'data-filtered': isFiltered,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: typeof children === 'function' ? children({ services }) : children }));
+});
+export const Options = React.forwardRef((props, ref) => {
+    const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const services = servicesListService.services.get();
+    const hasServices = services.length > 0;
+    if (!hasServices) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.servicesOptions,
+        'data-empty': !hasServices,
+        'data-infinite-scroll': infiniteScroll,
+        'data-page-size': pageSize,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: typeof children === 'function' ? children({ services }) : children }));
+});
+Options.displayName = 'Services.Options';
+export const ServiceRepeater = React.forwardRef((props, _ref) => {
+    const { children, className } = props;
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const services = servicesListService.services.get();
+    const hasServices = services.length > 0;
+    if (!hasServices)
+        return null;
+    return (_jsx(_Fragment, { children: services.map((service) => (_jsx(CoreServiceRoot, { serviceConfig: { service }, "data-testid": TestIds.serviceRepeater, "data-service-id": service._id, className: className, children: typeof children === 'function' ? children({ service }) : children }, service._id))) }));
+});
+ServiceRepeater.displayName = 'Services.ServiceRepeater';
+export const Raw = React.forwardRef((props, ref) => {
+    const { children } = props;
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const services = servicesListService.services.get();
+    const pagingMetadata = servicesListService.pagingMetadata.get();
+    const displayedServices = services.length;
+    const totalServices = pagingMetadata?.count || services.length;
+    const isFiltered = Object.keys(servicesListService.filters.get()).length > 0;
+    return (_jsx("div", { ref: ref, children: typeof children === 'function'
+            ? children({ totalServices, displayedServices, isFiltered })
+            : children }));
+});
+Raw.displayName = 'Services.Raw';
+export const Error = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreServiceListError, { children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceError, "data-error": error, customElement: children, customElementProps: {
+                    error,
+                }, content: error, ...otherProps, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+        } }));
+});
+Error.displayName = 'Services.Error';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+export interface ServiceListSortProps {
+    children: (props: {
+        currentSort: {
+            fieldName: string;
+            order: 'ASC' | 'DESC';
+        }[];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: {
+            fieldName: string;
+            order: 'ASC' | 'DESC';
+        }[]) => void;
+    }) => React.ReactNode;
+}
+export declare const ServiceListSort: (props: ServiceListSortProps) => React.ReactNode;
+export interface ServiceListSeparateSortProps {
+    children: (props: {
+        currentSort: {
+            fieldName: string;
+            order: 'ASC' | 'DESC';
+        }[];
+        sortFieldOptions: Array<{
+            fieldName: string;
+            label: string;
+        }>;
+        sortOrderOptions: Array<{
+            order: 'ASC' | 'DESC';
+            label: string;
+        }>;
+        setSort: (sort: {
+            fieldName: string;
+            order: 'ASC' | 'DESC';
+        }[]) => void;
+    }) => React.ReactNode;
+}
+export declare function ServiceListSeparateSort(props: ServiceListSeparateSortProps): React.ReactNode;

package/cjs/dist/react/ServiceListSort.js

@@ -0,0 +1,35 @@
+import { useService } from '@wix/services-manager-react';
+import { ServicesListServiceDefinition } from '../services/services-list-service.js';
+export const ServiceListSort = (props) => {
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const currentSort = servicesListService.sort.get();
+    // Define sort options
+    const sortOptions = [
+        { fieldName: 'name', order: 'ASC', label: 'Name (A-Z)' },
+        { fieldName: 'name', order: 'DESC', label: 'Name (Z-A)' },
+    ];
+    return props.children({
+        currentSort,
+        sortOptions,
+        setSort: (sort) => {
+            servicesListService.setSort(sort);
+        },
+    });
+};
+export function ServiceListSeparateSort(props) {
+    const servicesListService = useService(ServicesListServiceDefinition);
+    const currentSort = servicesListService.sort.get();
+    const sortFieldOptions = [{ fieldName: 'name', label: 'Name' }];
+    const sortOrderOptions = [
+        { order: 'ASC', label: 'Ascending' },
+        { order: 'DESC', label: 'Descending' },
+    ];
+    return props.children({
+        currentSort,
+        sortFieldOptions,
+        sortOrderOptions,
+        setSort: (sort) => {
+            servicesListService.setSort(sort);
+        },
+    });
+}

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { services } from '@wix/bookings';
+import { type ServiceServiceConfig } from '../../services/service-service.js';
+export interface RootProps {
+    children: React.ReactNode;
+    serviceConfig: ServiceServiceConfig;
+    className?: string;
+}
+export interface ServiceNameProps {
+    children: (props: ServiceNameRenderProps) => React.ReactNode;
+}
+export interface ServiceNameRenderProps {
+    name: string;
+}
+export interface ServiceDescriptionProps {
+    children: (props: ServiceDescriptionRenderProps) => React.ReactNode;
+}
+export interface ServiceDescriptionRenderProps {
+    description: string | null;
+}
+export interface ServicePriceProps {
+    children: (props: ServicePriceRenderProps) => React.ReactNode;
+}
+export interface ServicePriceRenderProps {
+    price: {
+        value: number;
+        currency: string;
+    } | null;
+}
+export interface ServiceImageRenderProps {
+    image: string | null;
+    alt: string;
+}
+export interface ServiceCategoryProps {
+    children: (props: ServiceCategoryRenderProps) => React.ReactNode;
+}
+export interface ServiceCategoryRenderProps {
+    category: {
+        name: string;
+    } | null;
+}
+export interface ServiceLoadingProps {
+    children: (props: ServiceLoadingRenderProps) => React.ReactNode;
+}
+export interface ServiceLoadingRenderProps {
+    isLoading: boolean;
+}
+export interface ServiceContentProps {
+    children: (props: ServiceContentRenderProps) => React.ReactNode;
+}
+export interface ServiceContentRenderProps {
+    service: services.Service;
+}
+declare function Content(props: ServiceContentProps): React.ReactNode;
+declare namespace Content {
+    var displayName: string;
+}
+declare function Loading(props: ServiceLoadingProps): React.ReactNode;
+declare namespace Loading {
+    var displayName: string;
+}
+export declare function Name(props: ServiceNameProps): React.ReactNode;
+export declare namespace Name {
+    var displayName: string;
+}
+export declare function Description(props: ServiceDescriptionProps): React.ReactNode;
+export declare namespace Description {
+    var displayName: string;
+}
+export declare function Price(props: ServicePriceProps): React.ReactNode;
+export declare namespace Price {
+    var displayName: string;
+}
+export declare function Image(): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Image {
+    var displayName: string;
+}
+export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+export declare const Service: {
+    Root: typeof Root;
+    Content: typeof Content;
+    Loading: typeof Loading;
+    Name: typeof Name;
+    Description: typeof Description;
+    Price: typeof Price;
+    Image: typeof Image;
+};
+export {};

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ServiceService, ServiceServiceDefinition, } from '../../services/service-service.js';
+import { WixMediaImage } from '@wix/headless-media/react';
+function Content(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    return props.children({ service });
+}
+function Loading(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const isLoading = serviceService.isLoading.get();
+    return props.children({ isLoading });
+}
+export function Name(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    if (!service)
+        return null;
+    return props.children({ name: service.name || '' });
+}
+export function Description(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    if (!service)
+        return null;
+    return props.children({ description: service.description || null });
+}
+export function Price(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    if (!service)
+        return null;
+    const price = service.payment?.fixed?.price
+        ? {
+            value: Number(service.payment.fixed.price.value),
+            currency: service.payment.fixed.price.currency || '',
+        }
+        : null;
+    return props.children({ price });
+}
+export function Image() {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.service.get();
+    if (!service || !service.media?.mainMedia?.image)
+        return null;
+    //WA until the issue with media will be solved
+    const image = service.media?.mainMedia?.image?.replace(/v1\/[\w-]+\//, 'v1/');
+    return _jsx(WixMediaImage, { media: { image }, alt: service.name || '' });
+}
+export function Root(props) {
+    const { serviceConfig, children } = props;
+    const services = createServicesMap().addService(ServiceServiceDefinition, ServiceService, serviceConfig);
+    return _jsx(WixServices, { servicesMap: services, children: children });
+}
+// Set display names for components
+Root.displayName = 'Service.Root';
+Content.displayName = 'Service.Content';
+Loading.displayName = 'Service.Loading';
+Name.displayName = 'Service.Name';
+Description.displayName = 'Service.Description';
+Price.displayName = 'Service.Price';
+Image.displayName = 'Service.Image';
+export const Service = {
+    Root,
+    Content,
+    Loading,
+    Name,
+    Description,
+    Price,
+    Image,
+};

package/cjs/dist/react/core/ServiceList.d.ts

@@ -0,0 +1,218 @@
+import { type ServicesListServiceConfig } from '../../services/services-list-service.js';
+import { services } from '@wix/bookings';
+/**
+ * Props for Root headless component
+ */
+export interface RootProps {
+    /** Child components that will have access to the ServiceList service */
+    children: React.ReactNode;
+    /** Configuration for the ServiceList service */
+    servicesListConfig: ServicesListServiceConfig;
+}
+/**
+ * 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 declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for EmptyState headless component
+ */
+export interface EmptyStateProps {
+    /** Content to display when services list is empty (can be a render function or ReactNode) */
+    children: ((props: EmptyStateRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for EmptyState component
+ */
+export interface EmptyStateRenderProps {
+}
+/**
+ * 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 declare function EmptyState(props: EmptyStateProps): React.ReactNode;
+/**
+ * Props for Loading headless component
+ */
+export interface LoadingProps {
+    /** Content to display during loading (can be a render function or ReactNode) */
+    children: ((props: LoadingRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Loading component
+ */
+export interface LoadingRenderProps {
+}
+/**
+ * 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 declare function Loading(props: LoadingProps): React.ReactNode;
+/**
+ * Props for Error headless component
+ */
+export interface ErrorProps {
+    /** Content to display during error state (can be a render function or ReactNode) */
+    children: ((props: ErrorRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Error component
+ */
+export interface ErrorRenderProps {
+    /** Error message */
+    error: string | 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 declare function Error(props: ErrorProps): React.ReactNode;
+/**
+ * Props for ItemContent headless component
+ */
+export interface ItemContentProps {
+    /** Content to display for each service (can be a render function receiving service data or ReactNode) */
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for ItemContent component
+ */
+export interface ItemContentRenderProps {
+    /** Service data */
+    service: services.Service;
+}
+/**
+ * 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 declare function ItemContent(props: ItemContentProps): React.ReactNode;
+export type ItemsProps = {
+    children: ((props: ItemsRenderProps) => React.ReactNode) | React.ReactNode;
+};
+export type ItemsRenderProps = {
+    services: services.Service[];
+};
+export declare function Items(props: ItemsProps): import("react").ReactNode;