mautourco-components 0.2.85 → 0.2.87

package/dist/components/molecules/LocationDropdown/LocationDropdown.d.ts

@@ -32,6 +32,8 @@ export interface LocationDropdownProps {
     showGroupTitles?: boolean;
     /** Whether to scroll to the input when the dropdown opens */
     scrollOnOpen?: boolean;
+    /** Default location option to use when no value is selected */
+    defaultValue?: LocationOption;
 }
 declare const LocationDropdown: React.FC<LocationDropdownProps>;
 export default LocationDropdown;

package/dist/components/molecules/LocationDropdown/LocationDropdown.js

@@ -25,7 +25,7 @@ import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 var LocationDropdown = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p, defaultValue = _a.defaultValue;
     var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
     var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
     var dropdownRef = useRef(null);
@@ -53,6 +53,17 @@ var LocationDropdown = function (_a) {
             setSearchQuery('');
         }
     }, [isOpen]);
+    // Initialize default value if provided and no selected value
+    useEffect(function () {
+        if (!selectedValue && defaultValue && !disabled) {
+            var defaultLocationData = {
+                id: defaultValue.id,
+                locationName: defaultValue.label,
+            };
+            onSelectionChange(defaultLocationData);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValue]);
     var handleToggleDropdown = function () {
         if (!disabled) {
             setIsOpen(!isOpen);
@@ -82,20 +93,21 @@ var LocationDropdown = function (_a) {
         });
     };
     var getSelectedOption = function () {
-        if (!selectedValue)
-            return null;
-        // Search in flat options
-        var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
-        if (flatOption)
-            return flatOption;
-        // Search in groups
-        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-            var group = groups_1[_i];
-            var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
-            if (groupOption)
-                return groupOption;
+        if (selectedValue) {
+            // Search in flat options
+            var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
+            if (flatOption)
+                return flatOption;
+            // Search in groups
+            for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+                var group = groups_1[_i];
+                var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
+                if (groupOption)
+                    return groupOption;
+            }
         }
-        return null;
+        // Return default value if no selected value
+        return defaultValue || null;
     };
     var getIconForType = function (optionType) {
         switch (optionType) {
@@ -128,6 +140,8 @@ var LocationDropdown = function (_a) {
         // For other types (port, accommodation), show their specific icon
         return getIconForType(option.type);
     };
+    var selectedOption = getSelectedOption();
+    var effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
     var getDropdownState = function () {
         if (disabled)
             return 'disabled';
@@ -135,11 +149,10 @@ var LocationDropdown = function (_a) {
             return 'error';
         if (isOpen)
             return 'open';
-        if (selectedValue)
+        if (effectiveSelectedValue)
             return 'selected';
         return 'default';
     };
-    var selectedOption = getSelectedOption();
     var displayText = selectedOption ? selectedOption.label : placeholder;
     // Prepare all options (flat or grouped) and filter them
     var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
@@ -150,7 +163,7 @@ var LocationDropdown = function (_a) {
     var renderSkeletonLoading = function () { return (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: _jsx("div", { className: "location-dropdown__group", children: _jsx("div", { className: "location-dropdown__group-options", children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) }) }) }) }) })); };
     return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
                 (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
-                                            var isSelected = selectedValue === option.id;
+                                            var isSelected = effectiveSelectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;
                                             return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));
                                         }) })] }, group.id)); })) }) }) })))] }));

package/dist/components/molecules/TransferDocket/TransferDocket.js

@@ -46,6 +46,6 @@ export var TransferDocket = function (_a) {
         }
         return (_jsx("div", { className: "transfer-docket__children", children: childGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "transfer-docket__divider-vertical" }), _jsxs("span", { className: "transfer-docket__child-info", children: [_jsxs(Text, { size: "sm", variant: "medium", color: "default", children: [group.count, " Child", group.count > 1 ? 'ren' : ''] }), group.age > 0 ? (_jsxs(Text, { size: "sm", variant: "medium", className: "transfer-docket__child-age", children: [' ', "(", group.age, " y.o)"] })) : null] })] }, "child-".concat(index))); }) }));
     };
