ublo-lib 1.24.3 → 1.25.0

package/es/common/components/plausible/services/callback.js

@@ -1,130 +1,179 @@
 import sendGoal from "./send-goal";
-// TODO lors de la mise en prod de la nouvelle version PeekPerformances
-// rename events "MseM:" > "PeekPerformances:"
-// Retirer les anciennes props :
-// Name, Brand, Kind, Activity, Code, Product, cartId,
-// orderId, Code, Payment type
 const EVENT_NAMES = {
-    view_item: "MseM: View item",
-    add_to_cart: "MseM: Add to cart",
-    checkout: "MseM: Begin checkout",
-    add_payment_info: "MseM: Checkout process",
-    purchase: "MseM: Payment success",
-    payment_failure: "MseM: Payment failure",
+  view_item: "MseM: View item",
+  add_to_cart: "MseM: Add to cart",
+  checkout: "MseM: Begin checkout",
+  add_payment_info: "MseM: Checkout process",
+  purchase: "MseM: Payment success",
+  payment_failure: "MseM: Payment failure"
 };
-export function MseM({ event, payment_type: paymentType, execcode, items = [], orderId, cartId, currency = "EUR", }) {
-    const hoteId = getBusinessProvider();
-    const stay = getStay();
-    const amount = items.reduce((acc, item) => {
-        return acc + item.gtmData.price * item.gtmData.quantity;
-    }, 0);
-    const revenue = { currency, amount };
-    let name = EVENT_NAMES[event];
-    const firstProductProps = {
-        Name: items[0]?.gtmData.item_name,
-        Brand: items[0]?.gtmData.item_brand,
-        Kind: items[0]?.gtmData.item_category,
-        Activity: items[0]?.gtmData.item_category2,
-        Code: items[0]?.gtmData.item_category3,
-        Product: items[0]?.gtmData.item_variant,
-    };
-    switch (event) {
-        case "view_item": {
-            const formatedItems = formatPeekPerformancesItem(items);
-            const rawData = JSON.stringify({ products: formatedItems, hoteId, stay });
-            sendGoal(name, { ...firstProductProps, rawData });
-            break;
-        }
-        case "add_to_cart": {
-            const formatedItems = formatPeekPerformancesItem(items);
-            const rawData = JSON.stringify({ products: formatedItems, hoteId, stay });
-            sendGoal(name, { ...firstProductProps, rawData }, revenue);
-            break;
-        }
-        case "checkout": {
-            const formatedItems = formatPeekPerformancesItem(items);
-            const rawData = JSON.stringify({ products: formatedItems, hoteId, stay });
-            sendGoal(name, { cartId, rawData }, revenue);
-            break;
-        }
-        case "add_payment_info": {
-            const formatedItems = formatPeekPerformancesItem(items);
-            const rawData = JSON.stringify({
-                products: formatedItems,
-                hoteId,
-                stay,
-                paymentMethod: paymentType,
-            });
-            sendGoal(name, { cartId, "Payment type": paymentType, rawData }, revenue);
-            break;
-        }
-        case "purchase": {
-            const isFailure = execcode !== "0000";
-            const formatedItems = formatPeekPerformancesItem(items);
-            const attempts = (cartId && getPurchaseAttempts()[cartId]) || 0;
-            const rawData = JSON.stringify({
-                products: formatedItems,
-                hoteId,
-                stay,
-                attempts,
-                paymentMethod: paymentType,
-                execCode: execcode,
-            });
-            if (isFailure) {
-                name = EVENT_NAMES.payment_failure;
-                sendGoal(name, { cartId, orderId, Code: execcode, rawData }, revenue);
-                if (cartId) {
-                    setPurchaseAttempts(cartId, attempts + 1);
-                }
-            }
-            else {
-                sendGoal(name, { cartId, orderId, Code: execcode, rawData }, revenue);
-            }
-            break;
+export function MseM({
+  event,
+  payment_type: paymentType,
+  execcode,
+  items = [],
+  orderId,
+  cartId,
+  currency = "EUR"
+}) {
+  const hoteId = getBusinessProvider();
+  const stay = getStay();
+  const amount = items.reduce((acc, item) => {
+    return acc + item.gtmData.price * item.gtmData.quantity;
+  }, 0);
+  const revenue = {
+    currency,
+    amount
+  };
+  let name = EVENT_NAMES[event];
+  const firstProductProps = {
+    Name: items[0]?.gtmData.item_name,
+    Brand: items[0]?.gtmData.item_brand,
+    Kind: items[0]?.gtmData.item_category,
+    Activity: items[0]?.gtmData.item_category2,
+    Code: items[0]?.gtmData.item_category3,
+    Product: items[0]?.gtmData.item_variant
+  };
+  switch (event) {
+    case "view_item":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          ...firstProductProps,
+          rawData
+        });
+        break;
+      }
+    case "add_to_cart":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          ...firstProductProps,
+          rawData
+        }, revenue);
+        break;
+      }
+    case "checkout":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          cartId,
+          rawData
+        }, revenue);
+        break;
+      }
+    case "add_payment_info":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay,
+          paymentMethod: paymentType
+        });
+        sendGoal(name, {
+          cartId,
+          "Payment type": paymentType,
+          rawData
+        }, revenue);
+        break;
+      }
+    case "purchase":
+      {
+        const isFailure = execcode !== "0000";
+        const formatedItems = formatPeekPerformancesItem(items);
+        const attempts = cartId && getPurchaseAttempts()[cartId] || 0;
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay,
+          attempts,
+          paymentMethod: paymentType,
+          execCode: execcode
+        });
+        if (isFailure) {
+          name = EVENT_NAMES.payment_failure;
+          sendGoal(name, {
+            cartId,
+            orderId,
+            Code: execcode,
+            rawData
+          }, revenue);
+          if (cartId) {
+            setPurchaseAttempts(cartId, attempts + 1);
+          }
+        } else {
+          sendGoal(name, {
+            cartId,
+            orderId,
+            Code: execcode,
+            rawData
+          }, revenue);
         }
