@useinsider/guido 2.0.0-beta.af0a69f → 2.0.0-beta.b0493eb

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

@@ -0,0 +1,64 @@
+import { DEFAULT_ROW_SPACING as s, DEFAULT_COLUMN_SPACING as R, DEFAULT_CARDS_IN_ROW as n } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as o, 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: ","
+}, O = {
+  textBefore: "",
+  textAfter: ""
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = [
+  t,
+  e,
+  T,
+  o,
+  _,
+  r,
+  U
+], D = {
+  [t]: !0,
+  [e]: !0,
+  [o]: !0,
+  [T]: !0,
+  [_]: !1,
+  [r]: !1,
+  [U]: !0
+}, a = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: I,
+  filters: [],
+  // Layout
+  layout: "vertical",
+  cardsInRow: n,
+  columnSpacing: R,
+  rowSpacing: s,
+  // Composition
+  composition: C,
+  visibility: D,
+  // Element settings
+  omnibusPrice: O,
+  omnibusDiscount: i,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1
+}, E = 1;
+export {
+  E as CURRENT_CONFIG_VERSION,
+  C as DEFAULT_COMPOSITION,
+  I as DEFAULT_CURRENCY,
+  a as DEFAULT_NODE_CONFIG,
+  i as DEFAULT_OMNIBUS_DISCOUNT,
+  O as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_VISIBILITY
+};

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

