@useinsider/guido 2.1.0-beta.5160aec → 2.1.0-beta.587ec44

package/dist/composables/useStripo.js

@@ -1,26 +1,26 @@
-import { useActionsApi as _ } from "./useActionsApi.js";
-import { useBlocksConfig as B } from "./useBlocksConfig.js";
-import { useConfig as v } from "./useConfig.js";
-import { useCustomInterfaceAppearance as A } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as F } from "./useStripoEventHandler.js";
-import { useToaster as D } from "./useToaster.js";
-import { displayConditions as I } from "../enums/displayConditions.js";
-import { useStripoApi as M } from "../services/stripoApi.js";
-import U from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as P } from "../stores/editor.js";
-import { dynamicContentToMergeTags as R } from "../utils/genericUtil.js";
-import H from "../package.json.js";
-const W = (c) => {
-  const { features: l, template: y } = v(), { handleError: u } = D(), { getToken: C, getCustomFonts: S } = M(), { handleEvent: E } = F(), { getStripoBlocksConfig: h } = B(), w = async (i, n = []) => {
-    var m, g, f;
-    const o = P(), { html: r, css: p } = i, { baseBlocks: s, extensions: t } = await h(), a = ((m = l.value) == null ? void 0 : m.displayConditions) ?? !0, k = ((g = l.value) == null ? void 0 : g.modulesDisabled) ?? !1, T = ((f = y.value) == null ? void 0 : f.forceRecreate) ?? !1;
+import { useActionsApi as M } from "./useActionsApi.js";
+import { useBlocksConfig as A } from "./useBlocksConfig.js";
+import { useConfig as F } from "./useConfig.js";
+import { useCustomInterfaceAppearance as D } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as I } from "./useStripoEventHandler.js";
+import { useToaster as U } from "./useToaster.js";
+import { displayConditions as P } from "../enums/displayConditions.js";
+import { useStripoApi as R } from "../services/stripoApi.js";
+import H from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as S } from "../stores/editor.js";
+import { dynamicContentToMergeTags as O } from "../utils/genericUtil.js";
+import q from "../package.json.js";
+const Z = (c) => {
+  const { features: l, template: C } = F(), { handleError: u } = U(), { getToken: E, getCustomFonts: h, getSyncModulesStatus: w } = R(), { handleEvent: b } = I(), { getStripoBlocksConfig: k } = A(), T = async (i, n = [], r = !1) => {
+    var g, f, y;
+    const e = S(), { html: p, css: a } = i, { baseBlocks: t, extensions: d } = await k(), m = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, _ = ((f = l.value) == null ? void 0 : f.modulesDisabled) ?? !1, B = ((y = C.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: c,
-        html: r,
-        css: p,
-        forceRecreate: T,
+        html: p,
+        css: a,
+        forceRecreate: B,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -30,19 +30,20 @@ const W = (c) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: U,
-        conditionsEnabled: a,
-        customConditionsEnabled: a,
-        conditionCategories: I,
+        customViewStyles: H,
+        conditionsEnabled: m,
+        customConditionsEnabled: m,
+        conditionCategories: P,
         enableXSSSecurity: !0,
-        modulesDisabled: k,
+        modulesDisabled: _,
+        syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
-        ...s ? { baseBlocks: s } : {},
+        ...t ? { baseBlocks: t } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
@@ -50,68 +51,71 @@ const W = (c) => {
         },
         mergeTags: [
           {
-            entries: R(c.preselectedDynamicContentList)
+            entries: O(c.preselectedDynamicContentList)
           }
         ],
-        async onTokenRefreshRequest(e) {
+        async onTokenRefreshRequest(o) {
           try {
-            const d = await C();
-            e(d);
-          } catch (d) {
-            u(d, "Failed to refresh token");
+            const s = await E();
+            o(s);
+          } catch (s) {
+            u(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: e } = A(), { activateCustomViewStyles: d, updateTimerInClonedTemplate: V } = _();
-            e(), d(), V(), c.onReady(), o.isStripoInitialized = !0, o.loadingStatus = !1, setTimeout(() => {
-              o.hasChanges = !1;
+            const { importCss: o } = D(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: v } = M();
+            o(), s(), v(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+              e.hasChanges = !1;
             }, 1e3);
-          } catch (e) {
-            u(e, "Failed to load custom interface appearance");
+          } catch (o) {
+            u(o, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(e) {
-          o.isCodeEditorOpen = e;
+        onCodeEditorVisibilityChanged(o) {
+          e.isCodeEditorOpen = o;
         },
-        onEditorVisualModeChanged(e) {
-          o.editorVisualMode = e.toLowerCase();
+        onEditorVisualModeChanged(o) {
+          e.editorVisualMode = o.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(e) {
-          o.isVersionHistoryOpen = e;
+        onVersionHistoryVisibilityChanged(o) {
+          e.isVersionHistoryOpen = o;
         },
         onDataChanged() {
-          o.hasChanges = !0;
+          e.hasChanges = !0;
         },
-        onEvent: E,
+        onEvent: b,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: t
+        extensions: d
       }
     );
-  }, b = (i) => new Promise((n, o) => {
-    var a;
+  }, V = (i) => new Promise((n, r) => {
+    var d;
     if (document.getElementById("UiEditorScript")) {
       i(), n();
       return;
     }
-    const r = H.guido, s = `https://email-static.useinsider.com/guido/${(a = r == null ? void 0 : r.stripo) == null ? void 0 : a.version}/UIEditor.js`, t = document.createElement("script");
-    t.id = "UiEditorScript", t.type = "module", t.src = s, t.onload = () => {
+    const e = q.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = a, t.onload = () => {
       i(), n();
     }, t.onerror = () => {
-      o(new Error(`Failed to load Stripo UIEditor script from S3: ${s}`));
+      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (i) => {
-    await b(async () => {
-      const n = await S();
-      await w(i, n);
+    await V(async () => {
+      const n = S(), [r, e] = await Promise.all([
+        h(),
+        w()
+      ]);
+      n.syncModulesEnabled = e, await T(i, r, e);
     });
   } };
 };
 export {
-  W as useStripo
+  Z as useStripo
 };

package/dist/composables/useStripoEventHandler.js

@@ -1,20 +1,35 @@
-import { useOnboardingStore as i } from "../stores/onboarding.js";
-const c = () => {
-  const e = {
-    block_dropped: ({ blockName: t }) => {
-      if (t === "BLOCK_TEXT") {
-        const n = i(), o = !n.shouldShowOnboarding("textBlockOnboarding"), r = n.isActive("textBlockOnboarding");
-        if (o || r)
+import { useStripoApi as i } from "../services/stripoApi.js";
+import { useEditorStore as u } from "../stores/editor.js";
+import { useOnboardingStore as l } from "../stores/onboarding.js";
+import { useUnsubscribeStore as b } from "../stores/unsubscribe.js";
+const v = () => {
+  const { updateSyncModule: d, getSyncModule: r } = i(), n = u(), s = b(), a = {
+    block_dropped: ({ blockName: e }) => {
+      if (e === "BLOCK_TEXT") {
+        const o = l(), t = !o.shouldShowOnboarding("textBlockOnboarding"), c = o.isActive("textBlockOnboarding");
+        if (t || c)
           return;
-        n.start("textBlockOnboarding");
+        o.start("textBlockOnboarding");
       }
+    },
+    module_saved: async (e) => {
+      n.syncModulesEnabled && (console.debug("[module_saved] Saved module data:", e), await d(e));
+    },
+    module_dropped: async (e) => {
+      if (!n.syncModulesEnabled)
+        return;
+      const { moduleId: o } = e, t = await r(o);
+      console.debug("[module_dropped] Sync module data:", t), t.unsubscriptionPreferencePages.length && await s.fetchTemplates();
+    },
+    module_updated: async (e) => {
+      n.syncModulesEnabled && (console.debug("[module_updated] Updated module data:", e), await d(e));
     }
   };
-  return { handleEvent: async (t, n) => {
-    const o = e[t];
-    o && await o(n);
+  return { handleEvent: async (e, o) => {
+    const t = a[e];
+    console.debug("Stripo Event: ", e, o), t && await t(o);
   } };
 };
 export {
-  c as useStripoEventHandler
+  v as useStripoEventHandler
 };

package/dist/composables/useSyncModuleExtractor.js

@@ -0,0 +1,45 @@
+import { UNSUBSCRIBE_SYNC_MODULE_TYPES as T } from "../enums/unsubscribe.js";
+import { DATA_ATTRIBUTES as p } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { useEditorStore as f } from "../stores/editor.js";
+const y = ".esd-synchronizable-module", A = '[esd-extension-block-id="unsubscribe-block"]', _ = "esd-custom-block-id", B = () => {
+  const d = f();
+  return { extractSyncModuleData: (E) => {
+    const S = {
+      unsubscribePayload: [],
+      stripoModules: []
+    };
+    if (!d.syncModulesEnabled)
+      return S;
+    const b = new DOMParser().parseFromString(E, "text/html").querySelectorAll(y), r = [], s = [];
+    return b.forEach((o) => {
+      const t = o.getAttribute(_);
+      if (!t)
+        return;
+      const n = o.querySelectorAll(A);
+      if (n.length === 0) {
+        s.push(Number(t));
+        return;
+      }
+      n.forEach((c) => {
+        const u = c.getAttribute(p.PAGE_LIST), i = c.getAttribute(p.PAGE_TYPE);
+        if (!u || !i)
+          return;
+        const m = parseInt(i), a = T[m];
+        if (!a)
+          return;
+        const l = u.split(",").map((e) => parseInt(e.trim())).filter((e) => !Number.isNaN(e));
+        l.length !== 0 && r.push({
+          stripoModuleId: t,
+          unsubscriptionPreferencePages: l,
+          type: a
+        });
+      });
+    }), {
+      unsubscribePayload: r,
+      stripoModules: s
+    };
+  } };
+};
+export {
+  B as useSyncModuleExtractor
+};

package/dist/config/migrator/itemsBlockMigrator.js

@@ -1,9 +1,9 @@
-var L = Object.defineProperty;
-var K = (o, t, r) => t in o ? L(o, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[t] = r;
-var R = (o, t, r) => K(o, typeof t != "symbol" ? t + "" : t, r);
-import { productPairs as B } from "../../extensions/Blocks/Items/enums/productEnums.js";
-import { ItemInCartOptions as E, DefaultConfigValues as g, SETTINGS_ENUMS as _ } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
-import { getDefaultTemplate as U } from "../../extensions/Blocks/Items/template.js";
+var B = Object.defineProperty;
+var U = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var M = (r, t, e) => U(r, typeof t != "symbol" ? t + "" : t, e);
+import { productPairs as v } from "../../extensions/Blocks/Items/enums/productEnums.js";
+import { ItemInCartOptions as E, DefaultConfigValues as g, SETTINGS_ENUMS as d } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
+import { getDefaultTemplate as K } from "../../extensions/Blocks/Items/template.js";
 const w = {
   img: {
     pairsKey: "imageSrc",
@@ -74,102 +74,118 @@ const w = {
 function F() {
   return String(Date.now() + Math.floor(Math.random() * 1e3));
 }
-function q(o) {
-  return o ? {
-    CartItems: _.ITEMS_TYPE.CART_ITEMS,
-    BrowsedItems: _.ITEMS_TYPE.BROWSED_ITEMS,
-    PurchasedItems: _.ITEMS_TYPE.PURCHASED_ITEMS,
-    CART_ITEMS: _.ITEMS_TYPE.CART_ITEMS,
-    BROWSED_ITEMS: _.ITEMS_TYPE.BROWSED_ITEMS,
-    PURCHASED_ITEMS: _.ITEMS_TYPE.PURCHASED_ITEMS
-  }[o] || _.ITEMS_TYPE.CART_ITEMS : _.ITEMS_TYPE.CART_ITEMS;
+function q(r) {
+  return r ? {
+    CartItems: d.ITEMS_TYPE.CART_ITEMS,
+    BrowsedItems: d.ITEMS_TYPE.BROWSED_ITEMS,
+    PurchasedItems: d.ITEMS_TYPE.PURCHASED_ITEMS,
+    CART_ITEMS: d.ITEMS_TYPE.CART_ITEMS,
+    BROWSED_ITEMS: d.ITEMS_TYPE.BROWSED_ITEMS,
+    PURCHASED_ITEMS: d.ITEMS_TYPE.PURCHASED_ITEMS
+  }[r] || d.ITEMS_TYPE.CART_ITEMS : d.ITEMS_TYPE.CART_ITEMS;
 }
-function M(o) {
-  const t = (e, a) => e == null ? a : e === "1" || e === "true", r = (e, a) => e || a, c = o["data-type"] || o["data-source"], n = q(c);
-  let i = o["data-cart_items_select_control_value"] || g.cartItemsSelectControlValue;
-  if (i && !i.includes("{{") && /^\d+$/.test(i)) {
-    const e = parseInt(i) - 1, a = E[n];
-    a && a[e] && (i = a[e].value);
+function R(r) {
+  const t = (a, o) => a == null ? o : a === "1" || a === "true", e = (a, o) => a || o, i = r["data-type"] || r["data-source"], l = q(i);
+  let n = r["data-cart_items_select_control_value"] || g.cartItemsSelectControlValue;
+  if (n && !n.includes("{{") && /^\d+$/.test(n)) {
+    const a = parseInt(n) - 1, o = E[l];
+    o && o[a] && (n = o[a].value);
   }
   return {
     initialized: !0,
-    blockInstanceId: r(o["data-block-instance-id"], F()),
-    source: n,
-    type: n,
-    itemsSelectValue: i,
-    orientation: o["data-card_orientation_control_value"] || _.ORIENTATION.VERTICAL,
-    nameTrimming: t(o["data-product_name_control_trim"], !0),
-    priceHideDiscount: t(o["data-product_price_control_nodup"], !0),
-    priceFormatted: t(o["data-product_price_control_formated"], !0),
-    priceSinglePrice: t(o["data-product_price_control_single_price"], !1),
-    priceCurrencySymbol: r(
-      o["data-product_price_currency_symbol"],
+    blockInstanceId: e(r["data-block-instance-id"], F()),
+    source: l,
+    type: l,
+    itemsSelectValue: n,
+    orientation: r["data-card_orientation_control_value"] || d.ORIENTATION.VERTICAL,
+    nameTrimming: t(r["data-product_name_control_trim"], !0),
+    priceHideDiscount: t(r["data-product_price_control_nodup"], !0),
+    priceFormatted: t(r["data-product_price_control_formated"], !0),
+    priceSinglePrice: t(r["data-product_price_control_single_price"], !1),
+    priceCurrencySymbol: e(
+      r["data-product_price_control_currency_symbol"],
       g.productPriceCurrencySymbolControlValue
     ),
-    priceCurrencyLocation: r(
-      o["data-product_price_currency_location"],
+    priceCurrencyLocation: e(
+      r["data-product_price_currency_location"],
       g.productPriceCurrencyLocationControlValue
     ),
-    priceOrientation: o["data-product_original_price_control_orientation"] || "horizontal",
-    quantityControlEnabled: t(o["data-product_quantity_control_enabled"], !0),
-    buttonLink: r(o["data-product_button_link"], g.productButtonLinkControlValue),
-    imageLink: r(o["data-product_image_link"], g.productImageLinkControlValue),
-    buttonLabel: r(o["data-product_button_control_label"], "Buy"),
-    buttonFullWidth: t(o["data-product_button_control_atw"], !0),
-    imageVisible: t(o["data-product_image_control_enabled"], !0),
-    nameVisible: t(o["data-product_name_control_enabled"], !0),
-    quantityVisible: t(o["data-product_quantity_control_enabled"], !0),
-    priceVisible: t(o["data-product_price_control_enabled"], !0),
-    originalPriceVisible: t(o["data-product_original_price_control_enabled"], !0),
-    buttonVisible: t(o["data-product_button_control_enabled"], !0)
+    priceOrientation: r["data-product_original_price_control_orientation"] || "horizontal",
+    quantityControlEnabled: t(r["data-product_quantity_control_enabled"], !0),
+    buttonLink: e(r["data-product_button_link"], g.productButtonLinkControlValue),
+    imageLink: e(r["data-product_image_link"], g.productImageLinkControlValue),
+    buttonLabel: e(r["data-product_button_control_label"], "Buy"),
+    buttonFullWidth: t(r["data-product_button_control_atw"], !0),
+    imageVisible: t(r["data-product_image_control_enabled"], !0),
+    nameVisible: t(r["data-product_name_control_enabled"], !0),
+    quantityVisible: t(r["data-product_quantity_control_enabled"], !0),
+    priceVisible: t(r["data-product_price_control_enabled"], !0),
+    originalPriceVisible: t(r["data-product_original_price_control_enabled"], !0),
+    buttonVisible: t(r["data-product_button_control_enabled"], !0)
   };
 }
-const x = {
+const $ = {
   ins_apr: "CART_ITEMS",
   browsed_item: "BROWSED_ITEMS",
   purchased_item: "PURCHASED_ITEMS"
 };
-class N {
+function x(r, t) {
+  const e = {
+    CART_ITEMS: `{{Abandoned Cart Item (${t}) Image}}`,
+    BROWSED_ITEMS: `{{Browsed Item (${t}) Image}}`,
+    PURCHASED_ITEMS: `{{Purchased Item (${t}) Image}}`
+  };
+  return e[r] || e.CART_ITEMS;
+}
+function O(r, t) {
+  const e = {
+    CART_ITEMS: `{{Abandoned Cart Item (${t}) Url}}`,
+    BROWSED_ITEMS: `{{Browsed Item (${t}) Url}}`,
+    PURCHASED_ITEMS: `{{Purchased Item (${t}) Url}}`
+  };
+  return e[r] || e.CART_ITEMS;
+}
+class V {
   constructor() {
-    R(this, "parser");
+    M(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
-      let r = this.removeJinjaConditionals(t);
-      r = this.replaceTemplateVariables(r);
-      const c = this.parser.parseFromString(r, "text/html"), n = c.querySelectorAll(
+      let e = this.removeJinjaConditionals(t);
+      e = this.replaceTemplateVariables(e);
+      const i = this.parser.parseFromString(e, "text/html"), l = i.querySelectorAll(
         "td.esd-cart-items-block, td.esd-browsed-items-block, td.esd-purchased-items-block"
       );
-      return n.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), r) : (n.forEach((i) => {
-        const e = this.extractConfiguration(i), a = U({
-          orientation: e.orientation,
-          itemsType: e.itemsType,
-          itemId: e.itemId,
-          currencySymbol: e.currencySymbol,
-          currencyLocation: e.currencyLocation,
-          formattedPrice: e.formattedPrice,
-          configBlockAttributes: e.configBlockAttributes,
+      return l.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), e) : (l.forEach((n) => {
+        const a = this.extractConfiguration(n), o = K({
+          orientation: a.orientation,
+          itemsType: a.itemsType,
+          itemId: a.itemId,
+          currencySymbol: a.currencySymbol,
+          currencyLocation: a.currencyLocation,
+          formattedPrice: a.formattedPrice,
+          configBlockAttributes: a.configBlockAttributes,
           migrate: !0,
-          nameStyles: e.nameStyles,
-          buttonStyles: e.buttonStyles,
-          priceStyles: e.priceStyles,
-          originalPriceStyles: e.originalPriceStyles,
-          quantityStyles: e.quantityStyles,
-          nodeConfig: M(e.configBlockAttributes)
-        }), l = this.parser.parseFromString(
-          `<table><tbody><tr>${a}</tr></tbody></table>`,
+          nameStyles: a.nameStyles,
+          buttonStyles: a.buttonStyles,
+          priceStyles: a.priceStyles,
+          originalPriceStyles: a.originalPriceStyles,
+          quantityStyles: a.quantityStyles,
+          nodeConfig: R(a.configBlockAttributes)
+        }), c = this.parser.parseFromString(
+          `<table><tbody><tr>${o}</tr></tbody></table>`,
           "text/html"
         ).querySelector("td");
-        if (l && i.parentNode) {
-          const f = M(e.configBlockAttributes);
-          l.setAttribute("esd-ext-config", JSON.stringify(f));
-          const u = l.querySelector("esd-config-block");
-          u && u.remove(), i.parentNode.replaceChild(l, i);
+        if (c && n.parentNode) {
+          const f = R(a.configBlockAttributes);
+          c.setAttribute("esd-ext-config", JSON.stringify(f));
+          const u = c.querySelector("esd-config-block");
+          u && u.remove(), n.parentNode.replaceChild(c, n);
         }
-      }), c.documentElement.outerHTML);
-    } catch (r) {
-      return console.error("ItemsBlockMigrator failed:", r), t;
+      }), i.documentElement.outerHTML);
+    } catch (e) {
+      return console.error("ItemsBlockMigrator failed:", e), t;
     }
   }
   /**
@@ -180,23 +196,23 @@ class N {
    */
   extractConfiguration(t) {
     var C, D, P;
-    const r = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", c = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", n = parseInt(c) - 1, i = E[r], e = ((P = i == null ? void 0 : i[n]) == null ? void 0 : P.value) || i[0].value, a = t.querySelector('[product-attr="price"]'), d = (a == null ? void 0 : a.getAttribute("data-currency_symbol")) || "USD", f = ((a == null ? void 0 : a.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", u = (a == null ? void 0 : a.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, r), b = s["data-card_orientation_control_value"];
+    const e = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", i = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", l = parseInt(i) - 1, n = E[e], a = ((P = n == null ? void 0 : n[l]) == null ? void 0 : P.value) || n[0].value, o = t.querySelector('[product-attr="price"]'), _ = (o == null ? void 0 : o.getAttribute("data-currency_symbol")) || "USD", f = ((o == null ? void 0 : o.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", u = (o == null ? void 0 : o.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, e, i), b = s["data-card_orientation_control_value"];
     let S;
     b ? S = b === "horizontal" ? "horizontal" : "vertical" : S = t.querySelector('[colspan="2"]') !== null ? "vertical" : "horizontal";
-    const p = t.querySelector('a[product-attr="name"]'), T = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, h = (a == null ? void 0 : a.getAttribute("style")) || void 0, A = t.querySelector("p.original-price"), k = (A == null ? void 0 : A.getAttribute("style")) || void 0, I = t.querySelector('[product-attr="quantity"]'), v = (I == null ? void 0 : I.getAttribute("style")) || void 0;
+    const p = t.querySelector('a[product-attr="name"]'), T = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, k = (o == null ? void 0 : o.getAttribute("style")) || void 0, I = t.querySelector("p.original-price"), h = (I == null ? void 0 : I.getAttribute("style")) || void 0, A = t.querySelector('[product-attr="quantity"]'), L = (A == null ? void 0 : A.getAttribute("style")) || void 0;
     return {
       orientation: S,
-      itemsType: r,
-      itemId: e,
-      currencySymbol: d,
+      itemsType: e,
+      itemId: a,
+      currencySymbol: _,
       currencyLocation: f,
       formattedPrice: u,
       configBlockAttributes: s,
       nameStyles: T,
       buttonStyles: m,
-      priceStyles: h,
-      originalPriceStyles: k,
-      quantityStyles: v
+      priceStyles: k,
+      originalPriceStyles: h,
+      quantityStyles: L
     };
   }
   /**
@@ -204,28 +220,29 @@ class N {
    * Returns a key-value mapping of all configuration attributes
    * @param block - The block element containing the esd-config-block
    * @param itemsType - The type of items (CART_ITEMS, BROWSED_ITEMS, PURCHASED_ITEMS)
+   * @param itemNumber - The item number (1-based index)
    */
-  extractConfigBlockAttributes(t, r) {
-    const c = t.querySelector("esd-config-block"), n = {};
-    if (!c)
+  extractConfigBlockAttributes(t, e, i) {
+    const l = t.querySelector("esd-config-block"), n = {};
+    if (!l)
       return this.getDefaultConfigBlockAttributes();
-    if (Array.from(c.attributes).forEach((e) => {
-      e.name.startsWith("data-") && (n[e.name] = e.value);
+    if (Array.from(l.attributes).forEach((o) => {
+      o.name.startsWith("data-") && (n[o.name] = o.value);
     }), n["data-cart_items_select_control_value"]) {
-      const e = n["data-cart_items_select_control_value"];
-      if (/^\d+$/.test(e)) {
-        const a = parseInt(e) - 1, d = E[r];
-        d && d[a] && (n["data-cart_items_select_control_value"] = d[a].value);
+      const o = n["data-cart_items_select_control_value"];
+      if (/^\d+$/.test(o)) {
+        const _ = parseInt(o) - 1, c = E[e];
+        c && c[_] && (n["data-cart_items_select_control_value"] = c[_].value);
       }
     }
     if (n["data-product_price_control_curency"]) {
-      const e = n["data-product_price_control_curency"];
-      let a = e;
-      e === "before" ? a = "0" : e === "after" && (a = "1"), n["data-product_price_control_curency"] = a, n["data-product_price_currency_location"] = a;
+      const o = n["data-product_price_control_curency"];
+      let _ = o;
+      o === "before" ? _ = "0" : o === "after" && (_ = "1"), n["data-product_price_control_curency"] = _, n["data-product_price_currency_location"] = _;
     }
-    (!n["data-product_price_currency_symbol"] || n["data-product_price_currency_symbol"].trim() === "") && (n["data-product_price_currency_symbol"] = "USD");
-    const i = { ...this.getDefaultConfigBlockAttributes(), ...n };
-    return i["data-type"] = r, i["data-source"] = r, i;
+    (!n["data-product_price_control_currency_symbol"] || n["data-product_price_control_currency_symbol"].trim() === "") && (n["data-product_price_control_currency_symbol"] = "USD");
+    const a = { ...this.getDefaultConfigBlockAttributes(), ...n };
+    return a["data-type"] = e, a["data-source"] = e, a["data-product_image_link"] = x(e, i), a["data-product_button_link"] = O(e, i), a;
   }
   /**
    * Returns default esd-config-block attributes based on the old template structure
@@ -254,7 +271,7 @@ class N {
       "data-product_price_control_color": "#060606",
       "data-product_price_control_curency": "0",
       "data-product_price_currency_location": "0",
-      "data-product_price_currency_symbol": "USD",
+      "data-product_price_control_currency_symbol": "USD",
       "data-product_price_control_formated": "1",
       "data-product_price_control_nodup": "1",
       "data-product_price_control_single_price": "false",
@@ -282,16 +299,16 @@ class N {
    * - Purchased Items: purchased_item_total_product_kind, purchased_item_price_N, purchased_item_originalprice_N
    */
   removeJinjaConditionals(t) {
-    let r = t.replace(
+    let e = t.replace(
       /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_total_product_kind\s*(&gt;|>)\s*\d+\s*%\}/g,
       ""
     );
-    return r = r.replace(
+    return e = e.replace(
       /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_price_\d+\s*(!&#61;|!=)\s*\1_originalprice_\d+\s*%\}/g,
       ""
-    ), r = r.replace(/\{%\s*endif\s*%\}/g, ""), r = r.replace(/\n\s*\n\s*\n/g, `
+    ), e = e.replace(/\{%\s*endif\s*%\}/g, ""), e = e.replace(/\n\s*\n\s*\n/g, `
 
-`), r;
+`), e;
   }
   /**
    * Replaces template variables with default values from productPairs
@@ -303,32 +320,32 @@ class N {
    * - {{purchased_item_formattedprice_5}} → '1,490.49' (PURCHASED_ITEMS)
    */
   replaceTemplateVariables(t) {
-    const { PAIRS_FOR_EXTENSION: r } = B;
-    return t.replace(/{{([^}]+)}}/g, (c, n) => {
-      const i = n.match(/^(ins_apr|browsed_item|purchased_item)_([a-z_]+)_(\d+)$/);
-      if (!i)
-        return c;
-      const [, e, a, d] = i, l = x[e];
-      if (!l)
-        return console.warn(`Unknown variable prefix: ${e}`), c;
-      const f = w[a];
+    const { PAIRS_FOR_EXTENSION: e } = v;
+    return t.replace(/{{([^}]+)}}/g, (i, l) => {
+      const n = l.match(/^(ins_apr|browsed_item|purchased_item)_([a-z_]+)_(\d+)$/);
+      if (!n)
+        return i;
+      const [, a, o, _] = n, c = $[a];
+      if (!c)
+        return console.warn(`Unknown variable prefix: ${a}`), i;
+      const f = w[o];
       if (!f)
-        return console.warn(`Unknown variable suffix mapping for: ${a}`), c;
-      const { pairsKey: u, defaultKey: s, isArray: b } = f, p = r[u][l];
+        return console.warn(`Unknown variable suffix mapping for: ${o}`), i;
+      const { pairsKey: u, defaultKey: s, isArray: b } = f, p = e[u][c];
       if (!p)
-        return console.warn(`No data found for: ${u}.${l}`), c;
+        return console.warn(`No data found for: ${u}.${c}`), i;
       if (b) {
-        const y = parseInt(d) - 1, m = p[s];
-        return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${u}.${l}.${s}[${y}]`), c);
+        const y = parseInt(_) - 1, m = p[s];
+        return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${u}.${c}.${s}[${y}]`), i);
       }
       const T = p[s];
-      return T !== void 0 ? String(T) : (console.warn(`Default value not found: ${u}.${l}.${s}`), c);
+      return T !== void 0 ? String(T) : (console.warn(`Default value not found: ${u}.${c}.${s}`), i);
     });
   }
 }
-function Y(o) {
-  return new N().migrate(o);
+function G(r) {
+  return new V().migrate(r);
 }
 export {
-  Y as migrateItemsBlock
+  G as migrateItemsBlock
 };