mautourco-components 0.2.58 → 0.2.60
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/ActionDropdown/ActionDropdown.js +0 -1
- package/dist/components/molecules/BookingResume/ResumeAccom/ResumeAccom.js +1 -1
- package/dist/components/molecules/DetailsInfo/DetailsFile.d.ts +1 -1
- package/dist/components/molecules/DetailsInfo/DetailsFile.js +2 -2
- package/dist/components/molecules/DialogContentPolicy/DialogCancellationAccom.js +1 -1
- package/dist/components/molecules/TableServiceItem/RowAccommodation.js +5 -12
- package/dist/components/organisms/TabCancellationPolicy/HeaderAccom.js +1 -1
- package/dist/components/organisms/Table/Table.css +49 -50
- package/dist/components/organisms/Table/Table.js +3 -3
- package/dist/components/organisms/Table/columns/quotation-columns.js +4 -1
- package/dist/hooks/useStays.d.ts +4 -1
- package/dist/hooks/useStays.js +9 -3
- package/dist/index.d.ts +17 -16
- package/dist/index.js +3 -1
- package/package.json +1 -1
- package/src/components/molecules/ActionDropdown/ActionDropdown.tsx +0 -2
- package/src/components/molecules/BookingResume/ResumeAccom/ResumeAccom.tsx +1 -1
- package/src/components/molecules/DetailsInfo/DetailsFile.tsx +4 -4
- package/src/components/molecules/DialogContentPolicy/DialogCancellationAccom.tsx +1 -1
- package/src/components/molecules/TableServiceItem/RowAccommodation.tsx +3 -10
- package/src/components/organisms/TabCancellationPolicy/HeaderAccom.tsx +1 -1
- package/src/components/organisms/Table/Table.css +49 -48
- package/src/components/organisms/Table/Table.tsx +29 -27
- package/src/components/organisms/Table/columns/quotation-columns.tsx +5 -1
|
@@ -17,7 +17,6 @@ import './ActionDropdown.css';
|
|
|
17
17
|
export function ActionDropdown(props) {
|
|
18
18
|
var data = props.data, children = props.children, _a = props.maxWidth, maxWidth = _a === void 0 ? '153px' : _a;
|
|
19
19
|
var _b = useState(false), open = _b[0], setOpen = _b[1];
|
|
20
|
-
console.log(open);
|
|
21
20
|
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { children: children !== null && children !== void 0 ? children : (_jsx("span", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: "action-dropdown", style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
|
|
22
21
|
var defaultButton = (_jsx("button", { onClick: function () {
|
|
23
22
|
var _a;
|
|
@@ -10,6 +10,6 @@ import { BookingResumeLayout } from '../BookingResumeLayout/BookingResumeLayout'
|
|
|
10
10
|
import './ResumeAccom.css';
|
|
11
11
|
export function ResumeAccom(props) {
|
|
12
12
|
var image = props.image, dates = props.dates, clientType = props.clientType, pax = props.pax, rooms = props.rooms, hotelName = props.hotelName;
|
|
13
|
-
var stay = useStays(dates);
|
|
13
|
+
var stay = useStays(dates).stay;
|
|
14
14
|
return (_jsxs(BookingResumeLayout, { title: "Accommodation", icon: "accom", image: image, className: "resume-accom", children: [_jsx(ServiceTitle, { title: hotelName }), _jsxs("div", { className: "space-y-2 mt-4", children: [_jsx(DateDisplay, { dates: dates, colorMode: "green" }), _jsxs(TextWithIcon, { icon: "night", children: [stay, " Nights"] }), _jsxs(Text, { variant: "medium", size: "sm", leading: "4", children: [_jsx("strong", { children: "Client types:" }), " ", clientType] }), _jsx(PaxDisplay, { pax: pax }), _jsx("div", { children: rooms.map(function (room, index) { return (_jsxs("div", { className: "space-y-1", children: [_jsx(TextWithIcon, { icon: "accom", textSize: "sm", textVariant: "medium", children: room.RoomName }), _jsx(ServiceInfo.Item, { icon: "utensils", iconSize: "sm", textSize: "sm", textLeading: "4", textVariant: "medium", label: "Meal-Plan", children: room.MealPlan })] }, "rm-".concat(index))); }) })] })] }));
|
|
15
15
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Text } from '../../atoms/Typography/Typography';
|
|
3
3
|
export function DetailsFile(props) {
|
|
4
|
-
var number = props.number, name = props.name, _a = props.label, label = _a === void 0 ? 'File number:' : _a, _b = props.
|
|
5
|
-
return (_jsxs("div", { className: "grid gap-y-2", children: [
|
|
4
|
+
var number = props.number, name = props.name, _a = props.label, label = _a === void 0 ? 'File number:' : _a, _b = props.title, title = _b === void 0 ? false : _b, _c = props.showRegularInfo, showRegularInfo = _c === void 0 ? true : _c;
|
|
5
|
+
return (_jsxs("div", { className: "grid gap-y-2", children: [title && (_jsx(Text, { variant: "bold", className: "text-2xl", color: "brand", children: title })), showRegularInfo && (_jsxs(Text, { variant: "regular", color: "default", children: [label, " ", number] })), _jsx(Text, { variant: "medium", color: "accent", children: name })] }));
|
|
6
6
|
}
|
|
@@ -8,6 +8,6 @@ import TextWithIcon from '../TextWithIcon/TextWithIcon';
|
|
|
8
8
|
import { CancellationLayout } from './CancellationLayout/CancellationLayout';
|
|
9
9
|
export function DialogCancellationAccom(props) {
|
|
10
10
|
var image = props.image, hotelName = props.hotelName, dates = props.dates, rooms = props.rooms, cancellationFee = props.cancellationFee, currency = props.currency;
|
|
11
|
-
var stay = useStays(dates);
|
|
11
|
+
var stay = useStays(dates).stay;
|
|
12
12
|
return (_jsx(CancellationLayout, { title: "Accommodation", icon: "accom", image: image, cancellationFee: cancellationFee, currency: currency, children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { variant: "bold", children: hotelName }), _jsx(DateDisplay, { dates: dates }), _jsxs(TextWithIcon, { icon: "night", textLeading: "4", children: [stay, " Nights"] })] }), _jsx("div", { className: "", children: rooms.map(function (room, index) { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(TextWithIcon, { icon: "accom", textLeading: "4", children: [index + 1, " Room"] }), _jsx(Text, { size: "sm", children: room.RoomName })] }), room.cancellation_policy.map(function (policy, pIndex) { return (_jsxs(Fragment, { children: [_jsxs(Chip, { type: "outline", color: "brand", isBlackText: true, children: ["Policy period applies", ' ', _jsx(DateDisplay, { dates: [policy.ValidFrom, policy.ValidTo], textSize: "xs" })] }), _jsxs(Text, { variant: "bold", size: "xs", leading: "4", children: [policy.Value, " % of total price"] }), _jsx(Text, { size: "xs", leading: "4", children: policy.Description })] }, "policy-".concat(pIndex))); })] }, "rm-".concat(index))); }) })] }) }));
|
|
13
13
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { useMemo } from 'react';
|
|
2
|
+
import useStays from '../../../hooks/useStays';
|
|
4
3
|
import { DetailsCol as DetailsColComponent } from './DetailsCol';
|
|
5
4
|
import { ItemCol } from './ItemCol';
|
|
6
5
|
var clientType = {
|
|
@@ -13,21 +12,15 @@ export function RowAccommodation() {
|
|
|
13
12
|
return _jsx(_Fragment, {});
|
|
14
13
|
}
|
|
15
14
|
function DetailsCol(props) {
|
|
16
|
-
var _a;
|
|
17
|
-
var data = props.data,
|
|
18
|
-
var stay =
|
|
19
|
-
var _a;
|
|
20
|
-
if ((_a = data.Dates) === null || _a === void 0 ? void 0 : _a.length) {
|
|
21
|
-
return differenceInDays(data.Dates[1], data.Dates[0]);
|
|
22
|
-
}
|
|
23
|
-
return 0;
|
|
24
|
-
}, [data]);
|
|
15
|
+
var _a, _b;
|
|
16
|
+
var data = props.data, _c = props.index, index = _c === void 0 ? 0 : _c;
|
|
17
|
+
var stay = useStays(data.Dates).stay;
|
|
25
18
|
return (_jsx(DetailsColComponent, { data: [
|
|
26
19
|
{ icon: 'calendar2', value: "Room ".concat(index + 1, " : ").concat(data.RoomName) },
|
|
27
20
|
{ icon: 'night', value: "".concat(stay, " Nights") },
|
|
28
21
|
{
|
|
29
22
|
icon: 'user',
|
|
30
|
-
value: "Client type : ".concat(clientType[(_a = data.ClientCategory) === null || _a === void 0 ? void 0 : _a.toLowerCase()]),
|
|
23
|
+
value: "Client type : ".concat((_b = clientType[(_a = data.ClientCategory) === null || _a === void 0 ? void 0 : _a.toLowerCase()]) !== null && _b !== void 0 ? _b : data.ClientCategory),
|
|
31
24
|
},
|
|
32
25
|
{ icon: 'utensils', value: "Meal plan : ".concat(data.MealPlan) },
|
|
33
26
|
] }));
|
|
@@ -18,6 +18,6 @@ import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
|
|
|
18
18
|
*/
|
|
19
19
|
export default function HeaderAccom(props) {
|
|
20
20
|
var hotelName = props.hotelName, pax = props.pax, dates = props.dates;
|
|
21
|
-
var stay = useStays(dates);
|
|
21
|
+
var stay = useStays(dates).stay;
|
|
22
22
|
return (_jsxs("div", { children: [_jsx(ServiceTitle, { title: hotelName, textSize: "sm" }), _jsx(TextWithIcon, { icon: "user", children: pax }), _jsx(DateDisplay, { dates: dates, arrowSize: "xs", calendarSize: "xs" }), _jsxs(TextWithIcon, { icon: "night", children: [stay, " Nights"] })] }));
|
|
23
23
|
}
|
|
@@ -83,56 +83,6 @@
|
|
|
83
83
|
border-bottom: none;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
|
-
&.table__children--visible {
|
|
87
|
-
position: relative;
|
|
88
|
-
}
|
|
89
|
-
&.table__children--visible {
|
|
90
|
-
border: 1px solid transparent;
|
|
91
|
-
border-left: none;
|
|
92
|
-
&::after {
|
|
93
|
-
content: '';
|
|
94
|
-
position: absolute;
|
|
95
|
-
inset: -1px -1px 1px -1px;
|
|
96
|
-
pointer-events: none;
|
|
97
|
-
max-width: 100%;
|
|
98
|
-
background-image:
|
|
99
|
-
repeating-linear-gradient(
|
|
100
|
-
to right,
|
|
101
|
-
var(--color-border-medium) 0,
|
|
102
|
-
var(--color-border-medium) 16px,
|
|
103
|
-
transparent 16px,
|
|
104
|
-
transparent 32px
|
|
105
|
-
),
|
|
106
|
-
repeating-linear-gradient(
|
|
107
|
-
to right,
|
|
108
|
-
var(--color-border-medium) 0,
|
|
109
|
-
var(--color-border-medium) 16px,
|
|
110
|
-
transparent 16px,
|
|
111
|
-
transparent 32px
|
|
112
|
-
),
|
|
113
|
-
repeating-linear-gradient(
|
|
114
|
-
to bottom,
|
|
115
|
-
var(--color-border-medium) 0,
|
|
116
|
-
var(--color-border-medium) 16px,
|
|
117
|
-
transparent 16px,
|
|
118
|
-
transparent 32px
|
|
119
|
-
),
|
|
120
|
-
repeating-linear-gradient(
|
|
121
|
-
to bottom,
|
|
122
|
-
var(--color-border-medium) 0,
|
|
123
|
-
var(--color-border-medium) 16px,
|
|
124
|
-
transparent 16px,
|
|
125
|
-
transparent 32px
|
|
126
|
-
);
|
|
127
|
-
background-size:
|
|
128
|
-
100% 1px,
|
|
129
|
-
100% 1px,
|
|
130
|
-
1px 100%,
|
|
131
|
-
1px 100%;
|
|
132
|
-
background-position: top, bottom, left, right;
|
|
133
|
-
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
86
|
}
|
|
137
87
|
.table__nested-wrapper {
|
|
138
88
|
overflow: hidden;
|
|
@@ -294,4 +244,53 @@
|
|
|
294
244
|
& + tr {
|
|
295
245
|
border-top: none;
|
|
296
246
|
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.table__children-wrapper {
|
|
250
|
+
position: relative;
|
|
251
|
+
border: 1px solid transparent;
|
|
252
|
+
border-left: none;
|
|
253
|
+
&::after {
|
|
254
|
+
content: '';
|
|
255
|
+
position: absolute;
|
|
256
|
+
inset: -1px -1px 1px -1px;
|
|
257
|
+
pointer-events: none;
|
|
258
|
+
max-width: 100%;
|
|
259
|
+
background-image:
|
|
260
|
+
repeating-linear-gradient(
|
|
261
|
+
to right,
|
|
262
|
+
var(--color-border-medium) 0,
|
|
263
|
+
var(--color-border-medium) 16px,
|
|
264
|
+
transparent 16px,
|
|
265
|
+
transparent 32px
|
|
266
|
+
),
|
|
267
|
+
repeating-linear-gradient(
|
|
268
|
+
to right,
|
|
269
|
+
var(--color-border-medium) 0,
|
|
270
|
+
var(--color-border-medium) 16px,
|
|
271
|
+
transparent 16px,
|
|
272
|
+
transparent 32px
|
|
273
|
+
),
|
|
274
|
+
repeating-linear-gradient(
|
|
275
|
+
to bottom,
|
|
276
|
+
var(--color-border-medium) 0,
|
|
277
|
+
var(--color-border-medium) 16px,
|
|
278
|
+
transparent 16px,
|
|
279
|
+
transparent 32px
|
|
280
|
+
),
|
|
281
|
+
repeating-linear-gradient(
|
|
282
|
+
to bottom,
|
|
283
|
+
var(--color-border-medium) 0,
|
|
284
|
+
var(--color-border-medium) 16px,
|
|
285
|
+
transparent 16px,
|
|
286
|
+
transparent 32px
|
|
287
|
+
);
|
|
288
|
+
background-size:
|
|
289
|
+
100% 1px,
|
|
290
|
+
100% 1px,
|
|
291
|
+
1px 100%,
|
|
292
|
+
1px 100%;
|
|
293
|
+
background-position: top, bottom, left, right;
|
|
294
|
+
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
295
|
+
}
|
|
297
296
|
}
|
|
@@ -88,9 +88,9 @@ export function Table(props) {
|
|
|
88
88
|
}), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row, { parentIndex: rowIndex }); }, 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 })) }));
|
|
89
89
|
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, parentIndex: rowIndex }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", children: _jsx("td", { colSpan: columns.length, className: cn({
|
|
90
90
|
'table__children--visible': hasVisibleChildren,
|
|
91
|
-
}), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
}), children: _jsx("div", { className: "table__children-wrapper", children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
|
|
92
|
+
'table__row-nested': row.children && row.children.length > 0,
|
|
93
|
+
}), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(rowIndex))) })] }) }) }) }) })) }, "rw-".concat(rowIndex)));
|
|
94
94
|
}), data.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "table__cell-empty", children: _jsx(Text, { size: "md", variant: "bold", className: "text-center", children: "No data found" }) }) }))] })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
|
|
95
95
|
'table__total--dashed': isTotalBorderDash,
|
|
96
96
|
}), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
|
|
@@ -88,7 +88,10 @@ export var quotationColumns = function (_a) {
|
|
|
88
88
|
var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
|
|
89
89
|
var buttonLabel = isExpanded ? 'See less' : 'See more';
|
|
90
90
|
var isOnRequest = raw.status.toLowerCase() === 'on request';
|
|
91
|
-
|
|
91
|
+
var isPast = new Date(raw.created_date) < new Date();
|
|
92
|
+
return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw, index, childIndex); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: cn('table__button', {
|
|
93
|
+
'opacity-50 pointer-events-none': isPast,
|
|
94
|
+
}), children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx("div", { children: _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) }) })] })) }));
|
|
92
95
|
},
|
|
93
96
|
},
|
|
94
97
|
];
|
package/dist/hooks/useStays.d.ts
CHANGED
package/dist/hooks/useStays.js
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
import { differenceInDays } from 'date-fns';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
export default function useStays(dates) {
|
|
4
|
-
var
|
|
5
|
-
if (!dates) {
|
|
4
|
+
var getStay = function (dates) {
|
|
5
|
+
if (!dates || (dates === null || dates === void 0 ? void 0 : dates.length) === 0) {
|
|
6
6
|
return 0;
|
|
7
7
|
}
|
|
8
8
|
if (dates.length) {
|
|
9
9
|
return differenceInDays(dates[1], dates[0]);
|
|
10
10
|
}
|
|
11
11
|
return 0;
|
|
12
|
+
};
|
|
13
|
+
var stay = useMemo(function () {
|
|
14
|
+
return getStay(dates);
|
|
12
15
|
}, [dates]);
|
|
13
|
-
return
|
|
16
|
+
return {
|
|
17
|
+
stay: stay,
|
|
18
|
+
getStay: getStay,
|
|
19
|
+
};
|
|
14
20
|
}
|
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 } from './components/molecules/ActionDropdown/ActionDropdown';
|
|
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';
|
|
@@ -86,43 +86,44 @@ export { default as UserIcon } from './components/atoms/Icon/icons/User';
|
|
|
86
86
|
export { priceFormatter } from './lib/price-formatter';
|
|
87
87
|
export type { DividerProps } from './components/atoms/Divider/Divider';
|
|
88
88
|
export type { FeatureRowProps } from './components/molecules/FeatureRow/FeatureRow';
|
|
89
|
-
export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption } from './components/molecules/LocationDropdown/LocationDropdown';
|
|
90
|
-
export type { ServiceOption, ServiceSelectorProps, ServiceType } from './components/molecules/ServiceSelector/ServiceSelector';
|
|
89
|
+
export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption, } from './components/molecules/LocationDropdown/LocationDropdown';
|
|
90
|
+
export type { ServiceOption, ServiceSelectorProps, ServiceType, } from './components/molecules/ServiceSelector/ServiceSelector';
|
|
91
91
|
export type { StepperProps } from './components/molecules/Stepper/Stepper';
|
|
92
|
-
export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType } from './components/organisms/CarBookingCard/CarBookingCard';
|
|
93
|
-
export type { CardContainerProps, CardContainerSpacing } from './components/organisms/CardContainer/CardContainer';
|
|
92
|
+
export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './components/organisms/CarBookingCard/CarBookingCard';
|
|
93
|
+
export type { CardContainerProps, CardContainerSpacing, } from './components/organisms/CardContainer/CardContainer';
|
|
94
94
|
export type { DateTimePickerProps } from './components/organisms/DateTimePicker/DateTimePicker';
|
|
95
95
|
export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dialog';
|
|
96
96
|
export type { FooterProps } from './components/organisms/Footer/Footer';
|
|
97
|
-
export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps } from './components/organisms/MultipleQuotationDocket';
|
|
97
|
+
export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps, } from './components/organisms/MultipleQuotationDocket';
|
|
98
98
|
export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
|
|
99
|
-
export type { ClientType, PaxData, PaxSelectorProps } from './components/organisms/PaxSelector/PaxSelector';
|
|
100
|
-
export type { RoundTripData, RoundTripProps, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
|
|
101
|
-
export type { SearchBarTransferData, SearchBarTransferProps, TransferMode } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
|
|
99
|
+
export type { ClientType, PaxData, PaxSelectorProps, } from './components/organisms/PaxSelector/PaxSelector';
|
|
100
|
+
export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './components/organisms/RoundTrip/RoundTrip';
|
|
101
|
+
export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
|
|
102
102
|
export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
|
|
103
|
-
export type { TransferLineData, TransferLineProps, TransferType } from './components/organisms/TransferLine/TransferLine';
|
|
103
|
+
export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
|
|
104
104
|
export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
|
|
105
105
|
export type { InputProps } from './components/atoms/Inputs/Input/Input';
|
|
106
106
|
export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
|
|
107
107
|
export type { AgeSelectorProps } from './components/molecules/AgeSelector/AgeSelector';
|
|
108
|
-
export type { BreadcrumbsItem, BreadcrumbsProps } from './components/molecules/Breadcrumbs/Breadcrumbs';
|
|
108
|
+
export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
|
|
109
109
|
export type { DocketPricesProps } from './components/molecules/DocketPrices/DocketPrices';
|
|
110
110
|
export type { FromToProps } from './components/molecules/FromTo/FromTo';
|
|
111
111
|
export type { PaxChipsProps, PaxCount } from './components/molecules/PaxChips/PaxChips';
|
|
112
112
|
export type { PriceDisplayProps } from './components/molecules/PriceDisplay/PriceDisplay';
|
|
113
113
|
export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
|
|
114
|
-
export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps } from './components/molecules/TableServiceItem';
|
|
114
|
+
export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
|
|
115
115
|
export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
|
|
116
116
|
export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
|
|
117
117
|
export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
|
|
118
118
|
export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
|
|
119
119
|
export type { ToastProps } from './components/molecules/Toast/Toast';
|
|
120
120
|
export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
|
|
121
|
-
export type { ComparisonData, DialogComparisonProps, MultiComparisonData } from './components/organisms/DialogComparison/DialogComparison';
|
|
121
|
+
export type { ComparisonData, DialogComparisonProps, MultiComparisonData, } from './components/organisms/DialogComparison/DialogComparison';
|
|
122
122
|
export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
|
|
123
123
|
export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
|
|
124
124
|
export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
|
|
125
|
-
export type { FilterType, QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
|
|
126
|
-
export type { TimelineProps, TimelineServices } from './components/organisms/Timeline/Timeline';
|
|
127
|
-
export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType } from './types/docket/services.types';
|
|
125
|
+
export type { FilterType, QuoteHeaderProps, } from './components/organisms/QuoteHeader/QuoteHeader';
|
|
126
|
+
export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
|
|
127
|
+
export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType, } from './types/docket/services.types';
|
|
128
128
|
export * from './types/table';
|
|
129
|
+
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 } from './components/molecules/ActionDropdown/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';
|
|
@@ -92,3 +92,5 @@ export { default as UserIcon } from './components/atoms/Icon/icons/User';
|
|
|
92
92
|
export { priceFormatter } from './lib/price-formatter';
|
|
93
93
|
export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
|
|
94
94
|
export * from './types/table';
|
|
95
|
+
// Hooks
|
|
96
|
+
export * from './hooks/useStays';
|
package/package.json
CHANGED
|
@@ -38,8 +38,6 @@ export function ActionDropdown(props: ActionDropdownProps) {
|
|
|
38
38
|
const { data, children, maxWidth = '153px' } = props;
|
|
39
39
|
const [open, setOpen] = useState(false);
|
|
40
40
|
|
|
41
|
-
console.log(open);
|
|
42
|
-
|
|
43
41
|
return (
|
|
44
42
|
<Popover open={open} onOpenChange={setOpen}>
|
|
45
43
|
<PopoverTrigger>
|
|
@@ -22,7 +22,7 @@ export interface ResumeAccomProps {
|
|
|
22
22
|
export function ResumeAccom(props: ResumeAccomProps) {
|
|
23
23
|
const { image, dates, clientType, pax, rooms, hotelName } = props;
|
|
24
24
|
|
|
25
|
-
const stay = useStays(dates);
|
|
25
|
+
const { stay } = useStays(dates);
|
|
26
26
|
|
|
27
27
|
return (
|
|
28
28
|
<BookingResumeLayout
|
|
@@ -8,7 +8,7 @@ export interface DetailsFileProps {
|
|
|
8
8
|
/** Label of the file */
|
|
9
9
|
label?: string;
|
|
10
10
|
/** Show the title of the file */
|
|
11
|
-
|
|
11
|
+
title?: string;
|
|
12
12
|
/** Show the regular info of the file */
|
|
13
13
|
showRegularInfo?: boolean;
|
|
14
14
|
}
|
|
@@ -18,14 +18,14 @@ export function DetailsFile(props: DetailsFileProps) {
|
|
|
18
18
|
number,
|
|
19
19
|
name,
|
|
20
20
|
label = 'File number:',
|
|
21
|
-
|
|
21
|
+
title = false,
|
|
22
22
|
showRegularInfo = true,
|
|
23
23
|
} = props;
|
|
24
24
|
return (
|
|
25
25
|
<div className="grid gap-y-2">
|
|
26
|
-
{
|
|
26
|
+
{title && (
|
|
27
27
|
<Text variant="bold" className="text-2xl" color="brand">
|
|
28
|
-
{
|
|
28
|
+
{title}
|
|
29
29
|
</Text>
|
|
30
30
|
)}
|
|
31
31
|
{showRegularInfo && (
|
|
@@ -18,7 +18,7 @@ export interface DialogCancellationAccomProps {
|
|
|
18
18
|
|
|
19
19
|
export function DialogCancellationAccom(props: DialogCancellationAccomProps) {
|
|
20
20
|
const { image, hotelName, dates, rooms, cancellationFee, currency } = props;
|
|
21
|
-
const stay = useStays(dates);
|
|
21
|
+
const { stay } = useStays(dates);
|
|
22
22
|
|
|
23
23
|
return (
|
|
24
24
|
<CancellationLayout
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useMemo } from 'react';
|
|
1
|
+
import useStays from '@/src/hooks/useStays';
|
|
3
2
|
import { DetailsCol as DetailsColComponent } from './DetailsCol';
|
|
4
3
|
import { ItemCol, ItemColProps } from './ItemCol';
|
|
5
4
|
|
|
@@ -27,13 +26,7 @@ export function RowAccommodation() {
|
|
|
27
26
|
function DetailsCol(props: RowAccommodationProps) {
|
|
28
27
|
const { data, index = 0 } = props;
|
|
29
28
|
|
|
30
|
-
const stay =
|
|
31
|
-
if (data.Dates?.length) {
|
|
32
|
-
return differenceInDays(data.Dates[1], data.Dates[0]);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return 0;
|
|
36
|
-
}, [data]);
|
|
29
|
+
const { stay } = useStays(data.Dates);
|
|
37
30
|
return (
|
|
38
31
|
<DetailsColComponent
|
|
39
32
|
data={[
|
|
@@ -41,7 +34,7 @@ function DetailsCol(props: RowAccommodationProps) {
|
|
|
41
34
|
{ icon: 'night', value: `${stay} Nights` },
|
|
42
35
|
{
|
|
43
36
|
icon: 'user',
|
|
44
|
-
value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string]}`,
|
|
37
|
+
value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string] ?? data.ClientCategory}`,
|
|
45
38
|
},
|
|
46
39
|
{ icon: 'utensils', value: `Meal plan : ${data.MealPlan}` },
|
|
47
40
|
]}
|
|
@@ -67,54 +67,6 @@
|
|
|
67
67
|
border-bottom: none;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
&.table__children--visible {
|
|
71
|
-
@apply relative;
|
|
72
|
-
border: 1px solid transparent;
|
|
73
|
-
border-left: none;
|
|
74
|
-
&::after {
|
|
75
|
-
content: '';
|
|
76
|
-
position: absolute;
|
|
77
|
-
inset: -1px -1px 1px -1px;
|
|
78
|
-
pointer-events: none;
|
|
79
|
-
max-width: 100%;
|
|
80
|
-
background-image:
|
|
81
|
-
repeating-linear-gradient(
|
|
82
|
-
to right,
|
|
83
|
-
var(--color-border-medium) 0,
|
|
84
|
-
var(--color-border-medium) 16px,
|
|
85
|
-
transparent 16px,
|
|
86
|
-
transparent 32px
|
|
87
|
-
),
|
|
88
|
-
repeating-linear-gradient(
|
|
89
|
-
to right,
|
|
90
|
-
var(--color-border-medium) 0,
|
|
91
|
-
var(--color-border-medium) 16px,
|
|
92
|
-
transparent 16px,
|
|
93
|
-
transparent 32px
|
|
94
|
-
),
|
|
95
|
-
repeating-linear-gradient(
|
|
96
|
-
to bottom,
|
|
97
|
-
var(--color-border-medium) 0,
|
|
98
|
-
var(--color-border-medium) 16px,
|
|
99
|
-
transparent 16px,
|
|
100
|
-
transparent 32px
|
|
101
|
-
),
|
|
102
|
-
repeating-linear-gradient(
|
|
103
|
-
to bottom,
|
|
104
|
-
var(--color-border-medium) 0,
|
|
105
|
-
var(--color-border-medium) 16px,
|
|
106
|
-
transparent 16px,
|
|
107
|
-
transparent 32px
|
|
108
|
-
);
|
|
109
|
-
background-size:
|
|
110
|
-
100% 1px,
|
|
111
|
-
100% 1px,
|
|
112
|
-
1px 100%,
|
|
113
|
-
1px 100%;
|
|
114
|
-
background-position: top, bottom, left, right;
|
|
115
|
-
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
70
|
}
|
|
119
71
|
.table__nested-wrapper {
|
|
120
72
|
overflow: hidden;
|
|
@@ -271,3 +223,52 @@
|
|
|
271
223
|
border-top: none;
|
|
272
224
|
}
|
|
273
225
|
}
|
|
226
|
+
|
|
227
|
+
.table__children-wrapper {
|
|
228
|
+
@apply relative;
|
|
229
|
+
border: 1px solid transparent;
|
|
230
|
+
border-left: none;
|
|
231
|
+
&::after {
|
|
232
|
+
content: '';
|
|
233
|
+
position: absolute;
|
|
234
|
+
inset: -1px -1px 1px -1px;
|
|
235
|
+
pointer-events: none;
|
|
236
|
+
max-width: 100%;
|
|
237
|
+
background-image:
|
|
238
|
+
repeating-linear-gradient(
|
|
239
|
+
to right,
|
|
240
|
+
var(--color-border-medium) 0,
|
|
241
|
+
var(--color-border-medium) 16px,
|
|
242
|
+
transparent 16px,
|
|
243
|
+
transparent 32px
|
|
244
|
+
),
|
|
245
|
+
repeating-linear-gradient(
|
|
246
|
+
to right,
|
|
247
|
+
var(--color-border-medium) 0,
|
|
248
|
+
var(--color-border-medium) 16px,
|
|
249
|
+
transparent 16px,
|
|
250
|
+
transparent 32px
|
|
251
|
+
),
|
|
252
|
+
repeating-linear-gradient(
|
|
253
|
+
to bottom,
|
|
254
|
+
var(--color-border-medium) 0,
|
|
255
|
+
var(--color-border-medium) 16px,
|
|
256
|
+
transparent 16px,
|
|
257
|
+
transparent 32px
|
|
258
|
+
),
|
|
259
|
+
repeating-linear-gradient(
|
|
260
|
+
to bottom,
|
|
261
|
+
var(--color-border-medium) 0,
|
|
262
|
+
var(--color-border-medium) 16px,
|
|
263
|
+
transparent 16px,
|
|
264
|
+
transparent 32px
|
|
265
|
+
);
|
|
266
|
+
background-size:
|
|
267
|
+
100% 1px,
|
|
268
|
+
100% 1px,
|
|
269
|
+
1px 100%,
|
|
270
|
+
1px 100%;
|
|
271
|
+
background-position: top, bottom, left, right;
|
|
272
|
+
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
@@ -263,33 +263,35 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
|
|
|
263
263
|
className={cn({
|
|
264
264
|
'table__children--visible': hasVisibleChildren,
|
|
265
265
|
})}>
|
|
266
|
-
<
|
|
267
|
-
<
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
{
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
'
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
266
|
+
<div className="table__children-wrapper">
|
|
267
|
+
<table className="table">
|
|
268
|
+
<tbody>
|
|
269
|
+
{defaultTable}
|
|
270
|
+
<AnimatePresence initial={false}>
|
|
271
|
+
{hasVisibleChildren && (
|
|
272
|
+
<tr
|
|
273
|
+
key={`nested-${rowIndex}`}
|
|
274
|
+
className={cn('table__no-hover', {
|
|
275
|
+
'table__row-nested':
|
|
276
|
+
row.children && row.children.length > 0,
|
|
277
|
+
})}>
|
|
278
|
+
<td
|
|
279
|
+
colSpan={columns.length}
|
|
280
|
+
className="table__cell-nested">
|
|
281
|
+
<NestedContent<T>
|
|
282
|
+
rowIndex={rowIndex}
|
|
283
|
+
columns={columns}
|
|
284
|
+
parentIndex={rowIndex}
|
|
285
|
+
children={row.children || []}
|
|
286
|
+
onClickRow={onClickRow}
|
|
287
|
+
/>
|
|
288
|
+
</td>
|
|
289
|
+
</tr>
|
|
290
|
+
)}
|
|
291
|
+
</AnimatePresence>
|
|
292
|
+
</tbody>
|
|
293
|
+
</table>
|
|
294
|
+
</div>
|
|
293
295
|
</td>
|
|
294
296
|
</tr>
|
|
295
297
|
)}
|
|
@@ -152,6 +152,8 @@ export const quotationColumns: (params: {
|
|
|
152
152
|
const buttonLabel = isExpanded ? 'See less' : 'See more';
|
|
153
153
|
const isOnRequest = raw.status.toLowerCase() === 'on request';
|
|
154
154
|
|
|
155
|
+
const isPast = new Date(raw.created_date) < new Date();
|
|
156
|
+
|
|
155
157
|
return (
|
|
156
158
|
<div>
|
|
157
159
|
{hasChildren ? (
|
|
@@ -168,7 +170,9 @@ export const quotationColumns: (params: {
|
|
|
168
170
|
<Button
|
|
169
171
|
variant={isOnRequest ? 'outline-secondary' : 'secondary'}
|
|
170
172
|
size="sm"
|
|
171
|
-
className=
|
|
173
|
+
className={cn('table__button', {
|
|
174
|
+
'opacity-50 pointer-events-none': isPast,
|
|
175
|
+
})}>
|
|
172
176
|
{isOnRequest ? 'Request to book' : 'Book now'}
|
|
173
177
|
</Button>
|
|
174
178
|
<div>
|