willba-component-library 0.2.62 → 0.2.64
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/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -1
- package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts +4 -2
- package/lib/core/components/calendar/hooks/useUpdateDisabledDates.d.ts +2 -1
- package/lib/core/components/calendar/utils/handleCalendarModifiers.d.ts +2 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.esm.js +97 -22
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +97 -22
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +97 -22
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterCalendar/FilterCalendar.css +12 -1
- package/src/components/FilterCalendar/FilterCalendar.tsx +44 -17
- package/src/components/FilterCalendar/hooks/useFilterCalendar.ts +19 -1
- package/src/core/components/calendar/Calendar.tsx +13 -5
- package/src/core/components/calendar/hooks/useUpdateDisabledDates.tsx +19 -2
- package/src/core/components/calendar/utils/handleCalendarModifiers.tsx +4 -2
- package/src/locales/en/common.json +9 -1
- package/src/locales/en/filterBar.json +2 -1
- package/src/locales/fi/common.json +9 -1
- package/src/locales/fi/filterBar.json +2 -1
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
|
2
2
|
import '../../themes/Default.css';
|
|
3
3
|
import { FilterCalendarTypes } from './FilterCalendarTypes';
|
|
4
4
|
import './FilterCalendar.css';
|
|
5
|
-
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
|
|
5
|
+
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DateRange, Matcher } from 'react-day-picker';
|
|
3
|
-
import { RangeContext } from 'src/core/components/calendar/CalendarTypes';
|
|
3
|
+
import { DisableCalendarDates, RangeContext } from 'src/core/components/calendar/CalendarTypes';
|
|
4
4
|
type Props = {
|
|
5
5
|
onSubmit: (val: any) => void;
|
|
6
6
|
setToggleCalendar: (val: boolean) => void;
|
|
7
7
|
noActiveSelection?: boolean;
|
|
8
8
|
toggleCalendar?: boolean;
|
|
9
9
|
outerRangeContext?: RangeContext;
|
|
10
|
+
outerDisableCalendarDates?: DisableCalendarDates;
|
|
10
11
|
};
|
|
11
|
-
export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar, noActiveSelection, toggleCalendar, outerRangeContext, }: Props) => {
|
|
12
|
+
export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar, noActiveSelection, toggleCalendar, outerRangeContext, outerDisableCalendarDates, }: Props) => {
|
|
12
13
|
handleSubmit: () => void;
|
|
13
14
|
handleClearDates: () => void;
|
|
14
15
|
setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
|
|
@@ -22,5 +23,6 @@ export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar, noActive
|
|
|
22
23
|
setCalendarHasError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
23
24
|
setUpdatedForSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
24
25
|
rangeContext: RangeContext | undefined;
|
|
26
|
+
disableCalendarDates: DisableCalendarDates | undefined;
|
|
25
27
|
};
|
|
26
28
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DateRange } from 'react-day-picker';
|
|
1
|
+
import { DateRange, Matcher } from 'react-day-picker';
|
|
2
2
|
import { DisableCalendarDates } from '../CalendarTypes';
|
|
3
3
|
type Props = {
|
|
4
4
|
disableCalendarDates?: DisableCalendarDates;
|
|
@@ -9,5 +9,6 @@ type Props = {
|
|
|
9
9
|
export declare const useUpdateDisabledDates: ({ disableCalendarDates, calendarRange, updateCalendarMonthNavigation, updateCalendarDefaultMonth, }: Props) => {
|
|
10
10
|
newDisableCalendarDates: DisableCalendarDates | undefined;
|
|
11
11
|
overlappingDate: DateRange[] | undefined;
|
|
12
|
+
lastPossibleCheckout: Matcher;
|
|
12
13
|
};
|
|
13
14
|
export {};
|
|
@@ -8,6 +8,7 @@ type Props = {
|
|
|
8
8
|
to: Date;
|
|
9
9
|
}[];
|
|
10
10
|
disabledDates?: Matcher[];
|
|
11
|
+
lastPossibleCheckout?: Matcher;
|
|
11
12
|
overlappingDate?: DateRange[];
|
|
12
13
|
rangeContext?: RangeContext;
|
|
13
14
|
findFirstPossibleRangeContextCheckIn?: NonNullable<DisableCalendarDates['availableDates']>['0'];
|
|
@@ -16,7 +17,7 @@ type Props = {
|
|
|
16
17
|
lastPossibleRangeContextCheckOut: Matcher[];
|
|
17
18
|
currentSelectionLastCheckoutDate?: NonNullable<DisableCalendarDates['availableDates']>['0'];
|
|
18
19
|
};
|
|
19
|
-
export declare const handleCalendarModifiers: ({ newDisableCalendarDates, calendarRange, disabledDatesByPage, disabledDates, overlappingDate, rangeContext, firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate, }: Props) => {
|
|
20
|
+
export declare const handleCalendarModifiers: ({ newDisableCalendarDates, calendarRange, disabledDatesByPage, disabledDates, overlappingDate, rangeContext, firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate, lastPossibleCheckout, }: Props) => {
|
|
20
21
|
booked: Matcher[];
|
|
21
22
|
disabledAfterCheckIn: {
|
|
22
23
|
after: Date;
|
package/lib/index.d.ts
CHANGED
|
@@ -122,6 +122,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
|
122
122
|
setToggleCalendar: (val: boolean) => void;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
|
|
125
|
+
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
|
|
126
126
|
|
|
127
127
|
export { Button, FilterBar, FilterCalendar, FilterCalendarTypes, Tab };
|
package/lib/index.esm.js
CHANGED
|
@@ -2819,7 +2819,8 @@ var calendar$1 = {
|
|
|
2819
2819
|
endDate: "End date",
|
|
2820
2820
|
title: "Calendar",
|
|
2821
2821
|
checkoutOnly: "Check-out only",
|
|
2822
|
-
hasDisableDates: "Contains unavailable dates"
|
|
2822
|
+
hasDisableDates: "Contains unavailable dates",
|
|
2823
|
+
minNights: "2 nights min"
|
|
2823
2824
|
};
|
|
2824
2825
|
var guests$1 = {
|
|
2825
2826
|
label: "Number of guests",
|
|
@@ -2855,6 +2856,14 @@ var clearDates$1 = "Clear dates";
|
|
|
2855
2856
|
var noCheckIn$1 = "Room not available";
|
|
2856
2857
|
var noCheckOut$1 = "Check-out not available";
|
|
2857
2858
|
var checkOutOnly$1 = "Check-out only";
|
|
2859
|
+
var onlyCheckOut$1 = "Check-in only";
|
|
2860
|
+
var onlyCheckIn$1 = "Check-out only";
|
|
2861
|
+
var errors$1 = {
|
|
2862
|
+
calendarErrors: {
|
|
2863
|
+
checkInAvailabilityError: "Check-in available for second room only with connection dates",
|
|
2864
|
+
checkInAvailabilityGuide: "Start or end day need connection for previous reservation"
|
|
2865
|
+
}
|
|
2866
|
+
};
|
|
2858
2867
|
var enCommon = {
|
|
2859
2868
|
night: night$1,
|
|
2860
2869
|
nights: nights$1,
|
|
@@ -2865,7 +2874,10 @@ var enCommon = {
|
|
|
2865
2874
|
clearDates: clearDates$1,
|
|
2866
2875
|
noCheckIn: noCheckIn$1,
|
|
2867
2876
|
noCheckOut: noCheckOut$1,
|
|
2868
|
-
checkOutOnly: checkOutOnly$1
|
|
2877
|
+
checkOutOnly: checkOutOnly$1,
|
|
2878
|
+
onlyCheckOut: onlyCheckOut$1,
|
|
2879
|
+
onlyCheckIn: onlyCheckIn$1,
|
|
2880
|
+
errors: errors$1
|
|
2869
2881
|
};
|
|
2870
2882
|
|
|
2871
2883
|
var calendar = {
|
|
@@ -2876,7 +2888,8 @@ var calendar = {
|
|
|
2876
2888
|
endDate: "Loppu",
|
|
2877
2889
|
title: "Kalenteri",
|
|
2878
2890
|
checkoutOnly: "Check-out only",
|
|
2879
|
-
hasDisableDates: "Contains unavailable dates"
|
|
2891
|
+
hasDisableDates: "Contains unavailable dates",
|
|
2892
|
+
minNights: "2 nights min"
|
|
2880
2893
|
};
|
|
2881
2894
|
var guests = {
|
|
2882
2895
|
label: "Vierasmäärä",
|
|
@@ -2914,6 +2927,14 @@ var clearDates = "Tyhjennä";
|
|
|
2914
2927
|
var noCheckIn = "Huone ei saatavilla";
|
|
2915
2928
|
var noCheckOut = "Uloskirjaus ei saatavilla";
|
|
2916
2929
|
var checkOutOnly = "Vain uloskirjaus";
|
|
2930
|
+
var onlyCheckOut = "Check-in only";
|
|
2931
|
+
var onlyCheckIn = "Check-out only";
|
|
2932
|
+
var errors = {
|
|
2933
|
+
calendarErrors: {
|
|
2934
|
+
checkInAvailabilityError: "Check-in available for second room only with connection dates",
|
|
2935
|
+
checkInAvailabilityGuide: "Start or end day need connection for previous reservation"
|
|
2936
|
+
}
|
|
2937
|
+
};
|
|
2917
2938
|
var fiCommon = {
|
|
2918
2939
|
night: night,
|
|
2919
2940
|
nights: nights,
|
|
@@ -2924,7 +2945,10 @@ var fiCommon = {
|
|
|
2924
2945
|
clearDates: clearDates,
|
|
2925
2946
|
noCheckIn: noCheckIn,
|
|
2926
2947
|
noCheckOut: noCheckOut,
|
|
2927
|
-
checkOutOnly: checkOutOnly
|
|
2948
|
+
checkOutOnly: checkOutOnly,
|
|
2949
|
+
onlyCheckOut: onlyCheckOut,
|
|
2950
|
+
onlyCheckIn: onlyCheckIn,
|
|
2951
|
+
errors: errors
|
|
2928
2952
|
};
|
|
2929
2953
|
|
|
2930
2954
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -11150,7 +11174,7 @@ var disabledDatesByPage = function (_a) {
|
|
|
11150
11174
|
|
|
11151
11175
|
var handleCalendarModifiers = function (_a) {
|
|
11152
11176
|
var _b;
|
|
11153
|
-
var newDisableCalendarDates = _a.newDisableCalendarDates, calendarRange = _a.calendarRange, disabledDatesByPage = _a.disabledDatesByPage, disabledDates = _a.disabledDates, overlappingDate = _a.overlappingDate, rangeContext = _a.rangeContext, firstPossibleRangeContextCheckIn = _a.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _a.lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn = _a.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _a.findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _a.currentSelectionLastCheckoutDate;
|
|
11177
|
+
var newDisableCalendarDates = _a.newDisableCalendarDates, calendarRange = _a.calendarRange, disabledDatesByPage = _a.disabledDatesByPage, disabledDates = _a.disabledDates, overlappingDate = _a.overlappingDate, rangeContext = _a.rangeContext, firstPossibleRangeContextCheckIn = _a.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _a.lastPossibleRangeContextCheckOut, findFirstPossibleRangeContextCheckIn = _a.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _a.findLastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _a.currentSelectionLastCheckoutDate, lastPossibleCheckout = _a.lastPossibleCheckout;
|
|
11154
11178
|
// Parse data
|
|
11155
11179
|
var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
|
|
11156
11180
|
var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
|
|
@@ -11185,13 +11209,16 @@ var handleCalendarModifiers = function (_a) {
|
|
|
11185
11209
|
})));
|
|
11186
11210
|
})
|
|
11187
11211
|
: [];
|
|
11188
|
-
console.log();
|
|
11189
11212
|
return {
|
|
11190
11213
|
booked: disabledDatesByPage.length
|
|
11191
11214
|
? disabledDatesByPage
|
|
11192
11215
|
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11193
|
-
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11194
|
-
|
|
11216
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11217
|
+
lastPossibleCheckout || []
|
|
11218
|
+
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11219
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11220
|
+
lastPossibleCheckout || []
|
|
11221
|
+
], __read(newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [],
|
|
11195
11222
|
disabledAfterCheckIn: calendarRangeFrom
|
|
11196
11223
|
? [{ after: calendarRangeFrom }]
|
|
11197
11224
|
: [],
|
|
@@ -11409,6 +11436,7 @@ var useCalendarLoadingSpinner = function (_a) {
|
|
|
11409
11436
|
var useUpdateDisabledDates = function (_a) {
|
|
11410
11437
|
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
|
|
11411
11438
|
var _b = __read(useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
|
|
11439
|
+
var _c = __read(useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
|
|
11412
11440
|
var newDisableCalendarDates = useMemo(function () {
|
|
11413
11441
|
if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
|
|
11414
11442
|
var dateFormat_1 = 'dd-MM-yyyy';
|
|
@@ -11437,12 +11465,21 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11437
11465
|
}
|
|
11438
11466
|
return acc;
|
|
11439
11467
|
}, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _a.updatedDisabledDates, newOverlappingDates_1 = _a.newOverlappingDates;
|
|
11468
|
+
// Find last possible checkout ( disable all dates after the last possible checkout )
|
|
11469
|
+
var lastPossibleCheckout_1 = disableCalendarDates.availableDates[disableCalendarDates.availableDates.length - 1].lastCheckOut;
|
|
11470
|
+
if (lastPossibleCheckout_1) {
|
|
11471
|
+
setLatsPossibleCheckout({ after: lastPossibleCheckout_1 });
|
|
11472
|
+
}
|
|
11473
|
+
// Extract overlapping dates ( dates that are only available for checkout )
|
|
11440
11474
|
if (newOverlappingDates_1.length) {
|
|
11441
11475
|
setOverlappingDate(function (prev) {
|
|
11442
11476
|
if (prev === void 0) { prev = []; }
|
|
11443
11477
|
return __spreadArray$1(__spreadArray$1([], __read(prev), false), __read(newOverlappingDates_1), false);
|
|
11444
11478
|
});
|
|
11445
11479
|
}
|
|
11480
|
+
if (newOverlappingDates_1.length) {
|
|
11481
|
+
console.log(newOverlappingDates_1);
|
|
11482
|
+
}
|
|
11446
11483
|
var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
|
|
11447
11484
|
return newDisableCalendarDates_1;
|
|
11448
11485
|
}
|
|
@@ -11453,7 +11490,7 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11453
11490
|
updateCalendarMonthNavigation,
|
|
11454
11491
|
updateCalendarDefaultMonth,
|
|
11455
11492
|
]);
|
|
11456
|
-
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate };
|
|
11493
|
+
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11457
11494
|
};
|
|
11458
11495
|
|
|
11459
11496
|
var css_248z$9 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
@@ -11471,13 +11508,15 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11471
11508
|
var today = startOfDay(new Date());
|
|
11472
11509
|
var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
|
|
11473
11510
|
var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
|
|
11474
|
-
|
|
11511
|
+
console.log({ disableCalendarDates: disableCalendarDates });
|
|
11512
|
+
// Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
|
|
11475
11513
|
var _d = useUpdateDisabledDates({
|
|
11476
11514
|
disableCalendarDates: disableCalendarDates,
|
|
11477
11515
|
calendarRange: calendarRange,
|
|
11478
11516
|
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11479
11517
|
updateCalendarDefaultMonth: updateCalendarDefaultMonth,
|
|
11480
|
-
}), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate;
|
|
11518
|
+
}), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate, lastPossibleCheckout = _d.lastPossibleCheckout;
|
|
11519
|
+
console.log({ newDisableCalendarDates: newDisableCalendarDates });
|
|
11481
11520
|
// Handle disable dates by page
|
|
11482
11521
|
var disabledDatesByPage$1 = disabledDatesByPage({
|
|
11483
11522
|
today: today,
|
|
@@ -11507,6 +11546,7 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11507
11546
|
});
|
|
11508
11547
|
setUpdatedForSubmit && setUpdatedForSubmit(true);
|
|
11509
11548
|
};
|
|
11549
|
+
console.log({ disabledDates: disabledDates });
|
|
11510
11550
|
// Handle disabled dates for range context
|
|
11511
11551
|
var _e = handleRangeContextDisabledDates({
|
|
11512
11552
|
rangeContext: rangeContext,
|
|
@@ -11530,8 +11570,12 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11530
11570
|
: today), disabled: disabledDatesByPage$1.length
|
|
11531
11571
|
? disabledDatesByPage$1
|
|
11532
11572
|
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11533
|
-
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11534
|
-
|
|
11573
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11574
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11575
|
+
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((_c = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _c === void 0 ? void 0 : _c.length)
|
|
11576
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11577
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11578
|
+
], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [], fromMonth: today, onMonthChange: function (val) {
|
|
11535
11579
|
requestDates && setUpdateCalendarMonthNavigation
|
|
11536
11580
|
? (requestDates(val),
|
|
11537
11581
|
setUpdateCalendarMonthNavigation(function (prev) { return !prev; }))
|
|
@@ -11559,6 +11603,7 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
11559
11603
|
disabledDates: disabledDates,
|
|
11560
11604
|
overlappingDate: overlappingDate,
|
|
11561
11605
|
rangeContext: rangeContext,
|
|
11606
|
+
lastPossibleCheckout: lastPossibleCheckout,
|
|
11562
11607
|
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11563
11608
|
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11564
11609
|
firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
|
|
@@ -11948,7 +11993,7 @@ var AGE_CATEGORIES_FALLBACK = [
|
|
|
11948
11993
|
var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
|
|
11949
11994
|
|
|
11950
11995
|
var useFilterCalendar = function (_a) {
|
|
11951
|
-
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext;
|
|
11996
|
+
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
|
|
11952
11997
|
// State
|
|
11953
11998
|
var _b = __read(useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
11954
11999
|
var _c = __read(useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
|
|
@@ -11958,7 +12003,15 @@ var useFilterCalendar = function (_a) {
|
|
|
11958
12003
|
var _g = __read(useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
|
|
11959
12004
|
var _h = __read(useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
|
|
11960
12005
|
var _j = __read(useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
|
|
12006
|
+
var _k = __read(useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
|
|
11961
12007
|
// Lifecycle
|
|
12008
|
+
// Handle update component with new data
|
|
12009
|
+
useEffect(function () {
|
|
12010
|
+
if (outerDisableCalendarDates) {
|
|
12011
|
+
setDisableCalendarDates(outerDisableCalendarDates);
|
|
12012
|
+
}
|
|
12013
|
+
}, [outerDisableCalendarDates]);
|
|
12014
|
+
// Handle Range Context initial selections
|
|
11962
12015
|
useEffect(function () {
|
|
11963
12016
|
if (typeof window === 'undefined')
|
|
11964
12017
|
return;
|
|
@@ -11988,6 +12041,7 @@ var useFilterCalendar = function (_a) {
|
|
|
11988
12041
|
}
|
|
11989
12042
|
}
|
|
11990
12043
|
}, [toggleCalendar]);
|
|
12044
|
+
// Handle submit dates
|
|
11991
12045
|
useEffect(function () {
|
|
11992
12046
|
var formatString = 'dd.MM.yyyy';
|
|
11993
12047
|
var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
|
|
@@ -12037,25 +12091,30 @@ var useFilterCalendar = function (_a) {
|
|
|
12037
12091
|
setCalendarHasError: setCalendarHasError,
|
|
12038
12092
|
setUpdatedForSubmit: setUpdatedForSubmit,
|
|
12039
12093
|
rangeContext: rangeContext,
|
|
12094
|
+
disableCalendarDates: disableCalendarDates,
|
|
12040
12095
|
};
|
|
12041
12096
|
};
|
|
12042
12097
|
|
|
12043
|
-
var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n margin-bottom: 12px;\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n }\n }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
|
|
12098
|
+
var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n display: flex;\n align-items: center;\n}\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n margin-bottom: 12px;\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error {\n min-width: 20px;\n margin-bottom: 10px; \n }\n }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
|
|
12044
12099
|
styleInject(css_248z);
|
|
12045
12100
|
|
|
12046
12101
|
function FilterCalendar(_a) {
|
|
12047
|
-
var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit,
|
|
12102
|
+
var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, outerDisableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection, outerRangeContext = _a.rangeContext;
|
|
12048
12103
|
var themePalette = useTheme({ palette: palette });
|
|
12049
12104
|
// Translations
|
|
12050
12105
|
useUpdateTranslations({ language: language });
|
|
12051
12106
|
var t = useTranslation().t;
|
|
12107
|
+
var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 690 });
|
|
12108
|
+
console.log('1', { outerDisableCalendarDates: outerDisableCalendarDates });
|
|
12052
12109
|
var _b = useFilterCalendar({
|
|
12053
12110
|
onSubmit: onSubmit,
|
|
12054
12111
|
setToggleCalendar: setToggleCalendar,
|
|
12055
12112
|
noActiveSelection: noActiveSelection,
|
|
12056
12113
|
toggleCalendar: toggleCalendar,
|
|
12057
12114
|
outerRangeContext: outerRangeContext,
|
|
12058
|
-
|
|
12115
|
+
outerDisableCalendarDates: outerDisableCalendarDates,
|
|
12116
|
+
}), setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _b.updateCalendarDefaultMonth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, calendarHasError = _b.calendarHasError, setCalendarHasError = _b.setCalendarHasError, setUpdatedForSubmit = _b.setUpdatedForSubmit, rangeContext = _b.rangeContext, disableCalendarDates = _b.disableCalendarDates;
|
|
12117
|
+
console.log('1', { disableCalendarDates: disableCalendarDates });
|
|
12059
12118
|
// Display component after fully loaded
|
|
12060
12119
|
useAwaitRender();
|
|
12061
12120
|
// Handle close filter section
|
|
@@ -12074,7 +12133,7 @@ function FilterCalendar(_a) {
|
|
|
12074
12133
|
React__default__default.createElement("div", { className: "will-calendar-footer" },
|
|
12075
12134
|
React__default__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12076
12135
|
React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12077
|
-
calendarHasError ? (React__default__default.createElement("span", null, "
|
|
12136
|
+
calendarHasError ? (React__default__default.createElement("span", null, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (React__default__default.createElement("div", null,
|
|
12078
12137
|
React__default__default.createElement("span", null, parseDate({
|
|
12079
12138
|
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12080
12139
|
dateFormat: 'EEEEEE d.M.yyyy',
|
|
@@ -12087,16 +12146,32 @@ function FilterCalendar(_a) {
|
|
|
12087
12146
|
language: language,
|
|
12088
12147
|
}) || t('common:checkOut')))),
|
|
12089
12148
|
React__default__default.createElement("span", { className: "will-calendar-footer-booked" }, calendarHasError
|
|
12090
|
-
?
|
|
12149
|
+
? t("filterBar:calendar.minNights")
|
|
12091
12150
|
: nights
|
|
12092
12151
|
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12093
12152
|
: '')),
|
|
12153
|
+
calendarHasError &&
|
|
12154
|
+
isMobile &&
|
|
12155
|
+
renderCalendarErrorMessage({
|
|
12156
|
+
palette: palette,
|
|
12157
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12158
|
+
}),
|
|
12094
12159
|
React__default__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12095
12160
|
React__default__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }))),
|
|
12096
|
-
calendarHasError &&
|
|
12097
|
-
|
|
12098
|
-
|
|
12161
|
+
calendarHasError &&
|
|
12162
|
+
!isMobile &&
|
|
12163
|
+
renderCalendarErrorMessage({
|
|
12164
|
+
palette: palette,
|
|
12165
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12166
|
+
}))))));
|
|
12099
12167
|
}
|
|
12168
|
+
/////////
|
|
12169
|
+
var renderCalendarErrorMessage = function (_a) {
|
|
12170
|
+
var message = _a.message, palette = _a.palette;
|
|
12171
|
+
return (React__default__default.createElement("div", { className: "will-calendar-footer-error" },
|
|
12172
|
+
React__default__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12173
|
+
React__default__default.createElement("span", { style: { marginLeft: '10px' } }, message || '')));
|
|
12174
|
+
};
|
|
12100
12175
|
|
|
12101
12176
|
export { Button$1 as Button, FilterBar, FilterCalendar };
|
|
12102
12177
|
//# sourceMappingURL=index.esm.js.map
|