mautourco-components 0.2.46 → 0.2.47

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

@@ -32,7 +32,7 @@ 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, _g = _a.className, className = _g === void 0 ? "" : _g;
+    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;
     // Generate unique ID for transfer lines
     var generateTransferId = function () {
         transferIdCounter += 1;
@@ -44,11 +44,11 @@ var SearchBarTransfer = function (_a) {
             return [];
         return lines.map(function (line) { return (__assign(__assign({}, line), { id: line.id || generateTransferId() })); });
     };
-    var _h = useState(initialMode), mode = _h[0], setMode = _h[1];
-    var _j = useState(defaultSameVehicle), sameVehicle = _j[0], setSameVehicle = _j[1];
-    var _k = useState(defaultRoundTripData), roundTripData = _k[0], setRoundTripData = _k[1];
-    var _l = useState(initializeTransferLines(defaultTransferLines)), transferLines = _l[0], setTransferLines = _l[1];
-    var _m = useState(null), error = _m[0], setError = _m[1];
+    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];
     // Notify parent of changes
     useEffect(function () {
         var data = {
@@ -69,25 +69,9 @@ var SearchBarTransfer = function (_a) {
         var transferMode = newMode;
         if (transferMode === mode)
             return;
-        if (transferMode === "custom" && mode === "roundtrip" && roundTripData) {
-            // Parse roundtrip to two transfer lines
-            var arrivalTransfer = {
-                id: generateTransferId(),
-                type: "arrival",
-                paxData: roundTripData.paxData,
-                transferDate: roundTripData.arrivalDate,
-                pickupPoint: roundTripData.pickupDropoffPoint,
-                dropoffPoint: roundTripData.accommodation,
-            };
-            var departureTransfer = {
-                id: generateTransferId(),
-                type: "departure",
-                paxData: roundTripData.paxData,
-                transferDate: roundTripData.departureDate,
-                pickupPoint: roundTripData.accommodation,
-                dropoffPoint: roundTripData.pickupDropoffPoint,
-            };
-            setTransferLines([arrivalTransfer, departureTransfer]);
+        if (transferMode === "custom" && mode === "roundtrip") {
+            // When switching to custom mode, reset transfer lines (will show placeholder)
+            setTransferLines([]);
             setRoundTripData(undefined);
         }
         else if (transferMode === "roundtrip" && mode === "custom") {
@@ -108,42 +92,15 @@ var SearchBarTransfer = function (_a) {
     };
     // Render transfer type buttons
     var renderTransferTypeButtons = function (onClick) { return (_jsxs("div", { className: "search-bar-transfer__add-buttons", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return onClick("arrival"); }, children: "Add Arrival" }), _jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return onClick("departure"); }, children: "Add Departure" }), _jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return onClick("inter-hotel"); }, children: "Add Inter-Hotel" })] })); };
-    // Handle adding transfer from round-trip mode (converts round-trip to custom and adds new transfer)
+    // Handle adding transfer from round-trip mode (switches to custom and adds new transfer)
     var handleAddTransferFromRoundTrip = function (type) {
-        if (!roundTripData) {
-            // If no round trip data, just add a new transfer and switch to custom
-            var newTransfer_1 = {
-                id: generateTransferId(),
-                type: type,
-            };
-            setTransferLines([newTransfer_1]);
-            setMode("custom");
-            return;
-        }
-        // Convert roundtrip to two transfer lines
-        var arrivalTransfer = {
-            id: generateTransferId(),
-            type: "arrival",
-            paxData: roundTripData.paxData,
-            transferDate: roundTripData.arrivalDate,
-            pickupPoint: roundTripData.pickupDropoffPoint,
-            dropoffPoint: roundTripData.accommodation,
-        };
-        var departureTransfer = {
-            id: generateTransferId(),
-            type: "departure",
-            paxData: roundTripData.paxData,
-            transferDate: roundTripData.departureDate,
-            pickupPoint: roundTripData.accommodation,
-            dropoffPoint: roundTripData.pickupDropoffPoint,
-        };
         // Add the new transfer of the clicked type
         var newTransfer = {
             id: generateTransferId(),
             type: type,
         };
-        // Set all transfers and switch to custom mode
-        setTransferLines([arrivalTransfer, departureTransfer, newTransfer]);
+        // Set the transfer and switch to custom mode
+        setTransferLines([newTransfer]);
         setRoundTripData(undefined);
         setMode("custom");
         setError(null);
@@ -156,6 +113,11 @@ var SearchBarTransfer = function (_a) {
     };
     // Handle transfer line deletion
     var handleDeleteTransferLine = function (id) {
+        var index = transferLines.findIndex(function (line) { return line.id === id; });
+        var transferLine = transferLines.find(function (line) { return line.id === id; });
+        if (index !== -1 && transferLine) {
+            onRemove === null || onRemove === void 0 ? void 0 : onRemove(index, transferLine);
+        }
         setTransferLines(function (prevLines) { return prevLines.filter(function (line) { return line.id !== id; }); });
     };
     // Validate data
@@ -207,7 +169,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 }), _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("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: (_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 () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -228,7 +190,7 @@ var SearchBarTransfer = function (_a) {
                             };
                             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 }, line.id));
