@useinsider/guido 2.1.0-beta.e13d291 → 2.1.0-beta.e2153c2

package/dist/extensions/Blocks/Recommendation/templates/grid/migration.js

@@ -1,5 +1,5 @@
 import { ATTR_PRODUCT_BUTTON as s, ATTR_PRODUCT_OMNIBUS_DISCOUNT as d, ATTR_PRODUCT_OMNIBUS_PRICE as c, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as i, ATTR_PRODUCT_NAME as r, ATTR_PRODUCT_IMAGE as p } from "../../constants/selectors.js";
-import { prepareVerticalProductRows as b } from "./template.js";
+import { prepareGridProductRows as b } from "./template.js";
 const u = `
     <td
         align="left"

package/dist/extensions/Blocks/Recommendation/templates/grid/template.js

@@ -1,7 +1,7 @@
-import { DEFAULT_PRODUCTS_PER_ROW as T } from "../../constants/layout.js";
-import { DEFAULT_CARD_COMPOSITION as d, spacer as m, createBlockTemplate as R, DEFAULTS as I, getDefaultProducts as L, DEFAULT_CARD_VISIBILITY as b } from "../utils.js";
-import { verticalElementRenderer as w } from "./elementRenderer.js";
-const E = `
+import { DEFAULT_PRODUCTS_PER_ROW as m, DEFAULT_MOBILE_CARDS_IN_ROW as I } from "../../constants/layout.js";
+import { DEFAULT_CARD_COMPOSITION as _, spacer as E, getDefaultProducts as S, createBlockTemplate as A, DEFAULTS as b, DEFAULT_CARD_VISIBILITY as D } from "../utils.js";
+import { gridElementRenderer as w, ATTRIBUTE_CELL_CLASS as C, DEFAULT_CELL_PADDING as f } from "./elementRenderer.js";
+const O = `
     <tr class="recommendation-product-row">
         <td>
             <table
@@ -18,7 +18,7 @@ const E = `
             </table>
         </td>
     </tr>
-`, S = `
+`, U = `
     <tr
         class="recommendation-attribute-row"
         data-attribute-type="{-{-ATTR_TYPE-}-}"
@@ -27,43 +27,40 @@ const E = `
         {-{-CELLS-}-}
     </tr>
 `;
