willba-component-library 0.2.63 → 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 +99 -32
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +99 -32
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +99 -32
- 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 -15
- 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
package/lib/index.umd.js
CHANGED
|
@@ -2841,7 +2841,8 @@
|
|
|
2841
2841
|
endDate: "End date",
|
|
2842
2842
|
title: "Calendar",
|
|
2843
2843
|
checkoutOnly: "Check-out only",
|
|
2844
|
-
hasDisableDates: "Contains unavailable dates"
|
|
2844
|
+
hasDisableDates: "Contains unavailable dates",
|
|
2845
|
+
minNights: "2 nights min"
|
|
2845
2846
|
};
|
|
2846
2847
|
var guests$1 = {
|
|
2847
2848
|
label: "Number of guests",
|
|
@@ -2877,6 +2878,14 @@
|
|
|
2877
2878
|
var noCheckIn$1 = "Room not available";
|
|
2878
2879
|
var noCheckOut$1 = "Check-out not available";
|
|
2879
2880
|
var checkOutOnly$1 = "Check-out only";
|
|
2881
|
+
var onlyCheckOut$1 = "Check-in only";
|
|
2882
|
+
var onlyCheckIn$1 = "Check-out only";
|
|
2883
|
+
var errors$1 = {
|
|
2884
|
+
calendarErrors: {
|
|
2885
|
+
checkInAvailabilityError: "Check-in available for second room only with connection dates",
|
|
2886
|
+
checkInAvailabilityGuide: "Start or end day need connection for previous reservation"
|
|
2887
|
+
}
|
|
2888
|
+
};
|
|
2880
2889
|
var enCommon = {
|
|
2881
2890
|
night: night$1,
|
|
2882
2891
|
nights: nights$1,
|
|
@@ -2887,7 +2896,10 @@
|
|
|
2887
2896
|
clearDates: clearDates$1,
|
|
2888
2897
|
noCheckIn: noCheckIn$1,
|
|
2889
2898
|
noCheckOut: noCheckOut$1,
|
|
2890
|
-
checkOutOnly: checkOutOnly$1
|
|
2899
|
+
checkOutOnly: checkOutOnly$1,
|
|
2900
|
+
onlyCheckOut: onlyCheckOut$1,
|
|
2901
|
+
onlyCheckIn: onlyCheckIn$1,
|
|
2902
|
+
errors: errors$1
|
|
2891
2903
|
};
|
|
2892
2904
|
|
|
2893
2905
|
var calendar = {
|
|
@@ -2898,7 +2910,8 @@
|
|
|
2898
2910
|
endDate: "Loppu",
|
|
2899
2911
|
title: "Kalenteri",
|
|
2900
2912
|
checkoutOnly: "Check-out only",
|
|
2901
|
-
hasDisableDates: "Contains unavailable dates"
|
|
2913
|
+
hasDisableDates: "Contains unavailable dates",
|
|
2914
|
+
minNights: "2 nights min"
|
|
2902
2915
|
};
|
|
2903
2916
|
var guests = {
|
|
2904
2917
|
label: "Vierasmäärä",
|
|
@@ -2936,6 +2949,14 @@
|
|
|
2936
2949
|
var noCheckIn = "Huone ei saatavilla";
|
|
2937
2950
|
var noCheckOut = "Uloskirjaus ei saatavilla";
|
|
2938
2951
|
var checkOutOnly = "Vain uloskirjaus";
|
|
2952
|
+
var onlyCheckOut = "Check-in only";
|
|
2953
|
+
var onlyCheckIn = "Check-out only";
|
|
2954
|
+
var errors = {
|
|
2955
|
+
calendarErrors: {
|
|
2956
|
+
checkInAvailabilityError: "Check-in available for second room only with connection dates",
|
|
2957
|
+
checkInAvailabilityGuide: "Start or end day need connection for previous reservation"
|
|
2958
|
+
}
|
|
2959
|
+
};
|
|
2939
2960
|
var fiCommon = {
|
|
2940
2961
|
night: night,
|
|
2941
2962
|
nights: nights,
|
|
@@ -2946,7 +2967,10 @@
|
|
|
2946
2967
|
clearDates: clearDates,
|
|
2947
2968
|
noCheckIn: noCheckIn,
|
|
2948
2969
|
noCheckOut: noCheckOut,
|
|
2949
|
-
checkOutOnly: checkOutOnly
|
|
2970
|
+
checkOutOnly: checkOutOnly,
|
|
2971
|
+
onlyCheckOut: onlyCheckOut,
|
|
2972
|
+
onlyCheckIn: onlyCheckIn,
|
|
2973
|
+
errors: errors
|
|
2950
2974
|
};
|
|
2951
2975
|
|
|
2952
2976
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -11172,7 +11196,7 @@
|
|
|
11172
11196
|
|
|
11173
11197
|
var handleCalendarModifiers = function (_a) {
|
|
11174
11198
|
var _b;
|
|
11175
|
-
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;
|
|
11199
|
+
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;
|
|
11176
11200
|
// Parse data
|
|
11177
11201
|
var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
|
|
11178
11202
|
var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
|
|
@@ -11207,13 +11231,16 @@
|
|
|
11207
11231
|
})));
|
|
11208
11232
|
})
|
|
11209
11233
|
: [];
|
|
11210
|
-
console.log();
|
|
11211
11234
|
return {
|
|
11212
11235
|
booked: disabledDatesByPage.length
|
|
11213
11236
|
? disabledDatesByPage
|
|
11214
11237
|
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11215
|
-
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11216
|
-
|
|
11238
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11239
|
+
lastPossibleCheckout || []
|
|
11240
|
+
], __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)
|
|
11241
|
+
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11242
|
+
lastPossibleCheckout || []
|
|
11243
|
+
], __read(newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [],
|
|
11217
11244
|
disabledAfterCheckIn: calendarRangeFrom
|
|
11218
11245
|
? [{ after: calendarRangeFrom }]
|
|
11219
11246
|
: [],
|
|
@@ -11431,6 +11458,7 @@
|
|
|
11431
11458
|
var useUpdateDisabledDates = function (_a) {
|
|
11432
11459
|
var disableCalendarDates = _a.disableCalendarDates, calendarRange = _a.calendarRange, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth;
|
|
11433
11460
|
var _b = __read(React__default.useState(undefined), 2), overlappingDate = _b[0], setOverlappingDate = _b[1];
|
|
11461
|
+
var _c = __read(React__default.useState([]), 2), lastPossibleCheckout = _c[0], setLatsPossibleCheckout = _c[1];
|
|
11434
11462
|
var newDisableCalendarDates = React__default.useMemo(function () {
|
|
11435
11463
|
if (disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.availableDates) {
|
|
11436
11464
|
var dateFormat_1 = 'dd-MM-yyyy';
|
|
@@ -11459,12 +11487,21 @@
|
|
|
11459
11487
|
}
|
|
11460
11488
|
return acc;
|
|
11461
11489
|
}, { updatedDisabledDates: [], newOverlappingDates: [] }), updatedDisabledDates = _a.updatedDisabledDates, newOverlappingDates_1 = _a.newOverlappingDates;
|
|
11490
|
+
// Find last possible checkout ( disable all dates after the last possible checkout )
|
|
11491
|
+
var lastPossibleCheckout_1 = disableCalendarDates.availableDates[disableCalendarDates.availableDates.length - 1].lastCheckOut;
|
|
11492
|
+
if (lastPossibleCheckout_1) {
|
|
11493
|
+
setLatsPossibleCheckout({ after: lastPossibleCheckout_1 });
|
|
11494
|
+
}
|
|
11495
|
+
// Extract overlapping dates ( dates that are only available for checkout )
|
|
11462
11496
|
if (newOverlappingDates_1.length) {
|
|
11463
11497
|
setOverlappingDate(function (prev) {
|
|
11464
11498
|
if (prev === void 0) { prev = []; }
|
|
11465
11499
|
return __spreadArray$1(__spreadArray$1([], __read(prev), false), __read(newOverlappingDates_1), false);
|
|
11466
11500
|
});
|
|
11467
11501
|
}
|
|
11502
|
+
if (newOverlappingDates_1.length) {
|
|
11503
|
+
console.log(newOverlappingDates_1);
|
|
11504
|
+
}
|
|
11468
11505
|
var newDisableCalendarDates_1 = __assign$2(__assign$2({}, disableCalendarDates), { disabledDates: updatedDisabledDates });
|
|
11469
11506
|
return newDisableCalendarDates_1;
|
|
11470
11507
|
}
|
|
@@ -11475,7 +11512,7 @@
|
|
|
11475
11512
|
updateCalendarMonthNavigation,
|
|
11476
11513
|
updateCalendarDefaultMonth,
|
|
11477
11514
|
]);
|
|
11478
|
-
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate };
|
|
11515
|
+
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11479
11516
|
};
|
|
11480
11517
|
|
|
11481
11518
|
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}";
|
|
@@ -11485,7 +11522,7 @@
|
|
|
11485
11522
|
styleInject(css_248z$8);
|
|
11486
11523
|
|
|
11487
11524
|
var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
11488
|
-
var _b, _c
|
|
11525
|
+
var _b, _c;
|
|
11489
11526
|
var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, setDisabledDates = _a.setDisabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError;
|
|
11490
11527
|
// Translations
|
|
11491
11528
|
var t = useTranslation('common').t;
|
|
@@ -11493,13 +11530,15 @@
|
|
|
11493
11530
|
var today = startOfDay(new Date());
|
|
11494
11531
|
var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
|
|
11495
11532
|
var rangeContextStartDate = rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from;
|
|
11496
|
-
|
|
11497
|
-
|
|
11533
|
+
console.log({ disableCalendarDates: disableCalendarDates });
|
|
11534
|
+
// Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
|
|
11535
|
+
var _d = useUpdateDisabledDates({
|
|
11498
11536
|
disableCalendarDates: disableCalendarDates,
|
|
11499
11537
|
calendarRange: calendarRange,
|
|
11500
11538
|
updateCalendarMonthNavigation: updateCalendarMonthNavigation,
|
|
11501
11539
|
updateCalendarDefaultMonth: updateCalendarDefaultMonth,
|
|
11502
|
-
}), newDisableCalendarDates =
|
|
11540
|
+
}), newDisableCalendarDates = _d.newDisableCalendarDates, overlappingDate = _d.overlappingDate, lastPossibleCheckout = _d.lastPossibleCheckout;
|
|
11541
|
+
console.log({ newDisableCalendarDates: newDisableCalendarDates });
|
|
11503
11542
|
// Handle disable dates by page
|
|
11504
11543
|
var disabledDatesByPage$1 = disabledDatesByPage({
|
|
11505
11544
|
today: today,
|
|
@@ -11529,12 +11568,13 @@
|
|
|
11529
11568
|
});
|
|
11530
11569
|
setUpdatedForSubmit && setUpdatedForSubmit(true);
|
|
11531
11570
|
};
|
|
11571
|
+
console.log({ disabledDates: disabledDates });
|
|
11532
11572
|
// Handle disabled dates for range context
|
|
11533
|
-
var
|
|
11573
|
+
var _e = handleRangeContextDisabledDates({
|
|
11534
11574
|
rangeContext: rangeContext,
|
|
11535
11575
|
availableDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates,
|
|
11536
11576
|
calendarRange: calendarRange,
|
|
11537
|
-
}), findFirstPossibleRangeContextCheckIn =
|
|
11577
|
+
}), findFirstPossibleRangeContextCheckIn = _e.findFirstPossibleRangeContextCheckIn, findLastPossibleRangeContextCheckOut = _e.findLastPossibleRangeContextCheckOut, firstPossibleRangeContextCheckIn = _e.firstPossibleRangeContextCheckIn, lastPossibleRangeContextCheckOut = _e.lastPossibleRangeContextCheckOut, currentSelectionLastCheckoutDate = _e.currentSelectionLastCheckoutDate;
|
|
11538
11578
|
// Handle check for continuous selection in the range context
|
|
11539
11579
|
checkForContinuousSelection({
|
|
11540
11580
|
setCalendarHasError: setCalendarHasError,
|
|
@@ -11542,25 +11582,21 @@
|
|
|
11542
11582
|
calendarRange: calendarRange,
|
|
11543
11583
|
calendarHasError: calendarHasError,
|
|
11544
11584
|
});
|
|
11545
|
-
// Find last possible checkout for dates
|
|
11546
|
-
var lastPossibleCheckout = !!((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11547
|
-
? newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.availableDates[newDisableCalendarDates.availableDates.length - 1].lastCheckOut
|
|
11548
|
-
: null;
|
|
11549
11585
|
return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11550
11586
|
React__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
11551
11587
|
React__default.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
|
|
11552
11588
|
selectedStartDate ||
|
|
11553
11589
|
rangeContextStartDate ||
|
|
11554
|
-
(((
|
|
11590
|
+
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11555
11591
|
? newDisableCalendarDates.disabledDates[0].from
|
|
11556
11592
|
: today), disabled: disabledDatesByPage$1.length
|
|
11557
11593
|
? disabledDatesByPage$1
|
|
11558
11594
|
: (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.length)
|
|
11559
11595
|
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11560
|
-
lastPossibleCheckout
|
|
11561
|
-
], __read(disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : ((
|
|
11596
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11597
|
+
], __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)
|
|
11562
11598
|
? __spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11563
|
-
lastPossibleCheckout
|
|
11599
|
+
lastPossibleCheckout && lastPossibleCheckout
|
|
11564
11600
|
], __read(newDisableCalendarDates.disabledDates), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false) : [], fromMonth: today, onMonthChange: function (val) {
|
|
11565
11601
|
requestDates && setUpdateCalendarMonthNavigation
|
|
11566
11602
|
? (requestDates(val),
|
|
@@ -11589,6 +11625,7 @@
|
|
|
11589
11625
|
disabledDates: disabledDates,
|
|
11590
11626
|
overlappingDate: overlappingDate,
|
|
11591
11627
|
rangeContext: rangeContext,
|
|
11628
|
+
lastPossibleCheckout: lastPossibleCheckout,
|
|
11592
11629
|
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11593
11630
|
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11594
11631
|
firstPossibleRangeContextCheckIn: firstPossibleRangeContextCheckIn,
|
|
@@ -11978,7 +12015,7 @@
|
|
|
11978
12015
|
var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
|
|
11979
12016
|
|
|
11980
12017
|
var useFilterCalendar = function (_a) {
|
|
11981
|
-
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext;
|
|
12018
|
+
var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection, toggleCalendar = _a.toggleCalendar, outerRangeContext = _a.outerRangeContext, outerDisableCalendarDates = _a.outerDisableCalendarDates;
|
|
11982
12019
|
// State
|
|
11983
12020
|
var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
11984
12021
|
var _c = __read(React__default.useState(outerRangeContext), 2), rangeContext = _c[0], setRangeContext = _c[1];
|
|
@@ -11988,7 +12025,15 @@
|
|
|
11988
12025
|
var _g = __read(React__default.useState(0), 2), updateCalendarDefaultMonth = _g[0], setUpdateCalendarDefaultMonth = _g[1];
|
|
11989
12026
|
var _h = __read(React__default.useState(false), 2), calendarHasError = _h[0], setCalendarHasError = _h[1];
|
|
11990
12027
|
var _j = __read(React__default.useState(false), 2), updatedForSubmit = _j[0], setUpdatedForSubmit = _j[1];
|
|
12028
|
+
var _k = __read(React__default.useState(), 2), disableCalendarDates = _k[0], setDisableCalendarDates = _k[1];
|
|
11991
12029
|
// Lifecycle
|
|
12030
|
+
// Handle update component with new data
|
|
12031
|
+
React__default.useEffect(function () {
|
|
12032
|
+
if (outerDisableCalendarDates) {
|
|
12033
|
+
setDisableCalendarDates(outerDisableCalendarDates);
|
|
12034
|
+
}
|
|
12035
|
+
}, [outerDisableCalendarDates]);
|
|
12036
|
+
// Handle Range Context initial selections
|
|
11992
12037
|
React__default.useEffect(function () {
|
|
11993
12038
|
if (typeof window === 'undefined')
|
|
11994
12039
|
return;
|
|
@@ -12018,6 +12063,7 @@
|
|
|
12018
12063
|
}
|
|
12019
12064
|
}
|
|
12020
12065
|
}, [toggleCalendar]);
|
|
12066
|
+
// Handle submit dates
|
|
12021
12067
|
React__default.useEffect(function () {
|
|
12022
12068
|
var formatString = 'dd.MM.yyyy';
|
|
12023
12069
|
var initialRangeTo = (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.to)
|
|
@@ -12067,25 +12113,30 @@
|
|
|
12067
12113
|
setCalendarHasError: setCalendarHasError,
|
|
12068
12114
|
setUpdatedForSubmit: setUpdatedForSubmit,
|
|
12069
12115
|
rangeContext: rangeContext,
|
|
12116
|
+
disableCalendarDates: disableCalendarDates,
|
|
12070
12117
|
};
|
|
12071
12118
|
};
|
|
12072
12119
|
|
|
12073
|
-
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}";
|
|
12120
|
+
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}";
|
|
12074
12121
|
styleInject(css_248z);
|
|
12075
12122
|
|
|
12076
12123
|
function FilterCalendar(_a) {
|
|
12077
|
-
var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit,
|
|
12124
|
+
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;
|
|
12078
12125
|
var themePalette = useTheme({ palette: palette });
|
|
12079
12126
|
// Translations
|
|
12080
12127
|
useUpdateTranslations({ language: language });
|
|
12081
12128
|
var t = useTranslation().t;
|
|
12129
|
+
var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 690 });
|
|
12130
|
+
console.log('1', { outerDisableCalendarDates: outerDisableCalendarDates });
|
|
12082
12131
|
var _b = useFilterCalendar({
|
|
12083
12132
|
onSubmit: onSubmit,
|
|
12084
12133
|
setToggleCalendar: setToggleCalendar,
|
|
12085
12134
|
noActiveSelection: noActiveSelection,
|
|
12086
12135
|
toggleCalendar: toggleCalendar,
|
|
12087
12136
|
outerRangeContext: outerRangeContext,
|
|
12088
|
-
|
|
12137
|
+
outerDisableCalendarDates: outerDisableCalendarDates,
|
|
12138
|
+
}), 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;
|
|
12139
|
+
console.log('1', { disableCalendarDates: disableCalendarDates });
|
|
12089
12140
|
// Display component after fully loaded
|
|
12090
12141
|
useAwaitRender();
|
|
12091
12142
|
// Handle close filter section
|
|
@@ -12104,7 +12155,7 @@
|
|
|
12104
12155
|
React__default.createElement("div", { className: "will-calendar-footer" },
|
|
12105
12156
|
React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12106
12157
|
React__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12107
|
-
calendarHasError ? (React__default.createElement("span", null, "
|
|
12158
|
+
calendarHasError ? (React__default.createElement("span", null, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (React__default.createElement("div", null,
|
|
12108
12159
|
React__default.createElement("span", null, parseDate({
|
|
12109
12160
|
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12110
12161
|
dateFormat: 'EEEEEE d.M.yyyy',
|
|
@@ -12117,16 +12168,32 @@
|
|
|
12117
12168
|
language: language,
|
|
12118
12169
|
}) || t('common:checkOut')))),
|
|
12119
12170
|
React__default.createElement("span", { className: "will-calendar-footer-booked" }, calendarHasError
|
|
12120
|
-
?
|
|
12171
|
+
? t("filterBar:calendar.minNights")
|
|
12121
12172
|
: nights
|
|
12122
12173
|
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12123
12174
|
: '')),
|
|
12175
|
+
calendarHasError &&
|
|
12176
|
+
isMobile &&
|
|
12177
|
+
renderCalendarErrorMessage({
|
|
12178
|
+
palette: palette,
|
|
12179
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12180
|
+
}),
|
|
12124
12181
|
React__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12125
12182
|
React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }))),
|
|
12126
|
-
calendarHasError &&
|
|
12127
|
-
|
|
12128
|
-
|
|
12183
|
+
calendarHasError &&
|
|
12184
|
+
!isMobile &&
|
|
12185
|
+
renderCalendarErrorMessage({
|
|
12186
|
+
palette: palette,
|
|
12187
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12188
|
+
}))))));
|
|
12129
12189
|
}
|
|
12190
|
+
/////////
|
|
12191
|
+
var renderCalendarErrorMessage = function (_a) {
|
|
12192
|
+
var message = _a.message, palette = _a.palette;
|
|
12193
|
+
return (React__default.createElement("div", { className: "will-calendar-footer-error" },
|
|
12194
|
+
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12195
|
+
React__default.createElement("span", { style: { marginLeft: '10px' } }, message || '')));
|
|
12196
|
+
};
|
|
12130
12197
|
|
|
12131
12198
|
exports.Button = Button$1;
|
|
12132
12199
|
exports.FilterBar = FilterBar;
|