willba-component-library 0.2.21 → 0.2.23

package/lib/index.js

@@ -2869,8 +2869,8 @@ var checkOut$1 = "check-out";
 var search$1 = "Search";
 var apply$1 = "Apply";
 var clearDates$1 = "Clear dates";
-var noCheckIn$1 = "No check-in";
-var noCheckOut$1 = "No check-out";
+var noCheckIn$1 = "Room not available";
+var noCheckOut$1 = "Check-out not available";
 var enCommon = {
 	night: night$1,
 	nights: nights$1,
@@ -2884,7 +2884,7 @@ var enCommon = {
 };
 
 var calendar = {
-	label: "Ajankohta",
+	label: "Päivät",
 	roomsLabelPlaceholder: "Lisää check-in ja check-out",
 	eventsLabelPlaceholder: "Lisää aikaväli",
 	startDate: "Alku",
@@ -2924,10 +2924,10 @@ var nights = "yötä";
 var checkIn = "check-in";
 var checkOut = "check-out";
 var search = "Hae";
-var apply = "Apply";
-var clearDates = "Clear dates";
-var noCheckIn = "No check-in";
-var noCheckOut = "No check-out";
+var apply = "Aseta";
+var clearDates = "Tyhjennä";
+var noCheckIn = "Huone ei saatavilla";
+var noCheckOut = "Uloskirjaus ei saatavilla";
 var fiCommon = {
 	night: night,
 	nights: nights,
@@ -10806,12 +10806,12 @@ var reactResponsiveExports = reactResponsive.exports;
 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}";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  opacity: 0.5;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltip */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out> div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n\n";
+var css_248z$8 = ".will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n  font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked  {\n  font-weight: 400;\n  cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n  opacity: 0.5;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n  }\n\n  .will-calendar-filter-container .rdp-month.rdp-caption_start {\n    padding-left: 10px;\n  }\n  \n  .will-calendar-filter-container .rdp-month.rdp-caption_end {\n    padding-right: 10px;\n  }\n}\n\n/* Tooltip */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out> div {\n  background-color: white;\n  position: relative;\n  padding: 5px 10px;\n  border: 1px solid var(--will-primary);\n  border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  border: 1px solid var(--will-primary);\n  position: absolute;\n  bottom: -4px;\n  left:calc(50% - 5.555px);\n  rotate: 45deg;\n  z-index: 0;\n  background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out {\n  display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n  position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n  position: absolute;\n  top:0;\n  bottom:0;\n  left: 0;\n  right: 0;\n  background-color: var(--will-white-transparent);\n  z-index: 3;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection {\n  background-color: lightgrey;\n}\n\n\n";
 styleInject(css_248z$8);
 
 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, updateCalendar = _a.updateCalendar, setUpdateCalendar = _a.setUpdateCalendar, loadingData = _a.loadingData;
+    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, updateCalendar = _a.updateCalendar, setUpdateCalendar = _a.setUpdateCalendar, loadingData = _a.loadingData, initialCalendarRange = _a.initialCalendarRange, showFeedback = _a.showFeedback;
     // Translations
     var t = useTranslation('common').t;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
@@ -10833,7 +10833,7 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
     }, [disableCalendarDates, calendarRange]);
     // Handle tooltip
     React__default.useEffect(function () {
-        if (typeof document === 'undefined')
+        if (typeof document === 'undefined' || !showFeedback)
             return;
         var calendarTooltip = document.querySelector('.will-calendar-tooltip');
         var calendarTooltipCheckOut = document.querySelector('.will-calendar-tooltip-check-out');
@@ -10879,6 +10879,25 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
                 loadingSpinner.style.display = 'none';
         }
     }, [loadingData]);
