@wix/headless-bookings 0.0.50 → 0.0.52

package/dist/react/booking/Booking.js

@@ -1,6 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Booking - High-level component for managing bookings
+ * Provides root component for booking context and booking item display components
+ */
+import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import { Book } from './Book.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as ServiceComponent from '../service/Service.js';
+import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
+import * as PaymentComponent from '../payment/Payment.js';
+import * as CoreLocation from '../core/location/Location.js';
+import { GenericList } from '@wix/headless-components/react';
+// ============================================================================
+// TestIds
+// ============================================================================
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingItemsRoot"] = "booking-items-root";
+    TestIds["bookingItems"] = "booking-items";
+    TestIds["bookingItem"] = "booking-item";
+    TestIds["bookingItemService"] = "booking-item-service";
+    TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
+    TestIds["bookingItemPayment"] = "booking-item-payment";
+    TestIds["bookingLocation"] = "booking-location";
+    TestIds["bookingStaffName"] = "booking-staff-name";
+})(TestIds || (TestIds = {}));
 /**
  * Root component that provides booking context to the entire app.
  *
@@ -24,6 +49,9 @@ export const Root = (props) => {
     return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
 };
 Root.displayName = 'Booking.Root';
+// ============================================================================
+// Actions Namespace
+// ============================================================================
 /**
  * Actions namespace containing action components for booking
  *
@@ -42,3 +70,201 @@ Root.displayName = 'Booking.Root';
 export const Actions = {
     Book,
 };
+// ============================================================================
+// BookingItem Context (re-export from core)
+// ============================================================================
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within Booking.ItemRepeater.
+ *
+ * @throws Error if used outside of ItemRepeater context
+ */
+export const useBookingItem = CoreBooking.useBookingItemContext;
+/**
+ * Container component that provides GenericList.Root context for booking items.
+ * Use Booking.Items inside for list container with emptyState support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <div className="booking-card">
+ *         <Booking.Service>
+ *           <Service.Name />
+ *         </Booking.Service>
+ *       </div>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export const ItemsRoot = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(CoreBooking.ItemsData, { children: ({ items }) => (_jsx(GenericList.Root, { ref: ref, items: items.map((item) => ({
+                ...item,
+                id: item.instanceId,
+            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItemsRoot, ...otherProps, children: children })) }));
+});
+ItemsRoot.displayName = 'Booking.ItemsRoot';
+/**
+ * List container component with emptyState support.
+ * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <Booking.Service>
+ *         <Service.Name />
+ *       </Booking.Service>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export const Items = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.bookingItems, ...otherProps, children: children }));
+});
+Items.displayName = 'Booking.Items';
+/**
+ * Internal component that wraps each booking item with context provider.
+ */
+const BookingItemWrapper = ({ item, children, }) => {
+    return (_jsx(CoreBooking.BookingItemProvider, { item: item, children: children }));
+};
+/**
+ * Repeater component that maps over booking items and provides context per item.
+ * Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
+ * Children have access to Booking.Service, Booking.TimeSlot, etc.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemRepeater>
+ *   <div className="booking-card">
+ *     <Booking.Service>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Booking.Service>
+ *     <Booking.TimeSlot>
+ *       <TimeSlot.StartDate />
+ *     </Booking.TimeSlot>
+ *     <Booking.StaffName />
+ *   </div>
+ * </Booking.ItemRepeater>
+ * ```
+ */
+export const ItemRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
+});
+ItemRepeater.displayName = 'Booking.ItemRepeater';
+/**
+ * Wraps Service.Root with the service from the current booking item context.
+ * Children can use all Service.* components (Service.Name, Service.Price, etc.).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Service>
+ *   <Service.Name className="text-xl font-bold" />
+ *   <Service.Description />
+ *   <Service.Price />
+ * </Booking.Service>
+ * ```
+ */
+export function Service(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
+}
+/**
+ * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
+ * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
+ * Always renders with data-has-time-slot attribute for CSS targeting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.TimeSlot>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </Booking.TimeSlot>
+ * ```
+ */
+export function TimeSlot(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
+}
+/**
+ * Wraps Payment.Root with all services from all booking items.
+ * Should be used outside of ItemRepeater - it calculates payment for all items.
+ * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
+ * Always renders with data-has-payment attribute for CSS targeting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Root>
+ *   <Booking.ItemsRoot>
+ *     <Booking.Items>
+ *       <Booking.ItemRepeater>
+ *         <Booking.Service><Service.Name /></Booking.Service>
+ *       </Booking.ItemRepeater>
+ *     </Booking.Items>
+ *   </Booking.ItemsRoot>
+ *
+ *   <Booking.Payment>
+ *     <Payment.Total className="text-xl font-bold" />
+ *     <Payment.Subtotal />
+ *   </Booking.Payment>
+ * </Booking.Root>
+ * ```
+ */
+export function Payment(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.PaymentData, { children: ({ slotServices }) => (_jsx(PaymentComponent.Root, { slotServices: slotServices, children: children })) }));
+}
+/**
+ * Wraps Location context with the location from the booking context.
+ * Children can use all Location.* components (Location.Name, Location.Address, etc.).
+ * Returns null if no location is set.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Location>
+ *   <Location.Name className="font-bold" />
+ *   <Location.Address />
+ *   <Location.Phone />
+ * </Booking.Location>
+ * ```
+ */
+export function Location(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(CoreLocation.Root, { location: location, children: children })) : null }));
+}
+/**
+ * Displays the first staff member's name from the current booking item.
+ * Returns null when staff name is empty.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.StaffName className="text-foreground" />
+ * ```
+ */
+export const StaffName = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
+            if (!staffName) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
+        } }));
+});
+StaffName.displayName = 'Booking.StaffName';

