@useinsider/guido 1.0.3-beta.cc03cd5 → 1.0.3-beta.cc614d6

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/enums/date.js

@@ -0,0 +1,6 @@
+const t = "tr-TR", T = "default", L = "UTC";
+export {
+  T as DEFAULT,
+  t as DEFAULT_LOCALE,
+  L as DEFAULT_TZ
+};

package/dist/enums/defaults.js

@@ -1,5 +1,6 @@
-const a = {
+const e = {
   translationsPath: "window.trans.en",
+  migrationDate: 1759696858,
   emailHeader: {
     senderName: "",
     subject: ""
@@ -7,18 +8,24 @@ const a = {
   extensions: {
     unsubscribe: !0
   },
+  blocks: {
+    excludeDefaults: [],
+    includeCustoms: []
+  },
   features: {
     dynamicContent: !0,
     saveAsTemplate: !0,
-    versionHistory: !0
+    versionHistory: !0,
+    testMessage: !0
   },
   useHeader: !0
 }, t = {
   promotional: 1,
   transactional: 2
-}, e = "email", o = "Guido User", n = t.promotional, s = 2, i = {
+}, a = "email", o = "Guido User", s = t.promotional, n = 2, i = {
   email: 60,
-  architect: 49
+  architect: 49,
+  unsubscribePages: 97
 }, u = [
   "alfredtesting",
   "electio",
@@ -52,11 +59,11 @@ const a = {
   "stripoeditorlivetest"
 ];
 export {
-  a as DefaultGuidoConfig,
-  n as DefaultMessageType,
-  e as DefaultProductType,
+  e as DefaultGuidoConfig,
+  s as DefaultMessageType,
+  a as DefaultProductType,
   o as DefaultUsername,
-  s as EditorType,
+  n as EditorType,
   i as ProductIds,
   u as TEST_PARTNER_LIST,
   t as TemplateTypes

package/dist/enums/extensions/recommendationBlock.js

@@ -0,0 +1,80 @@
+const s = {
+  RECOMMENDATION_API_URL: "http://recommendationv2.api.useinsider.com"
+}, i = [
+  { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
+  { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
+  { id: 13, key: "userBased", name: "User Based", path: "user-based" },
+  { id: 36, key: "highestDiscounted", name: "Highest Discounted Items", path: "highest-discounted" },
+  { id: 38, key: "manualMerchandising", name: "Manual Merchandising", path: "manual-merchandising" },
+  { id: 39, key: "newArrivals", name: "New Arrivals", path: "new-arrivals" },
+  { id: 40, key: "trendingProducts", name: "Trending Products", path: "trending" },
+  { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
+  { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
+  { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
+], u = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], l = [
+  { text: "after the amount", value: "1" },
+  { text: "before the amount", value: "0" }
+], c = [
+  { text: "dot(.)", value: "." },
+  { text: "comma(,)", value: "," }
+], d = [
+  { text: "0", value: "0" },
+  { text: "1", value: "1" },
+  { text: "2", value: "2" },
+  { text: "3", value: "3" },
+  { text: "4", value: "4" },
+  { text: "5", value: "5" }
+], e = [
+  { text: "is exactly", value: "=" },
+  { text: "contains", value: "~" },
+  { text: "does not contain", value: "!~" },
+  { text: "any of", value: "||" }
+], a = [
+  { text: "is exactly", value: "=" },
+  { text: "is not exactly", value: "!==" },
+  { text: "contains", value: "~" },
+  { text: "does not contain", value: "!~" },
+  { text: "any of", value: "||" }
+], r = [
+  { text: "is equal to", value: "=" },
+  { text: "is greater than", value: ">" },
+  { text: "is less than", value: "<" }
+], o = [
+  { text: "is equal to", value: "=" },
+  { text: "after", value: ">" },
+  { text: "before", value: "<" }
+], n = [
+  { text: "true", value: "==" },
+  { text: "false", value: "!=" }
+], p = (t) => {
+  if (!t)
+    return e;
+  switch (t) {
+    case "Boolean":
+      return n;
+    case "Date":
+      return o;
+    case "Number":
+      return r;
+    case "String":
+      return e;
+    case "Strings":
+      return a;
+    default:
+      return e;
+  }
+};
+export {
+  u as PriceAttributes,
+  i as RecommendationFeedSourceMaps,
+  s as URLS,
+  d as currencyDecimalCounts,
+  l as currencyLocationMaps,
+  c as currencyOperators,
+  p as getOperatorOptions,
+  a as operatorOptionsForArrayOfStrings,
+  n as operatorOptionsForBooleans,
+  o as operatorOptionsForDates,
+  r as operatorOptionsForNumbers,
+  e as operatorOptionsForStrings
+};

package/dist/enums/onboarding.js

@@ -2,7 +2,8 @@ const e = [
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-0.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-1.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-2.ng-star-inserted"
-];
+], t = "https://academy.useinsider.com/docs/email-drag-drop-editor";
 export {
+  t as ACADEMY_LINK,
   e as SERVICE_HOVER_SELECTORS
 };

package/dist/extensions/Blocks/Checkbox/extension.js

@@ -3,7 +3,7 @@ import { CheckboxBlock as t } from "./block.js";
 import { CheckboxControl as e } from "./control.js";
 import { CheckboxIconsRegistry as r } from "./iconsRegistry.js";
 import { CheckboxBlockSettings as i } from "./settingsPanel.js";
-const k = new o().addBlock(t).withSettingsPanelRegistry(i).addControl(e).withIconsRegistry(r).build();
+const d = new o().addBlock(t).withSettingsPanelRegistry(i).addControl(e).withIconsRegistry(r).build();
 export {
-  k as default
+  d as default
 };

package/dist/extensions/Blocks/CouponBlock/extension.js

@@ -2,7 +2,7 @@ import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-edito
 import { CouponBlock as t } from "./block.js";
 import { CouponIconsRegistry as i } from "./iconsRegistry.js";
 import { CouponBlockSettings as n } from "./settingsPanel.js";
-const m = new o().addBlock(t).withSettingsPanelRegistry(n).withIconsRegistry(i).build();
+const p = new o().addBlock(t).withSettingsPanelRegistry(n).withIconsRegistry(i).build();
 export {
-  m as default
+  p as default
 };

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

@@ -12,12 +12,12 @@ const e = {
                     <td align="left" width="70%" style="vertical-align: top;">
                         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                             <tbody>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-TITLE-}-}
-                                    </${t.BLOCK_TEXT}>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-DESCRIPTION-}-}
-                                    </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-TITLE-}-}
+                                </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-DESCRIPTION-}-}
+                                </${t.BLOCK_TEXT}>
                             </tbody>
                         </table>
                     </td>

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

@@ -0,0 +1,30 @@
+import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
+const n = "recommendation-block";
+class m extends e {
+  constructor() {
+    super();
+  }
+  getId() {
+    return n;
+  }
+  getIcon() {
+    return "recommendation-icon";
+  }
+  getBlockCompositionType() {
+    return t.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Recommendation Block");
+  }
+  getDescription() {
+    return this.api.translate("Recommendation Block Title Description");
+  }
+  getTemplate() {
+    return o();
+  }
+}
+export {
+  n as BLOCK_ID,
+  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
+};