ublo-lib 1.31.29 → 1.31.30

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

@@ -24,7 +24,6 @@ export default function useTunnel({
     lang,
     breadcrumb
   } = useUbloContext();
-  const [started, setStared] = React.useState(false);
   const {
     path: esfPath
   } = multipleVillages ? breadcrumb?.next : breadcrumb;
@@ -33,7 +32,6 @@ export default function useTunnel({
   React.useEffect(() => {
     if (enableCustomOffers && cmsMode !== "editing" || !enableCustomOffers) {
       const startTunnel = async () => {
-        setStared(true);
         await loadWidgetMseM(integration);
         const categoryCode = window.sessionStorage.getItem("categoryCode") || undefined;
         window.MseM?.onLoad(() => {
@@ -51,11 +49,9 @@ export default function useTunnel({
           });
         });
       };
-      if (!started && (enableCustomOffers && customOffers !== undefined || !enableCustomOffers)) {
-        startTunnel();
-      }
+      startTunnel();
     }
-  }, [channel, cmsMode, customOffers, enableCustomOffers, esfUrl, groundedTo, integration, started, widgetLang]);
+  }, [channel, cmsMode, customOffers, enableCustomOffers, esfUrl, groundedTo, integration, widgetLang]);
 }
 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";

package/es/future/components/msem/index.js

@@ -0,0 +1,3 @@
+import { Script } from "./script";
+import Tunnel from "./tunnel";
+export { Script, Tunnel };

package/es/future/components/msem/script.js

@@ -0,0 +1,14 @@
+import NextScript from "next/script";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Script({
+  msemUrl
+}) {
+  const setLoaded = () => {
+    window.MseMLoaded = true;
+  };
+  return _jsx(NextScript, {
+    src: `${msemUrl}/static/js/widget-msem.js`,
+    onLoad: setLoaded,
+    defer: true
+  });
+}

package/es/future/components/msem/tunnel.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Utils from "./utils";
+import * as Plausible from "../plausible";
+export default React.memo(Tunnel);
+function Tunnel({
+  options,
+  presets,
+  children
+}) {
+  const patchedOptions = React.useMemo(() => ({
+    ...options,
+    analytics: (...args) => {
+      options?.analytics?.apply(null, args);
+      Plausible.callback.apply(null, args);
+    }
+  }), [options]);
+  React.useEffect(() => {
+    Utils.loadWidget("tunnel", patchedOptions, presets);
+  }, [patchedOptions, presets]);
+  return children;
+}

package/es/future/components/msem/types.js

@@ -0,0 +1 @@
+export {};

package/es/future/components/msem/utils.js

@@ -0,0 +1,15 @@
+export function loadWidget(widget, options = {}, presets = {}) {
+  if (window.MseMLoaded) {
+    window.MseM?.onLoad(() => window.requestAnimationFrame(() => window.MseM[widget](options, presets)));
+  } else {
+    setTimeout(() => {
+      const isGroundedTo = ("groundedTo" in options);
+      if (isGroundedTo) {
+        const selector = options.groundedTo;
+        const widgetStillHasTarget = document.querySelector(selector);
+        if (!widgetStillHasTarget) return;
+      }
+      loadWidget(widget, options, presets);
+    }, 200);
+  }
+}

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

@@ -0,0 +1,29 @@
+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;
+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]);
+}
+function usePlausible(overridenDomain) {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    if (!overridenDomain && !plausibleDomain) return;
+    load();
+    setLoaded(true);
+  }, [overridenDomain]);
+  return [loaded, setLoaded];
+}

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

@@ -0,0 +1,7 @@
+import Script from "./plausible";
+import * as Callback from "./services/callback";
+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 };

package/es/future/components/plausible/plausible.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Script from "next/script";
+import getConfig from "next/config";
+import { jsx as _jsx } from "react/jsx-runtime";
+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) {
+    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 _jsx(Script, {
+    "data-domain": domain,
+    src: source
+  });
+}

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

@@ -0,0 +1,201 @@
+import sendGoal from "./send-goal";
+const EVENT_NAMES = {
+  view_item: "MseM: View item",
+  add_to_cart: "MseM: Add to cart",
+  remove_from_cart: "MseM: Remove from 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,
+          stayFrom: stay?.from,
+          rawData
+        });
+        break;
+      }
+    case "add_to_cart":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          ...firstProductProps,
+          stayFrom: stay?.from,
+          rawData
+        }, revenue);
+        break;
+      }
+    case "remove_from_cart":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          ...firstProductProps,
+          stayFrom: stay?.from,
+          rawData
+        }, revenue);
+        break;
+      }
+    case "checkout":
+      {
+        const formatedItems = formatPeekPerformancesItem(items);
+        const rawData = JSON.stringify({
+          products: formatedItems,
+          hoteId,
+          stay
+        });
+        sendGoal(name, {
+          cartId,
+          stayFrom: stay?.from,
+          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,
+          stayFrom: stay?.from,
+          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,
+            stayFrom: stay?.from,
+            rawData
+          }, revenue);
+          if (cartId) {
+            setPurchaseAttempts(cartId, attempts + 1);
+          }
+        } else {
+          sendGoal(name, {
+            cartId,
+            orderId,
+            Code: execcode,
+            stayFrom: stay?.from,
+            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 {};
+  }
+}
+function setPurchaseAttempts(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
+    };
+  });
+}
+function getStay() {
+  const stay = window.sessionStorage.getItem("stay");
+  if (stay) {
+    return JSON.parse(stay);
+  }
+}
+function getBusinessProvider() {
+  const businessProvider = window.localStorage.getItem("businessProvider");
+  if (businessProvider) {
+    try {
+      const {
+        id
+      } = JSON.parse(businessProvider);
+      if (id !== -1) {
+        return id;
+      }
+    } catch (e) {}
+  }
+}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.31.29",
+  "version": "1.31.30",
   "peerDependencies": {
     "dt-design-system": "^3.8.3",
     "leaflet": "^1.9.1",