ublo-lib 1.0.0

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

@@ -0,0 +1,283 @@
+import * as React from "react";
+import { memo, useState, useEffect, useCallback, useRef, createRef } from "react";
+import classnames from "classnames";
+import Week from "./week";
+import { weekToLongDate, weekToDate, formatDate } from "./utils";
+import messages from "./messages";
+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 LEFT = 0;
+const RIGHT = 1;
+
+const buildWeeks = (start, end) => {
+  const length = end - start;
+  const array = [];
+
+  for (let i = 0; i < length; i++) {
+    array.push(start + i);
+  }
+
+  return array;
+};
+
+const getFiltrableSections = () => Array.from(document.querySelectorAll("section[data-weeks]"));
+
+const removeSectionFilters = () => {
+  const filtrables = getFiltrableSections();
+  filtrables.forEach(section => {
+    if (section.originalDisplayStyle !== undefined) {
+      section.style.display = section.originalDisplayStyle;
+    }
+  });
+};
+
+const filterSections = 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";
+  });
+};
+
+const WeekPicker = ({
+  lang,
+  start,
+  end,
+  setClosed,
+  cmsMode,
+  customMessages,
+  noRoughValidation = false,
+  force = false,
+  forceSeasonSwitch = false,
+  onChange
+}) => {
+  const [isBrowser, setBrowser] = useState(false);
+  const [warn, setWarn] = useState(-1);
+  const [opened, setOpened] = useState(true);
+  const [selected, setSelected] = useState();
+  const previous = createRef();
+  const ref = useRef();
+  const mustFilterSections = cmsMode === undefined;
+  const texts = messages(lang, customMessages);
+  const weekPickerTitle = texts["week-picker-title"];
+  const weekPickedSelectedTitle = texts["week-picker-selected-title"];
+  const weekPickerWarn = texts["week-picker-warn"];
+  const weekPickerOk = texts["week-picker-ok"];
+  const weekPickerCancel = texts["week-picker-cancel"];
+  const weeks = buildWeeks(start, end);
+  const endWeek = weeks[weeks.length - 1];
+  const beginWeek = weeks[0];
+  const showDialog = force && selected === null;
+  const pickerClasses = classnames("week-picker", {
+    "week-picker--dialog-opened": showDialog && mustFilterSections,
+    "week-picker--inline": force,
+    "week-picker--editing": !mustFilterSections
+  });
+  const selectWeek = useCallback((week, force = false) => {
+    const hasCart = sessionStorage.cartId !== undefined;
+
+    if (force || !hasCart) {
+      if (previous.current !== undefined && previous.current !== null && previous.current !== week) {
+        sessionStorage.removeItem("cartId");
+      }
+
+      setWarn(-1);
+      setSelected(week);
+      previous.current = week;
+
+      if (mustFilterSections && week !== null && week !== undefined) {
+        filterSections(week, mustFilterSections);
+      } else {
+        removeSectionFilters();
+      }
+    } else {
+      setWarn(week);
+    }
+  }, [mustFilterSections]);
+  useEffect(() => {
+    if (!mustFilterSections) {
+      removeSectionFilters();
+    }
+  }, [mustFilterSections]);
+  useEffect(() => {
+    const stored = 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 storedSelected = stored !== null ? Number(stored) : null;
+
+      if (storedSelected !== selected) {
+        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);
+
+        if (typeof onChange === "function") {
+          onChange(range);
+        }
+
+        if (!noRoughValidation) {
+          sessionStorage.roughStay = true;
+        }
+      }
+    }
+  }, [selected, endWeek, noRoughValidation, forceSeasonSwitch, onChange]);
+  useEffect(() => {
+    const bar = ref.current;
+    if (selected === undefined || !bar) return;
+    const selectedItem = bar.querySelector(".week-picker__item--selected");
+    if (!selectedItem) return;
+    const {
+      clientWidth,
+      offsetLeft
+    } = selectedItem;
+    bar.scrollLeft = offsetLeft - clientWidth;
+  }, [selected]);
+
+  const scrollTo = direction => {
+    const bar = ref.current;
+    if (!bar) return;
+    const currentScroll = bar.scrollLeft;
+
+    if (direction === LEFT) {
+      bar.scrollLeft = currentScroll - 200;
+    }
+
+    if (direction === RIGHT) {
+      bar.scrollLeft = currentScroll + 200;
+    }
+  };
+
+  const select = week => _ => {
+    selectWeek(week);
+
+    if (setClosed !== undefined) {
+      setClosed(week);
+    }
+  };
+
+  const selectAndClose = week => {
+    selectWeek(week);
+    setOpened(false);
+  };
+
+  return _jsxs(_Fragment, {
+    children: [_jsx("div", {
+      className: pickerClasses,
+      children: isBrowser && _jsxs(_Fragment, {
+        children: [_jsx("div", {
+          className: "week-picker__top",
+          children: _jsxs("div", {
+            className: "week-picker__text",
+            children: [_jsxs("div", {
+              className: "week-picker__controls",
+              children: [_jsx("button", {
+                className: "week-picker__control",
+                onClick: () => scrollTo(LEFT),
+                "aria-label": "Previous",
+                children: _jsx("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "24",
+                  height: "24",
+                  children: _jsx("path", {
+                    d: "M20 3l-3-3L5 12l12 12 3-3-9-9 9-9z"
+                  })
+                })
+              }), _jsx("button", {
+                className: "week-picker__control",
+                onClick: () => scrollTo(RIGHT),
+                "aria-label": "Next",
+                children: _jsx("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "24",
+                  height: "24",
+                  children: _jsx("path", {
+                    d: "M5 3l3-3 12 12L8 24l-3-3 9-9-9-9z"
+                  })
+                })
+              })]
+            }), selected === null && _jsx("div", {
+              className: "week-picker__title",
+              dangerouslySetInnerHTML: {
+                __html: weekPickerTitle
+              }
+            }), selected !== undefined && selected !== null && _jsx("div", {
+              className: "week-picker__title",
+              dangerouslySetInnerHTML: {
+                __html: `${weekPickedSelectedTitle} <span>${weekToLongDate(selected, endWeek, forceSeasonSwitch)}</span>`
+              }
+            })]
+          })
+        }), _jsxs("div", {
+          className: "week-picker__bottom",
+          children: [_jsx("div", {
+            ref: ref,
+            className: "week-picker__bar",
+            children: weeks.map(week => _jsx(Week, {
+              week: week,
+              beginWeek: beginWeek,
+              endWeek: endWeek,
+              selected: selected,
+              onClick: select(week),
+              forceSeasonSwitch: forceSeasonSwitch
+            }, week))
+          }), warn !== -1 && _jsx("div", {
+            className: "week-picker__warn",
+            children: _jsxs("div", {
+              className: "week-picker__warn-inner",
+              children: [_jsx("div", {
+                className: "week-picker__warn-text",
+                children: weekPickerWarn
+              }), _jsxs("div", {
+                className: "week-picker__warn-buttons",
+                children: [_jsx("button", {
+                  className: "week-picker__warn-button",
+                  onClick: () => setWarn(-1),
+                  children: weekPickerCancel
+                }), _jsx("button", {
+                  className: "week-picker__warn-button",
+                  onClick: () => selectWeek(warn, true),
+                  children: weekPickerOk
+                })]
+              })]
+            })
+          })]
+        })]
+      })
+    }), mustFilterSections && isBrowser && showDialog && opened && _jsx("div", {
+      className: "week-picker-popup",
+      children: _jsx("div", {
+        className: "week-picker-popup__inner",
+        children: _jsx("div", {
+          className: "week-picker-popup__content",
+          children: _jsx(WeekPicker, {
+            lang: lang,
+            start: start,
+            end: end,
+            setClosed: selectAndClose,
+            forceSeasonSwitch: forceSeasonSwitch
+          })
+        })
+      })
+    })]
+  });
+};
+
+export default memo(WeekPicker);

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