-    return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName })), showBabySeat && (_jsxs("div", { className: "transfer-docket__supplements", children: [_jsx(Text, { variant: "medium", size: "sm", color: "default", leading: "none", children: "Supplement :" }), _jsxs(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", children: ["Baby seat x", baby_seat_count] })] }))] })] }));
+    return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName })), !!showBabySeat && (_jsxs("div", { className: "transfer-docket__supplements", children: [_jsx(Text, { variant: "medium", size: "sm", color: "default", leading: "none", children: "Supplement :" }), _jsxs(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", children: ["Baby seat x", baby_seat_count] })] }))] })] }));
 };
 export default TransferDocket;

package/dist/components/molecules/VehicleSupplement/VehicleSupplement.js

@@ -51,6 +51,9 @@ var VehicleSupplement = function (_a) {
     };
     var getTransferTypeIcon = function (transferType) {
         var type = transferType.toLowerCase();
+        if (type.includes('harbour')) {
+            return 'ship';
+        }
         if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
             return 'plane-landing-outline';
         }

package/dist/components/organisms/RoundTrip/RoundTrip.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
 import "../../../styles/components/organism/round-trip.css";
-import { LocationData, LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
+import { LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
 import { PaxData } from "../PaxSelector/PaxSelector";
-export type { LocationData };
+export type { LocationOption };
 export interface RoundTripTransfer {
     type: "arrival" | "departure";
     paxData?: PaxData;
     transferDate?: string;
-    pickupPoint?: LocationData;
-    dropoffPoint?: LocationData;
+    pickupPoint?: LocationOption;
+    dropoffPoint?: LocationOption;
 }
 export interface RoundTripData {
     id: string;
     paxData?: PaxData;
     arrivalDate?: string;
     departureDate?: string;
-    pickupDropoffPoint?: LocationData;
-    accommodation?: LocationData;
+    pickupDropoffPoint?: LocationOption;
+    accommodation?: LocationOption;
     transfers: [RoundTripTransfer, RoundTripTransfer];
 }
 export interface RoundTripProps {
@@ -28,10 +28,10 @@ export interface RoundTripProps {
     arrivalDate?: string;
     /** Departure date */
     departureDate?: string;
-    /** Selected pickup/dropoff point ID (for initial value) */
-    pickupDropoffPoint?: string;
-    /** Selected accommodation ID (for initial value) */
-    accommodation?: string;
+    /** Selected pickup/dropoff point - can be an ID string or LocationOption object */
+    pickupDropoffPoint?: string | LocationOption;
+    /** Selected accommodation - can be an ID string or LocationOption object */
+    accommodation?: string | LocationOption;
     /** All location options */
     locations?: {
         options?: LocationOption[];
@@ -42,9 +42,9 @@ export interface RoundTripProps {
     /** Callback when dates change */
     onDatesChange?: (arrivalDate: string, departureDate: string) => void;
     /** Callback when pickup/dropoff point changes */
-    onPickupDropoffChange?: (location: LocationData | null) => void;
+    onPickupDropoffChange?: (location: LocationOption | null) => void;
     /** Callback when accommodation changes */
-    onAccommodationChange?: (location: LocationData | null) => void;
+    onAccommodationChange?: (location: LocationOption | null) => void;
     /** Callback when any data changes - returns array of 2 transfers */
     onChange?: (data: RoundTripData) => void;
     /** Additional CSS classes */

package/dist/components/organisms/RoundTrip/RoundTrip.js

@@ -75,43 +75,53 @@ var RoundTrip = function (_a) {
             groups: accommodationGroups,
         };
     };
-    // Initialize location data from IDs
+    // Helper to check if value is LocationOption
+    var isLocationOption = function (value) {
+        return typeof value === 'object' && value !== null && 'id' in value && 'label' in value && 'type' in value;
+    };
+    // Initialize location data from IDs or LocationOption objects
     useEffect(function () {
+        // If pickupDropoffPoint is already a LocationOption object, use it directly
+        if (isLocationOption(pickupDropoffPoint)) {
+            // Only update if the ID is different to prevent infinite loops
+            if ((internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) !== pickupDropoffPoint.id) {
+                setInternalPickupDropoffPoint(pickupDropoffPoint);
+            }
+            return;
+        }
         var _a = getPickupDropoffOptions(), options = _a.options, groups = _a.groups;
         var allLocations = getAllLocations(options, groups);
         if (pickupDropoffPoint) {
             var location_1 = allLocations.find(function (loc) { return loc.id === pickupDropoffPoint; });
-            if (location_1) {
-                setInternalPickupDropoffPoint({
-                    id: location_1.id,
-                    locationName: location_1.label,
-                });
+            if (location_1 && (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) !== location_1.id) {
+                setInternalPickupDropoffPoint(location_1);
             }
         }
-        else {
-            // Set default to first airport if available
+        else if (!internalPickupDropoffPoint) {
+            // Set default to first airport if available (only if not already set)
             var defaultAirport = allLocations.find(function (loc) { return loc.type === "airport"; });
             if (defaultAirport) {
-                var defaultData = {
-                    id: defaultAirport.id,
-                    locationName: defaultAirport.label,
-                };
-                setInternalPickupDropoffPoint(defaultData);
-                onPickupDropoffChange === null || onPickupDropoffChange === void 0 ? void 0 : onPickupDropoffChange(defaultData);
+                setInternalPickupDropoffPoint(defaultAirport);
+                onPickupDropoffChange === null || onPickupDropoffChange === void 0 ? void 0 : onPickupDropoffChange(defaultAirport);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pickupDropoffPoint, locations]);
     useEffect(function () {
+        // If accommodation is already a LocationOption object, use it directly
+        if (isLocationOption(accommodation)) {
+            // Only update if the ID is different to prevent infinite loops
+            if ((internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) !== accommodation.id) {
+                setInternalAccommodation(accommodation);
+            }
+            return;
+        }
         var _a = getAccommodationOptions(), options = _a.options, groups = _a.groups;
         var allLocations = getAllLocations(options, groups);
         if (accommodation) {
             var location_2 = allLocations.find(function (loc) { return loc.id === accommodation; });
-            if (location_2) {
-                setInternalAccommodation({
-                    id: location_2.id,
-                    locationName: location_2.label,
-                });
+            if (location_2 && (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) !== location_2.id) {
+                setInternalAccommodation(location_2);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -164,13 +174,41 @@ var RoundTrip = function (_a) {
             onDatesChange === null || onDatesChange === void 0 ? void 0 : onDatesChange(dates[0], dates[1]);
         }
     };
+    // Helper to convert LocationData to LocationOption
+    var toLocationOption = function (locationData, locationType) {
+        if (!locationData)
+            return null;
+        // Try to find in the options to get the type
+        var _a = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions(), options = _a.options, groups = _a.groups;
+        var allLocations = getAllLocations(options, groups);
+        var found = allLocations.find(function (loc) { return loc.id === locationData.id; });
+        if (found)
+            return found;
+        // If not found, infer the type
+        var name = locationData.locationName.toLowerCase();
+        var id = String(locationData.id).toLowerCase();
+        var type = 'accommodation';
+        if (name.includes('harbour') || name.includes('port') || id.includes('harbour') || id.includes('port')) {
+            type = 'port';
+        }
+        else if (name.includes('airport') || id.includes('airport')) {
+            type = 'airport';
+        }
+        return {
+            id: locationData.id,
+            label: locationData.locationName,
+            type: type,
+        };
+    };
     var handlePickupDropoffChange = function (location) {
-        setInternalPickupDropoffPoint(location);
-        onPickupDropoffChange === null || onPickupDropoffChange === void 0 ? void 0 : onPickupDropoffChange(location);
+        var locationOption = toLocationOption(location, 'pickup-dropoff');
+        setInternalPickupDropoffPoint(locationOption);
+        onPickupDropoffChange === null || onPickupDropoffChange === void 0 ? void 0 : onPickupDropoffChange(locationOption);
     };
     var handleAccommodationChange = function (location) {
-        setInternalAccommodation(location);
-        onAccommodationChange === null || onAccommodationChange === void 0 ? void 0 : onAccommodationChange(location);
+        var locationOption = toLocationOption(location, 'accommodation');
+        setInternalAccommodation(locationOption);
+        onAccommodationChange === null || onAccommodationChange === void 0 ? void 0 : onAccommodationChange(locationOption);
     };
     // Check if inputs are empty (when checkEmpty is true)
     var isPaxEmpty = checkEmpty && (!internalPaxData ||
@@ -184,6 +222,21 @@ var RoundTrip = function (_a) {
     var isAccommodationEmpty = checkEmpty && !internalAccommodation;
     var pickupDropoffOptions = getPickupDropoffOptions();
     var accommodationOptions = getAccommodationOptions();
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen }) })] }) }));
+    // Helper function to find LocationOption from ID or LocationOption for defaultValue
+    var findLocationOption = function (value, locationType) {
+        if (!value)
+            return undefined;
+        // If value is already a LocationOption object, use it directly
+        if (isLocationOption(value)) {
+            return value;
+        }
+        // Otherwise, look up by ID in the locations
+        var _a = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions(), options = _a.options, groups = _a.groups;
+        var allLocations = getAllLocations(options, groups);
+        return allLocations.find(function (loc) { return loc.id === value; });
+    };
+    var defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
+    var defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupDropoffOption }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultAccommodationOption }) })] }) }));
 };
 export default RoundTrip;

