@useinsider/guido 2.0.0-beta.9b144a9 → 2.0.0-beta.a4f9fa2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +2 -0
  2. package/dist/@types/config/schemas.js +9 -5
  3. package/dist/components/Guido.vue.js +1 -1
  4. package/dist/components/Guido.vue2.js +15 -17
  5. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +2 -2
  6. package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js +5 -5
  7. package/dist/components/organisms/header/LeftSlot.vue.js +12 -12
  8. package/dist/components/organisms/header/LeftSlot.vue2.js +6 -6
  9. package/dist/composables/useStripo.js +57 -56
  10. package/dist/config/migrator/index.js +9 -8
  11. package/dist/config/migrator/itemsBlockMigrator.js +342 -0
  12. package/dist/extensions/Blocks/CouponBlock/constants.js +4 -0
  13. package/dist/extensions/Blocks/CouponBlock/controls/index.js +29 -0
  14. package/dist/extensions/Blocks/CouponBlock/extension.js +5 -4
  15. package/dist/extensions/Blocks/CouponBlock/settingsPanel.js +20 -14
  16. package/dist/extensions/Blocks/CouponBlock/template.js +22 -11
  17. package/dist/extensions/Blocks/Items/block.js +39 -40
  18. package/dist/extensions/Blocks/Items/controls/button/link.js +22 -29
  19. package/dist/extensions/Blocks/Items/controls/cardComposition.js +66 -46
  20. package/dist/extensions/Blocks/Items/controls/image/link.js +23 -30
  21. package/dist/extensions/Blocks/Items/controls/name/trimming.js +25 -25
  22. package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +19 -17
  23. package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +31 -29
  24. package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +36 -36
  25. package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +21 -19
  26. package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +29 -27
  27. package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +93 -0
  28. package/dist/extensions/Blocks/Items/controls/settingsControl.js +152 -143
  29. package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
  30. package/dist/extensions/Blocks/Items/enums/productEnums.js +43 -45
  31. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +4 -3
  32. package/dist/extensions/Blocks/Items/extension.js +7 -6
  33. package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +58 -49
  34. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +48 -59
  35. package/dist/extensions/Blocks/Items/settingsPanel.js +27 -26
  36. package/dist/extensions/Blocks/Items/store/items-block.js +11 -7
  37. package/dist/extensions/Blocks/Items/template.js +366 -129
  38. package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +184 -0
  39. package/dist/extensions/Blocks/Recommendation/control.js +1 -1
  40. package/dist/extensions/Blocks/common-control.js +29 -30
  41. package/dist/extensions/Blocks/controlFactories.js +139 -118
  42. package/dist/guido.css +1 -1
  43. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +370 -286
  44. package/dist/package.json.js +1 -1
  45. package/dist/services/stripoApi.js +6 -10
  46. package/dist/src/@types/config/schemas.d.ts +8 -0
  47. package/dist/src/composables/useConfig.d.ts +4 -0
  48. package/dist/src/config/migrator/itemsBlockMigrator.d.ts +6 -0
  49. package/dist/src/extensions/Blocks/CouponBlock/constants.d.ts +14 -0
  50. package/dist/src/extensions/Blocks/CouponBlock/controls/index.d.ts +108 -0
  51. package/dist/src/extensions/Blocks/CouponBlock/template.d.ts +1 -1
  52. package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +0 -2
  53. package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +9 -0
  54. package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +0 -2
  55. package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +1 -1
  56. package/dist/src/extensions/Blocks/Items/controls/price/singlePrice.d.ts +18 -0
  57. package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +0 -4
  58. package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +1 -0
  59. package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +24 -26
  60. package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +1 -0
  61. package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +2 -0
  62. package/dist/src/extensions/Blocks/Items/template.d.ts +22 -1
  63. package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +73 -0
  64. package/dist/src/extensions/Blocks/common-control.d.ts +9 -10
  65. package/dist/src/extensions/Blocks/controlFactories.d.ts +30 -7
  66. package/dist/src/stores/config.d.ts +34 -0
  67. package/dist/static/styles/components/narrow-panel.css.js +0 -10
  68. package/dist/utils/pairProductVariables.js +61 -58
  69. package/package.json +3 -3
  70. package/dist/extensions/Blocks/Items/utils/configBlockUtils.js +0 -17
  71. package/dist/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.js +0 -28
  72. package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +0 -76
  73. package/dist/extensions/Blocks/Items/utils/updateAttributes.js +0 -46
  74. package/dist/src/extensions/Blocks/Items/utils/configBlockUtils.d.ts +0 -23
  75. package/dist/src/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.d.ts +0 -32
  76. package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +0 -50
  77. package/dist/src/extensions/Blocks/Items/utils/updateAttributes.d.ts +0 -8
