willba-component-library 0.1.57 → 0.1.58

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Palette } from '../../themes/useTheme';
 import '../../themes/Default.css';
-import { AgeCategoryType, Filters } from './FilterBarTypes';
+import { AgeCategoryType, CalendarOffset, Filters } from './FilterBarTypes';
 import './FilterBar.css';
 export type FilterBarProps = {
     vendor?: string;
@@ -12,5 +12,6 @@ export type FilterBarProps = {
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
+    calendarOffset: CalendarOffset;
 };
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, }: FilterBarProps): React.JSX.Element | undefined;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, }: FilterBarProps): React.JSX.Element | undefined;

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

@@ -26,3 +26,10 @@ export type Filters = {
 export declare enum ViewApply {
     ROOMS = "roomFilters"
 }
+export declare enum Pages {
+    ROOMS = "/rooms",
+    EVENTS = "/events"
+}
+export type CalendarOffset = {
+    [key: string]: number;
+};

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { DateRange } from 'react-day-picker';
+import { CalendarOffset } from '../../FilterBarTypes';
 import 'react-day-picker/dist/style.css';
 import './Calendar.css';
 type Props = {
     calendarRange: DateRange | undefined;
     setCalendarRange: (range: DateRange | undefined) => void;
+    calendarOffset: CalendarOffset;
+    selectedPath: string;
 };
 export declare const Calendar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DateRange } from 'react-day-picker';
-import { AgeCategoryCount, AgeCategoryType, Filters } from '../FilterBarTypes';
+import { AgeCategoryCount, AgeCategoryType, Filters, Pages } from '../FilterBarTypes';
 type Props = {
     redirectUrl?: string;
     currentViewApply?: string;
@@ -12,7 +12,7 @@ export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategori
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
-    selectedPath: string;
+    selectedPath: Pages;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
     setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<string | boolean>>;
     setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
@@ -21,6 +21,6 @@ export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategori
     handleSubmit: () => string | void;
     updateGuestsCount: (id: string, newCount: number) => void;
     handleResetFilters: () => void;
-    setSelectedPath: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setSelectedPath: import("react").Dispatch<import("react").SetStateAction<Pages>>;
 };
 export {};

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

@@ -3,5 +3,5 @@ type Props = {
     ageCategoryCounts: AgeCategoryCount;
     ageCategories: AgeCategoryType[];
 };
-export declare const parseGuests: ({ ageCategoryCounts, ageCategories }: Props) => string;
+export declare const parseGuests: ({ ageCategoryCounts, ageCategories }: Props) => string | 0;
 export {};

package/lib/index.d.ts

@@ -41,6 +41,9 @@ type AgeCategoryType = {
 type Filters = {
     [key: string]: string;
 };
+type CalendarOffset = {
+    [key: string]: number;
+};
 
 type FilterBarProps = {
     vendor?: string;
@@ -51,7 +54,8 @@ type FilterBarProps = {
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
     fullWidth?: boolean;
+    calendarOffset: CalendarOffset;
 };
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, }: FilterBarProps): React.JSX.Element | undefined;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, calendarOffset, }: FilterBarProps): React.JSX.Element | undefined;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -58,6 +58,16 @@ function __read(o, n) {
     return ar;
 }
 
+function __spreadArray$1(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -3890,14 +3900,23 @@ var parseDates = function (_a) {
 
 var parseGuests = function (_a) {
     var ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
-    return Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
+    var parsedData = Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
         var _b = __read(_a, 2), key = _b[0], value = _b[1];
-        var ageCategory = ageCategories.find(function (c) { return c.id === key[key.length - 1]; });
+        var ageCategoryId = key[key.length - 1];
+        var ageCategory = ageCategories.find(function (c) { return c.id === ageCategoryId; });
         if (ageCategory && value) {
-            acc += "".concat(acc ? ' |' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
+            return {
+                total: acc.total + value,
+                html: __spreadArray$1(__spreadArray$1([], __read(acc.html), false), [
+                    "<span style=\"display: inline-block; width: 21px, text-align: center\">".concat(value, "</span>"),
+                ], false),
+            };
         }
         return acc;
-    }, '');
+    }, { total: 0, html: [] });
+    var htmlString = parsedData.html.length > 1 ? parsedData.html.join(' + ') : '';
+    return ((parsedData.total || htmlString) &&
+        ": ".concat(parsedData.total, " ").concat(htmlString ? "- ( ".concat(htmlString, " )") : ''));
 };
 
 var FilterSections;
@@ -3910,10 +3929,15 @@ var ViewApply;
 (function (ViewApply) {
     ViewApply["ROOMS"] = "roomFilters";
 })(ViewApply || (ViewApply = {}));
+var Pages;
+(function (Pages) {
+    Pages["ROOMS"] = "/rooms";
+    Pages["EVENTS"] = "/events";
+})(Pages || (Pages = {}));
 
 var useFilterBar = function (_a) {
     var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit;
-    var _b = __read(useState('/events'), 2), selectedPath = _b[0], setSelectedPath = _b[1];
+    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];
     var _e = __read(useState(0), 2), categories = _e[0], setCategories = _e[1];
@@ -3947,13 +3971,16 @@ var useFilterBar = function (_a) {
         // Handle default selected tab
         if (typeof window === 'undefined')
             return;
-        var currentPath = window.location.pathname.includes('/events')
-            ? '/events'
-            : window.location.pathname.includes('/rooms')
-                ? '/rooms'
-                : '/events';
+        var currentPath = window.location.pathname.includes(Pages.EVENTS)
+            ? Pages.EVENTS
+            : window.location.pathname.includes(Pages.ROOMS)
+                ? Pages.ROOMS
+                : Pages.EVENTS;
         setSelectedPath(currentPath);
     }, []);
