willba-component-library 0.2.46 → 0.2.48

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

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

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

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

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

@@ -6,13 +6,15 @@ type Props = {
     ageCategories?: AgeCategoryType[];
     onSubmit?: ((val: Filters) => void) | null;
     tabs?: Tab[];
+    isLoading?: boolean;
 };
-export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, isLoading, }: Props) => {
     selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
     selectedPath: string;
+    loading: boolean;
     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>>;

package/lib/core/components/buttons/submit-button/SubmitButton.d.ts

@@ -5,6 +5,7 @@ type Props = {
     startIcon?: ReactNode;
     label?: string;
     disabled?: boolean;
+    isLoading?: boolean;
 };
-export declare const SubmitButton: ({ onClick, startIcon, label, disabled, }: Props) => React.JSX.Element;
+export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, }: Props) => React.JSX.Element;
 export {};

package/lib/index.d.ts

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

package/lib/index.esm.js

@@ -513,6 +513,8 @@ function IconBase(props) {
 // THIS FILE IS AUTO GENERATED
 function FaSearch (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
+}function FaSpinner (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
 }
 
 function useTheme(_a) {
@@ -2968,13 +2970,13 @@ var useCloseFilterSection = function (_a) {
     return { filtersRef: filtersRef };
 };
 
-var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n";
+var css_248z$b = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
 styleInject(css_248z$b);
 
 var SubmitButton = function (_a) {
-    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled },
-        startIcon && React__default__default.createElement("span", null, startIcon),
+    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
+        isLoading ? (React__default__default.createElement("span", null, React__default__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default__default.createElement("span", null, startIcon)),
         label || 'Label'));
 };
 
@@ -11134,12 +11136,13 @@ 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, isLoading = _a.isLoading;
     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];
-    var _f = __read(useState({}), 2), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
+    var _e = __read(useState(isLoading || false), 2), loading = _e[0], setLoading = _e[1];
+    var _f = __read(useState(0), 2), categories = _f[0], setCategories = _f[1];
+    var _g = __read(useState({}), 2), ageCategoryCounts = _g[0], setAgeCategoryCounts = _g[1];
     useEffect(function () {
         var urlSearchParams = new URLSearchParams(window.location.search);
         var startDateParam = urlSearchParams.get('startDate');
@@ -11231,6 +11234,7 @@ var useFilterBar = function (_a) {
             finally { if (e_2) throw e_2.error; }
         }
         handleSelectedFilter(false);
+        setLoading(true);
         return onSubmit && selectedPath === Pages.ROOMS
             ? onSubmit(newParams)
             : (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
@@ -11245,6 +11249,7 @@ var useFilterBar = function (_a) {
         categories: categories,
         calendarRange: calendarRange,
         selectedPath: selectedPath,
+        loading: loading,
         setCalendarRange: setCalendarRange,
         setSelectedFilter: setSelectedFilter,
         setAgeCategoryCounts: setAgeCategoryCounts,
@@ -11392,7 +11397,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;
+    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, isLoading = _a.isLoading;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11403,6 +11408,7 @@ function FilterBar(_a) {
         ageCategories: ageCategories,
         onSubmit: onSubmit,
         tabs: tabs,
+        isLoading: isLoading,
     }), 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, handleResetFilters = _d.handleResetFilters;
     // Scroll in to view
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
@@ -11436,7 +11442,7 @@ function FilterBar(_a) {
             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.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
-            React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search') })),
+            React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search'), isLoading: isLoading })),
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !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, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language })),