@useinsider/guido 2.0.0-beta.1c331b8 → 2.0.0-beta.1f72712

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

@@ -1,29 +1,30 @@
 var u = Object.defineProperty;
 var d = (i, o, t) => o in i ? u(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
-var s = (i, o, t) => d(i, typeof o != "symbol" ? o + "" : o, t);
-import { UEAttr as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var n = (i, o, t) => d(i, typeof o != "symbol" ? o + "" : o, t);
 import { CommonControl as c } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as _, MAX_PRODUCTS_PER_ROW as R } from "../../constants/layout.js";
-import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
-import { getCurrentLayout as C, regenerateProductRows as h, reapplySpacing as l } from "./utils.js";
-import { useDebounceFn as p } from "../../../../../node_modules/@vueuse/shared/index.js";
-const O = "recommendation-product-layout-control", e = {
+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 m, regenerateProductRows as p, reapplySpacing as C } from "./utils.js";
+import { useDebounceFn as g } from "../../../../../node_modules/@vueuse/shared/index.js";
+const l = "recommendation-product-layout-control", e = {
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
   PRODUCT_IN_ROW_LABEL: "cardsInRowLabel"
 };
-class D extends c {
+class b extends c {
   constructor() {
     super(...arguments);
-    s(this, "store", m());
-    s(this, "storeUnsubscription", () => {
+    // Store is used for backward compatibility with product fetching and regeneration
+    n(this, "store", R());
+    n(this, "storeUnsubscription", () => {
     });
-    s(this, "_debouncedRegenerateProductRows", p(() => {
+    n(this, "_debouncedRegenerateProductRows", g(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return O;
+    return l;
   }
   getTemplate() {
     return `
@@ -32,68 +33,66 @@ class D extends c {
       this._GuLabel({ text: "Number of Products" }),
       this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: _ }),
       this._GuLabel({ text: "Products in One Row", name: e.PRODUCT_IN_ROW_LABEL }),
-      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: R })
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: h })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._initializeCounterValues(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._updateProductsInRowVisibility();
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
   }
   onDestroy() {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const { recommendationConfigs: t } = this.store;
+    const t = r.getConfig(this.currentNode);
     this.api.updateValues({
       [e.PRODUCT_COUNT]: t.size,
       [e.PRODUCT_IN_ROW]: t.cardsInRow
     });
   }
-  _initializeCounterValues() {
-    const { recommendationConfigs: t } = this.store;
-    this.api.setUIEAttribute(
-      e.PRODUCT_COUNT,
-      a.SELECTPICKER.items,
-      Number(t.size)
-    ), this.api.setUIEAttribute(
-      e.PRODUCT_IN_ROW,
-      a.SELECTPICKER.items,
-      t.cardsInRow
-    );
-  }
   /**
    * Updates "Products in One Row" visibility based on layout orientation
    * This control is hidden for horizontal layout (products always take full width)
-   * Reads from store first (reliable during state transitions), falls back to DOM
+   * Reads from node config first, falls back to DOM
    */
   _updateProductsInRowVisibility() {
-    const r = (this.store.recommendationConfigs.orientation || C(this.currentNode)) === "vertical";
-    this.api.setVisibility(e.PRODUCT_IN_ROW, r), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r);
+    const a = (r.getConfig(this.currentNode).layout || m(this.currentNode)) === "vertical";
+    this.api.setVisibility(e.PRODUCT_IN_ROW, a), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, a);
   }
   _onProductCountChange(t) {
-    this.store.$patch({
+    this.currentNode && (r.updateConfig(
+      this.api,
+      this.currentNode,
+      { size: t },
+      `Changed product count to ${t}`
+    ), this.store.$patch({
       recommendationConfigs: {
         size: t
       }
-    }), this._debouncedRegenerateProductRows();
+    }), this._debouncedRegenerateProductRows());
   }
   _onProductsInRowChange(t) {
-    this.store.$patch({
+    this.currentNode && (r.updateConfig(
+      this.api,
+      this.currentNode,
+      { cardsInRow: t },
+      `Changed products per row to ${t}`
+    ), this.store.$patch({
       recommendationConfigs: {
         cardsInRow: t
       }
-    }), this._debouncedRegenerateProductRows();
+    }), this._debouncedRegenerateProductRows());
   }
   _regenerateProductRows() {
-    h({
+    p({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       afterRegenerate: () => {
-        l({
+        C({
           currentNode: this.currentNode,
           documentModifier: this.api.getDocumentModifier()
         });
@@ -109,16 +108,17 @@ class D extends c {
   }
   /**
    * Subscribe to store changes to update visibility when layout changes
+   * This is still needed because layout changes come from LayoutControl
    */
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const n = this.store.recommendationConfigs.orientation;
-      n !== t && (t = n, this._updateProductsInRowVisibility());
+      const s = this.store.recommendationConfigs.orientation;
+      s !== t && (t = s, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  O as PRODUCT_LAYOUT_CONTROL_ID,
-  D as ProductLayoutControl
+  l as PRODUCT_LAYOUT_CONTROL_ID,
+  b as ProductLayoutControl
 };

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

@@ -1,19 +1,21 @@
-var n = Object.defineProperty;
-var r = (o, t, e) => t in o ? n(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var i = (o, t, e) => r(o, typeof t != "symbol" ? t + "" : t, e);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as u } from "../../../common-control.js";
-import { useRecommendationExtensionStore as a } from "../../store/recommendation.js";
-const h = "recommendation-shuffle-control", s = {
+var r = Object.defineProperty;
+var u = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => u(o, typeof t != "symbol" ? t + "" : t, e);
+import { UEAttr as f } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationConfigService as i } from "../../services/configService.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+const a = "recommendation-shuffle-control", s = {
   SHUFFLE_PRODUCTS: "shuffleProducts"
 };
-class C extends u {
+class C extends l {
   constructor() {
     super(...arguments);
-    i(this, "store", a());
+    // Store is used for backward compatibility with product fetching
+    n(this, "store", d());
   }
   getId() {
-    return h;
+    return a;
   }
   getTemplate() {
     return `
@@ -28,25 +30,34 @@ class C extends u {
   onRender() {
     this._initializeToggle(), this._setFormValues(), this._listenToFormUpdates();
   }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
   _setFormValues() {
-    const { recommendationConfigs: e } = this.store;
+    const e = i.getConfig(this.currentNode);
     this.api.updateValues({
       [s.SHUFFLE_PRODUCTS]: e.shuffleProducts
     });
   }
   _initializeToggle() {
+    const e = i.getConfig(this.currentNode);
     this.api.setUIEAttribute(
       s.SHUFFLE_PRODUCTS,
-      l.SELECTPICKER.items,
-      this.store.recommendationConfigs.shuffleProducts
+      f.SELECTPICKER.items,
+      e.shuffleProducts
     );
   }
   _onShuffleChange(e) {
-    this.store.$patch({
+    this.currentNode && (i.updateConfig(
+      this.api,
+      this.currentNode,
+      { shuffleProducts: e },
+      `${e ? "Enabled" : "Disabled"} product shuffle`
+    ), this.store.$patch({
       recommendationConfigs: {
         shuffleProducts: e
       }
-    });
+    }));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(s.SHUFFLE_PRODUCTS, (e) => {
@@ -55,6 +66,6 @@ class C extends u {
   }
 }
 export {
-  h as SHUFFLE_CONTROL_ID,
+  a as SHUFFLE_CONTROL_ID,
   C as ShuffleControl
 };

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

@@ -1,112 +1,124 @@
-import { ModificationDescription as s } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CONTAINER_SELECTOR as y } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
-import { prepareProductRows as A } from "../../templates/index.js";
-import { DEFAULT_CARD_COMPOSITION as d, getDefaultProducts as b } from "../../templates/utils.js";
-const f = "ins-recommendation-v3-block-v2";
-function p(e) {
+import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENCY_ATTR as s, CONTAINER_SELECTOR as S } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
+import { prepareProductRows as b } from "../../templates/index.js";
+import { hasGetStyle as f, isTdNode as E } from "../../utils/tagName.js";
+import { DEFAULT_CARD_COMPOSITION as m, getDefaultProducts as h } from "../../templates/utils.js";
+const g = "ins-recommendation-v3-block-v2";
+function d(e) {
   if (!e)
     return null;
   if ("getAttribute" in e) {
     const t = e.getAttribute("class");
-    if (t && t.includes(f))
+    if (t && t.includes(g))
       return e;
   }
-  return "querySelector" in e ? e.querySelector(`.${f}`) : null;
+  return "querySelector" in e ? e.querySelector(`.${g}`) : null;
 }
-function m(e) {
-  const t = p(e);
+function y(e) {
+  const t = d(e);
   return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
 }
-function C(e) {
-  const t = p(e);
+function R(e) {
+  const t = d(e);
   if (!t || !("getAttribute" in t))
-    return d;
-  const r = t.getAttribute("data-card-composition");
-  return r ? r.split(",").filter(Boolean) : d;
+    return m;
+  const o = t.getAttribute("data-card-composition");
+  return o ? o.split(",").filter(Boolean) : m;
 }
-function R(e) {
-  const { currentNode: t, documentModifier: r, afterRegenerate: o } = e;
+function P(e) {
+  const { currentNode: t, documentModifier: o, afterRegenerate: r } = e;
   if (!t || !("querySelector" in t))
     return;
-  const a = t.querySelector(y);
+  const a = t.querySelector(S);
   if (!a)
     return;
-  const c = S(), i = c.recommendationProducts.length > 0 ? c.recommendationProducts : b(), { cardsInRow: l } = c.recommendationConfigs, n = C(t), u = m(t), g = A(i, u, {
+  const c = C(), n = c.recommendationProducts.length > 0 ? c.recommendationProducts : h(), { cardsInRow: l } = c.recommendationConfigs, i = R(t), u = y(t), A = b(n, u, {
     productsPerRow: l,
-    composition: n
+    composition: i
   });
-  r.modifyHtml(a).setInnerHtml(g).apply(new s("Updated product")), o == null || o();
+  o.modifyHtml(a).setInnerHtml(A).apply(new p("Updated product")), r == null || r();
 }
-function h(e, t, r, o) {
-  const c = `0 ${Math.floor(r / 2)}px`;
-  let i = !1;
-  return o === "vertical" ? Array.from(
+function w(e, t, o, r) {
+  const c = `0 ${Math.floor(o / 2)}px`;
+  let n = !1;
+  return r === "vertical" ? Array.from(
     e.querySelectorAll(".attribute-cell")
-  ).forEach((n) => {
-    t.modifyHtml(n).setStyle("padding", c), i = !0;
+  ).forEach((i) => {
+    t.modifyHtml(i).setStyle("padding", c), n = !0;
   }) : Array.from(
     e.querySelectorAll(".product-card-wrapper")
-  ).forEach((n) => {
-    "parentNode" in n && n.parentNode && typeof n.parentNode == "object" && "tagName" in n.parentNode && n.parentNode.tagName === "TD" && (t.modifyHtml(n.parentNode).setStyle("padding", c), i = !0);
-  }), i;
+  ).forEach((i) => {
+    const u = "parentNode" in i ? i.parentNode : null;
+    u && E(u) && (t.modifyHtml(u).setStyle("padding", c), n = !0);
+  }), n;
 }
-function E(e, t, r) {
-  const o = `${r}px`, a = Array.from(e.querySelectorAll(".spacer"));
+function M(e, t, o) {
+  const r = `${o}px`, a = Array.from(e.querySelectorAll(".spacer"));
   let c = !1;
-  return a.forEach((i) => {
-    t.modifyHtml(i).setStyle("height", o), c = !0;
+  return a.forEach((n) => {
+    t.modifyHtml(n).setStyle("height", r), c = !0;
   }), c;
 }
-function P(e) {
-  const { currentNode: t, documentModifier: r } = e;
+function H(e) {
+  const { currentNode: t, documentModifier: o } = e;
   if (!t)
     return;
-  const o = p(t);
-  if (!o || !("getAttribute" in o))
+  const r = d(t);
+  if (!r || !("getAttribute" in r))
     return;
-  const a = o.getAttribute("data-column-spacing"), c = o.getAttribute("data-row-spacing"), i = m(t);
+  const a = r.getAttribute("data-column-spacing"), c = r.getAttribute("data-row-spacing"), n = y(t);
   let l = !1;
   if (a) {
-    const n = parseInt(a);
-    Number.isNaN(n) || (l = h(
+    const i = parseInt(a);
+    Number.isNaN(i) || (l = w(
       t,
-      r,
-      n,
-      i
+      o,
+      i,
+      n
     ));
   }
   if (c) {
-    const n = parseInt(c);
-    if (!Number.isNaN(n)) {
-      const u = E(t, r, n);
+    const i = parseInt(c);
+    if (!Number.isNaN(i)) {
+      const u = M(t, o, i);
       l = l || u;
     }
   }
-  l && r.apply(new s("Reapply spacing after regeneration"));
+  l && o.apply(new p("Reapply spacing after regeneration"));
 }
-function H(e) {
+function L(e) {
   if (!e)
     return null;
-  const t = e.querySelector(".product-card-segment"), r = e.querySelector(".product-card-wrapper");
-  let o = null;
-  return t && "getStyle" in t && (o = t.getStyle("background-color")), (!o || o === "transparent") && r && "getStyle" in r && (o = r.getStyle("background-color")), o;
+  const t = e.querySelector(".product-card-segment"), o = e.querySelector(".product-card-wrapper");
+  let r = null;
+  return t && f(t) && (r = t.getStyle("background-color") ?? null), (!r || r === "transparent") && o && f(o) && (r = o.getStyle("background-color") ?? null), r;
+}
+function _(e) {
+  const { currentNode: t, documentModifier: o, bgColor: r, layout: a } = e;
+  if (!r || r === "transparent" || !t)
+    return;
+  const c = a === "vertical" ? ".product-card-segment" : ".product-card-wrapper", n = Array.from(t.querySelectorAll(c));
+  n.length !== 0 && (n.forEach((l) => {
+    o.modifyHtml(l).setStyle("background-color", r);
+  }), o.apply(new p("Apply card background color")));
 }
-function I(e) {
-  const { currentNode: t, documentModifier: r, bgColor: o, layout: a } = e;
-  if (!o || o === "transparent" || !t)
+function D(e) {
+  const { currentNode: t, documentModifier: o, currency: r } = e, a = d(t);
+  if (!a)
     return;
-  const c = a === "vertical" ? ".product-card-segment" : ".product-card-wrapper", i = Array.from(t.querySelectorAll(c));
-  i.length !== 0 && (i.forEach((l) => {
-    r.modifyHtml(l).setStyle("background-color", o);
-  }), r.apply(new s("Apply card background color")));
+  const c = r.alignment === "before" ? "0" : "1", n = (l, i) => {
+    o.modifyHtml(a).setAttribute(l, i);
+  };
+  n(s.CURRENCY, r.code), n(s.SYMBOL, r.symbol), n(s.ALIGNMENT, c), n(s.THOUSAND_SEPARATOR, r.thousandSeparator), n(s.DECIMAL_SEPARATOR, r.decimalSeparator), n(s.DECIMAL_COUNT, r.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
-  I as applyCardBackgroundColor,
-  p as getBlockElement,
-  C as getCardComposition,
-  H as getCurrentCardBackgroundColor,
-  m as getCurrentLayout,
-  P as reapplySpacing,
-  R as regenerateProductRows
+  _ as applyCardBackgroundColor,
+  d as getBlockElement,
+  R as getCardComposition,
+  L as getCurrentCardBackgroundColor,
+  y as getCurrentLayout,
+  H as reapplySpacing,
+  P as regenerateProductRows,
+  D as setCurrencyAttributes
 };

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js

@@ -64,7 +64,7 @@ class b extends a {
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextAfter", (t) => {
-      this._onTextChange(t);
+      typeof t == "string" && this._onTextChange(t);
     });
   }
 }

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js

@@ -5,7 +5,7 @@ import { RecommendationControlId as d } from "../../constants/controlIds.js";
 import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
 import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
 const i = "data-text-before", u = "", p = ".omnibus-text-before";
-class B extends l {
+class g extends l {
   getId() {
     return d.OMNIBUS_DISCOUNT_TEXT_BEFORE;
   }
@@ -64,10 +64,10 @@ class B extends l {
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextBefore", (e) => {
-      this._onTextChange(e);
+      typeof e == "string" && this._onTextChange(e);
     });
   }
 }
 export {
-  B as OmnibusDiscountTextBeforeControl
+  g as OmnibusDiscountTextBeforeControl
 };