-    }
+        break;
+      }
+  }
 }
 const PURCHASE_ATTEMPTS_STORAGE_KEY = "purchase_attempts";
 function getPurchaseAttempts() {
-    try {
-        const storedAttempts = window.localStorage.getItem(PURCHASE_ATTEMPTS_STORAGE_KEY);
-        return storedAttempts !== null ? JSON.parse(storedAttempts) : {};
-    }
-    catch (e) {
-        return {};
-    }
+  try {
+    const storedAttempts = window.localStorage.getItem(PURCHASE_ATTEMPTS_STORAGE_KEY);
+    return storedAttempts !== null ? JSON.parse(storedAttempts) : {};
+  } catch (e) {
+    return {};
+  }
 }
 function setPurchaseAttempts(cartId, attempts) {
-    const purchaseAttempts = getPurchaseAttempts();
-    window.localStorage.setItem(PURCHASE_ATTEMPTS_STORAGE_KEY, JSON.stringify({ ...purchaseAttempts, [cartId]: attempts }));
+  const purchaseAttempts = getPurchaseAttempts();
+  window.localStorage.setItem(PURCHASE_ATTEMPTS_STORAGE_KEY, JSON.stringify({
+    ...purchaseAttempts,
+    [cartId]: attempts
+  }));
 }
 function formatPeekPerformancesItem(items) {
-    if (!items || !items.length)
-        return;
-    return items.map(({ gtmData }) => {
-        return {
-            category: gtmData.item_category,
-            subCategory: gtmData.item_category2,
-            merchant: gtmData.item_brand,
-            price: gtmData.price,
-        };
-    });
+  if (!items || !items.length) return;
+  return items.map(({
+    gtmData
+  }) => {
+    return {
+      category: gtmData.item_category,
+      subCategory: gtmData.item_category2,
+      merchant: gtmData.item_brand,
+      price: gtmData.price
+    };
+  });
 }
 function getStay() {
-    const stay = window.localStorage.getItem("stay");
-    if (stay) {
-        return stay;
-    }
+  const stay = window.localStorage.getItem("stay");
+  if (stay) {
+    return stay;
+  }
 }
 function getBusinessProvider() {
-    const businessProvider = window.localStorage.getItem("businessProvider");
-    if (businessProvider) {
-        try {
-            const { id } = JSON.parse(businessProvider);
-            if (id !== -1) {
-                return id;
-            }
-        }
-        catch (e) { }
-    }
-}
+  const businessProvider = window.localStorage.getItem("businessProvider");
+  if (businessProvider) {
+    try {
+      const {
+        id
+      } = JSON.parse(businessProvider);
+      if (id !== -1) {
+        return id;
+      }
+    } catch (e) {}
+  }
+}

package/es/common/components/plausible/services/load.js

@@ -1,7 +1,5 @@
 export default function load() {
-    window.plausible =
-        window.plausible ||
-            function () {
-                (window.plausible.q = window.plausible.q || []).push(arguments);
-            };
-}
+  window.plausible = window.plausible || function () {
+    (window.plausible.q = window.plausible.q || []).push(arguments);
+  };
+}

package/es/common/components/plausible/services/send-goal.js

@@ -1,5 +1,8 @@
 import load from "./load";
 export default function sendGoal(goal, props, revenue) {
-    load();
-    window.plausible(goal, { props, revenue });
-}
+  load();
+  window.plausible(goal, {
+    props,
+    revenue
+  });
+}

