@useinsider/guido 1.0.3-beta.8eea45e → 1.0.3-beta.901ea7e

package/dist/extensions/Blocks/Checkbox/settingsPanel.js

@@ -1,38 +1,25 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import { ContainerControls as i, TextControls as m } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import { SettingsTab as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { SettingsPanelRegistry as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js";
-import { SettingsPanelTab as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js";
-import { CHECKBOX_BLOCK_ID as p } from "./block.js";
-import { CHECKBOX_CONTROL_BLOCK_ID as C } from "./control.js";
-class x extends e {
-  registerBlockControls(r) {
-    r[p] = [
+import { SettingsPanelRegistry as C, SettingsPanelTab as t, SettingsTab as e, ContainerControls as n, TextControls as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CHECKBOX_BLOCK_ID as s } from "./block.js";
+import { CHECKBOX_CONTROL_BLOCK_ID as T } from "./control.js";
+class l extends C {
+  registerBlockControls(o) {
+    o[s] = [
       new t(
-        o.SETTINGS,
+        e.SETTINGS,
         [
-          C,
-          i.EXTERNAL_INDENTS
+          T,
+          n.EXTERNAL_INDENTS
         ]
       ),
       new t(
-        o.STYLES,
+        e.STYLES,
         [
-          m.TEXT_BLOCK_BACKGROUND_COLOR
+          r.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
     ];
   }
 }
 export {
-  x as CheckboxBlockSettings
+  l as CheckboxBlockSettings
 };

package/dist/extensions/Blocks/Checkbox/template.js

@@ -1,20 +1,9 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 const e = {
   TITLE: "Unsubscribe From All Email Lists",
   DESCRIPTION: "You will still receive important transactional and billing-related emails."
 }, l = `
-    <td align="left" class="checkbox-block-v2 esd-block-checkbox es-p20">
+    <td align="left" class="checkbox-block checkbox-block-v2 esd-block-checkbox es-p20">
         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
             <tbody>
                 <tr>
@@ -37,11 +26,16 @@ const e = {
             </tbody>
         </table>
     </td>
-`, m = `
-    <td 
-        align="left" 
-        esd-extension-block-id="checkbox-block" 
-        class="checkbox-block-v2 esd-block-checkbox esd-checkbox-block esd-extension-block es-p20"
+`, o = `
+    <td
+        align="left"
+        esd-extension-block-id="checkbox-block"
+        class="
+            checkbox-block
+            checkbox-block-v2
+            esd-block-checkbox
+            esd-checkbox-block
+            esd-extension-block es-p20"
     >
         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
             <tbody>
@@ -66,10 +60,10 @@ const e = {
         </table>
     </td>
 `;
-function h() {
+function a() {
   return l.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`);
 }
 export {
-  m as default,
-  h as getDefaultTemplate
+  o as default,
+  a as getDefaultTemplate
 };

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

@@ -1,28 +1,18 @@
-import o from "../../../static/assets/icons/coupon.svg.js";
-import { Block as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/blocks/Block.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import { BlockCompositionType as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import { BlockType as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { getDefaultTemplate as p } from "./template.js";
-const i = "coupon-block";
-class I extends t {
+import { Block as o, BlockCompositionType as e, BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as r } from "./template.js";
+const n = "coupon-block";
+class s extends o {
+  constructor() {
+    super();
+  }
   getId() {
-    return i;
+    return n;
   }
   getIcon() {
-    return o;
+    return "coupon-icon";
   }
   getBlockCompositionType() {
-    return r.BLOCK;
+    return e.BLOCK;
   }
   getName() {
     return this.api.translate("Coupon Block");
@@ -31,13 +21,13 @@ class I extends t {
     return this.api.translate("Coupon lets you add a coupon code to your message design.");
   }
   getBlockType() {
-    return e.BLOCK_TEXT;
+    return t.BLOCK_TEXT;
   }
   getTemplate() {
-    return p();
+    return r();
   }
 }
 export {
-  i as COUPON_BLOCK_ID,
-  I as CouponBlock
+  n as COUPON_BLOCK_ID,
+  s as CouponBlock
 };

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

@@ -1,19 +1,8 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/ExtensionBuilder.js";
+import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CouponBlock as t } from "./block.js";
-import { CouponBlockSettings as i } from "./settingsPanel.js";
-const x = new o().addBlock(t).withSettingsPanelRegistry(i).build();
+import { CouponIconsRegistry as i } from "./iconsRegistry.js";
+import { CouponBlockSettings as n } from "./settingsPanel.js";
+const p = new o().addBlock(t).withSettingsPanelRegistry(n).withIconsRegistry(i).build();
 export {
-  x as default
+  p as default
 };

package/dist/extensions/Blocks/CouponBlock/iconsRegistry.js

@@ -0,0 +1,33 @@
+import { IconsRegistry as L } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class t extends L {
+  registerIconsSvg(C) {
+    C["coupon-icon"] = `
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.87939 0C8.56714 0.0576002 9.26998 0.793636 9.82275 1.37305L9.83057
+                1.38184C9.93483 1.49112 10.0343 1.5944 10.1265 1.68652L17.2573 8.79492C18.2493 
+                9.7872 18.2493 11.3954 17.2573 12.3877L12.396 17.2471C11.9169 17.726 11.2659 17.9999 
+                10.6157 18C9.96563 17.9999 9.31551 17.76 8.83643 17.2471L1.68896 10.1221C1.58907 10.0222 
+                1.47548 9.91523 1.35596 9.80273C0.77939 9.26006 0.0584135 8.58144 0.00146484 7.87305L0.00439453 
+                2.15625C-0.0298299 1.57462 0.209988 1.02683 0.620605 0.616211C1.03135 0.20572 1.57981 0 2.16162 
+                0L7.87939 0ZM2.16162 2C2.10648 2 2.07333 2.01007 2.05908 2.01562C2.04707 2.02035 2.04069 2.02432 
+                2.03467 2.03027C2.01884 2.04611 2.00915 2.05957 2.00342 2.06836L2.00439 2.09766L2.00146 7.59277C2.01413 
+                7.61029 2.02975 7.63092 2.04834 7.6543C2.20264 7.84819 2.41884 8.05659 2.72705 8.34668L2.73682 
+                8.35645C2.84844 8.46149 2.9808 8.58586 3.10205 8.70703L3.10303 8.70801L10.2739 15.8564L10.2983 
+                15.8818C10.3564 15.9439 10.4539 15.9999 10.6157 16C10.7155 15.9998 10.8635 15.9513 10.9819 
+                15.833L15.8433 10.9736C16.054 10.7626 16.0536 10.4212 15.8433 10.21L8.71436 3.10352L8.7124 
+                3.10156C8.60329 2.99248 8.49054 2.8737 8.39209 2.77051L8.37549 2.75391C8.08113 2.44536 7.86049 
+                2.21875 7.65479 2.05469C7.62752 2.03295 7.6037 2.01461 7.5835 2L2.16162 2ZM8.16748 9.83301C8.81172 
+                9.18878 9.8571 9.18898 10.5015 9.83301L10.6265 9.71973C11.2745 9.19135 12.2304 9.22915 12.8345 
+                9.83301C13.4787 10.4772 13.4795 11.5226 12.8354 12.167C12.8312 12.1713 12.8251 12.1745 12.8208 
+                12.1787L11.2085 13.792C10.818 14.1825 10.185 14.1824 9.79443 13.792L8.18115 12.1797C8.1768 12.1755 
+                8.17178 12.1713 8.16748 12.167C7.52346 11.5226 7.52325 10.4772 8.16748 9.83301ZM5.00146 4C5.55353 
+                4.00025 6.00146 4.44787 6.00146 5C6.00146 5.55213 5.55353 5.99975 5.00146 6C4.44918 6 4.00146 5.55228 
+                4.00146 5C4.00146 4.44772 4.44918 4 5.00146 4Z" fill="#666666"/>
+            </svg>
+
+        `;
+  }
+}
+export {
+  t as CouponIconsRegistry
+};

package/dist/extensions/Blocks/CouponBlock/settingsPanel.js

@@ -1,37 +1,24 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import { TextControls as o, ContainerControls as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import { SettingsTab as i } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { SettingsPanelRegistry as m } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js";
-import { SettingsPanelTab as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js";
-import { COUPON_BLOCK_ID as e } from "./block.js";
-class A extends m {
-  registerBlockControls(t) {
-    t[e] = [
-      new p(
-        i.SETTINGS,
+import { SettingsPanelRegistry as T, SettingsPanelTab as o, SettingsTab as O, TextControls as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { COUPON_BLOCK_ID as N } from "./block.js";
+class _ extends T {
+  registerBlockControls(e) {
+    e[N] = [
+      new o(
+        O.SETTINGS,
         [
-          o.FONT_FAMILY,
-          o.FONT_SIZE,
-          o.FORMAT,
-          o.FONT_COLOR,
-          o.TEXT_BLOCK_BACKGROUND_COLOR,
-          o.ALIGN,
-          o.LINE_HEIGHT,
-          r.EXTERNAL_INDENTS
+          t.FONT_FAMILY,
+          t.FONT_SIZE,
+          t.FORMAT,
+          t.FONT_COLOR,
+          t.TEXT_BLOCK_BACKGROUND_COLOR,
+          t.ALIGN,
+          t.LINE_HEIGHT,
+          t.INTERNAL_INDENTS
         ]
       )
     ];
   }
 }
 export {
-  A as CouponBlockSettings
+  _ as CouponBlockSettings
 };

package/dist/extensions/Blocks/CouponBlock/template.js

@@ -1,8 +1,6 @@
 const o = `
     <td class="coupon-block ins-coupon-code esd-block-text coupon-block-v2">
-        <table>
-            <p class="ins-title">{@COUPON_CODE}</p>
-        </table>
+        <p class="ins-title" contenteditable="false">{@COUPON_CODE}</p>
     </td>`, e = `
     <td 
         class="coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block" 

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

@@ -0,0 +1,67 @@
+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 S } from "./store/items-block.js";
+import { getDefaultTemplate as V } from "./template.js";
+import { syncCurrencySymbolFromAttributes as B, syncCurrencyLocationFromAttributes as U, syncFormattedPriceFromAttributes as k } from "./utils/syncAttributesFromConfigBlock.js";
+const M = "items-block";
+class x extends R {
+  getId() {
+    return M;
+  }
+  getIcon() {
+    return "items-icon";
+  }
+  getBlockCompositionType() {
+    return L.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Items");
+  }
+  getDescription() {
+    return this.api.translate("Items lets you display personalized products based on user behavior.");
+  }
+  getTemplate() {
+    return V({
+      orientation: l.ORIENTATION.HORIZONTAL,
+      itemsType: l.ITEMS_TYPE.CART_ITEMS,
+      itemId: "{{Abandoned Cart Item (1) Url}}",
+      currencySymbol: e.productPriceCurrencySymbolControlValue,
+      currencyLocation: e.productPriceCurrencyLocationControlValue,
+      formattedPrice: e.productPriceFormattedControlValue === "1"
+    });
+  }
+  allowInnerBlocksDND() {
+    return !1;
+  }
+  onCreated(r) {
+    const n = r.querySelector("esd-config-block");
+    if (!n)
+      return;
+    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 (!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 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, _).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(r) {
+    const n = r.querySelector("esd-config-block"), o = S();
+    if (!n)
+      return;
+    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 {
+  M as BLOCK_ID,
+  x as ItemsBlock
+};

package/dist/extensions/Blocks/Items/controls/button/link.js

@@ -0,0 +1,68 @@
+var r = Object.defineProperty;
+var a = (o, e, t) => e in o ? r(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var s = (o, e, t) => a(o, typeof e != "symbol" ? e + "" : e, t);
+import { CommonControl as u } from "../../../common-control.js";
+import { ItemsBlockControlId as d } from "../../enums/controlEnums.js";
+import { useItemsBlockStore as l } from "../../store/items-block.js";
+import { syncButtonLinkFromAttributes as h } from "../../utils/syncAttributesFromConfigBlock.js";
+import { updateConfigBlockAttributes as m } from "../../utils/updateAttributes.js";
+const i = d.BUTTON_LINK, n = {
+  LINK: "link"
+};
+class C extends u {
+  constructor() {
+    super(...arguments);
+    s(this, "store", l());
+  }
+  getId() {
+    return i;
+  }
+  getTemplate() {
+    return `
+            <div class="${i}">
+                ${this._getLink()}
+            </div>
+        `;
+  }
+  onRender() {
+    this.api.updateValues({
+      [n.LINK]: this.store.buttonLink
+    }), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
+      () => h(this.currentNode),
+      () => {
+        this.api.updateValues({
+          [n.LINK]: this.store.buttonLink
+        });
+      }
+    );
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(
+      n.LINK,
+      (t) => this._onLinkChange(t)
+    );
+  }
+  _onLinkChange(t) {
+    console.debug("Button link changed to: ", t), this.store.setButtonLink(t), m(this.currentNode, this.api);
+  }
+  _getLink() {
+    return `
+            ${this._GuOneColumn([
+      this._GuLabel({ text: "Link" }),
+      this._GuTextInput({
+        name: n.LINK,
+        placeholder: "Enter Link",
+        className: "es-100",
+        disabled: !0
+      })
+    ])}
+        `;
+  }
+}
+export {
+  C as ButtonLinkControl,
+  i as CONTROL_BLOCK_ID
+};

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

@@ -0,0 +1,193 @@
+var c = Object.defineProperty;
+var I = (a, n, t) => n in a ? c(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
+var _ = (a, n, t) => I(a, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as R } from "../../common-control.js";
+import { ItemsBlockId as s } from "../enums/controlEnums.js";
+import { configAttributes as C } from "../enums/productEnums.js";
+import { SETTINGS_ENUMS as u } from "../enums/settingsEnums.js";
+import { useItemsBlockStore as O } from "../store/items-block.js";
+import { getConfigBlock as P, attributeToBoolean as U } from "../utils/configBlockUtils.js";
+const h = "ui-elements-items-card-composition-block", i = {
+  PRODUCT_IMAGE: "image",
+  PRODUCT_NAME: "name",
+  PRODUCT_QUANTITY: "quantity",
+  PRODUCT_PRICE: "price",
+  PRODUCT_ORIGINAL_PRICE: "originalPrice",
+  PRODUCT_BUTTON: "button"
+};
+class g extends R {
+  constructor() {
+    super(...arguments);
+    _(this, "store", O());
+    _(this, "visibilityState", {
+      [i.PRODUCT_IMAGE]: !0,
+      [i.PRODUCT_NAME]: !0,
+      [i.PRODUCT_QUANTITY]: !0,
+      [i.PRODUCT_PRICE]: !0,
+      [i.PRODUCT_ORIGINAL_PRICE]: !0,
+      [i.PRODUCT_BUTTON]: !0
+    });
+  }
+  getId() {
+    return h;
+  }
+  getTemplate() {
+    return `
+            <div class="items-controls-container">
+                ${[
+      { name: i.PRODUCT_IMAGE, label: "Product Image" },
+      { name: i.PRODUCT_NAME, label: "Product Name" },
+      { name: i.PRODUCT_QUANTITY, label: "Product Quantity" },
+      { name: i.PRODUCT_PRICE, label: "Product Price" },
+      { name: i.PRODUCT_ORIGINAL_PRICE, label: "Product Original Price" },
+      { name: i.PRODUCT_BUTTON, label: "Product Button" }
+    ].map((e) => this._getToggleContainer(e)).join("")}
+            </div>
+        `;
+  }
+  onRender() {
+    this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(), this._initializeToggles(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
+      () => {
+        this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(), this._applyVisibilityStyles();
+      },
+      () => {
+        this._updateTogglesFromState();
+      }
+    );
+  }
+  _getToggleContainer({ name: t, label: e }) {
+    return `
+            <div class="container" name="${t}Container">
+                <div class="display-flex align-items-center justify-content-between">
+                    ${this._GuLabel({ text: e, name: `${t}Label` })}
+                    ${this._GuToggle(t)}
+                </div>
+            </div>
+        `;
+  }
+  _initializeToggles() {
+    this._updateTogglesFromState();
+  }
+  _updateTogglesFromState() {
+    this.api.updateValues({
+      [i.PRODUCT_IMAGE]: this.visibilityState[i.PRODUCT_IMAGE],
+      [i.PRODUCT_NAME]: this.visibilityState[i.PRODUCT_NAME],
+      [i.PRODUCT_QUANTITY]: this.visibilityState[i.PRODUCT_QUANTITY],
+      [i.PRODUCT_PRICE]: this.visibilityState[i.PRODUCT_PRICE],
+      [i.PRODUCT_ORIGINAL_PRICE]: this.visibilityState[i.PRODUCT_ORIGINAL_PRICE],
+      [i.PRODUCT_BUTTON]: this.visibilityState[i.PRODUCT_BUTTON]
+    });
+  }
+  _syncVisibilityFromAttributes() {
+    const t = P(this.currentNode);
+    if (!t)
+      return;
+    const e = {
+      [i.PRODUCT_IMAGE]: "PRODUCT_IMAGE_VISIBLE",
+      [i.PRODUCT_NAME]: "PRODUCT_NAME_VISIBLE",
+      [i.PRODUCT_QUANTITY]: "PRODUCT_QUANTITY_VISIBLE",
+      [i.PRODUCT_PRICE]: "PRODUCT_PRICE_VISIBLE",
+      [i.PRODUCT_ORIGINAL_PRICE]: "PRODUCT_ORIGINAL_PRICE_VISIBLE",
+      [i.PRODUCT_BUTTON]: "PRODUCT_BUTTON_VISIBLE"
+    };
+    Object.entries(e).forEach(([o, r]) => {
+      const T = t.getAttribute(C[r]);
+      this.visibilityState[o] = U(T, !0);
+    });
+  }
+  /**
+   * If itemsType is not BROWSED_ITEMS, show quantity
+   * If itemsType is BROWSED_ITEMS, hide quantity
+   * and mark it as '0'
+   */
+  _handleBrowsedItemsQuantity() {
+    var r;
+    const t = this.store.itemsType !== u.ITEMS_TYPE.BROWSED_ITEMS, e = (r = this.currentNode) == null ? void 0 : r.querySelector("esd-config-block");
+    if (!e)
+      return;
+    const o = e.getAttribute(C.PRODUCT_QUANTITY_VISIBLE) === "1";
+    this.visibilityState[i.PRODUCT_QUANTITY] = t && o, this.api.setVisibility(`${i.PRODUCT_QUANTITY}Container`, t), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t && o);
+  }
+  _applyVisibilityStyles() {
+    const t = {
+      [i.PRODUCT_IMAGE]: s.IMAGE,
+      [i.PRODUCT_NAME]: s.NAME,
+      [i.PRODUCT_QUANTITY]: s.QUANTITY,
+      [i.PRODUCT_PRICE]: s.PRICE,
+      [i.PRODUCT_ORIGINAL_PRICE]: s.ORIGINAL_PRICE,
+      [i.PRODUCT_BUTTON]: s.BUTTON
+    };
+    Object.entries(t).forEach(([e, o]) => {
+      var d;
+      const r = (d = this.currentNode) == null ? void 0 : d.querySelector(`[esd-extension-block-id="${o}"]`);
+      if (!r)
+        return;
+      const T = this.visibilityState[e];
+      this.api.getDocumentModifier().modifyHtml(r).setStyle("display", T ? "table-cell" : "none").apply(new l(`Applied ${e} visibility from attributes`));
+    });
+  }
+  _updateVisibilityAttribute(t, e) {
+    const o = P(this.currentNode);
+    if (!o)
+      return;
+    const T = {
+      [i.PRODUCT_IMAGE]: "PRODUCT_IMAGE_VISIBLE",
+      [i.PRODUCT_NAME]: "PRODUCT_NAME_VISIBLE",
+      [i.PRODUCT_QUANTITY]: "PRODUCT_QUANTITY_VISIBLE",
+      [i.PRODUCT_PRICE]: "PRODUCT_PRICE_VISIBLE",
+      [i.PRODUCT_ORIGINAL_PRICE]: "PRODUCT_ORIGINAL_PRICE_VISIBLE",
+      [i.PRODUCT_BUTTON]: "PRODUCT_BUTTON_VISIBLE"
+    }[t];
+    T && this.api.getDocumentModifier().modifyHtml(o).setAttribute(C[T], e ? "1" : "0").apply(new l(`Updated ${t} visibility attribute`));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => this._onProductImageChange(t)), this.api.onValueChanged(i.PRODUCT_NAME, (t) => this._onProductNameChange(t)), this.api.onValueChanged(i.PRODUCT_QUANTITY, (t) => this._onProductQuantityChange(t)), this.api.onValueChanged(i.PRODUCT_PRICE, (t) => this._onProductPriceChange(t)), this.api.onValueChanged(
+      i.PRODUCT_ORIGINAL_PRICE,
+      (t) => this._onProductOriginalPriceChange(t)
+    ), this.api.onValueChanged(i.PRODUCT_BUTTON, (t) => this._onProductButtonChange(t));
+  }
+  _onProductImageChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.IMAGE}"]`);
+    e && (this.visibilityState[i.PRODUCT_IMAGE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product image visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_IMAGE, t));
+  }
+  _onProductNameChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.NAME}"]`);
+    e && (this.visibilityState[i.PRODUCT_NAME] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product name visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_NAME, t));
+  }
+  _onProductQuantityChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.QUANTITY}"]`);
+    e && (this.visibilityState[i.PRODUCT_QUANTITY] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(
+      `Product quantity visibility changed to ${t ? "visible" : "hidden"}`
+    )), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t));
+  }
+  _onProductPriceChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.PRICE}"]`);
+    e && (this.visibilityState[i.PRODUCT_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product price visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_PRICE, t));
+  }
+  _onProductOriginalPriceChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(
+      `[esd-extension-block-id="${s.ORIGINAL_PRICE}"]`
+    );
+    e && (this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(
+      `Product original price visibility changed to ${t ? "visible" : "hidden"}`
+    )), this._updateVisibilityAttribute(i.PRODUCT_ORIGINAL_PRICE, t));
+  }
+  _onProductButtonChange(t) {
+    var o;
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${s.BUTTON}"]`);
+    e && (this.visibilityState[i.PRODUCT_BUTTON] = t, this.api.getDocumentModifier().modifyHtml(e).setStyle("display", t ? "table-cell" : "none").apply(new l(`Product button visibility changed to ${t ? "visible" : "hidden"}`)), this._updateVisibilityAttribute(i.PRODUCT_BUTTON, t));
+  }
+}
+export {
+  h as COMPOSITION_CONTROL_BLOCK_ID,
+  g as ItemsBlockCardCompositionControl
+};