@useinsider/guido 1.0.3-beta.5361682 → 1.0.3-beta.538b804

package/README.md

@@ -787,35 +787,3 @@ ISC License
 - Playwright integrationBoilerplate/control.ts
 - Commitlint & Precommit Hooks integration
 - Get Pre-built display conditions from API
-
-Recommendation Block:
-- [ ] Validations for Filters
-- [ ] DOM Rerender after Filters change
-- [ ] Change currencySymbol as Input Type
-- [ ] Apply filter query to request
-- [ ] Drawer loading bug
-- [ ] Drawer send request when apply filters
-- [ ] Clear all feature for Drawer
-- [ ] Stripo's controls should be effect specific DOM item -- Try extending CommonControl class
-- [ ] Show toaster message if uses multiple recommendation blocks in same template
-- [ ] Change filter button text as Change Filters
-- [ ] Migration template for Recommendation Block
-- [ ] Recommendation Algorithm default value should be mostPopular
-- [ ] Default fields for empty template like currency, title etc.
-- [ ] Recommendation Block Icon Registry should be updated
-- [ ] AMP Block Icon should be updated
-- [ ] Padding feature for between Product Rows
-
-Items Block Phase 2:
-[ ] Writing configs to esd-config-data DOM.
-[ ] Build on save feature should be working
-[ ] Data Migration feature should be working
-
-Tech Debts: 
-[ ] Merge Custom Blocks into a single File
-[ ] Move Custom Blocks names to an enum file
-[ ] Template Replacement should be optimized for version history
-[ ] Code Optimization for Items Block inner blocks reordering
-[ ] Image Size & Margins controls has an error on console
-[ ] Feed Text Trimming feature to toggle settings
-[ ] Formatted Price feature to toggle settings

package/dist/composables/useActionsApi.js

@@ -17,7 +17,7 @@ const A = () => {
         ]
       },
       mergeTags: ["Tag1", "Tag2"],
