mautourco-components 0.2.46 → 0.2.48

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

@@ -26,12 +26,12 @@ import LocationDropdown from "../../molecules/LocationDropdown/LocationDropdown"
 import DateTimePicker from "../DateTimePicker/DateTimePicker";
 import PaxSelector from "../PaxSelector/PaxSelector";
 var RoundTrip = function (_a) {
-    var id = _a.id, paxData = _a.paxData, arrivalDate = _a.arrivalDate, departureDate = _a.departureDate, pickupDropoffPoint = _a.pickupDropoffPoint, accommodation = _a.accommodation, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDatesChange = _a.onDatesChange, onPickupDropoffChange = _a.onPickupDropoffChange, onAccommodationChange = _a.onAccommodationChange, onChange = _a.onChange, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.checkEmpty, checkEmpty = _d === void 0 ? false : _d;
-    var _e = useState(paxData), internalPaxData = _e[0], setInternalPaxData = _e[1];
-    var _f = useState(arrivalDate), internalArrivalDate = _f[0], setInternalArrivalDate = _f[1];
-    var _g = useState(departureDate), internalDepartureDate = _g[0], setInternalDepartureDate = _g[1];
-    var _h = useState(null), internalPickupDropoffPoint = _h[0], setInternalPickupDropoffPoint = _h[1];
-    var _j = useState(null), internalAccommodation = _j[0], setInternalAccommodation = _j[1];
+    var id = _a.id, paxData = _a.paxData, arrivalDate = _a.arrivalDate, departureDate = _a.departureDate, pickupDropoffPoint = _a.pickupDropoffPoint, accommodation = _a.accommodation, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDatesChange = _a.onDatesChange, onPickupDropoffChange = _a.onPickupDropoffChange, onAccommodationChange = _a.onAccommodationChange, onChange = _a.onChange, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.checkEmpty, checkEmpty = _d === void 0 ? false : _d, _e = _a.scrollOnOpen, scrollOnOpen = _e === void 0 ? false : _e;
+    var _f = useState(paxData), internalPaxData = _f[0], setInternalPaxData = _f[1];
+    var _g = useState(arrivalDate), internalArrivalDate = _g[0], setInternalArrivalDate = _g[1];
+    var _h = useState(departureDate), internalDepartureDate = _h[0], setInternalDepartureDate = _h[1];
+    var _j = useState(null), internalPickupDropoffPoint = _j[0], setInternalPickupDropoffPoint = _j[1];
+    var _k = useState(null), internalAccommodation = _k[0], setInternalAccommodation = _k[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; });
@@ -184,6 +184,6 @@ var RoundTrip = function (_a) {
     var isAccommodationEmpty = checkEmpty && !internalAccommodation;
     var pickupDropoffOptions = getPickupDropoffOptions();
     var accommodationOptions = getAccommodationOptions();
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '' }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty }) })] }) }));
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen }) })] }) }));
 };
 export default RoundTrip;

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

@@ -28,8 +28,12 @@ export interface SearchBarTransferProps {
     onSearch?: (data: SearchBarTransferData) => void;
     /** Callback when data changes */
     onChange?: (data: SearchBarTransferData) => void;
+    /** Callback when a transfer line is removed */
+    onRemove?: (index: number, transferLine: TransferLineData) => void;
     /** Additional CSS classes */
     className?: string;
+    /** Whether to scroll to the input when the calendar opens */
+    scrollOnOpen?: boolean;
 }
 declare const SearchBarTransfer: React.FC<SearchBarTransferProps>;
 export default SearchBarTransfer;

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/Table/Table.css

@@ -20,10 +20,14 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
+  table-layout: fixed;
   th,
   td {
     padding-inline: var(--spacing-padding-px-4);
   }
