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

package/dist/enums/unsubscribe.js

@@ -1,26 +1,25 @@
-import { useTranslations as n } from "../composables/useTranslations.js";
-import { getEnvironmentPrefix as R } from "../utils/environmentUtil.js";
-const e = n(), I = {
+import { useTranslations as e } from "../composables/useTranslations.js";
+const s = e(), R = {
   UNSUBSCRIBE_LINK_TYPE: 1,
   PREFERENCES_LINK_TYPE: 3
-}, r = {
+}, S = {
   UNSUBSCRIBE_LINK_REGEX: /{{ins-unsubscribe-link}}/g,
   DATA_OGSB_BUTTON_CSS_REGEX: "\\[data-ogsb\\]\\s*\\.es-button\\.es-button-[0-9]+\\s*\\{(?:[^\\}]*)\\}",
   GLOBAL_UNSUBSCRIBE_LINK_REGEX: /{{ins-global-unsubscribe-link}}/g,
   PREFERENCES_UNSUBSCRIBE_LINK_REGEX: /{{ins-preferences-unsubscribe-link}}/g
-}, s = R(), _ = {
-  UNSUBSCRIBE_URL: `https://mail.${s}.com/user/v1/unsub`,
-  PREFERENCES_URL: `https://mail.${s}.com/user/v1/prefs`
-}, i = "iid", B = {
+}, N = {
+  UNSUBSCRIBE_URL: "https://mail.useinsider.com/user/v1/unsub",
+  PREFERENCES_URL: "https://mail.useinsider.com/user/v1/prefs"
+}, _ = {
   name: "Global Unsubscribe",
   sendGridId: "G"
-}, C = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", c = "/email/unsubscribe-pages", E = {
+}, I = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", r = "/email/unsubscribe-pages", E = {
   GLOBAL_UNSUBSCRIBE: 1,
   GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE: 2,
   SUBSCRIPTION_PREFERENCE_CENTER: 3,
   SUBSCRIPTION_PREFERENCE_CONFIRMATION: 4,
   RESUBSCRIBE: 5
