@useinsider/guido 3.20.0 → 3.20.1-beta.19f951a

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 (31) hide show
  1. package/dist/config/compiler/itemsCompilerRules.js +21 -5
  2. package/dist/config/compiler/utils/itemsCompilerUtils.js +64 -17
  3. package/dist/config/migrator/itemsBlockMigrator.js +112 -108
  4. package/dist/extensions/Blocks/Items/block.js +78 -67
  5. package/dist/extensions/Blocks/Items/constants/cardWidth.js +20 -0
  6. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +1 -1
  7. package/dist/extensions/Blocks/Recommendation/block.js +51 -44
  8. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +103 -91
  9. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +90 -73
  10. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +209 -203
  11. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +122 -90
  12. package/dist/extensions/Blocks/Recommendation/utils/blockUrlConfig.js +25 -0
  13. package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +72 -70
  14. package/dist/extensions/Blocks/Recommendation/utils/compositionKeys.js +69 -60
  15. package/dist/extensions/Blocks/Recommendation/utils/nodeConfigWriter.js +46 -25
  16. package/dist/extensions/Blocks/Recommendation/utils/strategyCommit.js +40 -17
  17. package/dist/src/config/compiler/utils/itemsCompilerUtils.d.ts +10 -0
  18. package/dist/src/extensions/Blocks/Items/block.d.ts +5 -0
  19. package/dist/src/extensions/Blocks/Items/constants/cardWidth.d.ts +12 -0
  20. package/dist/src/extensions/Blocks/Recommendation/block.d.ts +2 -0
  21. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +3 -0
  22. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +2 -0
  23. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +18 -5
  24. package/dist/src/extensions/Blocks/Recommendation/utils/blockUrlConfig.d.ts +4 -0
  25. package/dist/src/extensions/Blocks/Recommendation/utils/compositionKeys.d.ts +4 -0
  26. package/dist/src/extensions/Blocks/Recommendation/utils/nodeConfigWriter.d.ts +3 -1
  27. package/dist/src/extensions/Blocks/Recommendation/utils/strategyCommit.d.ts +7 -0
  28. package/dist/src/utils/liquidProtection.d.ts +3 -0
  29. package/dist/utils/liquidProtection.js +5 -0
  30. package/dist/utils/templatePreparation.js +61 -85
  31. package/package.json +1 -1
@@ -9,28 +9,28 @@ import { RECOMMENDATION_ID_ATTR as I } from "../../constants/selectors.js";
9
9
  import { RecommendationConfigService as c } from "../../services/configService.js";
10
10
  import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
11
11
  import { registerNodeConfigWriter as b } from "../../utils/nodeConfigWriter.js";
12
- import { AlgorithmControl as T } from "./algorithm.js";
12
+ import { AlgorithmControl as P } from "./algorithm.js";
13
13
  import { ALGORITHM_CONTROL_ID as ut } from "./algorithm.js";
14
- import { CurrencyControl as P } from "./currency.js";
14
+ import { CurrencyControl as T } from "./currency.js";
15
15
  import { CURRENCY_CONTROL_ID as gt } from "./currency.js";
16
16
  import { FiltersControl as S } from "./filters.js";
17
17
  import { FILTERS_CONTROL_ID as ft } from "./filters.js";
18
18
  import { LayoutOrientationControl as O } from "./layoutOrientation.js";
19
19
  import { LAYOUT_ORIENTATION_CONTROL_ID as Ct } from "./layoutOrientation.js";
20
- import { LocaleControl as L } from "./locale.js";
20
+ import { LocaleControl as k } from "./locale.js";
21
21
  import { LOCALE_CONTROL_ID as yt } from "./locale.js";
22
- import { PricePlacementControl as k } from "./pricePlacement.js";
22
+ import { PricePlacementControl as L } from "./pricePlacement.js";
23
23
  import { PRICE_PLACEMENT_CONTROL_ID as _t } from "./pricePlacement.js";
24
24
  import { ProductCountControl as E } from "./productCount.js";
25
25
  import { PRODUCT_COUNT_CONTROL_ID as Rt } from "./productCount.js";
26
26
  import { ProductLayoutControl as F } from "./productLayout.js";
27
- import { PRODUCT_LAYOUT_CONTROL_ID as Tt } from "./productLayout.js";
27
+ import { PRODUCT_LAYOUT_CONTROL_ID as Pt } from "./productLayout.js";
28
28
  import { ShuffleControl as D } from "./shuffle.js";
