@wix/headless-bookings 0.0.10 → 0.0.12

package/dist/react/core/service-list/ServiceList.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Core ServiceList Components
+ * Provides low-level access to ServiceListService via render props
+ */
+import React from 'react';
+import { type ServiceListServiceConfig, type QueryOptions } from '../../../services/service-list/service-list.js';
+import type { services } from '@wix/bookings';
+import type { PagingMetadata } from '../../../api/query-services/index.js';
+/**
+ * Props for ServiceList.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    serviceListConfig: ServiceListServiceConfig;
+}
+/**
+ * Root component that provides ServiceList service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Root serviceListConfig={{ services: myServices }}>
+ *   {children}
+ * </ServiceList.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Services render prop component
+ */
+export interface ServicesProps {
+    /** Render function that receives services list and metadata */
+    children: (props: ServicesRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Services component
+ */
+export interface ServicesRenderProps {
+    /** Array of services */
+    services: services.Service[];
+    /** Whether services are currently loading */
+    isLoading: boolean;
+    /** Error message, or null if no error */
+    error: string | null;
+    /** Current query options (appId, filters, sort) */
+    queryOptions: QueryOptions;
+    /** Pagination metadata (limit, offset, count, hasNext) */
+    pagingMetadata: PagingMetadata;
+}
+/**
+ * Component that provides services list data through render props.
+ * Exposes services, loading state, error, query options, and pagination metadata (including hasNext flag).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services>
+ *   {({ services, isLoading, error, pagingMetadata }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return (
+ *       <div>
+ *         {services.map(service => (
+ *           <div key={service._id}>{service.name}</div>
+ *         ))}
+ *         {pagingMetadata.hasNext && (
+ *           <button>Load More Services</button>
+ *         )}
+ *       </div>
+ *     );
+ *   }}
+ * </ServiceList.Services>
+ * ```
+ */
+export declare function Services(props: ServicesProps): React.ReactNode;

package/dist/react/core/service-list/ServiceList.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ServiceListServiceDefinition, ServiceListService, } from '../../../services/service-list/service-list.js';
+/**
+ * Root component that provides ServiceList service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Root serviceListConfig={{ services: myServices }}>
+ *   {children}
+ * </ServiceList.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceListServiceDefinition, ServiceListService, props.serviceListConfig), children: props.children }));
+}
+/**
+ * Component that provides services list data through render props.
+ * Exposes services, loading state, error, query options, and pagination metadata (including hasNext flag).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services>
+ *   {({ services, isLoading, error, pagingMetadata }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return (
+ *       <div>
+ *         {services.map(service => (
+ *           <div key={service._id}>{service.name}</div>
+ *         ))}
+ *         {pagingMetadata.hasNext && (
+ *           <button>Load More Services</button>
+ *         )}
+ *       </div>
+ *     );
+ *   }}
+ * </ServiceList.Services>
+ * ```
+ */
+export function Services(props) {
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const services = serviceListService.servicesSignal.get();
+    const isLoading = serviceListService.isLoadingSignal.get();
+    const error = serviceListService.errorSignal.get();
+    const queryOptions = serviceListService.queryOptionsSignal.get();
+    const pagingMetadata = serviceListService.pagingMetadataSignal.get();
+    return props.children({
+        services,
+        isLoading,
+        error,
+        queryOptions,
+        pagingMetadata,
+    });
+}

package/dist/react/index.d.ts

@@ -1,2 +1,4 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as ServiceList from './service-list/ServiceList.js';
+export * as Location from './location/Location.js';

package/dist/react/index.js

@@ -1,2 +1,4 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as ServiceList from './service-list/ServiceList.js';
+export * as Location from './location/Location.js';

package/dist/react/location/Location.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Location - Headless component for displaying service location information
+ * Provides components for displaying location type and address
+ */
+import React from 'react';
+import * as CoreLocation from '../core/location/Location.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import type { services } from '@wix/bookings';
+/**
+ * Re-export AddressData type from core for convenience
+ */
+export type { AddressData } from '../core/location/Location.js';
+/**
+ * Props for Location.Root component
+ */
+export interface LocationRootProps {
+    location: NonNullable<services.Service['locations']>[number];
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        locationType: services.LocationType;
+        address: CoreLocation.AddressData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Root component that provides location context and handles location type detection
+ * and address parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Location } from '@wix/bookings/components';
+ *
+ * // Default usage - automatically renders Address.Formatted
+ * function ServiceLocations({ location }) {
+ *   return (
+ *     <Location.Root location={location} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access location data
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span className="badge">{locationType}</span>
+ *       {address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )}
+ *     </div>
+ *   )}
+ * </Location.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional rendering based on location type
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     locationType === 'customer' ? (
+ *       <span className="text-primary">At your location</span>
+ *     ) : (
+ *       address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )
+ *     )
+ *   )}
+ * </Location.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<LocationRootProps & React.RefAttributes<HTMLElement>>;

package/dist/react/location/Location.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Location - Headless component for displaying service location information
+ * Provides components for displaying location type and address
+ */
+import React from 'react';
+import * as CoreLocation from '../core/location/Location.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Address } from '@wix/headless-components/react';
+// ==========================================
+// TestIds Enum
+// ==========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["locationRoot"] = "location-root";
+})(TestIds || (TestIds = {}));
+// ==========================================
+// Components
+// ==========================================
+/**
+ * Root component that provides location context and handles location type detection
+ * and address parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Location } from '@wix/bookings/components';
+ *
+ * // Default usage - automatically renders Address.Formatted
+ * function ServiceLocations({ location }) {
+ *   return (
+ *     <Location.Root location={location} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access location data
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span className="badge">{locationType}</span>
+ *       {address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )}
+ *     </div>
+ *   )}
+ * </Location.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional rendering based on location type
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     locationType === 'customer' ? (
+ *       <span className="text-primary">At your location</span>
+ *     ) : (
+ *       address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )
+ *     )
+ *   )}
+ * </Location.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { location, asChild, children, className, ...attrs } = props;
+    return (_jsx(CoreLocation.Location, { location: location, children: ({ locationType, address }) => {
+            // If asChild is used with custom children, always pass location data to children
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationRoot, "data-location-type": locationType, customElement: children, customElementProps: { locationType, address }, ...attrs, children: address ? (_jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) })) : null }));
+            }
+            // Default rendering: return null if no address data
+            if (!address) {
+                return null;
+            }
+            // Default rendering with Address.Formatted and optional children
+            return (_jsxs("span", { ref: ref, "data-testid": TestIds.locationRoot, "data-location-type": locationType, className: className, ...attrs, children: [_jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) }), typeof children !== 'function'
+                        ? children
+                        : null] }));
+        } }));
+});
+Root.displayName = 'Location.Root';