+    // Handle overlapping availableDates.lastCheckOut and disabledDates.start
+    React__default.useEffect(function () {
+        var _a, _b;
+        if (disableCalendarDates) {
+            var dateFormat_1 = 'dd-MM-yyyy';
+            var availableDateMap_1 = new Map();
+            (_a = disableCalendarDates.availableDates) === null || _a === void 0 ? void 0 : _a.forEach(function (available) {
+                availableDateMap_1.set(format(available.lastCheckOut, dateFormat_1), available);
+            });
+            var updatedDisabledDates = (_b = disableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.map(function (dateRange) {
+                var formattedFromDate = format(dateRange.from, dateFormat_1);
+                if (availableDateMap_1.has(formattedFromDate)) {
+                    return __assign$2(__assign$2({}, dateRange), { from: addDays(dateRange.from, 1) });
+                }
+                return dateRange;
+            });
+            disableCalendarDates.disabledDates = updatedDisabledDates;
+        }
+    }, [disableCalendarDates]);
     // Handle disable dates by page
     var disabledDatesByPage = handleDisabledDatesByPage({
         today: today,
@@ -10899,6 +10918,7 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
                     today: 'my-today',
                     booked: 'booked',
                     disabledAfterCheckIn: 'disabled-after-check-in',
+                    noActiveSelection: 'no-active-selection',
                 }, captionLayout: "dropdown-buttons", defaultMonth: selectedStartDate ||
                     (((_b = disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
                         ? disableCalendarDates.disabledDates[0].from
@@ -10919,6 +10939,9 @@ var Calendar = React__default.forwardRef(function (_a, ref) {
                     disabledAfterCheckIn: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
                         ? [{ after: calendarRange.from }]
                         : [],
+                    noActiveSelection: !calendarRange
+                        ? initialCalendarRange || []
+                        : [],
                 } }),
             React__default.createElement("div", { className: 'will-calendar-tooltip' },
                 React__default.createElement("div", null, t('noCheckIn'))),
@@ -10946,14 +10969,23 @@ var handleSelectedCheckIn = function (_a) {
                 format((range === null || range === void 0 ? void 0 : range.from) || 1, dateFormat);
         })
         : null;
-    if (rangeFrom &&
-        // rangeFrom !== calendarTo &&
-        checkOutRange &&
-        setDisabledDates) {
+    if (rangeFrom && checkOutRange && setDisabledDates) {
         var checkIn = addDays(checkOutRange.checkIn, 1);
         var firstCheckOut = addDays(checkOutRange.firstCheckOut, -1);
         var noDatesRange = format(checkIn, dateFormat) ===
             format(checkOutRange.firstCheckOut, dateFormat);
+        // Handle overlapping availableDates.lastCheckOut and disabledDates.start
+        // const filteredDisabledCalendarDates =
+        //   disableCalendarDates?.disabledDates?.map((dateRange) => {
+        //     if (
+        //       dateRange.from &&
+        //       format(dateRange.from, dateFormat) ===
+        //         format(checkOutRange.lastCheckOut, dateFormat)
+        //     ) {
+        //       return { ...dateRange, from: addDays(checkOutRange.lastCheckOut, 1) }
+        //     }
+        //     return dateRange
+        //   })
         setDisabledDates(__spreadArray$1(__spreadArray$1([], __read(((disableCalendarDates === null || disableCalendarDates === void 0 ? void 0 : disableCalendarDates.disabledDates) || [])), false), [
             {
                 from: noDatesRange ? undefined : checkIn,
@@ -10996,6 +11028,31 @@ var handleDisabledDatesByPage = function (_a) {
         ]
         : [];
 };
+// const handleOverlappingDates = ({
+//   disableCalendarDates,
+// }: {
+//   disableCalendarDates?: DisableCalendarDates
+// }): DisableCalendarDates | undefined => {
+//   if (!disableCalendarDates) return undefined
+//   const dateFormat = 'dd-MM-yyyy'
+//   disableCalendarDates.disabledDates = disableCalendarDates.disabledDates?.map(
+//     (dateRange) => {
+//       const overlappingDate = disableCalendarDates.availableDates?.find(
+//         (available) =>
+//           format(available.lastCheckOut, dateFormat) ===
+//           format(dateRange.from, dateFormat)
+//       )
+//       if (overlappingDate) {
+//         return {
+//           ...dateRange,
+//           from: addDays(dateRange.from, 1),
+//         }
+//       }
+//       return dateRange
+//     }
+//   )
+//   return disableCalendarDates
+// }
 
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;
@@ -11005,8 +11062,10 @@ var parseDates = function (_a) {
 };
 
 var parseDate = function (_a) {
-    var date = _a.date, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b;
-    return date ? format(date, dateFormat) : null;
+    var date = _a.date, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b, language = _a.language;
+    return date
+        ? format(date, dateFormat, { locale: language === 'en' ? enUS : fi })
+        : null;
 };
 
 var nightsCount = function (_a) {
@@ -11381,10 +11440,11 @@ var AGE_CATEGORIES_FALLBACK = [
 var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 
 var useFilterCalendar = function (_a) {
-    var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar;
+    var onSubmit = _a.onSubmit, setToggleCalendar = _a.setToggleCalendar, noActiveSelection = _a.noActiveSelection;
     var _b = __read(React__default.useState(), 2), calendarRange = _b[0], setCalendarRange = _b[1];
-    var _c = __read(React__default.useState([]), 2), disabledDates = _c[0], setDisabledDates = _c[1];
-    var _d = __read(React__default.useState(false), 2), updateCalendar = _d[0], setUpdateCalendar = _d[1];
+    var _c = __read(React__default.useState(), 2), initialCalendarRange = _c[0], setInitialCalendarRange = _c[1];
+    var _d = __read(React__default.useState([]), 2), disabledDates = _d[0], setDisabledDates = _d[1];
+    var _e = __read(React__default.useState(false), 2), updateCalendar = _e[0], setUpdateCalendar = _e[1];
     React__default.useEffect(function () {
         if (typeof window === 'undefined')
             return;
@@ -11392,16 +11452,17 @@ var useFilterCalendar = function (_a) {
         var startDateParam = urlSearchParams.get('startDate');
         var endDateParam = urlSearchParams.get('endDate');
         if (startDateParam && endDateParam) {
-            setCalendarRange({
-                from: new Date(startDateParam),
-                to: new Date(endDateParam),
-            });
+            noActiveSelection
+                ? setInitialCalendarRange({
+                    from: new Date(startDateParam),
+                    to: new Date(endDateParam),
+                })
+                : setCalendarRange({
+                    from: new Date(startDateParam),
+                    to: new Date(endDateParam),
+                });
         }
     }, []);
-    // TODO - handle the onSubmit on calendar open
-    // useEffect(() => {
-    //   onSubmit(calendarRange)
-    // }, [])
     var handleSubmit = function () {
         setToggleCalendar(false);
         return onSubmit(calendarRange);
@@ -11419,6 +11480,7 @@ var useFilterCalendar = function (_a) {
         calendarRange: calendarRange,
         disabledDates: disabledDates,
         updateCalendar: updateCalendar,
+        initialCalendarRange: initialCalendarRange,
     };
 };
 
@@ -11426,12 +11488,12 @@ var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-
 styleInject(css_248z);
 
 function FilterCalendar(_a) {
-    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates;
+    var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, disableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
     var t = useTranslation().t;
-    var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendar = _b.updateCalendar, setUpdateCalendar = _b.setUpdateCalendar;
+    var _b = useFilterCalendar({ onSubmit: onSubmit, setToggleCalendar: setToggleCalendar, noActiveSelection: noActiveSelection }), handleSubmit = _b.handleSubmit, setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, setDisabledDates = _b.setDisabledDates, updateCalendar = _b.updateCalendar, setUpdateCalendar = _b.setUpdateCalendar, initialCalendarRange = _b.initialCalendarRange;
     // Display component after fully loaded
     useAwaitRender();
     // Handle close filter section
@@ -11444,18 +11506,20 @@ function FilterCalendar(_a) {
             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-main" },
-            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendar: updateCalendar, setUpdateCalendar: setUpdateCalendar, loadingData: loadingData })),
+            React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendar: updateCalendar, setUpdateCalendar: setUpdateCalendar, loadingData: loadingData, initialCalendarRange: initialCalendarRange, showFeedback: showFeedback, noActiveSelection: noActiveSelection })),
         React__default.createElement("div", { className: "will-calendar-footer" },
             React__default.createElement("div", { className: "will-calendar-footer-dates" },
                 React__default.createElement("div", null,
                     React__default.createElement("span", null, parseDate({
                         date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
                         dateFormat: 'EEEEEE d.M.yyyy',
+                        language: language,
                     }) || t('common:checkIn')),
                     React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
                     React__default.createElement("span", null, parseDate({
                         date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
                         dateFormat: 'EEEEEE d.M.yyyy',
+                        language: language,
                     }) || t('common:checkOut'))),
                 !!nights && (React__default.createElement("span", null, "".concat(nights, " ").concat(t("common:".concat(nights > 1 ? 'nights' : 'night')))))),
             React__default.createElement("div", { className: "will-calendar-footer-actions" },