@useinsider/guido 1.0.3-beta.1cd6abc → 1.0.3-beta.1d07a49

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

@@ -0,0 +1,160 @@
+import { BlockType as t, BlockAttr as n } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlockId as o } from "../constants.js";
+import { generateTemplate as l, prepareProductRows as s, spacer as d, DEFAULTS as p, getDefaultProducts as i } from "./templateUtils.js";
+import { DEFAULT_CARD_COMPOSITION as $ } from "./templateUtils.js";
+const g = `
+    <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>
+                                            <${t.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>
+                                            </${t.BLOCK_TEXT}>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            ${d}
+                            <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>
+`, a = {
+  productImage: (e) => `
+        <${t.BLOCK_IMAGE}
+            ${n.BLOCK_IMAGE.src}="${e.image_url}"
+            ${n.BLOCK_IMAGE.alt}="${e.name}"
+            ${n.BLOCK_IMAGE.href}="#"
+            class="product-image"
+            align="center"
+            style="max-width: 100%; height: auto; margin: 0 auto;"
+            esd-extension-block-id="${o.IMAGE}">
+        </${t.BLOCK_IMAGE}>
+    `,
+  productName: (e) => `
+        <${t.BLOCK_TEXT}
+            class="product-name"
+            align="center"
+            style="font-size: 16px; color: #333333; font-weight: 600; padding: 15px 10px; text-align: center;"
+            esd-extension-block-id="${o.NAME}">
+            <p path="1" contenteditable="false">
+                <strong path="1,0">${e.name}</strong>
+            </p>
+        </${t.BLOCK_TEXT}>
+    `,
+  productPrice: () => `
+        <${t.BLOCK_TEXT}
+            class="product-price"
+            align="center"
+            style="padding: 10px; text-align: center;"
+            esd-extension-block-id="${o.PRICE}">
+            <p path="1" contenteditable="false">
+                <span class="current-price" style="font-size: 16px; color: #333333; font-weight: bold;">
+                    <strong path="1,0">18,00 TRY</strong>
+                </span>
+            </p>
+        </${t.BLOCK_TEXT}>
+    `,
+  productOldPrice: () => `
+        <${t.BLOCK_TEXT}
+            class="product-old-price"
+            align="center"
+            style="padding: 10px; text-align: center;"
+            esd-extension-block-id="${o.OLD_PRICE}">
+            <p path="1" contenteditable="false">
+                <span class="old-price" style="font-size: 14px; color: #999999; text-decoration: line-through;">
+                    <s path="1,0">20,00 TRY</s>
+                </span>
+            </p>
+        </${t.BLOCK_TEXT}>
+    `,
+  productButton: () => `
+        <${t.BLOCK_BUTTON}
+            ${n.BLOCK_BUTTON.href}="#"
+            class="product-button"
+            align="center"
+            style="padding: 15px 10px 20px 10px; text-align: center;"
+            esd-extension-block-id="${o.BUTTON}">
+            <span class="es-button-border">
+                <a
+                    href="#"
+                    class="es-button buy-button"
+                    target="_blank"
+                    style="
+                        display: inline-block;
+                        width: 90%;
+                        max-width: 150px;
+                        padding: 12px 20px;
+                        background-color: #ffffff;
+                        color: #333333;
+                        text-decoration: none;
+                        border: 2px solid #cccccc;
+                        font-size: 16px;
+                        box-sizing: border-box;
+                    ">
+                    Buy
+                </a>
+            </span>
+        </${t.BLOCK_BUTTON}>
+    `
+};
+function x() {
+  const e = i();
+  return l(
+    g,
+    e,
+    3,
+    a,
+    p.TITLE
+  );
+}
+function f(e, r, c) {
+  return s(
+    e,
+    r,
+    a,
+    c
+  );
+}
+export {
+  p as DEFAULTS,
+  $ as DEFAULT_CARD_COMPOSITION,
+  g as default,
+  i as getDefaultProducts,
+  x as getDefaultTemplate,
+  f as prepareProductRows
+};

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

