@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.
- package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue.js +1 -1
- package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue2.js +25 -27
- package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue.js +3 -3
- package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue2.js +21 -20
- package/dist/composables/useCustomInterfaceAppearance.js +56 -48
- package/dist/composables/useStripo.js +30 -30
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +57 -52
- package/dist/extensions/Blocks/Recommendation/controls/main/strategy.js +81 -62
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +46 -31
- package/dist/guido.css +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +2 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/strategy.d.ts +8 -0
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +27 -2
- package/dist/static/styles/components/recommendation-strategy.css.js +23 -8
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
var m = Object.defineProperty;
|
|
2
|
-
var C = (
|
|
3
|
-
var
|
|
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
|
|
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
|
|
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
|
|
35
|
-
const
|
|
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
|
-
|
|
40
|
-
|
|
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
|
-
|
|
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
|
-
|
|
47
|
-
|
|
46
|
+
r(this, "pendingNodeConfigWrite", null);
|
|
47
|
+
r(this, "pendingConfigFlushTimer", null);
|
|
48
48
|
// Sub-control instances for lifecycle management
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 :
|
|
146
|
-
e.classList.toggle("strategy-block",
|
|
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((
|
|
164
|
+
}), this._subControls.forEach((n) => {
|
|
165
165
|
var i;
|
|
166
|
-
|
|
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(
|
|
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:
|
|
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:
|
|
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 : (
|
|
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 =
|
|
257
|
-
JSON.stringify(o.filters) === JSON.stringify(t.updates.filters) && o.strategyId === t.updates.strategyId && o.size === t.updates.size ||
|
|
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
|
|
261
|
-
const t =
|
|
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,
|
|
304
|
-
o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][
|
|
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 =
|
|
326
|
-
let o = 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
|
-
) || (
|
|
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 && !
|
|
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
|
-
...
|
|
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
|
|
385
|
-
return Number.isNaN(
|
|
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,
|
|
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 !==
|
|
406
|
-
|
|
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
|
-
|
|
420
|
-
|
|
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
|
|
2
|
-
var
|
|
3
|
-
var r = (o, n, t) =>
|
|
4
|
-
import { ACADEMY_LINKS as
|
|
5
|
-
import { useOnboardingStore as
|
|
6
|
-
import { CommonControl as
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
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",
|
|
13
|
-
r(this, "onboardingStore",
|
|
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
|
|
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"),
|
|
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
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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-
|
|
42
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
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:
|
|
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--${
|
|
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.
|
|
108
|
+
}), this.store.recommendationConfigs.strategyId && !this.store.strategiesFetched && this.store.fetchStrategies().catch(() => {
|
|
101
109
|
});
|
|
102
|
-
|
|
103
|
-
|
|
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 = (
|
|
117
|
-
const
|
|
118
|
-
|
|
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
|
|
124
|
-
const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((
|
|
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
|
|
128
|
-
if (!
|
|
146
|
+
const s = this.getContainer();
|
|
147
|
+
if (!s)
|
|
129
148
|
return;
|
|
130
|
-
const
|
|
131
|
-
!
|
|
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
|
-
|
|
136
|
-
|
|
154
|
+
k as STRATEGY_CONTROL_ID,
|
|
155
|
+
I as StrategyControl
|
|
137
156
|
};
|