package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.js

@@ -31,8 +31,7 @@ import RoundTrip from "../RoundTrip/RoundTrip";
 import TransferLine from "../TransferLine/TransferLine";
 var transferIdCounter = 0;
 var SearchBarTransfer = function (_a) {
-    var _b, _c;
-    var _d = _a.mode, initialMode = _d === void 0 ? "roundtrip" : _d, _e = _a.locations, locations = _e === void 0 ? { options: [], groups: [] } : _e, defaultRoundTripData = _a.defaultRoundTripData, defaultTransferLines = _a.defaultTransferLines, _f = _a.defaultSameVehicle, defaultSameVehicle = _f === void 0 ? false : _f, onSearch = _a.onSearch, onChange = _a.onChange, onRemove = _a.onRemove, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.scrollOnOpen, scrollOnOpen = _h === void 0 ? false : _h;
+    var _b = _a.mode, initialMode = _b === void 0 ? "roundtrip" : _b, _c = _a.locations, locations = _c === void 0 ? { options: [], groups: [] } : _c, defaultRoundTripData = _a.defaultRoundTripData, defaultTransferLines = _a.defaultTransferLines, _d = _a.defaultSameVehicle, defaultSameVehicle = _d === void 0 ? false : _d, onSearch = _a.onSearch, onChange = _a.onChange, onRemove = _a.onRemove, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.scrollOnOpen, scrollOnOpen = _f === void 0 ? false : _f;
     // Generate unique ID for transfer lines
     var generateTransferId = function () {
         transferIdCounter += 1;
@@ -44,11 +43,11 @@ var SearchBarTransfer = function (_a) {
             return [];
         return lines.map(function (line) { return (__assign(__assign({}, line), { id: line.id || generateTransferId() })); });
     };
-    var _j = useState(initialMode), mode = _j[0], setMode = _j[1];
-    var _k = useState(defaultSameVehicle), sameVehicle = _k[0], setSameVehicle = _k[1];
-    var _l = useState(defaultRoundTripData), roundTripData = _l[0], setRoundTripData = _l[1];
-    var _m = useState(initializeTransferLines(defaultTransferLines)), transferLines = _m[0], setTransferLines = _m[1];
-    var _o = useState(null), error = _o[0], setError = _o[1];
+    var _g = useState(initialMode), mode = _g[0], setMode = _g[1];
+    var _h = useState(defaultSameVehicle), sameVehicle = _h[0], setSameVehicle = _h[1];
+    var _j = useState(defaultRoundTripData), roundTripData = _j[0], setRoundTripData = _j[1];
+    var _k = useState(initializeTransferLines(defaultTransferLines)), transferLines = _k[0], setTransferLines = _k[1];
+    var _l = useState(null), error = _l[0], setError = _l[1];
     // Notify parent of changes
     useEffect(function () {
         var data = {
@@ -310,7 +309,7 @@ var SearchBarTransfer = function (_a) {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
         }
     };
-    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === "roundtrip" ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: (_b = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id, accommodation: (_c = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation) === null || _c === void 0 ? void 0 : _c.id, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
+    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === "roundtrip" ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint, accommodation: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -329,10 +328,7 @@ var SearchBarTransfer = function (_a) {
                                 departure: { label: "Departure", icon: "departure" },
                                 "inter-hotel": { label: "Inter-Hotel", icon: "building" },
                             };
-                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line) {
-                                        var _a, _b;
-                                        return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: (_a = line.pickupPoint) === null || _a === void 0 ? void 0 : _a.id, dropoffPoint: (_b = line.dropoffPoint) === null || _b === void 0 ? void 0 : _b.id, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, line.id));
-                                    }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
+                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line) { return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: line.pickupPoint, dropoffPoint: line.dropoffPoint, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, line.id)); }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
                         })() }))] })), _jsxs("div", { className: "search-bar-transfer__actions", children: [_jsx(Checkbox, { checked: sameVehicle, onChange: setSameVehicle, label: "Use the same vehicle for all your transfers" }), _jsxs("div", { className: "search-bar-transfer__cta", children: [error && (_jsx(Toast, { text: error, type: "danger" })), _jsx(Button, { variant: "primary", size: "lg", onClick: handleSearch, children: "Search" })] })] })] }));
 };
 export default SearchBarTransfer;

