@useinsider/guido 2.0.0-beta.6b85cb2 → 2.0.0-beta.6da018c

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "282ca4d1"
+  "9cd25be3"
 );
 const v = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,54 +1,55 @@
-import { defineComponent as x, defineAsyncComponent as P, ref as B, computed as U, watch as N, onMounted as z, onUnmounted as K } from "vue";
-import { provideGuidoActions as M } from "../composables/useGuidoActions.js";
-import { usePartner as j } from "../composables/usePartner.js";
-import { useStripo as q } from "../composables/useStripo.js";
-import { useTimerClone as J } from "../composables/useTimerClone.js";
-import { migrate as W } from "../config/migrator/index.js";
-import Q from "./organisms/base/Toaster.vue.js";
-import V from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import X from "./organisms/header/HeaderWrapper.vue.js";
-import Y from "./organisms/LoadingWrapper.vue.js";
-import Z from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import $ from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as ee } from "../services/stripoApi.js";
-import { useConfigStore as oe } from "../stores/config.js";
-import { useDynamicContentStore as te } from "../stores/dynamic-content.js";
-import { useEditorStore as ne } from "../stores/editor.js";
-import { usePreviewStore as re } from "../stores/preview.js";
-import { useUnsubscribeStore as ce } from "../stores/unsubscribe.js";
-const Ee = /* @__PURE__ */ x({
+import { defineComponent as q, defineAsyncComponent as U, ref as W, computed as I, watch as z, onMounted as K, onUnmounted as M } from "vue";
+import { provideGuidoActions as j } from "../composables/useGuidoActions.js";
+import { usePartner as J } from "../composables/usePartner.js";
+import { useStripo as Q } from "../composables/useStripo.js";
+import { useTimerClone as V } from "../composables/useTimerClone.js";
+import { migrate as L } from "../config/migrator/index.js";
+import X from "./organisms/base/Toaster.vue.js";
+import Y from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import Z from "./organisms/header/HeaderWrapper.vue.js";
+import $ from "./organisms/LoadingWrapper.vue.js";
+import ee from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import oe from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as te } from "../services/stripoApi.js";
+import { useConfigStore as ne } from "../stores/config.js";
+import { useDynamicContentStore as re } from "../stores/dynamic-content.js";
+import { useEditorStore as se } from "../stores/editor.js";
+import { usePreviewStore as ce } from "../stores/preview.js";
+import { useToasterStore as ie } from "../stores/toaster.js";
+import { useUnsubscribeStore as ae } from "../stores/unsubscribe.js";
+const Pe = /* @__PURE__ */ q({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(_, { expose: I, emit: t }) {
-    const l = _, L = P(
+  setup(A, { expose: R, emit: t }) {
+    const u = A, F = U(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), A = P(
+    ), G = U(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), p = B(), s = te(), u = ce(), n = oe();
-    n.init(l.config);
-    const i = ne(), F = re(), r = U(() => i.hasChanges), { isTestPartner: G } = j(), v = () => {
+    ), p = W(), i = re(), v = ae(), f = ie(), n = ne();
+    n.init(u.config);
+    const a = se(), H = ce(), r = I(() => a.hasChanges), { isTestPartner: O } = J(), y = () => {
       var e;
       return (e = p.value) == null ? void 0 : e.handleSave(!0);
-    }, { templateId: a, userId: y, partnerName: h, productType: f, username: b, template: o } = n, c = (o == null ? void 0 : o.html) || "", g = (o == null ? void 0 : o.css) || "", m = (o == null ? void 0 : o.preselectedDynamicContent) || [];
-    i.templateId = a;
-    const { initPlugin: S } = q({
-      emailId: a,
-      userId: y,
-      username: b,
-      partnerName: h,
-      productType: f,
-      preselectedDynamicContentList: m,
+    }, { templateId: m, userId: h, partnerName: b, productType: g, username: S, template: o } = n, s = (o == null ? void 0 : o.html) || "", w = (o == null ? void 0 : o.css) || "", d = (o == null ? void 0 : o.preselectedDynamicContent) || [];
+    a.templateId = m;
+    const c = W(!1), { initPlugin: C } = Q({
+      emailId: m,
+      userId: h,
+      username: S,
+      partnerName: b,
+      productType: g,
+      preselectedDynamicContentList: d,
       onReady: () => {
         console.debug("guido:ready"), t("ready");
       }
-    }), { getDefaultTemplate: w } = ee(), { cloneTimersOnSave: C, hasTimerBlocks: D } = J(), H = U(() => {
+    }), { getDefaultTemplate: D } = te(), { cloneTimersOnSave: E, hasTimerBlocks: T } = V(), x = I(() => {
       var e;
       return !((e = n.ui) != null && e.showHeader);
     });
-    M({
+    j({
       onBack: () => {
         console.debug("guido:back"), t("back");
       },
@@ -62,51 +63,52 @@ const Ee = /* @__PURE__ */ x({
         console.debug("guido:test-email:click"), t("test-email:click");
       }
     });
-    const E = (e) => {
-      console.debug("dynamic-content:close", e), s.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, k = () => {
+    const k = (e) => {
+      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, _ = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    N(() => r.value, () => {
+    z(() => r.value, () => {
       t("on-change", r.value);
     });
-    const d = (e) => {
-      const T = e, { attribute: O, position: R } = T.detail;
-      console.debug("dynamic-content:open", T.detail), t("dynamic-content:open", O, R);
+    const l = (e) => {
+      const P = e, { attribute: B, position: N } = P.detail;
+      console.debug("dynamic-content:open", P.detail), t("dynamic-content:open", B, N);
     };
-    return z(async () => {
+    return K(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        u.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        v.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
         let e = {
-          html: c && await W(c),
-          css: g,
+          html: s && await L(s),
+          css: w,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await w(), e.html = await W(e.html)), D(e.html) && (e.html = await C(e.html)), await S(e), s.selectedDynamicContentList = m;
+        e.html || (e = await D(), e.html = await L(e.html)), T(e.html) && (e.html = await E(e.html)), await C(e), i.selectedDynamicContentList = d;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
-      document.addEventListener("dynamic-content:open", d);
-    }), K(() => {
-      document.removeEventListener("dynamic-content:open", d);
+      document.addEventListener("dynamic-content:open", l), c.value = !0;
+    }), M(() => {
+      var e;
+      c.value && (f.hideToaster(), (e = document.querySelector("#guido__toaster")) == null || e.remove()), c.value = !1, document.removeEventListener("dynamic-content:open", l);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
       n.reset();
-    }), I({
+    }), R({
       dynamicContent: {
-        insert: E,
-        close: k
+        insert: k,
+        close: _
       },
       hasChanges: r,
-      saveSilent: v
-    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: p, dynamicContentStore: s, unsubscribeStore: u, props: l, configStore: n, editorStore: i, previewStore: F, hasChanges: r, isTestPartner: G, saveSilent: v, templateId: a, userId: y, partnerName: h, productType: f, username: b, templateConfig: o, html: c, css: g, preselectedDynamicContentList: m, emit: t, initPlugin: S, getDefaultTemplate: w, cloneTimersOnSave: C, hasTimerBlocks: D, noHeader: H, insertDynamicContent: E, closeDynamicContent: k, handleDynamicContentOpen: d, Toaster: Q, FilterSelectionDrawer: V, HeaderWrapper: X, LoadingWrapper: Y, SaveAsTemplateDrawer: Z, UnsubscribeWrapper: $ };
+      saveSilent: y
+    }), { __sfc: !0, PreviewContainer: F, OnboardingWrapper: G, headerWrapperRef: p, dynamicContentStore: i, unsubscribeStore: v, toasterStore: f, props: u, configStore: n, editorStore: a, previewStore: H, hasChanges: r, isTestPartner: O, saveSilent: y, templateId: m, userId: h, partnerName: b, productType: g, username: S, templateConfig: o, html: s, css: w, preselectedDynamicContentList: d, editorReady: c, emit: t, initPlugin: C, getDefaultTemplate: D, cloneTimersOnSave: E, hasTimerBlocks: T, noHeader: x, insertDynamicContent: k, closeDynamicContent: _, handleDynamicContentOpen: l, Toaster: X, FilterSelectionDrawer: Y, HeaderWrapper: Z, LoadingWrapper: $, SaveAsTemplateDrawer: ee, UnsubscribeWrapper: oe };
   }
 });
 export {
-  Ee as default
+  Pe as default
 };

package/dist/components/organisms/base/Toaster.vue.js

@@ -1,17 +1,17 @@
-import e from "./Toaster.vue2.js";
+import n from "./Toaster.vue2.js";
 import s from "../../../_virtual/_plugin-vue2_normalizer.js";
 var r = function() {
-  var o = this, n = o._self._c, t = o._self._setupProxy;
-  return n(t.InToasts, { attrs: { "action-buttons-config": t.actionButtonsConfig, status: t.store.status, text: t.store.text, type: t.store.type }, on: { actionButtonClick0: t.handleActionClick } });
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return e(t.InToasts, { attrs: { id: "guido__toaster", "action-buttons-config": t.actionButtonsConfig, status: t.store.status, text: t.store.text, type: t.store.type }, on: { actionButtonClick0: t.handleActionClick } });
 }, a = [], _ = /* @__PURE__ */ s(
-  e,
+  n,
   r,
   a,
   !1,
   null,
   null
 );
-const l = _.exports;
+const f = _.exports;
 export {
-  l as default
+  f as default
 };

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -1,16 +1,16 @@
 import i from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
   var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f a-i-c j-c-c" }, [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: t.trans("email-editor.preview-design-size-tooltip") } })], 1);
-}, a = [], n = /* @__PURE__ */ r(
+  return e("div", { staticClass: "d-f a-i-c j-c-c" }, [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })], 1);
+}, a = [], n = /* @__PURE__ */ o(
   i,
-  o,
+  r,
   a,
   !1,
   null,
-  "c2adc57d"
+  "eb2f9f20"
 );
 const m = n.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent as c, ref as n, computed as l, watch as u } from "vue";
 import { useTranslations as p } from "../../../../composables/useTranslations.js";
 import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InTooltip as v, InProgress as f } from "@useinsider/design-system-vue";
+import { InTooltipV2 as v, InProgress as f } from "@useinsider/design-system-vue";
 const S = /* @__PURE__ */ c({
   __name: "EmailSizeIndicator",
   setup(w) {
@@ -17,7 +17,7 @@ const S = /* @__PURE__ */ c({
     }, i = p();
     return u(() => t.previewHtml, () => {
       r();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltip: v };
+    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltipV2: v };
   }
 });
 export {

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

@@ -1,187 +1,103 @@
-import { ModificationDescription as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as _ } from "../common-control.js";
-import { ATTR_PRODUCT_IMAGE as m, ATTR_PRODUCT_NAME as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OLD_PRICE as h, ATTR_PRODUCT_OMNIBUS_PRICE as C, ATTR_PRODUCT_OMNIBUS_DISCOUNT as f, ATTR_PRODUCT_BUTTON as g } from "./constants.js";
-const R = "ui-elements-recommendation-card-composition", l = ".recommendation-attribute-row", A = "tr.recommendation-product-row", c = "data-card-composition", a = "data-attribute-type", d = "data-visibility", s = [
-  { key: m, label: "Product Image", visible: !0 },
-  { key: y, label: "Product Name", visible: !0 },
-  { key: T, label: "Product Price", visible: !0 },
-  { key: h, label: "Product Original Price", visible: !0 },
-  { key: C, label: "Omnibus Price", visible: !1 },
-  { key: f, label: "Omnibus Discount", visible: !1 },
-  { key: g, label: "Product Button", visible: !0 }
+var m = Object.defineProperty;
+var y = (n, o, i) => o in n ? m(n, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[o] = i;
+var a = (n, o, i) => y(n, typeof o != "symbol" ? o + "" : o, i);
+import { ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as b } from "../common-control.js";
+const h = "ui-elements-recommendation-card-composition", s = [
+  { key: "productImage", label: "Product Image", visible: !0 },
+  { key: "productName", label: "Product Name", visible: !0 },
+  { key: "productPrice", label: "Product Price", visible: !0 },
+  { key: "productOriginalPrice", label: "Product Original Price", visible: !0 },
+  { key: "productButton", label: "Product Button", visible: !0 }
 ];
-class N extends _ {
+class g extends b {
+  constructor() {
+    super(...arguments);
+    a(this, "currentComposition", []);
+    a(this, "currentVisibility", {});
+  }
   getId() {
-    return R;
+    return h;
   }
   getTemplate() {
-    const t = s.map((i) => ({
-      key: i.key,
-      label: i.label,
-      content: this._createItemContent(i.label, i.key)
+    const i = s.map((e) => ({
+      key: e.key,
+      label: e.label,
+      content: `
+                <div style="display: flex; align-items: center; justify-content: space-between;
+                    padding: 8px; gap: 8px;">
+                    <span style="flex: 1;">${e.label}</span>
+                    ${this._GuToggle(`visibility_${e.key}`)}
+                </div>
+            `
     }));
     return `
             <div class="container">
                 ${this._GuLabel({ text: "Card Element Order & Visibility" })}
-                ${this._GuOrderable("cardComposition", t)}
+                ${this._GuOrderable("cardComposition", i)}
             </div>
         `;
   }
   onRender() {
-    this._initializeComposition(), this._registerValueChangeListeners();
-  }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._initializeComposition();
-  }
-  /**
-   * Creates the HTML content for an orderable item with label and toggle
-   */
-  _createItemContent(t, i) {
-    return `
-            <div style="display: flex; align-items: center; justify-content: space-between;
-                padding: 8px; gap: 8px;">
-                <span style="flex: 1;">${t}</span>
-                ${this._GuToggle(`visibility_${i}`)}
-            </div>
-        `;
-  }
-  /**
-   * Registers event listeners for composition and visibility changes
-   */
-  _registerValueChangeListeners() {
-    this.api.onValueChanged("cardComposition", (t) => {
-      this._applyCompositionToBlock(t);
-    }), s.forEach((t) => {
-      this.api.onValueChanged(`visibility_${t.key}`, (i) => {
-        this._applyVisibilityToBlock(t.key, i);
+    this._initializeComposition(), this.api.onValueChanged("cardComposition", (i) => {
+      this.currentComposition = i, this._applyCompositionToBlock(i);
+    }), s.forEach((i) => {
+      this.api.onValueChanged(`visibility_${i.key}`, (e) => {
+        this.currentVisibility[i.key] = e, this._applyVisibilityToBlock();
       });
     });
   }
+  onTemplateNodeUpdated(i) {
+    super.onTemplateNodeUpdated(i), this._initializeComposition();
+  }
   /**
-   * Initializes composition order and visibility state from the current node
+   * Initialize the composition order and visibility from the block or use defaults
    */
   _initializeComposition() {
-    const t = this._readCompositionFromNode(), i = this._readVisibilityFromRows(), e = {
-      cardComposition: t,
-      ...this._buildVisibilityValues(i)
+    var p;
+    const i = (p = this.currentNode) == null ? void 0 : p.querySelector(".ins-recommendation-v3-block-v2");
+    let e = null, l = null;
+    if (i && "getAttribute" in i && (e = i.getAttribute("data-card-composition"), l = i.getAttribute("data-card-visibility")), e) {
+      const t = e.split(",").filter(Boolean), r = s.map((c) => c.key);
+      t.every((c) => r.includes(c)) && t.length > 0 ? this.currentComposition = t : this.currentComposition = r;
+    } else
+      this.currentComposition = s.map((t) => t.key);
+    if (l)
+      try {
+        const t = JSON.parse(l);
+        this.currentVisibility = t;
+      } catch {
+        this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
+      }
+    else
+      this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
+    const d = {
+      cardComposition: this.currentComposition
     };
-    this.api.updateValues(e);
-  }
-  /**
-   * Reads composition order from node's data-card-composition attribute
-   * Falls back to default order if attribute is not present
-   */
-  _readCompositionFromNode() {
-    if (!this.currentNode || !("getAttribute" in this.currentNode))
-      return s.map((i) => i.key);
-    const t = this.currentNode.getAttribute(c);
-    return t ? t.split(",").filter(Boolean) : s.map((i) => i.key);
-  }
-  /**
-   * Builds visibility values object from the visibility map
-   */
-  _buildVisibilityValues(t) {
-    return s.reduce((i, e) => (i[`visibility_${e.key}`] = t[e.key] ?? !0, i), {});
-  }
-  /**
-   * Read visibility state from individual row elements' data-visibility attributes
-   * This ensures toggles reflect the actual DOM state
-   */
-  _readVisibilityFromRows() {
-    if (!this.currentNode)
-      return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(l));
-    console.debug("_readVisibilityFromRows - found attribute rows:", t.length);
-    const i = this._extractVisibilityFromRows(t);
-    return this._mergeWithDefaults(i);
-  }
-  /**
-   * Returns default visibility values for all items
-   */
-  _getDefaultVisibilities() {
-    return s.reduce((t, i) => (t[i.key] = i.visible, t), {});
-  }
-  /**
-   * Extracts visibility values from DOM nodes
-   */
-  _extractVisibilityFromRows(t) {
-    const i = {};
-    return t.forEach((e) => {
-      if (!("getAttribute" in e))
-        return;
-      const o = e.getAttribute(a), r = e.getAttribute(d);
-      o && r !== null && (i[o] = this._parseVisibilityValue(r), console.debug(
-        `_readVisibilityFromRows - ${o}: ${i[o]} (raw: ${r})`
-      ));
-    }), i;
-  }
-  /**
-   * Parses visibility value from string to boolean
-   * Accepts "1", "true" as true, everything else as false
-   */
-  _parseVisibilityValue(t) {
-    return t === "1" || t === "true";
-  }
-  /**
-   * Merges extracted visibilities with default values for missing keys
-   */
-  _mergeWithDefaults(t) {
-    return s.forEach((i) => {
-      i.key in t || (t[i.key] = i.visible, console.debug(`_readVisibilityFromRows - ${i.key}: using default ${i.visible}`));
-    }), t;
+    s.forEach((t) => {
+      d[`visibility_${t.key}`] = this.currentVisibility[t.key] ?? !0;
+    }), this.api.updateValues(d);
   }
   /**
    * Apply the reordered composition to the block's HTML structure
-   * Updates the data-card-composition attribute and reorders product attributes
-   */
-  _applyCompositionToBlock(t) {
-    if (console.debug("_applyCompositionToBlock - composition:", t), !this.currentNode) {
-      console.debug("_applyCompositionToBlock - no current node");
-      return;
-    }
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(c, t.join(",")).apply(new n("Update card composition")), this._reorderProductAttributes(t);
-  }
-  /**
-   * Reorders attribute rows within each product row based on composition order
    */
-  _reorderProductAttributes(t) {
+  _applyCompositionToBlock(i) {
     if (!this.currentNode)
       return;
-    const i = this.currentNode.querySelectorAll(A);
-    if (!(i != null && i.length))
-      return;
-    const e = this.api.getDocumentModifier();
-    i.forEach((o) => {
-      const r = this._buildCompositionHtml(o, t);
-      e.modifyHtml(o).setInnerHtml(r);
-    }), e.apply(new n("Reorder product attributes"));
-  }
-  /**
-   * Builds HTML string with attributes ordered according to composition
-   */
-  _buildCompositionHtml(t, i) {
-    return i.reduce((e, o) => {
-      const r = t.querySelector(`${l}[${a}="${o}"]`);
-      return r && "getOuterHTML" in r ? e + r.getOuterHTML() : e;
-    }, "");
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute("data-card-composition", i.join(",")).apply(new u("Stored card composition order"));
   }
   /**
    * Apply visibility changes to the block's HTML structure
-   * Updates display style and data-visibility attribute for all matching rows
    */
-  _applyVisibilityToBlock(t, i) {
-    if (console.debug("_applyVisibilityToBlock", t, i), !this.currentNode)
-      return;
-    const e = this.currentNode.querySelectorAll(`${l}[${a}="${t}"]`);
-    if (!(e != null && e.length))
+  _applyVisibilityToBlock() {
+    if (!this.currentNode)
       return;
-    const o = i ? "table-row" : "none", r = i ? "1" : "0", p = `Set ${t} visibility to ${i ? "visible" : "hidden"}`, u = this.api.getDocumentModifier();
-    e.forEach((b) => {
-      u.modifyHtml(b).setStyle("display", o).setAttribute(d, r);
-    }), u.apply(new n(p));
+    const i = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute("data-card-visibility", JSON.stringify(this.currentVisibility)).apply(new u("Stored card visibility settings"));
   }
 }
 export {
-  R as COMPOSITION_CONTROL_BLOCK_ID,
-  N as RecommendationCardCompositionControl
+  h as COMPOSITION_CONTROL_BLOCK_ID,
+  g as RecommendationCardCompositionControl
 };

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

@@ -1,13 +1,5 @@
-const _ = "productImage", b = "productName", n = "productPrice", i = "productOldPrice", O = "productOmnibusPrice", T = "productOmnibusDiscount", t = "productButton";
-var o = /* @__PURE__ */ ((c) => (c.BUTTON = "recommendation-block-button", c.NAME = "recommendation-block-name", c.PRICE = "recommendation-block-price", c.OLD_PRICE = "recommendation-block-old-price", c.OMNIBUS_PRICE = "recommendation-block-omnibus-price", c.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", c.IMAGE = "recommendation-block-image", c))(o || {}), r = /* @__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))(r || {});
+var o = /* @__PURE__ */ ((c) => (c.BUTTON = "recommendation-block-button", c.NAME = "recommendation-block-name", c.PRICE = "recommendation-block-price", c.OLD_PRICE = "recommendation-block-old-price", c.IMAGE = "recommendation-block-image", c))(o || {}), r = /* @__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.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.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(r || {});
 export {
-  t as ATTR_PRODUCT_BUTTON,
-  _ as ATTR_PRODUCT_IMAGE,
-  b as ATTR_PRODUCT_NAME,
-  i as ATTR_PRODUCT_OLD_PRICE,
-  T as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  O as ATTR_PRODUCT_OMNIBUS_PRICE,
-  n as ATTR_PRODUCT_PRICE,
   o as RecommendationBlockId,
   r as RecommendationControlId
 };