package/dist/react/core/booking/Booking.d.ts

@@ -5,7 +5,9 @@
 import React from 'react';
 import { type BookingServiceConfig, type ServiceSelection, type BookingServiceActions } from '../../../services/booking/booking.js';
 import type { FormValues } from '@wix/form-public';
-import type { Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlot, Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
+import type { SlotService } from '../../../services/payment/payment.js';
 /**
  * Props for Booking.Root component
  */
@@ -35,7 +37,7 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface BookingData {
     serviceSelections: ServiceSelection[];
-    location: TimeSlotLocationType | null;
+    location: ServiceLocationType | null;
     timezone: string | undefined;
     formSubmission: FormValues | null;
     actions: BookingServiceActions;
@@ -46,22 +48,148 @@ export interface BookingData {
 export interface DataProps {
     children: (data: BookingData) => React.ReactNode;
 }
+export declare function Data(props: DataProps): React.ReactNode;
+/**
+ * Unified data object for a single booking item.
+ * Contains resolved data ready for use - no raw serviceSelection duplication.
+ */
+export interface BookingItem {
+    /** SDK Service object */
+    service: Service;
+    /** Adapted SDK TimeSlot (or null if no time slot selected) */
+    timeSlot: TimeSlot | null;
+    /** Resolved staff: timeSlot.resources ?? selection.resources, or null if none */
+    staff: Resource[] | null;
+    /** Unique identifier for this booking instance */
+    instanceId: string;
+    /** Position in the serviceSelections array */
+    index: number;
+}
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within BookingItemProvider.
+ *
+ * @throws Error if used outside of BookingItemProvider context
+ */
+export declare function useBookingItemContext(): BookingItem;
+/**
+ * Props for BookingItemProvider
+ */
+export interface BookingItemProviderProps {
+    children: React.ReactNode;
+    item: BookingItem;
+}
+/**
+ * Provider component used by repeaters to provide BookingItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {items.map((item) => (
+ *   <BookingItemProvider key={item.instanceId} item={item}>
+ *     {children}
+ *   </BookingItemProvider>
+ * ))}
+ * ```
+ */
+export declare function BookingItemProvider(props: BookingItemProviderProps): React.ReactNode;
+/**
+ * Props for BookingItemInfo render prop component
+ */
+export interface BookingItemInfoProps {
+    children: (data: {
+        /** SDK Service object */
+        service: Service;
+        /** Adapted SDK TimeSlot (or null if no time slot selected) */
+        timeSlot: TimeSlot | null;
+        /** First staff member's name, empty string if none */
+        staffName: string;
+        /** Unique identifier for this booking instance */
+        instanceId: string;
+        /** Position in the serviceSelections array */
+        index: number;
+        /** The raw BookingItem object */
+        item: BookingItem;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to booking item info via render props.
+ * Must be used within BookingItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItemInfo>
+ *   {({ service, timeSlot, staffName }) => (
+ *     <div>
+ *       <span>{service.name}</span>
+ *       <span>{staffName}</span>
+ *     </div>
+ *   )}
+ * </BookingItemInfo>
+ * ```
+ */
+export declare function BookingItemInfo(props: BookingItemInfoProps): React.ReactNode;
+/**
+ * Data exposed by ItemsData render prop
+ */
+export interface ItemsDataRenderProps {
+    /** Array of BookingItem objects */
+    items: BookingItem[];
+}
 /**
- * Core component that provides access to booking data via render props.
- * Used internally by higher-level Booking components.
+ * Props for ItemsData render prop component
+ */
+export interface ItemsDataProps {
+    children: (data: ItemsDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to booking items array via render props.
+ * Transforms serviceSelections into BookingItem objects.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Data>
- *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
- *     serviceSelections.length > 0 ? (
- *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
+ * <Booking.ItemsData>
+ *   {({ items }) => (
+ *     items.length > 0 ? (
+ *       <div>{items.length} bookings</div>
  *     ) : (
- *       <div>No services selected</div>
+ *       <div>No bookings</div>
  *     )
  *   )}
- * </Booking.Data>
+ * </Booking.ItemsData>
  * ```
  */
-export declare function Data(props: DataProps): React.ReactNode;
+export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
+/**
+ * Data exposed by PaymentData render prop
+ */
+export interface PaymentDataRenderProps {
+    /** SlotServices array for Payment.Root */
+    slotServices: SlotService[];
+}
+/**
+ * Props for PaymentData render prop component
+ */
+export interface PaymentDataProps {
+    children: (data: PaymentDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides payment data via render props.
+ * Computes slotServices from serviceSelections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.PaymentData>
+ *   {({ slotServices }) => (
+ *     <Payment.Root slotServices={slotServices}>
+ *       <Payment.TotalPrice />
+ *     </Payment.Root>
+ *   )}
+ * </Booking.PaymentData>
+ * ```
+ */
+export declare function PaymentData(props: PaymentDataProps): React.ReactNode;

package/dist/react/core/booking/Booking.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core Booking Components
+ * Provides low-level access to BookingService via render props and service setup
+ */
+import React from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { BookingServiceDefinition, BookingService, } from '../../../services/booking/booking.js';
@@ -39,14 +44,53 @@ export function Root(props) {
  * </Booking.Data>
  * ```
  */
+/**
+ * Maps a TimeSlotLocationType to ServiceLocationType.
+ * TimeSlot location has flat structure: { name, formattedAddress, locationType }
+ * Service location has nested structure: { business: { name, address }, type }
+ */
+function mapTimeSlotLocationToServiceLocation(timeSlotLocation) {
+    // TimeSlot location has flat name/formattedAddress at top level
+    // Convert to nested business structure that CoreLocation expects
+    return {
+        _id: timeSlotLocation._id ?? undefined,
+        type: timeSlotLocation.locationType,
+        business: {
+            _id: timeSlotLocation._id ?? undefined,
+            name: timeSlotLocation.name ?? undefined,
+            address: timeSlotLocation.formattedAddress
+                ? {
+                    addressLine: timeSlotLocation.formattedAddress,
+                }
+                : undefined,
+        },
+    };
+}
+/**
+ * Resolves the location with fallback logic:
+ * 1. First, use the explicitly set booking location
+ * 2. If not set, fall back to the first service selection's slot location
+ */
+function resolveLocation(bookingLocation, serviceSelections) {
+    if (bookingLocation) {
+        return bookingLocation;
+    }
+    // Fallback to first slot's location
+    const firstSlotLocation = serviceSelections[0]?.timeSlot?.location;
+    if (firstSlotLocation) {
+        return mapTimeSlotLocationToServiceLocation(firstSlotLocation);
+    }
+    return null;
+}
 export function Data(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
-    const location = bookingService.location.get();
+    const bookingLocation = bookingService.location.get();
     const timezone = bookingService.timezone.get();
     const formSubmission = bookingService.formSubmission.get();
     const { actions } = bookingService;
+    const location = resolveLocation(bookingLocation, serviceSelections);
     return children({
         serviceSelections,
         location,
@@ -55,3 +99,177 @@ export function Data(props) {
         actions,
     });
 }
+/**
+ * Context for the current BookingItem
+ */
+const BookingItemContext = React.createContext(null);
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within BookingItemProvider.
+ *
+ * @throws Error if used outside of BookingItemProvider context
+ */
+export function useBookingItemContext() {
+    const context = React.useContext(BookingItemContext);
+    if (!context) {
+        throw new Error('BookingItem components must be used within BookingItemProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by repeaters to provide BookingItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {items.map((item) => (
+ *   <BookingItemProvider key={item.instanceId} item={item}>
+ *     {children}
+ *   </BookingItemProvider>
+ * ))}
+ * ```
+ */
+export function BookingItemProvider(props) {
+    const { children, item } = props;
+    return (_jsx(BookingItemContext.Provider, { value: item, children: children }));
+}
+/**
+ * Core component that provides access to booking item info via render props.
+ * Must be used within BookingItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItemInfo>
+ *   {({ service, timeSlot, staffName }) => (
+ *     <div>
+ *       <span>{service.name}</span>
+ *       <span>{staffName}</span>
+ *     </div>
+ *   )}
+ * </BookingItemInfo>
+ * ```
+ */
+export function BookingItemInfo(props) {
+    const item = useBookingItemContext();
+    const staffName = item.staff?.[0]?.name || '';
+    return props.children({
+        service: item.service,
+        timeSlot: item.timeSlot,
+        staffName,
+        instanceId: item.instanceId,
+        index: item.index,
+        item,
+    });
+}
+// ============================================================================
+// Helper: Convert ServiceSelectionTimeSlot to SDK TimeSlot
+// ============================================================================
+/**
+ * Converts a ServiceSelectionTimeSlot to SDK TimeSlot format
+ * for compatibility with TimeSlot.Root component.
+ */
+function mapSelectionTimeSlotToTimeSlot(serviceSelectionTimeSlot) {
+    if (!serviceSelectionTimeSlot) {
+        return null;
+    }
+    const availableResources = serviceSelectionTimeSlot.resources?.length
+        ? [{ resources: serviceSelectionTimeSlot.resources }]
+        : undefined;
+    return {
+        localStartDate: serviceSelectionTimeSlot.startDate,
+        localEndDate: serviceSelectionTimeSlot.endDate,
+        bookable: true,
+        totalCapacity: serviceSelectionTimeSlot.totalCapacity,
+        remainingCapacity: serviceSelectionTimeSlot.remainingCapacity,
+        scheduleId: serviceSelectionTimeSlot.scheduleId,
+        eventInfo: serviceSelectionTimeSlot.eventInfo,
+        location: serviceSelectionTimeSlot.location,
+        availableResources,
+    };
+}
+// ============================================================================
+// Helper: Resolve Staff with Priority Logic
+// ============================================================================
+/**
+ * Gets selected staff resources with priority:
+ * 1. From selected time slot (if resources exist)
+ * 2. From service selection resources
+ * Returns null if no staff is chosen
+ */
+function getSelectedStaff(serviceSelection) {
+    // Priority 1: From selected time slot
+    if (serviceSelection.timeSlot?.resources?.length) {
+        return serviceSelection.timeSlot.resources;
+    }
+    // Priority 2: From service selection
+    if (serviceSelection.resources?.length) {
+        return serviceSelection.resources;
+    }
+    // No staff chosen
+    return null;
+}
+/**
+ * Creates a BookingItem from a ServiceSelection
+ */
+function createBookingItem(serviceSelection, index) {
+    return {
+        service: serviceSelection.service,
+        timeSlot: mapSelectionTimeSlotToTimeSlot(serviceSelection.timeSlot),
+        staff: getSelectedStaff(serviceSelection),
+        instanceId: serviceSelection.instanceId,
+        index,
+    };
+}
+/**
+ * Core component that provides access to booking items array via render props.
+ * Transforms serviceSelections into BookingItem objects.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsData>
+ *   {({ items }) => (
+ *     items.length > 0 ? (
+ *       <div>{items.length} bookings</div>
+ *     ) : (
+ *       <div>No bookings</div>
+ *     )
+ *   )}
+ * </Booking.ItemsData>
+ * ```
+ */
+export function ItemsData(props) {
+    const { children } = props;
+    const bookingService = useService(BookingServiceDefinition);
+    const serviceSelections = bookingService.serviceSelections.get();
+    const items = serviceSelections.map((selection, index) => createBookingItem(selection, index));
+    return children({ items });
+}
+/**
+ * Core component that provides payment data via render props.
+ * Computes slotServices from serviceSelections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.PaymentData>
+ *   {({ slotServices }) => (
+ *     <Payment.Root slotServices={slotServices}>
+ *       <Payment.TotalPrice />
+ *     </Payment.Root>
+ *   )}
+ * </Booking.PaymentData>
+ * ```
+ */
+export function PaymentData(props) {
+    const { children } = props;
+    const bookingService = useService(BookingServiceDefinition);
+    const serviceSelections = bookingService.serviceSelections.get();
+    const slotServices = serviceSelections.map((selection) => ({
+        service: selection.service,
+        lineItemId: selection.instanceId,
+    }));
+    return children({ slotServices });
+}

package/dist/react/index.d.ts

@@ -3,6 +3,7 @@ export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
+export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';

package/dist/react/index.js

@@ -3,6 +3,7 @@ export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
+export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';

package/dist/react/location/Location.js

@@ -89,7 +89,7 @@ Root.displayName = 'Location.Root';
 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 }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
 });
 Name.displayName = 'Location.Name';
 /**
@@ -117,7 +117,7 @@ export const Type = React.forwardRef((props, ref) => {
             locationType,
             isCustomerLocation,
             isCustomLocation,
-        }, ...attrs, children: _jsx("span", { children: locationType }) }));
+        }, ...attrs, children: locationType ? _jsx("span", { children: locationType }) : null }));
 });
 Type.displayName = 'Location.Type';
 /**