29
29
  import { SHUFFLE_CONTROL_ID as St } from "./shuffle.js";
30
- import { StrategyControl as w } from "./strategy.js";
31
- import { STRATEGY_CONTROL_ID as Lt } from "./strategy.js";
32
- import { setCurrencyAttributes as v, getBlockElement as A, isPartnerManagedBlock as B, updateProductContentInPlace as x, regenerateProductRowsWithStyles as U } from "./utils.js";
33
- import { adjustProductsToSize as Et, formatProductPrice as Ft, getCardComposition as Dt, getCurrentLayout as wt, getMainContainerTbody as vt, regenerateMobileProductRows as At, updatePricesInPlace as Bt, updateSingleProductContent as xt } from "./utils.js";
30
+ import { StrategyControl as B } from "./strategy.js";
31
+ import { STRATEGY_CONTROL_ID as kt } from "./strategy.js";
32
+ import { setCurrencyAttributes as w, getBlockElement as v, isPartnerManagedBlock as A, updateProductContentInPlace as x, regenerateProductRowsWithStyles as U } from "./utils.js";
33
+ import { adjustProductsToSize as Et, formatProductPrice as Ft, getCardComposition as Dt, getCurrentLayout as Bt, getMainContainerTbody as wt, regenerateMobileProductRows as vt, updatePricesInPlace as At, updateSingleProductContent as xt } from "./utils.js";
34
34
  import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
35
35
  const W = "ui-elements-recommendation-block";
