ublo-lib 1.31.42 → 1.31.44

package/es/common/components/video-player/video-player.js

@@ -1,108 +1,84 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from "react";
 import classNames from "classnames";
 import ReactPlayer from "react-player/lazy";
 import Controls from "./controls";
 import * as Utils from "./utils";
 import styles from "./player.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Player = ({
-  url,
-  thumb,
-  forcePlay,
-  hideCustomControls,
-  ...props
-}) => {
-  const containerRef = React.useRef();
-  const playRef = React.useRef();
-  const [mounted, setMounted] = React.useState(false);
-  const [playing, setPlaying] = React.useState(false);
-  const [started, setStarted] = React.useState(false);
-  const [progress, setProgress] = React.useState(0);
-  const [loadedAmount, setLoadedAmount] = React.useState(0);
-  const [newProgress, setNewProgress] = React.useState();
-  const [duration, setDuration] = React.useState(0);
-  const [currentTime, setCurrentTime] = React.useState(0);
-  const [fullScreen, setFullScreen] = React.useState();
-  const [muted, setMuted] = React.useState(true);
-  const tick = e => {
-    const player = playRef.current;
-    const {
-      played,
-      playedSeconds,
-      loaded
-    } = e;
-    if (!player) return;
-    setProgress(played);
-    setLoadedAmount(loaded);
-    setCurrentTime(playedSeconds);
-    setDuration(player.getDuration());
-  };
-  const updatePlaying = () => {
-    setPlaying(!playing);
-  };
-  const startVideo = () => setStarted(true);
-  const endVideo = () => setPlaying(false);
-  React.useEffect(() => {
-    if (!mounted) {
-      setMounted(true);
-    }
-  }, [mounted]);
-  React.useEffect(() => {
-    const player = playRef.current;
-    if (!player) return;
-    player.seekTo(newProgress);
-  }, [newProgress]);
-  React.useEffect(() => {
-    const container = containerRef.current;
-    if (fullScreen === undefined || !container) return;
-    if (fullScreen) {
-      Utils.enterFullScreen(container);
-    } else {
-      Utils.exitFullScreen();
-    }
-  }, [fullScreen]);
-  React.useEffect(() => {
-    setPlaying(forcePlay);
-    setStarted(forcePlay);
-  }, [forcePlay]);
-  const classes = classNames(styles.player, {
-    [styles.playerStarted]: started,
-    [styles.playerPlaying]: playing
-  });
-  if (!mounted) return null;
-  return _jsxs("div", {
-    ref: containerRef,
-    className: classes,
-    children: [_jsx(ReactPlayer, {
-      ref: playRef,
-      light: forcePlay ? false : thumb,
-      url: url,
-      playing: playing,
-      muted: muted,
-      onClick: updatePlaying,
-      onStart: startVideo,
-      onProgress: tick,
-      onEnded: endVideo,
-      progressInterval: 160,
-      width: "100%",
-      height: "100%",
-      className: styles.playerInner,
-      ...props
-    }), !hideCustomControls && _jsx(Controls, {
-      started: started,
-      playing: playing,
-      updatePlaying: updatePlaying,
-      progress: progress,
-      loadedAmount: loadedAmount,
-      setNewProgress: setNewProgress,
-      duration: duration,
-      currentTime: currentTime,
-      fullScreen: fullScreen,
-      setFullScreen: setFullScreen,
-      muted: muted,
-      setMuted: setMuted
-    })]
-  });
+const Player = (_a) => {
+    var { url, thumb, forcePlay, hideCustomControls } = _a, props = __rest(_a, ["url", "thumb", "forcePlay", "hideCustomControls"]);
+    const containerRef = React.useRef();
+    const playRef = React.useRef();
+    const [mounted, setMounted] = React.useState(false);
+    const [playing, setPlaying] = React.useState(false);
+    const [started, setStarted] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    const [loadedAmount, setLoadedAmount] = React.useState(0);
+    const [newProgress, setNewProgress] = React.useState();
+    const [duration, setDuration] = React.useState(0);
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [fullScreen, setFullScreen] = React.useState();
+    const [muted, setMuted] = React.useState(true);
+    const tick = (e) => {
+        const player = playRef.current;
+        const { played, playedSeconds, loaded } = e;
+        if (!player)
+            return;
+        setProgress(played);
+        setLoadedAmount(loaded);
+        setCurrentTime(playedSeconds);
+        setDuration(player.getDuration());
+    };
+    const updatePlaying = () => {
+        setPlaying(!playing);
+    };
+    const startVideo = () => setStarted(true);
+    const endVideo = () => setPlaying(false);
+    React.useEffect(() => {
+        if (!mounted) {
+            setMounted(true);
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        const player = playRef.current;
+        if (!player)
+            return;
+        player.seekTo(newProgress);
+    }, [newProgress]);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (fullScreen === undefined || !container)
+            return;
+        if (fullScreen) {
+            Utils.enterFullScreen(container);
+        }
+        else {
+            Utils.exitFullScreen();
+        }
+    }, [fullScreen]);
+    React.useEffect(() => {
+        setPlaying(forcePlay);
+        setStarted(forcePlay);
+    }, [forcePlay]);
+    const classes = classNames(styles.player, {
+        [styles.playerStarted]: started,
+        [styles.playerPlaying]: playing,
+    });
+    if (!mounted)
+        return null;
+    return (<div ref={containerRef} className={classes}>
+      <ReactPlayer ref={playRef} light={forcePlay ? false : thumb} url={url} playing={playing} muted={muted} onClick={updatePlaying} onStart={startVideo} onProgress={tick} onEnded={endVideo} progressInterval={160} width="100%" height="100%" className={styles.playerInner} {...props}/>
+      {!hideCustomControls && (<Controls started={started} playing={playing} updatePlaying={updatePlaying} progress={progress} loadedAmount={loadedAmount} setNewProgress={setNewProgress} duration={duration} currentTime={currentTime} fullScreen={fullScreen} setFullScreen={setFullScreen} muted={muted} setMuted={setMuted}/>)}
+    </div>);
 };
