@useinsider/guido 3.18.1-beta.0725bd5 → 3.18.1-beta.12053dd

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,72 +1,77 @@
-import i from "../static/assets/icons/line-change.svg.js";
-import p from "../static/assets/icons/line-delete.svg.js";
-import s from "../static/assets/icons/line-plus.svg.js";
-import a from "../static/styles/base.css.js";
+import p from "../static/assets/icons/line-change.svg.js";
+import s from "../static/assets/icons/line-delete.svg.js";
+import a from "../static/assets/icons/line-plus.svg.js";
+import f from "../static/styles/base.css.js";
 import C from "../static/styles/components/alert-message.css.js";
 import c from "../static/styles/components/amp-block.css.js";
-import f from "../static/styles/components/base-input.css.js";
-import l from "../static/styles/components/button-group.css.js";
+import l from "../static/styles/components/base-input.css.js";
+import d from "../static/styles/components/button-group.css.js";
 import u from "../static/styles/components/button.css.js";
-import d from "../static/styles/components/combobox.css.js";
-import h from "../static/styles/components/counter.css.js";
+import h from "../static/styles/components/combobox.css.js";
+import g from "../static/styles/components/counter.css.js";
 import w from "../static/styles/components/dropdown-menu.css.js";
-import I from "../static/styles/components/loader.css.js";
-import g from "../static/styles/components/narrow-panel.css.js";
-import y from "../static/styles/components/popup.css.js";
-import A from "../static/styles/components/recommendation-strategy.css.js";
-import b from "../static/styles/components/switcher.css.js";
-import B from "../static/styles/components/tabs.css.js";
-import D from "../static/styles/components/tools.css.js";
-import $ from "../static/styles/components/version-history.css.js";
-import P from "../static/styles/components/wide-panel.css.js";
-import R from "../static/styles/variables.css.js";
-function r(t, o) {
-  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
+import y from "../static/styles/components/loader.css.js";
+import I from "../static/styles/components/narrow-panel.css.js";
+import A from "../static/styles/components/popup.css.js";
+import b from "../static/styles/components/recommendation-strategy.css.js";
+import B from "../static/styles/components/skeleton.css.js";
+import D from "../static/styles/components/switcher.css.js";
+import $ from "../static/styles/components/tabs.css.js";
+import P from "../static/styles/components/tools.css.js";
+import R from "../static/styles/components/version-history.css.js";
+import T from "../static/styles/components/wide-panel.css.js";
+import x from "../static/styles/variables.css.js";
+function r(S, o) {
+  return `--guido-icon-${S}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
 }
-const T = `:host {
-    ${r("line-change", i)}
-    ${r("line-delete", p)}
-    ${r("line-plus", s)}
-}`, x = [
-  R,
+const M = `:host {
+    ${r("line-change", p)}
+    ${r("line-delete", s)}
+    ${r("line-plus", a)}
+}`, O = [
+  x,
   // Must be on top
-  T,
-  a,
+  M,
+  f,
   // Must be on top
   C,
   c,
-  f,
   l,
-  u,
   d,
+  u,
   h,
-  w,
-  I,
   g,
+  w,
   y,
-  b,
+  I,
+  A,
   B,
   D,
   $,
   P,
-  A
+  R,
+  T,
+  b
   // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), M = 3e4, oo = () => ({ importCss: () => {
-  const o = new CSSStyleSheet();
-  o.replaceSync(x);
-  const n = Date.now() + M, e = () => {
-    var S;
-    const m = (S = document.querySelector("ui-editor")) == null ? void 0 : S.shadowRoot;
-    if (m) {
-      m.adoptedStyleSheets = [o];
+`), V = 3e4;
+let e = null;
+function W() {
+  return e || (e = new CSSStyleSheet(), e.replaceSync(O)), e;
+}
+const So = () => ({ importCss: () => {
+  const o = W(), i = Date.now() + V, m = () => {
+    var n;
+    const t = (n = document.querySelector("ui-editor")) == null ? void 0 : n.shadowRoot;
+    if (t) {
+      t.adoptedStyleSheets.includes(o) || (t.adoptedStyleSheets = [...t.adoptedStyleSheets, o]);
       return;
     }
-    Date.now() < n && requestAnimationFrame(e);
+    Date.now() < i && requestAnimationFrame(m);
   };
-  e();
+  m();
 } });
 export {
-  oo as useCustomInterfaceAppearance
+  So as useCustomInterfaceAppearance
 };

package/dist/composables/useRecommendation.js

@@ -1,23 +1,23 @@
 import { getRecommendationFeedSourceMaps as y, URLS as I } from "../enums/extensions/recommendationBlock.js";
 import { MinDeviceViewport as C, DefaultPadding as R } from "../enums/recommendation.js";
-import { useRecommendationExtensionStore as f } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useRecommendationExtensionStore as g } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import { generateCompleteFilterQuery as b } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
 import { getPartnerRecommendationParams as h } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
 import { sanitizeProductIds as x } from "../extensions/Blocks/Recommendation/utils/productIds.js";
 import { useConfigStore as P } from "../stores/config.js";
 const B = () => ({
   calculateCardWidth: ({
-    mobileLeftPadding: a,
+    mobileLeftPadding: s,
     mobileRightPadding: c,
-    cardsInRow: i,
-    unresponsive: n
+    cardsInRow: o,
+    unresponsive: a
   }) => {
-    const o = n ? i : 1, e = a + c + (o - 1) * R;
-    return (C - e) / o;
+    const i = a ? o : 1, e = s + c + (i - 1) * R;
+    return (C - e) / i;
   },
-  getRecommendationCampaignData: (a) => {
-    const c = f(), i = Number(a), n = c.blockStates[i];
-    if (!n)
+  getRecommendationCampaignData: (s) => {
+    const c = g(), o = Number(s), a = c.blockStates[o];
+    if (!a)
       return {
         textTrimming: !1,
         orientation: "vertical",
@@ -30,57 +30,59 @@ const B = () => ({
         discountBeforeTextValue: "",
         discountAfterTextValue: ""
       };
-    const { recommendationConfigs: o } = n, e = o.orientation === "grid" ? "vertical" : "horizontal";
+    const { recommendationConfigs: i } = a, e = i.orientation === "grid" ? "vertical" : "horizontal";
     return {
-      textTrimming: o.textTrimming,
+      textTrimming: i.textTrimming,
       orientation: e,
       mobileLeftPadding: 0,
       mobileRightPadding: 0,
-      cardsInRow: o.cardsInRow,
-      unresponsive: o.unresponsive,
+      cardsInRow: i.cardsInRow,
+      unresponsive: i.unresponsive,
       priceBeforeTextValue: "",
       priceAfterTextValue: "",
       discountBeforeTextValue: "",
       discountAfterTextValue: ""
     };
   },
-  buildCampaignUrl: (a, c) => {
+  buildCampaignUrl: (s, c) => {
     var l;
-    const i = f(), n = P(), o = Number(a);
+    const o = g(), a = P(), i = Number(s);
     let e;
     if (c)
       e = c;
     else {
-      const s = i.blockStates[o];
-      if (!s)
+      const r = o.blockStates[i];
+      if (!r)
         return "";
-      const { recommendationConfigs: r } = s;
+      const { recommendationConfigs: n } = r;
       e = {
-        strategy: r.strategy,
-        strategyId: r.strategyId,
-        language: r.language,
-        currencyCode: r.currencySettings.value,
-        size: r.size,
-        productIds: r.productIds,
-        filters: r.filters,
-        shuffleProducts: r.shuffleProducts
+        strategy: n.strategy,
+        strategyId: n.strategyId,
+        language: n.language,
+        currencyCode: n.currencySettings.value,
+        size: n.size,
+        productIds: n.productIds,
+        filters: n.filters,
+        shuffleProducts: n.shuffleProducts
       };
     }
-    if (e.strategyId && n.isFeatureEnabled("reusableRecommendationStrategy"))
-      return i.recommendationCampaignUrls[a] = {
+    if (e.strategyId && a.isFeatureEnabled("reusableRecommendationStrategy"))
+      return o.recommendationCampaignUrls[s] = {
         strategyId: e.strategyId,
         locale: e.language,
         currency: e.currencyCode
       }, "";
-    const d = ((l = y().find((s) => s.key === e.strategy)) == null ? void 0 : l.path) || "";
-    if (!d)
-      return delete i.recommendationCampaignUrls[a], "";
+    const d = ((l = y().find((r) => r.key === e.strategy)) == null ? void 0 : l.path) || "";
+    if (!d) {
+      const r = { ...o.recommendationCampaignUrls };
+      return delete r[s], o.recommendationCampaignUrls = r, "";
+    }
     const t = new URLSearchParams();
-    t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", n.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", n.variationId), e.strategy === "manualMerchandising" ? t.set("productId", x(e.productIds)) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
-    const g = e.filters.filter((s) => s.isValid), u = b(g);
-    u && t.set("filter", u), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(h(n.partnerName, e.strategy)).forEach(([s, r]) => t.set(s, r));
-    const p = decodeURIComponent(t.toString()), m = `${I.RECOMMENDATION_API_URL}/v2/${d}?${p}`;
-    return i.recommendationCampaignUrls[a] = m, m;
+    t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", a.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", a.variationId), e.strategy === "manualMerchandising" ? t.set("productId", x(e.productIds)) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
+    const f = e.filters.filter((r) => r.isValid), m = b(f);
+    m && t.set("filter", m), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(h(a.partnerName, e.strategy)).forEach(([r, n]) => t.set(r, n));
+    const p = decodeURIComponent(t.toString()), u = `${I.RECOMMENDATION_API_URL}/v2/${d}?${p}`;
+    return o.recommendationCampaignUrls[s] = u, u;
   }
 });
 export {

package/dist/composables/useStripo.js

@@ -1,23 +1,23 @@
-import { useActionsApi as L } from "./useActionsApi.js";
-import { useBlocksConfig as O } from "./useBlocksConfig.js";
-import { useConfig as q } from "./useConfig.js";
-import { useCustomInterfaceAppearance as H } from "./useCustomInterfaceAppearance.js";
+import { useActionsApi as O } from "./useActionsApi.js";
+import { useBlocksConfig as q } from "./useBlocksConfig.js";
+import { useConfig as H } from "./useConfig.js";
+import { useCustomInterfaceAppearance as w } from "./useCustomInterfaceAppearance.js";
 import { useFullStoryBridge as N } from "./useFullStoryBridge.js";
 import { useModuleRepair as j } from "./useModuleRepair.js";
 import { useStripoEventHandler as z } from "./useStripoEventHandler.js";
 import { useStripoNotifications as $ } from "./useStripoNotifications.js";
 import { useToaster as G } from "./useToaster.js";
 import { localePatch as J } from "../config/i18n/index.js";
-import { en as w } from "../config/i18n/en/index.js";
+import { en as b } from "../config/i18n/en/index.js";
 import { ToasterTypeOptions as X } from "../enums/toaster.js";
 import { useStripoApi as K } from "../services/stripoApi.js";
 import Q from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as b } from "../stores/editor.js";
+import { useEditorStore as k } from "../stores/editor.js";
 import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../utils/genericUtil.js";
 import Z from "../package.json.js";
 let n = null;
 const he = () => {
-  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: B, getCustomFonts: M, getSyncModulesStatus: T } = K(), { handleEvent: v } = z(), { handleModuleAdd: F } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
+  const { features: c, template: u, isFeatureEnabled: m } = H(), { handleError: p, showToaster: B } = G(), { getToken: M, getCustomFonts: T, getSyncModulesStatus: v } = K(), { handleEvent: F } = z(), { handleModuleAdd: A } = j(), { getStripoBlocksConfig: V } = q(), { getStripoNotifications: _ } = $(), f = () => n || (n = new Promise((i, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i();
@@ -29,16 +29,16 @@ const he = () => {
     }, document.body.appendChild(e);
   }), n.catch(() => {
     n = null;
-  }), n), _ = async (i, s, o, a = [], r = !1) => {
+  }), n), D = async (i, s, o, a = [], r = !1) => {
     var y, E, h, C;
-    const e = b(), { html: d, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1), I = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
-    H().importCss(), await window.UIEditor.initEditor(
+    const e = k(), { html: d, css: R } = i, { baseBlocks: g, extensions: P } = await V(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, U = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, I = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1), x = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
+    w().importCss(), await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: s,
         html: d,
-        css: D,
-        forceRecreate: U,
+        css: R,
+        forceRecreate: I,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -52,7 +52,7 @@ const he = () => {
         conditionsEnabled: S,
         customConditionsEnabled: S,
         enableXSSSecurity: !0,
-        modulesDisabled: P,
+        modulesDisabled: U,
         syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -62,7 +62,7 @@ const he = () => {
         displayUTM: !1,
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
-        allowedScriptSourceDomains: I,
+        allowedScriptSourceDomains: x,
         ...g ? { baseBlocks: g } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
@@ -80,7 +80,7 @@ const he = () => {
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const l = await B();
+            const l = await M();
             t(l);
           } catch (l) {
             p(l, "Failed to refresh token");
@@ -88,8 +88,8 @@ const he = () => {
         },
         onTemplateLoaded() {
           try {
-            const { activateCustomViewStyles: t, updateTimerInClonedTemplate: l } = L(), { injectFullStory: x } = N();
-            t(), x(), l(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { activateCustomViewStyles: t, updateTimerInClonedTemplate: l } = O(), { injectFullStory: L } = N();
+            w().importCss(), t(), L(), l(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -108,34 +108,34 @@ const he = () => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: v,
-        onModuleAdd: F,
-        notifications: V(),
+        onEvent: F,
+        onModuleAdd: A,
+        notifications: _(),
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: R,
+        extensions: P,
         localePatch: J
       }
     );
   };
   return { initPlugin: async (i, s, o) => {
-    const a = b();
+    const a = k();
     try {
       await f();
       const [r, e] = await Promise.all([
-        M(),
-        T()
+        T(),
+        v()
       ]);
-      a.syncModulesEnabled = e, await _(i, s, o, r, e);
+      a.syncModulesEnabled = e, await D(i, s, o, r, e);
     } catch {
-      a.loadingStatus = !1, k({
+      a.loadingStatus = !1, B({
         type: X.Error,
-        message: w["An error has occurred. Please report the error code to support."],
+        message: b["An error has occurred. Please report the error code to support."],
         actionButton: {
-          text: w["Reload page"],
+          text: b["Reload page"],
           onClick: () => window.location.reload()
         }
       });

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

@@ -1,13 +1,13 @@
-import { DEFAULT_COLUMN_SPACING as R, DEFAULT_ROW_SPACING as s, DEFAULT_MOBILE_ROW_SPACING as n, DEFAULT_MOBILE_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as e, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as o, ATTR_PRODUCT_NAME as t, ATTR_PRODUCT_OLD_PRICE as _, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as i, ATTR_RECOMMENDATION_TITLE as U } from "./selectors.js";
-const A = 1, u = 2, D = {
+import { DEFAULT_COLUMN_SPACING as i, DEFAULT_ROW_SPACING as s, DEFAULT_MOBILE_ROW_SPACING as n, DEFAULT_MOBILE_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as e, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as o, ATTR_PRODUCT_NAME as t, ATTR_PRODUCT_OLD_PRICE as _, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as I, ATTR_PRODUCT_OMNIBUS_DISCOUNT as R, ATTR_PRODUCT_BUTTON as r, ATTR_RECOMMENDATION_TITLE as E } from "./selectors.js";
+const U = 1, u = 2, m = 2, A = {
   code: "USD",
   symbol: "USD",
   alignment: "after",
   decimalCount: 2,
   decimalSeparator: ".",
   thousandSeparator: ","
-}, E = {
+}, D = {
   textBefore: "",
   textAfter: ""
 }, a = {
@@ -18,26 +18,26 @@ const A = 1, u = 2, D = {
   t,
   _,
   T,
-  r,
   I,
-  i
+  R,
+  r
 ], N = {
-  [U]: !0,
+  [E]: !0,
   [o]: !0,
   [t]: !0,
   [T]: !0,
   [_]: !0,
-  [r]: !1,
   [I]: !1,
-  [i]: !0
-}, m = {
+  [R]: !1,
+  [r]: !0
+}, L = {
   // Settings
   strategy: "mostPopular",
   productIds: [],
   size: "6",
   shuffleProducts: !1,
   language: "en_US",
-  currency: D,
+  currency: A,
   filters: [],
   strategyId: "",
   // Layout
@@ -46,7 +46,7 @@ const A = 1, u = 2, D = {
   mobileCardsInRow: e,
   mobileLayoutEnabled: !1,
   previousMobileCardsInRow: e,
-  columnSpacing: R,
+  columnSpacing: i,
   rowSpacing: s,
   mobileColumnSpacing: O,
   mobileRowSpacing: n,
@@ -55,7 +55,7 @@ const A = 1, u = 2, D = {
   visibility: N,
   previousTitleHtml: "",
   // Element settings
-  omnibusPrice: E,
+  omnibusPrice: D,
   omnibusDiscount: a,
   textTrimming: !1,
   // Price placement (block-level, affects all cards)
@@ -66,17 +66,18 @@ const A = 1, u = 2, D = {
   // of "false" (the actual hiding happens server-side at send).
   priceHideIfSameAsDiscounted: !1,
   // Meta
-  configVersion: A,
+  configVersion: U,
   recommendationId: 0
-}, L = [11, 12];
+}, P = [11, 12];
 export {
   u as CURRENT_CONFIG_VERSION,
   c as DEFAULT_COMPOSITION,
-  D as DEFAULT_CURRENCY,
-  m as DEFAULT_NODE_CONFIG,
+  A as DEFAULT_CURRENCY,
+  L as DEFAULT_NODE_CONFIG,
   a as DEFAULT_OMNIBUS_DISCOUNT,
-  E as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_OMNIBUS_PRICE,
   N as DEFAULT_VISIBILITY,
-  L as EXCLUDED_ALGORITHM_IDS,
-  A as PRE_RRS_CONFIG_VERSION
+  P as EXCLUDED_ALGORITHM_IDS,
+  U as PRE_RRS_CONFIG_VERSION,
+  m as RRS_CONFIG_VERSION
 };

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

@@ -4,7 +4,7 @@ var r = (g, c, t) => C(g, typeof c != "symbol" ? c + "" : c, t);
 import { useConfig as p } from "../../../../../composables/useConfig.js";
 import { ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as N } from "../../../common-control.js";
-import { CURRENT_CONFIG_VERSION as _, DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
+import { RRS_CONFIG_VERSION as _, DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
 import { RECOMMENDATION_ID_ATTR as I } from "../../constants/selectors.js";
 import { RecommendationConfigService as l } from "../../services/configService.js";
 import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";

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

@@ -4,7 +4,7 @@ var r = (o, n, t) => S(o, typeof n != "symbol" ? n + "" : n, t);
 import { ACADEMY_LINKS as _ } from "../../../../../enums/academy.js";
 import { useOnboardingStore as f } from "../../../../../stores/onboarding.js";
 import { CommonControl as v } from "../../../common-control.js";
-import { CURRENT_CONFIG_VERSION as b } from "../../constants/defaultConfig.js";
+import { RRS_CONFIG_VERSION as b } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as h } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 const k = "recommendation-strategy-control";

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

@@ -1,9 +1,9 @@
-import { getRecommendationFeedSourceMaps as k, strategyEditPath as G, URLS as D, getOperatorOptions as _, PriceAttributes as L } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as E } from "../../../../services/recommendationApi.js";
+import { getRecommendationFeedSourceMaps as k, strategyEditPath as G, URLS as D, getOperatorOptions as _, PriceAttributes as N } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as U } from "../../../../services/recommendationApi.js";
 import { useConfigStore as F } from "../../../../stores/config.js";
-import { defineStore as N } from "pinia";
+import { defineStore as A } from "pinia";
 import "../constants/selectors.js";
-import { DEFAULT_MOBILE_CARDS_IN_ROW as U, DEFAULT_CARDS_IN_ROW as A } from "../constants/layout.js";
+import { DEFAULT_MOBILE_CARDS_IN_ROW as L, DEFAULT_CARDS_IN_ROW as E } from "../constants/layout.js";
 import { DEFAULT_NODE_CONFIG as x, EXCLUDED_ALGORITHM_IDS as B } from "../constants/defaultConfig.js";
 import { getDefaultProducts as C } from "../templates/utils.js";
 import { generateCompleteFilterQuery as v } from "../utils/filterUtil.js";
@@ -11,13 +11,13 @@ import { getPartnerRecommendationParams as M } from "../utils/partnerCustomizati
 import { sanitizeProductIds as O } from "../utils/productIds.js";
 import { isFilterValid as T } from "../validation/filterSchema.js";
 import { getInvalidFields as z, isConfigValid as V } from "../validation/requiredFields.js";
-const d = E();
+const d = U();
 let h = null, g = null, S = null, p = null, y = 0;
 const b = /* @__PURE__ */ new Map();
 let l = null;
 function P() {
   return {
-    cardsInRow: A,
+    cardsInRow: E,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -31,7 +31,7 @@ function P() {
     productIds: [],
     id: 1,
     language: "en_US",
-    mobileCardsInRow: U,
+    mobileCardsInRow: L,
     mobileLayoutEnabled: !1,
     orientation: "grid",
     recommendedProducts: [],
@@ -79,7 +79,7 @@ const j = () => ({
   currentRecommendationId: null,
   strategyPanelOpen: !1,
   configVersion: 0
-}), it = N("guidoRecommendationExtension", {
+}), it = A("guidoRecommendationExtension", {
   state: () => j(),
   getters: {
     // ====================================================================
@@ -164,7 +164,7 @@ const j = () => ({
     getFilterList() {
       return Object.values(this.filterList).filter((t) => t.isFilterable !== 0 && t.isFilterable !== !1).map((t) => {
         let e;
-        return t.type === "productAttribute" ? e = `product_attributes.${t.attributeName}` : L.includes(t.attributeName) ? e = `${t.attributeName}.${this.recommendationConfigs.currencySettings.value}` : e = t.attributeName, {
+        return t.type === "productAttribute" ? e = `product_attributes.${t.attributeName}` : N.includes(t.attributeName) ? e = `${t.attributeName}.${this.recommendationConfigs.currencySettings.value}` : e = t.attributeName, {
           text: t.displayName,
           value: e,
           type: t.attributeType
@@ -353,22 +353,27 @@ const j = () => ({
       this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId] || (this.blockStates[this.currentRecommendationId].removeStrategyModalStatus = !1);
     },
     async fetchStrategies() {
-      if (p && await p, this.strategiesFetched)
+      for (; p; )
+        try {
+          await p;
+        } catch {
+        }
+      if (this.strategiesFetched)
         return;
-      const t = y;
-      p = (async () => {
+      const t = y, e = (async () => {
         this.strategiesLoading = !0;
         try {
-          const e = await d.fetchRecommendationStrategies();
+          const r = await d.fetchRecommendationStrategies();
           if (t !== y)
             return;
-          this.strategies = e, this.strategiesFetched = !0;
+          this.strategies = r, this.strategiesFetched = !0;
         } finally {
           this.strategiesLoading = !1, t === y && (this.strategiesSettled = !0);
         }
       })();
+      p = e;
       try {
-        await p;
+        await e;
       } finally {
         p = null;
       }
@@ -378,8 +383,9 @@ const j = () => ({
     },
     /**
      * Opens a Smart Recommender strategy page in a new tab and refreshes the list every time
-     * the user comes back. `visibilitychange` covers the tab case; `focus` covers the page
-     * landing in a separate window, where this document never goes hidden.
+     * the user comes back. `visibilitychange` only: a `focus` listener would also fire when
+     * focus merely returns from the Stripo canvas iframe to the panel, refetching and
+     * regenerating the canvas while the user never left the editor (SD-149916).
      *
      * Deliberately NOT one-shot: the strategy tab stays open, so a user can create a second
      * strategy in it and come back again — a listener that disarmed on the first return would
@@ -389,7 +395,9 @@ const j = () => ({
      */
     _armStrategyPageReturn(t) {
       const e = window.open(t, "_blank");
-      e && (e.opener = null), l == null || l();
+      if (!e)
+        return;
+      e.opener = null, l == null || l();
       let r = !1;
       const i = () => {
         document.hidden || r || (e != null && e.closed && (l == null || l()), r = !0, this.invalidateStrategies(), this.fetchStrategies().then(() => this._refreshAssignedStrategyProducts()).catch(() => {
@@ -397,8 +405,8 @@ const j = () => ({
           r = !1;
         }));
       };
-      document.addEventListener("visibilitychange", i), window.addEventListener("focus", i), l = () => {
-        document.removeEventListener("visibilitychange", i), window.removeEventListener("focus", i), l = null;
+      document.addEventListener("visibilitychange", i), l = () => {
+        document.removeEventListener("visibilitychange", i), l = null;
       };
     },
     /**
@@ -448,7 +456,11 @@ const j = () => ({
       });
     },
     removeStrategy() {
-      this.patchCurrentBlockConfig({ strategyId: "", size: x.size });
+      this.patchCurrentBlockConfig({
+        strategyId: "",
+        strategy: "",
+        size: x.size
+      });
     },
     // ====================================================================
     // Shared Data Fetching (fetched once, used by all blocks)
@@ -604,7 +616,7 @@ const j = () => ({
         this._setBlockProducts(t, [], s);
         return;
       }
-      const n = r.filters.filter((u) => u.isValid), o = v(n), c = ((f = k().find((u) => u.key === r.strategy)) == null ? void 0 : f.path) || "", a = {
+      const n = r.filters.filter((m) => m.isValid), o = v(n), c = ((f = k().find((m) => m.key === r.strategy)) == null ? void 0 : f.path) || "", a = {
         locale: r.language,
         currency: r.currencySettings.value,
         partnerName: i.partnerName,
@@ -616,13 +628,13 @@ const j = () => ({
         a,
         M(i.partnerName, r.strategy)
       );
-      let m;
+      let u;
       try {
-        m = await d.fetchRecommendationProducts(c, a);
+        u = await d.fetchRecommendationProducts(c, a);
       } catch {
-        m = [];
+        u = [];
       }
-      this._setBlockProducts(t, m, s);
+      this._setBlockProducts(t, u, s);
     },
     async _doFetchStrategyProducts(t) {
       const e = (b.get(t) ?? 0) + 1;
@@ -636,7 +648,7 @@ const j = () => ({
         );
         if (n) {
           s = parseInt(String(n.size ?? "")) || s;
-          const o = r.currencySettings.value, a = (await this.resolveStrategyUrlTemplate(n, o)).replaceAll("{locale}", r.language).replaceAll("{currency}", o), m = a.indexOf("?"), f = m === -1 ? a : a.slice(0, m), u = (m === -1 ? "" : a.slice(m + 1)).split("&").filter((R) => R && !R.startsWith("user_id=")), I = u.length ? `${f}?${u.join("&")}` : f;
+          const o = r.currencySettings.value, a = (await this.resolveStrategyUrlTemplate(n, o)).replaceAll("{locale}", r.language).replaceAll("{currency}", o), u = a.indexOf("?"), f = u === -1 ? a : a.slice(0, u), m = (u === -1 ? "" : a.slice(u + 1)).split("&").filter((R) => R && !R.startsWith("user_id=")), I = m.length ? `${f}?${m.join("&")}` : f;
           I && (i = await d.fetchRecommendationProductsByUrl(I));
         }
       } catch {

package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts

@@ -10,6 +10,7 @@
 import type { RecommendationNodeConfig, CurrencyConfig, OmnibusTextConfig } from '../types/nodeConfig';
 export declare const PRE_RRS_CONFIG_VERSION = 1;
 export declare const CURRENT_CONFIG_VERSION = 2;
+export declare const RRS_CONFIG_VERSION = 2;
 /**
  * Default currency configuration
  * Uses USD as the base currency with standard formatting

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -10,4 +10,4 @@ export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
 export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CSS_CLASS_RECO_BUTTON, CSS_CLASS_SKIP_COMPILE, RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_RECOMMENDATION_TITLE, SELECTOR_TITLE_CELL, ATTR_CUSTOM_PREFIX, ATTR_DATA_CARD_COMPOSITION, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, CSS_CLASS_ATTRIBUTE_ROW, CSS_CLASS_SPACER, SELECTOR_ATTRIBUTE_ROW, ATTR_DATA_ATTRIBUTE_TYPE, ATTR_DATA_VISIBILITY, PRODUCT_ATTRIBUTE_PREFIX, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
 export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
-export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, PRE_RRS_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';
+export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, PRE_RRS_CONFIG_VERSION, RRS_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -472,8 +472,9 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
     invalidateStrategies(): void;
     /**
      * Opens a Smart Recommender strategy page in a new tab and refreshes the list every time
-     * the user comes back. `visibilitychange` covers the tab case; `focus` covers the page
-     * landing in a separate window, where this document never goes hidden.
+     * the user comes back. `visibilitychange` only: a `focus` listener would also fire when
+     * focus merely returns from the Stripo canvas iframe to the panel, refetching and
+     * regenerating the canvas while the user never left the editor (SD-149916).
      *
      * Deliberately NOT one-shot: the strategy tab stays open, so a user can create a second
      * strategy in it and come back again — a listener that disarmed on the first return would

package/dist/static/styles/components/recommendation-strategy.css.js

@@ -68,23 +68,6 @@ const n = `.strategy-control-header {
     line-height: 24px;
 }
 
-/*
- * Mirrors the design system's InSkeleton 1:1 (gradient stops, 200% size, 1.6s linear).
- * The Stripo panel lives in the editor's shadow root and is built from raw HTML strings,
- * so the Vue component cannot be used there. Hex values are literal in the DS too.
- */
-.guido-skeleton {
-    display: none;
-    border-radius: 4px;
-    background: linear-gradient(90deg, #f0f0f0 39.5%, #e1e1e1 66.02%, #f0f0f0 89.42%);
-    background-size: 200% 100%;
-    animation: guido-skeleton-shine 1.6s linear infinite;
-}
-
-@keyframes guido-skeleton-shine {
-    to { background-position-x: -200%; }
-}
-
 /* Each skeleton mirrors the footprint of the element it stands in for, so retiring
    the loading state does not shift the panel. */
 .guido-skeleton--strategy-title {

package/dist/static/styles/components/skeleton.css.js

@@ -0,0 +1,23 @@
+const e = `/*
+ * Mirrors the design system's InSkeleton 1:1 (gradient stops, 200% size, 1.6s linear).
+ * The Stripo panel lives in the editor's shadow root and is built from raw HTML strings,
+ * so the Vue component cannot be used there. Hex values are literal in the DS too.
+ *
+ * Base only: each panel sizes its own \`.guido-skeleton--*\` modifier to the footprint of
+ * the element it stands in for.
+ */
+.guido-skeleton {
+    display: none;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #f0f0f0 39.5%, #e1e1e1 66.02%, #f0f0f0 89.42%);
+    background-size: 200% 100%;
+    animation: guido-skeleton-shine 1.6s linear infinite;
+}
+
+@keyframes guido-skeleton-shine {
+    to { background-position-x: -200%; }
+}
+`;
+export {
+  e as default
+};

package/dist/utils/templatePreparation.js

@@ -1,19 +1,19 @@
 import { useActionsApi as R } from "../composables/useActionsApi.js";
 import { useConfig as k } from "../composables/useConfig.js";
 import { useHtmlCompiler as N } from "../composables/useHtmlCompiler.js";
-import { CURRENT_CONFIG_VERSION as U, DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { RRS_CONFIG_VERSION as U, DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
 import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import { mapLegacyStrategy as x } from "../extensions/Blocks/Recommendation/utils/legacyStrategyMap.js";
-import { DATA_ATTRIBUTES as A } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { DATA_ATTRIBUTES as C } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
 import { parsePageList as L } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
 import { useDynamicContentStore as z } from "../stores/dynamic-content.js";
 import { useEditorStore as _ } from "../stores/editor.js";
 import { useUnsubscribeStore as O } from "../stores/unsubscribe.js";
 import { assignTrackingIds as v } from "./linkTrackingIds.js";
 function B(m) {
-  const i = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${A.PAGE_LIST}]`), t = [];
+  const i = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${C.PAGE_LIST}]`), t = [];
   return i.forEach((s) => {
-    const r = s.getAttribute(A.PAGE_LIST);
+    const r = s.getAttribute(C.PAGE_LIST);
     r && t.push(...L(r));
   }), [...new Set(t)];
 }
@@ -85,19 +85,19 @@ const ee = () => {
         resetDataSavedFlag: !1
       });
       n.selectedUnsubscribePages.length && await n.fetchTemplates(), await G(o);
-      const { compiledHtml: I, stats: S, appliedRules: E } = r(f), w = c && p(c).compiledHtml, D = m.getSelectedDynamicContentList, F = T(), C = B(o);
+      const { compiledHtml: I, stats: S, appliedRules: w } = r(f), D = c && p(c).compiledHtml, E = m.getSelectedDynamicContentList, F = T(), A = B(o);
       return console.debug("HTML Compilation Stats:", {
         originalSize: S.originalSize,
         compiledSize: S.compiledSize,
         reduction: `${S.reductionPercentage.toFixed(2)}%`,
-        appliedRules: E,
+        appliedRules: w,
         executionTime: `${S.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: D,
+        dynamicContentList: E,
         compiledHtml: I,
         rawHtml: o,
         css: l,
-        ampHtml: w,
+        ampHtml: D,
         ampErrors: y,
         modules: g.map(Number),
         recommendation: {
@@ -105,8 +105,8 @@ const ee = () => {
           configs: {}
         },
         unsubscribe: {
-          status: C.length > 0,
-          config: C
+          status: A.length > 0,
+          config: A
         }
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.18.1-beta.0725bd5",
+  "version": "3.18.1-beta.12053dd",
   "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",