@useinsider/guido 3.12.0-beta.840207a → 3.12.0-beta.86e34da

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/@types/config/schemas.js +6 -6
  2. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +1 -1
  3. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js +8 -8
  4. package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js +5 -5
  5. package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue2.js +10 -10
  6. package/dist/components/organisms/extensions/recommendation/StrategyDetailDrawer.vue.js +8 -6
  7. package/dist/components/organisms/extensions/recommendation/StrategyDetailDrawer.vue2.js +98 -71
  8. package/dist/composables/usePreviewInteractionGuard.js +36 -11
  9. package/dist/composables/useRecommendation.js +63 -78
  10. package/dist/composables/useRecommendationPreview.js +61 -60
  11. package/dist/enums/extensions/filteringV2.js +1017 -1
  12. package/dist/enums/extensions/recommendationBlock.js +34 -19
  13. package/dist/extensions/Blocks/Recommendation/constants/controlIds.js +1 -1
  14. package/dist/extensions/Blocks/Recommendation/controls/blockBackground/index.js +10 -0
  15. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +24 -20
  16. package/dist/extensions/Blocks/Recommendation/controls/main/strategy.js +245 -106
  17. package/dist/extensions/Blocks/Recommendation/extension.js +23 -21
  18. package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +17 -3
  19. package/dist/extensions/Blocks/Recommendation/recommendation.css.js +257 -0
  20. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +41 -40
  21. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +310 -117
  22. package/dist/extensions/Blocks/Recommendation/utils/strategyNavigation.js +8 -0
  23. package/dist/extensions/Blocks/Recommendation/utils/strategySummary.js +93 -8
  24. package/dist/extensions/Blocks/Recommendation/utils/strategyUrl.js +43 -0
  25. package/dist/extensions/Blocks/Recommendation/validation/requiredFields.js +18 -16
  26. package/dist/extensions/Blocks/Unsubscribe/utils/constants.js +3 -2
  27. package/dist/extensions/Blocks/common-control.js +2 -1
  28. package/dist/extensions/Blocks/controlFactories.js +125 -75
  29. package/dist/guido.css +1 -1
  30. package/dist/services/recommendationApi.js +90 -45
  31. package/dist/services/stripoApi.js +18 -18
  32. package/dist/src/@types/config/schemas.d.ts +2 -2
  33. package/dist/src/composables/usePreviewInteractionGuard.d.ts +1 -1
  34. package/dist/src/enums/extensions/recommendationBlock.d.ts +25 -2
  35. package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts +1 -0
  36. package/dist/src/extensions/Blocks/Recommendation/controls/blockBackground/index.d.ts +14 -0
  37. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +1 -0
  38. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +7 -3
  39. package/dist/src/extensions/Blocks/Recommendation/controls/main/strategy.d.ts +59 -45
  40. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +301 -4
  41. package/dist/src/extensions/Blocks/Recommendation/utils/strategyNavigation.d.ts +10 -0
  42. package/dist/src/extensions/Blocks/Recommendation/utils/strategyUrl.d.ts +51 -0
  43. package/dist/src/extensions/Blocks/Recommendation/validation/requiredFields.d.ts +5 -0
  44. package/dist/src/extensions/Blocks/Unsubscribe/utils/constants.d.ts +1 -0
  45. package/dist/src/extensions/Blocks/common-control.d.ts +2 -1
  46. package/dist/src/extensions/Blocks/controlFactories.d.ts +36 -0
  47. package/dist/src/mock/api/recommendation-strategies.d.ts +2 -0
  48. package/dist/src/services/recommendationApi.d.ts +3 -1
  49. package/dist/src/utils/urlSchemes.d.ts +6 -0
  50. package/dist/static/styles/base.css.js +0 -15
  51. package/dist/static/styles/components/base-input.css.js +6 -7
  52. package/dist/utils/templatePreparation.js +56 -47
  53. package/dist/utils/urlSchemes.js +4 -0
  54. package/package.json +1 -1
@@ -1,21 +1,23 @@
1
- import { getRecommendationFeedSourceMaps as E, URLS as S } from "../enums/extensions/recommendationBlock.js";
2
- import { MinDeviceViewport as A, DefaultPadding as U } from "../enums/recommendation.js";
1
+ import { getRecommendationFeedSourceMaps as I, URLS as C } from "../enums/extensions/recommendationBlock.js";
2
+ import { MinDeviceViewport as R, DefaultPadding as b } from "../enums/recommendation.js";
3
3
  import { useRecommendationExtensionStore as g } from "../extensions/Blocks/Recommendation/store/recommendation.js";