@@ -0,0 +1,152 @@
+import { prepareProductRows as n } from "./templateUtils.js";
+import { DEFAULTS as i, getDefaultProducts as p } from "./templateUtils.js";
+const a = `
+    <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>
+`, l = {
+  productImage: (t) => `
+        <tr>
+            <td
+                class="esd-block-image product-image"
+                esd-extension-block-id="recommendation-block-image"
+                align="center"
+                style="font-size: 0px;">
+                <a target="_blank" href="${t.url}">
+                    <img
+                        src="${t.image_url}"
+                        alt="${t.name}"
+                        width="120"
+                        style="display: block; max-width: 100%; height: auto;"
+                        class="adapt-img">
+                </a>
+            </td>
+        </tr>
+    `,
+  productName: (t) => `
+        <tr>
+            <td
+                class="esd-block-text product-name"
+                esd-extension-block-id="recommendation-block-name"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 16px; color: #333333; font-weight: 600; text-align: center;">
+                    <strong path="1,0">${t.name}</strong>
+                </p>
+            </td>
+        </tr>
+    `,
+  productPrice: () => `
+        <tr>
+            <td
+                class="esd-block-text product-price"
+                esd-extension-block-id="recommendation-block-price"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 16px; color: #333333; font-weight: bold; text-align: center;">
+                    <strong path="1,0">18,00 TRY</strong>
+                </p>
+            </td>
+        </tr>
+    `,
+  productOldPrice: () => `
+        <tr>
+            <td
+                class="esd-block-text product-old-price"
+                esd-extension-block-id="recommendation-block-old-price"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 14px; color: #999999; text-decoration: line-through; text-align: center;">
+                    <s path="1,0">20,00 TRY</s>
+                </p>
+            </td>
+        </tr>
+    `,
+  productButton: (t) => `
+        <tr>
+            <td
+                class="esd-block-button product-button"
+                esd-extension-block-id="recommendation-block-button"
+                align="center">
+                <span class="es-button-border" style="display: block;">
+                    <a
+                        href="${t.url}"
+                        target="_blank"
+                        class="es-button">
+                        {-{-PRODUCT_BUTTON_TEXT-}-}
+                    </a>
+                </span>
+            </td>
+        </tr>
+    `
+};
+function d(t, e, o) {
+  return n(
+    t,
+    e,
+    l,
+    o
+  );
+}
+export {
+  i as DEFAULTS,
+  a as default,
+  p as getDefaultProducts,
+  d as prepareProductRows
+};

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

@@ -0,0 +1,180 @@
+const R = {
+  TITLE: "You May Also Like!"
+}, O = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`, w = `
+    <tr>
+        <td>
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
+                {-{-PRODUCTS-}-}
+            </table>
+        </td>
+    </tr>
+`, i = `
+    <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">
+            <tr>
+                <td
+                    class="product-attribute-cell"
+                    valign="top">
+                    <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                        <tbody>
+                            {-{-PRODUCT_CONTENT-}-}
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, b = [
+  "productImage",
+  "productName",
+  "productOldPrice",
+  "productPrice",
+  "productButton"
+];
+function C() {
+  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 N(p, r, e, l = b) {
+  const n = (100 / r).toFixed(2), a = [];
+  for (let o = 0; o < p.length; o += r)
+    a.push(p.slice(o, o + r));
+  let c = "";
+  return a.forEach((o, _) => {
+    _ > 0 && (c += O);
+    let s = "", u = "", d = "", m = "", g = "";
+    o.forEach((t) => {
+      s += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productImage(t)
+      ), u += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productName(t)
+      ), d += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productPrice(t)
+      ), m += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productOldPrice(t)
+      ), g += i.replace(
+        "{-{-PRODUCT_CONTENT-}-}",
+        e.productButton(t)
+      );
+    });
+    const T = {
+      productImage: s,
+      productName: u,
+      productPrice: d,
+      productOldPrice: m,
+      productButton: g
+    }, h = l.filter((t) => !!T[t]).map((t) => `<tr>${T[t]}</tr>`).join("");
+    c += w.replace("{-{-PRODUCTS-}-}", h);
+  }), c.replaceAll("{-{-COLUMN_WIDTH-}-}", `${n}%`);
+}
+function P(p, r, e, l, n = R.TITLE, a) {
+  const c = N(
+    r,
+    e,
+    l,
+    a
+  );
+  return p.replace("{-{-TITLE-}-}", n).replace("{-{-PRODUCT_ROWS-}-}", c);
+}
+export {
+  R as DEFAULTS,
+  b as DEFAULT_CARD_COMPOSITION,
+  P as generateTemplate,
+  C as getDefaultProducts,
+  N as prepareProductRows,
+  i as productCardWrapper,
+  w as productRow,
+  O as spacer
+};

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