@@ -0,0 +1,20 @@
+const t = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+}, A = [
+  { text: "Vertical", value: t.VERTICAL },
+  { text: "Horizontal", value: t.HORIZONTAL }
+], _ = 3, O = 3, o = 9, T = 4, R = 10, c = 20, n = 0, C = 50, I = 5;
+export {
+  O as DEFAULT_CARDS_IN_ROW,
+  R as DEFAULT_COLUMN_SPACING,
+  _ as DEFAULT_PRODUCTS_PER_ROW,
+  c as DEFAULT_ROW_SPACING,
+  A as LAYOUT_OPTIONS,
+  t as LAYOUT_VALUES,
+  T as MAX_PRODUCTS_PER_ROW,
+  o as MAX_PRODUCT_COUNT,
+  C as MAX_SPACING,
+  n as MIN_SPACING,
+  I as SPACING_STEP
+};

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,80 @@
+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 = {
+  VERTICAL: ".product-card-segment",
+  HORIZONTAL: ".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
+   * Vertical: .product-card-segment (inner table per product cell)
+   * Horizontal: .product-card-wrapper (table per product row)
+   */
+  _getCardSelector() {
+    return l(this.currentNode) === "vertical" ? a.VERTICAL : a.HORIZONTAL;
+  }
+  /**
+   * 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
+};

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

@@ -0,0 +1,232 @@
+var T = Object.defineProperty;
+var C = (a, n, t) => n in a ? T(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
+var l = (a, n, t) => C(a, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_NAME as g, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_OMNIBUS_PRICE as D, ATTR_PRODUCT_OMNIBUS_DISCOUNT as N, ATTR_PRODUCT_BUTTON as V } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as E } from "../../store/recommendation.js";
+import { getTableDisplayValue as I } from "../../utils/tagName.js";
+import { getCurrentLayout as P } from "../main/utils.js";
+const S = "ui-elements-recommendation-card-composition", k = {
+  ORDERABLE: "cardComposition"
+}, c = ".recommendation-attribute-row", v = ".product-card-wrapper > tbody", _ = "data-card-composition", d = "data-attribute-type", m = "data-visibility", s = [
+  { key: O, label: "Product Image", visible: !0 },
+  { key: g, label: "Product Name", visible: !0 },
+  { key: R, label: "Product Price", visible: !0 },
+  { key: A, label: "Product Original Price", visible: !0 },
+  { key: D, label: "Omnibus Price", visible: !1 },
+  { key: N, label: "Omnibus Discount", visible: !1 },
+  { key: V, label: "Product Button", visible: !0 }
+];
+class H extends f {
+  constructor() {
+    super(...arguments);
+    l(this, "store", E());
+    l(this, "unsubscribeOrientation", null);
+  }
+  getId() {
+    return S;
+  }
+  getTemplate() {
+    const t = s.map((e) => ({
+      key: e.key,
+      label: e.label,
+      content: this._createItemContent(e.label, e.key)
+    }));
+    return `
+            <div class="container" data-card-composition-control>
+                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
+                ${this._GuOrderable(k.ORDERABLE, t)}
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializeComposition(), this._registerValueChangeListeners(), this._updateOrderableState(), this._subscribeToOrientationChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._initializeComposition(), this._updateOrderableState();
+  }
+  /**
+   * Creates the HTML content for an orderable item with label and toggle
+   */
+  _createItemContent(t, e) {
+    return `
+            <div style="display: flex; align-items: center; justify-content: space-between;
+                padding: 8px; gap: 8px;">
+                <span style="flex: 1;">${t}</span>
+                ${this._GuToggle(`visibility_${e}`)}
+            </div>
+        `;
+  }
+  /**
+   * Registers event listeners for composition and visibility changes
+   */
+  _registerValueChangeListeners() {
+    this.api.onValueChanged("cardComposition", (t) => {
+      this._applyCompositionToBlock(t);
+    }), s.forEach((t) => {
+      this.api.onValueChanged(`visibility_${t.key}`, (e) => {
+        this._applyVisibilityToBlock(t.key, e);
+      });
+    });
+  }
+  /**
+   * Initializes composition order and visibility state from the current node
+   */
+  _initializeComposition() {
+    const t = this._readCompositionFromNode(), e = this._readVisibilityFromRows(), i = {
+      cardComposition: t,
+      ...this._buildVisibilityValues(e)
+    };
+    this.api.updateValues(i);
+  }
+  /**
+   * Reads composition order from node's data-card-composition attribute
+   * Falls back to default order if attribute is not present
+   */
+  _readCompositionFromNode() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return s.map((e) => e.key);
+    const t = this.currentNode.getAttribute(_);
+    return t ? t.split(",").filter(Boolean) : s.map((e) => e.key);
+  }
+  /**
+   * Builds visibility values object from the visibility map
+   */
+  _buildVisibilityValues(t) {
+    return s.reduce((e, i) => (e[`visibility_${i.key}`] = t[i.key] ?? !0, e), {});
+  }
+  /**
+   * Read visibility state from individual row elements' data-visibility attributes
+   * This ensures toggles reflect the actual DOM state
+   */
+  _readVisibilityFromRows() {
+    if (!this.currentNode)
+      return this._getDefaultVisibilities();
+    const t = Array.from(this.currentNode.querySelectorAll(c)), e = this._extractVisibilityFromRows(t);
+    return this._mergeWithDefaults(e);
+  }
+  /**
+   * Returns default visibility values for all items
+   */
+  _getDefaultVisibilities() {
+    return s.reduce((t, e) => (t[e.key] = e.visible, t), {});
+  }
+  /**
+   * Extracts visibility values from DOM nodes
+   */
+  _extractVisibilityFromRows(t) {
+    const e = {};
+    return t.forEach((i) => {
+      if (!("getAttribute" in i))
+        return;
+      const o = i.getAttribute(d), r = i.getAttribute(m);
+      o && r !== null && (e[o] = this._parseVisibilityValue(r));
+    }), e;
+  }
+  /**
+   * Parses visibility value from string to boolean
+   * Accepts "1", "true" as true, everything else as false
+   */
+  _parseVisibilityValue(t) {
+    return t === "1" || t === "true";
+  }
+  /**
+   * Merges extracted visibilities with default values for missing keys
+   */
+  _mergeWithDefaults(t) {
+    return s.forEach((e) => {
+      e.key in t || (t[e.key] = e.visible);
+    }), t;
+  }
+  /**
+   * Apply the reordered composition to the block's HTML structure
+   * Updates the data-card-composition attribute and reorders product attributes
+   * Note: Reordering is only applied for vertical layout
+   */
+  _applyCompositionToBlock(t) {
+    if (!this.currentNode)
+      return;
+    const e = this._getCurrentLayout();
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(_, t.join(",")).apply(new u("Update card composition")), e === "vertical" && this._reorderProductAttributes(t);
+  }
+  /**
+   * Reorders attribute rows within each product card based on composition order
+   * Targets the tbody inside each product-attribute-cell to preserve card structure
+   */
+  _reorderProductAttributes(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelectorAll(v);
+    if (!(e != null && e.length))
+      return;
+    const i = this.api.getDocumentModifier();
+    e.forEach((o) => {
+      const r = this._buildCompositionHtml(o, t);
+      i.modifyHtml(o).setInnerHtml(r);
+    }), i.apply(new u("Reorder product attributes"));
+  }
+  /**
+   * Builds HTML string with attributes ordered according to composition
+   */
+  _buildCompositionHtml(t, e) {
+    return e.reduce((i, o) => {
+      const r = t.querySelector(`${c}[${d}="${o}"]`);
+      return r && "getOuterHTML" in r ? i + r.getOuterHTML() : i;
+    }, "");
+  }
+  /**
+   * Apply visibility changes to the block's HTML structure
+   * Updates display style and data-visibility attribute for all matching elements
+   * - <tr> elements: use display: none / table-row
+   * - <td> elements: use display: none / table-cell
+   */
+  _applyVisibilityToBlock(t, e) {
+    if (!this.currentNode)
+      return;
+    const i = this.currentNode.querySelectorAll(`${c}[${d}="${t}"]`);
+    if (!(i != null && i.length))
+      return;
+    const o = e ? "1" : "0", r = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, b = this.api.getDocumentModifier();
+    i.forEach((p) => {
+      const y = I(p), h = e ? y : "none";
+      b.modifyHtml(p).setStyle("display", h).setAttribute(m, o);
+    }), b.apply(new u(r));
+  }
+  /**
+   * Gets the current layout orientation from store or DOM
+   */
+  _getCurrentLayout() {
+    return this.store.recommendationConfigs.orientation || P(this.currentNode);
+  }
+  /**
+   * Updates orderable state based on layout orientation
+   * Adds/removes disabled class to hide drag icons for horizontal layout
+   */
+  _updateOrderableState() {
+    const e = this._getCurrentLayout() === "horizontal", i = this.getContainer();
+    if (!i)
+      return;
+    const o = i.querySelector("[data-card-composition-control]");
+    if (!o)
+      return;
+    const r = o.querySelector("ue-orderable");
+    r && r.classList.toggle("orderable-disabled", e);
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates orderable state when layout changes via the layout control
+   */
+  _subscribeToOrientationChanges() {
+    this.unsubscribeOrientation && this.unsubscribeOrientation();
+    let t = this.store.recommendationConfigs.orientation;
+    this.unsubscribeOrientation = this.store.$subscribe(() => {
+      const e = this.store.recommendationConfigs.orientation;
+      e !== t && (t = e, this._updateOrderableState());
+    });
+  }
+}
+export {
+  S as COMPOSITION_CONTROL_BLOCK_ID,
+  H as RecommendationCardCompositionControl
+};

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

