@useinsider/guido 3.5.1 → 3.6.0-beta.0e98cf4

package/dist/composables/useRecommendation.js

@@ -5,16 +5,16 @@ import { generateCompleteFilterQuery as h } from "../extensions/Blocks/Recommend
 import { useConfigStore as x } from "../stores/config.js";
 const w = () => ({
   calculateCardWidth: ({
-    mobileLeftPadding: s,
-    mobileRightPadding: a,
-    cardsInRow: c,
+    mobileLeftPadding: o,
+    mobileRightPadding: s,
+    cardsInRow: a,
     unresponsive: n
   }) => {
-    const r = n ? c : 1, e = s + a + (r - 1) * b;
+    const r = n ? a : 1, e = o + s + (r - 1) * b;
     return (R - e) / r;
   },
-  getRecommendationCampaignData: (s) => {
-    const a = m(), c = Number(s), n = a.blockStates[c];
+  getRecommendationCampaignData: (o) => {
+    const s = m(), a = Number(o), n = s.blockStates[a];
     if (!n)
       return {
         textTrimming: !1,
@@ -42,37 +42,33 @@ const w = () => ({
       discountAfterTextValue: ""
     };
   },
-  buildCampaignUrl: (s, a) => {
+  buildCampaignUrl: (o, s) => {
     var l;
-    const c = m(), n = x(), r = Number(s);
+    const a = m(), n = x(), r = Number(o);
     let e;
-    if (a)
-      e = a;
+    if (s)
+      e = s;
     else {
-      const i = c.blockStates[r];
-      if (!i)
+      const c = a.blockStates[r];
+      if (!c)
         return "";
-      const { recommendationConfigs: o } = i;
+      const { recommendationConfigs: i } = c;
       e = {
-        strategy: o.strategy,
-        language: o.language,
-        currencyCode: o.currencySettings.value,
-        size: o.size,
-        productIds: o.productIds,
-        filters: o.filters,
-        shuffleProducts: o.shuffleProducts
+        strategy: i.strategy,
+        language: i.language,
+        currencyCode: i.currencySettings.value,
+        size: i.size,
+        productIds: i.productIds,
+        filters: i.filters,
+        shuffleProducts: i.shuffleProducts
       };
     }
-    const f = ((l = I().find((i) => i.key === e.strategy)) == null ? void 0 : l.path) || "", t = new URLSearchParams();
-    if (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") {
-      const i = parseInt(e.size) || 6;
-      t.set("productId", e.productIds.slice(0, i).join(","));
-    } else 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);
+    const f = ((l = I().find((c) => c.key === e.strategy)) == null ? void 0 : l.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", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
+    const g = e.filters.filter((c) => c.isValid), d = h(g);
     d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true");
     const p = decodeURIComponent(t.toString()), u = `${C.RECOMMENDATION_API_URL}/v2/${f}?${p}`;
-    return c.recommendationCampaignUrls[s] = u, u;
+    return a.recommendationCampaignUrls[o] = u, u;
   }
 });
 export {

package/dist/composables/useStripo.js

@@ -9,12 +9,12 @@ import { localePatch as H } from "../config/i18n/index.js";
 import { useStripoApi as O } from "../services/stripoApi.js";
 import j from "../static/styles/customEditorStyle.css.js";
 import { useEditorStore as E } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
+import { dynamicContentToMergeTags as z } from "../utils/genericUtil.js";
+import L from "../package.json.js";
 const se = (C, l) => {
-  const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = O(), { handleEvent: B } = q(), { getStripoBlocksConfig: T } = I(), V = async (i, r = [], s = !1) => {
+  const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = O(), { handleEvent: F } = q(), { getStripoBlocksConfig: B } = I(), T = async (i, r = [], s = !1) => {
     var g, S, y;
-    const e = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await T(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, F = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
+    const e = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await B(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, _ = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
@@ -35,7 +35,7 @@ const se = (C, l) => {
         conditionsEnabled: f,
         customConditionsEnabled: f,
         enableXSSSecurity: !0,
-        modulesDisabled: F,
+        modulesDisabled: _,
         syncModulesEnabled: s,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -43,6 +43,7 @@ const se = (C, l) => {
         displayTitle: !1,
         displayUTM: !1,
         selectElementAfterDrop: !0,
+        sameFontSizeForOutlook: !0,
         allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
         ...o ? { baseBlocks: o } : {},
         editorFonts: {
@@ -52,7 +53,7 @@ const se = (C, l) => {
         },
         mergeTags: [
           {
-            entries: L(
+            entries: z(
               l.preselectedDynamicContentList,
               u("liquidSyntax")
             )
@@ -88,7 +89,7 @@ const se = (C, l) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: B,
+        onEvent: F,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
@@ -98,13 +99,13 @@ const se = (C, l) => {
         localePatch: H
       }
     );
-  }, _ = (i) => new Promise((r, s) => {
+  }, V = (i) => new Promise((r, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i(), r();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const e = L.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
       i(), r();
     }, o.onerror = () => {
@@ -112,12 +113,12 @@ const se = (C, l) => {
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
+    await V(async () => {
       const r = E(), [s, e] = await Promise.all([
         b(),
         k()
       ]);
-      r.syncModulesEnabled = e, await V(i, s, e);
+      r.syncModulesEnabled = e, await T(i, s, e);
     });
   } };
 };

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,127 +1,133 @@
-import { useConfig as S } from "../../../composables/useConfig.js";
-import { useRecommendation as g } from "../../../composables/useRecommendation.js";
-import { CSS_CLASS_RECO_BUTTON as _ } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { useRecommendationExtensionStore as q } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
-function y(r, c, e, o, s = "") {
-  const n = `{{${s}${r}_${c}_${e}}}`, t = `{{${s}${r}_${c}_currency}}`;
-  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
+import { useConfig as g } from "../../../composables/useConfig.js";
+import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
+import { CSS_CLASS_RECO_BUTTON as q } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { useRecommendationExtensionStore as C } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
+function y(r, n, e, o, i = "") {
+  const c = `{{${i}${r}_${n}_${e}}}`, t = `{{${i}${r}_${n}_currency}}`;
+  return o === "before" ? `${t} ${c}` : `${c} ${t}`;
 }
-function f(r, c, e, o, s, n) {
-  switch (c) {
+function A(r) {
+  let n = r;
+  for (; n.children.length === 1; )
+    [n] = n.children;
+  return n;
+}
+function f(r, n, e, o, i, c) {
+  switch (n) {
     case "productImage": {
       const t = r.querySelector("img");
-      t && (t.setAttribute("src", `{{${n}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${e}_${o}_name}}`));
-      const i = r.querySelector("a");
-      i && (i.setAttribute("href", `{{${n}${e}_${o}_url}}`), i.classList.add(_));
+      t && (t.setAttribute("src", `{{${c}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${c}${e}_${o}_name}}`));
+      const s = r.querySelector("a");
+      s && (s.setAttribute("href", `{{${c}${e}_${o}_url}}`), s.classList.add(q));
       break;
     }
     case "productName": {
       const t = r.querySelector("p");
       if (t) {
-        const i = t.querySelector("strong") || t;
-        i.textContent = `{{${n}${e}_${o}_name}}`;
+        const s = t.querySelector("strong") || t;
+        s.textContent = `{{${c}${e}_${o}_name}}`;
       }
       break;
     }
     case "productPrice": {
       const t = r.querySelector("p");
-      if (t) {
-        const i = t.querySelector("strong") || t;
-        i.textContent = y(e, o, "price", s, n);
-      }
+      t && (A(t).textContent = y(
+        e,
+        o,
+        "price",
+        i,
+        c
+      ));
       break;
     }
     case "productOldPrice": {
       const t = r.querySelector("p");
-      if (t) {
-        const i = t.querySelector("strong") || t;
-        i.textContent = y(
-          e,
-          o,
-          "original_price",
-          s,
-          n
-        ), t.setAttribute("product-attr", "discount");
-      }
+      t && (A(t).textContent = y(
+        e,
+        o,
+        "original_price",
+        i,
+        c
+      ), t.setAttribute("product-attr", "discount"));
       break;
     }
     case "productButton": {
       const t = r.querySelector("a");
-      t && t.setAttribute("href", `{{${n}${e}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${c}${e}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = r.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${n}${e}_${o}_omnibus_price}}`;
-        const i = t.closest("p");
-        i && (i.setAttribute("product-attr", "omnibus_price"), i.setAttribute("composition", "true"));
+        t.textContent = `{{${c}${e}_${o}_omnibus_price}}`;
+        const s = t.closest("p");
+        s && (s.setAttribute("product-attr", "omnibus_price"), s.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
       const t = r.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${n}${e}_${o}_omnibus_discount}}`;
-        const i = t.closest("p");
-        i && (i.setAttribute("product-attr", "omnibus_discount"), i.setAttribute("composition", "true"));
+        t.textContent = `{{${c}${e}_${o}_omnibus_discount}}`;
+        const s = t.closest("p");
+        s && (s.setAttribute("product-attr", "omnibus_discount"), s.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
       const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
       if (t) {
-        const i = t.getAttribute("product-attr"), a = t.querySelector("p");
+        const s = t.getAttribute("product-attr"), a = t.querySelector("p");
         if (a) {
           const u = a.querySelector("strong") || a;
-          u.textContent = `{{${n}${e}_${o}_${i}}}`;
+          u.textContent = `{{${c}${e}_${o}_${s}}}`;
         }
       }
       break;
     }
   }
 }
-function C(r, c, e, o) {
-  r.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((a) => {
+function w(r, n, e, o) {
+  r.querySelectorAll(".recommendation-product-row").forEach((c, t) => {
+    c.querySelectorAll("[data-attribute-type]").forEach((a) => {
       const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
       p.length > 0 ? p.forEach((l) => {
-        f(l, u, c, t, e, o);
-      }) : f(a, u, c, t, e, o);
+        f(l, u, n, t, e, o);
+      }) : f(a, u, n, t, e, o);
     });
   });
 }
-function E(r, c, e, o) {
-  const s = r.querySelectorAll(".recommendation-product-row");
-  if (!s.length)
+function E(r, n, e, o) {
+  const i = r.querySelectorAll(".recommendation-product-row");
+  if (!i.length)
     return;
-  const [n] = s, t = n.querySelector("[data-attribute-type]"), i = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  s.forEach((a, u) => {
+  const [c] = i, t = c.querySelector("[data-attribute-type]"), s = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  i.forEach((a, u) => {
     a.querySelectorAll("[data-attribute-type]").forEach((l) => {
       const d = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach((A, h) => {
-        const $ = u * i + h;
-        f(A, d, c, $, e, o);
+      l.querySelectorAll(".attribute-cell").forEach((h, $) => {
+        const S = u * s + $;
+        f(h, d, n, S, e, o);
       });
     });
   });
 }
-function w(r, c, e, o) {
-  r.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    E(n, c, e, o);
+function R(r, n, e, o) {
+  r.querySelectorAll(".ins-recommendation-product-container").forEach((c) => {
+    E(c, n, e, o);
   });
 }
-function R(r, c, e) {
-  const o = r.getAttribute("data-layout") || "grid", s = r.getAttribute("currency-alignment") || "after";
-  o === "list" ? C(r, c, s, e) : w(r, c, s, e);
+function P(r, n, e) {
+  const o = r.getAttribute("data-layout") || "grid", i = r.getAttribute("currency-alignment") || "after";
+  o === "list" ? w(r, n, i, e) : R(r, n, i, e);
 }
-function b(r, c, e) {
-  const o = new RegExp(`${c}\\s*:\\s*(\\d+)\\s*px`, "i"), s = r.match(o);
-  return s ? parseInt(s[1]) : e;
+function b(r, n, e) {
+  const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), i = r.match(o);
+  return i ? parseInt(i[1]) : e;
 }
-function P(r, c) {
+function T(r, n) {
   let e = r.parentElement;
-  for (; e && e !== c; ) {
+  for (; e && e !== n; ) {
     if (e.tagName === "TD") {
       const o = e.getAttribute("width");
       if (o && o.endsWith("%") && parseFloat(o) < 100)
@@ -131,40 +137,40 @@ function P(r, c) {
   }
   return null;
 }
-function T(r) {
-  const c = r.getAttribute("style") || "", e = b(c, "width", 600), o = b(c, "padding", 0) * 2, s = Math.max(0, e - o);
-  s !== 0 && r.querySelectorAll("img.adapt-img").forEach((n) => {
-    if (n.hasAttribute("width"))
+function v(r) {
+  const n = r.getAttribute("style") || "", e = b(n, "width", 600), o = b(n, "padding", 0) * 2, i = Math.max(0, e - o);
+  i !== 0 && r.querySelectorAll("img.adapt-img").forEach((c) => {
+    if (c.hasAttribute("width"))
       return;
-    const t = P(n, r);
+    const t = T(c, r);
     if (!t)
       return;
-    const i = t.getAttribute("width"), a = parseFloat(i), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(s * a / 100), l = Math.max(1, p - u);
-    n.setAttribute("width", String(l));
-    const d = n.getAttribute("style") || "";
+    const s = t.getAttribute("width"), a = parseFloat(s), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(i * a / 100), l = Math.max(1, p - u);
+    c.setAttribute("width", String(l));
+    const d = c.getAttribute("style") || "";
     if (!/\bwidth\s*:\s*\d/i.test(d)) {
       const m = d && !d.trim().endsWith(";") ? "; " : "";
-      n.setAttribute("style", `${d}${m}width: ${l}px`);
+      c.setAttribute("style", `${d}${m}width: ${l}px`);
     }
   });
 }
-function v(r, c) {
+function O(r, n) {
   const e = r.match(/<!DOCTYPE[^>]*>/i);
   return (e ? `${e[0]}
-` : "") + c.documentElement.outerHTML;
+` : "") + n.documentElement.outerHTML;
 }
 function N(r) {
-  const c = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(c, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
+  const n = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(n, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
     return r;
-  const { buildCampaignUrl: s } = g(), n = q();
-  n.recommendationCampaignUrls = {};
-  const { isFeatureEnabled: t } = S(), i = t("liquidSyntax") ? "reco_" : "";
+  const { buildCampaignUrl: i } = _(), c = C();
+  c.recommendationCampaignUrls = {};
+  const { isFeatureEnabled: t } = g(), s = t("liquidSyntax") ? "reco_" : "";
   return o.forEach((u) => {
     var l, d;
     const p = u.getAttribute("recommendation-id");
-    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), s(p), R(u, p, i), T(u));
-  }), v(c, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), i(p), P(u, p, s), v(u));
+  }), O(n, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   y as formatPriceVariable,