@useinsider/guido 2.1.0-beta.7d0f92a → 2.1.0-beta.7ffef92

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

@@ -1,55 +1,54 @@
-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);
-import { CommonControl as h } from "../../../common-control.js";
+var m = Object.defineProperty;
+var h = (c, s, t) => s in c ? m(c, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[s] = t;
+var n = (c, s, t) => h(c, typeof s != "symbol" ? s + "" : s, t);
+import { CommonControl as f } from "../../../common-control.js";
+import { RecommendationConfigService as l } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
-import { AlgorithmControl as f } from "./algorithm.js";
-import { ALGORITHM_CONTROL_ID as M } from "./algorithm.js";
-import { CurrencyControl as p } from "./currency.js";
-import { CURRENCY_CONTROL_ID as W } from "./currency.js";
-import { FiltersControl as g } from "./filters.js";
-import { FILTERS_CONTROL_ID as H } from "./filters.js";
-import { LocaleControl as R } from "./locale.js";
-import { LOCALE_CONTROL_ID as j } from "./locale.js";
-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 { AlgorithmControl as p } from "./algorithm.js";
+import { ALGORITHM_CONTROL_ID as W } from "./algorithm.js";
+import { CurrencyControl as g } from "./currency.js";
+import { CURRENCY_CONTROL_ID as H } from "./currency.js";
+import { FiltersControl as R } from "./filters.js";
+import { FILTERS_CONTROL_ID as j } from "./filters.js";
+import { LocaleControl as N } from "./locale.js";
+import { LOCALE_CONTROL_ID as K } from "./locale.js";
+import { ProductLayoutControl as y } from "./productLayout.js";
+import { PRODUCT_LAYOUT_CONTROL_ID as J } from "./productLayout.js";
+import { ShuffleControl as _ } from "./shuffle.js";
+import { SHUFFLE_CONTROL_ID as X } from "./shuffle.js";
+import { regenerateProductRowsWithStyles as b, getBlockElement as I, updateProductContentInPlace as P } from "./utils.js";
+import { formatProductPrice as tt, getCardComposition as et, getCurrentLayout as ot, reapplySpacing as rt, regenerateMobileProductRows as it, regenerateProductRows as nt, setCurrencyAttributes as st, updatePricesInPlace as ct, updateSingleProductContent as at } from "./utils.js";
+import { useDebounceFn as u } from "../../../../../node_modules/@vueuse/shared/index.js";
+const T = "recommendation-id", S = "ui-elements-recommendation-block";
+class z extends f {
   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", u(() => {
       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", u(() => {
       const t = this.store.recommendationProducts;
       if (!this.currentNode || !this.api)
         return;
       const e = this.api.getDocumentModifier();
-      y({
+      P({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
@@ -57,10 +56,10 @@ class x extends h {
     }, 100));
   }
   getId() {
-    return L;
+    return S;
   }
   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(), `
+    return this.algorithmControl = new p(), this.localeControl = new N(), this.currencyControl = new g(), this.productLayoutControl = new y(), this.filtersControl = new R(), this.shuffleControl = new _(), `
             <div class="recommendation-controls-container">
                 ${this.algorithmControl.getTemplate()}
                 ${this.localeControl.getTemplate()}
@@ -72,8 +71,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,25 +88,26 @@ 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 r;
     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), this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e), [
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((r) => {
-      var s;
-      r != null && r.api && (r.currentNode = t, (s = r.onTemplateNodeUpdated) == null || s.call(r, t));
+    ].forEach((i) => {
+      var a;
+      i != null && i.api && (i.currentNode = t, (a = i.onTemplateNodeUpdated) == null || a.call(i, t));
     });
   }
   onDestroy() {
@@ -139,13 +140,48 @@ class x extends h {
       e && (e.api = this.api, e.currentNode = this.currentNode, (o = e.onRender) == null || o.call(e));
     });
   }
+  /**
+   * Syncs persisted node config into the Pinia store's block state.
+   *
+   * setCurrentBlock() creates a default entry (USD, en_US, mostPopular).
+   * For saved templates, the real config lives in the node (e.g., TRY, tr_TR).
+   * This method reads it and patches the store so fetchRecommendationProducts()
+   * uses the correct values.
+   *
+   * Uses triggerRefetch: false because the fetch hasn't happened yet —
+   * values are being prepared for the upcoming initial fetch.
+   */
+  _syncNodeConfigToStore() {
+    var r;
+    const t = l.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
+    this.store.patchCurrentBlockConfig({
+      strategy: t.strategy,
+      language: t.language,
+      size: t.size,
+      productIds: t.productIds,
+      // Only sync filters from node config during initial load.
+      // After initialization, the Pinia store is the source of truth
+      // for filters (edited via the filter drawer).
+      ...o ? {} : { filters: t.filters },
+      shuffleProducts: t.shuffleProducts,
+      currencySettings: {
+        name: t.currency.code,
+        value: t.currency.code,
+        symbol: t.currency.symbol,
+        alignment: t.currency.alignment === "before" ? "0" : "1",
+        decimalCount: t.currency.decimalCount.toString(),
+        decimalSeparator: t.currency.decimalSeparator,
+        thousandSeparator: t.currency.thousandSeparator
+      }
+    }, { triggerRefetch: !1 });
+  }
   /**
    * Fetches initial data for a block (filters, algorithms, products).
    * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
    * 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()
@@ -161,7 +197,7 @@ class x extends h {
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = b(t);
+    const e = I(t);
     if (!e || !("getAttribute" in e))
       return null;
     const o = e.getAttribute(T);
@@ -182,36 +218,52 @@ class x extends h {
     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());
+      r !== o && (o = r, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
+      const i = t.recommendationProducts, a = i !== e, d = Array.isArray(i) && i.length > 0;
+      a && d && (e = i, this._debouncedRegenerateWithProducts());
     });
   }
+  /**
+   * Persists the current filter state from Pinia store to the Stripo node config.
+   * This ensures filters survive template save/reload cycles.
+   */
+  _persistFiltersToNodeConfig() {
+    if (!this.currentNode || !this.api)
+      return;
+    const { filters: t } = this.store.recommendationConfigs;
+    l.updateConfig(
+      this.api,
+      this.currentNode,
+      { filters: t },
+      "Update recommendation filters"
+    );
+  }
 }
 export {
-  M as ALGORITHM_CONTROL_ID,
-  f as AlgorithmControl,
-  L as CONTROL_BLOCK_ID,
-  W as CURRENCY_CONTROL_ID,
-  p as CurrencyControl,
-  H as FILTERS_CONTROL_ID,
-  g as FiltersControl,
-  j as LOCALE_CONTROL_ID,
-  R as LocaleControl,
-  K as PRODUCT_LAYOUT_CONTROL_ID,
-  _ as ProductLayoutControl,
-  x as RecommendationBlockControl,
-  J as SHUFFLE_CONTROL_ID,
-  N as ShuffleControl,
-  X as formatProductPrice,
-  b as getBlockElement,
-  Z as getCardComposition,
-  tt as getCurrentLayout,
-  et as reapplySpacing,
-  ot as regenerateProductRows,
-  P as regenerateProductRowsWithStyles,
-  rt as setCurrencyAttributes,
-  it as updatePricesInPlace,
-  y as updateProductContentInPlace,
-  nt as updateSingleProductContent
+  W as ALGORITHM_CONTROL_ID,
+  p as AlgorithmControl,
+  S as CONTROL_BLOCK_ID,
+  H as CURRENCY_CONTROL_ID,
+  g as CurrencyControl,
+  j as FILTERS_CONTROL_ID,
+  R as FiltersControl,
+  K as LOCALE_CONTROL_ID,
+  N as LocaleControl,
+  J as PRODUCT_LAYOUT_CONTROL_ID,
+  y as ProductLayoutControl,
+  z as RecommendationBlockControl,
+  X as SHUFFLE_CONTROL_ID,
+  _ as ShuffleControl,
+  tt as formatProductPrice,
+  I as getBlockElement,
+  et as getCardComposition,
+  ot as getCurrentLayout,
+  rt as reapplySpacing,
+  it as regenerateMobileProductRows,
+  nt as regenerateProductRows,
+  b as regenerateProductRowsWithStyles,
+  st as setCurrencyAttributes,
+  ct as updatePricesInPlace,
+  P as updateProductContentInPlace,
+  at as updateSingleProductContent
 };

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

