@useinsider/guido 3.12.0-beta.98baf2f → 3.12.0-beta.aa6f9ba

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

@@ -0,0 +1,146 @@
+var g = Object.defineProperty;
+var d = (o, s, t) => s in o ? g(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var r = (o, s, t) => d(o, typeof s != "symbol" ? s + "" : s, t);
+import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as c } from "../../../common-control.js";
+import { RecommendationConfigService as a } from "../../services/configService.js";
+import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
+const m = "recommendation-strategy-control", e = {
+  STRATEGY: "strategyId",
+  DETAILS_BUTTON: "strategyDetails",
+  MESSAGE: "strategyMessage"
+}, h = "guido__btn-strategy-details";
+class E extends c {
+  constructor() {
+    super(...arguments);
+    // Store is used ONLY for API-fetched data (strategy list), not for config
+    r(this, "store", S());
+    r(this, "detailsListener", () => {
+    });
+    r(this, "detailsButton", null);
+  }
+  getId() {
+    return m;
+  }
+  getTemplate() {
+    return `
+            <div class="strategy-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate("Recommendation Strategy") }),
+      `<div class="strategy-control__select-row">
+                        ${this._GuSelect({
+        name: e.STRATEGY,
+        placeholder: this.api.translate("Select Recommendation Strategy"),
+        options: this.store.getStrategyOptions
+      })}
+                        ${this._GuIconButton({
+        name: e.DETAILS_BUTTON,
+        icon: "strategy-details-icon",
+        className: h
+      })}
+                    </div>`
+    ])}
+                ${this._GuOnPageMessage({ name: e.MESSAGE, icon: "migration-info-icon" })}
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates(), this._setupDetailsButtonListener(), this._refreshSelectionState();
+  }
+  onDestroy() {
+    var t;
+    (t = this.detailsButton) == null || t.removeEventListener("click", this.detailsListener);
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._initializeSelectItems(), this._setFormValues(), this._refreshSelectionState();
+  }
+  _setFormValues() {
+    const t = a.getConfig(this.currentNode);
+    this.api.updateValues({ [e.STRATEGY]: t.strategyId });
+  }
+  _initializeSelectItems() {
+    var i;
+    const t = (i = this.store) == null ? void 0 : i.getStrategyOptions;
+    if (t != null && t.length)
+      try {
+        this.api.setUIEAttribute(
+          e.STRATEGY,
+          l.SELECTPICKER.items,
+          t
+        );
+      } catch (n) {
+        console.warn("[StrategyControl] Failed to set strategy options:", n);
+      }
+  }
+  /**
+   * Reconciles the panel with the strategy listing: loading, empty, and
+   * deleted-strategy states.
+   *
+   * A strategy the partner deleted in Smart Recommender still lives in this
+   * block's saved config. The id is deliberately left in place and surfaced
+   * instead of being cleared — silently dropping it would make a template that
+   * compiles a broken feed URL look correctly configured.
+   *
+   * ponytail: one message element, three texts. Severity styling (warning vs
+   * info) is not drawn in Figma and pending design sign-off — see open question
+   * 4 in the handoff. Vary `type` once that lands.
+   */
+  _refreshSelectionState() {
+    const t = !!this.store.getStrategyOptions.length, { strategyId: i } = a.getConfig(this.currentNode);
+    if (this._setDisabled(e.STRATEGY, this.store.strategiesLoading || !t), this._setDisabled(e.DETAILS_BUTTON, !this.store.getSelectedStrategy), this.store.strategiesLoading) {
+      this._showMessage(this.api.translate("Loading recommendation strategies..."));
+      return;
+    }
+    if (!t) {
+      this._showMessage(this.api.translate(
+        "No recommendation strategies are available for email. Create one in Smart Recommender, then reopen this block."
+      ));
+      return;
+    }
+    if (this.store.hasMissingStrategy) {
+      this._showMessage(this.api.translate(
+        `The selected strategy (${i}) is no longer available. Pick another one, otherwise this block will not load products.`
+      ));
+      return;
+    }
+    this._hideMessage();
+  }
+  _setDisabled(t, i) {
+    try {
+      this.api.setUIEAttribute(t, l.SELECTPICKER.disabled, i);
+    } catch (n) {
+      console.warn(`[StrategyControl] Failed to set disabled on ${t}:`, n);
+    }
+  }
+  _showMessage(t) {
+    this._setInfoMessageValue(e.MESSAGE, t);
+  }
+  _hideMessage() {
+    const t = this.getContainer().querySelector(`[data-info-message="${e.MESSAGE}"]`);
+    t && (t.style.display = "none");
+  }
+  _onDetailsClick() {
+    this.store.openStrategyDrawer();
+  }
+  _setupDetailsButtonListener() {
+    var t;
+    this.detailsListener = this._onDetailsClick.bind(this), this.detailsButton = this.getContainer().querySelector(`.${h}`), (t = this.detailsButton) == null || t.addEventListener("click", this.detailsListener);
+  }
+  _onStrategyChange(t) {
+    !this.currentNode || a.getConfig(this.currentNode).strategyId === t || (a.updateConfig(
+      this.api,
+      this.currentNode,
+      { strategyId: t },
+      `Changed recommendation strategy to ${t}`
+    ), this.store.patchCurrentBlockConfig({ strategyId: t }), this.store.fetchStrategyUrlTemplate(t), this._refreshSelectionState());
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(e.STRATEGY, (t) => {
+      this._onStrategyChange(t);
+    });
+  }
+}
+export {
+  m as STRATEGY_CONTROL_ID,
+  E as StrategyControl
+};

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

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/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 f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/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 { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.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 w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };

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

@@ -74,7 +74,7 @@ class h extends C {
                 <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `, t["migration-info-icon"] = r;
+        `, t["migration-info-icon"] = r, t["strategy-details-icon"] = r;
   }
 }
 export {

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

@@ -1,9 +1,9 @@
-import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as U } from "./block.js";
+import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as I, ContainerControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+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 A } from "./controls/main/index.js";
+import { CONTROL_BLOCK_ID as U } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import "./controls/name/index.js";
@@ -13,37 +13,38 @@ import "./controls/omnibusPrice/index.js";
 import "./controls/omnibusDiscount/index.js";
 import "./controls/button/index.js";
 import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/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 { COMPOSITION_CONTROL_BLOCK_ID as D } from "./controls/cardComposition/index.js";
 import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
-class d extends E {
-  registerBlockControls(I) {
-    I[U] = [
+class s extends E {
+  registerBlockControls(O) {
+    O[R] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
-          A,
+          U,
           C.EXTERNAL_INDENTS
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
-          R.TEXT_BLOCK_BACKGROUND_COLOR,
-          D,
-          L
+          T.BLOCK_BACKGROUND,
+          L,
+          A
         ]
       ),
       new _(
         "Card Composition",
         [
-          B
+          D
         ]
       ).withLabel(this.api.translate("Card Composition"))
-    ], I[S.NAME] = [
+    ], O[S.NAME] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.NAME_STYLE,
@@ -53,7 +54,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.NAME_BACKGROUND,
           T.NAME_FONT_FAMILY,
@@ -61,9 +62,9 @@ class d extends E {
           T.NAME_COLOR
         ]
       )
-    ], I[S.PRICE] = [
+    ], O[S.PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.PRICE_STYLE,
@@ -72,7 +73,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.PRICE_BACKGROUND,
           T.PRICE_FONT_FAMILY,
@@ -80,9 +81,9 @@ class d extends E {
           T.PRICE_COLOR
         ]
       )
-    ], I[S.OLD_PRICE] = [
+    ], O[S.OLD_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OLD_PRICE_STYLE,
@@ -91,7 +92,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OLD_PRICE_BACKGROUND,
           T.OLD_PRICE_FONT_FAMILY,
@@ -99,9 +100,9 @@ class d extends E {
           T.OLD_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_PRICE] = [
+    ], O[S.OMNIBUS_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_PRICE_TEXT_BEFORE,
@@ -112,7 +113,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_PRICE_BACKGROUND,
           T.OMNIBUS_PRICE_FONT_FAMILY,
@@ -120,9 +121,9 @@ class d extends E {
           T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_DISCOUNT] = [
+    ], O[S.OMNIBUS_DISCOUNT] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
@@ -133,7 +134,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_DISCOUNT_BACKGROUND,
           T.OMNIBUS_DISCOUNT_FONT_FAMILY,
@@ -141,9 +142,9 @@ class d extends E {
           T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], I[S.BUTTON] = [
+    ], O[S.BUTTON] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.BUTTON_TEXT,
@@ -153,7 +154,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.BUTTON_COLOR,
           T.BUTTON_FONT_FAMILY,
@@ -164,9 +165,9 @@ class d extends E {
           T.BUTTON_BORDER
         ]
       )
-    ], I[S.CUSTOM_ATTRIBUTE] = [
+    ], O[S.CUSTOM_ATTRIBUTE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           T.CUSTOM_ATTR_STYLE,
           T.CUSTOM_ATTR_ALIGN,
@@ -175,7 +176,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.CUSTOM_ATTR_BACKGROUND,
           T.CUSTOM_ATTR_FONT_FAMILY,
@@ -183,9 +184,9 @@ class d extends E {
           T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], I[S.IMAGE] = [
+    ], O[S.IMAGE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.IMAGE_SIZE,
@@ -196,5 +197,5 @@ class d extends E {
   }
 }
 export {
-  d as SettingsPanel
+  s as SettingsPanel
 };