@useinsider/guido 2.2.0-beta.fa4cec8 → 3.0.0-beta.a32411b

package/dist/config/migrator/recommendationMigrator.js

@@ -1,11 +1,13 @@
 var h = Object.defineProperty;
-var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
-var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
-class w {
+var T = (d, e, t) => e in d ? h(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var A = (d, e, t) => T(d, typeof e != "symbol" ? e + "" : e, t);
+import { BLOCK_ID as S } from "../../extensions/Blocks/Recommendation/block.js";
+import P, { prepareProductRows as q } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { useTemplateStore as w } from "../../stores/template.js";
+import { getDefaultProducts as $ } from "../../extensions/Blocks/Recommendation/templates/utils.js";
+class B {
   constructor() {
-    m(this, "parser");
+    A(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(e) {
@@ -13,12 +15,14 @@ class w {
       const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll(
         'td.ins-recommendation-v3-block-1, td.product-block[esd-handler-name*="EmailRecommendationV3"]'
       );
-      return s.length === 0 ? e : (s.forEach((o) => {
-        const l = o.getAttribute("id"), r = this.extractBgColor(o), i = this.extractTitle(o), u = this.extractProductRows(o), c = P.replace("{-{-TITLE-}-}", i).replace("{-{-PRODUCT_ROWS-}-}", u), a = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
+      return w().$patch((i) => {
+        i.migrations = { ...i.migrations, [S]: s.length };
+      }), s.length === 0 ? e : (s.forEach((i) => {
+        const r = i.getAttribute("id"), n = this.extractBgColor(i), u = this.extractTitle(i), c = this.extractProductRows(i), l = P.replace("{-{-TITLE-}-}", u).replace("{-{-PRODUCT_ROWS-}-}", c), a = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${l}</tr></tbody></table>`,
           "text/html"
-        ).querySelector(".ins-recommendation-v3-block-v2");
-        a && o.parentNode && (l && a.setAttribute("id", l), r && a.setAttribute("bgcolor", r), o.parentNode.replaceChild(a, o));
+        ).querySelector(".recommendation-block-v2");
+        a && i.parentNode && (r && a.setAttribute("id", r), n && a.setAttribute("bgcolor", n), i.parentNode.replaceChild(a, i));
       }), t.documentElement.outerHTML);
     } catch (t) {
       return console.error("RecommendationMigrator failed:", t), e;
@@ -64,7 +68,7 @@ class w {
    * @returns HTML string for the title block
    */
   extractTitle(e) {
-    var a, g;
+    var g, a;
     const t = e.querySelector(".ext-recommendation-title");
     if (!t)
       return this.buildTitleBlock({
@@ -76,7 +80,7 @@ class w {
       });
     const s = t.querySelector("p");
     if (!s) {
-      const p = ((a = t.textContent) == null ? void 0 : a.trim()) || "You May Also Like!", b = t.getAttribute("align") || "center";
+      const p = ((g = t.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", b = t.getAttribute("align") || "center";
       return this.buildTitleBlock({
         text: p,
         isBold: !0,
@@ -85,13 +89,13 @@ class w {
         styles: "font-size: 28px; color: #333333;"
       });
     }
-    const o = ((g = s.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", l = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", i = /font-weight\s*:\s*bold/i.test(r) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(r) || !!s.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), n = this.convertInlineToBlock(c);
+    const o = ((a = s.textContent) == null ? void 0 : a.trim()) || "You May Also Like!", i = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", n = /font-weight\s*:\s*bold/i.test(r) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(r) || !!s.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), l = this.convertInlineToBlock(c);
     return this.buildTitleBlock({
       text: o,
-      isBold: i,
+      isBold: n,
       isItalic: u,
-      align: l,
-      styles: n
+      align: i,
+      styles: l
     });
   }
   /**
@@ -103,8 +107,8 @@ class w {
     const t = this.extractProductConfig(e);
     if (!t)
       return console.warn("[RecommendationMigrator] No product config found, using defaults"), this.generateProductRows(6, 3, {});
-    const { totalCount: s, productsPerRow: o } = t, l = this.extractProductStyles(e);
-    return this.generateProductRows(s, o, l);
+    const { totalCount: s, productsPerRow: o } = t, i = this.extractProductStyles(e);
+    return this.generateProductRows(s, o, i);
   }
   /**
    * Extracts Stripo padding/margin utility classes from a class string
@@ -152,12 +156,12 @@ class w {
    * @returns HTML string for product rows with applied styles
    */
   generateProductRows(e, t, s) {
-    const o = q(), l = [];
-    for (let i = 0; i < e; i++) {
-      const u = o[i % o.length];
-      l.push({ ...u });
+    const o = $(), i = [];
+    for (let n = 0; n < e; n++) {
+      const u = o[n % o.length];
+      i.push({ ...u });
     }
-    let r = S(l, t);
+    let r = q(i, t);
     return r = this.applyExtractedStyles(r, s), r;
   }
   /**
@@ -171,30 +175,30 @@ class w {
       return console.warn("[RecommendationMigrator] No product card found, using default styles"), t;
     const o = this.extractCardBgColor(s);
     o && (t.cardBgColor = o);
-    const l = s.querySelector(".ext-product-image");
-    if (l) {
-      const n = l.querySelector("img"), a = n == null ? void 0 : n.getAttribute("width"), g = l.getAttribute("style") || "", p = l.getAttribute("align") || "center", b = l.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.imageWidth = a || "120", t.imageAlign = p, t.imageTdStyle = g, t.imageClasses = d;
+    const i = s.querySelector(".ext-product-image");
+    if (i) {
+      const l = i.querySelector("img"), g = l == null ? void 0 : l.getAttribute("width"), a = i.getAttribute("style") || "", p = i.getAttribute("align") || "center", b = i.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.imageWidth = g || "120", t.imageAlign = p, t.imageTdStyle = a, t.imageClasses = m;
     }
     const r = s.querySelector(".ext-product-name");
     if (r) {
-      const n = r.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.nameStyle = a, t.nameAlign = g, t.nameTdStyle = p, t.nameClasses = d;
+      const l = r.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.nameStyle = g, t.nameAlign = a, t.nameTdStyle = p, t.nameClasses = m;
     }
-    const i = s.querySelector(".ext-product-price");
-    if (i) {
-      const n = i.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = i.getAttribute("align") || "center", p = i.getAttribute("style") || "", b = i.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.priceStyle = a, t.priceAlign = g, t.priceTdStyle = p, t.priceClasses = d;
+    const n = s.querySelector(".ext-product-price");
+    if (n) {
+      const l = n.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = n.getAttribute("align") || "center", p = n.getAttribute("style") || "", b = n.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.priceStyle = g, t.priceAlign = a, t.priceTdStyle = p, t.priceClasses = m;
     }
     const u = s.querySelector(".ext-product-original-price");
     if (u) {
-      const n = u.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.oldPriceStyle = a, t.oldPriceAlign = g, t.oldPriceTdStyle = p, t.oldPriceClasses = d;
+      const l = u.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.oldPriceStyle = g, t.oldPriceAlign = a, t.oldPriceTdStyle = p, t.oldPriceClasses = m;
     }
     const c = s.querySelector(".ext-product-button");
     if (c) {
-      const n = c.querySelector(".es-button-border"), a = c.querySelector("a.es-button"), g = (n == null ? void 0 : n.getAttribute("style")) || "", p = (a == null ? void 0 : a.getAttribute("style")) || "", b = c.getAttribute("align") || "center", d = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
-      t.buttonBorderStyle = g, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = d, t.buttonClasses = C, t.buttonText = y;
+      const l = c.querySelector(".es-button-border"), g = c.querySelector("a.es-button"), a = (l == null ? void 0 : l.getAttribute("style")) || "", p = (g == null ? void 0 : g.getAttribute("style")) || "", b = c.getAttribute("align") || "center", m = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
+      t.buttonBorderStyle = a, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = m, t.buttonClasses = C, t.buttonText = y;
     }
     return t;
   }
@@ -215,36 +219,36 @@ class w {
         const c = `${r.getAttribute("class") || ""} ${t.imageClasses}`.trim();
         r.setAttribute("class", c);
       }
-      const i = r.querySelector("img");
-      i && t.imageWidth && i.setAttribute("width", t.imageWidth);
+      const n = r.querySelector("img");
+      n && t.imageWidth && n.setAttribute("width", t.imageWidth);
     }), (t.nameStyle || t.nameAlign || t.nameTdStyle || t.nameClasses) && s.querySelectorAll(".product-name").forEach((r) => {
       if (t.nameAlign && r.setAttribute("align", t.nameAlign), t.nameTdStyle && r.setAttribute("style", t.nameTdStyle), t.nameClasses) {
         const c = `${r.getAttribute("class") || ""} ${t.nameClasses}`.trim();
         r.setAttribute("class", c);
       }
-      const i = r.querySelector("p");
-      i && t.nameStyle && i.setAttribute("style", t.nameStyle);
+      const n = r.querySelector("p");
+      n && t.nameStyle && n.setAttribute("style", t.nameStyle);
     }), (t.priceStyle || t.priceAlign || t.priceTdStyle || t.priceClasses) && s.querySelectorAll(".product-price").forEach((r) => {
       if (t.priceAlign && r.setAttribute("align", t.priceAlign), t.priceTdStyle && r.setAttribute("style", t.priceTdStyle), t.priceClasses) {
         const c = `${r.getAttribute("class") || ""} ${t.priceClasses}`.trim();
         r.setAttribute("class", c);
       }
-      const i = r.querySelector("p");
-      i && t.priceStyle && i.setAttribute("style", t.priceStyle);
+      const n = r.querySelector("p");
+      n && t.priceStyle && n.setAttribute("style", t.priceStyle);
     }), (t.oldPriceStyle || t.oldPriceAlign || t.oldPriceTdStyle || t.oldPriceClasses) && s.querySelectorAll(".product-old-price").forEach((r) => {
       if (t.oldPriceAlign && r.setAttribute("align", t.oldPriceAlign), t.oldPriceTdStyle && r.setAttribute("style", t.oldPriceTdStyle), t.oldPriceClasses) {
         const c = `${r.getAttribute("class") || ""} ${t.oldPriceClasses}`.trim();
         r.setAttribute("class", c);
       }
-      const i = r.querySelector("p");
-      i && t.oldPriceStyle && i.setAttribute("style", t.oldPriceStyle);
+      const n = r.querySelector("p");
+      n && t.oldPriceStyle && n.setAttribute("style", t.oldPriceStyle);
     }), (t.buttonBorderStyle || t.buttonLinkStyle || t.buttonAlign || t.buttonTdStyle || t.buttonClasses) && s.querySelectorAll(".product-button").forEach((r) => {
       if (t.buttonAlign && r.setAttribute("align", t.buttonAlign), t.buttonTdStyle && r.setAttribute("style", t.buttonTdStyle), t.buttonClasses) {
-        const n = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
-        r.setAttribute("class", n);
+        const l = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
+        r.setAttribute("class", l);
       }
-      const i = r.querySelector(".es-button-border");
-      i && t.buttonBorderStyle && i.setAttribute("style", t.buttonBorderStyle);
+      const n = r.querySelector(".es-button-border");
+      n && t.buttonBorderStyle && n.setAttribute("style", t.buttonBorderStyle);
       const u = r.querySelector("a.es-button");
       u && (t.buttonLinkStyle && u.setAttribute("style", t.buttonLinkStyle), t.buttonText && (u.textContent = t.buttonText));
     });
@@ -270,8 +274,8 @@ class w {
    * Removes specified style properties from a style string
    */
   removeStyleProperties(e, t) {
-    return e ? t.reduce((o, l) => {
-      const r = new RegExp(`${l}\\s*:\\s*[^;]*;?`, "gi");
+    return e ? t.reduce((o, i) => {
+      const r = new RegExp(`${i}\\s*:\\s*[^;]*;?`, "gi");
       return o.replace(r, "");
     }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }
@@ -285,9 +289,9 @@ class w {
     return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").replace(/"/g, "'").trim();
   }
 }
-function k(A) {
-  return new w().migrate(A);
+function v(d) {
+  return new B().migrate(d);
 }
 export {
-  k as migrateRecommendation
+  v as migrateRecommendation
 };

package/dist/enums/block.js

@@ -0,0 +1,4 @@
+var m = /* @__PURE__ */ ((e) => (e.Items = "items-block", e.Recommendation = "recommendation-block", e))(m || {});
+export {
+  m as BlockId
+};

package/dist/enums/unsubscribe.js

@@ -1,17 +1,17 @@
 import { useTranslations as e } from "../composables/useTranslations.js";
 import { getEnvironmentPrefix as R } from "../utils/environmentUtil.js";
-const I = {
+const _ = {
   UNSUBSCRIBE_LINK_TYPE: 1,
   PREFERENCES_LINK_TYPE: 3
-}, r = {
+}, I = {
   UNSUBSCRIBE_LINK_REGEX: /{{ins-unsubscribe-link}}/g,
   DATA_OGSB_BUTTON_CSS_REGEX: "\\[data-ogsb\\]\\s*\\.es-button\\.es-button-[0-9]+\\s*\\{(?:[^\\}]*)\\}",
   GLOBAL_UNSUBSCRIBE_LINK_REGEX: /{{ins-global-unsubscribe-link}}/g,
   PREFERENCES_UNSUBSCRIBE_LINK_REGEX: /{{ins-preferences-unsubscribe-link}}/g
-}, s = R(), _ = {
-  UNSUBSCRIBE_URL: `https://mail.${s}.com/user/v1/unsub`,
-  PREFERENCES_URL: `https://mail.${s}.com/user/v1/prefs`
-}, i = "iid", B = {
+}, n = R(), r = {
+  UNSUBSCRIBE_URL: `https://mail.${n}.com/user/v1/unsub`,
+  PREFERENCES_URL: `https://mail.${n}.com/user/v1/prefs`
+}, B = "iid", i = {
   name: "Global Unsubscribe",
   sendGridId: "G"
 }, C = "/email/unsubscribe-pages", E = {
@@ -20,6 +20,9 @@ const I = {
   SUBSCRIPTION_PREFERENCE_CENTER: 3,
   SUBSCRIPTION_PREFERENCE_CONFIRMATION: 4,
   RESUBSCRIBE: 5
+}, U = {
+  [E.GLOBAL_UNSUBSCRIBE]: "custom-unsubscribe",
+  [E.SUBSCRIPTION_PREFERENCE_CENTER]: "custom-preferences"
 }, t = {
   [E.GLOBAL_UNSUBSCRIBE]: [
     E.GLOBAL_UNSUBSCRIBE,
@@ -30,29 +33,30 @@ const I = {
     E.SUBSCRIPTION_PREFERENCE_CENTER,
     E.SUBSCRIPTION_PREFERENCE_CONFIRMATION
   ]
-}, U = () => {
-  const n = e();
+}, c = () => {
+  const s = e();
   return {
-    [E.GLOBAL_UNSUBSCRIBE]: n("unsubscription-preference.type-global-unsubscribe"),
-    [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: n("unsubscription-preference.type-global-unsubscription-confirmation"),
-    [E.RESUBSCRIBE]: n("unsubscription-preference.type-resubscribe"),
-    [E.SUBSCRIPTION_PREFERENCE_CENTER]: n("unsubscription-preference.type-subscription-preferences-center"),
-    [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: n("unsubscription-preference.type-subscription-preferences-confirmation")
+    [E.GLOBAL_UNSUBSCRIBE]: s("unsubscription-preference.type-global-unsubscribe"),
+    [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: s("unsubscription-preference.type-global-unsubscription-confirmation"),
+    [E.RESUBSCRIBE]: s("unsubscription-preference.type-resubscribe"),
+    [E.SUBSCRIPTION_PREFERENCE_CENTER]: s("unsubscription-preference.type-subscription-preferences-center"),
+    [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: s("unsubscription-preference.type-subscription-preferences-confirmation")
   };
-}, c = {
+}, o = {
   default: "{{ins-unsubscribe-link}}",
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
 export {
-  B as DEFAULT_UNSUBSCRIBE_GROUP,
-  i as INSIDER_ID,
-  r as LINK_REGEXES,
-  I as LINK_TYPES,
-  c as MERGE_TAGS,
+  i as DEFAULT_UNSUBSCRIBE_GROUP,
+  B as INSIDER_ID,
+  I as LINK_REGEXES,
+  _ as LINK_TYPES,
+  o as MERGE_TAGS,
   E as PAGE_TYPES,
   t as TYPE_COLLECTIONS,
   C as UNSUBSCRIBE_PAGES_LINK,
-  _ as URLS,
-  U as getTypeTranslations
+  U as UNSUBSCRIBE_SYNC_MODULE_TYPES,
+  r as URLS,
+  c as getTypeTranslations
 };

package/dist/extensions/Blocks/Items/block.js

@@ -1,18 +1,20 @@
-import { useOnboardingStore as d } from "../../../stores/onboarding.js";
-import { Block as g, BlockCompositionType as f, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { SETTINGS_ENUMS as c, DefaultConfigValues as i } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as p } from "./template.js";
-import { getItemsBlockContainer as u, getItemsBlockConfig as C, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
-const y = "items-block";
-class B extends g {
+import { BlockId as g } from "../../../enums/block.js";
+import { useOnboardingStore as p } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as f } from "../../../utils/migrationBannerHtml.js";
+import { Block as u, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SETTINGS_ENUMS as a, DefaultConfigValues as i } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as C } from "./template.js";
+import { getItemsBlockContainer as y, getItemsBlockConfig as b, getDefaultItemsBlockConfig as h } from "./utils/nodeConfigUtils.js";
+const c = g.Items;
+class E extends u {
   getId() {
-    return y;
+    return c;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return f.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -20,10 +22,17 @@ class B extends g {
   getDescription() {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
+  getSettingsPanelTitleHtml() {
+    return f(
+      c,
+      this.api.translate("Items"),
+      this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
+    );
+  }
   getTemplate() {
-    return p({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return C({
+      orientation: a.ORIENTATION.VERTICAL,
+      itemsType: a.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
       currencySymbol: i.productPriceCurrencySymbolControlValue,
       currencyLocation: i.productPriceCurrencyLocationControlValue,
@@ -34,21 +43,21 @@ class B extends g {
     return !1;
   }
   onCreated(n) {
-    const s = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
-    r.querySelector('[product-attr="imageSrc"] img') || s.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = u(n);
+    const l = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
+    r.querySelector('[product-attr="imageSrc"] img') || l.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const e = y(n);
     if (!e)
       return;
-    const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
+    const s = e.getNodeConfig(), m = s && Object.keys(s).length > 0, t = b(n);
     if (t != null && t.initialized)
-      l ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
+      m ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
     else {
-      const m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+      const d = h();
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), p().startOnboarding("itemsOnboarding");
     }
   }
 }
 export {
-  y as BLOCK_ID,
-  B as ItemsBlock
+  c as BLOCK_ID,
+  E as ItemsBlock
 };

package/dist/extensions/Blocks/Items/iconsRegistry.js

@@ -1,5 +1,6 @@
-import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class i extends o {
+import o from "../../../static/assets/info.svg.js";
+import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class s extends r {
   registerIconsSvg(t) {
     t["items-icon"] = `
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19,14 +20,14 @@ class i extends o {
             </svg>
         `, t["horizontal-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor" 
+                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
-                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor" 
+                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `;
+        `, t["migration-info-icon"] = o;
   }
 }
 export {
-  i as ItemsIconsRegistry
+  s as ItemsIconsRegistry
 };

package/dist/extensions/Blocks/Items/items.css.js

@@ -17,6 +17,54 @@ const n = `/* Utils */
 .container:has(.items-controls-container) {
     padding: 0
 }
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --items-migration-padding: 16px;
+    --items-migration-title-height: 61px;
+    --items-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.items-block-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--items-migration-padding) + var(--items-migration-box-height));
+}
+
+/* Info box container */
+.items-block-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--items-migration-padding);
+    right: var(--items-migration-padding);
+    top: calc(var(--items-migration-padding) + var(--items-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.items-block-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.items-block-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,13 +1,15 @@
-var p = Object.defineProperty;
-var f = (r, o, t) => o in r ? p(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var g = (r, o, t) => f(r, typeof o != "symbol" ? o + "" : o, t);
-import { Block as h, BlockCompositionType as I, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var f = Object.defineProperty;
+var h = (r, o, t) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => h(r, typeof o != "symbol" ? o + "" : o, t);
+import { BlockId as I } from "../../../enums/block.js";
+import { getMigrationBannerHtml as k } from "../../../utils/migrationBannerHtml.js";
+import { Block as B, BlockCompositionType as _, ModificationDescription as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { ensureMobileCssRulesExist as d } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as s } from "./services/configService.js";
 import { useRecommendationExtensionStore as u } from "./store/recommendation.js";
-import { getDefaultTemplate as k } from "./templates/grid/template.js";
-const B = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
-class y extends h {
+import { getDefaultTemplate as A } from "./templates/grid/template.js";
+const p = I.Recommendation, c = "recommendation-block-v2", a = "recommendation-id";
+class T extends B {
   constructor() {
     super();
     /**
@@ -17,13 +19,13 @@ class y extends h {
     g(this, "_pendingBlockId", null);
   }
   getId() {
-    return B;
+    return p;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return I.CONTAINER;
+    return _.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -31,6 +33,13 @@ class y extends h {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  getSettingsPanelTitleHtml() {
+    return k(
+      p,
+      this.api.translate("Recommendation Block"),
+      this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
+    );
+  }
   /**
    * Returns the template HTML for a new recommendation block.
    * Generates a unique recommendation ID and embeds the instance class
@@ -40,7 +49,7 @@ class y extends h {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, k(t);
+    return this._pendingBlockId = t, A(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -115,7 +124,7 @@ class y extends h {
     if (!n)
       return;
     const i = this.api.getDocumentModifier();
-    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new _(`Assign recommendation ID ${e}`));
+    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new R(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -149,6 +158,6 @@ class y extends h {
   }
 }
 export {
-  B as BLOCK_ID,
-  y as RecommendationBlock
+  p as BLOCK_ID,
+  T as RecommendationBlock
 };