@useinsider/guido 1.0.3-beta.cf8f00f → 1.0.3-beta.d1ff593

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

@@ -0,0 +1,314 @@
+import { BlockType as o, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const R = {
+  TITLE: "You May Also Like!"
+}, m = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`, O = `
+    <td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20">
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">      
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">   
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <${o.BLOCK_TEXT} 
+                                                class="es-p10t es-p10b es-p20l es-p20r"
+                                                align="center">
+                                                <p path="1" style="font-size: 28px; color: #333333;">
+                                                    <strong path="1,0">{-{-TITLE-}-}</strong>
+                                                </p>
+                                            </${o.BLOCK_TEXT}>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            ${m}
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, w = `
+    <tr>
+        <td>
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
+                {-{-PRODUCTS-}-}
+            </table>
+        </td>
+    </tr>
+`, r = `
+    <td width="{-{-COLUMN_WIDTH-}-}" style="padding: 0 5px;" valign="top" height="100%">
+        <table
+            width="100%"
+            height="100%"
+            cellpadding="0"
+            cellspacing="0"
+            border="0"
+            class="product-card-wrapper"
+            style="background-color: #f8f8f8;">
+            <tr>
+                {-{-PRODUCT_CONTENT-}-}
+            </tr>
+        </table>
+    </td>
+`, y = `
+    <td class="product-image-cell" valign="top" style="background-color: #e8f0f2; text-align: center;">
+        <img
+            src="{-{-PRODUCT_IMAGE-}-}"
+            alt="{-{-PRODUCT_NAME-}-}"
+            style="max-width: 100%; height: auto; margin: 0 auto;">
+    </td>
+`, C = `
+    <td
+        class="product-name-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${o.BLOCK_TEXT}
+                    class="product-name es-p15t es-p15b es-p10l es-p10r"
+                    align="center"
+                    esd-extension-block-id="recommendation-block-name">
+                    <p
+                        path="1"
+                        contenteditable="false"
+                        style="font-size: 16px; color: #333333;">
+                        <strong path="1,0">{-{-PRODUCT_NAME-}-}</strong>
+                    </p>
+                </${o.BLOCK_TEXT}>
+            </tbody>
+        </table>
+    </td>
+`, f = `
+    <td class="price-cell" valign="top" style="padding: 10px; text-align: center;">
+        <span class="current-price" style="font-size: 16px; color: #333333; font-weight: bold;">18,00 TRY</span>
+        <span class="old-price" style="font-size: 14px; color: #999999; text-decoration: line-through;">20,00 TRY</span>
+    </td>
+`, k = `
+    <td
+        class="button-cell"
+        valign="top">
+        <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <tbody>
+                <${o.BLOCK_BUTTON}
+                    ${_.BLOCK_BUTTON.href}="#"
+                    class="product-name"
+                    align="center"
+                    esd-extension-block-id="recommendation-block-button">
+                    Buy
+                </${o.BLOCK_BUTTON}>
+            </tbody>
+        </table>
+    </td>
+`, E = `
+    <td
+        align="left"
+        esd-extension-block-id="recommendation-block"
+        esd-handler-name="esd-extension-RecommendationBlock"
+        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20"
+    >
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <tr>
+                                                {-{-TITLE-}-}
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="spacer" style="height: 20px;"></td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, D = [
+  "productImage",
+  "productName",
+  "productPrice",
+  "productButton"
+];
+function N(c, l, a = D) {
+  const b = (100 / l).toFixed(2), i = [];
+  for (let e = 0; e < c.length; e += l)
+    i.push(c.slice(e, e + l));
+  let n = "";
+  return i.forEach((e, T) => {
+    T > 0 && (n += m);
+    let p = "", d = "", s = "", g = "";
+    e.forEach((t) => {
+      p += r.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        y.replace("{-{-PRODUCT_IMAGE-}-}", t.image_url).replace("{-{-PRODUCT_NAME-}-}", t.name)
+      ), d += r.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        C.replace("{-{-PRODUCT_NAME-}-}", t.name)
+      ), s += r.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        f
+      ), g += r.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        k
+      );
+    });
+    const u = {
+      productImage: p,
+      productName: d,
+      productPrice: s,
+      productButton: g
+    }, h = a.filter((t) => u[t]).map((t) => `<tr>${u[t]}</tr>`).join("");
+    n += w.replace("{-{-PRODUCTS-}-}", h);
+  }), n.replaceAll("{-{-COLUMN_WIDTH-}-}", `${b}%`);
+}
+function U() {
+  return [
+    {
+      name: "Product Name",
+      image_url: "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png",
+      price: { USD: 18 },
+      original_price: { USD: 20 },
+      discount: { USD: 2 },
+      url: "https://example.com/product/1",
+      item_id: "1",
+      in_stock: 1,
+      locale: "en",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Belt",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: { TRY: 55 },
+      original_price: { TRY: 65 },
+      discount: { TRY: 10 },
+      url: "https://example.com/product/2",
+      item_id: "2",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Beanie",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
+      price: { TRY: 18 },
+      original_price: { TRY: 20 },
+      discount: { TRY: 2 },
+      url: "https://example.com/product/3",
+      item_id: "3",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Album",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: { TRY: 15 },
+      original_price: { TRY: 15 },
+      discount: { TRY: 0 },
+      url: "https://example.com/product/4",
+      item_id: "4",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Flying Ninja with a very long product name",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: { TRY: 12 },
+      original_price: { TRY: 15 },
+      discount: { TRY: 3 },
+      url: "https://example.com/product/5",
+      item_id: "5",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    },
+    {
+      name: "Single",
+      image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: { TRY: 22555 },
+      original_price: { TRY: 33989 },
+      discount: { TRY: 11434 },
+      url: "https://example.com/product/6",
+      item_id: "6",
+      in_stock: 1,
+      locale: "tr",
+      product_attributes: {},
+      category: []
+    }
+  ];
+}
+function P() {
+  const c = U(), a = N(c, 3);
+  return O.replace("{-{-TITLE-}-}", R.TITLE).replace("{-{-PRODUCT_ROWS-}-}", a);
+}
+export {
+  D as DEFAULT_CARD_COMPOSITION,
+  E as default,
+  U as getDefaultProducts,
+  P as getDefaultTemplate,
+  N as prepareProductRows
+};

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

@@ -1,17 +1,17 @@
 var _ = Object.defineProperty;
-var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var u = (n, i, e) => S(n, typeof i != "symbol" ? i + "" : i, e);
+var d = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => d(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 d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as h } from "./template.js";
+import { Block as S, BlockCompositionType as h, 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 m } from "./utils/utils.js";
-const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', B = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", C = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class D extends d {
+class D extends S {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -25,7 +25,7 @@ class D extends d {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return L.BLOCK;
+    return h.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -34,10 +34,10 @@ class D extends d {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return h();
+    return L();
   }
   onCreated(e) {
-    "getOuterHTML" in e && !e.getOuterHTML() || "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+    "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
   }
   onSelect(e) {
     this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
@@ -50,8 +50,8 @@ class D extends d {
   }
   _setupSelectEventListener() {
     this._removeSelectEventListener(), this.selectEventListener = (e) => {
-      const s = e, { collectionType: t, selectedPages: r } = s.detail;
-      this._updateBlock(t, r.join(","));
+      const r = e, { collectionType: t, selectedPages: s } = r.detail;
+      this._updateBlock(t, s.join(","));
     }, document.addEventListener(a.SELECT, this.selectEventListener);
   }
   _removeSelectEventListener() {
@@ -71,17 +71,17 @@ class D extends d {
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
   }
-  _updateBlock(e, s) {
+  _updateBlock(e, r) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
     const t = this.currentNode.querySelector(g);
     if (!t)
       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 s = this._getMergeTag(e);
+    this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", s).apply(new b(`Updated unsubscribe link to ${s}`)), 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 B[e] ?? f;
+    return C[e] ?? f;
   }
   _openDrawer() {
     try {
@@ -93,11 +93,11 @@ class D extends d {
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(B).forEach((t) => {
       if ("getAttribute" in t) {
-        const r = t.getAttribute(o.PAGE_TYPE);
-        if (r) {
-          const l = Number(r);
+        const s = t.getAttribute(o.PAGE_TYPE);
+        if (s) {
+          const l = Number(s);
           l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
         }
       }
@@ -106,11 +106,11 @@ class D extends d {
   _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), t = e.getAttribute(o.PAGE_LIST);
+    if (!r || !t)
       return;
-    const r = c(), l = Number(s), p = m(t);
-    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
+    const s = c(), l = Number(r), p = m(t);
+    s.setCollectionWithoutAutoSelection(l), s.loadSelectedTemplates(p);
   }
   _resetStoreState() {
     c().$reset();
@@ -118,11 +118,11 @@ class D extends d {
   _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 = m(s);
-    t.removeUnsubscribePages(r);
+    const t = c(), s = m(r);
+    t.removeUnsubscribePages(s);
   }
 }
 export {