@useinsider/guido 3.17.0-beta.978ff7e → 3.17.0-beta.a0d17c2

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

@@ -1,34 +1,35 @@
 var at = Object.defineProperty;
 var ct = (h, p, t) => p in h ? at(h, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[p] = t;
 var $ = (h, p, t) => ct(h, typeof p != "symbol" ? p + "" : p, t);
+import { ACADEMY_LINKS as dt } from "../../../../../enums/academy.js";
 import { UIElementType as _, UEAttr as O, ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as dt } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as ut, ATTR_PRODUCT_PRICE as C, ATTR_PRODUCT_OLD_PRICE as L, ATTR_PRODUCT_OMNIBUS_PRICE as mt, ATTR_PRODUCT_OMNIBUS_DISCOUNT as ht, ATTR_PRODUCT_BUTTON as x, ATTR_RECOMMENDATION_TITLE as I, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as v, SELECTOR_ATTRIBUTE_ROW as N, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as R, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as pt, BUILT_IN_DEFAULT_ATTRIBUTES as _t } from "../../constants/selectors.js";
+import { CommonControl as ut } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as C, ATTR_PRODUCT_OLD_PRICE as L, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as x, ATTR_RECOMMENDATION_TITLE as I, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as v, SELECTOR_ATTRIBUTE_ROW as N, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as E, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
 import { DEFAULT_COMPOSITION as Y, DEFAULT_VISIBILITY as X } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as g } from "../../services/configService.js";
