mautourco-components 0.2.99 → 0.2.101

package/dist/components/atoms/Inputs/Input/Input.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import Icon from '../../Icon/Icon';
 var Input = function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Input text' : _c, value = _a.value, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? 'trailing' : _f, _g = _a.type, type = _g === void 0 ? 'text' : _g, id = _a.id;
+    var inputRef = useRef(null);
     var baseClasses = 'input-field';
     var variantClasses = {
         default: 'input-field--default',
@@ -11,6 +13,12 @@ var Input = function (_a) {
         disabled: 'input-field--disabled',
     };
     var inputClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(icon ? "input-field--with-icon input-field--icon-".concat(iconPosition) : '', " ").concat(className).trim();
-    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
+    useEffect(function () {
+        setTimeout(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, [value]);
+    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { ref: inputRef, id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
 };
 export default Input;

package/dist/components/organisms/DateTimePicker/DateTimePicker.js

@@ -109,6 +109,6 @@ var DateTimePicker = function (_a) {
             ensurePopoverVisible(popoverContentRef, triggerRef, isOpen);
         }
     }, [isOpen]);
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { ref: triggerRef, children: _jsx(CalendarInput, { placeholder: placeholder, value: value, disabled: disabled, state: state, className: inputClassName, iconBGFull: iconBGFull, iconPosition: iconPosition, showChevron: showChevron, isOpen: isOpen, icon: icon }) }) }), _jsx(PopoverContent, { ref: popoverContentRef, className: "w-auto border-transparent !p-0", side: "bottom", align: "start", sideOffset: 8, avoidCollisions: false, children: _jsx(DateTime, { mode: mode, selectionMode: selectionMode, numberOfMonths: numberOfMonths, disableBeforeToday: disableBeforeToday, disableToday: disableToday, onChange: handleDtChange, defaultDateRange: selectedDateRange, defaultTime: selectedTime }) })] }));
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { ref: triggerRef, children: _jsx(CalendarInput, { placeholder: placeholder, value: value, disabled: disabled, state: state, className: inputClassName, iconBGFull: iconBGFull, iconPosition: iconPosition, showChevron: showChevron, isOpen: isOpen, icon: icon }) }) }), _jsx(PopoverContent, { ref: popoverContentRef, className: "w-auto border-transparent !p-0 transfer-calendar", side: "bottom", align: "start", sideOffset: 8, avoidCollisions: false, children: _jsx(DateTime, { mode: mode, selectionMode: selectionMode, numberOfMonths: numberOfMonths, disableBeforeToday: disableBeforeToday, disableToday: disableToday, onChange: handleDtChange, defaultDateRange: selectedDateRange, defaultTime: selectedTime }) })] }));
 };
 export default DateTimePicker;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.js

@@ -40,5 +40,5 @@ export function DialogDeleteConfirmMultiple(props) {
     useEffect(function () {
         setIsSelectAll(selectedQuotes.length === quotes.length);
     }, [selectedQuotes, quotes]);
-    return (_jsx(DialogDeleteConfirm.Wrapper, { onCancel: onCancel, onOk: handleDeleteQuotes, children: _jsxs("div", { className: "confirm-multiple", children: [_jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll, onChange: handleSelectAllQuotes, labelPosition: "leading", className: "confirm-multiple__all" }), _jsx("ul", { className: "mb-1", children: quotes.map(function (quote) { return (_jsx("li", { children: _jsx(Checkbox, { label: quote.name, checked: selectedQuotes.includes(quote.id), onChange: function () { return handleSelectQuote(quote); }, labelPosition: "leading" }) }, quote.id)); }) }), isSelectAll && (_jsx(Toast, { text: "Caution: This would delete all quotations created.", type: "warning", showIcon: false }))] }) }));
+    return (_jsx(DialogDeleteConfirm.Wrapper, { onCancel: onCancel, onOk: handleDeleteQuotes, okDisabled: selectedQuotes.length === 0, children: _jsxs("div", { className: "confirm-multiple", children: [_jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll, onChange: handleSelectAllQuotes, labelPosition: "leading", className: "confirm-multiple__all" }), _jsx("ul", { className: "mb-1", children: quotes.map(function (quote) { return (_jsx("li", { children: _jsx(Checkbox, { label: quote.name, checked: selectedQuotes.includes(quote.id), onChange: function () { return handleSelectQuote(quote); }, labelPosition: "leading" }) }, quote.id)); }) }), isSelectAll && (_jsx(Toast, { text: "Caution: This would delete all quotations created.", type: "warning", showIcon: false }))] }) }));
 }

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.d.ts

@@ -6,5 +6,6 @@ export interface DialogDeleteConfirmWrapperProps {
     onOk?: () => void;
     okText?: string;
     children: React.ReactNode;
+    okDisabled?: boolean;
 }
 export declare function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Button from '../../atoms/Button/Button';
 export function DialogDeleteConfirmWrapper(props) {
-    var onCancel = props.onCancel, _a = props.cancelText, cancelText = _a === void 0 ? 'Cancel' : _a, _b = props.okVariant, okVariant = _b === void 0 ? 'destructive' : _b, onOk = props.onOk, _c = props.okText, okText = _c === void 0 ? 'Delete' : _c, children = props.children;
-    return (_jsxs("div", { className: "space-y-9", children: [children, _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [_jsx(Button, { variant: "outline-secondary", onClick: onCancel, size: "sm", children: cancelText }), _jsx(Button, { variant: okVariant, onClick: onOk, size: "sm", children: okText })] })] }));
+    var onCancel = props.onCancel, _a = props.cancelText, cancelText = _a === void 0 ? 'Cancel' : _a, _b = props.okVariant, okVariant = _b === void 0 ? 'destructive' : _b, onOk = props.onOk, _c = props.okText, okText = _c === void 0 ? 'Delete' : _c, children = props.children, okDisabled = props.okDisabled;
+    return (_jsxs("div", { className: "space-y-9", children: [children, _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [_jsx(Button, { variant: "outline-secondary", onClick: onCancel, size: "sm", children: cancelText }), _jsx(Button, { variant: okVariant, onClick: onOk, size: "sm", disabled: okDisabled, children: okText })] })] }));
 }

