@useinsider/guido 2.0.0-beta.061e9c9 → 2.0.0-beta.0941bcd

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

@@ -0,0 +1,239 @@
+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: []
+    };
+  }
+  /**
+   * 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,39 +1,48 @@
-import { SettingsPanelRegistry as E, SettingsPanelTab as I, SettingsTab as N, ContainerControls as S, TextControls as C } 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 L } from "./cardCompositionControl.js";
-import { RecommendationBlockId as T, RecommendationControlId as _ } from "./constants.js";
-import { CONTROL_BLOCK_ID as A } from "./control.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as U } from "./controls/cardBackgroundColorControl.js";
-import { PRICE_INLINE_LAYOUT_CONTROL_ID as D } from "./controls/priceInlineLayoutControl.js";
-import { SPACING_CONTROL_ID as B } from "./controls/spacingControl.js";
-class Y extends E {
+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 I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
-          A,
-          D,
-          S.EXTERNAL_INDENTS
+          L,
+          E.EXTERNAL_INDENTS
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           C.TEXT_BLOCK_BACKGROUND_COLOR,
-          U,
-          B
+          B,
+          D,
+          U
         ]
       ),
       new I(
         "Card Composition",
         [
-          L
+          A
         ]
       ).withLabel("Card Composition")
-    ], O[T.NAME] = [
+    ], O[N.NAME] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.NAME_STYLE,
           _.NAME_ALIGN,
@@ -42,38 +51,35 @@ class Y extends E {
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.NAME_BACKGROUND,
           _.NAME_FONT_FAMILY,
-          _.NAME_LINE_SPACING,
           _.NAME_SIZE,
           _.NAME_COLOR
         ]
       )
-    ], O[T.PRICE] = [
+    ], O[N.PRICE] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.PRICE_STYLE,
           _.PRICE_ALIGN,
-          _.PRICE_HIDE_IF_SAME,
           _.PRICE_PADDINGS
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.PRICE_BACKGROUND,
           _.PRICE_FONT_FAMILY,
-          _.PRICE_LINE_SPACING,
           _.PRICE_SIZE,
           _.PRICE_COLOR
         ]
       )
-    ], O[T.OLD_PRICE] = [
+    ], O[N.OLD_PRICE] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.OLD_PRICE_STYLE,
           _.OLD_PRICE_ALIGN,
@@ -81,18 +87,17 @@ class Y extends E {
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.OLD_PRICE_BACKGROUND,
           _.OLD_PRICE_FONT_FAMILY,
-          _.OLD_PRICE_LINE_SPACING,
           _.OLD_PRICE_SIZE,
           _.OLD_PRICE_COLOR
         ]
       )
-    ], O[T.OMNIBUS_PRICE] = [
+    ], O[N.OMNIBUS_PRICE] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.OMNIBUS_PRICE_TEXT_BEFORE,
           _.OMNIBUS_PRICE_TEXT_AFTER,
@@ -102,18 +107,17 @@ class Y extends E {
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.OMNIBUS_PRICE_BACKGROUND,
           _.OMNIBUS_PRICE_FONT_FAMILY,
-          _.OMNIBUS_PRICE_LINE_SPACING,
           _.OMNIBUS_PRICE_SIZE,
           _.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], O[T.OMNIBUS_DISCOUNT] = [
+    ], O[N.OMNIBUS_DISCOUNT] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
           _.OMNIBUS_DISCOUNT_TEXT_AFTER,
@@ -123,18 +127,17 @@ class Y extends E {
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.OMNIBUS_DISCOUNT_BACKGROUND,
           _.OMNIBUS_DISCOUNT_FONT_FAMILY,
-          _.OMNIBUS_DISCOUNT_LINE_SPACING,
           _.OMNIBUS_DISCOUNT_SIZE,
           _.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], O[T.BUTTON] = [
+    ], O[N.BUTTON] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.BUTTON_TEXT,
           _.BUTTON_ALIGN,
@@ -143,7 +146,7 @@ class Y extends E {
         ]
       ),
       new I(
-        N.STYLES,
+        T.STYLES,
         [
           _.BUTTON_COLOR,
           _.BUTTON_FONT_FAMILY,
@@ -154,9 +157,9 @@ class Y extends E {
           _.BUTTON_BORDER
         ]
       )
-    ], O[T.IMAGE] = [
+    ], O[N.IMAGE] = [
       new I(
-        N.SETTINGS,
+        T.SETTINGS,
         [
           _.IMAGE_SIZE,
           _.IMAGE_MARGINS
@@ -166,5 +169,5 @@ class Y extends E {
   }
 }
 export {
-  Y as SettingsPanel
+  s as SettingsPanel
 };

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

@@ -1,13 +1,14 @@
-import { RecommendationFeedSourceMaps as n, PriceAttributes as u } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as l } from "../../../../services/recommendationApi.js";
-import { useConfigStore as c } from "../../../../stores/config.js";
-import { defineStore as p } from "pinia";
-import { generateCompleteFilterQuery as m } from "../utils/filterUtil.js";
-const a = l(), d = () => ({
+import { RecommendationFeedSourceMaps as l, PriceAttributes as p } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as m } from "../../../../services/recommendationApi.js";
+import { useConfigStore as f } from "../../../../stores/config.js";
+import { defineStore as d } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as g } from "../constants/layout.js";
+import { generateCompleteFilterQuery as c } from "../utils/filterUtil.js";
+const s = m(), h = () => ({
   recommendationCampaignUrls: {},
   recommendationProducts: [],
   recommendationConfigs: {
-    cardsInRow: 3,
+    cardsInRow: g,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -118,14 +119,14 @@ const a = l(), d = () => ({
     productIds: ["22", "12"],
     id: 1,
     language: "tr_TR",
-    orientation: "vertical",
+    orientation: "grid",
     recommendedProducts: [],
     sendProductRequestFlag: !1,
     shuffleProducts: !1,
     strategy: "mostPopular",
     textTrimming: !0,
     unresponsive: !1,
-    size: "9"
+    size: "6"
   },
   activePredictiveAlgorithms: [],
   languages: {},
@@ -134,8 +135,8 @@ const a = l(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), y = p("guidoRecommendationExtension", {
-  state: () => d(),
+}), R = d("guidoRecommendationExtension", {
+  state: () => h(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,
     getFilterGroupCount: (e) => {
@@ -145,7 +146,7 @@ const a = l(), d = () => ({
     getActivePredictiveAlgorithms: (e) => {
       const t = [];
       return e.activePredictiveAlgorithms.forEach((r) => {
-        t.push(...n.filter((i) => i.id === r));
+        t.push(...l.filter((i) => i.id === r));
       }), t.map((r) => ({
         text: r.name,
         value: r.key
@@ -160,7 +161,7 @@ const a = l(), d = () => ({
       value: t.text
     })),
     getFilterList: (e) => Object.values(e.filterList).map((t) => {
-      const r = t.type === "defaultAttribute", i = u.includes(t.attributeName);
+      const r = t.type === "defaultAttribute", i = p.includes(t.attributeName);
       let o = r ? t.attributeName : `product_attributes.${t.attributeName}`;
       return o = i ? `${o}.${e.recommendationConfigs.currencySettings.value}` : o, {
         text: t.displayName,
@@ -178,13 +179,13 @@ const a = l(), d = () => ({
         activePredictiveAlgorithms: e,
         languages: t,
         currencies: r
-      } = await a.fetchRecommendationCreateData();
+      } = await s.fetchRecommendationCreateData();
       this.activePredictiveAlgorithms = e, this.languages = t;
       const [i] = r;
       this.recommendationConfigs.currencySettings.name = i.text, this.recommendationConfigs.currencySettings.value = i.value, this.currencyList = r, this.filterStatus = !!this.recommendationConfigs.filters.length;
     },
     async fetchRecommendationFilters() {
-      const e = await a.fetchRecommendationFilters();
+      const e = await s.fetchRecommendationFilters();
       this.filterList = e;
     },
     addFilterGroup(e) {
@@ -224,13 +225,15 @@ const a = l(), d = () => ({
       }
     },
     addFilter(e) {
-      const t = [...this.recommendationConfigs.filters], r = t.findLastIndex((i) => i.filterGroup === e.filterGroup);
-      r !== -1 ? t.splice(r + 1, 0, {
+      const t = [...this.recommendationConfigs.filters], i = t.filter(
+        (a) => a.filterGroup === e.filterGroup
+      ).length + 1, o = t.findLastIndex((a) => a.filterGroup === e.filterGroup);
+      o !== -1 ? t.splice(o + 1, 0, {
         ...e,
-        filterNumber: r + 2
+        filterNumber: i
       }) : t.push({
         ...e,
-        filterNumber: 1
+        filterNumber: i
       }), this.$patch({
         recommendationConfigs: {
           filters: t
@@ -238,30 +241,32 @@ const a = l(), d = () => ({
       });
     },
     generateFilterQuery() {
-      return m(this.recommendationConfigs.filters);
+      return c(this.recommendationConfigs.filters);
     },
     async fetchRecommendationProducts() {
-      var o;
-      const e = this.generateFilterQuery(), t = ((o = n.find((s) => s.key === this.recommendationConfigs.strategy)) == null ? void 0 : o.path) || "", r = c(), i = await a.fetchRecommendationProducts(
-        t,
-        {
-          // TODO: Here will be optimized and filled carefully
-          locale: this.recommendationConfigs.language,
-          currency: this.recommendationConfigs.currencySettings.value,
-          partnerName: r.partnerName,
-          productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
-          size: this.recommendationConfigs.size,
-          details: !0,
-          campaignId: "{campaignId}",
-          filter: e
-        }
+      var u;
+      const e = this.recommendationConfigs.filters.filter((n) => n.isValid), t = c(e), r = ((u = l.find((n) => n.key === this.recommendationConfigs.strategy)) == null ? void 0 : u.path) || "", i = f(), o = {
+        // Note: {itemId} and {campaignId} are template placeholders replaced at runtime
+        locale: this.recommendationConfigs.language,
+        currency: this.recommendationConfigs.currencySettings.value,
+        partnerName: i.partnerName,
+        productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
+        size: this.recommendationConfigs.size,
+        details: !0,
+        campaignId: "{campaignId}",
+        filter: t
+      };
+      this.recommendationConfigs.shuffleProducts && (o.shuffle = !0);
+      const a = await s.fetchRecommendationProducts(
+        r,
+        o
       );
       this.$patch({
-        recommendationProducts: i
+        recommendationProducts: a
       });
     }
   }
 });
 export {
-  y as useRecommendationExtensionStore
+  R as useRecommendationExtensionStore
 };