@useinsider/guido 3.2.0-beta.479e47d → 3.2.0-beta.488f8eb

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,41 +1,41 @@
-import { useConfig as S } from "../../../composables/useConfig.js";
-import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
-import { useRecommendationExtensionStore as d } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
-function y(e, u, r, o, s = "") {
-  const n = `{{${s}${e}_${u}_${r}}}`, t = `{{${s}${e}_${u}_currency}}`;
+import { useConfig as g } from "../../../composables/useConfig.js";
+import { useRecommendation as S } from "../../../composables/useRecommendation.js";
+import { useRecommendationExtensionStore as _ } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
+function y(r, c, e, o, s = "") {
+  const n = `{{${s}${r}_${c}_${e}}}`, t = `{{${s}${r}_${c}_currency}}`;
   return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function m(e, u, r, o, s, n) {
-  switch (u) {
+function f(r, c, e, o, s, n) {
+  switch (c) {
     case "productImage": {
-      const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${n}${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${r}_${o}_name}}`));
-      const c = e.querySelector("a");
-      c && c.setAttribute("href", `{{${n}${r}_${o}_url}}`);
+      const t = r.querySelector("img");
+      t && (t.setAttribute("src", `{{${n}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${e}_${o}_name}}`));
+      const i = r.querySelector("a");
+      i && i.setAttribute("href", `{{${n}${e}_${o}_url}}`);
       break;
     }
     case "productName": {
-      const t = e.querySelector("p");
+      const t = r.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = `{{${n}${r}_${o}_name}}`;
+        const i = t.querySelector("strong") || t;
+        i.textContent = `{{${n}${e}_${o}_name}}`;
       }
       break;
     }
     case "productPrice": {
-      const t = e.querySelector("p");
+      const t = r.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = y(r, o, "price", s, n);
+        const i = t.querySelector("strong") || t;
+        i.textContent = y(e, o, "price", s, n);
       }
       break;
     }
     case "productOldPrice": {
-      const t = e.querySelector("p");
+      const t = r.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = y(
-          r,
+        const i = t.querySelector("strong") || t;
+        i.textContent = y(
+          e,
           o,
           "original_price",
           s,
@@ -45,94 +45,127 @@ function m(e, u, r, o, s, n) {
       break;
     }
     case "productButton": {
-      const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${n}${r}_${o}_url}}`);
+      const t = r.querySelector("a");
+      t && t.setAttribute("href", `{{${n}${e}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
-      const t = e.querySelector(".omnibus-price-value");
+      const t = r.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${n}${r}_${o}_omnibus_price}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${e}_${o}_omnibus_price}}`;
+        const i = t.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_price"), i.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
-      const t = e.querySelector(".omnibus-discount-value");
+      const t = r.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${n}${r}_${o}_omnibus_discount}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${e}_${o}_omnibus_discount}}`;
+        const i = t.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_discount"), i.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
-      const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
+      const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), a = t.querySelector("p");
+        const i = t.getAttribute("product-attr"), a = t.querySelector("p");
         if (a) {
-          const i = a.querySelector("strong") || a;
-          i.textContent = `{{${n}${r}_${o}_${c}}}`;
+          const u = a.querySelector("strong") || a;
+          u.textContent = `{{${n}${e}_${o}_${i}}}`;
         }
       }
       break;
     }
   }
 }
-function q(e, u, r, o) {
-  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
+function q(r, c, e, o) {
+  r.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
     n.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const i = a.getAttribute("data-attribute-type") || "", l = a.querySelectorAll(".attribute-cell");
-      l.length > 0 ? l.forEach((p) => {
-        m(p, i, u, t, r, o);
-      }) : m(a, i, u, t, r, o);
+      const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
+      p.length > 0 ? p.forEach((l) => {
+        f(l, u, c, t, e, o);
+      }) : f(a, u, c, t, e, o);
     });
   });
 }
-function g(e, u, r, o) {
-  const s = e.querySelectorAll(".recommendation-product-row");
+function w(r, c, e, o) {
+  const s = r.querySelectorAll(".recommendation-product-row");
   if (!s.length)
     return;
-  const [n] = s, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  s.forEach((a, i) => {
-    a.querySelectorAll("[data-attribute-type]").forEach((p) => {
-      const b = p.getAttribute("data-attribute-type") || "";
-      p.querySelectorAll(".attribute-cell").forEach((f, $) => {
-        const A = i * c + $;
-        m(f, b, u, A, r, o);
+  const [n] = s, t = n.querySelector("[data-attribute-type]"), i = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  s.forEach((a, u) => {
+    a.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const d = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach((A, h) => {
+        const $ = u * i + h;
+        f(A, d, c, $, e, o);
       });
     });
   });
 }
-function h(e, u, r, o) {
-  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    g(n, u, r, o);
+function E(r, c, e, o) {
+  r.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
+    w(n, c, e, o);
   });
 }
-function C(e, u, r) {
-  const o = e.getAttribute("data-layout") || "grid", s = e.getAttribute("currency-alignment") || "after";
-  o === "list" ? q(e, u, s, r) : h(e, u, s, r);
+function C(r, c, e) {
+  const o = r.getAttribute("data-layout") || "grid", s = r.getAttribute("currency-alignment") || "after";
+  o === "list" ? q(r, c, s, e) : E(r, c, s, e);
 }
-function E(e, u) {
-  const r = e.match(/<!DOCTYPE[^>]*>/i);
-  return (r ? `${r[0]}
-` : "") + u.documentElement.outerHTML;
+function b(r, c, e) {
+  const o = new RegExp(`${c}\\s*:\\s*(\\d+)\\s*px`, "i"), s = r.match(o);
+  return s ? parseInt(s[1]) : e;
 }
-function T(e) {
-  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
+function P(r, c) {
+  let e = r.parentElement;
+  for (; e && e !== c; ) {
+    if (e.tagName === "TD") {
+      const o = e.getAttribute("width");
+      if (o && o.endsWith("%") && parseFloat(o) < 100)
+        return e;
+    }
+    e = e.parentElement;
+  }
+  return null;
+}
+function R(r) {
+  const c = r.getAttribute("style") || "", e = b(c, "width", 600), o = b(c, "padding", 0) * 2, s = Math.max(0, e - o);
+  s !== 0 && r.querySelectorAll("img.adapt-img").forEach((n) => {
+    if (n.hasAttribute("width"))
+      return;
+    const t = P(n, r);
+    if (!t)
+      return;
+    const i = t.getAttribute("width"), a = parseFloat(i), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(s * a / 100), l = Math.max(1, p - u);
+    n.setAttribute("width", String(l));
+    const d = n.getAttribute("style") || "";
+    if (!/\bwidth\s*:\s*\d/i.test(d)) {
+      const m = d && !d.trim().endsWith(";") ? "; " : "";
+      n.setAttribute("style", `${d}${m}width: ${l}px`);
+    }
+  });
+}
+function v(r, c) {
+  const e = r.match(/<!DOCTYPE[^>]*>/i);
+  return (e ? `${e[0]}
+` : "") + c.documentElement.outerHTML;
+}
+function O(r) {
+  const c = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(c, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
-    return e;
-  const { buildCampaignUrl: s } = _(), n = d();
+    return r;
+  const { buildCampaignUrl: s } = S(), n = _();
   n.recommendationCampaignUrls = {};
-  const { isFeatureEnabled: t } = S(), c = t("liquidSyntax") ? "reco_" : "";
-  return o.forEach((i) => {
-    var p, b;
-    const l = i.getAttribute("recommendation-id");
-    l && ((p = i.parentNode) == null || p.insertBefore(r.createComment("REC_START"), i), (b = i.parentNode) == null || b.insertBefore(r.createComment("REC_END"), i.nextSibling), s(l), C(i, l, c));
-  }), E(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  const { isFeatureEnabled: t } = g(), i = t("liquidSyntax") ? "reco_" : "";
+  return o.forEach((u) => {
+    var l, d;
+    const p = u.getAttribute("recommendation-id");
+    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), s(p), C(u, p, i), R(u));
+  }), v(c, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   y as formatPriceVariable,
-  T as prepareRecommendationBlocks
+  O as prepareRecommendationBlocks
 };

package/dist/config/migrator/index.js

@@ -1,13 +1,13 @@
-import { migrateCheckbox as t } from "./checkboxMigrator.js";
-import { migrateCouponBlock as o } from "./couponBlockMigrator.js";
-import { migrateItemsBlock as i } from "./itemsBlockMigrator.js";
-import { migrateRadioButton as e } from "./radioButtonMigrator.js";
-import { migrateRecommendation as a } from "./recommendationMigrator.js";
-import { migrateUnsubscribe as g } from "./unsubscribeMigrator.js";
-const u = async (r) => {
+import { migrateCheckbox as o } from "./checkboxMigrator.js";
+import { migrateCouponBlock as i } from "./couponBlockMigrator.js";
+import { migrateItemsBlock as e } from "./itemsBlockMigrator.js";
+import { migrateRadioButton as a } from "./radioButtonMigrator.js";
+import { migrateRecommendation as g } from "./recommendationMigrator.js";
+import { migrateUnsubscribe as n } from "./unsubscribeMigrator.js";
+const b = async (r, t = {}) => {
   let m = r;
-  return m = t(m), m = e(m), m = await g(m), m = o(m), m = a(m), m = i(m), m;
+  return m = o(m), m = a(m), m = await n(m), m = i(m), m = g(m, t), m = e(m), m;
 };
 export {
-  u as migrate
+  b as migrate
 };

package/dist/config/migrator/recommendation/compositionMapper.js

@@ -0,0 +1,98 @@
+import { DEFAULT_COMPOSITION as d, DEFAULT_VISIBILITY as I } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { ATTR_CUSTOM_PREFIX as l, ATTR_PRODUCT_BUTTON as k, ATTR_PRODUCT_OMNIBUS_DISCOUNT as A, ATTR_PRODUCT_OMNIBUS_PRICE as x, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_NAME as h, ATTR_PRODUCT_IMAGE as y } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { mapTextTheme as E, mapButtonTheme as O, mapImageTheme as b } from "./themeMapper.js";
+const C = "__title__", a = "product_attribute.";
+function N(r) {
+  const t = r.variable ?? "";
+  switch (t) {
+    case "p_recommendation_title":
+      return { key: C, kind: "title" };
+    case "p_image":
+      return { key: y, kind: "image" };
+    case "p_name":
+      return { key: h, kind: "text" };
+    case "p_price":
+      return { key: R, kind: "text" };
+    case "p_original_price":
+      return { key: f, kind: "text" };
+    case "p_omnibus_price":
+      return { key: x, kind: "text" };
+    case "p_omnibus_discount":
+      return { key: A, kind: "text" };
+    case "p_button":
+      return { key: k, kind: "button" };
+    default:
+      if (r.variableType === "p_attribute" || t.startsWith("p_attribute_")) {
+        const s = r.value ?? "", o = s.startsWith(a) ? s.slice(a.length) : s;
+        return o ? {
+          key: `${l}${o}`,
+          kind: "custom",
+          customAttrName: o,
+          customAttrValue: s || `${a}${o}`
+        } : null;
+      }
+      return null;
+  }
+}
+function p(r) {
+  const t = d.indexOf(r);
+  return t === -1 ? Number.POSITIVE_INFINITY : t;
+}
+function S(r) {
+  const t = {
+    composition: [],
+    visibility: { ...I },
+    customAttributes: [],
+    customAttrValues: {},
+    perElementStyles: {},
+    anyTextTrimming: !1
+  };
+  if (!r || r.length === 0)
+    return t.composition = [...d], t;
+  const s = [];
+  r.forEach((e, i) => {
+    const n = N(e);
+    if (n) {
+      if (n.kind === "title") {
+        t.titleVariable = e;
+        return;
+      }
+      s.push({
+        key: n.key,
+        kind: n.kind,
+        hidden: e.hidden === !0,
+        positionIdx: typeof e.positionIdx == "number" ? e.positionIdx : Number.MAX_SAFE_INTEGER,
+        legacy: e,
+        customAttrName: n.customAttrName,
+        customAttrValue: n.customAttrValue,
+        originalIndex: i
+      });
+    }
+  }), s.sort((e, i) => {
+    if (e.positionIdx !== i.positionIdx)
+      return e.positionIdx - i.positionIdx;
+    const n = p(e.key), u = p(i.key);
+    return n !== u ? n - u : e.originalIndex - i.originalIndex;
+  });
+  const o = {};
+  return s.forEach((e) => {
+    const { key: i, kind: n, hidden: u, legacy: m, customAttrName: c, customAttrValue: T } = e;
+    switch (t.composition.push(i), t.visibility[i] = !u, n === "custom" && c && T && (t.customAttributes.includes(c) || t.customAttributes.push(c), t.customAttrValues[i] = T), n) {
+      case "image":
+        o[i] = b(m.theme);
+        break;
+      case "button":
+        o[i] = O(m.theme);
+        break;
+      case "text":
+      case "custom": {
+        const _ = E(m.theme);
+        o[i] = _, _.textTrimming && (t.anyTextTrimming = !0);
+        break;
+      }
+    }
+  }), t.perElementStyles = o, t;
+}
+export {
+  S as mapComposition
+};

package/dist/config/migrator/recommendation/extractors.js

@@ -0,0 +1,27 @@
+const i = "You May Also Like!";
+function s(r) {
+  var e;
+  const o = r.querySelector(".ext-recommendation-title");
+  if (!o)
+    return i;
+  const t = (e = o.textContent) == null ? void 0 : e.trim();
+  return t && t.length > 0 ? t : i;
+}
+function u(r) {
+  const o = [
+    r,
+    ...Array.from(r.querySelectorAll(".product-card, .ext-recommendation-card"))
+  ];
+  let t = "";
+  return o.some((e) => {
+    const n = e.getAttribute("bgcolor");
+    if (n && n.trim())
+      return t = n.trim(), !0;
+    const c = (e.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
+    return c && c[1] ? (t = c[1].trim(), !0) : !1;
+  }), t;
+}
+export {
+  u as extractCardBgColor,
+  s as extractTitleText
+};