package/dist/components/organisms/DialogQuoteRename/DialogQuoteRename.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
 import { Text } from '../../atoms/Typography/Typography';
@@ -10,5 +10,8 @@ export function DialogQuoteRename(props) {
     var handleQuoteNameChange = function (e) {
         setValue(e.target.value);
     };
-    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Rename Quotation", className: "!max-w-[500px]", children: _jsxs("div", { className: "space-y-9", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "quote-name", children: _jsx(Text, { as: "span", size: "sm", children: "Quotation name" }) }), _jsx(Input, { id: "quote-name", value: value, onChange: handleQuoteNameChange })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 pb-2", children: [_jsx(Button, { variant: "outline-secondary", onClick: function () { return setOpen(false); }, size: "sm", children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: function () { return onSubmit(value); }, size: "sm", children: "Save changes" })] })] }) }));
+    useEffect(function () {
+        setValue(quoteName);
+    }, [quoteName]);
+    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Rename Quotation", className: "!max-w-[500px]", children: _jsxs("div", { className: "space-y-9", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "quote-name", children: _jsx(Text, { as: "span", size: "sm", children: "Quotation name" }) }), _jsx(Input, { id: "quote-name", value: value, onChange: handleQuoteNameChange, placeholder: "Enter your quote name" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-4 pb-2", children: [_jsx(Button, { variant: "outline-secondary", onClick: function () { return setOpen(false); }, size: "sm", children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: function () { return onSubmit(value); }, size: "sm", children: "Save changes" })] })] }) }));
 }

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

