@wix/headless-bookings 0.0.43 → 0.0.45

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

@@ -1,26 +1,30 @@
 /**
  * Location - Headless component for displaying service location information
- * Provides components for displaying location type and address
+ * Provides components for displaying location type, name, address, phone, email
+ *
+ * @module React/Location
  */
 import React from 'react';
 import * as CoreLocation from '../core/location/Location.js';
-import { AsChildChildren } from '@wix/headless-utils/react';
-import { LocationType, type Service } from '@wix/auto_sdk_bookings_services';
-/**
- * Re-export AddressData type from core for convenience
- */
-export type { AddressData } from '../core/location/Location.js';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import { LocationType } from '../../services/location-list/location-list.def.js';
+export { useLocationContext } from '../core/location/Location.js';
+export type { AddressData, ServiceLocation, SyntheticLocation, LocationInput, LocationRenderProps, } from '../core/location/Location.js';
+export type { DisplayLocation } from '../../services/location-list/location-list.def.js';
 /**
  * Props for Location.Root component
  */
-export interface LocationRootProps {
-    location: NonNullable<Service['locations']>[number];
+export interface RootProps {
+    /** Raw location data - accepts Service or Synthetic location */
+    location?: CoreLocation.LocationInput;
+    /** Use asChild pattern */
     asChild?: boolean;
-    children?: React.ReactNode | AsChildChildren<{
-        locationType: LocationType;
-        address: CoreLocation.AddressData | null;
-    }>;
+    /** Children - ReactNode or render function with all LocationRenderProps */
+    children?: React.ReactNode | AsChildChildren<CoreLocation.LocationRenderProps>;
+    /** CSS class name */
     className?: string;
+    /** Data attributes */
+    [key: `data-${string}`]: string | undefined;
 }
 /**
  * Root component that provides location context and handles location type detection
@@ -29,49 +33,215 @@ export interface LocationRootProps {
  * @component
  * @example
  * ```tsx
- * import { Location } from '@wix/bookings/components';
- *
- * // Default usage - automatically renders Address.Formatted
- * function ServiceLocations({ location }) {
- *   return (
- *     <Location.Root location={location} />
- *   );
- * }
+ * // With Service location
+ * <Location.Root location={serviceLocation}>
+ *   <Location.Name className="font-bold" />
+ *   <Location.Address />
+ *   <Location.Phone />
+ *   <Location.Email />
+ * </Location.Root>
  * ```
  *
  * @example
  * ```tsx
- * // With asChild to access location data
+ * // With asChild to access all location data
  * <Location.Root location={location} asChild>
- *   {({ locationType, address }) => (
+ *   {({ name, isCustomerLocation, phone }) => (
  *     <div>
- *       <span className="badge">{locationType}</span>
- *       {address && (
- *         <Address.Root address={address}>
- *           <Address.Formatted />
- *         </Address.Root>
- *       )}
+ *       <span>{isCustomerLocation ? "Client's Place" : name}</span>
+ *       {phone && <span>{phone}</span>}
  *     </div>
  *   )}
  * </Location.Root>
  * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Location.Name component
+ */
+export interface NameProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        name: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the location name.
+ * - BUSINESS: business.name
+ * - CUSTOM from array: addressLine (e.g., "Phone call")
+ * - CUSTOM synthetic/CUSTOMER: empty (consumer provides label)
  *
+ * @component
  * @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>
+ * <Location.Name className="font-bold" />
+ *
+ * // With asChild
+ * <Location.Name asChild>
+ *   {({ name }) => <h3>{name || "Client's Place"}</h3>}
+ * </Location.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Location.Type component
+ */
+export interface TypeProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        locationType: LocationType;
+        isCustomerLocation: boolean;
+        isCustomLocation: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the location type.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Type />
+ *
+ * // With asChild for custom rendering
+ * <Location.Type asChild>
+ *   {({ isCustomerLocation, locationType }) => (
+ *     <span className={isCustomerLocation ? 'text-primary' : ''}>
+ *       {isCustomerLocation ? 'At your place' : locationType}
+ *     </span>
+ *   )}
+ * </Location.Type>
+ * ```
+ */
+export declare const Type: React.ForwardRefExoticComponent<TypeProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Location.Address component
+ */
+export interface AddressProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        address: CoreLocation.AddressData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the location address.
+ * Returns null for CUSTOMER locations (consumer provides label).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Address />
+ *
+ * // With asChild
+ * <Location.Address asChild>
+ *   {({ address }) => (
+ *     address ? (
+ *       <Address.Root address={address}>
+ *         <Address.Formatted />
+ *       </Address.Root>
  *     ) : (
- *       address && (
- *         <Address.Root address={address}>
- *           <Address.Formatted />
- *         </Address.Root>
- *       )
+ *       <span>Client's Place</span>
  *     )
  *   )}
- * </Location.Root>
+ * </Location.Address>
+ * ```
+ */
+export declare const LocationAddress: React.ForwardRefExoticComponent<AddressProps & React.RefAttributes<HTMLElement>>;
+export { LocationAddress as Address };
+/**
+ * Props for Location.Phone component
+ */
+export interface PhoneProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        phone: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the location phone number.
+ * Only renders for BUSINESS locations (phone only exists on BusinessLocationOptions).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Phone />
+ *
+ * // With asChild
+ * <Location.Phone asChild>
+ *   {({ phone }) => phone && <a href={`tel:${phone}`}>{phone}</a>}
+ * </Location.Phone>
+ * ```
+ */
+export declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Location.Email component
+ */
+export interface EmailProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        email: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the location email address.
+ * Only renders for BUSINESS locations (email only exists on BusinessLocationOptions).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Email />
+ *
+ * // With asChild
+ * <Location.Email asChild>
+ *   {({ email }) => email && <a href={`mailto:${email}`}>{email}</a>}
+ * </Location.Email>
+ * ```
+ */
+export declare const Email: React.ForwardRefExoticComponent<EmailProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Location.Raw component
+ */
+export interface RawProps {
+    children: (props: CoreLocation.LocationRenderProps) => React.ReactNode;
+}
+/**
+ * Exposes all raw location data via render prop.
+ * Use only when you need full access to location data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Raw>
+ *   {({ rawLocation, locationType, phone, email }) => (
+ *     <pre>{JSON.stringify(rawLocation, null, 2)}</pre>
+ *   )}
+ * </Location.Raw>
  * ```
  */
-export declare const Root: React.ForwardRefExoticComponent<LocationRootProps & React.RefAttributes<HTMLElement>>;
+export declare const Raw: React.FC<RawProps>;
+/**
+ * Props for Location.Actions.Select component
+ */
+export interface SelectProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        onClick: () => void;
+        selected: boolean;
+        location: CoreLocation.LocationInput | null;
+    }>;
+    /** Callback fired after location is selected - receives the location */
+    onClicked?: (location: CoreLocation.LocationInput) => void;
+    /** Label for the button */
+    label?: string;
+    className?: string;
+}
+/**
+ * Actions namespace for location-related actions
+ */
+export declare const Actions: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -1,21 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Location - Headless component for displaying service location information
- * Provides components for displaying location type and address
+ * Provides components for displaying location type, name, address, phone, email
+ *
+ * @module React/Location
  */
 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';
