@useinsider/guido 3.17.0-beta.77567eb → 3.17.0-beta.7cd51e2

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/useHttp.js

@@ -1,74 +1,80 @@
-import { getCsrfToken as H } from "../utils/genericUtil.js";
-import { ref as p, computed as T } from "vue";
-const k = (b = {}) => {
-  const h = p(!1), a = p(null), u = p(null), g = T(() => h.value), y = T(() => a.value !== null), v = {
+import { getCsrfToken as S } from "../utils/genericUtil.js";
+import { ref as p, computed as v } from "vue";
+const F = (E = {}) => {
+  const h = p(!1), a = p(null), u = p(null), b = v(() => h.value), y = v(() => a.value !== null), T = {
     baseURL: "",
     timeout: 1e4,
     retry: 0,
     retryDelay: 1e3,
     headers: {
       "Content-Type": "application/json",
-      "X-CSRF-TOKEN": H()
+      "X-CSRF-TOKEN": S()
     },
-    ...b
-  }, w = (e, s) => {
-    if (e.startsWith("http://") || e.startsWith("https://"))
-      return e;
-    const t = s || v.baseURL || "";
-    return t.endsWith("/") && e.startsWith("/") ? `${t}${e.slice(1)}` : t.endsWith("/") || e.startsWith("/") ? `${t}${e}` : `${t}/${e}`;
-  }, P = (e) => new Promise((s, t) => {
+    ...E
+  }, g = (t, r) => {
+    if (t.startsWith("http://") || t.startsWith("https://"))
+      return t;
+    const e = r || T.baseURL || "";
+    return e.endsWith("/") && t.startsWith("/") ? `${e}${t.slice(1)}` : e.endsWith("/") || t.startsWith("/") ? `${e}${t}` : `${e}/${t}`;
+  }, P = (t) => new Promise((r, e) => {
     setTimeout(() => {
-      t(new Error("Request timeout"));
-    }, e);
-  }), x = (e) => new Promise((s) => {
-    setTimeout(s, e);
-  }), i = async (e, s, t, D = {}) => {
+      e(new Error("Request timeout"));
+    }, t);
+  }), x = (t) => new Promise((r) => {
+    setTimeout(r, t);
+  }), i = async (t, r, e, D = {}) => {
     a.value = null, h.value = !0, u.value = new AbortController();
-    const n = { ...v, ...D }, L = w(s, n.baseURL), c = {
-      method: e,
+    const n = { ...T, ...D }, L = g(r, n.baseURL), c = {
+      method: t,
       headers: { ...n.headers },
       signal: u.value.signal,
       ...n
     };
-    t && ["POST", "PUT", "PATCH"].includes(e) && (t instanceof FormData ? (delete c.headers["Content-Type"], c.body = t) : c.body = JSON.stringify(t));
-    const E = async (m = 0) => {
+    e && ["POST", "PUT", "PATCH"].includes(t) && (e instanceof FormData ? (delete c.headers["Content-Type"], c.body = e) : c.body = JSON.stringify(e));
+    const w = async (m = 0) => {
       try {
         const o = [fetch(L, c)];
         n.timeout && o.push(P(n.timeout));
-        const r = await Promise.race(o);
-        if (!r.ok) {
-          const O = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(O);
-          throw d.status = r.status, d.statusText = r.statusText, d.response = r, d;
+        const s = await Promise.race(o);
+        if (!s.ok) {
+          const O = `HTTP Error: ${s.status} ${s.statusText}`, f = new Error(O);
+          if (f.status = s.status, f.statusText = s.statusText, f.response = s, [401, 403, 419].includes(s.status)) {
+            const H = await s.clone().text().catch(() => "");
+            window.dispatchEvent(new CustomEvent("insider:http-auth-error", {
+              detail: { status: s.status, body: H }
+            }));
+          }
+          throw f;
         }
-        let f;
-        const l = r.headers.get("content-type");
-        return l != null && l.includes("application/json") ? f = await r.json() : l != null && l.includes("text/") ? f = await r.text() : f = await r.blob(), {
-          data: f,
-          status: r.status,
-          statusText: r.statusText,
-          headers: r.headers
+        let d;
+        const l = s.headers.get("content-type");
+        return l != null && l.includes("application/json") ? d = await s.json() : l != null && l.includes("text/") ? d = await s.text() : d = await s.blob(), {
+          data: d,
+          status: s.status,
+          statusText: s.statusText,
+          headers: s.headers
         };
       } catch (o) {
-        const r = o instanceof Error && o.name === "AbortError";
-        if (m < (n.retry || 0) && !r)
-          return await x(n.retryDelay || 1e3), E(m + 1);
+        const s = o instanceof Error && o.name === "AbortError";
+        if (m < (n.retry || 0) && !s)
+          return await x(n.retryDelay || 1e3), w(m + 1);
         throw o instanceof Error ? o.name === "AbortError" ? a.value = { message: "Request was cancelled" } : a.value = { message: o.message } : a.value = o, o;
       }
     };
     try {
-      return await E();
+      return await w();
     } finally {
       h.value = !1, u.value = null;
     }
-  }, C = (e, s) => i("GET", e, void 0, s), $ = (e, s, t) => i("POST", e, s, t), R = (e, s, t) => i("PUT", e, s, t), U = (e, s, t) => i("PATCH", e, s, t), A = (e, s) => i("DELETE", e, void 0, s), W = (e) => {
-    u.value && u.value.abort(e);
+  }, C = (t, r) => i("GET", t, void 0, r), $ = (t, r, e) => i("POST", t, r, e), R = (t, r, e) => i("PUT", t, r, e), U = (t, r, e) => i("PATCH", t, r, e), A = (t, r) => i("DELETE", t, void 0, r), W = (t) => {
+    u.value && u.value.abort(t);
   }, q = () => {
     a.value = null;
   };
   return {
     // State
-    loading: g,
-    error: T(() => a.value),
+    loading: b,
+    error: v(() => a.value),
     hasError: y,
     // Methods
     request: i,
@@ -82,5 +88,5 @@ const k = (b = {}) => {
   };
 };
 export {
-  k as useHttp
+  F as useHttp
 };

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 (e.strategyId && n.isFeatureEnabled("reusableRecommendationStrategy"))
+      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: 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;
+  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;
     if (document.getElementById("UiEditorScript")) {
       i();
       return;
     }
-    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");
+    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");
     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: 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;
+    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);
     await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: s,
-        html: l,
+        html: d,
         css: D,
         forceRecreate: U,
         locale: "en",
@@ -80,16 +80,16 @@ const Ce = () => {
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const d = await M();
-            t(d);
-          } catch (d) {
-            p(d, "Failed to refresh token");
+            const l = await B();
+            t(l);
+          } catch (l) {
+            p(l, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            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(() => {
+            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(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
@@ -108,7 +108,7 @@ const Ce = () => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: B,
+        onEvent: v,
         onModuleAdd: F,
         notifications: V(),
         ignoreClickOutsideSelectors: [
@@ -126,8 +126,8 @@ const Ce = () => {
     try {
       await f();
       const [r, e] = await Promise.all([
-        T(),
-        v()
+        M(),
+        T()
       ]);
       a.syncModulesEnabled = e, await _(i, s, o, r, e);
     } catch {

package/dist/config/i18n/en/labels.json.js

@@ -1,7 +1,7 @@
 const e = "Items", o = "Default", t = "Custom", s = {
   "Global Styles & Layout": "Global Styles and Layout",
   "Structures & Modules": "Structures and Modules",
-  "Recommendation Block": "Recommendation",
+  "Recommendation Block": "Recommendation Block",
   Items: e,
   "This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.": "This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.",
   "This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.": "This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.",

package/dist/config/migrator/index.js

@@ -2,14 +2,15 @@ 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 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;
+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;
 };
 export {
-  x as migrate
+  C 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_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) {
+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) {
   const t = r.variable ?? "";
   switch (t) {
     case "p_recommendation_title":
       return { key: C, kind: "title" };
     case "p_image":
-      return { key: y, kind: "image" };
+      return { key: O, kind: "image" };
     case "p_name":
-      return { key: h, kind: "text" };
+      return { key: E, kind: "text" };
     case "p_price":
-      return { key: R, kind: "text" };
+      return { key: h, 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: A, kind: "text" };
+      return { key: R, kind: "text" };
     case "p_button":
-      return { key: k, kind: "button" };
+      return { key: A, kind: "button" };
     default:
       if (r.variableType === "p_attribute" || t.startsWith("p_attribute_")) {
-        const o = r.value ?? "", s = o.startsWith(a) ? o.slice(a.length) : o;
+        const o = r.value ?? "", s = o.startsWith(T) ? o.slice(T.length) : o;
         if (!s)
           return null;
-        const e = o || `${a}${s}`;
+        const e = o || `${T}${s}`;
         return {
-          key: `${l}${e}`,
+          key: `${k}${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 S(r) {
+function V(r) {
   const t = {
     composition: [],
     visibility: { ...I },
@@ -54,10 +54,10 @@ function S(r) {
     return t.composition = [...p], t;
   const o = [];
   r.forEach((e, i) => {
-    const n = N(e);
+    const n = P(e);
     if (n) {
       if (n.kind === "title") {
-        t.titleVariable = e;
+        t.titleVariable = e, t.visibility[l] = e.hidden !== !0;
         return;
       }
       o.push({
@@ -82,20 +82,20 @@ function S(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] = b(c.theme);
+        s[i] = N(c.theme);
         break;
       case "button":
-        s[i] = O(c.theme);
+        s[i] = y(c.theme);
         break;
       case "text":
       case "custom": {
-        const T = E(c.theme);
-        s[i] = T, T.textTrimming && (t.anyTextTrimming = !0);
+        const a = b(c.theme);
+        s[i] = a, a.textTrimming && (t.anyTextTrimming = !0);
         break;
       }
     }
   }), t.perElementStyles = s, t;
 }
 export {
-  S as mapComposition
+  V as mapComposition
 };

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

@@ -1,49 +1,54 @@
 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 l(t) {
-  var o;
-  const r = t.querySelector(".ext-recommendation-title");
-  if (!r)
+function A(t) {
+  var i;
+  const e = t.querySelector(".ext-recommendation-title");
+  if (!e)
     return a;
-  const e = (o = r.textContent) == null ? void 0 : o.trim();
-  return e && e.length > 0 ? e : a;
+  const r = (i = e.textContent) == null ? void 0 : i.trim();
+  return r && r.length > 0 ? r : a;
 }
 function m(t) {
-  const r = [
+  const e = t.querySelector(".ext-recommendation-title");
+  return e ? !/display\s*:\s*none/i.test(e.getAttribute("style") ?? "") : !1;
+}
+function d(t) {
+  const e = [
     t,
     ...Array.from(t.querySelectorAll(".product-card, .ext-recommendation-card"))
   ];
-  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;
+  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;
 }
 function C(t) {
-  const r = t.getAttribute(n.CURRENCY);
-  if (!r)
+  const e = t.getAttribute(n.CURRENCY);
+  if (!e)
     return;
-  const e = t.getAttribute(n.SYMBOL);
+  const r = t.getAttribute(n.SYMBOL);
   return {
-    value: r,
+    value: e,
     // An empty `currency-symbol` is omitted so `mapCurrency` falls back to
     // the currency code as the symbol.
-    ...e ? { symbol: e } : {},
+    ...r ? { symbol: r } : {},
     alignment: t.getAttribute(n.ALIGNMENT) ?? "",
     decimalCount: t.getAttribute(n.DECIMAL_COUNT) ?? "",
     decimalSeparator: t.getAttribute(n.DECIMAL_SEPARATOR) ?? "",
     thousandSeparator: t.getAttribute(n.THOUSAND_SEPARATOR) ?? ""
   };
 }
-function d(t) {
+function g(t) {
   return t.classList.contains(c);
 }
 export {
-  m as extractCardBgColor,
+  d as extractCardBgColor,
   C as extractCurrencyFromBlock,
-  l as extractTitleText,
-  d as isPartnerManagedBlock
+  A as extractTitleText,
+  m as hasVisibleTitle,
+  g as isPartnerManagedBlock
 };