@@ -0,0 +1,19 @@
+import { createImageMarginsControl as m, createImageSizeControl as n } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as t } from "../../constants/selectors.js";
+const e = n(
+  r.IMAGE_SIZE,
+  o.IMAGE,
+  t
+), i = m(
+  r.IMAGE_MARGINS,
+  o.IMAGE,
+  t
+), C = {
+  size: e,
+  margins: i
+};
+export {
+  C as ImageControls
+};

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

@@ -0,0 +1,108 @@
+var p = Object.defineProperty;
+var l = (e, o, t) => o in e ? p(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var s = (e, o, t) => l(e, typeof o != "symbol" ? o + "" : o, t);
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
+import { CONTAINER_SELECTOR as C } from "../../constants/selectors.js";
+import { LAYOUT_OPTIONS as L } from "../../constants/layout.js";
+import { RecommendationConfigService as i } from "../../services/configService.js";
+import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
+import { prepareProductRows as N } from "../../templates/index.js";
+import { getCurrentLayout as d, getBlockElement as T, getCurrentCardBackgroundColor as _, getCardComposition as O, applyCardBackgroundColor as R } from "../main/utils.js";
+import { getDefaultProducts as A } from "../../templates/utils.js";
+const U = "recommendation-layout-control", a = {
+  LAYOUT: "layout"
+}, w = {
+  LAYOUT: "data-layout"
+};
+class V extends f {
+  constructor() {
+    super(...arguments);
+    s(this, "store", y());
+    s(this, "isChangingLayout", !1);
+  }
+  getId() {
+    return U;
+  }
+  getTemplate() {
+    return `
+            <div class="layout-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Layout Orientation" }),
+      this._GuRadioButton({
+        name: a.LAYOUT,
+        buttons: L
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const r = i.getConfig(this.currentNode).layout || d(this.currentNode);
+    this.api.updateValues({
+      [a.LAYOUT]: r
+    });
+  }
+  /**
+   * Handles layout change
+   * Updates node config, data attribute and regenerates product rows
+   */
+  _onLayoutChange(t) {
+    if (this.isChangingLayout || !this.currentNode || (i.getConfig(this.currentNode).layout || d(this.currentNode)) === t)
+      return;
+    const n = T(this.currentNode);
+    if (n) {
+      this.isChangingLayout = !0;
+      try {
+        i.updateConfig(
+          this.api,
+          this.currentNode,
+          { layout: t },
+          `Changed layout to ${t}`
+        ), this.store.$patch({
+          recommendationConfigs: {
+            orientation: t
+          }
+        }), this.api.getDocumentModifier().modifyHtml(n).setAttribute(w.LAYOUT, t).apply(new c(`Update layout to ${t}`)), this._regenerateProductRows(t);
+      } finally {
+        this.isChangingLayout = !1;
+      }
+    }
+  }
+  /**
+   * Regenerates product rows based on the selected layout
+   * Special handling: captures and reapplies background color across layout changes
+   */
+  _regenerateProductRows(t) {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return;
+    const r = this.currentNode.querySelector(C);
+    if (!r)
+      return;
+    const u = _(this.currentNode), n = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : A(), m = i.getConfig(this.currentNode), g = O(this.currentNode), h = N(n, t, {
+      productsPerRow: m.cardsInRow,
+      composition: g
+    });
+    this.api.getDocumentModifier().modifyHtml(r).setInnerHtml(h).apply(new c(`Regenerated products for ${t} layout`)), R({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier(),
+      bgColor: u,
+      layout: t
+    });
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(a.LAYOUT, (t) => {
+      this._onLayoutChange(t);
+    });
+  }
+}
+export {
+  U as LAYOUT_CONTROL_ID,
+  V as LayoutControl
+};