@useinsider/guido 1.0.3-beta.df46976 → 1.0.3-beta.dfb1fcf

package/dist/extensions/Blocks/Recommendation/controls/priceInlineLayoutControl.js

@@ -0,0 +1,160 @@
+import { ModificationDescription as M } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as w } from "../../common-control.js";
+import { RecommendationControlId as N, ATTR_DATA_PRICE_INLINE as E, RecommendationBlockId as g } from "../constants.js";
+const k = N.PRICE_INLINE_LAYOUT, b = ".recommendation-attribute-row", B = "tr.recommendation-product-row", m = "data-attribute-type", T = "data-inline-merged", C = "data-visibility";
+class V extends w {
+  getId() {
+    return k;
+  }
+  getTemplate() {
+    return `
+            <div class="container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Move to Next Line" }),
+      this._GuToggle("priceNextLine")
+    ])}
+                <div style="color: #666; font-size: 12px; margin-top: 8px; padding-left: 8px;">
+                    When disabled, Price and Old Price will appear side by side
+                </div>
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializePriceInlineState(), this._registerValueChangeListener();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._initializePriceInlineState();
+  }
+  /**
+   * Reads the current price inline state from the block's data attribute
+   * and updates the toggle UI
+   * Note: Toggle ON = separate rows (next line), Toggle OFF = inline (same row)
+   */
+  _initializePriceInlineState() {
+    const r = !this._readPriceInlineState();
+    this.api.updateValues({
+      priceNextLine: r
+    });
+  }
+  /**
+   * Reads the price inline state from the block wrapper's data attribute
+   */
+  _readPriceInlineState() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return !1;
+    const e = this.currentNode.getAttribute(E);
+    return console.debug("inline attr", e), e === "1" || e === "true";
+  }
+  /**
+   * Registers listener for toggle changes
+   */
+  _registerValueChangeListener() {
+    this.api.onValueChanged("priceNextLine", (e) => {
+      const r = !e;
+      this._applyPriceInlineLayout(r);
+    });
+  }
+  /**
+   * Applies the price inline layout by restructuring the DOM
+   * When enabling inline: Merges Old Price content into Price row (side by side)
+   * When disabling inline: Separates them back into individual rows
+   */
+  _applyPriceInlineLayout(e) {
+    if (!this.currentNode)
+      return;
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(E, e ? "1" : "0").apply(new M("Update price inline attribute"));
+    const r = this.currentNode.querySelectorAll(B);
+    if (!(r != null && r.length))
+      return;
+    const i = this.api.getDocumentModifier();
+    r.forEach((t) => {
+      e ? this._mergeOldPriceIntoPrice(t, i) : this._separateOldPriceFromPrice(t, i);
+    }), i.apply(new M(
+      e ? "Merge price rows into inline layout" : "Separate price rows"
+    ));
+  }
+  /**
+   * Merges Old Price content into the same row as Price (inline layout)
+   * Creates a structure where both prices are side by side in one row
+   */
+  _mergeOldPriceIntoPrice(e, r) {
+    const i = e.querySelector(
+      `${b}[${m}="productPrice"]`
+    ), t = e.querySelector(
+      `${b}[${m}="productOldPrice"]`
+    );
+    if (!i || !t || "getAttribute" in t && t.getAttribute(T) === "1" || !("querySelectorAll" in i) || !("querySelectorAll" in t))
+      return;
+    const a = Array.from(i.querySelectorAll("table.product-card-wrapper")), u = Array.from(t.querySelectorAll("table.product-card-wrapper"));
+    a.length !== u.length || a.length === 0 || (a.forEach((o, _) => {
+      const s = u[_];
+      if (!o || !s || !("querySelector" in o) || !("querySelector" in s))
+        return;
+      const c = `[esd-extension-block-id="${g.PRICE}"]`, f = `[esd-extension-block-id="${g.OLD_PRICE}"]`, n = o.querySelector(c), l = s.querySelector(f);
+      if (!n || !l || !("getOuterHTML" in n) || !("getOuterHTML" in l))
+        return;
+      const h = n.getOuterHTML(), P = `
+                <tr data-inline-price-wrapper="1">
+                    <td width="50%" style="vertical-align: middle;">
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                            <tbody>
+                                <tr><td>${l.getOuterHTML()}</td></tr>
+                            </tbody>
+                        </table>
+                    </td>
+                    <td width="50%" style="vertical-align: middle;">
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                            <tbody>
+                                <tr><td>${h}</td></tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            `, y = o.querySelector(".product-attribute-cell");
+      if (!y)
+        return;
+      const d = y.querySelector("tbody");
+      d && r.modifyHtml(d).setInnerHtml(P);
+    }), r.modifyHtml(t).setStyle("display", "none").setAttribute(T, "1"));
+  }
+  /**
+   * Separates Old Price from Price row back into individual rows
+   * Restores the original separate row structure
+   */
+  _separateOldPriceFromPrice(e, r) {
+    const i = e.querySelector(
+      `${b}[${m}="productPrice"]`
+    ), t = e.querySelector(
+      `${b}[${m}="productOldPrice"]`
+    );
+    if (!i || !t || !("getAttribute" in t) || !(t.getAttribute(T) === "1") || !("querySelectorAll" in i) || !("querySelectorAll" in t))
+      return;
+    const u = Array.from(i.querySelectorAll("table.product-card-wrapper")), o = Array.from(t.querySelectorAll("table.product-card-wrapper"));
+    u.forEach((c, f) => {
+      if (!c || !("querySelector" in c))
+        return;
+      const n = o[f];
+      if (!n || !("querySelector" in n))
+        return;
+      const l = c.querySelector('[data-inline-price-wrapper="1"]');
+      if (!l || !("querySelectorAll" in l))
+        return;
+      const p = Array.from(l.querySelectorAll("td")).filter((O) => "getAttribute" in O && O.getAttribute("width") === "50%");
+      if (p.length !== 2)
+        return;
+      const P = `[esd-extension-block-id="${g.OLD_PRICE}"]`, y = `[esd-extension-block-id="${g.PRICE}"]`, d = p[0].querySelector(P), A = p[1].querySelector(y);
+      if (!d || !A || !("getOuterHTML" in d) || !("getOuterHTML" in A))
+        return;
+      const H = A.getOuterHTML(), R = d.getOuterHTML(), S = c.querySelector(".product-attribute-cell"), L = S == null ? void 0 : S.querySelector("tbody");
+      L && r.modifyHtml(L).setInnerHtml(`<tr><td>${H}</td></tr>`);
+      const I = n.querySelector(".product-attribute-cell"), q = I == null ? void 0 : I.querySelector("tbody");
+      q && r.modifyHtml(q).setInnerHtml(`<tr><td>${R}</td></tr>`);
+    });
+    const s = t.getAttribute(C) === "0" ? "none" : "table-row";
+    r.modifyHtml(t).setStyle("display", s).removeAttribute(T);
+  }
+}
+export {
+  k as PRICE_INLINE_LAYOUT_CONTROL_ID,
+  V as PriceInlineLayoutControl
+};

package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js

@@ -0,0 +1,188 @@
+var C = Object.defineProperty;
+var g = (i, r, e) => r in i ? C(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var S = (i, r, e) => g(i, typeof r != "symbol" ? r + "" : r, e);
+import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../common-control.js";
+import { useDebounceFn as d } from "../../../../node_modules/@vueuse/shared/index.js";
+const _ = "recommendation-spacing-control", c = {
+  COLUMN_SPACING: "columnSpacing",
+  ROW_SPACING: "rowSpacing"
+}, N = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+}, n = {
+  COLUMN_SPACING: 10,
+  // 5px on each side = 10px total
+  ROW_SPACING: 20
+}, p = {
+  MIN_SPACING: 0,
+  MAX_SPACING: 50,
+  STEP: 5
+};
+class G extends m {
+  constructor() {
+    super(...arguments);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnColumnSpacingChange", d((e) => {
+      this._onColumnSpacingChange(e);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnRowSpacingChange", d((e) => {
+      this._onRowSpacingChange(e);
+    }, 300));
+  }
+  getId() {
+    return _;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)" }),
+      this._GuCounter({
+        name: c.COLUMN_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: c.ROW_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  /**
+   * Reads spacing values from data attributes or returns defaults
+   */
+  _setFormValues() {
+    const e = this._getStoredColumnSpacing(), t = this._getStoredRowSpacing();
+    this.api.updateValues({
+      [c.COLUMN_SPACING]: e,
+      [c.ROW_SPACING]: t
+    });
+  }
+  /**
+   * Gets stored column spacing from the first product card wrapper's parent element's padding
+   * Reads the actual padding value instead of relying on data attributes
+   *
+   * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
+   * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
+   */
+  _getStoredColumnSpacing() {
+    if (!this.currentNode)
+      return n.COLUMN_SPACING;
+    const e = this.currentNode.querySelector(".product-card-wrapper");
+    if (!e || !("parent" in e) || typeof e.parent != "function")
+      return n.COLUMN_SPACING;
+    const t = e.parent();
+    if (!t || !("getStyle" in t))
+      return n.COLUMN_SPACING;
+    const o = t.getStyle("padding");
+    if (!o)
+      return n.COLUMN_SPACING;
+    const u = o.trim().split(/\s+/);
+    if (u.length < 2)
+      return n.COLUMN_SPACING;
+    const [, a] = u, s = parseFloat(a);
+    return Number.isNaN(s) ? n.COLUMN_SPACING : s * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   * Reads the actual height value instead of relying on data attributes
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return n.ROW_SPACING;
+    const e = this.currentNode.querySelector(".spacer");
+    if (!e || !("getStyle" in e))
+      return n.ROW_SPACING;
+    const t = e.getStyle("height");
+    if (!t)
+      return n.ROW_SPACING;
+    const o = parseFloat(t);
+    return Number.isNaN(o) ? n.ROW_SPACING : o;
+  }
+  /**
+   * Handles column spacing changes
+   * Applies horizontal padding to all product card wrappers
+   */
+  _onColumnSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    );
+    if (!t)
+      return;
+    const o = this.api.getDocumentModifier(), a = `0 ${e / 2}px`;
+    console.debug("padding", a), t.forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), o.apply(new l(`Update column spacing to ${e}px`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    this._storeRowSpacing(e);
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (console.debug("spacerCells", t), console.debug("spacing", e), !t.length)
+      return;
+    const o = this.api.getDocumentModifier(), u = `${e}px`;
+    t.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", u);
+    }), o.apply(new l(`Update row spacing to ${e}px`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.COLUMN_SPACING, e.toString()).apply(new l("Store column spacing"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.ROW_SPACING, e.toString()).apply(new l("Store row spacing"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(c.COLUMN_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnColumnSpacingChange(t);
+    }), this.api.onValueChanged(c.ROW_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnRowSpacingChange(t);
+    });
+  }
+}
+export {
+  _ as SPACING_CONTROL_ID,
+  G as SpacingControl
+};

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,10 +1,21 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as t } from "./block.js";
-import { RecommendationBlockControl as e } from "./control.js";
-import { RecommendationIconsRegistry as n } from "./iconsRegistry.js";
-import i from "./recommendation.css.js";
-import { SettingsPanel as m } from "./settingsPanel.js";
-const f = new o().addBlock(t).withSettingsPanelRegistry(m).addControl(e).addStyles(i).withIconsRegistry(n).build();
+import { RecommendationBlock as n } from "./block.js";
+import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
+import { RecommendationBlockControl as r } from "./control.js";
+import { ButtonAlignControl as l, ButtonBorderControl as d, ButtonBorderRadiusControl as C, ButtonColorControl as i, ButtonFitToContentControl as a, ButtonFontFamilyControl as e, ButtonMarginsControl as m, ButtonPaddingsControl as c, ButtonTextControl as s, ButtonTextSizeControl as u, ButtonTextStyleAndFontColorControl as P, ImageMarginsControl as g, ImageSizeControl as O, NameAlignControl as p, NameBackgroundControl as B, NameColorControl as f, NameFontFamilyControl as S, NameLineSpacingControl as b, NamePaddingsControl as y, NameSizeControl as F, NameStyleControl as x, OldPriceAlignControl as D, OldPriceBackgroundControl as T, OldPriceColorControl as k, OldPriceFontFamilyControl as A, OldPriceLineSpacingControl as N, OldPricePaddingsControl as R, OldPriceSizeControl as z, OldPriceStyleControl as L, OmnibusPriceAlignControl as I, OmnibusPriceBackgroundControl as w, OmnibusPriceColorControl as h, OmnibusPriceFontFamilyControl as M, OmnibusPriceLineSpacingControl as E, OmnibusPricePaddingsControl as H, OmnibusPriceSizeControl as j, OmnibusPriceStyleControl as q, OmnibusDiscountAlignControl as v, OmnibusDiscountBackgroundControl as G, OmnibusDiscountColorControl as J, OmnibusDiscountFontFamilyControl as K, OmnibusDiscountLineSpacingControl as Q, OmnibusDiscountPaddingsControl as U, OmnibusDiscountSizeControl as V, OmnibusDiscountStyleControl as W, PriceAlignControl as X, PriceBackgroundControl as Y, PriceColorControl as Z, PriceFontFamilyControl as _, PriceLineSpacingControl as $, PricePaddingsControl as oo, PriceSizeControl as no, PriceStyleControl as to } from "./controls/index.js";
+import { RecommendationIconsRegistry as ro } from "./iconsRegistry.js";
+import lo from "./recommendation.css.js";
+import { SettingsPanel as Co } from "./settingsPanel.js";
+import { CardBackgroundColorControl as io } from "./controls/cardBackgroundColorControl.js";
+import { SpacingControl as ao } from "./controls/spacingControl.js";
+import { PriceInlineLayoutControl as eo } from "./controls/priceInlineLayoutControl.js";
+import { NameTextTrimControl as mo } from "./controls/nameTextTrimControl.js";
+import { OmnibusPriceTextBeforeControl as co } from "./controls/omnibusPriceTextBeforeControl.js";
+import { OmnibusPriceTextAfterControl as so } from "./controls/omnibusPriceTextAfterControl.js";
+import { OmnibusDiscountTextBeforeControl as uo } from "./controls/omnibusDiscountTextBeforeControl.js";
+import { OmnibusDiscountTextAfterControl as Po } from "./controls/omnibusDiscountTextAfterControl.js";
+import { PriceHideControl as go } from "./controls/priceHideControl.js";
+const Io = new o().addBlock(n).withSettingsPanelRegistry(Co).addControl(r).addControl(io).addControl(ao).addControl(eo).addControl(l).addControl(d).addControl(C).addControl(i).addControl(a).addControl(e).addControl(m).addControl(c).addControl(s).addControl(u).addControl(P).addControl(g).addControl(O).addControl(p).addControl(B).addControl(f).addControl(S).addControl(b).addControl(y).addControl(F).addControl(x).addControl(mo).addControl(D).addControl(T).addControl(k).addControl(A).addControl(N).addControl(R).addControl(z).addControl(L).addControl(I).addControl(w).addControl(h).addControl(M).addControl(E).addControl(H).addControl(j).addControl(q).addControl(co).addControl(so).addControl(v).addControl(G).addControl(J).addControl(K).addControl(Q).addControl(U).addControl(V).addControl(W).addControl(uo).addControl(Po).addControl(X).addControl(Y).addControl(Z).addControl(_).addControl(go).addControl($).addControl(oo).addControl(no).addControl(to).addControl(t).addStyles(lo).withIconsRegistry(ro).build();
 export {
-  f as default
+  Io as default
 };

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,32 +1,170 @@
-import { SettingsPanelRegistry as o, SettingsPanelTab as t, SettingsTab as e, ContainerControls as r, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as T } from "./block.js";
-import { CONTROL_BLOCK_ID as i } from "./control.js";
-class a extends o {
-  registerBlockControls(n) {
-    n[T] = [
-      new t(
-        e.SETTINGS,
+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 { 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 {
+  registerBlockControls(O) {
+    O[R] = [
+      new I(
+        N.SETTINGS,
         [
-          i,
-          r.EXTERNAL_INDENTS
+          A,
+          D,
+          S.EXTERNAL_INDENTS
         ]
       ),
-      new t(
-        e.STYLES,
+      new I(
+        N.STYLES,
         [
-          s.TEXT_BLOCK_BACKGROUND_COLOR
+          C.TEXT_BLOCK_BACKGROUND_COLOR,
+          U,
+          B
+        ]
+      ),
+      new I(
+        "Card Composition",
+        [
+          L
+        ]
+      ).withLabel("Card Composition")
+    ], O[T.NAME] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.NAME_STYLE,
+          _.NAME_ALIGN,
+          _.NAME_TEXT_TRIM,
+          _.NAME_PADDINGS
+        ]
+      ),
+      new I(
+        N.STYLES,
+        [
+          _.NAME_BACKGROUND,
+          _.NAME_FONT_FAMILY,
+          _.NAME_LINE_SPACING,
+          _.NAME_SIZE,
+          _.NAME_COLOR
+        ]
+      )
+    ], O[T.PRICE] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.PRICE_STYLE,
+          _.PRICE_ALIGN,
+          _.PRICE_HIDE_IF_SAME,
+          _.PRICE_PADDINGS
+        ]
+      ),
+      new I(
+        N.STYLES,
+        [
+          _.PRICE_BACKGROUND,
+          _.PRICE_FONT_FAMILY,
+          _.PRICE_LINE_SPACING,
+          _.PRICE_SIZE,
+          _.PRICE_COLOR
+        ]
+      )
+    ], O[T.OLD_PRICE] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.OLD_PRICE_STYLE,
+          _.OLD_PRICE_ALIGN,
+          _.OLD_PRICE_PADDINGS
+        ]
+      ),
+      new I(
+        N.STYLES,
+        [
+          _.OLD_PRICE_BACKGROUND,
+          _.OLD_PRICE_FONT_FAMILY,
+          _.OLD_PRICE_LINE_SPACING,
+          _.OLD_PRICE_SIZE,
+          _.OLD_PRICE_COLOR
+        ]
+      )
+    ], O[T.OMNIBUS_PRICE] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.OMNIBUS_PRICE_TEXT_BEFORE,
+          _.OMNIBUS_PRICE_TEXT_AFTER,
+          _.OMNIBUS_PRICE_STYLE,
+          _.OMNIBUS_PRICE_ALIGN,
+          _.OMNIBUS_PRICE_PADDINGS
+        ]
+      ),
+      new I(
+        N.STYLES,
+        [
+          _.OMNIBUS_PRICE_BACKGROUND,
+          _.OMNIBUS_PRICE_FONT_FAMILY,
+          _.OMNIBUS_PRICE_LINE_SPACING,
+          _.OMNIBUS_PRICE_SIZE,
+          _.OMNIBUS_PRICE_COLOR
+        ]
+      )
+    ], O[T.OMNIBUS_DISCOUNT] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
+          _.OMNIBUS_DISCOUNT_TEXT_AFTER,
+          _.OMNIBUS_DISCOUNT_STYLE,
+          _.OMNIBUS_DISCOUNT_ALIGN,
+          _.OMNIBUS_DISCOUNT_PADDINGS
+        ]
+      ),
+      new I(
+        N.STYLES,
+        [
+          _.OMNIBUS_DISCOUNT_BACKGROUND,
+          _.OMNIBUS_DISCOUNT_FONT_FAMILY,
+          _.OMNIBUS_DISCOUNT_LINE_SPACING,
+          _.OMNIBUS_DISCOUNT_SIZE,
+          _.OMNIBUS_DISCOUNT_COLOR
+        ]
+      )
+    ], O[T.BUTTON] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.BUTTON_TEXT,
+          _.BUTTON_ALIGN,
+          _.BUTTON_PADDINGS,
+          _.BUTTON_MARGINS
+        ]
+      ),
+      new I(
+        N.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[T.IMAGE] = [
+      new I(
+        N.SETTINGS,
+        [
+          _.IMAGE_SIZE,
+          _.IMAGE_MARGINS
         ]
       )
-      // TODO: It'll be opened after the card composition is implemented by Stripo team.
-      // new SettingsPanelTab(
-      //     'Card Composition',
-      //     [
-      //         COMPOSITION_CONTROL_BLOCK_ID,
-      //     ]
-      // ).withLabel('Card Composition'),
     ];
   }
 }
 export {
-  a as SettingsPanel
+  Y as SettingsPanel
 };

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

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("recommendationExtension", {
+}), G = p("guidoRecommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,