@useinsider/guido 3.2.0-beta.cb38cc7 → 3.2.0-beta.ccaf9f5

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = { stripo: { version: "2.60.0" } }, s = {
+const o = { stripo: { version: "2.62.0" } }, s = {
   guido: o
 };
 export {

package/dist/services/templateLibraryApi.js

@@ -1,7 +1,7 @@
 import { useConfig as w } from "../composables/useConfig.js";
 import { useHttp as b } from "../composables/useHttp.js";
-import { useToaster as h } from "../composables/useToaster.js";
-import { useTranslations as C } from "../composables/useTranslations.js";
+import { useToaster as C } from "../composables/useToaster.js";
+import { useTranslations as h } from "../composables/useTranslations.js";
 import { useLiquidValidator as S } from "../composables/validators/useLiquidValidator.js";
 import { EditorType as v } from "../enums/defaults.js";
 import { useRecommendationExtensionStore as N } from "../extensions/Blocks/Recommendation/store/recommendation.js";
@@ -9,7 +9,7 @@ import { useSaveAsTemplateStore as x } from "../stores/save-as-template.js";
 import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
 import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
 const $ = () => {
-  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = h(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = C();
+  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = h();
   return {
     getCategories: async () => {
       try {
@@ -62,7 +62,8 @@ const $ = () => {
           stripoConfig: r({
             editor: "stripo",
             html: a.rawHtml,
-            css: a.css
+            css: a.css,
+            dynamicContentList: a.dynamicContentList
           })
         }, { data: { type: T } } = await m(
           "/newsletter/template-library/create-template",

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

@@ -0,0 +1,17 @@
+/**
+ * Bridges cortex-fe's chat store to Guido's Stripo editor.
+ *
+ * cortex-fe is a Module Federation MFE that registers `defineStore('chat', …)`
+ * on the host's shared (singleton) Pinia. Guido — bundled inside MFE consumers
+ * that also share that pinia — reads the same store at runtime via
+ * `getActivePinia()._s.get('chat')`. No build-time dep on cortex-fe.
+ *
+ * On every `email_template` blueprint emitted by the agent stream:
+ *   - first sighting of a blueprintId → applyTemplate immediately,
+ *   - subsequent updates with new html → applyTemplateDebounced (250 ms trailing),
+ *   - identical html is ignored so a streamed text chunk doesn't re-trigger Stripo.
+ *
+ * If cortex-fe isn't loaded (no `?cortex=true` in the URL), the chat store is
+ * undefined and the bridge is a no-op. That's the desired behavior.
+ */
+export declare const useCortexBlueprintBridge: () => void;

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

@@ -0,0 +1,21 @@
+type ApplyStatus = 'pending' | 'applying' | 'applied' | 'failed';
+/**
+ * Applies email_template blueprints from the chat agent to the Stripo editor.
+ *
+ * - blueprint_create + manual Apply click: immediate.
+ * - blueprint_update: debounced 250 ms trailing so rapid mid-stream updates
+ *   don't thrash updateHtmlAndCss.
+ */
+export declare const useEmailTemplateApplier: () => {
+    applyStatus: import("vue").Ref<Record<string, ApplyStatus>>;
+    applyTemplate: (blueprintId: string, data: {
+        html?: string;
+        css?: string;
+    }) => void;
+    applyTemplateDebounced: (blueprintId: string, data: {
+        html?: string;
+        css?: string;
+    }) => void;
+};
+export declare const resetEmailTemplateApplier: () => void;
+export {};

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

@@ -0,0 +1,4 @@
+export declare const useRibbonOffset: () => {
+    ribbonOffset: import("vue").Ref<number>;
+    getTopPosition: (baseTop: number) => string;
+};

package/dist/src/enums/onboarding.d.ts

@@ -3,3 +3,9 @@ export declare const UI_EDITOR_SELECTOR = "ui-editor";
 export declare const CARD_COMPOSITION_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Card Composition\"]";
 export declare const SETTINGS_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Settings\"]";
 export declare const RIBBON_SELECTOR = ".in-ribbons-wrapper";
+export declare const DYNAMIC_CONTENT_BUTTON_SELECTOR = "#guido__btn-add-dynamic-content";
+export declare const AMP_TOGGLE_BUTTON_SELECTOR = ".guido__amp-toggle-html";
+export declare const AMP_TOGGLE_WRAPPER_SELECTOR = ".in-segments-wrapper";
+export declare const HEADER_SELECTOR = "[data-testid=\"guido-header\"]";
+export declare const POPOVER_LEFT_OFFSET = 158;
+export declare const POPOVER_TOP_GAP = 10;

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

@@ -1392,6 +1392,10 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
     close(type: OnboardingType): Promise<void>;
     next(type: OnboardingType): void;
     previous(type: OnboardingType): void;
+    updateCardPosition(type: OnboardingType, cardIndex: number, position: {
+        top: string;
+        position: string;
+    }): void;
     setConfig(type: OnboardingType, config: OnboardingCardConfig[]): void;
     onDiscoverNowClicked(): Promise<void>;
     onRemindMeLater(): void;

package/dist/stores/onboarding.js

@@ -71,6 +71,10 @@ const t = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
+    updateCardPosition(n, i, o) {
+      const s = this.onboardings[n].config[i];
+      s && (s.top = o.top, s.position = o.position);
+    },
     setConfig(n, i) {
       this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },

package/dist/utils/pairProductVariables.js

@@ -1,84 +1,85 @@
-import { productPairs as P } from "../extensions/Blocks/Items/enums/productEnums.js";
-function L(F) {
-  const R = F.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(R, "text/html"), y = P.PAIRS_FOR_EXTENSION;
-  Object.entries(y).forEach(([n, l]) => {
-    $.querySelectorAll(".ins-product-td").forEach((c) => {
-      const E = c.getAttribute("data-number") || "1", T = c.getAttribute("data-type") || "CART_ITEMS";
-      c.querySelectorAll(`[product-attr="${n}"]`).forEach((e) => {
-        var H;
-        const b = e.getAttribute("data-type") || T, u = e.getAttribute("data-number") || E, p = l[b];
-        if (p)
-          switch (n) {
+import { productPairs as L } from "../extensions/Blocks/Items/enums/productEnums.js";
+function q(w) {
+  const y = w.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), T = new DOMParser().parseFromString(y, "text/html"), C = L.PAIRS_FOR_EXTENSION;
+  Object.entries(C).forEach(([r, f]) => {
+    T.querySelectorAll(".ins-product-td").forEach((o) => {
+      const A = o.getAttribute("data-number") || "1", b = o.getAttribute("data-type") || "CART_ITEMS";
+      o.querySelectorAll(`[product-attr="${r}"]`).forEach((e) => {
+        var k, F, I;
+        const $ = e.getAttribute("data-type") || b, d = e.getAttribute("data-number") || A, u = f[$];
+        if (u)
+          switch (r) {
             case "imageSrc": {
-              let t = null, o = null;
-              if (e.tagName === "IMG" ? (t = e, o = t.closest("a")) : (t = e.querySelector("img"), o = e.querySelector("a") || e.closest("a")), !t)
+              let t = null, i = null;
+              if (e.tagName === "IMG" ? (t = e, i = t.closest("a")) : (t = e.querySelector("img"), i = e.querySelector("a") || e.closest("a")), !t)
                 break;
-              const i = p.DEFAULT, a = p.ATTR;
-              if (i && t.src) {
-                const r = t.src;
-                i.some((f) => {
-                  const s = f.split("/").pop() || "", _ = r.split("/").pop() || "";
-                  return r.includes(f) || r.includes(s) || _ === s;
-                }) && (t.src = `{{${a}_${u}}}`);
+              const a = u.DEFAULT, s = u.ATTR;
+              if (a && t.src) {
+                const c = t.src;
+                a.some((h) => {
+                  const l = h.split("/").pop() || "", g = c.split("/").pop() || "";
+                  return c.includes(h) || c.includes(l) || g === l;
+                }) && (t.src = `{{${s}_${d}}}`);
               }
-              if (o) {
-                const r = (H = y.itemLink) == null ? void 0 : H[b];
-                if (r) {
-                  const d = r.HREF, f = r.DEFAULT_HREF || "#!", s = o.href;
-                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(f) || s === `${window.location.href}${f}` || !s || s === window.location.href) && (o.href = `{{${d}_${u}}}`);
+              const n = (F = (k = C.name) == null ? void 0 : k[$]) == null ? void 0 : F.ATTR;
+              if (n && t.setAttribute("alt", `{{${n}_${d}}}`), i) {
+                const c = (I = C.itemLink) == null ? void 0 : I[$];
+                if (c) {
+                  const E = c.HREF, h = c.DEFAULT_HREF || "#!", l = i.href;
+                  (l === "#" || l === "" || l.endsWith("#!") || l.endsWith(h) || l === `${window.location.href}${h}` || !l || l === window.location.href) && (i.href = `{{${E}_${d}}}`);
                 }
               }
               break;
             }
             case "name": {
-              const t = p, o = t.ATTR, i = t.DEFAULT_HREF || "#!", a = t.HREF;
-              e.textContent && (e.textContent = `{{${o}_${u}}}`);
-              const r = e.closest("a") || (e.tagName === "A" ? e : null);
-              if (r && a) {
-                const d = r.href, f = `${window.location.href}${i}`;
-                (d === f || d.endsWith(i)) && (r.href = `{{${a}_${u}}}`);
+              const t = u, i = t.ATTR, a = t.DEFAULT_HREF || "#!", s = t.HREF;
+              e.textContent && (e.textContent = `{{${i}_${d}}}`);
+              const n = e.closest("a") || (e.tagName === "A" ? e : null);
+              if (n && s) {
+                const c = n.href, E = `${window.location.href}${a}`;
+                (c === E || c.endsWith(a)) && (n.href = `{{${s}_${d}}}`);
               }
               break;
             }
             case "price":
             case "originalPrice": {
-              const t = p, o = e.getAttribute("data-formated"), i = e.getAttribute("data-single_price"), a = o === "true", r = i === "true", d = e.getAttribute("data-curency") || "before";
-              let f;
-              r ? f = a ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : f = a ? t.PRICE_FORMATTED : t.PRICE;
-              const s = t.CURRENCY;
-              let _ = `{{${f}_${u}}}`;
-              if (s) {
-                const k = `{{${s}_${u}}}`;
-                _ = d === "after" ? `${_} ${k}` : `${k} ${_}`;
+              const t = u, i = e.getAttribute("data-formated"), a = e.getAttribute("data-single_price"), s = i === "true", n = a === "true", c = e.getAttribute("data-curency") || "before";
+              let E;
+              n ? E = s ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : E = s ? t.PRICE_FORMATTED : t.PRICE;
+              const h = t.CURRENCY;
+              let l = `{{${E}_${d}}}`;
+              if (h) {
+                const g = `{{${h}_${d}}}`;
+                l = c === "after" ? `${l} ${g}` : `${g} ${l}`;
               }
-              e.textContent = _;
+              e.textContent = l;
               break;
             }
             case "quantity": {
-              const t = p, o = t.ATTR, i = t.DEFAULT;
-              e.textContent && e.textContent.trim() === i && (e.textContent = `{{${o}_${u}}}`);
+              const t = u, i = t.ATTR, a = t.DEFAULT;
+              e.textContent && e.textContent.trim() === a && (e.textContent = `{{${i}_${d}}}`);
               break;
             }
             case "button": {
-              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
-              if (a) {
-                const r = a.href || "", d = `${window.location.href}${i}`;
-                (r === "" || r === "#" || r === d || r.endsWith(i) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${o}_${u}}}`);
+              const t = u, i = t.HREF, a = t.DEFAULT_HREF || "#!", s = e.tagName === "A" ? e : e.querySelector("a");
+              if (s) {
+                const n = s.href || "", c = `${window.location.href}${a}`;
+                (n === "" || n === "#" || n === c || n.endsWith(a) || n.endsWith("#!") || n === window.location.href) && (s.href = `{{${i}_${d}}}`);
               }
               break;
             }
             case "itemLink": {
-              const t = p, o = t.HREF, i = t.DEFAULT_HREF || "#!", a = e;
-              if (a.href) {
-                const r = a.href, d = `${window.location.href}${i}`;
-                (r === d || r.endsWith(i)) && (a.href = `{{${o}_${u}}}`);
+              const t = u, i = t.HREF, a = t.DEFAULT_HREF || "#!", s = e;
+              if (s.href) {
+                const n = s.href, c = `${window.location.href}${a}`;
+                (n === c || n.endsWith(a)) && (s.href = `{{${i}_${d}}}`);
               }
               break;
             }
             default: {
-              if ("ATTR" in p) {
-                const t = p.ATTR;
-                e.textContent && (e.textContent = `{{${t}_${u}}}`);
+              if ("ATTR" in u) {
+                const t = u.ATTR;
+                e.textContent && (e.textContent = `{{${t}_${d}}}`);
               }
               break;
             }
@@ -86,55 +87,55 @@ function L(F) {
       });
     });
   });
-  const S = R.match(/<!DOCTYPE[^>]*>/i), I = S ? `${S[0]}
-` : "", w = $.querySelectorAll(".ins-product-td"), m = [];
-  w.forEach((n) => {
-    const l = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", c = n.getAttribute("data-nodup"), E = n.outerHTML;
-    m.push({
-      element: n,
-      outerHtml: E,
-      type: l,
-      number: A,
-      nodup: c || void 0
+  const S = y.match(/<!DOCTYPE[^>]*>/i), M = S ? `${S[0]}
+` : "", P = T.querySelectorAll(".ins-product-td"), H = [];
+  P.forEach((r) => {
+    const f = r.getAttribute("data-type") || "CART_ITEMS", p = r.getAttribute("data-number") || "1", o = r.getAttribute("data-nodup"), A = r.outerHTML;
+    H.push({
+      element: r,
+      outerHtml: A,
+      type: f,
+      number: p,
+      nodup: o || void 0
     });
   });
-  let h = I + $.documentElement.outerHTML;
-  m.reverse().forEach(({ outerHtml: n, type: l, number: A }) => {
-    let c = "";
-    switch (l) {
+  let _ = M + T.documentElement.outerHTML;
+  H.reverse().forEach(({ outerHtml: r, type: f, number: p }) => {
+    let o = "";
+    switch (f) {
       case "CART_ITEMS":
-        c = "ins_apr_total_product_kind";
+        o = "ins_apr_total_product_kind";
         break;
       case "BROWSED_ITEMS":
-        c = "browsed_item_total_product_kind";
+        o = "browsed_item_total_product_kind";
         break;
       case "PURCHASED_ITEMS":
-        c = "purchased_item_total_product_kind";
+        o = "purchased_item_total_product_kind";
         break;
     }
-    if (c) {
-      const T = parseInt(A) - 1, b = `${`{% if ${c} > ${T} %}`}${n}{% endif %}`;
-      h = h.replace(n, b);
+    if (o) {
+      const b = parseInt(p) - 1, $ = `${`{% if ${o} > ${b} %}`}${r}{% endif %}`;
+      _ = _.replace(r, $);
     }
   });
-  const M = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), g = [];
-  return M.forEach((n) => {
-    const l = n.getAttribute("data-number"), A = n.getAttribute("data-type");
-    if (!l || A !== "CART_ITEMS")
+  const D = T.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), R = [];
+  return D.forEach((r) => {
+    const f = r.getAttribute("data-number"), p = r.getAttribute("data-type");
+    if (!f || p !== "CART_ITEMS")
       return;
-    const c = n.closest(".product-original-price-class");
-    if (c) {
-      const E = c.outerHTML;
-      g.some((C) => C.tdOuterHtml === E) || g.push({ tdOuterHtml: E, number: l });
+    const o = r.closest(".product-original-price-class");
+    if (o) {
+      const A = o.outerHTML;
+      R.some((m) => m.tdOuterHtml === A) || R.push({ tdOuterHtml: A, number: f });
     }
-  }), g.reverse().forEach(({ tdOuterHtml: n, number: l }) => {
-    const A = `{% if ins_apr_price_${l} != ins_apr_originalprice_${l} %}`;
-    if (!h.includes(A) && !n.includes("{% if")) {
-      const E = `${A}${n}{% endif %}`;
-      h = h.replace(n, E);
+  }), R.reverse().forEach(({ tdOuterHtml: r, number: f }) => {
+    const p = `{% if ins_apr_price_${f} != ins_apr_originalprice_${f} %}`;
+    if (!_.includes(p) && !r.includes("{% if")) {
+      const A = `${p}${r}{% endif %}`;
+      _ = _.replace(r, A);
     }
-  }), h.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  }), _.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  L as pairProductVariables
+  q as pairProductVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.cb38cc7",
+  "version": "3.2.0-beta.ccaf9f5",
   "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",
@@ -32,7 +32,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.7.0",
+    "@stripoinc/ui-editor-extensions": "3.8.0",
     "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
@@ -86,7 +86,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.60.0"
+      "version": "2.62.0"
     }
   }
 }

package/dist/composables/validators/useCouponBlockValidator.js

@@ -1,24 +0,0 @@
-import { ToasterTypeOptions as c } from "../../enums/toaster.js";
-import { COUPON_PLACEHOLDER_DEFAULT as i, COUPON_PLACEHOLDER_LIQUID as l } from "../../extensions/Blocks/CouponBlock/template.js";
-import { useToaster as m } from "../useToaster.js";
-import { useTranslations as p } from "../useTranslations.js";
-const u = /* @__PURE__ */ new Set([
-  i,
-  l
-]), A = () => {
-  const { showToaster: t } = m(), r = p();
-  return { validateCouponBlockTags: (e) => {
-    const n = new DOMParser().parseFromString(e, "text/html");
-    return Array.from(n.querySelectorAll(".coupon-block")).find((s) => {
-      var o;
-      const a = ((o = s.textContent) == null ? void 0 : o.trim()) ?? "";
-      return !u.has(a);
-    }) ? (t({
-      type: c.Warning,
-      message: r("newsletter.coupon-tag-modified")
-    }), !1) : !0;
-  } };
-};
-export {
-  A as useCouponBlockValidator
-};

package/dist/src/composables/validators/useCouponBlockValidator.d.ts

@@ -1,3 +0,0 @@
-export declare const useCouponBlockValidator: () => {
-    validateCouponBlockTags: (html: string) => boolean;
-};