ublo-lib 1.31.43 → 1.31.44

package/es/common/components/msem-preset-editor/services/url-params.js

@@ -1,26 +1,26 @@
-export const build = params => {
-  return Object.keys(params).map((key, i) => {
-    const param = params[key];
-    if (!param) return "";
-    const isObject = typeof param === "object";
-    const sign = i === 0 ? "?" : "&";
-    const value = isObject ? encodeURI(JSON.stringify(param)) : param;
-    return `${sign}${key}=${value}`;
-  }).join("");
+export const build = (params) => {
+    return Object.keys(params)
+        .map((key, i) => {
+        const param = params[key];
+        if (!param)
+            return "";
+        const isObject = typeof param === "object";
+        const sign = i === 0 ? "?" : "&";
+        const value = isObject ? encodeURI(JSON.stringify(param)) : param;
+        return `${sign}${key}=${value}`;
+    })
+        .join("");
 };
 export const getPresetUrl = (lang, preset, baseUrl) => {
-  const {
-    host,
-    protocol
-  } = window.location;
-  const isExternalUrl = baseUrl.startsWith("http");
-  const alreadyContainsLang = baseUrl.includes(`/${lang}`);
-  const encodedParams = build(preset);
-  if (isExternalUrl) {
-    return baseUrl.concat(encodedParams);
-  }
-  if (alreadyContainsLang) {
-    return `${protocol}//${host}${baseUrl}${encodedParams}`;
-  }
-  return `${protocol}//${host}/${lang}${baseUrl}${encodedParams}`;
-};
+    const { host, protocol } = window.location;
+    const isExternalUrl = baseUrl.startsWith("http");
+    const alreadyContainsLang = baseUrl.includes(`/${lang}`);
+    const encodedParams = build(preset);
+    if (isExternalUrl) {
+        return baseUrl.concat(encodedParams);
+    }
+    if (alreadyContainsLang) {
+        return `${protocol}//${host}${baseUrl}${encodedParams}`;
+    }
+    return `${protocol}//${host}/${lang}${baseUrl}${encodedParams}`;
+};

package/es/common/components/msem-preset-linker/components/actions.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export default function Actions({ mode, setMode }: {
+    mode: any;
+    setMode: any;
+}): React.JSX.Element;
+declare global {
+    interface Window {
+        Cms: any;
+        toggleMseMLinker: any;
+    }
+}

package/es/common/components/msem-preset-linker/components/actions.jsx

@@ -0,0 +1,60 @@
+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 classNames from "classnames";
+import * as Icons from "dt-design-system/es/icons";
+import { MODES } from "../msem-preset-linker";
+import css from "./actions.module.css";
+export default function Actions({ mode, setMode }) {
+    const toggleMode = React.useCallback(() => {
+        if (mode === MODES.CONNECTED) {
+            setMode(MODES.EDITING);
+            window.Cms.desactivate();
+            window.Cms.hideInfo();
+            window.Cms.pageUi.removeAttribute("active");
+            window.Cms.pageUi.setAttribute("hidden", "");
+            document.body.classList.add("msem-preset-linker--editing");
+        }
+        else {
+            setMode(MODES.CONNECTED);
+            window.Cms.pageUi.removeAttribute("hidden");
+            document.body.classList.remove("msem-preset-linker--editing");
+        }
+    }, [mode, setMode]);
+    const onSaveClick = () => __awaiter(this, void 0, void 0, function* () {
+        if (!window.Cms)
+            return;
+        window.Cms.pageUi.removeAttribute("hidden");
+        window.Cms.pageUi.setAttribute("active", "");
+        window.Cms.pageUi.startLoading();
+        setMode(MODES.CONNECTED);
+        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+            window.Cms.pageUi.unsavedChanges = false;
+            yield window.Cms.save();
+            window.Cms.pageUi.stopLoading();
+            window.Cms.pageUi.removeAttribute("active");
+        }), 200);
+    });
+    React.useEffect(() => {
+        window.toggleMseMLinker = toggleMode;
+    }, [mode, toggleMode]);
+    if (mode !== MODES.EDITING)
+        return null;
+    const cancelClasses = classNames(css.action, css.cancel);
+    const saveClasses = classNames(css.action, css.save);
+    return (<>
+      <button className={cancelClasses} onClick={toggleMode}>
+        <Icons.Cross />
+      </button>
+      <button className={saveClasses} onClick={onSaveClick}>
+        <Icons.Save />
+      </button>
+    </>);
+}