-import { useRecommendationExtensionStore as gt } from "../../store/recommendation.js";
-import { ATTRIBUTE_CELL_CLASS as ft, gridElementRenderer as bt, DEFAULT_CELL_PADDING as yt, buildFillerCell as Tt } from "../../templates/grid/elementRenderer.js";
-import { listElementRenderer as Ct } from "../../templates/list/elementRenderer.js";
-import { buildTitleRows as St, DEFAULT_TITLE_PARAGRAPH as At, DEFAULT_TITLE_TEXT as It } from "../../templates/titleRows.js";
-import { resolveInlinePriceOrder as $t, toDisplayName as vt, toDisplayableAttributeValue as Nt, buildElementRenderer as J } from "../../templates/utils.js";
-import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Et, compositionKeyToProductAttr as k, resolveRowCompositionKey as Lt, filterToProductAttrValue as T, findAttributeRow as Ot, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Dt, productAttrToCompositionKey as U } from "../../utils/compositionKeys.js";
-import { getTableDisplayValue as Ht } from "../../utils/tagName.js";
-import { isPartnerManagedBlock as Pt, regenerateProductRowsWithStyles as wt, getMainContainerTbody as Bt, getCurrentLayout as kt } from "../main/utils.js";
-const Ut = "ui-elements-recommendation-card-composition", M = ".product-card-wrapper > tbody", Z = ".product-info-cell > table > tbody", tt = {
+import { useRecommendationExtensionStore as ft } from "../../store/recommendation.js";
+import { ATTRIBUTE_CELL_CLASS as bt, gridElementRenderer as yt, DEFAULT_CELL_PADDING as Tt, buildFillerCell as Ct } from "../../templates/grid/elementRenderer.js";
+import { listElementRenderer as St } from "../../templates/list/elementRenderer.js";
+import { buildTitleRows as At, DEFAULT_TITLE_PARAGRAPH as It, DEFAULT_TITLE_TEXT as $t } from "../../templates/titleRows.js";
+import { resolveInlinePriceOrder as vt, toDisplayName as Nt, toDisplayableAttributeValue as Et, buildElementRenderer as J } from "../../templates/utils.js";
+import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Lt, compositionKeyToProductAttr as k, resolveRowCompositionKey as Ot, filterToProductAttrValue as T, findAttributeRow as Dt, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Ht, productAttrToCompositionKey as M } from "../../utils/compositionKeys.js";
+import { getTableDisplayValue as Pt } from "../../utils/tagName.js";
+import { isPartnerManagedBlock as wt, regenerateProductRowsWithStyles as Bt, getMainContainerTbody as kt, getCurrentLayout as Mt } from "../main/utils.js";
+const Ut = "ui-elements-recommendation-card-composition", U = ".product-card-wrapper > tbody", Z = ".product-info-cell > table > tbody", tt = {
   ADD_ATTRIBUTE: "addAttribute"
-}, f = 5, P = "reorderIcon_", Mt = '<svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2.5" r="1.2"/><circle cx="7" cy="2.5" r="1.2"/><circle cx="12" cy="2.5" r="1.2"/><circle cx="2" cy="7.5" r="1.2"/><circle cx="7" cy="7.5" r="1.2"/><circle cx="12" cy="7.5" r="1.2"/></svg>', m = [
+}, f = 5, P = "reorderIcon_", qt = '<svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2.5" r="1.2"/><circle cx="7" cy="2.5" r="1.2"/><circle cx="12" cy="2.5" r="1.2"/><circle cx="2" cy="7.5" r="1.2"/><circle cx="7" cy="7.5" r="1.2"/><circle cx="12" cy="7.5" r="1.2"/></svg>', m = [
   { key: q, label: "Product Image" },
-  { key: ut, label: "Product Name" },
+  { key: mt, label: "Product Name" },
   { key: C, label: "Product Price" },
   { key: L, label: "Product Original Price" },
-  { key: mt, label: "Omnibus Price" },
-  { key: ht, label: "Omnibus Discount" },
+  { key: ht, label: "Omnibus Price" },
+  { key: pt, label: "Omnibus Discount" },
   { key: x, label: "Product Button" }
-], E = { key: I, label: "Title" }, qt = new Set(m.map((h) => h.key)), A = "customAttr_", w = "deleteAttr_";
-class re extends dt {
+], R = { key: I, label: "Title" }, xt = new Set(m.map((h) => h.key)), A = "customAttr_", w = "deleteAttr_";
+class se extends ut {
   constructor() {
     super(...arguments);
-    $(this, "store", gt());
+    $(this, "store", ft());
     $(this, "unsubscribeStore", null);
     $(this, "eventController", null);
     /**
@@ -91,7 +92,7 @@ class re extends dt {
                     </${_.BUTTON}>
                 </div>
             `
-    ).join(""), o = "https://academy.insiderone.com/docs/new-editor-email-recommendation-block", n = this.api.translate(
+    ).join(""), o = dt.EMAIL_RECOMMENDATION_BLOCK, n = this.api.translate(
       "Drag and drop the card elements to reorder them, adjust their visibility or add new attributes up to 5."
     ), l = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
     return `
@@ -122,10 +123,10 @@ class re extends dt {
                 </div>
 
                 <div class="orderable-list">
-                    <div class="orderable-item title-item" data-key="${E.key}">
-                        <span class="item-label">${this.api.translate(E.label)}</span>
+                    <div class="orderable-item title-item" data-key="${R.key}">
+                        <span class="item-label">${this.api.translate(R.label)}</span>
                         <div class="item-action">
-                            ${this._GuToggle(`visibility_${E.key}`)}
+                            ${this._GuToggle(`visibility_${R.key}`)}
                         </div>
                     </div>
                 </div>
@@ -154,7 +155,7 @@ class re extends dt {
     const t = (r = this.getContainer()) == null ? void 0 : r.querySelector("[data-card-composition-control]");
     if (!t)
       return;
-    const e = Pt(this.currentNode);
+    const e = wt(this.currentNode);
     t.style.pointerEvents = e ? "none" : "", t.style.opacity = e ? "0.5" : "";
   }
   onTemplateNodeUpdated(t) {
@@ -171,7 +172,7 @@ class re extends dt {
     this.api.updateValues(s), i && this._initializeCustomSelects(e), this._updateAddButtonState();
   }
   _registerValueChangeListeners() {
-    [E, ...m].forEach((t) => {
+    [R, ...m].forEach((t) => {
       this.api.onValueChanged(`visibility_${t.key}`, (e) => {
         this._applyVisibilityToBlock(t.key, e);
       });
@@ -205,7 +206,7 @@ class re extends dt {
     const t = this.currentNode.getAttribute(W);
     if (t)
       try {
-        return Et(
+        return Lt(
           JSON.parse(t).map((e) => String(e)),
           this.currentNode,
           this.store.filterList
@@ -239,7 +240,7 @@ class re extends dt {
     return t.forEach((r) => {
       if (!("getAttribute" in r))
         return;
-      const i = Lt(r), s = r.getAttribute(D);
+      const i = Ot(r), s = r.getAttribute(D);
       i && s !== null && (e[i] = this._parseVisibilityValue(s));
     }), e;
   }
@@ -252,7 +253,7 @@ class re extends dt {
     }), t;
   }
   _buildVisibilityValues(t) {
-    return [E, ...m].reduce((e, r) => (e[`visibility_${r.key}`] = t[r.key] ?? !0, e), {});
+    return [R, ...m].reduce((e, r) => (e[`visibility_${r.key}`] = t[r.key] ?? !0, e), {});
   }
   // ========================================================================
   // UI Rendering (Orderable List)
@@ -273,12 +274,12 @@ class re extends dt {
     if (!(i.dataset.inlinePrices !== String(s)) && this._tryReorderInPlace(i, t))
       return !1;
     i.dataset.inlinePrices = String(s);
-    const n = new Set(e), l = $t(t);
+    const n = new Set(e), l = vt(t);
     let a = 0, d = 0;
     const c = t.map((u) => {
       if (s && (u === C || u === L))
         return u === l.anchor ? this._createPriceGroupItemHtml(d++, l.originalFirst) : "";
-      if (qt.has(u)) {
+      if (xt.has(u)) {
         const b = m.find((S) => S.key === u);
         return this._createBuiltInItemHtml(b, d++);
       }
@@ -345,7 +346,7 @@ class re extends dt {
     var n, l;
     const r = ((n = m.find((a) => a.key === C)) == null ? void 0 : n.label) ?? "Product Price", i = ((l = m.find((a) => a.key === L)) == null ? void 0 : l.label) ?? "Product Original Price", s = (a, d) => `
             <div class="price-suborderable-item" draggable="true" data-subkey="${a}">
-                <span class="sub-drag-handle">${Mt}</span>
+                <span class="sub-drag-handle">${qt}</span>
                 <span class="item-label">${this.api.translate(d)}</span>
             </div>`, o = e ? s(L, i) + s(C, r) : s(C, r) + s(L, i);
     return `
@@ -615,7 +616,7 @@ class re extends dt {
   // Actions (Add, Delete, Reorder)
   // ========================================================================
   _onAddAttribute(t, e) {
-    const r = U(t), i = this._readCompositionFromNode();
+    const r = M(t), i = this._readCompositionFromNode();
     i.push(r);
     const s = [...this._readCustomAttributesFromNode(), t];
     this._updateBothAttributes(i, s), this._injectCustomAttributeHtml(t, e, r, i), this._renderOrderableItems(i, s), this._initializeCustomSelects(s), this._updateAddButtonState();
@@ -639,7 +640,7 @@ class re extends dt {
     const r = this._readCustomAttributesFromNode(), i = r[t];
     if (i === void 0 || i === e)
       return;
-    const s = U(e), o = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(o, t);
+    const s = M(e), o = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(o, t);
     n !== -1 && (o[n] = s), r[t] = e;
     const l = this._getDisplayNameForAttribute(e);
     this._updateBothAttributes(o, r), this._injectCustomAttributeHtml(e, l, s, o), this._renderOrderableItems(o, r), this._initializeCustomSelects(r);
@@ -650,7 +651,7 @@ class re extends dt {
     try {
       this._updateBothAttributes(t, e);
       const r = !g.getConfig(this.currentNode).priceMovedToNextLine;
-      this._getCurrentLayout() === "grid" && !r ? this._reorderProductAttributes(t) : this.currentNode && wt({
+      this._getCurrentLayout() === "grid" && !r ? this._reorderProductAttributes(t) : this.currentNode && Bt({
         currentNode: this.currentNode,
         documentModifier: this.api.getDocumentModifier()
       });
@@ -668,11 +669,11 @@ class re extends dt {
    * DOM converge on the next composition change without writing on open.
    */
   _getExistingRowHtml(t, e) {
-    const r = Ot(t, e);
+    const r = Dt(t, e);
     if (r && "getOuterHTML" in r)
       return Q(r.getOuterHTML(), e);
     const i = t.querySelector(
-      `${N}[${R}="${e}"]`
+      `${N}[${E}="${e}"]`
     );
     return i && "getOuterHTML" in i ? Q(i.getOuterHTML(), e) : "";
   }
@@ -682,18 +683,18 @@ class re extends dt {
     this._getCurrentLayout() === "grid" ? this._injectGridAttributeRow(t, e, r, i) : this._injectListAttributeRow(t, e, r, i);
   }
   _injectGridAttributeRow(t, e, r, i) {
-    const s = this.currentNode.querySelectorAll(M);
+    const s = this.currentNode.querySelectorAll(U);
     if (!(s != null && s.length))
       return;
     const o = g.getConfig(this.currentNode), l = `0 ${Math.floor(o.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), d = this.store.recommendationProducts.length;
     let c = 0;
     s.forEach((u) => {
       var V;
-      const b = u.querySelector(N), S = ((V = b == null ? void 0 : b.querySelectorAll(`.${ft}`)) == null ? void 0 : V.length) || 1, F = (100 / S).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(S, d - c) : S, it = i.map((j) => {
+      const b = u.querySelector(N), S = ((V = b == null ? void 0 : b.querySelectorAll(`.${bt}`)) == null ? void 0 : V.length) || 1, F = (100 / S).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(S, d - c) : S, it = i.map((j) => {
         if (j === r) {
           const st = Array.from(
             { length: B },
-            (xt, nt) => {
+            (Ft, nt) => {
               const lt = this._resolveAttributeContent(
                 t,
                 e,
@@ -708,8 +709,8 @@ class re extends dt {
                 l
               );
             }
-          ).join(""), ot = Tt(F, l).repeat(S - B);
-          return `<tr class="${G}" ${R}="${r}" ${D}="1">${st}${ot}</tr>`;
+          ).join(""), ot = Ct(F, l).repeat(S - B);
+          return `<tr class="${G}" ${E}="${r}" ${D}="1">${st}${ot}</tr>`;
         }
         return this._getExistingRowHtml(u, j);
       }).join("");
@@ -741,7 +742,7 @@ class re extends dt {
       return;
     const e = this._getCurrentLayout(), r = this.api.getDocumentModifier();
     if (e === "grid") {
-      const i = this.currentNode.querySelectorAll(M);
+      const i = this.currentNode.querySelectorAll(U);
       i == null || i.forEach((s) => {
         const o = this._buildCompositionHtml(s, t);
         r.modifyHtml(s).setInnerHtml(o);
@@ -781,7 +782,7 @@ class re extends dt {
   _reorderProductAttributes(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelectorAll(M);
+    const e = this.currentNode.querySelectorAll(U);
     if (!(e != null && e.length))
       return;
     const r = this.api.getDocumentModifier();
@@ -807,12 +808,12 @@ class re extends dt {
       this._applyTitleVisibilityToBlock(e);
       return;
     }
-    const r = this.currentNode.querySelectorAll(`${N}[${R}="${t}"]`);
+    const r = this.currentNode.querySelectorAll(`${N}[${E}="${t}"]`);
     if (!(r != null && r.length))
       return;
     const i = e ? "1" : "0", s = e ? this.api.translate("visible") : this.api.translate("hidden"), o = `${this.api.translate("Set visibility")}: ${t} → ${s}`, n = this.api.getDocumentModifier();
     r.forEach((a) => {
-      const d = Ht(a), c = e ? d : "none";
+      const d = Pt(a), c = e ? d : "none";
       n.modifyHtml(a).setStyle("display", c).setAttribute(D, i);
     });
     const l = {
@@ -840,7 +841,7 @@ class re extends dt {
     const e = this._findTitleContainerBody(), r = e ? this._readInnerHtml(e) : null;
     if (!e || r === null)
       return null;
-    const i = t.previousTitleHtml || St(this._defaultTitleParagraph(), !0, t.rowSpacing);
+    const i = t.previousTitleHtml || At(this._defaultTitleParagraph(), !0, t.rowSpacing);
     return { containerBody: e, html: i + r };
   }
   _readTitleHtml(t) {
@@ -849,7 +850,7 @@ class re extends dt {
   _findTitleRows() {
     var e;
     const t = Array.from(((e = this.currentNode) == null ? void 0 : e.querySelectorAll(
-      `${N}[${R}="${I}"]`
+      `${N}[${E}="${I}"]`
     )) ?? []);
     return t.length > 0 ? t : this._findTitleRowsByClass();
   }
@@ -861,16 +862,16 @@ class re extends dt {
     return i && this._isSpacerRow(i) ? [e[r], i] : [e[r]];
   }
   _isSpacerRow(t) {
-    return "children" in t && t.children().some((e) => "hasClass" in e && e.hasClass(pt));
+    return "children" in t && t.children().some((e) => "hasClass" in e && e.hasClass(_t));
   }
   _findTitleContainerBody() {
-    return (this.currentNode ? Bt(this.currentNode) : null) ?? void 0;
+    return (this.currentNode ? kt(this.currentNode) : null) ?? void 0;
   }
   _readInnerHtml(t) {
     return "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML().trim() : null;
   }
   _defaultTitleParagraph() {
-    return At.replace("{-{-TITLE-}-}", this.api.translate(It));
+    return It.replace("{-{-TITLE-}-}", this.api.translate($t));
   }
   // ========================================================================
   // Utilities
@@ -891,7 +892,7 @@ class re extends dt {
     return -1;
   }
   _getCurrentLayout() {
-    return this.store.recommendationConfigs.orientation || kt(this.currentNode);
+    return this.store.recommendationConfigs.orientation || Mt(this.currentNode);
   }
   /**
    * Extracts background color properties from existing card elements.
@@ -975,7 +976,7 @@ class re extends dt {
    */
   _getAddableFilters() {
     const t = /* @__PURE__ */ new Set();
-    return Object.values(this.store.filterList).filter((e) => !(e.type === "defaultAttribute" && _t.has(e.attributeName))).filter((e) => {
+    return Object.values(this.store.filterList).filter((e) => !(e.type === "defaultAttribute" && gt.has(e.attributeName))).filter((e) => {
       const r = T(e);
       return t.has(r) ? !1 : (t.add(r), !0);
     });
@@ -987,7 +988,7 @@ class re extends dt {
    */
   _getDisplayNameForAttribute(t) {
     const e = Object.values(this.store.filterList).find((r) => T(r) === t);
-    return e ? e.displayName : vt(H(t));
+    return e ? e.displayName : Nt(H(t));
   }
   /**
    * Resolves the display content for a custom attribute cell.
@@ -995,29 +996,29 @@ class re extends dt {
    */
   _resolveAttributeContent(t, e, r) {
     var l;
-    const s = this.store.recommendationProducts[r], o = H(t), n = Dt(t) ? s == null ? void 0 : s[o] : (l = s == null ? void 0 : s.product_attributes) == null ? void 0 : l[o];
-    return Nt(n) ?? e;
+    const s = this.store.recommendationProducts[r], o = H(t), n = Ht(t) ? s == null ? void 0 : s[o] : (l = s == null ? void 0 : s.product_attributes) == null ? void 0 : l[o];
+    return Et(n) ?? e;
   }
   _getGridCellHtml(t, e, r, i = "", s = "", o = "") {
-    const n = U(t), l = H(t), a = J(bt, [n], this.store.filterList), d = {
+    const n = M(t), l = H(t), a = J(yt, [n], this.store.filterList), d = {
       [l]: e,
       product_attributes: { [l]: e }
     };
     let c = a[n](d);
     return c = c.replace("<td", `<td width="${r}%"`), o && (c = c.replace(
-      `padding: ${yt}`,
+      `padding: ${Tt}`,
       `padding: ${o}`
     )), i && (c = c.replace(/style="table-layout: fixed;"/, `style="table-layout: fixed; ${i}"`)), s && (c = c.replace(/border="0"/, `border="0" bgcolor="${s}"`)), c;
   }
   _getListRowHtml(t, e, r) {
-    const i = H(t), s = J(Ct, [r], this.store.filterList), o = {
+    const i = H(t), s = J(St, [r], this.store.filterList), o = {
       [i]: e,
       product_attributes: { [i]: e }
     }, l = s[r](o).replace(/<tr>/, "").replace(/<\/tr>/, "");
-    return `<tr class="${G}" ${R}="${r}" ${D}="1">${l}</tr>`;
+    return `<tr class="${G}" ${E}="${r}" ${D}="1">${l}</tr>`;
   }
 }
 export {
   Ut as COMPOSITION_CONTROL_BLOCK_ID,
-  re as RecommendationCardCompositionControl
+  se as RecommendationCardCompositionControl
 };