@useinsider/guido 2.1.0-beta.216503 → 2.1.0-beta.29e4650

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

@@ -1,11 +1,11 @@
 var u = Object.defineProperty;
-var p = (r, i, t) => i in r ? u(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
-var g = (r, i, t) => p(r, typeof i != "symbol" ? i + "" : i, t);
+var p = (r, o, t) => o in r ? u(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => p(r, typeof o != "symbol" ? o + "" : o, t);
 import { Block as f, BlockCompositionType as I, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationConfigService as s } from "./services/configService.js";
+import { RecommendationConfigService as c } from "./services/configService.js";
 import { useRecommendationExtensionStore as d } from "./store/recommendation.js";
 import { getDefaultTemplate as _ } from "./templates/grid/template.js";
-const k = "recommendation-block", c = "ins-recommendation-v3-block-v2", m = "recommendation-id";
+const k = "recommendation-block", s = "ins-recommendation-v3-block-v2", a = "recommendation-id";
 class b extends f {
   constructor() {
     super();
@@ -50,7 +50,9 @@ class b extends f {
    */
   onCreated(t) {
     const e = this._pendingBlockId ?? this._generateNextId();
-    this._pendingBlockId = null, this._assignRecommendationId(t, e), s.initializeConfig(this.api, t, { recommendationId: e }), d().setCurrentBlock(e);
+    this._pendingBlockId = null, this._assignRecommendationId(t, e);
+    const n = c.initializeConfig(this.api, t, { recommendationId: e }), i = d();
+    i.setCurrentBlock(e), i.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -63,14 +65,14 @@ class b extends f {
     if (!(!t || !("getNodeConfig" in t))) {
       if (!this._getRecommendationId(t)) {
         const e = this._generateNextId();
-        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+        this._assignRecommendationId(t, e), c.hasConfig(t) && c.updateConfig(
           this.api,
           t,
           { recommendationId: e },
           "Assign recommendation ID to legacy block"
         );
       }
-      s.needsMigration(t) && this._migrateFromLegacy(t);
+      c.needsMigration(t) && this._migrateFromLegacy(t);
     }
   }
   /**
@@ -91,9 +93,9 @@ class b extends f {
     let t = 0;
     try {
       const e = this.api.getDocumentRoot();
-      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((o) => {
-        if ("getAttribute" in o) {
-          const a = o.getAttribute(m), l = a ? parseInt(a) : 0;
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${s}`).forEach((i) => {
+        if ("getAttribute" in i) {
+          const m = i.getAttribute(a), l = m ? parseInt(m) : 0;
           l > t && (t = l);
         }
       });
@@ -111,8 +113,8 @@ class b extends f {
     const n = this._getBlockElement(t);
     if (!n)
       return;
-    const o = this.api.getDocumentModifier();
-    o.modifyHtml(n).setAttribute(m, e.toString()), o.apply(new h(`Assign recommendation ID ${e}`));
+    const i = this.api.getDocumentModifier();
+    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new h(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -121,11 +123,11 @@ class b extends f {
     const e = this._getBlockElement(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const n = e.getAttribute(m);
+    const n = e.getAttribute(a);
     if (!n)
       return null;
-    const o = parseInt(n);
-    return Number.isNaN(o) ? null : o;
+    const i = parseInt(n);
+    return Number.isNaN(i) ? null : i;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
@@ -133,16 +135,16 @@ class b extends f {
   _getBlockElement(t) {
     if ("getAttribute" in t) {
       const e = t.getAttribute("class");
-      if (e && e.includes(c))
+      if (e && e.includes(s))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${s}`) : null;
   }
   /**
    * Migrate configuration from legacy format
    */
   _migrateFromLegacy(t) {
-    s.migrateFromDataAttributes(this.api, t);
+    c.migrateFromDataAttributes(this.api, t);
   }
 }
 export {

package/dist/extensions/Blocks/Recommendation/controls/main/index.js

@@ -1,6 +1,6 @@
 var d = Object.defineProperty;
-var m = (l, n, t) => n in l ? d(l, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[n] = t;
-var i = (l, n, t) => m(l, typeof n != "symbol" ? n + "" : n, t);
+var m = (c, s, t) => s in c ? d(c, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[s] = t;
+var n = (c, s, t) => m(c, typeof s != "symbol" ? s + "" : s, t);
 import { CommonControl as h } from "../../../common-control.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 import { AlgorithmControl as f } from "./algorithm.js";
@@ -15,36 +15,34 @@ import { ProductLayoutControl as _ } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as K } from "./productLayout.js";
 import { ShuffleControl as N } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as J } from "./shuffle.js";
-import { regenerateProductRowsWithStyles as P, getBlockElement as b, updateProductContentInPlace as y } from "./utils.js";
-import { formatProductPrice as X, getCardComposition as Z, getCurrentLayout as tt, reapplySpacing as et, regenerateProductRows as ot, setCurrencyAttributes as rt, updatePricesInPlace as it, updateSingleProductContent as nt } from "./utils.js";
-import { useDebounceFn as c } from "../../../../../node_modules/@vueuse/shared/index.js";
-const T = "recommendation-id", L = "ui-elements-recommendation-block";
-class x extends h {
+import { regenerateProductRowsWithStyles as b, getBlockElement as P, updateProductContentInPlace as y } from "./utils.js";
+import { formatProductPrice as X, getCardComposition as Z, getCurrentLayout as tt, reapplySpacing as et, regenerateProductRows as ot, setCurrencyAttributes as rt, updatePricesInPlace as nt, updateSingleProductContent as it } from "./utils.js";
+import { useDebounceFn as a } from "../../../../../node_modules/@vueuse/shared/index.js";
+const I = "recommendation-id", T = "ui-elements-recommendation-block";
+class B extends h {
   constructor() {
     super(...arguments);
-    i(this, "store", C());
-    i(this, "storeUnsubscription", () => {
+    n(this, "store", C());
+    n(this, "storeUnsubscription", () => {
     });
-    // Track if initial data has been fetched per block ID to avoid redundant API calls
-    i(this, "initializedBlocks", /* @__PURE__ */ new Map());
     // Sub-control instances for lifecycle management
-    i(this, "algorithmControl", null);
-    i(this, "localeControl", null);
-    i(this, "currencyControl", null);
-    i(this, "productLayoutControl", null);
-    i(this, "filtersControl", null);
-    i(this, "shuffleControl", null);
+    n(this, "algorithmControl", null);
+    n(this, "localeControl", null);
+    n(this, "currencyControl", null);
+    n(this, "productLayoutControl", null);
+    n(this, "filtersControl", null);
+    n(this, "shuffleControl", null);
     /**
      * Debounced product fetch to prevent rapid API calls during config changes
      */
-    i(this, "_debouncedFetchProducts", c(() => {
+    n(this, "_debouncedFetchProducts", a(() => {
       this.store.fetchRecommendationProducts();
     }, 500));
     /**
      * Debounced regeneration when products arrive from API
      * Tries in-place update first to preserve styles, falls back to full regeneration
      */
-    i(this, "_debouncedRegenerateWithProducts", c(() => {
+    n(this, "_debouncedRegenerateWithProducts", a(() => {
       const t = this.store.recommendationProducts;
       if (!this.currentNode || !this.api)
         return;
@@ -57,7 +55,7 @@ class x extends h {
     }, 100));
   }
   getId() {
-    return L;
+    return T;
   }
   getTemplate() {
     return this.algorithmControl = new f(), this.localeControl = new R(), this.currencyControl = new p(), this.productLayoutControl = new _(), this.filtersControl = new g(), this.shuffleControl = new N(), `
@@ -72,8 +70,9 @@ class x extends h {
         `;
   }
   async onRender() {
+    var e;
     const t = this._getRecommendationIdFromNode(this.currentNode) ?? this.store.currentRecommendationId;
-    if (t !== null && this.store.setCurrentBlock(t), this._listenStateUpdates(), t !== null && this.initializedBlocks.get(t)) {
+    if (t !== null && this.store.setCurrentBlock(t), this._listenStateUpdates(), t !== null && ((e = this.store.blockStates[t]) != null && e.isInitialized)) {
       this._initializeSubControls();
       return;
     }
@@ -88,16 +87,17 @@ class x extends h {
       console.warn("[Recommendation] Cannot regenerate - missing currentNode or api");
       return;
     }
-    P({
+    b({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       products: t
     });
   }
   onTemplateNodeUpdated(t) {
+    var i;
     super.onTemplateNodeUpdated(t);
     const e = this._getRecommendationIdFromNode(t);
-    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), e !== null && !this.initializedBlocks.get(e) && this._fetchBlockData(e), [
+    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), e !== null && !((i = this.store.blockStates[e]) != null && i.isInitialized) && this._fetchBlockData(e), [
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
@@ -105,8 +105,8 @@ class x extends h {
       this.filtersControl,
       this.shuffleControl
     ].forEach((r) => {
-      var s;
-      r != null && r.api && (r.currentNode = t, (s = r.onTemplateNodeUpdated) == null || s.call(r, t));
+      var l;
+      r != null && r.api && (r.currentNode = t, (l = r.onTemplateNodeUpdated) == null || l.call(r, t));
     });
   }
   onDestroy() {
@@ -145,30 +145,30 @@ class x extends h {
    * Marks the block as initialized to prevent redundant fetches on re-selection.
    */
   async _fetchBlockData(t) {
-    t !== null && this.initializedBlocks.set(t, !0), (await Promise.allSettled([
+    t !== null && this.store.markBlockInitialized(t), (await Promise.allSettled([
       this.store.fetchRecommendationFilters(),
       this.store.fetchRecommendationCreateData(),
       this.store.fetchRecommendationProducts()
-    ])).forEach((o, r) => {
+    ])).forEach((o, i) => {
       o.status === "rejected" && console.warn(`Recommendation block: ${[
         "fetchRecommendationFilters",
         "fetchRecommendationCreateData",
         "fetchRecommendationProducts"
-      ][r]} failed`, o.reason);
+      ][i]} failed`, o.reason);
     });
   }
   /**
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = b(t);
+    const e = P(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const o = e.getAttribute(T);
+    const o = e.getAttribute(I);
     if (!o)
       return null;
-    const r = parseInt(o);
-    return Number.isNaN(r) ? null : r;
+    const i = parseInt(o);
+    return Number.isNaN(i) ? null : i;
   }
   /**
    * Listen to store changes that require product refresh or regeneration.
@@ -181,17 +181,17 @@ class x extends h {
     const { store: t } = this;
     let e = t.recommendationProducts, o = t.$state.configVersion;
     this.storeUnsubscription = t.$subscribe(() => {
-      const r = t.$state.configVersion;
-      r !== o && (o = r, this._debouncedFetchProducts());
-      const s = t.recommendationProducts, a = s !== e, u = Array.isArray(s) && s.length > 0;
-      a && u && (e = s, this._debouncedRegenerateWithProducts());
+      const i = t.$state.configVersion;
+      i !== o && (o = i, this._debouncedFetchProducts());
+      const r = t.recommendationProducts, l = r !== e, u = Array.isArray(r) && r.length > 0;
+      l && u && (e = r, this._debouncedRegenerateWithProducts());
     });
   }
 }
 export {
   M as ALGORITHM_CONTROL_ID,
   f as AlgorithmControl,
-  L as CONTROL_BLOCK_ID,
+  T as CONTROL_BLOCK_ID,
   W as CURRENCY_CONTROL_ID,
   p as CurrencyControl,
   H as FILTERS_CONTROL_ID,
@@ -200,18 +200,18 @@ export {
   R as LocaleControl,
   K as PRODUCT_LAYOUT_CONTROL_ID,
   _ as ProductLayoutControl,
-  x as RecommendationBlockControl,
+  B as RecommendationBlockControl,
   J as SHUFFLE_CONTROL_ID,
   N as ShuffleControl,
   X as formatProductPrice,
-  b as getBlockElement,
+  P as getBlockElement,
   Z as getCardComposition,
   tt as getCurrentLayout,
   et as reapplySpacing,
   ot as regenerateProductRows,
-  P as regenerateProductRowsWithStyles,
+  b as regenerateProductRowsWithStyles,
   rt as setCurrencyAttributes,
-  it as updatePricesInPlace,
+  nt as updatePricesInPlace,
   y as updateProductContentInPlace,
-  nt as updateSingleProductContent
+  it as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -1,13 +1,14 @@
-import { RecommendationFeedSourceMaps as u, PriceAttributes as g } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as S } from "../../../../services/recommendationApi.js";
-import { useConfigStore as p } from "../../../../stores/config.js";
-import { defineStore as b } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as I } from "../constants/layout.js";
-import { generateCompleteFilterQuery as d } from "../utils/filterUtil.js";
-const l = S();
-function f() {
+import { RecommendationFeedSourceMaps as d, PriceAttributes as S } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as p } from "../../../../services/recommendationApi.js";
+import { useConfigStore as b } from "../../../../stores/config.js";
+import { defineStore as I } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as R } from "../constants/layout.js";
+import { getDefaultProducts as k } from "../templates/utils.js";
+import { generateCompleteFilterQuery as f } from "../utils/filterUtil.js";
+const m = p();
+function h() {
   return {
-    cardsInRow: I,
+    cardsInRow: R,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -20,7 +21,7 @@ function f() {
     filters: [],
     productIds: [],
     id: 1,
-    language: "tr_TR",
+    language: "en_US",
     orientation: "grid",
     recommendedProducts: [],
     sendProductRequestFlag: !1,
@@ -31,16 +32,17 @@ function f() {
     size: "6"
   };
 }
-function R() {
+function C() {
   return {
-    recommendationConfigs: f(),
+    recommendationConfigs: h(),
     recommendationProducts: [],
     filterStatus: !1,
     filterSelectionDrawerStatus: !1,
-    filterGroup: 1
+    filterGroup: 1,
+    isInitialized: !1
   };
 }
-const k = () => ({
+const y = () => ({
   recommendationCampaignUrls: {},
   activePredictiveAlgorithms: [],
   languages: {},
@@ -49,8 +51,8 @@ const k = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), D = b("guidoRecommendationExtension", {
-  state: () => k(),
+}), A = I("guidoRecommendationExtension", {
+  state: () => y(),
   getters: {
     // ====================================================================
     // Proxy Getters — Backward Compatible Access to Current Block State
@@ -59,32 +61,32 @@ const k = () => ({
      * Proxy getter: delegates to blockStates[currentRecommendationId].recommendationConfigs
      * This allows all existing code that reads `store.recommendationConfigs` to work unchanged.
      */
-    recommendationConfigs(e) {
-      return e.currentRecommendationId !== null && e.blockStates[e.currentRecommendationId] ? e.blockStates[e.currentRecommendationId].recommendationConfigs : f();
+    recommendationConfigs(t) {
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : h();
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].recommendationProducts
      */
-    recommendationProducts(e) {
-      return e.currentRecommendationId !== null && e.blockStates[e.currentRecommendationId] ? e.blockStates[e.currentRecommendationId].recommendationProducts : [];
+    recommendationProducts(t) {
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationProducts : [];
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].filterSelectionDrawerStatus
      */
-    filterSelectionDrawerStatus(e) {
-      return e.currentRecommendationId !== null && e.blockStates[e.currentRecommendationId] ? e.blockStates[e.currentRecommendationId].filterSelectionDrawerStatus : !1;
+    filterSelectionDrawerStatus(t) {
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].filterSelectionDrawerStatus : !1;
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].filterStatus
      */
-    filterStatus(e) {
-      return e.currentRecommendationId !== null && e.blockStates[e.currentRecommendationId] ? e.blockStates[e.currentRecommendationId].filterStatus : !1;
+    filterStatus(t) {
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].filterStatus : !1;
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].filterGroup
      */
-    filterGroup(e) {
-      return e.currentRecommendationId !== null && e.blockStates[e.currentRecommendationId] ? e.blockStates[e.currentRecommendationId].filterGroup : 1;
+    filterGroup(t) {
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].filterGroup : 1;
     },
     // ====================================================================
     // Existing Getters (now reading through proxy)
@@ -93,39 +95,39 @@ const k = () => ({
       return !!this.recommendationConfigs.filters.length;
     },
     getFilterGroupCount() {
-      const { filters: e } = this.recommendationConfigs;
-      return e.length && e[e.length - 1].filterGroup || 0;
+      const { filters: t } = this.recommendationConfigs;
+      return t.length && t[t.length - 1].filterGroup || 0;
     },
-    getActivePredictiveAlgorithms: (e) => {
+    getActivePredictiveAlgorithms: (t) => {
       const r = [];
-      return e.activePredictiveAlgorithms.forEach((t) => {
-        r.push(...u.filter((n) => n.id === t));
-      }), r.map((t) => ({
-        text: t.name,
-        value: t.key
+      return t.activePredictiveAlgorithms.forEach((e) => {
+        r.push(...d.filter((n) => n.id === e));
+      }), r.map((e) => ({
+        text: e.name,
+        value: e.key
       }));
     },
-    getLanguages: (e) => Object.entries(e.languages).map(([r, t]) => ({
-      text: t,
+    getLanguages: (t) => Object.entries(t.languages).map(([r, e]) => ({
+      text: e,
       value: r
     })),
-    getCurrencySymbolList: (e) => e.currencyList.map((r) => ({
+    getCurrencySymbolList: (t) => t.currencyList.map((r) => ({
       text: r.text,
       value: r.text
     })),
     getFilterList() {
-      return Object.values(this.filterList).map((e) => {
-        const r = e.type === "defaultAttribute", t = g.includes(e.attributeName);
-        let n = r ? e.attributeName : `product_attributes.${e.attributeName}`;
-        return n = t ? `${n}.${this.recommendationConfigs.currencySettings.value}` : n, {
-          text: e.displayName,
+      return Object.values(this.filterList).map((t) => {
+        const r = t.type === "defaultAttribute", e = S.includes(t.attributeName);
+        let n = r ? t.attributeName : `product_attributes.${t.attributeName}`;
+        return n = e ? `${n}.${this.recommendationConfigs.currencySettings.value}` : n, {
+          text: t.displayName,
           value: n,
-          type: e.attributeType
+          type: t.attributeType
         };
       });
     },
     getSelectedFilterGroup() {
-      return (e) => [...this.recommendationConfigs.filters].filter((r) => r.filterGroup === e);
+      return (t) => [...this.recommendationConfigs.filters].filter((r) => r.filterGroup === t);
     }
   },
   actions: {
@@ -136,37 +138,44 @@ const k = () => ({
      * Sets the currently active block ID.
      * Creates a new entry in blockStates if one doesn't exist.
      */
-    setCurrentBlock(e) {
-      this.blockStates[e] || (this.blockStates = {
+    setCurrentBlock(t) {
+      this.blockStates[t] || (this.blockStates = {
         ...this.blockStates,
-        [e]: R()
-      }), this.currentRecommendationId = e;
+        [t]: C()
+      }), this.currentRecommendationId = t;
     },
     /**
      * Removes a block's state from the store.
      * Resets currentRecommendationId if it was the deleted block.
      */
-    removeBlockState(e) {
+    removeBlockState(t) {
       const r = { ...this.blockStates };
-      if (delete r[e], this.blockStates = r, this.currentRecommendationId === e) {
-        const t = Object.keys(this.blockStates).map(Number);
-        this.currentRecommendationId = t.length > 0 ? t[0] : null;
+      if (delete r[t], this.blockStates = r, this.currentRecommendationId === t) {
+        const e = Object.keys(this.blockStates).map(Number);
+        this.currentRecommendationId = e.length > 0 ? e[0] : null;
       }
     },
+    /**
+     * Marks a block as initialized (initial API data has been fetched).
+     * Automatically cleaned up when removeBlockState deletes the block entry.
+     */
+    markBlockInitialized(t) {
+      this.blockStates[t] && (this.blockStates[t].isInitialized = !0);
+    },
     /**
      * Patches the current block's recommendationConfigs.
      * Replaces `store.$patch({ recommendationConfigs: { ... } })` pattern.
      */
-    patchCurrentBlockConfig(e, r = {}) {
+    patchCurrentBlockConfig(t, r = {}) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const t = this.blockStates[this.currentRecommendationId];
-      t.recommendationConfigs = {
-        ...t.recommendationConfigs,
-        ...e,
+      const e = this.blockStates[this.currentRecommendationId];
+      e.recommendationConfigs = {
+        ...e.recommendationConfigs,
+        ...t,
         currencySettings: {
-          ...t.recommendationConfigs.currencySettings,
-          ...e.currencySettings || {}
+          ...e.recommendationConfigs.currencySettings,
+          ...t.currencySettings || {}
         }
       };
       const { triggerRefetch: n = !0 } = r;
@@ -180,8 +189,8 @@ const k = () => ({
     openFilterDrawer() {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const e = this.blockStates[this.currentRecommendationId];
-      e.recommendationConfigs.filters.length || (e.recommendationConfigs.filters = [{
+      const t = this.blockStates[this.currentRecommendationId];
+      t.recommendationConfigs.filters.length || (t.recommendationConfigs.filters = [{
         type: "standardFilter",
         attribute: "",
         operatorReplace: "",
@@ -192,7 +201,7 @@ const k = () => ({
         filterGroup: 1,
         isValid: !1,
         value: ""
-      }]), e.filterSelectionDrawerStatus = !0;
+      }]), t.filterSelectionDrawerStatus = !0;
     },
     /**
      * Closes the filter selection drawer for the current block
@@ -207,26 +216,26 @@ const k = () => ({
       if (this.activePredictiveAlgorithms.length)
         return;
       const {
-        activePredictiveAlgorithms: e,
+        activePredictiveAlgorithms: t,
         languages: r,
-        currencies: t
-      } = await l.fetchRecommendationCreateData();
-      this.activePredictiveAlgorithms = e, this.languages = r;
-      const [n] = t, o = n.value.includes(".") ? n.value.split(".")[1] : n.value;
+        currencies: e
+      } = await m.fetchRecommendationCreateData();
+      this.activePredictiveAlgorithms = t, this.languages = r;
+      const [n] = e, o = n.value.includes(".") ? n.value.split(".")[1] : n.value;
       if (this.currentRecommendationId !== null && this.blockStates[this.currentRecommendationId]) {
         const i = this.blockStates[this.currentRecommendationId];
         i.recommendationConfigs.currencySettings.name = n.text, i.recommendationConfigs.currencySettings.value = o, i.filterStatus = !!i.recommendationConfigs.filters.length;
       }
-      this.currencyList = t;
+      this.currencyList = e;
     },
     async fetchRecommendationFilters() {
-      const e = await l.fetchRecommendationFilters();
-      this.filterList = e;
+      const t = await m.fetchRecommendationFilters();
+      this.filterList = t;
     },
     // ====================================================================
     // Per-Block Filter Actions
     // ====================================================================
-    addFilterGroup(e) {
+    addFilterGroup(t) {
       this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId] || this.blockStates[this.currentRecommendationId].recommendationConfigs.filters.push({
         type: "standardFilter",
         attribute: "",
@@ -237,68 +246,71 @@ const k = () => ({
         value: "",
         filterNumber: 1,
         isValid: !0,
-        filterGroup: e
+        filterGroup: t
       });
     },
-    updateFilter(e) {
+    updateFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const r = this.blockStates[this.currentRecommendationId], t = r.recommendationConfigs.filters.findIndex((n) => n.filterNumber === e.filterNumber && n.filterGroup === e.filterGroup);
-      if (t !== -1) {
+      const r = this.blockStates[this.currentRecommendationId], e = r.recommendationConfigs.filters.findIndex((n) => n.filterNumber === t.filterNumber && n.filterGroup === t.filterGroup);
+      if (e !== -1) {
         const n = [...r.recommendationConfigs.filters];
-        n[t] = e, e.value.length && e.operator && e.attribute && e.innerGroupOperator && e.outerGroupOperator ? n[t].isValid = !0 : n[t].isValid = !1, r.recommendationConfigs.filters = n;
+        n[e] = t, t.value.length && t.operator && t.attribute && t.innerGroupOperator && t.outerGroupOperator ? n[e].isValid = !0 : n[e].isValid = !1, r.recommendationConfigs.filters = n;
       }
     },
-    deleteFilter(e) {
+    deleteFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const r = this.blockStates[this.currentRecommendationId], t = [...r.recommendationConfigs.filters].findIndex((n) => n.filterNumber === e.filterNumber && n.filterGroup === e.filterGroup);
-      if (t !== -1) {
+      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters].findIndex((n) => n.filterNumber === t.filterNumber && n.filterGroup === t.filterGroup);
+      if (e !== -1) {
         const n = [...r.recommendationConfigs.filters];
-        n.splice(t, 1), r.recommendationConfigs.filters = n;
+        n.splice(e, 1), r.recommendationConfigs.filters = n;
       }
     },
-    addFilter(e) {
+    addFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const r = this.blockStates[this.currentRecommendationId], t = [...r.recommendationConfigs.filters], o = t.filter(
-        (c) => c.filterGroup === e.filterGroup
-      ).length + 1, i = t.findLastIndex((c) => c.filterGroup === e.filterGroup);
-      i !== -1 ? t.splice(i + 1, 0, {
-        ...e,
+      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters], o = e.filter(
+        (c) => c.filterGroup === t.filterGroup
+      ).length + 1, i = e.findLastIndex((c) => c.filterGroup === t.filterGroup);
+      i !== -1 ? e.splice(i + 1, 0, {
+        ...t,
         filterNumber: o
-      }) : t.push({
-        ...e,
+      }) : e.push({
+        ...t,
         filterNumber: o
-      }), r.recommendationConfigs.filters = t;
+      }), r.recommendationConfigs.filters = e;
     },
     generateFilterQuery() {
-      return d(this.recommendationConfigs.filters);
+      return f(this.recommendationConfigs.filters);
     },
     // ====================================================================
     // Per-Block Product Fetching
     // ====================================================================
     async fetchRecommendationProducts() {
-      var m;
+      var u;
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const e = this.currentRecommendationId, r = this.blockStates[e], { recommendationConfigs: t } = r, n = t.filters.filter((a) => a.isValid), o = d(n), i = ((m = u.find((a) => a.key === t.strategy)) == null ? void 0 : m.path) || "", c = p(), s = {
-        locale: t.language,
-        currency: t.currencySettings.value,
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((l) => l.isValid), o = f(n), i = ((u = d.find((l) => l.key === e.strategy)) == null ? void 0 : u.path) || "", c = b(), s = {
+        locale: e.language,
+        currency: e.currencySettings.value,
         partnerName: c.partnerName,
-        size: t.size,
+        size: e.size,
         details: !0,
         campaignId: c.variationId
       };
-      t.strategy === "manualMerchandising" ? s.productId = t.productIds.join(",") : t.strategy === "similarViewed" && (s.productId = "{itemId}"), o && (s.filter = o), t.shuffleProducts && (s.shuffle = !0);
-      const h = await l.fetchRecommendationProducts(
-        i,
-        s
-      );
-      this.blockStates[e] && (this.blockStates[e].recommendationProducts = h);
+      e.strategy === "manualMerchandising" ? s.productId = e.productIds.join(",") : e.strategy === "similarViewed" && (s.productId = "{itemId}"), o && (s.filter = o), e.shuffleProducts && (s.shuffle = !0);
+      const g = parseInt(e.size) || 6;
+      let a;
+      try {
+        a = await m.fetchRecommendationProducts(i, s);
+      } catch {
+        a = [];
+      }
+      this.blockStates[t] && (this.blockStates[t].recommendationProducts = a.length > 0 ? a : k(g));
     }
   }
 });
 export {
-  D as useRecommendationExtensionStore
+  A as useRecommendationExtensionStore
 };

package/dist/extensions/Blocks/Recommendation/templates/grid/template.js

@@ -1,5 +1,5 @@
 import { DEFAULT_PRODUCTS_PER_ROW as L } from "../../constants/layout.js";
-import { DEFAULT_CARD_COMPOSITION as R, spacer as I, createBlockTemplate as E, DEFAULTS as S, getDefaultProducts as _, DEFAULT_CARD_VISIBILITY as b } from "../utils.js";
+import { DEFAULT_CARD_COMPOSITION as R, spacer as I, getDefaultProducts as E, createBlockTemplate as S, DEFAULTS as _, DEFAULT_CARD_VISIBILITY as b } from "../utils.js";
 import { gridElementRenderer as A, ATTRIBUTE_CELL_CLASS as w, DEFAULT_CELL_PADDING as f } from "./elementRenderer.js";
 const D = `
     <tr class="recommendation-product-row">
@@ -55,11 +55,11 @@ function U(t, e, r) {
   return P(t, e, A, r);
 }
 function B(t) {
-  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, r = E("grid", e), c = U(
-    _(),
+  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, r = S("grid", e), c = U(
+    E(),
     L
   );
-  return r.replace("{-{-TITLE-}-}", S.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c);
+  return r.replace("{-{-TITLE-}-}", _.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c);
 }
 export {
   B as getDefaultTemplate,

package/dist/extensions/Blocks/Recommendation/templates/utils.js

@@ -1,23 +1,23 @@
-import { ATTR_PRODUCT_IMAGE as a, ATTR_PRODUCT_NAME as o, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as s, ATTR_PRODUCT_OMNIBUS_PRICE as l, ATTR_PRODUCT_OMNIBUS_DISCOUNT as n, ATTR_PRODUCT_BUTTON as i } from "../constants/selectors.js";
+import { ATTR_PRODUCT_IMAGE as a, ATTR_PRODUCT_NAME as o, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as l, ATTR_PRODUCT_OMNIBUS_PRICE as s, ATTR_PRODUCT_OMNIBUS_DISCOUNT as n, ATTR_PRODUCT_BUTTON as i } from "../constants/selectors.js";
 const m = {
   TITLE: "You May Also Like!"
-}, g = [
+}, u = [
   a,
   o,
   c,
-  s,
   l,
+  s,
   n,
   i
 ], b = {
   [a]: !0,
   [o]: !0,
-  [s]: !0,
+  [l]: !0,
   [c]: !0,
-  [l]: !1,
+  [s]: !1,
   [n]: !1,
   [i]: !0
-}, T = `
+}, p = `
     <tr>
         <td class="spacer" style="height: 10px;"></td>
     </tr>
@@ -25,7 +25,7 @@ const m = {
 function R(t) {
   return !t || typeof t != "string" || t.trim() === "" ? d : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function e(t) {
+function T(t) {
   return {
     name: "Product Name",
     image_url: d,
@@ -40,23 +40,19 @@ function e(t) {
     category: []
   };
 }
-function D() {
-  return [
-    e("1"),
-    e("2"),
-    e("3"),
-    e("4"),
-    e("5"),
-    e("6")
-  ];
+function D(t = 6) {
+  return Array.from(
+    { length: t },
+    (e, r) => T(String(r + 1))
+  );
 }
-function U(t = "grid", r) {
-  const p = t === "list" ? `
+function A(t = "grid", e) {
+  const r = t === "list" ? `
         data-layout="list"` : "";
   return `
     <td
         align="left"
-        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20${r ? ` ${r}` : ""}"${p}>
+        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20${e ? ` ${e}` : ""}"${r}>
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                 <td align="center">
@@ -88,7 +84,7 @@ function U(t = "grid", r) {
                                     </table>
                                 </td>
                             </tr>
-                            ${T}
+                            ${p}
                             <tr>
                                 <td>
                                     <table
@@ -112,11 +108,11 @@ function U(t = "grid", r) {
 }
 export {
   m as DEFAULTS,
-  g as DEFAULT_CARD_COMPOSITION,
+  u as DEFAULT_CARD_COMPOSITION,
   b as DEFAULT_CARD_VISIBILITY,
   d as PLACEHOLDER_IMAGE,
-  U as createBlockTemplate,
+  A as createBlockTemplate,
   D as getDefaultProducts,
   R as sanitizeImageUrl,
-  T as spacer
+  p as spacer
 };

package/dist/services/recommendationApi.js

@@ -1,34 +1,34 @@
-import { useHttp as a } from "../composables/useHttp.js";
+import { useHttp as c } from "../composables/useHttp.js";
 import { URLS as m } from "../enums/extensions/recommendationBlock.js";
-const l = () => {
-  const { get: r } = a();
+const f = () => {
+  const { get: o } = c();
   return {
     fetchRecommendationCreateData: async () => {
       try {
-        return (await r("/newsletter/recommendations/create-data")).data;
+        return (await o("/newsletter/recommendations/create-data")).data;
       } catch (e) {
         throw console.error("fetchUserModalState error:", e), e;
       }
     },
     fetchRecommendationFilters: async () => {
       try {
-        const { data: e } = await r("/stripo/email-recommendation-attributes");
+        const { data: e } = await o("/stripo/email-recommendation-attributes");
         return e;
       } catch (e) {
         throw console.error("fetchRecommendationFilters error:", e), e;
       }
     },
-    fetchRecommendationProducts: async (e, c) => {
+    fetchRecommendationProducts: async (e, a) => {
       var n;
       try {
-        const t = decodeURIComponent(new URLSearchParams(Object.entries(c)).toString());
+        const t = decodeURIComponent(new URLSearchParams(Object.entries(a)).toString());
         console.debug("🏁 Recommendation API Query:", t);
-        const { get: s } = a({
+        const { get: s } = c({
           headers: {}
-        }), o = await s(
+        }), r = await s(
           `${m.RECOMMENDATION_API_URL}/v2/${e}?${t}`
         );
-        return console.debug("Recommendation Data Response", o), ((n = o == null ? void 0 : o.data) == null ? void 0 : n.data) ?? [];
+        return ((n = r == null ? void 0 : r.data) == null ? void 0 : n.data) ?? [];
       } catch (t) {
         throw console.error("fetchRecommendationProducts error:", t), t;
       }
@@ -36,5 +36,5 @@ const l = () => {
   };
 };
 export {
-  l as useRecommendationApi
+  f as useRecommendationApi
 };

package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts

@@ -16,7 +16,6 @@ export * from './utils';
 export declare class RecommendationBlockControl extends CommonControl {
     private store;
     private storeUnsubscription;
-    private initializedBlocks;
     private algorithmControl;
     private localeControl;
     private currencyControl;

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -29,6 +29,8 @@ interface PerBlockState {
     filterStatus: boolean;
     filterSelectionDrawerStatus: boolean;
     filterGroup: number;
+    /** Whether initial API data (filters, algorithms, products) has been fetched for this block */
+    isInitialized: boolean;
 }
 interface StoreState {
     recommendationCampaignUrls: Record<string, string>;
@@ -189,6 +191,11 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
      * Resets currentRecommendationId if it was the deleted block.
      */
     removeBlockState(id: number): void;
+    /**
+     * Marks a block as initialized (initial API data has been fetched).
+     * Automatically cleaned up when removeBlockState deletes the block entry.
+     */
+    markBlockInitialized(id: number): void;
     /**
      * Patches the current block's recommendationConfigs.
      * Replaces `store.$patch({ recommendationConfigs: { ... } })` pattern.

package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts

@@ -44,7 +44,7 @@ export declare const PLACEHOLDER_IMAGE = "https://email-static.useinsider.com/st
  * @returns Sanitized HTTPS URL or placeholder
  */
 export declare function sanitizeImageUrl(url: string | undefined | null): string;
-export declare function getDefaultProducts(): RecommendationProduct[];
+export declare function getDefaultProducts(count?: number): RecommendationProduct[];
 /**
  * Creates the block template wrapper HTML for recommendation blocks.
  * The template includes title placeholder and product container.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.0216503",
+  "version": "2.1.0-beta.29e4650",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",