package/es/common/components/msem-preset-linker/components/overlays.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Props = {
+    mode: number;
+    target: HTMLElement | null;
+    setTarget: (target: HTMLElement | null) => void;
+};
+export default function Overlays({ mode, target, setTarget }: Props): React.JSX.Element;
+export {};

package/es/common/components/msem-preset-linker/components/overlays.jsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import classNames from "classnames";
+import Tooltip from "dt-design-system/es/tooltip";
+import * as Icons from "dt-design-system/es/icons";
+import { MODES } from "../msem-preset-linker";
+import css from "./overlays.module.css";
+export default function Overlays({ mode, target, setTarget }) {
+    const [sections, setSections] = React.useState([]);
+    React.useEffect(() => {
+        if (mode === MODES.EDITING) {
+            const targets = Array.from(document.querySelectorAll("section[data-class]"));
+            setSections(targets);
+            targets.forEach((target) => {
+                const section = target;
+                if (window.getComputedStyle(section).position !== "absolute") {
+                    section.style.setProperty("position", "relative");
+                }
+            });
+            return () => {
+                targets.forEach((target) => {
+                    const section = target;
+                    if (window.getComputedStyle(section).position !== "absolute") {
+                        section.style.removeProperty("position");
+                    }
+                });
+            };
+        }
+    }, [mode]);
+    if (mode !== MODES.EDITING)
+        return null;
+    return (<>
+      {sections.map((section) => {
+            const hasMseMPreset = section === null || section === void 0 ? void 0 : section.hasAttribute("data-msem-preset");
+            const hasObsoletePreset = section === null || section === void 0 ? void 0 : section.hasAttribute("data-config");
+            const hasPreset = hasMseMPreset || hasObsoletePreset;
+            const isActive = section === target;
+            const updateTarget = () => {
+                if (target)
+                    return;
+                setTarget(isActive ? null : section);
+            };
+            const classes = classNames(css.overlay, {
+                [css.active]: isActive,
+                [css.obsolete]: hasObsoletePreset,
+            });
+            const tooltip = hasObsoletePreset
+                ? "1 preset MseM obsolète"
+                : "1 preset MseM";
+            return ReactDOM.createPortal(<div className={classes} onClick={updateTarget} data-cms-remove="">
+            {hasPreset && (<Tooltip content={tooltip}>
+                <div className={css.presetIndicator}>
+                  <Icons.Tune className={css.presetIndicatorIcon}/>
+                </div>
+              </Tooltip>)}
+          </div>, section);
+        })}
+    </>);
+}

package/es/common/components/msem-preset-linker/components/resort-selector.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export default function ResortSelector({ resorts, resort, setResort }: {
+    resorts: any;
+    resort: any;
+    setResort: any;
+}): React.JSX.Element;

package/es/common/components/msem-preset-linker/components/resort-selector.jsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import Select from "dt-design-system/es/select";
+export default function ResortSelector({ resorts, resort, setResort }) {
+    const formatedResorts = resorts.map((resort) => ({
+        label: resort.label,
+        value: String(resort.resort),
+    }));
+    return (<Select value={resort} onValueChange={setResort} label="Destination" options={[
+            { label: "Sélectionnez une destination pour continuer", value: "" },
+            ...formatedResorts,
+        ]}/>);
+}

package/es/common/components/msem-preset-linker/hooks/use-msem-presets.d.ts

@@ -0,0 +1,4 @@
+export default function useMsemPresets({ mode, defaultOptions }: {
+    mode: any;
+    defaultOptions: any;
+}): void;

package/es/common/components/msem-preset-linker/hooks/use-msem-presets.js

@@ -3,51 +3,35 @@ import { useUbloContext } from "ublo/with-ublo";
 import { MODES, PRESET_ATTRIBUTE } from "../msem-preset-linker";
 import * as UrlParams from "../services/url-params";
 import * as MseM from "../../../utils/msem-widget";
