@useinsider/guido 3.21.0-beta.6fc739e → 3.21.0-beta.7e166b5

package/dist/composables/useSave.js

@@ -1,85 +1,84 @@
-import { useActionsApi as q } from "./useActionsApi.js";
-import { useConfig as O } from "./useConfig.js";
-import { useEditorLock as D } from "./useEditorLock.js";
-import { useSaveStart as F, useSaveComplete as j } from "./useGuidoActions.js";
-import { useSaveValidation as z } from "./useSaveValidation.js";
-import { useSaveValidationRollout as G } from "./useSaveValidationRollout.js";
-import { useSyncModuleExtractor as I } from "./useSyncModuleExtractor.js";
-import { ToasterTypeOptions as J } from "../enums/toaster.js";
-import { useStripoApi as K } from "../services/stripoApi.js";
-import { useConfigStore as N } from "../stores/config.js";
-import { useDynamicContentStore as Q } from "../stores/dynamic-content.js";
-import { useSaveValidationStore as X } from "../stores/save-validation.js";
-import { useTemplatePreparation as Y, getHtmlReferencedUnsubscribePages as Z } from "../utils/templatePreparation.js";
-import { useAllowlist as _ } from "./useAllowlist.js";
-import { useHtmlValidator as $ } from "./useHtmlValidator.js";
-import { useToaster as tt } from "./useToaster.js";
-import { useCouponBlockValidator as et } from "./validators/useCouponBlockValidator.js";
-import { useHtmlDocumentCountValidator as ot } from "./validators/useHtmlDocumentCountValidator.js";
-import { useLiquidValidator as it } from "./validators/useLiquidValidator.js";
-import { useSyncModuleBlockValidator as rt } from "./validators/useSyncModuleBlockValidator.js";
+import { useActionsApi as R } from "./useActionsApi.js";
+import { useConfig as q } from "./useConfig.js";
+import { useEditorLock as O } from "./useEditorLock.js";
+import { useSaveStart as D, useSaveComplete as F } from "./useGuidoActions.js";
+import { useSaveValidation as j } from "./useSaveValidation.js";
+import { useSaveValidationRollout as z } from "./useSaveValidationRollout.js";
+import { useSyncModuleExtractor as G } from "./useSyncModuleExtractor.js";
+import { ToasterTypeOptions as I } from "../enums/toaster.js";
+import { useStripoApi as J } from "../services/stripoApi.js";
+import { useConfigStore as K } from "../stores/config.js";
+import { useDynamicContentStore as N } from "../stores/dynamic-content.js";
+import { useSaveValidationStore as Q } from "../stores/save-validation.js";
+import { useTemplatePreparation as X, getHtmlReferencedUnsubscribePages as Y } from "../utils/templatePreparation.js";
+import { useAllowlist as Z } from "./useAllowlist.js";
+import { useHtmlValidator as _ } from "./useHtmlValidator.js";
+import { useToaster as $ } from "./useToaster.js";
+import { useCouponBlockValidator as tt } from "./validators/useCouponBlockValidator.js";
+import { useLiquidValidator as et } from "./validators/useLiquidValidator.js";
+import { useSyncModuleBlockValidator as ot } from "./validators/useSyncModuleBlockValidator.js";
 import { useUnsubscribeBlockValidator as st } from "./validators/useUnsubscribeBlockValidator.js";