4
- import { generateCompleteFilterQuery as _ } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
5
- import { getPartnerRecommendationParams as b } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
6
- import { useConfigStore as D } from "../stores/config.js";
7
- const M = () => {
8
- const f = ({
9
- mobileLeftPadding: a,
4
+ import { generateCompleteFilterQuery as h } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
5
+ import { getPartnerRecommendationParams as S } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
6
+ import { resolveStrategyUrl as T, buildStrategyUrlValues as x } from "../extensions/Blocks/Recommendation/utils/strategyUrl.js";
7
+ import { useConfigStore as P } from "../stores/config.js";
8
+ const L = () => ({
9
+ calculateCardWidth: ({
10
+ mobileLeftPadding: i,
10
11
  mobileRightPadding: c,
11
- cardsInRow: s,
12
- unresponsive: r
12
+ cardsInRow: o,
13
+ unresponsive: s
13
14
  }) => {
14
- const n = r ? s : 1, e = a + c + (n - 1) * U;
15
- return (A - e) / n;
16
- }, I = (a) => {
17
- const c = g(), s = Number(a), r = c.blockStates[s];
18
- if (!r)
15
+ const n = s ? o : 1, e = i + c + (n - 1) * b;
16
+ return (R - e) / n;
17
+ },
18
+ getRecommendationCampaignData: (i) => {
19
+ const c = g(), o = Number(i), s = c.blockStates[o];
20
+ if (!s)
19
21
  return {
20
22
  textTrimming: !1,
21
23
  orientation: "vertical",
@@ -28,7 +30,7 @@ const M = () => {
28
30
  discountBeforeTextValue: "",
29
31
  discountAfterTextValue: ""
30
32
  };
31
- const { recommendationConfigs: n } = r, e = n.orientation === "grid" ? "vertical" : "horizontal";
33
+ const { recommendationConfigs: n } = s, e = n.orientation === "grid" ? "vertical" : "horizontal";
32
34
  return {
33
35
  textTrimming: n.textTrimming,
34
36
  orientation: e,
@@ -41,68 +43,51 @@ const M = () => {
41
43
  discountBeforeTextValue: "",
42
44
  discountAfterTextValue: ""
43
45
  };
44
- }, p = {
45
- LOCALE: "{locale}",
46
- CURRENCY: "{currency}",
47
- CAMPAIGN_ID: "{campaignId}",
48
- STRATEGY_ID: "{strategyId}",
49
- CLIENT_ID: "{clientId}",
50
- USER_ID: "{userId}",
51
- ITEM_ID: "{itemId}"
52
- }, y = (a, c) => Object.entries(p).reduce(
53
- (s, [r, n]) => s.replaceAll(
54
- n,
55
- c[r]
56
- ),
57
- a
58
- );
59
- return {
60
- calculateCardWidth: f,
61
- getRecommendationCampaignData: I,
62
- buildCampaignUrl: (a, c) => {
63
- var m;
64
- const s = g(), r = D(), n = Number(a);
65
- let e;
66
- if (c)
67
- e = c;
68
- else {
69
- const o = s.blockStates[n];
70
- if (!o)
71
- return "";
72
- const { recommendationConfigs: i } = o;
73
- e = {
74
- strategy: i.strategy,
75
- strategyId: i.strategyId,
76
- language: i.language,
77
- currencyCode: i.currencySettings.value,
78
- size: i.size,
79
- productIds: i.productIds,
80
- filters: i.filters,
81
- shuffleProducts: i.shuffleProducts
82
- };
83
- }
84
- const d = e.strategyId ? s.strategyUrlTemplates[e.strategyId] : "";
85
- if (d) {
86
- const o = y(d, {
87
- LOCALE: e.language,
88
- CURRENCY: e.currencyCode,
89
- CAMPAIGN_ID: r.variationId,
90
- STRATEGY_ID: e.strategyId,
91
- CLIENT_ID: "6KcLM9TwheVB1mgK",
92
- USER_ID: "{user_id}",
93
- ITEM_ID: "{itemId}"
94
- });
95
- return s.recommendationCampaignUrls[a] = o, o;
96
- }
97
- const C = ((m = E().find((o) => o.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
98
- t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", r.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", r.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
99
- const R = e.filters.filter((o) => o.isValid), l = _(R);
100
- l && t.set("filter", l), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(b(r.partnerName, e.strategy)).forEach(([o, i]) => t.set(o, i));
101
- const T = decodeURIComponent(t.toString()), u = `${S.RECOMMENDATION_API_URL}/v2/${C}?${T}`;
102
- return s.recommendationCampaignUrls[a] = u, u;
46
+ },
47
+ buildCampaignUrl: (i, c) => {
48
+ var m;
49
+ const o = g(), s = P(), n = Number(i);
50
+ let e;
51
+ if (c)
52
+ e = c;
53
+ else {
54
+ const r = o.blockStates[n];
55
+ if (!r)
56
+ return "";
57
+ const { recommendationConfigs: a } = r;
58
+ e = {
59
+ strategy: a.strategy,
60
+ strategyId: a.strategyId,
61
+ language: a.language,
62
+ currencyCode: a.currencySettings.value,
63
+ size: a.size,
64
+ productIds: a.productIds,
65
+ filters: a.filters,
66
+ shuffleProducts: a.shuffleProducts
67
+ };
103
68
  }
104
- };
105
- };
69
+ const d = e.strategyId ? o.strategyUrlTemplates[e.strategyId] : "";
70
+ if (d) {
71
+ const r = T(
72
+ d,
73
+ x({
74
+ language: e.language,
75
+ currencyCode: e.currencyCode,
76
+ size: e.size,
77
+ strategyId: e.strategyId
78
+ }),
79
+ "compile"
80
+ );
81
+ return o.recommendationCampaignUrls[i] = r, r;
82
+ }
83
+ const f = ((m = I().find((r) => r.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
84
+ t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", s.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", s.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
85
+ const p = e.filters.filter((r) => r.isValid), l = h(p);
86
+ l && t.set("filter", l), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(S(s.partnerName, e.strategy)).forEach(([r, a]) => t.set(r, a));
87
+ const y = decodeURIComponent(t.toString()), u = `${C.RECOMMENDATION_API_URL}/v2/${f}?${y}`;
88
+ return o.recommendationCampaignUrls[i] = u, u;
89
+ }
90
+ });
106
91
  export {
107
- M as useRecommendation
92
+ L as useRecommendation
108
93
  };
@@ -1,111 +1,112 @@
1
- import { BLOCK_ROOT_SELECTOR as S, CURRENCY_ATTR as p, CONTAINER_SELECTOR as O } from "../extensions/Blocks/Recommendation/constants/selectors.js";
2
- import { useRecommendationExtensionStore as h } from "../extensions/Blocks/Recommendation/store/recommendation.js";
3
- import { formatPrice as E } from "../extensions/Blocks/Recommendation/utils/priceFormatter.js";
4
- const f = `${S}[recommendation-id]`, C = ".product-old-price", R = /\{\{(?:reco_)?(\d+_\d+_[a-zA-Z0-9_.]+)\}\}/g, T = new RegExp(
1
+ import { BLOCK_ROOT_SELECTOR as f, CURRENCY_ATTR as A, CONTAINER_SELECTOR as O } from "../extensions/Blocks/Recommendation/constants/selectors.js";
2
+ import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
3
+ import { formatPrice as _ } from "../extensions/Blocks/Recommendation/utils/priceFormatter.js";
4
+ import { BASE_SAFE_URL_SCHEMES as R } from "../utils/urlSchemes.js";
5
+ const S = `${f}[recommendation-id]`, h = ".product-old-price", T = /\{\{(?:reco_)?(\d+_\d+_[a-zA-Z0-9_.]+)\}\}/g, b = new RegExp(
5
6
  "\\{%\\s*if\\s+([\\s\\S]+?)\\s*%\\}([\\s\\S]*?)(?:\\{%\\s*else\\s*%\\}([\\s\\S]*?))?\\{%\\s*endif\\s*%\\}",
6
7
  "g"
7
8
  );
8
- function b(e) {
9
+ function L(e) {
9
10
  return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
10
11
  }
11
- function _(e) {
12
- var s;
13
- const n = (s = e.replace(/[\u0000-\u0020]+/g, "").toLowerCase().match(/^([a-z][a-z0-9+.-]*):/)) == null ? void 0 : s[1];
14
- return n && n !== "http" && n !== "https" && n !== "mailto" ? "" : e;
12
+ function g(e) {
13
+ var c;
14
+ const i = (c = e.replace(/[\u0000-\u0020]+/g, "").toLowerCase().match(/^([a-z][a-z0-9+.-]*):/)) == null ? void 0 : c[1];
15
+ return i && !R.includes(`${i}:`) ? "" : e;
15
16
  }
16
17
  function N(e) {
17
- const t = e.getAttribute(p.CURRENCY) || "USD", n = e.getAttribute(p.DECIMAL_SEPARATOR) || ".", s = e.getAttribute(p.THOUSAND_SEPARATOR) || ",";
18
+ const t = e.getAttribute(A.CURRENCY) || "USD", i = e.getAttribute(A.DECIMAL_SEPARATOR) || ".", c = e.getAttribute(A.THOUSAND_SEPARATOR) || ",";
18
19
  return {
19
20
  code: t,
20
- symbol: e.getAttribute(p.SYMBOL) || t,
21
- alignment: e.getAttribute(p.ALIGNMENT) === "0" ? "before" : "after",
22
- decimalCount: parseInt(e.getAttribute(p.DECIMAL_COUNT) || "2") || 2,
23
- decimalSeparator: n,
24
- thousandSeparator: s
21
+ symbol: e.getAttribute(A.SYMBOL) || t,
22
+ alignment: e.getAttribute(A.ALIGNMENT) === "0" ? "before" : "after",
23
+ decimalCount: parseInt(e.getAttribute(A.DECIMAL_COUNT) || "2") || 2,
24
+ decimalSeparator: i,
25
+ thousandSeparator: c
25
26
  };
26
27
  }
27
- function g(e, t) {
28
+ function E(e, t) {
28
29
  return (e == null ? void 0 : e[t]) ?? Object.values(e ?? {})[0] ?? 0;
29
30
  }
30
- function L(e, t) {
31
- const n = g(e.original_price, t), s = g(e.price, t), o = n > 0 ? Math.round((n - s) / n * 100) : 0;
32
- return o > 0 ? `${o}%` : "0%";
31
+ function $(e, t) {
32
+ const i = E(e.original_price, t), c = E(e.price, t), n = i > 0 ? Math.round((i - c) / i * 100) : 0;
33
+ return n > 0 ? `${n}%` : "0%";
33
34
  }
34
- function P(e, t, n, s, o, a) {
35
- s.forEach((i, c) => {
36
- const r = (m) => `${n}_${c}_${m}`, u = E({ price: g(i.price, o.code), currency: o }), l = E({ price: g(i.original_price, o.code), currency: o }), d = L(i, o.code);
37
- e.set(r("name"), i.name ?? ""), e.set(r("image_url"), _(i.image_url ?? "")), e.set(r("url"), _(i.url ?? "")), e.set(r("item_id"), i.item_id ?? ""), e.set(r("currency"), ""), e.set(r("price"), u), e.set(r("original_price"), l), e.set(r("discount"), d), e.set(r("omnibus_price"), l), e.set(r("omnibus_discount"), d), a && u === l && t.add(`${n}_${c}`), Object.entries(i.product_attributes ?? {}).forEach(([m, A]) => {
38
- e.set(r(`product_attribute.${m}`), String(A)), e.set(r(m), String(A));
35
+ function P(e, t, i, c, n, a) {
36
+ c.forEach((o, s) => {
37
+ const r = (m) => `${i}_${s}_${m}`, u = _({ price: E(o.price, n.code), currency: n }), l = _({ price: E(o.original_price, n.code), currency: n }), d = $(o, n.code);
38
+ e.set(r("name"), o.name ?? ""), e.set(r("image_url"), g(o.image_url ?? "")), e.set(r("url"), g(o.url ?? "")), e.set(r("item_id"), o.item_id ?? ""), e.set(r("currency"), ""), e.set(r("price"), u), e.set(r("original_price"), l), e.set(r("discount"), d), e.set(r("omnibus_price"), l), e.set(r("omnibus_discount"), d), a && u === l && t.add(`${i}_${s}`), Object.entries(o.product_attributes ?? {}).forEach(([m, p]) => {
39
+ e.set(r(`product_attribute.${m}`), String(p)), e.set(r(m), String(p));
39
40
  });
40
41
  });
41
42
  }
42
- function $(e, t) {
43
- const n = e.match(/^(.+?)\s*(!=|==)\s*"([^"]*)"$/);
44
- if (!n)
43
+ function z(e, t) {
44
+ const i = e.match(/^(.+?)\s*(!=|==)\s*"([^"]*)"$/);
45
+ if (!i)
45
46
  return !0;
46
- const [, s, o, a] = n, i = t.get(s.trim()) ?? "";
47
- return o === "!=" ? i !== a : i === a;
47
+ const [, c, n, a] = i, o = t.get(c.trim()) ?? "";
48
+ return n === "!=" ? o !== a : o === a;
48
49
  }
49
- function z(e, t) {
50
+ function w(e, t) {
50
51
  return e.replace(
51
- T,
52
- (n, s, o, a) => s.split(/\s+and\s+/).every((c) => $(c.trim(), t)) ? o : a ?? ""
52
+ b,
53
+ (i, c, n, a) => c.split(/\s+and\s+/).every((s) => z(s.trim(), t)) ? n : a ?? ""
53
54
  );
54
55
  }
55
- function w(e) {
56
+ function D(e) {
56
57
  let t = e;
57
58
  for (; t.children.length === 1; )
58
59
  [t] = t.children;
59
60
  return t;
60
61
  }
61
- function D(e, t) {
62
- var i;
62
+ function I(e, t) {
63
+ var o;
63
64
  if (!t.size)
64
65
  return e;
65
- const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), s = new DOMParser().parseFromString(n, "text/html");
66
- s.querySelectorAll(f).forEach((c) => {
67
- const r = Number(c.getAttribute("recommendation-id"));
66
+ const i = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), c = new DOMParser().parseFromString(i, "text/html");
67
+ c.querySelectorAll(S).forEach((s) => {
68
+ const r = Number(s.getAttribute("recommendation-id"));
68
69
  if (!Number.isFinite(r))
69
70
  return;
70
- const u = c.querySelectorAll(O);
71
- (u.length ? Array.from(u) : [c]).forEach((d) => {
72
- d.querySelectorAll(C).forEach((m, A) => {
73
- t.has(`${r}_${A}`) && (w(m).textContent = "");
71
+ const u = s.querySelectorAll(O);
72
+ (u.length ? Array.from(u) : [s]).forEach((d) => {
73
+ d.querySelectorAll(h).forEach((m, p) => {
74
+ t.has(`${r}_${p}`) && (D(m).textContent = "");
74
75
  });
75
76
  });
76
77
  });
77
- const o = (i = e.match(/<!DOCTYPE[^>]*>/i)) == null ? void 0 : i[0];
78
- return ((o ? `${o}
79
- ` : "") + s.documentElement.outerHTML).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
78
+ const n = (o = e.match(/<!DOCTYPE[^>]*>/i)) == null ? void 0 : o[0];
79
+ return ((n ? `${n}
80
+ ` : "") + c.documentElement.outerHTML).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
80
81
  }
81
- function I(e) {
82
+ function y(e) {
82
83
  if (!e || !e.includes("recommendation-block-v2"))
83
84
  return e;
84
- const t = h(), n = new DOMParser().parseFromString(e, "text/html"), s = Array.from(n.querySelectorAll(f)), o = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Set();
85
- if (s.forEach((c) => {
85
+ const t = C(), i = new DOMParser().parseFromString(e, "text/html"), c = Array.from(i.querySelectorAll(S)), n = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Set();
86
+ if (c.forEach((s) => {
86
87
  var l;
87
- const r = Number(c.getAttribute("recommendation-id"));
88
+ const r = Number(s.getAttribute("recommendation-id"));
88
89
  if (!Number.isFinite(r))
89
90
  return;
90
91
  const u = ((l = t.blockStates[r]) == null ? void 0 : l.recommendationProducts) ?? [];
91
92
  u.length && P(
92
- o,
93
+ n,
93
94
  a,
94
95
  r,
95
96
  u,
96
- N(c),
97
- c.getAttribute("hide-price") === "true"
97
+ N(s),
98
+ s.getAttribute("hide-price") === "true"
98
99
  );
99
- }), !o.size)
100
+ }), !n.size)
100
101
  return e;
101
- let i = D(e, a);
102
- return i = i.replace(
103
- R,
104
- (c, r) => o.has(r) ? b(o.get(r)) : c
105
- ), i = z(i, o), i;
102
+ let o = I(e, a);
103
+ return o = o.replace(
104
+ T,
105
+ (s, r) => n.has(r) ? L(n.get(r)) : s
106
+ ), o = w(o, n), o;
106
107
  }
107
- const q = () => ({ substituteRecommendationPreview: I });
108
+ const q = () => ({ substituteRecommendationPreview: y });
108
109
  export {
109
- I as substituteRecommendationPreview,
110
+ y as substituteRecommendationPreview,
110
111
  q as useRecommendationPreview
111
112
  };