@useinsider/guido 3.1.1-beta.a7d73f2 → 3.1.1-beta.b085e4a

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

@@ -61,7 +61,7 @@ const m = {
       value: t()
     })
   )
-}), R = o({
+}), A = o({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
@@ -71,11 +71,13 @@ const m = {
     c(f),
     []
   ),
+  /** Valid custom field attribute names from the partner's categorized fields */
+  customFieldAttributes: e(c(t()), []),
   /** Selected unsubscribe page IDs */
   selectedUnsubscribePages: e(c(p()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
   forceRecreate: e(a(), !1)
-}), A = o({
+}), R = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
@@ -88,7 +90,7 @@ const m = {
   /** Migration date for template compatibility */
   migrationDate: e(p(), 1759696858),
   /** Email header settings */
-  emailHeader: e(A, { senderName: "", subject: "" }),
+  emailHeader: e(R, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
   savedModulesFolderName: e(t(), b.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
@@ -205,7 +207,7 @@ const m = {
       "externalValidation must be a function"
     )
   )
-}), H = o({
+}), F = o({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
@@ -213,7 +215,7 @@ const m = {
   partner: y,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(R, {}),
+  template: e(A, {}),
   /** Editor settings */
   editor: e(C, {}),
   /** UI configuration */
@@ -237,9 +239,9 @@ export {
   E as DefaultBlockTypeSchema,
   f as DynamicContentSchema,
   C as EditorSchema,
-  A as EmailHeaderSchema,
+  R as EmailHeaderSchema,
   I as FeaturesSchema,
-  H as GuidoConfigSchema,
+  F as GuidoConfigSchema,
   h as IdentitySchema,
   m as MessageType,
   y as PartnerSchema,
@@ -247,6 +249,6 @@ export {
   M as RegexRuleSchema,
   N as RemoveRuleSchema,
   L as ReplaceRuleSchema,
-  R as TemplateSchema,
+  A as TemplateSchema,
   T as UISchema
 };

package/dist/composables/useHtmlValidator.js

@@ -9,76 +9,76 @@ import { useHttp as j } from "./useHttp.js";
 import { useToaster as q } from "./useToaster.js";
 import { useTranslations as z } from "./useTranslations.js";
 const K = /recommendation-id="(\d+)"/g;
-function U(i) {
-  return [...i.matchAll(K)].map((u) => u[1]);
+function U(a) {
+  return [...a.matchAll(K)].map((u) => u[1]);
 }
-function Y(i, u) {
-  return u.some((d) => i.startsWith(`${d}_`));
+function Y(a, u) {
+  return u.some((d) => a.startsWith(`${d}_`));
 }
 const ce = () => {
   var y, h;
-  const { showToaster: i } = q(), { post: u } = j(), { config: d } = L(), r = z(), g = $(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === V.transactional, w = async (e) => {
+  const { showToaster: a } = q(), { post: u } = j(), { config: d } = L(), r = z(), g = $(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === V.transactional, b = async (e) => {
     const t = await u(
       "/newsletter/template-library/check-template-html-body",
       { html: X(e) }
     ), { status: n, message: l } = t.data;
-    return n || i({
+    return n || a({
       type: c.Alert,
       message: n === void 0 ? l : r("newsletter.invalid-url-link-for-toaster")
-    }), r(P), l === r(G) && i({
+    }), r(P), l === r(G) && a({
       type: c.Alert,
       message: r("newsletter.already-in-progress")
     }), n;
-  }, b = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), S = (e) => ["if", "endif"].includes(e.toLowerCase()), E = (e, s) => {
+  }, w = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), S = (e) => ["if", "endif"].includes(e.toLowerCase()), E = (e, s) => {
     const t = e.match(/({%(.*?)%})/g);
     let n = !0;
     return t !== null && !p && t.forEach((l) => {
       const o = l.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
       if (o && o.length > 0) {
-        const [a] = o;
-        b(a) && !s.includes(a) && (i({
+        const [i] = o;
+        w(i) && !s.includes(i) && (a({
           type: c.Warning,
           message: r("custom-fields.invalid-custom-fields")
         }), n = !1);
       }
     }), n;
   }, A = async (e, s, t) => {
-    const n = t ? await w(e) : !0;
+    const n = t ? await b(e) : !0;
     return E(e, s) && n;
-  }, I = (e) => e.length > 0 ? !0 : (i({
+  }, I = (e) => e.length > 0 ? !0 : (a({
     type: c.Warning,
     message: r("newsletter.html-content-is-empty")
   }), !1), k = (e) => {
     const s = (e.match(/{/gm) || []).length, t = (e.match(/}/gm) || []).length;
-    return s > t && i({
+    return s > t && a({
       type: c.Warning,
       message: r("custom-fields.missing-closing-braces")
-    }), s < t && i({
+    }), s < t && a({
       type: c.Warning,
       message: r("custom-fields.missing-opening-braces")
     }), s === t;
   }, x = (e) => {
     const s = e.match(/{{\s*(\w+\s+((\w+\|\w+)|(\w+)))\s*}}/gm) === null;
-    return s || i({
+    return s || a({
       type: c.Warning,
       message: r("custom-fields.invalid-custom-fields")
     }), s;
   }, T = (e, s) => {
     const t = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
     if (t && !p) {
-      const n = new Set(s.map((a) => a.toLowerCase())), l = U(e), o = [];
-      if (t.forEach((a) => {
-        const m = a.slice(2, -2).trim().toLowerCase();
+      const n = new Set(s.map((i) => i.toLowerCase())), l = U(e), o = [];
+      if (t.forEach((i) => {
+        const m = i.slice(2, -2).trim().toLowerCase();
         (!n.has(m) || m === "") && !Y(m, l) && o.push(m);
       }), o.length > 0) {
-        const a = `
+        const i = `
                     <ul>
                         ${o.map((m) => `<li>${m}</li>`).join("")}
                     </ul>
                 `;
-        return i({
+        return a({
           type: c.Alert,
-          message: r("custom-fields.invalid-custom-fields") + a
+          message: r("custom-fields.invalid-custom-fields") + i
         }), !1;
       }
     }
@@ -87,12 +87,12 @@ const ce = () => {
     const s = e.match(/{%(.*?)%}/g), t = [];
     let n = !0;
     if (s && s.forEach((l) => {
-      const o = l.match(_), a = l.match(H), m = (o == null ? void 0 : o.join("")) || "";
-      (!o || l !== m) && !a && (i({
+      const o = l.match(_), i = l.match(H), m = (o == null ? void 0 : o.join("")) || "";
+      (!o || l !== m) && !i && (a({
         type: c.Alert,
         message: r("newsletter.display-conditions-invalid-syntax")
       }), n = !1), o && o.forEach((f) => {
-        f.trim() === "=" && (i({
+        f.trim() === "=" && (a({
           type: c.Alert,
           message: r("custom-conditions.wrong-equality-operators")
         }), n = !1);
@@ -102,8 +102,8 @@ const ce = () => {
         });
       });
     }), t.length) {
-      const l = t.filter((a) => a === "if"), o = t.filter((a) => a === "endif");
-      l.length !== o.length && (i({
+      const l = t.filter((i) => i === "if"), o = t.filter((i) => i === "endif");
+      l.length !== o.length && (a({
         type: c.Alert,
         message: r("custom-conditions.missing-if-endif-tag")
       }), n = !1);
@@ -111,45 +111,47 @@ const ce = () => {
     return n;
   }, W = (e) => {
     const s = (e.match(/{% /gm) || []).length, t = (e.match(/ %}/gm) || []).length, n = s === t;
-    return n || i({
+    return n || a({
       type: c.Warning,
       message: r("custom-conditions.no-space-after-braces")
     }), n;
-  }, N = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (i({
+  }, N = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (a({
     type: c.Warning,
     message: r("custom-conditions.no-braces-inside-if-tag")
-  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (i({
+  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (a({
     type: c.Alert,
     message: r("newsletter.fill-all-necessary-fields")
   }), !1) : !0, B = (e) => {
     const s = /src="[^"]*\.(svg|pst)"/gm;
-    return e.match(s) === null ? !0 : (i({
+    return e.match(s) === null ? !0 : (a({
       type: c.Alert,
       message: r("newsletter.invalid-image-type")
     }), !1);
   }, R = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".checkbox-block-v2");
     return Array.from(n).find((o) => {
-      var a;
-      return !((a = o.id) != null && a.trim());
-    }) ? (i({
+      var i;
+      return !((i = o.id) != null && i.trim());
+    }) ? (a({
       type: c.Alert,
       message: r("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
   }, D = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
     return Array.from(n).find((o) => {
-      var a;
-      return !((a = o.id) != null && a.trim());
-    }) ? (i({
+      var i;
+      return !((i = o.id) != null && i.trim());
+    }) ? (a({
       type: c.Alert,
       message: r("unsubscribe-templates.select-radio-button-groups")
     }), !1) : !0;
   };
   return { validateHtml: async (e, s, t = !1) => {
+    var o, i;
     const n = [
-      ...s.map((o) => o.value),
-      ...M
+      ...s.map((m) => m.value),
+      ...M,
+      ...((i = (o = d.value) == null ? void 0 : o.template) == null ? void 0 : i.customFieldAttributes) ?? []
     ];
     return await A(e, n, t) && I(e) && k(e) && x(e) && T(e, n) && F(e) && W(e) && N(e) && O() && B(e) && R(e) && D(e);
   } };

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,18 +1,18 @@
-import { useRecommendation as f } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as P, REGEX as m, VerticalOrientation as g, CSS as e, ATTRIBUTES as a, CONDITIONS as A, HTML as h } from "../../enums/recommendation.js";
-import { prepareRecommendationBlocks as D } from "./utils/recommendationCompilerUtils.js";
-const G = [
+import { useRecommendation as N } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
+import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
+const w = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (s) => {
-      let t = s;
-      return Object.entries(P).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, o]) => {
-          t = t.replaceAll(o, `{{${n}}}`);
+    processor: (i) => {
+      let e = i;
+      return Object.entries(C).forEach(([, p]) => {
+        Object.entries(p).forEach(([c, n]) => {
+          e = e.replaceAll(n, `{{${c}}}`);
         });
-      }), t;
+      }), e;
     },
     priority: 50
   },
@@ -29,21 +29,21 @@ const G = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (s) => {
-      const { calculateCardWidth: t, getRecommendationCampaignData: l } = f();
-      let n = s;
-      const o = n.match(m.ID);
-      if (o) {
-        const d = [];
-        if (o.forEach((c) => {
-          const E = /recommendation-id="(.*?)"/i.exec(c), I = E ? E[1].trim() : "", p = l(I);
-          p.textTrimming && p.orientation === g && d.push(t(p));
-        }), d.length) {
-          const c = `width:${Math.min(...d)}px!important;`;
-          n = n.replace(e.REGULAR_NAME_HEIGHT, `${e.TRIMMED_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.REGULAR_NAME_CONTAINER_HEIGHT, e.TRIMMED_NAME_CONTAINER_CSS).replace(e.RESPONSIVE_NAME_SIZE, `${e.RESPONSIVE_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.RESPONSIVE_NAME_CONTAINER_HEIGHT, e.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+    processor: (i) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
+      let c = i;
+      const n = c.match(T.ID);
+      if (n) {
+        const a = [];
+        if (n.forEach((s) => {
+          const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
+          A.textTrimming && A.orientation === M && a.push(e(A));
+        }), a.length) {
+          const s = `width:${Math.min(...a)}px!important;`;
+          c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return n;
+      return c;
     },
     priority: 52
   },
@@ -51,39 +51,153 @@ const G = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (s) => D(s),
+    processor: (i) => x(i),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (s) => {
-      let t = s;
-      const l = t.match(m.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = f();
-      return l !== null && l.forEach((o) => {
-        const d = o.match(m.CUSTOM_FIELD);
-        if (!d)
+    processor: (i) => {
+      let e = i;
+      const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
+      return p !== null && p.forEach((n) => {
+        const a = n.match(T.CUSTOM_FIELD);
+        if (!a)
           return;
-        const [c] = d, E = c.match(m.CUSTOM_FIELD_INDEXES_PART), I = c.match(m.CUSTOM_FIELD_NAME_PART), p = o.match(m.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!E || !I || !p)
+        const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!d || !_ || !A)
           return;
-        const [u] = E, [R] = I, [_] = p, T = R.substring(1, R.length - 2), S = _.match(m.COMPOSITION) !== null;
-        let i = c;
-        if (S) {
-          const $ = u.substring(2, u.length - 3), r = n($);
-          T === a.OMNIBUS_PRICE && (r.priceBeforeTextValue && (i = `${r.priceBeforeTextValue}${i}`), r.priceAfterTextValue && (i = `${i}${r.priceAfterTextValue}`)), T === a.OMNIBUS_DISCOUNT && (r.discountBeforeTextValue && (i = `${r.discountBeforeTextValue}${i}`), r.discountAfterTextValue && (i = `${i}${r.discountAfterTextValue}`));
+        const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
+        let t = s;
+        if (r) {
+          const b = I.substring(2, I.length - 3), l = c(b);
+          o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
         }
-        const N = u.substring(2);
-        let M = "";
-        T in A.IF && (M = A.IF[T].replaceAll(`{${a.DISCOUNT}}`, `${N}${a.DISCOUNT}`).replaceAll(`{${a.OMNIBUS_DISCOUNT}}`, `${N}${a.OMNIBUS_DISCOUNT}`).replaceAll(`{${a.OMNIBUS_PRICE}}`, `${N}${a.OMNIBUS_PRICE}`));
-        const O = `${_}${i}${h.PARAGRAPH_END_TAG}`, C = `${M}${S ? O : o}${A.ELSE}${_}${h.PARAGRAPH_END_TAG}${A.END_IF}`;
-        t = t.replace(o, C);
-      }), t;
+        const u = I.substring(2);
+        let f = "";
+        o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
+        const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
+        e = e.replace(n, y);
+      }), e;
     },
     priority: 53
+  },
+  {
+    id: "strip-empty-omnibus-spans",
+    description: "Remove empty omnibus text-before and text-after span elements",
+    type: "regex",
+    pattern: '<span class="omnibus-text-(?:before|after)">\\s*</span>',
+    replacement: "",
+    flags: "g",
+    priority: 54
+  },
+  {
+    id: "strip-recommendation-editor-attributes",
+    description: "Strip editor-only attributes from compiled recommendation output",
+    type: "regex",
+    // eslint-disable-next-line @stylistic/max-len
+    pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
+    replacement: "",
+    flags: "g",
+    priority: 55
+  },
+  {
+    id: "strip-unused-recommendation-classes",
+    description: "Remove CSS classes not referenced by any style rule from recommendation elements",
+    type: "custom",
+    processor: (i) => {
+      let e = i.replace(
+        / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
+        ""
+      );
+      return e = e.replaceAll("es-button buy-button", "es-button"), e = e.replaceAll("ins-recommendation-product-container ", ""), e;
+    },
+    priority: 56
+  },
+  {
+    id: "remove-empty-mobile-layout-artifacts",
+    description: "Remove empty mobile container rows and unused mobile layout CSS",
+    type: "custom",
+    processor: (i) => {
+      let e = i;
+      return e = e.replace(
+        /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
+        ""
+      ), /class="[^"]*ins-recommendation-mobile-container/.test(e) || (e = e.replace(
+        /\.ins-recommendation-mobile-container\s*\{\s*display\s*:\s*none\s*;?\s*\}/g,
+        ""
+      ), e = e.replace(
+        /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
+        (p, c) => {
+          const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return n.every((d) => a.test(d)) ? "" : p;
+        }
+      )), e;
+    },
+    priority: 57
+  },
+  {
+    id: "deduplicate-inline-styles",
+    description: "Replace repeated inline styles with CSS class references within recommendation blocks",
+    type: "custom",
+    processor: (i) => {
+      const e = i.replace(
+        /<a\b[^>]*\bes-button\b[^>]*>/g,
+        (o) => o.replace(
+          /([;"]color:)([^;"]+)/g,
+          (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
+        )
+      ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
+      let a = p.exec(e);
+      for (; a !== null; ) {
+        let o = c.exec(a[1]);
+        for (; o !== null; ) {
+          const [, r] = o;
+          n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
+        }
+        c.lastIndex = 0, a = p.exec(e);
+      }
+      const s = /* @__PURE__ */ new Map(), d = [];
+      let _ = 0;
+      if (n.forEach((o, r) => {
+        if (o >= 6) {
+          const t = `rc${_++}`;
+          s.set(r, t), d.push(`.${t}{${r}}`);
+        }
+      }), s.size === 0) {
+        let o = e;
+        return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
+      }
+      const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
+      s.forEach((o, r) => {
+        const t = A(r);
+        S.set(r, {
+          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
+          caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
+        });
+      });
+      let m = e.replace("</style>", `${d.join("")}</style>`);
+      return m = m.replace(
+        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
+        (o, r) => {
+          let t = r;
+          return s.forEach((u, f) => {
+            const g = S.get(f);
+            t = t.replace(
+              g.caseA,
+              (y, b, l) => I(b, u) + l
+            ), t = t.replace(
+              g.caseB,
+              (y, b, l) => b + I(l, u)
+            ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
+          }), t;
+        }
+      ), m = m.replaceAll("<!--REC_START-->", ""), m = m.replaceAll("<!--REC_END-->", ""), m;
+    },
+    priority: 58
   }
 ];
 export {
-  G as recommendationCompilerRules
+  w as recommendationCompilerRules
 };

package/dist/config/compiler/unsubscribeCompilerRules.js

@@ -1,41 +1,41 @@
-import { usePartner as N } from "../../composables/usePartner.js";
-import { LINK_REGEXES as l, LINK_TYPES as S, INSIDER_ID as R, URLS as _ } from "../../enums/unsubscribe.js";
-import { parsePageList as U } from "../../extensions/Blocks/Unsubscribe/utils/utils.js";
-import { useConfigStore as B } from "../../stores/config.js";
-import { useDynamicContentStore as y } from "../../stores/dynamic-content.js";
-import { useUnsubscribeStore as L } from "../../stores/unsubscribe.js";
-const D = [
+import { usePartner as y } from "../../composables/usePartner.js";
+import { LINK_REGEXES as p, LINK_TYPES as S, INSIDER_ID as m, URLS as R } from "../../enums/unsubscribe.js";
+import { parsePageList as I } from "../../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useConfigStore as N } from "../../stores/config.js";
+import { useDynamicContentStore as U } from "../../stores/dynamic-content.js";
+import { useUnsubscribeStore as C } from "../../stores/unsubscribe.js";
+const G = [
   {
     id: "add-unsubscribe-link-values",
     description: "Adding unsubscribe link values",
     type: "custom",
     processor: (t) => {
-      const { getPartnerName: i } = N(), c = B(), n = y(), u = L(), a = c.variationId;
+      const { getPartnerName: i } = y(), o = N(), s = U(), d = C(), a = o.variationId;
       if (!a)
         return t;
       let e = t;
-      const r = `/${i()}/email/${a}?user={{iid}}`;
-      return new DOMParser().parseFromString(e, "text/html").querySelectorAll(".unsubscribe-block-v2[data-unsubscribe-page-list]").forEach((p) => {
-        var g;
-        const m = p.getAttribute("data-unsubscribe-page-list");
-        if (!m)
+      const r = `/${i()}/email/${a}?user={{iid}}`, E = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".unsubscribe-block-v2[data-unsubscribe-page-list]");
+      let c = !1, l = !1;
+      return E.forEach((f) => {
+        var b;
+        const u = f.getAttribute("data-unsubscribe-page-list");
+        if (!u)
           return;
-        const I = U(m), d = ((g = u.templates) == null ? void 0 : g.filter(
-          (o) => I.includes(o.id)
-        )) ?? [], E = d.some((o) => o.type === S.UNSUBSCRIBE_LINK_TYPE), b = d.some((o) => o.type === S.PREFERENCES_LINK_TYPE), f = p.outerHTML;
-        let s = f;
-        (E || b) && n.selectedDynamicContentList.push({
-          text: R,
-          value: R,
-          fallback: ""
-        }), E && (s = s.replace(
-          l.GLOBAL_UNSUBSCRIBE_LINK_REGEX,
-          _.UNSUBSCRIBE_URL + r
-        )), b && (s = s.replace(
-          l.PREFERENCES_UNSUBSCRIBE_LINK_REGEX,
-          _.PREFERENCES_URL + r
-        )), s = s.replace(l.UNSUBSCRIBE_LINK_REGEX, ""), e = e.replace(f, s);
-      }), e;
+        const _ = I(u), g = ((b = d.templates) == null ? void 0 : b.filter(
+          (n) => _.includes(n.id)
+        )) ?? [];
+        c = c || g.some((n) => n.type === S.UNSUBSCRIBE_LINK_TYPE), l = l || g.some((n) => n.type === S.PREFERENCES_LINK_TYPE);
+      }), (c || l) && (s.selectedDynamicContentList.some((u) => u.value === m) || s.selectedDynamicContentList.push({
+        text: m,
+        value: m,
+        fallback: ""
+      })), c && (e = e.replace(
+        p.GLOBAL_UNSUBSCRIBE_LINK_REGEX,
+        R.UNSUBSCRIBE_URL + r
+      )), l && (e = e.replace(
+        p.PREFERENCES_UNSUBSCRIBE_LINK_REGEX,
+        R.PREFERENCES_URL + r
+      )), E.length && (e = e.replace(p.UNSUBSCRIBE_LINK_REGEX, "")), e;
     },
     priority: 60
   },
@@ -43,7 +43,7 @@ const D = [
     id: "remove-data-ogsb-button-styles",
     description: "Removing styles like [data-ogsb] .es-button.es-button-123 { background: red; }",
     type: "regex",
-    pattern: l.DATA_OGSB_BUTTON_CSS_REGEX,
+    pattern: p.DATA_OGSB_BUTTON_CSS_REGEX,
     replacement: "",
     flags: "g",
     priority: 61
@@ -61,16 +61,16 @@ const D = [
     type: "custom",
     processor: (t) => {
       let i = t;
-      const c = i.match(/<a[^>]+>(.*?)<\/a>/gm);
-      return c && c.forEach((n) => {
-        if (n.includes("insEmail=1"))
+      const o = i.match(/<a[^>]+>(.*?)<\/a>/gm);
+      return o && o.forEach((s) => {
+        if (s.includes("insEmail=1"))
           return;
-        if (n.match(/<a\s+(?:[^>]*?\s+)?href=(["'`”])(.*?)\1\s+(?:[^>]*?\s+)?universal=(["'`”])true\3/gm)) {
-          const a = n.replace(/href=(["'`”])(.*?)\1/gm, (e) => {
+        if (s.match(/<a\s+(?:[^>]*?\s+)?href=(["'`”])(.*?)\1\s+(?:[^>]*?\s+)?universal=(["'`”])true\3/gm)) {
+          const a = s.replace(/href=(["'`”])(.*?)\1/gm, (e) => {
             const r = e.slice(6, e.length - 1).trim();
             return e.includes("?") || e.includes("#") ? r.slice(-1) === "&" ? e.replace(r, `${r}insEmail=1`) : e.replace(r, `${r}&insEmail=1`) : e.replace(r, `${r}?insEmail=1`);
           });
-          i = i.replace(n, a);
+          i = i.replace(s, a);
         }
       }), i;
     },
@@ -78,5 +78,5 @@ const D = [
   }
 ];
 export {
-  D as unsubscribeCompilerRules
+  G as unsubscribeCompilerRules
 };

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

@@ -1,130 +1,131 @@
-import { useRecommendation as $ } from "../../../composables/useRecommendation.js";
-function b(e, u, r, o) {
-  const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
-  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
+import { useRecommendation as S } from "../../../composables/useRecommendation.js";
+function b(e, n, r, c) {
+  const u = `{{${e}_${n}_${r}}}`, t = `{{${e}_${n}_currency}}`;
+  return c === "before" ? `${t} ${u}` : `${u} ${t}`;
 }
-function p(e, u, r, o, n) {
-  switch (u) {
+function p(e, n, r, c, u) {
+  switch (n) {
     case "productImage": {
       const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${r}_${o}_name}}`));
-      const c = e.querySelector("a");
-      c && c.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && (t.setAttribute("src", `{{${r}_${c}_image_url}}`), t.setAttribute("alt", `{{${r}_${c}_name}}`));
+      const o = e.querySelector("a");
+      o && o.setAttribute("href", `{{${r}_${c}_url}}`);
       break;
     }
     case "productName": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = `{{${r}_${o}_name}}`;
+        const o = t.querySelector("strong") || t;
+        o.textContent = `{{${r}_${c}_name}}`;
       }
       break;
     }
     case "productPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", n);
+        const o = t.querySelector("strong") || t;
+        o.textContent = b(r, c, "price", u);
       }
       break;
     }
     case "productOldPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(
+        const o = t.querySelector("strong") || t;
+        o.textContent = b(
           r,
-          o,
+          c,
           "original_price",
-          n
+          u
         ), t.setAttribute("product-attr", "discount");
       }
       break;
     }
     case "productButton": {
       const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${r}_${c}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = e.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_price}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${r}_${c}_omnibus_price}}`;
+        const o = t.closest("p");
+        o && (o.setAttribute("product-attr", "omnibus_price"), o.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
       const t = e.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_discount}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${r}_${c}_omnibus_discount}}`;
+        const o = t.closest("p");
+        o && (o.setAttribute("product-attr", "omnibus_discount"), o.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), s = t.querySelector("p");
+        const o = t.getAttribute("product-attr"), s = t.querySelector("p");
         if (s) {
           const i = s.querySelector("strong") || s;
-          i.textContent = `{{${r}_${o}_${c}}}`;
+          i.textContent = `{{${r}_${c}_${o}}}`;
         }
       }
       break;
     }
   }
 }
-function S(e, u, r) {
-  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((s) => {
-      const i = s.getAttribute("data-attribute-type") || "", l = s.querySelectorAll(".attribute-cell");
-      l.length > 0 ? l.forEach((a) => {
-        p(a, i, u, t, r);
-      }) : p(s, i, u, t, r);
+function _(e, n, r) {
+  e.querySelectorAll(".recommendation-product-row").forEach((u, t) => {
+    u.querySelectorAll("[data-attribute-type]").forEach((s) => {
+      const i = s.getAttribute("data-attribute-type") || "", a = s.querySelectorAll(".attribute-cell");
+      a.length > 0 ? a.forEach((l) => {
+        p(l, i, n, t, r);
+      }) : p(s, i, n, t, r);
     });
   });
 }
-function _(e, u, r) {
-  const o = e.querySelectorAll(".recommendation-product-row");
-  if (!o.length)
+function $(e, n, r) {
+  const c = e.querySelectorAll(".recommendation-product-row");
+  if (!c.length)
     return;
-  const [n] = o, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  o.forEach((s, i) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const f = a.getAttribute("data-attribute-type") || "";
-      a.querySelectorAll(".attribute-cell").forEach((y, A) => {
-        const m = i * c + A;
-        p(y, f, u, m, r);
+  const [u] = c, t = u.querySelector("[data-attribute-type]"), o = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  c.forEach((s, i) => {
+    s.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const f = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach((y, m) => {
+        const A = i * o + m;
+        p(y, f, n, A, r);
       });
     });
   });
 }
-function q(e, u, r) {
-  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    _(n, u, r);
+function d(e, n, r) {
+  e.querySelectorAll(".ins-recommendation-product-container").forEach((u) => {
+    $(u, n, r);
   });
 }
-function d(e, u) {
-  const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? S(e, u, o) : q(e, u, o);
+function q(e, n) {
+  const r = e.getAttribute("data-layout") || "grid", c = e.getAttribute("currency-alignment") || "after";
+  r === "list" ? _(e, n, c) : d(e, n, c);
 }
-function g(e, u) {
+function g(e, n) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
-` : "") + u.documentElement.outerHTML;
+` : "") + n.documentElement.outerHTML;
 }
 function E(e) {
-  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
-  if (!o.length)
+  const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(n, "text/html"), c = r.querySelectorAll(".recommendation-block-v2");
+  if (!c.length)
     return e;
-  const { buildCampaignUrl: n } = $();
-  return o.forEach((c) => {
-    const s = c.getAttribute("recommendation-id");
-    s && (n(s), d(c, s));
-  }), g(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  const { buildCampaignUrl: u } = S();
+  return c.forEach((o) => {
+    var i, a;
+    const s = o.getAttribute("recommendation-id");
+    s && ((i = o.parentNode) == null || i.insertBefore(r.createComment("REC_START"), o), (a = o.parentNode) == null || a.insertBefore(r.createComment("REC_END"), o.nextSibling), u(s), q(o, s));
+  }), g(n, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   b as formatPriceVariable,

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

@@ -75,7 +75,8 @@ const e = {
   "The image with the invalid link cannot be saved to the image gallery": "Enter a valid image link to continue.",
   "The data source link is unavailable. Please, make sure there is an access to the data source.": "Enter an accessible Data Source Link to contiue.",
   "The file should not exceed the maximum resolution of {maxImageResolution}px.": "Upload files up to 1024x512 pixels to continue.",
-  "The option is disabled because was overridden in the Code editor": "The option is disabled because it was overridden in the Code Editor."
+  "The option is disabled because was overridden in the Code editor": "The option is disabled because it was overridden in the Code Editor.",
+  "Dropdown with a list of available data services, preliminarily created in the Data section → Services tab of the Account.": "Service for Data Collection lets you enter a form submission URL for the recipients to submit."
 };
 export {
   e as default

package/dist/src/@types/config/schemas.d.ts

@@ -95,6 +95,8 @@ export declare const TemplateSchema: v.ObjectSchema<{
             readonly value: v.StringSchema<undefined>;
         }, undefined>, undefined>;
     }, undefined>, undefined>, readonly []>;
+    /** Valid custom field attribute names from the partner's categorized fields */
+    readonly customFieldAttributes: v.OptionalSchema<v.ArraySchema<v.StringSchema<undefined>, undefined>, readonly []>;
     /** Selected unsubscribe page IDs */
     readonly selectedUnsubscribePages: v.OptionalSchema<v.ArraySchema<v.NumberSchema<undefined>, undefined>, readonly []>;
     /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
@@ -422,6 +424,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
                 readonly value: v.StringSchema<undefined>;
             }, undefined>, undefined>;
         }, undefined>, undefined>, readonly []>;
+        /** Valid custom field attribute names from the partner's categorized fields */
+        readonly customFieldAttributes: v.OptionalSchema<v.ArraySchema<v.StringSchema<undefined>, undefined>, readonly []>;
         /** Selected unsubscribe page IDs */
         readonly selectedUnsubscribePages: v.OptionalSchema<v.ArraySchema<v.NumberSchema<undefined>, undefined>, readonly []>;
         /** Force recreate template in Stripo storage (use true when updating externally modified templates) */

package/dist/src/composables/useConfig.d.ts

@@ -30,6 +30,7 @@ export declare const useConfig: () => {
                     value: string;
                 } | undefined;
             }[];
+            customFieldAttributes: string[];
             selectedUnsubscribePages: number[];
             forceRecreate: boolean;
         };
@@ -121,6 +122,7 @@ export declare const useConfig: () => {
                 value: string;
             } | undefined;
         }[];
+        customFieldAttributes: string[];
         selectedUnsubscribePages: number[];
         forceRecreate: boolean;
     } | null>;

package/dist/src/stores/config.d.ts

@@ -35,6 +35,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -132,6 +133,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -229,6 +231,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -326,6 +329,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -423,6 +427,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -520,6 +525,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -617,6 +623,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -714,6 +721,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -811,6 +819,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -908,6 +917,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1005,6 +1015,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1102,6 +1113,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1199,6 +1211,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1296,6 +1309,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1393,6 +1407,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1490,6 +1505,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1587,6 +1603,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };
@@ -1684,6 +1701,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                         value: string;
                     } | undefined;
                 }[];
+                customFieldAttributes: string[];
                 selectedUnsubscribePages: number[];
                 forceRecreate: boolean;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.1.1-beta.a7d73f2",
+  "version": "3.1.1-beta.b085e4a",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",