@useinsider/guido 2.1.0-beta.febc521 → 2.1.0-beta.ff1bc98

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -1,18 +1,27 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls */
-.recommendation-controls-container > .container {
-    padding: 16px;
+/* Recommendation Controls - Main settings panel separators */
+.recommendation-controls-container > div {
+    border-bottom: 1px solid #e0e0e0;
 }
 
-.recommendation-controls-container > .container:first-child {
+.recommendation-controls-container > div:first-child {
     padding-top: 0;
 }
 
+.recommendation-controls-container > div:last-child {
+    border-bottom: none;
+}
+
 .container:has(.recommendation-controls-container) {
     padding: 0
 }
+
+/* Hide drag icon for list layout (ordering disabled) */
+ue-orderable.orderable-disabled .droppable-icon {
+    display: none;
+}
 `;
 export {
   n as default

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

@@ -0,0 +1,240 @@
+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/settingsPanel.js

@@ -1,117 +1,173 @@
-import { SettingsPanelRegistry as N, SettingsPanelTab as _, SettingsTab as E, ContainerControls as S, TextControls as L } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SettingsPanelRegistry as S, SettingsPanelTab as I, SettingsTab as T, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as R } from "./block.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as C } from "./cardCompositionControl.js";
-import { RecommendationBlockId as I, RecommendationControlId as T } from "./constants.js";
-import { CONTROL_BLOCK_ID as e } from "./control.js";
-class G extends N {
+import { RecommendationBlockId as N } from "./constants/blockIds.js";
+import { RecommendationControlId as _ } from "./constants/controlIds.js";
+import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
+import "./store/recommendation.js";
+import "./controls/name/index.js";
+import "./controls/price/index.js";
+import "./controls/oldPrice/index.js";
+import "./controls/omnibusPrice/index.js";
+import "./controls/omnibusDiscount/index.js";
+import "./controls/button/index.js";
+import "./controls/image/index.js";
+import { SPACING_CONTROL_ID as U } from "./controls/spacing/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackground/index.js";
+import { LAYOUT_CONTROL_ID as D } from "./controls/layout/index.js";
+import { COMPOSITION_CONTROL_BLOCK_ID as A } from "./controls/cardComposition/index.js";
+class s extends S {
   registerBlockControls(O) {
     O[R] = [
-      new _(
-        E.SETTINGS,
+      new I(
+        T.SETTINGS,
         [
-          e,
-          S.EXTERNAL_INDENTS
+          L,
+          E.EXTERNAL_INDENTS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          L.TEXT_BLOCK_BACKGROUND_COLOR
+          C.TEXT_BLOCK_BACKGROUND_COLOR,
+          B,
+          D,
+          U
         ]
       ),
-      new _(
+      new I(
         "Card Composition",
         [
-          C
+          A
         ]
       ).withLabel("Card Composition")
-    ], O[I.NAME] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.NAME] = [
+      new I(
+        T.SETTINGS,
         [
-          T.NAME_BACKGROUND,
-          T.NAME_COLOR,
-          T.NAME_SIZE,
-          T.NAME_STYLE,
-          T.NAME_FONT_FAMILY
+          _.NAME_STYLE,
+          _.NAME_ALIGN,
+          _.NAME_TEXT_TRIM,
+          _.NAME_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.NAME_ALIGN,
-          T.NAME_PADDINGS
+          _.NAME_BACKGROUND,
+          _.NAME_FONT_FAMILY,
+          _.NAME_SIZE,
+          _.NAME_COLOR
         ]
       )
-    ], O[I.PRICE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.PRICE_BACKGROUND,
-          T.PRICE_COLOR,
-          T.PRICE_SIZE,
-          T.PRICE_STYLE,
-          T.PRICE_FONT_FAMILY
+          _.PRICE_STYLE,
+          _.PRICE_ALIGN,
+          _.PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.PRICE_ALIGN,
-          T.PRICE_PADDINGS
+          _.PRICE_BACKGROUND,
+          _.PRICE_FONT_FAMILY,
+          _.PRICE_SIZE,
+          _.PRICE_COLOR
         ]
       )
-    ], O[I.OLD_PRICE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OLD_PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.OLD_PRICE_BACKGROUND,
-          T.OLD_PRICE_COLOR,
-          T.OLD_PRICE_SIZE,
-          T.OLD_PRICE_STYLE,
-          T.OLD_PRICE_FONT_FAMILY
+          _.OLD_PRICE_STYLE,
+          _.OLD_PRICE_ALIGN,
+          _.OLD_PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.OLD_PRICE_ALIGN,
-          T.OLD_PRICE_PADDINGS
+          _.OLD_PRICE_BACKGROUND,
+          _.OLD_PRICE_FONT_FAMILY,
+          _.OLD_PRICE_SIZE,
+          _.OLD_PRICE_COLOR
         ]
       )
-    ], O[I.BUTTON] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OMNIBUS_PRICE] = [
+      new I(
+        T.SETTINGS,
         [
-          T.BUTTON_TEXT,
-          T.BUTTON_ALIGN,
-          T.BUTTON_MARGINS,
-          T.BUTTON_PADDINGS
+          _.OMNIBUS_PRICE_TEXT_BEFORE,
+          _.OMNIBUS_PRICE_TEXT_AFTER,
+          _.OMNIBUS_PRICE_STYLE,
+          _.OMNIBUS_PRICE_ALIGN,
+          _.OMNIBUS_PRICE_PADDINGS
         ]
       ),
-      new _(
-        E.STYLES,
+      new I(
+        T.STYLES,
         [
-          T.BUTTON_COLOR,
-          T.BUTTON_FONT_FAMILY,
-          T.BUTTON_TEXT_SIZE,
-          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          T.BUTTON_FIT_TO_CONTENT,
-          T.BUTTON_BORDER_RADIUS,
-          T.BUTTON_BORDER
+          _.OMNIBUS_PRICE_BACKGROUND,
+          _.OMNIBUS_PRICE_FONT_FAMILY,
+          _.OMNIBUS_PRICE_SIZE,
+          _.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], O[I.IMAGE] = [
-      new _(
-        E.SETTINGS,
+    ], O[N.OMNIBUS_DISCOUNT] = [
+      new I(
+        T.SETTINGS,
         [
-          T.IMAGE_SIZE,
-          T.IMAGE_MARGINS
+          _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
+          _.OMNIBUS_DISCOUNT_TEXT_AFTER,
+          _.OMNIBUS_DISCOUNT_STYLE,
+          _.OMNIBUS_DISCOUNT_ALIGN,
+          _.OMNIBUS_DISCOUNT_PADDINGS
+        ]
+      ),
+      new I(
+        T.STYLES,
+        [
+          _.OMNIBUS_DISCOUNT_BACKGROUND,
+          _.OMNIBUS_DISCOUNT_FONT_FAMILY,
+          _.OMNIBUS_DISCOUNT_SIZE,
+          _.OMNIBUS_DISCOUNT_COLOR
+        ]
+      )
+    ], O[N.BUTTON] = [
+      new I(
+        T.SETTINGS,
+        [
+          _.BUTTON_TEXT,
+          _.BUTTON_ALIGN,
+          _.BUTTON_PADDINGS,
+          _.BUTTON_MARGINS
+        ]
+      ),
+      new I(
+        T.STYLES,
+        [
+          _.BUTTON_COLOR,
+          _.BUTTON_FONT_FAMILY,
+          _.BUTTON_TEXT_SIZE,
+          _.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+          _.BUTTON_FIT_TO_CONTENT,
+          _.BUTTON_BORDER_RADIUS,
+          _.BUTTON_BORDER
+        ]
+      )
+    ], O[N.IMAGE] = [
+      new I(
+        T.SETTINGS,
+        [
+          _.IMAGE_SIZE,
+          _.IMAGE_MARGINS
         ]
       )
     ];
   }
 }
 export {
-  G as SettingsPanel
+  s as SettingsPanel
 };