+// Re-export useLocationContext from core
+export { useLocationContext } from '../core/location/Location.js';
 // ==========================================
 // TestIds Enum
 // ==========================================
 var TestIds;
 (function (TestIds) {
     TestIds["locationRoot"] = "location-root";
+    TestIds["locationName"] = "location-name";
+    TestIds["locationType"] = "location-type";
+    TestIds["locationAddress"] = "location-address";
+    TestIds["locationPhone"] = "location-phone";
+    TestIds["locationEmail"] = "location-email";
+    TestIds["locationRaw"] = "location-raw";
+    TestIds["locationActionSelect"] = "location-action-select";
 })(TestIds || (TestIds = {}));
 // ==========================================
-// Components
+// Type Definitions
+// ==========================================
+// Use the core's context hook
+const useLocationContext = CoreLocation.useLocationContext;
+// ==========================================
+// Root Component
 // ==========================================
 /**
  * Root component that provides location context and handles location type detection
@@ -24,66 +40,223 @@ var TestIds;
  * @component
  * @example
  * ```tsx
- * import { Location } from '@wix/bookings/components';
- *
- * // Default usage - automatically renders Address.Formatted
- * function ServiceLocations({ location }) {
- *   return (
- *     <Location.Root location={location} />
- *   );
- * }
+ * // With Service location
+ * <Location.Root location={serviceLocation}>
+ *   <Location.Name className="font-bold" />
+ *   <Location.Address />
+ *   <Location.Phone />
+ *   <Location.Email />
+ * </Location.Root>
  * ```
  *
  * @example
  * ```tsx
- * // With asChild to access location data
+ * // With asChild to access all location data
  * <Location.Root location={location} asChild>
- *   {({ locationType, address }) => (
+ *   {({ name, isCustomerLocation, phone }) => (
  *     <div>
- *       <span className="badge">{locationType}</span>
- *       {address && (
- *         <Address.Root address={address}>
- *           <Address.Formatted />
- *         </Address.Root>
- *       )}
+ *       <span>{isCustomerLocation ? "Client's Place" : name}</span>
+ *       {phone && <span>{phone}</span>}
  *     </div>
  *   )}
  * </Location.Root>
  * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { location, asChild, children, className, ...attrs } = props;
+    // Extract data-* attributes
+    const dataAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('data-')));
+    return (_jsx(CoreLocation.Root, { location: location, children: _jsx(CoreLocation.Data, { children: (renderProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationRoot, "data-location-type": renderProps.locationType, customElement: children, customElementProps: renderProps, ...dataAttrs, children: children })) }) }));
+});
+Root.displayName = 'Location.Root';
+/**
+ * Displays the location name.
+ * - BUSINESS: business.name
+ * - CUSTOM from array: addressLine (e.g., "Phone call")
+ * - CUSTOM synthetic/CUSTOMER: empty (consumer provides label)
  *
+ * @component
  * @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>
+ * <Location.Name className="font-bold" />
+ *
+ * // With asChild
+ * <Location.Name asChild>
+ *   {({ name }) => <h3>{name || "Client's Place"}</h3>}
+ * </Location.Name>
+ * ```
+ */
+export const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { name } = useLocationContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, ...attrs, children: _jsx("span", { children: name }) }));
+});
+Name.displayName = 'Location.Name';
+/**
+ * Displays the location type.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Type />
+ *
+ * // With asChild for custom rendering
+ * <Location.Type asChild>
+ *   {({ isCustomerLocation, locationType }) => (
+ *     <span className={isCustomerLocation ? 'text-primary' : ''}>
+ *       {isCustomerLocation ? 'At your place' : locationType}
+ *     </span>
+ *   )}
+ * </Location.Type>
+ * ```
+ */
+export const Type = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { locationType, isCustomerLocation, isCustomLocation } = useLocationContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationType, customElement: children, customElementProps: {
+            locationType,
+            isCustomerLocation,
+            isCustomLocation,
+        }, ...attrs, children: _jsx("span", { children: locationType }) }));
+});
+Type.displayName = 'Location.Type';
+/**
+ * Displays the location address.
+ * Returns null for CUSTOMER locations (consumer provides label).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Address />
+ *
+ * // With asChild
+ * <Location.Address asChild>
+ *   {({ address }) => (
+ *     address ? (
+ *       <Address.Root address={address}>
+ *         <Address.Formatted />
+ *       </Address.Root>
  *     ) : (
- *       address && (
- *         <Address.Root address={address}>
- *           <Address.Formatted />
- *         </Address.Root>
- *       )
+ *       <span>Client's Place</span>
  *     )
  *   )}
- * </Location.Root>
+ * </Location.Address>
  * ```
  */
