@useinsider/guido 2.0.0-beta.dbde199 → 2.0.0-beta.faa7c5d

package/dist/static/styles/customEditorStyle.css.js

@@ -23,19 +23,6 @@ const n = `.esd-x,
 .ins-recommendation-v3-block-v2 .product-attribute-cell ue-node-panel {
     display: none !important;
 }
-
-/* Apply to the table cell (td) with text-trim-enabled class */
-.text-trim-enabled {
-    max-width: 0 !important;
-}
-
-.text-trim-enabled p {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    margin: 0 !important;
-    display: block !important;
-}
 `;
 export {
   n as default

package/dist/stores/config.js

@@ -64,6 +64,13 @@ const s = o("guido-config", {
       var e;
       return ((e = i.config) == null ? void 0 : e.compiler) ?? null;
     },
+    /**
+     * Get the callbacks configuration
+     */
+    callbacks: (i) => {
+      var e;
+      return ((e = i.config) == null ? void 0 : e.callbacks) ?? null;
+    },
     /**
      * Get the template ID
      */

package/dist/utils/pairProductVariables.js

@@ -1,74 +1,77 @@
 import { productPairs as w } from "../extensions/Blocks/Items/enums/productEnums.js";
-function M(H) {
-  const m = H.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(m, "text/html"), C = w.PAIRS_FOR_EXTENSION;
-  Object.entries(C).forEach(([n, d]) => {
+function P(k) {
+  const m = k.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), $ = new DOMParser().parseFromString(m, "text/html"), R = w.PAIRS_FOR_EXTENSION;
+  Object.entries(R).forEach(([n, l]) => {
     $.querySelectorAll(".ins-product-td").forEach((o) => {
-      const h = o.getAttribute("data-number") || "1", _ = o.getAttribute("data-type") || "CART_ITEMS";
+      const E = o.getAttribute("data-number") || "1", b = o.getAttribute("data-type") || "CART_ITEMS";
       o.querySelectorAll(`[product-attr="${n}"]`).forEach((e) => {
         var y;
-        const b = e.getAttribute("data-type") || _, u = e.getAttribute("data-number") || h, p = d[b];
+        const T = e.getAttribute("data-type") || b, u = e.getAttribute("data-number") || E, p = l[T];
         if (p)
           switch (n) {
             case "imageSrc": {
-              let t = null, i = null;
-              if (e.tagName === "IMG" ? (t = e, i = t.closest("a")) : (t = e.querySelector("img"), i = e.querySelector("a") || e.closest("a")), !t)
+              let t = null, c = null;
+              if (e.tagName === "IMG" ? (t = e, c = t.closest("a")) : (t = e.querySelector("img"), c = e.querySelector("a") || e.closest("a")), !t)
                 break;
-              const c = p.DEFAULT, a = p.ATTR;
-              if (c && t.src) {
+              const i = p.DEFAULT, a = p.ATTR;
+              if (i && t.src) {
                 const r = t.src;
-                c.some((l) => {
-                  const s = l.split("/").pop() || "", F = r.split("/").pop() || "";
-                  return r.includes(l) || r.includes(s) || F === s;
+                i.some((d) => {
+                  const s = d.split("/").pop() || "", _ = r.split("/").pop() || "";
+                  return r.includes(d) || r.includes(s) || _ === s;
                 }) && (t.src = `{{${a}_${u}}}`);
               }
-              if (i) {
-                const r = (y = C.itemLink) == null ? void 0 : y[b];
+              if (c) {
+                const r = (y = R.itemLink) == null ? void 0 : y[T];
                 if (r) {
-                  const f = r.HREF, l = r.DEFAULT_HREF || "#!", s = i.href;
-                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(l) || s === `${window.location.href}${l}` || !s || s === window.location.href) && (i.href = `{{${f}_${u}}}`);
+                  const f = r.HREF, d = r.DEFAULT_HREF || "#!", s = c.href;
+                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(d) || s === `${window.location.href}${d}` || !s || s === window.location.href) && (c.href = `{{${f}_${u}}}`);
                 }
               }
               break;
             }
             case "name": {
-              const t = p, i = t.ATTR, c = t.DEFAULT_HREF || "#!", a = t.HREF;
-              e.textContent && (e.textContent = `{{${i}_${u}}}`);
+              const t = p, c = t.ATTR, i = t.DEFAULT_HREF || "#!", a = t.HREF;
+              e.textContent && (e.textContent = `{{${c}_${u}}}`);
               const r = e.closest("a") || (e.tagName === "A" ? e : null);
               if (r && a) {
-                const f = r.href, l = `${window.location.href}${c}`;
-                (f === l || f.endsWith(c)) && (r.href = `{{${a}_${u}}}`);
+                const f = r.href, d = `${window.location.href}${i}`;
+                (f === d || f.endsWith(i)) && (r.href = `{{${a}_${u}}}`);
               }
               break;
             }
             case "price":
             case "originalPrice": {
-              const t = p, c = e.getAttribute("data-formated") === "true", a = e.getAttribute("data-curency") || "before", r = c ? t.PRICE_FORMATTED : t.PRICE, f = t.CURRENCY;
-              let l = `{{${r}_${u}}}`;
-              if (f) {
-                const s = `{{${f}_${u}}}`;
-                l = a === "after" ? `${l} ${s}` : `${s} ${l}`;
+              const t = p, c = e.getAttribute("data-formated"), i = e.getAttribute("data-single_price"), a = c === "true", r = i === "true", f = e.getAttribute("data-curency") || "before";
+              let d;
+              r ? d = a ? t.SINGLE_PRICE_FORMATTED : t.SINGLE_PRICE : d = a ? t.PRICE_FORMATTED : t.PRICE;
+              const s = t.CURRENCY;
+              let _ = `{{${d}_${u}}}`;
+              if (s) {
+                const H = `{{${s}_${u}}}`;
+                _ = f === "after" ? `${_} ${H}` : `${H} ${_}`;
               }
-              e.textContent = l;
+              e.textContent = _;
               break;
             }
             case "quantity": {
-              const t = p, i = t.ATTR, c = t.DEFAULT;
-              e.textContent && e.textContent.trim() === c && (e.textContent = `{{${i}_${u}}}`);
+              const t = p, c = t.ATTR, i = t.DEFAULT;
+              e.textContent && e.textContent.trim() === i && (e.textContent = `{{${c}_${u}}}`);
               break;
             }
             case "button": {
-              const t = p, i = t.HREF, c = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
+              const t = p, c = t.HREF, i = t.DEFAULT_HREF || "#!", a = e.tagName === "A" ? e : e.querySelector("a");
               if (a) {
-                const r = a.href || "", f = `${window.location.href}${c}`;
-                (r === "" || r === "#" || r === f || r.endsWith(c) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${i}_${u}}}`);
+                const r = a.href || "", f = `${window.location.href}${i}`;
+                (r === "" || r === "#" || r === f || r.endsWith(i) || r.endsWith("#!") || r === window.location.href) && (a.href = `{{${c}_${u}}}`);
               }
               break;
             }
             case "itemLink": {
-              const t = p, i = t.HREF, c = t.DEFAULT_HREF || "#!", a = e;
+              const t = p, c = t.HREF, i = t.DEFAULT_HREF || "#!", a = e;
               if (a.href) {
-                const r = a.href, f = `${window.location.href}${c}`;
-                (r === f || r.endsWith(c)) && (a.href = `{{${i}_${u}}}`);
+                const r = a.href, f = `${window.location.href}${i}`;
+                (r === f || r.endsWith(i)) && (a.href = `{{${c}_${u}}}`);
               }
               break;
             }
@@ -83,21 +86,21 @@ function M(H) {
       });
     });
   });
-  const S = $.querySelectorAll(".ins-product-td"), R = [];
-  S.forEach((n) => {
-    const d = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", o = n.getAttribute("data-nodup"), h = n.outerHTML;
-    R.push({
+  const F = $.querySelectorAll(".ins-product-td"), S = [];
+  F.forEach((n) => {
+    const l = n.getAttribute("data-type") || "CART_ITEMS", A = n.getAttribute("data-number") || "1", o = n.getAttribute("data-nodup"), E = n.outerHTML;
+    S.push({
       element: n,
-      outerHtml: h,
-      type: d,
+      outerHtml: E,
+      type: l,
       number: A,
       nodup: o || void 0
     });
   });
-  let E = $.body.innerHTML;
-  R.reverse().forEach(({ outerHtml: n, type: d, number: A }) => {
+  let h = $.body.innerHTML;
+  S.reverse().forEach(({ outerHtml: n, type: l, number: A }) => {
     let o = "";
-    switch (d) {
+    switch (l) {
       case "CART_ITEMS":
         o = "ins_apr_total_product_kind";
         break;
@@ -109,28 +112,28 @@ function M(H) {
         break;
     }
     if (o) {
-      const _ = parseInt(A) - 1, b = `${`{% if ${o} > ${_} %}`}${n}{% endif %}`;
-      E = E.replace(n, b);
+      const b = parseInt(A) - 1, T = `${`{% if ${o} > ${b} %}`}${n}{% endif %}`;
+      h = h.replace(n, T);
     }
   });
-  const k = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), T = [];
-  return k.forEach((n) => {
-    const d = n.getAttribute("data-number"), A = n.getAttribute("data-type");
-    if (!d || A !== "CART_ITEMS")
+  const I = $.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), g = [];
+  return I.forEach((n) => {
+    const l = n.getAttribute("data-number"), A = n.getAttribute("data-type");
+    if (!l || A !== "CART_ITEMS")
       return;
     const o = n.closest(".product-original-price-class");
     if (o) {
-      const h = o.outerHTML;
-      T.some((g) => g.tdOuterHtml === h) || T.push({ tdOuterHtml: h, number: d });
+      const E = o.outerHTML;
+      g.some((C) => C.tdOuterHtml === E) || g.push({ tdOuterHtml: E, number: l });
     }
-  }), T.reverse().forEach(({ tdOuterHtml: n, number: d }) => {
-    const A = `{% if ins_apr_price_${d} != ins_apr_originalprice_${d} %}`;
-    if (!E.includes(A) && !n.includes("{% if")) {
-      const h = `${A}${n}{% endif %}`;
-      E = E.replace(n, h);
+  }), g.reverse().forEach(({ tdOuterHtml: n, number: l }) => {
+    const A = `{% if ins_apr_price_${l} != ins_apr_originalprice_${l} %}`;
+    if (!h.includes(A) && !n.includes("{% if")) {
+      const E = `${A}${n}{% endif %}`;
+      h = h.replace(n, E);
     }
-  }), E.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  }), h.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  M as pairProductVariables
+  P as pairProductVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.0.0-beta.dbde199",
+  "version": "2.0.0-beta.faa7c5d",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",

package/dist/extensions/Blocks/Items/utils/configBlockUtils.js

@@ -1,17 +0,0 @@
-function r(t) {
-  if (!t)
-    return null;
-  const n = t.closest(".items-block-v2");
-  return n ? n.querySelector("esd-config-block") : null;
-}
-function o(t, n = !1) {
-  return t == null ? n : t === "1" || t === "true";
-}
-function e(t, n = "") {
-  return t || n;
-}
-export {
-  o as attributeToBoolean,
-  e as attributeToString,
-  r as getConfigBlock
-};

package/dist/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.js

@@ -1,28 +0,0 @@
-import { configAttributes as i } from "../enums/productEnums.js";
-import { getConfigBlock as c, attributeToBoolean as u, attributeToString as a } from "./configBlockUtils.js";
-function l(r, t) {
-  const e = c(r);
-  if (!e)
-    return;
-  const o = e.getAttribute(i[t.attributeName]), n = t.converter(o);
-  t.storeSetter(n);
-}
-function b(r, t, e = !1) {
-  return {
-    attributeName: r,
-    storeSetter: t,
-    converter: (o) => u(o, e)
-  };
-}
-function s(r, t, e = "") {
-  return {
-    attributeName: r,
-    storeSetter: t,
-    converter: (o) => a(o, e)
-  };
-}
-export {
-  b as createBooleanSyncConfig,
-  s as createStringSyncConfig,
-  l as syncAttributeFromConfigBlock
-};

package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js

@@ -1,76 +0,0 @@
-import { useItemsBlockStore as e } from "../store/items-block.js";
-import { syncAttributeFromConfigBlock as r, createBooleanSyncConfig as i, createStringSyncConfig as s } from "./syncAttributeFromConfigBlock.js";
-function m(t) {
-  const o = e(), n = i(
-    "PRODUCT_NAME_TRIMMING",
-    (c) => o.setNameTrimming(c),
-    !1
-  );
-  r(t, n);
-}
-function f(t) {
-  const o = e(), n = i(
-    "PRODUCT_PRICE_HIDE_DISCOUNT",
-    (c) => o.setHideDiscount(c),
-    !1
-  );
-  r(t, n);
-}
-function R(t) {
-  const o = e(), n = i(
-    "PRODUCT_PRICE_FORMATTED",
-    (c) => o.setFormattedPrice(c),
-    !0
-  );
-  r(t, n);
-}
-function O(t) {
-  const o = e(), n = s(
-    "PRODUCT_PRICE_CURRENCY_SYMBOL",
-    (c) => o.setCurrencySymbol(c),
-    ""
-  );
-  r(t, n);
-}
-function _(t) {
-  const o = e(), n = s(
-    "PRODUCT_PRICE_CURRENCY_LOCATION",
-    (c) => o.setCurrencyLocation(c),
-    "0"
-  );
-  r(t, n);
-}
-function I(t) {
-  const o = e(), n = s(
-    "PRODUCT_BUTTON_LINK",
-    (c) => o.setButtonLink(c),
-    ""
-  );
-  r(t, n);
-}
-function T(t) {
-  const o = e(), n = s(
-    "PRODUCT_IMAGE_LINK",
-    (c) => o.setImageLink(c),
-    ""
-  );
-  r(t, n);
-}
-function y(t) {
-  const o = e(), n = s(
-    "PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION",
-    (c) => o.setPriceOrientation(c),
-    "horizontal"
-  );
-  r(t, n);
-}
-export {
-  I as syncButtonLinkFromAttributes,
-  _ as syncCurrencyLocationFromAttributes,
-  O as syncCurrencySymbolFromAttributes,
-  R as syncFormattedPriceFromAttributes,
-  f as syncHideDiscountFromAttributes,
-  T as syncImageLinkFromAttributes,
-  m as syncNameTrimmingFromAttributes,
-  y as syncPriceOrientationFromAttributes
-};

package/dist/extensions/Blocks/Items/utils/updateAttributes.js

@@ -1,46 +0,0 @@
-import { ModificationDescription as p } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { configAttributes as t } from "../enums/productEnums.js";
-import { DefaultConfigValues as i } from "../enums/settingsEnums.js";
-import { useItemsBlockStore as s } from "../store/items-block.js";
-import { getConfigBlock as P } from "./configBlockUtils.js";
-function M(n, O) {
-  const e = P(n);
-  if (!e)
-    return;
-  const c = s(), {
-    itemsType: r,
-    itemIds: C,
-    orientation: T,
-    nameTrimming: _,
-    hideDiscount: E,
-    formattedPrice: R,
-    currencySymbol: N,
-    currencyLocation: m,
-    priceOrientation: I,
-    buttonLink: a,
-    imageLink: f
-  } = c, u = {
-    "data-source": r,
-    [t.TYPE]: r,
-    [t.ITEMS_INDEX_SELECT_CONTROL_VALUE]: C,
-    [t.ORIENTATION]: T,
-    [t.PRODUCT_NAME_TRIMMING]: _ ? "1" : "0",
-    [t.PRODUCT_PRICE_HIDE_DISCOUNT]: E ? "1" : "0",
-    [t.PRODUCT_PRICE_FORMATTED]: R ? "1" : "0",
-    [t.PRODUCT_PRICE_CURRENCY_SYMBOL]: N || "",
-    [t.PRODUCT_PRICE_CURRENCY_LOCATION]: m || "0",
-    [t.PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION]: I || "horizontal",
-    [t.PRODUCT_BUTTON_LINK]: a || "",
-    [t.PRODUCT_IMAGE_LINK]: f || "",
-    [t.NAME_CONTROL_ENABLED]: i.productNameControlEnabled,
-    [t.QUANTITY_CONTROL_ENABLED]: i.productQuantityControlEnabled,
-    [t.PRICE_CONTROL_OPENED]: i.productPriceControlOpened
-  };
-  let o = O.getDocumentModifier().modifyHtml(e);
-  Object.entries(u).forEach(([D, l]) => {
-    o = o.setAttribute(D, l);
-  }), o.apply(new p("Update config block attributes from control"));
-}
-export {
-  M as updateConfigBlockAttributes
-};

package/dist/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.js

@@ -1,68 +0,0 @@
-import { ModificationDescription as a } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as d } from "../../common-control.js";
-const c = "recommendation-card-background-color-control", o = {
-  CARD_BACKGROUND_COLOR: "cardBackgroundColor"
-};
-class u extends d {
-  getId() {
-    return c;
-  }
-  getTemplate() {
-    return `
-            <div class="card-bg-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({ text: "Card Background Color" }),
-      this._GuColorPicker(o.CARD_BACKGROUND_COLOR)
-    ])}
-            </div>
-        `;
-  }
-  onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
-  }
-  onTemplateNodeUpdated(r) {
-    super.onTemplateNodeUpdated(r), this._setFormValues();
-  }
-  _setFormValues() {
-    const r = this._getCurrentCardBackgroundColor();
-    this.api.updateValues({
-      [o.CARD_BACKGROUND_COLOR]: r
-    });
-  }
-  /**
-   * Reads the current background color from the first product card wrapper
-   * @returns The background color value or 'transparent' if not found
-   */
-  _getCurrentCardBackgroundColor() {
-    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
-      return "transparent";
-    const r = this.currentNode.querySelector(".product-card-wrapper");
-    return !r || !("getStyle" in r) ? "transparent" : r.getStyle("background-color") || "transparent";
-  }
-  /**
-   * Handles card background color changes
-   * Applies the color to all product card wrapper elements
-   */
-  _onCardBackgroundColorChange(r) {
-    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
-      return;
-    const e = Array.from(
-      this.currentNode.querySelectorAll(".product-card-wrapper")
-    );
-    if (e.length === 0)
-      return;
-    const t = this.api.getDocumentModifier();
-    e.forEach((n) => {
-      t.modifyHtml(n).setStyle("background-color", r);
-    }), t.apply(new a("Update card background color"));
-  }
-  _listenToFormUpdates() {
-    this.api.onValueChanged(o.CARD_BACKGROUND_COLOR, (r) => {
-      this._onCardBackgroundColorChange(r);
-    });
-  }
-}
-export {
-  c as CARD_BACKGROUND_COLOR_CONTROL_ID,
-  u as CardBackgroundColorControl
-};