ublo-lib 1.0.0

package/es/common/components/video-player/video-player.js

@@ -0,0 +1,111 @@
+import * as React from "react";
+import classnames from "classnames";
+import ReactPlayer from "react-player/lazy";
+import Controls from "./controls";
+import * as Utils from "./utils";
+import styles from "./player.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Player = ({
+  url,
+  thumb,
+  forcePlay,
+  hideCustomControls,
+  ...props
+}) => {
+  const containerRef = React.useRef();
+  const playRef = React.useRef();
+  const [mounted, setMounted] = React.useState(false);
+  const [playing, setPlaying] = React.useState(false);
+  const [started, setStarted] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const [loadedAmount, setLoadedAmount] = React.useState(0);
+  const [newProgress, setNewProgress] = React.useState();
+  const [duration, setDuration] = React.useState(0);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [fullScreen, setFullScreen] = React.useState();
+  const [muted, setMuted] = React.useState(true);
+
+  const tick = e => {
+    const player = playRef.current;
+    const {
+      played,
+      playedSeconds,
+      loaded
+    } = e;
+    if (!player) return;
+    setProgress(played);
+    setLoadedAmount(loaded);
+    setCurrentTime(playedSeconds);
+    setDuration(player.getDuration());
+  };
+
+  const updatePlaying = () => {
+    setPlaying(!playing);
+  };
+
+  const startVideo = () => setStarted(true);
+
+  const endVideo = () => setPlaying(false);
+
+  React.useEffect(() => {
+    if (!mounted) {
+      setMounted(true);
+    }
+  }, [mounted]);
+  React.useEffect(() => {
+    const player = playRef.current;
+    if (!player) return;
+    player.seekTo(newProgress);
+  }, [newProgress]);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (fullScreen === undefined || !container) return;
+    fullScreen ? Utils.enterFullScreen(container) : Utils.exitFullScreen();
+  }, [fullScreen]);
+  React.useEffect(() => {
+    setPlaying(forcePlay);
+    setStarted(forcePlay);
+  }, [forcePlay]);
+  const classes = classnames(styles.player, {
+    [styles.playerStarted]: started,
+    [styles.playerPlaying]: playing
+  });
+  if (!mounted) return null;
+  return _jsxs("div", {
+    ref: containerRef,
+    className: classes,
+    children: [_jsx(ReactPlayer, {
+      ref: playRef,
+      light: forcePlay ? false : thumb,
+      url: url,
+      playing: playing,
+      muted: muted,
+      onClick: updatePlaying,
+      onStart: startVideo,
+      onProgress: tick,
+      onEnded: endVideo,
+      progressInterval: 160,
+      width: "100%",
+      height: "100%",
+      className: styles.playerInner,
+      ...props
+    }), !hideCustomControls && _jsx(Controls, {
+      started: started,
+      playing: playing,
+      updatePlaying: updatePlaying,
+      progress: progress,
+      loadedAmount: loadedAmount,
+      setNewProgress: setNewProgress,
+      duration: duration,
+      currentTime: currentTime,
+      fullScreen: fullScreen,
+      setFullScreen: setFullScreen,
+      muted: muted,
+      setMuted: setMuted
+    })]
+  });
+};
+
+export default React.memo(Player);

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+
+const buildClass = className => `${className}--opened`;
+
+const useFaq = (selector = ".faq-block", refresh) => {
+  const [blocks, setBlocks] = React.useState([]);
+  const {
+    cmsMode
+  } = useUbloContext();
+  const clicked = React.useCallback((clickedBlock, blocks) => () => {
+    if (cmsMode) return;
+    const openedClass = buildClass(clickedBlock.classList[0]);
+    blocks.forEach(block => {
+      const {
+        classList
+      } = block;
+      block !== clickedBlock || block.classList.contains(openedClass) ? classList.remove(openedClass) : classList.add(openedClass);
+    });
+  }, [cmsMode]);
+  const init = React.useCallback((block, blocks) => {
+    block.clicked = clicked(block, blocks);
+    block.addEventListener("click", block.clicked);
+  }, [clicked]);
+  const cleanup = React.useCallback(block => {
+    block.removeEventListener("click", block.clicked);
+    const openedClass = buildClass(block.classList[0]);
+    block.classList.remove(openedClass);
+  }, []);
+  React.useEffect(() => {
+    if (cmsMode === undefined) {
+      setTimeout(() => {
+        const blocks = Array.from(document.querySelectorAll(selector));
+        setBlocks(blocks);
+      });
+    }
+  }, [cmsMode, selector, refresh]);
+  React.useEffect(() => {
+    blocks.forEach(block => init(block, blocks));
+    return () => blocks.forEach(cleanup);
+  }, [blocks, cleanup, init]);
+};
+
+export default useFaq;

