ublo-lib 1.2.4 → 1.3.0

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

@@ -0,0 +1,202 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Icons from "dt-design-system/es/icons";
+import Title from "./title";
+import Controls from "./controls";
+import Weeks from "./weeks";
+import Warning from "./warning";
+import ExtendedStayPicker from "./extended-stay-picker";
+import Popup from "./popup";
+import * as Sections from "./services/sections";
+import * as Dates from "./services/dates";
+import * as Stay from "./services/stay";
+import css from "./period-picker.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 WEEK_STORAGE = "stayWeek";
+const EXTEND_STAY_PICKER_APPEARANCE_DELAY = 1000;
+
+const PeriodPicker = ({
+  setClosed,
+  force,
+  onChange,
+  isPopup
+}) => {
+  const ref = React.useRef();
+  const {
+    config,
+    cmsMode,
+    metadata
+  } = useUbloContext();
+  const {
+    start,
+    end,
+    forceSeasonSwitch = false,
+    extend
+  } = config.season;
+  const [stay, setStay] = React.useState();
+  const [warn, setWarn] = React.useState(false);
+  const [chosenWeek, setChosenWeek] = React.useState();
+  const [opened, setOpened] = React.useState(true);
+  const [selected, setSelected] = React.useState();
+  const [extendedOpened, setExtendedOpened] = React.useState(false);
+  const [extendedTimeout, setExtendedTimeout] = React.useState();
+  const mustFilterSections = cmsMode === undefined;
+  const weeks = Dates.buildWeeks(start, end);
+  const beginWeek = weeks[0];
+  const endWeek = weeks[weeks.length - 1];
+  const showDialog = force && selected === null;
+  const pickerClasses = classnames(css.picker, {
+    [css.pickerDialogOpened]: showDialog && mustFilterSections,
+    [css.pickerEditing]: !mustFilterSections
+  });
+  const openExtendedPicker = React.useCallback(() => {
+    if (extend) {
+      clearTimeout(extendedTimeout);
+      setExtendedTimeout(setTimeout(() => setExtendedOpened(true), EXTEND_STAY_PICKER_APPEARANCE_DELAY));
+    }
+  }, [extend, extendedTimeout]);
+  const selectWeek = React.useCallback((week, force = false) => {
+    const hasCart = window.sessionStorage.getItem("cartId");
+
+    if (force || !hasCart) {
+      setSelected(previousWeek => {
+        if (previousWeek !== undefined && previousWeek !== null && previousWeek !== week) {
+          window.sessionStorage.removeItem("cartId");
+        }
+
+        setWarn(false);
+        setChosenWeek(undefined);
+        return week;
+      });
+
+      if (mustFilterSections && week !== null && week !== undefined) {
+        Sections.filter(week, mustFilterSections);
+      } else {
+        Sections.removeFilter();
+      }
+    } else {
+      setWarn(true);
+      setChosenWeek(week);
+    }
+  }, [mustFilterSections]);
+  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(() => {
+    getStoredStay();
+    window.addEventListener("msem-stay-changed", updateStay);
+    return () => {
+      window.removeEventListener("msem-stay-changed", updateStay);
+    };
+  }, [getStoredStay, updateStay]);
+  React.useEffect(() => {
+    if (!mustFilterSections) {
+      Sections.removeFilter();
+    }
+  }, [mustFilterSections]);
+  React.useEffect(() => {
+    const stored = window.sessionStorage.getItem(WEEK_STORAGE);
+    selectWeek(stored !== null ? Number(stored) : null, true);
+  }, [selectWeek]);
+  React.useEffect(() => {
+    if (selected !== null && selected !== undefined) {
+      const stored = window.sessionStorage.getItem(WEEK_STORAGE);
+      const storedSelected = stored !== null ? Number(stored) : null;
+
+      if (storedSelected !== selected) {
+        const startDate = Dates.weekToDate(selected, endWeek, forceSeasonSwitch);
+        const endDate = Dates.weekToDate(selected + 1, endWeek, forceSeasonSwitch);
+        const range = {
+          from: Dates.format(startDate),
+          to: Dates.format(endDate)
+        };
+        window.sessionStorage.setItem(WEEK_STORAGE, selected);
+        Stay.update(range);
+
+        if (typeof onChange === "function") {
+          onChange(range);
+        }
+      }
+    }
+  }, [endWeek, forceSeasonSwitch, onChange, selected]);
+  if (metadata?.disableWeekpicker) return null;
+
+  const select = week => {
+    selectWeek(week);
+
+    if (setClosed !== undefined) {
+      setClosed(week);
+    }
+  };
+
+  const selectAndClose = week => {
+    selectWeek(week);
+    setOpened(false);
+    openExtendedPicker();
+  };
+
+  return _jsxs(_Fragment, {
+    children: [_jsx("div", {
+      className: pickerClasses,
+      children: _jsxs("div", {
+        className: css.inner,
+        children: [_jsxs("div", {
+          className: css.header,
+          children: [_jsx("div", {
+            className: css.iconContainer,
+            children: _jsx(Icons.Calendar, {
+              className: css.icon
+            })
+          }), _jsx(Title, {
+            stay: stay
+          }), _jsx(Controls, {
+            barRef: ref,
+            distance: 200
+          })]
+        }), _jsx(Weeks, {
+          ref: ref,
+          weeks: weeks,
+          beginWeek: beginWeek,
+          endWeek: endWeek,
+          selected: selected,
+          select: select,
+          forceSeasonSwitch: forceSeasonSwitch,
+          openExtendedPicker: openExtendedPicker,
+          isPopup: isPopup
+        }), _jsx(Warning, {
+          warn: warn,
+          setWarn: setWarn,
+          selectWeek: selectWeek,
+          chosenWeek: chosenWeek
+        }), _jsx(ExtendedStayPicker, {
+          stay: stay,
+          extend: extend,
+          week: selected,
+          endWeek: endWeek,
+          forceSeasonSwitch: forceSeasonSwitch,
+          opened: extendedOpened,
+          setExtendedOpened: setExtendedOpened
+        })]
+      })
+    }), _jsx(Popup, {
+      mustFilterSections: mustFilterSections,
+      showDialog: showDialog,
+      opened: opened,
+      selectAndClose: selectAndClose,
+      onChange: onChange
+    })]
+  });
+};
+
+export default React.memo(PeriodPicker);

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

