@useinsider/guido 1.0.3-beta.4fc0167 → 1.0.3-beta.512f0b0

package/dist/config/migrator/index.js

@@ -1,12 +1,11 @@
-import { migrateCheckbox as m } from "./checkboxMigrator.js";
-import { migrateCouponBlock as o } from "./couponBlockMigrator.js";
+import { migrateCheckbox as o } from "./checkboxMigrator.js";
+import { migrateCouponBlock as m } from "./couponBlockMigrator.js";
 import { migrateRadioButton as i } from "./radioButtonMigrator.js";
-import { migrateRecommendation as e } from "./recommendationMigrator.js";
-import { migrateUnsubscribe as a } from "./unsubscribeMigrator.js";
-const s = async (t) => {
+import { migrateUnsubscribe as e } from "./unsubscribeMigrator.js";
+const c = async (t) => {
   let r = t;
-  return r = m(r), r = i(r), r = await a(r), r = o(r), r = e(r), r;
+  return r = o(r), r = i(r), r = await e(r), r = m(r), r;
 };
 export {
-  s as migrate
+  c as migrate
 };

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

@@ -1,10 +1,7 @@
 import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
+import { getDefaultTemplate as o } from "./template.js";
 const n = "recommendation-block";
-class m extends e {
-  constructor() {
-    super();
-  }
+class c extends e {
   getId() {
     return n;
   }
@@ -26,5 +23,5 @@ class m extends e {
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  c as RecommendationBlock
 };

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

@@ -1,14 +1,11 @@
 var _ = Object.defineProperty;
-var R = (s, n, e) => n in s ? _(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e;
-var r = (s, n, e) => R(s, typeof n != "symbol" ? n + "" : n, e);
-import { currencyDecimalCounts as l, currencyOperators as c, currencyLocationMaps as h } from "../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as m, ModificationDescription as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../common-control.js";
-import { useRecommendationExtensionStore as O } from "./store/recommendation.js";
-import { prepareProductRows as p } from "./templates/blockTemplate.js";
-import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as E } from "./templates/templateUtils.js";
-import { useDebounceFn as U } from "../../../node_modules/@vueuse/shared/index.js";
-const L = "ui-elements-recommendation-block", t = {
+var R = (o, n, e) => n in o ? _(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var r = (o, n, e) => R(o, typeof n != "symbol" ? n + "" : n, e);
+import { currencyDecimalCounts as c, currencyOperators as a, currencyLocationMaps as l } from "../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../common-control.js";
+import { useRecommendationExtensionStore as S } from "./store/recommendation.js";
+const g = "ui-elements-recommendation-block", t = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds",
   LOCALE: "language",
@@ -24,21 +21,18 @@ const L = "ui-elements-recommendation-block", t = {
   SHUFFLE_PRODUCTS: "shuffleProducts",
   RESPONSIVE: "unresponsive"
 };
-class b extends g {
+class p extends m {
   constructor() {
     super(...arguments);
-    r(this, "store", O());
+    r(this, "store", S());
     r(this, "storeUnsubscription", () => {
     });
     r(this, "addFilterListener", () => {
     });
     r(this, "addFilterButton", null);
-    r(this, "_debouncedRegenerateProductRows", U(() => {
-      this._regenerateProductRows();
-    }, 500));
   }
   getId() {
-    return L;
+    return g;
   }
   getTemplate() {
     return `
@@ -84,22 +78,22 @@ class b extends g {
     });
   }
   _initializeSelectItems() {
-    const { store: e } = this, o = e.getActivePredictiveAlgorithms, i = e.getLanguages, a = {
-      [t.ALGORITHM]: o,
+    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
+      [t.ALGORITHM]: s,
       [t.LOCALE]: i,
       [t.CURRENCY]: e.currencyList,
-      [t.CURRENCY_LOCATION]: h,
+      [t.CURRENCY_LOCATION]: l,
       [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_COUNT]: l,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_COUNT]: c,
       [t.PRODUCT_COUNT]: Number(e.recommendationConfigs.size),
       [t.PRODUCT_IN_ROW]: e.recommendationConfigs.cardsInRow,
       [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts,
       [t.RESPONSIVE]: !e.recommendationConfigs.unresponsive
     };
-    Object.entries(a).forEach(([u, d]) => {
-      this.api.setUIEAttribute(u, m.SELECTPICKER.items, d);
+    Object.entries(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
     });
   }
   _getAlgorithms() {
@@ -145,7 +139,7 @@ class b extends g {
       this._GuSelect({
         name: t.CURRENCY_LOCATION,
         placeholder: "Select Currency Location",
-        options: h
+        options: l
       }),
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuSelect({
@@ -157,19 +151,19 @@ class b extends g {
       this._GuSelect({
         name: t.CURRENCY_THOUSAND_SEPARATOR,
         placeholder: "Select Thousand Separator",
-        options: c
+        options: a
       }),
       this._GuLabel({ text: "Decimal Separator" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_SEPARATOR,
         placeholder: "Select Decimal Separator",
-        options: c
+        options: a
       }),
       this._GuLabel({ text: "Decimal Count" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_COUNT,
         placeholder: "Select Decimal Count",
-        options: l
+        options: c
       })
     ])}
         `;
@@ -223,62 +217,39 @@ class b extends g {
       filterSelectionDrawerStatus: !0
     });
   }
-  _onDataChange(e, o) {
-    this.currentNode && (this.store.$patch({
+  _onDataChange(e, s) {
+    this.currentNode && this.store.$patch({
       recommendationConfigs: {
-        [e]: o
+        [e]: s
       }
-    }), this._debouncedRegenerateProductRows());
-  }
-  /**
-   * Get the current card composition from block data attribute or use default
-   */
-  _getCardComposition() {
-    if (!this.currentNode)
-      return C;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    if (!e || !("getAttribute" in e))
-      return C;
-    const o = e.getAttribute("data-card-composition");
-    return o ? o.split(",").filter(Boolean) : C;
-  }
-  _regenerateProductRows() {
-    if (!this.currentNode || !("querySelector" in this.currentNode))
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-product-container");
-    if (!e) {
-      console.error("Could not find container table for product rows");
-      return;
-    }
-    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : E(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = p(o, i, a);
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(u).apply(new S("Updated product"));
+    });
   }
-  _onCurrencyConfigChange(e, o) {
+  _onCurrencyConfigChange(e, s) {
     this.currentNode && this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          [e]: o
+          [e]: s
         }
       }
     });
   }
   _onCurrencyChange(e) {
-    const [, o] = e.split(".");
+    const [, s] = e.split(".");
     this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          name: o,
-          value: o
+          name: s,
+          value: s
         }
       }
     });
   }
   _setProductIdsVisibility() {
-    const { recommendationConfigs: e } = this.store, o = e.strategy === "manualMerchandising";
-    this.api.setVisibility(t.PRODUCT_IDS, o), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, o);
+    const { recommendationConfigs: e } = this.store, s = e.strategy === "manualMerchandising";
+    this.api.setVisibility(t.PRODUCT_IDS, s), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, s);
   }
   _listenToFormUpdates() {
-    var o;
+    var s;
     this.api.onValueChanged(t.ALGORITHM, (i) => {
       this._onDataChange(t.ALGORITHM, i), this._setProductIdsVisibility();
     }), this.api.onValueChanged(t.PRODUCT_IDS, (i) => this._onDataChange(t.PRODUCT_IDS, i.split(",") || [])), this.api.onValueChanged(t.LOCALE, (i) => this._onDataChange(t.LOCALE, i)), this.api.onValueChanged(t.CURRENCY, (i) => this._onCurrencyChange(i)), [
@@ -288,19 +259,19 @@ class b extends g {
       t.CURRENCY_DECIMAL_SEPARATOR,
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
-      this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
+      this.api.onValueChanged(i, (C) => this._onCurrencyConfigChange(i, C));
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (s = this.addFilterButton) == null || s.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {
       if ("payload" in e) {
-        const o = e.payload.recommendationConfigs;
-        o && (this.api.updateValues(o), this.store.fetchRecommendationProducts());
+        const s = e.payload.recommendationConfigs;
+        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
       }
     });
   }
 }
 export {
-  L as CONTROL_BLOCK_ID,
-  b as RecommendationBlockControl
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
 };

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

