mautourco-components 0.2.85 → 0.2.87

package/dist/components/organisms/TransferLine/TransferLine.js

@@ -68,55 +68,61 @@ var TransferLine = function (_a) {
         }
         return null;
     };
-    // Initialize location data from IDs or set defaults
+    // 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, LocationOption objects, or set defaults
     React.useEffect(function () {
+        // If pickupPoint is already a LocationOption object, use it directly
+        if (isLocationOption(pickupPoint)) {
+            // Only update if the ID is different to prevent infinite loops
+            if ((internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) !== pickupPoint.id) {
+                setInternalPickupPoint(pickupPoint);
+            }
+            return;
+        }
         var _a = filterLocations('pickup'), options = _a.options, groups = _a.groups;
         var allPickupLocations = getAllLocations(options, groups);
         if (pickupPoint) {
             var location_1 = allPickupLocations.find(function (loc) { return loc.id === pickupPoint; });
-            if (location_1) {
-                setInternalPickupPoint({
-                    id: location_1.id,
-                    locationName: location_1.label,
-                });
+            if (location_1 && (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) !== location_1.id) {
+                setInternalPickupPoint(location_1);
             }
         }
-        else {
-            // Set default location if applicable
+        else if (!internalPickupPoint) {
+            // Set default location if applicable (only if not already set)
             var defaultLocation = getDefaultLocation('pickup');
             if (defaultLocation) {
-                var defaultData = {
-                    id: defaultLocation.id,
-                    locationName: defaultLocation.label,
-                };
-                setInternalPickupPoint(defaultData);
-                onPickupChange === null || onPickupChange === void 0 ? void 0 : onPickupChange(defaultData);
+                setInternalPickupPoint(defaultLocation);
+                onPickupChange === null || onPickupChange === void 0 ? void 0 : onPickupChange(defaultLocation);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pickupPoint, type, locations]);
     React.useEffect(function () {
+        // If dropoffPoint is already a LocationOption object, use it directly
+        if (isLocationOption(dropoffPoint)) {
+            // Only update if the ID is different to prevent infinite loops
+            if ((internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) !== dropoffPoint.id) {
+                setInternalDropoffPoint(dropoffPoint);
+            }
+            return;
+        }
         var _a = filterLocations('dropoff'), options = _a.options, groups = _a.groups;
         var allDropoffLocations = getAllLocations(options, groups);
         if (dropoffPoint) {
             var location_2 = allDropoffLocations.find(function (loc) { return loc.id === dropoffPoint; });
-            if (location_2) {
-                setInternalDropoffPoint({
-                    id: location_2.id,
-                    locationName: location_2.label,
-                });
+            if (location_2 && (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) !== location_2.id) {
+                setInternalDropoffPoint(location_2);
             }
         }
-        else {
-            // Set default location if applicable
+        else if (!internalDropoffPoint) {
+            // Set default location if applicable (only if not already set)
             var defaultLocation = getDefaultLocation('dropoff');
             if (defaultLocation) {
-                var defaultData = {
-                    id: defaultLocation.id,
-                    locationName: defaultLocation.label,
-                };
-                setInternalDropoffPoint(defaultData);
-                onDropoffChange === null || onDropoffChange === void 0 ? void 0 : onDropoffChange(defaultData);
+                setInternalDropoffPoint(defaultLocation);
+                onDropoffChange === null || onDropoffChange === void 0 ? void 0 : onDropoffChange(defaultLocation);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -174,13 +180,41 @@ var TransferLine = function (_a) {
         setInternalTransferDate(dateValue);
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(dateValue);
     };
+    // Helper to convert LocationData to LocationOption
+    var toLocationOption = function (locationData, position) {
+        if (!locationData)
+            return null;
+        // Try to find in the options to get the type
+        var _a = filterLocations(position), 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 locType = 'accommodation';
+        if (name.includes('harbour') || name.includes('port') || id.includes('harbour') || id.includes('port')) {
+            locType = 'port';
+        }
+        else if (name.includes('airport') || id.includes('airport')) {
+            locType = 'airport';
+        }
+        return {
+            id: locationData.id,
+            label: locationData.locationName,
+            type: locType,
+        };
+    };
     var handlePickupChange = function (location) {
-        setInternalPickupPoint(location);
-        onPickupChange === null || onPickupChange === void 0 ? void 0 : onPickupChange(location);
+        var locationOption = toLocationOption(location, 'pickup');
+        setInternalPickupPoint(locationOption);
+        onPickupChange === null || onPickupChange === void 0 ? void 0 : onPickupChange(locationOption);
     };
     var handleDropoffChange = function (location) {
-        setInternalDropoffPoint(location);
-        onDropoffChange === null || onDropoffChange === void 0 ? void 0 : onDropoffChange(location);
+        var locationOption = toLocationOption(location, 'dropoff');
+        setInternalDropoffPoint(locationOption);
+        onDropoffChange === null || onDropoffChange === void 0 ? void 0 : onDropoffChange(locationOption);
     };
     // Check if inputs are empty (when checkEmpty is true)
     var isPaxEmpty = checkEmpty &&
@@ -192,14 +226,29 @@ var TransferLine = function (_a) {
     var isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
     var isPickupEmpty = checkEmpty && !internalPickupPoint;
     var isDropoffEmpty = checkEmpty && !internalDropoffPoint;
+    // Helper function to find LocationOption from ID or LocationOption for defaultValue
+    var findLocationOption = function (value, position) {
+        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 = filterLocations(position), options = _a.options, groups = _a.groups;
+        var allLocations = getAllLocations(options, groups);
+        return allLocations.find(function (loc) { return loc.id === value; });
+    };
+    var defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
+    var defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
     return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
                                         ? 'accommodation'
                                         : type === 'arrival'
                                             ? 'airport-port'
-                                            : 'accommodation', showGroupTitles: false, error: isPickupEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "transfer-line__field transfer-line__field--dropoff", children: _jsx(LocationDropdown, { label: "Drop-off point", options: filterLocations('dropoff').options, groups: filterLocations('dropoff').groups, selectedValue: (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) || null, onSelectionChange: handleDropoffChange, placeholder: "Select a drop-off point", direction: "dropoff", type: type === 'inter-hotel'
+                                            : 'accommodation', showGroupTitles: false, error: isPickupEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupOption }) }), _jsx("div", { className: "transfer-line__field transfer-line__field--dropoff", children: _jsx(LocationDropdown, { label: "Drop-off point", options: filterLocations('dropoff').options, groups: filterLocations('dropoff').groups, selectedValue: (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) || null, onSelectionChange: handleDropoffChange, placeholder: "Select a drop-off point", direction: "dropoff", type: type === 'inter-hotel'
                                         ? 'accommodation'
                                         : type === 'departure'
                                             ? 'airport-port'
-                                            : 'accommodation', showGroupTitles: false, error: isDropoffEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen }) })] }), showDelete && !disabled && (_jsx("div", { className: "transfer-line__delete", children: _jsx("button", { type: "button", className: "transfer-line__delete-btn", onClick: onDelete, "aria-label": "Delete transfer line", children: _jsx(Icon, { name: "delete", size: "sm", className: "transfer-line__delete-icon" }) }) }))] })] }));
+                                            : 'accommodation', showGroupTitles: false, error: isDropoffEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultDropoffOption }) })] }), showDelete && !disabled && (_jsx("div", { className: "transfer-line__delete", children: _jsx("button", { type: "button", className: "transfer-line__delete-btn", onClick: onDelete, "aria-label": "Delete transfer line", children: _jsx(Icon, { name: "delete", size: "sm", className: "transfer-line__delete-icon" }) }) }))] })] }));
 };
 export default TransferLine;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.85",