-      forseAmp: !1,
+      forceAmp: !1,
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
     }, ...t }, m = {

package/dist/composables/useHtmlValidator.js

@@ -1,18 +1,19 @@
-import { useConfig as H } from "./useConfig.js";
-import { TemplateTypes as V } from "../enums/defaults.js";
-import { DISPLAY_CONDITIONS_REGEX as D, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as P, CampaignCouldNotBeSavedKey as R, CanNotMakeAnyChangesForRunningKey as _ } from "../enums/html-validator.js";
+import { useConfig as V } from "./useConfig.js";
+import { TemplateTypes as D } from "../enums/defaults.js";
+import { DISPLAY_CONDITIONS_REGEX as H, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as P, CampaignCouldNotBeSavedKey as R, CanNotMakeAnyChangesForRunningKey as _ } from "../enums/html-validator.js";
 import { ToasterTypeOptions as l } from "../enums/toaster.js";
-import { useRecommendationStore as G } from "../stores/recommendation.js";
-import { base64EncodeWithSpecialChars as $ } from "../utils/base64.js";
-import { useHttp as j } from "./useHttp.js";
-import { useToaster as q } from "./useToaster.js";
-import { useTranslations as M } from "./useTranslations.js";
-const se = () => {
+import { itemsBlockDynamicVariables as G } from "../extensions/Blocks/Items/enums/productEnums.js";
+import { useRecommendationStore as $ } from "../stores/recommendation.js";
+import { base64EncodeWithSpecialChars as j } from "../utils/base64.js";
+import { useHttp as q } from "./useHttp.js";
+import { useToaster as M } from "./useToaster.js";
+import { useTranslations as X } from "./useTranslations.js";
+const ie = () => {
   var d;
-  const { showToaster: c } = q(), { post: y } = j(), { config: h } = H(), a = M(), m = G(), u = ((d = h.partner) == null ? void 0 : d.messageType) === V.transactional, v = async (e) => {
+  const { showToaster: c } = M(), { post: y } = q(), { config: h } = V(), a = X(), m = $(), u = ((d = h.partner) == null ? void 0 : d.messageType) === D.transactional, v = async (e) => {
     const t = await y(
       "/newsletter/template-library/check-template-html-body",
-      { html: $(e) }
+      { html: j(e) }
     ), { status: n, message: r } = t.data;
     return n || c({
       type: l.Alert,
@@ -25,10 +26,10 @@ const se = () => {
     const t = e.match(/({%(.*?)%})/g);
     let n = !0;
     return t !== null && !u && t.forEach((r) => {
-      const o = r.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
-      if (o && o.length > 0) {
-        const [i] = o;
-        C(i) && !s.includes(i) && (c({
+      const i = r.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
+      if (i && i.length > 0) {
+        const [o] = i;
+        C(o) && !s.includes(o) && (c({
           type: l.Warning,
           message: a("custom-fields.invalid-custom-fields")
         }), n = !1);
@@ -58,19 +59,19 @@ const se = () => {
   }, k = (e, s) => {
     const t = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
     if (t && !u) {
-      const n = new Set(s.map((o) => o.toLowerCase())), r = [];
-      if (t.forEach((o) => {
-        const i = o.slice(2, -2).trim().toLowerCase();
-        (!n.has(i) || i === "") && r.push(i);
+      const n = new Set(s.map((i) => i.toLowerCase())), r = [];
+      if (t.forEach((i) => {
+        const o = i.slice(2, -2).trim().toLowerCase();
+        (!n.has(o) || o === "") && r.push(o);
       }), r.length > 0) {
-        const o = `
+        const i = `
                     <ul>
-                        ${r.map((i) => `<li>${i}</li>`).join("")}
+                        ${r.map((o) => `<li>${o}</li>`).join("")}
                     </ul>
                 `;
         return c({
           type: l.Alert,
-          message: a("custom-fields.invalid-custom-fields") + o
+          message: a("custom-fields.invalid-custom-fields") + i
         }), !1;
       }
     }
@@ -79,11 +80,11 @@ const se = () => {
     const s = e.match(/{%(.*?)%}/g), t = [];
     let n = !0;
     if (s && s.forEach((r) => {
-      const o = r.match(D), i = r.match(P), B = (o == null ? void 0 : o.join("")) || "";
-      (!o || r !== B) && !i && (c({
+      const i = r.match(H), o = r.match(P), B = (i == null ? void 0 : i.join("")) || "";
+      (!i || r !== B) && !o && (c({
         type: l.Alert,
         message: a("newsletter.display-conditions-invalid-syntax")
-      }), n = !1), o && o.forEach((f) => {
+      }), n = !1), i && i.forEach((f) => {
         f.trim() === "=" && (c({
           type: l.Alert,
           message: a("custom-conditions.wrong-equality-operators")
@@ -94,8 +95,8 @@ const se = () => {
         });
       });
     }), t.length) {
-      const r = t.filter((i) => i === "if"), o = t.filter((i) => i === "endif");
-      r.length !== o.length && (c({
+      const r = t.filter((o) => o === "if"), i = t.filter((o) => o === "endif");
+      r.length !== i.length && (c({
         type: l.Alert,
         message: a("custom-conditions.missing-if-endif-tag")
       }), n = !1);
@@ -121,28 +122,28 @@ const se = () => {
     }), !1);
   }, N = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".checkbox-block-v2");
-    return Array.from(n).find((o) => {
-      var i;
-      return !((i = o.id) != null && i.trim());
+    return Array.from(n).find((i) => {
+      var o;
+      return !((o = i.id) != null && o.trim());
     }) ? (c({
       type: l.Alert,
       message: a("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
   }, O = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
-    return Array.from(n).find((o) => {
-      var i;
-      return !((i = o.id) != null && i.trim());
+    return Array.from(n).find((i) => {
+      var o;
+      return !((o = i.id) != null && o.trim());
     }) ? (c({
       type: l.Alert,
       message: a("unsubscribe-templates.select-radio-button-groups")
     }), !1) : !0;
   };
   return { validateHtml: async (e, s, t = !1) => {
-    const n = s.map((o) => o.value);
+    const n = [...s.map((i) => i.value), ...G];
     return await b(e, n, t) && E(e) && A(e) && x(e) && k(e, n) && T(e) && F(e) && I(e) && W() && L(e) && N(e) && O(e);
   } };
 };
 export {
-  se as useHtmlValidator
+  ie as useHtmlValidator
 };

package/dist/enums/unsubscribe.js

@@ -1,25 +1,26 @@
-import { useTranslations as e } from "../composables/useTranslations.js";
-const s = e(), R = {
+import { useTranslations as n } from "../composables/useTranslations.js";
+import { getEnvironmentPrefix as R } from "../utils/environmentUtil.js";
+const e = n(), I = {
   UNSUBSCRIBE_LINK_TYPE: 1,
   PREFERENCES_LINK_TYPE: 3
-}, S = {
+}, r = {
   UNSUBSCRIBE_LINK_REGEX: /{{ins-unsubscribe-link}}/g,
   DATA_OGSB_BUTTON_CSS_REGEX: "\\[data-ogsb\\]\\s*\\.es-button\\.es-button-[0-9]+\\s*\\{(?:[^\\}]*)\\}",
   GLOBAL_UNSUBSCRIBE_LINK_REGEX: /{{ins-global-unsubscribe-link}}/g,
   PREFERENCES_UNSUBSCRIBE_LINK_REGEX: /{{ins-preferences-unsubscribe-link}}/g
-}, N = {
-  UNSUBSCRIBE_URL: "https://mail.useinsider.com/user/v1/unsub",
-  PREFERENCES_URL: "https://mail.useinsider.com/user/v1/prefs"
-}, I = "iid", _ = {
+}, s = R(), _ = {
+  UNSUBSCRIBE_URL: `https://mail.${s}.com/user/v1/unsub`,
+  PREFERENCES_URL: `https://mail.${s}.com/user/v1/prefs`
+}, i = "iid", B = {
   name: "Global Unsubscribe",
   sendGridId: "G"
-}, i = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", r = "/email/unsubscribe-pages", E = {
+}, C = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", c = "/email/unsubscribe-pages", E = {
   GLOBAL_UNSUBSCRIBE: 1,
   GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE: 2,
   SUBSCRIPTION_PREFERENCE_CENTER: 3,
   SUBSCRIPTION_PREFERENCE_CONFIRMATION: 4,
   RESUBSCRIBE: 5
-}, B = {
+}, t = {
   [E.GLOBAL_UNSUBSCRIBE]: [
     E.GLOBAL_UNSUBSCRIBE,
     E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE,
@@ -29,27 +30,27 @@ const s = e(), R = {
     E.SUBSCRIPTION_PREFERENCE_CENTER,
     E.SUBSCRIPTION_PREFERENCE_CONFIRMATION
   ]
-}, C = {
-  [E.GLOBAL_UNSUBSCRIBE]: s("unsubscription-preference.type-global-unsubscribe"),
-  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: s("unsubscription-preference.type-global-unsubscription-confirmation"),
-  [E.RESUBSCRIBE]: s("unsubscription-preference.type-resubscribe"),
-  [E.SUBSCRIPTION_PREFERENCE_CENTER]: s("unsubscription-preference.type-subscription-preferences-center"),
-  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: s("unsubscription-preference.type-subscription-preferences-confirmation")
-}, c = {
+}, U = {
+  [E.GLOBAL_UNSUBSCRIBE]: e("unsubscription-preference.type-global-unsubscribe"),
+  [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: e("unsubscription-preference.type-global-unsubscription-confirmation"),
+  [E.RESUBSCRIBE]: e("unsubscription-preference.type-resubscribe"),
+  [E.SUBSCRIPTION_PREFERENCE_CENTER]: e("unsubscription-preference.type-subscription-preferences-center"),
+  [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: e("unsubscription-preference.type-subscription-preferences-confirmation")
+}, o = {
   default: "{{ins-unsubscribe-link}}",
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
 export {
-  i as ACADEMY_LINK,
-  _ as DEFAULT_UNSUBSCRIBE_GROUP,
-  I as INSIDER_ID,
-  S as LINK_REGEXES,
-  R as LINK_TYPES,
-  c as MERGE_TAGS,
+  C as ACADEMY_LINK,
+  B as DEFAULT_UNSUBSCRIBE_GROUP,
+  i as INSIDER_ID,
+  r as LINK_REGEXES,
+  I as LINK_TYPES,
+  o as MERGE_TAGS,
   E as PAGE_TYPES,
-  B as TYPE_COLLECTIONS,
-  C as TYPE_TRANSLATIONS,
-  r as UNSUBSCRIBE_PAGES_LINK,
-  N as URLS
+  t as TYPE_COLLECTIONS,
+  U as TYPE_TRANSLATIONS,
+  c as UNSUBSCRIBE_PAGES_LINK,
+  _ as URLS
 };

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

@@ -1,19 +1,20 @@
-import { useOnboardingStore as L } from "../../../stores/onboarding.js";
-import { Block as S, BlockCompositionType as y, ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { useOnboardingStore as y } from "../../../stores/onboarding.js";
+import { Block as R, BlockCompositionType as L, ModificationDescription as a } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { configAttributes as t } from "./enums/productEnums.js";
 import { DefaultConfigValues as e, SETTINGS_ENUMS as l } from "./enums/settingsEnums.js";
-import { useItemsBlockStore as I } from "./store/items-block.js";
+import { useItemsBlockStore as S } from "./store/items-block.js";
 import { getDefaultTemplate as V } from "./template.js";
-const B = "items-block";
-class z extends S {
+import { syncCurrencySymbolFromAttributes as B, syncCurrencyLocationFromAttributes as U, syncFormattedPriceFromAttributes as k } from "./utils/syncAttributesFromConfigBlock.js";
+const M = "items-block";
+class x extends R {
   getId() {
-    return B;
+    return M;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return y.CONTAINER;
+    return L.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -22,46 +23,45 @@ class z extends S {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getTemplate() {
-    const i = I();
     return V({
       orientation: l.ORIENTATION.HORIZONTAL,
       itemsType: l.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: i.currencySymbol,
-      currencyLocation: i.currencyLocation,
-      formattedPrice: i.formattedPrice
+      currencySymbol: e.productPriceCurrencySymbolControlValue,
+      currencyLocation: e.productPriceCurrencyLocationControlValue,
+      formattedPrice: e.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
     return !1;
   }
-  onCreated(i) {
-    const n = i.querySelector("esd-config-block");
+  onCreated(r) {
+    const n = r.querySelector("esd-config-block");
     if (!n)
       return;
-    const o = n, s = o.getAttribute("data-initialized") || "0", a = o.getAttribute(t.BLOCK_INSTANCE_ID), c = () => String(Date.now() + Math.floor(Math.random() * 1e3));
+    const o = n, s = o.getAttribute("data-initialized") || "0", u = o.getAttribute(t.BLOCK_INSTANCE_ID), c = () => String(Date.now() + Math.floor(Math.random() * 1e3));
     if (Number(s)) {
-      if (!a) {
-        const r = c();
-        this.api.getDocumentModifier().modifyHtml(o).setAttribute(t.BLOCK_INSTANCE_ID, r).apply(new u("Assign block instance ID to legacy block"));
+      if (!u) {
+        const i = c();
+        this.api.getDocumentModifier().modifyHtml(o).setAttribute(t.BLOCK_INSTANCE_ID, i).apply(new a("Assign block instance ID to legacy block"));
       }
     } else {
-      const r = e.itemsType, d = e.cartItemsSelectControlValue, m = e.cardOrientationControlValue, T = e.productNameTrimmingControlValue, C = e.productPriceHideDiscountControlValue, b = e.productPriceFormattedControlValue, E = e.productPriceCurrencySymbolControlValue, O = e.productPriceCurrencyLocationControlValue, A = e.productButtonLinkControlValue, _ = e.productImageLinkControlValue, N = e.productImageVisible, p = e.productNameVisible, f = e.productQuantityVisible, g = e.productPriceVisible, D = e.productOriginalPriceVisible, R = e.productButtonVisible, P = c();
-      this.api.getDocumentModifier().modifyHtml(o).setAttribute("data-source", r).setAttribute(t.TYPE, r).setAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE, d).setAttribute(t.ORIENTATION, m).setAttribute(t.PRODUCT_NAME_TRIMMING, T).setAttribute(t.PRODUCT_PRICE_HIDE_DISCOUNT, C).setAttribute(t.PRODUCT_PRICE_FORMATTED, b).setAttribute(t.PRODUCT_PRICE_CURRENCY_SYMBOL, E).setAttribute(t.PRODUCT_PRICE_CURRENCY_LOCATION, O).setAttribute(t.PRODUCT_BUTTON_LINK, A).setAttribute(t.PRODUCT_IMAGE_LINK, _).setAttribute(t.BLOCK_INSTANCE_ID, P).setAttribute("data-initialized", "1").setAttribute(t.NAME_CONTROL_ENABLED, e.productNameControlEnabled).setAttribute(
+      const i = e.itemsType, I = e.cartItemsSelectControlValue, d = e.cardOrientationControlValue, m = e.productNameTrimmingControlValue, C = e.productPriceHideDiscountControlValue, b = e.productPriceFormattedControlValue, T = e.productPriceCurrencySymbolControlValue, A = e.productPriceCurrencyLocationControlValue, E = e.productButtonLinkControlValue, O = e.productImageLinkControlValue, _ = e.productImageVisible, p = e.productNameVisible, N = e.productQuantityVisible, f = e.productPriceVisible, g = e.productOriginalPriceVisible, D = e.productButtonVisible, P = c();
+      this.api.getDocumentModifier().modifyHtml(o).setAttribute("data-source", i).setAttribute(t.TYPE, i).setAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE, I).setAttribute(t.ORIENTATION, d).setAttribute(t.PRODUCT_NAME_TRIMMING, m).setAttribute(t.PRODUCT_PRICE_HIDE_DISCOUNT, C).setAttribute(t.PRODUCT_PRICE_FORMATTED, b).setAttribute(t.PRODUCT_PRICE_CURRENCY_SYMBOL, T).setAttribute(t.PRODUCT_PRICE_CURRENCY_LOCATION, A).setAttribute(t.PRODUCT_BUTTON_LINK, E).setAttribute(t.PRODUCT_IMAGE_LINK, O).setAttribute(t.BLOCK_INSTANCE_ID, P).setAttribute("data-initialized", "1").setAttribute(t.NAME_CONTROL_ENABLED, e.productNameControlEnabled).setAttribute(
         t.QUANTITY_CONTROL_ENABLED,
         e.productQuantityControlEnabled
-      ).setAttribute(t.PRICE_CONTROL_OPENED, e.productPriceControlOpened).setAttribute(t.PRODUCT_IMAGE_VISIBLE, N).setAttribute(t.PRODUCT_NAME_VISIBLE, p).setAttribute(t.PRODUCT_QUANTITY_VISIBLE, f).setAttribute(t.PRODUCT_PRICE_VISIBLE, g).setAttribute(t.PRODUCT_ORIGINAL_PRICE_VISIBLE, D).setAttribute(t.PRODUCT_BUTTON_VISIBLE, R).apply(new u("Initialize config block attributes with defaults")), L().startOnboarding("itemsOnboarding");
+      ).setAttribute(t.PRICE_CONTROL_OPENED, e.productPriceControlOpened).setAttribute(t.PRODUCT_IMAGE_VISIBLE, _).setAttribute(t.PRODUCT_NAME_VISIBLE, p).setAttribute(t.PRODUCT_QUANTITY_VISIBLE, N).setAttribute(t.PRODUCT_PRICE_VISIBLE, f).setAttribute(t.PRODUCT_ORIGINAL_PRICE_VISIBLE, g).setAttribute(t.PRODUCT_BUTTON_VISIBLE, D).apply(new a("Initialize config block attributes with defaults")), y().startOnboarding("itemsOnboarding");
     }
   }
-  onSelect(i) {
-    const n = i.querySelector("esd-config-block"), o = I();
+  onSelect(r) {
+    const n = r.querySelector("esd-config-block"), o = S();
     if (!n)
       return;
-    const s = n, a = s.getAttribute(t.TYPE) || e.itemsType, c = s.getAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE) || e.cartItemsSelectControlValue, r = s.getAttribute(t.ORIENTATION) || e.cardOrientationControlValue;
-    o.setItemsType(a), o.setItemIds(c), o.setOrientation(r);
+    const s = n, u = s.getAttribute(t.TYPE) || e.itemsType, c = s.getAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE) || e.cartItemsSelectControlValue, i = s.getAttribute(t.ORIENTATION) || e.cardOrientationControlValue;
+    o.setItemsType(u), o.setItemIds(c), o.setOrientation(i), B(r), U(r), k(r);
   }
 }
 export {
-  B as BLOCK_ID,
-  z as ItemsBlock
+  M as BLOCK_ID,
+  x as ItemsBlock
 };

package/dist/extensions/Blocks/Items/controls/name/trimming.js

@@ -48,7 +48,7 @@ class R extends c {
     if (!o)
       return;
     const p = e !== void 0 ? e : this.store.nameTrimming, T = this.store.orientation === I.ORIENTATION.VERTICAL;
-    p ? this.api.getDocumentModifier().modifyHtml(o).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", T ? "130px" : "100%").apply(new n("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(o).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").apply(new n("Text Trimming Disabled"));
+    p ? this.api.getDocumentModifier().modifyHtml(o).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", T ? "130px" : "600px").apply(new n("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(o).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").apply(new n("Text Trimming Disabled"));
   }
   _getTextTrimming() {
     return `

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

@@ -1,28 +1,29 @@
-var A = Object.defineProperty;
-var M = (T, u, e) => u in T ? A(T, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[u] = e;
-var b = (T, u, e) => M(T, typeof u != "symbol" ? u + "" : u, e);
+var M = Object.defineProperty;
+var P = (T, u, e) => u in T ? M(T, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[u] = e;
+var b = (T, u, e) => P(T, typeof u != "symbol" ? u + "" : u, e);
 import { UEAttr as C, ModificationDescription as d } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as P } from "../../common-control.js";
+import { CommonControl as D } from "../../common-control.js";
 import { ItemsBlockId as m } from "../enums/controlEnums.js";
-import { productPairs as p } from "../enums/productEnums.js";
-import { ItemTypeOptions as R, OrientationOptions as D, ItemInCartOptions as y, SETTINGS_ENUMS as S } from "../enums/settingsEnums.js";
-import x from "../layouts/horizontal.html.js";
-import L from "../layouts/vertical.html.js";
-import { useItemsBlockStore as H } from "../store/items-block.js";
-import { getDefaultTemplate as U } from "../template.js";
+import { productPairs as p, templateFirstLine as A } from "../enums/productEnums.js";
+import { ItemTypeOptions as R, OrientationOptions as x, ItemInCartOptions as g, SETTINGS_ENUMS as S } from "../enums/settingsEnums.js";
+import L from "../layouts/horizontal.html.js";
+import H from "../layouts/vertical.html.js";
+import { useItemsBlockStore as U } from "../store/items-block.js";
+import { getDefaultTemplate as F } from "../template.js";
+import { syncCurrencySymbolFromAttributes as $, syncCurrencyLocationFromAttributes as k, syncFormattedPriceFromAttributes as q } from "../utils/syncAttributesFromConfigBlock.js";
 import { updateConfigBlockAttributes as f } from "../utils/updateAttributes.js";
-const $ = "ui-elements-items-block", s = {
+const w = "ui-elements-items-block", s = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
 };
-class W extends P {
+class Z extends D {
   constructor() {
     super(...arguments);
-    b(this, "store", H());
+    b(this, "store", U());
   }
   getId() {
-    return $;
+    return w;
   }
   getTemplate() {
     return `
@@ -41,11 +42,18 @@ class W extends P {
     }), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(e) {
-    this.currentNode = e, this.api.updateValues({
-      [s.ORIENTATION]: this.store.orientation,
-      [s.ITEMS_TYPE]: this.store.itemsType,
-      [s.ITEM_IDS]: this.store.itemIds
-    }), this._initializeSelectItems();
+    super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
+      () => {
+        $(this.currentNode), k(this.currentNode), q(this.currentNode);
+      },
+      () => {
+        this.api.updateValues({
+          [s.ORIENTATION]: this.store.orientation,
+          [s.ITEMS_TYPE]: this.store.itemsType,
+          [s.ITEM_IDS]: this.store.itemIds
+        }), this._initializeSelectItems();
+      }
+    );
   }
   onDestroy() {
     const e = this._getTemplateData();
@@ -70,7 +78,7 @@ class W extends P {
       this._GuLabel({ text: "Orientation" }),
       this._GuRadioButton({
         name: s.ORIENTATION,
-        buttons: D
+        buttons: x
       })
     ])}
         `;
@@ -92,7 +100,7 @@ class W extends P {
     console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [s.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), this._recalculateTrimming();
   }
   _onItemsTypeChange(e, i) {
-    const { itemIds: t } = this.store, r = S.ITEMS_TYPE[e], n = y[i].findIndex((a) => a.value === t), o = y[e][n];
+    const { itemIds: t } = this.store, r = S.ITEMS_TYPE[e], n = g[i].findIndex((a) => a.value === t), o = g[e][n];
     r && (this.store.setItemsType(r), this.store.setItemIds(o.value), f(this.currentNode, this.api), this._updateDataTypeAttributes(r), this._initializeSelectItems(), this._reFillTemplate());
   }
   _onItemIdsChange(e) {
@@ -108,7 +116,7 @@ class W extends P {
     this.api.updateValues({
       [s.ITEMS_TYPE]: e
     });
-    const t = y[e];
+    const t = g[e];
     this.api.setUIEAttribute(
       s.ITEM_IDS,
       C.SELECTPICKER.items,
@@ -138,7 +146,7 @@ class W extends P {
       currencyLocation: n,
       formattedPrice: o
     } = this.store;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(U({
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(F({
       orientation: e,
       itemsType: i,
       itemId: t,
@@ -148,7 +156,7 @@ class W extends P {
     })).apply(new d("Updated template"));
   }
   _getTemplateData() {
-    const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = y[e].findIndex((o) => o.value === i), n = r > -1 ? r : 0;
+    const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = g[e].findIndex((o) => o.value === i), n = r > -1 ? r : 0;
     return {
       imageSrc: p.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
       name: p.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
@@ -173,8 +181,8 @@ class W extends P {
     r = r.replace(t, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(r).apply(new d("Updated name"));
   }
   _updatePrice(e) {
-    var g;
-    const i = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
+    var E;
+    const i = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
     if (!i)
       return;
     const t = this._getParagraphFromBlock(i);
@@ -184,8 +192,8 @@ class W extends P {
     this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(_).apply(new d("Updated price"));
   }
   _updateOriginalPrice(e) {
-    var E;
-    const i = (E = this.currentNode) == null ? void 0 : E.querySelector(
+    var y;
+    const i = (y = this.currentNode) == null ? void 0 : y.querySelector(
       `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
     );
     if (!i)
@@ -217,16 +225,20 @@ class W extends P {
     let r = i.getInnerHTML();
     r = r.replace(t, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(r).apply(new d("Updated button"));
   }
+  /**
+   * @todo Optimize template reordering for performance.
+   * @description Reorders the template structure based on current orientation and visibility settings.
+   */
   _reOrderTemplate() {
-    var I, h, _, g, N, E, O;
-    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), i = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${m.NAME}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (g = this.currentNode) == null ? void 0 : g.querySelector(
+    var I, h, _, E, N, y, O;
+    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), i = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${m.NAME}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
       `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
-    ), n = (N = this.currentNode) == null ? void 0 : N.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), o = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`), a = (O = this.currentNode) == null ? void 0 : O.querySelector("esd-config-block");
+    ), n = (N = this.currentNode) == null ? void 0 : N.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), o = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`), a = (O = this.currentNode) == null ? void 0 : O.querySelector("esd-config-block");
     if (!e || !i || !t || !r || !n || !o || !a)
       return;
     const { orientation: l } = this.store;
-    let c = l === S.ORIENTATION.VERTICAL ? L : x;
-    c = c.replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", o.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), c = c.trim().replace('<td align="center" class="ins-product-td items-block">', "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(c).apply(new d("Reordered template"));
+    let c = l === S.ORIENTATION.VERTICAL ? H : L;
+    c = c.replace("{-{-TEMPLATE_FIRST_LINE-}-}", A).replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", o.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), c = c.trim().replace(A, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(c).apply(new d("Reordered template"));
   }
   _updateDataTypeAttributes(e) {
     if (!this.currentNode)
@@ -240,7 +252,7 @@ class W extends P {
   _updateDataNumberAttributes(e) {
     if (!this.currentNode)
       return;
-    const { itemsType: i } = this.store, t = y[i].findIndex((l) => l.value === e);
+    const { itemsType: i } = this.store, t = g[i].findIndex((l) => l.value === e);
     let r = "1";
     if (t >= 0)
       r = String(t + 1);
@@ -304,6 +316,6 @@ class W extends P {
   }
 }
 export {
-  $ as CONTROL_BLOCK_ID,
-  W as ItemsBlockControl
+  w as CONTROL_BLOCK_ID,
+  Z as ItemsBlockControl
 };

package/dist/extensions/Blocks/Items/enums/productEnums.js

@@ -1,4 +1,6 @@
-const e = {
+import _ from "../../../../node_modules/lodash-es/flatMap.js";
+import i from "../../../../node_modules/lodash-es/range.js";
+const o = '<td align="center" class="ins-product-td items-block items-block-v2">', R = {
   TYPE: "data-type",
   ITEMS_INDEX_SELECT_CONTROL_VALUE: "data-cart_items_select_control_value",
   ORIENTATION: "data-card_orientation_control_value",
@@ -22,7 +24,7 @@ const e = {
   PRODUCT_PRICE_VISIBLE: "data-product_price_visible",
   PRODUCT_ORIGINAL_PRICE_VISIBLE: "data-product_original_price_visible",
   PRODUCT_BUTTON_VISIBLE: "data-product_button_visible"
-}, s = { PAIRS_FOR_EXTENSION: {
+}, t = { PAIRS_FOR_EXTENSION: {
   imageSrc: {
     CART_ITEMS: {
       ATTR: "ins_apr_img",
@@ -209,7 +211,63 @@ const e = {
     }
   }
 } };
+function m(e, a = 8) {
+  return i(1, a + 1).map((s) => `${e}_${s}`);
+}
+function E() {
+  const { PAIRS_FOR_EXTENSION: e } = t, a = [];
+  return a.push(
+    e.imageSrc.CART_ITEMS.ATTR,
+    e.imageSrc.BROWSED_ITEMS.ATTR,
+    e.imageSrc.PURCHASED_ITEMS.ATTR
+  ), a.push(
+    e.name.CART_ITEMS.ATTR,
+    e.name.CART_ITEMS.HREF,
+    e.name.BROWSED_ITEMS.ATTR,
+    e.name.BROWSED_ITEMS.HREF,
+    e.name.PURCHASED_ITEMS.ATTR,
+    e.name.PURCHASED_ITEMS.HREF
+  ), a.push(
+    e.quantity.CART_ITEMS.ATTR,
+    e.quantity.BROWSED_ITEMS.ATTR,
+    e.quantity.PURCHASED_ITEMS.ATTR
+  ), a.push(
+    e.price.CART_ITEMS.PRICE,
+    e.price.CART_ITEMS.PRICE_FORMATTED,
+    e.price.CART_ITEMS.CURRENCY,
+    e.price.BROWSED_ITEMS.PRICE,
+    e.price.BROWSED_ITEMS.PRICE_FORMATTED,
+    e.price.BROWSED_ITEMS.CURRENCY,
+    e.price.PURCHASED_ITEMS.PRICE,
+    e.price.PURCHASED_ITEMS.PRICE_FORMATTED,
+    e.price.PURCHASED_ITEMS.CURRENCY
+  ), a.push(
+    e.originalPrice.CART_ITEMS.PRICE,
+    e.originalPrice.CART_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.CART_ITEMS.CURRENCY,
+    e.originalPrice.BROWSED_ITEMS.PRICE,
+    e.originalPrice.BROWSED_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.BROWSED_ITEMS.CURRENCY,
+    e.originalPrice.PURCHASED_ITEMS.PRICE,
+    e.originalPrice.PURCHASED_ITEMS.PRICE_FORMATTED,
+    e.originalPrice.PURCHASED_ITEMS.CURRENCY
+  ), a.push(
+    e.button.CART_ITEMS.HREF,
+    e.button.BROWSED_ITEMS.HREF,
+    e.button.PURCHASED_ITEMS.HREF
+  ), a.push(
+    e.itemLink.CART_ITEMS.HREF,
+    e.itemLink.BROWSED_ITEMS.HREF,
+    e.itemLink.PURCHASED_ITEMS.HREF
+  ), a;
+}
+const p = _(
+  E(),
+  (e) => m(e)
+);
 export {
-  e as configAttributes,
-  s as productPairs
+  R as configAttributes,
+  p as itemsBlockDynamicVariables,
+  t as productPairs,
+  o as templateFirstLine
 };