willba-component-library 0.1.40 → 0.1.42

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { DateRange } from 'react-day-picker';
-import { AgeCategoryCount } from '../FilterBarTypes';
+import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes';
 type Props = {
     redirectUrl?: string;
     currentViewApply?: string;
+    ageCategories?: AgeCategoryType[];
 };
-export declare const useFilterBar: ({ redirectUrl, currentViewApply }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, currentViewApply, ageCategories, }: Props) => {
     selectedFilter: number | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;

package/lib/index.esm.js

@@ -3901,7 +3901,7 @@ var parseGuests = function (_a) {
 };
 
 var useFilterBar = function (_a) {
-    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply;
+    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories;
     var _b = __read(useState('/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];
@@ -3923,6 +3923,7 @@ var useFilterBar = function (_a) {
         setCategories(parsedCategories);
     }, []);
     useEffect(function () {
+        // Handle hide scroll bar on mobile
         if (typeof window === 'undefined')
             return;
         document.body.style.overflow =
@@ -3932,15 +3933,15 @@ var useFilterBar = function (_a) {
         };
     }, [selectedFilter]);
     useEffect(function () {
-        if (typeof window !== 'undefined') {
-            // Handle default selected tab
-            var currentPath = window.location.pathname.includes('/events')
-                ? '/events'
-                : window.location.pathname.includes('/rooms')
-                    ? '/rooms'
-                    : '/events';
-            setSelectedPath(currentPath);
-        }
+        // Handle default selected tab
+        if (typeof window === 'undefined')
+            return;
+        var currentPath = window.location.pathname.includes('/events')
+            ? '/events'
+            : window.location.pathname.includes('/rooms')
+                ? '/rooms'
+                : '/events';
+        setSelectedPath(currentPath);
     }, []);
     var updateGuestsCount = function (id, newCount) {
         setAgeCategoryCounts(function (prevCounts) {
@@ -3959,9 +3960,10 @@ var useFilterBar = function (_a) {
                 : '',
             endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
             categories: categories,
-            ageCategoryCounts: Object.entries(ageCategoryCounts).length
-                ? JSON.stringify(ageCategoryCounts)
-                : '',
+            ageCategoryCounts: handleAgeCategoryRules({
+                ageCategoryCounts: ageCategoryCounts,
+                ageCategories: ageCategories,
+            }),
         };
         if (currentViewApply) {
             var currentSearchParams = new URLSearchParams(window.location.search);
@@ -4045,6 +4047,31 @@ var useFilterBar = function (_a) {
         setSelectedPath: setSelectedPath,
     };
 };
+////////////
+var handleAgeCategoryRules = function (_a) {
+    var ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
+    if (ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.length) {
+        ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (a) {
+            if (a.minVal) {
+                // Age categories rules
+                var totalAgeCategories = Object.entries(ageCategoryCounts).reduce(function (acc, c) {
+                    return acc + c[1];
+                }, 0);
+                var ageCategory = ageCategoryCounts["guests-".concat(a.id)];
+                if (!totalAgeCategories ||
+                    (totalAgeCategories === 1 && ageCategory === 1)) {
+                    ageCategoryCounts["guests-".concat(a.id)] = 2;
+                }
+                else if (totalAgeCategories > 1 && !ageCategory) {
+                    ageCategoryCounts["guests-".concat(a.id)] = a.minVal;
+                }
+            }
+        });
+    }
+    return Object.entries(ageCategoryCounts).length
+        ? JSON.stringify(ageCategoryCounts)
+        : '';
+};
 
 var useScrollInToView = function (_a) {
     var selectedFilter = _a.selectedFilter;
@@ -6577,10 +6604,6 @@ styleInject(css_248z$6);
 
 function GuestCount(_a) {
     var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
-    useEffect(function () {
-        if (minVal)
-            updateGuestsCount("guests-".concat(id), minVal);
-    }, []);
     var handleDecrement = function () {
         if (count > minVal) {
             updateGuestsCount("guests-".concat(id), count - 1);
@@ -6592,8 +6615,8 @@ function GuestCount(_a) {
     return (React__default__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
         React__default__default.createElement("p", { className: "will-guests-filter-label" }, label),
         React__default__default.createElement("div", { className: "will-guests-filter-counter" },
-            React__default__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: minVal && count < 2 ? true : false, style: {
-                    cursor: minVal && count < 2
+            React__default__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: minVal && count <= minVal ? true : false, style: {
+                    cursor: minVal && count <= minVal
                         ? 'initial'
                         : !minVal && count < 1
                             ? 'initial'
@@ -6612,7 +6635,7 @@ var Guests = forwardRef(function (_a, ref) {
     var t = useTranslation('filterBar').t;
     return (React__default__default.createElement("div", { className: "will-filter-bar-guests", ref: ref },
         React__default__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
-        React__default__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || category.minVal })); }))));
+        React__default__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
 });
 
 /******************************************************************************
@@ -10605,7 +10628,9 @@ var Calendar = forwardRef(function (_a, ref) {
     }, []);
     return (React__default__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
         React__default__default.createElement("div", { className: "will-calendar-filter-container" },
-            React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
+            React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", 
+                //showOutsideDays
+                numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
                     today: 'my-today',
                 }, modifiersStyles: {
                     disabled: { opacity: '0.2' },
@@ -10643,7 +10668,7 @@ var Categories = function (_a) {
             React__default__default.createElement("span", null, itm))); }))));
 };
 
-var css_248z = ".will-root {\n  z-index: 999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    overflow-y: auto;\n    padding: 10px;\n    z-index: 0;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n";
+var css_248z = ".will-root {\n  z-index: 999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n";
 styleInject(css_248z);
 
 function FilterBar(_a) {
@@ -10653,7 +10678,7 @@ function FilterBar(_a) {
     useUpdateTranslations({ language: language });
     var t = useTranslation('filterBar').t;
     // Filters
-    var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath;
+    var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply, ageCategories: ageCategories }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath;
     // Default selected tab
     useEffect(function () {
         if (currentViewApply === 'roomFilters') {