@@ -1,45 +1,10 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as r } from "./block.js";
-import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as d } from "./controls/button/align.js";
-import { ButtonBorderControl as l } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as m } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as C } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as a } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as c } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as s } from "./controls/button/textStyleAndFontColor.js";
-import { ImageMarginsControl as g } from "./controls/image/margins.js";
-import { ImageSizeControl as B } from "./controls/image/size.js";
-import { NameAlignControl as P } from "./controls/name/align.js";
-import { NameBackgroundControl as u } from "./controls/name/background.js";
-import { NameColorControl as y } from "./controls/name/color.js";
-import { NameFontFamilyControl as S } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as F } from "./controls/name/paddings.js";
-import { NameSizeControl as R } from "./controls/name/size.js";
-import { NameStyleControl as N } from "./controls/name/style.js";
-import { OldPriceAlignControl as O } from "./controls/oldPrice/align.js";
-import { OldPriceBackgroundControl as k } from "./controls/oldPrice/background.js";
-import { OldPriceColorControl as x } from "./controls/oldPrice/color.js";
-import { OldPriceFontFamilyControl as z } from "./controls/oldPrice/fontFamily.js";
-import { OldPricePaddingsControl as A } from "./controls/oldPrice/paddings.js";
-import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
-import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
-import { PriceAlignControl as w } from "./controls/price/align.js";
-import { PriceBackgroundControl as h } from "./controls/price/background.js";
-import { PriceColorControl as E } from "./controls/price/color.js";
-import { PriceFontFamilyControl as M } from "./controls/price/fontFamily.js";
-import { PricePaddingsControl as b } from "./controls/price/paddings.js";
-import { PriceSizeControl as j } from "./controls/price/size.js";
-import { PriceStyleControl as q } from "./controls/price/style.js";
-import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
-import D from "./recommendation.css.js";
-import { SettingsPanel as G } from "./settingsPanel.js";
-const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(E).addControl(M).addControl(b).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).build();
+import { RecommendationBlock as t } from "./block.js";
+import { RecommendationBlockControl as e } from "./control.js";
+import { RecommendationIconsRegistry as n } from "./iconsRegistry.js";
+import i from "./recommendation.css.js";
+import { SettingsPanel as m } from "./settingsPanel.js";
+const f = new o().addBlock(t).withSettingsPanelRegistry(m).addControl(e).addStyles(i).withIconsRegistry(n).build();
 export {
-  Io as default
+  f as default
 };

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