-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] }));
+export const LocationAddress = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { address } = useLocationContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationAddress, customElement: children, customElementProps: { address }, ...attrs, children: address ? (_jsx("span", { children: _jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) }) })) : null }));
+});
+LocationAddress.displayName = 'Location.Address';
+// Export as Address (avoiding name collision with imported Address)
+export { LocationAddress as Address };
+/**
+ * Displays the location phone number.
+ * Only renders for BUSINESS locations (phone only exists on BusinessLocationOptions).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Phone />
+ *
+ * // With asChild
+ * <Location.Phone asChild>
+ *   {({ phone }) => phone && <a href={`tel:${phone}`}>{phone}</a>}
+ * </Location.Phone>
+ * ```
+ */
+export const Phone = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { phone } = useLocationContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationPhone, customElement: children, customElementProps: { phone }, ...attrs, children: phone ? _jsx("span", { children: phone }) : null }));
+});
+Phone.displayName = 'Location.Phone';
+/**
+ * Displays the location email address.
+ * Only renders for BUSINESS locations (email only exists on BusinessLocationOptions).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Email />
+ *
+ * // With asChild
+ * <Location.Email asChild>
+ *   {({ email }) => email && <a href={`mailto:${email}`}>{email}</a>}
+ * </Location.Email>
+ * ```
+ */
+export const Email = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { email } = useLocationContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationEmail, customElement: children, customElementProps: { email }, ...attrs, children: email ? _jsx("span", { children: email }) : null }));
+});
+Email.displayName = 'Location.Email';
+/**
+ * Exposes all raw location data via render prop.
+ * Use only when you need full access to location data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Raw>
+ *   {({ rawLocation, locationType, phone, email }) => (
+ *     <pre>{JSON.stringify(rawLocation, null, 2)}</pre>
+ *   )}
+ * </Location.Raw>
+ * ```
+ */
+export const Raw = (props) => {
+    const context = useLocationContext();
+    return _jsx(_Fragment, { children: props.children(context) });
+};
+Raw.displayName = 'Location.Raw';
+/**
+ * Selection action component for choosing a location.
+ * Sets the location in BookingService when clicked (like Service.Actions.Select).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Location.Actions.Select label="Choose Location" />
+ *
+ * // With onClicked callback for navigation
+ * <Location.Actions.Select
+ *   label="Select"
+ *   onClicked={(location) => navigate('/time-slots')}
+ * />
+ *
+ * // With asChild
+ * <Location.Actions.Select asChild>
+ *   {({ onClick, selected }) => (
+ *     <Button onClick={onClick} variant={selected ? 'primary' : 'outline'}>
+ *       {selected ? 'Selected' : 'Select'}
+ *     </Button>
+ *   )}
+ * </Location.Actions.Select>
+ * ```
+ */
+const Select = React.forwardRef((props, ref) => {
+    const { asChild, children, onClicked, label = 'Select', className, ...attrs } = props;
+    return (_jsx(CoreLocation.Actions, { children: ({ select, selected, rawLocation }) => {
+            const handleClick = () => {
+                select();
+                if (onClicked && rawLocation) {
+                    onClicked(rawLocation);
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationActionSelect, "data-selected": selected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    selected,
+                    location: rawLocation,
+                }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
         } }));
 });
-Root.displayName = 'Location.Root';
+Select.displayName = 'Location.Actions.Select';
+/**
+ * Actions namespace for location-related actions
+ */
+export const Actions = {
+    Select,
+};