@useinsider/guido 3.6.0-beta.859e737 → 3.6.0-beta.94e390d

package/dist/composables/useStripoEventHandler.js

@@ -1,13 +1,21 @@
-import { useStripoApi as i } from "../services/stripoApi.js";
-import { useEditorStore as u } from "../stores/editor.js";
-import { useOnboardingStore as l } from "../stores/onboarding.js";
-import { useUnsubscribeStore as b } from "../stores/unsubscribe.js";
-const v = () => {
-  const { updateSyncModule: d, getSyncModule: r } = i(), n = u(), s = b(), a = {
+import { useActionsApi as m } from "./useActionsApi.js";
+import { useRecommendationBlockWarning as p } from "../extensions/Blocks/Recommendation/useRecommendationBlockWarning.js";
+import { useStripoApi as b } from "../services/stripoApi.js";
+import { useEditorStore as g } from "../stores/editor.js";
+import { useOnboardingStore as f } from "../stores/onboarding.js";
+import { useUnsubscribeStore as S } from "../stores/unsubscribe.js";
+const k = () => {
+  const { updateSyncModule: d, getSyncModule: r } = b(), { getTemplateData: a } = m(), { warnIfMultipleBlocks: s } = p(), n = g(), c = S(), i = async () => {
+    try {
+      const { html: e } = await a();
+      s(new DOMParser().parseFromString(e, "text/html"));
+    } catch {
+    }
+  }, l = {
     block_dropped: ({ blockName: e }) => {
       if (e === "BLOCK_TEXT") {
-        const o = l(), t = !o.shouldShowOnboarding("textBlockOnboarding"), c = o.isActive("textBlockOnboarding");
-        if (t || c)
+        const o = f(), t = !o.shouldShowOnboarding("textBlockOnboarding"), u = o.isActive("textBlockOnboarding");
+        if (t || u)
           return;
         o.start("textBlockOnboarding");
       }
@@ -16,20 +24,20 @@ const v = () => {
       n.syncModulesEnabled && (console.debug("[module_saved] Saved module data:", e), await d(e));
     },
     module_dropped: async (e) => {
-      if (!n.syncModulesEnabled)
+      if (await i(), !n.syncModulesEnabled)
         return;
       const { moduleId: o } = e, t = await r(o);
-      console.debug("[module_dropped] Sync module data:", t), t.unsubscriptionPreferencePages.length && await s.fetchTemplates();
+      console.debug("[module_dropped] Sync module data:", t), t.unsubscriptionPreferencePages.length && await c.fetchTemplates();
     },
     module_updated: async (e) => {
       n.syncModulesEnabled && (console.debug("[module_updated] Updated module data:", e), await d(e));
     }
   };
   return { handleEvent: async (e, o) => {
-    const t = a[e];
+    const t = l[e];
     console.debug("Stripo Event: ", e, o), t && await t(o);
   } };
 };
 export {
-  v as useStripoEventHandler
+  k as useStripoEventHandler
 };

package/dist/enums/toaster.js

@@ -1,4 +1,4 @@
-var c = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "alert", r))(c || {});
+var c = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "alert", r.Dark = "dark", r))(c || {});
 export {
   c as ToasterTypeOptions
 };

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

@@ -1,17 +1,18 @@
 var k = Object.defineProperty;
