@useinsider/guido 3.12.1-beta.3214ec4 → 3.13.0

package/dist/composables/useStripo.js

@@ -1,31 +1,44 @@
-import { useActionsApi as x } from "./useActionsApi.js";
+import { useActionsApi as L } from "./useActionsApi.js";
 import { useBlocksConfig as O } from "./useBlocksConfig.js";
 import { useConfig as q } from "./useConfig.js";
 import { useCustomInterfaceAppearance as H } from "./useCustomInterfaceAppearance.js";
-import { useFullStoryBridge as L } from "./useFullStoryBridge.js";
-import { useModuleDynamicContentRepair as N } from "./useModuleDynamicContentRepair.js";
+import { useFullStoryBridge as N } from "./useFullStoryBridge.js";
+import { useModuleDynamicContentRepair as j } from "./useModuleDynamicContentRepair.js";
 import { useStripoEventHandler as z } from "./useStripoEventHandler.js";
 import { useStripoNotifications as $ } from "./useStripoNotifications.js";
 import { useToaster as G } from "./useToaster.js";
 import { localePatch as J } from "../config/i18n/index.js";
-import { en as E } from "../config/i18n/en/index.js";
+import { en as w } from "../config/i18n/en/index.js";
 import { ToasterTypeOptions as X } from "../enums/toaster.js";