@@ -0,0 +1,160 @@
+.picker {
+  color: var(--ds-grey-700, #171e30);
+  background-color: var(--ds-grey-000, #ffffff);
+  border-radius: inherit;
+  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+  transition: opacity 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  animation: period-picker-appearance 320ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  overflow: hidden;
+
+  /* @media (prefers-color-scheme: dark) {
+    --ds-grey-000: #171e30;
+    --ds-grey-100: #2d303c;
+    --ds-grey-200: #484848;
+    --ds-grey-300: #d2d2d2;
+    --ds-grey-400: #d4d4d4;
+    --ds-grey-500: #efefef;
+    --ds-grey-600: #f5f5f5;
+    --ds-grey-700: #fff;
+  } */
+}
+
+@keyframes period-picker-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+
+.picker * {
+  outline: none;
+}
+
+.picker *:focus-visible {
+  outline: var(--ds-focus-ring-width, 2px) solid
+    var(--ds-focus-ring-color, var(--ds-blue-400, #4177f6));
+  outline-offset: var(--ds-focus-ring-offset, 2px);
+}
+
+.inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 24px 0;
+}
+
+@media (min-width: 1100px) {
+  .inner {
+    padding: 46px 0;
+  }
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin: 0 auto;
+  padding: 0 10px;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .header {
+    flex-direction: row;
+  }
+}
+
+.iconContainer {
+  flex: 0 0 38px;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  border-radius: calc(var(--ds-radius-100, 3px) * 2);
+}
+
+.icon {
+  width: 22px;
+  height: 22px;
+  fill: var(--ds-grey-000, #ffffff);
+}
+
+.title {
+  flex: 0 0 auto;
+  font-size: 20px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.content {
+  position: relative;
+}
+
+/* CMS EDITING OVERRIDE */
+@media (min-width: 565px) {
+  .pickerEditing {
+    position: relative;
+  }
+
+  .pickerEditing::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(var(--ds-blur, 8px));
+    background-color: rgba(0, 0, 0, 0.05);
+    pointer-events: none;
+    touch-action: none;
+    opacity: 0;
+    z-index: 2;
+    transition: opacity 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  }
+
+  .pickerEditing:not(:hover)::before {
+    opacity: 1;
+  }
+
+  .pickerEditing::after {
+    content: "Sélecteur de séjour désactivé en mode édition";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 14px;
+    color: var(--ds-grey-000, #ffffff);
+    text-transform: uppercase;
+    font-family: "Open Sans", sans-serif;
+    letter-spacing: 1px;
+    background: var(
+      --cms-blue-gradient,
+      linear-gradient(
+        175deg,
+        var(--cms-blue-400, #4177f6),
+        var(--cms-blue-500, #004cc2)
+      )
+    );
+    padding: 5px 20px;
+    border-radius: var(--ds-radius-200, 10px);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: opacity 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    z-index: 2;
+  }
+
+  .pickerEditing:not(:hover)::after {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import PeriodPicker from "./period-picker";
+import * as Motions from "./services/motions";
+import css from "./popup.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Popup = ({
+  mustFilterSections,
+  showDialog,
+  opened,
+  onChange,
+  selectAndClose
+}) => {
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => {
+    setReady(true);
+  }, []);
+  if (!ready) return null;
+  const isVisible = mustFilterSections && showDialog && opened;
+  return ReactDOM.createPortal(_jsx(AnimatePresence, {
+    mode: "wait",
+    children: isVisible && _jsx("div", {
+      className: css.popup,
+      children: _jsx(motion.div, {
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        variants: Motions.fading,
+        className: css.inner,
+        children: _jsx(PeriodPicker, {
+          onChange: onChange,
+          setClosed: selectAndClose,
+          isPopup: true
+        })
+      })
+    })
+  }), document.body);
+};
+
+export default Popup;

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

@@ -0,0 +1,21 @@
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  backdrop-filter: blur(var(--ds-blur, 8px));
+  background-color: rgba(0, 0, 0, 0.24);
+  transition: opacity 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  z-index: var(--ds-floating-z-index, 100);
+}
+
+.inner {
+  max-width: 98vw;
+  border-radius: var(--ds-radius-200, 10px);
+}

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

@@ -0,0 +1,101 @@
+export const locales = {
+  fr: "fr-FR",
+  en: "en-UK",
+  nl: "nl-NL"
+};
+export const padStart = (value, count, pad) => {
+  let str = String(value);
+
+  while (str.length < count) {
+    str = pad + str;
+  }
+
+  return str;
+};
+
+const createDate = (...args) => {
+  const ref = new Date(...args);
+  const yy = ref.getFullYear();
+  const mm = padStart(ref.getMonth() + 1, 2, 0);
+  const dd = padStart(ref.getDate(), 2, 0);
+  const str = `${yy}-${mm}-${dd}`;
+  return new Date(str);
+};
+
+const getPrevSaturday = date => {
+  const clone = createDate(date);
+  const day = 1 + clone.getDay();
+  const prevSaturday = clone.getDate() - day % 7;
+  clone.setDate(prevSaturday);
+  return clone;
+};
+
+const addDays = (date, days) => {
+  const clone = createDate(date);
+  clone.setDate(clone.getDate() + days);
+  return clone;
+};
+
+const christmasWeek = (endWeek, forceSeasonSwitch) => {
+  const now = createDate();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const date = now.getDate();
+  const isAfterChristmas = month === 11 && date >= 25;
+  const lastChristmasYear = isAfterChristmas || !isAfterChristmas && forceSeasonSwitch ? year : year - 1;
+  const lastChristmas = createDate(lastChristmasYear, 11, 25);
+  const nextChristmas = createDate(lastChristmasYear + 1, 11, 25);
+  const dateSeasonEnd = addDays(getPrevSaturday(lastChristmas), endWeek * 7);
+  return getPrevSaturday(now <= dateSeasonEnd ? lastChristmas : nextChristmas);
+};
+
+export const weekToDate = (week, endWeek, forceSeasonSwitch) => addDays(christmasWeek(endWeek, forceSeasonSwitch), week * 7);
+export const formatShort = date => {
+  const dd = padStart(date.getDate(), 2, 0);
+  return dd;
+};
+export const weekToLongDate = (week, endWeek, forceSeasonSwitch) => {
+  const date = weekToDate(week, endWeek, forceSeasonSwitch);
+  const dd = padStart(date.getDate(), 2, 0);
+  const mm = padStart(date.getMonth() + 1, 2, 0);
+  const yy = date.getFullYear();
+  return `${dd}/${mm}/${yy}`;
+};
+export const format = date => {
+  const dd = padStart(date.getDate(), 2, 0);
+  const mm = padStart(date.getMonth() + 1, 2, 0);
+  const yy = date.getFullYear();
+  return `${yy}-${mm}-${dd}`;
+};
+export const getInterval = (startDate, endDate, pad = {
+  before: 0,
+  after: 0
+}) => {
+  const dates = [];
+
+  const addDays = function (days) {
+    const date = new Date(this.valueOf());
+    date.setDate(date.getDate() + days);
+    return date;
+  };
+
+  let currentDate = addDays.call(startDate, -pad?.before || 0);
+  const endDateWithPad = addDays.call(endDate, pad?.after || 0);
+
+  while (currentDate <= endDateWithPad) {
+    dates.push(currentDate);
+    currentDate = addDays.call(currentDate, 1);
+  }
+
+  return dates;
+};
+export const buildWeeks = (start, end) => {
+  const length = end - start;
+  const array = [];
+
+  for (let i = 0; i < length; i++) {
+    array.push(start + i);
+  }
+
+  return array;
+};

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

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

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

@@ -0,0 +1,38 @@
+const transition = {
+  duration: 0.64,
+  ease: "easeInOut"
+};
+export const scaling = {
+  hidden: {
+    opacity: 0,
+    scale: 1.1,
+    transition
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition
+  }
+};
+export const fading = {
+  hidden: {
+    opacity: 0,
+    transition
+  },
+  visible: {
+    opacity: 1,
+    transition
+  }
+};
+export const character = {
+  hidden: {
+    opacity: 0,
+    y: `0.15em`,
+    transition
+  },
+  visible: {
+    opacity: 1,
+    y: `0em`,
+    transition
+  }
+};

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

@@ -0,0 +1,24 @@
+const getFiltrableSections = () => Array.from(document.querySelectorAll("section[data-weeks]"));
+
+export const removeFilter = () => {
+  const filtrables = getFiltrableSections();
+  filtrables.forEach(section => {
+    if (section.originalDisplayStyle !== undefined) {
+      section.style.display = section.originalDisplayStyle;
+    }
+  });
+};
+export const filter = week => {
+  const search = String(week);
+  const filtrables = getFiltrableSections();
+  filtrables.forEach(section => {
+    const weeks = section.dataset.weeks.split(",").filter(week => week !== "");
+    const visible = weeks.length === 0 || weeks.indexOf(search) !== -1;
+
+    if (section.originalDisplayStyle === undefined) {
+      section.originalDisplayStyle = section.style.display;
+    }
+
+    section.style.display = visible ? section.originalDisplayStyle : "none";
+  });
+};

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

@@ -0,0 +1,27 @@
+import * as Events from "./events";
+import * as Dates from "./dates";
+import * as Messages from "../messages";
+export const update = stay => {
+  window.sessionStorage.setItem("stay", JSON.stringify(stay));
+  Events.fire(window, "msem-stay-changed", stay);
+};
+export const formatStay = (lang, stay) => {
+  const locale = Dates.locales[lang] || Dates.locales.en;
+  const from = new Date(stay.from);
+  const to = new Date(stay.to);
+  const fromDay = from.getDate();
+  const toDay = to.getDate();
+  const isOneDayStay = from.getTime() === to.getTime();
+  const fromMonth = from.getMonth();
+  const toMonth = to.getMonth();
+  const hasMonthChanged = fromMonth !== toMonth;
+  const fromMonthLabel = hasMonthChanged ? `${from.toLocaleDateString(locale, {
+    month: "long"
+  })} ` : "";
+  const toMonthLabel = to.toLocaleDateString(locale, {
+    month: "long"
+  });
+  if (isOneDayStay) return `${toDay} ${toMonthLabel}`;
+  const dates = `${fromDay} ${fromMonthLabel}${Messages.get(lang, "to")} ${toDay} ${toMonthLabel}`;
+  return dates;
+};

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Messages from "./messages";
+import * as Stay from "./services/stay";
+import css from "./title.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Title = ({
+  stay
+}) => {
+  const {
+    lang
+  } = useUbloContext();
+
+  if (!stay) {
+    return _jsx("div", {
+      className: css.title,
+      dangerouslySetInnerHTML: {
+        __html: Messages.get(lang, "title")
+      }
+    });
+  }
+
+  const formatedStay = Stay.formatStay(lang, stay);
+  return _jsx("div", {
+    className: css.title,
+    dangerouslySetInnerHTML: {
+      __html: `${Messages.get(lang, "selected-title")} ${formatedStay}`
+    }
+  });
+};
+
+export default Title;

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

@@ -0,0 +1,6 @@
+.title {
+  position: relative;
+  font-size: 20px;
+  text-transform: uppercase;
+  text-align: center;
+}