+                                        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)); });
                         })() }))] })), _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" })] })] })] }));
 };

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

@@ -1,8 +1,8 @@
-import React from "react";
-import "../../../styles/components/organism/transfer-line.css";
-import { LocationData, LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
-import { PaxData } from "../PaxSelector/PaxSelector";
-export type TransferType = "arrival" | "departure" | "inter-hotel";
+import React from 'react';
+import '../../../styles/components/organism/transfer-line.css';
+import { LocationData, LocationGroup, LocationOption } from '../../molecules/LocationDropdown/LocationDropdown';
+import { PaxData } from '../PaxSelector/PaxSelector';
+export type TransferType = 'arrival' | 'departure' | 'inter-hotel';
 export type { LocationData };
 export interface TransferLineData {
     id: string;
@@ -50,6 +50,10 @@ export interface TransferLineProps {
     className?: string;
     /** Whether to check if inputs are empty */
     checkEmpty?: boolean;
+    /** Whether the transfer line is disabled (placeholder state) */
+    disabled?: boolean;
+    /** Whether to scroll to the input when the calendar opens */
+    scrollOnOpen?: boolean;
 }
 declare const TransferLine: React.FC<TransferLineProps>;
 export default TransferLine;

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

@@ -19,19 +19,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import "../../../styles/components/organism/transfer-line.css";
-import Icon from "../../atoms/Icon/Icon";
-import { Text } from "../../atoms/Typography/Typography";
-import LocationDropdown from "../../molecules/LocationDropdown/LocationDropdown";
-import DateTimePicker from "../DateTimePicker/DateTimePicker";
-import PaxSelector from "../PaxSelector/PaxSelector";
+import React, { useState } from 'react';
+import '../../../styles/components/organism/transfer-line.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import LocationDropdown from '../../molecules/LocationDropdown/LocationDropdown';
+import DateTimePicker from '../DateTimePicker/DateTimePicker';
+import PaxSelector from '../PaxSelector/PaxSelector';
 var TransferLine = function (_a) {
-    var id = _a.id, type = _a.type, paxData = _a.paxData, transferDate = _a.transferDate, pickupPoint = _a.pickupPoint, dropoffPoint = _a.dropoffPoint, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDateChange = _a.onDateChange, onPickupChange = _a.onPickupChange, onDropoffChange = _a.onDropoffChange, onDataChange = _a.onDataChange, onDelete = _a.onDelete, _c = _a.showDelete, showDelete = _c === void 0 ? true : _c, _d = _a.showTitle, showTitle = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.checkEmpty, checkEmpty = _f === void 0 ? false : _f;
-    var _g = useState(paxData), internalPaxData = _g[0], setInternalPaxData = _g[1];
-    var _h = useState(transferDate), internalTransferDate = _h[0], setInternalTransferDate = _h[1];
-    var _j = useState(null), internalPickupPoint = _j[0], setInternalPickupPoint = _j[1];
-    var _k = useState(null), internalDropoffPoint = _k[0], setInternalDropoffPoint = _k[1];
+    var id = _a.id, type = _a.type, paxData = _a.paxData, transferDate = _a.transferDate, pickupPoint = _a.pickupPoint, dropoffPoint = _a.dropoffPoint, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDateChange = _a.onDateChange, onPickupChange = _a.onPickupChange, onDropoffChange = _a.onDropoffChange, onDataChange = _a.onDataChange, onDelete = _a.onDelete, _c = _a.showDelete, showDelete = _c === void 0 ? true : _c, _d = _a.showTitle, showTitle = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.checkEmpty, checkEmpty = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.scrollOnOpen, scrollOnOpen = _h === void 0 ? false : _h;
+    var _j = useState(paxData), internalPaxData = _j[0], setInternalPaxData = _j[1];
+    var _k = useState(transferDate), internalTransferDate = _k[0], setInternalTransferDate = _k[1];
+    var _l = useState(null), internalPickupPoint = _l[0], setInternalPickupPoint = _l[1];
+    var _m = useState(null), internalDropoffPoint = _m[0], setInternalDropoffPoint = _m[1];
     // Helper function to get all locations (from options and groups)
     var getAllLocations = function (options, groups) {
         var groupOptions = groups.flatMap(function (group) { return group.options; });
@@ -62,8 +62,9 @@ var TransferLine = function (_a) {
         var _a = filterLocations(position), options = _a.options, groups = _a.groups;
         var allLocations = getAllLocations(options, groups);
         // For arrival pickup or departure dropoff, default to first airport
-        if ((type === 'arrival' && position === 'pickup') || (type === 'departure' && position === 'dropoff')) {
-            return allLocations.find(function (loc) { return loc.type === 'airport'; }) || allLocations[0] || null;
+        if ((type === 'arrival' && position === 'pickup') ||
+            (type === 'departure' && position === 'dropoff')) {
+            return (allLocations.find(function (loc) { return loc.type === 'airport'; }) || allLocations[0] || null);
         }
         return null;
     };
@@ -132,29 +133,36 @@ var TransferLine = function (_a) {
         };
         onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(completeData);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id, type, internalPaxData, internalTransferDate, internalPickupPoint, internalDropoffPoint]);
+    }, [
+        id,
+        type,
+        internalPaxData,
+        internalTransferDate,
+        internalPickupPoint,
+        internalDropoffPoint,
+    ]);
     var getTypeIcon = function () {
         switch (type) {
-            case "arrival":
-                return "arrival";
-            case "departure":
-                return "departure";
-            case "inter-hotel":
-                return "building";
+            case 'arrival':
+                return 'arrival';
+            case 'departure':
+                return 'departure';
+            case 'inter-hotel':
+                return 'building';
             default:
-                return "arrival";
+                return 'arrival';
         }
     };
     var getTypeLabel = function () {
         switch (type) {
-            case "arrival":
-                return "Arrival";
-            case "departure":
-                return "Departure";
-            case "inter-hotel":
-                return "Inter-Hotel";
+            case 'arrival':
+                return 'Arrival';
+            case 'departure':
+                return 'Departure';
+            case 'inter-hotel':
+                return 'Inter-Hotel';
             default:
-                return "Transfer";
+                return 'Transfer';
         }
     };
     var handlePaxChange = function (newPaxData) {
@@ -175,14 +183,23 @@ var TransferLine = function (_a) {
         onDropoffChange === null || onDropoffChange === void 0 ? void 0 : onDropoffChange(location);
     };
     // Check if inputs are empty (when checkEmpty is true)
-    var isPaxEmpty = checkEmpty && (!internalPaxData ||
-        (internalPaxData.adults === 0 &&
-            internalPaxData.teens === 0 &&
-            internalPaxData.children === 0 &&
-            (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
+    var isPaxEmpty = checkEmpty &&
+        (!internalPaxData ||
+            (internalPaxData.adults === 0 &&
+                internalPaxData.teens === 0 &&
+                internalPaxData.children === 0 &&
+                (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
     var isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
     var isPickupEmpty = checkEmpty && !internalPickupPoint;
     var isDropoffEmpty = checkEmpty && !internalDropoffPoint;
-    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").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' : '' }) }), _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 })] }), _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 }) }), _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 }) })] }), showDelete && (_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" }) }) }))] })] }));
+    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 }) }), _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'
+                                        : 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" }) }) }))] })] }));
 };
 export default TransferLine;

