@useinsider/guido 3.17.0-beta.3ff6ea0 → 3.17.0-beta.6255bfc

package/README.md

@@ -162,6 +162,7 @@ const config: GuidoConfigInput = {
     liquidSyntax?: boolean,       // Default: false - Enable Liquid template syntax
     autosave?: boolean,           // Default: false - Show the Auto Save toggle in the header. See wiki/AUTOSAVE.md.
     allowlistEnabled?: boolean,   // Default: false - Pre-save domain-allowlist check (opt-in). Guido self-serves the block toaster (role lookup, deep-link, copy from window.trans).
+    reusableRecommendationStrategy?: boolean, // Default: false - Assign an RRS strategy to recommendation blocks instead of per-block algorithm/filters/shuffle/product-count settings.
   },
 
   // Optional: Callbacks

package/dist/@types/config/schemas.js

@@ -1,5 +1,5 @@
 import { ModuleFolderDefaults as f } from "../../enums/defaults.js";
-import { object as a, number as n, optional as e, string as t, picklist as i, pipe as m, minLength as b, custom as k, boolean as o, array as c, transform as C, record as y, fallback as R, literal as u, looseObject as g, variant as T, union as h, unknown as r, lazy as I } from "../../node_modules/valibot/dist/index.js";
+import { object as a, number as n, optional as e, string as t, picklist as i, pipe as m, minLength as b, custom as y, boolean as o, array as c, transform as C, record as k, fallback as R, literal as u, looseObject as g, variant as T, union as h, unknown as r, lazy as I } from "../../node_modules/valibot/dist/index.js";
 const p = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -76,7 +76,7 @@ const p = {
   children: e(c(S)),
   // eslint-disable-next-line camelcase -- backend field name
   select_items: e(c(S))
-})), N = y(
+})), N = k(
   t(),
   R(c(S), [])
 ), P = g({
@@ -132,7 +132,7 @@ const p = {
    * strategy, currency, locale, and layout data.
    */
   recommendationConfigs: e(
-    y(t(), P),
+    k(t(), P),
     {}
   )
 }), x = a({
@@ -219,7 +219,13 @@ const p = {
   /** Enable pre-save domain-allowlist validation (opt-in; Guido self-serves the block toaster) */
   allowlistEnabled: e(o(), !1),
   /** Enable persistent link tracking-id assignment for the click heatmap (opt-in) */
-  linkTrackingIds: e(o(), !1)
+  linkTrackingIds: e(o(), !1),
+  /**
+   * Assign a Reusable Recommendation Strategy (RRS) to recommendation blocks instead of
+   * per-block algorithm settings. Hides Algorithm, Filters, Shuffle and Number of Products
+   * (they live on the strategy) and adds the Assign Strategy flow.
+   */
+  reusableRecommendationStrategy: e(o(), !1)
 }), B = i([
   "amp-accordion",
   "amp-carousel",
@@ -287,7 +293,7 @@ const p = {
   ...d.entries,
   type: u("custom"),
   /** Custom processor function */
-  processor: k(
+  processor: y(
     (s) => typeof s == "function",
     "processor must be a function"
   )
@@ -307,7 +313,7 @@ const p = {
    * Return false to cancel the save operation.
    */
   externalValidation: e(
-    k(
+    y(
       (s) => typeof s == "function",
       "externalValidation must be a function"
     )

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
+  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.AssignStrategyDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "b0d3b445"
+  "003398e6"
 );
 const l = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -5,26 +5,27 @@ import { useGuidoStateBridge as Z } from "../composables/useGuidoStateBridge.js"
 import { usePartner as ee } from "../composables/usePartner.js";
 import { useStripo as te } from "../composables/useStripo.js";
 import { useTimerClone as oe } from "../composables/useTimerClone.js";
-import { migrate as N } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as O } from "../enums/defaults.js";
+import { migrate as A } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as N } from "../enums/defaults.js";
 import { RIBBON_SELECTOR as ne } from "../enums/onboarding.js";
 import { useRecommendationExtensionStore as re } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import se from "./organisms/AutoSaveController.vue.js";
 import ae from "./organisms/base/Toaster.vue.js";
-import ie from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ce from "./organisms/header/HeaderWrapper.vue.js";
-import de from "./organisms/LoadingWrapper.vue.js";
-import me from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import le from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as ue } from "../services/stripoApi.js";
-import { useConfigStore as pe } from "../stores/config.js";
-import { useDynamicContentStore as fe } from "../stores/dynamic-content.js";
-import { useEditorStore as P } from "../stores/editor.js";
-import { usePreviewStore as ye } from "../stores/preview.js";
-import { useTemplateStore as ve } from "../stores/template.js";
-import { useUnsubscribeStore as he } from "../stores/unsubscribe.js";
-import { readTrackFloor as A } from "../utils/linkTrackingIds.js";
-const ze = /* @__PURE__ */ j({
+import ie from "./organisms/extensions/recommendation/AssignStrategyDrawer.vue.js";
+import ce from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import de from "./organisms/header/HeaderWrapper.vue.js";
+import me from "./organisms/LoadingWrapper.vue.js";
+import le from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ue from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as pe } from "../services/stripoApi.js";
+import { useConfigStore as fe } from "../stores/config.js";
+import { useDynamicContentStore as ye } from "../stores/dynamic-content.js";
+import { useEditorStore as O } from "../stores/editor.js";
+import { usePreviewStore as ve } from "../stores/preview.js";
+import { useTemplateStore as ge } from "../stores/template.js";
+import { useUnsubscribeStore as Se } from "../stores/unsubscribe.js";
+import { readTrackFloor as P } from "../utils/linkTrackingIds.js";
+const Ke = /* @__PURE__ */ j({
   __name: "Guido",
   props: {
     config: null,
@@ -36,11 +37,11 @@ const ze = /* @__PURE__ */ j({
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
     ), H = R(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), h = B(), l = B(), u = fe(), S = he(), o = pe();
+    ), g = B(), l = B(), u = ye(), S = Se(), o = fe();
     a.ready && o.init(a.config);
-    const c = P(), $ = ye(), m = U(() => c.hasChanges), { isTestPartner: z } = ee(), g = () => {
+    const c = O(), $ = ve(), m = U(() => c.hasChanges), { isTestPartner: z } = ee(), h = () => {
       var t;
-      return (t = h.value) == null ? void 0 : t.handleSave(!0);
+      return (t = g.value) == null ? void 0 : t.handleSave(!0);
     }, b = (t) => {
       c.loadingStatus = t;
     };
@@ -52,10 +53,10 @@ const ze = /* @__PURE__ */ j({
         userId: o.userId,
         username: o.username,
         partnerName: o.partnerName,
-        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || O.SAVED_MODULES,
-        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || O.DEFAULT_MODULES
+        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || N.SAVED_MODULES,
+        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || N.DEFAULT_MODULES
       };
-    }, { initPlugin: E, preloadRuntime: w } = te(), { getDefaultTemplate: C } = ue(), { cloneTimersOnSave: D, hasTimerBlocks: k } = oe(), q = U(() => {
+    }, { initPlugin: E, preloadRuntime: w } = te(), { getDefaultTemplate: D } = pe(), { cloneTimersOnSave: C, hasTimerBlocks: k } = oe(), q = U(() => {
       var t;
       return !((t = o.ui) != null && t.showHeader);
     });
@@ -99,12 +100,12 @@ const ze = /* @__PURE__ */ j({
         S.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
         const L = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {}, M = o.isFeatureEnabled("linkTrackingIds");
         let n = {
-          html: s && await N(s, L),
+          html: s && await A(s, L),
           css: d
         };
-        n.html || (n = await C(), n.html = await N(n.html, L));
-        const K = M ? A(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
-        k(n.html) && (n.html = await D(n.html)), M && (c.trackIdSessionFloor = Math.max(K, A(n.html)));
+        n.html || (n = await D(), n.html = await A(n.html, L));
+        const K = M ? P(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
+        k(n.html) && (n.html = await C(n.html)), M && (c.trackIdSessionFloor = Math.max(K, P(n.html)));
         const V = {
           preselectedDynamicContentList: I,
           onReady: () => {
@@ -118,7 +119,7 @@ const ze = /* @__PURE__ */ j({
     };
     return J(async () => {
       var e;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), re().$reset(), P().$reset(), ve().$reset(), y();
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), re().$reset(), O().$reset(), ge().$reset(), y();
       const t = (e = l.value) == null ? void 0 : e.parentElement;
       if (t && (i = new ResizeObserver(y), i.observe(t)), w(), a.ready)
         await v();
@@ -142,11 +143,11 @@ const ze = /* @__PURE__ */ j({
         close: F
       },
       hasChanges: m,
-      saveSilent: g,
+      saveSilent: h,
       setLoading: b
-    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: H, headerWrapperRef: h, wrapperRef: l, dynamicContentStore: u, unsubscribeStore: S, props: a, configStore: o, editorStore: c, previewStore: $, hasChanges: m, isTestPartner: z, saveSilent: g, setLoading: b, emit: r, buildMetadata: p, initPlugin: E, preloadRuntime: w, getDefaultTemplate: C, cloneTimersOnSave: D, hasTimerBlocks: k, noHeader: q, insertDynamicContent: T, closeDynamicContent: F, handleDynamicContentOpen: f, ribbonObserver: i, updateRibbonOffset: y, startEditor: v, AutoSaveController: se, Toaster: ae, FilterSelectionDrawer: ie, HeaderWrapper: ce, LoadingWrapper: de, SaveAsTemplateDrawer: me, UnsubscribeWrapper: le };
+    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: H, headerWrapperRef: g, wrapperRef: l, dynamicContentStore: u, unsubscribeStore: S, props: a, configStore: o, editorStore: c, previewStore: $, hasChanges: m, isTestPartner: z, saveSilent: h, setLoading: b, emit: r, buildMetadata: p, initPlugin: E, preloadRuntime: w, getDefaultTemplate: D, cloneTimersOnSave: C, hasTimerBlocks: k, noHeader: q, insertDynamicContent: T, closeDynamicContent: F, handleDynamicContentOpen: f, ribbonObserver: i, updateRibbonOffset: y, startEditor: v, AutoSaveController: se, Toaster: ae, AssignStrategyDrawer: ie, FilterSelectionDrawer: ce, HeaderWrapper: de, LoadingWrapper: me, SaveAsTemplateDrawer: le, UnsubscribeWrapper: ue };
   }
 });
 export {
-  ze as default
+  Ke as default
 };

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

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

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

@@ -0,0 +1,66 @@
+import { defineComponent as S, defineAsyncComponent as w, ref as c, computed as o, watch as v } from "vue";
+import "@useinsider/design-system-organisms/style";
+import _ from "../../../wrappers/WpDrawer.vue.js";
+import { useToaster as D } from "../../../../composables/useToaster.js";
+import { useTranslations as T } from "../../../../composables/useTranslations.js";
+import { URLS as A } from "../../../../enums/extensions/recommendationBlock.js";
+import { ToasterTypeOptions as u } from "../../../../enums/toaster.js";
+import { useRecommendationExtensionStore as E } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
+import { buildStrategyInfoBoxProps as O } from "../../../../utils/strategyInfoBox.js";
+import { InSelect as x } from "@useinsider/design-system-vue";
+const V = /* @__PURE__ */ S({
+  __name: "AssignStrategyDrawer",
+  setup(B) {
+    const p = w(
+      async () => (await import("@useinsider/design-system-organisms")).OrgStrategyDetailModal
+    ), r = T(), e = E(), { showToaster: n } = D(), s = c(null), a = c(!1), l = c(!1), m = o(() => e.assignStrategyDrawerStatus ? r("email-editor.assign-strategy-description", { url: A.RECOMMENDATION_STRATEGIES_PANEL_PATH }) : "");
+    v(() => e.assignStrategyDrawerStatus, (t) => {
+      if (!t)
+        return;
+      const { strategyId: i } = e.recommendationConfigs;
+      s.value = i || null, a.value = !1, l.value = !!window.l10n, e.fetchStrategies().catch(() => {
+        n({
+          type: u.Error,
+          message: r("discovery-strategy.error-description")
+        });
+      });
+    });
+    const y = o(() => e.strategies.map((t) => ({
+      text: t.name,
+      value: t.strategy_id,
+      infoBoxProps: O(t, r)
+    }))), d = o(() => [{ value: s.value }]), g = o(() => {
+      const t = e.strategies.find((i) => String(i.strategy_id) === String(s.value ?? ""));
+      return t ? { ...t, fallback_config: null } : null;
+    }), f = o(() => ({
+      primaryButton: {
+        styling: "solid",
+        type: "primary",
+        labelText: r("products.assign-btn")
+      },
+      cancelOrBackButton: {
+        styling: "ghost",
+        type: "secondary",
+        labelText: r("products.cancel")
+      }
+    }));
+    return { __sfc: !0, OrgStrategyDetailModal: p, trans: r, store: e, showToaster: n, selectedStrategyId: s, showSelectionError: a, campaignTabSupported: l, drawerDescription: m, strategyOptions: y, selectValue: d, selectedStrategy: g, footerButtonGroupOptions: f, closeDrawer: () => {
+      e.closeAssignStrategyDrawer();
+    }, assignStrategy: () => {
+      const t = g.value;
+      if (!t) {
+        a.value = !0;
+        return;
+      }
+      e.assignStrategy(t), n({
+        type: u.Success,
+        message: r("email-editor.strategy-assigned-success", { strategyName: t.name })
+      }), e.closeAssignStrategyDrawer();
+    }, onSelect: (t) => {
+      s.value = t.value, a.value = !1;
+    }, WpDrawer: _, InSelect: x };
+  }
+});
+export {
+  V as default
+};

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,53 +1,67 @@
-import S from "../static/styles/base.css.js";
-import m from "../static/styles/components/alert-message.css.js";
-import e from "../static/styles/components/amp-block.css.js";
-import i from "../static/styles/components/base-input.css.js";
-import p from "../static/styles/components/button-group.css.js";
-import n from "../static/styles/components/button.css.js";
-import s from "../static/styles/components/combobox.css.js";
-import C from "../static/styles/components/counter.css.js";
-import f from "../static/styles/components/dropdown-menu.css.js";
-import a from "../static/styles/components/loader.css.js";
-import u from "../static/styles/components/narrow-panel.css.js";
-import c from "../static/styles/components/popup.css.js";
-import d from "../static/styles/components/switcher.css.js";
-import l from "../static/styles/components/tabs.css.js";
-import h from "../static/styles/components/tools.css.js";
-import w from "../static/styles/components/version-history.css.js";
-import y from "../static/styles/components/wide-panel.css.js";
-import B from "../static/styles/variables.css.js";
-const b = [
-  B,
-  // Must be on top
-  S,
+import S from "../static/assets/icons/line-change.svg.js";
+import i from "../static/assets/icons/line-delete.svg.js";
+import n from "../static/assets/icons/line-plus.svg.js";
+import p from "../static/styles/base.css.js";
+import s from "../static/styles/components/alert-message.css.js";
+import C from "../static/styles/components/amp-block.css.js";
+import a from "../static/styles/components/base-input.css.js";
+import f from "../static/styles/components/button-group.css.js";
+import c from "../static/styles/components/button.css.js";
+import u from "../static/styles/components/combobox.css.js";
+import l from "../static/styles/components/counter.css.js";
+import d from "../static/styles/components/dropdown-menu.css.js";
+import h from "../static/styles/components/loader.css.js";
+import g from "../static/styles/components/narrow-panel.css.js";
+import I from "../static/styles/components/popup.css.js";
+import w from "../static/styles/components/recommendation-strategy.css.js";
+import y from "../static/styles/components/switcher.css.js";
+import b from "../static/styles/components/tabs.css.js";
+import B 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 x from "../static/styles/variables.css.js";
+function r(t, o) {
+  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
+}
+const A = `:host {
+    ${r("line-change", S)}
+    ${r("line-delete", i)}
+    ${r("line-plus", n)}
+}`, R = [
+  x,
   // Must be on top
-  m,
-  e,
-  i,
+  A,
   p,
-  n,
+  // Must be on top
   s,
   C,
-  f,
   a,
-  u,
+  f,
   c,
-  d,
+  u,
   l,
+  d,
   h,
-  w,
-  y
+  g,
+  I,
+  y,
+  b,
+  B,
+  $,
+  P,
+  w
+  // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), v = () => ({ importCss: () => {
+`), Y = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(b);
-  const r = document.querySelector("ui-editor");
-  if (!r)
+  o.replaceSync(R);
+  const e = document.querySelector("ui-editor");
+  if (!e)
     return;
-  const t = r.shadowRoot;
-  t && (t.adoptedStyleSheets = [o]);
+  const m = e.shadowRoot;
+  m && (m.adoptedStyleSheets = [o]);
 } });
 export {
-  v as useCustomInterfaceAppearance
+  Y as useCustomInterfaceAppearance
 };

package/dist/composables/useRecommendation.js

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

package/dist/composables/useStripo.js

@@ -17,13 +17,13 @@ import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../ut
 import Z from "../package.json.js";
 let n = null;
 const Ce = () => {
-  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) => {
-    var d;
+  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: M, getCustomFonts: T, getSyncModulesStatus: v } = K(), { handleEvent: B } = z(), { handleModuleAdd: F } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
+    var l;
     if (document.getElementById("UiEditorScript")) {
       i();
       return;
     }
-    const o = Z.guido, r = `https://email-static.useinsider.com/guido/${(d = o == null ? void 0 : o.stripo) == null ? void 0 : d.version}/UIEditor.js`, e = document.createElement("script");
+    const o = Z.guido, r = `https://email-static.useinsider.com/guido/${(l = o == null ? void 0 : o.stripo) == null ? void 0 : l.version}/UIEditor.js`, e = document.createElement("script");
     e.id = "UiEditorScript", e.type = "module", e.src = r, e.onload = () => i(), e.onerror = () => {
       e.remove(), s(new Error(`Failed to load Stripo UIEditor script from S3: ${r}`));
     }, document.body.appendChild(e);
@@ -31,12 +31,12 @@ const Ce = () => {
     n = null;
   }), n), _ = 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);
+    const e = b(), { html: l, 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 = ((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1;
     await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: s,
-        html: d,
+        html: l,
         css: D,
         forceRecreate: U,
         locale: "en",
@@ -80,16 +80,16 @@ const Ce = () => {
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const l = await B();
-            t(l);
-          } catch (l) {
-            p(l, "Failed to refresh token");
+            const d = await M();
+            t(d);
+          } catch (d) {
+            p(d, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = H(), { activateCustomViewStyles: l, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
-            t(), l(), x(), I(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { importCss: t } = H(), { activateCustomViewStyles: d, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
+            t(), d(), x(), I(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -108,7 +108,7 @@ const Ce = () => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: v,
+        onEvent: B,
         onModuleAdd: F,
         notifications: V(),
         ignoreClickOutsideSelectors: [
@@ -126,8 +126,8 @@ const Ce = () => {
     try {
       await f();
       const [r, e] = await Promise.all([
-        M(),
-        T()
+        T(),
+        v()
       ]);
       a.syncModulesEnabled = e, await _(i, s, o, r, e);
     } catch {

package/dist/config/migrator/index.js

@@ -2,15 +2,14 @@ import { migrateCheckbox as t } from "./checkboxMigrator.js";
 import { migrateCouponBlock as i } from "./couponBlockMigrator.js";
 import { migrateItemsBlock as e } from "./itemsBlockMigrator.js";
 import { migrateProductNameLink as a } from "./productNameLinkMigrator.js";
-import { migrateRadioButton as n } from "./radioButtonMigrator.js";
-import { migrateRecommendation as c } from "./recommendationMigrator.js";
-import { migrateRecommendationTitle as g } from "./recommendationTitleMigrator.js";
-import { migrateSocialIcons as p } from "./socialIconMigrator.js";
-import { migrateUnsubscribe as f } from "./unsubscribeMigrator.js";
-const C = async (o, r = {}) => {
-  let m = o;
-  return m = t(m), m = n(m), m = await f(m), m = i(m), m = c(m, r), m = g(m), m = e(m), m = a(m), m = p(m), m;
+import { migrateRadioButton as c } from "./radioButtonMigrator.js";
+import { migrateRecommendation as g } from "./recommendationMigrator.js";
+import { migrateSocialIcons as n } from "./socialIconMigrator.js";
+import { migrateUnsubscribe as p } from "./unsubscribeMigrator.js";
+const x = async (r, o = {}) => {
+  let m = r;
+  return m = t(m), m = c(m), m = await p(m), m = i(m), m = g(m, o), m = e(m), m = a(m), m = n(m), m;
 };
 export {
-  C as migrate
+  x as migrate
 };