@useinsider/guido 1.0.3-beta.d1ff593 → 1.0.3-beta.d6f4719

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

@@ -1,13 +1,11 @@
 var _ = Object.defineProperty;
-var R = (s, n, e) => n in s ? _(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e;
-var r = (s, n, e) => R(s, typeof n != "symbol" ? n + "" : n, e);
-import { currencyDecimalCounts as l, currencyOperators as c, currencyLocationMaps as h } from "../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as m, ModificationDescription as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../common-control.js";
-import { useRecommendationExtensionStore as O } from "./store/recommendation.js";
-import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as p, prepareProductRows as E } from "./template.js";
-import { useDebounceFn as U } from "../../../node_modules/@vueuse/shared/index.js";
-const L = "ui-elements-recommendation-block", t = {
+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",
@@ -23,21 +21,18 @@ const L = "ui-elements-recommendation-block", t = {
   SHUFFLE_PRODUCTS: "shuffleProducts",
   RESPONSIVE: "unresponsive"
 };
-class y extends g {
+class p extends m {
   constructor() {
     super(...arguments);
-    r(this, "store", O());
+    r(this, "store", S());
     r(this, "storeUnsubscription", () => {
     });
     r(this, "addFilterListener", () => {
     });
     r(this, "addFilterButton", null);
-    r(this, "_debouncedRegenerateProductRows", U(() => {
-      this._regenerateProductRows();
-    }, 500));
   }
   getId() {
-    return L;
+    return g;
   }
   getTemplate() {
     return `
@@ -83,22 +78,22 @@ class y extends g {
     });
   }
   _initializeSelectItems() {
-    const { store: e } = this, o = e.getActivePredictiveAlgorithms, i = e.getLanguages, a = {
-      [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]: h,
+      [t.CURRENCY_LOCATION]: l,
       [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_COUNT]: l,
+      [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.RESPONSIVE]: !e.recommendationConfigs.unresponsive
     };
-    Object.entries(a).forEach(([u, d]) => {
-      this.api.setUIEAttribute(u, m.SELECTPICKER.items, d);
+    Object.entries(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
     });
   }
   _getAlgorithms() {
@@ -144,7 +139,7 @@ class y extends g {
       this._GuSelect({
         name: t.CURRENCY_LOCATION,
         placeholder: "Select Currency Location",
-        options: h
+        options: l
       }),
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuSelect({
@@ -156,19 +151,19 @@ class y extends g {
       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: l
+        options: c
       })
     ])}
         `;
@@ -222,62 +217,39 @@ class y extends g {
       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 C;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    if (!e || !("getAttribute" in e))
-      return C;
-    const o = e.getAttribute("data-card-composition");
-    return o ? o.split(",").filter(Boolean) : C;
-  }
-  _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 : p(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = E(o, i, a);
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(u).apply(new S("Updated product"));
+    });
   }
-  _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)), [
@@ -287,19 +259,19 @@ class y extends g {
       t.CURRENCY_DECIMAL_SEPARATOR,
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
-      this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
-    }), 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"), (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 {
-  L as CONTROL_BLOCK_ID,
-  y as RecommendationBlockControl
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
 };

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

@@ -1,29 +1,10 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as t } from "./block.js";
-import { RecommendationCardCompositionControl as r } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as m } from "./controls/button/align.js";
-import { ButtonBorderControl as d } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as l } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as a } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as C } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as s } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as B } from "./controls/button/textStyleAndFontColor.js";
-import { NameAlignControl as u } from "./controls/name/align.js";
-import { NameBackgroundControl as c } from "./controls/name/background.js";
-import { NameColorControl as g } from "./controls/name/color.js";
-import { NameFontFamilyControl as y } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as R } from "./controls/name/paddings.js";
-import { NameSizeControl as N } from "./controls/name/size.js";
-import { NameStyleControl as S } from "./controls/name/style.js";
-import { RecommendationIconsRegistry as x } from "./iconsRegistry.js";
-import F from "./recommendation.css.js";
-import { SettingsPanel as k } from "./settingsPanel.js";
-const Y = new o().addBlock(t).withSettingsPanelRegistry(k).addControl(n).addControl(u).addControl(c).addControl(g).addControl(y).addControl(R).addControl(N).addControl(S).addControl(m).addControl(d).addControl(l).addControl(i).addControl(a).addControl(C).addControl(e).addControl(p).addControl(f).addControl(s).addControl(B).addControl(r).addStyles(F).withIconsRegistry(x).build();
+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 {
-  Y as default
+  f as default
 };

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

@@ -1,72 +1,32 @@
-import { SettingsPanelRegistry as e, SettingsPanelTab as o, SettingsTab as n, ContainerControls as r, TextControls as c } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as m } from "./block.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as l } from "./cardCompositionControl.js";
+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 T extends e {
-  registerBlockControls(t) {
-    t[m] = [
-      new o(
-        n.SETTINGS,
+class a extends o {
+  registerBlockControls(n) {
+    n[T] = [
+      new t(
+        e.SETTINGS,
         [
           i,
           r.EXTERNAL_INDENTS
         ]
       ),
-      new o(
-        n.STYLES,
+      new t(
+        e.STYLES,
         [
-          c.TEXT_BLOCK_BACKGROUND_COLOR
-        ]
-      ),
-      new o(
-        "Card Composition",
-        [
-          l
-        ]
-      ).withLabel("Card Composition")
-    ], t["recommendation-block-name"] = [
-      new o(
-        n.SETTINGS,
-        [
-          "recommendation-block-name-background-control",
-          "recommendation-block-name-color-control",
-          "recommendation-block-name-size-control",
-          "recommendation-block-name-style-control",
-          "recommendation-block-name-font-family-control"
-        ]
-      ),
-      new o(
-        n.STYLES,
-        [
-          "recommendation-block-name-align-control",
-          "recommendation-block-name-paddings-control"
-        ]
-      )
-    ], t["recommendation-block-button"] = [
-      new o(
-        n.SETTINGS,
-        [
-          "recommendation-block-button-text-control",
-          "recommendation-block-button-align-control",
-          "recommendation-block-button-margins-control",
-          "recommendation-block-button-paddings-control"
-        ]
-      ),
-      new o(
-        n.STYLES,
-        [
-          "recommendation-block-button-color-control",
-          "recommendation-block-button-font-family-control",
-          "recommendation-block-button-text-size-control",
-          "recommendation-block-button-text-style-and-font-color-control",
-          "recommendation-block-button-fit-to-content-control",
-          "recommendation-block-button-border-radius-control",
-          "recommendation-block-button-border-control"
+          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 {
-  T as SettingsPanel
+  a as SettingsPanel
 };