@wix/headless-bookings 0.0.1 → 0.0.2

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

package/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/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/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/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/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/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/dist/react/types.js

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

package/dist/services/index.d.ts

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

package/dist/services/index.js

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