@wix/headless-bookings 0.0.43 → 0.0.45

package/cjs/dist/react/core/location/Location.js

@@ -1,26 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Core Location Component - Parses service location data
  * Handles business, custom, and customer location types
  * Converts location data to Address component format
+ *
+ * @module Core/Location
+ */
+import React, { createContext, useContext } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { LocationType, } from '@wix/auto_sdk_bookings_services';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+// ==========================================
+// Context
+// ==========================================
+/**
+ * Location context value - same as LocationRenderProps
+ */
+const LocationContext = createContext(null);
+/**
+ * Hook to access location context from CoreLocation.Root
+ * @throws Error if used outside of CoreLocation.Root
  */
-import { LocationType } from '@wix/auto_sdk_bookings_services';
+export function useLocationContext() {
+    const context = useContext(LocationContext);
+    if (!context) {
+        throw new Error('useLocationContext must be used within a CoreLocation.Root component');
+    }
+    return context;
+}
+// ==========================================
+// Helper Functions
+// ==========================================
+/**
+ * Type guard to check if location is a Synthetic location.
+ * Synthetic locations have a `synthetic: true` marker.
+ */
+function isSyntheticLocation(location) {
+    return 'synthetic' in location && location.synthetic === true;
+}
 /**
- * Parses location data into Address component format
+ * Parses ServiceLocation data into Address component format
  */
 function parseLocationAddress(location, locationType) {
-    // Handle customer location specially
+    // Handle customer location - return null, let consumer handle
     if (locationType === LocationType.CUSTOMER) {
-        // For customer location, return an AddressData object with Customer's Place
-        return {
-            address: {
-                addressLine: "Customer's Place",
-                formattedAddress: "Customer's Place",
-                city: '',
-                subdivision: '',
-                postalCode: '',
-                country: '',
-            },
-        };
+        return null;
     }
     // Get the common address from the appropriate location type
     const commonAddress = location.calculatedAddress ||
@@ -29,7 +53,7 @@ function parseLocationAddress(location, locationType) {
     if (!commonAddress) {
         return null;
     }
-    // Convert CommonAddress to AddressData format (compatible with Address.Root from @wix/headless-components)
+    // Convert CommonAddress to AddressData format
     return {
         address: {
             addressLine: commonAddress.streetAddress?.name ||
@@ -50,29 +74,164 @@ function parseLocationAddress(location, locationType) {
         },
     };
 }
+/**
+ * Get location type from ServiceLocation data
+ */
+function getLocationType(location) {
+    return location.type || LocationType.BUSINESS;
+}
+// ==========================================
+// Helper function for computing render props
+// ==========================================
+/**
+ * Computes LocationRenderProps from location input
+ */
+function computeLocationRenderProps(rawLocation) {
+    // Handle no location
+    if (!rawLocation) {
+        return {
+            locationType: LocationType.BUSINESS,
+            address: null,
+            name: undefined,
+            locationId: undefined,
+            isCustomerLocation: false,
+            isCustomLocation: false,
+            isSynthetic: false,
+            phone: undefined,
+            email: undefined,
+            rawLocation: null,
+        };
+    }
+    // Handle synthetic location
+    if (isSyntheticLocation(rawLocation)) {
+        const syntheticLoc = rawLocation;
+        const locationType = syntheticLoc.locationType;
+        return {
+            locationType,
+            address: null,
+            name: undefined,
+            locationId: syntheticLoc.id,
+            isCustomerLocation: locationType === LocationType.CUSTOMER,
+            isCustomLocation: locationType === LocationType.CUSTOM,
+            isSynthetic: true,
+            phone: undefined,
+            email: undefined,
+            rawLocation: syntheticLoc,
+        };
+    }
+    // Handle Service location
+    const serviceLoc = rawLocation;
+    const locationType = getLocationType(serviceLoc);
+    return {
+        locationType,
+        address: parseLocationAddress(serviceLoc, locationType),
+        name: serviceLoc.business?.name ||
+            serviceLoc.custom?.address?.addressLine ||
+            '',
+        locationId: serviceLoc.business?._id || serviceLoc.custom?._id,
+        isCustomerLocation: locationType === LocationType.CUSTOMER,
+        isCustomLocation: locationType === LocationType.CUSTOM,
+        isSynthetic: false,
+        phone: serviceLoc.business?.phone ?? undefined,
+        email: serviceLoc.business?.email ?? undefined,
+        rawLocation,
+    };
+}
 // ==========================================
-// Component
+// Root Component (Context Provider)
 // ==========================================
 /**
- * Core Location component that parses service location data
- * and provides location type and address data to children
+ * Core Location Root component that provides location context.
+ * Parses location data and makes it available to all child components via context.
  *
  * @component
  * @example
  * ```tsx
- * <CoreLocation location={serviceLocation}>
- *   {({ locationType, address }) => (
- *     <div>
- *       <span>Type: {locationType}</span>
- *       {address && <Address.Root address={address}><Address.Formatted /></Address.Root>}
- *     </div>
- *   )}
- * </CoreLocation>
+ * <CoreLocation.Root location={serviceLocation}>
+ *   <Location.Name />
+ *   <Location.Address />
+ * </CoreLocation.Root>
  * ```
  */
-export function Location(props) {
+export function Root(props) {
     const { location, children } = props;
-    const locationType = location.type;
-    const address = parseLocationAddress(location, locationType);
-    return children({ locationType, address });
+    const renderProps = computeLocationRenderProps(location);
+    return (_jsx(LocationContext.Provider, { value: renderProps, children: children }));
+}
+// ==========================================
+// Data Component (Render Props)
+// ==========================================
+/**
+ * Core Location Data component that exposes location data via render props.
+ * Must be used within a CoreLocation.Root component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocation.Root location={serviceLocation}>
+ *   <CoreLocation.Data>
+ *     {({ displayName, address }) => (
+ *       <div>
+ *         <span>{displayName}</span>
+ *         {address && <Address.Formatted address={address} />}
+ *       </div>
+ *     )}
+ *   </CoreLocation.Data>
+ * </CoreLocation.Root>
+ * ```
+ */
+export function Data(props) {
+    const context = useLocationContext();
+    return props.children(context);
+}
+/**
+ * Core component that provides location selection actions via render props.
+ * Sets the location in BookingService when select is called.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocation.Root location={serviceLocation}>
+ *   <CoreLocation.Actions>
+ *     {({ select, selected, rawLocation }) => (
+ *       <button onClick={select}>
+ *         {selected ? 'Selected' : 'Select'}
+ *       </button>
+ *     )}
+ *   </CoreLocation.Actions>
+ * </CoreLocation.Root>
+ * ```
+ */
+export function Actions(props) {
+    const { rawLocation } = useLocationContext();
+    // Try to get BookingService for setting location
+    let bookingService = null;
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        bookingService = null;
+    }
+    // Compute selected state from BookingService
+    const selected = React.useMemo(() => {
+        if (!bookingService || !rawLocation)
+            return false;
+        const currentLocation = bookingService.location.get();
+        if (!currentLocation || !rawLocation)
+            return false;
+        // Compare by _id if available
+        return currentLocation._id === rawLocation._id;
+    }, [bookingService, rawLocation]);
+    const select = () => {
+        // Set location in BookingService
+        if (bookingService && rawLocation) {
+            bookingService.actions.setLocation(rawLocation);
+        }
+    };
+    return props.children({
+        select,
+        rawLocation,
+        selected,
+    });
 }

package/cjs/dist/react/core/location-list/LocationList.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Core LocationList Component
+ * Bridge between LocationListService and headless components using render props
+ *
+ * @module Core/LocationList
+ */
+import React from 'react';
+import { type LocationListServiceConfig } from '../../../services/location-list/location-list.js';
+import type { LocationData, DisplayLocation } from '../../../services/location-list/location-list.def.js';
+/**
+ * Props for LocationList.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    locationListServiceConfig: LocationListServiceConfig;
+}
+/**
+ * Root component that provides LocationList service context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Root locationListServiceConfig={config}>
+ *   <CoreLocationList.Locations>
+ *     {({ displayLocations }) => (
+ *       // render locations
+ *     )}
+ *   </CoreLocationList.Locations>
+ * </CoreLocationList.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Render props for Locations component
+ */
+export interface LocationsRenderProps {
+    /** Raw locations array from the service */
+    locations: LocationData[];
+    /** Processed display locations for UI */
+    displayLocations: DisplayLocation[];
+    /** Whether there are any locations */
+    hasLocations: boolean;
+    /** Whether custom locations exist */
+    hasCustomLocations: boolean;
+    /** Whether customer locations exist */
+    hasCustomerLocations: boolean;
+    /** Whether locations are currently loading */
+    isLoading: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+/**
+ * Props for Locations render prop component
+ */
+export interface LocationsProps {
+    children: (data: LocationsRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to locations list via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Locations>
+ *   {({ displayLocations, hasLocations, isLoading }) => (
+ *     isLoading ? <Spinner /> : displayLocations.map(...)
+ *   )}
+ * </CoreLocationList.Locations>
+ * ```
+ */
+export declare function Locations(props: LocationsProps): React.ReactNode;
+/**
+ * Render props for Actions component
+ */
+export interface ActionsRenderProps {
+    /** Select a display location */
+    select: (displayLocation: DisplayLocation) => void;
+    /** Currently selected location (from BookingService) */
+    selectedLocation: LocationData | null;
+}
+/**
+ * Props for Actions render prop component
+ */
+export interface ActionsProps {
+    children: (actions: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides location actions via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Actions>
+ *   {({ select, selectedLocation }) => (
+ *     <button onClick={() => select(displayLoc)}>
+ *       {selectedLocation?.business?.name || 'Select'}
+ *     </button>
+ *   )}
+ * </CoreLocationList.Actions>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;

package/cjs/dist/react/core/location-list/LocationList.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { LocationListServiceDefinition, LocationListService, } from '../../../services/location-list/location-list.js';
+/**
+ * Root component that provides LocationList service context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Root locationListServiceConfig={config}>
+ *   <CoreLocationList.Locations>
+ *     {({ displayLocations }) => (
+ *       // render locations
+ *     )}
+ *   </CoreLocationList.Locations>
+ * </CoreLocationList.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(LocationListServiceDefinition, LocationListService, props.locationListServiceConfig), children: props.children }));
+}
+/**
+ * Core component that provides access to locations list via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Locations>
+ *   {({ displayLocations, hasLocations, isLoading }) => (
+ *     isLoading ? <Spinner /> : displayLocations.map(...)
+ *   )}
+ * </CoreLocationList.Locations>
+ * ```
+ */
+export function Locations(props) {
+    const service = useService(LocationListServiceDefinition);
+    const locations = service.locations.get();
+    const displayLocations = service.displayLocations.get();
+    return props.children({
+        locations,
+        displayLocations,
+        hasLocations: displayLocations.length > 0,
+        hasCustomLocations: service.hasCustomLocations.get(),
+        hasCustomerLocations: service.hasCustomerLocations.get(),
+        isLoading: service.isLoading.get(),
+        error: service.error.get(),
+    });
+}
+/**
+ * Core component that provides location actions via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocationList.Actions>
+ *   {({ select, selectedLocation }) => (
+ *     <button onClick={() => select(displayLoc)}>
+ *       {selectedLocation?.business?.name || 'Select'}
+ *     </button>
+ *   )}
+ * </CoreLocationList.Actions>
+ * ```
+ */
+export function Actions(props) {
+    const service = useService(LocationListServiceDefinition);
+    return props.children({
+        select: service.actions.select,
+        selectedLocation: service.selectedLocation.get(),
+    });
+}

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

@@ -5,4 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
+export * as LocationList from './location/LocationList.js';
 export * as Payment from './payment/Payment.js';

package/cjs/dist/react/index.js

@@ -5,4 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
+export * as LocationList from './location/LocationList.js';
 export * as Payment from './payment/Payment.js';