@useinsider/guido 1.0.3-beta.6d7cd41 → 1.0.3-beta.70cf127

package/dist/extensions/Blocks/Items/template.js

@@ -0,0 +1,108 @@
+import { BlockType as E, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ItemsBlockId as n } from "./enums/controlEnums.js";
+import { productPairs as e } from "./enums/productEnums.js";
+import { ItemInCartOptions as N, SETTINGS_ENUMS as r } from "./enums/settingsEnums.js";
+import d from "./layouts/horizontal.html.js";
+import P from "./layouts/vertical.html.js";
+let [s] = e.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = e.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [a] = e.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [c] = e.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [p] = e.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const $ = () => `
+    <${E.BLOCK_IMAGE} 
+        ${_.BLOCK_IMAGE.src}="${s}"
+        ${_.BLOCK_IMAGE.alt}="Product Image"
+        ${_.BLOCK_IMAGE.href}="#"
+        ${_.BLOCK_IMAGE.width}="70"
+        esd-extension-block-id="${n.IMAGE}"
+        data-type="CART_ITEMS" 
+        data-number="1"
+    />
+    `, S = () => `
+    <${E.BLOCK_TEXT} 
+        width="100%" 
+        align="center" 
+        class="es-p10" 
+        esd-extension-block-id="${n.NAME}"
+    >
+        <p
+            data-slot-2
+            width="100%">
+            ${A}
+        </p>
+    </${E.BLOCK_TEXT}>
+`, B = (T, t) => {
+  let i = a;
+  if (T && T.trim()) {
+    const o = `&nbsp;${T.trim()}&nbsp;`;
+    i = (t || "0") === "1" ? `${a}${o}` : `${o}${a}`;
+  }
+  return `
+    <${E.BLOCK_TEXT} 
+        esd-extension-block-id="${n.PRICE}"
+        class="items-block-price"
+        width="100%" 
+        align="center" 
+    >
+        <p contenteditable="false">
+            ${i}
+        </p>
+    </${E.BLOCK_TEXT}>
+`;
+}, F = (T, t) => {
+  let i = c;
+  if (T && T.trim()) {
+    const o = `&nbsp;${T.trim()}&nbsp;`;
+    i = (t || "0") === "1" ? `${c}${o}` : `${o}${c}`;
+  }
+  return `
+    <${E.BLOCK_TEXT} 
+        class="items-block-price"
+        esd-extension-block-id="${n.ORIGINAL_PRICE}"
+        width="100%" 
+        align="center" 
+    >
+        <p
+            contenteditable="false" 
+            style="color: #cc0000"
+        >
+            <s>${i}</s>
+        </p>
+    </${E.BLOCK_TEXT}>
+`;
+}, L = () => `
+    <${E.BLOCK_TEXT} 
+        width="100%" 
+        align="center"
+        class="es-p10" 
+        esd-extension-block-id="${n.QUANTITY}"
+    >
+        <p
+            data-slot-3
+            contenteditable="false"
+            width="100%">
+            ${p}
+        </p>
+    </${E.BLOCK_TEXT}>
+`, U = () => `
+    <${E.BLOCK_BUTTON} 
+        width="100%"
+        class="ins-button" 
+        name="buy-button" 
+        caption="Buy" 
+        align="center"
+        esd-extension-block-id="${n.BUTTON}"
+    >Buy
+    </${E.BLOCK_TEXT}>
+`, R = (T, t, i) => T.replace("{-{-PRODUCT_IMAGE-}-}", $()).replace("{-{-PRODUCT_NAME-}-}", S()).replace("{-{-PRODUCT_PRICE-}-}", B(t, i)).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", F(t, i)).replace("{-{-PRODUCT_QUANTITY-}-}", L()).replace("{-{-PRODUCT_BUTTON-}-}", U());
+function k({
+  orientation: T,
+  itemsType: t = r.ITEMS_TYPE.CART_ITEMS,
+  itemId: i,
+  currencySymbol: o,
+  currencyLocation: I,
+  formattedPrice: l = !0
+}) {
+  const O = N[t].findIndex((C) => C.value === i);
+  return s = e.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[O], A = e.PAIRS_FOR_EXTENSION.name[t].DEFAULT[O], a = l ? e.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : e.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, c = l ? e.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : e.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, p = e.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, T === r.ORIENTATION.VERTICAL ? R(P, o, I) : R(d, o, I);
+}
+export {
+  k as getDefaultTemplate
+};

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