-export default React.memo(Player);
+export default React.memo(Player);

package/es/common/hooks/use-account.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    channel?: string;
+    integration?: boolean;
+};
+export default function useAccount({ channel, integration, }?: Props): void;
+export {};

package/es/common/hooks/use-account.js

@@ -1,31 +1,39 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import * as Plausible from "../components/plausible";
 import { loadJS } from "../utils/load-js";
-export default function useAccount({
-  channel = "ESF",
-  integration
-} = {}) {
-  const {
-    lang
-  } = useUbloContext();
-  const widgetLang = React.useMemo(() => lang === "fr" ? "fr" : "en", [lang]);
-  React.useEffect(() => {
-    const startAccount = async () => {
-      await loadWidgetMseM(integration);
-      window.MseM.onLoad(() => {
-        window.MseM.customerAccount({
-          lang: widgetLang,
-          channel,
-          groundedTo: "#msem-account",
-          analytics: Plausible.callback
+export default function useAccount({ channel = "ESF", integration, } = {}) {
+    const { lang } = useUbloContext();
+    const widgetLang = React.useMemo(() => (lang === "fr" ? "fr" : "en"), [lang]);
+    React.useEffect(() => {
+        const startAccount = () => __awaiter(this, void 0, void 0, function* () {
+            yield loadWidgetMseM(integration);
+            window.MseM.onLoad(() => {
+                window.MseM.customerAccount({
+                    lang: widgetLang,
+                    channel,
+                    groundedTo: "#msem-account",
+                    analytics: Plausible.callback,
+                });
+            });
         });
-      });
-    };
-    startAccount();
-  }, [channel, integration, widgetLang]);
+        startAccount();
+    }, [channel, integration, widgetLang]);
+}
+function loadWidgetMseM(integration) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const source = integration
+            ? "https://widget-integration.msem.tech/static/js/widget-msem.js"
+            : "https://widget.msem.tech/static/js/widget-msem.js";
+        yield loadJS(source, "widget-msem");
+    });
 }
