@useinsider/guido 3.9.0-beta.ba394b1 → 3.9.0-beta.c84fcd0

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/extensions/Blocks/Recommendation/useRecommendationBlockWarning.js

@@ -1,16 +1,16 @@
-import { useToaster as n } from "../../../composables/useToaster.js";
+import { useToaster as r } from "../../../composables/useToaster.js";
 import { useTranslations as s } from "../../../composables/useTranslations.js";
-import { ToasterTypeOptions as r } from "../../../enums/toaster.js";
+import { ToasterTypeOptions as n } from "../../../enums/toaster.js";
 import { countLiveRecommendationBlocks as i } from "./utils/recommendationBlockCount.js";
-const c = "newsletter.multiple-reco-blocks-warning", u = () => {
-  const { showToaster: o } = n(), t = s();
+const a = "newsletter.multiple-reco-blocks-warning", f = () => {
+  const { showToaster: o } = r(), t = s();
   return { warnIfMultipleBlocks: (e) => {
     i(e) > 1 && o({
-      type: r.Info,
-      message: t(c)
+      type: n.Dark,
+      message: t(a)
     });
   } };
 };
 export {
-  u as useRecommendationBlockWarning
+  f as useRecommendationBlockWarning
 };

package/dist/services/templateLibraryApi.js

@@ -4,12 +4,11 @@ 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 { ToasterTypeOptions as N } from "../enums/toaster.js";
-import { useRecommendationExtensionStore as x } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useSaveAsTemplateStore as A } from "../stores/save-as-template.js";
+import { useRecommendationExtensionStore as N } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useSaveAsTemplateStore as x } from "../stores/save-as-template.js";
 import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