+  .table__cell-highlighted {
+    padding: 0;
+  }
 }
 .table__header {
   th {
@@ -50,61 +54,13 @@
     &:hover:not(.table__no-hover) {
       background-color: var(--color-elevation-state-hover-subtle);
     }
-    &:first-child {
-      border-top: none;
-    }
-    &.table__row-yellow {
-      background-color: var(--color-yellow-50);
-      border: 1px solid transparent;
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        inset: -1px;
-        pointer-events: none;
-        background-image:
-          repeating-linear-gradient(
-            to right,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to right,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to bottom,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          ),
-          repeating-linear-gradient(
-            to bottom,
-            var(--color-yellow-600) 0,
-            var(--color-yellow-600) 8px,
-            transparent 8px,
-            transparent 16px
-          );
-        background-size:
-          100% 1px,
-          100% 1px,
-          1px 100%,
-          1px 100%;
-        background-position: top, bottom, left, right;
-        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-      }
-      &:hover {
+    &.table__row-highlighted:hover {
+      tr {
         background-color: var(--color-yellow-100);
       }
-      & + tr {
-        border-top: none;
-      }
+    }
+    &:first-child {
+      border-top: none;
     }
     &.table__row-border-0 {
       border-top: none;
@@ -281,4 +237,59 @@
       border-bottom: solid 1px var(--color-surface-300);
     }
   }
+}
+
+.table__row-div-highlighted {
+  background-color: var(--color-yellow-50);
+  border: 1px solid transparent;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    pointer-events: none;
+    background-image:
+      repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to right,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      ),
+      repeating-linear-gradient(
+        to bottom,
+        var(--color-yellow-600) 0,
+        var(--color-yellow-600) 8px,
+        transparent 8px,
+        transparent 16px
+      );
+    background-size:
+      100% 1px,
+      100% 1px,
+      1px 100%,
+      1px 100%;
+    background-position: top, bottom, left, right;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  }
+  &:hover {
+    background-color: var(--color-yellow-100);
+  }
+  & + tr {
+    border-top: none;
+  }
 }

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

@@ -14,6 +14,7 @@ export type TableRowData<T = any> = {
      * - table__row-border-0: For no border
      */
     className?: string;
+    isHighlighted?: boolean;
     /** Children rows for the row */
     children?: T[];
 };

package/dist/components/organisms/Table/Table.js

@@ -83,7 +83,8 @@ export function Table(props) {
                                     var defaultTable = (_jsx("tr", { className: cn(row.className, {
                                             'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
                                             'table__row-clickable': onClickRow,
-                                        }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }));
+                                            'table__row-highlighted': row.isHighlighted,
+                                        }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
                                     return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx("td", { colSpan: columns.length, className: cn({
                                                     'table__children--visible': hasVisibleChildren,
                                                 }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {

package/dist/components/organisms/Table/columns/booking-columns.d.ts

@@ -2,6 +2,6 @@ import { ActionDropdownType } from '@/src/types/table';
 import { BookingListItem } from '@/src/types/table/booking.types';
 import { ColumnType } from '../TableCell';
 export declare const bookingColumns: (params: {
-    onAction?: (action: ActionDropdownType) => void;
+    onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
     keywords?: string;
 }) => ColumnType<BookingListItem>[];

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Button from '../../../atoms/Button/Button';
+import Chip from '../../../atoms/Chip/Chip';
 import { Text } from '../../../atoms/Typography/Typography';
 import { ActionDropdown } from '../../../molecules/ActionDropdown/ActionDropdown';
 import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
 import { PaxChips } from '../../../molecules/PaxChips/PaxChips';
 import { actionDropdownData } from '../constant';
+var CHIP_WIDTH = 'w-[184px]';
+var BUTTON_WIDTH = 'w-[89px]';
+var renderStatusContent = function (status) {
+    if (status === 'PENDING') {
+        return (_jsx(Chip, { size: "sm", color: "yellow", className: CHIP_WIDTH, children: "On Request" }));
+    }
+    if (status === 'Cancelled') {
+        return (_jsx(Chip, { size: "sm", color: "red", className: CHIP_WIDTH, children: "Cancelled" }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: BUTTON_WIDTH, children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: BUTTON_WIDTH, children: "Voucher" })] }));
+};
 export var bookingColumns = function (_a) {
     var onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
     return [
@@ -74,7 +86,10 @@ export var bookingColumns = function (_a) {
             key: 'actions',
             width: 232,
             cell: function (_value, raw) {
-                return (_jsx("div", { children: _jsxs("div", { className: "flex items-center gap-x-8", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: "w-[89px]", children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: "w-[89px]", children: "Voucher" })] }), _jsx(ActionDropdown, { data: actionDropdownData(onAction !== null && onAction !== void 0 ? onAction : (function () { })) })] }) }));
+                var _a;
+                var handleAction = (_a = onAction === null || onAction === void 0 ? void 0 : onAction(raw)) !== null && _a !== void 0 ? _a : (function () { });
+                var actionData = actionDropdownData(handleAction);
+                return (_jsxs("div", { className: "flex items-center justify-between", children: [renderStatusContent(raw.status), _jsx(ActionDropdown, { data: actionData })] }));
             },
         },
     ];

package/dist/components/organisms/Table/columns/index.d.ts

@@ -11,7 +11,7 @@ declare const columns: {
         onRemove?: (value: import("../../../..").DetailResumeItem, index?: number) => void;
     }) => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
     booking: (params: {
-        onAction?: (action: import("../../../..").ActionDropdownType) => void;
+        onAction?: (data: import("../../../../types/table/booking.types").BookingListItem) => (action: import("../../../..").ActionDropdownType) => void;
         keywords?: string;
     }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
     bookingCancelService: (params?: {

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;