@@ -0,0 +1,27 @@
+const locales = {
+  fr: {
+    "week-picker-title": "Choisissez <span>votre semaine</span>",
+    "week-picker-selected-title": "<span>Vous venez</span> la semaine du",
+    "week-picker-warn": "Attention, modifier vos dates de séjour entraine la suppression du contenu du panier",
+    "week-picker-ok": "Modifier",
+    "week-picker-cancel": "Annuler"
+  },
+  en: {
+    "week-picker-title": "<span>When</span> are you coming?",
+    "week-picker-selected-title": "<span>Coming</span> the week of the",
+    "week-picker-warn": "Warning, if you modify your dates of stay, your cart will be cleared",
+    "week-picker-ok": "Modify",
+    "week-picker-cancel": "Cancel"
+  },
+  nl: {
+    "week-picker-title": "<span>Wanneer</span> kom je?",
+    "week-picker-selected-title": "<span>Keuze</span> de week van",
+    "week-picker-warn": "Waarschuwing, als u uw verblijfsdata wijzigt, wordt uw winkelwagentje gewist",
+    "week-picker-ok": "Aanpassen",
+    "week-picker-cancel": "Annuleren"
+  }
+};
+
+const getMessage = (lang, messages = locales) => messages[lang] || messages["en"];
+
+export default getMessage;

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