-var y = (a, r, t) => r in a ? k(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
-var d = (a, r, t) => y(a, typeof r != "symbol" ? r + "" : r, t);
-import { BlockId as B } from "../../../enums/block.js";
-import { getMigrationBannerHtml as D } from "../../../utils/migrationBannerHtml.js";
-import { Block as R, BlockCompositionType as C, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var B = (a, r, t) => r in a ? k(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
+var d = (a, r, t) => B(a, typeof r != "symbol" ? r + "" : r, t);
+import { BlockId as R } from "../../../enums/block.js";
+import { getMigrationBannerHtml as y } from "../../../utils/migrationBannerHtml.js";
+import { Block as D, BlockCompositionType as C, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { regenerateMobileProductRows as b } from "./controls/main/utils.js";
 import { ensureMobileCssRulesExist as p, setMobileLayoutOptOut as f, hasMobileLayoutOptOut as A } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as c } from "./services/configService.js";
 import { useRecommendationExtensionStore as g } from "./store/recommendation.js";
 import { getDefaultTemplate as E } from "./templates/grid/template.js";
-const _ = B.Recommendation, m = "recommendation-block-v2", u = "recommendation-id";
-let I = !1;
-class q extends R {
+import { useRecommendationBlockWarning as M } from "./useRecommendationBlockWarning.js";
+const I = R.Recommendation, m = "recommendation-block-v2", u = "recommendation-id";
+let _ = !1;
+class H extends D {
   constructor() {
     super();
     /**
@@ -21,7 +22,7 @@ class q extends R {
     d(this, "_pendingBlockId", null);
   }
   getId() {
-    return _;
+    return I;
   }
   getIcon() {
     return "recommendation-icon";
@@ -38,8 +39,8 @@ class q extends R {
     );
   }
   getSettingsPanelTitleHtml() {
-    return D(
-      _,
+    return y(
+      I,
       this.api.translate("Recommendation Block"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
     );
@@ -95,7 +96,7 @@ class q extends R {
         documentModifier: this.api.getDocumentModifier()
       }));
     }
-    s.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
+    s.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
   }
   /**
    * Called when the document changes or template is loaded
@@ -117,7 +118,7 @@ class q extends R {
       }
       this._healLingeringDuplicate(t), c.needsMigration(t) && this._migrateFromLegacy(t);
       try {
-        I || (p(this.api), I = !0);
+        _ || (p(this.api), _ = !0);
         const e = c.getConfig(t), i = this._getBlockElement(t);
         if (i) {
           const n = !e.mobileLayoutEnabled;
@@ -137,6 +138,24 @@ class q extends R {
     const e = this._getRecommendationId(t);
     e && g().removeBlockState(e);
   }
+  /**
+   * Warns (dark advisory toaster) when the design holds more than one live
+   * recommendation block. Triggered from the user-add paths only (fresh drop
+   * and duplicate) — never from document-load/migration, so opening a template
+   * that already has multiple blocks does not fire it.
+   *
+   * Counting lives in `useRecommendationBlockWarning` so the same DOM-based
+   * logic (which ignores the empty shells deletions leave behind, SD-143028)
+   * is shared with the `module_dropped` handler — recommendation blocks can
+   * also arrive inside a saved structure. Wrapped in try/catch because the
+   * document root may be unavailable during initial load.
+   */
+  _warnIfMultipleBlocks() {
+    try {
+      M().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
+    } catch {
+    }
+  }
   /**
    * Generates the next unique recommendation ID by scanning all existing blocks
    * in the document and finding the maximum existing ID + 1.
@@ -209,7 +228,7 @@ class q extends R {
   /** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
   _handleDuplicate(t, e) {
     const i = this._reassignDuplicateId(t, e), n = g();
-    n.cloneBlockState(e, i), n.setCurrentBlock(i);
+    n.cloneBlockState(e, i), n.setCurrentBlock(i), this._warnIfMultipleBlocks();
   }
   /**
    * Core id-reassignment for a duplicated block: rewrites the DOM
@@ -291,6 +310,6 @@ class q extends R {
   }
 }
 export {
-  _ as BLOCK_ID,
-  q as RecommendationBlock
+  I as BLOCK_ID,
+  H as RecommendationBlock
 };

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

@@ -0,0 +1,16 @@
+import { useToaster as r } from "../../../composables/useToaster.js";
+import { useTranslations as s } from "../../../composables/useTranslations.js";
+import { ToasterTypeOptions as n } from "../../../enums/toaster.js";
+import { countLiveRecommendationBlocks as i } from "./utils/recommendationBlockCount.js";
+const a = "newsletter.multiple-reco-blocks-warning", f = () => {
+  const { showToaster: o } = r(), t = s();
+  return { warnIfMultipleBlocks: (e) => {
+    i(e) > 1 && o({
+      type: n.Dark,
+      message: t(a)
+    });
+  } };
+};
+export {
+  f as useRecommendationBlockWarning
+};

package/dist/extensions/Blocks/Recommendation/utils/recommendationBlockCount.js

@@ -0,0 +1,9 @@
+const r = ".recommendation-block-v2", t = ".recommendation-product-row";
+function n(o) {
+  return Array.from(o.querySelectorAll(r)).filter((e) => e.querySelector(t)).length;
+}
+export {
+  r as RECOMMENDATION_BLOCK_SELECTOR,
+  t as RECOMMENDATION_PRODUCT_ROW_SELECTOR,
+  n as countLiveRecommendationBlocks
+};

package/dist/src/enums/toaster.d.ts

@@ -1,5 +1,6 @@
 export declare enum ToasterTypeOptions {
     Success = "success",
     Warning = "warning",
-    Alert = "alert"
+    Alert = "alert",
+    Dark = "dark"
 }

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -55,6 +55,19 @@ export declare class RecommendationBlock extends Block {
      * @param node - The block node being deleted
      */
     onDelete(node: ImmutableHtmlNode): void;
+    /**
+     * Warns (dark advisory toaster) when the design holds more than one live
+     * recommendation block. Triggered from the user-add paths only (fresh drop
+     * and duplicate) — never from document-load/migration, so opening a template
+     * that already has multiple blocks does not fire it.
+     *
+     * Counting lives in `useRecommendationBlockWarning` so the same DOM-based
+     * logic (which ignores the empty shells deletions leave behind, SD-143028)
+     * is shared with the `module_dropped` handler — recommendation blocks can
+     * also arrive inside a saved structure. Wrapped in try/catch because the
+     * document root may be unavailable during initial load.
+     */
+    private _warnIfMultipleBlocks;
     /**
      * Generates the next unique recommendation ID by scanning all existing blocks
      * in the document and finding the maximum existing ID + 1.

package/dist/src/extensions/Blocks/Recommendation/useRecommendationBlockWarning.d.ts

@@ -0,0 +1,11 @@
+import type { QueryableRoot } from './utils/recommendationBlockCount';
+/**
+ * Advisory shown when a design ends up with more than one recommendation block,
+ * since multiple blocks can slow campaign delivery. Shared by the block
+ * lifecycle (direct drop / duplicate, counting the editor's document root) and
+ * the `module_dropped` event (counting a parsed `getTemplateData()` document, so
+ * recommendation blocks that arrive inside a saved structure are also covered).
+ */
+export declare const useRecommendationBlockWarning: () => {
+    warnIfMultipleBlocks: (root: QueryableRoot) => void;
+};

package/dist/src/extensions/Blocks/Recommendation/utils/recommendationBlockCount.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Counts *live* recommendation blocks in a document.
+ *
+ * Deleting a recommendation block strips its inner content but leaves an empty
+ * `.recommendation-block-v2` container shell behind — present in every document
+ * representation the editor exposes (`getDocumentRoot`, `getDocumentRootHtmlNode`
+ * and even `getTemplateData`). A raw class count therefore over-reports after a
+ * delete→add cycle (SD-143028). The product row (`.recommendation-product-row`)
+ * is present on every live block from drop time (the default template ships
+ * product rows, both grid and list layouts) and is removed from a deleted
+ * block's leftover shell, so filtering by it cleanly separates live blocks from
+ * ghosts without reading any store.
+ */
+export declare const RECOMMENDATION_BLOCK_SELECTOR = ".recommendation-block-v2";
+export declare const RECOMMENDATION_PRODUCT_ROW_SELECTOR = ".recommendation-product-row";
+interface QueryableNode {
+    querySelector(selector: string): unknown;
+}
+export interface QueryableRoot {
+    querySelectorAll(selector: string): Iterable<QueryableNode>;
+}
+/**
+ * Counts the live recommendation blocks reachable from `root`. Works on the
+ * editor's `ImmutableHtmlNode` document root (drop / duplicate paths) and on a
+ * DOM `Document` parsed from `getTemplateData()` HTML (saved-module drop path).
+ */
+export declare function countLiveRecommendationBlocks(root: QueryableRoot): number;
+export {};

package/dist/src/extensions/Blocks/Recommendation/utils/recommendationBlockCount.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/templatePreparation.d.ts

@@ -1,20 +1,4 @@
 import type { SavedTemplateDetails } from '@@/Types/stripo';
-/**
- * Collects every unsubscribe page id referenced by the unsubscribe blocks
- * present in the email HTML, deduped.
- *
- * The email's unsubscribe link is variation-scoped on the backend, which
- * resolves the page to render from the page ids the FE persists for that
- * variation. Those ids must reflect the blocks actually in the email — not a
- * UI-only selection store — otherwise a block that entered the editor by any
- * path other than the page-selection UI (e.g. a dropped saved module) sends an
- * empty association and the backend falls back to the default page.
- *
- * Read from raw editor HTML: the `data-unsubscribe-page-list` attribute lives
- * on the block node there (the save-time sync-module extractor relies on the
- * same source), so it is reliably present regardless of how the block was added.
- */
-export declare function getHtmlReferencedUnsubscribePages(html: string): number[];
 export declare const useTemplatePreparation: () => {
     prepareTemplateDetails: () => Promise<Omit<SavedTemplateDetails, "metadata">>;
 };

package/dist/utils/templatePreparation.js

@@ -1,58 +1,58 @@
-import { useActionsApi as T } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as D } from "../composables/useHtmlCompiler.js";
-import { DEFAULT_CURRENCY as l, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { useActionsApi as C } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as T } from "../composables/useHtmlCompiler.js";
+import { DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as s } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
 import { useRecommendationExtensionStore as b } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { DATA_ATTRIBUTES as h } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
-import { parsePageList as P } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
-import { useDynamicContentStore as w } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as E } from "../stores/unsubscribe.js";
-function U(c) {
-  const n = new DOMParser().parseFromString(c, "text/html").querySelectorAll(`[${h.PAGE_LIST}]`), t = [];
-  return n.forEach((s) => {
-    const r = s.getAttribute(h.PAGE_LIST);
-    r && t.push(...P(r));
-  }), [...new Set(t)];
+import { DATA_ATTRIBUTES as S } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { parsePageList as D } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useDynamicContentStore as P } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as w } from "../stores/unsubscribe.js";
+function E(i, o) {
+  const t = new DOMParser().parseFromString(i, "text/html").querySelectorAll(`[${S.PAGE_LIST}]`), c = [];
+  return t.forEach((r) => {
+    const a = r.getAttribute(S.PAGE_LIST);
+    a && c.push(...D(a));
+  }), o.filter((r) => c.includes(r));
 }
-async function F(c) {
-  const i = new DOMParser().parseFromString(c, "text/html").querySelectorAll(".recommendation-block-v2");
-  if (i.length === 0)
+async function U(i) {
+  const m = new DOMParser().parseFromString(i, "text/html").querySelectorAll(".recommendation-block-v2");
+  if (m.length === 0)
     return;
-  const n = b();
-  i.forEach((t) => {
-    var p, g, f, o, y;
-    const s = t.getAttribute("recommendation-id"), r = s ? Number(s) : NaN;
+  const l = b();
+  m.forEach((t) => {
+    var g, f, u, n, y;
+    const c = t.getAttribute("recommendation-id"), r = c ? Number(c) : NaN;
     if (!Number.isFinite(r))
       return;
-    const d = t.getAttribute("esd-ext-config");
-    if (!d)
+    const a = t.getAttribute("esd-ext-config");
+    if (!a)
       return;
     let e;
     try {
-      e = JSON.parse(d);
+      e = JSON.parse(a);
     } catch {
       return;
     }
     if (!e || typeof e != "object" || Array.isArray(e))
       return;
-    const m = {
-      strategy: e.strategy ?? a.strategy,
-      language: e.language ?? a.language,
-      size: e.size ?? a.size,
+    const p = {
+      strategy: 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,
-      currencyCode: ((p = e.currency) == null ? void 0 : p.code) ?? l.code,
-      currencyAlignment: ((g = e.currency) == null ? void 0 : g.alignment) ?? l.alignment,
-      currencyDecimalCount: ((f = e.currency) == null ? void 0 : f.decimalCount) ?? l.decimalCount,
-      currencyDecimalSeparator: ((o = e.currency) == null ? void 0 : o.decimalSeparator) ?? l.decimalSeparator,
-      currencyThousandSeparator: ((y = e.currency) == null ? void 0 : y.thousandSeparator) ?? l.thousandSeparator
+      productIds: e.productIds ?? [...s.productIds],
+      filters: e.filters ?? [...s.filters],
+      shuffleProducts: e.shuffleProducts ?? s.shuffleProducts,
+      currencyCode: ((g = e.currency) == null ? void 0 : g.code) ?? d.code,
+      currencyAlignment: ((f = e.currency) == null ? void 0 : f.alignment) ?? d.alignment,
+      currencyDecimalCount: ((u = e.currency) == null ? void 0 : u.decimalCount) ?? d.decimalCount,
+      currencyDecimalSeparator: ((n = e.currency) == null ? void 0 : n.decimalSeparator) ?? d.decimalSeparator,
+      currencyThousandSeparator: ((y = e.currency) == null ? void 0 : y.thousandSeparator) ?? d.thousandSeparator
     };
-    n.seedBlockUrlConfig(r, m);
+    l.seedBlockUrlConfig(r, p);
   });
   try {
-    await n.fetchRecommendationCreateData();
+    await l.fetchRecommendationCreateData();
   } catch (t) {
     console.warn(
       "Recommendation reference data pre-load failed; validator will skip the availability check.",
@@ -60,43 +60,42 @@ async function F(c) {
     );
   }
 }
-const k = () => {
-  const c = w(), u = E(), { getCompiledEmail: i, getTemplateData: n } = T(), { compileHtml: t } = D();
+const _ = () => {
+  const i = P(), o = w(), { getCompiledEmail: m, getTemplateData: l } = C(), { compileHtml: t } = T();
   return {
     prepareTemplateDetails: async () => {
-      const { html: r, ampHtml: d = "", ampErrors: e = [] } = await i({
+      const { html: r, ampHtml: a = "", ampErrors: e = [] } = await m({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: m, css: p, syncModulesIds: g = [] } = await n();
-      u.selectedUnsubscribePages.length && await u.fetchTemplates(), await F(m);
-      const { compiledHtml: f, stats: o, appliedRules: y } = t(r), A = c.getSelectedDynamicContentList, C = b(), S = U(m);
+      }), { html: p, css: g, syncModulesIds: f = [] } = await l();
+      o.selectedUnsubscribePages.length && await o.fetchTemplates(), await U(p);
+      const { compiledHtml: u, stats: n, appliedRules: y } = t(r), h = i.getSelectedDynamicContentList, A = b();
       return console.debug("HTML Compilation Stats:", {
-        originalSize: o.originalSize,
-        compiledSize: o.compiledSize,
-        reduction: `${o.reductionPercentage.toFixed(2)}%`,
+        originalSize: n.originalSize,
+        compiledSize: n.compiledSize,
+        reduction: `${n.reductionPercentage.toFixed(2)}%`,
         appliedRules: y,
-        executionTime: `${o.executionTime.toFixed(2)}ms`
+        executionTime: `${n.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: A,
-        compiledHtml: f,
-        rawHtml: m,
-        css: p,
-        ampHtml: d,
+        dynamicContentList: h,
+        compiledHtml: u,
+        rawHtml: p,
+        css: g,
+        ampHtml: a,
         ampErrors: e,
-        modules: g.map(Number),
+        modules: f.map(Number),
         recommendation: {
-          campaignUrls: C.recommendationCampaignUrls,
+          campaignUrls: A.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
-          status: S.length > 0,
-          config: S
+          status: o.unsubscribePagesStatus,
+          config: E(u, o.selectedUnsubscribePages)
         }
       };
     }
   };
 };
 export {
-  U as getHtmlReferencedUnsubscribePages,
-  k as useTemplatePreparation
+  _ as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.6.0-beta.859e737",
+  "version": "3.6.0-beta.94e390d",
   "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",