-export default function useMsemPresets({
-  mode,
-  defaultOptions
-}) {
-  const {
-    lang,
-    cmsMode,
-    path
-  } = useUbloContext();
-  const isEnabled = cmsMode !== "editing" && cmsMode !== "info" && mode !== MODES.EDITING;
-  const handleSectionClick = React.useCallback(e => {
-    const target = e.target;
-    const section = target.closest(`section[${PRESET_ATTRIBUTE}]`);
-    const preset = section?.getAttribute(PRESET_ATTRIBUTE);
-    if (!preset) return;
-    const {
-      widget,
-      options = {},
-      presets,
-      url
-    } = JSON.parse(preset);
-    const allOptions = {
-      ...defaultOptions,
-      ...options
-    };
-    e.preventDefault();
-    e.stopPropagation();
-    if (url) {
-      const params = UrlParams.build({
-        options: allOptions,
-        presets
-      });
-      const endpoint = url.concat(params);
-      window.open(endpoint, "_blank");
-      return;
-    }
-    MseM.loadWidget(widget, allOptions, presets);
-  }, [defaultOptions]);
-  React.useEffect(() => {
-    const container = document.getElementById("__next");
-    if (isEnabled && container) {
-      container.addEventListener("click", handleSectionClick);
-      return () => {
-        container.removeEventListener("click", handleSectionClick);
-      };
-    }
-  }, [lang, handleSectionClick, isEnabled, path]);
-}
+// import * as MseM from "ublo-lib/es/common/utils/msem-widget";
+export default function useMsemPresets({ mode, defaultOptions }) {
+    const { lang, cmsMode, path } = useUbloContext();
+    const isEnabled = cmsMode !== "editing" && cmsMode !== "info" && mode !== MODES.EDITING;
+    const handleSectionClick = React.useCallback((e) => {
+        const target = e.target;
+        const section = target.closest(`section[${PRESET_ATTRIBUTE}]`);
+        const preset = section === null || section === void 0 ? void 0 : section.getAttribute(PRESET_ATTRIBUTE);
+        if (!preset)
+            return;
+        const { widget, options = {}, presets, url } = JSON.parse(preset);
+        const allOptions = Object.assign(Object.assign({}, defaultOptions), options);
+        e.preventDefault();
+        e.stopPropagation();
+        if (url) {
+            const params = UrlParams.build({ options: allOptions, presets });
+            const endpoint = url.concat(params);
+            window.open(endpoint, "_blank");
+            return;
+        }
+        MseM.loadWidget(widget, allOptions, presets);
+    }, [defaultOptions]);
+    React.useEffect(() => {
+        const container = document.getElementById("__next");
+        if (isEnabled && container) {
+            container.addEventListener("click", handleSectionClick);
+            return () => {
+                container.removeEventListener("click", handleSectionClick);
+            };
+        }
+    }, [lang, handleSectionClick, isEnabled, path]);
+}

package/es/common/components/msem-preset-linker/{index.js → index.d.ts}

@@ -1,2 +1,2 @@
 import MseMPresetLinker from "./msem-preset-linker";
-export default MseMPresetLinker;
+export default MseMPresetLinker;

package/es/common/components/msem-preset-linker/index.jsx

@@ -0,0 +1,2 @@
+import MseMPresetLinker from "./msem-preset-linker";
+export default MseMPresetLinker;

package/es/common/components/msem-preset-linker/msem-preset-linker.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+type Props = {
+    lang: "fr" | "en";
+    options: {
+        channel: string;
+        resort: string;
+        cartUrl?: string;
+        analytics?: () => void;
+    };
+    urls?: {
+        skiPasses?: {
+            winter: string;
+            summer: string;
+        };
+        lodgings?: {
+            winter: string;
+            summer: string;
+        };
+    };
+    noLodgingPage?: boolean;
+    children?: React.ReactNode;
+};
+export declare const MODES: {
+    CONNECTED: number;
+    EDITING: number;
+};
+export declare const PRESET_ATTRIBUTE = "data-msem-preset";
+export default function MseMPresetLinker({ lang, options, urls, noLodgingPage, children, }: Props): React.JSX.Element;
+export {};

