willba-component-library 0.2.95 → 0.2.98

package/lib/components/FilterBar/FilterBar.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '../../themes/Default.css';
 import { FilterBarTypes } from './FilterBarTypes';
 import './FilterBar.css';
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }: FilterBarTypes): React.JSX.Element;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, siteId, }: FilterBarTypes): React.JSX.Element;

package/lib/components/FilterBar/FilterBarTypes.d.ts

@@ -11,6 +11,7 @@ export type FilterBarTypes = {
     mode?: string;
     tabs?: Tab[];
     outerLoading?: boolean;
+    siteId?: string;
 };
 export type AgeCategoryCount = {
     [categoryId: string]: number;

package/lib/components/FilterBar/hooks/useFilterBar.d.ts

@@ -6,8 +6,9 @@ type Props = {
     ageCategories?: AgeCategoryType[];
     onSubmit?: ((val: Filters) => void) | null;
     tabs?: Tab[];
+    siteId?: string;
 };
-export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, siteId, }: Props) => {
     selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;

package/lib/index.d.ts

@@ -90,6 +90,7 @@ type FilterBarTypes = {
     mode?: string;
     tabs?: Tab[];
     outerLoading?: boolean;
+    siteId?: string;
 };
 type AgeCategoryType = {
     id: string;
@@ -112,7 +113,7 @@ type Tab = {
     label?: Translations;
 };
 
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }: FilterBarTypes): React.JSX.Element;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, siteId, }: FilterBarTypes): React.JSX.Element;
 
 interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;

package/lib/index.esm.js

@@ -2817,10 +2817,7 @@ var calendar$1 = {
 	eventsLabelPlaceholder: "Add search dates",
 	startDate: "Start date",
 	endDate: "End date",
-	title: "Calendar",
-	checkoutOnly: "Check-out only",
-	hasDisableDates: "Contains unavailable dates",
-	minNights: "2 nights min"
+	title: "Calendar"
 };
 var guests$1 = {
 	label: "Number of guests",
@@ -2883,21 +2880,16 @@ var calendar = {
 	eventsLabelPlaceholder: "Lisää aikaväli",
 	startDate: "Alku",
 	endDate: "Loppu",
-	title: "Kalenteri",
-	checkoutOnly: "Check-out only",
-	hasDisableDates: "Contains unavailable dates",
-	minNights: "2 nights min"
+	title: "Kalenteri"
 };
 var guests = {
-	label: "Vierasmäärä",
-	labelPlaceholder: "Lisää vieraat",
+	label: "Osallistujamäärä",
+	labelPlaceholder: "Lisää osallistujat",
 	title: "Ketkä ovat tulossa?",
 	adultsLabel: "Aikuiset",
 	kidsLabel: "lapset",
-	guestsLabel: "vierasta",
-	guestLabel: "vieras",
-	checkoutOnly: "Check-out only",
-	hasDisableDates: "Contains unavailable dates"
+	guestsLabel: "osallistujaa",
+	guestLabel: "osallistuja"
 };
 var categories = {
 	label: "Kategoriat",
@@ -10980,6 +10972,28 @@ var reactResponsive = {exports: {}};
 
 var reactResponsiveExports = reactResponsive.exports;
 
+var IconsSvg = function (_a) {
+    var fill = _a.fill, size = _a.size, icon = _a.icon;
+    switch (icon) {
+        case 'spinner':
+            return (React__default__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
+                React__default__default.createElement("style", null, "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      "),
+                React__default__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
+                React__default__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
+        case 'warning':
+            return (React__default__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
+                    verticalAlign: 'middle',
+                    fill: fill,
+                    overflow: 'hidden',
+                    minWidth: '25px',
+                    minHeight: '25px',
+                }, viewBox: "0 0 1024 1024", version: "1.1" },
+                React__default__default.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
+        default:
+            return null;
+    }
+};
+
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;
     return (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
@@ -11468,28 +11482,6 @@ 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.will-calendar-filter-container .DayPicker {\n  font-size: 25px;\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-table {\n  border-collapse: separate;\n  border-spacing: 0px 2px;\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  color: var(--will-white)\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  color: var(--will-transparent-black);\n  opacity: 1\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/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\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\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.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > 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.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::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.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {\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-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end { \n  position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before { \n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 2px solid var(--will-light-grey);\n  box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n  border-right: none;\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n  border-right: none;\n  border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n  border-left: none;\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {\n  background-color: var(--will-primary-lightest);\n  color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n  user-select: none;\n  pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n  cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n  top: -70px;\n  white-space: wrap;\n  max-width: 120px;\n}\n}\n\n\n";
 styleInject(css_248z$8);
 
-var IconsSvg = function (_a) {
-    var fill = _a.fill, size = _a.size, icon = _a.icon;
-    switch (icon) {
-        case 'spinner':
-            return (React__default__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
-                React__default__default.createElement("style", null, "\n      .spinner_z9k8 {\n      transform-origin: center;\n      animation: spinner_StKS .75s infinite linear;\n      }\n      @keyframes spinner_StKS {\n      100% {\n      transform: rotate(360deg);\n      }\n      }\n      "),
-                React__default__default.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
-                React__default__default.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
-        case 'warning':
-            return (React__default__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
-                    verticalAlign: 'middle',
-                    fill: fill,
-                    overflow: 'hidden',
-                    minWidth: '25px',
-                    minHeight: '25px',
-                }, viewBox: "0 0 1024 1024", version: "1.1" },
-                React__default__default.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
-        default:
-            return null;
-    }
-};
-
 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, 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;
@@ -11663,7 +11655,7 @@ var Pages;
 })(Pages || (Pages = {}));
 
 var useFilterBar = function (_a) {
-    var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs;
+    var redirectUrl = _a.redirectUrl, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit, tabs = _a.tabs, siteId = _a.siteId;
     var _b = __read(useState(Pages.EVENTS), 2), selectedPath = _b[0], setSelectedPath = _b[1];
     var _c = __read(useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
     var _d = __read(useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
@@ -11755,8 +11747,14 @@ var useFilterBar = function (_a) {
             onSubmit(newParams);
         }
         else {
-            setInnerLoading(true),
-                (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
+            var siteIdParam = siteId ? "siteId=".concat(siteId) : '';
+            var querySearchParam = querySearchParams
+                ? querySearchParams.toString()
+                : '';
+            var params = [siteIdParam, querySearchParam].filter(Boolean).join('&');
+            var path = "".concat(redirectUrl).concat(selectedPath);
+            setInnerLoading(true);
+            window.location.href = params ? "".concat(path, "?").concat(params) : path;
         }
     };
     var handleResetFilters = function () {
@@ -11921,7 +11919,7 @@ var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-wi
 styleInject(css_248z$1);
 
 function FilterBar(_a) {
-    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading;
+    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, siteId = _a.siteId;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11932,6 +11930,7 @@ function FilterBar(_a) {
         ageCategories: ageCategories,
         onSubmit: onSubmit,
         tabs: tabs,
+        siteId: siteId,
     }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, innerLoading = _d.innerLoading, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath, handleResetFilters = _d.handleResetFilters;
     // Scroll in to view
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;