@useinsider/guido 3.12.0-beta.840207a → 3.12.0-beta.86e34da

package/dist/enums/extensions/recommendationBlock.js

@@ -1,16 +1,28 @@
 import { useTranslations as r } from "../../composables/useTranslations.js";
-const l = {
+const c = {
   RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com",
   // Relative path → same-origin as the embedding inone dashboard.
   PRODUCT_ATTRIBUTES_PATH: "/product-attributes/get-attributes",
   // Reusable Recommendation Strategies (RRS), also same-origin on inone.
   RECOMMENDATION_STRATEGIES_PATH: "/api/recommendation-strategies",
-  STRATEGY_RECOMMENDATION_URL_PATH: "/api/recommendation-strategies/strategy-recommendation-url"
-}, c = {
+  // POST. Builds a strategy's product-feed URL. Takes the WHOLE strategy record,
+  // not an id: the strategy's algorithm decides the feed's path segment
+  // (`/v2/top-sellers` vs `/v2/user-based` …) and which params it needs, so there
+  // is no fixed URL an id could be substituted into.
+  STRATEGY_ENDPOINT_GENERATE_PATH: "/api/recommendation-strategies/endpoint-generate",
+  // POST, no body. Answers `{ status, message, strategyId }` — the new id only,
+  // never the copy's name, so the listing has to be fetched again to display it.
+  STRATEGY_DUPLICATE_PATH: "/api/recommendation-strategies/{{id}}/duplicate"
+}, l = {
+  LISTING: "/discovery/recommendation-strategies",
+  CREATE: "/discovery/recommendation-strategies/create",
+  EDIT: "/discovery/recommendation-strategies/{{id}}/edit"
+}, d = {
   CLIENT_ID: "clientId",
-  STRATEGY_ID: "strategy_id",
-  FILTERS: "filters"
-}, d = "[sr_strategies.status][=][active]*[sr_strategies.suitable_channels][~][EMAIL]", m = () => {
+  FILTERS: "filters",
+  PAGE: "page",
+  PER_PAGE: "per_page"
+}, m = 100, p = 50, v = "[sr_strategies.status][=][active]*[sr_strategies.suitable_channels][~][EMAIL]", E = () => {
   const e = r();
   return [
     {
@@ -74,14 +86,14 @@ const l = {
       path: "top-sellers"
     }
   ];
-}, p = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], v = [
+}, g = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], h = [
   { text: "before the amount", value: "0" },
   { text: "after the amount", value: "1" }
-], h = [
+], T = [
   { text: "dot(.)", value: "." },
   { text: "comma(,)", value: "," },
   { text: "space( )", value: " " }
-], x = [
+], _ = [
   { text: "0", value: "0" },
   { text: "1", value: "1" },
   { text: "2", value: "2" },
@@ -110,7 +122,7 @@ const l = {
 ], i = [
   { text: "true", value: "==" },
   { text: "false", value: "!=" }
-], g = (e) => {
+], x = (e) => {
   if (!e)
     return t;
   switch (e) {
@@ -130,15 +142,18 @@ const l = {
 };
 export {
   a as OP_ANY_OF,
-  p as PriceAttributes,
-  c as QUERY_PARAMS,
-  d as RRS_EMAIL_ACTIVE_FILTER,
-  l as URLS,
-  x as currencyDecimalCounts,
-  v as currencyLocationMaps,
-  h as currencyOperators,
-  g as getOperatorOptions,
-  m as getRecommendationFeedSourceMaps,
+  g as PriceAttributes,
+  d as QUERY_PARAMS,
+  v as RRS_EMAIL_ACTIVE_FILTER,
+  p as RRS_STRATEGIES_MAX_PAGES,
+  m as RRS_STRATEGIES_PER_PAGE,
+  l as STRATEGY_PAGES,
+  c as URLS,
+  _ as currencyDecimalCounts,
+  h as currencyLocationMaps,
+  T as currencyOperators,
+  x as getOperatorOptions,
+  E as getRecommendationFeedSourceMaps,
   s as operatorOptionsForArrayOfStrings,
   i as operatorOptionsForBooleans,
   o as operatorOptionsForDates,

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BLOCK_BACKGROUND = "recommendation-block-background-color-control", c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

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

@@ -0,0 +1,10 @@
+import { createBlockBackgroundColorControl as o } from "../../../controlFactories.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
+const c = o(
+  r.BLOCK_BACKGROUND,
+  t
+);
+export {
+  c as BlockBackgroundColorControl
+};

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

@@ -1,6 +1,6 @@
-var p = Object.defineProperty;
-var g = (d, l, t) => l in d ? p(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
-var s = (d, l, t) => g(d, typeof l != "symbol" ? l + "" : l, t);
+var g = Object.defineProperty;
+var p = (d, l, t) => l in d ? g(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
+var s = (d, l, t) => p(d, typeof l != "symbol" ? l + "" : l, t);
 import { useConfig as h } from "../../../../../composables/useConfig.js";
 import { CommonControl as y } from "../../../common-control.js";
 import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
@@ -19,7 +19,7 @@ import { LOCALE_CONTROL_ID as mt } from "./locale.js";
 import { PricePlacementControl as S } from "./pricePlacement.js";
 import { PRICE_PLACEMENT_CONTROL_ID as Ct } from "./pricePlacement.js";
 import { ProductCountControl as O } from "./productCount.js";
-import { PRODUCT_COUNT_CONTROL_ID as pt } from "./productCount.js";
+import { PRODUCT_COUNT_CONTROL_ID as gt } from "./productCount.js";
 import { ProductLayoutControl as P } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as yt } from "./productLayout.js";
 import { ShuffleControl as L } from "./shuffle.js";
@@ -101,14 +101,14 @@ class et extends y {
       n.api = this.api;
     }), `
             <div class="recommendation-controls-container">
-                ${this.layoutOrientationControl.getTemplate()}
-                ${this.productCountControl.getTemplate()}
-                ${this.productLayoutControl.getTemplate()}
                 ${((o = this.strategyControl ?? this.algorithmControl) == null ? void 0 : o.getTemplate()) ?? ""}
                 ${this.localeControl.getTemplate()}
-                ${this.pricePlacementControl.getTemplate()}
                 ${this.currencyControl.getTemplate()}
                 ${this.filtersControl.getTemplate()}
+                ${this.productCountControl.getTemplate()}
+                ${this.productLayoutControl.getTemplate()}
+                ${this.layoutOrientationControl.getTemplate()}
+                ${this.pricePlacementControl.getTemplate()}
                 ${this.shuffleControl.getTemplate()}
             </div>
         `;
@@ -205,10 +205,10 @@ class et extends y {
       mobileCardsInRow: t.mobileCardsInRow,
       mobileLayoutEnabled: t.mobileLayoutEnabled,
       orientation: t.layout,
-      // Only sync filters from node config during initial load.
-      // After initialization, the Pinia store is the source of truth
-      // for filters (edited via the filter drawer).
-      ...o ? {} : { filters: t.filters },
+      // Only sync filters and strategy from node config during initial load.
+      // After initialization, the Pinia store is the source of truth for both
+      // (edited via the filter drawer and the strategy picker respectively).
+      ...o ? {} : { filters: t.filters, strategyId: t.strategyId },
       shuffleProducts: t.shuffleProducts,
       priceMovedToNextLine: t.priceMovedToNextLine,
       priceHideIfSameAsDiscounted: t.priceHideIfSameAsDiscounted,
@@ -346,24 +346,28 @@ class et extends y {
         return;
       }
       const i = t.$state.configVersion;
-      i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
+      i !== o && (o = i, this._persistStoreConfigToNode(), this._debouncedFetchProducts());
       const c = t.recommendationProducts, u = c !== e, f = Array.isArray(c) && c.length > 0;
       u && f && (e = c, this._debouncedRegenerateWithProducts());
     });
   }
   /**
-   * Persists the current filter state from Pinia store to the Stripo node config.
-   * This ensures filters survive template save/reload cycles.
+   * Persists the Pinia-owned parts of the block config to the Stripo node config,
+   * so they survive template save/reload cycles.
+   *
+   * Filters are edited in a drawer and the strategy in an overlaid picker — neither
+   * is a Stripo form element, so neither can write to the node itself. Both ride
+   * this one update to keep the undo history to a single entry per change.
    */
-  _persistFiltersToNodeConfig() {
+  _persistStoreConfigToNode() {
     if (!this.currentNode || !this.api)
       return;
-    const { filters: t } = this.store.recommendationConfigs;
+    const { filters: t, strategyId: e } = this.store.recommendationConfigs;
     m.updateConfig(
       this.api,
       this.currentNode,
-      { filters: t },
-      "Update recommendation filters"
+      { filters: t, strategyId: e },
+      "Update recommendation settings"
     );
   }
 }
@@ -380,7 +384,7 @@ export {
   _ as LayoutOrientationControl,
   T as LocaleControl,
   Ct as PRICE_PLACEMENT_CONTROL_ID,
-  pt as PRODUCT_COUNT_CONTROL_ID,
+  gt as PRODUCT_COUNT_CONTROL_ID,
   yt as PRODUCT_LAYOUT_CONTROL_ID,
   S as PricePlacementControl,
   O as ProductCountControl,

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

@@ -1,146 +1,285 @@
-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 {
+var $ = Object.defineProperty;
+var O = (g, h, t) => h in g ? $(g, h, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[h] = t;
+var u = (g, h, t) => O(g, typeof h != "symbol" ? h + "" : h, t);
+import { useTranslations as f } from "../../../../../composables/useTranslations.js";
+import { STRATEGY_PAGES as R } from "../../../../../enums/extensions/recommendationBlock.js";
+import { formatShortDate as I } from "../../../../../utils/dateUtil.js";
+import { UEAttr as b } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as L } from "../../../common-control.js";
+import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { navigateToStrategyPage as w } from "../../utils/strategyNavigation.js";
+import { buildStrategySummary as H } from "../../utils/strategySummary.js";
+const D = "recommendation-strategy-control", T = {
+  CREATE_BUTTON: "strategyCreate",
+  DETAILS_BUTTON: "strategyDetails"
+}, E = "guido__btn-strategy-create", C = "guido__btn-strategy-details", s = {
+  ROOT: "data-strategy-control",
+  TRIGGER: "data-strategy-trigger",
+  VALUE: "data-strategy-value",
+  MENU: "data-strategy-menu",
+  SEARCH: "data-strategy-search",
+  LIST: "data-strategy-list",
+  OPTION_ID: "data-strategy-id",
+  CARD: "data-strategy-card",
+  VIEW_MORE: "data-strategy-view-more"
+}, _ = 8, M = 150, N = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm-1-7a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0v-4zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></svg>', G = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.999a1.042 1.042 0 0 1-.784-.305l-5.91-5.91a1.045 1.045 0 1 1 1.478-1.478L12 13.522l5.216-5.216a1.045 1.045 0 1 1 1.478 1.478l-5.91 5.91a1.042 1.042 0 0 1-.784.305z"></path></svg>', o = (g) => g.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+class j extends L {
   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);
+    u(this, "store", A());
+    /**
+     * InOne's dictionary, not Stripo's. Every dotted key here
+     * (`discovery-strategy.*`, `gpt-app-builder.*`) lives in the host panel's
+     * translations, which `this.api.translate` does not read — that one is only
+     * for the plain-English control labels the rest of this panel uses.
+     */
+    u(this, "trans", f());
+    u(this, "events", null);
+    u(this, "unsubscribeStore", null);
+    u(this, "searchTerm", "");
+    u(this, "isOpen", !1);
+    u(this, "cardHideTimer", null);
   }
   getId() {
-    return m;
+    return D;
   }
   getTemplate() {
     return `
-            <div class="strategy-control-container">
-                ${this._GuTwoColumns([
+            <div class="strategy-control" ${s.ROOT}>
+                ${this._GuOneColumn([
       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
+      // The menu is absolutely positioned against THIS wrapper. Without
+      // it the menu is a grid item of the column container and its
+      // static position resolves to the container's top, so it opens
+      // over the label instead of under the trigger.
+      `<div class="strategy-control__field">
+                        <div class="strategy-control__row">
+                            <button type="button" class="strategy-select" ${s.TRIGGER}>
+                                <span class="strategy-select__value" ${s.VALUE}></span>
+                                <span class="strategy-select__caret">${G}</span>
+                            </button>
+                            ${this._GuIconButton({
+        name: T.DETAILS_BUTTON,
+        icon: "strategy-settings-icon",
+        className: "strategy-control__details",
+        id: C
       })}
-                        ${this._GuIconButton({
-        name: e.DETAILS_BUTTON,
-        icon: "strategy-details-icon",
-        className: h
+                        </div>
+                        <div class="strategy-menu" ${s.MENU} hidden>
+                            <div class="strategy-menu__search">
+                                <input type="text" class="strategy-menu__search-input" ${s.SEARCH}
+                                    placeholder="${o(this.trans("discovery-strategy.search"))}">
+                            </div>
+                            <ul class="strategy-menu__list" ${s.LIST}></ul>
+                        </div>
+                    </div>`,
+      `<div class="strategy-control__create-row">
+                        ${this._GuButton({
+        name: T.CREATE_BUTTON,
+        label: this.api.translate("Create New Strategy"),
+        id: E
       })}
                     </div>`
     ])}
-                ${this._GuOnPageMessage({ name: e.MESSAGE, icon: "migration-info-icon" })}
+                <div class="strategy-card" ${s.CARD} hidden></div>
             </div>
         `;
   }
   onRender() {
-    this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates(), this._setupDetailsButtonListener(), this._refreshSelectionState();
+    this._setupEventListeners(), this._subscribeToStoreChanges(), this._render();
   }
   onDestroy() {
-    var t;
-    (t = this.detailsButton) == null || t.removeEventListener("click", this.detailsListener);
-  }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._initializeSelectItems(), this._setFormValues(), this._refreshSelectionState();
+    var t, e;
+    this._cancelHideCard(), (t = this.events) == null || t.abort(), this.events = null, (e = this.unsubscribeStore) == null || e.call(this), this.unsubscribeStore = null, this.isOpen = !1, this.searchTerm = "", super.onDestroy();
   }
-  _setFormValues() {
-    const t = a.getConfig(this.currentNode);
-    this.api.updateValues({ [e.STRATEGY]: t.strategyId });
+  _root() {
+    var t;
+    return ((t = this.getContainer()) == null ? void 0 : t.querySelector(`[${s.ROOT}]`)) ?? null;
   }
-  _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);
-      }
+  /**
+   * All listeners are delegated onto nodes that survive `innerHTML` rebuilds and
+   * are torn down together by the AbortController — the option rows themselves
+   * are replaced on every render and must never own a listener.
+   */
+  _setupEventListeners() {
+    var d, c, m, p, y, v;
+    (d = this.events) == null || d.abort(), this.events = new AbortController();
+    const { signal: t } = this.events, e = this._root();
+    if (!e)
+      return;
+    (c = e.querySelector(`[${s.TRIGGER}]`)) == null || c.addEventListener("click", () => this._toggleMenu(), { signal: t }), (m = e.querySelector(`#${C}`)) == null || m.addEventListener("click", () => this.store.openStrategyDrawer(), { signal: t }), (p = e.querySelector(`#${E}`)) == null || p.addEventListener("click", () => w(R.CREATE), { signal: t }), (y = e.querySelector(`[${s.SEARCH}]`)) == null || y.addEventListener("input", (l) => {
+      this.searchTerm = l.target.value, this._renderOptions();
+    }, { signal: t });
+    const r = e.querySelector(`[${s.LIST}]`);
+    r == null || r.addEventListener("click", (l) => {
+      const n = l.target.closest(`[${s.OPTION_ID}]`), a = n == null ? void 0 : n.getAttribute(s.OPTION_ID);
+      a && (this._closeMenu(), this.store.selectStrategy(a));
+    }, { signal: t }), r == null || r.addEventListener("mouseenter", (l) => {
+      var a, S;
+      const n = (S = (a = l.target) == null ? void 0 : a.closest) == null ? void 0 : S.call(a, `[${s.OPTION_ID}]`);
+      n && this._showCard(n);
+    }, { capture: !0, signal: t }), r == null || r.addEventListener("mouseleave", () => this._scheduleHideCard(), { signal: t });
+    const i = e.querySelector(`[${s.CARD}]`);
+    i == null || i.addEventListener("mouseenter", () => this._cancelHideCard(), { signal: t }), i == null || i.addEventListener("mouseleave", () => this._hideCard(), { signal: t }), i == null || i.addEventListener("click", (l) => {
+      const n = l.target.closest(`[${s.VIEW_MORE}]`), a = n == null ? void 0 : n.getAttribute(s.VIEW_MORE);
+      a && (this._closeMenu(), a !== this.store.recommendationConfigs.strategyId && this.store.selectStrategy(a), this.store.openStrategyDrawer());
+    }, { signal: t }), (v = this.getContainer()) == null || v.addEventListener("mousedown", (l) => {
+      var n, a;
+      this.isOpen && !((a = (n = l.target).closest) != null && a.call(n, `[${s.ROOT}]`)) && this._closeMenu();
+    }, { signal: t });
   }
   /**
-   * Reconciles the panel with the strategy listing: loading, empty, and
-   * deleted-strategy states.
+   * Keeps the trigger label and the gear's enabled state in step with the store.
    *
-   * 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.
+   * Both depend on data that arrives after the first render: the strategy listing
+   * is fetched asynchronously, and `strategyId` changes when the user picks,
+   * duplicates, or switches blocks.
+   */
+  _subscribeToStoreChanges() {
+    var e;
+    (e = this.unsubscribeStore) == null || e.call(this);
+    let t = this._stateKey();
+    this.unsubscribeStore = this.store.$subscribe(() => {
+      const r = this._stateKey();
+      r !== t && (t = r, this._render());
+    });
+  }
+  /**
+   * Fingerprint of everything the rendered markup depends on.
    *
-   * 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.
+   * Ids rather than a count: a refetch that renames a strategy or swaps one for
+   * another of the same length would otherwise leave the trigger and the card
+   * showing stale copy until some unrelated store change happened to repaint.
    */
-  _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..."));
+  _stateKey() {
+    return [
+      this.store.recommendationConfigs.strategyId,
+      this.store.strategiesLoading,
+      this.store.strategies.map((t) => `${t.strategy_id}:${t.name}`).join(",")
+    ].join("|");
+  }
+  _render() {
+    this._renderTrigger(), this._renderOptions(), this.api.setUIEAttribute(
+      T.DETAILS_BUTTON,
+      b.BUTTON.disabled,
+      this.store.getSelectedStrategy ? "false" : "true"
+    );
+  }
+  _renderTrigger() {
+    var r;
+    const t = (r = this._root()) == null ? void 0 : r.querySelector(`[${s.VALUE}]`);
+    if (!t)
       return;
-    }
-    if (!t) {
-      this._showMessage(this.api.translate(
-        "No recommendation strategies are available for email. Create one in Smart Recommender, then reopen this block."
-      ));
+    const e = this.store.getSelectedStrategy;
+    t.textContent = (e == null ? void 0 : e.name) ?? this.trans("smart-recommender.select-recommendation-strategy"), t.classList.toggle("strategy-select__value--placeholder", !e), t.classList.toggle("strategy-select__value--missing", this.store.hasMissingStrategy);
+  }
+  _renderOptions() {
+    var i;
+    const t = (i = this._root()) == null ? void 0 : i.querySelector(`[${s.LIST}]`);
+    if (!t)
+      return;
+    if (this._hideCard(), this.store.strategiesLoading) {
+      t.innerHTML = `<li class="strategy-menu__empty">${o(
+        this.trans("newsletter.loading")
+      )}</li>`;
       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.`
-      ));
+    const e = this._filteredStrategies();
+    if (!e.length) {
+      t.innerHTML = `<li class="strategy-menu__empty">${o(
+        this.trans("discovery-strategy.no-data-title-text")
+      )}</li>`;
       return;
     }
-    this._hideMessage();
+    const r = this.store.recommendationConfigs.strategyId;
+    t.innerHTML = e.map((d) => {
+      const c = String(d.strategy_id);
+      return `<li class="strategy-menu__option${c === r ? " strategy-menu__option--selected" : ""}"
+                ${s.OPTION_ID}="${o(c)}">${o(d.name)}</li>`;
+    }).join("");
   }
-  _setDisabled(t, i) {
-    try {
-      this.api.setUIEAttribute(t, l.SELECTPICKER.disabled, i);
-    } catch (n) {
-      console.warn(`[StrategyControl] Failed to set disabled on ${t}:`, n);
+  /**
+   * Client-side filtering: the listing is fetched whole and cached, so narrowing
+   * it here avoids a request per keystroke.
+   */
+  _filteredStrategies() {
+    const t = this.searchTerm.trim().toLowerCase();
+    return t ? this.store.strategies.filter((e) => e.name.toLowerCase().includes(t)) : this.store.strategies;
+  }
+  _toggleMenu() {
+    var e, r, i;
+    if (this.isOpen) {
+      this._closeMenu();
+      return;
     }
+    this.isOpen = !0;
+    const t = this._root();
+    (e = t == null ? void 0 : t.querySelector(`[${s.MENU}]`)) == null || e.removeAttribute("hidden"), (r = t == null ? void 0 : t.querySelector(`[${s.TRIGGER}]`)) == null || r.classList.add("strategy-select--open"), this._renderOptions(), (i = t == null ? void 0 : t.querySelector(`[${s.SEARCH}]`)) == null || i.focus();
   }
-  _showMessage(t) {
-    this._setInfoMessageValue(e.MESSAGE, t);
+  _closeMenu() {
+    var r, i;
+    this.isOpen = !1, this.searchTerm = "", this._hideCard();
+    const t = this._root(), e = t == null ? void 0 : t.querySelector(`[${s.SEARCH}]`);
+    e && (e.value = ""), (r = t == null ? void 0 : t.querySelector(`[${s.MENU}]`)) == null || r.setAttribute("hidden", ""), (i = t == null ? void 0 : t.querySelector(`[${s.TRIGGER}]`)) == null || i.classList.remove("strategy-select--open");
   }
-  _hideMessage() {
-    const t = this.getContainer().querySelector(`[data-info-message="${e.MESSAGE}"]`);
-    t && (t.style.display = "none");
+  /**
+   * The hover card is `position: fixed`, so it can sit beside the panel instead of
+   * being clipped by it. Placed once per hover — the list cannot scroll under the
+   * pointer without the pointer leaving, so there is nothing to keep in sync.
+   */
+  _showCard(t) {
+    var y;
+    const e = (y = this._root()) == null ? void 0 : y.querySelector(`[${s.CARD}]`), r = t.getAttribute(s.OPTION_ID), i = this.store.strategies.find((v) => String(v.strategy_id) === r);
+    if (!e || !i)
+      return;
+    this._cancelHideCard(), e.innerHTML = this._buildCardHtml(i), e.removeAttribute("hidden");
+    const d = t.getBoundingClientRect(), c = e.getBoundingClientRect(), m = d.left - c.width - _ >= _ ? d.left - c.width - _ : d.right + _, p = window.innerHeight - c.height - _;
+    e.style.left = `${Math.max(_, m)}px`, e.style.top = `${Math.min(Math.max(_, d.top), Math.max(_, p))}px`;
   }
-  _onDetailsClick() {
-    this.store.openStrategyDrawer();
+  /** Grace period for the pointer to cross the gap between option and card. */
+  _scheduleHideCard() {
+    this._cancelHideCard(), this.cardHideTimer = setTimeout(() => this._hideCard(), M);
   }
-  _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);
-    });
+  _cancelHideCard() {
+    this.cardHideTimer && (clearTimeout(this.cardHideTimer), this.cardHideTimer = null);
+  }
+  _hideCard() {
+    var t, e;
+    this._cancelHideCard(), (e = (t = this._root()) == null ? void 0 : t.querySelector(`[${s.CARD}]`)) == null || e.setAttribute("hidden", "");
+  }
+  /**
+   * Mirrors the design system's `InInfoBox`: coloured top rule, heading +
+   * "last updated" details, content, then a divided footer holding the View
+   * More text button. The component itself cannot render here, so the markup
+   * and the CSS reproduce its structure and tokens rather than approximating
+   * them — the values in `recommendation.css` are read from its stylesheet.
+   */
+  _buildCardHtml(t) {
+    const { trans: e } = this, r = H(t, e).map((i) => `
+                <div class="strategy-card__row">
+                    <p class="strategy-card__row-title">${o(i.title)}</p>
+                    <p class="strategy-card__row-value">${o(i.value)}</p>
+                </div>
+            `).join("");
+    return `
+            <div class="strategy-card__body">
+                <p class="strategy-card__title">${o(t.name)}</p>
+                <p class="strategy-card__updated">${o(e("gpt-app-builder.strategy-last-updated", {
+      date: I(t.updated_at)
+    }))}</p>
+                <div class="strategy-card__rows">${r}</div>
+            </div>
+            <div class="strategy-card__footer">
+                <button type="button" class="strategy-card__more"
+                    ${s.VIEW_MORE}="${o(String(t.strategy_id))}">
+                    ${N}
+                    <span>${o(e("gpt-app-builder.view-more"))}</span>
+                </button>
+            </div>
+        `;
   }
 }
 export {
-  m as STRATEGY_CONTROL_ID,
-  E as StrategyControl
+  D as STRATEGY_CONTROL_ID,
+  j as StrategyControl
 };