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

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

@@ -1,314 +1,200 @@
-import { BlockType as o, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const R = {
+const g = {
   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">
+}, h = `
+    <td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block">
         <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>
+                <td align="center" style="padding: 20px 0;">      
+                    <!-- Email Content Container -->
+                    <table class="container" 
+                        width="600" 
+                        cellpadding="0" 
+                        cellspacing="0" 
+                        border="0" 
+                        style="max-width: 600px; width: 100%; background-color: #ffffff;">   
+                        <!-- Heading -->
+                        <tr>
+                            <td class="heading" 
+                                style="
+                                    font-size: 28px; 
+                                    font-weight: bold; 
+                                    color: #333333; 
+                                    text-align: center; 
+                                    padding: 30px 20px;">
+                                {-{-TITLE-}-}
+                            </td>
+                        </tr>
+
+                        <!-- Product Rows -->
+                        {-{-PRODUCT_ROWS-}-}
                     </table>
+                    <!-- End Email Content Container -->
                 </td>
             </tr>
         </table>
     </td>
-`, w = `
+`, u = `
     <tr>
-        <td>
+        <td style="padding: 0 20px;">
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
                 {-{-PRODUCTS-}-}
             </table>
         </td>
     </tr>
-`, r = `
+`, m = `
     <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"
+        <table width="100%" 
+            height="100%" 
+            cellpadding="0" 
+            cellspacing="0" 
+            border="0" 
+            class="product-card-wrapper" 
             style="background-color: #f8f8f8;">
             <tr>
-                {-{-PRODUCT_CONTENT-}-}
+                <td class="product-image-cell" 
+                    valign="top" 
+                    style="background-color: #e8f0f2; padding: 30px; text-align: center;">
+                    <img src="{-{-PRODUCT_IMAGE-}-}" 
+                        alt="{-{-PRODUCT_NAME-}-}" width="120" style="max-width: 100%; height: auto; margin: 0 auto;">
+                </td>
             </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>
+`, b = `
+    <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>
+                <td class="product-name-cell" 
+                    valign="top" 
+                    style="font-size: 16px; color: #333333; font-weight: 600; padding: 15px 10px; text-align: center;">
+                    {-{-PRODUCT_NAME-}-}
+                </td>
+            </tr>
         </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>
+`, x = `
+    <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>
+                <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>
+            </tr>
         </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">
+`, w = `
+    <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>
-                <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 class="button-cell" valign="top" style="padding: 15px 10px 20px 10px; text-align: center;">
+                    <a href="#" 
+                        class="buy-button" 
+                        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>
                 </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 [
+`, f = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`;
+function T() {
+  const c = [
     {
-      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: "Beanie with Logo",
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
+      price: "18,00 TRY",
+      oldPrice: "20,00 TRY",
+      url: "https://example.com/product/1"
     },
     {
       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: []
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: "55,00 TRY",
+      oldPrice: "65,00 TRY",
+      url: "https://example.com/product/2"
     },
     {
       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: []
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
+      price: "18,00 TRY",
+      oldPrice: "20,00 TRY",
+      url: "https://example.com/product/3"
     },
     {
       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: []
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: "15,00 TRY",
+      oldPrice: "15,00 TRY",
+      url: "https://example.com/product/4"
     },
     {
       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: []
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
+      price: "12,00 TRY",
+      oldPrice: "15,00 TRY",
+      url: "https://example.com/product/5"
     },
     {
       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: []
+      image: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
+      price: "22.555,00 TRY",
+      oldPrice: "33.989,00 TRY",
+      url: "https://example.com/product/6"
     }
-  ];
-}
-function P() {
-  const c = U(), a = N(c, 3);
-  return O.replace("{-{-TITLE-}-}", R.TITLE).replace("{-{-PRODUCT_ROWS-}-}", a);
+  ], l = 3, d = (100 / l).toFixed(2), a = [];
+  for (let t = 0; t < c.length; t += l)
+    a.push(c.slice(t, t + l));
+  let e = "";
+  return a.forEach((t, s) => {
+    s > 0 && (e += f);
+    let p = "", r = "", n = "", i = "";
+    t.forEach((o) => {
+      p += m.replace("{-{-PRODUCT_IMAGE-}-}", o.image).replace("{-{-PRODUCT_NAME-}-}", o.name), r += b.replace("{-{-PRODUCT_NAME-}-}", o.name), n += x, i += w;
+    }), e += u.replace("{-{-PRODUCTS-}-}", `
+            <tr>${p}</tr>
+            <tr>${r}</tr>
+            <tr>${n}</tr>
+            <tr>${i}</tr>
+        `), e = e.replaceAll("{-{-COLUMN_WIDTH-}-}", `${d}%`);
+  }), h.replace("{-{-TITLE-}-}", g.TITLE).replace("{-{-PRODUCT_ROWS-}-}", e);
 }
 export {
-  D as DEFAULT_CARD_COMPOSITION,
-  E as default,
-  U as getDefaultProducts,
-  P as getDefaultTemplate,
-  N as prepareProductRows
+  T as getDefaultTemplate
 };