@useinsider/guido 3.18.2-beta.45f708c → 3.18.2-beta.6dbea61
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/Guido.vue.js +3 -3
- package/dist/components/Guido.vue2.js +30 -30
- package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue.js +11 -13
- package/dist/components/organisms/extensions/recommendation/AssignStrategyDrawer.vue2.js +51 -70
- package/dist/components/organisms/extensions/recommendation/RemoveStrategyModal.vue2.js +37 -23
- package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js +18 -20
- package/dist/components/organisms/save-as-template/SaveAsTemplateDrawer.vue2.js +34 -34
- package/dist/composables/useCustomInterfaceAppearance.js +46 -56
- package/dist/composables/useHtmlValidator.js +79 -84
- package/dist/composables/useHttp.js +22 -24
- package/dist/composables/useRecommendation.js +35 -40
- package/dist/composables/useStripo.js +30 -30
- package/dist/enums/extensions/recommendationBlock.js +31 -38
- package/dist/extensions/Blocks/Recommendation/block.js +39 -43
- package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +20 -21
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +44 -55
- package/dist/extensions/Blocks/Recommendation/controls/main/strategy.js +52 -84
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +74 -74
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +90 -190
- package/dist/extensions/Blocks/Recommendation/utils/nodeConfigWriter.js +16 -26
- package/dist/extensions/Blocks/Recommendation/validation/requiredFields.js +12 -21
- package/dist/guido.css +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +28 -29
- package/dist/package.json.js +1 -1
- package/dist/services/templateLibraryApi.js +14 -17
- package/dist/src/enums/extensions/recommendationBlock.d.ts +0 -2
- package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts +0 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +1 -7
- package/dist/src/extensions/Blocks/Recommendation/controls/main/strategy.d.ts +0 -9
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +2 -7
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +0 -87
- package/dist/src/extensions/Blocks/Recommendation/validation/requiredFields.d.ts +0 -4
- package/dist/src/stores/onboarding.d.ts +0 -377
- package/dist/src/utils/genericUtil.d.ts +0 -6
- package/dist/static/styles/components/recommendation-strategy.css.js +4 -34
- package/dist/stores/onboarding.js +36 -41
- package/dist/utils/genericUtil.js +54 -63
- package/dist/utils/templatePreparation.js +59 -61
- package/package.json +3 -3
- package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue.js +0 -21
- package/dist/components/organisms/onboarding/RecommendationStrategyOnboarding.vue2.js +0 -47
- package/dist/extensions/Blocks/Recommendation/utils/strategyCommit.js +0 -24
- package/dist/src/components/organisms/onboarding/RecommendationStrategyOnboarding.vue.d.ts +0 -2
- package/dist/src/extensions/Blocks/Recommendation/utils/strategyCommit.d.ts +0 -14
- package/dist/src/utils/liquidDynamicContent.d.ts +0 -20
- package/dist/static/styles/components/skeleton.css.js +0 -23
- package/dist/utils/liquidDynamicContent.js +0 -15
|
@@ -1,44 +1,46 @@
|
|
|
1
1
|
var m = Object.defineProperty;
|
|
2
|
-
var C = (
|
|
3
|
-
var n = (
|
|
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);
|
|
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
|
-
import {
|
|
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 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
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 ht } from "./currency.js";
|
|
16
16
|
import { FiltersControl as S } from "./filters.js";
|
|
17
|
-
import { FILTERS_CONTROL_ID as
|
|
17
|
+
import { FILTERS_CONTROL_ID as gt } 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
20
|
import { LocaleControl as L } from "./locale.js";
|
|
21
21
|
import { LOCALE_CONTROL_ID as yt } from "./locale.js";
|
|
22
|
-
import { PricePlacementControl as
|
|
22
|
+
import { PricePlacementControl as E } from "./pricePlacement.js";
|
|
23
23
|
import { PRICE_PLACEMENT_CONTROL_ID as _t } from "./pricePlacement.js";
|
|
24
|
-
import { ProductCountControl as
|
|
24
|
+
import { ProductCountControl as k } from "./productCount.js";
|
|
25
25
|
import { PRODUCT_COUNT_CONTROL_ID as Rt } from "./productCount.js";
|
|
26
|
-
import { ProductLayoutControl as
|
|
26
|
+
import { ProductLayoutControl as D } from "./productLayout.js";
|
|
27
27
|
import { PRODUCT_LAYOUT_CONTROL_ID as Tt } from "./productLayout.js";
|
|
28
|
-
import { ShuffleControl as
|
|
28
|
+
import { ShuffleControl as F } from "./shuffle.js";
|
|
29
29
|
import { SHUFFLE_CONTROL_ID as St } from "./shuffle.js";
|
|
30
30
|
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
|
-
import { adjustProductsToSize as
|
|
34
|
-
import { useDebounceFn as
|
|
35
|
-
const
|
|
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 f } from "../../../../../node_modules/@vueuse/shared/index.js";
|
|
35
|
+
const $ = "ui-elements-recommendation-block";
|
|
36
36
|
class at extends N {
|
|
37
37
|
constructor() {
|
|
38
38
|
super(...arguments);
|
|
39
39
|
n(this, "store", R());
|
|
40
40
|
n(this, "storeUnsubscription", () => {
|
|
41
41
|
});
|
|
42
|
+
// blockId -> fingerprint of the node config as it looked at the last sync.
|
|
43
|
+
n(this, "syncedConfigs", /* @__PURE__ */ new Map());
|
|
42
44
|
// A config change waiting to reach the node config. Deferred so it can ride the
|
|
43
45
|
// re-render's single apply() — one user action must cost one undo press.
|
|
44
46
|
n(this, "pendingNodeConfigWrite", null);
|
|
@@ -58,7 +60,7 @@ class at extends N {
|
|
|
58
60
|
/**
|
|
59
61
|
* Debounced product fetch to prevent rapid API calls during config changes
|
|
60
62
|
*/
|
|
61
|
-
n(this, "_debouncedFetchProducts",
|
|
63
|
+
n(this, "_debouncedFetchProducts", f(async () => {
|
|
62
64
|
try {
|
|
63
65
|
await this.store.fetchRecommendationProducts();
|
|
64
66
|
} finally {
|
|
@@ -76,7 +78,7 @@ class at extends N {
|
|
|
76
78
|
* count. The store pads products to the configured size, so in-place only
|
|
77
79
|
* fails when the size actually changed.
|
|
78
80
|
*/
|
|
79
|
-
n(this, "_debouncedRegenerateWithProducts",
|
|
81
|
+
n(this, "_debouncedRegenerateWithProducts", f(() => {
|
|
80
82
|
const t = this.store.recommendationProducts;
|
|
81
83
|
if (!this.currentNode || !this.api)
|
|
82
84
|
return;
|
|
@@ -97,7 +99,7 @@ class at extends N {
|
|
|
97
99
|
}, 100));
|
|
98
100
|
}
|
|
99
101
|
getId() {
|
|
100
|
-
return
|
|
102
|
+
return $;
|
|
101
103
|
}
|
|
102
104
|
get _subControls() {
|
|
103
105
|
return [
|
|
@@ -118,7 +120,7 @@ class at extends N {
|
|
|
118
120
|
return this.rrsEnabled = p().isFeatureEnabled("reusableRecommendationStrategy"), this._subControls.forEach((e) => {
|
|
119
121
|
var o;
|
|
120
122
|
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
|
|
123
|
+
}), this.algorithmControl = new T(), this.localeControl = new L(), this.currencyControl = new P(), this.productCountControl = new k(), this.productLayoutControl = new D(), this.filtersControl = new S(), this.shuffleControl = new F(), this.pricePlacementControl = new E(), this.layoutOrientationControl = new O(), this.strategyControl = this.rrsEnabled ? new w() : null, this._subControls.forEach((e) => {
|
|
122
124
|
e && (e.api = this.api);
|
|
123
125
|
}), `
|
|
124
126
|
<div class="recommendation-controls-container">
|
|
@@ -140,14 +142,14 @@ class at extends N {
|
|
|
140
142
|
const e = (i = this.getContainer()) == null ? void 0 : i.querySelector(".recommendation-controls-container");
|
|
141
143
|
if (!e)
|
|
142
144
|
return;
|
|
143
|
-
const o = this._getRecommendationIdFromNode(t) === null ? null :
|
|
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) >= _);
|
|
144
146
|
e.classList.toggle("strategy-block", r);
|
|
145
147
|
}
|
|
146
148
|
async onRender() {
|
|
147
149
|
var o;
|
|
148
150
|
b(this.api);
|
|
149
151
|
const t = this._getRecommendationIdFromNode(this.currentNode), e = t ?? this.store.currentRecommendationId;
|
|
150
|
-
if (e !== null && this.store.setCurrentBlock(e), t !== null && this._syncNodeConfigIfChanged(t), this._listenStateUpdates(), this._showControlsForBlock(this.currentNode),
|
|
152
|
+
if (e !== null && this.store.setCurrentBlock(e), t !== null && this._syncNodeConfigIfChanged(t), this._listenStateUpdates(), this._showControlsForBlock(this.currentNode), e !== null && ((o = this.store.blockStates[e]) != null && o.isInitialized)) {
|
|
151
153
|
this._initializeSubControls();
|
|
152
154
|
return;
|
|
153
155
|
}
|
|
@@ -198,34 +200,21 @@ class at extends N {
|
|
|
198
200
|
* fingerprint diff on this hook is the only way to notice (SD-149105).
|
|
199
201
|
* An unchanged fingerprint means the move came from us, so runtime store
|
|
200
202
|
* edits are never clobbered (SD-141049).
|
|
201
|
-
*
|
|
202
|
-
* The fingerprint is kept on the block's own store state so deleting the
|
|
203
|
-
* block drops it with the state it describes. A control-owned memo outlived
|
|
204
|
-
* that state and made a re-dropped saved module keep the defaults its wiped
|
|
205
|
-
* state was rebuilt with (SD-150347).
|
|
206
203
|
*/
|
|
207
204
|
_syncNodeConfigIfChanged(t) {
|
|
208
205
|
this.pendingNodeConfigWrite && this.pendingNodeConfigWrite.blockId !== t && this._flushPendingNodeConfig();
|
|
209
|
-
const e = this.
|
|
210
|
-
|
|
211
|
-
return;
|
|
212
|
-
const o = JSON.stringify(l.getConfig(this.currentNode)), r = e.syncedConfigFingerprint;
|
|
213
|
-
e.syncedConfigFingerprint = o, r !== o && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
|
|
214
|
-
}
|
|
215
|
-
/** Whether the deferred write would move the node's strategyId — see the caller (SD-149916). */
|
|
216
|
-
_isPendingStrategyIdChange() {
|
|
217
|
-
const t = this.pendingNodeConfigWrite;
|
|
218
|
-
return t ? l.getConfig(this.currentNode).strategyId !== t.updates.strategyId : !1;
|
|
206
|
+
const e = JSON.stringify(c.getConfig(this.currentNode)), o = this.syncedConfigs.get(t);
|
|
207
|
+
this.syncedConfigs.set(t, e), o !== e && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
|
|
219
208
|
}
|
|
220
209
|
_capturePendingNodeConfigWrite() {
|
|
221
210
|
const t = this.store.currentRecommendationId;
|
|
222
211
|
if (!this.currentNode || !this.api || t === null)
|
|
223
212
|
return;
|
|
224
|
-
const { filters: e,
|
|
213
|
+
const { filters: e, strategyId: o, size: r } = this.store.recommendationConfigs;
|
|
225
214
|
this.pendingNodeConfigWrite = {
|
|
226
215
|
blockId: t,
|
|
227
216
|
node: this.currentNode,
|
|
228
|
-
updates: { filters: e,
|
|
217
|
+
updates: { filters: e, strategyId: o, size: r }
|
|
229
218
|
};
|
|
230
219
|
}
|
|
231
220
|
/**
|
|
@@ -240,7 +229,7 @@ class at extends N {
|
|
|
240
229
|
*/
|
|
241
230
|
_stagePendingNodeConfig(t) {
|
|
242
231
|
const e = this.pendingNodeConfigWrite;
|
|
243
|
-
return !e || !this.currentNode ? !1 : (
|
|
232
|
+
return !e || !this.currentNode ? !1 : (c.stageConfig(t, this.currentNode, e.updates), !0);
|
|
244
233
|
}
|
|
245
234
|
/**
|
|
246
235
|
* Arms the guaranteed fallback write, once the product fetch has settled. The
|
|
@@ -264,12 +253,12 @@ class at extends N {
|
|
|
264
253
|
const t = this.pendingNodeConfigWrite;
|
|
265
254
|
if (this.pendingNodeConfigWrite = null, this._clearConfigFlush(), !t || !this.api)
|
|
266
255
|
return;
|
|
267
|
-
const e = t.blockId === this.store.currentRecommendationId && this.currentNode ? this.currentNode : t.node, o =
|
|
268
|
-
JSON.stringify(o.filters) === JSON.stringify(t.updates.filters) && o.
|
|
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");
|
|
269
258
|
}
|
|
270
259
|
_syncNodeConfigToStore() {
|
|
271
260
|
var r;
|
|
272
|
-
const t =
|
|
261
|
+
const t = c.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
|
|
273
262
|
this.store.patchCurrentBlockConfig({
|
|
274
263
|
strategy: t.strategy,
|
|
275
264
|
strategyId: t.strategyId,
|
|
@@ -333,7 +322,7 @@ class at extends N {
|
|
|
333
322
|
_applySmartDefaults() {
|
|
334
323
|
if (!this.currentNode || !this.api)
|
|
335
324
|
return;
|
|
336
|
-
const t =
|
|
325
|
+
const t = c.getConfig(this.currentNode), e = {};
|
|
337
326
|
let o = null, r = null, i = null;
|
|
338
327
|
if (t.currency.code === a.currency.code) {
|
|
339
328
|
const { currencyList: s } = this.store;
|
|
@@ -357,7 +346,7 @@ class at extends N {
|
|
|
357
346
|
(d) => d.value === a.language
|
|
358
347
|
) || (i = s[0].value, e.language = i));
|
|
359
348
|
}
|
|
360
|
-
!o && !r && !i || (
|
|
349
|
+
!o && !r && !i || (c.updateConfig(
|
|
361
350
|
this.api,
|
|
362
351
|
this.currentNode,
|
|
363
352
|
e,
|
|
@@ -418,19 +407,19 @@ class at extends N {
|
|
|
418
407
|
return;
|
|
419
408
|
}
|
|
420
409
|
const s = t.$state.configVersion;
|
|
421
|
-
s !== o && (o = s, this._capturePendingNodeConfigWrite(), this.
|
|
422
|
-
const u = t.recommendationProducts, d = u !== e,
|
|
423
|
-
d &&
|
|
410
|
+
s !== o && (o = s, this._capturePendingNodeConfigWrite(), this._debouncedFetchProducts());
|
|
411
|
+
const u = t.recommendationProducts, d = u !== e, g = Array.isArray(u) && u.length > 0;
|
|
412
|
+
d && g && (e = u, this._debouncedRegenerateWithProducts());
|
|
424
413
|
});
|
|
425
414
|
}
|
|
426
415
|
}
|
|
427
416
|
export {
|
|
428
417
|
ut as ALGORITHM_CONTROL_ID,
|
|
429
418
|
T as AlgorithmControl,
|
|
430
|
-
|
|
431
|
-
|
|
419
|
+
$ as CONTROL_BLOCK_ID,
|
|
420
|
+
ht as CURRENCY_CONTROL_ID,
|
|
432
421
|
P as CurrencyControl,
|
|
433
|
-
|
|
422
|
+
gt as FILTERS_CONTROL_ID,
|
|
434
423
|
S as FiltersControl,
|
|
435
424
|
Ct as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
436
425
|
yt as LOCALE_CONTROL_ID,
|
|
@@ -439,18 +428,18 @@ export {
|
|
|
439
428
|
_t as PRICE_PLACEMENT_CONTROL_ID,
|
|
440
429
|
Rt as PRODUCT_COUNT_CONTROL_ID,
|
|
441
430
|
Tt as PRODUCT_LAYOUT_CONTROL_ID,
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
431
|
+
E as PricePlacementControl,
|
|
432
|
+
k as ProductCountControl,
|
|
433
|
+
D as ProductLayoutControl,
|
|
445
434
|
at as RecommendationBlockControl,
|
|
446
435
|
St as SHUFFLE_CONTROL_ID,
|
|
447
436
|
Lt as STRATEGY_CONTROL_ID,
|
|
448
|
-
|
|
437
|
+
F as ShuffleControl,
|
|
449
438
|
w as StrategyControl,
|
|
450
|
-
|
|
451
|
-
|
|
439
|
+
kt as adjustProductsToSize,
|
|
440
|
+
Dt as formatProductPrice,
|
|
452
441
|
v as getBlockElement,
|
|
453
|
-
|
|
442
|
+
Ft as getCardComposition,
|
|
454
443
|
wt as getCurrentLayout,
|
|
455
444
|
At as getMainContainerTbody,
|
|
456
445
|
x as isPartnerManagedBlock,
|
|
@@ -1,25 +1,21 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ACADEMY_LINKS as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
|
|
10
|
-
const k = "recommendation-strategy-control";
|
|
11
|
-
class I extends v {
|
|
1
|
+
var d = Object.defineProperty;
|
|
2
|
+
var y = (r, s, t) => s in r ? d(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
|
|
3
|
+
var o = (r, s, t) => y(r, typeof s != "symbol" ? s + "" : s, t);
|
|
4
|
+
import { ACADEMY_LINKS as m } from "../../../../../enums/academy.js";
|
|
5
|
+
import { CommonControl as h } from "../../../common-control.js";
|
|
6
|
+
import { useRecommendationExtensionStore as u } from "../../store/recommendation.js";
|
|
7
|
+
const p = "recommendation-strategy-control";
|
|
8
|
+
class f extends h {
|
|
12
9
|
constructor() {
|
|
13
10
|
super(...arguments);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
r(this, "storeUnsubscription", () => {
|
|
11
|
+
o(this, "store", u());
|
|
12
|
+
o(this, "storeUnsubscription", () => {
|
|
17
13
|
});
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
o(this, "listeners", []);
|
|
15
|
+
o(this, "lastPaintedState", null);
|
|
20
16
|
}
|
|
21
17
|
getId() {
|
|
22
|
-
return
|
|
18
|
+
return p;
|
|
23
19
|
}
|
|
24
20
|
getTemplate() {
|
|
25
21
|
const t = this.api.translate(
|
|
@@ -27,34 +23,21 @@ class I extends v {
|
|
|
27
23
|
), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
|
|
28
24
|
return `
|
|
29
25
|
<div class="strategy-control-container">
|
|
30
|
-
<div
|
|
31
|
-
<
|
|
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>
|
|
26
|
+
<div class="strategy-control-header">
|
|
27
|
+
<h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
|
|
41
28
|
</div>
|
|
42
|
-
<div
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</p>
|
|
55
|
-
</div>
|
|
56
|
-
<div data-strategy-empty-state style="display: none;">
|
|
57
|
-
${this._GuTwoColumns([
|
|
29
|
+
<div class="strategy-control-description-row">
|
|
30
|
+
<p class="strategy-control-description">
|
|
31
|
+
${t}
|
|
32
|
+
${e}
|
|
33
|
+
<a
|
|
34
|
+
href="${m.EMAIL_RECOMMENDATION_BLOCK}"
|
|
35
|
+
target="_blank"
|
|
36
|
+
rel="noopener noreferrer">${a}</a>.
|
|
37
|
+
</p>
|
|
38
|
+
</div>
|
|
39
|
+
<div data-strategy-empty-state>
|
|
40
|
+
${this._GuTwoColumns([
|
|
58
41
|
this._GuButton({
|
|
59
42
|
name: "assignStrategy",
|
|
60
43
|
label: this.api.translate("Assign Strategy"),
|
|
@@ -65,28 +48,26 @@ class I extends v {
|
|
|
65
48
|
name: "createStrategy",
|
|
66
49
|
label: this.api.translate("Create New Strategy"),
|
|
67
50
|
id: "guido__btn-create-strategy",
|
|
68
|
-
className: "strategy-control-cta primary"
|
|
51
|
+
className: "strategy-control-cta primary",
|
|
52
|
+
disabled: !0
|
|
69
53
|
})
|
|
70
54
|
], "strategy-control-cta-row")}
|
|
55
|
+
</div>
|
|
56
|
+
<div data-strategy-assigned-state style="display: none;">
|
|
57
|
+
<div class="strategy-control-name-band">
|
|
58
|
+
<span class="strategy-control-name" data-strategy-name></span>
|
|
71
59
|
</div>
|
|
72
|
-
<div
|
|
73
|
-
|
|
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({
|
|
60
|
+
<div class="strategy-control-actions">
|
|
61
|
+
${this._strategyAction({
|
|
80
62
|
id: "guido__btn-change-strategy",
|
|
81
63
|
label: this.api.translate("Change"),
|
|
82
64
|
modifier: "change"
|
|
83
65
|
})}
|
|
84
|
-
|
|
66
|
+
${this._strategyAction({
|
|
85
67
|
id: "guido__btn-remove-strategy",
|
|
86
68
|
label: this.api.translate("Remove"),
|
|
87
69
|
modifier: "remove"
|
|
88
70
|
})}
|
|
89
|
-
</div>
|
|
90
71
|
</div>
|
|
91
72
|
</div>
|
|
92
73
|
</div>
|
|
@@ -103,54 +84,41 @@ class I extends v {
|
|
|
103
84
|
`;
|
|
104
85
|
}
|
|
105
86
|
onRender() {
|
|
106
|
-
this._teardown(), this.
|
|
87
|
+
this._teardown(), this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
|
|
107
88
|
this._renderState();
|
|
108
|
-
}), this.store.recommendationConfigs.strategyId && !this.store.
|
|
89
|
+
}), this.store.recommendationConfigs.strategyId && !this.store.strategies.length && this.store.fetchStrategies().catch(() => {
|
|
109
90
|
});
|
|
110
91
|
}
|
|
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;
|
|
123
|
-
}
|
|
124
92
|
onDestroy() {
|
|
125
93
|
this._teardown();
|
|
126
94
|
}
|
|
127
95
|
_teardown() {
|
|
128
|
-
this.
|
|
96
|
+
this.storeUnsubscription(), this.storeUnsubscription = () => {
|
|
129
97
|
}, this.lastPaintedState = null, this.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
|
|
130
98
|
}
|
|
131
99
|
_setupButtonListeners() {
|
|
132
100
|
const t = this.getContainer();
|
|
133
101
|
if (!t)
|
|
134
102
|
return;
|
|
135
|
-
const e = (a,
|
|
136
|
-
const
|
|
137
|
-
|
|
103
|
+
const e = (a, n) => {
|
|
104
|
+
const i = t.querySelector(a);
|
|
105
|
+
i && (i.addEventListener("click", n), this.listeners.push({ element: i, handler: n }));
|
|
138
106
|
};
|
|
139
|
-
e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-
|
|
107
|
+
e("#guido__btn-assign-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-change-strategy", () => this.store.openAssignStrategyDrawer()), e("#guido__btn-remove-strategy", () => this.store.openRemoveStrategyModal());
|
|
140
108
|
}
|
|
141
109
|
_renderState() {
|
|
142
|
-
var
|
|
143
|
-
const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((
|
|
144
|
-
if (
|
|
110
|
+
var l;
|
|
111
|
+
const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((l = this.store.assignedStrategy) == null ? void 0 : l.name) ?? "" : "", a = `${t}\0${e}`;
|
|
112
|
+
if (a === this.lastPaintedState)
|
|
145
113
|
return;
|
|
146
|
-
const
|
|
147
|
-
if (!
|
|
114
|
+
const n = this.getContainer();
|
|
115
|
+
if (!n)
|
|
148
116
|
return;
|
|
149
|
-
const
|
|
150
|
-
!
|
|
117
|
+
const i = n.querySelector("[data-strategy-empty-state]"), c = n.querySelector("[data-strategy-assigned-state]"), g = n.querySelector("[data-strategy-name]");
|
|
118
|
+
!i || !c || (i.style.display = t ? "none" : "", c.style.display = t ? "" : "none", g && t && (g.textContent = e || `#${t}`), this.lastPaintedState = a);
|
|
151
119
|
}
|
|
152
120
|
}
|
|
153
121
|
export {
|
|
154
|
-
|
|
155
|
-
|
|
122
|
+
p as STRATEGY_CONTROL_ID,
|
|
123
|
+
f as StrategyControl
|
|
156
124
|
};
|