@useinsider/guido 1.0.3-beta.413aef4 → 1.0.3-beta.45db97c

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/common-control.js

@@ -1,77 +1,77 @@
-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 {
+var u = Object.defineProperty;
+var C = (o, n, E) => n in o ? u(o, n, { enumerable: !0, configurable: !0, writable: !0, value: E }) : o[n] = E;
+var a = (o, n, E) => C(o, typeof n != "symbol" ? n + "" : n, E);
+import { Control as R, UIElementType as $, UEAttr as e } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class N extends R {
   constructor() {
     super(...arguments);
-    u(this, "currentNode");
+    a(this, "currentNode");
   }
   getContainer() {
-    var e;
-    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
+    var E;
+    return (E = document.querySelector("ui-editor")) == null ? void 0 : E.shadowRoot;
   }
-  onTemplateNodeUpdated(e) {
-    this.currentNode = e;
+  onTemplateNodeUpdated(E) {
+    this.currentNode = E;
   }
-  _GuLabel({ text: e, name: T = "", position: n = "top" }) {
+  _GuLabel({ text: E, name: t = "", position: T = "top" }) {
     return `
             <${$.LABEL} 
-                style="${n === "top" ? "margin-bottom: 8px;" : ""}"
-                ${t.LABEL.text}="${e}" 
-                ${t.LABEL.name}="${T || `${e} Label`}">
+                style="${T === "top" ? "margin-bottom: 8px;" : ""}"
+                ${e.LABEL.text}="${E}" 
+                ${e.LABEL.name}="${t || `${E} Label`}">
             </${$.LABEL}>
         `;
   }
-  _GuToggle(e) {
+  _GuToggle(E) {
     return `
             <${$.SWITCHER}
-                ${t.SWITCHER.name}="${e}">
+                ${e.SWITCHER.name}="${E}">
             </${$.SWITCHER}>
         `;
   }
-  _GuSelectItem({ text: e, value: T }) {
+  _GuSelectItem({ text: E, value: t }) {
     return `
             <${$.SELECT_ITEM} 
-                ${t.SELECT_ITEM.text}="${e}" 
-                ${t.SELECT_ITEM.value}="${T}">
+                ${e.SELECT_ITEM.text}="${E}" 
+                ${e.SELECT_ITEM.value}="${t}">
             </${$.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: T, options: n, className: r = "es-180w" }) {
+  _GuSelect({ name: E, placeholder: t, options: T, className: r = "es-180w" }) {
     return `
             <${$.SELECTPICKER}
                 class="${r}"
-                ${t.SELECTPICKER.name}="${e}"
-                ${t.SELECTPICKER.placeholder}="${T}">
-                    ${n.map((a) => this._GuSelectItem(a)).join("")}
+                ${e.SELECTPICKER.name}="${E}"
+                ${e.SELECTPICKER.placeholder}="${t}">
+                    ${T.map((O) => this._GuSelectItem(O)).join("")}
             </${$.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: T, className: n = "" }) {
+  _GuTextInput({ name: E, placeholder: t, className: T = "" }) {
     return `
             <${$.TEXT}
-                class=${n}
-                ${t.TEXT.name}="${e}"
-                placeholder="${T || e}">
+                class=${T}
+                ${e.TEXT.name}="${E}"
+                placeholder="${t || E}">
             </${$.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: T, minValue: n = 1, step: r = 1 }) {
+  _GuCounter({ name: E, maxValue: t, minValue: T = 1, step: r = 1 }) {
     return `
             <${$.COUNTER}
-                ${t.COUNTER.name}="${e}"
-                ${t.COUNTER.minValue}="${n}"
-                ${t.COUNTER.maxValue}="${T}"
-                ${t.COUNTER.step}="${r}">
+                ${e.COUNTER.name}="${E}"
+                ${e.COUNTER.minValue}="${T}"
+                ${e.COUNTER.maxValue}="${t}"
+                ${e.COUNTER.step}="${r}">
             </${$.COUNTER}>
         `;
   }
-  _GuButton({ name: e, label: T, id: n = "" }) {
+  _GuButton({ name: E, label: t, id: T = "" }) {
     return `
             <${$.BUTTON}
-                ${t.BUTTON.name}="${e}"
-                ${n ? `id="${n}"` : ""}
-                ${t.BUTTON.caption}="${T}"}>
+                ${e.BUTTON.name}="${E}"
+                ${T ? `id="${T}"` : ""}
+                ${e.BUTTON.caption}="${t}"}>
             </${$.BUTTON}>
         `;
   }
@@ -80,23 +80,105 @@ class L extends c {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: T, className: n = "" }) {
+  _GuIconButton({ name: E, icon: t, className: T = "" }) {
     return `
             <${$.BUTTON}
-                class="${n}"
-                ${t.BUTTON.name}="${e}"
-                ${t.BUTTON.icon}="${T}">
+                class="${T}"
+                ${e.BUTTON.name}="${E}"
+                ${e.BUTTON.icon}="${t}">
             </${$.BUTTON}>
         `;
   }
-  _GuTwoColumns(e) {
+  _GuTwoColumns(E) {
     return `
             <div class="checkbox-select-container container two-columns">
-                ${e.join("")}
+                ${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, t) {
+    let T = "";
+    t.forEach((O) => {
+      const L = e.ORDERABLE_ITEM && "name" in e.ORDERABLE_ITEM ? e.ORDERABLE_ITEM.name : "name";
+      T += `
+                <${$.ORDERABLE_ITEM} ${L}="${O.key}">
+                    ${O.content}
+                </${$.ORDERABLE_ITEM}>
+            `;
+    });
+    const r = e.ORDERABLE && "name" in e.ORDERABLE ? e.ORDERABLE.name : "name";
+    return `
+            <${$.ORDERABLE} ${r}="${E}">
+                ${T}
+            </${$.ORDERABLE}>
+        `;
+  }
+  _GuNestedControl(E, t) {
+    return `
+            <${$.NESTED_CONTROL} ${e.NESTED_CONTROL.controlId}="${E}">
+                ${t}
+            </${$.NESTED_CONTROL}>
+        `;
+  }
+  _GuExpandable(E, t) {
+    return `
+            <${$.EXPANDABLE}>
+                <${$.EXPANDABLE_HEADER}>
+                    <${$.LABEL} ${e.LABEL.text}="${E}"></${$.LABEL}>
+                </${$.EXPANDABLE_HEADER}>
+                <${$.EXPANDABLE_CONTENT}>
+
+                    ${t}
+
+                </${$.EXPANDABLE_CONTENT}>
+            </${$.EXPANDABLE}>
+        `;
+  }
+  _GuColorPicker(E) {
+    return `
+            <${$.COLOR}
+                ${e.COLOR.name}="${E}">
+            </${$.COLOR}>
+        `;
+  }
+  _GuFontFamily(E, t = "Select Font") {
+    return `
+            <${$.FONT_FAMILY_SELECT}
+                ${e.FONT_FAMILY_SELECT.name}="${E}"
+                ${e.FONT_FAMILY_SELECT.placeholder}="${t}">
+            </${$.FONT_FAMILY_SELECT}>
+        `;
+  }
+  _GuRadioButtons(E, t) {
+    const T = t.map((r) => `
+                <${$.RADIO_ITEM}
+                    ${e.RADIO_ITEM.text}="${r.text}"
+                    ${e.RADIO_ITEM.value}="${r.value}">
+                </${$.RADIO_ITEM}>
+            `).join("");
+    return `
+            <${$.RADIO_BUTTONS}
+                ${e.RADIO_BUTTONS.name}="${E}">
+                ${T}
+            </${$.RADIO_BUTTONS}>
+        `;
+  }
+  _GuCheckbox(E, t) {
+    return `
+            <${$.CHECKBOX}
+                ${e.CHECKBOX.name}="${E}"
+                ${e.CHECKBOX.caption}="${t}">
+            </${$.CHECKBOX}>
+        `;
+  }
 }
 export {
-  L as CommonControl
+  N as CommonControl
 };

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -1,27 +1,33 @@
-var i = Object.defineProperty;
-var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
-class y {
+var d = Object.defineProperty;
+var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
+class C {
   constructor() {
-    a(this, "selectedDynamicContent", null);
-    a(this, "dataSelectCallback", () => {
+    c(this, "selectedDynamicContent", null);
+    c(this, "dataSelectCallback", () => {
     });
+    c(this, "closeDynamicContentHandler", null);
   }
-  openMergeTagsLibrary(e, n) {
-    this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
-      detail: {
-        attribute: e
-      }
+  /**
+   * Opens the merge tags library modal
+   * @param dynamicContent - Currently selected dynamic content (if any)
+   * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+   * @param position - Optional position data to place the modal
+   */
+  openMergeTagsLibrary(e, n, l) {
+    this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const o = {
+      attribute: e,
+      position: l
+    }, s = new CustomEvent("dynamic-content:open", {
+      detail: o
     });
-    document.dispatchEvent(s);
-    const o = (l) => {
-      const c = l.detail;
-      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
-    };
-    document.addEventListener("dynamic-content:close", o);
+    document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
+      const a = i.detail;
+      this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
+    }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
   }
 }
 export {
-  y as ExternalMergeTagsLibrary
+  C as ExternalMergeTagsLibrary
 };