36
36
  class at extends N {
@@ -77,23 +77,21 @@ class at extends N {
77
77
  * fails when the size actually changed.
78
78
  */
79
79
  i(this, "_debouncedRegenerateWithProducts", f(() => {
80
- const t = this.store.recommendationProducts;
81
80
  if (!this.currentNode || !this.api)
82
81
  return;
83
- const e = this.api.getDocumentModifier(), o = this._stagePendingNodeConfig(e);
84
- if (B(this.currentNode)) {
85
- o && (e.apply(new y("Update recommendation configuration")), this.pendingNodeConfigWrite = null, this._clearConfigFlush());
82
+ const t = this._getRecommendationIdFromNode(this.currentNode), e = this.store.currentRecommendationId;
83
+ if (t === null || e === null || t === e || !this.store.blockStates[t]) {
84
+ this._regenerateWithProducts();
86
85
  return;
87
86
  }
88
- x({
89
- currentNode: this.currentNode,
90
- documentModifier: e,
91
- products: t
92
- }) || U({
93
- currentNode: this.currentNode,
94
- documentModifier: e,
95
- products: t
96
- });
87
+ if (this.store.blockStates[t].recommendationProducts.length) {
88
+ this.store.setCurrentBlock(t);
89
+ try {
90
+ this._regenerateWithProducts();
91
+ } finally {
92
+ this.store.setCurrentBlock(e);
93
+ }
94
+ }
97
95
  }, 100));
98
96
  }
99
97
  getId() {
@@ -118,7 +116,7 @@ class at extends N {
118
116
  return this.rrsEnabled = h().isFeatureEnabled("reusableRecommendationStrategy"), this._subControls.forEach((e) => {
119
117
  var o;
120
118
  return (o = e == null ? void 0 : e.onDestroy) == null ? void 0 : o.call(e);
121
- }), this.algorithmControl = new T(), this.localeControl = new L(), this.currencyControl = new P(), this.productCountControl = new E(), this.productLayoutControl = new F(), this.filtersControl = new S(), this.shuffleControl = new D(), this.pricePlacementControl = new k(), this.layoutOrientationControl = new O(), this.strategyControl = this.rrsEnabled ? new w() : null, this._subControls.forEach((e) => {
119
+ }), this.algorithmControl = new P(), this.localeControl = new k(), this.currencyControl = new T(), this.productCountControl = new E(), this.productLayoutControl = new F(), this.filtersControl = new S(), this.shuffleControl = new D(), this.pricePlacementControl = new L(), this.layoutOrientationControl = new O(), this.strategyControl = this.rrsEnabled ? new B() : null, this._subControls.forEach((e) => {
122
120
  e && (e.api = this.api);
123
121
  }), `
124
122
  <div class="recommendation-controls-container">
@@ -136,12 +134,12 @@ class at extends N {
136
134
  `;
137
135
  }
138
136
  _showControlsForBlock(t) {
139
- var r;
140
- const e = (r = this.getContainer()) == null ? void 0 : r.querySelector(".recommendation-controls-container");
137
+ var n;
138
+ const e = (n = this.getContainer()) == null ? void 0 : n.querySelector(".recommendation-controls-container");
141
139
  if (!e)
142
140
  return;
143
- const o = this._getRecommendationIdFromNode(t) === null ? null : c.getConfig(t), n = this.rrsEnabled && !!o && (!!(o != null && o.strategyId) || ((o == null ? void 0 : o.configVersion) ?? 0) >= _), s = this.rrsEnabled && !!o && !n;
144
- e.classList.toggle("strategy-block", n), e.classList.toggle("legacy-strategy-block", s);
141
+ const o = this._getRecommendationIdFromNode(t) === null ? null : c.getConfig(t), r = this.rrsEnabled && !!o && (!!(o != null && o.strategyId) || ((o == null ? void 0 : o.configVersion) ?? 0) >= _), s = this.rrsEnabled && !!o && !r;
142
+ e.classList.toggle("strategy-block", r), e.classList.toggle("legacy-strategy-block", s);
145
143
  }
146
144
  async onRender() {
147
145
  var o;
@@ -159,9 +157,9 @@ class at extends N {
159
157
  const e = this._getRecommendationIdFromNode(t);
160
158
  e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), e !== null && this._syncNodeConfigIfChanged(e), this._showControlsForBlock(t), e !== null && !((o = this.store.blockStates[e]) != null && o.isInitialized) && this._fetchBlockData(e).then(() => {
161
159
  this._initializeSubControls();
162
- }), this._subControls.forEach((n) => {
160
+ }), this._subControls.forEach((r) => {
163
161
  var s;
164
- n != null && n.api && (n.currentNode = t, (s = n.onTemplateNodeUpdated) == null || s.call(n, t));
162
+ r != null && r.api && (r.currentNode = t, (s = r.onTemplateNodeUpdated) == null || s.call(r, t));
165
163
  });
166
164
  }
167
165
  onDestroy() {
@@ -209,8 +207,8 @@ class at extends N {
209
207
  const e = this.store.blockStates[t];
210
208
  if (!e)
211
209
  return;
212
- const o = JSON.stringify(c.getConfig(this.currentNode)), n = e.syncedConfigFingerprint;
213
- e.syncedConfigFingerprint = o, n !== o && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
210
+ const o = JSON.stringify(c.getConfig(this.currentNode)), r = e.syncedConfigFingerprint;
211
+ e.syncedConfigFingerprint = o, r !== o && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
214
212
  }
215
213
  /** Whether the deferred write would move the node's strategyId — see the caller (SD-149916). */
216
214
  _isPendingStrategyIdChange() {
@@ -221,16 +219,16 @@ class at extends N {
221
219
  const t = this.store.currentRecommendationId;
222
220
  if (!this.currentNode || !this.api || t === null)
223
221
  return;
224
- const { filters: e, strategy: o, strategyId: n, size: s, nodeConfigVersion: r } = this.store.recommendationConfigs, { partnerName: l } = h();
222
+ const { filters: e, strategy: o, strategyId: r, size: s, nodeConfigVersion: n } = this.store.recommendationConfigs, { partnerName: l } = h();
225
223
  this.pendingNodeConfigWrite = {
226
224
  blockId: t,
227
225
  node: this.currentNode,
228
226
  updates: {
229
227
  filters: e,
230
228
  strategy: o,
231
- strategyId: n,
229
+ strategyId: r,
232
230
  size: s,
233
- configVersion: r,
231
+ configVersion: n,
234
232
  ...l.value ? { partnerName: l.value } : {}
235
233
  }
236
234
  };
@@ -275,8 +273,8 @@ class at extends N {
275
273
  JSON.stringify(o.filters) === JSON.stringify(t.updates.filters) && o.strategy === t.updates.strategy && o.strategyId === t.updates.strategyId && o.size === t.updates.size || c.updateConfig(this.api, e, t.updates, "Update recommendation filters");
276
274
  }
277
275
  _syncNodeConfigToStore() {
278
- var n;
279
- const t = c.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((n = this.store.blockStates[e]) == null ? void 0 : n.isInitialized);
276
+ var r;
277
+ const t = c.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
280
278
  this.store.patchCurrentBlockConfig({
281
279
  strategy: t.strategy,
282
280
  strategyId: t.strategyId,
@@ -319,8 +317,8 @@ class at extends N {
319
317
  t !== null && this.store.markBlockInitialized(t), (await Promise.allSettled([
320
318
  this.store.fetchRecommendationCreateData(),
321
319
  this.store.fetchRecommendationFilters()
322
- ])).forEach((o, n) => {
323
- o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][n]} failed`, o.reason);
320
+ ])).forEach((o, r) => {
321
+ o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][r]} failed`, o.reason);
324
322
  }), this._applySmartDefaults();
325
323
  try {
326
324
  await this.store.fetchRecommendationProducts();
@@ -342,35 +340,35 @@ class at extends N {
342
340
  if (!this.currentNode || !this.api)
343
341
  return;
344
342
  const t = c.getConfig(this.currentNode), e = {};
345
- let o = null, n = null, s = null;
343
+ let o = null, r = null, s = null;
346
344
  if (t.currency.code === a.currency.code) {
347
- const { currencyList: r } = this.store;
348
- r.length > 0 && (r.some(
345
+ const { currencyList: n } = this.store;
346
+ n.length > 0 && (n.some(
349
347
  (d) => d.value === `price.${a.currency.code}`
350
- ) || (o = r[0].value.replace("price.", ""), e.currency = {
348
+ ) || (o = n[0].value.replace("price.", ""), e.currency = {
351
349
  ...a.currency,
352
350
  code: o,
353
351
  symbol: o
354
352
  }));
355
353
  }
356
354
  if (t.strategy === a.strategy) {
357
- const r = this.store.getActivePredictiveAlgorithms;
358
- r.length > 0 && (r.some(
355
+ const n = this.store.getActivePredictiveAlgorithms;
356
+ n.length > 0 && (n.some(
359
357
  (d) => d.value === a.strategy
360
- ) || (n = r[0].value, e.strategy = n));
358
+ ) || (r = n[0].value, e.strategy = r));
361
359
  }
362
360
  if (t.language === a.language) {
363
- const r = this.store.getLanguages;
364
- r.length > 0 && (r.some(
361
+ const n = this.store.getLanguages;
362
+ n.length > 0 && (n.some(
365
363
  (d) => d.value === a.language
366
- ) || (s = r[0].value, e.language = s));
364
+ ) || (s = n[0].value, e.language = s));
367
365
  }
368
- !o && !n && !s || (c.updateConfig(
366
+ !o && !r && !s || (c.updateConfig(
369
367
  this.api,
370
368
  this.currentNode,
371
369
  e,
372
370
  "Applied smart defaults"
373
- ), o && e.currency && v({
371
+ ), o && e.currency && w({
374
372
  currentNode: this.currentNode,
375
373
  documentModifier: this.api.getDocumentModifier(),
376
374
  currency: e.currency
@@ -386,7 +384,7 @@ class at extends N {
386
384
  thousandSeparator: a.currency.thousandSeparator
387
385
  }
388
386
  } : {},
389
- ...n ? { strategy: n } : {},
387
+ ...r ? { strategy: r } : {},
390
388
  ...s ? { language: s } : {}
391
389
  }, { triggerRefetch: !1 }));
392
390
  }
@@ -394,14 +392,33 @@ class at extends N {
394
392
  * Reads the recommendation-id attribute from the block element within the node
395
393
  */
396
394
  _getRecommendationIdFromNode(t) {
397
- const e = A(t);
395
+ const e = v(t);
398
396
  if (!e || !("getAttribute" in e))
399
397
  return null;
400
398
  const o = e.getAttribute(I);
401
399
  if (!o)
402
400
  return null;
403
- const n = parseInt(o);
404
- return Number.isNaN(n) ? null : n;
401
+ const r = parseInt(o);
402
+ return Number.isNaN(r) ? null : r;
403
+ }
404
+ /** Draws the current block's products into this panel's node. */
405
+ _regenerateWithProducts() {
406
+ if (!this.currentNode || !this.api)
407
+ return;
408
+ const t = this.store.recommendationProducts, e = this.api.getDocumentModifier(), o = this._stagePendingNodeConfig(e);
409
+ if (A(this.currentNode)) {
410
+ o && (e.apply(new y("Update recommendation configuration")), this.pendingNodeConfigWrite = null, this._clearConfigFlush());
411
+ return;
412
+ }
413
+ x({
414
+ currentNode: this.currentNode,
415
+ documentModifier: e,
416
+ products: t
417
+ }) || U({
418
+ currentNode: this.currentNode,
419
+ documentModifier: e,
420
+ products: t
421
+ });
405
422
  }
406
423
  /**
407
424
  * Listen to store changes that require product refresh or regeneration.
@@ -418,15 +435,15 @@ class at extends N {
418
435
  */
419
436
  _listenStateUpdates() {
420
437
  const { store: t } = this;
421
- let e = t.recommendationProducts, o = t.$state.configVersion, n = t.currentRecommendationId;
438
+ let e = t.recommendationProducts, o = t.$state.configVersion, r = t.currentRecommendationId;
422
439
  this.storeUnsubscription = t.$subscribe(() => {
423
440
  const s = t.currentRecommendationId;
424
- if (s !== n) {
425
- n = s, e = t.recommendationProducts, o = t.$state.configVersion;
441
+ if (s !== r) {
442
+ r = s, e = t.recommendationProducts, o = t.$state.configVersion;
426
443
  return;
427
444
  }
428
- const r = t.$state.configVersion;
429
- r !== o && (o = r, this._capturePendingNodeConfigWrite(), this._isPendingStrategyIdChange() && this._flushPendingNodeConfig(), this._debouncedFetchProducts());
445
+ const n = t.$state.configVersion;
446
+ n !== o && (o = n, this._capturePendingNodeConfigWrite(), this._isPendingStrategyIdChange() && this._flushPendingNodeConfig(), this._debouncedFetchProducts());
430
447
  const l = t.recommendationProducts, d = l !== e, m = Array.isArray(l) && l.length > 0;
431
448
  d && m && (e = l, this._debouncedRegenerateWithProducts());
432
449
  });
@@ -434,38 +451,38 @@ class at extends N {
434
451
  }
435
452
  export {
436
453
  ut as ALGORITHM_CONTROL_ID,
437
- T as AlgorithmControl,
454
+ P as AlgorithmControl,
438
455
  W as CONTROL_BLOCK_ID,
439
456
  gt as CURRENCY_CONTROL_ID,
440
- P as CurrencyControl,
457
+ T as CurrencyControl,
441
458
  ft as FILTERS_CONTROL_ID,
442
459
  S as FiltersControl,
443
460
  Ct as LAYOUT_ORIENTATION_CONTROL_ID,
444
461
  yt as LOCALE_CONTROL_ID,
445
462
  O as LayoutOrientationControl,
446
- L as LocaleControl,
463
+ k as LocaleControl,
447
464
  _t as PRICE_PLACEMENT_CONTROL_ID,
448
465
  Rt as PRODUCT_COUNT_CONTROL_ID,
449
- Tt as PRODUCT_LAYOUT_CONTROL_ID,
450
- k as PricePlacementControl,
466
+ Pt as PRODUCT_LAYOUT_CONTROL_ID,
467
+ L as PricePlacementControl,
451
468
  E as ProductCountControl,
452
469
  F as ProductLayoutControl,
453
470
  at as RecommendationBlockControl,
454
471
  St as SHUFFLE_CONTROL_ID,
455
- Lt as STRATEGY_CONTROL_ID,
472
+ kt as STRATEGY_CONTROL_ID,
456
473
  D as ShuffleControl,
457
- w as StrategyControl,
474
+ B as StrategyControl,
458
475
  Et as adjustProductsToSize,
459
476
  Ft as formatProductPrice,
460
- A as getBlockElement,
477
+ v as getBlockElement,
461
478
  Dt as getCardComposition,
462
- wt as getCurrentLayout,
463
- vt as getMainContainerTbody,
464
- B as isPartnerManagedBlock,
465
- At as regenerateMobileProductRows,
479
+ Bt as getCurrentLayout,
480
+ wt as getMainContainerTbody,
481
+ A as isPartnerManagedBlock,
482
+ vt as regenerateMobileProductRows,
466
483
  U as regenerateProductRowsWithStyles,
467
- v as setCurrencyAttributes,
468
- Bt as updatePricesInPlace,
484
+ w as setCurrencyAttributes,
485
+ At as updatePricesInPlace,
469
486
  x as updateProductContentInPlace,
470
487
  xt as updateSingleProductContent
471
488
  };