@useinsider/guido 3.2.1-beta.d58ee72 → 3.3.0-beta.1778fd7

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,88 +1,133 @@
-var x = Object.defineProperty;
-var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
-import h from "../../extensions/Blocks/RadioButton/template.js";
-class T {
+var k = Object.defineProperty;
+var v = (a, e, t) => e in a ? k(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var f = (a, e, t) => v(a, typeof e != "symbol" ? e + "" : e, t);
+import A from "../../extensions/Blocks/RadioButton/template.js";
+class C {
   constructor() {
-    b(this, "parser");
+    f(this, "parser");
     this.parser = new DOMParser();
   }
-  migrate(t) {
+  migrate(e) {
     try {
-      const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
-      return i.length === 0 ? t : (i.forEach((s) => {
-        if (s.classList.contains("radio-button-v2"))
+      const t = this.parser.parseFromString(e, "text/html"), o = t.querySelectorAll("td.radio-button-block"), s = t.querySelectorAll("td.radio-button-v2");
+      if (o.length === 0 && s.length === 0)
+        return console.debug("[guido:radio-migrator] skip", { reason: "no radio blocks" }), e;
+      console.debug("[guido:radio-migrator] entry", {
+        v1BlockCount: o.length,
+        v2BlockCount: s.length,
+        inputLength: e.length
+      });
+      let n = !1, i = 0;
+      o.forEach((r) => {
+        if (r.classList.contains("radio-button-v2"))
           return;
-        const n = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), o = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", o), y = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
+        const d = r.getAttribute("id"), g = this.extractTextFromElement(r, "ins-title"), p = this.extractTextFromElement(r, "ins-description"), m = this.extractTextFromElement(r, "ins-subscribe"), b = this.extractTextFromElement(r, "ins-unsubscribe"), y = this.buildTextBlock(g), x = this.buildTextBlock(p), T = this.buildTextBlock({ ...m, classList: "" }), B = this.buildTextBlock({ ...b, classList: "" }), S = A.replace("{-{-TITLE-}-}", y).replace("{-{-DESCRIPTION-}-}", x).replace("{-{-YES-}-}", T).replace("{-{-NO-}-}", B), h = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${S}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
-      }), e.documentElement.outerHTML);
-    } catch (e) {
-      return console.error("RadioButtonMigrator failed:", e), t;
+        h && r.parentNode && (h.setAttribute("id", d || ""), r.parentNode.replaceChild(h, r), n = !0, i++);
+      });
+      const l = this.healRadioButtonV2(t);
+      n = l || n;
+      const c = n ? t.documentElement.outerHTML : e, u = (c.match(/<td[^>]*radio-button-v2[^>]*>/gi) ?? []).map((r) => {
+        var g;
+        return (((g = r.match(/class="([^"]*)"/)) == null ? void 0 : g[1]) ?? "").split(/\s+/).filter(Boolean).includes("radio-button-block");
+      });
+      return console.debug("[guido:radio-migrator] exit", {
+        v1Converted: i,
+        healingMutated: l,
+        mutated: n,
+        finalV2HasBlock: u,
+        outputLength: c.length
+      }), c;
+    } catch (t) {
+      return console.error("[guido:radio-migrator] failed:", t), e;
     }
   }
-  extractTextFromElement(t, e) {
-    var o, c;
-    const i = t.querySelector(`.${e}`);
-    if (!i)
+  healRadioButtonV2(e) {
+    let t = !1, o = 0, s = 0;
+    const n = e.querySelectorAll("td.radio-button-v2");
+    return n.forEach((i) => {
+      var y;
+      i.classList.contains("radio-button-block") || (i.classList.add("radio-button-block"), o++, t = !0);
+      const l = i.querySelector("input#radioYes"), c = i.querySelector("input#radioNo");
+      if (!l || !c)
+        return;
+      const u = ((y = l.parentElement) == null ? void 0 : y.querySelector(":scope > p")) || null;
+      if (!u && !l.hasAttribute("align"))
+        return;
+      const r = l.closest("tr"), d = c.closest("tr");
+      if (!r || !d || r === d || !r.parentNode)
+        return;
+      const g = (u == null ? void 0 : u.innerHTML.trim()) || "Yes", p = d.cloneNode(!0), m = p.querySelector("input#radioNo"), b = p.querySelector("p");
+      m && (m.setAttribute("id", "radioYes"), m.removeAttribute("align")), b && (b.innerHTML = g), r.parentNode.replaceChild(p, r), s++, t = !0;
+    }), console.debug("[guido:radio-migrator] healing", {
+      v2BlockCount: n.length,
+      classAddedCount: o,
+      rowHealedCount: s,
+      mutated: t
+    }), t;
+  }
+  extractTextFromElement(e, t) {
+    var p, m;
+    const o = e.querySelector(`.${t}`);
+    if (!o)
       return {
-        text: e === "ins-title" ? "Title" : "Description",
+        text: t === "ins-title" ? "Title" : "Description",
         isBold: !1,
         isItalic: !1,
         align: "left",
         styles: "",
         classList: ""
       };
-    const s = i.querySelector("p");
+    const s = o.querySelector("p");
     if (!s)
       return {
-        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        text: ((p = o.textContent) == null ? void 0 : p.trim()) || (t === "ins-title" ? "Title" : "Description"),
         isBold: !1,
         isItalic: !1,
-        align: i.getAttribute("align") || "left",
+        align: o.getAttribute("align") || "left",
         styles: "",
         classList: ""
       };
-    const n = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
+    const n = ((m = s.textContent) == null ? void 0 : m.trim()) || (t === "ins-title" ? "Title" : "Description"), i = s.getAttribute("style") || "", l = o.getAttribute("align") || s.getAttribute("align") || "left", c = /font-weight\s*:\s*bold/i.test(i) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(i) || !!s.querySelector("i, em"), r = this.removeStyleProperties(i, ["font-weight", "font-style"]), d = this.convertInlineToBlock(r), g = o.getAttribute("class") || "";
     return {
       text: n,
-      isBold: p,
+      isBold: c,
       isItalic: u,
-      align: a,
-      styles: g,
-      classList: m
+      align: l,
+      styles: d,
+      classList: g
     };
   }
-  buildTextBlock(t) {
-    let e = t.text;
-    t.isBold && t.isItalic ? e = `<strong path="1,0"><em path="1,0,0">${e}</em></strong>` : t.isBold ? e = `<strong path="1,0">${e}</strong>` : t.isItalic && (e = `<em path="1,0">${e}</em>`);
-    const i = t.align ? ` align="${t.align}"` : "", s = t.styles ? ` style="${t.styles.replaceAll('"', "'")}"` : "";
+  buildTextBlock(e) {
+    let t = e.text;
+    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
+    const o = e.align ? ` align="${e.align}"` : "", s = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
     return `
-            <td class="esd-block-text ${t.classList}" ${i}>
+            <td class="esd-block-text ${e.classList}" ${o}>
                 <p path="1" ${s}>
-                    ${e}
+                    ${t}
                 </p>
             </td>
         `;
   }
-  removeStyleProperties(t, e) {
-    return t ? e.reduce((s, n) => {
-      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
-      return s.replace(l, "");
-    }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  removeStyleProperties(e, t) {
+    return e ? t.reduce((s, n) => {
+      const i = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
+      return s.replace(i, "");
+    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }
-  convertInlineToBlock(t) {
-    if (!t)
+  convertInlineToBlock(e) {
+    if (!e)
       return "";
-    let e = t.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
+    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
   }
 }
-function A(r) {
-  return new T().migrate(r);
+function q(a) {
+  return new C().migrate(a);
 }
 export {
-  A as migrateRadioButton
+  q as migrateRadioButton
 };

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
+};