ublo-lib 1.24.4 → 1.25.0

package/es/common/components/admin-links/admin-links.js

@@ -1,59 +1,102 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import { loadFileManager } from "../../utils/file-manager";
 import styles from "./admin-links.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 ToggleIcon = () => {
-    return (_jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", className: styles.toggleIcon, children: _jsx("path", { d: "M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }) }));
+  return _jsx("svg", {
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    className: styles.toggleIcon,
+    children: _jsx("path", {
+      d: "M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+    })
+  });
 };
-const AdminLinks = ({ customLinks }) => {
-    const { lang, cmsMode, config } = useUbloContext();
-    const [open, setOpen] = React.useState(false);
-    const hasLangPrefix = config.langPrefix.links;
-    const { plausibleLink } = config;
-    const links = {
-        msemAdmin: {
-            name: "Administration MseM",
-            onClick: "https://admin.mon-sejour-en-montagne.com/",
-            target: "_blank",
-        },
-        tutoriels: {
-            name: "Tutoriels",
-            onClick: "https://www.valraiso.net/toolbox/?auth=my-toolbox&filter=tools",
-            target: "_blank",
-        },
-        popup: {
-            name: "Popup",
-            onClick: hasLangPrefix ? `/${lang.concat("/popup")}` : "/popup",
-        },
-        fileManager: {
-            name: "Photothèque",
-            onClick: loadFileManager,
-        },
-        plausible: {
-            name: "Statistiques",
-            onClick: typeof plausibleLink === "string"
-                ? plausibleLink
-                : plausibleLink?.[lang],
-            target: "_blank",
-        },
-        ...customLinks,
-    };
-    return (_jsx("div", { className: styles.root, children: cmsMode && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.toggle, onClick: () => setOpen(!open), children: _jsx(ToggleIcon, {}) }), open && (_jsxs("div", { className: styles.links, children: [_jsx("div", { className: styles.linksTitle, children: "Liens utiles" }), Object.keys(links).map((key, i) => {
-                            const link = links[key];
-                            if (!link)
-                                return null;
-                            const { name, onClick, target } = link;
-                            const isHrefValid = typeof onClick === "string" && onClick !== "";
-                            const isFunction = typeof onClick === "function";
-                            if (!isHrefValid && !isFunction) {
-                                return null;
-                            }
-                            const Tag = isHrefValid ? "a" : "button";
-                            const anchorProps = { href: onClick, target };
-                            const buttonProps = { onClick };
-                            const props = isFunction ? buttonProps : anchorProps;
-                            return (_jsx(Tag, { className: styles.link, ...props, children: name }, i));
-                        })] }))] })) }));
+const AdminLinks = ({
+  customLinks
+}) => {
+  const {
+    lang,
+    cmsMode,
+    config
+  } = useUbloContext();
+  const [open, setOpen] = React.useState(false);
+  const hasLangPrefix = config.langPrefix.links;
+  const {
+    plausibleLink
+  } = config;
+  const links = {
+    msemAdmin: {
+      name: "Administration MseM",
+      onClick: "https://admin.mon-sejour-en-montagne.com/",
+      target: "_blank"
+    },
+    tutoriels: {
+      name: "Tutoriels",
+      onClick: "https://www.valraiso.net/toolbox/?auth=my-toolbox&filter=tools",
+      target: "_blank"
+    },
+    popup: {
+      name: "Popup",
+      onClick: hasLangPrefix ? `/${lang.concat("/popup")}` : "/popup"
+    },
+    fileManager: {
+      name: "Photothèque",
+      onClick: loadFileManager
+    },
+    plausible: {
+      name: "Statistiques",
+      onClick: typeof plausibleLink === "string" ? plausibleLink : plausibleLink?.[lang],
+      target: "_blank"
+    },
+    ...customLinks
+  };
+  return _jsx("div", {
+    className: styles.root,
+    children: cmsMode && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: styles.toggle,
+        onClick: () => setOpen(!open),
+        children: _jsx(ToggleIcon, {})
+      }), open && _jsxs("div", {
+        className: styles.links,
+        children: [_jsx("div", {
+          className: styles.linksTitle,
+          children: "Liens utiles"
+        }), Object.keys(links).map((key, i) => {
+          const link = links[key];
+          if (!link) return null;
+          const {
+            name,
+            onClick,
+            target
+          } = link;
+          const isHrefValid = typeof onClick === "string" && onClick !== "";
+          const isFunction = typeof onClick === "function";
+          if (!isHrefValid && !isFunction) {
+            return null;
+          }
+          const Tag = isHrefValid ? "a" : "button";
+          const anchorProps = {
+            href: onClick,
+            target
+          };
+          const buttonProps = {
+            onClick
+          };
+          const props = isFunction ? buttonProps : anchorProps;
+          return _jsx(Tag, {
+            className: styles.link,
+            ...props,
+            children: name
+          }, i);
+        })]
+      })]
+    })
+  });
 };
