@useinsider/guido 3.17.0-beta.ddd4dde → 3.17.0-beta.e23d5cd

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

@@ -0,0 +1,124 @@
+var d = Object.defineProperty;
+var y = (r, s, t) => s in r ? d(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
+var o = (r, s, t) => y(r, typeof s != "symbol" ? s + "" : s, t);
+import { ACADEMY_LINKS as m } from "../../../../../enums/academy.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { useRecommendationExtensionStore as u } from "../../store/recommendation.js";
+const p = "recommendation-strategy-control";
+class f extends h {
+  constructor() {
+    super(...arguments);
+    o(this, "store", u());
+    o(this, "storeUnsubscription", () => {
+    });
+    o(this, "listeners", []);
+    o(this, "lastPaintedState", null);
+  }
+  getId() {
+    return p;
+  }
+  getTemplate() {
+    const t = this.api.translate(
+      "You can assign a recommendation strategy by selecting an existing one or creating a new one to show specific content."
+    ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
+    return `
+            <div class="strategy-control-container">
+                <div class="strategy-control-header">
+                    <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
+                </div>
+                <div class="strategy-control-description-row">
+                    <p class="strategy-control-description">
+                        ${t}
+                        ${e}
+                        <a
+                            href="${m.EMAIL_RECOMMENDATION_BLOCK}"
+                            target="_blank"
+                            rel="noopener noreferrer">${a}</a>.
+                    </p>
+                </div>
+                <div data-strategy-empty-state>
+                    ${this._GuTwoColumns([
+      this._GuButton({
+        name: "assignStrategy",
+        label: this.api.translate("Assign Strategy"),
+        id: "guido__btn-assign-strategy",
+        className: "strategy-control-cta on"
+      }),
+      this._GuButton({
+        name: "createStrategy",
+        label: this.api.translate("Create New Strategy"),
+        id: "guido__btn-create-strategy",
+        className: "strategy-control-cta primary",
+        disabled: !0
+      })
+    ], "strategy-control-cta-row")}
+                </div>
+                <div data-strategy-assigned-state style="display: none;">
+                    <div class="strategy-control-name-band">
+                        <span class="strategy-control-name" data-strategy-name></span>
+                    </div>
+                    <div class="strategy-control-actions">
+                        ${this._strategyAction({
+      id: "guido__btn-change-strategy",
+      label: this.api.translate("Change"),
+      modifier: "change"
+    })}
+                        ${this._strategyAction({
+      id: "guido__btn-remove-strategy",
+      label: this.api.translate("Remove"),
+      modifier: "remove"
+    })}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+  _strategyAction({ id: t, label: e, modifier: a }) {
+    return `
+            <button
+                id="${t}"
+                type="button"
+                class="strategy-control-action strategy-control-action--${a}">
+                <span>${e}</span>
+            </button>
+        `;
+  }
+  onRender() {
+    this._teardown(), this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
+      this._renderState();
+    }), this.store.recommendationConfigs.strategyId && !this.store.strategies.length && this.store.fetchStrategies().catch(() => {
+    });
+  }
+  onDestroy() {
+    this._teardown();
+  }
+  _teardown() {
+    this.storeUnsubscription(), this.storeUnsubscription = () => {
+    }, this.lastPaintedState = null, this.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
+  }
+  _setupButtonListeners() {
+    const t = this.getContainer();
+    if (!t)
+      return;
+    const e = (a, n) => {
+      const i = t.querySelector(a);
+      i && (i.addEventListener("click", n), this.listeners.push({ element: i, handler: n }));
+    };
+    e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.removeStrategy());
+  }
+  _renderState() {
+    var l;
+    const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((l = this.store.assignedStrategy) == null ? void 0 : l.name) ?? "" : "", a = `${t}\0${e}`;
+    if (a === this.lastPaintedState)
+      return;
+    const n = this.getContainer();
+    if (!n)
+      return;
+    const i = n.querySelector("[data-strategy-empty-state]"), c = n.querySelector("[data-strategy-assigned-state]"), g = n.querySelector("[data-strategy-name]");
+    !i || !c || (i.style.display = t ? "none" : "", c.style.display = t ? "" : "none", g && t && (g.textContent = e || `#${t}`), this.lastPaintedState = a);
+  }
+}
+export {
+  p as STRATEGY_CONTROL_ID,
+  f as StrategyControl
+};

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -1,12 +1,12 @@
-import { ModificationDescription as C } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as l, DEFAULT_NODE_CONFIG as c } from "../constants/defaultConfig.js";
+import { ModificationDescription as h } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { PRE_RRS_CONFIG_VERSION as C, DEFAULT_NODE_CONFIG as c } from "../constants/defaultConfig.js";
 import { setCurrencyAttributes as D } from "../controls/main/utils.js";
-import { hasMinimalConfig as A } from "../types/nodeConfig.js";
-function S(e) {
-  return e === "." || e === "," || e === " ";
+import { hasMinimalConfig as S } from "../types/nodeConfig.js";
+function A(r) {
+  return r === "." || r === "," || r === " ";
 }
-function N(e) {
-  return e === "." || e === "," || e === " " || e === "";
+function N(r) {
+  return r === "." || r === "," || r === " " || r === "";
 }
 class M {
   // ========================================================================
@@ -48,7 +48,7 @@ class M {
       return !1;
     try {
       const t = i.getNodeConfig();
-      return A(t);
+      return S(t);
     } catch {
       return !1;
     }
@@ -82,9 +82,27 @@ class M {
    * @param description - Human-readable description for undo/redo
    * @returns The new complete configuration
    */
-  static updateConfig(i, t, o, n) {
-    const r = this.getConfig(t), u = this.deepMerge(r, o);
-    return this.saveConfig(i, t, u, n), u;
+  static updateConfig(i, t, o, e) {
+    const n = this.getConfig(t), u = this.deepMerge(n, o);
+    return this.saveConfig(i, t, u, e), u;
+  }
+  /**
+   * Accumulate a config update into an existing modifier batch, WITHOUT applying.
+   *
+   * The caller owns the apply(), so the write shares one undo entry with the rest
+   * of that batch — a change whose visible result only lands after an async product
+   * fetch would otherwise cost the user two undo presses (SD-149105).
+   * @param documentModifier - The batch to accumulate into (caller applies)
+   * @param node - The immutable HTML node to write to
+   * @param updates - Partial config with values to update
+   */
+  static stageConfig(i, t, o) {
+    const e = this.deepMerge(this.getConfig(t), o);
+    try {
+      i.modifyHtml(t).setNodeConfig(e);
+    } catch (n) {
+      console.warn("[RecommendationConfigService] Failed to stage config:", n);
+    }
   }
   /**
    * Initialize configuration for a new block
@@ -107,12 +125,12 @@ class M {
   static initializeConfig(i, t, o) {
     if (this.hasConfig(t))
       return { config: o ? this.updateConfig(i, t, o, "Initialize recommendation block") : this.getConfig(t), wasFreshDrop: !1 };
-    const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
-    return this.saveConfig(i, t, n, "Initialize recommendation block"), D({
+    const e = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
+    return this.saveConfig(i, t, e, "Initialize recommendation block"), D({
       currentNode: t,
       documentModifier: i.getDocumentModifier(),
-      currency: n.currency
-    }), { config: n, wasFreshDrop: !0 };
+      currency: e.currency
+    }), { config: e, wasFreshDrop: !0 };
   }
   /**
    * Save complete configuration to a node
@@ -123,11 +141,11 @@ class M {
    * @param config - Complete configuration to save
    * @param description - Human-readable description for undo/redo
    */
-  static saveConfig(i, t, o, n) {
+  static saveConfig(i, t, o, e) {
     try {
-      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new C(n));
-    } catch (r) {
-      console.warn("[RecommendationConfigService] Failed to save config:", r);
+      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new h(e));
+    } catch (n) {
+      console.warn("[RecommendationConfigService] Failed to save config:", n);
     }
   }
   // ========================================================================
@@ -154,33 +172,33 @@ class M {
    */
   static migrateFromDataAttributes(i, t) {
     const o = {
-      configVersion: l
+      configVersion: C
     };
     if ("getAttribute" in t && typeof t.getAttribute == "function") {
-      const n = t.getAttribute("esd-ext-config");
-      if (n)
+      const e = t.getAttribute("esd-ext-config");
+      if (e)
         try {
-          const s = JSON.parse(n);
-          s && typeof s == "object" && (Object.assign(o, s), o.configVersion = l);
+          const s = JSON.parse(e);
+          s && typeof s == "object" && Object.assign(o, s);
         } catch {
         }
-      const r = t.getAttribute("data-layout");
-      r === "list" || r === "horizontal" ? o.layout = "list" : (r === "grid" || r === "vertical") && (o.layout = "grid");
+      const n = t.getAttribute("data-layout");
+      n === "list" || n === "horizontal" ? o.layout = "list" : (n === "grid" || n === "vertical") && (o.layout = "grid");
       const u = t.getAttribute("data-card-composition");
       u && (o.composition = u.split(",").filter(Boolean));
-      const b = t.getAttribute("data-column-spacing");
-      b && (o.columnSpacing = parseInt(b) || c.columnSpacing);
+      const l = t.getAttribute("data-column-spacing");
+      l && (o.columnSpacing = parseInt(l) || c.columnSpacing);
       const p = t.getAttribute("data-row-spacing");
       if (p && (o.rowSpacing = parseInt(p) || c.rowSpacing), !o.currency) {
-        const s = t.getAttribute("currency"), y = t.getAttribute("currency-symbol"), d = t.getAttribute("currency-alignment"), f = t.getAttribute("currency-thousand-separator"), g = t.getAttribute("currency-decimal-separator"), m = t.getAttribute("currency-decimal-count");
-        if (s || y || d || f || g || m) {
-          const a = c.currency, h = m ? parseInt(m) : NaN;
+        const s = t.getAttribute("currency"), b = t.getAttribute("currency-symbol"), y = t.getAttribute("currency-alignment"), f = t.getAttribute("currency-thousand-separator"), g = t.getAttribute("currency-decimal-separator"), m = t.getAttribute("currency-decimal-count");
+        if (s || b || y || f || g || m) {
+          const a = c.currency, d = m ? parseInt(m) : NaN;
           o.currency = {
             code: s ?? a.code,
-            symbol: y ?? a.symbol,
-            alignment: d === "0" ? "before" : "after",
-            decimalCount: Number.isFinite(h) ? h : a.decimalCount,
-            decimalSeparator: S(g) ? g : a.decimalSeparator,
+            symbol: b ?? a.symbol,
+            alignment: y === "0" ? "before" : "after",
+            decimalCount: Number.isFinite(d) ? d : a.decimalCount,
+            decimalSeparator: A(g) ? g : a.decimalSeparator,
             thousandSeparator: N(f) ? f : a.thousandSeparator
           };
         }
@@ -194,7 +212,7 @@ class M {
    * @returns True if migration is needed
    */
   static needsMigration(i) {
-    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < l : !0 : !1;
+    return i ? !this.hasConfig(i) : !1;
   }
   // ========================================================================
   // Internal Helpers