willba-component-library 0.0.80 → 0.0.82

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

@@ -1,15 +1,22 @@
+export interface AgeCategoryCount {
+    [categoryId: string]: number;
+}
 export interface AgeCategoryType {
     id: string;
     name: string;
     minAge: number | null;
     maxAge: number | null;
-    maxVal: number;
+    minVal: number;
 }
 export interface GuestsPropsType {
     ageCategories: AgeCategoryType[];
-    updateGuestsCount: (arg1: string, arg2: number) => void;
+    updateGuestsCount: (arg1: number, arg2: number) => void;
+    ageCategoryCounts: AgeCategoryCount | {};
 }
 export interface GuestsCountPropsType {
     label: string;
-    updateGuestsCount: (arg1: string, arg2: number) => void;
+    id: number;
+    updateGuestsCount: (arg1: number, arg2: number) => void;
+    count: number;
+    minVal: number;
 }

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { GuestsCountPropsType } from '../../../FilterBarTypes';
 import './GuestCount.css';
-export default function GuestCount({ label, updateGuestsCount, }: GuestsCountPropsType): React.JSX.Element;
+export default function GuestCount({ label, id, updateGuestsCount, count, minVal, }: GuestsCountPropsType): React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { GuestsPropsType } from '../../FilterBarTypes';
 import './Guests.css';
-export default function Guests({ ageCategories, updateGuestsCount, }: GuestsPropsType): React.JSX.Element;
+export default function Guests({ ageCategories, updateGuestsCount, ageCategoryCounts, }: GuestsPropsType): React.JSX.Element;

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

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { DateRange } from 'react-day-picker';
+import { AgeCategoryCount } from '../FilterBarTypes';
 export default function useFilterBar(ageCategories: any): {
     selectedFilter: number | boolean;
-    ageCategoryCounts: {};
+    ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
     setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
-    setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<{}>>;
+    setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
     setCategories: import("react").Dispatch<import("react").SetStateAction<number>>;
     handleSelectedFilter: (id: number | boolean) => void;
     handleSubmit: () => void;
-    updateGuestsCount: (label: string, newCount: number) => void;
+    updateGuestsCount: (id: number, newCount: number) => void;
 };

package/lib/index.d.ts

@@ -32,7 +32,7 @@ interface AgeCategoryType {
     name: string;
     minAge: number | null;
     maxAge: number | null;
-    maxVal: number;
+    minVal: number;
 }
 
 interface FilterBarProps {

package/lib/index.esm.js

@@ -7882,18 +7882,14 @@ var css_248z$4 = ".will-guests-filter-label, .will-guests-filter-count {\n  font
 styleInject(css_248z$4);
 
 function GuestCount(_a) {
-    var label = _a.label, updateGuestsCount = _a.updateGuestsCount;
-    useTranslation('filterBar').t;
-    var _b = useState(0), count = _b[0], setCount = _b[1];
+    var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
     var handleDecrement = function () {
-        if (count > 0) {
-            setCount(count - 1);
-            updateGuestsCount(label, count - 1);
+        if (count > minVal) {
+            updateGuestsCount(id, count - 1);
         }
     };
     var handleIncrement = function () {
-        setCount(count + 1);
-        updateGuestsCount(label, count + 1);
+        updateGuestsCount(id, count + 1);
     };
     return (React__default__default.createElement("div", { className: "will-guests-filter-inner" },
         React__default__default.createElement("span", { className: "will-guests-filter-label" }, label),
@@ -7910,12 +7906,13 @@ var css_248z$3 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-
 styleInject(css_248z$3);
 
 function Guests(_a) {
-    var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount;
+    var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
     var t = useTranslation('filterBar').t;
     return (React__default__default.createElement("div", { className: "will-filter-bar-guests" },
         React__default__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
         React__default__default.createElement("p", { className: "will-guests-filter-subtitle" }, t('guests.subtitle')),
-        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, label: category.name, updateGuestsCount: updateGuestsCount })); }))));
+        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, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts[category.id] ||
+                category.minVal })); }))));
 }
 
 var css_248z$2 = ".will-filter-bar-categories {\n  text-align: center;\n}\n\n.will-categories-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n}\n\n.will-categories-filter-inner input {\n  cursor: pointer;\n  margin-right: 10px;\n}\n";
