@useinsider/guido 3.18.1-beta.d82285c → 3.18.1-beta.db1e41e

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.
@@ -1,18 +1,18 @@
1
1
  var m = Object.defineProperty;
2
- var C = (h, l, t) => l in h ? m(h, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[l] = t;
3
- var n = (h, l, t) => C(h, typeof l != "symbol" ? l + "" : l, t);
2
+ var C = (g, c, t) => c in g ? m(g, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[c] = t;
3
+ var r = (g, c, t) => C(g, typeof c != "symbol" ? c + "" : c, t);
4
4
  import { useConfig as p } from "../../../../../composables/useConfig.js";
5
5
  import { ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
6
  import { CommonControl as N } from "../../../common-control.js";
7
7
  import { CURRENT_CONFIG_VERSION as _, DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
8
8
  import { RECOMMENDATION_ID_ATTR as I } from "../../constants/selectors.js";
9
- import { RecommendationConfigService as c } from "../../services/configService.js";
9
+ import { RecommendationConfigService as l } 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
12
  import { AlgorithmControl as T } from "./algorithm.js";
13
13
  import { ALGORITHM_CONTROL_ID as ut } from "./algorithm.js";
14
14
  import { CurrencyControl as P } from "./currency.js";
15
- import { CURRENCY_CONTROL_ID as ht } from "./currency.js";
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";
@@ -31,36 +31,36 @@ import { StrategyControl as w } from "./strategy.js";
31
31
  import { STRATEGY_CONTROL_ID as Lt } from "./strategy.js";
32
32
  import { setCurrencyAttributes as A, getBlockElement as v, isPartnerManagedBlock as x, updateProductContentInPlace as B, regenerateProductRowsWithStyles as U } from "./utils.js";
33
33
  import { adjustProductsToSize as kt, formatProductPrice as Dt, getCardComposition as Ft, getCurrentLayout as wt, getMainContainerTbody as At, regenerateMobileProductRows as vt, updatePricesInPlace as xt, updateSingleProductContent as Bt } from "./utils.js";
34
- import { useDebounceFn as g } from "../../../../../node_modules/@vueuse/shared/index.js";
35
- const $ = "ui-elements-recommendation-block";
34
+ import { useDebounceFn as h } from "../../../../../node_modules/@vueuse/shared/index.js";
35
+ const W = "ui-elements-recommendation-block";
36
36
  class at extends N {
37
37
  constructor() {
38
38
  super(...arguments);
39
- n(this, "store", R());
40
- n(this, "storeUnsubscription", () => {
39
+ r(this, "store", R());
40
+ r(this, "storeUnsubscription", () => {
41
41
  });
42
42
  // blockId -> fingerprint of the node config as it looked at the last sync.
43
- n(this, "syncedConfigs", /* @__PURE__ */ new Map());
43
+ r(this, "syncedConfigs", /* @__PURE__ */ new Map());
44
44
  // A config change waiting to reach the node config. Deferred so it can ride the
45
45
  // re-render's single apply() — one user action must cost one undo press.
46
- n(this, "pendingNodeConfigWrite", null);
47
- n(this, "pendingConfigFlushTimer", null);
46
+ r(this, "pendingNodeConfigWrite", null);
47
+ r(this, "pendingConfigFlushTimer", null);
48
48
  // Sub-control instances for lifecycle management
49
- n(this, "algorithmControl", null);
50
- n(this, "localeControl", null);
51
- n(this, "currencyControl", null);
52
- n(this, "productCountControl", null);
53
- n(this, "productLayoutControl", null);
54
- n(this, "filtersControl", null);
55
- n(this, "shuffleControl", null);
56
- n(this, "pricePlacementControl", null);
57
- n(this, "layoutOrientationControl", null);
58
- n(this, "strategyControl", null);
59
- n(this, "rrsEnabled", !1);
49
+ r(this, "algorithmControl", null);
50
+ r(this, "localeControl", null);
51
+ r(this, "currencyControl", null);
52
+ r(this, "productCountControl", null);
53
+ r(this, "productLayoutControl", null);
54
+ r(this, "filtersControl", null);
55
+ r(this, "shuffleControl", null);
56
+ r(this, "pricePlacementControl", null);
57
+ r(this, "layoutOrientationControl", null);
58
+ r(this, "strategyControl", null);
59
+ r(this, "rrsEnabled", !1);
60
60
  /**
61
61
  * Debounced product fetch to prevent rapid API calls during config changes
62
62
  */
63
- n(this, "_debouncedFetchProducts", g(async () => {
63
+ r(this, "_debouncedFetchProducts", h(async () => {
64
64
  try {
65
65
  await this.store.fetchRecommendationProducts();
66
66
  } finally {
@@ -78,7 +78,7 @@ class at extends N {
78
78
  * count. The store pads products to the configured size, so in-place only
79
79
  * fails when the size actually changed.
80
80
  */
81
- n(this, "_debouncedRegenerateWithProducts", g(() => {
81
+ r(this, "_debouncedRegenerateWithProducts", h(() => {
82
82
  const t = this.store.recommendationProducts;
83
83
  if (!this.currentNode || !this.api)
84
84
  return;
@@ -99,7 +99,7 @@ class at extends N {
99
99
  }, 100));
100
100
  }
101
101
  getId() {
102
- return $;
102
+ return W;
103
103
  }
104
104
  get _subControls() {
105
105
  return [
@@ -142,8 +142,8 @@ class at extends N {
142
142
  const e = (i = this.getContainer()) == null ? void 0 : i.querySelector(".recommendation-controls-container");
143
143
  if (!e)
144
144
  return;
145
- 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) >= _);
146
- e.classList.toggle("strategy-block", r);
145
+ const o = this._getRecommendationIdFromNode(t) === null ? null : l.getConfig(t), n = this.rrsEnabled && !!o && (!!(o != null && o.strategyId) || ((o == null ? void 0 : o.configVersion) ?? 0) >= _);
146
+ e.classList.toggle("strategy-block", n);
147
147
  }
148
148
  async onRender() {
149
149
  var o;
@@ -161,9 +161,9 @@ class at extends N {
161
161
  const e = this._getRecommendationIdFromNode(t);
162
162
  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(() => {
163
163
  this._initializeSubControls();
164
- }), this._subControls.forEach((r) => {
164
+ }), this._subControls.forEach((n) => {
165
165
  var i;
166
- r != null && r.api && (r.currentNode = t, (i = r.onTemplateNodeUpdated) == null || i.call(r, t));
166
+ n != null && n.api && (n.currentNode = t, (i = n.onTemplateNodeUpdated) == null || i.call(n, t));
167
167
  });
168
168
  }
169
169
  onDestroy() {
@@ -203,18 +203,23 @@ class at extends N {
203
203
  */
204
204
  _syncNodeConfigIfChanged(t) {
205
205
  this.pendingNodeConfigWrite && this.pendingNodeConfigWrite.blockId !== t && this._flushPendingNodeConfig();
206
- const e = JSON.stringify(c.getConfig(this.currentNode)), o = this.syncedConfigs.get(t);
206
+ const e = JSON.stringify(l.getConfig(this.currentNode)), o = this.syncedConfigs.get(t);
207
207
  this.syncedConfigs.set(t, e), o !== e && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
208
208
  }
209
+ /** Whether the deferred write would move the node's strategyId — see the caller (SD-149916). */
210
+ _isPendingStrategyIdChange() {
211
+ const t = this.pendingNodeConfigWrite;
212
+ return t ? l.getConfig(this.currentNode).strategyId !== t.updates.strategyId : !1;
213
+ }
209
214
  _capturePendingNodeConfigWrite() {
210
215
  const t = this.store.currentRecommendationId;
211
216
  if (!this.currentNode || !this.api || t === null)
212
217
  return;
213
- const { filters: e, strategyId: o, size: r } = this.store.recommendationConfigs;
218
+ const { filters: e, strategyId: o, size: n } = this.store.recommendationConfigs;
214
219
  this.pendingNodeConfigWrite = {
215
220
  blockId: t,
216
221
  node: this.currentNode,
217
- updates: { filters: e, strategyId: o, size: r }
222
+ updates: { filters: e, strategyId: o, size: n }
218
223
  };
219
224
  }
220
225
  /**
@@ -229,7 +234,7 @@ class at extends N {
229
234
  */
230
235
  _stagePendingNodeConfig(t) {
231
236
  const e = this.pendingNodeConfigWrite;
232
- return !e || !this.currentNode ? !1 : (c.stageConfig(t, this.currentNode, e.updates), !0);
237
+ return !e || !this.currentNode ? !1 : (l.stageConfig(t, this.currentNode, e.updates), !0);
233
238
  }
234
239
  /**
235
240
  * Arms the guaranteed fallback write, once the product fetch has settled. The
@@ -253,12 +258,12 @@ class at extends N {
253
258
  const t = this.pendingNodeConfigWrite;
254
259
  if (this.pendingNodeConfigWrite = null, this._clearConfigFlush(), !t || !this.api)
255
260
  return;
256
- const e = t.blockId === this.store.currentRecommendationId && this.currentNode ? this.currentNode : t.node, o = c.getConfig(e);
257
- JSON.stringify(o.filters) === JSON.stringify(t.updates.filters) && o.strategyId === t.updates.strategyId && o.size === t.updates.size || c.updateConfig(this.api, e, t.updates, "Update recommendation filters");
261
+ const e = t.blockId === this.store.currentRecommendationId && this.currentNode ? this.currentNode : t.node, o = l.getConfig(e);
262
+ JSON.stringify(o.filters) === JSON.stringify(t.updates.filters) && o.strategyId === t.updates.strategyId && o.size === t.updates.size || l.updateConfig(this.api, e, t.updates, "Update recommendation filters");
258
263
  }
259
264
  _syncNodeConfigToStore() {
260
- var r;
261
- const t = c.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
265
+ var n;
266
+ const t = l.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((n = this.store.blockStates[e]) == null ? void 0 : n.isInitialized);
262
267
  this.store.patchCurrentBlockConfig({
263
268
  strategy: t.strategy,
264
269
  strategyId: t.strategyId,
@@ -300,8 +305,8 @@ class at extends N {
300
305
  t !== null && this.store.markBlockInitialized(t), (await Promise.allSettled([
301
306
  this.store.fetchRecommendationCreateData(),
302
307
  this.store.fetchRecommendationFilters()
303
- ])).forEach((o, r) => {
304
- o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][r]} failed`, o.reason);
308
+ ])).forEach((o, n) => {
309
+ o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][n]} failed`, o.reason);
305
310
  }), this._applySmartDefaults();
306
311
  try {
307
312
  await this.store.fetchRecommendationProducts();
@@ -322,8 +327,8 @@ class at extends N {
322
327
  _applySmartDefaults() {
323
328
  if (!this.currentNode || !this.api)
324
329
  return;
325
- const t = c.getConfig(this.currentNode), e = {};
326
- let o = null, r = null, i = null;
330
+ const t = l.getConfig(this.currentNode), e = {};
331
+ let o = null, n = null, i = null;
327
332
  if (t.currency.code === a.currency.code) {
328
333
  const { currencyList: s } = this.store;
329
334
  s.length > 0 && (s.some(
@@ -338,7 +343,7 @@ class at extends N {
338
343
  const s = this.store.getActivePredictiveAlgorithms;
339
344
  s.length > 0 && (s.some(
340
345
  (d) => d.value === a.strategy
341
- ) || (r = s[0].value, e.strategy = r));
346
+ ) || (n = s[0].value, e.strategy = n));
342
347
  }
343
348
  if (t.language === a.language) {
344
349
  const s = this.store.getLanguages;
@@ -346,7 +351,7 @@ class at extends N {
346
351
  (d) => d.value === a.language
347
352
  ) || (i = s[0].value, e.language = i));
348
353
  }
349
- !o && !r && !i || (c.updateConfig(
354
+ !o && !n && !i || (l.updateConfig(
350
355
  this.api,
351
356
  this.currentNode,
352
357
  e,
@@ -367,7 +372,7 @@ class at extends N {
367
372
  thousandSeparator: a.currency.thousandSeparator
368
373
  }
369
374
  } : {},
370
- ...r ? { strategy: r } : {},
375
+ ...n ? { strategy: n } : {},
371
376
  ...i ? { language: i } : {}
372
377
  }, { triggerRefetch: !1 }));
373
378
  }
@@ -381,8 +386,8 @@ class at extends N {
381
386
  const o = e.getAttribute(I);
382
387
  if (!o)
383
388
  return null;
384
- const r = parseInt(o);
385
- return Number.isNaN(r) ? null : r;
389
+ const n = parseInt(o);
390
+ return Number.isNaN(n) ? null : n;
386
391
  }
387
392
  /**
388
393
  * Listen to store changes that require product refresh or regeneration.
@@ -399,15 +404,15 @@ class at extends N {
399
404
  */
400
405
  _listenStateUpdates() {
401
406
  const { store: t } = this;
402
- let e = t.recommendationProducts, o = t.$state.configVersion, r = t.currentRecommendationId;
407
+ let e = t.recommendationProducts, o = t.$state.configVersion, n = t.currentRecommendationId;
403
408
  this.storeUnsubscription = t.$subscribe(() => {
404
409
  const i = t.currentRecommendationId;
405
- if (i !== r) {
406
- r = i, e = t.recommendationProducts, o = t.$state.configVersion;
410
+ if (i !== n) {
411
+ n = i, e = t.recommendationProducts, o = t.$state.configVersion;
407
412
  return;
408
413
  }
409
414
  const s = t.$state.configVersion;
410
- s !== o && (o = s, this._capturePendingNodeConfigWrite(), this._debouncedFetchProducts());
415
+ s !== o && (o = s, this._capturePendingNodeConfigWrite(), this._isPendingStrategyIdChange() && this._flushPendingNodeConfig(), this._debouncedFetchProducts());
411
416
  const u = t.recommendationProducts, d = u !== e, f = Array.isArray(u) && u.length > 0;
412
417
  d && f && (e = u, this._debouncedRegenerateWithProducts());
413
418
  });
@@ -416,8 +421,8 @@ class at extends N {
416
421
  export {
417
422
  ut as ALGORITHM_CONTROL_ID,
418
423
  T as AlgorithmControl,
419
- $ as CONTROL_BLOCK_ID,
420
- ht as CURRENCY_CONTROL_ID,
424
+ W as CONTROL_BLOCK_ID,
425
+ gt as CURRENCY_CONTROL_ID,
421
426
  P as CurrencyControl,
422
427
  ft as FILTERS_CONTROL_ID,
423
428
  S as FiltersControl,
@@ -1,45 +1,60 @@
1
- var h = Object.defineProperty;
2
- var p = (o, n, t) => n in o ? h(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
3
- var r = (o, n, t) => p(o, typeof n != "symbol" ? n + "" : n, t);
4
- import { ACADEMY_LINKS as u } from "../../../../../enums/academy.js";
5
- import { useOnboardingStore as S } from "../../../../../stores/onboarding.js";
6
- import { CommonControl as _ } from "../../../common-control.js";
7
- import { useRecommendationExtensionStore as b } from "../../store/recommendation.js";
8
- const v = "recommendation-strategy-control";
9
- class A extends _ {
1
+ var u = Object.defineProperty;
2
+ var S = (o, n, t) => n in o ? u(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
3
+ var r = (o, n, t) => S(o, typeof n != "symbol" ? n + "" : n, t);
4
+ import { ACADEMY_LINKS as _ } from "../../../../../enums/academy.js";
5
+ import { useOnboardingStore as f } from "../../../../../stores/onboarding.js";
6
+ import { CommonControl as v } from "../../../common-control.js";
7
+ import { CURRENT_CONFIG_VERSION as b } from "../../constants/defaultConfig.js";
8
+ import { RecommendationConfigService as h } from "../../services/configService.js";
9
+ import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
10
+ const k = "recommendation-strategy-control";
11
+ class I extends v {
10
12
  constructor() {
11
13
  super(...arguments);
12
- r(this, "store", b());
13
- r(this, "onboardingStore", S());
14
+ r(this, "store", C());
15
+ r(this, "onboardingStore", f());
14
16
  r(this, "storeUnsubscription", () => {
15
17
  });
16
18
  r(this, "listeners", []);
17
19
  r(this, "lastPaintedState", null);
18
20
  }
19
21
  getId() {
20
- return v;
22
+ return k;
21
23
  }
22
24
  getTemplate() {
23
25
  const t = this.api.translate(
24
26
  "You can assign a recommendation strategy by selecting an existing one or creating a new one to show specific content."
25
- ), e = this.api.translate("For more information, you can"), s = this.api.translate("visit Academy");
27
+ ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
26
28
  return `
27
29
  <div class="strategy-control-container">
28
- <div class="strategy-control-header">
29
- <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
30
- </div>
31
- <div class="strategy-control-description-row">
32
- <p class="strategy-control-description">
33
- ${t}
34
- ${e}
35
- <a
36
- href="${u.EMAIL_RECOMMENDATION_BLOCK}"
37
- target="_blank"
38
- rel="noopener noreferrer">${s}</a>.
39
- </p>
30
+ <div data-strategy-loading-state>
31
+ <div class="strategy-control-header">
32
+ <span class="guido-skeleton guido-skeleton--strategy-title"></span>
33
+ </div>
34
+ <div class="strategy-control-description-row">
35
+ <span class="guido-skeleton guido-skeleton--strategy-description"></span>
36
+ </div>
37
+ <div class="strategy-control-skeleton-row">
38
+ <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
39
+ <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
40
+ </div>
40
41
  </div>
41
- <div data-strategy-empty-state style="display: none;">
42
- ${this._GuTwoColumns([
42
+ <div data-strategy-content style="display: none;">
43
+ <div class="strategy-control-header">
44
+ <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
45
+ </div>
46
+ <div class="strategy-control-description-row">
47
+ <p class="strategy-control-description">
48
+ ${t}
49
+ ${e}
50
+ <a
51
+ href="${_.EMAIL_RECOMMENDATION_BLOCK}"
52
+ target="_blank"
53
+ rel="noopener noreferrer">${a}</a>.
54
+ </p>
55
+ </div>
56
+ <div data-strategy-empty-state style="display: none;">
57
+ ${this._GuTwoColumns([
43
58
  this._GuButton({
44
59
  name: "assignStrategy",
45
60
  label: this.api.translate("Assign Strategy"),
@@ -53,85 +68,89 @@ class A extends _ {
53
68
  className: "strategy-control-cta primary"
54
69
  })
55
70
  ], "strategy-control-cta-row")}
56
- </div>
57
- <div data-strategy-loading-state>
58
- <div class="strategy-control-name-band">
59
- <span class="guido-skeleton guido-skeleton--strategy-name"></span>
60
- </div>
61
- <div class="strategy-control-actions">
62
- <span class="guido-skeleton guido-skeleton--strategy-action"></span>
63
- <span class="guido-skeleton guido-skeleton--strategy-action"></span>
64
71
  </div>
65
- </div>
66
- <div data-strategy-assigned-state style="display: none;">
67
- <div class="strategy-control-name-band">
68
- <span class="strategy-control-name" data-strategy-name></span>
69
- <span class="guido-skeleton guido-skeleton--strategy-name" data-strategy-name-skeleton></span>
70
- </div>
71
- <div class="strategy-control-actions">
72
- ${this._strategyAction({
72
+ <div data-strategy-assigned-state style="display: none;">
73
+ <div class="strategy-control-name-band">
74
+ <span class="strategy-control-name" data-strategy-name></span>
75
+ <span
76
+ class="guido-skeleton guido-skeleton--strategy-name" data-strategy-name-skeleton></span>
77
+ </div>
78
+ <div class="strategy-control-actions">
79
+ ${this._strategyAction({
73
80
  id: "guido__btn-change-strategy",
74
81
  label: this.api.translate("Change"),
75
82
  modifier: "change"
76
83
  })}
77
- ${this._strategyAction({
84
+ ${this._strategyAction({
78
85
  id: "guido__btn-remove-strategy",
79
86
  label: this.api.translate("Remove"),
80
87
  modifier: "remove"
81
88
  })}
89
+ </div>
82
90
  </div>
83
91
  </div>
84
92
  </div>
85
93
  `;
86
94
  }
87
- _strategyAction({ id: t, label: e, modifier: s }) {
95
+ _strategyAction({ id: t, label: e, modifier: a }) {
88
96
  return `
89
97
  <button
90
98
  id="${t}"
91
99
  type="button"
92
- class="strategy-control-action strategy-control-action--${s}">
100
+ class="strategy-control-action strategy-control-action--${a}">
93
101
  <span>${e}</span>
94
102
  </button>
95
103
  `;
96
104
  }
97
105
  onRender() {
98
- this._teardown(), this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
106
+ this._teardown(), this.store.strategyPanelOpen = !0, this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
99
107
  this._renderState();
100
- }), this.store.recommendationConfigs.strategyId && !this.store.strategies.length && this.store.fetchStrategies().catch(() => {
108
+ }), this.store.recommendationConfigs.strategyId && !this.store.strategiesFetched && this.store.fetchStrategies().catch(() => {
101
109
  });
102
- const t = this.store.currentRecommendationId;
103
- t !== null && !!this.store.blockStates[t] && !this.store.recommendationConfigs.strategyId && this.onboardingStore.startOnboarding("recommendationStrategyOnboarding");
110
+ }
111
+ /**
112
+ * Whether the document itself says this block has no strategy.
113
+ *
114
+ * Read the node, not the store: when the main control cannot resolve the block id off the
115
+ * node it never syncs the persisted config, so the store still holds defaults (empty
116
+ * strategyId) for an assigned block.
117
+ */
118
+ _isNodeUnassigned() {
119
+ if (!h.hasConfig(this.currentNode))
120
+ return !1;
121
+ const t = h.getConfig(this.currentNode);
122
+ return !t.strategyId && (t.configVersion ?? 0) >= b;
104
123
  }
105
124
  onDestroy() {
106
125
  this._teardown();
107
126
  }
108
127
  _teardown() {
109
- this.storeUnsubscription(), this.storeUnsubscription = () => {
128
+ this.store.strategyPanelOpen = !1, this.storeUnsubscription(), this.storeUnsubscription = () => {
110
129
  }, this.lastPaintedState = null, this.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
111
130
  }
112
131
  _setupButtonListeners() {
113
132
  const t = this.getContainer();
114
133
  if (!t)
115
134
  return;
116
- const e = (s, i) => {
117
- const a = t.querySelector(s);
118
- a && (a.addEventListener("click", i), this.listeners.push({ element: a, handler: i }));
135
+ const e = (a, i) => {
136
+ const s = t.querySelector(a);
137
+ s && (s.addEventListener("click", i), this.listeners.push({ element: s, handler: i }));
119
138
  };
120
139
  e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-create-strategy", () => this.store.openStrategyCreation()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.openRemoveStrategyModal());
121
140
  }
122
141
  _renderState() {
123
- var m;
124
- const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((m = this.store.assignedStrategy) == null ? void 0 : m.name) ?? "" : "", s = !!t && !e && this.store.strategiesLoading, i = `${t}\0${e}\0${s}`;
142
+ var p;
143
+ const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((p = this.store.assignedStrategy) == null ? void 0 : p.name) ?? "" : "", a = !!t && !e && (this.store.strategiesLoading || !this.store.strategiesSettled), i = `${t}\0${e}\0${a}`;
125
144
  if (i === this.lastPaintedState)
126
145
  return;
127
- const a = this.getContainer();
128
- if (!a)
146
+ const s = this.getContainer();
147
+ if (!s)
129
148
  return;
130
- const l = a.querySelector("[data-strategy-empty-state]"), d = a.querySelector("[data-strategy-assigned-state]"), g = a.querySelector("[data-strategy-loading-state]"), c = a.querySelector("[data-strategy-name]"), y = a.querySelector("[data-strategy-name-skeleton]");
131
- !l || !d || (g && (g.style.display = "none"), l.style.display = t ? "none" : "", d.style.display = t ? "" : "none", c && (c.style.display = s ? "none" : "", t && !s && (c.textContent = e || `#${t}`)), y && (y.style.display = s ? "" : "none"), this.lastPaintedState = i);
149
+ const c = s.querySelector("[data-strategy-empty-state]"), g = s.querySelector("[data-strategy-assigned-state]"), l = s.querySelector("[data-strategy-loading-state]"), y = s.querySelector("[data-strategy-content]"), d = s.querySelector("[data-strategy-name]"), m = s.querySelector("[data-strategy-name-skeleton]");
150
+ !c || !g || (l && (l.style.display = "none"), y && (y.style.display = ""), c.style.display = t ? "none" : "", g.style.display = t ? "" : "none", !t && this._isNodeUnassigned() && this.onboardingStore.startOnboarding("recommendationStrategyOnboarding"), d && (d.style.display = a ? "none" : "", t && !a && (d.textContent = e || `#${t}`)), m && (m.style.display = a ? "block" : "none"), this.lastPaintedState = i);
132
151
  }
133
152
  }
134
153
  export {
135
- v as STRATEGY_CONTROL_ID,
136
- A as StrategyControl
154
+ k as STRATEGY_CONTROL_ID,
155
+ I as StrategyControl
137
156
  };