@@ -1,17 +1,17 @@
 var _ = Object.defineProperty;
-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);
+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);
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.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 { 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 { 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"]', B = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", C = {
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class D extends S {
+class D extends d {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -25,7 +25,7 @@ class D extends S {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return h.BLOCK;
+    return L.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -34,10 +34,10 @@ class D extends S {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return L();
+    return h();
   }
   onCreated(e) {
-    "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+    "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());
   }
   onSelect(e) {
     this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
@@ -50,8 +50,8 @@ class D extends S {
   }
   _setupSelectEventListener() {
     this._removeSelectEventListener(), this.selectEventListener = (e) => {
-      const r = e, { collectionType: t, selectedPages: s } = r.detail;
-      this._updateBlock(t, s.join(","));
+      const s = e, { collectionType: t, selectedPages: r } = s.detail;
+      this._updateBlock(t, r.join(","));
     }, document.addEventListener(a.SELECT, this.selectEventListener);
   }
   _removeSelectEventListener() {
@@ -71,17 +71,17 @@ class D extends S {
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
   }
-  _updateBlock(e, r) {
+  _updateBlock(e, s) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
     const t = this.currentNode.querySelector(g);
     if (!t)
       return;
-    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"));
+    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"));
   }
   _getMergeTag(e) {
-    return C[e] ?? f;
+    return B[e] ?? f;
   }
   _openDrawer() {
     try {
@@ -93,11 +93,11 @@ class D extends S {
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(B).forEach((t) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
       if ("getAttribute" in t) {
-        const s = t.getAttribute(o.PAGE_TYPE);
-        if (s) {
-          const l = Number(s);
+        const r = t.getAttribute(o.PAGE_TYPE);
+        if (r) {
+          const l = Number(r);
           l === E.GLOBAL_UNSUBSCRIBE ? e.isGlobalUnsubscribeDisabled = !0 : l === E.SUBSCRIPTION_PREFERENCE_CENTER && (e.isSubscriptionPreferencesCenterDisabled = !0);
         }
       }
@@ -106,11 +106,11 @@ class D extends S {
   _loadBlockState(e) {
     if (!("getAttribute" in e))
       return;
-    const r = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
-    if (!r || !t)
+    const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
+    if (!s || !t)
       return;
-    const s = c(), l = Number(r), p = m(t);
-    s.setCollectionWithoutAutoSelection(l), s.loadSelectedTemplates(p);
+    const r = c(), l = Number(s), p = m(t);
+    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
   }
   _resetStoreState() {
     c().$reset();
@@ -118,11 +118,11 @@ class D extends S {
   _removeBlockTemplatesFromStore(e) {
     if (!("getAttribute" in e))
       return;
-    const r = e.getAttribute(o.PAGE_LIST);
-    if (!r)
+    const s = e.getAttribute(o.PAGE_LIST);
+    if (!s)
       return;
-    const t = c(), s = m(r);
-    t.removeUnsubscribePages(s);
+    const t = c(), r = m(s);
+    t.removeUnsubscribePages(r);
   }
 }
 export {