@useinsider/guido 3.12.0-beta.975e966 → 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/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 {