@useinsider/guido 2.1.0-beta.e2d48fe → 2.1.0-beta.e4c3fa1

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 (183) hide show
  1. package/README.md +36 -0
  2. package/dist/@types/config/schemas.js +70 -65
  3. package/dist/components/Guido.vue.js +1 -1
  4. package/dist/components/Guido.vue2.js +69 -58
  5. package/dist/components/organisms/base/Toaster.vue.js +4 -4
  6. package/dist/components/organisms/base/Toaster.vue2.js +12 -9
  7. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +5 -5
  8. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js +2 -2
  9. package/dist/components/organisms/extensions/recommendation/FilterSelectionDrawer.vue2.js +15 -14
  10. package/dist/components/organisms/header/HeaderWrapper.vue.js +9 -9
  11. package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js +1 -1
  12. package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js +19 -19
  13. package/dist/composables/useActionsApi.js +15 -13
  14. package/dist/composables/useBlocksConfig.js +26 -16
  15. package/dist/composables/useHtmlValidator.js +114 -104
  16. package/dist/composables/useRecommendation.js +54 -21
  17. package/dist/composables/useStripo.js +25 -23
  18. package/dist/composables/useVersionHistoryApi.js +1 -1
  19. package/dist/config/compiler/recommendationCompilerRules.js +45 -39
  20. package/dist/config/compiler/utils/recommendationCompilerUtils.js +121 -0
  21. package/dist/config/i18n/en/index.js +11 -0
  22. package/dist/config/i18n/en/labels.json.js +7 -0
  23. package/dist/config/i18n/en/toasters.json.js +56 -0
  24. package/dist/config/i18n/en/tooltips.json.js +82 -0
  25. package/dist/config/i18n/index.js +7 -0
  26. package/dist/config/migrator/itemsBlockMigrator.js +127 -122
  27. package/dist/config/migrator/recommendationMigrator.js +2 -2
  28. package/dist/enums/defaults.js +8 -4
  29. package/dist/enums/extensions/recommendationBlock.js +1 -1
  30. package/dist/enums/recommendation.js +16 -15
  31. package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +29 -29
  32. package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +29 -29
  33. package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +31 -29
  34. package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +0 -1
  35. package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +29 -27
  36. package/dist/extensions/Blocks/Items/settingsPanel.js +10 -15
  37. package/dist/extensions/Blocks/Recommendation/block.js +133 -9
  38. package/dist/extensions/Blocks/Recommendation/constants/blockIds.js +4 -0
  39. package/dist/extensions/Blocks/Recommendation/constants/controlIds.js +4 -0
  40. package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +69 -0
  41. package/dist/extensions/Blocks/Recommendation/constants/layout.js +24 -0
  42. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +22 -0
  43. package/dist/extensions/Blocks/Recommendation/controls/button/index.js +64 -0
  44. package/dist/extensions/Blocks/Recommendation/controls/cardBackground/index.js +80 -0
  45. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +232 -0
  46. package/dist/extensions/Blocks/Recommendation/controls/image/index.js +19 -0
  47. package/dist/extensions/Blocks/Recommendation/controls/layout/index.js +102 -0
  48. package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +102 -0
  49. package/dist/extensions/Blocks/Recommendation/controls/main/currency.js +207 -0
  50. package/dist/extensions/Blocks/Recommendation/controls/main/filters.js +52 -0
  51. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +321 -0
  52. package/dist/extensions/Blocks/Recommendation/controls/main/locale.js +70 -0
  53. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +168 -0
  54. package/dist/extensions/Blocks/Recommendation/controls/main/shuffle.js +67 -0
  55. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +361 -0
  56. package/dist/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js +21 -0
  57. package/dist/extensions/Blocks/Recommendation/controls/name/index.js +46 -0
  58. package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js +108 -0
  59. package/dist/extensions/Blocks/Recommendation/controls/oldPrice/index.js +44 -0
  60. package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.js +48 -0
  61. package/dist/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextAfterControl.js → omnibusDiscount/textAfter.js} +16 -14
  62. package/dist/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextBeforeControl.js → omnibusDiscount/textBefore.js} +16 -14
  63. package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/index.js +48 -0
  64. package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextAfterControl.js → omnibusPrice/textAfter.js} +16 -14
  65. package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextBeforeControl.js → omnibusPrice/textBefore.js} +14 -12
  66. package/dist/extensions/Blocks/Recommendation/controls/price/index.js +44 -0
  67. package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js +345 -0
  68. package/dist/extensions/Blocks/Recommendation/extension.js +40 -17
  69. package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +19 -3
  70. package/dist/extensions/Blocks/Recommendation/recommendation.css.js +13 -4
  71. package/dist/extensions/Blocks/Recommendation/services/configService.js +240 -0
  72. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +21 -10
  73. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +297 -209
  74. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +228 -0
  75. package/dist/extensions/Blocks/Recommendation/templates/grid/migration.js +251 -0
  76. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +66 -0
  77. package/dist/extensions/Blocks/Recommendation/templates/index.js +12 -0
  78. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +169 -0
  79. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +73 -0
  80. package/dist/extensions/Blocks/Recommendation/templates/utils.js +134 -0
  81. package/dist/extensions/Blocks/Recommendation/types/nodeConfig.js +6 -0
  82. package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js +9 -9
  83. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +26 -15
  84. package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +29 -0
  85. package/dist/extensions/Blocks/Recommendation/utils/tagName.js +46 -0
  86. package/dist/extensions/Blocks/Unsubscribe/block.js +29 -29
  87. package/dist/extensions/Blocks/Unsubscribe/control.js +12 -9
  88. package/dist/extensions/Blocks/Unsubscribe/elements/preview.js +13 -11
  89. package/dist/extensions/Blocks/Unsubscribe/styles.css.js +31 -1
  90. package/dist/extensions/Blocks/controlFactories.js +125 -93
  91. package/dist/extensions/ModulesTabIcons/extension.js +17 -0
  92. package/dist/guido.css +1 -1
  93. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +317 -193
  94. package/dist/services/recommendationApi.js +11 -8
  95. package/dist/services/stripoApi.js +20 -17
  96. package/dist/services/templateLibraryApi.js +16 -13
  97. package/dist/src/@types/config/schemas.d.ts +8 -0
  98. package/dist/src/components/wrappers/WpDrawer.vue.d.ts +1 -1
  99. package/dist/src/composables/useConfig.d.ts +4 -0
  100. package/dist/src/composables/useRecommendation.d.ts +1 -0
  101. package/dist/src/config/compiler/utils/recommendationCompilerUtils.d.ts +17 -0
  102. package/dist/src/config/i18n/en/index.d.ts +1 -0
  103. package/dist/src/config/i18n/index.d.ts +16 -0
  104. package/dist/src/enums/defaults.d.ts +4 -0
  105. package/dist/src/extensions/Blocks/Recommendation/block.d.ts +67 -0
  106. package/dist/src/extensions/Blocks/Recommendation/constants/blockIds.d.ts +13 -0
  107. package/dist/src/extensions/Blocks/Recommendation/{constants.d.ts → constants/controlIds.d.ts} +0 -24
  108. package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts +55 -0
  109. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +13 -0
  110. package/dist/src/extensions/Blocks/Recommendation/constants/layout.d.ts +45 -0
  111. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +40 -0
  112. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +143 -0
  113. package/dist/src/extensions/Blocks/Recommendation/controls/cardBackground/index.d.ts +31 -0
  114. package/dist/src/extensions/Blocks/Recommendation/{cardCompositionControl.d.ts → controls/cardComposition/index.d.ts} +23 -3
  115. package/dist/src/extensions/Blocks/Recommendation/controls/image/index.d.ts +35 -0
  116. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +21 -589
  117. package/dist/src/extensions/Blocks/Recommendation/controls/layout/index.d.ts +37 -0
  118. package/dist/src/extensions/Blocks/Recommendation/controls/main/algorithm.d.ts +29 -0
  119. package/dist/src/extensions/Blocks/Recommendation/controls/main/currency.d.ts +52 -0
  120. package/dist/src/extensions/Blocks/Recommendation/controls/main/filters.d.ts +22 -0
  121. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +102 -0
  122. package/dist/src/extensions/Blocks/Recommendation/controls/main/locale.d.ts +24 -0
  123. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +60 -0
  124. package/dist/src/extensions/Blocks/Recommendation/controls/main/shuffle.d.ts +23 -0
  125. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +231 -0
  126. package/dist/src/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.d.ts +29 -0
  127. package/dist/src/extensions/Blocks/Recommendation/controls/name/index.d.ts +97 -0
  128. package/dist/src/extensions/Blocks/Recommendation/controls/name/textTrim.d.ts +34 -0
  129. package/dist/src/extensions/Blocks/Recommendation/controls/oldPrice/index.d.ts +95 -0
  130. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.d.ts +100 -0
  131. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.d.ts +15 -0
  132. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.d.ts +15 -0
  133. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/index.d.ts +100 -0
  134. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/textAfter.d.ts +15 -0
  135. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/textBefore.d.ts +15 -0
  136. package/dist/src/extensions/Blocks/Recommendation/controls/price/index.d.ts +95 -0
  137. package/dist/src/extensions/Blocks/Recommendation/controls/spacing/index.d.ts +115 -0
  138. package/dist/src/extensions/Blocks/Recommendation/extension.d.ts +9 -0
  139. package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts +151 -0
  140. package/dist/src/extensions/Blocks/Recommendation/services/index.d.ts +6 -0
  141. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +139 -468
  142. package/dist/src/extensions/Blocks/Recommendation/templates/grid/elementRenderer.d.ts +20 -0
  143. package/dist/src/extensions/Blocks/Recommendation/templates/{migrationTemplate.d.ts → grid/migration.d.ts} +11 -4
  144. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +33 -0
  145. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +41 -0
  146. package/dist/src/extensions/Blocks/Recommendation/templates/list/elementRenderer.d.ts +8 -0
  147. package/dist/src/extensions/Blocks/Recommendation/templates/list/migration.d.ts +25 -0
  148. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +18 -0
  149. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +66 -0
  150. package/dist/src/extensions/Blocks/Recommendation/types/index.d.ts +7 -0
  151. package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts +174 -0
  152. package/dist/src/extensions/Blocks/Recommendation/utils/priceFormatter.d.ts +33 -0
  153. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +113 -0
  154. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +77 -0
  155. package/dist/src/extensions/Blocks/Unsubscribe/control.d.ts +1 -0
  156. package/dist/src/extensions/ModulesTabIcons/extension.d.ts +2 -0
  157. package/dist/src/stores/config.d.ts +36 -0
  158. package/dist/static/styles/components/notification.css.js +19 -0
  159. package/dist/static/styles/components/tools.css.js +6 -2
  160. package/dist/static/styles/components/version-history.css.js +10 -2
  161. package/dist/static/styles/components/wide-panel.css.js +18 -2
  162. package/dist/static/styles/customEditorStyle.css.js +35 -11
  163. package/dist/static/styles/variables.css.js +2 -0
  164. package/dist/static/templates/empty/index.html.js +74 -0
  165. package/dist/static/templates/empty/style.css.js +779 -0
  166. package/dist/stores/unsubscribe.js +37 -34
  167. package/dist/utils/pairProductVariables.js +57 -56
  168. package/dist/utils/templatePreparation.js +15 -14
  169. package/package.json +1 -1
  170. package/dist/extensions/Blocks/Recommendation/cardCompositionControl.js +0 -187
  171. package/dist/extensions/Blocks/Recommendation/constants.js +0 -13
  172. package/dist/extensions/Blocks/Recommendation/control.js +0 -336
  173. package/dist/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.js +0 -68
  174. package/dist/extensions/Blocks/Recommendation/controls/index.js +0 -245
  175. package/dist/extensions/Blocks/Recommendation/controls/nameTextTrimControl.js +0 -74
  176. package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js +0 -188
  177. package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js +0 -181
  178. package/dist/extensions/Blocks/Recommendation/templates/migrationTemplate.js +0 -189
  179. package/dist/extensions/Blocks/Recommendation/templates/templateUtils.js +0 -209
  180. package/dist/src/extensions/Blocks/Recommendation/control.d.ts +0 -38
  181. package/dist/src/extensions/Blocks/Recommendation/controls/nameTextTrimControl.d.ts +0 -16
  182. package/dist/src/extensions/Blocks/Recommendation/templates/blockTemplate.d.ts +0 -16
  183. package/dist/src/extensions/Blocks/Recommendation/templates/templateUtils.d.ts +0 -52
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Layout Control
3
+ *
4
+ * Manages recommendation block layout orientation
5
+ * Allows switching between grid and list layouts
6
+ *
7
+ * Configuration is stored via node config (persists with template).
8
+ */
9
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
10
+ import { CommonControl } from '../../../common-control';
11
+ import { type Orientation } from '../../templates';
12
+ export declare const LAYOUT_CONTROL_ID = "recommendation-layout-control";
13
+ /**
14
+ * Control for managing recommendation block layout orientation
15
+ * Allows switching between grid and list layouts
16
+ */
17
+ export declare class LayoutControl extends CommonControl {
18
+ private store;
19
+ private isChangingLayout;
20
+ getId(): string;
21
+ getTemplate(): string;
22
+ onRender(): void;
23
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
24
+ _setFormValues(): void;
25
+ /**
26
+ * Handles layout change
27
+ * Updates node config, data attribute and regenerates product rows
28
+ */
29
+ _onLayoutChange(layout: Orientation): void;
30
+ /**
31
+ * Regenerates product rows based on the selected layout
32
+ * Uses unified style-preserving regeneration to maintain user customizations
33
+ * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
34
+ */
35
+ _regenerateProductRows(layout: Orientation): void;
36
+ _listenToFormUpdates(): void;
37
+ }
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Algorithm Selection Control
3
+ *
4
+ * Handles recommendation algorithm selection and product IDs for manual merchandising:
5
+ * - Algorithm/strategy selection
6
+ * - Product IDs input (visible only for manual merchandising)
7
+ *
8
+ * Configuration is stored via node config (persists with template).
9
+ * Algorithm options are fetched from API and cached in Pinia store.
10
+ */
11
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
12
+ import { CommonControl } from '../../../common-control';
13
+ export declare const ALGORITHM_CONTROL_ID = "recommendation-algorithm-control";
14
+ /**
15
+ * Control for selecting recommendation algorithm and manual product IDs
16
+ */
17
+ export declare class AlgorithmControl extends CommonControl {
18
+ private store;
19
+ getId(): string;
20
+ getTemplate(): string;
21
+ onRender(): void;
22
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
23
+ _setFormValues(): void;
24
+ _initializeSelectItems(): void;
25
+ _setProductIdsVisibility(strategy?: string): void;
26
+ _onAlgorithmChange(value: string): void;
27
+ _onProductIdsChange(value: string): void;
28
+ _listenToFormUpdates(): void;
29
+ }
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Currency Settings Control
3
+ *
4
+ * Handles all currency-related configuration for recommendation products:
5
+ * - Currency type
6
+ * - Currency location (before/after)
7
+ * - Currency symbol
8
+ * - Thousand separator
9
+ * - Decimal separator
10
+ * - Decimal count
11
+ *
12
+ * Configuration is stored via node config (persists with template).
13
+ * Currency options are fetched from API and cached in Pinia store.
14
+ */
15
+ import type { CurrencyConfig } from '../../types/nodeConfig';
16
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
17
+ import { CommonControl } from '../../../common-control';
18
+ export declare const CURRENCY_CONTROL_ID = "recommendation-currency-control";
19
+ /**
20
+ * Control for managing currency display settings in recommendation blocks
21
+ */
22
+ export declare class CurrencyControl extends CommonControl {
23
+ private store;
24
+ private storeUnsubscription;
25
+ getId(): string;
26
+ getTemplate(): string;
27
+ onRender(): void;
28
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
29
+ onDestroy(): void;
30
+ _setFormValues(): void;
31
+ _initializeSelectItems(): void;
32
+ /**
33
+ * Applies currency updates to node config, HTML attributes, Pinia store, and DOM.
34
+ * @param updates - Partial currency config to merge
35
+ * @param triggerRefetch - Whether to trigger a product API refetch.
36
+ * true for currency code changes (different prices from API),
37
+ * false for display-only changes (symbol, separators, alignment, decimal count).
38
+ */
39
+ _updateCurrency(updates: Partial<CurrencyConfig>, triggerRefetch?: boolean): void;
40
+ _onCurrencyChange(value: string): void;
41
+ _onCurrencyLocationChange(value: string): void;
42
+ _onCurrencySymbolChange(value: string): void;
43
+ _onThousandSeparatorChange(value: string): void;
44
+ _onDecimalSeparatorChange(value: string): void;
45
+ _onDecimalCountChange(value: string): void;
46
+ _listenToFormUpdates(): void;
47
+ /**
48
+ * Subscribe to store changes to update currency selects when API data arrives
49
+ * This handles the case where the control renders before currency list is loaded
50
+ */
51
+ _subscribeToStoreChanges(): void;
52
+ }
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Filters Control
3
+ *
4
+ * Handles the filter selection UI for recommendation products
5
+ * Opens filter selection drawer when button is clicked
6
+ */
7
+ import { CommonControl } from '../../../common-control';
8
+ export declare const FILTERS_CONTROL_ID = "recommendation-filters-control";
9
+ /**
10
+ * Control for managing recommendation product filters
11
+ */
12
+ export declare class FiltersControl extends CommonControl {
13
+ private store;
14
+ private addFilterListener;
15
+ private addFilterButton;
16
+ getId(): string;
17
+ getTemplate(): string;
18
+ onRender(): void;
19
+ onDestroy(): void;
20
+ _onFilterSelectClick(): void;
21
+ _setupButtonListener(): void;
22
+ }
@@ -0,0 +1,102 @@
1
+ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
+ import { CommonControl } from '../../../common-control';
3
+ import { AlgorithmControl, ALGORITHM_CONTROL_ID } from './algorithm';
4
+ import { CurrencyControl, CURRENCY_CONTROL_ID } from './currency';
5
+ import { FiltersControl, FILTERS_CONTROL_ID } from './filters';
6
+ import { LocaleControl, LOCALE_CONTROL_ID } from './locale';
7
+ import { ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID } from './productLayout';
8
+ import { ShuffleControl, SHUFFLE_CONTROL_ID } from './shuffle';
9
+ export declare const CONTROL_BLOCK_ID = "ui-elements-recommendation-block";
10
+ export { AlgorithmControl, ALGORITHM_CONTROL_ID, LocaleControl, LOCALE_CONTROL_ID, CurrencyControl, CURRENCY_CONTROL_ID, ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID, FiltersControl, FILTERS_CONTROL_ID, ShuffleControl, SHUFFLE_CONTROL_ID, };
11
+ export * from './utils';
12
+ /**
13
+ * Main recommendation block control that composes all sub-controls
14
+ * Registered in the Settings tab of the block's settings panel
15
+ */
16
+ export declare class RecommendationBlockControl extends CommonControl {
17
+ private store;
18
+ private storeUnsubscription;
19
+ private algorithmControl;
20
+ private localeControl;
21
+ private currencyControl;
22
+ private productLayoutControl;
23
+ private filtersControl;
24
+ private shuffleControl;
25
+ getId(): string;
26
+ getTemplate(): string;
27
+ onRender(): Promise<void>;
28
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
29
+ onDestroy(): void;
30
+ /**
31
+ * Initialize all sub-controls with the shared API context
32
+ * Each sub-control manages its own form values and event listeners
33
+ */
34
+ private _initializeSubControls;
35
+ /**
36
+ * Syncs persisted node config into the Pinia store's block state.
37
+ *
38
+ * setCurrentBlock() creates a default entry (USD, en_US, mostPopular).
39
+ * For saved templates, the real config lives in the node (e.g., TRY, tr_TR).
40
+ * This method reads it and patches the store so fetchRecommendationProducts()
41
+ * uses the correct values.
42
+ *
43
+ * Uses triggerRefetch: false because the fetch hasn't happened yet —
44
+ * values are being prepared for the upcoming initial fetch.
45
+ */
46
+ private _syncNodeConfigToStore;
47
+ /**
48
+ * Fetches initial data for a block in three phases:
49
+ * 1. Shared reference data (algorithms, currencies, filters) — parallel
50
+ * 2. Smart defaults for new blocks (currency, algorithm) — sequential
51
+ * 3. Product data with correct defaults — sequential
52
+ *
53
+ * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
54
+ * Marks the block as initialized to prevent redundant fetches on re-selection.
55
+ */
56
+ private _fetchBlockData;
57
+ /**
58
+ * Applies smart defaults for newly dropped blocks.
59
+ *
60
+ * For new blocks (config still matches hardcoded defaults), validates that
61
+ * the default currency and algorithm are available from the API response.
62
+ * If not, falls back to the first available option.
63
+ *
64
+ * Saved templates with user-customized config are left unchanged because
65
+ * their values won't match the hardcoded defaults.
66
+ */
67
+ private _applySmartDefaults;
68
+ /**
69
+ * Reads the recommendation-id attribute from the block element within the node
70
+ */
71
+ private _getRecommendationIdFromNode;
72
+ /**
73
+ * Debounced product fetch to prevent rapid API calls during config changes
74
+ */
75
+ private _debouncedFetchProducts;
76
+ /**
77
+ * Debounced content update when products arrive from API.
78
+ *
79
+ * Tries in-place update first (preserves user-applied styles) — this succeeds
80
+ * when the product count matches the DOM (algorithm/locale/currency changes).
81
+ *
82
+ * Falls back to full regeneration when product count differs from DOM — this
83
+ * happens after "Number of Products" changes where the DOM still has the old
84
+ * count. The store pads products to the configured size, so in-place only
85
+ * fails when the size actually changed.
86
+ */
87
+ private _debouncedRegenerateWithProducts;
88
+ /**
89
+ * Listen to store changes that require product refresh or regeneration.
90
+ *
91
+ * Uses configVersion counter (incremented only by patchCurrentBlockConfig)
92
+ * to distinguish user-initiated config changes from internal mutations
93
+ * (e.g., fetchRecommendationCreateData setting preferred currency).
94
+ *
95
+ * Tracks currentRecommendationId to detect block switches. When the user
96
+ * selects a different recommendation block, the proxy getters (e.g.,
97
+ * recommendationProducts) return the new block's data — a different array
98
+ * reference that would be falsely detected as "new products arrived".
99
+ * We skip that tick and update tracking references instead.
100
+ */
101
+ private _listenStateUpdates;
102
+ }
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Locale Selection Control
3
+ *
4
+ * Handles locale/language selection for recommendation products.
5
+ * Configuration is stored via node config (persists with template).
6
+ * Language options are fetched from API and cached in Pinia store.
7
+ */
8
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
9
+ import { CommonControl } from '../../../common-control';
10
+ export declare const LOCALE_CONTROL_ID = "recommendation-locale-control";
11
+ /**
12
+ * Control for selecting recommendation content locale/language
13
+ */
14
+ export declare class LocaleControl extends CommonControl {
15
+ private store;
16
+ getId(): string;
17
+ getTemplate(): string;
18
+ onRender(): void;
19
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
20
+ _setFormValues(): void;
21
+ _initializeSelectItems(): void;
22
+ _onLocaleChange(value: string): void;
23
+ _listenToFormUpdates(): void;
24
+ }
@@ -0,0 +1,60 @@
1
+ /**
2
+ * Product Layout Control
3
+ *
4
+ * Handles product display configuration:
5
+ * - Number of products to show
6
+ * - Products per row on desktop (hidden for list layout)
7
+ * - Products per row on mobile (hidden for list layout)
8
+ * - Triggers product row regeneration on changes
9
+ *
10
+ * Desktop/mobile counters swap visibility based on editor mode
11
+ * (detected via Stripo's EditorStatePropertyType.previewDeviceMode).
12
+ *
13
+ * Configuration is stored via node config (persists with template).
14
+ */
15
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
16
+ import { CommonControl } from '../../../common-control';
17
+ export declare const PRODUCT_LAYOUT_CONTROL_ID = "recommendation-product-layout-control";
18
+ /**
19
+ * Control for configuring product count and layout density
20
+ * Includes both desktop and mobile "products per row" counters
21
+ */
22
+ export declare class ProductLayoutControl extends CommonControl {
23
+ private store;
24
+ private storeUnsubscription;
25
+ getId(): string;
26
+ getTemplate(): string;
27
+ onRender(): void;
28
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
29
+ onDestroy(): void;
30
+ _setFormValues(): void;
31
+ /**
32
+ * Checks if the editor is currently in mobile preview mode
33
+ * using Stripo's EditorStatePropertyType API.
34
+ */
35
+ _isMobileMode(): boolean;
36
+ /**
37
+ * Updates counter visibility based on layout orientation and editor mode.
38
+ * - List layout: hide both counters (products always full-width)
39
+ * - Grid + desktop mode: show desktop counter, hide mobile counter
40
+ * - Grid + mobile mode: show mobile counter, hide desktop counter
41
+ */
42
+ _updateProductsInRowVisibility(): void;
43
+ /**
44
+ * Subscribes to editor preview mode changes via Stripo API.
45
+ * When the user switches between desktop/mobile preview, toggles
46
+ * which "Products in One Row" counter is visible.
47
+ */
48
+ _subscribeToEditorModeChanges(): void;
49
+ _onProductCountChange(value: string): void;
50
+ _onProductsInRowChange(value: number): void;
51
+ _onMobileCardsInRowChange(value: number): void;
52
+ _regenerateProductRows(): void;
53
+ _debouncedRegenerateProductRows: import("@vueuse/shared").PromisifyFn<() => void>;
54
+ _listenToFormUpdates(): void;
55
+ /**
56
+ * Subscribe to store changes to update visibility when layout changes
57
+ * This is still needed because layout changes come from LayoutControl
58
+ */
59
+ _listenStateUpdates(): void;
60
+ }
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Shuffle Products Control
3
+ *
4
+ * Handles the toggle for shuffling/randomizing recommended products.
5
+ * Configuration is stored via node config (persists with template).
6
+ */
7
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
8
+ import { CommonControl } from '../../../common-control';
9
+ export declare const SHUFFLE_CONTROL_ID = "recommendation-shuffle-control";
10
+ /**
11
+ * Control for toggling product shuffle/randomization
12
+ */
13
+ export declare class ShuffleControl extends CommonControl {
14
+ private store;
15
+ getId(): string;
16
+ getTemplate(): string;
17
+ onRender(): void;
18
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
19
+ _setFormValues(): void;
20
+ _initializeToggle(): void;
21
+ _onShuffleChange(value: boolean): void;
22
+ _listenToFormUpdates(): void;
23
+ }
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Shared utilities for Recommendation block controls
3
+ *
4
+ * Provides common functionality used across multiple controls:
5
+ * - Layout detection from DOM
6
+ * - Card composition retrieval
7
+ * - Product row regeneration
8
+ * - Spacing reapplication
9
+ * - In-place content updates (style-preserving)
10
+ */
11
+ import type { CurrencyConfig } from '../../types/nodeConfig';
12
+ import type { RecommendationProduct } from '@@/Types/recommendation';
13
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
14
+ import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
15
+ import { type Orientation } from '../../templates';
16
+ /**
17
+ * Type for document modifier returned by api.getDocumentModifier()
18
+ *
19
+ * Uses `any` for the modifyHtml return type because:
20
+ * 1. Stripo's actual API uses complex generics (TemplateModifier<HtmlNodeModifier, CssNodeModifier>)
21
+ * 2. Multiple files define their own DocumentModifier with different methods
22
+ * 3. The methods (setStyle, setInnerHtml, setAttribute) chain and return the same object
23
+ *
24
+ * The actual chaining like modifier.modifyHtml(node).setStyle(...).setAttribute(...).apply()
25
+ * works correctly at runtime - this is just a TypeScript compatibility issue.
26
+ */
27
+ interface DocumentModifier {
28
+ modifyHtml: (node: ImmutableHtmlNode) => any;
29
+ apply: (description: ModificationDescription) => void;
30
+ }
31
+ /**
32
+ * Gets the block element from the current node
33
+ * The currentNode could BE the block element or contain it
34
+ * @param currentNode - The current template node
35
+ * @returns The block element or null if not found
36
+ */
37
+ export declare function getBlockElement(currentNode: ImmutableHtmlNode | null | undefined): ImmutableHtmlNode | null;
38
+ /**
39
+ * Gets the current layout orientation from the block's data attribute
40
+ * Supports both old (horizontal/vertical) and new (list/grid) values for backward compatibility
41
+ * @param currentNode - The current template node
42
+ * @returns The layout value ('grid' or 'list'), defaults to 'grid'
43
+ */
44
+ export declare function getCurrentLayout(currentNode: ImmutableHtmlNode | null | undefined): Orientation;
45
+ /**
46
+ * Gets the current card composition from block data attribute or use default
47
+ * @param currentNode - The current template node
48
+ * @returns Array of card element types in order
49
+ */
50
+ export declare function getCardComposition(currentNode: ImmutableHtmlNode | null | undefined): string[];
51
+ export interface RegenerateProductRowsOptions {
52
+ currentNode: ImmutableHtmlNode | null | undefined;
53
+ documentModifier: DocumentModifier;
54
+ afterRegenerate?: () => void;
55
+ /** Optional: pass products directly instead of reading from store */
56
+ products?: RecommendationProduct[];
57
+ /** Optional: pass layout directly to avoid stale DOM reads after setAttribute */
58
+ layout?: Orientation;
59
+ }
60
+ /**
61
+ * Regenerates only the mobile product container rows.
62
+ * Used when mobile-specific settings change (mobileCardsInRow)
63
+ * or when the desktop container is regenerated (to keep both in sync).
64
+ */
65
+ export declare function regenerateMobileProductRows(options: Omit<RegenerateProductRowsOptions, 'afterRegenerate'>): void;
66
+ /**
67
+ * Regenerates product rows in the desktop container based on current store configuration.
68
+ * Also regenerates the mobile container to keep both in sync.
69
+ * Reads products, layout, and composition from store/DOM and rebuilds the HTML.
70
+ * @param options - Configuration options for regeneration
71
+ */
72
+ export declare function regenerateProductRows(options: RegenerateProductRowsOptions): void;
73
+ export interface ReapplySpacingOptions {
74
+ currentNode: ImmutableHtmlNode | null | undefined;
75
+ documentModifier: DocumentModifier;
76
+ }
77
+ /**
78
+ * Reapplies spacing values after product regeneration.
79
+ * Desktop spacing applies only to the desktop container;
80
+ * mobile spacing applies only to the mobile container.
81
+ *
82
+ * Reads values from node config (primary) with data-attribute fallback
83
+ * for backward compatibility with pre-nodeConfig templates.
84
+ * @param options - Configuration options
85
+ */
86
+ export declare function reapplySpacing(options: ReapplySpacingOptions): void;
87
+ export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsOptions, 'products' | 'layout'> {
88
+ /** Skip style capture/restore if styles were already handled externally */
89
+ skipStylePreservation?: boolean;
90
+ /** Optional: pass products directly instead of reading from store */
91
+ products?: RecommendationProduct[];
92
+ /** Optional: pass layout directly to avoid stale DOM reads after setAttribute */
93
+ layout?: Orientation;
94
+ }
95
+ /**
96
+ * Regenerates product rows while preserving user-applied styles
97
+ *
98
+ * This unified function handles the complete regeneration flow:
99
+ * 1. Captures existing styles (fonts, colors, button styles, etc.)
100
+ * 2. Regenerates HTML with new products/layout
101
+ * 3. Restores captured styles to new elements
102
+ * 4. Reapplies spacing from data attributes
103
+ *
104
+ * NOTE: Style restoration is temporarily disabled due to Stripo selection bug.
105
+ * Multiple apply() calls (setInnerHtml + restoreStyles + reapplySpacing) cause
106
+ * Stripo's internal cursor/selection tracking to lose node references, resulting in
107
+ * "Cannot read properties of undefined (reading 'textContent')" errors.
108
+ *
109
+ * Use this instead of `regenerateProductRows` when styles must be preserved.
110
+ * @example
111
+ * // When products change (API response, count change, layout change)
112
+ * regenerateProductRowsWithStyles({
113
+ * currentNode: this.currentNode,
114
+ * documentModifier: this.api.getDocumentModifier(),
115
+ * });
116
+ * @param options - Configuration options for regeneration
117
+ */
118
+ export declare function regenerateProductRowsWithStyles(options: RegenerateWithStylesOptions): void;
119
+ /**
120
+ * Adjusts a products array to a target size.
121
+ * Used by ProductLayoutControl to synchronously match products to the new size
122
+ * before regeneration, avoiding the race condition where the store still holds
123
+ * products from the previous (stale) fetch.
124
+ *
125
+ * - More products than target → truncate
126
+ * - Fewer products than target → pad with dummy products
127
+ * - Exact match → return as-is
128
+ */
129
+ export declare function adjustProductsToSize(products: RecommendationProduct[], targetSize: number): RecommendationProduct[];
130
+ type PriceKey = 'price' | 'original_price' | 'discount';
131
+ /**
132
+ * Formats a product price using current currency settings
133
+ * @param product - The product containing price data
134
+ * @param priceKey - Which price to use ('price', 'original_price', or 'discount')
135
+ * @returns Formatted price string
136
+ */
137
+ export declare function formatProductPrice(product: RecommendationProduct, priceKey?: PriceKey): string;
138
+ interface UpdateSingleProductContentOptions {
139
+ documentModifier: DocumentModifier;
140
+ product: RecommendationProduct;
141
+ imageEl: ImmutableHtmlNode | null;
142
+ nameEl: ImmutableHtmlNode | null;
143
+ priceEl: ImmutableHtmlNode | null;
144
+ oldPriceEl: ImmutableHtmlNode | null;
145
+ omnibusPriceEl: ImmutableHtmlNode | null;
146
+ omnibusDiscountEl: ImmutableHtmlNode | null;
147
+ buttonEl: ImmutableHtmlNode | null;
148
+ }
149
+ /**
150
+ * Updates a single product's dynamic content (image, name, prices, button URL)
151
+ * without touching the styled container elements.
152
+ *
153
+ * Uses setText() on text nodes instead of setInnerHtml() to preserve Stripo's
154
+ * internal node references and avoid cursor/selection tracking issues.
155
+ * @returns true if any modifications were made
156
+ */
157
+ export declare function updateSingleProductContent(options: UpdateSingleProductContentOptions): boolean;
158
+ export interface UpdateProductContentInPlaceOptions {
159
+ currentNode: ImmutableHtmlNode | null | undefined;
160
+ documentModifier: DocumentModifier;
161
+ products: RecommendationProduct[];
162
+ }
163
+ /**
164
+ * Updates product content in-place without regenerating HTML structure.
165
+ * Preserves all user-applied styles by only touching dynamic content.
166
+ *
167
+ * Scopes element queries to the desktop container to avoid double-counting
168
+ * mobile container elements (both containers share identical block IDs).
169
+ * After updating desktop, also updates mobile container to keep them in sync.
170
+ *
171
+ * Falls back to false when product count changed (need to add/remove elements).
172
+ * @param options - Configuration options
173
+ * @returns true if in-place update was successful, false to fall back to full regeneration
174
+ */
175
+ export declare function updateProductContentInPlace(options: UpdateProductContentInPlaceOptions): boolean;
176
+ export interface UpdatePricesInPlaceOptions {
177
+ currentNode: ImmutableHtmlNode | null | undefined;
178
+ documentModifier: DocumentModifier;
179
+ }
180
+ /**
181
+ * Updates only price displays in-place (for currency changes).
182
+ * This is a lightweight update when only formatting changes, not product data.
183
+ *
184
+ * Scopes element queries to the desktop container to avoid double-counting
185
+ * mobile container elements. After updating desktop, also updates mobile.
186
+ *
187
+ * Perfect for:
188
+ * - Currency symbol change
189
+ * - Currency alignment change
190
+ * - Decimal/thousand separator changes
191
+ * @param options - Configuration options
192
+ * @returns true if update was successful, false otherwise
193
+ */
194
+ export declare function updatePricesInPlace(options: UpdatePricesInPlaceOptions): boolean;
195
+ /**
196
+ * Gets current card background color from existing elements
197
+ * Checks both grid (.product-card-segment) and list (.product-card-wrapper) selectors
198
+ * @param currentNode - The current template node
199
+ * @returns Background color string or null if not found
200
+ */
201
+ export declare function getCurrentCardBackgroundColor(currentNode: ImmutableHtmlNode | null | undefined): string | null;
202
+ export interface ApplyCardBackgroundColorOptions {
203
+ currentNode: ImmutableHtmlNode | null | undefined;
204
+ documentModifier: DocumentModifier;
205
+ bgColor: string | null;
206
+ layout: Orientation;
207
+ }
208
+ /**
209
+ * Applies card background color to appropriate elements based on layout
210
+ * @param options - Configuration options
211
+ */
212
+ export declare function applyCardBackgroundColor(options: ApplyCardBackgroundColorOptions): void;
213
+ export interface SetCurrencyAttributesOptions {
214
+ currentNode: ImmutableHtmlNode | null | undefined;
215
+ documentModifier: DocumentModifier;
216
+ currency: CurrencyConfig;
217
+ }
218
+ /**
219
+ * Sets currency configuration as HTML attributes on the block element
220
+ * These attributes are read by the HTML compiler at runtime to format prices
221
+ * @param options - Configuration options
222
+ */
223
+ export declare function setCurrencyAttributes(options: SetCurrencyAttributesOptions): void;
224
+ /**
225
+ * Reads currency configuration from block HTML attributes
226
+ * Used to restore settings when loading a template
227
+ * @param currentNode - The current template node
228
+ * @returns CurrencyConfig or null if attributes not found
229
+ */
230
+ export declare function getCurrencyAttributesFromBlock(currentNode: ImmutableHtmlNode | null | undefined): Partial<CurrencyConfig> | null;
231
+ export {};
@@ -0,0 +1,29 @@
1
+ /**
2
+ * CSS rules for mobile grid layout visibility switching
3
+ *
4
+ * Follows the modifyCss pattern from textTrim control.
5
+ * Rules are injected into the document's stylesheet via modifyCss
6
+ * so they appear in the compiled HTML export.
7
+ */
8
+ import type { ImmutableCssNode } from '@stripoinc/ui-editor-extensions';
9
+ import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
10
+ /** CSS class for desktop product container */
11
+ export declare const CSS_CLASS_DESKTOP_CONTAINER = "ins-recommendation-desktop-container";
12
+ /** CSS class for mobile product container */
13
+ export declare const CSS_CLASS_MOBILE_CONTAINER = "ins-recommendation-mobile-container";
14
+ interface CssModifierApi {
15
+ getDocumentRootCssNode: () => ImmutableCssNode | null;
16
+ getDocumentModifier: () => {
17
+ modifyCss: (node: ImmutableCssNode) => {
18
+ appendRule: (rule: string) => void;
19
+ };
20
+ apply: (desc: ModificationDescription) => void;
21
+ };
22
+ }
23
+ /**
24
+ * Ensures mobile layout CSS rules exist in the document stylesheet.
25
+ * Only adds rules if they don't already exist (prevents duplicates across multiple blocks).
26
+ * Follows the same pattern as textTrim's _ensureCssRulesExist().
27
+ */
28
+ export declare function ensureMobileCssRulesExist(api: CssModifierApi): void;
29
+ export {};