-import { useStripoApi as j } from "../services/stripoApi.js";
-import K from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as w } from "../stores/editor.js";
-import { buildMergeTagEntries as Q, flattenDynamicContentList as W } from "../utils/genericUtil.js";
-import Y from "../package.json.js";
-const he = (b, l) => {
-  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: T, getCustomFonts: v, getSyncModulesStatus: B } = j(), { handleEvent: F } = z(), { handleModuleAdd: M } = N(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), _ = async (n, i = [], r = !1) => {
-    var S, y, h, C;
-    const e = w(), { html: f, css: a } = n, { baseBlocks: o, extensions: d } = await A(), g = ((S = c.value) == null ? void 0 : S.displayConditions) ?? !0, P = ((y = c.value) == null ? void 0 : y.modulesDisabled) ?? !1, I = ((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1;
+import { useStripoApi as K } from "../services/stripoApi.js";
+import Q from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as b } from "../stores/editor.js";
+import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../utils/genericUtil.js";
+import Z from "../package.json.js";
+let n = null;
+const Ct = () => {
+  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: T, getCustomFonts: v, getSyncModulesStatus: B } = K(), { handleEvent: F } = z(), { handleModuleAdd: M } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
+    var l;
+    if (document.getElementById("UiEditorScript")) {
+      i();
+      return;
+    }
+    const o = Z.guido, r = `https://email-static.useinsider.com/guido/${(l = o == null ? void 0 : o.stripo) == null ? void 0 : l.version}/UIEditor.js`, t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = r, t.onload = () => i(), t.onerror = () => {
+      t.remove(), s(new Error(`Failed to load Stripo UIEditor script from S3: ${r}`));
+    }, document.body.appendChild(t);
+  }), n.catch(() => {
+    n = null;
+  }), n), _ = async (i, s, o, a = [], r = !1) => {
+    var y, E, h, C;
+    const t = b(), { html: l, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = ((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1;
     await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: b,
-        html: f,
-        css: a,
-        forceRecreate: I,
+        metadata: s,
+        html: l,
+        css: D,
+        forceRecreate: U,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -35,9 +48,9 @@ const he = (b, l) => {
         customAppearanceMergetags: !m("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: K,
-        conditionsEnabled: g,
-        customConditionsEnabled: g,
+        customViewStyles: Q,
+        conditionsEnabled: S,
+        customConditionsEnabled: S,
         enableXSSSecurity: !0,
         modulesDisabled: P,
         syncModulesEnabled: r,
@@ -49,50 +62,50 @@ const he = (b, l) => {
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
         allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
-        ...o ? { baseBlocks: o } : {},
+        ...g ? { baseBlocks: g } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: i
+          customFonts: a
         },
         mergeTags: [
           {
-            entries: Q(
-              l.preselectedDynamicContentList,
-              W((C = u.value) == null ? void 0 : C.dynamicContentList),
+            entries: W(
+              o.preselectedDynamicContentList,
+              Y((C = u.value) == null ? void 0 : C.dynamicContentList),
               m("liquidSyntax")
             )
           }
         ],
-        async onTokenRefreshRequest(t) {
+        async onTokenRefreshRequest(e) {
           try {
-            const s = await T();
-            t(s);
-          } catch (s) {
-            p(s, "Failed to refresh token");
+            const d = await T();
+            e(d);
+          } catch (d) {
+            p(d, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = H(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: R } = x(), { injectFullStory: U } = L();
-            t(), s(), U(), R(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
+            const { importCss: e } = H(), { activateCustomViewStyles: d, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
+            e(), d(), x(), I(), o.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
+              t.hasChanges = !1;
             }, 1e3);
-          } catch (t) {
-            p(t, "Failed to load custom interface appearance");
+          } catch (e) {
+            p(e, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(t) {
-          e.isCodeEditorOpen = t;
+        onCodeEditorVisibilityChanged(e) {
+          t.isCodeEditorOpen = e;
         },
-        onEditorVisualModeChanged(t) {
-          e.editorVisualMode = t.toLowerCase();
+        onEditorVisualModeChanged(e) {
+          t.editorVisualMode = e.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(t) {
-          e.isVersionHistoryOpen = t;
+        onVersionHistoryVisibilityChanged(e) {
+          t.isVersionHistoryOpen = e;
         },
         onDataChanged() {
-          e.hasChanges = !0;
+          t.hasChanges = !0;
         },
         onEvent: F,
         onModuleAdd: M,
@@ -102,45 +115,35 @@ const he = (b, l) => {
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: d,
+        extensions: R,
         localePatch: J
       }
     );
-  }, D = (n) => new Promise((i, r) => {
-    var d;
-    if (document.getElementById("UiEditorScript")) {
-      Promise.resolve(n()).then(i, r);
-      return;
-    }
-    const e = Y.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
-    o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
-      Promise.resolve(n()).then(i, r);
-    }, o.onerror = () => {
-      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
-    }, document.body.appendChild(o);
-  });
-  return { initPlugin: async (n) => {
-    const i = w();
+  };
+  return { initPlugin: async (i, s, o) => {
+    const a = b();
     try {
-      await D(async () => {
-        const [r, e] = await Promise.all([
-          v(),
-          B()
-        ]);
-        i.syncModulesEnabled = e, await _(n, r, e);
-      });
+      await f();
+      const [r, t] = await Promise.all([
+        v(),
+        B()
+      ]);
+      a.syncModulesEnabled = t, await _(i, s, o, r, t);
     } catch {
-      i.loadingStatus = !1, k({
+      a.loadingStatus = !1, k({
         type: X.Error,
-        message: E["An error has occurred. Please report the error code to support."],
+        message: w["An error has occurred. Please report the error code to support."],
         actionButton: {
-          text: E["Reload page"],
+          text: w["Reload page"],
           onClick: () => window.location.reload()
         }
       });
     }
+  }, preloadRuntime: () => {
+    f().catch(() => {
+    });
   } };
 };
 export {
-  he as useStripo
+  Ct as useStripo
 };

package/dist/composables/useUserRole.js

@@ -0,0 +1,12 @@
+import { RoleEnums as t } from "../enums/roles.js";
+import { useAllowlistApi as s } from "../services/allowlistApi.js";
+let e = null, l = null;
+const c = () => {
+  const { getUserRole: n } = s();
+  return { getIsManageUser: async () => e !== null ? e : (l || (l = n().then((r) => (e = r === t.MANAGE_USERS, e)).catch((r) => (console.error("[GUIDO_ALLOWLIST] role fetch failed", r), !1)).finally(() => {
+    l = null;
+  })), l) };
+};
+export {
+  c as useUserRole
+};

package/dist/enums/roles.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.MANAGE_USERS = "manage-users", r))(e || {});
+export {
+  e as RoleEnums
+};

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.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.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BLOCK_BACKGROUND = "recommendation-block-background-color-control", 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.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

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

@@ -0,0 +1,10 @@
+import { createBlockBackgroundColorControl as o } from "../../../controlFactories.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
+const c = o(
+  r.BLOCK_BACKGROUND,
+  t
+);
+export {
+  c as BlockBackgroundColorControl
+};

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js

@@ -1,13 +1,13 @@
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as d } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as T } from "../../constants/selectors.js";
-import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+import { preserveTextStyles as m } from "../../../../../utils/preserveTextStyles.js";
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as d } from "../../constants/blockIds.js";
+import { RecommendationControlId as T } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as f } from "../../constants/selectors.js";
 const i = "data-text-after", u = "", p = ".omnibus-text-after";
-class g extends c {
+class g extends l {
   getId() {
-    return d.OMNIBUS_DISCOUNT_TEXT_AFTER;
+    return T.OMNIBUS_DISCOUNT_TEXT_AFTER;
   }
   getTemplate() {
     return `
@@ -44,11 +44,11 @@ class g extends c {
   _onTextChange(t) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const e = this.currentNode.closest(T);
+    const e = this.currentNode.closest(f);
     if (!e || !("querySelectorAll" in e))
       return;
     const n = Array.from(
-      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_DISCOUNT}"]`)
+      e.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_DISCOUNT}"]`)
     );
     if (!n.length)
       return;
@@ -57,10 +57,10 @@ class g extends c {
       o.modifyHtml(s).setAttribute(i, t);
       const r = s.querySelector(p);
       if (r) {
-        const a = f(r, t);
+        const a = m(r, t);
         o.modifyHtml(r).setInnerHtml(a);
       }
-    }), o.apply(new m("Update omnibus discount text after"));
+    }), o.apply(new c("Update omnibus discount text after"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextAfter", (t) => {

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js

@@ -1,13 +1,13 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as d } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as T } from "../../constants/selectors.js";
-import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+import { preserveTextStyles as a } from "../../../../../utils/preserveTextStyles.js";
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as d } from "../../constants/blockIds.js";
+import { RecommendationControlId as T } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as f } from "../../constants/selectors.js";
 const i = "data-text-before", u = "", p = ".omnibus-text-before";
-class g extends c {
+class g extends l {
   getId() {
-    return d.OMNIBUS_DISCOUNT_TEXT_BEFORE;
+    return T.OMNIBUS_DISCOUNT_TEXT_BEFORE;
   }
   getTemplate() {
     return `
@@ -44,11 +44,11 @@ class g extends c {
   _onTextChange(t) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const e = this.currentNode.closest(T);
+    const e = this.currentNode.closest(f);
     if (!e || !("querySelectorAll" in e))
       return;
     const n = Array.from(
-      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_DISCOUNT}"]`)
+      e.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_DISCOUNT}"]`)
     );
     if (!n.length)
       return;
@@ -57,10 +57,10 @@ class g extends c {
       o.modifyHtml(s).setAttribute(i, t);
       const r = s.querySelector(p);
       if (r) {
-        const m = f(r, t);
+        const m = a(r, t);
         o.modifyHtml(r).setInnerHtml(m);
       }
-    }), o.apply(new a("Update omnibus discount text before"));
+    }), o.apply(new c("Update omnibus discount text before"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusDiscountTextBefore", (t) => {

package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/textAfter.js

@@ -1,13 +1,13 @@
-import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as d } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as T } from "../../constants/selectors.js";
-import { preserveTextStyles as p } from "../../utils/preserveTextStyles.js";
+import { preserveTextStyles as u } from "../../../../../utils/preserveTextStyles.js";
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as d } from "../../constants/blockIds.js";
+import { RecommendationControlId as T } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as p } from "../../constants/selectors.js";
 const s = "data-text-after", a = "", f = ".omnibus-text-after";