package/es/common/components/msem-preset-linker/msem-preset-linker.jsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Router from "next/router";
+import Actions from "./components/actions";
+import css from "./msem-preset-linker.module.css";
+import Overlays from "./components/overlays";
+import EditorDialog from "../msem-preset-editor/editor-dialog";
+import useMsemPresets from "./hooks/use-msem-presets";
+export const MODES = {
+    CONNECTED: 0,
+    EDITING: 1,
+};
+export const PRESET_ATTRIBUTE = "data-msem-preset";
+export default function MseMPresetLinker({ lang, options, urls, noLodgingPage, children, }) {
+    const { cmsMode } = useUbloContext();
+    const [mode, setMode] = React.useState(MODES.CONNECTED);
+    const [target, setTarget] = React.useState(null);
+    const link = target === null || target === void 0 ? void 0 : target.querySelector(":scope > a");
+    const urlOverride = (link === null || link === void 0 ? void 0 : link.getAttribute("href")) || undefined;
+    const urlsWithOverride = Object.assign(Object.assign({}, urls), { override: urlOverride });
+    const removeObsoletePreset = () => {
+        const attributes = ["data-config", "data-widget", "data-resort"];
+        attributes.forEach((attribute) => {
+            target === null || target === void 0 ? void 0 : target.removeAttribute(attribute);
+        });
+        setTarget(null);
+    };
+    const updatePreset = (newPreset) => {
+        if (newPreset) {
+            target === null || target === void 0 ? void 0 : target.setAttribute(PRESET_ATTRIBUTE, JSON.stringify(newPreset));
+        }
+        else {
+            target === null || target === void 0 ? void 0 : target.removeAttribute(PRESET_ATTRIBUTE);
+        }
+        removeObsoletePreset();
+        setTarget(null);
+    };
+    const closeEditor = () => {
+        setTarget(null);
+    };
+    Router.ready(() => {
+        Router.events.on("routeChangeStart", () => {
+            setMode(MODES.CONNECTED);
+        });
+    });
+    useMsemPresets({ mode, defaultOptions: options });
+    if (!cmsMode)
+        return null;
+    return (<div className={css.linker}>
+      <Actions mode={mode} setMode={setMode}/>
+      <Overlays mode={mode} target={target} setTarget={setTarget}/>
+      <EditorDialog lang={lang} options={options} target={target} updatePreset={updatePreset} closeEditor={closeEditor} removeObsoletePreset={removeObsoletePreset} urls={urlsWithOverride} noLodgingPage={noLodgingPage}>
+        {children}
+      </EditorDialog>
+    </div>);
+}

package/es/common/components/msem-preset-linker/services/url-params.d.ts

@@ -0,0 +1 @@
+export declare const build: (params: Record<string, any>) => string;

package/es/common/components/msem-preset-linker/services/url-params.js

@@ -1,10 +1,13 @@
-export const build = params => {
-  return Object.keys(params).map((key, i) => {
-    const param = params[key];
-    if (!param) return "";
-    const isObject = typeof param === "object";
-    const sign = i === 0 ? "?" : "&";
-    const value = isObject ? encodeURI(JSON.stringify(param)) : param;
-    return `${sign}${key}=${value}`;
-  }).join("");
-};
+export const build = (params) => {
+    return Object.keys(params)
+        .map((key, i) => {
+        const param = params[key];
+        if (!param)
+            return "";
+        const isObject = typeof param === "object";
+        const sign = i === 0 ? "?" : "&";
+        const value = isObject ? encodeURI(JSON.stringify(param)) : param;
+        return `${sign}${key}=${value}`;
+    })
+        .join("");
+};

package/es/common/components/packages-selector/index.d.ts