package/dist/index.d.ts

@@ -17,8 +17,9 @@ export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
 export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
 export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
-export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { ActionDropdown, type ActionDropdownItem } from './components/molecules/ActionDropdown/ActionDropdown';
 export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
+export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -85,41 +86,43 @@ export { default as UserIcon } from './components/atoms/Icon/icons/User';
 export { priceFormatter } from './lib/price-formatter';
 export type { DividerProps } from './components/atoms/Divider/Divider';
 export type { FeatureRowProps } from './components/molecules/FeatureRow/FeatureRow';
-export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption, } from './components/molecules/LocationDropdown/LocationDropdown';
-export type { ServiceOption, ServiceSelectorProps, ServiceType, } from './components/molecules/ServiceSelector/ServiceSelector';
+export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption } from './components/molecules/LocationDropdown/LocationDropdown';
+export type { ServiceOption, ServiceSelectorProps, ServiceType } from './components/molecules/ServiceSelector/ServiceSelector';
 export type { StepperProps } from './components/molecules/Stepper/Stepper';
-export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './components/organisms/CarBookingCard/CarBookingCard';
-export type { CardContainerProps, CardContainerSpacing, } from './components/organisms/CardContainer/CardContainer';
+export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType } from './components/organisms/CarBookingCard/CarBookingCard';
+export type { CardContainerProps, CardContainerSpacing } from './components/organisms/CardContainer/CardContainer';
 export type { DateTimePickerProps } from './components/organisms/DateTimePicker/DateTimePicker';
 export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dialog';
 export type { FooterProps } from './components/organisms/Footer/Footer';
