@useinsider/guido 2.2.0-beta.eeefcc3 → 3.0.0-beta.0579d27

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

@@ -1,25 +1,29 @@
-var c = Object.defineProperty;
-var d = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var n = (o, e, t) => d(o, typeof e != "symbol" ? e + "" : e, t);
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var L = Object.defineProperty;
+var _ = (o, e, t) => e in o ? L(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => _(o, typeof e != "symbol" ? e + "" : e, t);
+import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as h } from "../../../common-control.js";
-import { LAYOUT_OPTIONS as g } from "../../constants/layout.js";
-import { RecommendationConfigService as r } from "../../services/configService.js";
-import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
-import { getCurrentLayout as u, getBlockElement as f, regenerateProductRowsWithStyles as p } from "../main/utils.js";
-const L = "recommendation-layout-control", i = {
+import { LAYOUT_OPTIONS as N, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { getCurrentLayout as C, getBlockElement as O, regenerateProductRowsWithStyles as f } from "../main/utils.js";
+const S = "recommendation-layout-control", a = {
   LAYOUT: "layout"
-}, C = {
-  LAYOUT: "data-layout"
+}, n = {
+  LAYOUT: "data-layout",
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing",
+  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
+  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-class Y extends h {
+class G extends h {
   constructor() {
     super(...arguments);
-    n(this, "store", l());
-    n(this, "isChangingLayout", !1);
+    r(this, "store", A());
+    r(this, "isChangingLayout", !1);
   }
   getId() {
-    return L;
+    return S;
   }
   getTemplate() {
     return `
@@ -27,8 +31,8 @@ class Y extends h {
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Layout Orientation" }),
       this._GuRadioButton({
-        name: i.LAYOUT,
-        buttons: g
+        name: a.LAYOUT,
+        buttons: N
       })
     ])}
             </div>
@@ -41,9 +45,9 @@ class Y extends h {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const s = r.getConfig(this.currentNode).layout || u(this.currentNode);
+    const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
     this.api.updateValues({
-      [i.LAYOUT]: s
+      [a.LAYOUT]: u
     });
   }
   /**
@@ -51,18 +55,26 @@ class Y extends h {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (r.getConfig(this.currentNode).layout || u(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
       return;
-    const a = f(this.currentNode);
-    if (a) {
+    const c = O(this.currentNode);
+    if (c) {
       this.isChangingLayout = !0;
       try {
-        r.updateConfig(
+        s.updateConfig(
           this.api,
           this.currentNode,
-          { layout: t },
+          {
+            layout: t,
+            columnSpacing: g,
+            rowSpacing: l,
+            mobileColumnSpacing: d,
+            mobileRowSpacing: m
+          },
           `Changed layout to ${t}`
-        ), this.store.patchCurrentBlockConfig({ orientation: t }), this.api.getDocumentModifier().modifyHtml(a).setAttribute(C.LAYOUT, t).apply(new m(`Update layout to ${t}`)), this._regenerateProductRows(t);
+        ), this.store.patchCurrentBlockConfig({ orientation: t });
+        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.apply(new p(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -74,19 +86,19 @@ class Y extends h {
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    */
   _regenerateProductRows(t) {
-    this.currentNode && p({
+    this.currentNode && f({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       layout: t
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.LAYOUT, (t) => {
+    this.api.onValueChanged(a.LAYOUT, (t) => {
       this._onLayoutChange(t);
     });
   }
 }
 export {
-  L as LAYOUT_CONTROL_ID,
-  Y as LayoutControl
+  S as LAYOUT_CONTROL_ID,
+  G as LayoutControl
 };

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

@@ -1,22 +1,22 @@
-var d = Object.defineProperty;
-var l = (o, i, t) => i in o ? d(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
-var a = (o, i, t) => l(o, typeof i != "symbol" ? i + "" : i, t);
-import { UEAttr as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as h } from "../../../common-control.js";
+var c = Object.defineProperty;
+var d = (r, i, t) => i in r ? c(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
+var a = (r, i, t) => d(r, typeof i != "symbol" ? i + "" : i, t);
+import { UEAttr as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
 import { RecommendationConfigService as n } from "../../services/configService.js";
 import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
-const u = "recommendation-algorithm-control", e = {
+const g = "recommendation-algorithm-control", e = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds"
 };
-class T extends h {
+class T extends l {
   constructor() {
     super(...arguments);
     // Store is used ONLY for API-fetched data (algorithms list), not for config
     a(this, "store", m());
   }
   getId() {
-    return u;
+    return g;
   }
   getTemplate() {
     return `
@@ -52,13 +52,13 @@ class T extends h {
     });
   }
   _initializeSelectItems() {
-    var r;
-    const t = (r = this.store) == null ? void 0 : r.getActivePredictiveAlgorithms;
+    var o;
+    const t = (o = this.store) == null ? void 0 : o.getActivePredictiveAlgorithms;
     if (t != null && t.length)
       try {
         this.api.setUIEAttribute(
           e.ALGORITHM,
-          c.SELECTPICKER.items,
+          h.SELECTPICKER.items,
           t
         );
       } catch (s) {
@@ -70,7 +70,7 @@ class T extends h {
     this.api.setVisibility(e.PRODUCT_IDS, s), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, s);
   }
   _onAlgorithmChange(t) {
-    this.currentNode && (n.updateConfig(
+    !this.currentNode || n.getConfig(this.currentNode).strategy === t || (n.updateConfig(
       this.api,
       this.currentNode,
       { strategy: t },
@@ -80,13 +80,13 @@ class T extends h {
   _onProductIdsChange(t) {
     if (!this.currentNode)
       return;
-    const r = t.split(",").map((s) => s.trim()).filter(Boolean);
+    const o = t.split(",").map((s) => s.trim()).filter(Boolean);
     n.updateConfig(
       this.api,
       this.currentNode,
-      { productIds: r },
+      { productIds: o },
       "Updated product IDs"
-    ), this.store.patchCurrentBlockConfig({ productIds: r });
+    ), this.store.patchCurrentBlockConfig({ productIds: o });
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(e.ALGORITHM, (t) => {
@@ -97,6 +97,6 @@ class T extends h {
   }
 }
 export {
-  u as ALGORITHM_CONTROL_ID,
+  g as ALGORITHM_CONTROL_ID,
   T as AlgorithmControl
 };

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

@@ -1,13 +1,13 @@
 var R = Object.defineProperty;
-var _ = (s, o, e) => o in s ? R(s, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[o] = e;
-var c = (s, o, e) => _(s, typeof o != "symbol" ? o + "" : o, e);
-import { currencyLocationMaps as l, currencyOperators as i, currencyDecimalCounts as h } from "../../../../../enums/extensions/recommendationBlock.js";
+var _ = (i, o, e) => o in i ? R(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
+var c = (i, o, e) => _(i, typeof o != "symbol" ? o + "" : o, e);
+import { currencyLocationMaps as l, currencyOperators as a, currencyDecimalCounts as h } from "../../../../../enums/extensions/recommendationBlock.js";
 import { UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as d } from "../../../common-control.js";
-import { RecommendationConfigService as C } from "../../services/configService.js";
-import { useRecommendationExtensionStore as p } from "../../store/recommendation.js";
-import { setCurrencyAttributes as S, updatePricesInPlace as E, regenerateProductRowsWithStyles as N } from "./utils.js";
-const y = "recommendation-currency-control", t = {
+import { CommonControl as p } from "../../../common-control.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+import { setCurrencyAttributes as S, updatePricesInPlace as N } from "./utils.js";
+const E = "recommendation-currency-control", t = {
   CURRENCY: "currencyCode",
   CURRENCY_LOCATION: "currencyAlignment",
   CURRENCY_SYMBOL: "currencySymbol",
@@ -15,16 +15,16 @@ const y = "recommendation-currency-control", t = {
   CURRENCY_DECIMAL_SEPARATOR: "currencyDecimalSeparator",
   CURRENCY_DECIMAL_COUNT: "currencyDecimalCount"
 };
-class D extends d {
+class Y extends p {
   constructor() {
     super(...arguments);
     // Store is used ONLY for API-fetched data (currency list), not for config
-    c(this, "store", p());
+    c(this, "store", d());
     c(this, "storeUnsubscription", () => {
     });
   }
   getId() {
-    return y;
+    return E;
   }
   getTemplate() {
     return `
@@ -52,13 +52,13 @@ class D extends d {
       this._GuSelect({
         name: t.CURRENCY_THOUSAND_SEPARATOR,
         placeholder: "Select Thousand Separator",
-        options: i
+        options: a
       }),
       this._GuLabel({ text: "Decimal Separator" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_SEPARATOR,
         placeholder: "Select Decimal Separator",
-        options: i
+        options: a
       }),
       this._GuLabel({ text: "Decimal Count" }),
       this._GuSelect({
@@ -82,7 +82,7 @@ class D extends d {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const e = C.getConfig(this.currentNode), { currency: r } = e;
+    const e = s.getConfig(this.currentNode), { currency: r } = e;
     this.api.updateValues({
       [t.CURRENCY]: `price.${r.code}`,
       [t.CURRENCY_LOCATION]: r.alignment === "before" ? "0" : "1",
@@ -96,12 +96,12 @@ class D extends d {
     const { store: e } = this, r = {
       [t.CURRENCY]: e.currencyList,
       [t.CURRENCY_LOCATION]: l,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: i,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: i,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
       [t.CURRENCY_DECIMAL_COUNT]: h
     };
-    Object.entries(r).forEach(([u, n]) => {
-      this.api.setUIEAttribute(u, m.SELECTPICKER.items, n);
+    Object.entries(r).forEach(([C, n]) => {
+      this.api.setUIEAttribute(C, m.SELECTPICKER.items, n);
     });
   }
   /**
@@ -114,17 +114,17 @@ class D extends d {
   _updateCurrency(e, r = !1) {
     if (!this.currentNode)
       return;
-    const n = { ...C.getConfig(this.currentNode).currency, ...e };
-    C.updateConfig(
+    const n = { ...s.getConfig(this.currentNode).currency, ...e };
+    s.updateConfig(
       this.api,
       this.currentNode,
       { currency: n },
       "Updated currency settings"
     );
-    const a = this.api.getDocumentModifier();
+    const u = this.api.getDocumentModifier();
     S({
       currentNode: this.currentNode,
-      documentModifier: a,
+      documentModifier: u,
       currency: n
     }), this.store.patchCurrentBlockConfig({
       currencySettings: {
@@ -136,22 +136,19 @@ class D extends d {
         decimalSeparator: n.decimalSeparator,
         thousandSeparator: n.thousandSeparator
       }
-    }, { triggerRefetch: r }), E({
+    }, { triggerRefetch: r }), N({
       currentNode: this.currentNode,
-      documentModifier: a
-    }) || N({
-      currentNode: this.currentNode,
-      documentModifier: a
+      documentModifier: u
     });
   }
   _onCurrencyChange(e) {
     const [, r] = e.includes(".") ? e.split(".") : [null, e];
-    this._updateCurrency({
+    s.getConfig(this.currentNode).currency.code !== r && (this._updateCurrency({
       code: r,
       symbol: r
     }, !0), this.api.updateValues({
       [t.CURRENCY_SYMBOL]: r
-    });
+    }));
   }
   _onCurrencyLocationChange(e) {
     this._updateCurrency({
@@ -172,8 +169,9 @@ class D extends d {
     });
   }
   _onDecimalCountChange(e) {
+    const r = parseInt(e);
     this._updateCurrency({
-      decimalCount: parseInt(e) || 2
+      decimalCount: Number.isNaN(r) ? 2 : r
     });
   }
   _listenToFormUpdates() {
@@ -204,6 +202,6 @@ class D extends d {
   }
 }
 export {
-  y as CURRENCY_CONTROL_ID,
-  D as CurrencyControl
+  E as CURRENCY_CONTROL_ID,
+  Y as CurrencyControl
 };