ublo-lib 1.2.4 → 1.3.0

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import * as React from "react";
 
 const ratio = steps => Array.from({
   length: steps + 1
@@ -6,13 +6,14 @@ const ratio = steps => Array.from({
 
 const buildClass = className => `${className}--in-view`;
 
+const options = {
+  rootMargin: "0px",
+  threshold: ratio(100)
+};
+
 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 => {
+  const [compatible, setCompatible] = React.useState(false);
+  const callback = React.useCallback(entries => {
     entries.forEach(entry => {
       const {
         intersectionRatio,
@@ -32,42 +33,44 @@ const useInView = (ref, cmsMode, targetedClass, repeat = true, intersectionValue
       }
     });
   }, [intersectionValue, repeat]);
-  useEffect(() => {
+  React.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 container = ref.current;
+    const targets = targetedClass !== undefined ? Array.from(container.querySelectorAll(targetedClass)) : [container];
 
-      const observer = new IntersectionObserver(callback, options);
+    if (container) {
+      if (!cmsMode) {
+        if (!compatible) {
+          targets.forEach(target => {
+            const inViewClass = buildClass(target.classList[0]);
+            target.classList.add(inViewClass);
+          });
+        } else {
+          targets.forEach(target => {
+            const inViewClass = buildClass(target.classList[0]);
+            target.classList.remove(inViewClass);
+          });
+          const observer = new IntersectionObserver(callback, options);
 
-      const observe = () => targets.forEach(target => observer?.observe(target));
+          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();
-        });
-      };
+          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();
+          observe();
+          return () => {
+            unobserve();
+          };
+        }
+      }
     }
-  }, [cmsMode, compatible, options, ref, repeat, targetedClass, callback]);
+  }, [callback, cmsMode, compatible, ref, targetedClass]);
 };
 
 export default useInView;

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