-async function loadWidgetMseM(integration) {
-  const source = integration ? "https://widget-integration.msem.tech/static/js/widget-msem.js" : "https://widget.msem.tech/static/js/widget-msem.js";
-  await loadJS(source, "widget-msem");
-}

package/es/common/hooks/use-faq.d.ts

@@ -0,0 +1,2 @@
+declare const useFaq: (selector: string, refresh: string) => void;
+export default useFaq;

package/es/common/hooks/use-faq.js

@@ -1,41 +1,40 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
-const buildClass = className => `${className}--opened`;
+const buildClass = (className) => `${className}--opened`;
 const useFaq = (selector = ".faq-block", refresh) => {
-  const [blocks, setBlocks] = React.useState([]);
-  const {
-    cmsMode
-  } = useUbloContext();
-  const clicked = React.useCallback((clickedBlock, blocks) => () => {
-    if (cmsMode) return;
-    const openedClass = buildClass(clickedBlock.classList[0]);
-    blocks.forEach(block => {
-      const {
-        classList
-      } = block;
-      block !== clickedBlock || block.classList.contains(openedClass) ? classList.remove(openedClass) : classList.add(openedClass);
-    });
-  }, [cmsMode]);
-  const init = React.useCallback((block, blocks) => {
-    block.clicked = clicked(block, blocks);
-    block.addEventListener("click", block.clicked);
-  }, [clicked]);
-  const cleanup = React.useCallback(block => {
-    block.removeEventListener("click", block.clicked);
-    const openedClass = buildClass(block.classList[0]);
-    block.classList.remove(openedClass);
-  }, []);
-  React.useEffect(() => {
-    if (cmsMode === undefined) {
-      setTimeout(() => {
-        const blocks = Array.from(document.querySelectorAll(selector));
-        setBlocks(blocks);
-      });
-    }
-  }, [cmsMode, selector, refresh]);
-  React.useEffect(() => {
-    blocks.forEach(block => init(block, blocks));
-    return () => blocks.forEach(cleanup);
-  }, [blocks, cleanup, init]);
+    const [blocks, setBlocks] = React.useState([]);
+    const { cmsMode } = useUbloContext();
+    const clicked = React.useCallback((clickedBlock, blocks) => () => {
+        if (cmsMode)
+            return;
+        const openedClass = buildClass(clickedBlock.classList[0]);
+        blocks.forEach((block) => {
+            const { classList } = block;
+            block !== clickedBlock || block.classList.contains(openedClass)
+                ? classList.remove(openedClass)
+                : classList.add(openedClass);
+        });
+    }, [cmsMode]);
+    const init = React.useCallback((block, blocks) => {
+        block.clicked = clicked(block, blocks);
+        block.addEventListener("click", block.clicked);
+    }, [clicked]);
+    const cleanup = React.useCallback((block) => {
+        block.removeEventListener("click", block.clicked);
+        const openedClass = buildClass(block.classList[0]);
+        block.classList.remove(openedClass);
+    }, []);
+    React.useEffect(() => {
+        if (cmsMode === undefined) {
+            setTimeout(() => {
+                const blocks = Array.from(document.querySelectorAll(selector));
+                setBlocks(blocks);
+            });
+        }
+    }, [cmsMode, selector, refresh]);
+    React.useEffect(() => {
+        blocks.forEach((block) => init(block, blocks));
+        return () => blocks.forEach(cleanup);
+    }, [blocks, cleanup, init]);
 };
-export default useFaq;
+export default useFaq;

package/es/common/hooks/use-in-view.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+type CmsMode = "connected" | "info" | "editing";
+export default function useInView(ref: React.MutableRefObject<HTMLElement>, cmsMode: CmsMode, selector: string, repeat?: boolean, intersectionValue?: number): void;
+export {};

package/es/common/hooks/use-in-view.js