package/es/common/hooks/use-in-view.js

@@ -0,0 +1,73 @@
+import { useEffect, useState, useCallback } from "react";
+
+const ratio = steps => Array.from({
+  length: steps + 1
+}).map((_, i) => i / steps);
+
+const buildClass = className => `${className}--in-view`;
+
+const useInView = (ref, cmsMode, targetedClass, repeat = true, intersectionValue = 0.2) => {
+  const [compatible, setCompatible] = useState(false);
+  const options = {
+    rootMargin: "0px",
+    threshold: ratio(100)
+  };
+  const callback = useCallback(entries => {
+    entries.forEach(entry => {
+      const {
+        intersectionRatio,
+        target
+      } = entry;
+      if (!target || !target.classList[0]) return;
+      const inViewClass = buildClass(target.classList[0]);
+
+      if (intersectionRatio !== 0) {
+        if (repeat) {
+          intersectionRatio <= intersectionValue ? target.classList.remove(inViewClass) : target.classList.add(inViewClass);
+        } else {
+          if (intersectionRatio >= intersectionValue) {
+            target.classList.add(inViewClass);
+          }
+        }
+      }
+    });
+  }, [intersectionValue, repeat]);
+  useEffect(() => {
+    setCompatible(typeof IntersectionObserver !== "undefined");
+  }, []);
+  useEffect(() => {
+    if (ref.current === undefined) return;
+    const targets = targetedClass !== undefined ? Array.from(ref.current.querySelectorAll(targetedClass)) : [ref.current];
+    targets.forEach(target => {
+      const inViewClass = buildClass(target.classList[0]);
+      target.classList.remove(inViewClass);
+    });
+
+    if (cmsMode !== "editing" && cmsMode !== "info" && cmsMode !== "connected") {
+      if (!compatible) {
+        return targets.forEach(target => {
+          const inViewClass = buildClass(target.classList[0]);
+          target.classList.add(inViewClass);
+        });
+      }
+
+      const observer = new IntersectionObserver(callback, options);
+
+      const observe = () => targets.forEach(target => observer?.observe(target));
+
+      const unobserve = () => {
+        targets.forEach(target => {
+          if (!target || !target.classList[0]) return;
+          const inViewClass = buildClass(target.classList[0]);
+          target.classList.remove(inViewClass);
+          observer.disconnect();
+        });
+      };
+
+      observe();
+      return () => unobserve();
+    }
+  }, [cmsMode, compatible, options, ref, repeat, targetedClass, callback]);
+};
+
+export default useInView;

