@useinsider/guido 3.23.0-beta.31d0f5f → 3.23.0-beta.9f6bfbf

package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js

@@ -1,18 +1,19 @@
 import { ModificationDescription as C, UIElementType as T, UEAttr as L } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as g } from "../../../common-control.js";
-import { ItemsBlockControlId as R, ItemsBlockId as _ } from "../../enums/controlEnums.js";
+import { ItemsBlockControlId as p, ItemsBlockId as _ } from "../../enums/controlEnums.js";
 import { productPairs as I } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as p, setItemsBlockConfig as D, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
-const O = R.PRICE_FORMATTED_PRICE, d = {
+import { getItemsBlockConfig as m, setItemsBlockConfig as D, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
+import { isNewPriceFormatBlock as O } from "../priceFormat.js";
+const N = p.PRICE_FORMATTED_PRICE, d = {
   FORMATTED_PRICE: "formattedPrice"
 };
-class k extends g {
+class G extends g {
   getId() {
-    return O;
+    return N;
   }
   getTemplate() {
     return `
-            <div class="container ${R.PRICE_FORMATTED_PRICE}">
+            <div class="container ${p.PRICE_FORMATTED_PRICE}">
                 ${this._getFormattedPrice()}
             </div>
         `;
@@ -24,14 +25,14 @@ class k extends g {
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = p(this.currentNode);
+      const t = m(this.currentNode);
       this.api.updateValues({ [d.FORMATTED_PRICE]: (t == null ? void 0 : t.priceFormatted) ?? !0 });
     });
   }
   _onFormattedPriceChange(e) {
-    if (console.debug("Formatted price changed to: ", e), !this.currentNode)
+    if (console.debug("Formatted price changed to: ", e), !this.currentNode || O(this.currentNode))
       return;
-    const t = p(this.currentNode), c = (t == null ? void 0 : t.type) ?? "CART_ITEMS", o = (t == null ? void 0 : t.priceSinglePrice) ?? !1, r = I.PAIRS_FOR_EXTENSION.price[c], i = I.PAIRS_FOR_EXTENSION.originalPrice[c], [a, m] = e ? [
+    const t = m(this.currentNode), n = (t == null ? void 0 : t.type) ?? "CART_ITEMS", o = (t == null ? void 0 : t.priceSinglePrice) ?? !1, r = I.PAIRS_FOR_EXTENSION.price[n], i = I.PAIRS_FOR_EXTENSION.originalPrice[n], [a, R] = e ? [
       o ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE,
       o ? r.DEFAULT_SINGLE_PRICE_FORMATTED : r.DEFAULT_PRICE_FORMATTED
     ] : [
@@ -39,12 +40,12 @@ class k extends g {
       o ? r.DEFAULT_SINGLE_PRICE : r.DEFAULT_PRICE
     ], l = o ? i.DEFAULT_SINGLE_PRICE : i.DEFAULT_PRICE, P = o ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_PRICE_FORMATTED, [F, A] = e ? [l, P] : [P, l], s = this.api.getDocumentModifier();
     D(this.currentNode, this.api, { priceFormatted: e }, s);
-    const n = this.currentNode.closest(".items-block");
-    ((n == null ? void 0 : n.querySelectorAll(
+    const c = this.currentNode.closest(".items-block");
+    ((c == null ? void 0 : c.querySelectorAll(
       `[esd-extension-block-id="${_.PRICE}"]`
     )) || []).forEach((E) => {
-      this._updatePriceBlock(s, E, a, m, e);
-    }), ((n == null ? void 0 : n.querySelectorAll(
+      this._updatePriceBlock(s, E, a, R, e);
+    }), ((c == null ? void 0 : c.querySelectorAll(
       `[esd-extension-block-id="${_.ORIGINAL_PRICE}"]`
     )) || []).forEach((E) => {
       this._updatePriceBlock(s, E, F, A, e);
@@ -52,8 +53,8 @@ class k extends g {
       `Updated price to ${e ? "formatted" : "unformatted"}`
     ));
   }
-  _updatePriceBlock(e, t, c, o, r) {
-    const i = `data-formated="${r ? "true" : "false"}"`, a = t.getInnerHTML().trim().replace(c, h(o)).replace(/data-formated=(?:"[^"]*"|'[^']*')/g, i);
+  _updatePriceBlock(e, t, n, o, r) {
+    const i = `data-formated="${r ? "true" : "false"}"`, a = t.getInnerHTML().trim().replace(n, h(o)).replace(/data-formated=(?:"[^"]*"|'[^']*')/g, i);
     e.modifyHtml(t).setInnerHtml(a);
   }
   _getFormattedPrice() {
@@ -69,6 +70,6 @@ class k extends g {
   }
 }
 export {
-  O as CONTROL_BLOCK_ID,
-  k as PriceFormattedPriceControl
+  N as CONTROL_BLOCK_ID,
+  G as PriceFormattedPriceControl
 };

package/dist/extensions/Blocks/Items/controls/price/singlePrice.js

@@ -1,74 +1,85 @@
-import { ModificationDescription as S, UIElementType as _, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as A } from "../../../common-control.js";
-import { ItemsBlockControlId as T, ItemsBlockId as d } from "../../enums/controlEnums.js";
-import { productPairs as p } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as g, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
-const u = T.PRICE_SINGLE_PRICE, a = {
+import { ModificationDescription as S, UIElementType as _, UEAttr as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
+import { ItemsBlockControlId as L, ItemsBlockId as g } from "../../enums/controlEnums.js";
+import { productPairs as T } from "../../enums/productEnums.js";
+import { getItemsBlockConfig as a, setItemsBlockConfig as A, escapeReplacement as F } from "../../utils/nodeConfigUtils.js";
+import { isNewPriceFormatBlock as u, applyPriceFormatChange as D } from "../priceFormat.js";
+const f = L.PRICE_SINGLE_PRICE, P = {
   SINGLE_PRICE: "singlePrice"
 };
-class k extends A {
+class x extends N {
   getId() {
-    return u;
+    return f;
   }
   getTemplate() {
     return `
-            <div class="container ${T.PRICE_SINGLE_PRICE}">
+            <div class="container ${L.PRICE_SINGLE_PRICE}">
                 ${this._getSinglePrice()}
             </div>
         `;
   }
   onRender() {
-    this.forgetLastPanelNode(), this.api.onValueChanged(a.SINGLE_PRICE, (e) => {
+    this.forgetLastPanelNode(), this.api.onValueChanged(P.SINGLE_PRICE, (e) => {
       this._onSinglePriceChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = g(this.currentNode);
-      this.api.updateValues({ [a.SINGLE_PRICE]: (t == null ? void 0 : t.priceSinglePrice) ?? !1 });
+      const i = a(this.currentNode);
+      this.api.updateValues({ [P.SINGLE_PRICE]: (i == null ? void 0 : i.priceSinglePrice) ?? !1 });
     });
   }
   _onSinglePriceChange(e) {
-    if (console.debug("Single price changed to: ", e), !this.currentNode)
+    var I;
+    if (console.debug("Single price changed to: ", e), u(this.currentNode)) {
+      ((I = a(this.currentNode)) == null ? void 0 : I.priceSinglePrice) !== e && D(
+        this.currentNode,
+        this.api,
+        { priceSinglePrice: e },
+        `Updated price to ${e ? "single" : "total"} price`
+      );
       return;
-    const t = g(this.currentNode), c = (t == null ? void 0 : t.type) ?? "CART_ITEMS", r = (t == null ? void 0 : t.priceFormatted) ?? !1, i = p.PAIRS_FOR_EXTENSION.price[c], n = p.PAIRS_FOR_EXTENSION.originalPrice[c], [l, L] = e ? [
-      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE,
-      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE
+    }
+    if (!this.currentNode)
+      return;
+    const i = a(this.currentNode), c = (i == null ? void 0 : i.type) ?? "CART_ITEMS", r = (i == null ? void 0 : i.priceFormatted) ?? !1, t = T.PAIRS_FOR_EXTENSION.price[c], n = T.PAIRS_FOR_EXTENSION.originalPrice[c], [l, R] = e ? [
+      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE,
+      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE
     ] : [
-      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE,
-      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE
-    ], I = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, P = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [R, C] = e ? [I, P] : [P, I], s = this.api.getDocumentModifier();
-    N(this.currentNode, this.api, { priceSinglePrice: e }, s);
+      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE,
+      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE
+    ], p = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, d = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [C, m] = e ? [p, d] : [d, p], s = this.api.getDocumentModifier();
+    A(this.currentNode, this.api, { priceSinglePrice: e }, s);
     const o = this.currentNode.closest(".items-block");
     ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${d.PRICE}"]`
+      `[esd-extension-block-id="${g.PRICE}"]`
     )) || []).forEach((E) => {
-      this._updatePriceBlock(s, E, l, L, e);
+      this._updatePriceBlock(s, E, l, R, e);
     }), ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${d.ORIGINAL_PRICE}"]`
+      `[esd-extension-block-id="${g.ORIGINAL_PRICE}"]`
     )) || []).forEach((E) => {
-      this._updatePriceBlock(s, E, R, C, e);
+      this._updatePriceBlock(s, E, C, m, e);
     }), s.apply(new S(
       `Updated price to ${e ? "single" : "total"} price`
     ));
   }
-  _updatePriceBlock(e, t, c, r, i) {
-    const n = `data-single_price="${i ? "true" : "false"}"`, l = t.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
-    e.modifyHtml(t).setInnerHtml(l);
+  _updatePriceBlock(e, i, c, r, t) {
+    const n = `data-single_price="${t ? "true" : "false"}"`, l = i.getInnerHTML().trim().replace(c, F(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
+    e.modifyHtml(i).setInnerHtml(l);
   }
   _getSinglePrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
                 <${_.LABEL}
-                    ${m.LABEL.text}="${this.api.translate("Show Single Product Price")}"
+                    ${h.LABEL.text}="${this.api.translate("Show Single Product Price")}"
                 >
                 </${_.LABEL}>
-                ${this._GuToggle(a.SINGLE_PRICE)}
+                ${this._GuToggle(P.SINGLE_PRICE)}
             </div>
         `;
   }
 }
 export {
-  u as CONTROL_BLOCK_ID,
-  k as PriceSinglePriceControl
+  f as CONTROL_BLOCK_ID,
+  x as PriceSinglePriceControl
 };

package/dist/extensions/Blocks/Items/controls/priceFormat.js

@@ -0,0 +1,145 @@
+var f = Object.defineProperty;
+var P = (o, i, t) => i in o ? f(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var E = (o, i, t) => P(o, typeof i != "symbol" ? i + "" : i, t);
+import { currencyOperators as m, currencyDecimalCounts as _ } from "../../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as d, ModificationDescription as L } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../common-control.js";
+import { priceFormatFromConfig as T, normalizeDecimalCount as U, isNewPriceFormatRoot as M } from "../constants/currency.js";
+import { ItemsBlockControlId as I, ItemsBlockId as R } from "../enums/controlEnums.js";
+import { getItemsBlockConfig as h, getItemsBlockContainer as g, setItemsBlockConfig as F } from "../utils/nodeConfigUtils.js";
+import { planPriceFormatOps as w, buildPriceFormatSnapshot as b, priceTextsFromConfig as x, samePriceText as y, replacePriceText as k } from "../utils/priceFormatOps.js";
+const B = I.PRICE_FORMAT, a = {
+  THOUSAND_SEPARATOR: "priceThousandSeparator",
+  DECIMAL_SEPARATOR: "priceDecimalSeparator",
+  DECIMAL_COUNT: "priceDecimalCount"
+}, H = [
+  ["price", R.PRICE],
+  ["originalPrice", R.ORIGINAL_PRICE]
+];
+function V(o) {
+  return H.flatMap(([i, t]) => o.querySelectorAll(
+    `[esd-extension-block-id="${t}"]`
+  ).flatMap((r) => {
+    const c = r.querySelector("p");
+    return c ? [{ kind: i, paragraph: c }] : [];
+  }));
+}
+function Q(o) {
+  return M(g(o));
+}
+function K(o, i, t, e) {
+  const r = g(o);
+  if (!r)
+    return;
+  const c = { ...h(o), ...t }, C = V(r), p = w(b({
+    rootAttr: (n) => r.getAttribute(n),
+    config: c,
+    paragraphs: C.map(({ kind: n, paragraph: s }) => ({
+      kind: n,
+      attr: (u) => s.getAttribute(u),
+      text: s.getInnerText()
+    }))
+  }), { convertLegacy: !0 }), S = p.texts ?? x(c), l = i.getDocumentModifier();
+  F(o, i, { ...t, ...p.configPatch }, l);
+  const D = l.modifyHtml(r);
+  Object.entries(p.rootSet).forEach(([n, s]) => {
+    D.setAttribute(n, s);
+  }), C.forEach(({ kind: n, paragraph: s }) => {
+    const u = l.modifyHtml(s), A = s.getInnerText().trim();
+    p.paragraphRemove.forEach((O) => {
+      u.removeAttribute(O);
+    }), y(A, S[n]) || u.setInnerHtml(k(s.getInnerHTML(), A, S[n]));
+  }), l.apply(new L(e));
+}
+class X extends N {
+  constructor() {
+    super(...arguments);
+    // The format of the last write, until Stripo hands back the updated node: guards the echo
+    // of the select this control itself repaints on an auto-swap.
+    E(this, "lastWritten", null);
+  }
+  getId() {
+    return B;
+  }
+  getTemplate() {
+    return `
+            <div class="${I.PRICE_FORMAT}">
+                ${this._getSelectRow("Thousand Separator", a.THOUSAND_SEPARATOR, m)}
+                ${this._getSelectRow("Decimal Separator", a.DECIMAL_SEPARATOR, m)}
+                ${this._getSelectRow("Decimal Count", a.DECIMAL_COUNT, _)}
+            </div>
+        `;
+  }
+  onRender() {
+    this.forgetLastPanelNode(), this.api.setUIEAttribute(a.THOUSAND_SEPARATOR, d.SELECTPICKER.items, m), this.api.setUIEAttribute(a.DECIMAL_SEPARATOR, d.SELECTPICKER.items, m), this.api.setUIEAttribute(a.DECIMAL_COUNT, d.SELECTPICKER.items, _), this.api.onValueChanged(a.THOUSAND_SEPARATOR, (t) => {
+      this._onThousandSeparatorChange(t);
+    }), this.api.onValueChanged(a.DECIMAL_SEPARATOR, (t) => {
+      this._onDecimalSeparatorChange(t);
+    }), this.api.onValueChanged(a.DECIMAL_COUNT, (t) => {
+      this._onDecimalCountChange(t);
+    });
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this.lastWritten = null, this.handleBlockInstanceChange(() => {
+      this.api.updateValues(this._formValues(T(h(this.currentNode))));
+    });
+  }
+  onDestroy() {
+    super.onDestroy(), this.lastWritten = null;
+  }
+  _onThousandSeparatorChange(t) {
+    const e = this._currentFormat();
+    if (t === e.thousandSeparator)
+      return;
+    const r = t === e.decimalSeparator;
+    this._write({
+      ...e,
+      thousandSeparator: t,
+      decimalSeparator: r ? e.thousandSeparator : e.decimalSeparator
+    }, "Updated price thousand separator"), r && this.api.updateValues({ [a.DECIMAL_SEPARATOR]: e.thousandSeparator });
+  }
+  _onDecimalSeparatorChange(t) {
+    const e = this._currentFormat();
+    if (t === e.decimalSeparator)
+      return;
+    const r = t === e.thousandSeparator;
+    this._write({
+      ...e,
+      decimalSeparator: t,
+      thousandSeparator: r ? e.decimalSeparator : e.thousandSeparator
+    }, "Updated price decimal separator"), r && this.api.updateValues({ [a.THOUSAND_SEPARATOR]: e.decimalSeparator });
+  }
+  _onDecimalCountChange(t) {
+    const e = this._currentFormat(), r = U(t);
+    r !== e.decimalCount && this._write({ ...e, decimalCount: r }, "Updated price decimal count");
+  }
+  _currentFormat() {
+    return this.lastWritten ?? T(h(this.currentNode));
+  }
+  _write(t, e) {
+    this.lastWritten = t, K(this.currentNode, this.api, {
+      priceThousandSeparator: t.thousandSeparator,
+      priceDecimalSeparator: t.decimalSeparator,
+      priceDecimalCount: t.decimalCount
+    }, e);
+  }
+  _formValues(t) {
+    return {
+      [a.THOUSAND_SEPARATOR]: t.thousandSeparator,
+      [a.DECIMAL_SEPARATOR]: t.decimalSeparator,
+      [a.DECIMAL_COUNT]: String(t.decimalCount)
+    };
+  }
+  _getSelectRow(t, e, r) {
+    return this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate(t) }),
+      this._GuSelect({ name: e, placeholder: "", options: r })
+    ], "no-separator");
+  }
+}
+export {
+  B as CONTROL_BLOCK_ID,
+  X as ItemsBlockPriceFormatControl,
+  K as applyPriceFormatChange,
+  Q as isNewPriceFormatBlock
+};