-}, t = {
+}, i = {
   [E.GLOBAL_UNSUBSCRIBE]: [
     E.GLOBAL_UNSUBSCRIBE,
     E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE,
@@ -30,27 +29,26 @@ const e = n(), I = {
     E.SUBSCRIPTION_PREFERENCE_CENTER,
     E.SUBSCRIPTION_PREFERENCE_CONFIRMATION
   ]
-}, U = {
-  [E.GLOBAL_UNSUBSCRIBE]: e("unsubscription-preference.type-global-unsubscribe"),
-  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: e("unsubscription-preference.type-global-unsubscription-confirmation"),
-  [E.RESUBSCRIBE]: e("unsubscription-preference.type-resubscribe"),
-  [E.SUBSCRIPTION_PREFERENCE_CENTER]: e("unsubscription-preference.type-subscription-preferences-center"),
-  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: e("unsubscription-preference.type-subscription-preferences-confirmation")
-}, o = {
+}, B = {
+  [E.GLOBAL_UNSUBSCRIBE]: s("unsubscription-preference.type-global-unsubscribe"),
+  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: s("unsubscription-preference.type-global-unsubscription-confirmation"),
+  [E.RESUBSCRIBE]: s("unsubscription-preference.type-resubscribe"),
+  [E.SUBSCRIPTION_PREFERENCE_CENTER]: s("unsubscription-preference.type-subscription-preferences-center"),
+  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: s("unsubscription-preference.type-subscription-preferences-confirmation")
+}, C = {
   default: "{{ins-unsubscribe-link}}",
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
 export {
-  C as ACADEMY_LINK,
-  B as DEFAULT_UNSUBSCRIBE_GROUP,
-  i as INSIDER_ID,
-  r as LINK_REGEXES,
-  I as LINK_TYPES,
-  o as MERGE_TAGS,
+  I as ACADEMY_LINK,
+  _ as DEFAULT_UNSUBSCRIBE_GROUP,
+  S as LINK_REGEXES,
+  R as LINK_TYPES,
+  C as MERGE_TAGS,
   E as PAGE_TYPES,
-  t as TYPE_COLLECTIONS,
-  U as TYPE_TRANSLATIONS,
-  c as UNSUBSCRIBE_PAGES_LINK,
-  _ as URLS
+  i as TYPE_COLLECTIONS,
+  B as TYPE_TRANSLATIONS,
+  r as UNSUBSCRIBE_PAGES_LINK,
+  N as URLS
 };

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

@@ -3,7 +3,7 @@ import { CheckboxBlock as t } from "./block.js";
 import { CheckboxControl as e } from "./control.js";
 import { CheckboxIconsRegistry as r } from "./iconsRegistry.js";
 import { CheckboxBlockSettings as i } from "./settingsPanel.js";
-const d = new o().addBlock(t).withSettingsPanelRegistry(i).addControl(e).withIconsRegistry(r).build();
+const k = new o().addBlock(t).withSettingsPanelRegistry(i).addControl(e).withIconsRegistry(r).build();
 export {
-  d as default
+  k as default
 };

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

@@ -2,7 +2,7 @@ import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-edito
 import { CouponBlock as t } from "./block.js";
 import { CouponIconsRegistry as i } from "./iconsRegistry.js";
 import { CouponBlockSettings as n } from "./settingsPanel.js";
-const p = new o().addBlock(t).withSettingsPanelRegistry(n).withIconsRegistry(i).build();
+const m = new o().addBlock(t).withSettingsPanelRegistry(n).withIconsRegistry(i).build();
 export {
-  p as default
+  m as default
 };

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

@@ -1,10 +1,7 @@
 import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
+import { getDefaultTemplate as o } from "./template.js";
 const n = "recommendation-block";
-class m extends e {
-  constructor() {
-    super();
-  }
+class c extends e {
   getId() {
     return n;
   }
@@ -26,5 +23,5 @@ class m extends e {
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  c as RecommendationBlock
 };

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

@@ -1,14 +1,11 @@
-var p = Object.defineProperty;
-var S = (a, s, e) => s in a ? p(a, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[s] = e;
-var u = (a, s, e) => S(a, typeof s != "symbol" ? s + "" : s, e);
-import { currencyDecimalCounts as _, currencyOperators as C, currencyLocationMaps as R } from "../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as O, ModificationDescription as g } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as U } from "../common-control.js";
-import { useRecommendationExtensionStore as N } from "./store/recommendation.js";
-import { prepareProductRows as E } from "./templates/blockTemplate.js";
-import { DEFAULT_CARD_COMPOSITION as d, getDefaultProducts as L } from "./templates/templateUtils.js";
-import { useDebounceFn as T } from "../../../node_modules/@vueuse/shared/index.js";
-const f = "ui-elements-recommendation-block", t = {
+var _ = Object.defineProperty;
+var R = (o, n, e) => n in o ? _(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var r = (o, n, e) => R(o, typeof n != "symbol" ? n + "" : n, e);
+import { currencyDecimalCounts as c, currencyOperators as a, currencyLocationMaps as l } from "../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../common-control.js";
+import { useRecommendationExtensionStore as S } from "./store/recommendation.js";
+const g = "ui-elements-recommendation-block", t = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds",
   LOCALE: "language",
@@ -21,23 +18,21 @@ const f = "ui-elements-recommendation-block", t = {
   FILTERS: "filterStatus",
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
-  SHUFFLE_PRODUCTS: "shuffleProducts"
+  SHUFFLE_PRODUCTS: "shuffleProducts",
+  RESPONSIVE: "unresponsive"
 };
-class Y extends U {
+class p extends m {
   constructor() {
     super(...arguments);
-    u(this, "store", N());
-    u(this, "storeUnsubscription", () => {
+    r(this, "store", S());
+    r(this, "storeUnsubscription", () => {
     });
-    u(this, "addFilterListener", () => {
+    r(this, "addFilterListener", () => {
     });
-    u(this, "addFilterButton", null);
-    u(this, "_debouncedRegenerateProductRows", T(() => {
-      this._regenerateProductRows();
-    }, 500));
+    r(this, "addFilterButton", null);
   }
   getId() {
-    return f;
+    return g;
   }
   getTemplate() {
     return `
@@ -48,6 +43,7 @@ class Y extends U {
                 ${this._getFilterStatus()}
                 ${this._getProductLayout()}
                 ${this._getShuffleProducts()}
+                ${this._getResponsive()}
             </div>
         `;
   }
@@ -77,25 +73,27 @@ class Y extends U {
       [t.CURRENCY_DECIMAL_COUNT]: e.currencySettings.decimalCount,
       [t.PRODUCT_COUNT]: e.size,
       [t.PRODUCT_IN_ROW]: e.cardsInRow,
-      [t.SHUFFLE_PRODUCTS]: e.shuffleProducts
+      [t.SHUFFLE_PRODUCTS]: e.shuffleProducts,
+      [t.RESPONSIVE]: !e.unresponsive
     });
   }
   _initializeSelectItems() {
-    const { store: e } = this, o = e.getActivePredictiveAlgorithms, i = e.getLanguages, n = {
-      [t.ALGORITHM]: o,
+    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
+      [t.ALGORITHM]: s,
       [t.LOCALE]: i,
       [t.CURRENCY]: e.currencyList,
-      [t.CURRENCY_LOCATION]: R,
+      [t.CURRENCY_LOCATION]: l,
       [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: C,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: C,
-      [t.CURRENCY_DECIMAL_COUNT]: _,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_COUNT]: c,
       [t.PRODUCT_COUNT]: Number(e.recommendationConfigs.size),
       [t.PRODUCT_IN_ROW]: e.recommendationConfigs.cardsInRow,
-      [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts
+      [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts,
+      [t.RESPONSIVE]: !e.recommendationConfigs.unresponsive
     };
-    Object.entries(n).forEach(([r, l]) => {
-      this.api.setUIEAttribute(r, O.SELECTPICKER.items, l);
+    Object.entries(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
     });
   }
   _getAlgorithms() {
@@ -141,7 +139,7 @@ class Y extends U {
       this._GuSelect({
         name: t.CURRENCY_LOCATION,
         placeholder: "Select Currency Location",
-        options: R
+        options: l
       }),
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuSelect({
@@ -153,19 +151,19 @@ class Y extends U {
       this._GuSelect({
         name: t.CURRENCY_THOUSAND_SEPARATOR,
         placeholder: "Select Thousand Separator",
-        options: C
+        options: a
       }),
       this._GuLabel({ text: "Decimal Separator" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_SEPARATOR,
         placeholder: "Select Decimal Separator",
-        options: C
+        options: a
       }),
       this._GuLabel({ text: "Decimal Count" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_COUNT,
         placeholder: "Select Decimal Count",
-        options: _
+        options: c
       })
     ])}
         `;
@@ -200,100 +198,58 @@ class Y extends U {
     ])}
         `;
   }
+  _getResponsive() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Responsive Block" }),
+      this._GuToggle(t.RESPONSIVE)
+    ])}
+        `;
+  }
+  _onFilterChange(e) {
+    this.currentNode && this.store.$patch({
+      filterStatus: e,
+      filterSelectionDrawerStatus: e
+    });
+  }
   _onFilterSelectClick() {
     this.store.$patch({
       filterSelectionDrawerStatus: !0
     });
   }
-  _onDataChange(e, o) {
-    this.currentNode && (this.store.$patch({
+  _onDataChange(e, s) {
+    this.currentNode && this.store.$patch({
       recommendationConfigs: {
-        [e]: o
+        [e]: s
       }
-    }), this._debouncedRegenerateProductRows());
-  }
-  /**
-   * Get the current card composition from block data attribute or use default
-   */
-  _getCardComposition() {
-    if (!this.currentNode)
-      return d;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    if (!e || !("getAttribute" in e))
-      return d;
-    const o = e.getAttribute("data-card-composition");
-    return o ? o.split(",").filter(Boolean) : d;
-  }
-  _regenerateProductRows() {
-    if (!this.currentNode || !("querySelector" in this.currentNode))
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-product-container");
-    if (!e) {
-      console.error("Could not find container table for product rows");
-      return;
-    }
-    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : L(), { cardsInRow: i } = this.store.recommendationConfigs, n = this._getCardComposition(), r = E(o, i, n);
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(r).apply(new g("Updated product")), this._reapplySpacing();
-  }
-  /**
-   * Reapply spacing values after product regeneration
-   * This ensures spacing persists when products are regenerated
-   */
-  _reapplySpacing() {
-    if (!this.currentNode)
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    if (!e || !("getAttribute" in e))
-      return;
-    const o = e.getAttribute("data-column-spacing"), i = e.getAttribute("data-row-spacing"), n = this.api.getDocumentModifier();
-    if (o) {
-      const r = parseInt(o);
-      if (!Number.isNaN(r)) {
-        const h = `0 ${Math.floor(r / 2)}px`;
-        Array.from(
-          this.currentNode.querySelectorAll(".product-card-wrapper")
-        ).forEach((c) => {
-          "parentNode" in c && c.parentNode && typeof c.parentNode == "object" && "tagName" in c.parentNode && c.parentNode.tagName === "TD" && n.modifyHtml(c.parentNode).setStyle("padding", h);
-        });
-      }
-    }
-    if (i) {
-      const r = parseInt(i);
-      if (!Number.isNaN(r)) {
-        const l = `${r}px`;
-        Array.from(this.currentNode.querySelectorAll(".spacer")).forEach((m) => {
-          n.modifyHtml(m).setStyle("height", l);
-        });
-      }
-    }
-    (o || i) && n.apply(new g("Reapply spacing after regeneration"));
+    });
   }
-  _onCurrencyConfigChange(e, o) {
+  _onCurrencyConfigChange(e, s) {
     this.currentNode && this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          [e]: o
+          [e]: s
         }
       }
     });
   }
   _onCurrencyChange(e) {
-    const [, o] = e.split(".");
+    const [, s] = e.split(".");
     this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          name: o,
-          value: o
+          name: s,
+          value: s
         }
       }
     });
   }
   _setProductIdsVisibility() {
-    const { recommendationConfigs: e } = this.store, o = e.strategy === "manualMerchandising";
-    this.api.setVisibility(t.PRODUCT_IDS, o), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, o);
+    const { recommendationConfigs: e } = this.store, s = e.strategy === "manualMerchandising";
+    this.api.setVisibility(t.PRODUCT_IDS, s), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, s);
   }
   _listenToFormUpdates() {
-    var o;
+    var s;
     this.api.onValueChanged(t.ALGORITHM, (i) => {
       this._onDataChange(t.ALGORITHM, i), this._setProductIdsVisibility();
     }), this.api.onValueChanged(t.PRODUCT_IDS, (i) => this._onDataChange(t.PRODUCT_IDS, i.split(",") || [])), this.api.onValueChanged(t.LOCALE, (i) => this._onDataChange(t.LOCALE, i)), this.api.onValueChanged(t.CURRENCY, (i) => this._onCurrencyChange(i)), [
@@ -303,19 +259,19 @@ class Y extends U {
       t.CURRENCY_DECIMAL_SEPARATOR,
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
-      this.api.onValueChanged(i, (n) => this._onCurrencyConfigChange(i, n));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
+      this.api.onValueChanged(i, (C) => this._onCurrencyConfigChange(i, C));
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (s = this.addFilterButton) == null || s.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {
       if ("payload" in e) {
-        const o = e.payload.recommendationConfigs;
-        o && (this.api.updateValues(o), this.store.fetchRecommendationProducts());
+        const s = e.payload.recommendationConfigs;
+        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
       }
     });
   }
 }
 export {
-  f as CONTROL_BLOCK_ID,
-  Y as RecommendationBlockControl
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
 };

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

@@ -1,21 +1,10 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-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();
+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();
 export {
-  Io as default
+  f as default
 };

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

@@ -1,170 +1,32 @@
-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,
+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,
         [
-          A,
-          D,
-          S.EXTERNAL_INDENTS
+          i,
+          r.EXTERNAL_INDENTS
         ]
       ),
-      new I(
-        N.STYLES,
+      new t(
+        e.STYLES,
         [
-          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
+          s.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
+      // 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 {
-  Y as SettingsPanel
+  a 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("guidoRecommendationExtension", {
+}), G = p("recommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,