@useinsider/guido 3.2.0-beta.caa22bf → 3.2.0-beta.ccaf9f5

package/dist/config/migrator/recommendationMigrator.js

@@ -1,81 +1,297 @@
-import { BlockId as f } from "../../enums/block.js";
-import { useTemplateStore as u } from "../../stores/template.js";
-import { mapComposition as b } from "./recommendation/compositionMapper.js";
-import { extractTitleText as y, extractCardBgColor as C } from "./recommendation/extractors.js";
-import { buildBlockHtml as v } from "./recommendation/htmlBuilder.js";
-import { parseRecommendationId as w, parseLegacyConfig as R } from "./recommendation/parseLegacyConfig.js";
-import { mapSettings as S } from "./recommendation/settingsMapper.js";
-const h = 'td[esd-dev-product-config][class*="ins-recommendation-v3-block-"]:not(.recommendation-block-v2), td.product-block[esd-handler-name*="EmailRecommendationV3"][esd-dev-product-config]:not(.recommendation-block-v2)';
-function x(i, t, c) {
-  var s;
-  const o = w(t);
-  if (o === null)
-    return console.warn(
-      "[RecommendationMigrator] Skipping block — missing/invalid `ins-recommendation-v3-campaign-id`"
-    ), !1;
-  const r = R(t);
-  if (!r)
-    return console.warn(
-      `[RecommendationMigrator] Aborting block id=${o} — \`esd-dev-product-config\` missing or unable to be parsed`
-    ), !1;
-  const n = c[String(o)];
-  if (!n)
-    return console.warn(
-      `[RecommendationMigrator] Aborting block id=${o} — recommendationConfigs entry missing in Guido Config`
-    ), !1;
-  const a = S(n, r, o), e = b((s = r.composition) == null ? void 0 : s.variables), d = y(t), l = C(t), g = {
-    ...a,
-    composition: e.composition,
-    visibility: e.visibility,
-    textTrimming: e.anyTextTrimming
-  }, p = `
-        <table>
-            <tbody>
-                <tr>
-                    <td class="esd-structure" align="left">
-                        <table width="100%" cellpadding="0" cellspacing="0">
-                            <tbody>
-                                <tr>${v({
-    nodeConfig: g,
-    composition: e,
-    cardBg: l,
-    titleText: d,
-    legacyId: t.getAttribute("id") ?? void 0,
-    legacyBgColor: t.getAttribute("bgcolor") ?? void 0
-  })}</tr>
-                            </tbody>
-                        </table>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    `, m = i.parseFromString(p, "text/html").querySelector("td.esd-structure");
-  return !m || !t.parentNode ? (console.warn(
-    `[RecommendationMigrator] Aborting block id=${o} — failed to construct new HTML element`
-  ), !1) : (t.parentNode.replaceChild(m, t), !0);
-}
-function I(i, t = {}) {
-  const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(h));
-  try {
-    u().$patch((e) => {
-      e.migrations = {
-        ...e.migrations,
-        [f.Recommendation]: r.length
-      };
+var h = Object.defineProperty;
+var T = (d, e, t) => e in d ? h(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var A = (d, e, t) => T(d, typeof e != "symbol" ? e + "" : e, t);
+import { BLOCK_ID as S } from "../../extensions/Blocks/Recommendation/block.js";
+import P, { prepareProductRows as q } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { useTemplateStore as w } from "../../stores/template.js";
+import { getDefaultProducts as $ } from "../../extensions/Blocks/Recommendation/templates/utils.js";
+class B {
+  constructor() {
+    A(this, "parser");
+    this.parser = new DOMParser();
+  }
+  migrate(e) {
+    try {
+      const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll(
+        'td.ins-recommendation-v3-block-1:not(.recommendation-block-v2), td.product-block[esd-handler-name*="EmailRecommendationV3"]:not(.recommendation-block-v2)'
+      );
+      return w().$patch((i) => {
+        i.migrations = { ...i.migrations, [S]: s.length };
+      }), s.length === 0 ? e : (s.forEach((i) => {
+        const r = i.getAttribute("id"), n = this.extractBgColor(i), u = this.extractTitle(i), c = this.extractProductRows(i), l = P.replace("{-{-TITLE-}-}", u).replace("{-{-PRODUCT_ROWS-}-}", c), a = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${l}</tr></tbody></table>`,
+          "text/html"
+        ).querySelector(".recommendation-block-v2");
+        a && i.parentNode && (r && a.setAttribute("id", r), n && a.setAttribute("bgcolor", n), i.parentNode.replaceChild(a, i));
+      }), t.documentElement.outerHTML);
+    } catch (t) {
+      return console.error("RecommendationMigrator failed:", t), e;
+    }
+  }
+  /**
+   * Extracts background color from old block
+   * @param block - The old recommendation block element
+   * @returns The background color value or empty string
+   */
+  extractBgColor(e) {
+    const t = e.getAttribute("bgcolor");
+    if (t)
+      return t.trim();
+    const s = e.getAttribute("style");
+    if (s) {
+      const o = s.match(/background-color\s*:\s*([^;]+)/i);
+      if (o && o[1])
+        return o[1].trim();
+    }
+    return "";
+  }
+  /**
+   * Extracts background color from product card wrapper element
+   * @param cardElement - The product card TD element
+   * @returns The background color value or empty string
+   */
+  extractCardBgColor(e) {
+    const t = e.getAttribute("bgcolor");
+    if (t)
+      return t.trim();
+    const s = e.getAttribute("style");
+    if (s) {
+      const o = s.match(/background-color\s*:\s*([^;]+)/i);
+      if (o && o[1])
+        return o[1].trim();
+    }
+    return "";
+  }
+  /**
+   * Extracts title from old block and converts to new structure
+   * @param block - The old recommendation block element
+   * @returns HTML string for the title block
+   */
+  extractTitle(e) {
+    var g, a;
+    const t = e.querySelector(".ext-recommendation-title");
+    if (!t)
+      return this.buildTitleBlock({
+        text: "You May Also Like!",
+        isBold: !0,
+        isItalic: !1,
+        align: "center",
+        styles: "font-size: 28px; color: #333333;"
+      });
+    const s = t.querySelector("p");
+    if (!s) {
+      const p = ((g = t.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", b = t.getAttribute("align") || "center";
+      return this.buildTitleBlock({
+        text: p,
+        isBold: !0,
+        isItalic: !1,
+        align: b,
+        styles: "font-size: 28px; color: #333333;"
+      });
+    }
+    const o = ((a = s.textContent) == null ? void 0 : a.trim()) || "You May Also Like!", i = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", n = /font-weight\s*:\s*bold/i.test(r) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(r) || !!s.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), l = this.convertInlineToBlock(c);
+    return this.buildTitleBlock({
+      text: o,
+      isBold: n,
+      isItalic: u,
+      align: i,
+      styles: l
     });
-  } catch {
   }
-  if (r.length === 0)
-    return i;
-  let n = 0;
-  return r.forEach((a) => {
+  /**
+   * Extracts product configuration from old block and generates new product rows
+   * @param block - The old recommendation block element
+   * @returns HTML string for product rows
+   */
+  extractProductRows(e) {
+    const t = this.extractProductConfig(e);
+    if (!t)
+      return console.warn("[RecommendationMigrator] No product config found, using defaults"), this.generateProductRows(6, 3, {});
+    const { totalCount: s, productsPerRow: o } = t, i = this.extractProductStyles(e);
+    return this.generateProductRows(s, o, i);
+  }
+  /**
+   * Extracts Stripo padding/margin utility classes from a class string
+   * @param classString - Space-separated class string from element
+   * @returns Filtered Stripo utility classes as a space-separated string
+   */
+  extractStripoClasses(e) {
+    return e ? e.split(/\s+/).filter((o) => /^es-(p\d+|m[-\d])/.test(o)).join(" ") : "";
+  }
+  /**
+   * Extracts product configuration from old block
+   * @param block - The old recommendation block element
+   * @returns Object with totalCount and productsPerRow, or null if parsing fails
+   */
+  extractProductConfig(e) {
+    const t = e.getAttribute("esd-dev-product-config");
+    if (!t)
+      return null;
     try {
-      x(c, a, t) && (n += 1);
-    } catch (e) {
-      console.error("[RecommendationMigrator] Unexpected error migrating block:", e);
+      const s = this.unescapeJsonString(t), o = JSON.parse(s);
+      return {
+        totalCount: o.totalCount ?? 6,
+        productsPerRow: o.rowCount ?? 3
+      };
+    } catch (s) {
+      return console.error("[RecommendationMigrator] Failed to parse product config:", s), console.error(
+        "[RecommendationMigrator] Error details:",
+        s instanceof Error ? s.message : String(s)
+      ), null;
+    }
+  }
+  /**
+   * Decodes HTML entities from JSON string
+   * @param text - The encoded string
+   * @returns Decoded string
+   */
+  unescapeJsonString(e) {
+    return e.replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&#x27;/g, "'").replace(/&quot;/g, '"').replace(/\\\\"/g, "'");
+  }
+  /**
+   * Generates product rows using prepareProductRows with default product data
+   * @param totalCount - Total number of products to display
+   * @param productsPerRow - Number of products in each row
+   * @param extractedStyles - Styles extracted from old product elements
+   * @returns HTML string for product rows with applied styles
+   */
+  generateProductRows(e, t, s) {
+    const o = $(), i = [];
+    for (let n = 0; n < e; n++) {
+      const u = o[n % o.length];
+      i.push({ ...u });
+    }
+    let r = q(i, t);
+    return r = this.applyExtractedStyles(r, s), r;
+  }
+  /**
+   * Extracts styles from old product elements
+   * @param block - The old recommendation block element
+   * @returns Object with extracted styles for each element type
+   */
+  extractProductStyles(e) {
+    const t = {}, s = e.querySelector(".product-card");
+    if (!s)
+      return console.warn("[RecommendationMigrator] No product card found, using default styles"), t;
+    const o = this.extractCardBgColor(s);
+    o && (t.cardBgColor = o);
+    const i = s.querySelector(".ext-product-image");
+    if (i) {
+      const l = i.querySelector("img"), g = l == null ? void 0 : l.getAttribute("width"), a = i.getAttribute("style") || "", p = i.getAttribute("align") || "center", b = i.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.imageWidth = g || "120", t.imageAlign = p, t.imageTdStyle = a, t.imageClasses = m;
+    }
+    const r = s.querySelector(".ext-product-name");
+    if (r) {
+      const l = r.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.nameStyle = g, t.nameAlign = a, t.nameTdStyle = p, t.nameClasses = m;
+    }
+    const n = s.querySelector(".ext-product-price");
+    if (n) {
+      const l = n.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = n.getAttribute("align") || "center", p = n.getAttribute("style") || "", b = n.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.priceStyle = g, t.priceAlign = a, t.priceTdStyle = p, t.priceClasses = m;
+    }
+    const u = s.querySelector(".ext-product-original-price");
+    if (u) {
+      const l = u.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.oldPriceStyle = g, t.oldPriceAlign = a, t.oldPriceTdStyle = p, t.oldPriceClasses = m;
+    }
+    const c = s.querySelector(".ext-product-button");
+    if (c) {
+      const l = c.querySelector(".es-button-border"), g = c.querySelector("a.es-button"), a = (l == null ? void 0 : l.getAttribute("style")) || "", p = (g == null ? void 0 : g.getAttribute("style")) || "", b = c.getAttribute("align") || "center", m = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
+      t.buttonBorderStyle = a, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = m, t.buttonClasses = C, t.buttonText = y;
     }
-  }), n > 0 && console.info(`[RecommendationMigrator] Migrated ${n} legacy Recommendation block(s)`), o.documentElement.outerHTML;
+    return t;
+  }
+  /**
+   * Applies extracted styles to the generated HTML
+   * @param html - The generated HTML from prepareProductRows
+   * @param extractedStyles - Styles extracted from old product elements
+   * @returns HTML with applied styles
+   */
+  applyExtractedStyles(e, t) {
+    if (!t || Object.keys(t).length === 0)
+      return e;
+    const s = this.parser.parseFromString(`<table>${e}</table>`, "text/html");
+    t.cardBgColor && s.querySelectorAll(".product-attribute-cell").forEach((r) => {
+      r.setAttribute("bgcolor", t.cardBgColor);
+    }), (t.imageWidth || t.imageAlign || t.imageTdStyle || t.imageClasses) && s.querySelectorAll(".product-image").forEach((r) => {
+      if (t.imageAlign && r.setAttribute("align", t.imageAlign), t.imageTdStyle && r.setAttribute("style", t.imageTdStyle), t.imageClasses) {
+        const c = `${r.getAttribute("class") || ""} ${t.imageClasses}`.trim();
+        r.setAttribute("class", c);
+      }
+      const n = r.querySelector("img");
+      n && t.imageWidth && n.setAttribute("width", t.imageWidth);
+    }), (t.nameStyle || t.nameAlign || t.nameTdStyle || t.nameClasses) && s.querySelectorAll(".product-name").forEach((r) => {
+      if (t.nameAlign && r.setAttribute("align", t.nameAlign), t.nameTdStyle && r.setAttribute("style", t.nameTdStyle), t.nameClasses) {
+        const c = `${r.getAttribute("class") || ""} ${t.nameClasses}`.trim();
+        r.setAttribute("class", c);
+      }
+      const n = r.querySelector("p");
+      n && t.nameStyle && n.setAttribute("style", t.nameStyle);
+    }), (t.priceStyle || t.priceAlign || t.priceTdStyle || t.priceClasses) && s.querySelectorAll(".product-price").forEach((r) => {
+      if (t.priceAlign && r.setAttribute("align", t.priceAlign), t.priceTdStyle && r.setAttribute("style", t.priceTdStyle), t.priceClasses) {
+        const c = `${r.getAttribute("class") || ""} ${t.priceClasses}`.trim();
+        r.setAttribute("class", c);
+      }
+      const n = r.querySelector("p");
+      n && t.priceStyle && n.setAttribute("style", t.priceStyle);
+    }), (t.oldPriceStyle || t.oldPriceAlign || t.oldPriceTdStyle || t.oldPriceClasses) && s.querySelectorAll(".product-old-price").forEach((r) => {
+      if (t.oldPriceAlign && r.setAttribute("align", t.oldPriceAlign), t.oldPriceTdStyle && r.setAttribute("style", t.oldPriceTdStyle), t.oldPriceClasses) {
+        const c = `${r.getAttribute("class") || ""} ${t.oldPriceClasses}`.trim();
+        r.setAttribute("class", c);
+      }
+      const n = r.querySelector("p");
+      n && t.oldPriceStyle && n.setAttribute("style", t.oldPriceStyle);
+    }), (t.buttonBorderStyle || t.buttonLinkStyle || t.buttonAlign || t.buttonTdStyle || t.buttonClasses) && s.querySelectorAll(".product-button").forEach((r) => {
+      if (t.buttonAlign && r.setAttribute("align", t.buttonAlign), t.buttonTdStyle && r.setAttribute("style", t.buttonTdStyle), t.buttonClasses) {
+        const l = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
+        r.setAttribute("class", l);
+      }
+      const n = r.querySelector(".es-button-border");
+      n && t.buttonBorderStyle && n.setAttribute("style", t.buttonBorderStyle);
+      const u = r.querySelector("a.es-button");
+      u && (t.buttonLinkStyle && u.setAttribute("style", t.buttonLinkStyle), t.buttonText && (u.textContent = t.buttonText));
+    });
+    const o = s.querySelector("table");
+    return (o == null ? void 0 : o.innerHTML) || e;
+  }
+  /**
+   * Builds title block with proper structure
+   */
+  buildTitleBlock(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 s = e.align ? ` align="${e.align}"` : "", o = e.styles ? ` style="${e.styles}"` : "";
+    return `
+            <td class="esd-block-text es-p10t es-p10b es-p20l es-p20r"${s}>
+                <p path="1"${o}>
+                    ${t}
+                </p>
+            </td>
+        `;
+  }
+  /**
+   * Removes specified style properties from a style string
+   */
+  removeStyleProperties(e, t) {
+    return e ? t.reduce((o, i) => {
+      const r = new RegExp(`${i}\\s*:\\s*[^;]*;?`, "gi");
+      return o.replace(r, "");
+    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  }
+  /**
+   * Converts inline display to block display
+   */
+  convertInlineToBlock(e) {
+    if (!e)
+      return "";
+    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, "").replace(/"/g, "'").trim();
+  }
+}
+function v(d) {
+  return new B().migrate(d);
 }
 export {
-  I as migrateRecommendation
+  v as migrateRecommendation
 };

package/dist/enums/displayConditions.js

@@ -0,0 +1,80 @@
+const e = [
+  {
+    category: "Demographics",
+    conditions: [
+      {
+        id: 1,
+        name: "Language",
+        description: "Users who are in the English will see the banner",
+        beforeScript: '{% if language == "en_US" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 2,
+        name: "Country",
+        description: "Only people who live in Australia will see the banner",
+        beforeScript: '{% if country == "Australia" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 3,
+        name: "Country & City",
+        description: "Only people who are located in that country and city",
+        beforeScript: '{% if country == "United Kingdom" and city == "London" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 4,
+        name: "Age (Less than operator)",
+        description: "Users whose age is less than 18",
+        beforeScript: "{% if age < 18 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 5,
+        name: "Age (Equal and greater than operator)",
+        description: "Users whose age is equal or greater than 25",
+        beforeScript: "{% if age >= 25 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 6,
+        name: "Age (Greater than & less than operators)",
+        description: "Users whose age is between 18 and 25",
+        beforeScript: "{% if age > 18 and age < 25 %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 7,
+        name: "Gender",
+        description: "Users whose gender is Female",
+        beforeScript: '{% if gender == "Female" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 8,
+        name: "State",
+        description: "Users whose state is one of the followings. c_state is a custom attribute. Use this condition if you have the attribute with the same naming. ",
+        beforeScript: '{% if c_state == "VIC" or c_state == "NSW" or c_state == "QLD" %}',
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 9,
+        name: "VIP User",
+        description: "Users who are VIP users for that brand. c_is_vip_user = true. c_is_vip_user is a custom attribute. Use this condition if you have the attribute with the same naming.",
+        beforeScript: "{% if c_is_vip_user %}",
+        afterScript: "{% endif %}"
+      },
+      {
+        id: 10,
+        name: "Membership Type",
+        description: "Users who belong to gold or silver membership type. c_is_gold_member = true, c_is_silver_member = true. These are custom attributes. Use this condition if you have the attribute with the same naming.",
+        beforeScript: "{% if c_is_gold_member or c_is_silver_member %}",
+        afterScript: "{% endif %}"
+      }
+    ]
+  }
+];
+export {
+  e as displayConditions
+};

package/dist/enums/extensions/recommendationBlock.js

@@ -18,8 +18,7 @@ const s = {
   { text: "after the amount", value: "1" }
 ], d = [
   { text: "dot(.)", value: "." },
-  { text: "comma(,)", value: "," },
-  { text: "space( )", value: " " }
+  { text: "comma(,)", value: "," }
 ], p = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },

package/dist/extensions/Blocks/RadioButton/template.js

@@ -119,7 +119,7 @@ const e = {
                                                         id="radioYes"
                                                         name="unsubscribe"
                                                         data-cke-editable="1"
-                                                        style="margin: 0px; vertical-align: middle;">
+                                                        style="margin: 0px; vertical-align: middle;>
                                                     </td>
                                                 {-{-YES-}-}
                                             </tr>

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,15 +1,15 @@
-var I = Object.defineProperty;
-var k = (r, n, t) => n in r ? I(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
-var u = (r, n, t) => k(r, typeof n != "symbol" ? n + "" : n, t);
-import { BlockId as _ } from "../../../enums/block.js";
-import { getMigrationBannerHtml as B } from "../../../utils/migrationBannerHtml.js";
+var k = Object.defineProperty;
+var I = (r, n, t) => n in r ? k(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var u = (r, n, t) => I(r, typeof n != "symbol" ? n + "" : n, t);
+import { BlockId as B } from "../../../enums/block.js";
+import { getMigrationBannerHtml as _ } from "../../../utils/migrationBannerHtml.js";
 import { Block as b, BlockCompositionType as R, ModificationDescription as y } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { regenerateMobileProductRows as C } from "./controls/main/utils.js";
 import { ensureMobileCssRulesExist as g, setMobileLayoutOptOut as d, hasMobileLayoutOptOut as A } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as c } from "./services/configService.js";
 import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
 import { getDefaultTemplate as E } from "./templates/grid/template.js";
-const f = _.Recommendation, l = "recommendation-block-v2", m = "recommendation-id";
+const f = B.Recommendation, a = "recommendation-block-v2", l = "recommendation-id";
 let h = !1;
 class q extends b {
   constructor() {
@@ -38,7 +38,7 @@ class q extends b {
     );
   }
   getSettingsPanelTitleHtml() {
-    return B(
+    return _(
       f,
       this.api.translate("Recommendation Block"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
@@ -66,18 +66,15 @@ class q extends b {
    * @param node - The newly created block node
    */
   onCreated(t) {
-    const e = this._getRecommendationId(t);
-    if (e !== null && e > 0)
-      return;
-    const i = this._pendingBlockId ?? this._generateNextId();
-    this._pendingBlockId = null, this._assignRecommendationId(t, i);
-    const o = c.initializeConfig(this.api, t, { recommendationId: i }), s = p();
-    s.setCurrentBlock(i), g(this.api);
-    const a = this._getBlockElement(t);
-    a && (d(this.api, a, !0), C({
+    const e = this._pendingBlockId ?? this._generateNextId();
+    this._pendingBlockId = null, this._assignRecommendationId(t, e);
+    const o = c.initializeConfig(this.api, t, { recommendationId: e }), i = p();
+    i.setCurrentBlock(e), g(this.api);
+    const s = this._getBlockElement(t);
+    s && (d(this.api, s, !0), C({
       currentNode: t,
       documentModifier: this.api.getDocumentModifier()
-    })), s.patchCurrentBlockConfig({ language: o.language }, { triggerRefetch: !1 });
+    })), i.patchCurrentBlockConfig({ language: o.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -100,10 +97,10 @@ class q extends b {
       c.needsMigration(t) && this._migrateFromLegacy(t);
       try {
         h || (g(this.api), h = !0);
-        const e = c.getConfig(t), i = this._getBlockElement(t);
-        if (i) {
-          const o = !e.mobileLayoutEnabled;
-          A(i) !== o && d(this.api, i, o);
+        const e = c.getConfig(t), o = this._getBlockElement(t);
+        if (o) {
+          const i = !e.mobileLayoutEnabled;
+          A(o) !== i && d(this.api, o, i);
         }
       } catch {
       }
@@ -127,10 +124,10 @@ class q extends b {
     let t = 0;
     try {
       const e = this.api.getDocumentRoot();
-      e && "querySelectorAll" in e && e.querySelectorAll(`.${l}`).forEach((o) => {
-        if ("getAttribute" in o) {
-          const s = o.getAttribute(m), a = s ? parseInt(s) : 0;
-          a > t && (t = a);
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${a}`).forEach((i) => {
+        if ("getAttribute" in i) {
+          const s = i.getAttribute(l), m = s ? parseInt(s) : 0;
+          m > t && (t = m);
         }
       });
     } catch {
@@ -144,11 +141,11 @@ class q extends b {
    * added classes via setAttribute.
    */
   _assignRecommendationId(t, e) {
-    const i = this._getBlockElement(t);
-    if (!i)
+    const o = this._getBlockElement(t);
+    if (!o)
       return;
-    const o = this.api.getDocumentModifier();
-    o.modifyHtml(i).setAttribute(m, e.toString()), o.apply(new y(`Assign recommendation ID ${e}`));
+    const i = this.api.getDocumentModifier();
+    i.modifyHtml(o).setAttribute(l, e.toString()), i.apply(new y(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -157,11 +154,11 @@ class q extends b {
     const e = this._getBlockElement(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const i = e.getAttribute(m);
-    if (!i)
+    const o = e.getAttribute(l);
+    if (!o)
       return null;
-    const o = parseInt(i);
-    return Number.isNaN(o) ? null : o;
+    const i = parseInt(o);
+    return Number.isNaN(i) ? null : i;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
@@ -169,10 +166,10 @@ class q extends b {
   _getBlockElement(t) {
     if ("getAttribute" in t) {
       const e = t.getAttribute("class");
-      if (e && e.includes(l))
+      if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${l}`) ?? null : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,4 +1,4 @@
-import { DEFAULT_COLUMN_SPACING as R, DEFAULT_ROW_SPACING as U, DEFAULT_MOBILE_ROW_SPACING as i, DEFAULT_MOBILE_COLUMN_SPACING as s, DEFAULT_MOBILE_CARDS_IN_ROW as o, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
+import { DEFAULT_MOBILE_ROW_SPACING as R, DEFAULT_MOBILE_COLUMN_SPACING as U, DEFAULT_ROW_SPACING as i, DEFAULT_COLUMN_SPACING as s, DEFAULT_MOBILE_CARDS_IN_ROW as o, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
 import { ATTR_PRODUCT_IMAGE as _, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as t, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as n } from "./selectors.js";
 const O = {
   code: "USD",
@@ -44,10 +44,10 @@ const O = {
   mobileCardsInRow: o,
   mobileLayoutEnabled: !1,
   previousMobileCardsInRow: o,
-  columnSpacing: R,
-  rowSpacing: U,
-  mobileColumnSpacing: s,
-  mobileRowSpacing: i,
+  columnSpacing: s,
+  rowSpacing: i,
+  mobileColumnSpacing: U,
+  mobileRowSpacing: R,
   // Composition
   composition: a,
   visibility: E,