@@ -1,7 +1,7 @@
 import { Block as t, BlockCompositionType as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { getDefaultTemplate as e } from "./template.js";
 const r = "radio-button-block";
-class c extends t {
+class l extends t {
   constructor() {
     super();
   }
@@ -23,8 +23,11 @@ class c extends t {
   getTemplate() {
     return e();
   }
+  allowInnerBlocksDND() {
+    return !1;
+  }
 }
 export {
   r as BLOCK_ID,
-  c as RadioButtonCustomBlock
+  l as RadioButtonCustomBlock
 };

package/dist/extensions/Blocks/RadioButton/template.js

@@ -12,12 +12,12 @@ const e = {
                     <td align="left" width="70%" style="vertical-align: top;">
                         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                             <tbody>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-TITLE-}-}
-                                    </${t.BLOCK_TEXT}>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-DESCRIPTION-}-}
-                                    </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-TITLE-}-}
+                                </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-DESCRIPTION-}-}
+                                </${t.BLOCK_TEXT}>
                             </tbody>
                         </table>
                     </td>

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

@@ -0,0 +1,27 @@
+import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as o } from "./template.js";
+const n = "recommendation-block";
+class c extends e {
+  getId() {
+    return n;
+  }
+  getIcon() {
+    return "recommendation-icon";
+  }
+  getBlockCompositionType() {
+    return t.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Recommendation Block");
+  }
+  getDescription() {
+    return this.api.translate("Recommendation Block Title Description");
+  }
+  getTemplate() {
+    return o();
+  }
+}
+export {
+  n as BLOCK_ID,
+  c as RecommendationBlock
+};

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

