@useinsider/guido 3.17.0 → 3.18.0

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.openRemoveStrategyModal());
+  }
+  _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/controls/main/utils.js

@@ -438,6 +438,7 @@ export {
   C as getBlockElement,
   U as getCardComposition,
   P as getCurrentLayout,
+  oe as getMainContainerTbody,
   ee as isPartnerManagedBlock,
   Pe as regenerateMobileProductRows,
   Te as regenerateProductRowsWithStyles,

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

@@ -0,0 +1,44 @@
+import { createPaddingsControl as r, createTextBackgroundColorControl as T, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as C, createTextColorControl as c, createTextAlignControl as I } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as n } from "../../constants/selectors.js";
+const L = I(
+  t.TITLE_ALIGN,
+  o.TITLE,
+  n
+), a = c(
+  t.TITLE_COLOR,
+  o.TITLE,
+  n
+), i = C(
+  t.TITLE_SIZE,
+  o.TITLE,
+  n
+), E = l(
+  t.TITLE_STYLE,
+  o.TITLE,
+  n
+), m = e(
+  t.TITLE_FONT_FAMILY,
+  o.TITLE,
+  n
+), s = T(
+  t.TITLE_BACKGROUND,
+  o.TITLE,
+  n
+), d = r(
+  t.TITLE_PADDINGS,
+  o.TITLE,
+  n
+), x = {
+  align: L,
+  color: a,
+  size: i,
+  style: E,
+  fontFamily: m,
+  background: s,
+  paddings: d
+};
+export {
+  x as TitleControls
+};

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

@@ -5,23 +5,24 @@ import { RecommendationBlockControl as i } from "./controls/main/index.js";
 import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
-import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as l } from "./controls/price/index.js";
-import { OldPriceControls as s } from "./controls/oldPrice/index.js";
-import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
-import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
-import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as C } from "./controls/image/index.js";
-import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
-import { SpacingControl as d } from "./controls/spacing/index.js";
-import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
-import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
-import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
-import R from "./recommendation.css.js";
-import { SettingsPanel as S } from "./settingsPanel.js";
-const k = [
+import { TitleControls as e } from "./controls/title/index.js";
+import { NameControls as l } from "./controls/name/index.js";
+import { PriceControls as s } from "./controls/price/index.js";
+import { OldPriceControls as p } from "./controls/oldPrice/index.js";
+import { OmnibusPriceControls as a } from "./controls/omnibusPrice/index.js";
+import { OmnibusDiscountControls as c } from "./controls/omnibusDiscount/index.js";
+import { ButtonControls as C } from "./controls/button/index.js";
+import { ImageControls as f } from "./controls/image/index.js";
+import { CustomAttributeControls as d } from "./controls/customAttribute/index.js";
+import { SpacingControl as u } from "./controls/spacing/index.js";
+import { BlockBackgroundColorControl as g } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as y } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as B } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as P } from "./controls/syncInfoMessage.js";
+import { RecommendationIconsRegistry as R } from "./iconsRegistry.js";
+import S from "./recommendation.css.js";
+import { SettingsPanel as k } from "./settingsPanel.js";
+const w = [
   e,
   l,
   s,
@@ -29,21 +30,22 @@ const k = [
   a,
   c,
   C,
-  f
-], w = [
+  f,
+  d
+], b = [
   i,
-  u,
   g,
-  d,
   y,
-  B
-], b = [
-  ...w,
-  ...k.flatMap((o) => Object.values(o))
-], W = b.reduce(
+  u,
+  B,
+  P
+], v = [
+  ...b,
+  ...w.flatMap((o) => Object.values(o))
+], Y = v.reduce(
   (o, r) => o.addControl(r),
-  new t().addBlock(m).withSettingsPanelRegistry(S)
-).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
+  new t().addBlock(m).withSettingsPanelRegistry(k)
+).addStyles(S).withPreviewStyles(n).withIconsRegistry(R).build();
 export {
-  W as default
+  Y as default
 };

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

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

@@ -3,9 +3,10 @@ import { BLOCK_ID as R } from "./block.js";
 import { RecommendationBlockId as S } from "./constants/blockIds.js";
 import { RecommendationControlId as T } from "./constants/controlIds.js";
 import "./constants/selectors.js";
-import { CONTROL_BLOCK_ID as U } from "./controls/main/index.js";
+import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
+import "./controls/title/index.js";
 import "./controls/name/index.js";
 import "./controls/price/index.js";
 import "./controls/oldPrice/index.js";
@@ -15,7 +16,7 @@ import "./controls/button/index.js";
 import "./controls/image/index.js";
 import { SPACING_CONTROL_ID as A } from "./controls/spacing/index.js";
 import "./controls/blockBackground/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as L } from "./controls/cardBackground/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as U } from "./controls/cardBackground/index.js";
 import { COMPOSITION_CONTROL_BLOCK_ID as D } from "./controls/cardComposition/index.js";
 import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
 class s extends E {
@@ -24,7 +25,7 @@ class s extends E {
       new _(
         I.SETTINGS,
         [
-          U,
+          L,
           C.EXTERNAL_INDENTS
         ]
       ),
@@ -32,7 +33,7 @@ class s extends E {
         I.STYLES,
         [
           T.BLOCK_BACKGROUND,
-          L,
+          U,
           A
         ]
       ),
@@ -42,6 +43,24 @@ class s extends E {
           D
         ]
       ).withLabel(this.api.translate("Card Composition"))
+    ], O[S.TITLE] = [
+      new _(
+        I.SETTINGS,
+        [
+          T.TITLE_STYLE,
+          T.TITLE_ALIGN,
+          T.TITLE_PADDINGS
+        ]
+      ),
+      new _(
+        I.STYLES,
+        [
+          T.TITLE_BACKGROUND,
+          T.TITLE_FONT_FAMILY,
+          T.TITLE_SIZE,
+          T.TITLE_COLOR
+        ]
+      )
     ], O[S.NAME] = [
       new _(
         I.SETTINGS,