@useinsider/guido 3.18.1-beta.e489d08 → 3.18.1-beta.e9a6c91

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.
@@ -15,7 +15,7 @@ var a = function() {
15
15
  n,
16
16
  !1,
17
17
  null,
18
- "b447f626"
18
+ "438d62b8"
19
19
  );
20
20
  const y = i.exports;
21
21
  export {
@@ -1,35 +1,37 @@
1
- import { defineComponent as E, defineAsyncComponent as y, ref as f, computed as c, watch as O } from "vue";
1
+ import { defineComponent as O, defineAsyncComponent as u, ref as f, computed as c, watch as h } from "vue";
2
2
  import "@useinsider/design-system-organisms/style";
3
- import { useToaster as h } from "../../../../composables/useToaster.js";
4
- import { useTranslations as A } from "../../../../composables/useTranslations.js";
5
- import { DOTTED_DATE_LOCALE as I } from "../../../../enums/date.js";
6
- import { URLS as C } from "../../../../enums/extensions/recommendationBlock.js";
7
- import { ToasterTypeOptions as m } from "../../../../enums/toaster.js";
8
- import { useRecommendationExtensionStore as B } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
9
- import b from "./StrategyInfoBoxContent.vue.js";
3
+ import { useToaster as A } from "../../../../composables/useToaster.js";
4
+ import { useTranslations as I } from "../../../../composables/useTranslations.js";
5
+ import { DOTTED_DATE_LOCALE as C } from "../../../../enums/date.js";
6
+ import { URLS as B } from "../../../../enums/extensions/recommendationBlock.js";
7
+ import { ToasterTypeOptions as d } from "../../../../enums/toaster.js";
8
+ import { useRecommendationExtensionStore as b } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
9
+ import k from "./StrategyInfoBoxContent.vue.js";
10
10
  import { formatShortDate as N } from "../../../../utils/dateUtil.js";
11
11
  import { asText as S } from "../../../../utils/genericUtil.js";
12
- import { escapeHtml as k } from "../../../../utils/htmlEscape.js";
13
- import { InSkeleton as P } from "@useinsider/design-system-vue";
14
- const Y = /* @__PURE__ */ E({
12
+ import { escapeHtml as P } from "../../../../utils/htmlEscape.js";
13
+ import { InSkeleton as R } from "@useinsider/design-system-vue";
14
+ const Z = /* @__PURE__ */ O({
15
15
  __name: "AssignStrategyDrawer",
16
- setup(R) {
17
- const g = () => import("@useinsider/design-system-organisms"), d = (t, e) => ({
18
- render: (a) => a(P, { props: { sizing: { width: t, height: e } } })
19
- }), T = y({
16
+ setup(U) {
17
+ const g = () => import("@useinsider/design-system-organisms"), m = (t, e, a = "") => ({
18
+ render: (E) => E(R, { class: a, props: { sizing: { width: t, height: e } } })
19
+ }), T = u({
20
20
  loader: async () => (await g()).OrgStrategyDetailModal,
21
- loadingComponent: d(480, 240),
21
+ loadingComponent: m(480, 240),
22
22
  delay: 0
23
- }), _ = y({
24
- loader: async () => (await g()).OrgStrategyDropdown
25
- }), n = "guido-edit-strategy-", s = A(), r = B(), { showToaster: i } = h(), o = f(null), l = f(!1), D = c(() => r.assignStrategyDrawerStatus ? s("email-editor.assign-strategy-description", { url: C.RECOMMENDATION_STRATEGIES_PANEL_PATH }) : "");
26
- O(() => r.assignStrategyDrawerStatus, (t) => {
23
+ }), _ = u({
24
+ loader: async () => (await g()).OrgStrategyDropdown,
25
+ loadingComponent: m(240, 42, "assign-strategy-select-skeleton"),
26
+ delay: 0
27
+ }), n = "guido-edit-strategy-", s = I(), r = b(), { showToaster: i } = A(), o = f(null), l = f(!1), D = c(() => r.assignStrategyDrawerStatus ? s("email-editor.assign-strategy-description", { url: B.RECOMMENDATION_STRATEGIES_PANEL_PATH }) : "");
28
+ h(() => r.assignStrategyDrawerStatus, (t) => {
27
29
  if (!t)
28
30
  return;
29
31
  const { strategyId: e } = r.recommendationConfigs;
30
32
  o.value = e || null, l.value = !1, r.fetchStrategies().catch(() => {
31
33
  i({
32
- type: m.Error,
34
+ type: d.Error,
33
35
  message: s("discovery-strategy.error-description")
34
36
  });
35
37
  });
@@ -38,7 +40,7 @@ const Y = /* @__PURE__ */ E({
38
40
  const e = S(t.updated_at || t.created_at);
39
41
  if (!e)
40
42
  return "";
41
- const a = N(e, I);
43
+ const a = N(e, C);
42
44
  return s("recommendation-strategy.last-updated-on", { value: a });
43
45
  }, v = c(() => r.strategies.map((t) => ({
44
46
  text: t.name,
@@ -48,10 +50,10 @@ const Y = /* @__PURE__ */ E({
48
50
  theme: "light",
49
51
  variant: "information",
50
52
  className: "assign-strategy-info-box",
51
- titleText: k(S(t.name)),
53
+ titleText: P(S(t.name)),
52
54
  descriptionStatus: !0,
53
55
  descriptionText: p(t),
54
- slot: b,
56
+ slot: k,
55
57
  slotProps: { strategy: t },
56
58
  // The info box drops the option's value/text, so the id is the only channel
57
59
  // that can carry the strategy back to the click handler.
@@ -68,7 +70,7 @@ const Y = /* @__PURE__ */ E({
68
70
  var a;
69
71
  const e = (a = t == null ? void 0 : t.id) != null && a.startsWith(n) ? t.id.slice(n.length) : "";
70
72
  e && (String(o.value ?? "") === e && (o.value = null), r.recommendationConfigs.strategyId === e && r.removeStrategy(), r.openStrategyEdit(e));
71
- }, u = c(() => {
73
+ }, y = c(() => {
72
74
  const t = r.strategies.find((e) => String(e.strategy_id) === String(o.value ?? ""));
73
75
  return t ? { ...t, fallback_config: null } : null;
74
76
  }), x = c(() => ({
@@ -83,10 +85,10 @@ const Y = /* @__PURE__ */ E({
83
85
  labelText: s("products.cancel")
84
86
  }
85
87
  }));
86
- return { __sfc: !0, loadOrganisms: g, skeleton: d, OrgStrategyDetailModal: T, OrgStrategyDropdown: _, EDIT_BUTTON_ID_PREFIX: n, trans: s, store: r, showToaster: i, selectedStrategyId: o, showSelectionError: l, drawerDescription: D, lastUpdatedText: p, strategyOptions: v, onInfoBoxButtonClick: w, selectedStrategy: u, footerButtonGroupOptions: x, closeDrawer: () => {
88
+ return { __sfc: !0, loadOrganisms: g, skeleton: m, OrgStrategyDetailModal: T, OrgStrategyDropdown: _, EDIT_BUTTON_ID_PREFIX: n, trans: s, store: r, showToaster: i, selectedStrategyId: o, showSelectionError: l, drawerDescription: D, lastUpdatedText: p, strategyOptions: v, onInfoBoxButtonClick: w, selectedStrategy: y, footerButtonGroupOptions: x, closeDrawer: () => {
87
89
  r.closeAssignStrategyDrawer();
88
90
  }, assignStrategy: async () => {
89
- const t = u.value;
91
+ const t = y.value;
90
92
  if (!t) {
91
93
  l.value = !0;
92
94
  return;
@@ -99,13 +101,13 @@ const Y = /* @__PURE__ */ E({
99
101
  }
100
102
  if (!e) {
101
103
  i({
102
- type: m.Error,
104
+ type: d.Error,
103
105
  message: s("email-editor.strategy-assign-failed", { strategyName: t.name })
104
106
  });
105
107
  return;
106
108
  }
107
109
  r.assignStrategy(t), i({
108
- type: m.Success,
110
+ type: d.Success,
109
111
  message: s("email-editor.strategy-assigned-success", { strategyName: t.name })
110
112
  }), r.closeAssignStrategyDrawer();
111
113
  }, onSelect: (t) => {
@@ -114,5 +116,5 @@ const Y = /* @__PURE__ */ E({
114
116
  }
115
117
  });
116
118
  export {
117
- Y as default
119
+ Z as default
118
120
  };
@@ -2,9 +2,9 @@ import d from "./RecommendationStrategyOnboarding.vue2.js";
2
2
  /* empty css */
3
3
  import g from "../../../_virtual/_plugin-vue2_normalizer.js";
4
4
  var m = function() {
5
- var e, n, r, i, a;
5
+ var e, n, r, a, i;
6
6
  var t = this, s = t._self._c, o = t._self._setupProxy;
7
- return o.isVisible ? s(o.InOnboard, { key: "guido__recommendation-strategy-onboard", staticClass: "w-21-s p-a z-11", class: (e = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : e.classes, attrs: { id: "guido__recommendation-strategy-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "left-position": (n = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : n.left, "pages-config": o.onboardingStore.onboardings.recommendationStrategyOnboarding.config, "pointer-position": (r = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : r.position, "right-position": (i = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : i.right, "top-position": (a = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : a.top }, on: { close: function(p) {
7
+ return o.isVisible ? s(o.InOnboard, { key: "guido__recommendation-strategy-onboard", staticClass: "w-21-s p-a z-11", class: (e = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : e.classes, attrs: { id: "guido__recommendation-strategy-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "left-position": (n = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : n.left, "pages-config": o.onboardingStore.onboardings.recommendationStrategyOnboarding.config, "pointer-position": (r = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : r.position, "right-position": (a = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : a.right, "top-position": (i = o.onboardingStore.getRecommendationStrategyCurrentCard) == null ? void 0 : i.top }, on: { close: function(p) {
8
8
  return o.onboardingStore.close(o.ONBOARDING_TYPE);
9
9
  }, nextButtonClick: o.handleNext } }) : t._e();
10
10
  }, c = [], _ = /* @__PURE__ */ g(
@@ -13,7 +13,7 @@ var m = function() {
13
13
  c,
14
14
  !1,
15
15
  null,
16
- "ec2027ff"
16
+ "1f4a4044"
17
17
  );
18
18
  const S = _.exports;
19
19
  export {
@@ -1,47 +1,46 @@
1
- import { defineComponent as g, computed as p, watch as b } from "vue";
2
- import { useRibbonOffset as u } from "../../../composables/useRibbonOffset.js";
3
- import { useTranslations as l } from "../../../composables/useTranslations.js";
4
- import { ACADEMY_LINKS as f } from "../../../enums/academy.js";
5
- import { useRecommendationExtensionStore as O } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
6
- import { useOnboardingStore as _ } from "../../../stores/onboarding.js";
7
- import { InOnboard as y } from "@useinsider/design-system-vue";
8
- const h = /* @__PURE__ */ g({
1
+ import { defineComponent as c, computed as g, watch as b } from "vue";
2
+ import { useRibbonOffset as p } from "../../../composables/useRibbonOffset.js";
3
+ import { useTranslations as u } from "../../../composables/useTranslations.js";
4
+ import { ACADEMY_LINKS as l } from "../../../enums/academy.js";
5
+ import { useOnboardingStore as f } from "../../../stores/onboarding.js";
6
+ import { InOnboard as O } from "@useinsider/design-system-vue";
7
+ const B = /* @__PURE__ */ c({
9
8
  __name: "RecommendationStrategyOnboarding",
10
- setup(C) {
11
- const n = "recommendationStrategyOnboarding", e = l(), t = _(), i = O(), { getTopPosition: r } = u(), a = `<a href="${f.EMAIL_RECOMMENDATION_BLOCK}" target="_blank" rel="noopener noreferrer">${e("action-builder.visit-academy")}</a>`, m = () => [
9
+ setup(_) {
10
+ const e = "recommendationStrategyOnboarding", n = u(), t = f(), { getTopPosition: i } = p(), r = `<a href="${l.EMAIL_RECOMMENDATION_BLOCK}" target="_blank" rel="noopener noreferrer">${n("action-builder.visit-academy")}</a>`, a = () => [
12
11
  {
13
12
  classes: "guido-recommendation-strategy-onboarding",
14
13
  // Sits in the gap left of the settings panel and points at the strategy section, which
15
14
  // starts 208px down: the panel header and its tab row are fixed chrome above it.
16
15
  right: "426px",
17
- top: r(208),
16
+ top: i(208),
18
17
  position: "Right Top",
19
- title: e("email-editor.onboarding-recommendation-strategy-title"),
20
- description: e("email-editor.onboarding-recommendation-strategy-description", {
21
- academyLink: a
18
+ title: n("email-editor.onboarding-recommendation-strategy-title"),
19
+ description: n("email-editor.onboarding-recommendation-strategy-description", {
20
+ academyLink: r
22
21
  }),
23
22
  imageSource: "",
24
23
  backButtonClick: () => {
25
24
  },
26
25
  nextButtonType: "text",
27
- nextButtonText: e("action-builder.ok"),
26
+ nextButtonText: n("action-builder.ok"),
28
27
  nextButtonClick: () => {
29
- t.close(n);
28
+ t.close(e);
30
29
  }
31
30
  }
32
- ], c = p(() => i.strategyPanelOpen && t.onboardings.recommendationStrategyOnboarding.config.length > 0 && t.onboardings.recommendationStrategyOnboarding.isActive), d = () => {
31
+ ], m = g(() => t.onboardings.recommendationStrategyOnboarding.config.length > 0 && t.onboardings.recommendationStrategyOnboarding.isActive), d = () => {
33
32
  var o, s;
34
33
  (s = (o = t.getRecommendationStrategyCurrentCard) == null ? void 0 : o.nextButtonClick) == null || s.call(o);
35
34
  };
36
35
  return b(
37
- () => t.isActive(n),
36
+ () => t.isActive(e),
38
37
  (o) => {
39
- o && t.setConfig(n, m());
38
+ o && t.setConfig(e, a());
40
39
  },
41
40
  { immediate: !0 }
42
- ), { __sfc: !0, ONBOARDING_TYPE: n, trans: e, onboardingStore: t, recommendationStore: i, getTopPosition: r, academyLink: a, buildOnboardingCards: m, isVisible: c, handleNext: d, InOnboard: y };
41
+ ), { __sfc: !0, ONBOARDING_TYPE: e, trans: n, onboardingStore: t, getTopPosition: i, academyLink: r, buildOnboardingCards: a, isVisible: m, handleNext: d, InOnboard: O };
43
42
  }
44
43
  });
45
44
  export {
46
- h as default
45
+ B as default
47
46
  };
@@ -1,72 +1,67 @@
1
- import i from "../static/assets/icons/line-change.svg.js";
2
- import p from "../static/assets/icons/line-delete.svg.js";
3
- import s from "../static/assets/icons/line-plus.svg.js";
4
- import a from "../static/styles/base.css.js";
5
- import C from "../static/styles/components/alert-message.css.js";
6
- import c from "../static/styles/components/amp-block.css.js";
7
- import f from "../static/styles/components/base-input.css.js";
8
- import l from "../static/styles/components/button-group.css.js";
9
- import u from "../static/styles/components/button.css.js";
10
- import d from "../static/styles/components/combobox.css.js";
11
- import h from "../static/styles/components/counter.css.js";
12
- import w from "../static/styles/components/dropdown-menu.css.js";
13
- import I from "../static/styles/components/loader.css.js";
1
+ import S from "../static/assets/icons/line-change.svg.js";
2
+ import i from "../static/assets/icons/line-delete.svg.js";
3
+ import n from "../static/assets/icons/line-plus.svg.js";
4
+ import p from "../static/styles/base.css.js";
5
+ import s from "../static/styles/components/alert-message.css.js";
6
+ import C from "../static/styles/components/amp-block.css.js";
7
+ import a from "../static/styles/components/base-input.css.js";
8
+ import f from "../static/styles/components/button-group.css.js";
9
+ import c from "../static/styles/components/button.css.js";
10
+ import u from "../static/styles/components/combobox.css.js";
11
+ import l from "../static/styles/components/counter.css.js";
12
+ import d from "../static/styles/components/dropdown-menu.css.js";
13
+ import h from "../static/styles/components/loader.css.js";
14
14
  import g from "../static/styles/components/narrow-panel.css.js";
15
- import y from "../static/styles/components/popup.css.js";
16
- import A from "../static/styles/components/recommendation-strategy.css.js";
17
- import b from "../static/styles/components/switcher.css.js";
18
- import B from "../static/styles/components/tabs.css.js";
19
- import D from "../static/styles/components/tools.css.js";
15
+ import I from "../static/styles/components/popup.css.js";
16
+ import w from "../static/styles/components/recommendation-strategy.css.js";
17
+ import y from "../static/styles/components/switcher.css.js";
18
+ import b from "../static/styles/components/tabs.css.js";
19
+ import B from "../static/styles/components/tools.css.js";
20
20
  import $ from "../static/styles/components/version-history.css.js";
21
21
  import P from "../static/styles/components/wide-panel.css.js";
22
- import R from "../static/styles/variables.css.js";
22
+ import x from "../static/styles/variables.css.js";
23
23
  function r(t, o) {
24
24
  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
25
25
  }
26
- const T = `:host {
27
- ${r("line-change", i)}
28
- ${r("line-delete", p)}
29
- ${r("line-plus", s)}
30
- }`, x = [
31
- R,
26
+ const A = `:host {
27
+ ${r("line-change", S)}
28
+ ${r("line-delete", i)}
29
+ ${r("line-plus", n)}
30
+ }`, R = [
31
+ x,
32
32
  // Must be on top
33
- T,
34
- a,
33
+ A,
34
+ p,
35
35
  // Must be on top
36
+ s,
36
37
  C,
37
- c,
38
+ a,
38
39
  f,
39
- l,
40
+ c,
40
41
  u,
42
+ l,
41
43
  d,
42
44
  h,
43
- w,
44
- I,
45
45
  g,
46
+ I,
46
47
  y,
47
48
  b,
48
49
  B,
49
- D,
50
50
  $,
51
51
  P,
52
- A
52
+ w
53
53
  // Last: overrides button.css / wide-panel.css defaults
54
54
  ].join(`
55
55
 
56
- `), M = 3e4, oo = () => ({ importCss: () => {
56
+ `), Y = () => ({ importCss: () => {
57
57
  const o = new CSSStyleSheet();
58
- o.replaceSync(x);
59
- const n = Date.now() + M, e = () => {
60
- var S;
61
- const m = (S = document.querySelector("ui-editor")) == null ? void 0 : S.shadowRoot;
62
- if (m) {
63
- m.adoptedStyleSheets = [o];
64
- return;
65
- }
66
- Date.now() < n && requestAnimationFrame(e);
67
- };
68
- e();
58
+ o.replaceSync(R);
59
+ const e = document.querySelector("ui-editor");
60
+ if (!e)
61
+ return;
62
+ const m = e.shadowRoot;
63
+ m && (m.adoptedStyleSheets = [o]);
69
64
  } });
70
65
  export {
71
- oo as useCustomInterfaceAppearance
66
+ Y as useCustomInterfaceAppearance
72
67
  };
@@ -16,7 +16,7 @@ import { useEditorStore as b } from "../stores/editor.js";
16
16
  import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../utils/genericUtil.js";
17
17
  import Z from "../package.json.js";
18
18
  let n = null;
19
- const he = () => {
19
+ const Ce = () => {
20
20
  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: B, getCustomFonts: M, getSyncModulesStatus: T } = K(), { handleEvent: v } = z(), { handleModuleAdd: F } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
21
21
  var d;
22
22
  if (document.getElementById("UiEditorScript")) {
@@ -31,8 +31,8 @@ const he = () => {
31
31
  n = null;
32
32
  }), n), _ = async (i, s, o, a = [], r = !1) => {
33
33
  var y, E, h, C;
34
- const e = b(), { html: d, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1), I = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
35
- H().importCss(), await window.UIEditor.initEditor(
34
+ const e = b(), { html: d, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = !!d || (((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1);
35
+ await window.UIEditor.initEditor(
36
36
  document.querySelector("#guido-editor"),
37
37
  {
38
38
  metadata: s,
@@ -62,7 +62,7 @@ const he = () => {
62
62
  displayUTM: !1,
63
63
  selectElementAfterDrop: !0,
64
64
  sameFontSizeForOutlook: !0,
65
- allowedScriptSourceDomains: I,
65
+ allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
66
66
  ...g ? { baseBlocks: g } : {},
67
67
  editorFonts: {
68
68
  showDefaultStandardFonts: !0,
@@ -88,8 +88,8 @@ const he = () => {
88
88
  },
89
89
  onTemplateLoaded() {
90
90
  try {
91
- const { activateCustomViewStyles: t, updateTimerInClonedTemplate: l } = L(), { injectFullStory: x } = N();
92
- t(), x(), l(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
91
+ const { importCss: t } = H(), { activateCustomViewStyles: l, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
92
+ t(), l(), x(), I(), o.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
93
93
  e.hasChanges = !1;
94
94
  }, 1e3);
95
95
  } catch (t) {
@@ -146,5 +146,5 @@ const he = () => {
146
146
  } };
147
147
  };
148
148
  export {
149
- he as useStripo
149
+ Ce as useStripo
150
150
  };
@@ -1,18 +1,18 @@
1
1
  var m = Object.defineProperty;
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);
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
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 l } from "../../services/configService.js";
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 gt } from "./currency.js";
15
+ import { CURRENCY_CONTROL_ID as ht } 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 h } from "../../../../../node_modules/@vueuse/shared/index.js";
35
- const W = "ui-elements-recommendation-block";
34
+ import { useDebounceFn as g } 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
- r(this, "store", R());
40
- r(this, "storeUnsubscription", () => {
39
+ n(this, "store", R());
40
+ n(this, "storeUnsubscription", () => {
41
41
  });
42
42
  // blockId -> fingerprint of the node config as it looked at the last sync.
43
- r(this, "syncedConfigs", /* @__PURE__ */ new Map());
43
+ n(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
- r(this, "pendingNodeConfigWrite", null);
47
- r(this, "pendingConfigFlushTimer", null);
46
+ n(this, "pendingNodeConfigWrite", null);
47
+ n(this, "pendingConfigFlushTimer", null);
48
48
  // Sub-control instances for lifecycle management
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);
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);
60
60
  /**
61
61
  * Debounced product fetch to prevent rapid API calls during config changes
62
62
  */
63
- r(this, "_debouncedFetchProducts", h(async () => {
63
+ n(this, "_debouncedFetchProducts", g(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
- r(this, "_debouncedRegenerateWithProducts", h(() => {
81
+ n(this, "_debouncedRegenerateWithProducts", g(() => {
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 W;
102
+ return $;
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 : 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);
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);
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((n) => {
164
+ }), this._subControls.forEach((r) => {
165
165
  var i;
166
- n != null && n.api && (n.currentNode = t, (i = n.onTemplateNodeUpdated) == null || i.call(n, t));
166
+ r != null && r.api && (r.currentNode = t, (i = r.onTemplateNodeUpdated) == null || i.call(r, t));
167
167
  });
168
168
  }
169
169
  onDestroy() {
@@ -203,23 +203,18 @@ 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(l.getConfig(this.currentNode)), o = this.syncedConfigs.get(t);
206
+ const e = JSON.stringify(c.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
- }
214
209
  _capturePendingNodeConfigWrite() {
215
210
  const t = this.store.currentRecommendationId;
216
211
  if (!this.currentNode || !this.api || t === null)
217
212
  return;
218
- const { filters: e, strategyId: o, size: n } = this.store.recommendationConfigs;
213
+ const { filters: e, strategyId: o, size: r } = this.store.recommendationConfigs;
219
214
  this.pendingNodeConfigWrite = {
220
215
  blockId: t,
221
216
  node: this.currentNode,
222
- updates: { filters: e, strategyId: o, size: n }
217
+ updates: { filters: e, strategyId: o, size: r }
223
218
  };
224
219
  }
225
220
  /**
@@ -234,7 +229,7 @@ class at extends N {
234
229
  */
235
230
  _stagePendingNodeConfig(t) {
236
231
  const e = this.pendingNodeConfigWrite;
237
- return !e || !this.currentNode ? !1 : (l.stageConfig(t, this.currentNode, e.updates), !0);
232
+ return !e || !this.currentNode ? !1 : (c.stageConfig(t, this.currentNode, e.updates), !0);
238
233
  }
239
234
  /**
240
235
  * Arms the guaranteed fallback write, once the product fetch has settled. The
@@ -258,12 +253,12 @@ class at extends N {
258
253
  const t = this.pendingNodeConfigWrite;
259
254
  if (this.pendingNodeConfigWrite = null, this._clearConfigFlush(), !t || !this.api)
260
255
  return;
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");
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");
263
258
  }
264
259
  _syncNodeConfigToStore() {
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);
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);
267
262
  this.store.patchCurrentBlockConfig({
268
263
  strategy: t.strategy,
269
264
  strategyId: t.strategyId,
@@ -305,8 +300,8 @@ class at extends N {
305
300
  t !== null && this.store.markBlockInitialized(t), (await Promise.allSettled([
306
301
  this.store.fetchRecommendationCreateData(),
307
302
  this.store.fetchRecommendationFilters()
308
- ])).forEach((o, n) => {
309
- o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][n]} failed`, o.reason);
303
+ ])).forEach((o, r) => {
304
+ o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][r]} failed`, o.reason);
310
305
  }), this._applySmartDefaults();
311
306
  try {
312
307
  await this.store.fetchRecommendationProducts();
@@ -327,8 +322,8 @@ class at extends N {
327
322
  _applySmartDefaults() {
328
323
  if (!this.currentNode || !this.api)
329
324
  return;
330
- const t = l.getConfig(this.currentNode), e = {};
331
- let o = null, n = null, i = null;
325
+ const t = c.getConfig(this.currentNode), e = {};
326
+ let o = null, r = null, i = null;
332
327
  if (t.currency.code === a.currency.code) {
333
328
  const { currencyList: s } = this.store;
334
329
  s.length > 0 && (s.some(
@@ -343,7 +338,7 @@ class at extends N {
343
338
  const s = this.store.getActivePredictiveAlgorithms;
344
339
  s.length > 0 && (s.some(
345
340
  (d) => d.value === a.strategy
346
- ) || (n = s[0].value, e.strategy = n));
341
+ ) || (r = s[0].value, e.strategy = r));
347
342
  }
348
343
  if (t.language === a.language) {
349
344
  const s = this.store.getLanguages;
@@ -351,7 +346,7 @@ class at extends N {
351
346
  (d) => d.value === a.language
352
347
  ) || (i = s[0].value, e.language = i));
353
348
  }
354
- !o && !n && !i || (l.updateConfig(
349
+ !o && !r && !i || (c.updateConfig(
355
350
  this.api,
356
351
  this.currentNode,
357
352
  e,
@@ -372,7 +367,7 @@ class at extends N {
372
367
  thousandSeparator: a.currency.thousandSeparator
373
368
  }
374
369
  } : {},
375
- ...n ? { strategy: n } : {},
370
+ ...r ? { strategy: r } : {},
376
371
  ...i ? { language: i } : {}
377
372
  }, { triggerRefetch: !1 }));
378
373
  }
@@ -386,8 +381,8 @@ class at extends N {
386
381
  const o = e.getAttribute(I);
387
382
  if (!o)
388
383
  return null;
389
- const n = parseInt(o);
390
- return Number.isNaN(n) ? null : n;
384
+ const r = parseInt(o);
385
+ return Number.isNaN(r) ? null : r;
391
386
  }
392
387
  /**
393
388
  * Listen to store changes that require product refresh or regeneration.
@@ -404,15 +399,15 @@ class at extends N {
404
399
  */
405
400
  _listenStateUpdates() {
406
401
  const { store: t } = this;
407
- let e = t.recommendationProducts, o = t.$state.configVersion, n = t.currentRecommendationId;
402
+ let e = t.recommendationProducts, o = t.$state.configVersion, r = t.currentRecommendationId;
408
403
  this.storeUnsubscription = t.$subscribe(() => {
409
404
  const i = t.currentRecommendationId;
410
- if (i !== n) {
411
- n = i, e = t.recommendationProducts, o = t.$state.configVersion;
405
+ if (i !== r) {
406
+ r = i, e = t.recommendationProducts, o = t.$state.configVersion;
412
407
  return;
413
408
  }
414
409
  const s = t.$state.configVersion;
415
- s !== o && (o = s, this._capturePendingNodeConfigWrite(), this._isPendingStrategyIdChange() && this._flushPendingNodeConfig(), this._debouncedFetchProducts());
410
+ s !== o && (o = s, this._capturePendingNodeConfigWrite(), this._debouncedFetchProducts());
416
411
  const u = t.recommendationProducts, d = u !== e, f = Array.isArray(u) && u.length > 0;
417
412
  d && f && (e = u, this._debouncedRegenerateWithProducts());
418
413
  });
@@ -421,8 +416,8 @@ class at extends N {
421
416
  export {
422
417
  ut as ALGORITHM_CONTROL_ID,
423
418
  T as AlgorithmControl,
424
- W as CONTROL_BLOCK_ID,
425
- gt as CURRENCY_CONTROL_ID,
419
+ $ as CONTROL_BLOCK_ID,
420
+ ht as CURRENCY_CONTROL_ID,
426
421
  P as CurrencyControl,
427
422
  ft as FILTERS_CONTROL_ID,
428
423
  S as FiltersControl,
@@ -1,59 +1,46 @@
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 v } from "../../../../../stores/onboarding.js";
6
- import { CommonControl as f } from "../../../common-control.js";
1
+ var p = Object.defineProperty;
2
+ var u = (o, n, t) => n in o ? p(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
3
+ var r = (o, n, t) => u(o, typeof n != "symbol" ? n + "" : n, t);
4
+ import { ACADEMY_LINKS as S } from "../../../../../enums/academy.js";
5
+ import { useOnboardingStore as _ } from "../../../../../stores/onboarding.js";
6
+ import { CommonControl as b } from "../../../common-control.js";
7
7
  import { RecommendationConfigService as h } from "../../services/configService.js";
8
- import { useRecommendationExtensionStore as b } from "../../store/recommendation.js";
9
- const k = "recommendation-strategy-control";
10
- class L extends f {
8
+ import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
9
+ const v = "recommendation-strategy-control";
10
+ class L extends b {
11
11
  constructor() {
12
12
  super(...arguments);
13
- r(this, "store", b());
14
- r(this, "onboardingStore", v());
13
+ r(this, "store", f());
14
+ r(this, "onboardingStore", _());
15
15
  r(this, "storeUnsubscription", () => {
16
16
  });
17
17
  r(this, "listeners", []);
18
18
  r(this, "lastPaintedState", null);
19
19
  }
20
20
  getId() {
21
- return k;
21
+ return v;
22
22
  }
23
23
  getTemplate() {
24
24
  const t = this.api.translate(
25
25
  "You can assign a recommendation strategy by selecting an existing one or creating a new one to show specific content."
26
- ), e = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
26
+ ), e = this.api.translate("For more information, you can"), s = this.api.translate("visit Academy");
27
27
  return `
28
28
  <div class="strategy-control-container">
29
- <div data-strategy-loading-state>
30
- <div class="strategy-control-header">
31
- <span class="guido-skeleton guido-skeleton--strategy-title"></span>
32
- </div>
33
- <div class="strategy-control-description-row">
34
- <span class="guido-skeleton guido-skeleton--strategy-description"></span>
35
- </div>
36
- <div class="strategy-control-skeleton-row">
37
- <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
38
- <span class="guido-skeleton guido-skeleton--strategy-cta"></span>
39
- </div>
29
+ <div class="strategy-control-header">
30
+ <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
40
31
  </div>
41
- <div data-strategy-content style="display: none;">
42
- <div class="strategy-control-header">
43
- <h3 class="strategy-control-title">${this.api.translate("Recommendation Strategy")}</h3>
44
- </div>
45
- <div class="strategy-control-description-row">
46
- <p class="strategy-control-description">
47
- ${t}
48
- ${e}
49
- <a
50
- href="${_.EMAIL_RECOMMENDATION_BLOCK}"
51
- target="_blank"
52
- rel="noopener noreferrer">${a}</a>.
53
- </p>
54
- </div>
55
- <div data-strategy-empty-state style="display: none;">
56
- ${this._GuTwoColumns([
32
+ <div class="strategy-control-description-row">
33
+ <p class="strategy-control-description">
34
+ ${t}
35
+ ${e}
36
+ <a
37
+ href="${S.EMAIL_RECOMMENDATION_BLOCK}"
38
+ target="_blank"
39
+ rel="noopener noreferrer">${s}</a>.
40
+ </p>
41
+ </div>
42
+ <div data-strategy-empty-state style="display: none;">
43
+ ${this._GuTwoColumns([
57
44
  this._GuButton({
58
45
  name: "assignStrategy",
59
46
  label: this.api.translate("Assign Strategy"),
@@ -67,86 +54,85 @@ class L extends f {
67
54
  className: "strategy-control-cta primary"
68
55
  })
69
56
  ], "strategy-control-cta-row")}
57
+ </div>
58
+ <div data-strategy-loading-state>
59
+ <div class="strategy-control-name-band">
60
+ <span class="guido-skeleton guido-skeleton--strategy-name"></span>
61
+ </div>
62
+ <div class="strategy-control-actions">
63
+ <span class="guido-skeleton guido-skeleton--strategy-action"></span>
64
+ <span class="guido-skeleton guido-skeleton--strategy-action"></span>
70
65
  </div>
71
- <div data-strategy-assigned-state style="display: none;">
72
- <div class="strategy-control-name-band">
73
- <span class="strategy-control-name" data-strategy-name></span>
74
- <span
75
- class="guido-skeleton guido-skeleton--strategy-name" data-strategy-name-skeleton></span>
76
- </div>
77
- <div class="strategy-control-actions">
78
- ${this._strategyAction({
66
+ </div>
67
+ <div data-strategy-assigned-state style="display: none;">
68
+ <div class="strategy-control-name-band">
69
+ <span class="strategy-control-name" data-strategy-name></span>
70
+ <span class="guido-skeleton guido-skeleton--strategy-name" data-strategy-name-skeleton></span>
71
+ </div>
72
+ <div class="strategy-control-actions">
73
+ ${this._strategyAction({
79
74
  id: "guido__btn-change-strategy",
80
75
  label: this.api.translate("Change"),
81
76
  modifier: "change"
82
77
  })}
83
- ${this._strategyAction({
78
+ ${this._strategyAction({
84
79
  id: "guido__btn-remove-strategy",
85
80
  label: this.api.translate("Remove"),
86
81
  modifier: "remove"
87
82
  })}
88
- </div>
89
83
  </div>
90
84
  </div>
91
85
  </div>
92
86
  `;
93
87
  }
94
- _strategyAction({ id: t, label: e, modifier: a }) {
88
+ _strategyAction({ id: t, label: e, modifier: s }) {
95
89
  return `
96
90
  <button
97
91
  id="${t}"
98
92
  type="button"
99
- class="strategy-control-action strategy-control-action--${a}">
93
+ class="strategy-control-action strategy-control-action--${s}">
100
94
  <span>${e}</span>
101
95
  </button>
102
96
  `;
103
97
  }
104
98
  onRender() {
105
- this._teardown(), this.store.strategyPanelOpen = !0, this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
99
+ this._teardown(), this._setupButtonListeners(), this._renderState(), this.storeUnsubscription = this.store.$subscribe(() => {
106
100
  this._renderState();
107
101
  }), this.store.recommendationConfigs.strategyId && !this.store.strategiesFetched && this.store.fetchStrategies().catch(() => {
108
102
  });
109
- }
110
- /**
111
- * Whether the document itself says this block has no strategy.
112
- *
113
- * Read the node, not the store: when the main control cannot resolve the block id off the
114
- * node it never syncs the persisted config, so the store still holds defaults (empty
115
- * strategyId) for an assigned block.
116
- */
117
- _isNodeUnassigned() {
118
- return h.hasConfig(this.currentNode) && !h.getConfig(this.currentNode).strategyId;
103
+ const t = h.hasConfig(this.currentNode) ? h.getConfig(this.currentNode) : null;
104
+ t && !t.strategyId && this.onboardingStore.startOnboarding("recommendationStrategyOnboarding");
119
105
  }
120
106
  onDestroy() {
121
107
  this._teardown();
122
108
  }
123
109
  _teardown() {
124
- this.store.strategyPanelOpen = !1, this.storeUnsubscription(), this.storeUnsubscription = () => {
110
+ this.storeUnsubscription(), this.storeUnsubscription = () => {
125
111
  }, this.lastPaintedState = null, this.listeners.forEach(({ element: t, handler: e }) => t.removeEventListener("click", e)), this.listeners = [];
126
112
  }
127
113
  _setupButtonListeners() {
128
114
  const t = this.getContainer();
129
115
  if (!t)
130
116
  return;
131
- const e = (a, i) => {
132
- const s = t.querySelector(a);
133
- s && (s.addEventListener("click", i), this.listeners.push({ element: s, handler: i }));
117
+ const e = (s, i) => {
118
+ const a = t.querySelector(s);
119
+ a && (a.addEventListener("click", i), this.listeners.push({ element: a, handler: i }));
134
120
  };
135
121
  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());
136
122
  }
137
123
  _renderState() {
138
- var p;
139
- 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.strategiesFetched), i = `${t}\0${e}\0${a}`;
124
+ var m;
125
+ const { strategyId: t } = this.store.recommendationConfigs, e = t ? ((m = this.store.assignedStrategy) == null ? void 0 : m.name) ?? "" : "", s = !!t && !e && (this.store.strategiesLoading || !this.store.strategiesFetched), i = `${t}\0${e}\0${s}`;
140
126
  if (i === this.lastPaintedState)
141
127
  return;
142
- const s = this.getContainer();
143
- if (!s)
128
+ const a = this.getContainer();
129
+ if (!a)
144
130
  return;
145
- 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]");
146
- !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);
131
+ const g = a.querySelector("[data-strategy-empty-state]"), d = a.querySelector("[data-strategy-assigned-state]"), l = a.querySelector("[data-strategy-loading-state]"), c = a.querySelector("[data-strategy-name]"), y = a.querySelector("[data-strategy-name-skeleton]");
132
+ !g || !d || (l && (l.style.display = "none"), g.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 ? "block" : "none"), this.lastPaintedState = i);
147
133
  }
148
134
  }
149
135
  export {
150
- k as STRATEGY_CONTROL_ID,
136
+ v as STRATEGY_CONTROL_ID,
151
137
  L as StrategyControl
152
138
  };
@@ -76,7 +76,6 @@ const j = () => ({
76
76
  strategiesFetched: !1,
77
77
  blockStates: {},
78
78
  currentRecommendationId: null,
79
- strategyPanelOpen: !1,
80
79
  configVersion: 0
81
80
  }), nt = N("guidoRecommendationExtension", {
82
81
  state: () => j(),
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-1ca6baf0]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-cc5ee925]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-cc5ee925]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-cc5ee925]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-b447f626]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-b447f626] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}
1
+ @charset "UTF-8";.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-73199fa4] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-1ca6baf0]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-cc5ee925]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-cc5ee925]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-cc5ee925]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-1f4a4044] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-438d62b8]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-438d62b8] .in-dropdown-box__container{width:413px}.assign-strategy-drawer-content .assign-strategy-select-skeleton{width:100%!important}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}
@@ -66,8 +66,6 @@ export declare class RecommendationBlockControl extends CommonControl {
66
66
  * edits are never clobbered (SD-141049).
67
67
  */
68
68
  private _syncNodeConfigIfChanged;
69
- /** Whether the deferred write would move the node's strategyId — see the caller (SD-149916). */
70
- private _isPendingStrategyIdChange;
71
69
  private _capturePendingNodeConfigWrite;
72
70
  /**
73
71
  * Accumulates the pending write into `documentModifier` without applying, so the
@@ -10,14 +10,6 @@ export declare class StrategyControl extends CommonControl {
10
10
  getTemplate(): string;
11
11
  private _strategyAction;
12
12
  onRender(): void;
13
- /**
14
- * Whether the document itself says this block has no strategy.
15
- *
16
- * Read the node, not the store: when the main control cannot resolve the block id off the
17
- * node it never syncs the persisted config, so the store still holds defaults (empty
18
- * strategyId) for an assigned block.
19
- */
20
- private _isNodeUnassigned;
21
13
  onDestroy(): void;
22
14
  private _teardown;
23
15
  private _setupButtonListeners;
@@ -74,7 +74,6 @@ interface StoreState {
74
74
  strategiesFetched: boolean;
75
75
  blockStates: Record<number, PerBlockState>;
76
76
  currentRecommendationId: number | null;
77
- strategyPanelOpen: boolean;
78
77
  configVersion: number;
79
78
  }
80
79
  export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"guidoRecommendationExtension", StoreState, {
@@ -104,7 +103,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
104
103
  strategiesFetched: boolean;
105
104
  blockStates: Record<number, PerBlockState>;
106
105
  currentRecommendationId: number | null;
107
- strategyPanelOpen: boolean;
108
106
  configVersion: number;
109
107
  } & import("pinia").PiniaCustomStateProperties<StoreState>): PerBlockConfigs;
110
108
  /**
@@ -132,7 +130,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
132
130
  strategiesFetched: boolean;
133
131
  blockStates: Record<number, PerBlockState>;
134
132
  currentRecommendationId: number | null;
135
- strategyPanelOpen: boolean;
136
133
  configVersion: number;
137
134
  } & import("pinia").PiniaCustomStateProperties<StoreState>): RecommendationProduct[];
138
135
  /**
@@ -160,7 +157,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
160
157
  strategiesFetched: boolean;
161
158
  blockStates: Record<number, PerBlockState>;
162
159
  currentRecommendationId: number | null;
163
- strategyPanelOpen: boolean;
164
160
  configVersion: number;
165
161
  } & import("pinia").PiniaCustomStateProperties<StoreState>): boolean;
166
162
  assignStrategyDrawerStatus(state: {
@@ -185,7 +181,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
185
181
  strategiesFetched: boolean;
186
182
  blockStates: Record<number, PerBlockState>;
187
183
  currentRecommendationId: number | null;
188
- strategyPanelOpen: boolean;
189
184
  configVersion: number;
190
185
  } & import("pinia").PiniaCustomStateProperties<StoreState>): boolean;
191
186
  removeStrategyModalStatus(state: {
@@ -210,7 +205,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
210
205
  strategiesFetched: boolean;
211
206
  blockStates: Record<number, PerBlockState>;
212
207
  currentRecommendationId: number | null;
213
- strategyPanelOpen: boolean;
214
208
  configVersion: number;
215
209
  } & import("pinia").PiniaCustomStateProperties<StoreState>): boolean;
216
210
  assignedStrategy(state: {
@@ -235,7 +229,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
235
229
  strategiesFetched: boolean;
236
230
  blockStates: Record<number, PerBlockState>;
237
231
  currentRecommendationId: number | null;
238
- strategyPanelOpen: boolean;
239
232
  configVersion: number;
240
233
  } & import("pinia").PiniaCustomStateProperties<StoreState>): RrsStrategy | null;
241
234
  /**
@@ -263,7 +256,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
263
256
  strategiesFetched: boolean;
264
257
  blockStates: Record<number, PerBlockState>;
265
258
  currentRecommendationId: number | null;
266
- strategyPanelOpen: boolean;
267
259
  configVersion: number;
268
260
  } & import("pinia").PiniaCustomStateProperties<StoreState>): boolean;
269
261
  /**
@@ -291,7 +283,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
291
283
  strategiesFetched: boolean;
292
284
  blockStates: Record<number, PerBlockState>;
293
285
  currentRecommendationId: number | null;
294
- strategyPanelOpen: boolean;
295
286
  configVersion: number;
296
287
  } & import("pinia").PiniaCustomStateProperties<StoreState>): number;
297
288
  hasFilters(): boolean;
@@ -320,7 +311,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
320
311
  strategiesFetched: boolean;
321
312
  blockStates: Record<number, PerBlockState>;
322
313
  currentRecommendationId: number | null;
323
- strategyPanelOpen: boolean;
324
314
  configVersion: number;
325
315
  } & import("pinia").PiniaCustomStateProperties<StoreState>) => {
326
316
  text: string;
@@ -348,7 +338,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
348
338
  strategiesFetched: boolean;
349
339
  blockStates: Record<number, PerBlockState>;
350
340
  currentRecommendationId: number | null;
351
- strategyPanelOpen: boolean;
352
341
  configVersion: number;
353
342
  } & import("pinia").PiniaCustomStateProperties<StoreState>) => {
354
343
  text: string;
@@ -376,7 +365,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
376
365
  strategiesFetched: boolean;
377
366
  blockStates: Record<number, PerBlockState>;
378
367
  currentRecommendationId: number | null;
379
- strategyPanelOpen: boolean;
380
368
  configVersion: number;
381
369
  } & import("pinia").PiniaCustomStateProperties<StoreState>) => {
382
370
  text: string;
@@ -85,39 +85,26 @@ const n = `.strategy-control-header {
85
85
  to { background-position-x: -200%; }
86
86
  }
87
87
 
88
- /* Each skeleton mirrors the footprint of the element it stands in for, so retiring
89
- the loading state does not shift the panel. */
90
- .guido-skeleton--strategy-title {
91
- width: 366px;
92
- height: 38px;
93
- }
94
-
95
- .guido-skeleton--strategy-description {
96
- width: 366px;
97
- height: 48px;
98
- }
99
-
100
- .guido-skeleton--strategy-cta {
101
- width: 175px;
102
- height: 40px;
88
+ .guido-skeleton--strategy-name {
89
+ width: 140px;
90
+ height: 16px;
103
91
  }
104
92
 
105
- .guido-skeleton--strategy-name {
106
- width: 398px;
107
- height: 48px;
93
+ /* Sized and spaced to sit where the real Change / Remove buttons land, so the
94
+ panel does not shift when the skeleton is retired. */
95
+ .guido-skeleton--strategy-action {
96
+ width: 88px;
97
+ height: 16px;
108
98
  }
109
99
 
110
- .strategy-control-skeleton-row {
111
- display: flex;
112
- gap: 16px;
113
- padding: 0 16px 16px;
100
+ .guido-skeleton--strategy-action + .guido-skeleton--strategy-action {
101
+ margin-left: 24px;
114
102
  }
115
103
 
116
104
  [data-strategy-loading-state] .guido-skeleton {
117
105
  display: block;
118
106
  }
119
107
 
120
-
121
108
  .strategy-control-actions {
122
109
  display: flex;
123
110
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "3.18.1-beta.e489d08",
3
+ "version": "3.18.1-beta.e9a6c91",
4
4
  "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
5
5
  "main": "./dist/guido.umd.cjs",
6
6
  "module": "./dist/library.js",