@@ -0,0 +1,277 @@
+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",
+  CURRENCY: "value",
+  CURRENCY_LOCATION: "alignment",
+  CURRENCY_SYMBOL: "symbol",
+  CURRENCY_THOUSAND_SEPARATOR: "thousandSeparator",
+  CURRENCY_DECIMAL_SEPARATOR: "decimalSeparator",
+  CURRENCY_DECIMAL_COUNT: "decimalCount",
+  FILTERS: "filterStatus",
+  PRODUCT_COUNT: "size",
+  PRODUCT_IN_ROW: "cardsInRow",
+  SHUFFLE_PRODUCTS: "shuffleProducts",
+  RESPONSIVE: "unresponsive"
+};
+class p extends m {
+  constructor() {
+    super(...arguments);
+    r(this, "store", S());
+    r(this, "storeUnsubscription", () => {
+    });
+    r(this, "addFilterListener", () => {
+    });
+    r(this, "addFilterButton", null);
+  }
+  getId() {
+    return g;
+  }
+  getTemplate() {
+    return `
+            <div class="recommendation-controls-container">
+                ${this._getAlgorithms()}
+                ${this._getLanguages()}
+                ${this._getCurrency()}
+                ${this._getFilterStatus()}
+                ${this._getProductLayout()}
+                ${this._getShuffleProducts()}
+                ${this._getResponsive()}
+            </div>
+        `;
+  }
+  async onRender() {
+    await Promise.all([
+      this.store.fetchRecommendationFilters(),
+      this.store.fetchRecommendationCreateData(),
+      this.store.fetchRecommendationProducts()
+      // TODO: We need to change the location. It's just for testing
+    ]), this._listenStateUpdates(), this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates();
+  }
+  onDestroy() {
+    var e;
+    (e = this.addFilterButton) == null || e.removeEventListener("click", this.addFilterListener), this.storeUnsubscription();
+  }
+  _setFormValues() {
+    const e = this.store.recommendationConfigs;
+    this._setProductIdsVisibility(), this.api.updateValues({
+      [t.ALGORITHM]: e.strategy,
+      [t.PRODUCT_IDS]: e.productIds.join(","),
+      [t.CURRENCY]: e.currencySettings.value,
+      [t.LOCALE]: e.language,
+      [t.CURRENCY_LOCATION]: e.currencySettings.alignment,
+      [t.CURRENCY_SYMBOL]: e.currencySettings.symbol,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: e.currencySettings.thousandSeparator,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: e.currencySettings.decimalSeparator,
+      [t.CURRENCY_DECIMAL_COUNT]: e.currencySettings.decimalCount,
+      [t.PRODUCT_COUNT]: e.size,
+      [t.PRODUCT_IN_ROW]: e.cardsInRow,
+      [t.SHUFFLE_PRODUCTS]: e.shuffleProducts,
+      [t.RESPONSIVE]: !e.unresponsive
+    });
+  }
+  _initializeSelectItems() {
+    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
+      [t.ALGORITHM]: s,
+      [t.LOCALE]: i,
+      [t.CURRENCY]: e.currencyList,
+      [t.CURRENCY_LOCATION]: l,
+      [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
+      [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(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
+    });
+  }
+  _getAlgorithms() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Algorithm" }),
+      this._GuSelect({
+        name: t.ALGORITHM,
+        placeholder: "Select Recommendation Algorithm",
+        options: this.store.getActivePredictiveAlgorithms
+      }),
+      this._GuLabel({ text: "Product Ids", name: `${t.PRODUCT_IDS}_label` }),
+      this._GuTextInput({
+        name: t.PRODUCT_IDS,
+        placeholder: "Enter Product Ids",
+        className: "es-180w"
+      })
+    ])}
+        `;
+  }
+  _getLanguages() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Locale" }),
+      this._GuSelect({
+        name: t.LOCALE,
+        placeholder: "Select Recommendation Locale",
+        options: this.store.getLanguages
+      })
+    ])}
+        `;
+  }
+  _getCurrency() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Currency" }),
+      this._GuSelect({
+        name: t.CURRENCY,
+        placeholder: "Select Currency",
+        options: this.store.currencyList
+      }),
+      this._GuLabel({ text: "Currency Location" }),
+      this._GuSelect({
+        name: t.CURRENCY_LOCATION,
+        placeholder: "Select Currency Location",
+        options: l
+      }),
+      this._GuLabel({ text: "Currency Symbol" }),
+      this._GuSelect({
+        name: t.CURRENCY_SYMBOL,
+        placeholder: "Select Currency Symbol",
+        options: this.store.getCurrencySymbolList
+      }),
+      this._GuLabel({ text: "Thousand Separator" }),
+      this._GuSelect({
+        name: t.CURRENCY_THOUSAND_SEPARATOR,
+        placeholder: "Select Thousand Separator",
+        options: a
+      }),
+      this._GuLabel({ text: "Decimal Separator" }),
+      this._GuSelect({
+        name: t.CURRENCY_DECIMAL_SEPARATOR,
+        placeholder: "Select Decimal Separator",
+        options: a
+      }),
+      this._GuLabel({ text: "Decimal Count" }),
+      this._GuSelect({
+        name: t.CURRENCY_DECIMAL_COUNT,
+        placeholder: "Select Decimal Count",
+        options: c
+      })
+    ])}
+        `;
+  }
+  _getProductLayout() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Number of Products" }),
+      this._GuCounter({ name: t.PRODUCT_COUNT, maxValue: 9 }),
+      this._GuLabel({ text: "Products in One Row" }),
+      this._GuCounter({ name: t.PRODUCT_IN_ROW, maxValue: 4 })
+    ])}
+        `;
+  }
+  _getFilterStatus() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Filters" }),
+      this._GuButton({
+        name: t.FILTERS,
+        label: "Add Filter",
+        id: "guido__btn-add-filter"
+      })
+    ])}
+        `;
+  }
+  _getShuffleProducts() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Shuffle Recommended Products" }),
+      this._GuToggle(t.SHUFFLE_PRODUCTS)
+    ])}
+        `;
+  }
+  _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, s) {
+    this.currentNode && this.store.$patch({
+      recommendationConfigs: {
+        [e]: s
+      }
+    });
+  }
+  _onCurrencyConfigChange(e, s) {
+    this.currentNode && this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          [e]: s
+        }
+      }
+    });
+  }
+  _onCurrencyChange(e) {
+    const [, s] = e.split(".");
+    this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          name: s,
+          value: s
+        }
+      }
+    });
+  }
+  _setProductIdsVisibility() {
+    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 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)), [
+      t.CURRENCY_LOCATION,
+      t.CURRENCY_SYMBOL,
+      t.CURRENCY_THOUSAND_SEPARATOR,
+      t.CURRENCY_DECIMAL_SEPARATOR,
+      t.CURRENCY_DECIMAL_COUNT
+    ].forEach((i) => {
+      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 s = e.payload.recommendationConfigs;
+        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
+      }
+    });
+  }
+}
+export {
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
+};

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