@@ -1,4 +1,4 @@
1
- const o = { stripo: { version: "2.47.0" } }, s = {
1
+ const o = { stripo: { version: "2.52.0" } }, s = {
2
2
  guido: o
3
3
  };
4
4
  export {
@@ -1,8 +1,8 @@
1
1
  import { useHttp as m } from "../composables/useHttp.js";
2
- import { useToaster as u } from "../composables/useToaster.js";
3
- import { MAX_DEFAULT_TEMPLATE_ID as i } from "../enums/defaults.js";
2
+ import { useToaster as i } from "../composables/useToaster.js";
3
+ import { MAX_DEFAULT_TEMPLATE_ID as p } from "../enums/defaults.js";
4
4
  const y = () => {
5
- const { get: r } = m(), { handleError: o } = u();
5
+ const { get: r } = m(), { handleError: o } = i();
6
6
  return {
7
7
  getToken: async () => {
8
8
  try {
@@ -26,17 +26,13 @@ const y = () => {
26
26
  getDefaultTemplate: async () => {
27
27
  const t = {
28
28
  html: "",
29
- css: "",
30
- forceRecreate: !0
29
+ css: ""
31
30
  };
32
31
  try {
33
- const c = new URLSearchParams(window.location.search).get("default-template"), s = c ? parseInt(c) : 0, l = s >= 1 && s <= i ? s : 0, { data: n } = await r(
32
+ const c = new URLSearchParams(window.location.search).get("default-template"), s = c ? parseInt(c) : 0, l = s >= 1 && s <= p ? s : 0, { data: n } = await r(
34
33
  `/stripo/default-template/${l}`
35
34
  ), a = typeof n == "string" ? JSON.parse(n) : n;
36
- return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? t : {
37
- ...a,
38
- forceRecreate: !0
39
- };
35
+ return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? t : a;
40
36
  } catch (e) {
41
37
  return o(e, "Failed to fetch default template"), t;
42
38
  }
@@ -90,6 +90,8 @@ export declare const TemplateSchema: v.ObjectSchema<{
90
90
  }, undefined>, undefined>, readonly []>;
91
91
  /** Selected unsubscribe page IDs */
92
92
  readonly selectedUnsubscribePages: v.OptionalSchema<v.ArraySchema<v.NumberSchema<undefined>, undefined>, readonly []>;
93
+ /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
94
+ readonly forceRecreate: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
93
95
  }, undefined>;
94
96
  /**
95
97
  * Email header configuration (sender name and subject)
@@ -146,6 +148,8 @@ export declare const FeaturesSchema: v.ObjectSchema<{
146
148
  readonly displayConditions: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
147
149
  /** Enable unsubscribe block */
148
150
  readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
151
+ /** Disable modules panel in the editor */
152
+ readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
149
153
  }, undefined>;
150
154
  /**
151
155
  * Default block types available in Stripo
@@ -398,6 +402,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
398
402
  }, undefined>, undefined>, readonly []>;
399
403
  /** Selected unsubscribe page IDs */
400
404
  readonly selectedUnsubscribePages: v.OptionalSchema<v.ArraySchema<v.NumberSchema<undefined>, undefined>, readonly []>;
405
+ /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
406
+ readonly forceRecreate: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
401
407
  }, undefined>, {}>;
402
408
  /** Editor settings */
403
409
  readonly editor: v.OptionalSchema<v.ObjectSchema<{
@@ -439,6 +445,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
439
445
  readonly displayConditions: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
440
446
  /** Enable unsubscribe block */
441
447
  readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
448
+ /** Disable modules panel in the editor */
449
+ readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
442
450
  }, undefined>, {}>;
443
451
  /** Block configuration */
444
452
  readonly blocks: v.OptionalSchema<v.ObjectSchema<{
@@ -31,6 +31,7 @@ export declare const useConfig: () => {
31
31
  } | undefined;
32
32
  }[];
33
33
  selectedUnsubscribePages: number[];
34
+ forceRecreate: boolean;
34
35
  };
35
36
  editor: {
36
37
  locale: string;
@@ -52,6 +53,7 @@ export declare const useConfig: () => {
52
53
  testMessage: boolean;
53
54
  displayConditions: boolean;
54
55
  unsubscribe: boolean;
56
+ modulesDisabled: boolean;
55
57
  };
56
58
  blocks: {
57
59
  excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -115,6 +117,7 @@ export declare const useConfig: () => {
115
117
  } | undefined;
116
118
  }[];
117
119
  selectedUnsubscribePages: number[];
120
+ forceRecreate: boolean;
118
121
  } | null>;
119
122
  editor: import("vue").ComputedRef<{
120
123
  locale: string;
@@ -136,6 +139,7 @@ export declare const useConfig: () => {
136
139
  testMessage: boolean;
137
140
  displayConditions: boolean;
138
141
  unsubscribe: boolean;
142
+ modulesDisabled: boolean;
139
143
  } | null>;
140
144
  blocks: import("vue").ComputedRef<{
141
145
  excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Migrates legacy ItemsBlock templates to v2 format
3
+ * @param html - HTML string containing legacy items blocks
4
+ * @returns Migrated HTML with replaced variables and cleaned conditionals
5
+ */
6
+ export declare function migrateItemsBlock(html: string): string;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Control IDs used in the CouponBlock Extension
3
+ * These IDs are returned by the getId() method of each control
4
+ */
5
+ export declare enum CouponControlId {
6
+ TEXT_ALIGN = "coupon-block-text-align-control",
7
+ TEXT_COLOR = "coupon-block-text-color-control",
8
+ TEXT_SIZE = "coupon-block-text-size-control",
9
+ TEXT_STYLE = "coupon-block-text-style-control",
10
+ TEXT_FONT_FAMILY = "coupon-block-text-font-family-control",
11
+ TEXT_BACKGROUND = "coupon-block-text-background-control",
12
+ TEXT_PADDINGS = "coupon-block-text-paddings-control",
13
+ TEXT_LINE_SPACING = "coupon-block-text-line-spacing-control"
14
+ }
@@ -0,0 +1,108 @@
1
+ /**
2
+ * CouponBlock Control Instances
3
+ *
4
+ * This file generates all control instances for the CouponBlock
5
+ * using the reusable factory functions from controlFactories.ts
6
+ *
7
+ * Note: Factory-generated controls use runtime class generation which TypeScript
8
+ * cannot fully type-check. The controls are type-safe at runtime.
9
+ *
10
+ * These controls apply directly to the selected root element (no targetBlockId/containerSelector)
11
+ * to ensure styles are applied correctly regardless of nested element structure.
12
+ */
13
+ export declare const TextAlignControl: {
14
+ new (): {
15
+ getId(): string;
16
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
17
+ getParentControlId(): string;
18
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
19
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
20
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
21
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
22
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
23
+ };
24
+ };
25
+ export declare const TextColorControl: {
26
+ new (): {
27
+ getId(): string;
28
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
29
+ getParentControlId(): string;
30
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
31
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
32
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
33
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
34
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
35
+ };
36
+ };
37
+ export declare const TextSizeControl: {
38
+ new (): {
39
+ getId(): string;
40
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
41
+ getParentControlId(): string;
42
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
43
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
44
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
45
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
46
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
47
+ };
48
+ };
49
+ export declare const TextStyleControl: {
50
+ new (): {
51
+ getId(): string;
52
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
53
+ getParentControlId(): string;
54
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
55
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
56
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
57
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
58
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
59
+ };
60
+ };
61
+ export declare const TextFontFamilyControl: {
62
+ new (): {
63
+ getId(): string;
64
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
65
+ getParentControlId(): string;
66
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
67
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
68
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
69
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
70
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
71
+ };
72
+ };
73
+ export declare const TextBackgroundControl: {
74
+ new (): {
75
+ getId(): string;
76
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
77
+ getParentControlId(): string;
78
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
79
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
80
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
81
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
82
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
83
+ };
84
+ };
85
+ export declare const TextPaddingsControl: {
86
+ new (): {
87
+ getId(): string;
88
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
89
+ getParentControlId(): string;
90
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
91
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
92
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
93
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
94
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
95
+ };
96
+ };
97
+ export declare const TextLineSpacingControl: {
98
+ new (): {
99
+ getId(): string;
100
+ getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
101
+ getParentControlId(): string;
102
+ api: import("@stripoinc/ui-editor-extensions").ControlApi;
103
+ getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
104
+ getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
105
+ getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
106
+ isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
107
+ };
108
+ };
@@ -1,3 +1,3 @@
1
- declare const migrationTemplate = "\n <td \n class=\"coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block\" \n esd-extension-block-id=\"coupon-block\"\n >\n <p class=\"ins-title\" contenteditable=\"false\">{@COUPON_CODE}</p>\n </td>\n";
1
+ declare const migrationTemplate = "\n <td\n class=\"coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block\"\n esd-extension-block-id=\"coupon-block\"\n >\n <p class=\"ins-title\" contenteditable=\"false\">{@COUPON_CODE}</p>\n </td>\n";
2
2
  export declare function getDefaultTemplate(): string;
3
3
  export default migrationTemplate;
@@ -8,7 +8,5 @@ export declare class ButtonLinkControl extends CommonControl {
8
8
  getTemplate(): string;
9
9
  onRender(): void;
10
10
  onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
11
- _listenToFormUpdates(): void;
12
- _onLinkChange(value: string): void;
13
11
  _getLink(): string;
14
12
  }
@@ -29,5 +29,14 @@ export declare class ItemsBlockCardCompositionControl extends CommonControl {
29
29
  _onProductQuantityChange(value: boolean): void;
30
30
  _onProductPriceChange(value: boolean): void;
31
31
  _onProductOriginalPriceChange(value: boolean): void;
32
+ /**
33
+ * Updates both price cell widths in vertical layout based on priceOrientation and visibility.
34
+ * - When priceOrientation is 'vertical': both cells are 100% (stacked layout)
35
+ * - When priceOrientation is 'horizontal':
36
+ * - When original price is hidden, price cell expands to 100%
37
+ * - When price is hidden, original price cell expands to 100%
38
+ * - When both are visible, they share 50% each
39
+ */
40
+ _updatePriceCellWidthsForVerticalLayout(): void;
32
41
  _onProductButtonChange(value: boolean): void;
33
42
  }
@@ -8,7 +8,5 @@ export declare class ImageLinkControl extends CommonControl {
8
8
  getTemplate(): string;
9
9
  onRender(): void;
10
10
  onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
11
- _listenToFormUpdates(): void;
12
- _onLinkChange(value: string): void;
13
11
  _getLink(): string;
14
12
  }
@@ -9,7 +9,7 @@ export declare class PriceOrientationControl extends CommonControl {
9
9
  onRender(): void;
10
10
  onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
11
11
  _onPriceOrientationChange(value: string): void;
12
- private _updateHorizontalLayout;
13
12
  private _updateVerticalLayout;
13
+ private _updateHorizontalLayout;
14
14
  _getPriceOrientation(): string;
15
15
  }
@@ -0,0 +1,18 @@
1
+ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
+ import { CommonControl } from '../../../common-control';
3
+ import { ItemsBlockControlId } from '../../enums/controlEnums';
4
+ export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_SINGLE_PRICE;
5
+ export declare class PriceSinglePriceControl extends CommonControl {
6
+ private store;
7
+ getId(): string;
8
+ getTemplate(): string;
9
+ onRender(): void;
10
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
11
+ /**
12
+ * Syncs single price state from nodeConfig.
13
+ */
14
+ private _syncSinglePriceFromNodeConfig;
15
+ _onSinglePriceChange(value: boolean): void;
16
+ private _updatePriceBlock;
17
+ _getSinglePrice(): string;
18
+ }
@@ -31,10 +31,6 @@ export declare class ItemsBlockControl extends CommonControl {
31
31
  _updatePrice(price: string): void;
32
32
  _updateOriginalPrice(originalPrice: string): void;
33
33
  _updateQuantity(quantity: string): void;
34
- /**
35
- * @todo Optimize template reordering for performance.
36
- * @description Reorders the template structure based on current orientation and visibility settings.
37
- */
38
34
  _reOrderTemplate(): void;
39
35
  _updateDataTypeAttributes(itemsType: ProductType): void;
40
36
  _updateDataNumberAttributes(itemId: string): void;
@@ -42,6 +42,7 @@ export declare enum ItemsBlockControlId {
42
42
  PRICE_PADDINGS = "items-block-price-paddings-control",
43
43
  PRICE_HIDE_DISCOUNT = "items-block-price-hide-discount-control",
44
44
  PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control",
45
+ PRICE_SINGLE_PRICE = "items-block-price-single-price-control",
45
46
  PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control",
46
47
  PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control",
47
48
  PRICE_ORIENTATION = "items-block-price-orientation-control",
@@ -1,30 +1,4 @@
1
1
  export declare const templateFirstLine = "<td align=\"center\" class=\"ins-product-td items-block items-block-v2\">";
2
- export declare const configAttributes: {
3
- TYPE: string;
4
- ITEMS_INDEX_SELECT_CONTROL_VALUE: string;
5
- ORIENTATION: string;
6
- PRODUCT_NAME_TRIMMING: string;
7
- PRODUCT_PRICE_HIDE_DISCOUNT: string;
8
- PRODUCT_PRICE_FORMATTED: string;
9
- PRODUCT_PRICE_CURRENCY_SYMBOL: string;
10
- PRODUCT_PRICE_CURRENCY_LOCATION: string;
11
- PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION: string;
12
- PRODUCT_BUTTON_LINK: string;
13
- PRODUCT_IMAGE_LINK: string;
14
- PRODUCT_NAME_CONTROL_VALUE: string;
15
- PRODUCT_QUANTITY_CONTROL_VALUE: string;
16
- PRODUCT_PRICE_CONTROL_VALUE: string;
17
- BLOCK_INSTANCE_ID: string;
18
- NAME_CONTROL_ENABLED: string;
19
- QUANTITY_CONTROL_ENABLED: string;
20
- PRICE_CONTROL_OPENED: string;
21
- PRODUCT_IMAGE_VISIBLE: string;
22
- PRODUCT_NAME_VISIBLE: string;
23
- PRODUCT_QUANTITY_VISIBLE: string;
24
- PRODUCT_PRICE_VISIBLE: string;
25
- PRODUCT_ORIGINAL_PRICE_VISIBLE: string;
26
- PRODUCT_BUTTON_VISIBLE: string;
27
- };
28
2
  export declare const productPairs: {
29
3
  PAIRS_FOR_EXTENSION: {
30
4
  imageSrc: {
@@ -79,25 +53,37 @@ export declare const productPairs: {
79
53
  CART_ITEMS: {
80
54
  PRICE: string;
81
55
  PRICE_FORMATTED: string;
56
+ SINGLE_PRICE: string;
57
+ SINGLE_PRICE_FORMATTED: string;
82
58
  CURRENCY: string;
83
59
  DEFAULT_PRICE: string;
84
60
  DEFAULT_PRICE_FORMATTED: string;
61
+ DEFAULT_SINGLE_PRICE: string;
62
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
85
63
  DEFAULT_CURRENCY: string;
86
64
  };
87
65
  BROWSED_ITEMS: {
88
66
  PRICE: string;
89
67
  PRICE_FORMATTED: string;
68
+ SINGLE_PRICE: string;
69
+ SINGLE_PRICE_FORMATTED: string;
90
70
  CURRENCY: string;
91
71
  DEFAULT_PRICE: string;
92
72
  DEFAULT_PRICE_FORMATTED: string;
73
+ DEFAULT_SINGLE_PRICE: string;
74
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
93
75
  DEFAULT_CURRENCY: string;
94
76
  };
95
77
  PURCHASED_ITEMS: {
96
78
  PRICE: string;
97
79
  PRICE_FORMATTED: string;
80
+ SINGLE_PRICE: string;
81
+ SINGLE_PRICE_FORMATTED: string;
98
82
  CURRENCY: string;
99
83
  DEFAULT_PRICE: string;
100
84
  DEFAULT_PRICE_FORMATTED: string;
85
+ DEFAULT_SINGLE_PRICE: string;
86
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
101
87
  DEFAULT_CURRENCY: string;
102
88
  };
103
89
  };
@@ -105,25 +91,37 @@ export declare const productPairs: {
105
91
  CART_ITEMS: {
106
92
  PRICE: string;
107
93
  PRICE_FORMATTED: string;
94
+ SINGLE_PRICE: string;
95
+ SINGLE_PRICE_FORMATTED: string;
108
96
  CURRENCY: string;
109
97
  DEFAULT_PRICE: string;
110
98
  DEFAULT_PRICE_FORMATTED: string;
99
+ DEFAULT_SINGLE_PRICE: string;
100
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
111
101
  DEFAULT_CURRENCY: string;
112
102
  };
113
103
  BROWSED_ITEMS: {
114
104
  PRICE: string;
115
105
  PRICE_FORMATTED: string;
106
+ SINGLE_PRICE: string;
107
+ SINGLE_PRICE_FORMATTED: string;
116
108
  CURRENCY: string;
117
109
  DEFAULT_PRICE: string;
118
110
  DEFAULT_PRICE_FORMATTED: string;
111
+ DEFAULT_SINGLE_PRICE: string;
112
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
119
113
  DEFAULT_CURRENCY: string;
120
114
  };
121
115
  PURCHASED_ITEMS: {
122
116
  PRICE: string;
123
117
  PRICE_FORMATTED: string;
118
+ SINGLE_PRICE: string;
119
+ SINGLE_PRICE_FORMATTED: string;
124
120
  CURRENCY: string;
125
121
  DEFAULT_PRICE: string;
126
122
  DEFAULT_PRICE_FORMATTED: string;
123
+ DEFAULT_SINGLE_PRICE: string;
124
+ DEFAULT_SINGLE_PRICE_FORMATTED: string;
127
125
  DEFAULT_CURRENCY: string;
128
126
  };
129
127
  };
@@ -41,6 +41,7 @@ export declare const DefaultConfigValues: {
41
41
  productOriginalPriceVisible: string;
42
42
  productButtonVisible: string;
43
43
  productImageWidth: string;
44
+ productImageHeight: string;
44
45
  };
45
46
  export declare const ItemInCartOptions: {
46
47
  [x: string]: {
@@ -10,6 +10,7 @@ interface ItemsBlockState {
10
10
  currencySymbol: string;
11
11
  currencyLocation: string;
12
12
  formattedPrice: boolean;
13
+ singlePrice: boolean;
13
14
  priceOrientation: 'vertical' | 'horizontal';
14
15
  templateData: {
15
16
  imageSrc: string;
@@ -31,6 +32,7 @@ export declare const useItemsBlockStore: import("pinia").StoreDefinition<"guidoI
31
32
  setCurrencySymbol(currencySymbol: string): void;
32
33
  setCurrencyLocation(currencyLocation: string): void;
33
34
  setFormattedPrice(formattedPrice: boolean): void;
35
+ setSinglePrice(singlePrice: boolean): void;
34
36
  setPriceOrientation(priceOrientation: "vertical" | "horizontal"): void;
35
37
  setTemplateData(templateData: ItemsBlockState["templateData"]): void;
36
38
  updateFromAttributes(attributes: {
@@ -1,6 +1,8 @@
1
+ import type { ItemsBlockConfig } from './utils/nodeConfigUtils';
1
2
  declare const migrationTemplate = "ADD YOUR MIGRATION HERE";
2
3
  type ProductType = 'CART_ITEMS' | 'BROWSED_ITEMS' | 'PURCHASED_ITEMS';
3
4
  type OrientationType = 'vertical' | 'horizontal';
5
+ type PriceOrientationType = 'vertical' | 'horizontal';
4
6
  type TemplateParameters = {
5
7
  orientation: OrientationType;
6
8
  itemsType: ProductType;
@@ -8,6 +10,25 @@ type TemplateParameters = {
8
10
  currencySymbol?: string;
9
11
  currencyLocation?: string;
10
12
  formattedPrice?: boolean;
13
+ /** Whether to show single product price (price divided by quantity) */
14
+ singlePrice?: boolean;
15
+ migrate?: boolean;
16
+ /** Legacy config format (data-* attributes for migration) */
17
+ configBlockAttributes?: Record<string, string>;
18
+ /** New config format (Stripo V2 nodeConfig from esd-ext-config) */
19
+ nodeConfig?: Partial<ItemsBlockConfig>;
20
+ /** Extracted styles from a[product-attr="name"] for migration */
21
+ nameStyles?: string;
22
+ /** Extracted styles from a.es-button for migration */
23
+ buttonStyles?: string;
24
+ /** Extracted styles from p[product-attr="price"] for migration */
25
+ priceStyles?: string;
26
+ /** Extracted styles from p[product-attr="originalPrice"] for migration */
27
+ originalPriceStyles?: string;
28
+ /** Extracted styles from p[product-attr="quantity"] for migration */
29
+ quantityStyles?: string;
30
+ /** Price orientation within the card ('vertical' = stacked, 'horizontal' = side-by-side) */
31
+ priceOrientation?: PriceOrientationType;
11
32
  };
12
33
  /**
13
34
  * Generates the default template for the Items Block.
@@ -20,5 +41,5 @@ type TemplateParameters = {
20
41
  * @param params.formattedPrice - Whether to use formatted price display
21
42
  * @returns HTML template string for the Items Block
22
43
  */
23
- export declare function getDefaultTemplate({ orientation, itemsType, itemId, currencySymbol, currencyLocation, formattedPrice, }: TemplateParameters): string;
44
+ export declare function getDefaultTemplate({ orientation, itemsType, itemId, currencySymbol, currencyLocation, migrate, formattedPrice, configBlockAttributes, nodeConfig, nameStyles, buttonStyles, priceStyles, originalPriceStyles, quantityStyles, priceOrientation, }: TemplateParameters): string;
24
45
  export default migrationTemplate;
@@ -0,0 +1,73 @@
1
+ import { OrientationType, ProductType } from '@@/Types/extensions/items';
2
+ import { ImmutableHtmlNode, ImmutableHtmlElementNode, ControlApi, BlockApi } from '@stripoinc/ui-editor-extensions';
3
+ /**
4
+ * Typed configuration object for Items Block.
5
+ * Configuration is stored directly on the block node using Stripo V2's getNodeConfig/setNodeConfig API.
6
+ */
7
+ export interface ItemsBlockConfig {
8
+ initialized: boolean;
9
+ blockInstanceId: string;
10
+ source: ProductType;
11
+ type: ProductType;
12
+ itemsSelectValue: string;
13
+ orientation: OrientationType;
14
+ nameTrimming: boolean;
15
+ nameControlEnabled: boolean;
16
+ priceHideDiscount: boolean;
17
+ priceFormatted: boolean;
18
+ priceSinglePrice: boolean;
19
+ priceCurrencySymbol: string;
20
+ priceCurrencyLocation: string;
21
+ priceControlOpened: boolean;
22
+ priceOrientation: 'vertical' | 'horizontal';
23
+ quantityControlEnabled: boolean;
24
+ buttonLink: string;
25
+ imageLink: string;
26
+ buttonLabel: string;
27
+ /** Whether button should be full width (true = es-fw class) or inline (false = es-il class) */
28
+ buttonFullWidth: boolean;
29
+ imageVisible: boolean;
30
+ nameVisible: boolean;
31
+ quantityVisible: boolean;
32
+ priceVisible: boolean;
33
+ originalPriceVisible: boolean;
34
+ buttonVisible: boolean;
35
+ }
36
+ /**
37
+ * Generates a unique block instance ID.
38
+ */
39
+ export declare function generateBlockInstanceId(): string;
40
+ /**
41
+ * Returns default ItemsBlockConfig values.
42
+ * These are used when initializing a new block or when migrating from legacy format.
43
+ */
44
+ export declare function getDefaultItemsBlockConfig(): ItemsBlockConfig;
45
+ /**
46
+ * Gets the Items block container element from the current node.
47
+ * The container is identified by the `.items-block-v2` class (new) or `.esd-cart-items-block` (legacy).
48
+ * @param currentNode - The current node from the control (usually this.currentNode)
49
+ * @returns The container element or null if not found
50
+ */
51
+ export declare function getItemsBlockContainer(currentNode: ImmutableHtmlNode | undefined): ImmutableHtmlElementNode | null;
52
+ /**
53
+ * Gets the node configuration from the Items block.
54
+ * Uses Stripo V2's getNodeConfig() API.
55
+ * Falls back to migrating from legacy config block if nodeConfig is empty.
56
+ * @param currentNode - The current node from the control
57
+ * @returns The ItemsBlockConfig object or null if not found
58
+ */
59
+ export declare function getItemsBlockConfig(currentNode: ImmutableHtmlNode | undefined): ItemsBlockConfig | null;
60
+ /**
61
+ * Sets the node configuration on the Items block.
62
+ * Uses Stripo V2's setNodeConfig() API.
63
+ * @param currentNode - The current node from the control
64
+ * @param api - The API object (ControlApi or BlockApi)
65
+ * @param config - The configuration to set (partial update supported)
66
+ */
67
+ export declare function setItemsBlockConfig(currentNode: ImmutableHtmlNode | undefined, api: ControlApi | BlockApi, config: Partial<ItemsBlockConfig>): void;
68
+ /**
69
+ * Gets the block instance ID from the node config.
70
+ * @param currentNode - The current node from the control
71
+ * @returns The block instance ID or null if not found
72
+ */
73
+ export declare function getBlockInstanceIdFromConfig(currentNode: ImmutableHtmlNode | undefined): string | null;
@@ -56,25 +56,24 @@ export declare abstract class CommonControl extends Control {
56
56
  onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
57
57
  onDestroy(): void;
58
58
  /**
59
- * Gets the config block element from the current node.
60
- * @returns The config block element or null if not found
59
+ * Gets the Items block container element from the current node.
60
+ * @returns The container element or null if not found
61
61
  */
62
- protected getConfigBlock(): ImmutableHtmlElementNode | null;
62
+ protected getItemsBlockContainer(): ImmutableHtmlElementNode | null;
63
63
  /**
64
- * Gets the current block instance ID from the config block.
65
- * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
64
+ * Gets the current block instance ID from the node config (Stripo V2).
66
65
  * @returns The block instance ID or null if not found
67
66
  */
68
- protected getBlockInstanceId(blockInstanceIdAttribute?: string): string | null;
67
+ protected getBlockInstanceId(): string | null;
69
68
  /**
70
69
  * Handles block instance change detection and syncing.
71
- * This is a helper method for controls that need to sync attributes when switching between block instances.
72
- * @param syncFunction - Function to call when block instance changes (to sync from attributes)
70
+ * This is a helper method for controls that need to sync config when switching between block instances.
71
+ * Uses Stripo V2 nodeConfig API for block instance tracking.
72
+ * @param syncFunction - Function to call when block instance changes (to sync from node config)
73
73
  * @param updateUI - Function to call to update the UI (called both on change and when same block)
74
- * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
75
74
  * @returns true if block instance changed, false otherwise
76
75
  */
77
- protected handleBlockInstanceChange(syncFunction: (node: ImmutableHtmlNode) => void, updateUI: () => void, blockInstanceIdAttribute?: string): boolean;
76
+ protected handleBlockInstanceChange(syncFunction: (node: ImmutableHtmlNode) => void, updateUI: () => void): boolean;
78
77
  _GuLabel({ text, name, position }: LabelProps): string;
79
78
  _GuToggle(name: string): string;
80
79
  _GuSelectItem({ text, value }: {