package/dist/components/organisms/SearchBarTransfer/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './SearchBarTransfer';
-export type { SearchBarTransferProps, SearchBarTransferData, TransferMode } from './SearchBarTransfer';
+export type { SearchBarTransferData, SearchBarTransferProps, TransferMode } from './SearchBarTransfer';

package/dist/components/organisms/TransferLine/TransferLine.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import '../../../styles/components/organism/transfer-line.css';
-import { LocationData, LocationGroup, LocationOption } from '../../molecules/LocationDropdown/LocationDropdown';
+import { LocationGroup, LocationOption } from '../../molecules/LocationDropdown/LocationDropdown';
 import { PaxData } from '../PaxSelector/PaxSelector';
 export type TransferType = 'arrival' | 'departure' | 'inter-hotel';
-export type { LocationData };
+export type { LocationOption };
 export interface TransferLineData {
     id: string;
     type: TransferType;
     paxData?: PaxData;
     transferDate?: string;
-    pickupPoint?: LocationData;
-    dropoffPoint?: LocationData;
+    pickupPoint?: LocationOption;
+    dropoffPoint?: LocationOption;
 }
 export interface TransferLineProps {
     /** Unique identifier for this transfer line */
@@ -21,10 +21,10 @@ export interface TransferLineProps {
     paxData?: PaxData;
     /** Transfer date */
     transferDate?: string;
-    /** Selected pickup point ID (for initial value) */
-    pickupPoint?: string | number;
-    /** Selected dropoff point ID (for initial value) */
-    dropoffPoint?: string | number;
+    /** Selected pickup point - can be an ID (string/number) or LocationOption object */
+    pickupPoint?: string | number | LocationOption;
+    /** Selected dropoff point - can be an ID (string/number) or LocationOption object */
+    dropoffPoint?: string | number | LocationOption;
     /** All location options - will be filtered based on transfer type */
     locations?: {
         options?: LocationOption[];
@@ -35,9 +35,9 @@ export interface TransferLineProps {
     /** Callback when transfer date changes */
     onDateChange?: (date: string) => void;
     /** Callback when pickup point changes */
-    onPickupChange?: (location: LocationData | null) => void;
+    onPickupChange?: (location: LocationOption | null) => void;
     /** Callback when dropoff point changes */
-    onDropoffChange?: (location: LocationData | null) => void;
+    onDropoffChange?: (location: LocationOption | null) => void;
     /** Callback when any data changes - returns complete TransferLineData */
     onDataChange?: (data: TransferLineData) => void;
     /** Callback when delete button is clicked */