@@ -7991,10 +7988,10 @@ function useFilterBar(ageCategories) {
     var _c = useState(0), categories = _c[0], setCategories = _c[1];
     //
     var _d = useState({}), ageCategoryCounts = _d[0], setAgeCategoryCounts = _d[1];
-    var updateGuestsCount = function (label, newCount) {
+    var updateGuestsCount = function (id, newCount) {
         setAgeCategoryCounts(function (prevCounts) {
             var _a;
-            return (__assign(__assign({}, prevCounts), (_a = {}, _a[label] = newCount, _a)));
+            return (__assign(__assign({}, prevCounts), (_a = {}, _a[id] = newCount, _a)));
         });
     };
     //
@@ -8002,8 +7999,7 @@ function useFilterBar(ageCategories) {
         var urlSearchParams = new URLSearchParams(window.location.search);
         var startDateParam = urlSearchParams.get('startDate');
         var endDateParam = urlSearchParams.get('endDate');
-        parseInt(urlSearchParams.get('guestsAdults') || '1', 10);
-        parseInt(urlSearchParams.get('guestsKids') || '0', 10);
+        var ageCategoryCountsParam = JSON.parse(urlSearchParams.get('ageCategoryCounts') || '{}');
         var parsedCategories = parseInt(urlSearchParams.get('categories') || '0', 10);
         if (startDateParam && endDateParam) {
             setCalendarRange({
@@ -8011,8 +8007,7 @@ function useFilterBar(ageCategories) {
                 to: new Date(endDateParam),
             });
         }
-        // setGuestsAdults(parsedGuestsAdults)
-        // setGuestsKids(parsedGuestsKids)
+        setAgeCategoryCounts(ageCategoryCountsParam);
         setCategories(parsedCategories);
     }, []);
     var handleSelectedFilter = function (id) {
@@ -10404,16 +10399,16 @@ instance.use(initReactI18next).init({
 });
 
 function FilterBar(_a) {
-    var vendor = _a.vendor, language = _a.language, ageCategories = _a.ageCategories;
+    var vendor = _a.vendor, language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? ageCategoriesFallback : _b;
     var themeClass = useTheme({ vendor: vendor });
-    var _b = useState(0); _b[0]; var setRerenderKey = _b[1];
+    var _c = useState(0); _c[0]; var setRerenderKey = _c[1];
     useEffect(function () {
         instance.changeLanguage(language);
         // Trigger a re-render by updating the rerenderKey
         setRerenderKey(function (prevKey) { return prevKey + 1; });
     }, [language]);
     var t = useTranslation('filterBar').t;
-    var _c = useFilterBar(), selectedFilter = _c.selectedFilter, categories = _c.categories, calendarRange = _c.calendarRange, setCalendarRange = _c.setCalendarRange, setCategories = _c.setCategories, handleSelectedFilter = _c.handleSelectedFilter, handleSubmit = _c.handleSubmit, updateGuestsCount = _c.updateGuestsCount;
+    var _d = useFilterBar(), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount;
     return (React__default__default.createElement(React__default__default.Fragment, null,
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
                 handleSelectedFilter(false);
@@ -10428,12 +10423,28 @@ function FilterBar(_a) {
                 React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
             selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container" },
                 (selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
-                selectedFilter === 3 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories })),
+                selectedFilter === 3 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
                 selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
 }
 var fontWigthBold = function (input) {
     return { fontWeight: input ? 'bold' : 'initial' };
 };
+var ageCategoriesFallback = [
+    {
+        id: '1',
+        name: 'Adults',
+        minAge: null,
+        maxAge: 6,
+        minVal: 1,
+    },
+    {
+        id: '2',
+        name: 'Kids',
+        minAge: 6,
+        maxAge: 17,
+        minVal: 0,
+    },
+];
 
 export { Button$1 as Button, FilterBar };
 //# sourceMappingURL=index.esm.js.map