@useinsider/guido 1.0.3-beta.3f12f40 → 1.0.3-beta.413aef4

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/store/recommendation.js

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("guidoRecommendationExtension", {
+}), G = p("recommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,

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
+};

package/dist/extensions/Blocks/common-control.js

@@ -1,12 +1,11 @@
-var c = Object.defineProperty;
-var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
-var l = (a, r, e) => I(a, typeof r != "symbol" ? r + "" : r, e);
-import { Control as O, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class _ extends O {
+var l = Object.defineProperty;
+var C = (E, o, e) => o in E ? l(E, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : E[o] = e;
+var u = (E, o, e) => C(E, typeof o != "symbol" ? o + "" : o, e);
+import { Control as c, UIElementType as $, UEAttr as t } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class L extends c {
   constructor() {
     super(...arguments);
-    l(this, "currentNode");
-    l(this, "lastBlockInstanceId", null);
+    u(this, "currentNode");
   }
   getContainer() {
     var e;
@@ -15,121 +14,65 @@ class _ extends O {
   onTemplateNodeUpdated(e) {
     this.currentNode = e;
   }
-  onDestroy() {
-    this.lastBlockInstanceId = null;
-  }
-  /**
-   * Gets the config block element from the current node.
-   * @returns The config block element or null if not found
-   */
-  getConfigBlock() {
-    if (!this.currentNode)
-      return null;
-    const e = this.currentNode.closest(".items-block-v2");
-    return e ? e.querySelector("esd-config-block") : null;
-  }
-  /**
-   * Gets the current block instance ID from the config block.
-   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
-   * @returns The block instance ID or null if not found
-   */
-  getBlockInstanceId(e = "data-block-instance-id") {
-    const n = this.getConfigBlock();
-    return n ? n.getAttribute(e) : null;
-  }
-  /**
-   * Handles block instance change detection and syncing.
-   * This is a helper method for controls that need to sync attributes when switching between block instances.
-   * @param syncFunction - Function to call when block instance changes (to sync from attributes)
-   * @param updateUI - Function to call to update the UI (called both on change and when same block)
-   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
-   * @returns true if block instance changed, false otherwise
-   */
-  handleBlockInstanceChange(e, n, E = "data-block-instance-id") {
-    const o = this.getBlockInstanceId(E);
-    if (!o)
-      return !1;
-    const T = o !== this.lastBlockInstanceId;
-    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
-  }
-  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+  _GuLabel({ text: e, name: T = "", position: n = "top" }) {
     return `
-            <${t.LABEL} 
-                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
-                ${$.LABEL.text}="${e}" 
-                ${$.LABEL.name}="${n || `${e} Label`}">
-            </${t.LABEL}>
+            <${$.LABEL} 
+                style="${n === "top" ? "margin-bottom: 8px;" : ""}"
+                ${t.LABEL.text}="${e}" 
+                ${t.LABEL.name}="${T || `${e} Label`}">
+            </${$.LABEL}>
         `;
   }
   _GuToggle(e) {
     return `
-            <${t.SWITCHER}
-                ${$.SWITCHER.name}="${e}">
-            </${t.SWITCHER}>
-        `;
-  }
-  _GuSelectItem({ text: e, value: n }) {
-    return `
-            <${t.SELECT_ITEM} 
-                ${$.SELECT_ITEM.text}="${e}" 
-                ${$.SELECT_ITEM.value}="${n}">
-            </${t.SELECT_ITEM}>`;
-  }
-  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
-    return `
-            <${t.SELECTPICKER}
-                class="${o}"
-                ${$.SELECTPICKER.name}="${e}"
-                ${$.SELECTPICKER.placeholder}="${n}">
-                    ${E.map((T) => this._GuSelectItem(T)).join("")}
-            </${t.SELECTPICKER}>
+            <${$.SWITCHER}
+                ${t.SWITCHER.name}="${e}">
+            </${$.SWITCHER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
+  _GuSelectItem({ text: e, value: T }) {
     return `
-            <${t.TEXT}
-                class=${E}
-                ${$.TEXT.name}="${e}"
-                placeholder="${n || e}"
-                ${o ? `${$.TEXT.disabled}="true"` : ""}>
-            </${t.TEXT}>
-        `;
+            <${$.SELECT_ITEM} 
+                ${t.SELECT_ITEM.text}="${e}" 
+                ${t.SELECT_ITEM.value}="${T}">
+            </${$.SELECT_ITEM}>`;
   }
-  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
+  _GuSelect({ name: e, placeholder: T, options: n, className: r = "es-180w" }) {
     return `
-            <${t.COUNTER}
-                ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${E}"
-                ${$.COUNTER.maxValue}="${n}"
-                ${$.COUNTER.step}="${o}">
-            </${t.COUNTER}>
+            <${$.SELECTPICKER}
+                class="${r}"
+                ${t.SELECTPICKER.name}="${e}"
+                ${t.SELECTPICKER.placeholder}="${T}">
+                    ${n.map((a) => this._GuSelectItem(a)).join("")}
+            </${$.SELECTPICKER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
+  _GuTextInput({ name: e, placeholder: T, className: n = "" }) {
     return `
-            <${t.RADIO_ITEM}
-                ${$.RADIO_ITEM.value}="${n}"
-                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
-            </${t.RADIO_ITEM}>
+            <${$.TEXT}
+                class=${n}
+                ${t.TEXT.name}="${e}"
+                placeholder="${T || e}">
+            </${$.TEXT}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
+  _GuCounter({ name: e, maxValue: T, minValue: n = 1, step: r = 1 }) {
     return `
-            <${t.RADIO_BUTTONS}
-                ${E ? `id="${E}"` : ""}
-                ${$.RADIO_BUTTONS.name}="${e}">
-                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
-            </${t.RADIO_BUTTONS}>
+            <${$.COUNTER}
+                ${t.COUNTER.name}="${e}"
+                ${t.COUNTER.minValue}="${n}"
+                ${t.COUNTER.maxValue}="${T}"
+                ${t.COUNTER.step}="${r}">
+            </${$.COUNTER}>
         `;
   }
-  _GuButton({ name: e, label: n, id: E = "" }) {
+  _GuButton({ name: e, label: T, id: n = "" }) {
     return `
-            <${t.BUTTON}
-                ${$.BUTTON.name}="${e}"
-                ${E ? `id="${E}"` : ""}
-                ${$.BUTTON.caption}="${n}"}>
-            </${t.BUTTON}>
+            <${$.BUTTON}
+                ${t.BUTTON.name}="${e}"
+                ${n ? `id="${n}"` : ""}
+                ${t.BUTTON.caption}="${T}"}>
+            </${$.BUTTON}>
         `;
   }
   /**
@@ -137,112 +80,23 @@ class _ extends O {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: n, className: E = "" }) {
+  _GuIconButton({ name: e, icon: T, className: n = "" }) {
     return `
-            <${t.BUTTON}
-                class="${E}"
-                ${$.BUTTON.name}="${e}"
-                ${$.BUTTON.icon}="${n}">
-            </${t.BUTTON}>
+            <${$.BUTTON}
+                class="${n}"
+                ${t.BUTTON.name}="${e}"
+                ${t.BUTTON.icon}="${T}">
+            </${$.BUTTON}>
         `;
   }
-  _GuOneColumn(e, n = "") {
+  _GuTwoColumns(e) {
     return `
-            <div class="container one-column ${n}">
+            <div class="checkbox-select-container container two-columns">
                 ${e.join("")}
             </div>
         `;
   }
-  _GuTwoColumns(e, n = "") {
-    return `
-            <div class="container two-columns ${n}">
-                ${e.join("")}
-            </div>
-        `;
-  }
-  /**
-   * Creates an orderable (sortable) list control
-   * @param name - The control name for value binding
-   * @param items - Array of item keys/values
-   * @param itemLabels - Optional array of objects with key and label properties for display
-   * @returns HTML string for the orderable control
-   */
-  _GuOrderable(e, n) {
-    let E = "";
-    n.forEach((T) => {
-      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      E += `
-                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
-                    ${T.content}
-                </${t.ORDERABLE_ITEM}>
-            `;
-    });
-    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
-    return `
-            <${t.ORDERABLE} ${o}="${e}">
-                ${E}
-            </${t.ORDERABLE}>
-        `;
-  }
-  _GuNestedControl(e, n) {
-    return `
-            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
-                ${n}
-            </${t.NESTED_CONTROL}>
-        `;
-  }
-  _GuExpandable(e, n) {
-    return `
-            <${t.EXPANDABLE}>
-                <${t.EXPANDABLE_HEADER}>
-                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
-                </${t.EXPANDABLE_HEADER}>
-                <${t.EXPANDABLE_CONTENT}>
-
-                    ${n}
-
-                </${t.EXPANDABLE_CONTENT}>
-            </${t.EXPANDABLE}>
-        `;
-  }
-  _GuColorPicker(e) {
-    return `
-            <${t.COLOR}
-                ${$.COLOR.name}="${e}">
-            </${t.COLOR}>
-        `;
-  }
-  _GuFontFamily(e, n = "Select Font") {
-    return `
-            <${t.FONT_FAMILY_SELECT}
-                ${$.FONT_FAMILY_SELECT.name}="${e}"
-                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
-            </${t.FONT_FAMILY_SELECT}>
-        `;
-  }
-  _GuRadioButtons(e, n) {
-    const E = n.map((o) => `
-                <${t.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${o.text}"
-                    ${$.RADIO_ITEM.value}="${o.value}">
-                </${t.RADIO_ITEM}>
-            `).join("");
-    return `
-            <${t.RADIO_BUTTONS}
-                ${$.RADIO_BUTTONS.name}="${e}">
-                ${E}
-            </${t.RADIO_BUTTONS}>
-        `;
-  }
-  _GuCheckbox(e, n) {
-    return `
-            <${t.CHECKBOX}
-                ${$.CHECKBOX.name}="${e}"
-                ${$.CHECKBOX.caption}="${n}">
-            </${t.CHECKBOX}>
-        `;
-  }
 }
 export {
-  _ as CommonControl
+  L as CommonControl
 };