@useinsider/guido 3.0.0 → 3.1.0

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

@@ -1,18 +1,20 @@
-import { useOnboardingStore as d } from "../../../stores/onboarding.js";
-import { Block as g, BlockCompositionType as f, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { SETTINGS_ENUMS as c, DefaultConfigValues as i } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as p } from "./template.js";
-import { getItemsBlockContainer as u, getItemsBlockConfig as C, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
-const y = "items-block";
-class B extends g {
+import { BlockId as g } from "../../../enums/block.js";
+import { useOnboardingStore as p } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as f } from "../../../utils/migrationBannerHtml.js";
+import { Block as u, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SETTINGS_ENUMS as a, DefaultConfigValues as i } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as C } from "./template.js";
+import { getItemsBlockContainer as y, getItemsBlockConfig as b, getDefaultItemsBlockConfig as h } from "./utils/nodeConfigUtils.js";
+const c = g.Items;
+class E extends u {
   getId() {
-    return y;
+    return c;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return f.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -20,10 +22,17 @@ class B extends g {
   getDescription() {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
+  getSettingsPanelTitleHtml() {
+    return f(
+      c,
+      this.api.translate("Items"),
+      this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
+    );
+  }
   getTemplate() {
-    return p({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return C({
+      orientation: a.ORIENTATION.VERTICAL,
+      itemsType: a.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
       currencySymbol: i.productPriceCurrencySymbolControlValue,
       currencyLocation: i.productPriceCurrencyLocationControlValue,
@@ -34,21 +43,21 @@ class B extends g {
     return !1;
   }
   onCreated(n) {
-    const s = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
-    r.querySelector('[product-attr="imageSrc"] img') || s.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = u(n);
+    const l = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
+    r.querySelector('[product-attr="imageSrc"] img') || l.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const e = y(n);
     if (!e)
       return;
-    const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
+    const s = e.getNodeConfig(), m = s && Object.keys(s).length > 0, t = b(n);
     if (t != null && t.initialized)
-      l ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
+      m ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
     else {
-      const m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+      const d = h();
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), p().startOnboarding("itemsOnboarding");
     }
   }
 }
 export {
-  y as BLOCK_ID,
-  B as ItemsBlock
+  c as BLOCK_ID,
+  E as ItemsBlock
 };

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

@@ -1,5 +1,6 @@
-import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class i extends o {
+import o from "../../../static/assets/info.svg.js";
+import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class s extends r {
   registerIconsSvg(t) {
     t["items-icon"] = `
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19,14 +20,14 @@ class i extends o {
             </svg>
         `, t["horizontal-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor" 
+                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
-                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor" 
+                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `;
+        `, t["migration-info-icon"] = o;
   }
 }
 export {
-  i as ItemsIconsRegistry
+  s as ItemsIconsRegistry
 };

package/dist/extensions/Blocks/Items/items.css.js

@@ -17,6 +17,54 @@ const n = `/* Utils */
 .container:has(.items-controls-container) {
     padding: 0
 }
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --items-migration-padding: 16px;
+    --items-migration-title-height: 61px;
+    --items-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.items-block-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--items-migration-padding) + var(--items-migration-box-height));
+}
+
+/* Info box container */
+.items-block-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--items-migration-padding);
+    right: var(--items-migration-padding);
+    top: calc(var(--items-migration-padding) + var(--items-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.items-block-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.items-block-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default

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

@@ -1,35 +1,51 @@
-var p = Object.defineProperty;
-var f = (r, o, t) => o in r ? p(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var g = (r, o, t) => f(r, typeof o != "symbol" ? o + "" : o, t);
-import { Block as h, BlockCompositionType as I, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ensureMobileCssRulesExist as d } from "./controls/mobileLayout/cssRules.js";
-import { RecommendationConfigService as s } from "./services/configService.js";
-import { useRecommendationExtensionStore as u } from "./store/recommendation.js";
-import { getDefaultTemplate as k } from "./templates/grid/template.js";
-const B = "recommendation-block", c = "recommendation-block-v2", a = "recommendation-id";
-class y extends h {
+var k = Object.defineProperty;
+var I = (r, n, t) => n in r ? k(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var u = (r, n, t) => I(r, typeof n != "symbol" ? n + "" : n, t);
+import { BlockId as B } from "../../../enums/block.js";
+import { getMigrationBannerHtml as _ } from "../../../utils/migrationBannerHtml.js";
+import { Block as b, BlockCompositionType as R, ModificationDescription as y } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { regenerateMobileProductRows as C } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as g, setMobileLayoutOptOut as d, hasMobileLayoutOptOut as A } from "./controls/mobileLayout/cssRules.js";
+import { RecommendationConfigService as c } from "./services/configService.js";
+import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
+import { getDefaultTemplate as E } from "./templates/grid/template.js";
+const f = B.Recommendation, a = "recommendation-block-v2", l = "recommendation-id";
+let h = !1;
+class q extends b {
   constructor() {
     super();
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
      * This avoids generating a new (different) ID in onCreated().
      */
-    g(this, "_pendingBlockId", null);
+    u(this, "_pendingBlockId", null);
   }
   getId() {
-    return B;
+    return f;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return I.CONTAINER;
+    return R.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
   }
   getDescription() {
-    return this.api.translate("Recommendation Block Title Description");
+    return this.api.translate(
+      "Recommendation lets you display personalized product recommendations to users based on their algorithm."
+    );
+  }
+  getSettingsPanelTitleHtml() {
+    return _(
+      f,
+      this.api.translate("Recommendation Block"),
+      this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
+    );
+  }
+  allowInnerBlocksDND() {
+    return !1;
   }
   /**
    * Returns the template HTML for a new recommendation block.
@@ -40,7 +56,7 @@ class y extends h {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, k(t);
+    return this._pendingBlockId = t, E(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -52,8 +68,13 @@ class y extends h {
   onCreated(t) {
     const e = this._pendingBlockId ?? this._generateNextId();
     this._pendingBlockId = null, this._assignRecommendationId(t, e);
-    const n = s.initializeConfig(this.api, t, { recommendationId: e }), i = u();
-    i.setCurrentBlock(e), d(this.api), i.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
+    const o = c.initializeConfig(this.api, t, { recommendationId: e }), i = p();
+    i.setCurrentBlock(e), g(this.api);
+    const s = this._getBlockElement(t);
+    s && (d(this.api, s, !0), C({
+      currentNode: t,
+      documentModifier: this.api.getDocumentModifier()
+    })), i.patchCurrentBlockConfig({ language: o.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -66,14 +87,23 @@ class y extends h {
     if (!(!t || !("getNodeConfig" in t))) {
       if (!this._getRecommendationId(t)) {
         const e = this._generateNextId();
-        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+        this._assignRecommendationId(t, e), c.hasConfig(t) && c.updateConfig(
           this.api,
           t,
           { recommendationId: e },
           "Assign recommendation ID to legacy block"
         );
       }
-      s.needsMigration(t) && this._migrateFromLegacy(t), d(this.api);
+      c.needsMigration(t) && this._migrateFromLegacy(t);
+      try {
+        h || (g(this.api), h = !0);
+        const e = c.getConfig(t), o = this._getBlockElement(t);
+        if (o) {
+          const i = !e.mobileLayoutEnabled;
+          A(o) !== i && d(this.api, o, i);
+        }
+      } catch {
+      }
     }
   }
   /**
@@ -84,7 +114,7 @@ class y extends h {
    */
   onDelete(t) {
     const e = this._getRecommendationId(t);
-    e && u().removeBlockState(e);
+    e && p().removeBlockState(e);
   }
   /**
    * Generates the next unique recommendation ID by scanning all existing blocks
@@ -94,10 +124,10 @@ class y extends h {
     let t = 0;
     try {
       const e = this.api.getDocumentRoot();
-      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((i) => {
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${a}`).forEach((i) => {
         if ("getAttribute" in i) {
-          const m = i.getAttribute(a), l = m ? parseInt(m) : 0;
-          l > t && (t = l);
+          const s = i.getAttribute(l), m = s ? parseInt(s) : 0;
+          m > t && (t = m);
         }
       });
     } catch {
@@ -111,11 +141,11 @@ class y extends h {
    * added classes via setAttribute.
    */
   _assignRecommendationId(t, e) {
-    const n = this._getBlockElement(t);
-    if (!n)
+    const o = this._getBlockElement(t);
+    if (!o)
       return;
     const i = this.api.getDocumentModifier();
-    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new _(`Assign recommendation ID ${e}`));
+    i.modifyHtml(o).setAttribute(l, e.toString()), i.apply(new y(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -124,10 +154,10 @@ class y extends h {
     const e = this._getBlockElement(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const n = e.getAttribute(a);
-    if (!n)
+    const o = e.getAttribute(l);
+    if (!o)
       return null;
-    const i = parseInt(n);
+    const i = parseInt(o);
     return Number.isNaN(i) ? null : i;
   }
   /**
@@ -136,19 +166,19 @@ class y extends h {
   _getBlockElement(t) {
     if ("getAttribute" in t) {
       const e = t.getAttribute("class");
-      if (e && e.includes(c))
+      if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) : null;
   }
   /**
    * Migrate configuration from legacy format
    */
   _migrateFromLegacy(t) {
-    s.migrateFromDataAttributes(this.api, t);
+    c.migrateFromDataAttributes(this.api, t);
   }
 }
 export {
-  B as BLOCK_ID,
-  y as RecommendationBlock
+  f as BLOCK_ID,
+  q as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/blockIds.js

@@ -1,4 +1,4 @@
-var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
+var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r.CUSTOM_ATTRIBUTE = "recommendation-block-custom-attribute", r))(b || {});
 export {
   b as RecommendationBlockId
 };

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,69 +1,71 @@
-import { DEFAULT_MOBILE_ROW_SPACING as U, DEFAULT_MOBILE_COLUMN_SPACING as R, DEFAULT_ROW_SPACING as n, DEFAULT_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as C, DEFAULT_CARDS_IN_ROW as D } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as _, ATTR_PRODUCT_NAME as o, ATTR_PRODUCT_OLD_PRICE as t, ATTR_PRODUCT_PRICE as e, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as r } from "./selectors.js";
-const i = {
+import { DEFAULT_MOBILE_ROW_SPACING as R, DEFAULT_MOBILE_COLUMN_SPACING as U, DEFAULT_ROW_SPACING as i, DEFAULT_COLUMN_SPACING as s, DEFAULT_MOBILE_CARDS_IN_ROW as o, DEFAULT_CARDS_IN_ROW as C } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as _, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as t, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as n } from "./selectors.js";
+const O = {
   code: "USD",
   symbol: "USD",
   alignment: "after",
   decimalCount: 2,
   decimalSeparator: ".",
   thousandSeparator: ","
-}, A = {
+}, D = {
   textBefore: "",
   textAfter: ""
-}, s = {
+}, A = {
   textBefore: "",
   textAfter: ""
-}, E = [
+}, a = [
   _,
-  o,
-  t,
   e,
+  t,
   T,
+  r,
   I,
-  r
-], c = {
+  n
+], E = {
   [_]: !0,
-  [o]: !0,
   [e]: !0,
+  [T]: !0,
   [t]: !0,
-  [T]: !1,
+  [r]: !1,
   [I]: !1,
-  [r]: !0
-}, N = {
+  [n]: !0
+}, l = {
   // Settings
   strategy: "mostPopular",
   productIds: [],
   size: "6",
   shuffleProducts: !1,
   language: "en_US",
-  currency: i,
+  currency: O,
   filters: [],
   // Layout
   layout: "grid",
-  cardsInRow: D,
-  mobileCardsInRow: C,
-  columnSpacing: O,
-  rowSpacing: n,
-  mobileColumnSpacing: R,
-  mobileRowSpacing: U,
+  cardsInRow: C,
+  mobileCardsInRow: o,
+  mobileLayoutEnabled: !1,
+  previousMobileCardsInRow: o,
+  columnSpacing: s,
+  rowSpacing: i,
+  mobileColumnSpacing: U,
+  mobileRowSpacing: R,
   // Composition
-  composition: E,
-  visibility: c,
+  composition: a,
+  visibility: E,
   // Element settings
-  omnibusPrice: A,
-  omnibusDiscount: s,
+  omnibusPrice: D,
+  omnibusDiscount: A,
   textTrimming: !1,
   // Meta
   configVersion: 1,
   recommendationId: 0
-}, m = [11, 12], L = 1;
+}, N = [11, 12], m = 1;
 export {
-  L as CURRENT_CONFIG_VERSION,
-  E as DEFAULT_COMPOSITION,
-  i as DEFAULT_CURRENCY,
-  N as DEFAULT_NODE_CONFIG,
-  s as DEFAULT_OMNIBUS_DISCOUNT,
-  A as DEFAULT_OMNIBUS_PRICE,
-  c as DEFAULT_VISIBILITY,
-  m as EXCLUDED_ALGORITHM_IDS
+  m as CURRENT_CONFIG_VERSION,
+  a as DEFAULT_COMPOSITION,
+  O as DEFAULT_CURRENCY,
+  l as DEFAULT_NODE_CONFIG,
+  A as DEFAULT_OMNIBUS_DISCOUNT,
+  D as DEFAULT_OMNIBUS_PRICE,
+  E as DEFAULT_VISIBILITY,
+  N as EXCLUDED_ALGORITHM_IDS
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,23 +1,26 @@
-const c = ".recommendation-block-v2", n = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", T = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = {
+const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", t = ".ins-recommendation-mobile-container", n = ".ins-recommendation-mobile-row", R = {
   CURRENCY: "currency",
   SYMBOL: "currency-symbol",
   ALIGNMENT: "currency-alignment",
   THOUSAND_SEPARATOR: "currency-thousand-separator",
   DECIMAL_SEPARATOR: "currency-decimal-separator",
   DECIMAL_COUNT: "currency-decimal-count"
-}, R = "productImage", O = "productName", e = "productPrice", _ = "productOldPrice", E = "productOmnibusPrice", C = "productOmnibusDiscount", s = "productButton";
+}, r = "productImage", O = "productName", _ = "productPrice", e = "productOldPrice", s = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", i = "data-custom-attributes", u = "product-attr";
 export {
-  s as ATTR_PRODUCT_BUTTON,
-  R as ATTR_PRODUCT_IMAGE,
+  A as ATTR_CUSTOM_PREFIX,
+  i as ATTR_DATA_CUSTOM_ATTRIBUTES,
+  u as ATTR_PRODUCT_ATTR,
+  E as ATTR_PRODUCT_BUTTON,
+  r as ATTR_PRODUCT_IMAGE,
   O as ATTR_PRODUCT_NAME,
-  _ as ATTR_PRODUCT_OLD_PRICE,
+  e as ATTR_PRODUCT_OLD_PRICE,
   C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  E as ATTR_PRODUCT_OMNIBUS_PRICE,
-  e as ATTR_PRODUCT_PRICE,
-  c as BLOCK_ROOT_SELECTOR,
-  n as CONTAINER_SELECTOR,
-  r as CURRENCY_ATTR,
+  s as ATTR_PRODUCT_OMNIBUS_PRICE,
+  _ as ATTR_PRODUCT_PRICE,
+  T as BLOCK_ROOT_SELECTOR,
+  c as CONTAINER_SELECTOR,
+  R as CURRENCY_ATTR,
   o as DESKTOP_CONTAINER_SELECTOR,
-  T as MOBILE_CONTAINER_SELECTOR,
-  t as MOBILE_ROW_SELECTOR
+  t as MOBILE_CONTAINER_SELECTOR,
+  n as MOBILE_ROW_SELECTOR
 };

package/dist/extensions/Blocks/Recommendation/controls/cardBackground/index.js

@@ -1,7 +1,7 @@
 import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as s } from "../../../common-control.js";
 import { getCurrentLayout as l } from "../main/utils.js";
-const u = "recommendation-card-background-color-control", e = {
+const i = "recommendation-card-background-color-control", e = {
   CARD_BACKGROUND_COLOR: "cardBackgroundColor"
 }, a = {
   GRID: ".product-card-segment",
@@ -9,13 +9,13 @@ const u = "recommendation-card-background-color-control", e = {
 };
 class _ extends s {
   getId() {
-    return u;
+    return i;
   }
   getTemplate() {
     return `
             <div class="card-bg-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Card Background Color" }),
+      this._GuLabel({ text: this.api.translate("Card Background Color") }),
       this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
     ])}
             </div>
@@ -75,6 +75,6 @@ class _ extends s {
   }
 }
 export {
-  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  i as CARD_BACKGROUND_COLOR_CONTROL_ID,
   _ as CardBackgroundColorControl
 };