@@ -0,0 +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 { 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 {
+  f as default
+};

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

@@ -0,0 +1,51 @@
+import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class n extends o {
+  registerIconsSvg(C) {
+    C["recommendation-icon"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M10 4.4C10 4.73137 9.73012 4.99622 9.40108 5.0355C6.92202 5.33143 5 7.44126 5 10C5 12.5587 
+                6.92202 14.6686 9.40108 14.9645C9.73012 15.0038 10 15.2686 10 15.6V18.4C10 18.7314 9.73137 19 9.4 
+                19H9C8.44772 19 8 18.5523 8 18V17.2422C7.99988 16.3514 6.92291 15.9053 6.29297 16.5352L5.75684 
+                17.0713C5.36633 17.4617 4.73328 17.4617 4.34277 17.0713L2.92871 15.6572C2.53829 15.2667 2.53829 
+                14.6337 2.92871 14.2432L3.46484 13.707C4.09466 13.0771 3.64858 12.0001 2.75781 12H2C1.44772 12 1 
+                11.5523 1 11L1 9C1 8.44772 1.44772 8 2 8H2.75684C3.6476 7.99988 4.09369 6.92291 3.46387 6.29297L2.92871 
+                5.75781C2.53829 5.36731 2.53829 4.73426 2.92871 4.34375L4.34375 2.92871C4.73426 2.53829 5.36731 2.53829 
+                5.75781 2.92871L6.29297 3.46387C6.92291 4.09368 7.99988 3.6476 8 2.75684V2C8 1.44772 8.44772 1 9 1L9.4 
+                1C9.73137 1 10 1.26863 10 1.6V4.4ZM11 2C11 1.44786 11.4543 0.987733 11.9893 1.12402C12.1732 1.17098 
+                12.3541 1.23174 12.5303 1.30469C13.0156 1.50571 13.4567 1.80044 13.8281 2.17187C14.1996 2.54331 14.4943 
+                2.98442 14.6953 3.46973C14.7058 3.49498 14.716 3.52033 14.7259 3.54577C14.8279 3.80746 15.0733 3.9917 
+                15.3531 4.01625C15.5539 4.03386 15.7542 4.06671 15.9521 4.11523C16.8954 4.34649 17.723 4.91284 18.2793 
+                5.70898C18.8354 6.505 19.0827 7.47631 18.9756 8.44141C18.927 8.87824 18.8065 9.30007 18.6231 
+                9.69186C18.5322 9.88606 18.5322 10.112 18.6231 10.3062C18.7962 10.6759 18.9122 11.0708 18.9658 
+                11.4775C19.0425 12.0595 18.9901 12.6515 18.8125 13.2109C18.6348 13.7703 18.3358 14.2838 17.9375 
+                14.7148C17.5393 15.1457 17.0513 15.4839 16.5078 15.7051C16.1381 15.8555 15.7488 15.9484 15.3532 
+                15.9829C15.0734 16.0073 14.8281 16.1917 14.7262 16.4535C14.7162 16.4792 14.7059 16.5048 14.6953 
+                16.5303C14.4943 17.0156 14.1996 17.4567 13.8281 17.8281C13.4567 18.1996 13.0156 18.4943 12.5303 
+                18.6953C12.3541 18.7683 12.1732 18.829 11.9893 18.876C11.4543 19.0123 11 18.5521 11 18V17.7852C11.0001 
+                17.3515 11.365 17.0136 11.7656 16.8477C12.0082 16.7471 12.2284 16.5997 12.4141 16.4141C12.5997 16.2284 
+                12.7471 16.0082 12.8477 15.7656C12.9482 15.523 13 15.2626 13 15C13 14.7374 12.9482 14.477 12.8477 
+                14.2344C12.7471 13.9918 12.5997 13.7716 12.4141 13.5859C12.2284 13.4003 12.0082 13.2529 11.7656 
+                13.1523C11.365 12.9864 11.0001 12.6485 11 12.2148V12C11 11.4479 11.4543 10.9877 11.9893 11.124C12.1732 
+                11.171 12.3541 11.2317 12.5303 11.3047C13.0156 11.5057 13.4567 11.8004 13.8281 12.1719C14.1996 12.5433 
+                14.4943 12.9844 14.6953 13.4697C14.7632 13.6337 14.8195 13.8017 14.8649 13.9725C14.8686 13.9865 14.881 
+                13.9963 14.8955 13.9971C15.1886 14.0123 15.4821 13.9631 15.7539 13.8525C16.0256 13.742 16.2696 13.5729 
+                16.4688 13.3574C16.6679 13.1419 16.8174 12.8851 16.9063 12.6055C16.995 12.3259 17.0207 12.0301 16.9824 
+                11.7393C16.9441 11.4484 16.8427 11.169 16.6846 10.9219C16.5264 10.6747 16.3156 10.4652 16.0674 
+                10.3086C15.6579 10.0502 15.2974 9.62601 15.3574 9.14551L15.3721 9.02344C15.4406 8.47551 15.949 8.07553 
+                16.4629 8.27734C16.5364 8.30622 16.609 8.33735 16.6807 8.37063C16.811 8.43113 16.9714 8.36352 16.9873 
+                8.2207C17.0409 7.73814 16.9177 7.25251 16.6396 6.85449C16.3616 6.45652 15.9481 6.1733 15.4766 
+                6.05762C15.3327 6.02235 15.1861 6.00292 15.04 6C14.9439 5.99809 14.8572 6.05928 14.8296 6.15143C14.7913 
+                6.27967 14.7467 6.40615 14.6953 6.53027C14.4943 7.01558 14.1996 7.45669 13.8281 7.82812C13.4567 8.19956 
+                13.0156 8.49429 12.5303 8.69531C12.3541 8.76826 12.1732 8.82902 11.9893 8.87598C11.4543 9.01227 
+                11 8.55214 11 8V7.78516C11.0001 7.35151 11.365 7.01362 11.7656 6.84766C12.0082 6.74715 12.2284 6.59971 
+                12.4141 6.41406C12.5997 6.22841 12.7471 6.00817 12.8477 5.76562C12.9482 5.52297 13 5.26264 13 5C13 
+                4.73736 12.9482 4.47703 12.8477 4.23437C12.7471 3.99182 12.5997 3.77159 12.4141 3.58594C12.2284 
+                3.40029 12.0082 3.25285 11.7656 3.15234C11.365 2.98638 11.0001 2.64849 11 2.21484V2Z" 
+                fill="currentColor"/>
+            </svg>
+        `;
+  }
+}
+export {
+  n as RecommendationIconsRegistry
+};

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

@@ -0,0 +1,19 @@
+const n = `/* Utils */
+.es-180w { width: 180px; }
+
+/* Recommendation Controls */
+.recommendation-controls-container > .container {
+    padding: 16px;
+}
+
+.recommendation-controls-container > .container:first-child {
+    padding-top: 0;
+}
+
+.container:has(.recommendation-controls-container) {
+    padding: 0
+}
+`;
+export {
+  n as default
+};

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

@@ -0,0 +1,32 @@
+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,
+        [
+          i,
+          r.EXTERNAL_INDENTS
+        ]
+      ),
+      new t(
+        e.STYLES,
+        [
+          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 {
+  a as SettingsPanel
+};