@@ -1,117 +1,32 @@
-import { SettingsPanelRegistry as N, SettingsPanelTab as _, SettingsTab as E, ContainerControls as S, TextControls as L } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as R } from "./block.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as C } from "./cardCompositionControl.js";
-import { RecommendationBlockId as I, RecommendationControlId as T } from "./constants.js";
-import { CONTROL_BLOCK_ID as e } from "./control.js";
-class G extends N {
-  registerBlockControls(O) {
-    O[R] = [
-      new _(
-        E.SETTINGS,
-        [
-          e,
-          S.EXTERNAL_INDENTS
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          L.TEXT_BLOCK_BACKGROUND_COLOR
-        ]
-      ),
-      new _(
-        "Card Composition",
-        [
-          C
-        ]
-      ).withLabel("Card Composition")
-    ], O[I.NAME] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.NAME_BACKGROUND,
-          T.NAME_COLOR,
-          T.NAME_SIZE,
-          T.NAME_STYLE,
-          T.NAME_FONT_FAMILY
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.NAME_ALIGN,
-          T.NAME_PADDINGS
-        ]
-      )
-    ], O[I.PRICE] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.PRICE_BACKGROUND,
-          T.PRICE_COLOR,
-          T.PRICE_SIZE,
-          T.PRICE_STYLE,
-          T.PRICE_FONT_FAMILY
+import { SettingsPanelRegistry as o, SettingsPanelTab as t, SettingsTab as e, ContainerControls as r, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as T } from "./block.js";
+import { CONTROL_BLOCK_ID as i } from "./control.js";
+class a extends o {
+  registerBlockControls(n) {
+    n[T] = [
+      new t(
+        e.SETTINGS,
+        [
+          i,
+          r.EXTERNAL_INDENTS
         ]
       ),
-      new _(
-        E.STYLES,
-        [
-          T.PRICE_ALIGN,
-          T.PRICE_PADDINGS
-        ]
-      )
-    ], O[I.OLD_PRICE] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.OLD_PRICE_BACKGROUND,
-          T.OLD_PRICE_COLOR,
-          T.OLD_PRICE_SIZE,
-          T.OLD_PRICE_STYLE,
-          T.OLD_PRICE_FONT_FAMILY
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.OLD_PRICE_ALIGN,
-          T.OLD_PRICE_PADDINGS
-        ]
-      )
-    ], O[I.BUTTON] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.BUTTON_TEXT,
-          T.BUTTON_ALIGN,
-          T.BUTTON_MARGINS,
-          T.BUTTON_PADDINGS
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.BUTTON_COLOR,
-          T.BUTTON_FONT_FAMILY,
-          T.BUTTON_TEXT_SIZE,
-          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          T.BUTTON_FIT_TO_CONTENT,
-          T.BUTTON_BORDER_RADIUS,
-          T.BUTTON_BORDER
-        ]
-      )
-    ], O[I.IMAGE] = [
-      new _(
-        E.SETTINGS,
+      new t(
+        e.STYLES,
         [
-          T.IMAGE_SIZE,
-          T.IMAGE_MARGINS
+          s.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
+      // TODO: It'll be opened after the card composition is implemented by Stripo team.
+      // new SettingsPanelTab(
+      //     'Card Composition',
+      //     [
+      //         COMPOSITION_CONTROL_BLOCK_ID,
+      //     ]
+      // ).withLabel('Card Composition'),
     ];
   }
 }
 export {
-  G as SettingsPanel
+  a as SettingsPanel
 };

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

@@ -0,0 +1,200 @@
+const g = {
+  TITLE: "You May Also Like!"
+}, 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" 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>
+`, u = `
+    <tr>
+        <td style="padding: 0 20px;">
+            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
+                {-{-PRODUCTS-}-}
+            </table>
+        </td>
+    </tr>
+`, 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" 
+            style="background-color: #f8f8f8;">
+            <tr>
+                <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>
+`, 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>
+`, 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>
+`, 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 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>
+`, f = `
+    <tr>
+        <td class="spacer" style="height: 20px;"></td>
+    </tr>
+`;
+function T() {
+  const c = [
+    {
+      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: "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: "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: "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: "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: "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"
+    }
+  ], 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 {
+  T as getDefaultTemplate
+};