-function _(r, e, o, i = d) {
-  const c = (100 / e).toFixed(2);
-  return i.filter((t) => o[t]).map((t) => {
-    const l = b[t] ?? !0, n = l ? "" : 'style="display: none;"', a = r.map((p) => {
-      const u = o[t];
-      return u(p).replace("<td", `<td width="${c}%"`);
+function g(t, e, r, n = _) {
+  const c = (100 / e).toFixed(2), s = e - t.length, o = `<td class="${C}" style="padding: ${f};" width="${c}%"></td>`, i = s > 0 ? o.repeat(s) : "";
+  return n.filter((l) => r[l]).map((l) => {
+    const p = D[l] ?? !0, T = p ? "" : 'style="display: none;"', u = t.map((R) => {
+      const L = r[l];
+      return L(R).replace("<td", `<td width="${c}%"`);
     }).join("");
-    return S.replace("{-{-ATTR_TYPE-}-}", t).replace("{-{-VISIBILITY-}-}", l ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", n).replace("{-{-CELLS-}-}", a);
+    return U.replace("{-{-ATTR_TYPE-}-}", l).replace("{-{-VISIBILITY-}-}", p ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", T).replace("{-{-CELLS-}-}", u + i);
   }).join("");
 }
-function A(r, e, o, i) {
+function P(t, e, r, n) {
   const c = [];
-  for (let t = 0; t < r.length; t += e)
-    c.push(r.slice(t, t + e));
-  return c.map((t, l) => {
-    const n = _(
-      t,
-      e,
+  for (let o = 0; o < t.length; o += e)
+    c.push(t.slice(o, o + e));
+  return c.map((o, i) => {
+    const a = g(
       o,
-      i
-    ), a = E.replace("{-{-ATTRIBUTE_ROWS-}-}", n);
-    return l > 0 ? m + a : a;
+      e,
+      r,
+      n
+    ), l = O.replace("{-{-ATTRIBUTE_ROWS-}-}", a);
+    return i > 0 ? E + l : l;
   }).join("");
 }
-function f(r, e, o) {
-  return A(r, e, w, o);
+function d(t, e, r) {
+  return P(t, e, w, r);
 }
-function y() {
-  const r = R("grid"), e = f(
-    L(),
-    T
-  );
-  return r.replace("{-{-TITLE-}-}", I.TITLE).replace("{-{-PRODUCT_ROWS-}-}", e);
+function W(t) {
+  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, r = A("grid", e), n = S(), c = d(n, m), s = d(n, I);
+  return r.replace("{-{-TITLE-}-}", b.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", s);
 }
 export {
-  y as getDefaultTemplate,
-  f as prepareProductRows,
-  _ as prepareVerticalAttributeRows,
-  A as prepareVerticalProductRows
+  W as getDefaultTemplate,
+  g as prepareGridAttributeRows,
+  P as prepareGridProductRows,
+  d as prepareProductRows
 };

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -1,5 +1,5 @@
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as u, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
+import { ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
 import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
 import { formatPrice as _ } from "../../utils/priceFormatter.js";
 import { sanitizeImageUrl as y } from "../utils.js";
@@ -14,14 +14,14 @@ function p() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function a(t, e = "price") {
-  const n = p(), r = t[e], i = (r == null ? void 0 : r[n.code]) ?? Object.values(r ?? {})[0] ?? 0;
+function s(t, e = "price") {
+  const n = p(), r = t[e], a = (r == null ? void 0 : r[n.code]) ?? Object.values(r ?? {})[0] ?? 0;
   return _({
-    price: i,
+    price: a,
     currency: n
   });
 }
-const P = {
+const $ = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
@@ -35,18 +35,13 @@ const P = {
             data-visibility="1"
             align="center"
             valign="middle">
-            <div style="position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;">
-                <a
-                    target="_blank"
-                    href="${t.url}"
-                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                    <img
-                        src="${y(t.image_url)}"
-                        alt="${t.name}"
-                        style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;"
-                        class="adapt-img product-image">
-                </a>
-            </div>
+            <a target="_blank" href="${t.url}">
+                <img
+                    src="${y(t.image_url)}"
+                    alt="${t.name}"
+                    style="display: block; max-width: 100%; height: auto;"
+                    class="adapt-img product-image">
+            </a>
         </td>
     `,
   /**
@@ -74,7 +69,7 @@ const P = {
                 esd-extension-block-id="${o.PRICE}"
                 align="left">
                 <p contenteditable="false" style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
-                    <strong>${a(t, "price")}</strong>
+                    <strong>${s(t, "price")}</strong>
                 </p>
             </td>
         </tr>
@@ -91,7 +86,7 @@ const P = {
                 <p
                     contenteditable="false"
                     style="font-size: 14px; color: #999999; text-decoration: line-through; margin: 0;">
-                    <strong>${a(t, "original_price")}</strong>
+                    <strong>${s(t, "original_price")}</strong>
                 </p>
             </td>
         </tr>
@@ -99,7 +94,7 @@ const P = {
   /**
    * Omnibus price element - row for info cell table
    */
-  [u]: (t) => `
+  [m]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-omnibus-price"
@@ -109,7 +104,7 @@ const P = {
                 align="left">
                 <p style="font-size: 12px; color: #666666; margin: 0;">
                     <span class="omnibus-text-before">Lowest 30-day price: </span>
-                    <span class="omnibus-price-value">${a(t, "original_price")}</span>
+                    <span class="omnibus-price-value">${s(t, "original_price")}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
@@ -118,9 +113,9 @@ const P = {
   /**
    * Omnibus discount element - row for info cell table
    */
-  [m]: (t) => {
-    var s, c;
-    const e = p(), n = ((s = t.original_price) == null ? void 0 : s[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, r = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = n > 0 ? Math.round((n - r) / n * 100) : 0, b = i > 0 ? `-${i}%` : "0%";
+  [u]: (t) => {
+    var i, c;
+    const e = p(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, r = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - r) / n * 100) : 0, b = a > 0 ? `-${a}%` : "0%";
     return `
         <tr>
             <td
@@ -170,5 +165,5 @@ const P = {
     `
 };
 export {
-  P as horizontalElementRenderer
+  $ as listElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/templates/list/template.js

@@ -1,6 +1,6 @@
-import { ATTR_PRODUCT_IMAGE as E, ATTR_PRODUCT_NAME as s, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as a, ATTR_PRODUCT_OMNIBUS_PRICE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as T, ATTR_PRODUCT_BUTTON as N } from "../../constants/selectors.js";
-import { spacer as $, DEFAULT_CARD_VISIBILITY as n } from "../utils.js";
-import { horizontalElementRenderer as o } from "./elementRenderer.js";
+import { ATTR_PRODUCT_IMAGE as E, ATTR_PRODUCT_NAME as l, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as a, ATTR_PRODUCT_OMNIBUS_PRICE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as T, ATTR_PRODUCT_BUTTON as N } from "../../constants/selectors.js";
+import { spacer as $, DEFAULT_CARD_VISIBILITY as o } from "../utils.js";
+import { listElementRenderer as e } from "./elementRenderer.js";
 const f = `
     <tr class="recommendation-product-row">
         <td style="padding: 0 5px;">
@@ -20,30 +20,30 @@ const f = `
     </tr>
 `;
 function V(t) {
-  const i = o[E](t), l = n[s], r = n[c], R = n[a], C = n[d], b = n[T], e = (w, A, p) => {
+  const r = e[E](t), s = o[l], i = o[c], R = o[a], C = o[d], b = o[T], n = (w, A, p) => {
     const I = p ? "" : ' style="display: none;"', g = w.replace(/<tr>/, "").replace(/<\/tr>/, "");
     return `<tr
             class="recommendation-attribute-row"
             data-attribute-type="${A}"
             data-visibility="${p ? "1" : "0"}"${I}>${g}</tr>`;
-  }, m = e(
-    o[s](t),
-    s,
-    l
-  ), _ = e(
-    o[c](t),
+  }, m = n(
+    e[l](t),
+    l,
+    s
+  ), _ = n(
+    e[c](t),
     c,
-    r
-  ), O = e(
-    o[a](t),
+    i
+  ), O = n(
+    e[a](t),
     a,
     R
-  ), P = e(
-    o[d](t),
+  ), P = n(
+    e[d](t),
     d,
     C
-  ), u = e(
-    o[T](t),
+  ), u = n(
+    e[T](t),
     T,
     b
   ), D = `
@@ -58,16 +58,16 @@ function V(t) {
                 </tbody>
             </table>
         </td>
-    `, U = o[N](t), y = i + D + U;
+    `, U = e[N](t), y = r + D + U;
   return f.replace("{-{-PRODUCT_CONTENT-}-}", y);
 }
 function M(t) {
-  return t.map((i, l) => {
-    const r = V(i);
-    return l > 0 ? $ + r : r;
+  return t.map((r, s) => {
+    const i = V(r);
+    return s > 0 ? $ + i : i;
   }).join("");
 }
 export {
-  V as getHorizontalProductCard,
+  V as getListProductCard,
   M as prepareProductRows
 };

package/dist/extensions/Blocks/Recommendation/templates/utils.js

@@ -1,34 +1,34 @@
-import { ATTR_PRODUCT_IMAGE as r, ATTR_PRODUCT_NAME as a, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as c, ATTR_PRODUCT_OMNIBUS_PRICE as l, ATTR_PRODUCT_OMNIBUS_DISCOUNT as s, ATTR_PRODUCT_BUTTON as n } from "../constants/selectors.js";
-const _ = {
+import { ATTR_PRODUCT_IMAGE as n, ATTR_PRODUCT_NAME as o, ATTR_PRODUCT_OLD_PRICE as a, ATTR_PRODUCT_PRICE as c, ATTR_PRODUCT_OMNIBUS_PRICE as l, ATTR_PRODUCT_OMNIBUS_DISCOUNT as i, ATTR_PRODUCT_BUTTON as s } from "../constants/selectors.js";
+const g = {
   TITLE: "You May Also Like!"
 }, u = [
-  r,
-  a,
+  n,
   o,
+  a,
   c,
   l,
-  s,
-  n
-], m = {
-  [r]: !0,
-  [a]: !0,
-  [c]: !0,
+  i,
+  s
+], b = {
+  [n]: !0,
   [o]: !0,
+  [c]: !0,
+  [a]: !0,
   [l]: !1,
-  [s]: !1,
-  [n]: !0
-}, d = `
+  [i]: !1,
+  [s]: !0
+}, p = `
     <tr>
         <td class="spacer" style="height: 10px;"></td>
     </tr>
-`, i = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
-function g(t) {
-  return !t || typeof t != "string" || t.trim() === "" ? i : t.startsWith("http://") ? t.replace("http://", "https://") : t;
+`, d = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
+function R(t) {
+  return !t || typeof t != "string" || t.trim() === "" ? d : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function e(t) {
+function T(t) {
   return {
     name: "Product Name",
-    image_url: i,
+    image_url: d,
     price: { USD: 18 },
     original_price: { USD: 20 },
     discount: { USD: 2 },
@@ -40,22 +40,19 @@ function e(t) {
     category: []
   };
 }
-function b() {
-  return [
-    e("1"),
-    e("2"),
-    e("3"),
-    e("4"),
-    e("5"),
-    e("6")
-  ];
+function D(t = 6) {
+  return Array.from(
+    { length: t },
+    (e, r) => T(String(r + 1))
+  );
 }
-function R(t = "grid") {
+function O(t = "grid", e) {
+  const r = t === "list" ? `
+        data-layout="list"` : "";
   return `
     <td
         align="left"
-        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20"${t === "list" ? `
-        data-layout="list"` : ""}>
+        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20${e ? ` ${e}` : ""}"${r}>
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                 <td align="center">
@@ -87,11 +84,12 @@ function R(t = "grid") {
                                     </table>
                                 </td>
                             </tr>
-                            ${d}
+                            ${p}
                             <tr>
                                 <td>
                                     <table
-                                        class="ins-recommendation-product-container"
+                                        class="ins-recommendation-product-container
+                                            ins-recommendation-desktop-container"
                                         width="100%"
                                         cellpadding="0"
                                         cellspacing="0"
@@ -101,6 +99,21 @@ function R(t = "grid") {
                                     </table>
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container
+                                            ins-recommendation-mobile-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                        style="display: none;"
+                                    >
+                                        {-{-MOBILE_PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
                 </td>
@@ -110,12 +123,12 @@ function R(t = "grid") {
 `;
 }
 export {
-  _ as DEFAULTS,
+  g as DEFAULTS,
   u as DEFAULT_CARD_COMPOSITION,
-  m as DEFAULT_CARD_VISIBILITY,
-  i as PLACEHOLDER_IMAGE,
-  R as createBlockTemplate,
-  b as getDefaultProducts,
-  g as sanitizeImageUrl,
-  d as spacer
+  b as DEFAULT_CARD_VISIBILITY,
+  d as PLACEHOLDER_IMAGE,
+  O as createBlockTemplate,
+  D as getDefaultProducts,
+  R as sanitizeImageUrl,
+  p as spacer
 };

package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js

@@ -1,25 +1,25 @@
-function p(t) {
-  const r = {
+function m(t) {
+  const e = {
     "&": "&",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#39;"
   };
-  return t.replace(/[&<>"']/g, (n) => r[n]);
+  return t.replace(/[&<>"']/g, (n) => e[n]);
 }
-function m(t) {
-  return "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML() : "innerHTML" in t ? t.innerHTML : "";
+function p(t) {
+  return "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML().trim() : "innerHTML" in t ? t.innerHTML : "";
 }
-function T(t, r) {
-  const n = p(r);
+function T(t, e) {
+  const n = m(e);
   if (!t)
     return n;
-  const e = m(t);
-  if (!e || e.trim() === "" || !/<(strong|em|u|s|b|i)\b/i.test(e))
+  const r = p(t);
+  if (!r || r.trim() === "" || !/<(strong|em|u|s|b|i)\b/i.test(r))
     return n;
   const i = [], o = [];
-  let c = e.trim();
+  let c = r.trim();
   for (; ; ) {
     const u = c.match(/^<(strong|em|u|s|b|i)(\s[^>]*)?>(.*)$/is);
     if (!u)

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

@@ -1,17 +1,17 @@
 var d = Object.defineProperty;
-var _ = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var u = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
+var h = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => h(n, typeof i != "symbol" ? i + "" : i, e);
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
-import { Block as h, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { Block as _, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { getDefaultTemplate as L } from "./template.js";
 import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
 import { parsePageList as p } from "./utils/utils.js";
-const g = "unsubscribe-block", v = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", T = {
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", T = "{{ins-unsubscribe-link}}", B = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class R extends h {
+class R extends _ {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,7 +19,7 @@ class R extends h {
     u(this, "currentNode");
   }
   getId() {
-    return g;
+    return v;
   }
   getIcon() {
     return "unsubscribe-icon";
@@ -47,8 +47,8 @@ class R extends h {
   }
   _setupSelectEventListener() {
     this._removeSelectEventListener(), this.selectEventListener = (e) => {
-      const s = e, { collectionType: t, selectedPages: r } = s.detail;
-      this._updateBlock(t, r.join(","));
+      const r = e, { collectionType: s, selectedPages: t } = r.detail;
+      this._updateBlock(s, t.join(","));
     }, document.addEventListener(a.SELECT, this.selectEventListener);
   }
   _removeSelectEventListener() {
@@ -74,17 +74,17 @@ class R extends h {
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
   }
-  _updateBlock(e, s) {
+  _updateBlock(e, r) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const t = this.currentNode.querySelector(v);
-    if (!t)
+    const s = this.currentNode.querySelector(g);
+    if (!s)
       return;
-    const r = this._getMergeTag(e);
-    this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
+    const t = this._getMergeTag(e);
+    this.api.getDocumentModifier().modifyHtml(s).setAttribute("href", t).apply(new b(`Updated unsubscribe link to ${t}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, r).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return T[e] ?? B;
+    return B[e] ?? T;
   }
   _openDrawer() {
     if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
@@ -97,24 +97,24 @@ class R extends h {
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((t) => {
-      if ("getAttribute" in t) {
-        const r = t.getAttribute(o.PAGE_TYPE);
-        if (r) {
-          const l = Number(r);
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((s) => {
+      if ("getAttribute" in s) {
+        const t = s.getAttribute(o.PAGE_TYPE);
+        if (t) {
+          const l = Number(t);
           l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
         }
       }
     });
   }
-  _loadBlockState(e) {
+  async _loadBlockState(e) {
     if (!("getAttribute" in e))
       return;
-    const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
-    if (!s || !t)
+    const r = e.getAttribute(o.PAGE_TYPE), s = e.getAttribute(o.PAGE_LIST);
+    if (!r || !s)
       return;
-    const r = c(), l = Number(s), m = p(t);
-    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(m);
+    const t = c(), l = Number(r), m = p(s);
+    await t.fetchTemplates(), t.setCollectionWithoutAutoSelection(l), t.loadSelectedTemplates(m);
   }
   _resetStoreState() {
     c().$reset();
@@ -122,14 +122,14 @@ class R extends h {
   _removeBlockTemplatesFromStore(e) {
     if (!("getAttribute" in e))
       return;
-    const s = e.getAttribute(o.PAGE_LIST);
-    if (!s)
+    const r = e.getAttribute(o.PAGE_LIST);
+    if (!r)
       return;
-    const t = c(), r = p(s);
-    t.removeUnsubscribePages(r);
+    const s = c(), t = p(r);
+    s.removeUnsubscribePages(t);
   }
 }
 export {
-  g as UNSUBSCRIBE_BLOCK_ID,
+  v as UNSUBSCRIBE_BLOCK_ID,
   R as UnsubscribeBlock
 };

package/dist/extensions/Blocks/Unsubscribe/control.js

@@ -1,18 +1,18 @@
-var h = Object.defineProperty;
-var d = (a, s, e) => s in a ? h(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
-var u = (a, s, e) => d(a, typeof s != "symbol" ? s + "" : s, e);
+var d = Object.defineProperty;
+var h = (a, s, e) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
+var u = (a, s, e) => h(a, typeof s != "symbol" ? s + "" : s, e);
 import { useUnsubscribeStore as l } from "../../../stores/unsubscribe.js";
 import { Control as T, UEAttr as i, UIElementType as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { DATA_ATTRIBUTES as p } from "./utils/constants.js";
 import { parsePageList as _ } from "./utils/utils.js";
-const g = "ui-elements-unsubscribe", r = {
+const v = "ui-elements-unsubscribe", r = {
   SELECT_BUTTON: "selectTemplateButton",
   PREV_BUTTON: "prevButton",
   NEXT_BUTTON: "nextButton",
   COUNTER_TEXT: "counterText",
   PREVIEW_IMAGE: "previewImage"
 };
-class N extends T {
+class B extends T {
   constructor() {
     super(...arguments);
     u(this, "currentPreviewIndex", 0);
@@ -22,7 +22,7 @@ class N extends T {
     u(this, "lastParsedAttribute");
   }
   getId() {
-    return g;
+    return v;
   }
   getTemplate() {
     return `
@@ -35,7 +35,7 @@ class N extends T {
   onTemplateNodeUpdated(e) {
     if (this.currentNode = e, "getAttribute" in this.currentNode) {
       const t = this.currentNode.getAttribute(p.PAGE_LIST);
-      t && (t !== this.lastParsedAttribute && (this.currentPages = _(t), this.lastParsedAttribute = t, this.currentPreviewIndex = 0), this._updatePreview(), this._updateCounter());
+      t && (t !== this.lastParsedAttribute && (this.currentPages = _(t), this.lastParsedAttribute = t, this.currentPreviewIndex = 0), this._updateCounter(), this._loadAndUpdatePreview());
     }
   }
   onRender() {
@@ -73,6 +73,9 @@ class N extends T {
   _onNextClick() {
     this.currentPreviewIndex < this.totalTemplates - 1 && (this.currentPreviewIndex++, this._updatePreview(), this._updateCounter());
   }
+  async _loadAndUpdatePreview() {
+    await l().fetchTemplates(), this._updatePreview(), this._updateCounter();
+  }
   _updatePreview() {
     var e;
     if ((e = this.currentPages) != null && e.length)
@@ -162,6 +165,6 @@ class N extends T {
   }
 }
 export {
-  g as UNSUBSCRIBE_CONTROL_ID,
-  N as UnsubscribeControl
+  v as UNSUBSCRIBE_CONTROL_ID,
+  B as UnsubscribeControl
 };