@@ -0,0 +1,65 @@
+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 formatShortDate = date => {
+  const dd = padStart(date.getDate(), 2, 0);
+  const mm = padStart(date.getMonth() + 1, 2, 0);
+  return `${dd}/${mm}`;
+};
+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 formatDate = date => {
+  const dd = padStart(date.getDate(), 2, 0);
+  const mm = padStart(date.getMonth() + 1, 2, 0);
+  const yy = date.getFullYear();
+  return `${yy}-${mm}-${dd}`;
+};

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import classnames from "classnames";
+import { weekToDate, formatDate, formatShortDate } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Week = ({
+  week,
+  beginWeek,
+  endWeek,
+  selected,
+  onClick,
+  forceSeasonSwitch
+}) => {
+  const now = new Date();
+  const prevDate = weekToDate(week - 1, endWeek, forceSeasonSwitch);
+  const currDate = weekToDate(week, endWeek, forceSeasonSwitch);
+  const nextDate = weekToDate(week + 1, endWeek, forceSeasonSwitch);
+  const prevYear = prevDate.getFullYear();
+  const currYear = currDate.getFullYear();
+  const isPast = now.getTime() > nextDate.getTime();
+  const isFirst = week === beginWeek;
+  const isLast = week === endWeek;
+  const hasYearChanged = prevYear !== currYear;
+  const showYear = isFirst || hasYearChanged;
+  const weekClasses = classnames("week-picker__item", {
+    "week-picker__item--selected": selected === week,
+    "week-picker__item--past": isPast
+  });
+  const yearClasses = classnames("week-picker__year", {
+    "week-picker__year--changed": hasYearChanged
+  });
+  return _jsxs("div", {
+    className: weekClasses,
+    children: [_jsx("button", {
+      className: "week-picker__button",
+      onClick: onClick,
+      "aria-label": `${formatDate(currDate)} ${formatDate(nextDate)}`
+    }), _jsxs("div", {
+      className: "week-picker__date",
+      children: [showYear && _jsx("span", {
+        className: yearClasses,
+        children: currYear
+      }), _jsx("span", {
+        className: "week-picker__item-from",
+        children: formatShortDate(currDate)
+      }), isLast && _jsx("span", {
+        className: "week-picker__item-to",
+        children: formatShortDate(nextDate)
+      })]
+    })]
+  });
+};
+
+export default Week;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as Plausible from "../plausible";
+const STORAGE_KEY = "businessProvider";
+const CHECKER_STORAGE_KEY = "businessProviderChecked";
+
+const useAffiliation = () => {
+  React.useEffect(() => {
+    const storedChecker = window.sessionStorage.getItem(CHECKER_STORAGE_KEY);
+    const storedBusinessProvider = window.localStorage.getItem(STORAGE_KEY);
+
+    if (!storedChecker && storedBusinessProvider) {
+      const {
+        id
+      } = JSON.parse(storedBusinessProvider);
+
+      if (id !== -1) {
+        Plausible.sendGoal("Affiliation", {
+          id
+        });
+        window.sessionStorage.setItem(CHECKER_STORAGE_KEY, "true");
+      }
+    }
+  }, []);
+};
+
+export default useAffiliation;

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import { loadJS } from "../utils/load-js";
+import * as Plausible from "../plausible";
+
+const setupConfig = (lang, breadcrumb, cart = [], multipleVillages, hasLangPrefix) => {
+  const pageEsf = multipleVillages ? breadcrumb?.next?.path : breadcrumb?.path;
+  const langPrefix = hasLangPrefix ? `/${lang}` : "";
+  const pagePanier = langPrefix.concat(cart[0] ? cart[0].path : "/panier");
+  window.pagePanier = pagePanier;
+  window.pageEsf = pageEsf;
+  window.currentLang = lang;
+  window.useAnalytics = true;
+  window.analytics = Plausible.callback;
+};
+
+const useBookingLinks = (cart, multipleVillages, setupCallback) => {
+  const {
+    breadcrumb,
+    config,
+    lang
+  } = useUbloContext();
+  const hasLangPrefix = config.langPrefix.links;
+  const bookingLang = lang === "fr" ? "fr" : "en";
+  React.useEffect(() => {
+    const run = async () => {
+      await loadJS("https://widget.vente-en-ligne-esf.com/boutique/boutique.js", "boutique-js");
+      setupConfig(bookingLang, breadcrumb, cart, multipleVillages, hasLangPrefix);
+      setupCallback?.();
+    };
+
+    run();
+  }, [bookingLang, breadcrumb, cart, hasLangPrefix, multipleVillages, setupCallback]);
+};
+
+export default useBookingLinks;

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

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import { loadJS } from "../utils/load-js";
+
+const useReviews = (lang, resort, containerId = "msem-reviews", preventInit) => {
+  const {
+    config
+  } = useUbloContext();
+  const {
+    reviews
+  } = config;
+  const language = lang === "fr" ? "fr" : "en";
+  useEffect(() => {
+    const run = async () => {
+      await loadJS("https://reviews.msem.tech/static/js/widget-msem-reviews.js", `${containerId}-js`);
+      window.openReviews({
+        language,
+        school: resort,
+        containerId,
+        useDefaultCSS: true
+      });
+    };
+
+    !preventInit && reviews && setTimeout(run, 3000);
+  }, [containerId, language, resort, reviews]);
+};
+
+export default useReviews;

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

