willba-component-library 0.2.53 → 0.2.54

package/lib/index.umd.js

@@ -6312,6 +6312,34 @@
       return date.getTime() < dateToCompare.getTime();
     }
 
+    /**
+     * @name isEqual
+     * @category Common Helpers
+     * @summary Are the given dates equal?
+     *
+     * @description
+     * Are the given dates equal?
+     *
+     * @param {Date|Number} dateLeft - the first date to compare
+     * @param {Date|Number} dateRight - the second date to compare
+     * @returns {Boolean} the dates are equal
+     * @throws {TypeError} 2 arguments required
+     *
+     * @example
+     * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
+     * const result = isEqual(
+     *   new Date(2014, 6, 2, 6, 30, 45, 0),
+     *   new Date(2014, 6, 2, 6, 30, 45, 500)
+     * )
+     * //=> false
+     */
+    function isEqual(dirtyLeftDate, dirtyRightDate) {
+      requiredArgs(2, arguments);
+      var dateLeft = toDate(dirtyLeftDate);
+      var dateRight = toDate(dirtyRightDate);
+      return dateLeft.getTime() === dateRight.getTime();
+    }
+
     /**
      * @name isSameMonth
      * @category Month Helpers
@@ -10827,7 +10855,7 @@
 
     var Calendar = React__default.forwardRef(function (_a, ref) {
         var _b;
-        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, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth, loadingData = _a.loadingData, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback, palette = _a.palette;
+        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, updateCalendarDefaultMoth = _a.updateCalendarDefaultMoth, loadingData = _a.loadingData, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback, palette = _a.palette, setOverlappingDates = _a.setOverlappingDates;
         // Translations
         var t = useTranslation('common').t;
         var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
@@ -10968,6 +10996,7 @@
                             setDisabledDates: setDisabledDates,
                             calendarRange: calendarRange,
                             overlappingDate: overlappingDate,
+                            setOverlappingDates: setOverlappingDates,
                         });
                     }, captionLayout: "dropdown-buttons", defaultMonth: (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) ||
                         selectedStartDate ||
@@ -11032,8 +11061,8 @@
     });
     /////////
     var handleSelectedCheckIn = function (_a) {
-        var _b;
-        var range = _a.range, newDisableCalendarDates = _a.newDisableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate;
+        var _b, _c, _d;
+        var range = _a.range, newDisableCalendarDates = _a.newDisableCalendarDates, setCalendarRange = _a.setCalendarRange, setDisabledDates = _a.setDisabledDates, calendarRange = _a.calendarRange, overlappingDate = _a.overlappingDate, setOverlappingDates = _a.setOverlappingDates;
         // Calendar dates select logic
         var dateFormat = 'dd-MM-yyyy';
         var rangeFrom = (range === null || range === void 0 ? void 0 : range.from) ? format(range.from, dateFormat) : null;
@@ -11050,6 +11079,25 @@
                     format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
             })
             : null;
+        // Case: Set the calendar range only if it overlaps with the previously selected dates.
+        // The selection must remain continuous, meaning no gaps between days are allowed.
+        // Whether selecting forwards or backwards from the initially chosen dates,
+        // the new range must be directly adjacent to or overlap with the current selection.
+        var selectedDates = (newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) || null;
+        var rowRangeFrom = range === null || range === void 0 ? void 0 : range.from;
+        var rowRangeTo = range === null || range === void 0 ? void 0 : range.to;
+        var selectedDatesFrom = ((_c = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) === null || _c === void 0 ? void 0 : _c.from) || null;
+        var selectedDatesTo = ((_d = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.selectedDates) === null || _d === void 0 ? void 0 : _d.to) || null;
+        // Checking if rowRangeFrom is equal to or before selectedDatesTo
+        var startIsEqualOrBeforeSelectedEnd = rowRangeFrom && selectedDatesFrom && selectedDatesTo
+            ? isBefore(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo)) ||
+                isEqual(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo))
+            : null;
+        // Checking if rowRangeTo is equal to or after selectedDatesFrom
+        var endIsEqualOrAfterSelectedStart = rowRangeTo && selectedDatesFrom && selectedDatesTo
+            ? isAfter(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom)) ||
+                isEqual(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom))
+            : null;
         if (rangeFrom && checkOutRange && setDisabledDates) {
             var checkIn = addDays(checkOutRange.checkIn, 1);
             var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
@@ -11063,7 +11111,13 @@
                 { after: checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut },
             ], false));
         }
-        if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
+        setOverlappingDates(false);
+        if ((selectedDates && !startIsEqualOrBeforeSelectedEnd) ||
+            (selectedDates && (range === null || range === void 0 ? void 0 : range.to) && !endIsEqualOrAfterSelectedStart)) {
+            setCalendarRange(undefined);
+            setOverlappingDates(true);
+        }
+        else if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
             (!rangeTo && !rangeFrom) ||
             overlappingDateFrom) {
             setCalendarRange(undefined);
@@ -11256,7 +11310,7 @@
                 finally { if (e_2) throw e_2.error; }
             }
             handleSelectedFilter(false);
-            if (onSubmit) {
+            if (onSubmit && selectedPath === Pages.ROOMS) {
                 onSubmit(newParams);
             }
             else {
@@ -11497,6 +11551,7 @@
         var _d = __read(React__default.useState([]), 2), disabledDates = _d[0], setDisabledDates = _d[1];
         var _e = __read(React__default.useState(false), 2), updateCalendarMonthNavigation = _e[0], setUpdateCalendarMonthNavigation = _e[1];
         var _f = __read(React__default.useState(0), 2), updateCalendarDefaultMoth = _f[0], setUpdateCalendarDefaultMoth = _f[1];
+        var _g = __read(React__default.useState(false), 2), overlappingDates = _g[0], setOverlappingDates = _g[1];
         React__default.useEffect(function () {
             if (typeof window === 'undefined')
                 return;
@@ -11539,10 +11594,12 @@
             updateCalendarMonthNavigation: updateCalendarMonthNavigation,
             updateCalendarDefaultMoth: updateCalendarDefaultMoth,
             initialCalendarRange: initialCalendarRange,
+            overlappingDates: overlappingDates,
+            setOverlappingDates: setOverlappingDates,
         };
     };
 
-    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    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid var(--will-grey);\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\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/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
+    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    border-bottom: 1px solid var(--will-grey);\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid var(--will-grey);\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\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/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
     styleInject(css_248z);
 
     function FilterCalendar(_a) {
@@ -11556,7 +11613,7 @@
             setToggleCalendar: setToggleCalendar,
             noActiveSelection: noActiveSelection,
             toggleCalendar: toggleCalendar,
-        }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _b.updateCalendarDefaultMoth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, initialCalendarRange = _b.initialCalendarRange;
+        }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMoth = _b.updateCalendarDefaultMoth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, initialCalendarRange = _b.initialCalendarRange, overlappingDates = _b.overlappingDates, setOverlappingDates = _b.setOverlappingDates;
         // Display component after fully loaded
         useAwaitRender();
         // Handle close filter section
@@ -11568,10 +11625,12 @@
         });
         return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
             React__default.createElement("div", { className: "will-calendar-header" },
-                React__default.createElement("h2", null, t('filterBar:calendar.title')),
-                React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+                React__default.createElement("div", { className: "will-calendar-header-row" },
+                    React__default.createElement("h2", null, t('filterBar:calendar.title')),
+                    React__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+                overlappingDates && React__default.createElement("div", null, "Chose other dates")),
             React__default.createElement("div", { className: "will-calendar-main" },
-                React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMoth: updateCalendarDefaultMoth, loadingData: loadingData, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette })),
+                React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMoth: updateCalendarDefaultMoth, loadingData: loadingData, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setOverlappingDates: setOverlappingDates })),
             React__default.createElement("div", { className: "will-calendar-footer" },
                 React__default.createElement("div", { className: "will-calendar-footer-dates" },
                     React__default.createElement("div", null,