-import { useTemplatePreparation as E } from "../utils/templatePreparation.js";
-const j = () => {
+import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
+const $ = () => {
   const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = h();
   return {
     getCategories: async () => {
@@ -40,7 +39,7 @@ const j = () => {
     createTemplate: async () => {
       var e, t, d, y;
       try {
-        const { prepareTemplateDetails: i } = E(), s = A(), a = await i();
+        const { prepareTemplateDetails: i } = A(), s = x(), a = await i();
         if (p("liquidSyntax") && !await g(a.compiledHtml))
           return !1;
         const f = {
@@ -54,7 +53,7 @@ const j = () => {
           unsubscriptionPreferencePageStatus: !1,
           unsubscriptionPreferencePages: [],
           recommendationCampaignUrls: r(
-            x().recommendationCampaignUrls
+            N().recommendationCampaignUrls
           ),
           recommendationConfigs: r({}),
           isGuido: !0,
@@ -75,7 +74,7 @@ const j = () => {
             "newsletter.template-library-save-alert",
             { templateName: s.getTemplateName }
           ),
-          type: N.Alert
+          type: "alert"
         }), !1) : (l({
           message: u(
             "newsletter.template-library-save-success",
@@ -90,5 +89,5 @@ const j = () => {
   };
 };
 export {
-  j as useTemplateLibraryApi
+  $ as useTemplateLibraryApi
 };

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

@@ -1,6 +1,6 @@
 export declare enum ToasterTypeOptions {
     Success = "success",
     Warning = "warning",
-    Alert = "error",
-    Info = "information"
+    Alert = "alert",
+    Dark = "dark"
 }

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/stores/toaster.d.ts

@@ -4,14 +4,15 @@ export declare const useToasterStore: import("pinia").StoreDefinition<"guidoToas
         status: boolean;
         type: import("@@/Types/toaster").ToasterType;
         text: string;
+        icon: string;
+        withIcon: boolean;
         withoutLeftMargin: boolean;
-        autoHide: boolean;
         actionButton?: {
             text: string;
             onClick: () => void;
         } | undefined;
     } & import("pinia").PiniaCustomStateProperties<ToasterState>) => boolean;
 }, {
-    showToaster(this: ToasterState, { type, message, actionButton, autoHide }: ToasterOptions): void;
+    showToaster(this: ToasterState, { type, message, actionButton }: ToasterOptions): void;
     hideToaster(this: ToasterState): void;
 }>;

package/dist/static/styles/components/notification.css.js

@@ -0,0 +1,74 @@
+const n = `ue-notifications-container {
+    left: 96px;
+    margin: 0;
+    bottom: 32px;
+    top: unset;
+    width: unset;
+    position: fixed;
+}
+
+ue-notifications-container ue-message + ue-message {
+    margin-bottom: 24px;
+}
+
+ue-notifications-container .alert-message-wrapper {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    border: none;
+    padding: 16px 24px;
+}
+
+ue-notifications-container .alert-message-wrapper.info,
+ue-notifications-container .alert-message-wrapper.loader {
+    background-color: var(--guido-color-background-toaster-info) !important;
+    color: inherit;
+}
+
+.alert-message-wrapper .alert-message-main {
+    align-items: center;
+}
+
+ue-notifications-container ue-caption .caption {
+    color: var(--guido-color-white) !important;
+}
+
+ue-block-thumb-hint {
+    text-align: left;
+}
+
+ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
+    width: calc(100% - 64px);
+}
+
+ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-text {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+ue-notifications-container .alert-message-text,
+ue-notifications-container .alert-message-wrapper ue-icon-component.icon,
+ue-notifications-container .alert-message-wrapper ue-icon-component.icon-button {
+    color: var(--guido-color-white);
+}
+
+ue-notifications-container ue-message ue-button.close {
+    margin: 0 0 0 16px;
+}
+
+ue-notifications-container .alert-message-wrapper.success {
+    background: var(--guido-color-background-toaster-success);
+    color: inherit;
+}
+
+ue-notifications-container .alert-message-wrapper.error {
+    background: var(--guido-color-background-toaster-error);
+    color: inherit;
+}
+
+ue-notifications-container .alert-message-wrapper.warn {
+    background: var(--guido-color-background-toaster-warn);
+    color: inherit;
+}
+`;
+export {
+  n as default
+};

package/dist/stores/toaster.js

@@ -1,21 +1,21 @@
 import { ToasterTypeOptions as e } from "../enums/toaster.js";
-import { defineStore as a } from "pinia";
-const u = () => ({
+import { defineStore as i } from "pinia";
+const a = () => ({
   status: !1,
   type: e.Success,
   text: "",
+  icon: "",
+  withIcon: !0,
   withoutLeftMargin: !1,
-  autoHide: !0,
   actionButton: void 0
-}), h = a("guidoToaster", {
-  state: () => u(),
+}), n = i("guidoToaster", {
+  state: () => a(),
   getters: {
-    // A toast without auto-hide (e.g. Stripo `loader`) stays until hideToaster.
-    shouldAutoHide: (t) => t.status && !!t.text && t.autoHide
+    shouldAutoHide: (t) => t.status && !!t.text
   },
   actions: {
-    showToaster({ type: t = e.Success, message: s, actionButton: o, autoHide: i = !0 }) {
-      this.status = !0, this.text = s, this.type = t, this.actionButton = o, this.autoHide = i;
+    showToaster({ type: t = e.Success, message: s, actionButton: o }) {
+      this.status = !0, this.text = s, this.type = t, this.actionButton = o;
     },
     hideToaster() {
       this.status = !1;
@@ -23,5 +23,5 @@ const u = () => ({
   }
 });
 export {
-  h as useToasterStore
+  n as useToasterStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.9.0-beta.ba394b1",
+  "version": "3.9.0-beta.c84fcd0",
   "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",
@@ -37,7 +37,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.8.0",
-    "@useinsider/design-system-vue": "1.4.0",
+    "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",

package/dist/composables/useStripoNotifications.js

@@ -1,26 +0,0 @@
-import { useToaster as d } from "./useToaster.js";
-import { ToasterTypeOptions as c } from "../enums/toaster.js";
-const g = () => {
-  const { showToaster: l, hideToaster: u } = d();
-  let s = null;
-  const n = (o, t, i, e, f = !0) => {
-    s = i;
-    const r = e != null && e.action ? { text: e.action.label, onClick: e.action.func } : void 0;
-    l({ type: o, message: t, actionButton: r, autoHide: (e == null ? void 0 : e.autoClose) ?? f });
-  };
-  return { getStripoNotifications: () => ({
-    info: (o, t, i) => n(c.Info, o, t, i),
-    success: (o, t, i) => n(c.Success, o, t, i),
-    warn: (o, t, i) => n(c.Warning, o, t, i),
-    error: (o, t, i) => n(c.Alert, o, t, i),
-    // A loader marks an in-progress operation; Stripo dismisses it via hide(id)
-    // when finished, so it must not auto-hide.
-    loader: (o, t, i) => n(c.Info, o, t, i, !1),
-    hide: (o) => {
-      s === o && (u(), s = null);
-    }
-  }) };
-};
-export {
-  g as useStripoNotifications
-};

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

@@ -1,10 +0,0 @@
-import type { StripoNotifications } from '@@/Types/stripo';
-/**
- * Adapter that routes Stripo's in-editor notifications through Guido's own
- * InToasts-based toaster, so the editor only ever shows one toaster style.
- * Passed to `initEditor` as the `notifications` config (Stripo then delegates
- * rendering to us instead of drawing its native <ue-notifications-container>).
- */
-export declare const useStripoNotifications: () => {
-    getStripoNotifications: () => StripoNotifications;
-};