@@ -23,7 +23,7 @@ export const fetchFilters = async ({
   activities
 }) => {
   const selectedActivities = activities ? new Array(activities) : undefined;
-  return Fetcher.post(`${velApi}/new/vel3/filters`, {
+  return Fetcher.post(`${velApi}/filters`, {
     lang,
     resort,
     season,

package/es/esf/components/period-picker/controls.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./controls.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LEFT = 0;
+const RIGHT = 1;
+
+const Controls = ({
+  barRef,
+  distance
+}) => {
+  const scrollTo = direction => () => {
+    const bar = barRef.current;
+    if (!bar) return;
+    const currentScroll = bar.scrollLeft;
+
+    if (direction === LEFT) {
+      bar.scrollLeft = currentScroll - distance;
+    }
+
+    if (direction === RIGHT) {
+      bar.scrollLeft = currentScroll + distance;
+    }
+  };
+
+  return _jsxs("div", {
+    className: css.controls,
+    children: [_jsx("button", {
+      className: css.control,
+      onClick: scrollTo(LEFT),
+      "aria-label": "Previous",
+      children: _jsx(Icons.ChevronsLeft, {
+        className: css.icon
+      })
+    }), _jsx("button", {
+      className: css.control,
+      onClick: scrollTo(RIGHT),
+      "aria-label": "Next",
+      children: _jsx(Icons.ChevronsRight, {
+        className: css.icon
+      })
+    })]
+  });
+};
+
+export default Controls;

package/es/esf/components/period-picker/controls.module.css

@@ -0,0 +1,36 @@
+.controls {
+  --control-size: 48px;
+
+  position: absolute;
+  top: calc(100% - var(--control-size) / 3);
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+  touch-action: none;
+}
+@media (min-width: 900px) {
+  .controls {
+    display: none;
+  }
+}
+
+.control {
+  flex: 0 0 var(--control-size);
+  height: var(--control-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ds-radius-100, 3px);
+  cursor: pointer;
+  pointer-events: auto;
+  touch-action: auto;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}

package/es/esf/components/period-picker/date-display.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import classnames from "classnames";
+import { motion } from "framer-motion";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Messages from "./messages";
+import * as Stay from "./services/stay";
+import * as Motions from "./services/motions";
+import css from "./date-display.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const DateDisplay = ({
+  className
+}) => {
+  const [stay, setStay] = React.useState();
+  const {
+    lang,
+    metadata
+  } = useUbloContext();
+  const classes = classnames(css.display, {
+    [className]: className
+  });
+  const getStoredStay = React.useCallback(e => {
+    const storedStay = window.sessionStorage.getItem("stay");
+
+    if (storedStay) {
+      const newStay = JSON.parse(storedStay);
+      setStay(newStay);
+    }
+  }, []);
+  const updateStay = React.useCallback(e => {
+    setStay(e.detail);
+  }, []);
+  React.useEffect(() => {
+    if (!metadata?.disableWeekpicker) {
+      getStoredStay();
+      window.addEventListener("msem-stay-changed", updateStay);
+      return () => {
+        window.removeEventListener("msem-stay-changed", updateStay);
+      };
+    }
+  }, [getStoredStay, metadata?.disableWeekpicker, updateStay]);
+  if (!stay || metadata?.disableWeekpicker) return null;
+  const formatedStay = Stay.formatStay(lang, stay);
+  return _jsxs("div", {
+    className: classes,
+    children: [Messages.get(lang, "offers"), " ", _jsx("span", {
+      className: css.dates,
+      children: formatedStay.split(" ").map((word, index) => _jsx(motion.span, {
+        className: css.word,
+        transition: {
+          delayChildren: index * 0.05,
+          staggerChildren: 0.05
+        },
+        initial: "hidden",
+        animate: "visible",
+        children: word.split("").map((letter, index) => _jsx(motion.span, {
+          className: css.letter,
+          variants: Motions.character,
+          children: letter
+        }, `${letter}-${index}`))
+      }, `${word}-${index}`))
+    })]
+  });
+};
+
+export default DateDisplay;

package/es/esf/components/period-picker/date-display.module.css

@@ -0,0 +1,18 @@
+.display {
+  max-width: 620px;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.dates {
+  color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+}
+
+.word {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.letter {
+  display: inline-block;
+}

package/es/esf/components/period-picker/days.js

@@ -0,0 +1,112 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Stay from "./services/stay";
+import * as Dates from "./services/dates";
+import css from "./days.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Day = ({
+  index,
+  day,
+  fullStay,
+  firstSelected,
+  updateSelection
+}) => {
+  const {
+    lang
+  } = useUbloContext();
+  const locale = Dates.locales[lang] || Dates.locales.en;
+  const isFirstDayOfStay = day.getTime() === fullStay[0]?.getTime();
+  const isLastDayOfStay = day.getTime() === fullStay[fullStay.length - 1].getTime();
+  const isInStay = fullStay.some(date => date.getTime() === day.getTime());
+  const isFirstSelected = day.getTime() === new Date(firstSelected).getTime();
+  const dayLabel = new Date(day).toLocaleDateString(locale, {
+    weekday: "short"
+  });
+  const dayNumber = new Date(day).toLocaleDateString(locale, {
+    day: "2-digit"
+  });
+  const prevDay = new Date(day);
+  prevDay.setDate(day.getDate() - 1);
+  const prevMonth = prevDay.getMonth();
+  const currMonth = day.getMonth();
+  const hasMonthChanged = prevMonth !== currMonth;
+  const showMonth = index === 0 || hasMonthChanged;
+  const formatedMonth = day.toLocaleString(locale, {
+    month: "short"
+  });
+  const classes = classnames(css.day, {
+    [css.firstSelected]: isFirstSelected,
+    [css.dayFirstInStay]: !firstSelected && isFirstDayOfStay,
+    [css.dayLastInStay]: !firstSelected && isLastDayOfStay,
+    [css.dayBoundary]: !firstSelected && (isFirstDayOfStay || isLastDayOfStay),
+    [css.dayInStay]: !firstSelected && isInStay
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsx("div", {
+      className: css.weekday,
+      children: dayLabel
+    }), _jsx("div", {
+      className: css.dayBottom,
+      children: _jsx("button", {
+        className: css.dayNumber,
+        onClick: updateSelection(day),
+        children: _jsx("span", {
+          className: css.dayNumberText,
+          children: dayNumber
+        })
+      })
+    }), showMonth && _jsx("span", {
+      className: css.month,
+      children: formatedMonth
+    })]
+  });
+};
+
+const Days = React.forwardRef(({
+  fullStay,
+  interval
+}, ref) => {
+  const [firstSelected, setFirstSelected] = React.useState();
+
+  const updateSelection = day => e => {
+    e.stopPropagation();
+
+    if (firstSelected) {
+      const isBefore = firstSelected.getTime() > day.getTime();
+      Stay.update({
+        from: Dates.format(isBefore ? day : firstSelected),
+        to: Dates.format(isBefore ? firstSelected : day)
+      });
+      cancelSelection();
+    } else {
+      setFirstSelected(day);
+    }
+  };
+
+  const cancelSelection = () => {
+    setFirstSelected(undefined);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("click", cancelSelection);
+    return () => {
+      window.removeEventListener("click", cancelSelection);
+    };
+  }, []);
+  return _jsx("div", {
+    ref: ref,
+    className: css.days,
+    children: interval.map((day, i) => _jsx(Day, {
+      index: i,
+      day: day,
+      fullStay: fullStay,
+      firstSelected: firstSelected,
+      updateSelection: updateSelection
+    }, day))
+  });
+});
+export default Days;

package/es/esf/components/period-picker/days.module.css

@@ -0,0 +1,113 @@
+.days {
+  width: 100%;
+  display: inline-flex;
+  align-items: flex-start;
+  margin: 0 auto;
+  padding: 0 18px 10px 18px;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 1100px) {
+  .days {
+    padding: 0 26px;
+    overflow: visible;
+  }
+}
+
+.day {
+  --item-size: 48px;
+  --padding: 6px;
+
+  flex: 0 0 var(--item-size);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.day:first-of-type {
+  margin-left: auto;
+}
+
+.day:last-of-type {
+  margin-right: auto;
+}
+
+.weekday {
+  padding: 0 var(--padding) 10px var(--padding);
+  text-align: center;
+  border-bottom: 1px solid var(--ds-grey-700, #171e30);
+}
+
+.weekday::first-letter {
+  text-transform: uppercase;
+}
+
+.dayBottom {
+  width: var(--item-size);
+  height: var(--item-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.dayFirstInStay .dayBottom {
+  border-radius: 50% 0 0 50%;
+}
+
+.dayLastInStay .dayBottom {
+  border-radius: 0 50% 50% 0;
+}
+
+.dayFirstInStay.dayLastInStay .dayBottom {
+  border-radius: 50%;
+}
+
+.dayInStay .dayBottom {
+  background-color: var(--ds-grey-200, #efefef);
+}
+
+.dayNumber {
+  width: 100%;
+  height: 100%;
+  color: var(--ds-grey-700, #171e30);
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.day:not(.dayBoundary):not(.dayInStay):not(.firstSelected) .dayNumber:hover {
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: 50%;
+  transition: color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.firstSelected .dayNumber,
+.dayBoundary .dayNumber {
+  position: relative;
+  border-radius: 50%;
+  color: var(--ds-grey-000, #ffffff);
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  border-radius: 50%;
+}
+
+.firstSelected .dayNumberText,
+.dayBoundary .dayNumberText {
+  position: relative;
+}
+
+.month {
+  width: 0;
+  margin-top: 8px;
+  color: var(--ds-grey-700, #171e30);
+  font-size: 11px;
+  text-transform: uppercase;
+}

package/es/esf/components/period-picker/extended-stay-picker.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import Days from "./days";
+import * as Dates from "./services/dates";
+import * as Motions from "./services/motions";
+import * as Messages from "./messages";
+import css from "./extended-stay-picker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const ExtendedStayPicker = ({
+  stay,
+  extend,
+  week,
+  endWeek,
+  forceSeasonSwitch,
+  opened,
+  setExtendedOpened
+}) => {
+  const barRef = React.useRef();
+  const {
+    lang
+  } = useUbloContext();
+  const startDate = Dates.weekToDate(week, endWeek, forceSeasonSwitch);
+  const endDate = Dates.weekToDate(week + 1, endWeek, forceSeasonSwitch);
+  const fullStay = stay ? Dates.getInterval(new Date(stay.from), new Date(stay.to)) : [];
+  const interval = Dates.getInterval(startDate, endDate, extend);
+
+  const close = () => {
+    setExtendedOpened(false);
+  };
+
+  return _jsx(AnimatePresence, {
+    mode: "wait",
+    children: opened && _jsxs(motion.div, {
+      className: css.picker,
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      variants: Motions.fading,
+      children: [_jsxs("div", {
+        className: css.title,
+        children: [Messages.get(lang, "extended-title"), _jsx(Button, {
+          className: css.button,
+          variant: "link",
+          onClick: close,
+          compact: true,
+          children: Messages.get(lang, "update-period")
+        })]
+      }), _jsx(Days, {
+        ref: barRef,
+        fullStay: fullStay,
+        interval: interval
+      })]
+    })
+  });
+};
+
+export default ExtendedStayPicker;

package/es/esf/components/period-picker/extended-stay-picker.module.css

@@ -0,0 +1,50 @@
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px 0;
+  background-color: var(--ds-grey-000, #ffffff);
+  z-index: 1;
+}
+
+.title {
+  align-self: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 20px;
+  font-size: 20px;
+  text-transform: uppercase;
+  font-weight: 700;
+  text-align: center;
+}
+
+@media (min-width: 1100px) {
+  .picker {
+    padding: 46px 0;
+  }
+}
+
+.button {
+  font-size: 12px;
+  color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+}
+
+.buttonLabel {
+  display: none;
+}
+
+@media (min-width: 780px) {
+  .buttonLabel {
+    display: block;
+  }
+}

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

@@ -0,0 +1,4 @@
+import PeriodPicker from "./period-picker";
+import DateDisplay from "./date-display";
+PeriodPicker.DateDisplay = DateDisplay;
+export default PeriodPicker;

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

@@ -0,0 +1,39 @@
+const messages = {
+  fr: {
+    title: "<b>A quelle période</b> souhaitez-vous venir ?",
+    "selected-title": "<b>Vous venez</b> du",
+    warn: "Attention, modifier vos dates de séjour entraine la suppression du contenu du panier",
+    ok: "Confirmer",
+    cancel: "Annuler",
+    "update-period": "Choisir une autre plage de dates",
+    offers: "Les offres pour la période du",
+    to: "au",
+    "extended-title": "Vous pouvez ajuster vos dates de séjour"
+  },
+  en: {
+    title: "<span>When</span> are you coming?",
+    "selected-title": "<b>You are comming</b> from",
+    warn: "Warning, if you change your dates of stay, products in your cart will be removed",
+    ok: "Confirm",
+    cancel: "Cancel",
+    "update-period": "Update your stay",
+    offers: "Offers for the period from",
+    to: "to",
+    "extended-title": "You are coming more precisely"
+  },
+  nl: {
+    title: "<span>Wanneer</span> kom je?",
+    "selected-title": "<b>You are comming</b> from",
+    warn: "Waarschuwing, als u uw verblijfsdata wijzigt, wordt uw winkelwagentje gewist",
+    ok: "Aanpassen",
+    cancel: "Annuleren",
+    "update-period": "Update je verblijf",
+    offers: "Aanbiedingen voor de periode van",
+    to: "tot",
+    "extended-title": "Je komt precies"
+  }
+};
+export const get = (lang, message) => {
+  const locale = !messages[lang] ? "en" : lang;
+  return messages[locale][message];
+};