package/es/common/hooks/use-injected-cms-markup.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+
+const findAllByKey = (obj, keyToFind) => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    return key === keyToFind ? acc.concat(value) : typeof value === "object" ? acc.concat(findAllByKey(value, keyToFind)) : acc;
+  }, []);
+};
+
+const useInjectedCmsMarkup = (entries, isReady) => {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const injectCmsMarkup = React.useCallback(async () => {
+    await window.Cms.register();
+    const formats = window.Cms.sectionClasses;
+    entries.forEach(entry => {
+      const {
+        key,
+        value
+      } = entry;
+      const isArray = Array.isArray(value);
+      const targets = findAllByKey(formats, key);
+      targets.forEach(target => {
+        if (!target?.markup) return;
+
+        if (isArray) {
+          const formatedRows = value.map(v => {
+            return {
+              name: v,
+              markup: `<tr><td>${v}</td></tr>`
+            };
+          });
+          const [anchor] = target.markup;
+          target.markup = anchor ? [anchor, ...formatedRows] : formatedRows;
+        } else {
+          target.markup = value;
+        }
+      });
+    });
+    await window.Cms.analyse();
+  }, [entries]);
+  React.useEffect(() => {
+    if (isReady && cmsMode === "connected") {
+      injectCmsMarkup();
+    }
+  }, [cmsMode, injectCmsMarkup, isReady]);
+};
+
+export default useInjectedCmsMarkup;

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

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import PackagesSelector from "../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;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  margin: 0px auto;
+  padding: 15px;
+  color: rgb(255, 255, 255);
+  font-family: "Open Sans";
+  text-transform: uppercase;
+  font-weight: 700;
+  background-color: var(--cms-primary-color, #004cc2);
+  border-radius: 8px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transform: translateX(-50%);
+`;
+
+const usePackages = (defaultPopupContent, setPopupContent, cartUrl, selector = "[data-package], .package-lodging__container, .banner-discount") => {
+  const {
+    cmsMode,
+    config
+  } = useUbloContext();
+  const {
+    channel,
+    resort
+  } = config;
+  const onPackageSelection = React.useCallback(link => id => {
+    if (!link || !id) return;
+    link.setAttribute("data-id", id);
+    setPopupContent(defaultPopupContent);
+  }, [defaultPopupContent, setPopupContent]);
+  const onButtonClick = React.useCallback(e => {
+    e.stopPropagation();
+    const link = e.target.closest(selector);
+    const id = link.getAttribute("data-id");
+    setPopupContent({
+      title: "Associer un package",
+      content: _jsx(PackagesSelector, {
+        onSubmit: onPackageSelection(link),
+        resort: resort,
+        selected: id
+      })
+    });
+  }, [onPackageSelection, resort, selector, setPopupContent]);
+  const toggleEditButton = React.useCallback(section => {
+    const button = section.querySelector(".package-edit-button");
+
+    if (cmsMode === "editing" && !button) {
+      const newButton = Object.assign(document.createElement("button"), {
+        className: "package-edit-button",
+        innerHTML: "Associer un package",
+        style: buttonStyles
+      });
+      section.appendChild(newButton);
+      newButton.addEventListener("click", onButtonClick);
+    } else {
+      button && button.removeEventListener("click", onButtonClick);
+      button && button.remove();
+    }
+  }, [cmsMode, onButtonClick]);
+  const onPackageClick = React.useCallback(async e => {
+    if (cmsMode === "editing") return e.preventDefault();
+    const target = e.target.closest(selector);
+    const id = target.getAttribute("data-id");
+    if (!id || id === "") return;
+    e.preventDefault();
+    const packageId = parseInt(id);
+    const options = {
+      resort,
+      channel,
+      verticalMargin: 100,
+      merchant: "",
+      packageId,
+      catalog: "PUBLIC",
+      preview,
+      theme: "/theme.css",
+      cartUrl
+    };
+    await openMseM("widgetPackage", options);
+  }, [cartUrl, cmsMode, resort, selector]);
+  const callback = React.useCallback(e => {
+    const {
+      section: newSection
+    } = e.detail;
+    const link = newSection.querySelector(selector);
+
+    if (link) {
+      toggleEditButton(link);
+    }
+  }, [selector, toggleEditButton]);
+  const init = React.useCallback(section => {
+    const zone = section.closest(".cms");
+    zone.addEventListener("ubloSectionCreated", callback);
+    section.addEventListener("click", onPackageClick);
+  }, [callback, onPackageClick]);
+  const cleanup = React.useCallback(section => {
+    const zone = section.closest(".cms");
+    zone.removeEventListener("ubloSectionCreated", callback);
+    section.removeEventListener("click", onPackageClick);
+  }, [callback, onPackageClick]);
+  React.useEffect(() => {
+    const sections = Array.from(document.querySelectorAll(selector));
+    sections.forEach(toggleEditButton);
+    sections.forEach(init);
+    return () => {
+      sections.forEach(cleanup);
+      sections.forEach(toggleEditButton);
+    };
+  }, [cleanup, cmsMode, init, selector, toggleEditButton]);
+};
+
+export default usePackages;

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

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+const SCROLL_UP = "up";
+const SCROLL_DOWN = "down";
+
+const useScrollDirection = ({
+  initialDirection,
+  thresholdPixels,
+  off
+} = {}) => {
+  const [scrollDir, setScrollDir] = useState(initialDirection);
+  useEffect(() => {
+    const threshold = thresholdPixels || 0;
+    let lastScrollY = window.pageYOffset;
+    let ticking = false;
+
+    const updateScrollDir = () => {
+      const scrollY = window.pageYOffset;
+
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false;
+        return;
+      }
+
+      setScrollDir(scrollY > lastScrollY ? SCROLL_DOWN : SCROLL_UP);
+      lastScrollY = scrollY > 0 ? scrollY : 0;
+      ticking = false;
+    };
+
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDir);
+        ticking = true;
+      }
+    };
+
+    !off ? window.addEventListener("scroll", onScroll) : setScrollDir(initialDirection);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [initialDirection, thresholdPixels, off]);
+  return {
+    scrollDir
+  };
+};
+
+export default useScrollDirection;

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

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { isValidDate } from "../utils/dates";
+
+const useStay = () => {
+  const [stay, setStay] = useState();
+  useEffect(() => {
+    const params = new URLSearchParams(document.location.search);
+    const hasAllParams = params.has("from") && params.has("to");
+    let stayParams;
+
+    if (hasAllParams) {
+      const from = params.get("from");
+      const to = params.get("to");
+      const areParamsValid = isValidDate(from) && isValidDate(to);
+
+      if (areParamsValid) {
+        stayParams = {
+          from,
+          to
+        };
+        window.sessionStorage.setItem("stay", JSON.stringify(stayParams));
+        window.sessionStorage.setItem("Stay", JSON.stringify(stayParams));
+      }
+    }
+
+    const storedStay = window.sessionStorage.getItem("stay");
+    setStay(stayParams ? stayParams : storedStay ? JSON.parse(storedStay) : undefined);
+  }, []);
+  return [stay, setStay];
+};
+
+export default useStay;

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+const eventsToBind = {
+  document: ["scroll"],
+  window: ["resize", "orientationchange"]
+};
+
+const useSticky = () => {
+  const ref = React.useRef(null);
+  const [sticky, setSticky] = React.useState(false);
+  const observe = React.useCallback(() => {
+    const refPageOffset = ref.current.getBoundingClientRect().top;
+    const stickyOffset = parseInt(getComputedStyle(ref.current).top);
+    const stickyActive = refPageOffset <= stickyOffset;
+    setSticky(stickyActive && !sticky || stickyActive && sticky);
+  }, [sticky]);
+  const init = React.useCallback(() => {
+    Object.keys(eventsToBind).forEach(key => {
+      const events = eventsToBind[key];
+      const target = window[key];
+      events.forEach(event => target.addEventListener(event, observe));
+    });
+  }, [observe]);
+  const cleanup = React.useCallback(() => {
+    Object.keys(eventsToBind).forEach(key => {
+      const events = eventsToBind[key];
+      const target = window[key];
+      events.forEach(event => target.removeEventListener(event, observe));
+    });
+  }, [observe]);
+  React.useEffect(() => {
+    observe();
+    init();
+    return () => cleanup();
+  }, [cleanup, init, observe]);
+  return [ref, sticky];
+};
+
+export default useSticky;

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

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Plausible from "../plausible";
+import { loadJS } from "../utils/load-js";
+const preview = typeof window !== "undefined" && window.location.search.indexOf("preview") !== -1;
+
+const loadWigetMseM = async integration => {
+  const source = integration ? "https://widget-integration.msem.tech/static/js/widget-msem.js" : "https://widget.msem.tech/static/js/widget-msem.js";
+  await loadJS(source, "widget-msem");
+};
+
+const useTunnel = (cart, multipleVillages, channel = "ESF", integration) => {
+  const {
+    lang,
+    breadcrumb,
+    config
+  } = useUbloContext();
+  const {
+    path: cartUrl
+  } = cart;
+  const {
+    path: esfUrl
+  } = multipleVillages ? breadcrumb?.next : breadcrumb;
+  const widgetLang = lang === "fr" ? "fr" : "en";
+  useEffect(() => {
+    const run = async () => {
+      await loadWigetMseM(integration);
+
+      const open = () => window.MseM.tunnel({
+        inside: true,
+        resort: config.resort,
+        channel,
+        groundedTo: "#esfplus_container",
+        lang: widgetLang,
+        preview,
+        cartUrl,
+        esfUrl,
+        fullWidth: true,
+        analytics: Plausible.callback,
+        useAnalytics: true
+      });
+
+      window.MseM.onLoad(open);
+    };
+
+    run();
+  }, [cartUrl, channel, config.resort, esfUrl, lang, widgetLang]);
+};
+
+export default useTunnel;

package/es/common/hooks/use-window-sizes.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+const DEFAULT_SIZES = {
+  width: undefined,
+  height: undefined
+};
+
+const useWindowSizes = () => {
+  const [windowSizes, setWindowSizes] = React.useState(DEFAULT_SIZES);
+
+  const resized = () => {
+    setWindowSizes({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  };
+
+  React.useEffect(() => {
+    resized();
+    const isCompatible = typeof ResizeObserver !== "undefined";
+
+    if (isCompatible) {
+      const observer = new ResizeObserver(resized);
+      observer.observe(document.body);
+      return () => {
+        observer.unobserve(document.body);
+      };
+    } else {
+      window.addEventListener("resize", resized);
+      return () => {
+        window.removeEventListener("resize", resized);
+      };
+    }
+  }, []);
+  return windowSizes;
+};
+
+export default useWindowSizes;

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const extractYoutubeVideoID = url => {
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
+
+  if (match && match[7].length === 11) {
+    return match[7];
+  } else {
+    alert("Could not extract video ID.");
+  }
+};
+
+const useYoutubePopup = (selector, setPopupContent) => {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const openVideo = React.useCallback(e => {
+    e.preventDefault();
+    const link = e.target.closest("a")?.getAttribute("href")?.trim();
+    if (!link) return;
+    const code = extractYoutubeVideoID(link);
+    const url = `https://www.youtube.com/embed/${code}`;
+    setPopupContent({
+      content: _jsx("div", {
+        style: {
+          position: "relative",
+          width: 1200,
+          maxWidth: "100%",
+          paddingTop: "56.25%"
+        },
+        children: _jsx("iframe", {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%"
+          },
+          src: url,
+          frameBorder: "0",
+          allowFullScreen: true,
+          title: ""
+        })
+      }),
+      popupClassName: "iframe-video"
+    });
+  }, [setPopupContent]);
+  const init = React.useCallback(video => video.addEventListener("click", openVideo), [openVideo]);
+  const cleanup = React.useCallback(video => video.removeEventListener("click", openVideo), [openVideo]);
+  React.useEffect(() => {
+    if (cmsMode !== "editing") {
+      const videos = Array.from(document.querySelectorAll(selector));
+      videos.forEach(init);
+      return () => videos.forEach(cleanup);
+    }
+  }, [cleanup, cmsMode, init, selector]);
+};
+
+export default useYoutubePopup;