-export default AdminLinks;
+export default AdminLinks;

package/es/common/components/admin-links/index.js

@@ -1,2 +1,2 @@
 import AdminLinks from "./admin-links";
-export default AdminLinks;
+export default AdminLinks;

package/es/common/components/breadcrumb.js

@@ -1,24 +1,81 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import Link from "ublo/link";
-const Item = ({ name, page, path, itemTitle, nextItem, isCurrent, exclusions, }) => {
-    const hasTemplate = page !== undefined;
-    const isExternalUrl = /^((http|https):\/\/)/.test(path);
-    const noHref = isCurrent || !hasTemplate;
-    const isExcluded = !isCurrent && exclusions.includes(name);
-    const Tag = isExternalUrl ? "a" : noHref ? "span" : Link;
-    const linkProps = { title: itemTitle, page, as: path };
-    const spanProps = { dangerouslySetInnerHTML: { __html: itemTitle } };
-    const anchorProps = { ...spanProps, href: path };
-    const props = isExternalUrl ? anchorProps : noHref ? spanProps : linkProps;
-    return (_jsxs(_Fragment, { children: [!isExcluded && _jsx(Tag, { className: "breadcrumb__item", ...props }), nextItem] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Item = ({
+  name,
+  page,
+  path,
+  itemTitle,
+  nextItem,
+  isCurrent,
+  exclusions
+}) => {
+  const hasTemplate = page !== undefined;
+  const isExternalUrl = /^((http|https):\/\/)/.test(path);
+  const noHref = isCurrent || !hasTemplate;
+  const isExcluded = !isCurrent && exclusions.includes(name);
+  const Tag = isExternalUrl ? "a" : noHref ? "span" : Link;
+  const linkProps = {
+    title: itemTitle,
+    page,
+    as: path
+  };
+  const spanProps = {
+    dangerouslySetInnerHTML: {
+      __html: itemTitle
+    }
+  };
+  const anchorProps = {
+    ...spanProps,
+    href: path
+  };
+  const props = isExternalUrl ? anchorProps : noHref ? spanProps : linkProps;
+  return _jsxs(_Fragment, {
+    children: [!isExcluded && _jsx(Tag, {
+      className: "breadcrumb__item",
+      ...props
+    }), nextItem]
+  });
 };
-const Items = ({ rawItem, exclusions }) => {
-    const { next, name, title, path, page, shortTitle } = rawItem;
-    const isCurrent = next === undefined;
-    const isNextExcluded = !isCurrent && exclusions.includes(next.name);
-    const itemToRender = isNextExcluded ? next.next : next;
-    const nextItem = !isCurrent ? (_jsx(Items, { rawItem: itemToRender, exclusions: exclusions })) : null;
-    return (_jsx(Item, { name: name, page: page, path: path, itemTitle: shortTitle || title, nextItem: nextItem, isCurrent: isCurrent, exclusions: exclusions }));
+const Items = ({
+  rawItem,
+  exclusions
+}) => {
+  const {
+    next,
+    name,
+    title,
+    path,
+    page,
+    shortTitle
+  } = rawItem;
+  const isCurrent = next === undefined;
+  const isNextExcluded = !isCurrent && exclusions.includes(next.name);
+  const itemToRender = isNextExcluded ? next.next : next;
+  const nextItem = !isCurrent ? _jsx(Items, {
+    rawItem: itemToRender,
+    exclusions: exclusions
+  }) : null;
+  return _jsx(Item, {
+    name: name,
+    page: page,
+    path: path,
+    itemTitle: shortTitle || title,
+    nextItem: nextItem,
+    isCurrent: isCurrent,
+    exclusions: exclusions
+  });
 };
-const Breadcrumb = ({ breadcrumb, exclusions = [] }) => (_jsx("div", { className: "breadcrumb", children: _jsx(Items, { rawItem: breadcrumb, exclusions: exclusions }) }));
-export default Breadcrumb;
+const Breadcrumb = ({
+  breadcrumb,
+  exclusions = []
+}) => _jsx("div", {
+  className: "breadcrumb",
+  children: _jsx(Items, {
+    rawItem: breadcrumb,
+    exclusions: exclusions
+  })
+});
+export default Breadcrumb;

package/es/common/components/cross-selling-editor/cross-selling-editor.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import classNames from "classnames";
+import Zone from "ublo/zone";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Plausible from "../plausible";
+import Editor from "./editor";
+import styles from "./cross-selling-editor.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function CrossSellingEditor({
+  titleZoneProps = {},
+  contentZoneProps = {},
+  children
+}) {
+  const ref = React.useRef();
+  const titleRef = React.useRef();
+  const {
+    cmsMode
+  } = useUbloContext();
+  const sendPlausibleEvent = e => {
+    const link = e.target.closest("a");
+    if (link) {
+      const selector = ".tunnel-offer__title, [data-title]";
+      const offer = link.querySelector(selector)?.textContent || "";
+      Plausible.sendGoal("Cart Cross Selling Offer: Click", {
+        Clicked: offer
+      });
+    }
+  };
+  return _jsxs("div", {
+    className: styles.editor,
+    onClick: sendPlausibleEvent,
+    children: [children, cmsMode === "editing" && _jsx(Editor, {
+      zoneRef: ref
+    }), titleZoneProps.enabled && _jsx(Zone, {
+      ref: titleRef,
+      id: titleZoneProps.id || "tunnel-offers-title",
+      className: classNames(styles.titleZone, titleZoneProps.className),
+      section: titleZoneProps.section,
+      maxSections: 1,
+      tooltip: "Zone d'edition : Titre des offres",
+      "data-title-zone": ""
+    }), contentZoneProps.enabled && _jsx(Zone, {
+      ref: ref,
+      id: contentZoneProps.id || "tunnel-offers",
+      className: classNames(styles.contentZone, contentZoneProps.className),
+      section: contentZoneProps.section,
+      tooltip: "Zone d'edition : Offres",
+      "data-content-zone": ""
+    })]
+  });
+}

package/es/common/components/cross-selling-editor/cross-selling-editor.module.css

@@ -0,0 +1,6 @@
+.editor {
+  width: min(calc(100% - 20px), 1200px);
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}

package/es/common/components/cross-selling-editor/editor.js

@@ -0,0 +1,98 @@
+import * as React from "react";
+import Dialog from "dt-design-system/es/dialog";
+import Button from "dt-design-system/es/button";
+import Tooltip from "dt-design-system/es/tooltip";
+import * as Icons from "dt-design-system/es/icons";
+import Rules from "./rules";
+import Tester from "./tester";
+import * as Utils from "./services/utils";
+import styles from "./editor.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";
+export default function Editor({
+  zoneRef
+}) {
+  const zoneContainer = zoneRef.current;
+  const [dialogOpened, setDialogOpened] = React.useState(false);
+  const [config, setConfig] = React.useState({});
+  React.useEffect(() => {
+    init(zoneContainer, setConfig);
+  }, [zoneContainer]);
+  React.useEffect(() => {
+    const configContainer = zoneContainer?.querySelector(`#${Utils.CONFIG_ID}`);
+    if (configContainer) {
+      configContainer.textContent = JSON.stringify(config);
+    }
+  }, [config, zoneContainer]);
+  React.useEffect(() => {
+    if (dialogOpened) {
+      document.body.style.setProperty("overflow", "hidden");
+    } else {
+      document.body.style.removeProperty("overflow");
+    }
+  }, [dialogOpened]);
+  const openDialog = () => {
+    patchSections(zoneContainer);
+    setDialogOpened(true);
+  };
+  const closeDialog = () => {
+    setDialogOpened(false);
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsx(Tooltip, {
+      content: "Param\xE9trer les offres crois\xE9es",
+      children: _jsx(Button, {
+        className: styles.button,
+        onClick: openDialog,
+        children: _jsx(Icons.Settings, {})
+      })
+    }), _jsx(Dialog, {
+      className: styles.dialog,
+      isOpened: dialogOpened,
+      close: closeDialog,
+      showAsModal: false,
+      children: _jsxs("div", {
+        className: styles.dialogInner,
+        children: [_jsx(Rules, {
+          container: zoneContainer,
+          config: config,
+          setConfig: setConfig,
+          tunnelOffers: Utils.tunnelOffers
+        }), _jsx(Tester, {
+          container: zoneContainer,
+          config: config,
+          tunnelOffers: Utils.tunnelOffers
+        })]
+      })
+    })]
+  });
+}
+function init(zoneContainer, setConfig) {
+  let configContainer = zoneContainer?.querySelector(`#${Utils.CONFIG_ID}`);
+  if (!configContainer) {
+    configContainer = Object.assign(document.createElement("script"), {
+      id: Utils.CONFIG_ID,
+      type: "application/json",
+      innerHTML: JSON.stringify({})
+    });
+    if (zoneContainer) {
+      zoneContainer.appendChild(configContainer);
+    }
+  }
+  const storedConfig = configContainer.textContent;
+  if (storedConfig) {
+    setConfig(JSON.parse(storedConfig));
+  }
+}
+function patchSections(zoneContainer) {
+  if (!zoneContainer) return;
+  const sections = Array.from(zoneContainer?.querySelectorAll("section[data-class]"));
+  sections.forEach(section => {
+    const hasUuid = section.hasAttribute("data-uuid");
+    if (!hasUuid) {
+      const uuid = crypto.randomUUID();
+      section.setAttribute("data-uuid", uuid);
+    }
+  });
+}

package/es/common/components/cross-selling-editor/editor.module.css

@@ -0,0 +1,23 @@
+.dialog {
+  width: 1500px;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(calc(var(--blur, 5px) * 3));
+  z-index: calc(var(--ds-floating-z-index, 100) - 1);
+}
+
+.dialogInner {
+  height: 100%;
+  display: flex;
+}
+
+.button {
+  margin-left: auto;
+}

package/es/common/components/cross-selling-editor/hooks/use-custom-offers.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import * as API from "../services/api";
+import * as Utils from "../services/utils";
+export default function useCustomOffers() {
+  const {
+    lang,
+    path
+  } = useUbloContext();
+  const [offers, setOffers] = React.useState();
+  React.useEffect(() => {
+    const titleZone = document.querySelector("[data-title-zone]");
+    const contentZone = document.querySelector("[data-content-zone]");
+    const getOffers = async () => {
+      const cartId = window.sessionStorage.getItem("cartId");
+      let items = {};
+      let merchants = [];
+      let stay = {};
+      let skiPassDurations = [];
+      if (cartId) {
+        try {
+          const {
+            cart
+          } = await API.fetchMseMCart(cartId, lang);
+          items = Utils.formatCartContent(cart);
+          merchants = Utils.getMerchantsFromCart(cart);
+          stay = Utils.getStayFromCart(cart);
+          skiPassDurations = await Utils.getskiPassDurationFromCart(cart);
+        } catch (e) {}
+      }
+      const content = {
+        items,
+        merchants,
+        stay,
+        skiPassDurations
+      };
+      const storedConfig = Utils.getConfig(contentZone);
+      const sortedOffers = Utils.getSortedOffers(contentZone, content, storedConfig);
+      const title = titleZone?.innerHTML || "";
+      const customOffers = sortedOffers.length > 0 ? `
+      ${title}
+      <div data-custom-offers="">
+        ${sortedOffers.map(({
+        elementHTML
+      }) => elementHTML).join("")}
+      </div>` : undefined;
+      setOffers(customOffers);
+    };
+    getOffers();
+  }, [lang, path]);
+  return offers;
+}

package/es/common/components/cross-selling-editor/hooks/use-tunnel-offers.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import { fetchZone } from "ublo/fetcher";
+import * as Utils from "../services/utils";
+export default function useTunnelOffers(zone, path, cart) {
+  const {
+    ubloApi,
+    site,
+    lang
+  } = useUbloContext();
+  const [offers, setOffers] = React.useState([]);
+  React.useEffect(() => {
+    const getOffers = async () => {
+      const offers = await fetchZone(ubloApi, site, lang, path, zone);
+      const container = Object.assign(document.createElement("div"), {
+        innerHTML: offers
+      });
+      const items = Utils.formatCartContent(cart);
+      const merchants = Utils.getMerchantsFromCart(cart);
+      const stay = Utils.getStayFromCart(cart);
+      const skiPassDurations = await Utils.getskiPassDurationFromCart(cart);
+      const content = {
+        items,
+        merchants,
+        stay,
+        skiPassDurations
+      };
+      const storedConfig = Utils.getConfig(container);
+      const sortedOffers = Utils.getSortedOffers(container, content, storedConfig);
+      setOffers(sortedOffers);
+    };
+    getOffers();
+  }, [cart, lang, path, site, ubloApi, zone]);
+  return offers;
+}

package/es/common/components/cross-selling-editor/index.js

@@ -0,0 +1,2 @@
+import CrossSellingEditor from "./cross-selling-editor";
+export default CrossSellingEditor;