@@ -1,86 +1,86 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 const options = {
-  rootMargin: "0px",
-  threshold: ratio(100)
+    rootMargin: "0px",
+    threshold: ratio(100),
 };
 export default function useInView(ref, cmsMode, selector, repeat = true, intersectionValue = 0.2) {
-  const {
-    lang,
-    path
-  } = useUbloContext();
-  const [compatible, setCompatible] = React.useState(false);
-  const callback = React.useCallback(entries => {
-    entries.forEach(entry => {
-      const {
-        intersectionRatio,
-        target
-      } = entry;
-      if (!target || !target.classList[0]) return;
-      const inViewClass = buildClass(target.classList[0]);
-      if (intersectionRatio !== 0) {
-        if (repeat) {
-          intersectionRatio <= intersectionValue ? target.classList.remove(inViewClass) : target.classList.add(inViewClass);
-        } else {
-          if (intersectionRatio >= intersectionValue) {
-            target.classList.add(inViewClass);
-          }
-        }
-      }
-    });
-  }, [intersectionValue, repeat]);
-  React.useEffect(() => {
-    setCompatible(typeof IntersectionObserver !== "undefined");
-    const container = ref.current;
-    const targets = selector !== undefined ? Array.from(container.querySelectorAll(selector)) : [container];
-    if (container) {
-      if (!cmsMode) {
-        if (!compatible) {
-          targets.forEach(target => {
-            const firstClassName = target.classList[0];
-            if (firstClassName) {
-              const inViewClassName = buildClass(firstClassName);
-              target.classList.add(inViewClassName);
-            }
-            target.setAttribute("data-in-view", "");
-          });
-        } else {
-          targets.forEach(target => {
-            const firstClassName = target.classList[0];
-            if (firstClassName) {
-              const inViewClassName = buildClass(firstClassName);
-              target.classList.remove(inViewClassName);
+    const { lang, path } = useUbloContext();
+    const [compatible, setCompatible] = React.useState(false);
+    const callback = React.useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { intersectionRatio, target } = entry;
+            if (!target || !target.classList[0])
+                return;
+            const inViewClass = buildClass(target.classList[0]);
+            if (intersectionRatio !== 0) {
+                if (repeat) {
+                    intersectionRatio <= intersectionValue
+                        ? target.classList.remove(inViewClass)
+                        : target.classList.add(inViewClass);
+                }
+                else {
+                    if (intersectionRatio >= intersectionValue) {
+                        target.classList.add(inViewClass);
+                    }
+                }
             }
-            target.removeAttribute("data-in-view");
-          });
-          const observer = new IntersectionObserver(callback, options);
-          const observe = () => {
-            targets.forEach(target => observer?.observe(target));
-          };
-          const unobserve = () => targets.forEach(target => {
-            if (!target) return;
-            const firstClassName = target.classList[0];
-            if (firstClassName) {
-              const inViewClassName = buildClass(firstClassName);
-              target.classList.remove(inViewClassName);
+        });
+    }, [intersectionValue, repeat]);
+    React.useEffect(() => {
+        setCompatible(typeof IntersectionObserver !== "undefined");
+        const container = ref.current;
+        const targets = selector !== undefined
+            ? Array.from(container.querySelectorAll(selector))
+            : [container];
+        if (container) {
+            if (!cmsMode) {
+                if (!compatible) {
+                    targets.forEach((target) => {
+                        const firstClassName = target.classList[0];
+                        if (firstClassName) {
+                            const inViewClassName = buildClass(firstClassName);
+                            target.classList.add(inViewClassName);
+                        }
+                        target.setAttribute("data-in-view", "");
+                    });
+                }
+                else {
+                    targets.forEach((target) => {
+                        const firstClassName = target.classList[0];
+                        if (firstClassName) {
+                            const inViewClassName = buildClass(firstClassName);
+                            target.classList.remove(inViewClassName);
+                        }
+                        target.removeAttribute("data-in-view");
+                    });
+                    const observer = new IntersectionObserver(callback, options);
+                    const observe = () => {
+                        targets.forEach((target) => observer === null || observer === void 0 ? void 0 : observer.observe(target));
+                    };
+                    const unobserve = () => targets.forEach((target) => {
+                        if (!target)
+                            return;
+                        const firstClassName = target.classList[0];
+                        if (firstClassName) {
+                            const inViewClassName = buildClass(firstClassName);
+                            target.classList.remove(inViewClassName);
+                        }
+                        target.removeAttribute("data-in-view");
+                        observer.disconnect();
+                    });
+                    observe();
+                    return () => {
+                        unobserve();
+                    };
+                }
             }
-            target.removeAttribute("data-in-view");
-            observer.disconnect();
-          });
-          observe();
-          return () => {
-            unobserve();
-          };
         }
-      }
-    }
-  }, [callback, cmsMode, compatible, lang, path, ref, selector]);
+    }, [callback, cmsMode, compatible, lang, path, ref, selector]);
 }
 function ratio(steps) {
-  return Array.from({
-    length: steps + 1
-  }).map((_, i) => i / steps);
+    return Array.from({ length: steps + 1 }).map((_, i) => i / steps);
 }
 function buildClass(className) {
-  return `${className}--in-view`;
-}
+    return `${className}--in-view`;
+}

