@useinsider/guido 3.12.0-beta.d2745e7 → 3.12.0-beta.d77b0d2

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

@@ -0,0 +1,297 @@
+var S = Object.defineProperty;
+var T = (d, a, t) => a in d ? S(d, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[a] = t;
+var h = (d, a, t) => T(d, typeof a != "symbol" ? a + "" : a, t);
+import { useTranslations as E } from "../../../../../composables/useTranslations.js";
+import { STRATEGY_PAGES as v } from "../../../../../enums/extensions/recommendationBlock.js";
+import { formatShortDate as C } from "../../../../../utils/dateUtil.js";
+import { escapeHtml as _ } from "../../../../../utils/htmlEscape.js";
+import { UEAttr as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as b } from "../../../common-control.js";
+import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
+import { navigateToStrategyPage as I } from "../../utils/strategyNavigation.js";
+import { buildStrategySummary as R } from "../../utils/strategySummary.js";
+const A = "recommendation-strategy-control", o = {
+  STRATEGY: "strategyId",
+  MISSING_MESSAGE: "strategyMissing",
+  CREATE_BUTTON: "strategyCreate",
+  DETAILS_BUTTON: "strategyDetails"
+}, g = "guido__btn-strategy-create", m = "guido__btn-strategy-details", n = {
+  ROOT: "data-strategy-control",
+  MISSING: "data-strategy-missing",
+  CARD: "data-strategy-card",
+  VIEW_MORE: "data-strategy-view-more"
+}, M = "dropdown__item", O = ".dropdown__text", p = (d) => d.composedPath().find((a) => a instanceof HTMLElement && a.classList.contains(M)) ?? null, c = 8, w = 150, $ = '<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>';
+class V extends b {
+  constructor() {
+    super(...arguments);
+    h(this, "store", f());
+    /**
+     * 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.
+     */
+    h(this, "trans", E());
+    h(this, "events", null);
+    h(this, "unsubscribeStore", null);
+    h(this, "cardHideTimer", null);
+    /**
+     * Resolved once per render.
+     *
+     * The card stays INSIDE the control's markup. Parking it at the top of the
+     * shadow root positions it identically but places it outside the settings
+     * panel, and Stripo reads a press there as a press on the canvas: the block
+     * is deselected, the panel closes, and View More never gets its click.
+     */
+    h(this, "card", null);
+  }
+  getId() {
+    return A;
+  }
+  getTemplate() {
+    return `
+            <div class="strategy-control" ${n.ROOT}>
+                ${this._GuOneColumn([
+      this._GuLabel({ text: this.api.translate("Recommendation Strategy") }),
+      `<div class="strategy-control__row">
+                        ${this._GuSelect({
+        name: o.STRATEGY,
+        placeholder: this.trans("smart-recommender.select-recommendation-strategy"),
+        // Filled in onRender — the listing is fetched async.
+        options: [],
+        searchable: !0,
+        className: "strategy-control__select"
+      })}
+                        ${this._GuIconButton({
+        name: o.DETAILS_BUTTON,
+        icon: "strategy-settings-icon",
+        className: "strategy-control__details",
+        id: m
+      })}
+                    </div>`,
+      /*
+       * Hidden in the markup rather than via `setVisibility`: a
+       * `UE-MESSAGE` that is parsed before it has a value paints the
+       * literal "Undefined", and `onRender` runs too late to prevent
+       * the flash. `_GuOnPageMessage` hides its wrapper for the same
+       * reason.
+       */
+      `<div ${n.MISSING} style="display: none;">
+                        ${this._GuMessage({ name: o.MISSING_MESSAGE, type: "alert" })}
+                    </div>`,
+      `<div class="strategy-control__create-row">
+                        ${this._GuButton({
+        name: o.CREATE_BUTTON,
+        label: this.api.translate("Create New Strategy"),
+        id: g
+      })}
+                    </div>`
+    ])}
+                <div class="strategy-card" ${n.CARD} hidden></div>
+            </div>
+        `;
+  }
+  onRender() {
+    var t;
+    this.card = ((t = this._root()) == null ? void 0 : t.querySelector(`[${n.CARD}]`)) ?? null, this._setupEventListeners(), this._subscribeToStoreChanges(), this._render();
+  }
+  onDestroy() {
+    var t, e;
+    this._cancelHideCard(), this.card = null, (t = this.events) == null || t.abort(), this.events = null, (e = this.unsubscribeStore) == null || e.call(this), this.unsubscribeStore = null, super.onDestroy();
+  }
+  _root() {
+    var t;
+    return ((t = this.getContainer()) == null ? void 0 : t.querySelector(`[${n.ROOT}]`)) ?? null;
+  }
+  _setupEventListeners() {
+    var s, r, i;
+    (s = this.events) == null || s.abort(), this.events = new AbortController();
+    const { signal: t } = this.events, e = this._root();
+    e && (this.api.onValueChanged(o.STRATEGY, (l) => {
+      this._onStrategyChange(typeof l == "string" ? l : "");
+    }), (r = e.querySelector(`#${m}`)) == null || r.addEventListener("click", () => this.store.openStrategyDrawer(), { signal: t }), (i = e.querySelector(`#${g}`)) == null || i.addEventListener("click", () => I(v.CREATE), { signal: t }), this._setupCardListeners(t));
+  }
+  /**
+   * The card follows Stripo's own option rows.
+   *
+   * Stripo does not render the dropdown inside `ue-select`: it hands the list to
+   * `UE-FLOATING-COMPONENTS-CONTAINER`, a sibling of the whole settings panel.
+   * The shadow root is the only node that is an ancestor of both, so that is
+   * where the listener goes.
+   *
+   * `capture: true` is load-bearing, not caution. Stripo binds its own
+   * `mouseover` on the option row to drive `ue-select`'s `hoverItem` output and
+   * stops propagation there — measured: a bubble-phase listener on the shadow
+   * root sees nothing, the event dies one level above the row. Capture runs
+   * root-to-target, before that handler ever gets to speak.
+   *
+   * `mouseover`/`mouseout` rather than `mouseenter`/`mouseleave` because the
+   * latter do not participate in delegation at all, and the row is resolved
+   * through `composedPath()` rather than `event.target`.
+   *
+   * A row is matched to a strategy by its label, which doubles as the scope
+   * check — hovering the Locale or Currency dropdown finds no match and is
+   * ignored. Two strategies sharing a name would show the first one's card;
+   * Smart Recommender does not enforce unique names, and that is the cost.
+   */
+  _setupCardListeners(t) {
+    const e = this.getContainer();
+    e == null || e.addEventListener("mouseover", (r) => {
+      const i = p(r);
+      i && this._showCard(i);
+    }, { capture: !0, signal: t }), e == null || e.addEventListener("mouseout", (r) => {
+      p(r) && this._scheduleHideCard();
+    }, { capture: !0, signal: t });
+    const { card: s } = this;
+    s == null || s.addEventListener("mouseenter", () => this._cancelHideCard(), { signal: t }), s == null || s.addEventListener("mouseleave", () => this._hideCard(), { signal: t }), s == null || s.addEventListener("click", (r) => {
+      const i = r.target.closest(`[${n.VIEW_MORE}]`), l = i == null ? void 0 : i.getAttribute(n.VIEW_MORE);
+      l && (this._hideCard(), this.store.openStrategyDrawer(l));
+    }, { signal: t });
+  }
+  /**
+   * Guarded the same way `AlgorithmControl` guards its own select: writing the
+   * value back in `_render()` re-fires `onValueChanged`, and without this the
+   * control would re-select on every store change.
+   */
+  _onStrategyChange(t) {
+    !t || t === this.store.recommendationConfigs.strategyId || (this._hideCard(), this.store.selectStrategy(t));
+  }
+  /**
+   * Keeps the select's items, its value and the gear's enabled state in step
+   * with the store.
+   *
+   * All three 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 s = this._stateKey();
+      s !== t && (t = s, this._render());
+    });
+  }
+  /**
+   * Fingerprint of everything the rendered control depends on.
+   *
+   * Ids rather than a count: a refetch that renames a strategy or swaps one for
+   * another of the same length would otherwise leave the select showing stale
+   * copy until some unrelated store change happened to repaint.
+   */
+  _stateKey() {
+    return [
+      this.store.recommendationConfigs.strategyId,
+      this.store.strategiesLoading,
+      this.store.strategies.map((t) => `${t.strategy_id}:${t.name}`).join(",")
+    ].join("|");
+  }
+  _render() {
+    this.api.setUIEAttribute(
+      o.STRATEGY,
+      u.SELECTPICKER.items,
+      this.store.getStrategyOptions
+    ), this.api.updateValues({ [o.STRATEGY]: this.store.recommendationConfigs.strategyId }), this.api.setUIEAttribute(
+      o.DETAILS_BUTTON,
+      u.BUTTON.disabled,
+      this.store.getSelectedStrategy ? "false" : "true"
+    ), this._renderMissingMessage();
+  }
+  /**
+   * A strategy id the listing no longer knows was deleted in Smart Recommender.
+   * The id is deliberately kept (the save gate needs to see it) but the select
+   * falls back to its placeholder, so without this a broken block would look
+   * like one that was simply never configured.
+   */
+  _renderMissingMessage() {
+    var s;
+    const t = (s = this._root()) == null ? void 0 : s.querySelector(`[${n.MISSING}]`);
+    if (!t)
+      return;
+    const e = this.store.hasMissingStrategy;
+    e && this.api.setUIEAttribute(
+      o.MISSING_MESSAGE,
+      "value",
+      this.trans("recommendation-strategy.strategy-not-found")
+    ), t.style.display = e ? "" : "none";
+  }
+  /**
+   * The hover card is `position: fixed`, so it can sit beside the narrow 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) {
+    const { card: e } = this, s = this._strategyForItem(t);
+    if (!e || !s)
+      return;
+    this._cancelHideCard(), e.innerHTML = this._buildCardHtml(s), e.removeAttribute("hidden");
+    const r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), l = r.left - i.width - c >= c ? r.left - i.width - c : r.right + c, y = window.innerHeight - i.height - c;
+    e.style.left = `${Math.max(c, l)}px`, e.style.top = `${Math.min(Math.max(c, r.top), Math.max(c, y))}px`;
+  }
+  /**
+   * Resolves one of Stripo's option rows back to the strategy it was built from.
+   *
+   * Matched against the *rendered option labels*, not raw strategy names. Stripo's
+   * row carries no value of its own — its bindings are disabled/selected/tabindex —
+   * so the text is all there is, and `getStrategyOptions` disambiguates duplicate
+   * names by appending the id. Comparing to `strategy.name` would miss exactly those
+   * rows; going through the option list keeps the label the user sees and the label
+   * we match on in lockstep.
+   */
+  _strategyForItem(t) {
+    var r;
+    const e = (r = (t.querySelector(O) ?? t).textContent) == null ? void 0 : r.trim();
+    if (!e)
+      return;
+    const s = this.store.getStrategyOptions.find(({ text: i }) => i.trim() === e);
+    return s ? this.store.strategies.find((i) => String(i.strategy_id) === s.value) : void 0;
+  }
+  /** Grace period for the pointer to cross the gap between the row and the card. */
+  _scheduleHideCard() {
+    this._cancelHideCard(), this.cardHideTimer = setTimeout(() => this._hideCard(), w);
+  }
+  _cancelHideCard() {
+    this.cardHideTimer && (clearTimeout(this.cardHideTimer), this.cardHideTimer = null);
+  }
+  _hideCard() {
+    var t;
+    this._cancelHideCard(), (t = this.card) == null || t.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, s = R(t, e).map((r) => `
+                <div class="strategy-card__row">
+                    <p class="strategy-card__row-title">${_(r.title)}</p>
+                    <p class="strategy-card__row-value">${_(r.value)}</p>
+                </div>
+            `).join("");
+    return `
+            <div class="strategy-card__body">
+                <p class="strategy-card__title">${_(t.name)}</p>
+                <p class="strategy-card__updated">${_(e("gpt-app-builder.strategy-last-updated", {
+      date: C(t.updated_at)
+    }))}</p>
+                <div class="strategy-card__rows">${s}</div>
+            </div>
+            <div class="strategy-card__footer">
+                <button type="button" class="strategy-card__more"
+                    ${n.VIEW_MORE}="${_(String(t.strategy_id))}">
+                    ${$}
+                    <span>${_(e("gpt-app-builder.view-more"))}</span>
+                </button>
+            </div>
+        `;
+  }
+}
+export {
+  A as STRATEGY_CONTROL_ID,
+  V as StrategyControl
+};

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

@@ -1,6 +1,6 @@
 import r from "../../../static/assets/info.svg.js";
 import { IconsRegistry as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class h extends C {
+class l extends C {
   registerIconsSvg(t) {
     t["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -74,9 +74,23 @@ 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["strategy-settings-icon"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                fill="currentColor">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757c0
+                    .891-1.077 1.337-1.707.708l-.536-.536a1 1 0 0 0-1.414 0L4.93 6.343a1 1 0 0 0 0
+                    1.414l.535.536c.63.63.184 1.707-.707 1.707H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757c.891 0
+                    1.337 1.077.708 1.707l-.536.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414
+                    0l.536-.535c.63-.63 1.707-.184 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0
+                    1-1v-.757c0-.891 1.077-1.337 1.707-.707l.536.535a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0
+                    0-1.414l-.536-.536c-.63-.63-.183-1.707.708-1.707H20a1 1 0 0 0 1-1v-2a1 1 0 0
+                    0-1-1h-.757c-.891 0-1.337-1.077-.707-1.707l.535-.536a1 1 0 0 0
+                    0-1.414L17.657 4.93a1 1 0 0 0-1.414 0l-.536.536c-.63.63-1.707.183-1.707-.708V4zm3 8a5 5 0
+                    1 1-10 0 5 5 0 0 1 10 0zm-5 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
+            </svg>
         `, t["migration-info-icon"] = r;
   }
 }
 export {
-  h as RecommendationIconsRegistry
+  l as RecommendationIconsRegistry
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -289,6 +289,143 @@ ue-orderable.orderable-disabled .droppable-icon {
     font-weight: 400;
     line-height: 16px;
 }
+
+/*
+ * Recommendation Strategy picker (controls/main/strategy.ts).
+ *
+ * The select, its filter box and both buttons are Stripo UI elements and carry
+ * no styling of ours — these rules only lay out the row the select shares with
+ * the gear, stretch the Create button, and draw the hover card.
+ *
+ * The card's values are the design system's own, read from \`InInfoBox\`'s
+ * stylesheet. The \`In*\` components themselves cannot render in this shadow root
+ * — they are styled from the host document, and copying their stylesheets across
+ * drags normalize.css and a global \`*\`/\`svg\` reset into Stripo's panel.
+ */
+
+.strategy-control__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* The select owns the row; \`min-width: 0\` lets it shrink instead of overflowing. */
+.strategy-control__select {
+    flex: 1;
+    min-width: 0;
+}
+
+/* The gear button sits beside the select and must not stretch with it. */
+.strategy-control__details {
+    flex: none;
+}
+
+.strategy-control__create-row {
+    margin-top: 8px;
+}
+
+/*
+ * \`_GuButton\` renders <ue-button> > .control-shadow-wrapper > button.button, and
+ * every level is shrink-to-fit. Stretching only the innermost one leaves the
+ * button its intrinsic width, which is why the design's full-width row needs all
+ * three.
+ */
+.strategy-control__create-row ue-button,
+.strategy-control__create-row .control-shadow-wrapper,
+.strategy-control__create-row .button {
+    display: block;
+    width: 100%;
+}
+
+/*
+ * Hover card. Reproduces the design system's \`InInfoBox\` — same 240px medium
+ * width, 4px information-blue top rule, 16px body, and a divided footer for the
+ * View More button.
+ *
+ * \`position: fixed\` so the card sits beside the narrow panel instead of being
+ * clipped by it.
+ */
+/*
+ * \`position: fixed\` so the card escapes the narrow panel's clipping, and a
+ * z-index above Stripo's floating dropdown (which sits at 1000) since the card
+ * is drawn right beside it.
+ */
+.strategy-card {
+    position: fixed;
+    z-index: 9999;
+    width: 240px;
+    background: var(--guido-color-white);
+    border-top: 4px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(57, 57, 57, 0.15);
+}
+
+.strategy-card[hidden] {
+    display: none;
+}
+
+.strategy-card__body {
+    padding: 16px;
+}
+
+.strategy-card__title {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    word-break: break-word;
+}
+
+.strategy-card__updated {
+    margin: 4px 0 0;
+    color: var(--guido-color-gray-600);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.strategy-card__rows {
+    margin-top: 16px;
+}
+
+.strategy-card__row + .strategy-card__row {
+    margin-top: 12px;
+}
+
+.strategy-card__row-title {
+    margin: 0;
+    color: var(--guido-color-gray-600);
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.strategy-card__row-value {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    line-height: 18px;
+    word-break: break-word;
+}
+
+.strategy-card__footer {
+    padding: 8px 16px;
+    border-top: 1px solid var(--guido-color-gray-300);
+}
+
+.strategy-card__more {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    color: var(--guido-color-primary-500);
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 16px;
+}
 `;
 export {
   n as default