@@ -1,9 +1,8 @@
-import React from "react";
-import "../../../styles/components/organism/search-bar-transfer.css";
-import { LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
-import { RoundTripData } from "../RoundTrip/RoundTrip";
-import { TransferLineData } from "../TransferLine/TransferLine";
-export type TransferMode = "roundtrip" | "custom";
+import '../../../styles/components/organism/search-bar-transfer.css';
+import { LocationGroup, LocationOption } from '../../molecules/LocationDropdown/LocationDropdown';
+import { RoundTripData } from '../RoundTrip/RoundTrip';
+import { TransferLineData } from '../TransferLine/TransferLine';
+export type TransferMode = 'roundtrip' | 'custom';
 export interface SearchBarTransferData {
     mode: TransferMode;
     sameVehicle: boolean;
@@ -35,5 +34,5 @@ export interface SearchBarTransferProps {
     /** Whether to scroll to the input when the calendar opens */
     scrollOnOpen?: boolean;
 }
-declare const SearchBarTransfer: React.FC<SearchBarTransferProps>;
+declare function SearchBarTransfer({ mode: initialMode, locations, defaultRoundTripData, defaultTransferLines, defaultSameVehicle, onSearch, onChange, onRemove, className, scrollOnOpen, }: SearchBarTransferProps): import("react/jsx-runtime").JSX.Element;
 export default SearchBarTransfer;

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

@@ -19,20 +19,20 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import "../../../styles/components/organism/search-bar-transfer.css";
-import Button from "../../atoms/Button/Button";
-import Checkbox from "../../atoms/Checkbox/Checkbox";
-import Icon from "../../atoms/Icon/Icon";
-import SegmentedButton from "../../atoms/SegmentedButton/SegmentedButton";
-import { Heading, Text } from "../../atoms/Typography/Typography";
-import Toast from "../../molecules/Toast/Toast";
-import { DEFAULT_PAX_DATA_WITH_ADULTS } from "../PaxSelector/PaxSelector";
-import RoundTrip from "../RoundTrip/RoundTrip";
-import TransferLine from "../TransferLine/TransferLine";
+import React, { useEffect, useState } from 'react';
+import '../../../styles/components/organism/search-bar-transfer.css';
+import Button from '../../atoms/Button/Button';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import Icon from '../../atoms/Icon/Icon';
+import SegmentedButton from '../../atoms/SegmentedButton/SegmentedButton';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+import Toast from '../../molecules/Toast/Toast';
+import { DEFAULT_PAX_DATA_WITH_ADULTS } from '../PaxSelector/PaxSelector';
+import RoundTrip from '../RoundTrip/RoundTrip';
+import TransferLine from '../TransferLine/TransferLine';
 var transferIdCounter = 0;
-var SearchBarTransfer = function (_a) {
-    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;
+function SearchBarTransfer(_a) {
+    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;
@@ -55,15 +55,15 @@ var SearchBarTransfer = function (_a) {
         var data = {
             mode: mode,
             sameVehicle: sameVehicle,
-            roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-            transferLines: mode === "custom" ? transferLines : undefined,
+            roundTripData: mode === 'roundtrip' ? roundTripData : undefined,
+            transferLines: mode === 'custom' ? transferLines : undefined,
         };
         onChange === null || onChange === void 0 ? void 0 : onChange(data);
     }, [mode, sameVehicle, roundTripData, transferLines, onChange]);
     // Mode options for SegmentedButton
     var modeOptions = [
-        { value: "roundtrip", label: "Round trip" },
-        { value: "custom", label: "Custom transfer" },
+        { value: 'roundtrip', label: 'Round trip' },
+        { value: 'custom', label: 'Custom transfer' },
     ];
     // Helper function to check if pax data is at default state (unchanged by user)
     var isDefaultPaxData = function (paxData) {
@@ -107,7 +107,7 @@ var SearchBarTransfer = function (_a) {
         // Create arrival transfer
         var arrivalTransfer = {
             id: generateTransferId(),
-            type: "arrival",
+            type: 'arrival',
             paxData: data.paxData,
             transferDate: data.arrivalDate,
             pickupPoint: data.pickupDropoffPoint,
@@ -117,7 +117,7 @@ var SearchBarTransfer = function (_a) {
         // Create departure transfer
         var departureTransfer = {
             id: generateTransferId(),
-            type: "departure",
+            type: 'departure',
             paxData: data.paxData,
             transferDate: data.departureDate,
             pickupPoint: data.accommodation,
@@ -131,7 +131,7 @@ var SearchBarTransfer = function (_a) {
         var transferMode = newMode;
         if (transferMode === mode)
             return;
-        if (transferMode === "custom" && mode === "roundtrip") {
+        if (transferMode === 'custom' && mode === 'roundtrip') {
             // When switching from roundtrip to custom mode
             if (hasRoundtripData(roundTripData)) {
                 // Half/full Roundtrip data → prefilled arrival and departure (2h)
@@ -144,7 +144,7 @@ var SearchBarTransfer = function (_a) {
             }
             setRoundTripData(undefined);
         }
-        else if (transferMode === "roundtrip" && mode === "custom") {
+        else if (transferMode === 'roundtrip' && mode === 'custom') {
             // Reset everything when switching to roundtrip
             setTransferLines([]);
             setRoundTripData(undefined);
@@ -174,16 +174,16 @@ var SearchBarTransfer = function (_a) {
         };
         if (transferLines.length > 0) {
             // If adding inter-hotel, set pickup point to the dropoff of latest arrival
-            if (type === "inter-hotel") {
-                var arrivalTransfers = transferLines.filter(function (line) { return line.type === "arrival"; });
+            if (type === 'inter-hotel') {
+                var arrivalTransfers = transferLines.filter(function (line) { return line.type === 'arrival'; });
                 if (arrivalTransfers.length > 0) {
                     var latestArrival = arrivalTransfers[arrivalTransfers.length - 1];
                     newTransfer.pickupPoint = latestArrival.dropoffPoint;
                 }
             }
             // If adding departure, set pickup point to the dropoff of latest arrival or inter-hotel
-            if (type === "departure") {
-                var arrivalAndInterHotelTransfers = transferLines.filter(function (line) { return line.type === "arrival" || line.type === "inter-hotel"; });
+            if (type === 'departure') {
+                var arrivalAndInterHotelTransfers = transferLines.filter(function (line) { return line.type === 'arrival' || line.type === 'inter-hotel'; });
                 if (arrivalAndInterHotelTransfers.length > 0) {
                     var latestTransfer = arrivalAndInterHotelTransfers[arrivalAndInterHotelTransfers.length - 1];
                     newTransfer.pickupPoint = latestTransfer.dropoffPoint;
@@ -193,7 +193,7 @@ var SearchBarTransfer = function (_a) {
         setTransferLines(__spreadArray(__spreadArray([], transferLines, true), [newTransfer], false));
     };
     // 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" })] })); };
+    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 (switches to custom and adds new transfer)
     var handleAddTransferFromRoundTrip = function (type) {
         var newTransferLines = [];
@@ -206,22 +206,22 @@ var SearchBarTransfer = function (_a) {
                 type: type,
                 paxData: roundTripData.paxData,
                 // Use the appropriate date based on transfer type
-                transferDate: type === "arrival"
+                transferDate: type === 'arrival'
                     ? roundTripData.arrivalDate
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.departureDate
                         : undefined,
                 // Use appropriate pickup/dropoff points based on transfer type
-                pickupPoint: type === "arrival"
+                pickupPoint: type === 'arrival'
                     ? roundTripData.pickupDropoffPoint
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.accommodation
-                        : type === "inter-hotel"
+                        : type === 'inter-hotel'
                             ? roundTripData.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
                             : undefined,
-                dropoffPoint: type === "arrival"
+                dropoffPoint: type === 'arrival'
                     ? roundTripData.accommodation
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.pickupDropoffPoint
                         : undefined,
             };
@@ -234,22 +234,22 @@ var SearchBarTransfer = function (_a) {
                 type: type,
                 paxData: roundTripData.paxData,
                 // Use the appropriate date based on transfer type
-                transferDate: type === "arrival"
+                transferDate: type === 'arrival'
                     ? roundTripData.arrivalDate
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.departureDate
                         : undefined,
                 // Use appropriate pickup/dropoff points based on transfer type
-                pickupPoint: type === "arrival"
+                pickupPoint: type === 'arrival'
                     ? roundTripData.pickupDropoffPoint
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.accommodation
-                        : type === "inter-hotel"
+                        : type === 'inter-hotel'
                             ? roundTripData.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
                             : undefined,
-                dropoffPoint: type === "arrival"
+                dropoffPoint: type === 'arrival'
                     ? roundTripData.accommodation
-                    : type === "departure"
+                    : type === 'departure'
                         ? roundTripData.pickupDropoffPoint
                         : undefined,
             };
@@ -266,7 +266,7 @@ var SearchBarTransfer = function (_a) {
         // Set the transfers and switch to custom mode
         setTransferLines(newTransferLines);
         setRoundTripData(undefined);
-        setMode("custom");
+        setMode('custom');
         setError(null);
     };
     // Handle transfer line data change
@@ -320,9 +320,9 @@ var SearchBarTransfer = function (_a) {
     };
     // Validate data
     var validateData = function () {
-        if (mode === "roundtrip") {
+        if (mode === 'roundtrip') {
             if (!roundTripData) {
-                setError("Please fill in all the transfer details.");
+                setError('Please fill in all the transfer details.');
                 return false;
             }
             // Check if required fields are filled
@@ -330,18 +330,18 @@ var SearchBarTransfer = function (_a) {
                 roundTripData.arrivalDate === roundTripData.departureDate ||
                 !roundTripData.pickupDropoffPoint ||
                 !roundTripData.accommodation) {
-                setError("Please fill in all the transfer details.");
+                setError('Please fill in all the transfer details.');
                 return false;
             }
             // Check if all ages are filled
             if (!areAllAgesFilled(roundTripData.paxData)) {
-                setError("Please fill in all the transfer details.");
+                setError('Please fill in all the transfer details.');
                 return false;
             }
         }
         else {
             if (transferLines.length === 0) {
-                setError("Please add at least one transfer.");
+                setError('Please add at least one transfer.');
                 return false;
             }
             // Check if all transfer lines have required data
@@ -351,12 +351,12 @@ var SearchBarTransfer = function (_a) {
                     !line.transferDate ||
                     !line.pickupPoint ||
                     !line.dropoffPoint) {
-                    setError("Please fill in all the transfer details.");
+                    setError('Please fill in all the transfer details.');
                     return false;
                 }
                 // Check if all ages are filled for this line
                 if (!areAllAgesFilled(line.paxData)) {
-                    setError("Please fill in all the transfer details.");
+                    setError('Please fill in all the transfer details.');
                     return false;
                 }
             }
@@ -371,32 +371,32 @@ var SearchBarTransfer = function (_a) {
             var data = {
                 mode: mode,
                 sameVehicle: sameVehicle,
-                roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-                transferLines: mode === "custom" ? transferLines : undefined,
+                roundTripData: mode === 'roundtrip' ? roundTripData : undefined,
+                transferLines: mode === 'custom' ? transferLines : undefined,
             };
             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: 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 }, "roundtrip-".concat(validationTrigger)), _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 }, "roundtrip-".concat(validationTrigger)), _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: [],
                                 departure: [],
-                                "inter-hotel": [],
+                                'inter-hotel': [],
                             };
                             transferLines.forEach(function (line) {
                                 groupedTransfers[line.type].push(line);
                             });
                             // Get the order of non-empty groups
-                            var typeOrder = ["arrival", "inter-hotel", "departure"];
+                            var typeOrder = ['arrival', 'inter-hotel', 'departure'];
                             var nonEmptyGroups = typeOrder.filter(function (type) { return groupedTransfers[type].length > 0; });
                             // Category labels and icons
                             var categoryInfo = {
-                                arrival: { label: "Arrival", icon: "arrival" },
-                                departure: { label: "Departure", icon: "departure" },
-                                "inter-hotel": { label: "Inter-Hotel", icon: "building" },
+                                arrival: { label: 'Arrival', icon: 'arrival' },
+                                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) { 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 }, "".concat(line.id, "-").concat(validationTrigger))); }), 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" })] })] })] }));
-};
+                        })() }))] })), _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/package.json

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

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute } from 'react';
+import React, { HTMLInputTypeAttribute, useEffect, useRef } from 'react';
 import Icon, { IconName } from '../../Icon/Icon';
 
 export interface InputProps {
@@ -30,6 +30,8 @@ const Input: React.FC<InputProps> = ({
   type = 'text',
   id,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const baseClasses = 'input-field';
   const variantClasses = {
     default: 'input-field--default',
@@ -42,6 +44,12 @@ const Input: React.FC<InputProps> = ({
   const inputClasses =
     `${baseClasses} ${variantClasses[variant]} ${icon ? `input-field--with-icon input-field--icon-${iconPosition}` : ''} ${className}`.trim();
 
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [value]);
+
   return (
     <div className={`input-wrapper ${icon ? 'input-wrapper--with-icon' : ''}`.trim()}>
       {icon && iconPosition === 'leading' && (
@@ -50,6 +58,7 @@ const Input: React.FC<InputProps> = ({
         </span>
       )}
       <input
+        ref={inputRef}
         id={id}
         type={type}
         className={inputClasses}

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -181,9 +181,9 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
         </div>
       </PopoverTrigger>
 
-      <PopoverContent 
+      <PopoverContent
         ref={popoverContentRef}
-        className="w-auto border-transparent !p-0"
+        className="w-auto border-transparent !p-0 transfer-calendar"
         side="bottom"
         align="start"
         sideOffset={8}

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.tsx

@@ -48,7 +48,10 @@ export function DialogDeleteConfirmMultiple(props: DialogDeleteConfirmMultiplePr
   }, [selectedQuotes, quotes]);
 
   return (
-    <DialogDeleteConfirm.Wrapper onCancel={onCancel} onOk={handleDeleteQuotes}>
+    <DialogDeleteConfirm.Wrapper
+      onCancel={onCancel}
+      onOk={handleDeleteQuotes}
+      okDisabled={selectedQuotes.length === 0}>
       <div className="confirm-multiple">
         <Checkbox
           label="Select all quotations"

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.tsx

@@ -7,6 +7,7 @@ export interface DialogDeleteConfirmWrapperProps {
   onOk?: () => void;
   okText?: string;
   children: React.ReactNode;
+  okDisabled?: boolean;
 }
 
 export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProps) {
@@ -17,6 +18,7 @@ export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProp
     onOk,
     okText = 'Delete',
     children,
+    okDisabled,
   } = props;
   return (
     <div className="space-y-9">
@@ -25,7 +27,7 @@ export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProp
         <Button variant="outline-secondary" onClick={onCancel} size="sm">
           {cancelText}
         </Button>
-        <Button variant={okVariant} onClick={onOk} size="sm">
+        <Button variant={okVariant} onClick={onOk} size="sm" disabled={okDisabled}>
           {okText}
         </Button>
       </div>

package/src/components/organisms/DialogQuoteRename/DialogQuoteRename.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
 import { Text } from '../../atoms/Typography/Typography';
@@ -19,6 +19,10 @@ export function DialogQuoteRename(props: DialogQuoteRenameProps) {
     setValue(e.target.value);
   };
 
+  useEffect(() => {
+    setValue(quoteName);
+  }, [quoteName]);
+
   return (
     <DialogBookingConfirm
       open={open}
@@ -32,7 +36,12 @@ export function DialogQuoteRename(props: DialogQuoteRenameProps) {
               Quotation name
             </Text>
           </label>
-          <Input id="quote-name" value={value} onChange={handleQuoteNameChange} />
+          <Input
+            id="quote-name"
+            value={value}
+            onChange={handleQuoteNameChange}
+            placeholder="Enter your quote name"
+          />
         </div>
         <div className="grid grid-cols-2 gap-x-4 pb-2">
           <Button variant="outline-secondary" onClick={() => setOpen(false)} size="sm">

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

@@ -1,20 +1,25 @@
-import React, { useEffect, useState } from "react";
-import "../../../styles/components/organism/search-bar-transfer.css";
-import Button from "../../atoms/Button/Button";
-import Checkbox from "../../atoms/Checkbox/Checkbox";
-import Icon, { IconName } from "../../atoms/Icon/Icon";
-import SegmentedButton, { SegmentedButtonOption } from "../../atoms/SegmentedButton/SegmentedButton";
-import { Heading, Text } from "../../atoms/Typography/Typography";
-import { LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
-import Toast from "../../molecules/Toast/Toast";
-import { DEFAULT_PAX_DATA_WITH_ADULTS } from "../PaxSelector/PaxSelector";
-import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
+import React, { useEffect, useState } from 'react';
+import '../../../styles/components/organism/search-bar-transfer.css';
+import Button from '../../atoms/Button/Button';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import SegmentedButton, {
+  SegmentedButtonOption,
+} from '../../atoms/SegmentedButton/SegmentedButton';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+import {
+  LocationGroup,
+  LocationOption,
+} from '../../molecules/LocationDropdown/LocationDropdown';
+import Toast from '../../molecules/Toast/Toast';
+import { DEFAULT_PAX_DATA_WITH_ADULTS } from '../PaxSelector/PaxSelector';
+import RoundTrip, { RoundTripData } from '../RoundTrip/RoundTrip';
 import TransferLine, {
-    TransferLineData,
-    TransferType,
-} from "../TransferLine/TransferLine";
+  TransferLineData,
+  TransferType,
+} from '../TransferLine/TransferLine';
 
-export type TransferMode = "roundtrip" | "custom";
+export type TransferMode = 'roundtrip' | 'custom';
 
 export interface SearchBarTransferData {
   mode: TransferMode;
@@ -51,8 +56,8 @@ export interface SearchBarTransferProps {
 
 let transferIdCounter = 0;
 
-const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
-  mode: initialMode = "roundtrip",
+function SearchBarTransfer({
+  mode: initialMode = 'roundtrip',
   locations = { options: [], groups: [] },
   defaultRoundTripData,
   defaultTransferLines,
@@ -60,9 +65,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   onSearch,
   onChange,
   onRemove,
-  className = "",
+  className = '',
   scrollOnOpen = false,
-}) => {
+}: SearchBarTransferProps) {
   // Generate unique ID for transfer lines
   const generateTransferId = () => {
     transferIdCounter += 1;
@@ -80,7 +85,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   const [mode, setMode] = useState<TransferMode>(initialMode);
   const [sameVehicle, setSameVehicle] = useState(defaultSameVehicle);
-  const [roundTripData, setRoundTripData] = useState<RoundTripData | undefined>(defaultRoundTripData);
+  const [roundTripData, setRoundTripData] = useState<RoundTripData | undefined>(
+    defaultRoundTripData
+  );
   const [transferLines, setTransferLines] = useState<TransferLineData[]>(
     initializeTransferLines(defaultTransferLines)
   );
@@ -92,16 +99,16 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     const data: SearchBarTransferData = {
       mode,
       sameVehicle,
-      roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-      transferLines: mode === "custom" ? transferLines : undefined,
+      roundTripData: mode === 'roundtrip' ? roundTripData : undefined,
+      transferLines: mode === 'custom' ? transferLines : undefined,
     };
     onChange?.(data);
   }, [mode, sameVehicle, roundTripData, transferLines, onChange]);
 
   // Mode options for SegmentedButton
   const modeOptions: SegmentedButtonOption[] = [
-    { value: "roundtrip", label: "Round trip" },
-    { value: "custom", label: "Custom transfer" },
+    { value: 'roundtrip', label: 'Round trip' },
+    { value: 'custom', label: 'Custom transfer' },
   ];
 
   // Helper function to check if pax data is at default state (unchanged by user)
@@ -122,17 +129,20 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     // Check if pax data is not default (user actually changed it)
     const hasNonDefaultPax = data.paxData && !isDefaultPaxData(data.paxData);
 
-    const airportDroppOffPoint = locations.options?.find(option => option.type === 'airport' || option.type === 'port');
+    const airportDroppOffPoint = locations.options?.find(
+      (option) => option.type === 'airport' || option.type === 'port'
+    );
     // Check if pickupDropoffPoint has changed from default
-    const hasChangedPickupDropoff = data.pickupDropoffPoint?.id !== airportDroppOffPoint?.id;
+    const hasChangedPickupDropoff =
+      data.pickupDropoffPoint?.id !== airportDroppOffPoint?.id;
 
     return !!(
-        hasNonDefaultPax ||
-        data.arrivalDate ||
-        data.departureDate ||
-        hasChangedPickupDropoff ||
-        data.accommodation
-      );
+      hasNonDefaultPax ||
+      data.arrivalDate ||
+      data.departureDate ||
+      hasChangedPickupDropoff ||
+      data.accommodation
+    );
   };
 
   // Helper function to check if ALL roundtrip data fields are filled
@@ -154,7 +164,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     // Create arrival transfer
     const arrivalTransfer: TransferLineData = {
       id: generateTransferId(),
-      type: "arrival",
+      type: 'arrival',
       paxData: data.paxData,
       transferDate: data.arrivalDate,
       pickupPoint: data.pickupDropoffPoint,
@@ -165,7 +175,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     // Create departure transfer
     const departureTransfer: TransferLineData = {
       id: generateTransferId(),
-      type: "departure",
+      type: 'departure',
       paxData: data.paxData,
       transferDate: data.departureDate,
       pickupPoint: data.accommodation,
@@ -181,7 +191,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     const transferMode = newMode as TransferMode;
     if (transferMode === mode) return;
 
-    if (transferMode === "custom" && mode === "roundtrip") {
+    if (transferMode === 'custom' && mode === 'roundtrip') {
       // When switching from roundtrip to custom mode
       if (hasRoundtripData(roundTripData)) {
         // Half/full Roundtrip data → prefilled arrival and departure (2h)
@@ -192,7 +202,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         setTransferLines([]);
       }
       setRoundTripData(undefined);
-    } else if (transferMode === "roundtrip" && mode === "custom") {
+    } else if (transferMode === 'roundtrip' && mode === 'custom') {
       // Reset everything when switching to roundtrip
       setTransferLines([]);
       setRoundTripData(undefined);
@@ -205,7 +215,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   // Get the last inputted pax data from existing transfer lines
   const getLastInputtedPaxData = () => {
     // Find the last transfer line that has pax data
-    
+
     for (let i = transferLines.length - 1; i >= 0; i--) {
       if (transferLines[i].paxData) {
         return transferLines[i].paxData;
@@ -228,21 +238,22 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
     if (transferLines.length > 0) {
       // If adding inter-hotel, set pickup point to the dropoff of latest arrival
-      if (type === "inter-hotel") {
-        const arrivalTransfers = transferLines.filter(line => line.type === "arrival");
+      if (type === 'inter-hotel') {
+        const arrivalTransfers = transferLines.filter((line) => line.type === 'arrival');
         if (arrivalTransfers.length > 0) {
           const latestArrival = arrivalTransfers[arrivalTransfers.length - 1];
           newTransfer.pickupPoint = latestArrival.dropoffPoint;
         }
       }
-      
+
       // If adding departure, set pickup point to the dropoff of latest arrival or inter-hotel
-      if (type === "departure") {
+      if (type === 'departure') {
         const arrivalAndInterHotelTransfers = transferLines.filter(
-          line => line.type === "arrival" || line.type === "inter-hotel"
+          (line) => line.type === 'arrival' || line.type === 'inter-hotel'
         );
         if (arrivalAndInterHotelTransfers.length > 0) {
-          const latestTransfer = arrivalAndInterHotelTransfers[arrivalAndInterHotelTransfers.length - 1];
+          const latestTransfer =
+            arrivalAndInterHotelTransfers[arrivalAndInterHotelTransfers.length - 1];
           newTransfer.pickupPoint = latestTransfer.dropoffPoint;
         }
       }
@@ -258,24 +269,21 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         variant="outline-secondary"
         size="sm"
         leadingIcon="plus"
-        onClick={() => onClick("arrival")}
-      >
+        onClick={() => onClick('arrival')}>
         Add Arrival
       </Button>
       <Button
         variant="outline-secondary"
         size="sm"
         leadingIcon="plus"
-        onClick={() => onClick("departure")}
-      >
+        onClick={() => onClick('departure')}>
         Add Departure
       </Button>
       <Button
         variant="outline-secondary"
         size="sm"
         leadingIcon="plus"
-        onClick={() => onClick("inter-hotel")}
-      >
+        onClick={() => onClick('inter-hotel')}>
         Add Inter-Hotel
       </Button>
     </div>
@@ -288,61 +296,67 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     if (isRoundtripDataComplete(roundTripData)) {
       // Half/full Roundtrip data → prefilled arrival & departure + Adding the appropriate transfer type (2h)
       const prefilledLines = createPrefilledTransferLines(roundTripData!);
-      
+
       // Add the new transfer of the clicked type with prefilled data
       const newTransfer: TransferLineData = {
         id: generateTransferId(),
         type,
         paxData: roundTripData!.paxData,
         // Use the appropriate date based on transfer type
-        transferDate: type === "arrival" 
-          ? roundTripData!.arrivalDate 
-          : type === "departure" 
-            ? roundTripData!.departureDate 
-            : undefined,
+        transferDate:
+          type === 'arrival'
+            ? roundTripData!.arrivalDate
+            : type === 'departure'
+              ? roundTripData!.departureDate
+              : undefined,
         // Use appropriate pickup/dropoff points based on transfer type
-        pickupPoint: type === "arrival" 
-          ? roundTripData!.pickupDropoffPoint 
-          : type === "departure" 
-            ? roundTripData!.accommodation 
-            : type === "inter-hotel"
-              ? roundTripData!.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
+        pickupPoint:
+          type === 'arrival'
+            ? roundTripData!.pickupDropoffPoint
+            : type === 'departure'
+              ? roundTripData!.accommodation
+              : type === 'inter-hotel'
+                ? roundTripData!.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
+                : undefined,
+        dropoffPoint:
+          type === 'arrival'
+            ? roundTripData!.accommodation
+            : type === 'departure'
+              ? roundTripData!.pickupDropoffPoint
               : undefined,
-        dropoffPoint: type === "arrival" 
-          ? roundTripData!.accommodation 
-          : type === "departure" 
-            ? roundTripData!.pickupDropoffPoint 
-            : undefined,
       };
-      
+
       // Combine prefilled lines with the new transfer
       newTransferLines = [...prefilledLines, newTransfer];
     } else if (hasRoundtripData(roundTripData)) {
-        const newTransfer: TransferLineData = {
-            id: generateTransferId(),
-            type,
-            paxData: roundTripData!.paxData,
-            // Use the appropriate date based on transfer type
-            transferDate: type === "arrival" 
-              ? roundTripData!.arrivalDate 
-              : type === "departure" 
-                ? roundTripData!.departureDate 
-                : undefined,
-            // Use appropriate pickup/dropoff points based on transfer type
-            pickupPoint: type === "arrival" 
-              ? roundTripData!.pickupDropoffPoint 
-              : type === "departure" 
-                ? roundTripData!.accommodation 
-                : type === "inter-hotel"
-                  ? roundTripData!.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
-                  : undefined,
-            dropoffPoint: type === "arrival" 
-              ? roundTripData!.accommodation 
-              : type === "departure" 
-                ? roundTripData!.pickupDropoffPoint 
+      const newTransfer: TransferLineData = {
+        id: generateTransferId(),
+        type,
+        paxData: roundTripData!.paxData,
+        // Use the appropriate date based on transfer type
+        transferDate:
+          type === 'arrival'
+            ? roundTripData!.arrivalDate
+            : type === 'departure'
+              ? roundTripData!.departureDate
+              : undefined,
+        // Use appropriate pickup/dropoff points based on transfer type
+        pickupPoint:
+          type === 'arrival'
+            ? roundTripData!.pickupDropoffPoint
+            : type === 'departure'
+              ? roundTripData!.accommodation
+              : type === 'inter-hotel'
+                ? roundTripData!.accommodation // Inter-hotel pickup = arrival's dropoff (accommodation)
                 : undefined,
-          };
-          newTransferLines = [newTransfer];
+        dropoffPoint:
+          type === 'arrival'
+            ? roundTripData!.accommodation
+            : type === 'departure'
+              ? roundTripData!.pickupDropoffPoint
+              : undefined,
+      };
+      newTransferLines = [newTransfer];
     } else {
       // Empty Roundtrip data → Adding the appropriate transfer type (1h)
       const newTransfer: TransferLineData = {
@@ -355,7 +369,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     // Set the transfers and switch to custom mode
     setTransferLines(newTransferLines);
     setRoundTripData(undefined);
-    setMode("custom");
+    setMode('custom');
     setError(null);
   };
 
@@ -370,22 +384,22 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   const handleDeleteTransferLine = (id: string) => {
     const index = transferLines.findIndex((line) => line.id === id);
     const transferLine = transferLines.find((line) => line.id === id);
-    
+
     if (index !== -1 && transferLine) {
       onRemove?.(index, transferLine);
     }
-    
+
     setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
   };
 
   // Helper function to check if all ages are filled for pax data
-  const areAllAgesFilled = (paxData: { 
-    teens: number; 
-    children: number; 
-    infants: number; 
-    teenAges?: number[]; 
-    childAges?: number[]; 
-    infantAges?: number[] 
+  const areAllAgesFilled = (paxData: {
+    teens: number;
+    children: number;
+    infants: number;
+    teenAges?: number[];
+    childAges?: number[];
+    infantAges?: number[];
   }): boolean => {
     // Check teen ages
     if (paxData.teens > 0) {
@@ -416,9 +430,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   // Validate data
   const validateData = (): boolean => {
-    if (mode === "roundtrip") {
+    if (mode === 'roundtrip') {
       if (!roundTripData) {
-        setError("Please fill in all the transfer details.");
+        setError('Please fill in all the transfer details.');
         return false;
       }
       // Check if required fields are filled
@@ -428,17 +442,17 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         !roundTripData.pickupDropoffPoint ||
         !roundTripData.accommodation
       ) {
-        setError("Please fill in all the transfer details.");
+        setError('Please fill in all the transfer details.');
         return false;
       }
       // Check if all ages are filled
       if (!areAllAgesFilled(roundTripData.paxData)) {
-        setError("Please fill in all the transfer details.");
+        setError('Please fill in all the transfer details.');
         return false;
       }
     } else {
       if (transferLines.length === 0) {
-        setError("Please add at least one transfer.");
+        setError('Please add at least one transfer.');
         return false;
       }
       // Check if all transfer lines have required data
@@ -449,12 +463,12 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
           !line.pickupPoint ||
           !line.dropoffPoint
         ) {
-          setError("Please fill in all the transfer details.");
+          setError('Please fill in all the transfer details.');
           return false;
         }
         // Check if all ages are filled for this line
         if (!areAllAgesFilled(line.paxData)) {
-          setError("Please fill in all the transfer details.");
+          setError('Please fill in all the transfer details.');
           return false;
         }
       }
@@ -465,14 +479,14 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   // Handle search
   const handleSearch = () => {
-    setValidationTrigger(prev => prev + 1);
-    
+    setValidationTrigger((prev) => prev + 1);
+
     if (validateData()) {
       const data: SearchBarTransferData = {
         mode,
         sameVehicle,
-        roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-        transferLines: mode === "custom" ? transferLines : undefined,
+        roundTripData: mode === 'roundtrip' ? roundTripData : undefined,
+        transferLines: mode === 'custom' ? transferLines : undefined,
       };
       onSearch?.(data);
     }
@@ -498,7 +512,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
       </div>
 
       {/* Content based on mode */}
-      {mode === "roundtrip" ? (
+      {mode === 'roundtrip' ? (
         <>
           <RoundTrip
             key={`roundtrip-${validationTrigger}`}
@@ -522,7 +536,12 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         <>
           {/* Transfer type selector */}
           <div className="search-bar-transfer__transfer-type">
-            <Text size="lg" variant="bold" color="subtle" as="div" className="search-bar-transfer__transfer-type-label">
+            <Text
+              size="lg"
+              variant="bold"
+              color="subtle"
+              as="div"
+              className="search-bar-transfer__transfer-type-label">
               Select a transfer type you want to add
             </Text>
             {renderTransferTypeButtons(handleAddTransfer)}
@@ -549,7 +568,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                 const groupedTransfers: { [key in TransferType]: TransferLineData[] } = {
                   arrival: [],
                   departure: [],
-                  "inter-hotel": [],
+                  'inter-hotel': [],
                 };
 
                 transferLines.forEach((line) => {
@@ -557,14 +576,18 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                 });
 
                 // Get the order of non-empty groups
-                const typeOrder: TransferType[] = ["arrival", "inter-hotel", "departure"];
-                const nonEmptyGroups = typeOrder.filter((type) => groupedTransfers[type].length > 0);
+                const typeOrder: TransferType[] = ['arrival', 'inter-hotel', 'departure'];
+                const nonEmptyGroups = typeOrder.filter(
+                  (type) => groupedTransfers[type].length > 0
+                );
 
                 // Category labels and icons
-                const categoryInfo: { [key in TransferType]: { label: string; icon: IconName } } = {
-                  arrival: { label: "Arrival", icon: "arrival" },
-                  departure: { label: "Departure", icon: "departure" },
-                  "inter-hotel": { label: "Inter-Hotel", icon: "building" },
+                const categoryInfo: {
+                  [key in TransferType]: { label: string; icon: IconName };
+                } = {
+                  arrival: { label: 'Arrival', icon: 'arrival' },
+                  departure: { label: 'Departure', icon: 'departure' },
+                  'inter-hotel': { label: 'Inter-Hotel', icon: 'building' },
                 };
 
                 return nonEmptyGroups.map((type, groupIndex) => (
@@ -598,19 +621,18 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
                     {/* Show separator between categories, but not after the last one */}
                     {groupIndex < nonEmptyGroups.length - 1 && (
-                      <svg 
-                        className="search-bar-transfer__divider" 
-                        xmlns="http://www.w3.org/2000/svg" 
-                        width="100%" 
-                        height="1" 
-                        viewBox="0 0 1076 1" 
+                      <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"
-                      >
-                        <path 
-                          d="M0 0.5L1076 0.499906" 
-                          stroke="var(--color-border-medium, #A3A3A3)" 
-                          strokeWidth="1" 
+                        preserveAspectRatio="none">
+                        <path
+                          d="M0 0.5L1076 0.499906"
+                          stroke="var(--color-border-medium, #A3A3A3)"
+                          strokeWidth="1"
                           strokeDasharray="10 10"
                         />
                       </svg>
@@ -632,23 +654,14 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         />
 
         <div className="search-bar-transfer__cta">
-          {error && (
-            <Toast
-              text={error}
-              type="danger"
-            />
-          )}
-          <Button
-            variant="primary"
-            size="lg"
-            onClick={handleSearch}
-          >
+          {error && <Toast text={error} type="danger" />}
+          <Button variant="primary" size="lg" onClick={handleSearch}>
             Search
           </Button>
         </div>
       </div>
     </div>
   );
-};
+}
 
 export default SearchBarTransfer;