-const Pt = () => {
-  const a = F(), p = j(), { validateHtml: S } = $(), { validateLiquidSyntax: w } = it(), { validateCouponBlockTags: y } = et(), { validateUnsubscribeBlockUniqueness: H, validateUnsubscribeBlockHasTemplate: E } = st(), { validateSyncModuleBlocks: n } = rt(), { validateSingleHtmlDocument: l } = ot(), { callbacks: s, isFeatureEnabled: d } = O(), { extractSyncModuleData: b } = I(), { setSyncModuleUnsubscriptionPages: g } = K(), { editorSave: V, getTemplateData: x } = q(), { showToaster: C } = tt(), { getBlockedDomains: k, resolveToast: B } = _(), { prepareTemplateDetails: f } = Y(), { collectSaveValidationErrors: h } = z(), { isEnabled: T } = G(), P = X(), L = Q(), v = N(), { runExclusive: c } = D(), u = async (t, e, o) => {
+const Bt = () => {
+  const a = D(), p = F(), { validateHtml: v } = _(), { validateLiquidSyntax: S } = et(), { validateCouponBlockTags: y } = tt(), { validateUnsubscribeBlockUniqueness: w, validateUnsubscribeBlockHasTemplate: E } = st(), { validateSyncModuleBlocks: n } = ot(), { callbacks: r, isFeatureEnabled: d } = q(), { extractSyncModuleData: b } = G(), { setSyncModuleUnsubscriptionPages: g } = J(), { editorSave: H, getTemplateData: V } = R(), { showToaster: x } = $(), { getBlockedDomains: k, resolveToast: C } = Z(), { prepareTemplateDetails: m } = X(), { collectSaveValidationErrors: B } = j(), { isEnabled: h } = z(), T = Q(), P = N(), f = K(), { runExclusive: l } = O(), c = async (t, e, o) => {
     if (!d("allowlistEnabled"))
       return !1;
-    const r = await k(t, e);
-    if (!r.length)
+    const i = await k(t, e);
+    if (!i.length)
       return !1;
     if (!o) {
-      const i = await B(r);
-      i != null && i.message && C({
-        type: J.Warning,
-        message: i.message,
-        actionButton: i.actionButton
+      const s = await C(i);
+      s != null && s.message && x({
+        type: I.Warning,
+        message: s.message,
+        actionButton: s.actionButton
       });
     }
     return !0;
-  }, U = async (t) => !y(t.compiledHtml) || !H(t.compiledHtml) || !E(t.compiledHtml) ? !1 : d("liquidSyntax") ? w(t.compiledHtml) : S(t.compiledHtml, t.dynamicContentList, !0), m = async (t, e) => {
-    if (!await V())
+  }, L = async (t) => !y(t.compiledHtml) || !w(t.compiledHtml) || !E(t.compiledHtml) ? !1 : d("liquidSyntax") ? S(t.compiledHtml) : v(t.compiledHtml, t.dynamicContentList, !0), u = async (t, e) => {
+    if (!await H())
       return;
-    const { unsubscribePayload: r, stripoModules: i } = b(t.rawHtml);
-    if (await g(r), t.modules = i, !e.suppress) {
-      const R = e.blankCompiled ? { compiledHtml: "", ampHtml: "" } : {};
-      p({ ...t, ...R, silent: e.silent });
+    const { unsubscribePayload: i, stripoModules: s } = b(t.rawHtml);
+    if (await g(i), t.modules = s, !e.suppress) {
+      const W = e.blankCompiled ? { compiledHtml: "", ampHtml: "" } : {};
+      p({ ...t, ...W, silent: e.silent });
     }
     return t;
-  }, A = async (t, e) => {
-    var r;
+  }, U = async (t, e) => {
+    var i;
     a();
-    const o = await f();
-    if (l(o.rawHtml, e) && n(o.rawHtml, e)) {
-      if (T.value && !e) {
-        const i = await h(
+    const o = await m();
+    if (n(o.rawHtml, e)) {
+      if (h.value && !e) {
+        const s = await B(
           o.compiledHtml,
           o.dynamicContentList
         );
-        if (i.length) {
-          P.open(i, "save");
+        if (s.length) {
+          T.open(s, "save");
           return;
         }
-      } else if (!await U(o))
+      } else if (!await L(o))
         return;
-      if (!((r = s.value) != null && r.externalValidation && !await s.value.externalValidation(o)) && !await u(o.compiledHtml, o.css, e))
-        return m(o, { silent: e, suppress: t });
+      if (!((i = r.value) != null && i.externalValidation && !await r.value.externalValidation(o)) && !await c(o.compiledHtml, o.css, e))
+        return u(o, { silent: e, suppress: t });
     }
-  }, M = async () => {
+  }, A = async () => {
     var e;
-    if (!v.allowSaveWithErrors)
+    if (!f.allowSaveWithErrors)
       return;
     a();
-    const t = await f();
-    if (l(t.rawHtml, !1) && n(t.rawHtml, !1) && !((e = s.value) != null && e.externalValidation && !await s.value.externalValidation(t)) && !await u(t.compiledHtml, t.css, !1))
-      return m(t, { silent: !1, blankCompiled: !0 });
-  }, W = async () => {
-    if (!v.allowSaveWithErrors)
+    const t = await m();
+    if (n(t.rawHtml, !1) && !((e = r.value) != null && e.externalValidation && !await r.value.externalValidation(t)) && !await c(t.compiledHtml, t.css, !1))
+      return u(t, { silent: !1, blankCompiled: !0 });
+  }, M = async () => {
+    if (!f.allowSaveWithErrors)
       return;
     a();
-    const { html: t, css: e } = await x();
-    if (!l(t, !0) || !n(t, !0) || await u(t, e, !0))
+    const { html: t, css: e } = await V();
+    if (!n(t, !0) || await c(t, e, !0))
       return;
-    const o = Z(t), r = {
-      dynamicContentList: L.getSelectedDynamicContentList,
+    const o = Y(t), i = {
+      dynamicContentList: P.getSelectedDynamicContentList,
       compiledHtml: "",
       rawHtml: t,
       css: e,
@@ -93,12 +92,12 @@ const Pt = () => {
         config: o
       }
     };
-    return m(r, { silent: !0 });
+    return u(i, { silent: !0 });
   };
-  return { save: (t = !1, e = !1) => c(
-    () => A(t, e)
-  ), saveWithErrors: () => c(M), saveRawOnly: () => c(W) };
+  return { save: (t = !1, e = !1) => l(
+    () => U(t, e)
+  ), saveWithErrors: () => l(A), saveRawOnly: () => l(M) };
 };
 export {
-  Pt as useSave
+  Bt as useSave
 };

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

@@ -1,43 +1,46 @@
-var B = Object.defineProperty;
-var b = (a, l, t) => l in a ? B(a, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[l] = t;
-var d = (a, l, t) => b(a, typeof l != "symbol" ? l + "" : l, t);
-import { useConfig as g } from "../../../composables/useConfig.js";
-import { BlockId as C } from "../../../enums/block.js";
-import { getMigrationBannerHtml as A } from "../../../utils/migrationBannerHtml.js";
-import { Block as E, BlockCompositionType as S, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as w } from "./constants/defaultConfig.js";
-import { RECOMMENDATION_ID_ATTR as m } from "./constants/selectors.js";
+var A = Object.defineProperty;
+var b = (c, l, e) => l in c ? A(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e;
+var m = (c, l, e) => b(c, typeof l != "symbol" ? l + "" : l, e);
+import { useConfig as d } from "../../../composables/useConfig.js";
+import { BlockId as E } from "../../../enums/block.js";
+import { getMigrationBannerHtml as C } from "../../../utils/migrationBannerHtml.js";
+import { Block as S, BlockCompositionType as N, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as v, PRE_RRS_CONFIG_VERSION as w } from "./constants/defaultConfig.js";
+import { RECOMMENDATION_ID_ATTR as h } from "./constants/selectors.js";
 import { regenerateMobileProductRows as M } from "./controls/main/utils.js";
 import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as O } from "./controls/mobileLayout/cssRules.js";
-import { RecommendationConfigService as s } from "./services/configService.js";
-import { useRecommendationExtensionStore as h } from "./store/recommendation.js";
-import { getDefaultTemplate as x } from "./templates/grid/template.js";
-import { useRecommendationBlockWarning as T } from "./useRecommendationBlockWarning.js";
-import { registerNodeConfigWriter as H } from "./utils/nodeConfigWriter.js";
-import { refreshDuplicatedStrategyBlocks as $ } from "./utils/strategyCommit.js";
-const k = C.Recommendation, u = "recommendation-block-v2", D = "hide-price";
-let y = !1;
-class Y extends E {
+import { RecommendationConfigService as o } from "./services/configService.js";
+import { useRecommendationExtensionStore as f } from "./store/recommendation.js";
+import { getDefaultTemplate as T } from "./templates/grid/template.js";
+import { useRecommendationBlockWarning as x } from "./useRecommendationBlockWarning.js";
+import { registerNodeConfigWriter as k } from "./utils/nodeConfigWriter.js";
+import { refreshArrivedStrategyBlocks as $, refreshDuplicatedStrategyBlocks as H } from "./utils/strategyCommit.js";
+const y = E.Recommendation, u = "recommendation-block-v2", B = "hide-price";
+let D = !1;
+class Z extends S {
   constructor() {
     super();
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
      * This avoids generating a new (different) ID in onCreated().
      */
-    d(this, "_pendingBlockId", null);
+    m(this, "_pendingBlockId", null);
     /** Ids already reset under their new name, so the deferred pass skips their stale snapshot. */
-    d(this, "_resetSourceIds", /* @__PURE__ */ new Set());
+    m(this, "_resetSourceIds", /* @__PURE__ */ new Set());
     /** Ids handed to duplicates the document root does not show yet: a copied module renames all its blocks at once. */
-    d(this, "_unsettledDuplicateIds", /* @__PURE__ */ new Set());
+    m(this, "_unsettledDuplicateIds", /* @__PURE__ */ new Set());
+    m(this, "_arrivedNodes", []);
+    /** Ids whose arrival or duplicate refresh is in flight, so a second refresh of the same block does not race it. */
+    m(this, "_refreshingIds", /* @__PURE__ */ new Set());
   }
   getId() {
-    return k;
+    return y;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return S.CONTAINER;
+    return N.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -48,8 +51,8 @@ class Y extends E {
     );
   }
   getSettingsPanelTitleHtml() {
-    return A(
-      k,
+    return C(
+      y,
       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.")
     );
@@ -71,8 +74,8 @@ class Y extends E {
    * attribute and overwrites dynamically added classes via setAttribute.
    */
   getTemplate() {
-    const t = this._generateNextId();
-    return this._pendingBlockId = t, x(t);
+    const e = this._generateNextId();
+    return this._pendingBlockId = e, T(e);
   }
   /**
    * Called when a new block is dropped into the template
@@ -81,42 +84,58 @@ class Y extends E {
    * and assigns the recommendation-id attribute + initializes configuration.
    * @param node - The newly created block node
    */
-  onCreated(t) {
-    const e = this._getRecommendationId(t);
-    if (e !== null && e > 0) {
-      if (this._detectDuplicate(e)) {
-        this._handleDuplicate(t, e), this._scheduleArrivalReset(t);
+  onCreated(e) {
+    const t = this._getRecommendationId(e);
+    if (t !== null && t > 0) {
+      if (this._detectDuplicate(t)) {
+        this._handleDuplicate(e, t), this._scheduleArrivalReset(e);
         return;
       }
-      this._pendingBlockId === null && setTimeout(() => {
-        this._getBlockElement(t) && this._detectDuplicate(e) && this._handleDuplicate(t, e);
-      }, 0), this._scheduleArrivalReset(t);
+      const g = this._pendingBlockId === null;
+      setTimeout(() => {
+        if (this._getBlockElement(e)) {
+          if (g && this._detectDuplicate(t)) {
+            this._handleDuplicate(e, t);
+            return;
+          }
+          this._queueArrivalRefresh(e);
+        }
+      }, 0), this._scheduleArrivalReset(e);
       return;
     }
     const i = this._pendingBlockId ?? this._generateNextId();
-    this._pendingBlockId = null, this._assignRecommendationId(t, i);
-    const n = g().isFeatureEnabled("reusableRecommendationStrategy"), o = n && !s.hasConfig(t), { config: r, wasFreshDrop: c } = s.initializeConfig(
+    this._pendingBlockId = null, this._assignRecommendationId(e, i);
+    const r = d().isFeatureEnabled("reusableRecommendationStrategy"), s = r && !o.hasConfig(e), { config: n, wasFreshDrop: a } = o.initializeConfig(
       this.api,
-      t,
+      e,
       {
         recommendationId: i,
-        configVersion: n ? N : w,
-        ...o ? { partnerName: g().partnerName.value } : {},
+        configVersion: r ? v : w,
+        ...s ? { partnerName: d().partnerName.value } : {},
         // An RRS block picks a strategy, not an algorithm, and its algorithm control is
         // hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
         // at save for a block the user never configured.
-        ...o ? { strategy: "" } : {}
+        ...s ? { strategy: "" } : {}
       }
-    ), f = h();
-    if (f.setCurrentBlock(i), this._stampHidePrice(t, r.priceHideIfSameAsDiscounted), c) {
+    ), _ = f();
+    if (_.setCurrentBlock(i), this._stampHidePrice(e, n.priceHideIfSameAsDiscounted), a) {
       I(this.api);
-      const _ = this._getBlockElement(t);
-      _ && (R(this.api, _, !0), M({
-        currentNode: t,
+      const g = this._getBlockElement(e);
+      g && (R(this.api, g, !0), M({
+        currentNode: e,
         documentModifier: this.api.getDocumentModifier()
       }));
     }
-    f.patchCurrentBlockConfig({ language: r.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
+    _.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
+  }
+  /** Refreshes every block of an opened template: Stripo restores a stored document without `onCreated`. */
+  onDocumentInit() {
+    try {
+      const e = this.api.getDocumentRoot();
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${u}`).forEach((t) => this._queueArrivalRefresh(t));
+    } catch (e) {
+      console.error("[recommendation] refreshing an opened strategy failed", e);
+    }
   }
   /**
    * Called when the document changes or template is loaded
@@ -125,24 +144,24 @@ class Y extends E {
    * and assigns recommendation-id to legacy blocks that lack one.
    * @param node - The block node that may need migration
    */
-  onDocumentChanged(t) {
-    if (!(!t || !("getNodeConfig" in t))) {
-      if (!this._getRecommendationId(t)) {
-        const e = this._generateNextId();
-        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+  onDocumentChanged(e) {
+    if (!(!e || !("getNodeConfig" in e))) {
+      if (!this._getRecommendationId(e)) {
+        const t = this._generateNextId();
+        this._assignRecommendationId(e, t), o.hasConfig(e) && o.updateConfig(
           this.api,
-          t,
-          { recommendationId: e },
+          e,
+          { recommendationId: t },
           "Assign recommendation ID to legacy block"
         );
       }
-      this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t);
+      this._healLingeringDuplicate(e), o.needsMigration(e) && this._migrateFromLegacy(e), this._healHidePriceAttr(e);
       try {
-        y || (I(this.api), y = !0);
-        const e = s.getConfig(t), i = this._getBlockElement(t);
+        D || (I(this.api), D = !0);
+        const t = o.getConfig(e), i = this._getBlockElement(e);
         if (i) {
-          const n = !e.mobileLayoutEnabled;
-          O(i) !== n && R(this.api, i, n);
+          const r = !t.mobileLayoutEnabled;
+          O(i) !== r && R(this.api, i, r);
         }
       } catch {
       }
@@ -154,9 +173,9 @@ class Y extends E {
    * Cleans up the per-block state from the Pinia store.
    * @param node - The block node being deleted
    */
-  onDelete(t) {
-    const e = this._getRecommendationId(t);
-    e && h().removeBlockState(e);
+  onDelete(e) {
+    const t = this._getRecommendationId(e);
+    t && f().removeBlockState(t);
   }
   /**
    * Warns (dark advisory toaster) when the design holds more than one live
@@ -172,7 +191,7 @@ class Y extends E {
    */
   _warnIfMultipleBlocks() {
     try {
-      T().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
+      x().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
     } catch {
     }
   }
@@ -181,21 +200,21 @@ class Y extends E {
    * in the document and finding the maximum existing ID + 1.
    */
   _generateNextId() {
-    let t = 0;
-    const e = /* @__PURE__ */ new Set();
+    let e = 0;
+    const t = /* @__PURE__ */ new Set();
     try {
       const i = this.api.getDocumentRoot();
-      i && "querySelectorAll" in i && i.querySelectorAll(`.${u}`).forEach((o) => {
-        if ("getAttribute" in o) {
-          const r = o.getAttribute(m), c = r ? parseInt(r) : 0;
-          e.add(c), c > t && (t = c);
+      i && "querySelectorAll" in i && i.querySelectorAll(`.${u}`).forEach((s) => {
+        if ("getAttribute" in s) {
+          const n = s.getAttribute(h), a = n ? parseInt(n) : 0;
+          t.add(a), a > e && (e = a);
         }
       });
     } catch {
     }
     return this._unsettledDuplicateIds.forEach((i) => {
-      e.has(i) && this._unsettledDuplicateIds.delete(i);
-    }), Math.max(t, ...this._unsettledDuplicateIds) + 1;
+      t.has(i) && this._unsettledDuplicateIds.delete(i);
+    }), Math.max(e, ...this._unsettledDuplicateIds) + 1;
   }
   /**
    * Drops the "already fetched" claims of a block that arrived holding a baked id
@@ -204,12 +223,34 @@ class Y extends E {
    * Deferred a tick: the collision handlers rename a sibling first, and either sibling can be
    * the renamed one depending on where the module was dropped (SD-149916).
    */
-  _scheduleArrivalReset(t) {
-    g().isFeatureEnabled("reusableRecommendationStrategy") && setTimeout(() => {
-      const e = this._getRecommendationId(t);
-      e !== null && e > 0 && !this._resetSourceIds.delete(e) && h().resetArrivedBlock(e);
+  _scheduleArrivalReset(e) {
+    d().isFeatureEnabled("reusableRecommendationStrategy") && setTimeout(() => {
+      const t = this._getRecommendationId(e);
+      t !== null && t > 0 && !this._resetSourceIds.delete(t) && f().resetArrivedBlock(t);
     }, 0);
   }
+  /**
+   * Re-reads the strategy of a block that arrived with saved cards, without waiting for a click.
+   * Blocks of one opened template or dropped module arrive in one tick and refresh together.
+   */
+  _queueArrivalRefresh(e) {
+    d().isFeatureEnabled("reusableRecommendationStrategy") && (this._arrivedNodes.push(e) > 1 || setTimeout(() => {
+      const t = this._arrivedNodes;
+      this._arrivedNodes = [];
+      try {
+        this._refreshArrivedBlocks(t);
+      } catch (i) {
+        console.error("[recommendation] refreshing an arrived strategy failed", i);
+      }
+    }, 0));
+  }
+  _refreshArrivedBlocks(e) {
+    const t = e.flatMap((i) => {
+      const r = this._getRecommendationId(i), s = this._getBlockElement(i);
+      return !r || !s || this._refreshingIds.has(r) ? [] : (this._refreshingIds.add(r), [{ id: r, config: o.getConfig(s) }]);
+    });
+    t.length && (k(this.api), $(t).catch((i) => console.error("[recommendation] refreshing an arrived strategy failed", i)).finally(() => t.forEach(({ id: i }) => this._refreshingIds.delete(i))));
+  }
   /**
    * Heals a duplicate that slipped past the create-time `_detectDuplicate`
    * scan (or that was persisted by an older template before SD-142352).
@@ -222,49 +263,54 @@ class Y extends E {
    * yanking the user's current selection mid-edit when the heal fires from
    * `onDocumentChanged`.
    */
-  _healLingeringDuplicate(t) {
-    const e = this._getRecommendationId(t);
-    if (!(e === null || e <= 0))
+  _healLingeringDuplicate(e) {
+    const t = this._getRecommendationId(e);
+    if (!(t === null || t <= 0))
       try {
         const i = this.api.getDocumentRoot();
         if (!i || !("querySelectorAll" in i))
           return;
-        const n = i.querySelectorAll(
-          `.${u}[${m}="${e}"]`
+        const r = i.querySelectorAll(
+          `.${u}[${h}="${t}"]`
         );
-        if (n.length <= 1)
+        if (r.length <= 1)
           return;
-        const o = this._getBlockElement(t);
-        if (!o)
+        const s = this._getBlockElement(e);
+        if (!s)
           return;
-        let r = -1;
-        for (let c = 0; c < n.length; c++)
-          if (n[c] === o) {
-            r = c;
+        let n = -1;
+        for (let a = 0; a < r.length; a++)
+          if (r[a] === s) {
+            n = a;
             break;
           }
-        if (r <= 0)
+        if (n <= 0)
           return;
-        this._reassignDuplicateId(t, e);
+        this._reassignDuplicateId(e, t);
       } catch {
       }
   }
   /** True when another block already holds the same id — Stripo's duplication signal. */
-  _detectDuplicate(t) {
+  _detectDuplicate(e) {
     try {
-      const e = this.api.getDocumentRoot();
-      if (e && "querySelectorAll" in e)
-        return e.querySelectorAll(
-          `.${u}[${m}="${t}"]`
+      const t = this.api.getDocumentRoot();
+      if (t && "querySelectorAll" in t)
+        return t.querySelectorAll(
+          `.${u}[${h}="${e}"]`
         ).length > 1;
     } catch {
     }
     return !1;
   }
   /** 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 = h();
-    n.cloneBlockState(e, i), n.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy") && (this._resetSourceIds.add(e), H(this.api), $(e, i, s.getConfig(t)).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o))), this._warnIfMultipleBlocks();
+  _handleDuplicate(e, t) {
+    const i = this._reassignDuplicateId(e, t), r = f();
+    if (r.cloneBlockState(t, i), r.setCurrentBlock(i), d().isFeatureEnabled("reusableRecommendationStrategy")) {
+      this._resetSourceIds.add(t), k(this.api);
+      const s = [t, i].filter((n) => !this._refreshingIds.has(n));
+      s.forEach((n) => this._refreshingIds.add(n)), H(t, i, o.getConfig(e)).catch((n) => console.error("[recommendation] refreshing a duplicated strategy failed", n)).finally(() => s.forEach((n) => this._refreshingIds.delete(n)));
+    }
+    this._warnIfMultipleBlocks();
   }
   /**
    * Core id-reassignment for a duplicated block: rewrites the DOM
@@ -277,13 +323,13 @@ class Y extends E {
    * effects so older bug-affected templates can self-repair without
    * disturbing the user's current selection).
    */
-  _reassignDuplicateId(t, e) {
-    const i = this._generateNextId(), n = this._getBlockElement(t);
-    return this._unsettledDuplicateIds.add(i), this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), s.hasConfig(t) && s.updateConfig(
+  _reassignDuplicateId(e, t) {
+    const i = this._generateNextId(), r = this._getBlockElement(e);
+    return this._unsettledDuplicateIds.add(i), this._assignRecommendationId(e, i), r && this._reassignInstanceClass(r, t, i), o.hasConfig(e) && o.updateConfig(
       this.api,
-      t,
+      e,
       { recommendationId: i },
-      `Reassign recommendation ID on duplicate (was ${e})`
+      `Reassign recommendation ID on duplicate (was ${t})`
     ), i;
   }
   /**
@@ -293,12 +339,12 @@ class Y extends E {
    * the source's class would both leak stylistic edits across blocks and
    * cause the mail render to apply the source block's config to the clone.
    */
-  _reassignInstanceClass(t, e, i) {
-    if (!("getAttribute" in t))
+  _reassignInstanceClass(e, t, i) {
+    if (!("getAttribute" in e))
       return;
-    const n = `ins-recommendation-v3-block-${e}`, o = `ins-recommendation-v3-block-${i}`, r = this.api.getDocumentModifier();
-    r.modifyHtml(t).removeClass(n).setClass(o), r.apply(new p(
-      `Reassign recommendation instance class ${n} -> ${o}`
+    const r = `ins-recommendation-v3-block-${t}`, s = `ins-recommendation-v3-block-${i}`, n = this.api.getDocumentModifier();
+    n.modifyHtml(e).removeClass(r).setClass(s), n.apply(new p(
+      `Reassign recommendation instance class ${r} -> ${s}`
     ));
   }
   /**
@@ -307,64 +353,64 @@ class Y extends E {
    * HTML by getTemplate(), since Stripo's Angular rendering overwrites dynamically
    * added classes via setAttribute.
    */
-  _assignRecommendationId(t, e) {
-    const i = this._getBlockElement(t);
+  _assignRecommendationId(e, t) {
+    const i = this._getBlockElement(e);
     if (!i)
       return;
-    const n = this.api.getDocumentModifier();
-    n.modifyHtml(i).setAttribute(m, e.toString()), n.apply(new p(`Assign recommendation ID ${e}`));
+    const r = this.api.getDocumentModifier();
+    r.modifyHtml(i).setAttribute(h, t.toString()), r.apply(new p(`Assign recommendation ID ${t}`));
   }
   /**
    * Stamps the `hide-price` attribute (read by email-service at send time) on
    * the block element from the config flag.
    */
-  _stampHidePrice(t, e) {
-    const i = this._getBlockElement(t);
-    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(D, String(e)).apply(new p("Stamp hide-price"));
+  _stampHidePrice(e, t) {
+    const i = this._getBlockElement(e);
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(B, String(t)).apply(new p("Stamp hide-price"));
   }
   /**
    * Stamps `hide-price` from config only when the block lacks the attribute —
    * heals templates saved before this feature without dirtying current ones.
    */
-  _healHidePriceAttr(t) {
-    const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e) || e.getAttribute(D) !== null)
+  _healHidePriceAttr(e) {
+    const t = this._getBlockElement(e);
+    if (!t || !("getAttribute" in t) || t.getAttribute(B) !== null)
       return;
-    const { priceHideIfSameAsDiscounted: i } = s.getConfig(t);
-    this._stampHidePrice(t, i);
+    const { priceHideIfSameAsDiscounted: i } = o.getConfig(e);
+    this._stampHidePrice(e, i);
   }
   /**
    * Gets the recommendation-id from a block node
    */
-  _getRecommendationId(t) {
-    const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e))
+  _getRecommendationId(e) {
+    const t = this._getBlockElement(e);
+    if (!t || !("getAttribute" in t))
       return null;
-    const i = e.getAttribute(m);
+    const i = t.getAttribute(h);
     if (!i)
       return null;
-    const n = parseInt(i);
-    return Number.isNaN(n) ? null : n;
+    const r = parseInt(i);
+    return Number.isNaN(r) ? null : r;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
    */
-  _getBlockElement(t) {
-    if ("getAttribute" in t) {
-      const e = t.getAttribute("class");
-      if (e && e.includes(u))
-        return t;
+  _getBlockElement(e) {
+    if ("getAttribute" in e) {
+      const t = e.getAttribute("class");
+      if (t && t.includes(u))
+        return e;
     }
-    return "querySelector" in t ? t.querySelector(`.${u}`) ?? null : null;
+    return "querySelector" in e ? e.querySelector(`.${u}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format
    */
-  _migrateFromLegacy(t) {
-    s.migrateFromDataAttributes(this.api, t);
+  _migrateFromLegacy(e) {
+    o.migrateFromDataAttributes(this.api, e);
   }
 }
 export {
-  k as BLOCK_ID,
-  Y as RecommendationBlock
+  y as BLOCK_ID,
+  Z as RecommendationBlock
 };

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

@@ -1,43 +1,60 @@
-import { useRecommendationExtensionStore as g } from "../store/recommendation.js";
-import { refreshBlockOutsidePanel as y } from "./blockRefresh.js";
-import { toBlockUrlConfig as a } from "./blockUrlConfig.js";
-import { commitBlockChangeOutsidePanel as l, readBlockNodeConfigs as S } from "./nodeConfigWriter.js";
-function d(e, t) {
-  const r = JSON.stringify(a(t));
-  return S(e).find((o) => JSON.stringify(a(o)) !== r) ?? t;
+import { useRecommendationExtensionStore as c } from "../store/recommendation.js";
+import { refreshBlockOutsidePanel as l } from "./blockRefresh.js";
+import { toBlockUrlConfig as i } from "./blockUrlConfig.js";
+import { commitBlockChangeOutsidePanel as y, readBlockNodeConfigs as d } from "./nodeConfigWriter.js";
+function S(o, t) {
+  const r = JSON.stringify(i(t));
+  return d(o).find((n) => JSON.stringify(i(n)) !== r) ?? t;
 }
-async function p(e, t, r) {
-  const o = g(), s = [e, t];
-  (/* @__PURE__ */ new Map([[e, d(e, r)], [t, r]])).forEach((n, i) => {
-    var m;
-    (!!n.strategyId || i === t) && ((m = o.blockStates[i]) == null ? void 0 : m.recommendationConfigs.strategyId) !== n.strategyId && o.seedBlockUrlConfig(i, a(n));
-  }), o.resetArrivedBlock(t), await Promise.all(s.map(async (n) => {
-    if (!await o.refreshStrategyBlock(n))
+async function m(o, t, r = () => !0) {
+  const n = c();
+  await Promise.all(o.map(async (e) => {
+    if (!await n.refreshStrategyBlock(e))
       return;
-    const { recommendationConfigs: i, recommendationProducts: f } = o.blockStates[n];
-    l(
-      n,
-      { size: i.size },
-      f,
-      "Refresh duplicated recommendation strategy"
+    const { recommendationConfigs: s, recommendationProducts: a } = n.blockStates[e];
+    r(e, s.size) && y(
+      e,
+      { size: s.size },
+      a,
+      t
     );
   }));
 }
-async function k(e, t) {
-  if (!g().blockStates[e])
+async function C(o, t, r) {
+  const n = c(), e = [o, t];
+  (/* @__PURE__ */ new Map([[o, S(o, r)], [t, r]])).forEach((a, f) => {
+    var g;
+    (!!a.strategyId || f === t) && ((g = n.blockStates[f]) == null ? void 0 : g.recommendationConfigs.strategyId) !== a.strategyId && n.seedBlockUrlConfig(f, i(a));
+  }), n.resetArrivedBlock(t), await m(e, "Refresh duplicated recommendation strategy");
+}
+async function k(o) {
+  const t = c(), r = o.filter(({ config: e }) => !!e.strategyId);
+  if (!r.length)
+    return;
+  r.forEach(({ id: e, config: s }) => t.seedBlockUrlConfig(e, i(s))), t.invalidateStrategies();
+  const n = new Map(r.map(({ id: e, config: s }) => [e, s.size]));
+  await m(
+    r.map(({ id: e }) => e),
+    "Refresh recommendation strategy",
+    (e, s) => s !== n.get(e)
+  );
+}
+async function O(o, t) {
+  if (!c().blockStates[o])
     return !1;
-  const r = await y(e, {
-    pickUpdates: ({ strategyId: o, strategy: s, size: c, nodeConfigVersion: n }) => ({
-      strategyId: o,
-      strategy: s,
-      size: c,
-      configVersion: n
+  const r = await l(o, {
+    pickUpdates: ({ strategyId: n, strategy: e, size: s, nodeConfigVersion: a }) => ({
+      strategyId: n,
+      strategy: e,
+      size: s,
+      configVersion: a
     }),
     description: t
   });
-  return r || console.error("[recommendation] strategy change did not reach a node", { blockId: e }), r;
+  return r || console.error("[recommendation] strategy change did not reach a node", { blockId: o }), r;
 }
 export {
-  k as commitStrategyChange,
-  p as refreshDuplicatedStrategyBlocks
+  O as commitStrategyChange,
+  k as refreshArrivedStrategyBlocks,
+  C as refreshDuplicatedStrategyBlocks
 };

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

@@ -19,6 +19,9 @@ export declare class RecommendationBlock extends Block {
     private _resetSourceIds;
     /** Ids handed to duplicates the document root does not show yet: a copied module renames all its blocks at once. */
     private _unsettledDuplicateIds;
+    private _arrivedNodes;
+    /** Ids whose arrival or duplicate refresh is in flight, so a second refresh of the same block does not race it. */
+    private _refreshingIds;
     constructor();
     getId(): string;
     getIcon(): string;
@@ -44,6 +47,8 @@ export declare class RecommendationBlock extends Block {
      * @param node - The newly created block node
      */
     onCreated(node: ImmutableHtmlNode): void;
+    /** Refreshes every block of an opened template: Stripo restores a stored document without `onCreated`. */
+    onDocumentInit(): void;
     /**
      * Called when the document changes or template is loaded
      *
@@ -85,6 +90,12 @@ export declare class RecommendationBlock extends Block {
      * the renamed one depending on where the module was dropped (SD-149916).
      */
     private _scheduleArrivalReset;
+    /**
+     * Re-reads the strategy of a block that arrived with saved cards, without waiting for a click.
+     * Blocks of one opened template or dropped module arrive in one tick and refresh together.
+     */
+    private _queueArrivalRefresh;
+    private _refreshArrivedBlocks;
     /**
      * Heals a duplicate that slipped past the create-time `_detectDuplicate`
      * scan (or that was persisted by an older template before SD-142352).

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

@@ -5,6 +5,15 @@ import type { RecommendationNodeConfig } from '../types/nodeConfig';
  * @param config - the arriving block's persisted config; seeds either block its store entry does not match
  */
 export declare function refreshDuplicatedStrategyBlocks(sourceId: number, duplicateId: number, config: RecommendationNodeConfig): Promise<void>;
+/**
+ * Re-reads the strategy of blocks that arrived from a saved template or module, so the panel and
+ * preview show a strategy edited since the design was saved without selecting the block.
+ * @param blocks - each block's id with its persisted config, the truth its store entry is seeded from
+ */
+export declare function refreshArrivedStrategyBlocks(blocks: {
+    id: number;
+    config: RecommendationNodeConfig;
+}[]): Promise<void>;
 /**
  * Writes a strategy change and its products straight to the document, without the settings panel.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.21.0-beta.6fc739e",
+  "version": "3.21.0-beta.7e166b5",
   "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",

package/dist/composables/validators/useHtmlDocumentCountValidator.js

@@ -1,22 +0,0 @@
-import { ToasterTypeOptions as i } from "../../enums/toaster.js";
-import { useToaster as c } from "../useToaster.js";
-import { useTranslations as m } from "../useTranslations.js";
-const u = "newsletter.multiple-html-designs-detected", r = `(?:[^>"']|"[^"]*"|'[^']*')*`, a = /<html(?=[\s>/])/gi, T = new RegExp(
-  `<!--[\\s\\S]*?-->|<(style|script)\\b${r}>[\\s\\S]*?</\\1\\s*>|<([a-zA-Z][\\w:-]*)${r}>`,
-  "gi"
-), p = (e) => Array.from(e.matchAll(T)).filter(([, , t]) => (t == null ? void 0 : t.toLowerCase()) === "html").length, g = () => {
-  const { showToaster: e } = c(), t = m();
-  return { validateSingleHtmlDocument: (o, l = !1) => {
-    var n;
-    if ((((n = o.match(a)) == null ? void 0 : n.length) ?? 0) < 2)
-      return !0;
-    const s = p(o);
-    return s <= 1 ? !0 : (console.debug("guido:save:blocked", { reason: "multiple-html-documents", htmlRootCount: s }), l || e({
-      type: i.Warning,
-      message: t(u)
-    }), !1);
-  } };
-};
-export {
-  g as useHtmlDocumentCountValidator
-};

package/dist/src/composables/validators/useHtmlDocumentCountValidator.d.ts

@@ -1,3 +0,0 @@
-export declare const useHtmlDocumentCountValidator: () => {
-    validateSingleHtmlDocument: (rawHtml: string, silent?: boolean) => boolean;
-};