@@ -0,0 +1,100 @@
+import * as React from "react";
+import getConfig from "next/config";
+const STORAGE_KEY = "forcedSeasonStay";
+
+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 => {
+  const now = createDate();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const date = now.getDate();
+  const isAfterChristmas = month === 11 && date >= 25;
+  const lastChristmasYear = isAfterChristmas ? 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);
+};
+
+const weekToDate = (week, endWeek) => addDays(christmasWeek(endWeek), week * 7);
+
+const formatDate = date => {
+  const dd = padStart(date.getDate(), 2, 0);
+  const mm = padStart(date.getMonth() + 1, 2, 0);
+  const yy = date.getFullYear();
+  return `${yy}-${mm}-${dd}`;
+};
+
+const useSeasonProducts = menuPath => {
+  const seasonProductsPage = menuPath?.metadata?.seasonProductsPage;
+  const {
+    publicRuntimeConfig: config
+  } = getConfig();
+  const {
+    start,
+    end
+  } = config.season || {};
+  const [startDate, endDate] = [weekToDate(start, end), weekToDate(end, end)];
+  const isEnabled = seasonProductsPage && start !== undefined && end !== undefined;
+  const updateStay = React.useCallback(async () => {
+    const stay = JSON.stringify({
+      from: formatDate(startDate),
+      to: formatDate(endDate)
+    });
+    window.sessionStorage.setItem("stay", stay);
+    window.sessionStorage.setItem(STORAGE_KEY, true);
+  }, [endDate, startDate]);
+  React.useEffect(() => {
+    if (isEnabled) {
+      if (seasonProductsPage) {
+        const buttons = Array.from(document.querySelectorAll("[onclick*='openBoutiqueESF']"));
+        buttons.forEach(button => button.addEventListener("click", updateStay));
+        return () => {
+          buttons.forEach(button => button.removeEventListener("click", updateStay));
+        };
+      } else {
+        const hasForcedStay = window.sessionStorage.getItem(STORAGE_KEY);
+
+        if (hasForcedStay) {
+          window.sessionStorage.removeItem("stay");
+          window.sessionStorage.removeItem("stayWeek");
+          window.sessionStorage.removeItem(STORAGE_KEY);
+        }
+      }
+    }
+  }, [seasonProductsPage, updateStay]);
+};
+
+export default useSeasonProducts;

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "ublo-lib",
+	"version": "1.0.0",
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"dependencies": {
+		"classnames": "^2.3.1"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.12.0",
+		"@babel/core": "^7.12.0",
+		"@babel/plugin-proposal-class-properties": "^7.12.0",
+		"@babel/preset-react": "^7.12.0",
+		"@babel/preset-typescript": "^7.12.0",
+		"@types/css-modules": "^1.0.2",
+		"@types/react": "^18.0.17",
+		"@types/react-dom": "^18.0.6",
+		"classnames": "^2.3.1",
+		"eslint": "^8.11.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-standard": "^16.0.3",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-promise": "^6.0.0",
+		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.3.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-scripts": "5.0.1",
+		"typescript": "^4.7.2"
+	},
+	"scripts": {
+		"clean": "rm -rf es",
+		"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"
+	},
+	"packageManager": "yarn@1.22.18",
+	"files": [
+		"es"
+	],
+	"browserslist": [
+		">1%",
+		"not dead",
+		"ie >= 11",
+		"not op_mini all"
+	]
+}