ublo-lib 1.7.0 → 1.7.2

package/es/common/components/cookie-consent/cookie-consent.js

@@ -28,7 +28,7 @@ const CookieConsent = ({
         updateConsent(true);
       }
     }
-  }, [isEnabled, mounted]);
+  }, [isEnabled, mounted, updateConsent]);
   if (!mounted) return null;
   const classes = classnames(css.banner, {
     [css.opened]: consent === null
@@ -80,9 +80,9 @@ export const useCookieConsent = () => {
   const updateConsent = value => {
     try {
       if (value === null || value === undefined) {
-        localStorage.removeItem(COOKIE_STORAGE);
+        window.localStorage.removeItem(COOKIE_STORAGE);
       } else {
-        localStorage.setItem(COOKIE_STORAGE, value);
+        window.localStorage.setItem(COOKIE_STORAGE, value);
       }
       setConsent(value);
     } catch (e) {
@@ -91,7 +91,7 @@ export const useCookieConsent = () => {
   };
   React.useEffect(() => {
     try {
-      const stored = localStorage.getItem(COOKIE_STORAGE);
+      const stored = window.localStorage.getItem(COOKIE_STORAGE);
       const currentConsent = !stored ? null : Boolean(stored);
       setConsent(currentConsent);
     } catch (e) {

package/es/common/components/custom-contact-form/custom-contact-form.js

@@ -7,6 +7,7 @@ import Button from "dt-design-system/es/button";
 import * as Messages from "./messages";
 import * as Icons from "./icons";
 import * as DTIcons from "dt-design-system/es/icons";
+import * as Plausible from "../plausible";
 import styles from "./custom-contact-form.module.css";
 import { getInitialFormState, getSettings, send } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/common/components/custom-contact-form/utils.js

@@ -83,7 +83,7 @@ export const validate = (type, value, required) => {
   return regex.test(value);
 };
 export const convertToFileList = list => {
-  const dataTransfer = new DataTransfer();
+  const dataTransfer = new window.DataTransfer();
   list.forEach(item => dataTransfer.items.add(item));
   return dataTransfer.files;
 };
@@ -96,7 +96,7 @@ export const send = async ({
 }) => {
   const endpoint = `https://contacts.valraiso.net/api/contact/${site}`;
   const dataKeys = Object.keys(data);
-  const formData = new FormData();
+  const formData = new window.FormData();
   dataKeys.forEach(key => {
     if (key === "attachment") {
       return Array.from(data[key].value).forEach(file => {

package/es/common/components/date-picker/calendar.js

@@ -86,7 +86,7 @@ const Calendar = ({
     setYear(newYear);
   };
   const submit = () => {
-    const hasCart = sessionStorage.cartId !== undefined;
+    const hasCart = window.sessionStorage.cartId !== undefined;
     if (hasCart) {
       setShowPopup(true);
     } else {
@@ -220,7 +220,7 @@ const Calendar = ({
         lang: lang,
         cancel: () => setShowPopup(false),
         confirm: () => {
-          sessionStorage.removeItem("cartId");
+          window.sessionStorage.removeItem("cartId");
           onSubmit(selectedDates);
           setShowPopup(false);
         }

package/es/common/components/date-picker/date-picker.js

@@ -38,7 +38,7 @@ const DatePicker = ({
     return Data.MODES.CUSTOM;
   };
   const [currentMode, setCurrentMode] = React.useState(getDefaultMode());
-  const resized = () => {
+  const resized = React.useCallback(() => {
     if (window.innerWidth <= Data.BREAKPOINTS.PHONE) {
       setDisplay(Data.DISPLAYS.PHONE);
       return;
@@ -48,12 +48,12 @@ const DatePicker = ({
       return;
     }
     setDisplay(Data.DISPLAYS.DESKTOP);
-  };
+  }, []);
   React.useEffect(() => {
     resized();
     const isCompatible = typeof ResizeObserver !== "undefined";
     if (isCompatible) {
-      const observer = new ResizeObserver(resized);
+      const observer = new window.ResizeObserver(resized);
       observer.observe(document.body);
       return () => {
         observer.unobserve(document.body);

package/es/common/components/faq.js

@@ -14,7 +14,7 @@ const Faq = ({
   const [count, setCount] = useState(0);
   const [current, setCurrent] = useState();
   useEffect(() => {
-    if (location.hostname === "localhost") {
+    if (window.location.hostname === "localhost") {
       console.warn("Faq is deprecated, prefer useFaq (ublo-lib/es/common/hooks/use-faq)");
     }
   }, []);

package/es/common/components/gesco-contact-form/gesco-contact-form.js

@@ -136,13 +136,13 @@ const ContactForm = ({
           type: "success",
           message: Messages.get(widgetLang, "messageSent")
         });
+        const country = params.countries.find(country => country.code === payload.country);
+        const subject = params.subjects.find(subject => subject.id === Number(payload.subject));
         Plausible.sendGoal("Contact-us", {
           Country: country?.name,
           Subject: subject?.label
         });
         setFields(Data.DEFAULT_FIELDS);
-        const country = params.countries.find(country => country.code === payload.country);
-        const subject = params.subjects.find(subject => subject.id === Number(payload.subject));
       }
     }
     setSubmiting(false);

package/es/common/components/info-buttons.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SLASH = "/";
 const modules = {
-  Levels: Levels
+  Levels
 };
 const isLocalUrl = href => href !== null && href !== undefined && href.length > 2 && href[0] === SLASH && href[1] !== SLASH;
 const pdfRegex = /.*\.pdf$/;
@@ -68,7 +68,7 @@ const InfoButtons = ({
     setClosed(true);
   };
   useEffect(() => {
-    if (location.hostname === "localhost") {
+    if (window.location.hostname === "localhost") {
       console.warn("InfoButtons is deprecated, prefer useInfoButtons");
     }
   }, []);

package/es/common/components/plausible/services/callback.js

@@ -1,3 +1,4 @@
+
 import sendGoal from "./send-goal";
 const EVENT_NAMES = {
   view_item: "MseM: View item",

package/es/common/components/scroll-spy.js

@@ -32,7 +32,7 @@ const ScrollSpy = ({
       const element = document.getElementById(item);
       return element ? [...acc, element] : acc;
     }, defaultTargets) : defaultTargets;
-    const observer = new IntersectionObserver(callback, {
+    const observer = new window.IntersectionObserver(callback, {
       rootMargin
     });
     targets.forEach(observer.observe, observer);

package/es/common/components/search-bar/search-bar.js

@@ -108,14 +108,14 @@ const SearchBar = ({
     if (keyId === KeyboardKeys.K && (ctrlKey || metaKey)) {
       focusInput();
     }
-  }, []);
+  }, [text]);
   useEffect(() => {
     if (autofocus) focusInput();
     window.addEventListener("keydown", handleKeyPresses);
     return () => {
       window.removeEventListener("keydown", handleKeyPresses);
     };
-  }, []);
+  }, [autofocus, handleKeyPresses]);
   const Icon = search?.loading ? Icons.LoadIcon : Icons.SearchIcon;
   const classes = classnames("search-bar", {
     "search-bar--opened": search?.result,

package/es/common/hooks/use-packages.js

@@ -1,14 +1,9 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import PackagesSelector from "../components/packages-selector";
-import { loadJS } from "../utils/load-js";
 import { openMseM } from "../utils/msem-widget";
 import { jsx as _jsx } from "react/jsx-runtime";
 const preview = typeof window !== "undefined" && window.location.search.indexOf("preview") !== -1;
-const loadWigetMseM = () => {
-  const widgetUrl = "https://widget.msem.tech/static/js/widget-msem.js";
-  return loadJS(widgetUrl, "widget-msem");
-};
 const buttonStyles = `
   display: table;
   position: absolute;
@@ -88,7 +83,7 @@ const usePackages = (defaultPopupContent, setPopupContent, cartUrl, selector = "
       cartUrl
     };
     await openMseM("widgetPackage", options);
-  }, [cartUrl, cmsMode, resort, selector]);
+  }, [cartUrl, channel, cmsMode, resort, selector]);
   const callback = React.useCallback(e => {
     const {
       section: newSection

package/es/common/hooks/use-scroll-direction.d.ts

@@ -4,7 +4,7 @@ declare type Props = {
     thresholdPixels?: number;
     off?: boolean;
 };
-declare const useScrollDirection: ({ initialDirection, thresholdPixels, off, }: Props) => {
+declare const useScrollDirection: ({ initialDirection, thresholdPixels, off, }?: Props) => {
     scrollDir: "up" | "down" | undefined;
 };
 export default useScrollDirection;

package/es/common/hooks/use-scroll-direction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAEA,aAAK,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/B,aAAK,KAAK,GAAG;IACX,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAKF,QAAA,MAAM,kBAAkB,gDAIrB,KAAK;;CAoCP,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAEA,aAAK,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/B,aAAK,KAAK,GAAG;IACX,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAKF,QAAA,MAAM,kBAAkB,iDAIrB,KAAK;;CAoCP,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/es/common/hooks/use-scroll-direction.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 const SCROLL_UP = "up";
 const SCROLL_DOWN = "down";
-const useScrollDirection = ({ initialDirection, thresholdPixels, off, }) => {
+const useScrollDirection = ({ initialDirection, thresholdPixels, off, } = {}) => {
     const [scrollDir, setScrollDir] = useState(initialDirection);
     useEffect(() => {
         const threshold = thresholdPixels || 0;

package/es/common/hooks/use-youtube-popup.js

@@ -7,7 +7,7 @@ const extractYoutubeVideoID = url => {
   if (match && match[7].length === 11) {
     return match[7];
   } else {
-    alert("Could not extract video ID.");
+    window.alert("Could not extract video ID.");
   }
 };
 const useYoutubePopup = (selector, setPopupContent) => {

package/es/common/hooks/use-zone-sync.js

@@ -16,7 +16,7 @@ const useZoneSync = (zoneRef, twinZoneParentSelector) => {
     if (!zone) return;
     const twinZone = document.querySelector(`${twinZoneParentSelector} [data-cms-key=${zone.dataset.cmsKey}]`);
     const section = e?.detail?.section || zone.querySelector("section");
-    const observer = new MutationObserver(mutations => {
+    const observer = new window.MutationObserver(mutations => {
       mutations.forEach(mutation => {
         if (mutation.type === "attributes") {
           updateTwinZoneContent(twinZone, section.outerHTML);

package/es/common/utils/fetcher.js

@@ -12,6 +12,7 @@ export const fetcher = method => async (_url, body, params = {}, _headers = {})
     ...defaultContentType,
     ..._headers
   };
+
   try {
     const qs = buildQueryString(params);
     const url = qs.length === 0 ? _url : `${_url}?${qs}`;

package/es/esf/components/covid-link/index.js

@@ -1,28 +1,10 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import Popup from "../../../common/components/popup";
-import VaxPassIcon from "./vax-pass-icon";
-import MaskIcon from "./mask-icon";
-import css from "./index.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+
+
 const DEFAULT_TOOLTIP = {
   fr: "Informations Covid-19",
   en: "Covid-19 Information"
 };
-const DEFAULT_STYLES = {
-  "--background-color": "#cc0900",
-  "--color": "#fff",
-  "--z-index": 5
-};
-const TAG_TRIGGER = "covid-link";
-const COVID_PAGE = {
-  fr: "https://www.esf.net/informations-coronavirus/",
-  en: "https://www.esf-en.net/informations-coronavirus/"
-};
 
-const cartWords = ["/cart", "/panier", "/carrello", "/cesta", "/cistella", "/mandje", "/korzina"];
 const CovidLink = ({
   lang,
   site,
@@ -35,82 +17,9 @@ const CovidLink = ({
   openInPopup,
   hideFixedButton
 }) => {
-  const [loaded, setLoaded] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-  const [content, setContent] = React.useState(null);
-  const Tag = hrefs && !openInPopup ? "a" : "button";
-  const href = hrefs?.[lang];
-  const hrefAttribute = !openInPopup ? href : undefined;
-  const tooltip = tooltips[lang] || tooltips.en;
-  const iframeSrc = COVID_PAGE[lang] || COVID_PAGE.en;
-  const styles = {
-    ...DEFAULT_STYLES,
-    ...customStyles
-  };
-  const fetchContent = React.useCallback(async () => {
-    const response = await fetch(`https://ublo.valraiso.net/api/zone?site=${site}&lang=${lang}&path=${href}&id=${zoneId}`);
-    const html = await response.text();
-    return html;
-  }, [href, lang, site, zoneId]);
-  const togglePopup = React.useCallback(async () => {
-    if (open) {
-      setOpen(false);
-      setContent(null);
-      return;
-    }
-    if (href && openInPopup) {
-      const html = await fetchContent();
-      setContent(html);
-    }
-    setOpen(true);
-  }, [fetchContent, href, open, openInPopup]);
-  const onClick = !hrefs || openInPopup ? togglePopup : undefined;
-  const onSectionClick = React.useCallback(e => {
-    if (!document.body.classList.contains("cms--editing")) {
-      e.preventDefault();
-      togglePopup();
-    }
-  }, [togglePopup]);
-  const init = React.useCallback(sections => {
-    sections.forEach(section => section.addEventListener("click", onSectionClick));
-  }, [onSectionClick]);
-  const cleanup = React.useCallback(sections => {
-    sections.forEach(section => section.removeEventListener("click", onSectionClick));
-  }, [onSectionClick]);
-  React.useEffect(() => {
-  }, [init, cleanup, loaded]);
-  if (!loaded) return null;
-  const covidLink = _jsxs(_Fragment, {
-    children: [!hideFixedButton && _jsxs(Tag, {
-      id: id,
-      className: css.index,
-      style: styles,
-      "data-tooltip": tooltip,
-      href: hrefAttribute,
-      onClick: onClick,
-      children: [_jsx(MaskIcon, {
-        className: css.icon
-      }), _jsx(VaxPassIcon, {
-        className: css.icon
-      })]
-    }), open && _jsx(Popup, {
-      close: togglePopup,
-      html: content,
-      className: css.popup,
-      backdrop: true,
-      children: !content ? _jsx("div", {
-        className: css.loader,
-        style: {
-          "--background-color": styles["--background-color"]
-        },
-        children: _jsx("iframe", {
-          title: "Covid-19",
-          className: css.iframe,
-          src: iframeSrc
-        })
-      }) : undefined
-    })]
-  });
-  return ReactDOM.createPortal(covidLink, document.body);
+
+  return null;
+
 };
+
 export default CovidLink;

package/es/esf/components/covid-link/mask-icon.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VaxPassIcon = props => _jsxs("svg", {

package/es/esf/components/covid-link/vax-pass-icon.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VaxPassIcon = props => _jsxs("svg", {

package/es/esf/components/instructors-book/instructors-book.js

@@ -48,30 +48,30 @@ const InstructorsBook = ({
   const [instructorsCtx, setInstructorsCtx] = useState(instructorsContext);
   const [activity, setActivity] = useState();
   const [language, setLanguage] = useState();
+  const fetchNewContext = React.useCallback(async (activity, language) => {
+    const newContext = await fetchInstructorsContext(resort, lang, {
+      activity,
+      language
+    });
+    setInstructorsCtx(newContext);
+  }, [lang, resort]);
   useEffect(() => {
     const {
       activity,
       language
     } = propsFromQueryString();
     if (activity) {
-      sessionStorage.activity = activity;
+      window.sessionStorage.activity = activity;
     }
     if (language) {
-      sessionStorage.language = language;
+      window.sessionStorage.language = language;
     }
-    setActivity(sessionStorage.activity);
-    setLanguage(sessionStorage.language);
-    if ((sessionStorage.activity || sessionStorage.language) && !instructor) {
-      fetchNewContext(sessionStorage.activity, sessionStorage.language);
+    setActivity(window.sessionStorage.activity);
+    setLanguage(window.sessionStorage.language);
+    if ((window.sessionStorage.activity || window.sessionStorage.language) && !instructor) {
+      fetchNewContext(window.sessionStorage.activity, window.sessionStorage.language);
     }
-  }, []);
-  const fetchNewContext = async (activity, language) => {
-    const newContext = await fetchInstructorsContext(resort, lang, {
-      activity,
-      language
-    });
-    setInstructorsCtx(newContext);
-  };
+  }, [fetchNewContext, instructor]);
   const selectInstructor = uri => {
     return {
       href: path.concat(hasTrailingSlash(path) ? "" : "/").concat(uri)
@@ -83,7 +83,7 @@ const InstructorsBook = ({
     };
   };
   const selectFilter = async (filter, value) => {
-    sessionStorage[filter] = value;
+    window.sessionStorage[filter] = value;
     if (filter === "activity") {
       setActivity(value);
       await fetchNewContext(value, language);

package/es/esf/components/instructors-book/list.js

@@ -165,7 +165,7 @@ const List = ({
           })
         })]
       })]
-    }, uri ? uri : `instructor-${index}`);
+    }, uri || `instructor-${index}`);
   };
   return _jsxs("div", {
     className: "instructors-book-list",

package/es/esf/components/instructors-book/messages.js

@@ -36,7 +36,7 @@ const getMessage = lang => {
   if (messages[lang] !== undefined) {
     return messages[lang];
   } else {
-    return messages["en"];
+    return messages.en;
   }
 };
 export default getMessage;

package/es/esf/components/magic-box/magic-box.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+declare type Stay = {
+    from: string;
+    to: string;
+};
+declare type Props = {
+    stay?: Stay;
+    cartUrl: string;
+    channel: "ESF" | "MSEM";
+    className?: string;
+    alignContent?: "left" | "center" | "right";
+    maxCPDuration?: number;
+    minDays?: number;
+    maxDays?: number;
+    children?: React.ReactNode;
+};
+declare const _default: React.MemoExoticComponent<({ stay, cartUrl, channel, className, alignContent, maxCPDuration, minDays, maxDays, children, }: Props) => JSX.Element>;
+export default _default;
+//# sourceMappingURL=magic-box.d.ts.map

package/es/esf/components/magic-box/magic-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-box.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/magic-box/magic-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,aAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;;AA6HF,wBAAoC"}

package/es/esf/components/magic-box/magic-box.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import classnames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
@@ -6,119 +7,66 @@ import * as Icons from "dt-design-system/es/icons";
 import Filters from "./filters";
 import Booking from "./booking";
 import { message } from "./messages";
-import { fetchFilters, fetchWelcome } from "./services/api";
+import * as API from "./services/api";
 import css from "./magic-box.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const MagicBox = ({
-  stay,
-  cartUrl,
-  channel = "ESF",
-  className,
-  alignContent,
-  maxCPDuration,
-  minDays = 0,
-  children
-}) => {
-  const [filters, setFilters] = React.useState();
-  const [values, setValues] = React.useState();
-  const [currentStep, setCurrentStep] = React.useState(0);
-  const {
-    lang,
-    config
-  } = useUbloContext();
-  const {
-    resort
-  } = config;
-  const validate = React.useCallback(() => {
-    let valid = true;
-    if (stay && filters && values) {
-      Object.keys(values).forEach(key => {
-        if (values[key] === "") valid = false;
-      });
-    } else {
-      valid = false;
-    }
-    return valid;
-  }, [filters, stay, values]);
-  const isValid = validate();
-  const refreshFilters = React.useCallback(async (filters, activities) => {
-    const {
-      from: stayFrom,
-      to: stayTo
-    } = stay;
-    const welcomeResult = await fetchWelcome({
-      lang,
-      resort,
-      stayFrom,
-      stayTo,
-      preview: true
-    });
-    const {
-      season: currentSeason,
-      availableSeasons
-    } = welcomeResult;
-    const season = currentSeason || availableSeasons[0] || "2022";
-    const filtersResult = await fetchFilters({
-      lang,
-      resort,
-      season,
-      stayFrom,
-      stayTo,
-      filters,
-      activities
-    });
-    const newFilters = Object.keys(filtersResult.filters).reduce((acc, key) => {
-      const filter = filtersResult.filters[key];
-      const values = key !== "days" ? filter : filter.filter(item => item.value >= minDays);
-      return {
-        ...acc,
-        [key]: values
-      };
-    }, {});
-    setFilters(newFilters);
-    const defaultValues = Object.keys(newFilters).reduce((acc, key) => ({
-      ...acc,
-      [key]: ""
-    }), {});
-    setValues(defaultValues);
-  }, [lang, minDays, resort, stay]);
-  React.useEffect(() => {
-    if (stay?.from && stay.to) {
-      refreshFilters();
-      setCurrentStep(0);
-    }
-  }, [refreshFilters, stay?.from, stay?.to]);
-  const showFilter = stay && filters && values;
-  const classes = classnames(css.root, className);
-  return _jsx("div", {
-    className: classes,
-    "data-align": alignContent,
-    children: _jsxs("div", {
-      className: css.top,
-      children: [children, currentStep === 0 && _jsxs(_Fragment, {
-        children: [!filters && _jsx("div", {
-          className: css.loader
-        }), showFilter && _jsx(Filters, {
-          filters: filters,
-          values: values,
-          setValues: setValues
-        }), _jsxs(Button, {
-          className: css.confirm,
-          onClick: () => setCurrentStep(1),
-          disabled: !isValid,
-          children: [message(lang, "confirm"), _jsx(Icons.Search, {})]
-        })]
-      }), currentStep === 1 && _jsx(Booking, {
-        stay: stay,
-        cartUrl: cartUrl,
-        channel: channel,
-        values: values,
-        maxCPDuration: maxCPDuration,
-        setCurrentStep: setCurrentStep
-      })]
-    })
-  });
+const MagicBox = ({ stay, cartUrl, channel = "ESF", className, alignContent, maxCPDuration, minDays = 0, maxDays = Infinity, children, }) => {
+    const [filters, setFilters] = React.useState();
+    const [values, setValues] = React.useState();
+    const [currentStep, setCurrentStep] = React.useState(0);
+    const { lang, config } = useUbloContext();
+    const { resort } = config;
+    const validate = React.useCallback(() => {
+        let valid = true;
+        if (stay && filters && values) {
+            Object.keys(values).forEach((key) => {
+                if (values[key] === "")
+                    valid = false;
+            });
+        }
+        else {
+            valid = false;
+        }
+        return valid;
+    }, [filters, stay, values]);
+    const isValid = validate();
+    const refreshFilters = React.useCallback(async () => {
+        if (stay) {
+            const { from: stayFrom, to: stayTo } = stay;
+            const welcomeResult = await API.fetchWelcome({
+                lang,
+                resort,
+                stayFrom,
+                stayTo,
+            });
+            const { season: currentSeason, availableSeasons } = welcomeResult;
+            const season = currentSeason || availableSeasons[0] || "2022";
+            const filtersResult = await API.fetchFilters({
+                lang,
+                resort,
+                season,
+                stayFrom,
+                stayTo,
+            });
+            const newFilters = Object.keys(filtersResult.filters).reduce((acc, key) => {
+                const filter = filtersResult.filters[key];
+                const values = key !== "days"
+                    ? filter
+                    : filter.filter((item) => {
+                        return item.value >= minDays && item.value <= maxDays;
+                    });
+                return { ...acc, [key]: values };
+            }, {});
+            setFilters(newFilters);
+            const defaultValues = Object.keys(newFilters).reduce((acc, key) => ({ ...acc, [key]: "" }), {});
+            setValues(defaultValues);
+        }
+    }, [lang, maxDays, minDays, resort, stay]);
+    React.useEffect(() => {
+        refreshFilters();
+        setCurrentStep(0);
+    }, [refreshFilters, stay]);
+    const showFilter = stay && filters && values;
+    const classes = classnames(css.root, className);
+    return (_jsx("div", { className: classes, "data-align": alignContent, children: _jsxs("div", { className: css.top, children: [children, currentStep === 0 && (_jsxs(_Fragment, { children: [!filters && _jsx("div", { className: css.loader }), showFilter && (_jsx(Filters, { filters: filters, values: values, setValues: setValues })), _jsxs(Button, { className: css.confirm, onClick: () => setCurrentStep(1), disabled: !isValid, children: [message(lang, "confirm"), _jsx(Icons.Search, {})] })] })), currentStep === 1 && (_jsx(Booking, { stay: stay, cartUrl: cartUrl, channel: channel, values: values, maxCPDuration: maxCPDuration, setCurrentStep: setCurrentStep }))] }) }));
 };
-export default React.memo(MagicBox);
+export default React.memo(MagicBox);

package/es/esf/components/magic-box/services/api.js

@@ -18,11 +18,8 @@ export const fetchFilters = async ({
   stayFrom,
   stayTo,
   kinds = ["CP"],
-  engagement = true,
-  filters,
-  activities
+  engagement = true
 }) => {
-  const selectedActivities = activities ? new Array(activities) : undefined;
   return Fetcher.post(`${velApi}/filters`, {
     lang,
     resort,
@@ -30,8 +27,6 @@ export const fetchFilters = async ({
     stayFrom,
     stayTo,
     kinds,
-    engagement,
-    filters,
-    activities: selectedActivities
+    engagement
   });
 };

package/es/esf/components/period-picker/services/events.js

@@ -1,5 +1,5 @@
 export const fire = (domain, name, detail = {}) => {
-  const event = new CustomEvent(name, {
+  const event = new window.CustomEvent(name, {
     detail,
     bubbles: true
   });

package/es/esf/components/reviews.js

@@ -19,7 +19,7 @@ const Reviews = ({
       });
     };
     resort && setTimeout(run, 3000);
-  }, [resort, reviewsLang]);
+  }, [resort, reviewsLang, selector]);
   return _jsx("div", {
     id: selector
   });

package/es/esf/components/village-maps/index.js

@@ -23,9 +23,9 @@ const BottomDropdown = ({
       } = village;
       return _jsxs("a", {
         href: link,
-        className: "villages-map__bottom-dropdown-village"
-        ,
+        className: "villages-map__bottom-dropdown-village",
         target: "_blank",
+        rel: "noreferrer",
         children: [_jsx(ExternalLinkIcon, {
           className: "villages-map__bottom-dropdown-icon"
         }), name]

package/es/esf/components/week-picker/index.js

@@ -74,10 +74,10 @@ const WeekPicker = ({
     "week-picker--editing": !mustFilterSections
   });
   const selectWeek = useCallback((week, force = false) => {
-    const hasCart = sessionStorage.cartId !== undefined;
+    const hasCart = window.sessionStorage.cartId !== undefined;
     if (force || !hasCart) {
       if (previous.current !== undefined && previous.current !== null && previous.current !== week) {
-        sessionStorage.removeItem("cartId");
+        window.sessionStorage.removeItem("cartId");
       }
       setWarn(-1);
       setSelected(week);
@@ -90,36 +90,37 @@ const WeekPicker = ({
     } else {
       setWarn(week);
     }
-  }, [mustFilterSections]);
+  },
+  [mustFilterSections]);
   useEffect(() => {
     if (!mustFilterSections) {
       removeSectionFilters();
     }
   }, [mustFilterSections]);
   useEffect(() => {
-    const stored = sessionStorage.getItem(WEEK_STORAGE);
+    const stored = window.sessionStorage.getItem(WEEK_STORAGE);
     selectWeek(stored !== null ? Number(stored) : null, true);
     setBrowser(true);
   }, [selectWeek]);
   useEffect(() => {
     if (selected !== null && selected !== undefined) {
-      const stored = sessionStorage.getItem(WEEK_STORAGE);
+      const stored = window.sessionStorage.getItem(WEEK_STORAGE);
       const storedSelected = stored !== null ? Number(stored) : null;
       if (storedSelected !== selected) {
-        sessionStorage.setItem(WEEK_STORAGE, selected);
+        window.sessionStorage.setItem(WEEK_STORAGE, selected);
         const startDate = weekToDate(selected, endWeek, forceSeasonSwitch);
         const endDate = weekToDate(selected + 1, endWeek, forceSeasonSwitch);
         const range = {
           from: formatDate(startDate),
           to: formatDate(endDate)
         };
-        sessionStorage.stay = JSON.stringify(range);
-        sessionStorage.Stay = JSON.stringify(range);
+        window.sessionStorage.stay = JSON.stringify(range);
+        window.sessionStorage.Stay = JSON.stringify(range);
         if (typeof onChange === "function") {
           onChange(range);
         }
         if (!noRoughValidation) {
-          sessionStorage.roughStay = true;
+          window.sessionStorage.roughStay = true;
         }
       }
     }

package/es/esf/components/week-picker/messages.js

@@ -28,7 +28,7 @@ const getMessage = (lang, messages = locales) => {
   if (messages[lang] !== undefined) {
     return messages[lang];
   } else {
-    return messages["en"];
+    return messages.en;
   }
 };
 export default getMessage;

package/es/esf/components/week-picker-2/index.js

@@ -74,10 +74,10 @@ const WeekPicker = ({
     "week-picker--editing": !mustFilterSections
   });
   const selectWeek = useCallback((week, force = false) => {
-    const hasCart = sessionStorage.cartId !== undefined;
+    const hasCart = window.sessionStorage.cartId !== undefined;
     if (force || !hasCart) {
       if (previous.current !== undefined && previous.current !== null && previous.current !== week) {
-        sessionStorage.removeItem("cartId");
+        window.sessionStorage.removeItem("cartId");
       }
       setWarn(-1);
       setSelected(week);
@@ -90,36 +90,37 @@ const WeekPicker = ({
     } else {
       setWarn(week);
     }
-  }, [mustFilterSections]);
+  },
+  [mustFilterSections]);
   useEffect(() => {
     if (!mustFilterSections) {
       removeSectionFilters();
     }
   }, [mustFilterSections]);
   useEffect(() => {
-    const stored = sessionStorage.getItem(WEEK_STORAGE);
+    const stored = window.sessionStorage.getItem(WEEK_STORAGE);
     selectWeek(stored !== null ? Number(stored) : null, true);
     setBrowser(true);
   }, [selectWeek]);
   useEffect(() => {
     if (selected !== null && selected !== undefined) {
-      const stored = sessionStorage.getItem(WEEK_STORAGE);
+      const stored = window.sessionStorage.getItem(WEEK_STORAGE);
       const storedSelected = stored !== null ? Number(stored) : null;
       if (storedSelected !== selected) {
-        sessionStorage.setItem(WEEK_STORAGE, selected);
+        window.sessionStorage.setItem(WEEK_STORAGE, selected);
         const startDate = weekToDate(selected, endWeek, forceSeasonSwitch);
         const endDate = weekToDate(selected + 1, endWeek, forceSeasonSwitch);
         const range = {
           from: formatDate(startDate),
           to: formatDate(endDate)
         };
-        sessionStorage.stay = JSON.stringify(range);
-        sessionStorage.Stay = JSON.stringify(range);
+        window.sessionStorage.stay = JSON.stringify(range);
+        window.sessionStorage.Stay = JSON.stringify(range);
         if (typeof onChange === "function") {
           onChange(range);
         }
         if (!noRoughValidation) {
-          sessionStorage.roughStay = true;
+          window.sessionStorage.roughStay = true;
         }
       }
     }

package/es/esf/components/week-picker-2/messages.js

@@ -21,5 +21,5 @@ const locales = {
     "week-picker-cancel": "Annuleren"
   }
 };
-const getMessage = (lang, messages = locales) => messages[lang] || messages["en"];
+const getMessage = (lang, messages = locales) => messages[lang] || messages.en;
 export default getMessage;

package/es/esf/hooks/use-booking-links.js

@@ -40,6 +40,6 @@ const useBookingLinks = (cart, multipleVillages, setupCallback, channel) => {
       setupCallback?.();
     };
     run();
-  }, [bookingLang, breadcrumb, cart, hasLangPrefix, multipleVillages, setupCallback]);
+  }, [bookingLang, breadcrumb, cart, channel, hasLangPrefix, multipleVillages, setupCallback]);
 };
 export default useBookingLinks;

package/es/esf/hooks/use-reviews.js

@@ -20,6 +20,6 @@ const useReviews = (lang, resort, containerId = "msem-reviews", preventInit) =>
       });
     };
     !preventInit && reviews && setTimeout(run, 3000);
-  }, [containerId, language, resort, reviews]);
+  }, [containerId, language, preventInit, resort, reviews]);
 };
 export default useReviews;

package/es/esf/hooks/use-season-products.js

@@ -83,6 +83,6 @@ const useSeasonProducts = menuPath => {
         }
       }
     }
-  }, [seasonProductsPage, updateStay]);
+  }, [isEnabled, seasonProductsPage, updateStay]);
 };
 export default useSeasonProducts;

package/es/lbm/components/msem-linker/actions.js

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as Icons from "dt-design-system/es/icons";
 import MseMLogo from "./msem-logo";
 import { CONNECTED, EDITING } from "./index";
-import * as UI from "./services/ui";
 import styles from "./actions.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/es/lbm/components/msem-linker/editor/ski-pass.js

@@ -75,7 +75,6 @@ const SkiPass = ({
   const [filters, setFilters] = React.useState();
   const [data, setData] = React.useState(getDefaultData(config));
   const [presetUrl, setPresetUrl] = React.useState("");
-  console.log(config);
   const resortData = resorts?.find(r => {
     return r.resort === parseInt(selectedResort);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "next": "^12.0.0",
@@ -29,6 +29,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-react": "^7.31.7",
@@ -46,7 +47,8 @@
     "build": "babel src -x '.js,.ts,.tsx' -d es && tsc",
     "postbuild": "cpx 'src/**/*.{json,css}' es",
     "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d ./es -w & cpx 'src/**/*.{json,css}' ./es -w"
+    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d es -w & cpx './src/**/*.{json,css}' es -w",
+    "lint": "eslint 'src/**/*.{js, ts, tsx}'"
   },
   "packageManager": "yarn@1.22.18",
   "files": [

package/es/common/components/unsupported-browser.js

@@ -1,150 +0,0 @@
-import * as React from "react";
-import classnames from "classnames";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const locales = {
-  fr: {
-    download: "Télécharger",
-    updateOS: "Mettre à jour le système",
-    title: "Désolé, nous ne supportons plus ce navigateur 😔",
-    msg1: "Vous voyez ce message parce que nous avons détecté que votre navigateur n'est plus pris en charge.",
-    msg2: "Nous vous recommandons vivement de le mettre à jour car il pose des problèmes de sécurité.",
-    reco: "Voici les possibilités que nous vous recommandons :"
-  },
-  en: {
-    download: "Download",
-    updateOS: "Update the system",
-    title: "Sorry, we don't support this browser anymore 😔",
-    msg1: "You are seeing this message because we have detected that your browser is no longer supported",
-    msg2: "We strongly recommend that you update your browser because it has security issues.",
-    reco: "Here are the features we recommend:"
-  }
-};
-const browsers = {
-  chrome: {
-    icon: "chrome",
-    message: "download",
-    link: "https://www.google.com/chrome/"
-  },
-  firefox: {
-    icon: "firefox",
-    message: "download",
-    link: "https://www.mozilla.org/fr/firefox/all/"
-  },
-  edge: {
-    icon: "edge",
-    message: "download",
-    link: "https://www.microsoft.com/edge"
-  },
-  safari: {
-    icon: "safari",
-    message: "updateOS",
-    link: "https://support.apple.com/HT201475"
-  },
-  safariMobile: {
-    icon: "safari",
-    message: "updateOS",
-    link: "https://support.apple.com/HT204204"
-  },
-  chromeMobile: {
-    icon: "chrome",
-    message: "download",
-    link: "https://play.google.com/store/apps/details?id=com.android.chrome"
-  }
-};
-const platforms = {
-  windows: [browsers.chrome, browsers.firefox, browsers.edge],
-  mac: [browsers.chrome, browsers.firefox, browsers.safari],
-  iOS: [browsers.safariMobile],
-  android: [browsers.chromeMobile],
-  other: [browsers.chrome, browsers.firefox]
-};
-const isIOS = () => {
-  const iOSDevices = ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"];
-  return iOSDevices.indexOf(navigator.platform) !== -1 || navigator.userAgent.indexOf("Mac") !== -1 && "ontouchend" in document;
-};
-const isAndroid = () => {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf("android") > -1;
-};
-const isWindows = () => {
-  return navigator.platform.toUpperCase().indexOf("WIN") !== -1;
-};
-const isMac = () => {
-  return navigator.platform.toUpperCase().indexOf("MAC") !== -1;
-};
-const Browser = ({
-  icon,
-  message,
-  link,
-  messages
-}) => _jsxs("a", {
-  className: "unsupported-browser__browser",
-  href: link,
-  target: "_blank",
-  rel: "noopener noreferrer",
-  children: [_jsx("img", {
-    className: "unsupported-browser__browser-icon",
-    src: `/static/images/browsers/${icon}.svg`,
-    width: "64",
-    height: "64",
-    alt: ""
-  }), _jsx("span", {
-    className: "unsupported-browser__browser-name",
-    children: icon
-  }), _jsx("span", {
-    className: "unsupported-browser__browser-action",
-    children: messages[message]
-  })]
-});
-const UnsupportedBrowser = ({
-  options
-}) => {
-  const platform = isIOS() ? "iOS" : isAndroid() ? "android" : isWindows() ? "windows" : isMac() ? "mac" : "other";
-  const lang = options.lang === "en" ? "en" : "fr";
-  const messages = locales[lang];
-  const backdropClasses = classnames("unsupported-browser", {
-    "unsupported-browser--grounded": options.groundedTo !== undefined
-  });
-  return _jsx("div", {
-    className: backdropClasses,
-    children: _jsxs("div", {
-      className: "unsupported-browser__unsupported",
-      children: [_jsx("div", {
-        className: "unsupported-browser__title",
-        children: messages.title
-      }), _jsxs("div", {
-        className: "unsupported-browser__messages",
-        children: [_jsx("p", {
-          className: "unsupported-browser__message",
-          children: messages.msg1
-        }), _jsx("p", {
-          className: "unsupported-browser__message",
-          children: messages.msg2
-        })]
-      }), _jsx("div", {
-        className: "unsupported-browser__reco",
-        children: messages.reco
-      }), _jsx("div", {
-        className: "unsupported-browser__browsers",
-        children: platforms[platform].map(browser => _jsx(Browser, {
-          messages: messages,
-          ...browser
-        }, browser.icon))
-      })]
-    })
-  });
-};
-export const isBrowserSupported = () => {
-  const supportCssCustomProps = window.CSS && CSS.supports("color", "var(--primary)");
-  if (!supportCssCustomProps) return false;
-  const apple = navigator.vendor.toLocaleLowerCase().indexOf("apple") !== -1;
-  if (!apple) return true;
-  try {
-    new Function('import("")');
-    return true;
-  } catch (err) {
-    return false;
-  }
-};
-export default UnsupportedBrowser;