ublo-lib 1.24.3 → 1.25.0

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

@@ -0,0 +1,84 @@
+import * as React from "react";
+import Select from "dt-design-system/es/select";
+import Popover from "dt-design-system/es/popover";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import Rule from "./rule";
+import OverridesList from "./overrides-list";
+import * as Utils from "./services/utils";
+import styles from "./rules.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 Rules({
+  container,
+  config,
+  setConfig,
+  tunnelOffers
+}) {
+  const [currentOffer, setCurrentOffer] = React.useState("");
+  const [currentOverride, setCurrentOverride] = React.useState(null);
+  const overrides = config[currentOffer]?.overrides || [];
+  const showOverrides = currentOffer && Utils.hasAllowedOverrides(currentOffer);
+  const sections = Array.from(container.querySelectorAll(".tunnel-offer"));
+  const uuids = sections.map(section => section.getAttribute("data-uuid"));
+  const updateCurrentOffer = newCurrentOffer => {
+    setCurrentOffer(newCurrentOffer);
+    setCurrentOverride(null);
+  };
+  const tunnelOptions = Object.keys(tunnelOffers).map(key => {
+    const label = tunnelOffers[key];
+    return {
+      value: key,
+      label
+    };
+  });
+  return _jsxs("div", {
+    className: styles.container,
+    children: [_jsxs("div", {
+      className: styles.title,
+      children: ["Configuration", _jsx(Popover, {
+        className: styles.popover,
+        trigger: _jsx(Button, {
+          variant: "transparent",
+          children: _jsx(Icons.Info, {})
+        }),
+        children: "La configuration vous permet de personnaliser l'ordre d'affichage des produits sugg\xE9r\xE9s dans le panier en fonction des produits pr\xE9sents dans le panier de l'utilisateur."
+      })]
+    }), _jsx("div", {
+      className: styles.explanation,
+      children: "Configurez les suggestions de produit en fonction du contenu du panier"
+    }), _jsx(Select, {
+      className: styles.select,
+      label: "Produit ajout\xE9 au panier",
+      placeholder: "S\xE9lectionnez un produit",
+      value: currentOffer,
+      options: tunnelOptions,
+      onValueChange: updateCurrentOffer
+    }), showOverrides && _jsx(OverridesList, {
+      currentOffer: currentOffer,
+      overrides: overrides,
+      currentOverride: currentOverride,
+      setCurrentOverride: setCurrentOverride,
+      config: config,
+      setConfig: setConfig
+    }), currentOffer && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: styles.subTitle,
+        children: "Priorisation par types de produit"
+      }), sections.map(section => {
+        const uuid = section.getAttribute("data-uuid");
+        const title = section.querySelector(".tunnel-offer__title").textContent;
+        return _jsx(Rule, {
+          uuid: uuid,
+          uuids: uuids,
+          title: title,
+          currentOffer: currentOffer,
+          currentOverride: currentOverride,
+          config: config,
+          setConfig: setConfig
+        }, title);
+      })]
+    })]
+  });
+}

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

