@useinsider/guido 3.17.0-beta.3e9d6e7 → 3.17.0-beta.3ff6ea0

package/dist/utils/templatePreparation.js

@@ -1,7 +1,7 @@
 import { useActionsApi as k } from "../composables/useActionsApi.js";
 import { useConfig as U } from "../composables/useConfig.js";
 import { useHtmlCompiler as x } from "../composables/useHtmlCompiler.js";
-import { DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as s } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
 import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import { mapLegacyStrategy as L } from "../extensions/Blocks/Recommendation/utils/legacyStrategyMap.js";
 import { DATA_ATTRIBUTES as A } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
@@ -11,20 +11,20 @@ import { useEditorStore as z } from "../stores/editor.js";
 import { useUnsubscribeStore as _ } from "../stores/unsubscribe.js";
 import { assignTrackingIds as v } from "./linkTrackingIds.js";
 function O(m) {
-  const i = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${A.PAGE_LIST}]`), t = [];
-  return i.forEach((s) => {
-    const o = s.getAttribute(A.PAGE_LIST);
+  const n = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${A.PAGE_LIST}]`), t = [];
+  return n.forEach((i) => {
+    const o = i.getAttribute(A.PAGE_LIST);
     o && t.push(...R(o));
   }), [...new Set(t)];
 }
 async function M(m) {
-  const n = new DOMParser().parseFromString(m, "text/html").querySelectorAll(".recommendation-block-v2");
-  if (n.length === 0)
+  const a = new DOMParser().parseFromString(m, "text/html").querySelectorAll(".recommendation-block-v2");
+  if (a.length === 0)
     return;
-  const i = C();
-  n.forEach((t) => {
+  const n = C();
+  a.forEach((t) => {
     var r, l, g, f, c;
-    const s = t.getAttribute("recommendation-id"), o = s ? Number(s) : NaN;
+    const i = t.getAttribute("recommendation-id"), o = i ? Number(i) : NaN;
     if (!Number.isFinite(o))
       return;
     const p = t.getAttribute("esd-ext-config");
@@ -42,27 +42,24 @@ async function M(m) {
       // Normalize legacy strategy keys (e.g. `mostViewed` → `mostPopular`) so
       // already-saved blocks that never re-run the migrator don't emit a
       // strategy-less campaign URL. `||` also catches '' / undefined (SD-144882).
-      strategy: L(e.strategy) || a.strategy,
-      // esd-ext-config is the source of truth for the assigned RRS —
-      // a strategy-backed block must survive save/reopen from it alone.
-      strategyId: e.strategyId ?? a.strategyId,
-      language: e.language ?? a.language,
-      size: e.size ?? a.size,
+      strategy: L(e.strategy) || s.strategy,
+      language: e.language ?? s.language,
+      size: e.size ?? s.size,
       // Spread the default arrays so each block gets a fresh reference
       // instead of sharing the singleton in DEFAULT_NODE_CONFIG.
-      productIds: e.productIds ?? [...a.productIds],
-      filters: e.filters ?? [...a.filters],
-      shuffleProducts: e.shuffleProducts ?? a.shuffleProducts,
+      productIds: e.productIds ?? [...s.productIds],
+      filters: e.filters ?? [...s.filters],
+      shuffleProducts: e.shuffleProducts ?? s.shuffleProducts,
       currencyCode: ((r = e.currency) == null ? void 0 : r.code) ?? d.code,
       currencyAlignment: ((l = e.currency) == null ? void 0 : l.alignment) ?? d.alignment,
       currencyDecimalCount: ((g = e.currency) == null ? void 0 : g.decimalCount) ?? d.decimalCount,
       currencyDecimalSeparator: ((f = e.currency) == null ? void 0 : f.decimalSeparator) ?? d.decimalSeparator,
       currencyThousandSeparator: ((c = e.currency) == null ? void 0 : c.thousandSeparator) ?? d.thousandSeparator
     };
-    i.seedBlockUrlConfig(o, h);
+    n.seedBlockUrlConfig(o, h);
   });
   try {
-    await i.fetchRecommendationCreateData();
+    await n.fetchRecommendationCreateData();
   } catch (t) {
     console.warn(
       "Recommendation reference data pre-load failed; validator will skip the availability check.",
@@ -71,39 +68,39 @@ async function M(m) {
   }
 }
 const Z = () => {
-  const m = N(), u = z(), n = _(), { getCompiledEmail: i, getTemplateData: t, updateHtmlAndCss: s } = k(), { compileHtml: o, compileAmpHtml: p } = x(), { isFeatureEnabled: e } = U();
+  const m = N(), u = z(), a = _(), { getCompiledEmail: n, getTemplateData: t, updateHtmlAndCss: i } = k(), { compileHtml: o, compileAmpHtml: p } = x(), { isFeatureEnabled: e } = U();
   return {
     prepareTemplateDetails: async () => {
       let { html: r, css: l, syncModulesIds: g = [] } = await t();
       if (e("linkTrackingIds"))
         try {
-          const { html: S, changed: F, nextSeq: H } = v(r, u.trackIdSessionFloor);
-          u.trackIdSessionFloor = H, F && (r = S, await s(S, l));
-        } catch (S) {
-          console.error("Tracking-id step failed, saving anyway:", S);
+          const { html: y, changed: H, nextSeq: I } = v(r, u.trackIdSessionFloor);
+          u.trackIdSessionFloor = I, H && (r = y, await i(y, l));
+        } catch (y) {
+          console.error("Tracking-id step failed, saving anyway:", y);
         }
-      const { html: f, ampHtml: c = "", ampErrors: T = [] } = await i({
+      const { html: f, ampHtml: c = "", ampErrors: T = [] } = await n({
         minimize: !0,
         resetDataSavedFlag: !1
       });
-      n.selectedUnsubscribePages.length && await n.fetchTemplates(), await M(r);
-      const { compiledHtml: I, stats: y, appliedRules: w } = o(f), D = c && p(c).compiledHtml, E = m.getSelectedDynamicContentList, P = C(), b = O(r);
+      a.selectedUnsubscribePages.length && await a.fetchTemplates(), await M(r);
+      const { compiledHtml: w, stats: S, appliedRules: D } = o(f), E = c && p(c).compiledHtml, P = m.getSelectedDynamicContentList, F = C(), b = O(r);
       return console.debug("HTML Compilation Stats:", {
-        originalSize: y.originalSize,
-        compiledSize: y.compiledSize,
-        reduction: `${y.reductionPercentage.toFixed(2)}%`,
-        appliedRules: w,
-        executionTime: `${y.executionTime.toFixed(2)}ms`
+        originalSize: S.originalSize,
+        compiledSize: S.compiledSize,
+        reduction: `${S.reductionPercentage.toFixed(2)}%`,
+        appliedRules: D,
+        executionTime: `${S.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: E,
-        compiledHtml: I,
+        dynamicContentList: P,
+        compiledHtml: w,
         rawHtml: r,
         css: l,
-        ampHtml: D,
+        ampHtml: E,
         ampErrors: T,
         modules: g.map(Number),
         recommendation: {
-          campaignUrls: P.recommendationCampaignUrls,
+          campaignUrls: F.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.17.0-beta.3e9d6e7",
+  "version": "3.17.0-beta.3ff6ea0",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -48,7 +48,6 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.9.0",
-    "@useinsider/design-system-organisms": "0.0.3-beta.fc2c160",
     "@useinsider/design-system-vue": "1.5.0",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",

package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue.js

@@ -1,18 +0,0 @@
-import a from "./AssignStrategyDrawer.vue2.js";
-/* empty css                          */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e(t.WpDrawer, { attrs: { id: "assign-strategy-drawer", "description-status": "", size: "medium", "description-text": t.drawerDescription, "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.assignStrategyDrawerStatus, "title-text": t.trans("gpt-app-builder.assign-recommendation-strategy") }, on: { cancelOrBackButtonEvent: t.closeDrawer, onCloseEvent: t.closeDrawer, primaryButtonEvent: t.assignStrategy } }, [t.store.assignStrategyDrawerStatus ? e("div", { staticClass: "assign-strategy-drawer-content" }, [e(t.InSelect, { staticClass: "assign-strategy-select", attrs: { id: "assign-strategy-select", "search-status": "", "static-child-position": "bottom right", "button-status": !1, "dynamic-child-position": !1, "label-text": t.trans("ds-steps.recommendation-strategy"), options: t.strategyOptions, "placeholder-text": t.trans("ds-steps.select-strategy"), "skeleton-sizing": { width: 240, height: 42 }, "skeleton-status": t.store.strategiesLoading, value: t.selectValue }, on: { select: t.onSelect } }), t.selectedStrategy ? e("div", { key: String(t.selectedStrategy.strategy_id), staticClass: "assign-strategy-detail" }, [e(t.OrgStrategyDetailModal, { attrs: { show: "", "campaign-details-tab-status": t.campaignTabSupported, "footer-status": !1, strategy: t.selectedStrategy } })], 1) : s._e()], 1) : s._e()]);
-}, o = [], i = /* @__PURE__ */ r(
-  a,
-  n,
-  o,
-  !1,
-  null,
-  "2fb85559"
-);
-const p = i.exports;
-export {
-  p as default
-};

package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue2.js

@@ -1,67 +0,0 @@
-import { defineComponent as v, ref as l, computed as o, watch as _ } from "vue";
-/* empty css                                                                                             */
-import w from "../../../wrappers/WpDrawer.vue.js";
-import { useToaster as D } from "../../../../composables/useToaster.js";
-import { useTranslations as T } from "../../../../composables/useTranslations.js";
-import { ToasterTypeOptions as b } from "../../../../enums/toaster.js";
-import { useRecommendationExtensionStore as h } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
-import { OrgStrategyDetailModal as x } from "../../../../node_modules/@useinsider/design-system-organisms/dist/index.js";
-import { InSelect as B } from "@useinsider/design-system-vue";
-import O from "./StrategyInfoBox.vue.js";
-const $ = /* @__PURE__ */ v({
-  __name: "AssignStrategyDrawer",
-  setup(A) {
-    const c = "/discovery/recommendation-strategies", s = T(), e = h(), { showToaster: g, handleError: u } = D(), r = l(null), a = l(!1), m = l(!1), d = o(() => e.assignStrategyDrawerStatus ? s("email-editor.assign-strategy-description", { url: c }) : "");
-    _(() => e.assignStrategyDrawerStatus, (t) => {
-      if (!t)
-        return;
-      const { strategyId: i } = e.recommendationConfigs;
-      r.value = i || null, m.value = !!window.l10n, e.fetchStrategies().catch((S) => {
-        u(S, s("discovery-strategy.error-description"));
-      });
-    });
-    const p = o(() => e.strategies.map((t) => ({
-      text: t.name,
-      value: t.strategy_id,
-      infoBoxProps: {
-        id: `strategy-info-${t.strategy_id}`,
-        theme: "light",
-        variant: "information",
-        className: "assign-strategy-info-box",
-        slot: O,
-        slotProps: { strategy: t }
-      }
-    }))), y = o(() => [{ value: r.value }]), n = o(() => {
-      const t = e.strategies.find((i) => String(i.strategy_id) === String(r.value ?? ""));
-      return t ? { ...t, fallback_config: null } : null;
-    }), f = o(() => ({
-      primaryButton: {
-        styling: "solid",
-        type: "primary",
-        labelText: s("products.assign-btn"),
-        loadingStatus: a.value,
-        disabledStatus: !n.value
-      },
-      cancelOrBackButton: {
-        styling: "ghost",
-        type: "secondary",
-        labelText: s("products.cancel"),
-        disabledStatus: a.value
-      }
-    }));
-    return { __sfc: !0, RRS_PANEL_PATH: c, trans: s, store: e, showToaster: g, handleError: u, selectedStrategyId: r, isAssigning: a, campaignTabSupported: m, drawerDescription: d, strategyOptions: p, selectValue: y, selectedStrategy: n, footerButtonGroupOptions: f, closeDrawer: () => {
-      e.closeAssignStrategyDrawer();
-    }, assignStrategy: () => {
-      const t = n.value;
-      t && (a.value = !0, e.assignStrategy(t), g({
-        type: b.Success,
-        message: s("email-editor.strategy-assigned-success", { strategyName: t.name })
-      }), e.closeAssignStrategyDrawer(), a.value = !1);
-    }, onSelect: (t) => {
-      r.value = t.value;
-    }, WpDrawer: w, OrgStrategyDetailModal: x, InSelect: B };
-  }
-});
-export {
-  $ as default
-};

package/dist/components/organisms/extensions/recommendation/StrategyInfoBox.vue.js

@@ -1,20 +0,0 @@
-import _ from "./StrategyInfoBox.vue2.js";
-/* empty css                     */
-import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
-  var t = this, s = t._self._c, a = t._self._setupProxy;
-  return s("div", { staticClass: "strategy-info-box" }, [s("div", { staticClass: "strategy-info-box__name" }, [t._v(" " + t._s(t.strategy.name) + " ")]), a.lastUpdated ? s("div", { staticClass: "strategy-info-box__updated" }, [t._v(" " + t._s(a.lastUpdated) + " ")]) : t._e(), s("div", { staticClass: "strategy-info-box__rows" }, t._l(a.rows, function(e) {
-    return s("div", { key: e.label, staticClass: "strategy-info-box__row" }, [s("div", { staticClass: "strategy-info-box__label" }, [t._v(" " + t._s(e.label) + " ")]), s("div", { staticClass: "strategy-info-box__value" }, [t._v(" " + t._s(e.value) + " ")])]);
-  }), 0)]);
-}, i = [], n = /* @__PURE__ */ o(
-  _,
-  r,
-  i,
-  !1,
-  null,
-  "fe4491e6"
-);
-const d = n.exports;
-export {
-  d as default
-};

package/dist/components/organisms/extensions/recommendation/StrategyInfoBox.vue2.js

@@ -1,55 +0,0 @@
-import { defineComponent as v, computed as s } from "vue";
-import { useTranslations as h } from "../../../../composables/useTranslations.js";
-import { formatShortDate as f } from "../../../../utils/dateUtil.js";
-const A = /* @__PURE__ */ v({
-  __name: "StrategyInfoBox",
-  props: {
-    strategy: null
-  },
-  setup(g) {
-    const t = g, r = h(), n = (e) => e == null ? "" : String(e), y = s(() => {
-      const e = n(t.strategy.updated_at || t.strategy.created_at);
-      return e ? r("recommendation-strategy.last-updated-on", { value: f(e) }) : "";
-    }), c = s(() => {
-      const e = n(t.strategy.algorithm) === "MIXED" ? r("discovery-strategy.mixed-algorithm") : r("discovery-strategy.single-algorithm"), a = n(t.strategy.algorithm_used).split(",").map((o) => o.trim()).filter(Boolean).map((o) => r(`recommendation-algorithm-names.${o.replaceAll("_", "-").toLowerCase()}`));
-      return a.length ? `${e} · ${a.join(", ")}` : e;
-    }), u = s(() => [
-      [t.strategy.exclude_view, "discovery-strategy.exclude-recently-view-items"],
-      [t.strategy.exclude_purchase, "discovery-strategy.exclude-recently-purchased-items"],
-      [t.strategy.exclude_cart, "discovery-strategy.exclude-recently-added-cart-items"]
-    ].filter(([a]) => Number(a) === 1).map(([, a]) => r(a)).join(", ")), d = s(() => n(
-      t.strategy.manual_merchandising || t.strategy.manual_merchandising_products
-    ).trim()), i = s(() => {
-      const e = t.strategy.filters;
-      if (!e)
-        return 0;
-      try {
-        const a = typeof e == "string" ? JSON.parse(e) : e;
-        return Array.isArray(a) ? a.reduce((o, m) => o + (Array.isArray(m) ? m.length : 1), 0) : 0;
-      } catch {
-        return 0;
-      }
-    }), l = s(() => r("recommendation-strategy.none")), p = s(() => [
-      {
-        label: r("gpt-app-builder.algorithms-and-method"),
-        value: c.value
-      },
-      {
-        label: r("gpt-app-builder.exclusions"),
-        value: u.value || l.value
-      },
-      {
-        label: r("discovery-strategy.filters"),
-        value: i.value ? String(i.value) : l.value
-      },
-      {
-        label: r("action-builder.manual-merchandising"),
-        value: d.value || l.value
-      }
-    ]);
-    return { __sfc: !0, props: t, trans: r, asText: n, lastUpdated: y, algorithmsAndMethod: c, exclusions: u, manualMerchandising: d, filterCount: i, none: l, rows: p };
-  }
-});
-export {
-  A as default
-};

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

@@ -1,132 +0,0 @@
-var d = Object.defineProperty;
-var l = (n, a, t) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
-var o = (n, a, t) => l(n, typeof a != "symbol" ? a + "" : a, t);
-import { CommonControl as g } from "../../../common-control.js";
-import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
-const h = "recommendation-strategy-control", m = "https://academy.insiderone.com/docs/new-editor-email-recommendation-block";
-class b extends g {
-  constructor() {
-    super(...arguments);
-    o(this, "store", y());
-    o(this, "storeUnsubscription", () => {
-    });
-    o(this, "listeners", []);
-  }
-  getId() {
-    return h;
-  }
-  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"), s = this.api.translate("visit Academy");
-    return `
-            <div class="strategy-control-container">
-                <!-- A section heading, not a field label: the ue-label element renders
-                     the panel's 13px field styling and the design asks for a 16px/600
-                     heading. Kept outside a .container so the editor draws no rule. -->
-                <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}
-                        <!-- cspell:disable-next-line -->
-                        <a href="${m}" target="_blank" rel="noopener noreferrer">${s}</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 accent"
-      }),
-      // Create round-trip ships in a later phase. Disabled, not dimmed:
-      // the design keeps it at full contrast.
-      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;">
-                    <!-- The name band bleeds to the panel edges, so it is a sibling of the
-                         actions row rather than sharing its 16px inset. -->
-                    <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>
-        `;
-  }
-  /**
-   * Change / Remove are icon+text actions in the design, not buttons — and
-   * `ue-button` cannot pair a caption with an arbitrary icon, so these are
-   * plain elements. Click wiring is by id, which works on any element.
-   *
-   * The icon is a CSS mask, not inline SVG: Stripo re-creates the control's
-   * markup through Angular, which rebuilds `<svg>` outside the SVG namespace
-   * (the view-box attribute comes back lowercased) and it never paints.
-   */
-  _strategyAction({ id: t, label: e, modifier: s }) {
-    return `
-            <button
-                id="${t}"
-                type="button"
-                class="strategy-control-action strategy-control-action--${s}">
-                <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.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
-  }
-  _setupButtonListeners() {
-    const t = (e, s) => {
-      const r = this.getContainer().querySelector(e);
-      r && (r.addEventListener("click", s), this.listeners.push({ element: r, handler: s }));
-    };
-    t("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), t("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), t("#guido__btn-remove-strategy", () => this.store.removeStrategy());
-  }
-  /**
-   * Toggles empty vs assigned state from the store's current block config.
-   * Display name comes from the listing; falls back to the raw id while the
-   * listing loads (or when the strategy is no longer listed).
-   */
-  _renderState() {
-    var c;
-    const t = this.getContainer(), e = t.querySelector("[data-strategy-empty-state]"), s = t.querySelector("[data-strategy-assigned-state]"), r = t.querySelector("[data-strategy-name]"), { strategyId: i } = this.store.recommendationConfigs;
-    !e || !s || (e.style.display = i ? "none" : "", s.style.display = i ? "" : "none", r && i && (r.textContent = ((c = this.store.assignedStrategy) == null ? void 0 : c.name) ?? `#${i}`));
-  }
-}
-export {
-  h as STRATEGY_CONTROL_ID,
-  b as StrategyControl
-};