@useinsider/guido 2.1.0-beta.9ba2e9d → 2.1.0-beta.9eddc27

package/dist/utils/templatePreparation.js

@@ -1,32 +1,31 @@
-import { useActionsApi as f } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as y } from "../stores/unsubscribe.js";
-const E = () => {
-  const o = x(), t = y(), { getCompiledEmail: i, getTemplateData: n, editorSave: s } = f(), { compileHtml: m } = C();
+import { useActionsApi as b } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
+import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as T } from "../stores/unsubscribe.js";
+const P = () => {
+  const i = C(), t = T(), { getCompiledEmail: o, getTemplateData: s, editorSave: n } = b(), { compileHtml: a } = f();
   return {
     prepareTemplateDetails: async () => {
-      const { html: a, ampHtml: r = "", ampErrors: c = [] } = await i({
+      const { html: r, ampHtml: m = "", ampErrors: c = [] } = await o({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: l, css: p, syncModulesIds: u = [] } = await n(), { compiledHtml: d, stats: e, appliedRules: S } = m(a), g = o.getSelectedDynamicContentList, b = T();
-      return s(), console.debug("HTML Compilation Stats:", {
+      }), { html: l, css: p, syncModulesIds: u = [] } = await s(), { compiledHtml: d, stats: e, appliedRules: g } = a(r), S = i.getSelectedDynamicContentList;
+      return n(), console.debug("HTML Compilation Stats:", {
         originalSize: e.originalSize,
         compiledSize: e.compiledSize,
         reduction: `${e.reductionPercentage.toFixed(2)}%`,
-        appliedRules: S,
+        appliedRules: g,
         executionTime: `${e.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: g,
+        dynamicContentList: S,
         compiledHtml: d,
         rawHtml: l,
         css: p,
-        ampHtml: r,
+        ampHtml: m,
         ampErrors: c,
         modules: u,
         recommendation: {
-          campaignUrls: b.recommendationCampaignUrls,
+          campaignUrls: {},
           configs: {}
         },
         unsubscribe: {
@@ -38,5 +37,5 @@ const E = () => {
   };
 };
 export {
-  E as useTemplatePreparation
+  P as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.9ba2e9d",
+  "version": "2.1.0-beta.9eddc27",
   "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/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,147 +0,0 @@
-import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
-function m(o, n, c, e) {
-  const s = `{{${o}_${n}_${c}}}`, t = `{{${o}_${n}_currency}}`;
-  return e === "before" ? `${t} ${s}` : `${s} ${t}`;
-}
-function b(o, n, c, e, s) {
-  switch (n) {
-    case "productImage": {
-      const t = o.querySelector("img");
-      t && t.setAttribute("src", `{{${c}_${e}_img}}`);
-      const r = o.querySelector("a");
-      r && r.setAttribute("href", `{{${c}_${e}_url}}`);
-      break;
-    }
-    case "productName": {
-      const t = o.querySelector("p");
-      if (t) {
-        const r = t.querySelector("strong") || t;
-        r.textContent = `{{${c}_${e}_name}}`;
-      }
-      break;
-    }
-    case "productPrice": {
-      const t = o.querySelector("p");
-      if (t) {
-        const r = t.querySelector("strong") || t;
-        r.textContent = m(c, e, "price", s);
-      }
-      break;
-    }
-    case "productOldPrice": {
-      const t = o.querySelector("p");
-      if (t) {
-        const r = t.querySelector("strong") || t;
-        r.textContent = m(
-          c,
-          e,
-          "original_price",
-          s
-        ), t.setAttribute("product-attr", "discount");
-      }
-      break;
-    }
-    case "productButton": {
-      const t = o.querySelector("a");
-      t && t.setAttribute("href", `{{${c}_${e}_url}}`);
-      break;
-    }
-    case "productOmnibusPrice": {
-      const t = o.querySelector(".omnibus-price-value");
-      if (t) {
-        t.textContent = `{{${c}_${e}_omnibus_price}}`;
-        const r = t.closest("p");
-        r && (r.setAttribute("product-attr", "omnibus_price"), r.setAttribute("composition", "true"));
-      }
-      break;
-    }
-    case "productOmnibusDiscount": {
-      const t = o.querySelector(".omnibus-discount-value");
-      if (t) {
-        t.textContent = `{{${c}_${e}_omnibus_discount}}`;
-        const r = t.closest("p");
-        r && (r.setAttribute("product-attr", "omnibus_discount"), r.setAttribute("composition", "true"));
-      }
-      break;
-    }
-  }
-}
-function $(o, n, c) {
-  o.querySelectorAll(".recommendation-product-row").forEach((s, t) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((u) => {
-      const l = u.getAttribute("data-attribute-type") || "", a = u.querySelectorAll(".attribute-cell");
-      a.length > 0 ? a.forEach((i) => {
-        b(i, l, n, t, c);
-      }) : b(u, l, n, t, c);
-    });
-  });
-}
-function h(o, n, c) {
-  const e = o.querySelectorAll(".recommendation-product-row");
-  if (!e.length)
-    return;
-  const [s] = e, t = s.querySelector("[data-attribute-type]"), r = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  e.forEach((u, l) => {
-    u.querySelectorAll("[data-attribute-type]").forEach((i) => {
-      const f = i.getAttribute("data-attribute-type") || "";
-      i.querySelectorAll(".attribute-cell").forEach((y, d) => {
-        const A = l * r + d;
-        b(y, f, n, A, c);
-      });
-    });
-  });
-}
-function S(o, n) {
-  const c = o.getAttribute("data-layout") || "grid", e = o.getAttribute("currency-alignment") || "after";
-  c === "list" ? $(o, n, e) : h(o, n, e);
-}
-function q(o, n, c) {
-  let e = o;
-  if ((n.getAttribute("data-layout") || "grid") === "list") {
-    const t = n.querySelectorAll(".recommendation-product-row");
-    Array.from(t).reverse().forEach((u, l) => {
-      const a = t.length - 1 - l, i = u.outerHTML, p = `${`{% if ins_reco_total_product_kind_${c} > ${a} %}`}${i}{% endif %}`;
-      e = e.replace(i, p);
-    });
-  } else {
-    const t = n.querySelectorAll(".recommendation-product-row");
-    if (!t.length)
-      return e;
-    const [r] = t, u = r.querySelector("[data-attribute-type]"), l = u ? u.querySelectorAll(".attribute-cell").length : 1, a = [];
-    t.forEach((i, f) => {
-      const p = i.querySelector(".product-card-wrapper") || i;
-      a.push({
-        element: p,
-        productThreshold: f * l
-      });
-    }), a.reverse().forEach(({ element: i, productThreshold: f }) => {
-      const p = i.outerHTML, d = `${`{% if ins_reco_total_product_kind_${c} > ${f} %}`}${p}{% endif %}`;
-      e = e.replace(p, d);
-    });
-  }
-  return e;
-}
-function g(o, n) {
-  const c = o.match(/<!DOCTYPE[^>]*>/i);
-  return (c ? `${c[0]}
-` : "") + n.documentElement.outerHTML;
-}
-function E(o) {
-  const n = o.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), c = new DOMParser().parseFromString(n, "text/html"), e = c.querySelectorAll(".ins-recommendation-v3-block-v2");
-  if (!e.length)
-    return o;
-  const { buildCampaignUrl: s } = _();
-  e.forEach((r) => {
-    const u = r.getAttribute("recommendation-id");
-    u && (s(u), S(r, u));
-  });
-  let t = g(n, c);
-  return e.forEach((r) => {
-    const u = r.getAttribute("recommendation-id");
-    u && (t = q(t, r, u));
-  }), t.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
-}
-export {
-  m as formatPriceVariable,
-  E as prepareRecommendationBlocks
-};

package/dist/extensions/Blocks/Recommendation/constants/blockIds.js

@@ -1,4 +0,0 @@
-var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
-export {
-  b as RecommendationBlockId
-};

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +0,0 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
-export {
-  o as RecommendationControlId
-};

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,65 +0,0 @@
-import { DEFAULT_ROW_SPACING as n, DEFAULT_COLUMN_SPACING as s, DEFAULT_CARDS_IN_ROW as R } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
-const I = {
-  code: "USD",
-  symbol: "USD",
-  alignment: "after",
-  decimalCount: 2,
-  decimalSeparator: ".",
-  thousandSeparator: ","
-}, i = {
-  textBefore: "",
-  textAfter: ""
-}, O = {
-  textBefore: "",
-  textAfter: ""
-}, C = [
-  t,
-  e,
-  o,
-  T,
-  _,
-  r,
-  U
-], D = {
-  [t]: !0,
-  [e]: !0,
-  [T]: !0,
-  [o]: !0,
-  [_]: !1,
-  [r]: !1,
-  [U]: !0
-}, a = {
-  // Settings
-  strategy: "mostPopular",
-  productIds: [],
-  size: "6",
-  shuffleProducts: !1,
-  language: "en_US",
-  currency: I,
-  filters: [],
-  // Layout
-  layout: "grid",
-  cardsInRow: R,
-  columnSpacing: s,
-  rowSpacing: n,
-  // Composition
-  composition: C,
-  visibility: D,
-  // Element settings
-  omnibusPrice: i,
-  omnibusDiscount: O,
-  textTrimming: !1,
-  // Meta
-  configVersion: 1,
-  recommendationId: 0
-}, E = 1;
-export {
-  E as CURRENT_CONFIG_VERSION,
-  C as DEFAULT_COMPOSITION,
-  I as DEFAULT_CURRENCY,
-  a as DEFAULT_NODE_CONFIG,
-  O as DEFAULT_OMNIBUS_DISCOUNT,
-  i as DEFAULT_OMNIBUS_PRICE,
-  D as DEFAULT_VISIBILITY
-};

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -1,20 +0,0 @@
-const _ = {
-  GRID: "grid",
-  LIST: "list"
-}, o = [
-  { icon: "grid-orientation", value: _.GRID },
-  { icon: "list-orientation", value: _.LIST }
-], t = 3, n = 3, A = 9, T = 4, c = 10, s = 20, O = 0, S = 50, I = 5;
-export {
-  n as DEFAULT_CARDS_IN_ROW,
-  c as DEFAULT_COLUMN_SPACING,
-  t as DEFAULT_PRODUCTS_PER_ROW,
-  s as DEFAULT_ROW_SPACING,
-  o as LAYOUT_OPTIONS,
-  _ as LAYOUT_VALUES,
-  T as MAX_PRODUCTS_PER_ROW,
-  A as MAX_PRODUCT_COUNT,
-  S as MAX_SPACING,
-  O as MIN_SPACING,
-  I as SPACING_STEP
-};

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,19 +0,0 @@
-const c = ".ins-recommendation-product-container", T = {
-  CURRENCY: "currency",
-  SYMBOL: "currency-symbol",
-  ALIGNMENT: "currency-alignment",
-  THOUSAND_SEPARATOR: "currency-thousand-separator",
-  DECIMAL_SEPARATOR: "currency-decimal-separator",
-  DECIMAL_COUNT: "currency-decimal-count"
-}, r = "productImage", n = "productName", o = "productPrice", t = "productOldPrice", R = "productOmnibusPrice", O = "productOmnibusDiscount", _ = "productButton";
-export {
-  _ as ATTR_PRODUCT_BUTTON,
-  r as ATTR_PRODUCT_IMAGE,
-  n as ATTR_PRODUCT_NAME,
-  t as ATTR_PRODUCT_OLD_PRICE,
-  O as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  R as ATTR_PRODUCT_OMNIBUS_PRICE,
-  o as ATTR_PRODUCT_PRICE,
-  c as CONTAINER_SELECTOR,
-  T as CURRENCY_ATTR
-};

package/dist/extensions/Blocks/Recommendation/controls/button/index.js

@@ -1,64 +0,0 @@
-import { createButtonFitToContainerControl as T, createButtonTextStyleAndFontColorControl as r, createButtonTextSizeControl as e, createButtonTextControl as B, createButtonPaddingsControl as l, createButtonMarginsControl as C, createButtonFontFamilyControl as O, createButtonColorControl as N, createButtonBorderRadiusControl as i, createButtonBorderControl as a, createButtonAlignControl as c } from "../../../controlFactories.js";
-import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { RecommendationControlId as t } from "../../constants/controlIds.js";
-import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
-const U = c(
-  t.BUTTON_ALIGN,
-  o.BUTTON,
-  n
-), d = a(
-  t.BUTTON_BORDER,
-  o.BUTTON,
-  n
-), s = i(
-  t.BUTTON_BORDER_RADIUS,
-  o.BUTTON,
-  n
-), _ = N(
-  t.BUTTON_COLOR,
-  o.BUTTON,
-  n
-), m = O(
-  t.BUTTON_FONT_FAMILY,
-  o.BUTTON,
-  n
-), u = C(
-  t.BUTTON_MARGINS,
-  o.BUTTON,
-  n
-), R = l(
-  t.BUTTON_PADDINGS,
-  o.BUTTON,
-  n
-), F = B(
-  t.BUTTON_TEXT,
-  o.BUTTON,
-  n
-), A = e(
-  t.BUTTON_TEXT_SIZE,
-  o.BUTTON,
-  n
-), S = r(
-  t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-  o.BUTTON,
-  n
-), E = T(
-  t.BUTTON_FIT_TO_CONTENT,
-  o.BUTTON,
-  n
-), p = {
-  align: U,
-  border: d,
-  borderRadius: s,
-  color: _,
-  fontFamily: m,
-  margins: u,
-  paddings: R,
-  text: F,
-  textSize: A,
-  textStyleAndFontColor: S,
-  fitToContent: E
-};
-export {
-  p as ButtonControls
-};

package/dist/extensions/Blocks/Recommendation/controls/cardBackground/index.js

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