+    useEffect(function () {
+        handleResetFilters();
+    }, [selectedPath]);
     var updateGuestsCount = function (id, newCount) {
         setAgeCategoryCounts(function (prevCounts) {
             var _a;
@@ -4013,7 +4040,7 @@ var useFilterBar = function (_a) {
             var baseUrl = window.location.origin + window.location.pathname;
             var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
             handleSelectedFilter(false);
-            if (onSubmit && selectedPath === '/rooms') {
+            if (onSubmit && selectedPath === Pages.ROOMS) {
                 var updatedParamsObject_1 = {};
                 updatedParams.forEach(function (value, key) {
                     if (value)
@@ -4041,15 +4068,14 @@ var useFilterBar = function (_a) {
                 finally { if (e_3) throw e_3.error; }
             }
             handleSelectedFilter(false);
-            return onSubmit && selectedPath === '/rooms'
+            return onSubmit && selectedPath === Pages.ROOMS
                 ? onSubmit(newParams)
                 : (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
         }
     };
     var handleResetFilters = function () {
         setAgeCategoryCounts({});
-        handleSubmit();
-        setSelectedFilter(false);
+        setCalendarRange(undefined);
     };
     return {
         selectedFilter: selectedFilter,
@@ -6393,7 +6419,8 @@ var guests$1 = {
 	labelPlaceholder: "Add guests",
 	title: "Who's coming?",
 	adultsLabel: "Adults",
-	kidsLabel: "kids"
+	kidsLabel: "kids",
+	guestsLabel: "Guests"
 };
 var categories$1 = {
 	label: "Categories",
@@ -6427,7 +6454,8 @@ var guests = {
 	labelPlaceholder: "Lisää vieraat",
 	title: "Ketkä ovat tulossa?",
 	adultsLabel: "Aikuiset",
-	kidsLabel: "lapset"
+	kidsLabel: "lapset",
+	guestsLabel: "Gieraita"
 };
 var categories = {
 	label: "Kategoriat",
@@ -10629,17 +10657,19 @@ var css_248z$3 = ".will-calendar-filter-header {\n  padding: 15px 0;\n  border-b
 styleInject(css_248z$3);
 
 var Calendar = forwardRef(function (_a, ref) {
-    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
+    var _b;
+    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, calendarOffset = _a.calendarOffset, selectedPath = _a.selectedPath;
     var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
     useEffect(function () {
         if (!calendarRange)
             setCalendarRange(undefined);
     }, []);
     var today = startOfDay(new Date());
+    var daysToOffsetCalendar = (_b = Object.entries(calendarOffset)) === null || _b === void 0 ? void 0 : _b.find(function (page) { return selectedPath.substring(1) === page[0]; });
     var disabledDays = [
         {
-            from: addDays(today, -2),
-            to: addDays(today, -50),
+            from: addDays(today, !!(daysToOffsetCalendar === null || daysToOffsetCalendar === void 0 ? void 0 : daysToOffsetCalendar.length) ? daysToOffsetCalendar[1] : -2),
+            to: addDays(today, -100),
         },
     ];
     var selectedStartDate = calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from;
@@ -10687,7 +10717,7 @@ var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-widt
 styleInject(css_248z);
 
 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, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth;
+    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, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, calendarOffset = _a.calendarOffset;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -10702,7 +10732,7 @@ function FilterBar(_a) {
     // Default selected tab when tabs are hidden
     useEffect(function () {
         if (currentViewApply === ViewApply.ROOMS) {
-            setSelectedPath('/rooms');
+            setSelectedPath(Pages.ROOMS);
         }
     }, []);
     // Scroll in to view
@@ -10722,21 +10752,23 @@ function FilterBar(_a) {
     var parsedGuests = parseGuests({ ageCategoryCounts: ageCategoryCounts, ageCategories: ageCategories });
     return (React__default__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
         !currentViewApply && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
-            React__default__default.createElement(TabButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
-            React__default__default.createElement(TabButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' }))),
+            React__default__default.createElement(TabButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath(Pages.EVENTS); }, active: selectedPath === Pages.EVENTS }),
+            React__default__default.createElement(TabButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath(Pages.ROOMS); }, active: selectedPath === Pages.ROOMS }))),
         React__default__default.createElement("div", { className: "will-filter-bar-header", ref: currentViewApply ? targetFilterBarRef : null },
             React__default__default.createElement(SelectButton, { label: t('calendar.label'), description: parsedDates
                     ? parsedDates
-                    : selectedPath === '/rooms'
+                    : selectedPath === Pages.ROOMS
                         ? t('calendar.roomsLabelPlaceholder')
                         : t('calendar.eventsLabelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.CALENDAR); }, active: selectedFilter === FilterSections.CALENDAR }),
-            selectedPath === '/rooms' && (React__default__default.createElement(React__default__default.Fragment, null,
+            selectedPath === Pages.ROOMS && (React__default__default.createElement(React__default__default.Fragment, null,
                 React__default__default.createElement(Divider, null),
-                React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests ? parsedGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: selectedFilter === FilterSections.GUESTS }))),
+                React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests
+                        ? t('guests.guestsLabel') + parsedGuests
+                        : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: selectedFilter === FilterSections.GUESTS }))),
             React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
             React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
-            selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef })),
+            selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, calendarOffset: calendarOffset, selectedPath: selectedPath })),
             selectedFilter === FilterSections.GUESTS && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
             selectedFilter === FilterSections.CATEGORIES && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
 }