@@ -0,0 +1,39 @@
+.container {
+  flex: 0 0 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 16px 26px;
+  background-color: var(--ds-grey-000, #fff);
+}
+
+.title {
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-weight: 700;
+  color: var(--ds-black, #262626);
+  border-radius: var(--ds-snackbar-radius, var(--ds-radius-200, 8px));
+}
+
+.popover {
+  max-width: 220px;
+  color: var(--ds-grey-500, #7c7b7b);
+  font-size: var(--ds-label-font-size, 13px);
+}
+
+.explanation {
+  width: 100%;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
+
+.select {
+  margin-bottom: 12px;
+}
+
+.subTitle {
+  color: var(--ds-grey-500, #7c7b7b);
+  font-size: var(--ds-label-font-size, 13px);
+}

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

@@ -0,0 +1,36 @@
+import getConfig from "next/config";
+import * as Fetcher from "../../../utils/fetcher";
+const {
+  publicRuntimeConfig
+} = getConfig();
+const {
+  msemServicesUrl,
+  esfplusUrl,
+  channel,
+  resort
+} = publicRuntimeConfig;
+export async function fetchTunnelOffers(lang, facet) {
+  const endpoint = `${msemServicesUrl}/api/tunnel/offers/${channel}/${resort}`;
+  const result = await Fetcher.get(endpoint, {
+    lang,
+    facet
+  });
+  return result;
+}
+export async function fetchMseMCart(cartId, lang) {
+  const endpoint = `${esfplusUrl}/api/esfplus/cart`;
+  const id = JSON.parse(cartId);
+  const payload = {
+    cartId: id,
+    lang,
+    resort
+  };
+  const result = await Fetcher.post(endpoint, payload);
+  return result;
+}
+export async function fetchSkipassesFilters(merchant, catalog) {
+  const endpoint = `${msemServicesUrl}/api/ski-pass/${merchant}/filters`;
+  return Fetcher.post(endpoint, undefined, {
+    catalog
+  });
+}

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

@@ -0,0 +1,199 @@
+import * as API from "./api";
+export const tunnelOffers = {
+  HOT: "Hébergement",
+  LIFT: "Forfait",
+  SKI_RENTAL: "Location de matériel",
+  ESF: "Cours de ski",
+  CONCIERGERIE: "Conciergerie",
+  STAND: "Autre produit"
+};
+export function getSortedOffers(container, cartContent, config) {
+  if (!container || !cartContent || !config) return [];
+  const sections = Array.from(container.querySelectorAll(".tunnel-offer"));
+  const offers = sections.map(section => {
+    const clonedSection = section.cloneNode(true);
+    const cmsUI = clonedSection.querySelector("cms-section-ui");
+    if (cmsUI) {
+      cmsUI.remove();
+    }
+    const contentEditable = Array.from(clonedSection.querySelectorAll("[contenteditable]"));
+    contentEditable.forEach(element => {
+      element.removeAttribute("contenteditable");
+    });
+    const title = clonedSection.querySelector(".tunnel-offer__title")?.textContent;
+    const uuid = section.getAttribute("data-uuid") || "";
+    const weight = Object.keys(config).reduce((acc, key) => {
+      const override = getActiveOverride(key, cartContent, config);
+      const currentWeight = override?.rules?.[uuid]?.weight || 0;
+      const inCart = cartContent.items[key] || 0;
+      return acc + currentWeight * inCart;
+    }, 0);
+    const isHidden = Object.keys(config).some(key => {
+      const override = getActiveOverride(key, cartContent, config);
+      const isHidden = override?.rules?.[uuid]?.hidden || false;
+      const inCart = cartContent.items[key] || 0;
+      return inCart ? isHidden : false;
+    });
+    return {
+      title,
+      weight,
+      elementHTML: clonedSection.outerHTML,
+      isHidden
+    };
+  });
+  const filteredOffers = offers.filter(offer => !offer.isHidden);
+  const sortedOffers = filteredOffers.sort((a, b) => b.weight - a.weight);
+  return sortedOffers;
+}
+export function getActiveOverride(key, cartContent, config) {
+  const {
+    items
+  } = cartContent;
+  const amountInCart = items[key];
+  const item = config[key];
+  if (!amountInCart) return item?.default;
+  const matchingOverrides = getMatchingOverrides(item, cartContent);
+  const activeOverride = matchingOverrides.length > 0 ? item?.overrides.find(o => o.id === matchingOverrides[0]) : item?.default || {};
+  return activeOverride;
+}
+function getMatchingOverrides(item, cartContent) {
+  if (!item) return [];
+  const {
+    overrides = []
+  } = item;
+  const matchs = overrides.reduce((acc, override) => {
+    const {
+      stay,
+      merchants,
+      skiPassDurations = []
+    } = cartContent;
+    const isStayMatching = checkStay(override, stay);
+    const isMerchantMatching = checkMerchants(override, merchants);
+    const isSkiPassDurationMatching = checkSkiPassDurations(override, skiPassDurations);
+    const isMatching = isStayMatching || isMerchantMatching || isSkiPassDurationMatching;
+    return isMatching ? [...acc, override.id] : acc;
+  }, []);
+  return matchs;
+}
+function checkStay(override, stay) {
+  const {
+    stayFrom,
+    stayTo,
+    stayDuration
+  } = override.triggers || {};
+  if (!stayFrom || !stayTo || !stay?.from || !stay?.to) return false;
+  const triggerStayFrom = new Date(stayFrom).getTime();
+  const triggerStayTo = new Date(stayTo).getTime();
+  const stayFromTime = new Date(stay?.from).getTime();
+  const stayToTime = new Date(stay?.to).getTime();
+  const stayIsBetweenTrigger = stayFromTime >= triggerStayFrom && stayToTime <= triggerStayTo;
+  const stayHasRightDuration = stay.duration && stayDuration && stayDuration !== 0 && stay?.duration > stayDuration;
+  return stayIsBetweenTrigger || stayHasRightDuration;
+}
+function checkMerchants(override, merchants) {
+  const {
+    merchant = ""
+  } = override.triggers || {};
+  const splittedMerchant = merchant.split(",").map(m => m.trim());
+  return merchants && splittedMerchant.some(m => merchants.includes(m));
+}
+function checkSkiPassDurations(override, skiPassDurations) {
+  if (!skiPassDurations) return false;
+  const maxDuration = Math.max(...skiPassDurations);
+  const {
+    skiPassDuration,
+    skiPassDurationOperator = ">="
+  } = override.triggers || {};
+  if (!skiPassDuration) return false;
+  switch (skiPassDurationOperator) {
+    case ">":
+      return maxDuration > skiPassDuration;
+    case ">=":
+      return maxDuration >= skiPassDuration;
+    case "<":
+      return maxDuration < skiPassDuration;
+    case "<=":
+      return maxDuration <= skiPassDuration;
+    case "=":
+      return maxDuration === skiPassDuration;
+    default:
+      return false;
+  }
+}
+export const allowedOverrides = ["HOT", "LIFT", "SKI_RENTAL", "STAND"];
+export function hasAllowedOverrides(kind) {
+  return allowedOverrides.includes(kind);
+}
+export function formatCartContent(cart) {
+  const {
+    orders
+  } = cart;
+  if (!orders) return {};
+  return Object.keys(orders).reduce((acc, key) => {
+    if (!Object.keys(tunnelOffers).includes(key)) return acc;
+    const order = orders?.[key];
+    const inscriptionsLength = order?.length || 0;
+    return {
+      ...acc,
+      [key]: inscriptionsLength
+    };
+  }, {});
+}
+export function getMerchantsFromCart(cart) {
+  const {
+    orders
+  } = cart;
+  if (!orders) return [];
+  return Object.keys(orders).reduce((acc, key) => {
+    if (!Object.keys(tunnelOffers).includes(key)) return acc;
+    const order = orders[key];
+    const merchants = order.map(item => item.merchant);
+    return [...acc, ...merchants];
+  }, []);
+}
+export function getStayFromCart(cart) {
+  const {
+    stayFrom: from,
+    stayTo: to
+  } = cart;
+  if (!from || !to) return {};
+  const bareDuration = new Date(to).getTime() - new Date(from).getTime();
+  const duration = bareDuration / (1000 * 3600 * 24);
+  return {
+    from,
+    to,
+    duration
+  };
+}
+export async function getskiPassDurationFromCart(cart) {
+  const {
+    LIFT: items
+  } = cart.orders;
+  if (!items?.length) return [];
+  const {
+    merchant
+  } = items[0];
+  const skipassCatalogs = items[0].inscriptions.map(i => i.skipassCatalog);
+  const filters = await Promise.all(skipassCatalogs.map(catalog => API.fetchSkipassesFilters(merchant, catalog)));
+  const durations = filters.reduce((acc, filter) => {
+    const {
+      durations: durationsFilter
+    } = filter;
+    const durations = items.map(item => {
+      if (!item.inscriptions.length) return acc;
+      const label = item.inscriptions[0].duration;
+      const duration = durationsFilter.find(d => {
+        return d.code === label;
+      });
+      return duration;
+    });
+    return [...acc, ...durations];
+  }, []);
+  return durations.map(d => d.nbDays);
+}
+export const CONFIG_ID = "cross-selling-editor";
+export function getConfig(container) {
+  const config = container?.querySelector(`#${CONFIG_ID}`);
+  const json = JSON.parse(config?.textContent || "{}");
+  return json;
+}

package/es/common/components/cross-selling-editor/tester-tunnel-offer.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import NumberPicker from "dt-design-system/es/number-picker";
+import Input from "dt-design-system/es/input";
+import * as Utils from "./services/utils";
+import styles from "./tester-tunnel-offer.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function TesterTunnelOffer({
+  kind,
+  value,
+  label,
+  cartOffers,
+  updateCartOffers,
+  refreshCartContent
+}) {
+  const overrideAllowed = Utils.allowedOverrides.includes(kind);
+  const isSkiPasses = kind === "LIFT";
+  const itemValue = cartOffers[value] || 0;
+  const items = [...new Array(itemValue)];
+  return _jsxs("div", {
+    className: styles.item,
+    children: [_jsx(NumberPicker, {
+      label: label,
+      value: itemValue,
+      onChange: updateCartOffers(value),
+      min: 0,
+      max: 10
+    }), overrideAllowed && items.map((_, index) => {
+      const number = index + 1;
+      if (isSkiPasses) {
+        return _jsx(Input, {
+          type: "number",
+          className: styles.input,
+          "data-kind": "skiPassDuration",
+          label: `Durée du forfait n°${number}`,
+          placeholder: "En jour(s) (Optionnel)",
+          min: 0,
+          max: 40,
+          onChange: refreshCartContent,
+          compact: true
+        }, index);
+      }
+      return _jsx(Input, {
+        className: styles.input,
+        "data-kind": "merchant",
+        label: `Marchand n°${number}`,
+        placeholder: "Code (Optionnel)",
+        onChange: refreshCartContent,
+        compact: true
+      }, index);
+    })]
+  }, label);
+}

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

@@ -0,0 +1,18 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background-color: var(--ds-grey-000, #fff);
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+.input > label {
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+}
+
+.input > label > div {
+  flex: 1 1 auto;
+}

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

@@ -0,0 +1,188 @@
+import * as React from "react";
+import Input from "dt-design-system/es/input";
+import Popover from "dt-design-system/es/popover";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import styles from "./tester.module.css";
+import * as Utils from "./services/utils";
+import TesterTunnelOffer from "./tester-tunnel-offer";
+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 Tester({
+  container,
+  config,
+  tunnelOffers
+}) {
+  const ref = React.useRef(null);
+  const [stayFrom, setStayFrom] = React.useState("");
+  const [stayTo, setStayTo] = React.useState("");
+  const [cartOffers, setCartOffers] = React.useState({});
+  const [merchants, setMerchants] = React.useState([]);
+  const [skiPassDurations, setSkiPassDurations] = React.useState([]);
+  const updateStayFrom = value => {
+    setStayFrom(value);
+    const stayToIsUndefined = !stayTo;
+    const stayToIsBefore = new Date(stayTo) && new Date(value) > new Date(stayTo);
+    if (stayToIsUndefined || stayToIsBefore) {
+      const addOneWeek = new Date(value);
+      addOneWeek.setDate(addOneWeek.getDate() + 7);
+      const newValue = addOneWeek.toISOString().split("T")[0];
+      setStayTo(newValue);
+    }
+  };
+  const updateStayTo = value => {
+    setStayTo(value);
+    const stayFromIsAfter = new Date(stayFrom) > new Date(value);
+    if (stayFromIsAfter) {
+      const removeOneWeek = new Date(value);
+      removeOneWeek.setDate(removeOneWeek.getDate() - 7);
+      const newValue = removeOneWeek.toISOString().split("T")[0];
+      setStayFrom(newValue);
+    }
+  };
+  const stay = Utils.getStayFromCart({
+    stayFrom,
+    stayTo
+  });
+  const cartContent = {
+    items: cartOffers,
+    stay,
+    merchants,
+    skiPassDurations
+  };
+  const sortedOffers = Utils.getSortedOffers(container, cartContent, config);
+  const activeOverrides = Object.keys(cartOffers).reduce((acc, key) => {
+    const name = Utils.tunnelOffers[key];
+    const override = Utils.getActiveOverride(key, cartContent, config);
+    const isDefault = !override?.name;
+    if (!override || isDefault) return acc;
+    return {
+      ...acc,
+      [name]: [...(acc[name] || []), override.name]
+    };
+  }, {});
+  const activeOverridesKeys = Object.keys(activeOverrides);
+  const hasActiveOverride = activeOverridesKeys.length > 0;
+  const updateCartOffers = kind => value => {
+    setCartOffers(prev => ({
+      ...prev,
+      [kind]: value
+    }));
+  };
+  const refreshCartContent = () => {
+    const container = ref.current;
+    if (container) {
+      const merchantInputs = Array.from(container.querySelectorAll("[data-kind=merchant]"));
+      const skiPassDurationInputs = Array.from(container.querySelectorAll("[data-kind=skiPassDuration]"));
+      const merchants = merchantInputs.map(input => input.value).filter(Boolean);
+      const skiPassDurations = skiPassDurationInputs.map(input => Number(input.value)).filter(Boolean);
+      setMerchants(merchants);
+      setSkiPassDurations(skiPassDurations);
+    }
+  };
+  const tunnelOptions = Object.keys(tunnelOffers).map(key => {
+    const label = tunnelOffers[key];
+    return {
+      key,
+      value: key,
+      label
+    };
+  });
+  return _jsx("div", {
+    className: styles.tester,
+    children: _jsxs("div", {
+      className: styles.content,
+      children: [_jsxs("div", {
+        className: styles.title,
+        children: ["Pr\xE9visualisation", _jsxs(Popover, {
+          className: styles.popover,
+          trigger: _jsx(Button, {
+            variant: "transparent",
+            children: _jsx(Icons.Info, {})
+          }),
+          children: ["Vous pouvez tester les r\xE8gles de suggestions en modifiant le contenu du panier ci-dessous.", _jsx("br", {}), "Les suggestions de produits s'afficheront dessous en temps r\xE9el."]
+        })]
+      }), _jsxs("div", {
+        className: styles.header,
+        children: [_jsx("div", {
+          className: styles.headerTitle,
+          children: "Simulez un contenu de panier"
+        }), _jsxs("div", {
+          className: styles.stay,
+          children: [_jsx(Input, {
+            className: styles.input,
+            type: "date",
+            label: "Date de d\xE9but de s\xE9jour",
+            value: stayFrom || "",
+            onValueChange: updateStayFrom,
+            compact: true
+          }), _jsx(Input, {
+            className: styles.input,
+            type: "date",
+            label: "Date de fin de s\xE9jour",
+            value: stayTo || "",
+            onValueChange: updateStayTo,
+            compact: true
+          })]
+        }), _jsx("div", {
+          ref: ref,
+          className: styles.tunnelOffers,
+          children: tunnelOptions.map(({
+            key,
+            value,
+            label
+          }) => {
+            return _jsx(TesterTunnelOffer, {
+              kind: key,
+              value: value,
+              label: label,
+              cartOffers: cartOffers,
+              updateCartOffers: updateCartOffers,
+              refreshCartContent: refreshCartContent
+            }, key.concat(label));
+          })
+        })]
+      }), _jsxs("div", {
+        className: styles.activeOverrides,
+        children: [_jsxs("span", {
+          className: styles.activeOverridesTitle,
+          children: ["Surcharge(s) active(s) :", " "]
+        }), hasActiveOverride ? activeOverridesKeys.map(key => {
+          const values = activeOverrides[key];
+          return _jsxs(_Fragment, {
+            children: [_jsxs("span", {
+              className: styles.activeOverride,
+              children: [key, " (", values.join(", "), ")"]
+            }, key), " "]
+          });
+        }) : _jsx("span", {
+          className: styles.noActiveOverride,
+          children: "Aucune"
+        })]
+      }), _jsx("div", {
+        className: styles.offers,
+        children: sortedOffers.map(({
+          title,
+          weight,
+          elementHTML
+        }) => {
+          return _jsxs("div", {
+            className: styles.offer,
+            children: [_jsx("div", {
+              className: styles.offerContent,
+              dangerouslySetInnerHTML: {
+                __html: elementHTML
+              }
+            }), _jsxs("div", {
+              className: styles.offerWeight,
+              children: ["Priorit\xE9 : ", _jsx("b", {
+                children: weight
+              })]
+            })]
+          }, title);
+        })
+      })]
+    })
+  });
+}