@useinsider/guido 3.17.0-beta.db80c84 → 3.17.0-beta.e6704da

package/dist/composables/useRecommendation.js

@@ -1,22 +1,22 @@
-import { getRecommendationFeedSourceMaps as I, URLS as R } from "../enums/extensions/recommendationBlock.js";
-import { MinDeviceViewport as C, DefaultPadding as b } from "../enums/recommendation.js";
+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 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 { 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,
-    mobileRightPadding: s,
-    cardsInRow: c,
+    mobileLeftPadding: i,
+    mobileRightPadding: c,
+    cardsInRow: s,
     unresponsive: n
   }) => {
-    const r = n ? c : 1, e = a + s + (r - 1) * b;
-    return (C - e) / r;
+    const o = n ? s : 1, e = i + c + (o - 1) * R;
+    return (C - e) / o;
   },
-  getRecommendationCampaignData: (a) => {
-    const s = l(), c = Number(a), n = s.blockStates[c];
+  getRecommendationCampaignData: (i) => {
+    const c = l(), s = Number(i), n = c.blockStates[s];
     if (!n)
       return {
         textTrimming: !1,
@@ -30,47 +30,54 @@ const B = () => ({
         discountBeforeTextValue: "",
         discountAfterTextValue: ""
       };
-    const { recommendationConfigs: r } = n, e = r.orientation === "grid" ? "vertical" : "horizontal";
+    const { recommendationConfigs: o } = n, e = o.orientation === "grid" ? "vertical" : "horizontal";
     return {
-      textTrimming: r.textTrimming,
+      textTrimming: o.textTrimming,
       orientation: e,
       mobileLeftPadding: 0,
       mobileRightPadding: 0,
-      cardsInRow: r.cardsInRow,
-      unresponsive: r.unresponsive,
+      cardsInRow: o.cardsInRow,
+      unresponsive: o.unresponsive,
       priceBeforeTextValue: "",
       priceAfterTextValue: "",
       discountBeforeTextValue: "",
       discountAfterTextValue: ""
     };
   },
-  buildCampaignUrl: (a, s) => {
+  buildCampaignUrl: (i, c) => {
     var m;
-    const c = l(), n = P(), r = Number(a);
+    const s = l(), n = P(), o = Number(i);
     let e;
-    if (s)
-      e = s;
+    if (c)
+      e = c;
     else {
-      const i = c.blockStates[r];
-      if (!i)
+      const a = s.blockStates[o];
+      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();
+    if (n.isFeatureEnabled("reusableRecommendationStrategy") && e.strategyId)
+      return s.recommendationCampaignUrls[i] = {
+        strategyId: e.strategyId,
+        locale: e.language,
+        currency: e.currencyCode
+      }, "";
+    const g = ((m = y().find((a) => a.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;
+    const f = e.filters.filter((a) => a.isValid), d = b(f);
+    d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(h(n.partnerName, e.strategy)).forEach(([a, r]) => t.set(a, r));
+    const p = decodeURIComponent(t.toString()), u = `${I.RECOMMENDATION_API_URL}/v2/${g}?${p}`;
+    return s.recommendationCampaignUrls[i] = u, u;
   }
 });
 export {

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
 };

package/dist/config/migrator/recommendation/compositionMapper.js

@@ -1,34 +1,34 @@
 import { DEFAULT_COMPOSITION as p, DEFAULT_VISIBILITY as I } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
-import { ATTR_RECOMMENDATION_TITLE as l, ATTR_CUSTOM_PREFIX as k, ATTR_PRODUCT_BUTTON as A, ATTR_PRODUCT_OMNIBUS_DISCOUNT as R, ATTR_PRODUCT_OMNIBUS_PRICE as x, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as h, ATTR_PRODUCT_NAME as E, ATTR_PRODUCT_IMAGE as O } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { mapTextTheme as b, mapButtonTheme as y, mapImageTheme as N } from "./themeMapper.js";
-const C = "__title__", T = "product_attribute.";
-function P(r) {
+import { ATTR_CUSTOM_PREFIX as l, ATTR_PRODUCT_BUTTON as k, ATTR_PRODUCT_OMNIBUS_DISCOUNT as A, ATTR_PRODUCT_OMNIBUS_PRICE as x, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_NAME as h, ATTR_PRODUCT_IMAGE as y } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { mapTextTheme as E, mapButtonTheme as O, mapImageTheme as b } from "./themeMapper.js";
+const C = "__title__", a = "product_attribute.";
+function N(r) {
   const t = r.variable ?? "";
   switch (t) {
     case "p_recommendation_title":
       return { key: C, kind: "title" };
     case "p_image":
-      return { key: O, kind: "image" };
+      return { key: y, kind: "image" };
     case "p_name":
-      return { key: E, kind: "text" };
-    case "p_price":
       return { key: h, kind: "text" };
+    case "p_price":
+      return { key: R, kind: "text" };
     case "p_original_price":
       return { key: f, kind: "text" };
     case "p_omnibus_price":
       return { key: x, kind: "text" };
     case "p_omnibus_discount":
-      return { key: R, kind: "text" };
+      return { key: A, kind: "text" };
     case "p_button":
-      return { key: A, kind: "button" };
+      return { key: k, kind: "button" };
     default:
       if (r.variableType === "p_attribute" || t.startsWith("p_attribute_")) {
-        const o = r.value ?? "", s = o.startsWith(T) ? o.slice(T.length) : o;
+        const o = r.value ?? "", s = o.startsWith(a) ? o.slice(a.length) : o;
         if (!s)
           return null;
-        const e = o || `${T}${s}`;
+        const e = o || `${a}${s}`;
         return {
-          key: `${k}${e}`,
+          key: `${l}${e}`,
           kind: "custom",
           customAttrName: s,
           customAttrValue: e
@@ -41,7 +41,7 @@ function _(r) {
   const t = p.indexOf(r);
   return t === -1 ? Number.POSITIVE_INFINITY : t;
 }
-function V(r) {
+function S(r) {
   const t = {
     composition: [],
     visibility: { ...I },
@@ -54,10 +54,10 @@ function V(r) {
     return t.composition = [...p], t;
   const o = [];
   r.forEach((e, i) => {
-    const n = P(e);
+    const n = N(e);
     if (n) {
       if (n.kind === "title") {
-        t.titleVariable = e, t.visibility[l] = e.hidden !== !0;
+        t.titleVariable = e;
         return;
       }
       o.push({
@@ -82,20 +82,20 @@ function V(r) {
     const { key: i, kind: n, hidden: u, legacy: c, customAttrName: d, customAttrValue: m } = e;
     switch (t.composition.push(i), t.visibility[i] = !u, n === "custom" && d && m && (t.customAttributes.includes(m) || t.customAttributes.push(m), t.customAttrValues[i] = m), n) {
       case "image":
-        s[i] = N(c.theme);
+        s[i] = b(c.theme);
         break;
       case "button":
-        s[i] = y(c.theme);
+        s[i] = O(c.theme);
         break;
       case "text":
       case "custom": {
-        const a = b(c.theme);
-        s[i] = a, a.textTrimming && (t.anyTextTrimming = !0);
+        const T = E(c.theme);
+        s[i] = T, T.textTrimming && (t.anyTextTrimming = !0);
         break;
       }
     }
   }), t.perElementStyles = s, t;
 }
 export {
-  V as mapComposition
+  S as mapComposition
 };

package/dist/config/migrator/recommendation/extractors.js

@@ -1,54 +1,49 @@
 import { CURRENCY_ATTR as n, CSS_CLASS_SKIP_COMPILE as c } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
 const a = "You May Also Like!";
-function A(t) {
-  var i;
-  const e = t.querySelector(".ext-recommendation-title");
-  if (!e)
+function l(t) {
+  var o;
+  const r = t.querySelector(".ext-recommendation-title");
+  if (!r)
     return a;
-  const r = (i = e.textContent) == null ? void 0 : i.trim();
-  return r && r.length > 0 ? r : a;
+  const e = (o = r.textContent) == null ? void 0 : o.trim();
+  return e && e.length > 0 ? e : a;
 }
 function m(t) {
-  const e = t.querySelector(".ext-recommendation-title");
-  return e ? !/display\s*:\s*none/i.test(e.getAttribute("style") ?? "") : !1;
-}
-function d(t) {
-  const e = [
+  const r = [
     t,
     ...Array.from(t.querySelectorAll(".product-card, .ext-recommendation-card"))
   ];
-  let r = "";
-  return e.some((i) => {
-    const o = i.getAttribute("bgcolor");
-    if (o && o.trim())
-      return r = o.trim(), !0;
-    const u = (i.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
-    return u && u[1] ? (r = u[1].trim(), !0) : !1;
-  }), r;
+  let e = "";
+  return r.some((o) => {
+    const i = o.getAttribute("bgcolor");
+    if (i && i.trim())
+      return e = i.trim(), !0;
+    const u = (o.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
+    return u && u[1] ? (e = u[1].trim(), !0) : !1;
+  }), e;
 }
 function C(t) {
-  const e = t.getAttribute(n.CURRENCY);
-  if (!e)
+  const r = t.getAttribute(n.CURRENCY);
+  if (!r)
     return;
-  const r = t.getAttribute(n.SYMBOL);
+  const e = t.getAttribute(n.SYMBOL);
   return {
-    value: e,
+    value: r,
     // An empty `currency-symbol` is omitted so `mapCurrency` falls back to
     // the currency code as the symbol.
-    ...r ? { symbol: r } : {},
+    ...e ? { symbol: e } : {},
     alignment: t.getAttribute(n.ALIGNMENT) ?? "",
     decimalCount: t.getAttribute(n.DECIMAL_COUNT) ?? "",
     decimalSeparator: t.getAttribute(n.DECIMAL_SEPARATOR) ?? "",
     thousandSeparator: t.getAttribute(n.THOUSAND_SEPARATOR) ?? ""
   };
 }
-function g(t) {
+function d(t) {
   return t.classList.contains(c);
 }
 export {
-  d as extractCardBgColor,
+  m as extractCardBgColor,
   C as extractCurrencyFromBlock,
-  A as extractTitleText,
-  m as hasVisibleTitle,
-  g as isPartnerManagedBlock
+  l as extractTitleText,
+  d as isPartnerManagedBlock
 };