@useinsider/guido 1.0.3-beta.4f5545f → 1.0.3-beta.4fc0167

package/dist/config/migrator/index.js

@@ -1,11 +1,12 @@
-import { migrateCheckbox as o } from "./checkboxMigrator.js";
-import { migrateCouponBlock as m } from "./couponBlockMigrator.js";
+import { migrateCheckbox as m } from "./checkboxMigrator.js";
+import { migrateCouponBlock as o } from "./couponBlockMigrator.js";
 import { migrateRadioButton as i } from "./radioButtonMigrator.js";
-import { migrateUnsubscribe as e } from "./unsubscribeMigrator.js";
-const c = async (t) => {
+import { migrateRecommendation as e } from "./recommendationMigrator.js";
+import { migrateUnsubscribe as a } from "./unsubscribeMigrator.js";
+const s = async (t) => {
   let r = t;
-  return r = o(r), r = i(r), r = await e(r), r = m(r), r;
+  return r = m(r), r = i(r), r = await a(r), r = o(r), r = e(r), r;
 };
 export {
-  c as migrate
+  s as migrate
 };

package/dist/config/migrator/recommendationMigrator.js

@@ -0,0 +1,293 @@
+var h = Object.defineProperty;
+var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
+var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
+import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/migrationTemplate.js";
+import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/templateUtils.js";
+class w {
+  constructor() {
+    m(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, td.product-block[esd-handler-name*="EmailRecommendationV3"]'
+      );
+      return s.length === 0 ? e : (s.forEach((o) => {
+        const l = o.getAttribute("id"), r = this.extractBgColor(o), i = this.extractTitle(o), u = this.extractProductRows(o), c = P.replace("{-{-TITLE-}-}", i).replace("{-{-PRODUCT_ROWS-}-}", u), a = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
+          "text/html"
+        ).querySelector(".ins-recommendation-v3-block-v2");
+        a && o.parentNode && (l && a.setAttribute("id", l), r && a.setAttribute("bgcolor", r), o.parentNode.replaceChild(a, o));
+      }), 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 a, g;
+    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 = ((a = t.textContent) == null ? void 0 : a.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 = ((g = s.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", l = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", i = /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"]), n = this.convertInlineToBlock(c);
+    return this.buildTitleBlock({
+      text: o,
+      isBold: i,
+      isItalic: u,
+      align: l,
+      styles: n
+    });
+  }
+  /**
+   * 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, l = this.extractProductStyles(e);
+    return this.generateProductRows(s, o, l);
+  }
+  /**
+   * 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 {
+      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 = q(), l = [];
+    for (let i = 0; i < e; i++) {
+      const u = o[i % o.length];
+      l.push({ ...u });
+    }
+    let r = S(l, 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 l = s.querySelector(".ext-product-image");
+    if (l) {
+      const n = l.querySelector("img"), a = n == null ? void 0 : n.getAttribute("width"), g = l.getAttribute("style") || "", p = l.getAttribute("align") || "center", b = l.getAttribute("class") || "", d = this.extractStripoClasses(b);
+      t.imageWidth = a || "120", t.imageAlign = p, t.imageTdStyle = g, t.imageClasses = d;
+    }
+    const r = s.querySelector(".ext-product-name");
+    if (r) {
+      const n = r.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", d = this.extractStripoClasses(b);
+      t.nameStyle = a, t.nameAlign = g, t.nameTdStyle = p, t.nameClasses = d;
+    }
+    const i = s.querySelector(".ext-product-price");
+    if (i) {
+      const n = i.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = i.getAttribute("align") || "center", p = i.getAttribute("style") || "", b = i.getAttribute("class") || "", d = this.extractStripoClasses(b);
+      t.priceStyle = a, t.priceAlign = g, t.priceTdStyle = p, t.priceClasses = d;
+    }
+    const u = s.querySelector(".ext-product-original-price");
+    if (u) {
+      const n = u.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", d = this.extractStripoClasses(b);
+      t.oldPriceStyle = a, t.oldPriceAlign = g, t.oldPriceTdStyle = p, t.oldPriceClasses = d;
+    }
+    const c = s.querySelector(".ext-product-button");
+    if (c) {
+      const n = c.querySelector(".es-button-border"), a = c.querySelector("a.es-button"), g = (n == null ? void 0 : n.getAttribute("style")) || "", p = (a == null ? void 0 : a.getAttribute("style")) || "", b = c.getAttribute("align") || "center", d = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
+      t.buttonBorderStyle = g, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = d, t.buttonClasses = C, t.buttonText = y;
+    }
+    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 i = r.querySelector("img");
+      i && t.imageWidth && i.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 i = r.querySelector("p");
+      i && t.nameStyle && i.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 i = r.querySelector("p");
+      i && t.priceStyle && i.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 i = r.querySelector("p");
+      i && t.oldPriceStyle && i.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 n = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
+        r.setAttribute("class", n);
+      }
+      const i = r.querySelector(".es-button-border");
+      i && t.buttonBorderStyle && i.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, l) => {
+      const r = new RegExp(`${l}\\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 k(A) {
+  return new w().migrate(A);
+}
+export {
+  k as migrateRecommendation
+};

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

@@ -1,7 +1,10 @@
 import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./template.js";
+import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
 const n = "recommendation-block";
-class c extends e {
+class m extends e {
+  constructor() {
+    super();
+  }
   getId() {
     return n;
   }
@@ -23,5 +26,5 @@ class c extends e {
 }
 export {
   n as BLOCK_ID,
-  c as RecommendationBlock
+  m as RecommendationBlock
 };

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

@@ -0,0 +1,103 @@
+var m = Object.defineProperty;
+var y = (n, o, i) => o in n ? m(n, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[o] = i;
+var a = (n, o, i) => y(n, typeof o != "symbol" ? o + "" : o, i);
+import { ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as b } from "../common-control.js";
+const h = "ui-elements-recommendation-card-composition", s = [
+  { key: "productImage", label: "Product Image", visible: !0 },
+  { key: "productName", label: "Product Name", visible: !0 },
+  { key: "productPrice", label: "Product Price", visible: !0 },
+  { key: "productOriginalPrice", label: "Product Original Price", visible: !0 },
+  { key: "productButton", label: "Product Button", visible: !0 }
+];
+class g extends b {
+  constructor() {
+    super(...arguments);
+    a(this, "currentComposition", []);
+    a(this, "currentVisibility", {});
+  }
+  getId() {
+    return h;
+  }
+  getTemplate() {
+    const i = s.map((e) => ({
+      key: e.key,
+      label: e.label,
+      content: `
+                <div style="display: flex; align-items: center; justify-content: space-between;
+                    padding: 8px; gap: 8px;">
+                    <span style="flex: 1;">${e.label}</span>
+                    ${this._GuToggle(`visibility_${e.key}`)}
+                </div>
+            `
+    }));
+    return `
+            <div class="container">
+                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
+                ${this._GuOrderable("cardComposition", i)}
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializeComposition(), this.api.onValueChanged("cardComposition", (i) => {
+      this.currentComposition = i, this._applyCompositionToBlock(i);
+    }), s.forEach((i) => {
+      this.api.onValueChanged(`visibility_${i.key}`, (e) => {
+        this.currentVisibility[i.key] = e, this._applyVisibilityToBlock();
+      });
+    });
+  }
+  onTemplateNodeUpdated(i) {
+    super.onTemplateNodeUpdated(i), this._initializeComposition();
+  }
+  /**
+   * Initialize the composition order and visibility from the block or use defaults
+   */
+  _initializeComposition() {
+    var p;
+    const i = (p = this.currentNode) == null ? void 0 : p.querySelector(".ins-recommendation-v3-block-v2");
+    let e = null, l = null;
+    if (i && "getAttribute" in i && (e = i.getAttribute("data-card-composition"), l = i.getAttribute("data-card-visibility")), e) {
+      const t = e.split(",").filter(Boolean), r = s.map((c) => c.key);
+      t.every((c) => r.includes(c)) && t.length > 0 ? this.currentComposition = t : this.currentComposition = r;
+    } else
+      this.currentComposition = s.map((t) => t.key);
+    if (l)
+      try {
+        const t = JSON.parse(l);
+        this.currentVisibility = t;
+      } catch {
+        this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
+      }
+    else
+      this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
+    const d = {
+      cardComposition: this.currentComposition
+    };
+    s.forEach((t) => {
+      d[`visibility_${t.key}`] = this.currentVisibility[t.key] ?? !0;
+    }), this.api.updateValues(d);
+  }
+  /**
+   * Apply the reordered composition to the block's HTML structure
+   */
+  _applyCompositionToBlock(i) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute("data-card-composition", i.join(",")).apply(new u("Stored card composition order"));
+  }
+  /**
+   * Apply visibility changes to the block's HTML structure
+   */
+  _applyVisibilityToBlock() {
+    if (!this.currentNode)
+      return;
+    const i = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute("data-card-visibility", JSON.stringify(this.currentVisibility)).apply(new u("Stored card visibility settings"));
+  }
+}
+export {
+  h as COMPOSITION_CONTROL_BLOCK_ID,
+  g as RecommendationCardCompositionControl
+};

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

@@ -0,0 +1,5 @@
+var o = /* @__PURE__ */ ((c) => (c.BUTTON = "recommendation-block-button", c.NAME = "recommendation-block-name", c.PRICE = "recommendation-block-price", c.OLD_PRICE = "recommendation-block-old-price", c.IMAGE = "recommendation-block-image", c))(o || {}), r = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(r || {});
+export {
+  o as RecommendationBlockId,
+  r as RecommendationControlId
+};

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

@@ -1,11 +1,14 @@
 var _ = Object.defineProperty;
-var R = (o, n, e) => n in o ? _(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
-var r = (o, n, e) => R(o, typeof n != "symbol" ? n + "" : n, e);
-import { currencyDecimalCounts as c, currencyOperators as a, currencyLocationMaps as l } from "../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as m } from "../common-control.js";
-import { useRecommendationExtensionStore as S } from "./store/recommendation.js";
-const g = "ui-elements-recommendation-block", t = {
+var R = (s, n, e) => n in s ? _(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e;
+var r = (s, n, e) => R(s, typeof n != "symbol" ? n + "" : n, e);
+import { currencyDecimalCounts as l, currencyOperators as c, currencyLocationMaps as h } from "../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as m, ModificationDescription as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as g } from "../common-control.js";
+import { useRecommendationExtensionStore as O } from "./store/recommendation.js";
+import { prepareProductRows as p } from "./templates/blockTemplate.js";
+import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as E } from "./templates/templateUtils.js";
+import { useDebounceFn as U } from "../../../node_modules/@vueuse/shared/index.js";
+const L = "ui-elements-recommendation-block", t = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds",
   LOCALE: "language",
@@ -21,18 +24,21 @@ const g = "ui-elements-recommendation-block", t = {
   SHUFFLE_PRODUCTS: "shuffleProducts",
   RESPONSIVE: "unresponsive"
 };
-class p extends m {
+class b extends g {
   constructor() {
     super(...arguments);
-    r(this, "store", S());
+    r(this, "store", O());
     r(this, "storeUnsubscription", () => {
     });
     r(this, "addFilterListener", () => {
     });
     r(this, "addFilterButton", null);
+    r(this, "_debouncedRegenerateProductRows", U(() => {
+      this._regenerateProductRows();
+    }, 500));
   }
   getId() {
-    return g;
+    return L;
   }
   getTemplate() {
     return `
@@ -78,22 +84,22 @@ class p extends m {
     });
   }
   _initializeSelectItems() {
-    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
-      [t.ALGORITHM]: s,
+    const { store: e } = this, o = e.getActivePredictiveAlgorithms, i = e.getLanguages, a = {
+      [t.ALGORITHM]: o,
       [t.LOCALE]: i,
       [t.CURRENCY]: e.currencyList,
-      [t.CURRENCY_LOCATION]: l,
+      [t.CURRENCY_LOCATION]: h,
       [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
-      [t.CURRENCY_DECIMAL_COUNT]: c,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: c,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: c,
+      [t.CURRENCY_DECIMAL_COUNT]: l,
       [t.PRODUCT_COUNT]: Number(e.recommendationConfigs.size),
       [t.PRODUCT_IN_ROW]: e.recommendationConfigs.cardsInRow,
       [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts,
       [t.RESPONSIVE]: !e.recommendationConfigs.unresponsive
     };
-    Object.entries(C).forEach(([u, h]) => {
-      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
+    Object.entries(a).forEach(([u, d]) => {
+      this.api.setUIEAttribute(u, m.SELECTPICKER.items, d);
     });
   }
   _getAlgorithms() {
@@ -139,7 +145,7 @@ class p extends m {
       this._GuSelect({
         name: t.CURRENCY_LOCATION,
         placeholder: "Select Currency Location",
-        options: l
+        options: h
       }),
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuSelect({
@@ -151,19 +157,19 @@ class p extends m {
       this._GuSelect({
         name: t.CURRENCY_THOUSAND_SEPARATOR,
         placeholder: "Select Thousand Separator",
-        options: a
+        options: c
       }),
       this._GuLabel({ text: "Decimal Separator" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_SEPARATOR,
         placeholder: "Select Decimal Separator",
-        options: a
+        options: c
       }),
       this._GuLabel({ text: "Decimal Count" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_COUNT,
         placeholder: "Select Decimal Count",
-        options: c
+        options: l
       })
     ])}
         `;
@@ -217,39 +223,62 @@ class p extends m {
       filterSelectionDrawerStatus: !0
     });
   }
-  _onDataChange(e, s) {
-    this.currentNode && this.store.$patch({
+  _onDataChange(e, o) {
+    this.currentNode && (this.store.$patch({
       recommendationConfigs: {
-        [e]: s
+        [e]: o
       }
-    });
+    }), this._debouncedRegenerateProductRows());
+  }
+  /**
+   * Get the current card composition from block data attribute or use default
+   */
+  _getCardComposition() {
+    if (!this.currentNode)
+      return C;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    if (!e || !("getAttribute" in e))
+      return C;
+    const o = e.getAttribute("data-card-composition");
+    return o ? o.split(",").filter(Boolean) : C;
+  }
+  _regenerateProductRows() {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-product-container");
+    if (!e) {
+      console.error("Could not find container table for product rows");
+      return;
+    }
+    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : E(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = p(o, i, a);
+    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(u).apply(new S("Updated product"));
   }
-  _onCurrencyConfigChange(e, s) {
+  _onCurrencyConfigChange(e, o) {
     this.currentNode && this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          [e]: s
+          [e]: o
         }
       }
     });
   }
   _onCurrencyChange(e) {
-    const [, s] = e.split(".");
+    const [, o] = e.split(".");
     this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          name: s,
-          value: s
+          name: o,
+          value: o
         }
       }
     });
   }
   _setProductIdsVisibility() {
-    const { recommendationConfigs: e } = this.store, s = e.strategy === "manualMerchandising";
-    this.api.setVisibility(t.PRODUCT_IDS, s), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, s);
+    const { recommendationConfigs: e } = this.store, o = e.strategy === "manualMerchandising";
+    this.api.setVisibility(t.PRODUCT_IDS, o), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, o);
   }
   _listenToFormUpdates() {
-    var s;
+    var o;
     this.api.onValueChanged(t.ALGORITHM, (i) => {
       this._onDataChange(t.ALGORITHM, i), this._setProductIdsVisibility();
     }), this.api.onValueChanged(t.PRODUCT_IDS, (i) => this._onDataChange(t.PRODUCT_IDS, i.split(",") || [])), this.api.onValueChanged(t.LOCALE, (i) => this._onDataChange(t.LOCALE, i)), this.api.onValueChanged(t.CURRENCY, (i) => this._onCurrencyChange(i)), [
@@ -259,19 +288,19 @@ class p extends m {
       t.CURRENCY_DECIMAL_SEPARATOR,
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
-      this.api.onValueChanged(i, (C) => this._onCurrencyConfigChange(i, C));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (s = this.addFilterButton) == null || s.addEventListener("click", this.addFilterListener);
+      this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {
       if ("payload" in e) {
-        const s = e.payload.recommendationConfigs;
-        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
+        const o = e.payload.recommendationConfigs;
+        o && (this.api.updateValues(o), this.store.fetchRecommendationProducts());
       }
     });
   }
 }
 export {
-  g as CONTROL_BLOCK_ID,
-  p as RecommendationBlockControl
+  L as CONTROL_BLOCK_ID,
+  b as RecommendationBlockControl
 };