willba-component-library 0.2.53 → 0.2.55

package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts

@@ -17,5 +17,7 @@ export declare const useFilterCalendar: ({ onSubmit, setToggleCalendar, noActive
     updateCalendarMonthNavigation: boolean;
     updateCalendarDefaultMoth: number;
     initialCalendarRange: DateRange | undefined;
+    overlappingDates: boolean;
+    setOverlappingDates: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 export {};

package/lib/core/components/calendar/CalendarTypes.d.ts

@@ -17,6 +17,10 @@ export type DisableCalendarDates = {
         page: string;
         offset: number;
     }[];
+    selectedDates?: {
+        to: Date;
+        from: Date;
+    };
 };
 export type CalendarTypes = {
     calendarRange?: DateRange | undefined;
@@ -36,4 +40,5 @@ export type CalendarTypes = {
     updateCalendarMonthNavigation?: boolean;
     setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void;
     updateCalendarDefaultMoth?: number;
+    setOverlappingDates: (arg: boolean) => void;
 };

package/lib/core/utils/handleOverlappingDates.d.ts

@@ -0,0 +1 @@
+export declare const handleOverlappingDates: () => void;

package/lib/index.d.ts

@@ -50,6 +50,10 @@ type DisableCalendarDates = {
         page: string;
         offset: number;
     }[];
+    selectedDates?: {
+        to: Date;
+        from: Date;
+    };
 };
 type CalendarTypes = {
     calendarRange?: DateRange | undefined;
@@ -69,6 +73,7 @@ type CalendarTypes = {
     updateCalendarMonthNavigation?: boolean;
     setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void;
     updateCalendarDefaultMoth?: number;
+    setOverlappingDates: (arg: boolean) => void;
 };
 
 type FilterBarProps = {

package/lib/index.esm.js

@@ -6290,6 +6290,34 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   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
@@ -10805,7 +10833,7 @@ styleInject(css_248z$8);
 
 var Calendar = 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 });
@@ -10946,6 +10974,7 @@ var Calendar = forwardRef(function (_a, ref) {
                         setDisabledDates: setDisabledDates,
                         calendarRange: calendarRange,
                         overlappingDate: overlappingDate,
+                        setOverlappingDates: setOverlappingDates,
                     });
                 }, captionLayout: "dropdown-buttons", defaultMonth: (initialCalendarRange === null || initialCalendarRange === void 0 ? void 0 : initialCalendarRange.from) ||
                     selectedStartDate ||
@@ -11010,8 +11039,8 @@ var Calendar = forwardRef(function (_a, ref) {
 });
 /////////
 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;
@@ -11028,6 +11057,25 @@ var handleSelectedCheckIn = function (_a) {
                 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);
@@ -11041,7 +11089,14 @@ var handleSelectedCheckIn = function (_a) {
             { after: checkOutRange === null || checkOutRange === void 0 ? void 0 : checkOutRange.lastCheckOut },
         ], false));
     }
-    if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
+    console.log(selectedDates, startIsEqualOrBeforeSelectedEnd, endIsEqualOrAfterSelectedStart);
+    setOverlappingDates && setOverlappingDates(false);
+    if ((selectedDates && !startIsEqualOrBeforeSelectedEnd) ||
+        (selectedDates && (range === null || range === void 0 ? void 0 : range.to) && !endIsEqualOrAfterSelectedStart)) {
+        setCalendarRange(undefined);
+        setOverlappingDates && setOverlappingDates(true);
+    }
+    else if ((rangeTo && rangeFrom && rangeFrom === rangeTo) ||
         (!rangeTo && !rangeFrom) ||
         overlappingDateFrom) {
         setCalendarRange(undefined);
@@ -11234,7 +11289,7 @@ var useFilterBar = function (_a) {
             finally { if (e_2) throw e_2.error; }
         }
         handleSelectedFilter(false);
-        if (onSubmit) {
+        if (onSubmit && selectedPath === Pages.ROOMS) {
             onSubmit(newParams);
         }
         else {
@@ -11475,6 +11530,7 @@ var useFilterCalendar = function (_a) {
     var _d = __read(useState([]), 2), disabledDates = _d[0], setDisabledDates = _d[1];
     var _e = __read(useState(false), 2), updateCalendarMonthNavigation = _e[0], setUpdateCalendarMonthNavigation = _e[1];
     var _f = __read(useState(0), 2), updateCalendarDefaultMoth = _f[0], setUpdateCalendarDefaultMoth = _f[1];
+    var _g = __read(useState(false), 2), overlappingDates = _g[0], setOverlappingDates = _g[1];
     useEffect(function () {
         if (typeof window === 'undefined')
             return;
@@ -11517,10 +11573,12 @@ var useFilterCalendar = function (_a) {
         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) {
@@ -11534,7 +11592,7 @@ function FilterCalendar(_a) {
         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
@@ -11546,10 +11604,12 @@ function FilterCalendar(_a) {
     });
     return (React__default__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
         React__default__default.createElement("div", { className: "will-calendar-header" },
-            React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
-            React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+            React__default__default.createElement("div", { className: "will-calendar-header-row" },
+                React__default__default.createElement("h2", null, t('filterBar:calendar.title')),
+                React__default__default.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
+            overlappingDates && React__default__default.createElement("div", null, "Chose other dates")),
         React__default__default.createElement("div", { className: "will-calendar-main" },
-            React__default__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__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__default.createElement("div", { className: "will-calendar-footer" },
             React__default__default.createElement("div", { className: "will-calendar-footer-dates" },
                 React__default__default.createElement("div", null,