@useinsider/guido 2.2.0-beta.8abc7b6 → 2.2.0-beta.953ff70

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -1,240 +0,0 @@
-import { ModificationDescription as f } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as u, DEFAULT_NODE_CONFIG as e } from "../constants/defaultConfig.js";
-import { setCurrencyAttributes as g } from "../controls/main/utils.js";
-import { hasMinimalConfig as a } from "../types/nodeConfig.js";
-class C {
-  // ========================================================================
-  // Read Operations
-  // ========================================================================
-  /**
-   * Get configuration from a node, with defaults for missing values
-   *
-   * This is the primary way to read configuration from a block.
-   * Always returns a complete config object with defaults merged in.
-   * @example
-   * const config = RecommendationConfigService.getConfig(this.currentNode);
-   * console.log(config.strategy); // 'mostPopular'
-   * @param node - The immutable HTML node to read config from
-   * @returns Complete configuration with defaults for missing values
-   */
-  static getConfig(i) {
-    if (!i)
-      return this.cloneDefaults();
-    if (!("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
-      return this.cloneDefaults();
-    try {
-      const t = i.getNodeConfig();
-      return t ? this.mergeWithDefaults(t) : this.cloneDefaults();
-    } catch {
-      return this.cloneDefaults();
-    }
-  }
-  /**
-   * Check if a node has valid configuration stored
-   *
-   * Used for migration detection - returns false for legacy templates
-   * that need their configuration migrated.
-   * @param node - The immutable HTML node to check
-   * @returns True if node has valid config with version number
-   */
-  static hasConfig(i) {
-    if (!i || !("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
-      return !1;
-    try {
-      const t = i.getNodeConfig();
-      return a(t);
-    } catch {
-      return !1;
-    }
-  }
-  /**
-   * Get the configuration version from a node
-   * @param node - The immutable HTML node to check
-   * @returns Config version number, or 0 if no config exists
-   */
-  static getConfigVersion(i) {
-    return this.hasConfig(i) && this.getConfig(i).configVersion || 0;
-  }
-  // ========================================================================
-  // Write Operations
-  // ========================================================================
-  /**
-   * Update specific configuration values
-   *
-   * Merges the updates with existing config and persists to node.
-   * This is the primary way to update configuration from controls.
-   * @example
-   * RecommendationConfigService.updateConfig(
-   *   this.api,
-   *   this.currentNode,
-   *   { strategy: 'complementaryItems' },
-   *   'Changed recommendation algorithm'
-   * );
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to update
-   * @param updates - Partial config with values to update
-   * @param description - Human-readable description for undo/redo
-   * @returns The new complete configuration
-   */
-  static updateConfig(i, t, o, n) {
-    const s = this.getConfig(t), r = this.deepMerge(s, o);
-    return this.saveConfig(i, t, r, n), r;
-  }
-  /**
-   * Initialize configuration for a new block
-   *
-   * Called when a block is first created (dropped into template).
-   * Can optionally merge in partial config from migration.
-   * @example
-   * // In Block.onCreated lifecycle
-   * RecommendationConfigService.initializeConfig(this.api, node);
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to initialize
-   * @param partialConfig - Optional partial config to merge with defaults
-   * @returns The initialized configuration
-   */
-  static initializeConfig(i, t, o) {
-    const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
-    return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
-      currentNode: t,
-      documentModifier: i.getDocumentModifier(),
-      currency: n.currency
-    }), n;
-  }
-  /**
-   * Save complete configuration to a node
-   *
-   * Low-level method - prefer `updateConfig` or `initializeConfig` in most cases.
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to save to
-   * @param config - Complete configuration to save
-   * @param description - Human-readable description for undo/redo
-   */
-  static saveConfig(i, t, o, n) {
-    try {
-      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new f(n));
-    } catch (s) {
-      console.warn("[RecommendationConfigService] Failed to save config:", s);
-    }
-  }
-  // ========================================================================
-  // Migration Helpers
-  // ========================================================================
-  /**
-   * Migrate configuration from legacy data-attributes
-   *
-   * Reads existing data-attributes and creates a proper node config.
-   * Used when loading templates created before node config was implemented.
-   * @param api - Stripo extension API with document modifier
-   * @param node - The block node to migrate
-   * @returns The migrated configuration
-   */
-  static migrateFromDataAttributes(i, t) {
-    const o = {
-      configVersion: u
-    };
-    if ("getAttribute" in t && typeof t.getAttribute == "function") {
-      const n = t.getAttribute("data-layout");
-      n === "list" || n === "horizontal" ? o.layout = "list" : (n === "grid" || n === "vertical") && (o.layout = "grid");
-      const s = t.getAttribute("data-card-composition");
-      s && (o.composition = s.split(",").filter(Boolean));
-      const r = t.getAttribute("data-column-spacing");
-      r && (o.columnSpacing = parseInt(r) || e.columnSpacing);
-      const c = t.getAttribute("data-row-spacing");
-      c && (o.rowSpacing = parseInt(c) || e.rowSpacing);
-    }
-    return this.initializeConfig(i, t, o);
-  }
-  /**
-   * Check if configuration needs migration
-   * @param node - The block node to check
-   * @returns True if migration is needed
-   */
-  static needsMigration(i) {
-    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < u : !0 : !1;
-  }
-  // ========================================================================
-  // Internal Helpers
-  // ========================================================================
-  /**
-   * Clone default config to avoid mutations
-   */
-  static cloneDefaults() {
-    return {
-      ...e,
-      currency: { ...e.currency },
-      omnibusPrice: { ...e.omnibusPrice },
-      omnibusDiscount: { ...e.omnibusDiscount },
-      composition: [...e.composition],
-      visibility: { ...e.visibility },
-      filters: [],
-      productIds: [],
-      recommendationId: 0
-    };
-  }
-  /**
-   * Merge partial config with defaults
-   *
-   * Deep merges nested objects like currency, omnibus settings.
-   */
-  static mergeWithDefaults(i) {
-    const t = this.cloneDefaults();
-    return {
-      ...t,
-      ...i,
-      currency: {
-        ...t.currency,
-        ...i.currency || {}
-      },
-      omnibusPrice: {
-        ...t.omnibusPrice,
-        ...i.omnibusPrice || {}
-      },
-      omnibusDiscount: {
-        ...t.omnibusDiscount,
-        ...i.omnibusDiscount || {}
-      },
-      visibility: {
-        ...t.visibility,
-        ...i.visibility || {}
-      },
-      composition: i.composition || t.composition,
-      filters: i.filters || [],
-      productIds: i.productIds || []
-    };
-  }
-  /**
-   * Deep merge for nested objects
-   *
-   * Recursively merges source into target, preserving existing values
-   * that aren't explicitly overwritten.
-   */
-  static deepMerge(i, t) {
-    return {
-      ...i,
-      ...t,
-      currency: {
-        ...i.currency,
-        ...t.currency || {}
-      },
-      omnibusPrice: {
-        ...i.omnibusPrice,
-        ...t.omnibusPrice || {}
-      },
-      omnibusDiscount: {
-        ...i.omnibusDiscount,
-        ...t.omnibusDiscount || {}
-      },
-      visibility: {
-        ...i.visibility,
-        ...t.visibility || {}
-      },
-      composition: t.composition ?? i.composition,
-      filters: t.filters ?? i.filters,
-      productIds: t.productIds ?? i.productIds
-    };
-  }
-}
-export {
-  C as RecommendationConfigService
-};

package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js

@@ -1,228 +0,0 @@
-import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_BUTTON as b, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as h, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
-import { formatPrice as _ } from "../../utils/priceFormatter.js";
-import { sanitizeImageUrl as $ } from "../utils.js";
-const a = "0 5px", o = "attribute-cell";
-function p() {
-  const t = T(), { currencySettings: e } = t.recommendationConfigs;
-  return {
-    code: e.value,
-    symbol: e.symbol,
-    alignment: e.alignment === "0" ? "before" : "after",
-    decimalCount: parseInt(e.decimalCount) || 2,
-    decimalSeparator: e.decimalSeparator,
-    thousandSeparator: e.thousandSeparator
-  };
-}
-function c(t, e = "price") {
-  const n = p(), l = t[e], r = (l == null ? void 0 : l[n.code]) ?? Object.values(l ?? {})[0] ?? 0;
-  return _({
-    price: r,
-    currency: n
-  });
-}
-const P = {
-  [x]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-image product-image"
-                            align="center"
-                            esd-extension-block-id="${s.IMAGE}">
-                            <a target="_blank" href="${t.url}">
-                                <img
-                                    src="${$(t.image_url)}"
-                                    alt="${t.name}"
-                                    style="display: block; max-width: 100%; height: auto;"
-                                    class="adapt-img">
-                            </a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [f]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="middle">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0"
-                style="table-layout: fixed;">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.NAME}">
-                            <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${t.name}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [y]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-price es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.PRICE}">
-                            <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${c(t, "price")}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [h]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-old-price es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.OLD_PRICE}">
-                            <p contenteditable="false" style="font-size: 14px; color: #999999;">
-                                <strong>${c(t, "original_price")}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [m]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-omnibus-price es-p15l es-p15r"
-                            align="center"
-                            data-text-before="Lowest 30-day price: "
-                            data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_PRICE}">
-                            <p style="font-size: 12px; color: #666666;">
-                                <span class="omnibus-text-before">Lowest 30-day price: </span>
-                                <span class="omnibus-price-value">${c(t, "original_price")}</span>
-                                <span class="omnibus-text-after"></span>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [u]: (t) => {
-    var d, i;
-    const e = p(), n = ((d = t.original_price) == null ? void 0 : d[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, l = ((i = t.price) == null ? void 0 : i[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - l) / n * 100) : 0, g = r > 0 ? `-${r}%` : "0%";
-    return `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-omnibus-discount es-p15l es-p15r"
-                            align="center"
-                            data-text-before=""
-                            data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
-                            <p style="font-size: 12px; color: #666666;">
-                                <span class="omnibus-text-before"></span>
-                                <span class="omnibus-discount-value">${g}</span>
-                                <span class="omnibus-text-after"></span>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `;
-  },
-  [b]: () => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-button product-button es-p10t es-p10b"
-                            align="center"
-                            esd-extension-block-id="${s.BUTTON}">
-                            <span
-                                class="es-button-border"
-                                style="
-                                    border-width: 1px;
-                                    background: rgb(217, 234, 211);
-                                    border-color: rgb(106, 168, 79);
-                                ">
-                                <a
-                                    href="#"
-                                    class="es-button buy-button"
-                                    target="_blank"
-                                    style="color: rgb(56, 118, 29); background: rgb(217, 234, 211);">
-                                    Buy
-                                </a>
-                            </span>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `
-};
-export {
-  o as ATTRIBUTE_CELL_CLASS,
-  a as DEFAULT_CELL_PADDING,
-  P as gridElementRenderer
-};