mautourco-components 0.2.84 → 0.2.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/LocationDropdown/LocationDropdown.d.ts +2 -0
- package/dist/components/molecules/LocationDropdown/LocationDropdown.js +30 -17
- package/dist/components/molecules/TransferDocket/TransferDocket.d.ts +1 -1
- package/dist/components/molecules/TransferDocket/TransferDocket.js +6 -4
- package/dist/components/organisms/RoundTrip/RoundTrip.js +11 -1
- package/dist/components/organisms/TransferLine/TransferLine.js +12 -2
- package/dist/index.d.ts +18 -18
- package/dist/index.js +2 -2
- package/dist/styles/components/molecule/transfer-docket.css +6 -0
- package/package.json +1 -1
- package/src/components/molecules/LocationDropdown/LocationDropdown.tsx +31 -13
- package/src/components/molecules/TransferDocket/TransferDocket.tsx +22 -3
- package/src/components/organisms/RoundTrip/RoundTrip.tsx +13 -0
- package/src/components/organisms/TransferLine/TransferLine.tsx +13 -0
- package/src/styles/components/molecule/transfer-docket.css +5 -0
|
@@ -32,6 +32,8 @@ export interface LocationDropdownProps {
|
|
|
32
32
|
showGroupTitles?: boolean;
|
|
33
33
|
/** Whether to scroll to the input when the dropdown opens */
|
|
34
34
|
scrollOnOpen?: boolean;
|
|
35
|
+
/** Default location option to use when no value is selected */
|
|
36
|
+
defaultValue?: LocationOption;
|
|
35
37
|
}
|
|
36
38
|
declare const LocationDropdown: React.FC<LocationDropdownProps>;
|
|
37
39
|
export default LocationDropdown;
|
|
@@ -25,7 +25,7 @@ import '../../../styles/components/molecule/location-dropdown.css';
|
|
|
25
25
|
import Icon from '../../atoms/Icon/Icon';
|
|
26
26
|
import { Text } from '../../atoms/Typography/Typography';
|
|
27
27
|
var LocationDropdown = function (_a) {
|
|
28
|
-
var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
|
|
28
|
+
var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p, defaultValue = _a.defaultValue;
|
|
29
29
|
var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
|
|
30
30
|
var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
|
|
31
31
|
var dropdownRef = useRef(null);
|
|
@@ -53,6 +53,17 @@ var LocationDropdown = function (_a) {
|
|
|
53
53
|
setSearchQuery('');
|
|
54
54
|
}
|
|
55
55
|
}, [isOpen]);
|
|
56
|
+
// Initialize default value if provided and no selected value
|
|
57
|
+
useEffect(function () {
|
|
58
|
+
if (!selectedValue && defaultValue && !disabled) {
|
|
59
|
+
var defaultLocationData = {
|
|
60
|
+
id: defaultValue.id,
|
|
61
|
+
locationName: defaultValue.label,
|
|
62
|
+
};
|
|
63
|
+
onSelectionChange(defaultLocationData);
|
|
64
|
+
}
|
|
65
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
66
|
+
}, [defaultValue]);
|
|
56
67
|
var handleToggleDropdown = function () {
|
|
57
68
|
if (!disabled) {
|
|
58
69
|
setIsOpen(!isOpen);
|
|
@@ -82,20 +93,21 @@ var LocationDropdown = function (_a) {
|
|
|
82
93
|
});
|
|
83
94
|
};
|
|
84
95
|
var getSelectedOption = function () {
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
if (selectedValue) {
|
|
97
|
+
// Search in flat options
|
|
98
|
+
var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
|
|
99
|
+
if (flatOption)
|
|
100
|
+
return flatOption;
|
|
101
|
+
// Search in groups
|
|
102
|
+
for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
|
|
103
|
+
var group = groups_1[_i];
|
|
104
|
+
var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
|
|
105
|
+
if (groupOption)
|
|
106
|
+
return groupOption;
|
|
107
|
+
}
|
|
97
108
|
}
|
|
98
|
-
|
|
109
|
+
// Return default value if no selected value
|
|
110
|
+
return defaultValue || null;
|
|
99
111
|
};
|
|
100
112
|
var getIconForType = function (optionType) {
|
|
101
113
|
switch (optionType) {
|
|
@@ -128,6 +140,8 @@ var LocationDropdown = function (_a) {
|
|
|
128
140
|
// For other types (port, accommodation), show their specific icon
|
|
129
141
|
return getIconForType(option.type);
|
|
130
142
|
};
|
|
143
|
+
var selectedOption = getSelectedOption();
|
|
144
|
+
var effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
|
|
131
145
|
var getDropdownState = function () {
|
|
132
146
|
if (disabled)
|
|
133
147
|
return 'disabled';
|
|
@@ -135,11 +149,10 @@ var LocationDropdown = function (_a) {
|
|
|
135
149
|
return 'error';
|
|
136
150
|
if (isOpen)
|
|
137
151
|
return 'open';
|
|
138
|
-
if (
|
|
152
|
+
if (effectiveSelectedValue)
|
|
139
153
|
return 'selected';
|
|
140
154
|
return 'default';
|
|
141
155
|
};
|
|
142
|
-
var selectedOption = getSelectedOption();
|
|
143
156
|
var displayText = selectedOption ? selectedOption.label : placeholder;
|
|
144
157
|
// Prepare all options (flat or grouped) and filter them
|
|
145
158
|
var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
|
|
@@ -150,7 +163,7 @@ var LocationDropdown = function (_a) {
|
|
|
150
163
|
var renderSkeletonLoading = function () { return (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: _jsx("div", { className: "location-dropdown__group", children: _jsx("div", { className: "location-dropdown__group-options", children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) }) }) }) }) })); };
|
|
151
164
|
return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
|
|
152
165
|
(loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
|
|
153
|
-
var isSelected =
|
|
166
|
+
var isSelected = effectiveSelectedValue === option.id;
|
|
154
167
|
var isDisabled = option.disabled || disabled;
|
|
155
168
|
return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));
|
|
156
169
|
}) })] }, group.id)); })) }) }) })))] }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
|
|
3
2
|
import '../../../styles/components/molecule/transfer-docket.css';
|
|
3
|
+
import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
|
|
4
4
|
export interface TransferDocketProps {
|
|
5
5
|
data: TransferDocketType;
|
|
6
6
|
/** Remove mode - replaces price display with remove button */
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import '../../../styles/components/molecule/transfer-docket.css';
|
|
3
4
|
import Button from '../../atoms/Button/Button';
|
|
4
5
|
import Icon from '../../atoms/Icon/Icon';
|
|
5
6
|
import { Text } from '../../atoms/Typography/Typography';
|
|
6
7
|
import { DateDisplay } from '../DateDisplay/DateDisplay';
|
|
7
8
|
import { PriceDisplay } from '../PriceDisplay/PriceDisplay';
|
|
8
9
|
import TextWithIcon from '../TextWithIcon/TextWithIcon';
|
|
9
|
-
import '../../../styles/components/molecule/transfer-docket.css';
|
|
10
10
|
export var TransferDocket = function (_a) {
|
|
11
11
|
var data = _a.data, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onRemove = _a.onRemove;
|
|
12
|
-
var TransferDate = data.TransferDate, Currency = data.Currency, TotalPrice = data.TotalPrice, LocationFromName = data.LocationFromName, LocationToName = data.LocationToName, AdultCount = data.AdultCount, ChildCount = data.ChildCount, TeenCount = data.TeenCount, InfantCount = data.InfantCount, VehicleTypeName = data.VehicleTypeName, paxAge = data.paxAge;
|
|
12
|
+
var TransferDate = data.TransferDate, Currency = data.Currency, TotalPrice = data.TotalPrice, LocationFromName = data.LocationFromName, LocationToName = data.LocationToName, AdultCount = data.AdultCount, ChildCount = data.ChildCount, TeenCount = data.TeenCount, InfantCount = data.InfantCount, VehicleTypeName = data.VehicleTypeName, paxAge = data.paxAge, baby_seat_count = data.baby_seat_count;
|
|
13
|
+
// Automatically generate supplements from baby_seat_count
|
|
14
|
+
var showBabySeat = baby_seat_count && baby_seat_count > 0;
|
|
13
15
|
var formatChildrenInfo = function () {
|
|
14
|
-
var totalChildren = (ChildCount || 0) + (TeenCount || 0);
|
|
16
|
+
var totalChildren = (ChildCount || 0) + (TeenCount || 0) + (InfantCount || 0);
|
|
15
17
|
if (totalChildren === 0) {
|
|
16
18
|
return null;
|
|
17
19
|
}
|
|
@@ -44,6 +46,6 @@ export var TransferDocket = function (_a) {
|
|
|
44
46
|
}
|
|
45
47
|
return (_jsx("div", { className: "transfer-docket__children", children: childGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "transfer-docket__divider-vertical" }), _jsxs("span", { className: "transfer-docket__child-info", children: [_jsxs(Text, { size: "sm", variant: "medium", color: "default", children: [group.count, " Child", group.count > 1 ? 'ren' : ''] }), group.age > 0 ? (_jsxs(Text, { size: "sm", variant: "medium", className: "transfer-docket__child-age", children: [' ', "(", group.age, " y.o)"] })) : null] })] }, "child-".concat(index))); }) }));
|
|
46
48
|
};
|
|
47
|
-
return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName }))] })] }));
|
|
49
|
+
return (_jsxs("div", { className: "transfer-docket", children: [_jsxs("div", { className: "transfer-docket__header", children: [_jsxs("div", { className: "transfer-docket__title-section", children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Transfer" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] }), _jsxs("div", { className: "transfer-docket__details", children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", { className: "transfer-docket__transfer-point", children: [_jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationFromName || 'From' }), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: LocationToName || 'To' })] })), _jsxs("div", { className: "transfer-docket__guests", children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (_jsxs("div", { className: "transfer-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] })) : null] }), VehicleTypeName && (_jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: VehicleTypeName })), !!showBabySeat && (_jsxs("div", { className: "transfer-docket__supplements", children: [_jsx(Text, { variant: "medium", size: "sm", color: "default", leading: "none", children: "Supplement :" }), _jsxs(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", children: ["Baby seat x", baby_seat_count] })] }))] })] }));
|
|
48
50
|
};
|
|
49
51
|
export default TransferDocket;
|
|
@@ -184,6 +184,16 @@ var RoundTrip = function (_a) {
|
|
|
184
184
|
var isAccommodationEmpty = checkEmpty && !internalAccommodation;
|
|
185
185
|
var pickupDropoffOptions = getPickupDropoffOptions();
|
|
186
186
|
var accommodationOptions = getAccommodationOptions();
|
|
187
|
-
|
|
187
|
+
// Helper function to find LocationOption from ID for defaultValue
|
|
188
|
+
var findLocationOption = function (id, locationType) {
|
|
189
|
+
if (!id)
|
|
190
|
+
return undefined;
|
|
191
|
+
var _a = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions(), options = _a.options, groups = _a.groups;
|
|
192
|
+
var allLocations = getAllLocations(options, groups);
|
|
193
|
+
return allLocations.find(function (loc) { return loc.id === id; });
|
|
194
|
+
};
|
|
195
|
+
var defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
|
|
196
|
+
var defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
|
|
197
|
+
return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupDropoffOption }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultAccommodationOption }) })] }) }));
|
|
188
198
|
};
|
|
189
199
|
export default RoundTrip;
|
|
@@ -192,14 +192,24 @@ var TransferLine = function (_a) {
|
|
|
192
192
|
var isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
|
|
193
193
|
var isPickupEmpty = checkEmpty && !internalPickupPoint;
|
|
194
194
|
var isDropoffEmpty = checkEmpty && !internalDropoffPoint;
|
|
195
|
+
// Helper function to find LocationOption from ID for defaultValue
|
|
196
|
+
var findLocationOption = function (id, position) {
|
|
197
|
+
if (!id)
|
|
198
|
+
return undefined;
|
|
199
|
+
var _a = filterLocations(position), options = _a.options, groups = _a.groups;
|
|
200
|
+
var allLocations = getAllLocations(options, groups);
|
|
201
|
+
return allLocations.find(function (loc) { return loc.id === id; });
|
|
202
|
+
};
|
|
203
|
+
var defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
|
|
204
|
+
var defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
|
|
195
205
|
return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
|
|
196
206
|
? 'accommodation'
|
|
197
207
|
: type === 'arrival'
|
|
198
208
|
? 'airport-port'
|
|
199
|
-
: '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'
|
|
209
|
+
: 'accommodation', showGroupTitles: false, error: isPickupEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupOption }) }), _jsx("div", { className: "transfer-line__field transfer-line__field--dropoff", children: _jsx(LocationDropdown, { label: "Drop-off point", options: filterLocations('dropoff').options, groups: filterLocations('dropoff').groups, selectedValue: (internalDropoffPoint === null || internalDropoffPoint === void 0 ? void 0 : internalDropoffPoint.id) || null, onSelectionChange: handleDropoffChange, placeholder: "Select a drop-off point", direction: "dropoff", type: type === 'inter-hotel'
|
|
200
210
|
? 'accommodation'
|
|
201
211
|
: type === 'departure'
|
|
202
212
|
? 'airport-port'
|
|
203
|
-
: '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" }) }) }))] })] }));
|
|
213
|
+
: 'accommodation', showGroupTitles: false, error: isDropoffEmpty, disabled: disabled, scrollOnOpen: scrollOnOpen, defaultValue: defaultDropoffOption }) })] }), showDelete && !disabled && (_jsx("div", { className: "transfer-line__delete", children: _jsx("button", { type: "button", className: "transfer-line__delete-btn", onClick: onDelete, "aria-label": "Delete transfer line", children: _jsx(Icon, { name: "delete", size: "sm", className: "transfer-line__delete-icon" }) }) }))] })] }));
|
|
204
214
|
};
|
|
205
215
|
export default TransferLine;
|
package/dist/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
|
|
|
17
17
|
export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
|
|
18
18
|
export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
|
|
19
19
|
export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
|
|
20
|
-
export { ActionDropdown, type ActionDropdownItem
|
|
20
|
+
export { ActionDropdown, type ActionDropdownItem } from './components/molecules/ActionDropdown/ActionDropdown';
|
|
21
21
|
export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
|
|
22
22
|
export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
|
|
23
23
|
export * from './components/molecules/BookingResume';
|
|
@@ -39,11 +39,11 @@ export { ServiceLanguages } from './components/molecules/ServiceLanguages/Servic
|
|
|
39
39
|
export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
|
|
40
40
|
export { default as Stepper } from './components/molecules/Stepper/Stepper';
|
|
41
41
|
export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
|
|
42
|
-
export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
|
|
43
|
-
export type { VehicleSupplementProps, Supplement, SupplementValue } from './components/molecules/VehicleSupplement';
|
|
44
42
|
export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
|
|
45
43
|
export { default as Toast } from './components/molecules/Toast/Toast';
|
|
46
44
|
export * from './components/molecules/TooltipDisplay/TooltipDisplay';
|
|
45
|
+
export type { Supplement, SupplementValue, VehicleSupplementProps } from './components/molecules/VehicleSupplement';
|
|
46
|
+
export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
|
|
47
47
|
export { Illustration } from './components/atoms/Illustration/Illustration';
|
|
48
48
|
export * from './components/molecules/BookingPax';
|
|
49
49
|
export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
|
|
@@ -89,44 +89,44 @@ export { default as UserIcon } from './components/atoms/Icon/icons/User';
|
|
|
89
89
|
export { priceFormatter } from './lib/price-formatter';
|
|
90
90
|
export type { DividerProps } from './components/atoms/Divider/Divider';
|
|
91
91
|
export type { FeatureRowProps } from './components/molecules/FeatureRow/FeatureRow';
|
|
92
|
-
export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption
|
|
93
|
-
export type { ServiceOption, ServiceSelectorProps, ServiceType
|
|
92
|
+
export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption } from './components/molecules/LocationDropdown/LocationDropdown';
|
|
93
|
+
export type { ServiceOption, ServiceSelectorProps, ServiceType } from './components/molecules/ServiceSelector/ServiceSelector';
|
|
94
94
|
export type { StepperProps } from './components/molecules/Stepper/Stepper';
|
|
95
|
-
export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType
|
|
96
|
-
export type { CardContainerProps, CardContainerSpacing
|
|
95
|
+
export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType } from './components/organisms/CarBookingCard/CarBookingCard';
|
|
96
|
+
export type { CardContainerProps, CardContainerSpacing } from './components/organisms/CardContainer/CardContainer';
|
|
97
97
|
export type { DateTimePickerProps } from './components/organisms/DateTimePicker/DateTimePicker';
|
|
98
98
|
export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dialog';
|
|
99
99
|
export type { FooterProps } from './components/organisms/Footer/Footer';
|
|
100
|
-
export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps
|
|
100
|
+
export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps } from './components/organisms/MultipleQuotationDocket';
|
|
101
101
|
export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
|
|
102
|
-
export type { ClientType, PaxData, PaxSelectorProps
|
|
103
|
-
export type { RoundTripData, RoundTripProps, RoundTripTransfer
|
|
104
|
-
export type { SearchBarTransferData, SearchBarTransferProps, TransferMode
|
|
102
|
+
export type { ClientType, PaxData, PaxSelectorProps } from './components/organisms/PaxSelector/PaxSelector';
|
|
103
|
+
export type { RoundTripData, RoundTripProps, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
|
|
104
|
+
export type { SearchBarTransferData, SearchBarTransferProps, TransferMode } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
|
|
105
105
|
export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
|
|
106
|
-
export type { TransferLineData, TransferLineProps, TransferType
|
|
106
|
+
export type { TransferLineData, TransferLineProps, TransferType } from './components/organisms/TransferLine/TransferLine';
|
|
107
107
|
export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
|
|
108
108
|
export type { InputProps } from './components/atoms/Inputs/Input/Input';
|
|
109
109
|
export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
|
|
110
110
|
export type { AgeSelectorProps } from './components/molecules/AgeSelector/AgeSelector';
|
|
111
|
-
export type { BreadcrumbsItem, BreadcrumbsProps
|
|
111
|
+
export type { BreadcrumbsItem, BreadcrumbsProps } from './components/molecules/Breadcrumbs/Breadcrumbs';
|
|
112
112
|
export type { DocketPricesProps } from './components/molecules/DocketPrices/DocketPrices';
|
|
113
113
|
export type { FromToProps } from './components/molecules/FromTo/FromTo';
|
|
114
114
|
export type { PaxChipsProps, PaxCount } from './components/molecules/PaxChips/PaxChips';
|
|
115
115
|
export type { PriceDisplayProps } from './components/molecules/PriceDisplay/PriceDisplay';
|
|
116
116
|
export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
|
|
117
|
-
export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps
|
|
117
|
+
export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps } from './components/molecules/TableServiceItem';
|
|
118
118
|
export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
|
|
119
119
|
export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
|
|
120
120
|
export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
|
|
121
121
|
export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
|
|
122
122
|
export type { ToastProps } from './components/molecules/Toast/Toast';
|
|
123
123
|
export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
|
|
124
|
-
export type { ComparisonData, DialogComparisonProps, MultiComparisonData
|
|
124
|
+
export type { ComparisonData, DialogComparisonProps, MultiComparisonData } from './components/organisms/DialogComparison/DialogComparison';
|
|
125
125
|
export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
|
|
126
126
|
export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
|
|
127
127
|
export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
|
|
128
|
-
export type { FilterType, QuoteHeaderProps
|
|
129
|
-
export type { TimelineProps, TimelineServices
|
|
130
|
-
export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType
|
|
128
|
+
export type { FilterType, QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
|
|
129
|
+
export type { TimelineProps, TimelineServices } from './components/organisms/Timeline/Timeline';
|
|
130
|
+
export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType } from './types/docket/services.types';
|
|
131
131
|
export * from './types/table';
|
|
132
132
|
export * from './hooks/useStays';
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
|
|
|
19
19
|
export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
|
|
20
20
|
export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
|
|
21
21
|
// Molecules - Composed components
|
|
22
|
-
export { ActionDropdown
|
|
22
|
+
export { ActionDropdown } from './components/molecules/ActionDropdown/ActionDropdown';
|
|
23
23
|
export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
|
|
24
24
|
export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
|
|
25
25
|
export * from './components/molecules/BookingResume';
|
|
@@ -41,10 +41,10 @@ export { ServiceLanguages } from './components/molecules/ServiceLanguages/Servic
|
|
|
41
41
|
export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
|
|
42
42
|
export { default as Stepper } from './components/molecules/Stepper/Stepper';
|
|
43
43
|
export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
|
|
44
|
-
export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
|
|
45
44
|
export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
|
|
46
45
|
export { default as Toast } from './components/molecules/Toast/Toast';
|
|
47
46
|
export * from './components/molecules/TooltipDisplay/TooltipDisplay';
|
|
47
|
+
export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
|
|
48
48
|
// Organisms - Complex components
|
|
49
49
|
export { Illustration } from './components/atoms/Illustration/Illustration';
|
|
50
50
|
export * from './components/molecules/BookingPax';
|
package/package.json
CHANGED
|
@@ -39,6 +39,8 @@ export interface LocationDropdownProps {
|
|
|
39
39
|
showGroupTitles?: boolean;
|
|
40
40
|
/** Whether to scroll to the input when the dropdown opens */
|
|
41
41
|
scrollOnOpen?: boolean;
|
|
42
|
+
/** Default location option to use when no value is selected */
|
|
43
|
+
defaultValue?: LocationOption;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
@@ -57,6 +59,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
|
57
59
|
direction = undefined,
|
|
58
60
|
showGroupTitles = true,
|
|
59
61
|
scrollOnOpen = false,
|
|
62
|
+
defaultValue,
|
|
60
63
|
}) => {
|
|
61
64
|
const [isOpen, setIsOpen] = useState(false);
|
|
62
65
|
const [searchQuery, setSearchQuery] = useState('');
|
|
@@ -90,6 +93,18 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
|
90
93
|
}
|
|
91
94
|
}, [isOpen]);
|
|
92
95
|
|
|
96
|
+
// Initialize default value if provided and no selected value
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
if (!selectedValue && defaultValue && !disabled) {
|
|
99
|
+
const defaultLocationData: LocationData = {
|
|
100
|
+
id: defaultValue.id,
|
|
101
|
+
locationName: defaultValue.label,
|
|
102
|
+
};
|
|
103
|
+
onSelectionChange(defaultLocationData);
|
|
104
|
+
}
|
|
105
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
106
|
+
}, [defaultValue]);
|
|
107
|
+
|
|
93
108
|
const handleToggleDropdown = () => {
|
|
94
109
|
if (!disabled) {
|
|
95
110
|
setIsOpen(!isOpen);
|
|
@@ -122,19 +137,20 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
|
122
137
|
};
|
|
123
138
|
|
|
124
139
|
const getSelectedOption = (): LocationOption | null => {
|
|
125
|
-
if (
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
if (flatOption) return flatOption;
|
|
140
|
+
if (selectedValue) {
|
|
141
|
+
// Search in flat options
|
|
142
|
+
const flatOption = options.find((opt) => opt.id === selectedValue);
|
|
143
|
+
if (flatOption) return flatOption;
|
|
130
144
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
145
|
+
// Search in groups
|
|
146
|
+
for (const group of groups) {
|
|
147
|
+
const groupOption = group.options.find((opt) => opt.id === selectedValue);
|
|
148
|
+
if (groupOption) return groupOption;
|
|
149
|
+
}
|
|
135
150
|
}
|
|
136
151
|
|
|
137
|
-
|
|
152
|
+
// Return default value if no selected value
|
|
153
|
+
return defaultValue || null;
|
|
138
154
|
};
|
|
139
155
|
|
|
140
156
|
const getIconForType = (optionType: 'airport' | 'port' | 'accommodation') => {
|
|
@@ -171,15 +187,17 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
|
171
187
|
return getIconForType(option.type);
|
|
172
188
|
};
|
|
173
189
|
|
|
190
|
+
const selectedOption = getSelectedOption();
|
|
191
|
+
const effectiveSelectedValue = selectedValue || (defaultValue ? defaultValue.id : null);
|
|
192
|
+
|
|
174
193
|
const getDropdownState = () => {
|
|
175
194
|
if (disabled) return 'disabled';
|
|
176
195
|
if (error) return 'error';
|
|
177
196
|
if (isOpen) return 'open';
|
|
178
|
-
if (
|
|
197
|
+
if (effectiveSelectedValue) return 'selected';
|
|
179
198
|
return 'default';
|
|
180
199
|
};
|
|
181
200
|
|
|
182
|
-
const selectedOption = getSelectedOption();
|
|
183
201
|
const displayText = selectedOption ? selectedOption.label : placeholder;
|
|
184
202
|
|
|
185
203
|
// Prepare all options (flat or grouped) and filter them
|
|
@@ -293,7 +311,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
|
|
|
293
311
|
|
|
294
312
|
<div className="location-dropdown__group-options">
|
|
295
313
|
{group.options.map((option) => {
|
|
296
|
-
const isSelected =
|
|
314
|
+
const isSelected = effectiveSelectedValue === option.id;
|
|
297
315
|
const isDisabled = option.disabled || disabled;
|
|
298
316
|
|
|
299
317
|
return (
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import '../../../styles/components/molecule/transfer-docket.css';
|
|
2
3
|
import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
|
|
3
4
|
import Button from '../../atoms/Button/Button';
|
|
4
5
|
import Icon from '../../atoms/Icon/Icon';
|
|
@@ -6,7 +7,6 @@ import { Text } from '../../atoms/Typography/Typography';
|
|
|
6
7
|
import { DateDisplay } from '../DateDisplay/DateDisplay';
|
|
7
8
|
import { PriceDisplay } from '../PriceDisplay/PriceDisplay';
|
|
8
9
|
import TextWithIcon from '../TextWithIcon/TextWithIcon';
|
|
9
|
-
import '../../../styles/components/molecule/transfer-docket.css';
|
|
10
10
|
|
|
11
11
|
export interface TransferDocketProps {
|
|
12
12
|
data: TransferDocketType;
|
|
@@ -33,10 +33,14 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({
|
|
|
33
33
|
InfantCount,
|
|
34
34
|
VehicleTypeName,
|
|
35
35
|
paxAge,
|
|
36
|
+
baby_seat_count,
|
|
36
37
|
} = data;
|
|
37
38
|
|
|
39
|
+
// Automatically generate supplements from baby_seat_count
|
|
40
|
+
const showBabySeat = baby_seat_count && baby_seat_count > 0;
|
|
41
|
+
|
|
38
42
|
const formatChildrenInfo = (): React.ReactNode => {
|
|
39
|
-
const totalChildren = (ChildCount || 0) + (TeenCount || 0);
|
|
43
|
+
const totalChildren = (ChildCount || 0) + (TeenCount || 0) + (InfantCount || 0);
|
|
40
44
|
if (totalChildren === 0) {
|
|
41
45
|
return null;
|
|
42
46
|
}
|
|
@@ -148,7 +152,7 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({
|
|
|
148
152
|
{AdultCount} Adult{AdultCount > 1 ? 's' : ''}
|
|
149
153
|
</TextWithIcon>
|
|
150
154
|
)}
|
|
151
|
-
{((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) ? (
|
|
155
|
+
{((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) || (InfantCount && InfantCount > 0) ? (
|
|
152
156
|
<div className="transfer-docket__children-wrapper">
|
|
153
157
|
<Icon
|
|
154
158
|
name="user"
|
|
@@ -165,6 +169,21 @@ export const TransferDocket: React.FC<TransferDocketProps> = ({
|
|
|
165
169
|
{VehicleTypeName}
|
|
166
170
|
</TextWithIcon>
|
|
167
171
|
)}
|
|
172
|
+
|
|
173
|
+
{!!showBabySeat && (
|
|
174
|
+
<div className="transfer-docket__supplements">
|
|
175
|
+
<Text variant="medium" size="sm" color="default" leading="none">
|
|
176
|
+
Supplement :
|
|
177
|
+
</Text>
|
|
178
|
+
<TextWithIcon
|
|
179
|
+
icon="stroller"
|
|
180
|
+
textSize="sm"
|
|
181
|
+
color="subtle"
|
|
182
|
+
>
|
|
183
|
+
Baby seat x{baby_seat_count}
|
|
184
|
+
</TextWithIcon>
|
|
185
|
+
</div>
|
|
186
|
+
)}
|
|
168
187
|
</div>
|
|
169
188
|
</div>
|
|
170
189
|
);
|
|
@@ -292,6 +292,17 @@ const RoundTrip: React.FC<RoundTripProps> = ({
|
|
|
292
292
|
const pickupDropoffOptions = getPickupDropoffOptions();
|
|
293
293
|
const accommodationOptions = getAccommodationOptions();
|
|
294
294
|
|
|
295
|
+
// Helper function to find LocationOption from ID for defaultValue
|
|
296
|
+
const findLocationOption = (id: string | undefined, locationType: 'pickup-dropoff' | 'accommodation'): LocationOption | undefined => {
|
|
297
|
+
if (!id) return undefined;
|
|
298
|
+
const { options, groups } = locationType === 'pickup-dropoff' ? getPickupDropoffOptions() : getAccommodationOptions();
|
|
299
|
+
const allLocations = getAllLocations(options, groups);
|
|
300
|
+
return allLocations.find((loc) => loc.id === id);
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
const defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
|
|
304
|
+
const defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
|
|
305
|
+
|
|
295
306
|
return (
|
|
296
307
|
<div className={`round-trip ${className}`} data-round-trip-id={id}>
|
|
297
308
|
<div className="round-trip__content">
|
|
@@ -339,6 +350,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
|
|
|
339
350
|
showGroupTitles={true}
|
|
340
351
|
error={isPickupDropoffEmpty}
|
|
341
352
|
scrollOnOpen={scrollOnOpen}
|
|
353
|
+
defaultValue={defaultPickupDropoffOption}
|
|
342
354
|
/>
|
|
343
355
|
</div>
|
|
344
356
|
|
|
@@ -355,6 +367,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
|
|
|
355
367
|
showGroupTitles={false}
|
|
356
368
|
error={isAccommodationEmpty}
|
|
357
369
|
scrollOnOpen={scrollOnOpen}
|
|
370
|
+
defaultValue={defaultAccommodationOption}
|
|
358
371
|
/>
|
|
359
372
|
</div>
|
|
360
373
|
</div>
|
|
@@ -292,6 +292,17 @@ const TransferLine: React.FC<TransferLineProps> = ({
|
|
|
292
292
|
|
|
293
293
|
const isDropoffEmpty = checkEmpty && !internalDropoffPoint;
|
|
294
294
|
|
|
295
|
+
// Helper function to find LocationOption from ID for defaultValue
|
|
296
|
+
const findLocationOption = (id: string | number | undefined, position: 'pickup' | 'dropoff'): LocationOption | undefined => {
|
|
297
|
+
if (!id) return undefined;
|
|
298
|
+
const { options, groups } = filterLocations(position);
|
|
299
|
+
const allLocations = getAllLocations(options, groups);
|
|
300
|
+
return allLocations.find((loc) => loc.id === id);
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
const defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
|
|
304
|
+
const defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
|
|
305
|
+
|
|
295
306
|
return (
|
|
296
307
|
<div
|
|
297
308
|
className={`transfer-line transfer-line--${type} ${disabled ? 'transfer-line--disabled' : ''} ${className}`}
|
|
@@ -367,6 +378,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
|
|
|
367
378
|
error={isPickupEmpty}
|
|
368
379
|
disabled={disabled}
|
|
369
380
|
scrollOnOpen={scrollOnOpen}
|
|
381
|
+
defaultValue={defaultPickupOption}
|
|
370
382
|
/>
|
|
371
383
|
</div>
|
|
372
384
|
|
|
@@ -391,6 +403,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
|
|
|
391
403
|
error={isDropoffEmpty}
|
|
392
404
|
disabled={disabled}
|
|
393
405
|
scrollOnOpen={scrollOnOpen}
|
|
406
|
+
defaultValue={defaultDropoffOption}
|
|
394
407
|
/>
|
|
395
408
|
</div>
|
|
396
409
|
</div>
|