+  "version": "0.2.87",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -39,6 +39,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;
 }
 
 const LocationDropdown: React.FC<LocationDropdownProps> = ({
@@ -57,6 +59,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   direction = undefined,
   showGroupTitles = true,
   scrollOnOpen = false,
+  defaultValue,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -90,6 +93,18 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     }
   }, [isOpen]);
 
+  // Initialize default value if provided and no selected value
+  useEffect(() => {
+    if (!selectedValue && defaultValue && !disabled) {
+      const defaultLocationData: LocationData = {
+        id: defaultValue.id,
+        locationName: defaultValue.label,
+      };
+      onSelectionChange(defaultLocationData);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
+
   const handleToggleDropdown = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -122,19 +137,20 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   };
 
   const getSelectedOption = (): LocationOption | null => {
-    if (!selectedValue) return null;
-
-    // Search in flat options
-    const flatOption = options.find((opt) => opt.id === selectedValue);
-    if (flatOption) return flatOption;
+    if (selectedValue) {
+      // Search in flat options
+      const flatOption = options.find((opt) => opt.id === selectedValue);
+      if (flatOption) return flatOption;
 
-    // Search in groups
-    for (const group of groups) {
-      const groupOption = group.options.find((opt) => opt.id === selectedValue);
-      if (groupOption) return groupOption;
+      // Search in groups
+      for (const group of groups) {
+        const groupOption = group.options.find((opt) => opt.id === selectedValue);
+        if (groupOption) return groupOption;
+      }
     }
 
-    return null;
+    // Return default value if no selected value
+    return defaultValue || null;
   };
 
   const getIconForType = (optionType: 'airport' | 'port' | 'accommodation') => {
@@ -171,15 +187,17 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     return getIconForType(option.type);
   };
 
+  const selectedOption = getSelectedOption();
+  const effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
+
   const getDropdownState = () => {
     if (disabled) return 'disabled';
     if (error) return 'error';
     if (isOpen) return 'open';
-    if (selectedValue) return 'selected';
+    if (effectiveSelectedValue) return 'selected';
     return 'default';
   };
 
-  const selectedOption = getSelectedOption();
   const displayText = selectedOption ? selectedOption.label : placeholder;
 
   // Prepare all options (flat or grouped) and filter them
@@ -293,7 +311,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
 
                     <div className="location-dropdown__group-options">
                       {group.options.map((option) => {
-                        const isSelected = selectedValue === option.id;
+                        const isSelected = effectiveSelectedValue === option.id;
                         const isDisabled = option.disabled || disabled;
 
                         return (

package/src/components/molecules/TransferDocket/TransferDocket.tsx

@@ -170,7 +170,7 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({
           </TextWithIcon>
         )}
 
-        {showBabySeat && (
+        {!!showBabySeat && (
           <div className="transfer-docket__supplements">
             <Text variant="medium" size="sm" color="default" leading="none">
               Supplement :

package/src/components/molecules/VehicleSupplement/VehicleSupplement.tsx

@@ -88,6 +88,9 @@ const VehicleSupplement: React.FC<VehicleSupplementProps> = ({
 
   const getTransferTypeIcon = (transferType: string) => {
     const type = transferType.toLowerCase();
+    if (type.includes('harbour')) {
+      return 'ship';
+    }
     if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
       return 'plane-landing-outline';
     }

package/src/components/organisms/RoundTrip/RoundTrip.tsx

@@ -9,15 +9,15 @@ import LocationDropdown, {
 import DateTimePicker from "../DateTimePicker/DateTimePicker";
 import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
 
-// Re-export LocationData for convenience
-export type { LocationData };
+// Re-export LocationOption for convenience
+export type { LocationOption };
 
 export interface RoundTripTransfer {
   type: "arrival" | "departure";
   paxData?: PaxData;
   transferDate?: string;
-  pickupPoint?: LocationData;
-  dropoffPoint?: LocationData;
+  pickupPoint?: LocationOption;
+  dropoffPoint?: LocationOption;
 }
 
 export interface RoundTripData {
@@ -25,8 +25,8 @@ export interface RoundTripData {
   paxData?: PaxData;
   arrivalDate?: string;
   departureDate?: string;
-  pickupDropoffPoint?: LocationData;
-  accommodation?: LocationData;
+  pickupDropoffPoint?: LocationOption;
+  accommodation?: LocationOption;
   transfers: [RoundTripTransfer, RoundTripTransfer];
 }
 
@@ -39,10 +39,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[];
@@ -53,9 +53,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 */
@@ -93,9 +93,9 @@ const RoundTrip: React.FC<RoundTripProps> = ({
     string | undefined
   >(departureDate);
   const [internalPickupDropoffPoint, setInternalPickupDropoffPoint] =
-    useState<LocationData | null>(null);
+    useState<LocationOption | null>(null);
   const [internalAccommodation, setInternalAccommodation] =
-    useState<LocationData | null>(null);
+    useState<LocationOption | null>(null);
 
   // Helper function to get all locations (from options and groups)
   const getAllLocations = (
@@ -165,8 +165,22 @@ const RoundTrip: React.FC<RoundTripProps> = ({
     };
   };
 
-  // Initialize location data from IDs
+  // Helper to check if value is LocationOption
+  const isLocationOption = (value: string | LocationOption | undefined): value is LocationOption => {
+    return typeof value === 'object' && value !== null && 'id' in value && 'label' in value && 'type' in value;
+  };
+
+  // Initialize location data from IDs or LocationOption objects
   useEffect(() => {
+    // 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?.id !== pickupDropoffPoint.id) {
+        setInternalPickupDropoffPoint(pickupDropoffPoint);
+      }
+      return;
+    }
+
     const { options, groups } = getPickupDropoffOptions();
     const allLocations = getAllLocations(options, groups);
 
@@ -174,38 +188,37 @@ const RoundTrip: React.FC<RoundTripProps> = ({
       const location = allLocations.find(
         (loc) => loc.id === pickupDropoffPoint
       );
-      if (location) {
-        setInternalPickupDropoffPoint({
-          id: location.id,
-          locationName: location.label,
-        });
+      if (location && internalPickupDropoffPoint?.id !== location.id) {
+        setInternalPickupDropoffPoint(location);
       }
-    } else {
-      // Set default to first airport if available
+    } else if (!internalPickupDropoffPoint) {
+      // Set default to first airport if available (only if not already set)
       const defaultAirport = allLocations.find((loc) => loc.type === "airport");
       if (defaultAirport) {
-        const defaultData: LocationData = {
-          id: defaultAirport.id,
-          locationName: defaultAirport.label,
-        };
-        setInternalPickupDropoffPoint(defaultData);
-        onPickupDropoffChange?.(defaultData);
+        setInternalPickupDropoffPoint(defaultAirport);
+        onPickupDropoffChange?.(defaultAirport);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pickupDropoffPoint, locations]);
 
   useEffect(() => {
+    // 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?.id !== accommodation.id) {
+        setInternalAccommodation(accommodation);
+      }
+      return;
+    }
+
     const { options, groups } = getAccommodationOptions();
     const allLocations = getAllLocations(options, groups);
 
     if (accommodation) {
       const location = allLocations.find((loc) => loc.id === accommodation);
-      if (location) {
-        setInternalAccommodation({
-          id: location.id,
-          locationName: location.label,
-        });
+      if (location && internalAccommodation?.id !== location.id) {
+        setInternalAccommodation(location);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -265,14 +278,43 @@ const RoundTrip: React.FC<RoundTripProps> = ({
     }
   };
 
+  // Helper to convert LocationData to LocationOption
+  const toLocationOption = (locationData: LocationData | null, locationType: 'pickup-dropoff' | 'accommodation'): LocationOption | null => {
+    if (!locationData) return null;
+    
+    // Try to find in the options to get the type
+    const { options, groups } = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions();
+    const allLocations = getAllLocations(options, groups);
+    const found = allLocations.find((loc) => loc.id === locationData.id);
+    if (found) return found;
+    
+    // If not found, infer the type
+    const name = locationData.locationName.toLowerCase();
+    const id = String(locationData.id).toLowerCase();
+    let type: 'airport' | 'port' | 'accommodation' = '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,
+    };
+  };
+
   const handlePickupDropoffChange = (location: LocationData | null) => {
-    setInternalPickupDropoffPoint(location);
-    onPickupDropoffChange?.(location);
+    const locationOption = toLocationOption(location, 'pickup-dropoff');
+    setInternalPickupDropoffPoint(locationOption);
+    onPickupDropoffChange?.(locationOption);
   };
 
   const handleAccommodationChange = (location: LocationData | null) => {
-    setInternalAccommodation(location);
-    onAccommodationChange?.(location);
+    const locationOption = toLocationOption(location, 'accommodation');
+    setInternalAccommodation(locationOption);
+    onAccommodationChange?.(locationOption);
   };
 
   // Check if inputs are empty (when checkEmpty is true)
@@ -292,6 +334,24 @@ const RoundTrip: React.FC<RoundTripProps> = ({
   const pickupDropoffOptions = getPickupDropoffOptions();
   const accommodationOptions = getAccommodationOptions();
 
+  // Helper function to find LocationOption from ID or LocationOption for defaultValue
+  const findLocationOption = (value: string | LocationOption | undefined, locationType: 'pickup-dropoff' | 'accommodation'): LocationOption | undefined => {
+    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
+    const { options, groups } = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions();
+    const allLocations = getAllLocations(options, groups);
+    return allLocations.find((loc) => loc.id === value);
+  };
+
+  const defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
+  const defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
+
   return (
     <div className={`round-trip ${className}`} data-round-trip-id={id}>
       <div className="round-trip__content">
@@ -339,6 +399,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             showGroupTitles={true}
             error={isPickupDropoffEmpty}
             scrollOnOpen={scrollOnOpen}
+            defaultValue={defaultPickupDropoffOption}
           />
         </div>
 
@@ -355,6 +416,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             showGroupTitles={false}
             error={isAccommodationEmpty}
             scrollOnOpen={scrollOnOpen}
+            defaultValue={defaultAccommodationOption}
           />
         </div>
       </div>

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -430,8 +430,8 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             paxData={roundTripData?.paxData}
             arrivalDate={roundTripData?.arrivalDate}
             departureDate={roundTripData?.departureDate}
-            pickupDropoffPoint={roundTripData?.pickupDropoffPoint?.id as string}
-            accommodation={roundTripData?.accommodation?.id as string}
+            pickupDropoffPoint={roundTripData?.pickupDropoffPoint}
+            accommodation={roundTripData?.accommodation}
             onChange={setRoundTripData}
             checkEmpty={error !== null}
             scrollOnOpen={scrollOnOpen}
@@ -508,8 +508,8 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                         type={line.type}
                         paxData={line.paxData}
                         transferDate={line.transferDate}
-                        pickupPoint={line.pickupPoint?.id}
-                        dropoffPoint={line.dropoffPoint?.id}
+                        pickupPoint={line.pickupPoint}
+                        dropoffPoint={line.dropoffPoint}
                         locations={locations}
                         onDataChange={(data) => handleTransferLineChange(line.id, data)}
                         onDelete={() => handleDeleteTransferLine(line.id)}

package/src/components/organisms/SearchBarTransfer/index.ts

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