@@ -0,0 +1,7 @@
+export default PackagesSelector;
+declare function PackagesSelector({ onSubmit, resort, selected }: {
+    onSubmit: any;
+    resort: any;
+    selected: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/packages-selector/index.js

@@ -1,53 +1,45 @@
+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 classNames from "classnames";
 import styles from "./index.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 Loader = () => _jsx("div", {
-  className: styles.loader
-});
-const PackagesSelector = ({
-  onSubmit,
-  resort,
-  selected
-}) => {
-  const [packages, setPackages] = React.useState();
-  React.useEffect(() => {
-    const getPackages = async () => {
-      const result = await fetch(`https://services.msem.tech/api/package/list/LBM?resort=${resort}`);
-      const json = await result.json();
-      setPackages(json);
-    };
-    getPackages();
-    return () => setPackages(undefined);
-  }, [resort]);
-  return _jsxs("div", {
-    className: styles.root,
-    children: [_jsx("div", {
-      className: styles.title,
-      children: "S\xE9lectionnez le package \xE0 associer \xE0 cette section."
-    }), !packages && _jsx(Loader, {}), packages && _jsx(_Fragment, {
-      children: _jsx("div", {
-        className: styles.inner,
-        children: packages.map((item, i) => {
-          const {
-            id,
-            name
-          } = item;
-          const classes = classNames(styles.item, {
-            [styles.itemSelected]: selected && parseInt(selected) === id
-          });
-          return _jsxs("button", {
-            className: classes,
-            onClick: () => onSubmit(id),
-            children: [_jsxs("b", {
-              children: ["#", id]
-            }), " ", name]
-          }, i);
-        })
-      })
-    })]
-  });
+const Loader = () => <div className={styles.loader}/>;
+const PackagesSelector = ({ onSubmit, resort, selected }) => {
+    const [packages, setPackages] = React.useState();
+    React.useEffect(() => {
+        const getPackages = () => __awaiter(void 0, void 0, void 0, function* () {
+            const result = yield fetch(`https://services.msem.tech/api/package/list/LBM?resort=${resort}`);
+            const json = yield result.json();
+            setPackages(json);
+        });
+        getPackages();
+        return () => setPackages(undefined);
+    }, [resort]);
+    return (<div className={styles.root}>
+      <div className={styles.title}>
+        Sélectionnez le package à associer à cette section.
+      </div>
+      {!packages && <Loader />}
+      {packages && (<>
+          <div className={styles.inner}>
+            {packages.map((item, i) => {
+                const { id, name } = item;
+                const classes = classNames(styles.item, {
+                    [styles.itemSelected]: selected && parseInt(selected) === id,
+                });
+                return (<button key={i} className={classes} onClick={() => onSubmit(id)}>
+                  <b>#{id}</b> {name}
+                </button>);
+            })}
+          </div>
+        </>)}
+    </div>);
 };
-export default PackagesSelector;
+export default PackagesSelector;

package/es/common/components/plausible/hooks/use-plausible.d.ts

@@ -0,0 +1,11 @@
+type Revenue = {
+    currency: string;
+    amount: number;
+};
+export default function useGoal(goal: string, props: Record<string, any>, revenue?: Revenue, overridenDomain?: string): void;
+declare global {
+    interface Window {
+        plausible: any;
+    }
+}
+export {};

package/es/common/components/plausible/hooks/use-plausible.js

@@ -2,28 +2,24 @@ import * as React from "react";
 import getConfig from "next/config";
 import load from "../services/load";
 import sendGoal from "../services/send-goal";
-const {
-  publicRuntimeConfig
-} = getConfig();
-const {
-  plausibleDomain
-} = publicRuntimeConfig;
+const { publicRuntimeConfig } = getConfig();
+const { plausibleDomain } = publicRuntimeConfig;
 export default function useGoal(goal, props, revenue, overridenDomain) {
-  const [loaded] = usePlausible(overridenDomain);
-  React.useEffect(() => {
-    if (!loaded || !window.plausible) return;
-    const defaultProps = {
-      path: document.location.pathname
-    };
-    sendGoal(goal, props || defaultProps, revenue);
-  }, [goal, loaded, props]);
+    const [loaded] = usePlausible(overridenDomain);
+    React.useEffect(() => {
+        if (!loaded || !window.plausible)
+            return;
+        const defaultProps = { path: document.location.pathname };
+        sendGoal(goal, props || defaultProps, revenue);
+    }, [goal, loaded, props]);
 }
 function usePlausible(overridenDomain) {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    if (!overridenDomain && !plausibleDomain) return;
-    load();
-    setLoaded(true);
-  }, [overridenDomain]);
-  return [loaded, setLoaded];
-}
+    const [loaded, setLoaded] = React.useState(false);
+    React.useEffect(() => {
+        if (!overridenDomain && !plausibleDomain)
+            return;
+        load();
+        setLoaded(true);
+    }, [overridenDomain]);
+    return [loaded, setLoaded];
+}

package/es/common/components/plausible/index.d.ts

@@ -0,0 +1,7 @@
+import Script from "./plausible";
+import * as Callback from "./services/callback";
+declare const callback: typeof Callback.MseM;
+export { default as load } from "./services/load";
+export { default as sendGoal } from "./services/send-goal";
+export { default as useGoal } from "./hooks/use-plausible";
+export { callback, Script };

package/es/common/components/plausible/index.js

@@ -4,4 +4,4 @@ const callback = Callback.MseM;
 export { default as load } from "./services/load";
 export { default as sendGoal } from "./services/send-goal";
 export { default as useGoal } from "./hooks/use-plausible";
-export { callback, Script };
+export { callback, Script };

package/es/common/components/plausible/plausible.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type Props = {
+    lang?: string;
+    source?: string;
+};
+export default function PlausibleScript({ lang, source, }: Props): React.JSX.Element;
+export {};

package/es/common/components/plausible/plausible.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import Script from "next/script";
+import getConfig from "next/config";
+const { publicRuntimeConfig } = getConfig();
+const { plausibleDomain } = publicRuntimeConfig;
+const DEFAULT_SOURCE = "https://plausible.io/js/script.revenue.file-downloads.outbound-links.js";
+export default function PlausibleScript({ lang, source = DEFAULT_SOURCE, }) {
+    const hasI18n = typeof plausibleDomain === "object";
+    if (hasI18n && !lang) {
+        // eslint-disable-next-line no-console
+        console.warn("PlausibleScript: the lang props is mandatory if you want to use a specific domain for each lang");
+    }
+    const domain = hasI18n && lang ? plausibleDomain[lang] : plausibleDomain;
+    if (!domain)
+        return null;
+    return <Script data-domain={domain} src={source}/>;
+}