-class g extends c {
+class g extends l {
   getId() {
-    return d.OMNIBUS_PRICE_TEXT_AFTER;
+    return T.OMNIBUS_PRICE_TEXT_AFTER;
   }
   getTemplate() {
     return `
@@ -44,11 +44,11 @@ class g extends c {
   _onTextChange(t) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const e = this.currentNode.closest(T);
+    const e = this.currentNode.closest(p);
     if (!e || !("querySelectorAll" in e))
       return;
     const n = Array.from(
-      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_PRICE}"]`)
+      e.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
     );
     if (!n.length)
       return;
@@ -57,10 +57,10 @@ class g extends c {
       r.modifyHtml(i).setAttribute(s, t);
       const o = i.querySelector(f);
       if (o) {
-        const m = p(o, t);
+        const m = u(o, t);
         r.modifyHtml(o).setInnerHtml(m);
       }
-    }), r.apply(new u("Update omnibus price text after"));
+    }), r.apply(new c("Update omnibus price text after"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusPriceTextAfter", (t) => {

package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/textBefore.js

@@ -1,13 +1,13 @@
-import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as d } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as p } from "../../constants/selectors.js";
-import { preserveTextStyles as T } from "../../utils/preserveTextStyles.js";
+import { preserveTextStyles as u } from "../../../../../utils/preserveTextStyles.js";
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as d } from "../../constants/blockIds.js";
+import { RecommendationControlId as p } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as T } from "../../constants/selectors.js";
 const s = "data-text-before", a = "", f = ".omnibus-text-before";
-class g extends c {
+class g extends l {
   getId() {
-    return d.OMNIBUS_PRICE_TEXT_BEFORE;
+    return p.OMNIBUS_PRICE_TEXT_BEFORE;
   }
   getTemplate() {
     return `
@@ -44,11 +44,11 @@ class g extends c {
   _onTextChange(e) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const t = this.currentNode.closest(p);
+    const t = this.currentNode.closest(T);
     if (!t || !("querySelectorAll" in t))
       return;
     const n = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_PRICE}"]`)
+      t.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
     );
     if (!n.length)
       return;
@@ -57,10 +57,10 @@ class g extends c {
       o.modifyHtml(i).setAttribute(s, e);
       const r = i.querySelector(f);
       if (r) {
-        const m = T(r, e);
+        const m = u(r, e);
         o.modifyHtml(r).setInnerHtml(m);
       }
-    }), o.apply(new u("Update omnibus price text before"));
+    }), o.apply(new c("Update omnibus price text before"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusPriceTextBefore", (e) => {

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

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { PriceControls as l } from "./controls/price/index.js";
+import { OldPriceControls as s } from "./controls/oldPrice/index.js";
 import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
 import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
 import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
+import { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
 import { SpacingControl as d } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
 import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
 import R from "./recommendation.css.js";
 import { SettingsPanel as S } from "./settingsPanel.js";
-const w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };