@useinsider/guido 3.9.0-beta.ec06cf4 → 3.9.0-beta.f844081

package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js

@@ -1,17 +1,24 @@
 import { ModificationDescription as b } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { DefaultConfigValues as i, SETTINGS_ENUMS as n, ItemInCartOptions as g } from "../enums/settingsEnums.js";
+import { ItemInCartOptions as p, DefaultConfigValues as i, SETTINGS_ENUMS as c } from "../enums/settingsEnums.js";
 function _() {
   return String(Date.now() + Math.floor(Math.random() * 1e3));
 }
-const E = (r) => r.replace(/\$/g, "$$$$");
-function y() {
+const S = (r) => r.replace(/\$/g, "$$$$");
+function y(r, t) {
+  const e = p[t], n = e ? e.findIndex((u) => u.value === r) : -1;
+  if (n >= 0)
+    return String(n + 1);
+  const o = typeof r == "string" ? r.match(/\((\d+)\)/) : null;
+  return (o == null ? void 0 : o[1]) ?? "1";
+}
+function A() {
   return {
     initialized: !0,
     blockInstanceId: _(),
-    source: n.ITEMS_TYPE.CART_ITEMS,
-    type: n.ITEMS_TYPE.CART_ITEMS,
+    source: c.ITEMS_TYPE.CART_ITEMS,
+    type: c.ITEMS_TYPE.CART_ITEMS,
     itemsSelectValue: i.cartItemsSelectControlValue,
-    orientation: n.ORIENTATION.VERTICAL,
+    orientation: c.ORIENTATION.VERTICAL,
     nameTrimming: i.productNameTrimmingControlValue === "1",
     priceHideDiscount: i.productPriceHideDiscountControlValue === "1",
     priceFormatted: i.productPriceFormattedControlValue === "1",
@@ -33,7 +40,7 @@ function y() {
     buttonVisible: i.productButtonVisible === "1"
   };
 }
-function p(r) {
+function g(r) {
   if (!r)
     return null;
   const t = r.closest(".items-block-v2");
@@ -41,14 +48,14 @@ function p(r) {
 }
 function m(r) {
   return r ? {
-    CartItems: n.ITEMS_TYPE.CART_ITEMS,
-    BrowsedItems: n.ITEMS_TYPE.BROWSED_ITEMS,
-    PurchasedItems: n.ITEMS_TYPE.PURCHASED_ITEMS,
+    CartItems: c.ITEMS_TYPE.CART_ITEMS,
+    BrowsedItems: c.ITEMS_TYPE.BROWSED_ITEMS,
+    PurchasedItems: c.ITEMS_TYPE.PURCHASED_ITEMS,
     // Also handle already correct formats
-    CART_ITEMS: n.ITEMS_TYPE.CART_ITEMS,
-    BROWSED_ITEMS: n.ITEMS_TYPE.BROWSED_ITEMS,
-    PURCHASED_ITEMS: n.ITEMS_TYPE.PURCHASED_ITEMS
-  }[r] || n.ITEMS_TYPE.CART_ITEMS : n.ITEMS_TYPE.CART_ITEMS;
+    CART_ITEMS: c.ITEMS_TYPE.CART_ITEMS,
+    BROWSED_ITEMS: c.ITEMS_TYPE.BROWSED_ITEMS,
+    PURCHASED_ITEMS: c.ITEMS_TYPE.PURCHASED_ITEMS
+  }[r] || c.ITEMS_TYPE.CART_ITEMS : c.ITEMS_TYPE.CART_ITEMS;
 }
 function f(r, t) {
   if (!r)
@@ -56,27 +63,27 @@ function f(r, t) {
   if (r.includes("{{"))
     return r;
   if (/^\d+$/.test(r)) {
-    const e = parseInt(r) - 1, o = g[t];
-    if (o && o[e])
-      return o[e].value;
+    const e = parseInt(r) - 1, n = p[t];
+    if (n && n[e])
+      return n[e].value;
   }
   return i.cartItemsSelectControlValue;
 }
-function C(r) {
+function I(r) {
   const t = r.querySelector("esd-config-block");
   if (!t)
     return null;
-  const e = (u, s) => u == null ? s : u === "1" || u === "true", o = (u, s) => u || s, c = t.getAttribute("data-type"), a = m(c), d = t.getAttribute("data-cart_items_select_control_value"), l = f(d, a);
+  const e = (a, s) => a == null ? s : a === "1" || a === "true", n = (a, s) => a || s, o = t.getAttribute("data-type"), u = m(o), d = t.getAttribute("data-cart_items_select_control_value"), l = f(d, u);
   return {
     initialized: e(t.getAttribute("data-initialized"), !1),
-    blockInstanceId: o(
+    blockInstanceId: n(
       t.getAttribute("data-block-instance-id"),
       _()
     ),
-    source: a,
-    type: a,
+    source: u,
+    type: u,
     itemsSelectValue: l,
-    orientation: t.getAttribute("data-card_orientation_control_value") || n.ORIENTATION.VERTICAL,
+    orientation: t.getAttribute("data-card_orientation_control_value") || c.ORIENTATION.VERTICAL,
     nameTrimming: e(
       t.getAttribute("data-product_name_control_trim"),
       !0
@@ -93,11 +100,11 @@ function C(r) {
       t.getAttribute("data-product_price_control_single_price"),
       !1
     ),
-    priceCurrencySymbol: o(
+    priceCurrencySymbol: n(
       t.getAttribute("data-product_price_control_currency_symbol"),
       i.productPriceCurrencySymbolControlValue
     ),
-    priceCurrencyLocation: o(
+    priceCurrencyLocation: n(
       t.getAttribute("data-product_price_currency_location"),
       i.productPriceCurrencyLocationControlValue
     ),
@@ -106,15 +113,15 @@ function C(r) {
       t.getAttribute("data-product_quantity_control_enabled"),
       !0
     ),
-    buttonLink: o(
+    buttonLink: n(
       t.getAttribute("data-product_button_link"),
       i.productButtonLinkControlValue
     ),
-    imageLink: o(
+    imageLink: n(
       t.getAttribute("data-product_image_link"),
       i.productImageLinkControlValue
     ),
-    buttonLabel: o(
+    buttonLabel: n(
       t.getAttribute("data-product_button_control_label"),
       "Buy"
     ),
@@ -149,7 +156,7 @@ function C(r) {
     )
   };
 }
-function I(r) {
+function C(r) {
   if (typeof r.getAttribute != "function")
     return null;
   const t = r.getAttribute("esd-ext-config");
@@ -163,31 +170,32 @@ function I(r) {
   }
   return null;
 }
-function A(r) {
-  const t = p(r);
+function V(r) {
+  const t = g(r);
   if (!t)
     return null;
   const e = t.getNodeConfig();
   if (e && e.initialized)
     return e;
+  const n = C(t);
+  if (n)
+    return n;
   const o = I(t);
-  if (o)
-    return o;
-  const c = C(t);
-  return c || null;
+  return o || null;
 }
-function V(r, t, e, o) {
-  const c = p(r);
-  if (!c)
+function M(r, t, e, n) {
+  const o = g(r);
+  if (!o)
     return;
-  const d = { ...c.getNodeConfig() || {}, ...e }, l = o ?? t.getDocumentModifier();
-  l.modifyHtml(c).setNodeConfig(d), o || l.apply(new b("Update Items block configuration"));
+  const d = { ...o.getNodeConfig() || {}, ...e }, l = n ?? t.getDocumentModifier();
+  l.modifyHtml(o).setNodeConfig(d), n || l.apply(new b("Update Items block configuration"));
 }
 export {
-  E as escapeReplacement,
+  y as deriveItemNumber,
+  S as escapeReplacement,
   _ as generateBlockInstanceId,
-  y as getDefaultItemsBlockConfig,
-  A as getItemsBlockConfig,
-  p as getItemsBlockContainer,
-  V as setItemsBlockConfig
+  A as getDefaultItemsBlockConfig,
+  V as getItemsBlockConfig,
+  g as getItemsBlockContainer,
+  M as setItemsBlockConfig
 };

package/dist/services/blankTemplate.js

@@ -0,0 +1,34 @@
+import { useToaster as m } from "../composables/useToaster.js";
+import { useTranslations as c } from "../composables/useTranslations.js";
+import { BLANK_TEMPLATE_HTML_URL as T, BLANK_TEMPLATE_CSS_URL as i } from "../enums/defaults.js";
+import { ToasterTypeOptions as p } from "../enums/toaster.js";
+const a = 3, f = 1e3;
+let s = null;
+const u = (e) => new Promise((t) => {
+  setTimeout(t, e);
+}), n = async (e) => {
+  const t = await fetch(e);
+  if (!t.ok)
+    throw new Error(`Blank template request failed: ${t.status}`);
+  return t.text();
+}, k = () => {
+  const { showToaster: e } = m(), t = c();
+  return { getBlankTemplate: async () => {
+    if (s)
+      return s;
+    for (let r = 1; r <= a; r++)
+      try {
+        const [o, l] = await Promise.all([
+          n(T),
+          n(i)
+        ]);
+        return s = { html: o, css: l }, s;
+      } catch (o) {
+        console.error(`Failed to fetch blank template (attempt ${r}/${a}):`, o), r < a && await u(r * f);
+      }
+    return e({ type: p.Alert, message: t("errors-pages.undefined-response") }), { html: "", css: "" };
+  } };
+};
+export {
+  k as useBlankTemplate
+};

package/dist/services/stripoApi.js

@@ -1,10 +1,9 @@
 import { useHttp as d } from "../composables/useHttp.js";
 import { useToaster as m } from "../composables/useToaster.js";
 import { MAX_DEFAULT_TEMPLATE_ID as y } from "../enums/defaults.js";
-import f from "../static/templates/empty/index.html.js";
-import g from "../static/templates/empty/style.css.js";
-const E = () => {
-  const { get: s, post: c } = d(), { handleError: r } = m();
+import { useBlankTemplate as f } from "./blankTemplate.js";
+const D = () => {
+  const { get: s, post: u } = d(), { handleError: r } = m(), { getBlankTemplate: o } = f();
   return {
     getToken: async () => {
       try {
@@ -26,18 +25,14 @@ const E = () => {
       }
     },
     getDefaultTemplate: async () => {
-      const t = {
-        html: f,
-        css: g
-      };
       try {
-        const e = new URLSearchParams(window.location.search), u = e.get("default-template"), p = e.get("master"), a = u ? parseInt(u) : 0, i = a >= 1 && a <= y ? a : 0;
-        if (!i && !p)
-          return t;
-        const l = `/stripo/default-template/${i}`, { data: n } = await s(l), o = typeof n == "string" ? JSON.parse(n) : n;
-        return !o || typeof o != "object" || !("html" in o) || !("css" in o) ? t : o;
-      } catch (e) {
-        return r(e, "Failed to fetch default template"), t;
+        const t = new URLSearchParams(window.location.search), e = t.get("default-template"), l = t.get("master"), n = e ? parseInt(e) : 0, i = n >= 1 && n <= y ? n : 0;
+        if (!i && !l)
+          return await o();
+        const p = `/stripo/default-template/${i}`, { data: c } = await s(p), a = typeof c == "string" ? JSON.parse(c) : c;
+        return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? await o() : a;
+      } catch (t) {
+        return r(t, "Failed to fetch default template"), o();
       }
     },
     getSyncModulesStatus: async () => {
@@ -50,7 +45,7 @@ const E = () => {
     },
     updateSyncModule: async (t) => {
       try {
-        return await c(`/stripo/stripo-modules/${t.moduleId}/update`), !0;
+        return await u(`/stripo/stripo-modules/${t.moduleId}/update`), !0;
       } catch (e) {
         return r(e, "Failed to update sync module"), !1;
       }
@@ -71,7 +66,7 @@ const E = () => {
       if (t.length === 0)
         return !0;
       try {
-        return await c("/stripo/stripo-modules/set-unsubscription-preference-pages", t), !0;
+        return await u("/stripo/stripo-modules/set-unsubscription-preference-pages", t), !0;
       } catch (e) {
         return r(e, "Failed to set unsubscription preference pages"), !1;
       }
@@ -79,5 +74,5 @@ const E = () => {
   };
 };
 export {
-  E as useStripoApi
+  D as useStripoApi
 };

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

@@ -8,6 +8,9 @@ export declare const TemplateTypes: {
 };
 export declare const EditorType: number;
 export declare const MAX_DEFAULT_TEMPLATE_ID = 13;
+export declare const EMAIL_STATIC_BASE_URL = "https://email-static.useinsider.com";
+export declare const BLANK_TEMPLATE_HTML_URL = "https://email-static.useinsider.com/templates/campaign/default.html";
+export declare const BLANK_TEMPLATE_CSS_URL = "https://email-static.useinsider.com/templates/campaign/default.css";
 export declare const ProductIds: Record<string, number>;
 export declare const ModuleFolderDefaults: {
     readonly SAVED_MODULES: "savedModules";

package/dist/src/extensions/Blocks/Items/block.d.ts

@@ -33,4 +33,13 @@ export declare class ItemsBlock extends Block {
      * Guarded to the nodeConfig-empty case so it runs once and never loops.
      */
     onDocumentChanged(node: ImmutableHtmlNode): void;
+    /**
+     * Bakes the compiler-read DOM attributes (`data-type`, `data-number`) onto the
+     * `.ins-product-td` container from the recovered config. Required for saved modules:
+     * `migrate()` (which backfills these) only runs at template load — never when a module
+     * is dropped into a live editor — so this is the one place the namespace + index get
+     * restored before export. The name `<a>` carries no data-type/data-number of its own and
+     * relies on this td-level fallback in pairProductVariables.
+     */
+    private _stampProductTdDomAttributes;
 }

package/dist/src/extensions/Blocks/Items/template.d.ts

@@ -3,6 +3,13 @@ declare const migrationTemplate = "ADD YOUR MIGRATION HERE";
 type ProductType = 'CART_ITEMS' | 'BROWSED_ITEMS' | 'PURCHASED_ITEMS';
 type OrientationType = 'vertical' | 'horizontal';
 type PriceOrientationType = 'vertical' | 'horizontal';
+/**
+ * Wraps a bare migrate-block `<td>` in a `<tr>` so it forms a valid table row.
+ * Stripo renders its `BlockType.*` tags as full rows, so both the migrate template
+ * (here) and the orientation-change rebuild (settingsControl._reOrderTemplate) must
+ * emit `<tr><td>` — otherwise the code editor flags the bare cell as invalid.
+ */
+export declare const wrapInTableRow: (html: string) => string;
 type TemplateParameters = {
     orientation: OrientationType;
     itemsType: ProductType;

package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts

@@ -40,6 +40,18 @@ export declare function generateBlockInstanceId(): string;
  * Prevents currency symbols like "$", "R$", "HK$" from being interpreted as special replacement patterns.
  */
 export declare const escapeReplacement: (str: string) => string;
+/**
+ * Derives a card's 1-based product index from its `itemsSelectValue`.
+ * Prefers the position within ItemInCartOptions for the type; falls back to the
+ * `(N)` token in the value (e.g. "{{Browsed Item (3) Url}}" -> "3"); defaults to "1".
+ *
+ * Single source of truth so block.ts, settingsControl and template.ts stay in sync —
+ * the number feeds `data-number`, which pairProductVariables reads to index merge tags.
+ *
+ * `itemsSelectValue` is typed loosely because callers pass it straight from parsed
+ * configs where the field can be absent — the runtime guard below is load-bearing.
+ */
+export declare function deriveItemNumber(itemsSelectValue: string | undefined, itemsType: ProductType): string;
 /**
  * Returns default ItemsBlockConfig values.
  * These are used when initializing a new block or when migrating from legacy format.

package/dist/src/services/blankTemplate.d.ts

@@ -0,0 +1,11 @@
+import type { Template } from '@@/Types/stripo';
+/**
+ * Fetches the blank starter template (html + css) from the email CDN — the single
+ * source of truth shared with email-fe. Retries a few times, caches the result for
+ * the session, and on persistent failure returns an empty template (the editor still
+ * opens) plus a toaster. Kept separate from stripoApi: this is a CDN asset fetch, not
+ * a Stripo backend call.
+ */
+export declare const useBlankTemplate: () => {
+    getBlankTemplate: () => Promise<Template>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.9.0-beta.ec06cf4",
+  "version": "3.9.0-beta.f844081",
   "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",

package/dist/static/templates/empty/index.html.js

@@ -1,74 +0,0 @@
-const t = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1" name="viewport">
-    <meta name="x-apple-disable-message-reformatting">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="telephone=no" name="format-detection">
-    <title></title>
-    <!--[if (mso 16)]><style type="text/css">a{text-decoration:none}</style><![endif]-->
-    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
-    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
-    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
-    <!--[if gte mso 9]><style>sup{font-size:100% !important}</style><![endif]-->
-    <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
-</head>
-
-<body>
-    <div class="es-wrapper-color">
-        <!--[if gte mso 9]>
-			<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
-				<v:fill type="tile" color="#f6f6f6"></v:fill>
-			</v:background>
-		<![endif]-->
-        <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
-            <tbody>
-                <tr>
-                    <td class="esd-email-paddings" valign="top">
-                        <table class="es-content esd-footer-popover" cellspacing="0" cellpadding="0" align="center">
-                            <tbody>
-                                <tr>
-                                    <td class="esd-stripe" align="center">
-                                        <table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
-                                            <tbody>
-                                                <tr>
-                                                    <td class="esd-structure es-p20" align="left">
-                                                        <table cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td width="560" class="esd-container-frame" align="center" valign="top">
-                                                                        <table cellpadding="0" cellspacing="0" width="100%">
-                                                                            <tbody>
-                                                                                <tr>
-                                                                                    <td align="center" class="esd-empty-container" style="display: none;"></td>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div style="position: absolute; left: -9999px; top: -9999px; margin: 0px;"></div>
-    <div style="position: absolute; left: -9999px; top: -9999px; margin: 0px; padding: 0px; border: 0px none; width: 1px;"></div>
-</body>
-
-</html>
-`;
-export {
-  t as default
-};