@@ -1,45 +1,60 @@
-var d = Object.defineProperty;
-var a = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var n = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
-import { CommonControl as c } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as _, MAX_PRODUCTS_PER_ROW as h } from "../../constants/layout.js";
-import { RecommendationConfigService as r } from "../../services/configService.js";
-import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
-import { getCurrentLayout as C, regenerateProductRowsWithStyles as p } from "./utils.js";
-import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
-const l = "recommendation-product-layout-control", o = {
+var _ = Object.defineProperty;
+var c = (i, o, t) => o in i ? _(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
+var d = (i, o, t) => c(i, typeof o != "symbol" ? o + "" : o, t);
+import { EditorStatePropertyType as u, PreviewDeviceMode as R } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as C, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
+import { ensureMobileCssRulesExist as O } from "../mobileLayout/cssRules.js";
+import { getCurrentLayout as I, regenerateMobileProductRows as g, regenerateProductRowsWithStyles as b } from "./utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const P = "recommendation-product-layout-control", e = {
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
-  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel"
+  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
+  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
 };
-class I extends c {
+class S extends h {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    n(this, "store", R());
-    n(this, "storeUnsubscription", () => {
+    d(this, "store", l());
+    d(this, "storeUnsubscription", () => {
     });
-    n(this, "_debouncedRegenerateProductRows", m(() => {
+    d(this, "_debouncedRegenerateProductRows", N(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return l;
+    return P;
   }
   getTemplate() {
     return `
             <div class="product-layout-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: o.PRODUCT_COUNT, maxValue: _ }),
-      this._GuLabel({ text: "Products in One Row", name: o.PRODUCT_IN_ROW_LABEL }),
-      this._GuCounter({ name: o.PRODUCT_IN_ROW, maxValue: h })
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: C }),
+      this._GuLabel({
+        text: "Products in One Row on Desktop",
+        name: e.PRODUCT_IN_ROW_LABEL
+      }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
+      this._GuLabel({
+        text: "Products in One Row on Mobile",
+        name: e.MOBILE_CARDS_IN_ROW_LABEL
+      }),
+      this._GuCounter({
+        name: e.MOBILE_CARDS_IN_ROW,
+        maxValue: m
+      })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._subscribeToEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
@@ -48,23 +63,45 @@ class I extends c {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const t = r.getConfig(this.currentNode);
+    const t = s.getConfig(this.currentNode);
     this.api.updateValues({
-      [o.PRODUCT_COUNT]: t.size,
-      [o.PRODUCT_IN_ROW]: t.cardsInRow
+      [e.PRODUCT_COUNT]: t.size,
+      [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.MOBILE_CARDS_IN_ROW]: t.mobileCardsInRow
     });
   }
   /**
-   * Updates "Products in One Row" visibility based on layout orientation
-   * This control is hidden for list layout (products always take full width)
-   * Reads from node config first, falls back to DOM
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[u.previewDeviceMode] === R.MOBILE;
+  }
+  /**
+   * Updates counter visibility based on layout orientation and editor mode.
+   * - List layout: hide both counters (products always full-width)
+   * - Grid + desktop mode: show desktop counter, hide mobile counter
+   * - Grid + mobile mode: show mobile counter, hide desktop counter
    */
   _updateProductsInRowVisibility() {
-    const u = (r.getConfig(this.currentNode).layout || C(this.currentNode)) === "grid";
-    this.api.setVisibility(o.PRODUCT_IN_ROW, u), this.api.setVisibility(o.PRODUCT_IN_ROW_LABEL, u);
+    const r = (s.getConfig(this.currentNode).layout || I(this.currentNode)) === "grid", n = this._isMobileMode();
+    this.api.setVisibility(e.PRODUCT_IN_ROW, r && !n), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r && !n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, r && n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, r && n);
+  }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * When the user switches between desktop/mobile preview, toggles
+   * which "Products in One Row" counter is visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      u.previewDeviceMode,
+      () => {
+        this._updateProductsInRowVisibility();
+      }
+    );
   }
   _onProductCountChange(t) {
-    this.currentNode && (r.updateConfig(
+    this.currentNode && (s.updateConfig(
       this.api,
       this.currentNode,
       { size: t },
@@ -72,24 +109,37 @@ class I extends c {
     ), this.store.patchCurrentBlockConfig({ size: t }), this._debouncedRegenerateProductRows());
   }
   _onProductsInRowChange(t) {
-    this.currentNode && (r.updateConfig(
+    this.currentNode && (s.updateConfig(
       this.api,
       this.currentNode,
       { cardsInRow: t },
       `Changed products per row to ${t}`
     ), this.store.patchCurrentBlockConfig({ cardsInRow: t }), this._debouncedRegenerateProductRows());
   }
+  _onMobileCardsInRowChange(t) {
+    this.currentNode && (s.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileCardsInRow: t },
+      `Changed mobile products per row to ${t}`
+    ), O(this.api), g({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier()
+    }));
+  }
   _regenerateProductRows() {
-    p({
+    b({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(o.PRODUCT_COUNT, (t) => {
+    this.api.onValueChanged(e.PRODUCT_COUNT, (t) => {
       this._onProductCountChange(t.toString());
-    }), this.api.onValueChanged(o.PRODUCT_IN_ROW, (t) => {
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
       this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.MOBILE_CARDS_IN_ROW, (t) => {
+      this._onMobileCardsInRowChange(Number(t));
     });
   }
   /**
@@ -99,12 +149,12 @@ class I extends c {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const s = this.store.recommendationConfigs.orientation;
-      s !== t && (t = s, this._updateProductsInRowVisibility());
+      const a = this.store.recommendationConfigs.orientation;
+      a !== t && (t = a, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  l as PRODUCT_LAYOUT_CONTROL_ID,
-  I as ProductLayoutControl
+  P as PRODUCT_LAYOUT_CONTROL_ID,
+  S as ProductLayoutControl
 };