package/es/common/hooks/use-injected-cms-markup.d.ts

@@ -0,0 +1,2 @@
+export default useInjectedCmsMarkup;
+declare function useInjectedCmsMarkup(entries: any, isReady: any): void;

package/es/common/hooks/use-injected-cms-markup.js

@@ -1,46 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 const findAllByKey = (obj, keyToFind) => {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    return key === keyToFind ? acc.concat(value) : typeof value === "object" ? acc.concat(findAllByKey(value, keyToFind)) : acc;
-  }, []);
+    return Object.entries(obj).reduce((acc, [key, value]) => {
+        return key === keyToFind
+            ? acc.concat(value)
+            : typeof value === "object"
+                ? acc.concat(findAllByKey(value, keyToFind))
+                : acc;
+    }, []);
 };
 const useInjectedCmsMarkup = (entries, isReady) => {
-  const {
-    cmsMode
-  } = useUbloContext();
-  const injectCmsMarkup = React.useCallback(async () => {
-    await window.Cms.register();
-    const formats = window.Cms.sectionClasses;
-    entries.forEach(entry => {
-      const {
-        key,
-        value
-      } = entry;
-      const isArray = Array.isArray(value);
-      const targets = findAllByKey(formats, key);
-      targets.forEach(target => {
-        if (!target?.markup) return;
-        if (isArray) {
-          const formatedRows = value.map(v => {
-            return {
-              name: v,
-              markup: `<tr><td>${v}</td></tr>`
-            };
-          });
-          const [anchor] = target.markup;
-          target.markup = anchor ? [anchor, ...formatedRows] : formatedRows;
-        } else {
-          target.markup = value;
+    const { cmsMode } = useUbloContext();
+    const injectCmsMarkup = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield window.Cms.register();
+        const formats = window.Cms.sectionClasses;
+        entries.forEach((entry) => {
+            const { key, value } = entry;
+            const isArray = Array.isArray(value);
+            const targets = findAllByKey(formats, key);
+            targets.forEach((target) => {
+                if (!(target === null || target === void 0 ? void 0 : target.markup))
+                    return;
+                if (isArray) {
+                    const formatedRows = value.map((v) => {
+                        return { name: v, markup: `<tr><td>${v}</td></tr>` };
+                    });
+                    const [anchor] = target.markup;
+                    target.markup = anchor ? [anchor, ...formatedRows] : formatedRows;
+                }
+                else {
+                    target.markup = value;
+                }
+            });
+        });
+        yield window.Cms.analyse();
+    }), [entries]);
+    React.useEffect(() => {
+        if (isReady && cmsMode === "connected") {
+            injectCmsMarkup();
         }
-      });
-    });
-    await window.Cms.analyse();
-  }, [entries]);
-  React.useEffect(() => {
-    if (isReady && cmsMode === "connected") {
-      injectCmsMarkup();
-    }
-  }, [cmsMode, injectCmsMarkup, isReady]);
+    }, [cmsMode, injectCmsMarkup, isReady]);
 };
-export default useInjectedCmsMarkup;
+export default useInjectedCmsMarkup;

package/es/common/hooks/use-packages.d.ts

@@ -0,0 +1,2 @@
+export default usePackages;
+declare function usePackages(defaultPopupContent: any, setPopupContent: any, cartUrl: any, selector?: string): void;