package/es/common/components/scroll-spy.js

@@ -1,46 +1,59 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import classNames from "classnames";
-export default function ScrollSpy({ className, items, Tag = "div", currentClassName, onUpdate, rootMargin = "-50% 0px", container, children, }) {
-    const [current, setCurrent] = React.useState();
-    const callback = React.useCallback((entries) => {
-        for (const entry of entries) {
-            if (container === entry.target) {
-                if (!entry.isIntersecting) {
-                    setCurrent(undefined);
-                    onUpdate?.(undefined);
-                }
-            }
-            else if (entry.isIntersecting) {
-                const index = items.indexOf(entry.target.id);
-                setCurrent(index);
-                onUpdate?.(entry.target);
-            }
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ScrollSpy({
+  className,
+  items,
+  Tag = "div",
+  currentClassName,
+  onUpdate,
+  rootMargin = "-50% 0px",
+  container,
+  children
+}) {
+  const [current, setCurrent] = React.useState();
+  const callback = React.useCallback(entries => {
+    for (const entry of entries) {
+      if (container === entry.target) {
+        if (!entry.isIntersecting) {
+          setCurrent(undefined);
+          onUpdate?.(undefined);
         }
-    }, [container, items, onUpdate]);
-    React.useEffect(() => {
-        const defaultTargets = container ? [container] : [];
-        const targets = items.length
-            ? items.reduce((acc, item) => {
-                const element = document.getElementById(item);
-                return element ? [...acc, element] : acc;
-            }, defaultTargets)
-            : defaultTargets;
-        const observer = new window.IntersectionObserver(callback, { rootMargin });
-        targets.forEach(observer.observe, observer);
-        return () => {
-            observer.disconnect();
-        };
-    }, [callback, container, items, rootMargin]);
-    return (_jsx(Tag, { className: className, children: children &&
-            children.map(({ props, ...child }, i) => {
-                const className = classNames({
-                    [props.className]: props.className,
-                    [currentClassName]: current === i,
-                });
-                return React.cloneElement(child, {
-                    ...props,
-                    className,
-                });
-            }) }));
-}
+      } else if (entry.isIntersecting) {
+        const index = items.indexOf(entry.target.id);
+        setCurrent(index);
+        onUpdate?.(entry.target);
+      }
+    }
+  }, [container, items, onUpdate]);
+  React.useEffect(() => {
+    const defaultTargets = container ? [container] : [];
+    const targets = items.length ? items.reduce((acc, item) => {
+      const element = document.getElementById(item);
+      return element ? [...acc, element] : acc;
+    }, defaultTargets) : defaultTargets;
+    const observer = new window.IntersectionObserver(callback, {
+      rootMargin
+    });
+    targets.forEach(observer.observe, observer);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, container, items, rootMargin]);
+  return _jsx(Tag, {
+    className: className,
+    children: children && children.map(({
+      props,
+      ...child
+    }, i) => {
+      const className = classNames({
+        [props.className]: props.className,
+        [currentClassName]: current === i
+      });
+      return React.cloneElement(child, {
+        ...props,
+        className
+      });
+    })
+  });
+}

package/es/common/components/scrolling-carousel/index.js

@@ -1,2 +1,2 @@
 import ScrollingCarousel from "./scrolling-carousel";
-export default ScrollingCarousel;
+export default ScrollingCarousel;

package/es/common/components/scrolling-carousel/scrolling-carousel.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import classNames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
@@ -6,61 +5,101 @@ import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import useWindowSizes from "../../hooks/use-window-sizes";
 import css from "./scrolling-carousel.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREV = 0;
 const NEXT = 1;
-export default function ScrollingCarousel({ className, children }) {
-    const { cmsMode } = useUbloContext();
-    const ref = React.useRef(null);
-    const zoneRef = React.useRef(null);
-    const [overflow, setOverflow] = React.useState(false);
-    const [controls, setControls] = React.useState({
-        prevDisabled: false,
-        nextDisabled: false,
-    });
-    const { width } = useWindowSizes();
-    const slideTo = (direction) => () => {
-        const zone = zoneRef.current;
-        const inner = ref.current;
-        if (zone && inner) {
-            const zoneContainer = zone;
-            const innerContainer = inner;
-            const firstSection = zoneContainer.querySelector("section:not([data-hidden], [hidden])");
-            if (firstSection) {
-                const scrollDistance = firstSection.clientWidth;
-                if (direction === PREV) {
-                    innerContainer.scrollLeft -= scrollDistance;
-                }
-                if (direction === NEXT) {
-                    innerContainer.scrollLeft += scrollDistance;
-                }
-            }
+export default function ScrollingCarousel({
+  className,
+  children
+}) {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const ref = React.useRef(null);
+  const zoneRef = React.useRef(null);
+  const [overflow, setOverflow] = React.useState(false);
+  const [controls, setControls] = React.useState({
+    prevDisabled: false,
+    nextDisabled: false
+  });
+  const {
+    width
+  } = useWindowSizes();
+  const slideTo = direction => () => {
+    const zone = zoneRef.current;
+    const inner = ref.current;
+    if (zone && inner) {
+      const zoneContainer = zone;
+      const innerContainer = inner;
+      const firstSection = zoneContainer.querySelector("section:not([data-hidden], [hidden])");
+      if (firstSection) {
+        const scrollDistance = firstSection.clientWidth;
+        if (direction === PREV) {
+          innerContainer.scrollLeft -= scrollDistance;
         }
-    };
-    const refreshControls = React.useCallback(() => {
-        const zone = zoneRef.current;
-        const inner = ref.current;
-        if (zone && inner) {
-            const zoneContainer = zone;
-            const innerContainer = inner;
-            setOverflow(innerContainer.clientWidth < zoneContainer.clientWidth);
-            setControls({
-                prevDisabled: innerContainer.scrollLeft === 0,
-                nextDisabled: innerContainer.scrollLeft ===
-                    Math.round(innerContainer.scrollWidth) -
-                        Math.round(innerContainer.clientWidth),
-            });
+        if (direction === NEXT) {
+          innerContainer.scrollLeft += scrollDistance;
         }
-    }, []);
-    React.useEffect(() => {
-        refreshControls();
-    }, [cmsMode, refreshControls]);
-    React.useEffect(() => {
-        const inner = ref.current;
-        if (inner) {
-            const innerContainer = inner;
-            innerContainer.scrollLeft = 0;
-        }
-    }, [width]);
-    const classes = classNames(css.carousel, className);
-    return (_jsxs("div", { className: classes, children: [overflow && (_jsxs("div", { className: css.controls, "data-controls": "", children: [_jsx(Button, { className: css.control, variant: "link", onClick: slideTo(PREV), disabled: controls.prevDisabled, "data-control": "prev", children: _jsx(Icons.ChevronLeft, { className: css.controlIcon }) }), _jsx(Button, { className: css.control, variant: "link", onClick: slideTo(NEXT), disabled: controls.nextDisabled, "data-control": "next", children: _jsx(Icons.ChevronRight, { className: css.controlIcon }) })] })), _jsx("div", { className: css.inner, ref: ref, onScroll: refreshControls, "data-inner": "", children: React.cloneElement(children, { ref: zoneRef }) })] }));
-}
+      }
+    }
+  };
+  const refreshControls = React.useCallback(() => {
+    const zone = zoneRef.current;
+    const inner = ref.current;
+    if (zone && inner) {
+      const zoneContainer = zone;
+      const innerContainer = inner;
+      setOverflow(innerContainer.clientWidth < zoneContainer.clientWidth);
+      setControls({
+        prevDisabled: innerContainer.scrollLeft === 0,
+        nextDisabled: innerContainer.scrollLeft === Math.round(innerContainer.scrollWidth) - Math.round(innerContainer.clientWidth)
+      });
+    }
+  }, []);
+  React.useEffect(() => {
+    refreshControls();
+  }, [cmsMode, refreshControls]);
+  React.useEffect(() => {
+    const inner = ref.current;
+    if (inner) {
+      const innerContainer = inner;
+      innerContainer.scrollLeft = 0;
+    }
+  }, [width]);
+  const classes = classNames(css.carousel, className);
+  return _jsxs("div", {
+    className: classes,
+    children: [overflow && _jsxs("div", {
+      className: css.controls,
+      "data-controls": "",
+      children: [_jsx(Button, {
+        className: css.control,
+        variant: "link",
+        onClick: slideTo(PREV),
+        disabled: controls.prevDisabled,
+        "data-control": "prev",
+        children: _jsx(Icons.ChevronLeft, {
+          className: css.controlIcon
+        })
+      }), _jsx(Button, {
+        className: css.control,
+        variant: "link",
+        onClick: slideTo(NEXT),
+        disabled: controls.nextDisabled,
+        "data-control": "next",
+        children: _jsx(Icons.ChevronRight, {
+          className: css.controlIcon
+        })
+      })]
+    }), _jsx("div", {
+      className: css.inner,
+      ref: ref,
+      onScroll: refreshControls,
+      "data-inner": "",
+      children: React.cloneElement(children, {
+        ref: zoneRef
+      })
+    })]
+  });
+}

package/es/common/components/scrolling-carousel/scrolling-carousel.module.css

@@ -26,6 +26,7 @@ svg.controlIcon {
   overflow: auto;
   scroll-behavior: smooth;
   scrollbar-width: thin;
+  scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
 }