-export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps, } from './components/organisms/MultipleQuotationDocket';
-export type { ClientType, PaxData, PaxSelectorProps, } from './components/organisms/PaxSelector/PaxSelector';
-export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './components/organisms/RoundTrip/RoundTrip';
-export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps } from './components/organisms/MultipleQuotationDocket';
+export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
+export type { ClientType, PaxData, PaxSelectorProps } from './components/organisms/PaxSelector/PaxSelector';
+export type { RoundTripData, RoundTripProps, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
+export type { SearchBarTransferData, SearchBarTransferProps, TransferMode } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
-export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { TransferLineData, TransferLineProps, TransferType } from './components/organisms/TransferLine/TransferLine';
 export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
 export type { InputProps } from './components/atoms/Inputs/Input/Input';
 export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
-export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
+export type { AgeSelectorProps } from './components/molecules/AgeSelector/AgeSelector';
+export type { BreadcrumbsItem, BreadcrumbsProps } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { DocketPricesProps } from './components/molecules/DocketPrices/DocketPrices';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { PaxChipsProps, PaxCount } from './components/molecules/PaxChips/PaxChips';
 export type { PriceDisplayProps } from './components/molecules/PriceDisplay/PriceDisplay';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
-export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
+export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps } from './components/molecules/TableServiceItem';
 export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
 export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
 export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
 export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
 export type { ToastProps } from './components/molecules/Toast/Toast';
 export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
-export type { ComparisonData, DialogComparisonProps, MultiComparisonData, } from './components/organisms/DialogComparison/DialogComparison';
+export type { ComparisonData, DialogComparisonProps, MultiComparisonData } from './components/organisms/DialogComparison/DialogComparison';
 export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
 export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
-export type { FilterType, QuoteHeaderProps, } from './components/organisms/QuoteHeader/QuoteHeader';
-export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
-export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType, } from './types/docket/services.types';
+export type { FilterType, QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
+export type { TimelineProps, TimelineServices } from './components/organisms/Timeline/Timeline';
+export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType } from './types/docket/services.types';
 export * from './types/table';

package/dist/index.js

@@ -19,8 +19,9 @@ export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
 export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
 export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
 // Molecules - Composed components
-export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { ActionDropdown } from './components/molecules/ActionDropdown/ActionDropdown';
 export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
+export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -89,4 +90,5 @@ export { default as SettingsIcon } from './components/atoms/Icon/icons/Settings'
 export { default as UserIcon } from './components/atoms/Icon/icons/User';
 // Utils
 export { priceFormatter } from './lib/price-formatter';
+export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
 export * from './types/table';

package/dist/styles/components/molecule/age-selector.css

@@ -0,0 +1,216 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* AgeSelector Component Styles */
+
+.age-selector {
+  position: relative;
+  display: flex;
+  width: 5rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Label */
+
+.age-selector__label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: var(--dropdown-color-label-default,#262626);
+}
+
+.age-selector__required {
+  color: var(--chip-color-red-outline-foreground,#991b1b);
+}
+
+/* Container */
+
+.age-selector__container {
+  position: relative;
+  width: 100%;
+}
+
+/* Input wrapper - matching Figma design */
+
+.age-selector__input {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  cursor: default;
+}
+
+.age-selector__input:hover {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--open {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--default .age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Input field */
+
+.age-selector__input-field {
+  flex: 1 1 0%;
+  border-style: none;
+  background-color: #ffffff00;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--dropdown-color-foreground-value,#262626);
+  cursor: text;
+  min-width: 0;
+}
+
+.age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Dropdown button */
+
+.age-selector__dropdown-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-style: none;
+  background-color: #ffffff00;
+  margin: 0px;
+  padding: 0px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__dropdown-btn:hover {
+  opacity: 0.8;
+}
+
+/* Icon */
+
+.age-selector__icon {
+  color: var(--color-text-default,#262626);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__icon--open {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* Dropdown menu */
+
+.age-selector__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  right: 0px;
+  margin-top: 0.25rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  border-color: var(--color-border-subtle,#e5e5e5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  max-height: 12rem;
+  overflow-y: auto;
+  z-index: 50;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  animation: age-selector-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes age-selector-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown option */
+
+.age-selector__option {
+  width: 100%;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--color-text-default,#262626);
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.age-selector__option:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-hover,#115b5e);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+}
+
+/* Scrollbar styling */
+
+.age-selector__dropdown::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-track {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}