@mx-cartographer/experiences 7.2.13 → 7.2.14-alpha.sms1
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/CHANGELOG.md +4 -0
- package/dist/{AccountDetailsContent-bqByD9ea.mjs → AccountDetailsContent-DXVLAjNQ.mjs} +1 -1
- package/dist/{ManageIncome-CQPFKdYB.mjs → ManageIncome-B5zuYyxg.mjs} +1 -1
- package/dist/{RecurringSettings-DDaGTnfz.mjs → RecurringSettings-CMwUC_rw.mjs} +1 -1
- package/dist/{TransactionDetails-DW7T0W0z.mjs → TransactionDetails-CuqEbcYg.mjs} +1 -1
- package/dist/{TransactionStore-DxPLdF3B.mjs → TransactionStore-B4FCabkO.mjs} +34 -31
- package/dist/{ViewMoreMicroCard-SCn2wt4i.mjs → ViewMoreMicroCard-iInbzbw0.mjs} +545 -571
- package/dist/accounts/index.es.js +2 -2
- package/dist/budgets/index.es.js +2 -2
- package/dist/cashflow/index.es.js +3 -3
- package/dist/common/index.es.js +2 -2
- package/dist/finstrong/index.es.js +1 -1
- package/dist/goals/index.es.js +1 -1
- package/dist/microinsights/beaticons/BeatIcon.d.ts +0 -2
- package/dist/microinsights/cards/MicroInsightCard.d.ts +0 -7
- package/dist/microinsights/carousel/CarouselControls.d.ts +0 -2
- package/dist/microinsights/carousel/CarouselHeader.d.ts +1 -2
- package/dist/microinsights/index.d.ts +1 -1
- package/dist/microinsights/index.es.js +1 -1
- package/dist/microinsights/interfaces.d.ts +0 -4
- package/dist/recurringtransactions/index.es.js +4 -4
- package/dist/spending/index.es.js +1 -1
- package/dist/transactions/index.es.js +4 -4
- package/dist/trends/index.es.js +2 -2
- package/package.json +1 -1
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import u, { useState as
|
|
3
|
-
import { observer as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { ChevronLeft as
|
|
1
|
+
import { jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import u, { useState as ee, useEffect as ie } from "react";
|
|
3
|
+
import { observer as P } from "mobx-react-lite";
|
|
4
|
+
import Ze from "@mui/material/Button";
|
|
5
|
+
import z from "@mui/material/Stack";
|
|
6
|
+
import Pe from "@mui/material/Typography";
|
|
7
|
+
import { ChevronLeft as Ge, ChevronRight as ve } from "@mxenabled/mx-icons";
|
|
8
8
|
import { L as Ue } from "./Loader-DUaFpDGv.mjs";
|
|
9
9
|
import U from "@mui/material/Box";
|
|
10
|
-
import
|
|
11
|
-
import { useTheme as
|
|
12
|
-
import { useInView as
|
|
13
|
-
import { P as
|
|
14
|
-
import
|
|
15
|
-
import { b as
|
|
16
|
-
import { css as
|
|
17
|
-
import { b as
|
|
18
|
-
import
|
|
19
|
-
import { makeAutoObservable as
|
|
20
|
-
import { G as
|
|
21
|
-
import { B as
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
10
|
+
import ue from "@mui/material/IconButton";
|
|
11
|
+
import { useTheme as be } from "@mui/material/styles";
|
|
12
|
+
import { useInView as Se } from "react-intersection-observer";
|
|
13
|
+
import { P as ze, CategoryIcon as Ke, useTokens as Me, MerchantLogo as $e, Icon as te } from "@mxenabled/mxui";
|
|
14
|
+
import ce from "@mui/material/styles/useTheme";
|
|
15
|
+
import { b as Ye } from "./Category-CevNQ03n.mjs";
|
|
16
|
+
import { css as je } from "@mxenabled/cssinjs";
|
|
17
|
+
import { b as Xe } from "./Localization-2MODESHW.mjs";
|
|
18
|
+
import Qe from "@mui/material/CircularProgress";
|
|
19
|
+
import { makeAutoObservable as se, runInAction as Ae } from "mobx";
|
|
20
|
+
import { G as pe, a as qe, u as Je, b as et } from "./useCombineEvents-BUDIR1ba.mjs";
|
|
21
|
+
import { B as _e } from "./BeatApi-DhJpgCLz.mjs";
|
|
22
|
+
import tt from "@mui/material/Card";
|
|
23
|
+
import it from "@mui/material/CardActions";
|
|
24
|
+
import ot from "@mui/material/CardContent";
|
|
25
25
|
import lt from "@mui/material/CardHeader";
|
|
26
|
-
const
|
|
26
|
+
const Ce = {
|
|
27
27
|
featureVersion: "spendVsIncomeTrends"
|
|
28
28
|
};
|
|
29
|
-
class
|
|
30
|
-
copyApi = new
|
|
29
|
+
class rt {
|
|
30
|
+
copyApi = new pe("/", "");
|
|
31
31
|
copyObject = {};
|
|
32
32
|
namespace = "experiences";
|
|
33
33
|
translationKey = "micro_insights";
|
|
34
34
|
constructor() {
|
|
35
|
-
|
|
35
|
+
se(this);
|
|
36
36
|
}
|
|
37
37
|
// NOTE: Not sure if this is special case, but other stores have this deprecation todo
|
|
38
38
|
// DEPRECATED: Initialize api in constructor and use loadCopy instead
|
|
39
39
|
// TODO: Remove this function
|
|
40
40
|
initialize = async (o, t) => {
|
|
41
|
-
this.copyApi = new
|
|
41
|
+
this.copyApi = new pe(o, t), await this.loadCopy();
|
|
42
42
|
};
|
|
43
43
|
loadCopy = async () => {
|
|
44
44
|
const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
|
|
45
|
-
|
|
45
|
+
Ae(() => {
|
|
46
46
|
this.copyObject = o[this.translationKey];
|
|
47
47
|
});
|
|
48
48
|
};
|
|
@@ -56,7 +56,7 @@ class nt {
|
|
|
56
56
|
return this.copyObject.zero_state;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
const
|
|
59
|
+
const de = {
|
|
60
60
|
BillAmountNotStandard: "BillAmountNotStandard",
|
|
61
61
|
CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
|
|
62
62
|
DuplicatePaymentV2: "DuplicatePaymentV2",
|
|
@@ -73,59 +73,59 @@ const he = {
|
|
|
73
73
|
WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
|
|
74
74
|
MonthlySpendComparison: "MonthlySpendComparison",
|
|
75
75
|
MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
|
|
76
|
-
},
|
|
76
|
+
}, v = window?.app?.clientConfig?.microwidget_instance_id || "", fe = {
|
|
77
77
|
INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
|
|
78
|
-
},
|
|
78
|
+
}, Oe = (i) => `on${i}Click`, Te = (i) => `on${i}View`, We = (i) => `on${i}ViewFirstTime`, he = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), nt = () => Object.values(de).reduce(
|
|
79
79
|
(i, o) => ({
|
|
80
80
|
...i,
|
|
81
|
-
[
|
|
82
|
-
action:
|
|
83
|
-
category:
|
|
84
|
-
label:
|
|
85
|
-
value:
|
|
81
|
+
[Oe(o)]: {
|
|
82
|
+
action: W.MICRO_BEAT_CLICKED,
|
|
83
|
+
category: T.BEAT_INTERACTION,
|
|
84
|
+
label: he(o),
|
|
85
|
+
value: v
|
|
86
86
|
}
|
|
87
87
|
}),
|
|
88
88
|
{}
|
|
89
|
-
),
|
|
89
|
+
), at = () => Object.values(de).reduce(
|
|
90
90
|
(i, o) => ({
|
|
91
91
|
...i,
|
|
92
|
-
[
|
|
93
|
-
action:
|
|
94
|
-
category:
|
|
95
|
-
label:
|
|
96
|
-
value:
|
|
92
|
+
[Te(o)]: {
|
|
93
|
+
action: W.MICRO_BEAT_DISPLAYED,
|
|
94
|
+
category: T.BEAT_INTERACTION,
|
|
95
|
+
label: he(o),
|
|
96
|
+
value: v
|
|
97
97
|
}
|
|
98
98
|
}),
|
|
99
99
|
{}
|
|
100
|
-
),
|
|
100
|
+
), ct = () => Object.values(de).reduce(
|
|
101
101
|
(i, o) => ({
|
|
102
102
|
...i,
|
|
103
|
-
[
|
|
104
|
-
action:
|
|
105
|
-
category:
|
|
106
|
-
label:
|
|
107
|
-
value:
|
|
103
|
+
[We(o)]: {
|
|
104
|
+
action: W.MICRO_BEAT_DISPLAYED_FIRST_TIME,
|
|
105
|
+
category: T.BEAT_INTERACTION,
|
|
106
|
+
label: he(o),
|
|
107
|
+
value: v
|
|
108
108
|
}
|
|
109
109
|
}),
|
|
110
110
|
{}
|
|
111
|
-
),
|
|
111
|
+
), O = {
|
|
112
112
|
CARD: "Card",
|
|
113
113
|
CAROUSEL_CONTROL: "Carousel Control",
|
|
114
114
|
MICRO_WIDGET: "Micro Widget",
|
|
115
115
|
VIEW_MORE: "View More"
|
|
116
|
-
},
|
|
116
|
+
}, T = {
|
|
117
117
|
MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
|
|
118
118
|
BEAT_INTERACTION: "Beat Interaction"
|
|
119
|
-
},
|
|
119
|
+
}, S = {
|
|
120
120
|
ON_CAROUSEL_BACK_CLICK: "onCarouselBackClick",
|
|
121
121
|
ON_CAROUSEL_BACK_SWIPE: "onCarouselBackSwipe",
|
|
122
122
|
ON_CAROUSEL_FORWARD_CLICK: "onCarouselForwardClick",
|
|
123
123
|
ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
|
|
124
124
|
ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
|
|
125
125
|
ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
|
|
126
|
-
},
|
|
126
|
+
}, we = {
|
|
127
127
|
ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
|
|
128
|
-
},
|
|
128
|
+
}, W = {
|
|
129
129
|
CONTROL_BACKWARD: "Control Backward",
|
|
130
130
|
CONTROL_FORWARD: "Control Forward",
|
|
131
131
|
MICRO_BEAT_CLICKED: "Micro Beat Clicked",
|
|
@@ -133,95 +133,95 @@ const he = {
|
|
|
133
133
|
MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
|
|
134
134
|
SWIPE_BACKWARD: "Swipe Backward",
|
|
135
135
|
SWIPE_FORWARD: "Swipe Forward"
|
|
136
|
-
},
|
|
136
|
+
}, V = {
|
|
137
137
|
MICRO_WIDGET_CAROUSEL: "Micro Widget Carousel",
|
|
138
138
|
MICRO_WIDGET_CAROUSEL_ZERO_STATE: "Micro Widget Carousel Zero State",
|
|
139
139
|
MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: "Micro Widget Carousel No Relevant Insights"
|
|
140
|
-
},
|
|
141
|
-
[
|
|
142
|
-
label:
|
|
143
|
-
name:
|
|
144
|
-
path:
|
|
145
|
-
value:
|
|
140
|
+
}, me = {
|
|
141
|
+
[V.MICRO_WIDGET_CAROUSEL]: {
|
|
142
|
+
label: O.MICRO_WIDGET,
|
|
143
|
+
name: V.MICRO_WIDGET_CAROUSEL,
|
|
144
|
+
path: fe.INSIGHTS_MICRO_WIDGET,
|
|
145
|
+
value: v
|
|
146
146
|
},
|
|
147
147
|
// zero state
|
|
148
|
-
[
|
|
149
|
-
label:
|
|
150
|
-
name:
|
|
151
|
-
path:
|
|
152
|
-
value:
|
|
148
|
+
[V.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
|
|
149
|
+
label: O.MICRO_WIDGET,
|
|
150
|
+
name: V.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
|
|
151
|
+
path: fe.INSIGHTS_MICRO_WIDGET,
|
|
152
|
+
value: v
|
|
153
153
|
},
|
|
154
154
|
// no relevant cards
|
|
155
|
-
[
|
|
156
|
-
label:
|
|
157
|
-
name:
|
|
155
|
+
[V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
|
|
156
|
+
label: O.MICRO_WIDGET,
|
|
157
|
+
name: V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
|
|
158
158
|
path: "/micro-widget",
|
|
159
|
-
value:
|
|
159
|
+
value: v
|
|
160
160
|
}
|
|
161
|
-
},
|
|
161
|
+
}, Re = {
|
|
162
162
|
// carousel control interaction events - clicks and swipes
|
|
163
|
-
[
|
|
164
|
-
action:
|
|
165
|
-
category:
|
|
166
|
-
label:
|
|
167
|
-
value:
|
|
163
|
+
[S.ON_CAROUSEL_BACK_CLICK]: {
|
|
164
|
+
action: W.CONTROL_BACKWARD,
|
|
165
|
+
category: T.MICRO_WIDGET_INTERACTION,
|
|
166
|
+
label: O.CAROUSEL_CONTROL,
|
|
167
|
+
value: v
|
|
168
168
|
},
|
|
169
|
-
[
|
|
170
|
-
action:
|
|
171
|
-
category:
|
|
172
|
-
label:
|
|
173
|
-
value:
|
|
169
|
+
[S.ON_CAROUSEL_FORWARD_CLICK]: {
|
|
170
|
+
action: W.CONTROL_FORWARD,
|
|
171
|
+
category: T.MICRO_WIDGET_INTERACTION,
|
|
172
|
+
label: O.CAROUSEL_CONTROL,
|
|
173
|
+
value: v
|
|
174
174
|
},
|
|
175
|
-
[
|
|
176
|
-
action:
|
|
177
|
-
category:
|
|
178
|
-
label:
|
|
179
|
-
value:
|
|
175
|
+
[S.ON_CAROUSEL_BACK_SWIPE]: {
|
|
176
|
+
action: W.SWIPE_BACKWARD,
|
|
177
|
+
category: T.MICRO_WIDGET_INTERACTION,
|
|
178
|
+
label: O.CAROUSEL_CONTROL,
|
|
179
|
+
value: v
|
|
180
180
|
},
|
|
181
|
-
[
|
|
182
|
-
action:
|
|
183
|
-
category:
|
|
184
|
-
label:
|
|
185
|
-
value:
|
|
181
|
+
[S.ON_CAROUSEL_FORWARD_SWIPE]: {
|
|
182
|
+
action: W.SWIPE_FORWARD,
|
|
183
|
+
category: T.MICRO_WIDGET_INTERACTION,
|
|
184
|
+
label: O.CAROUSEL_CONTROL,
|
|
185
|
+
value: v
|
|
186
186
|
},
|
|
187
187
|
// read more card events
|
|
188
|
-
[
|
|
189
|
-
action:
|
|
190
|
-
category:
|
|
191
|
-
label:
|
|
192
|
-
value:
|
|
188
|
+
[S.ON_VIEW_MORE_CLICKED]: {
|
|
189
|
+
action: W.MICRO_BEAT_CLICKED,
|
|
190
|
+
category: T.BEAT_INTERACTION,
|
|
191
|
+
label: O.VIEW_MORE,
|
|
192
|
+
value: v
|
|
193
193
|
},
|
|
194
|
-
[
|
|
195
|
-
action:
|
|
196
|
-
category:
|
|
197
|
-
label:
|
|
198
|
-
value:
|
|
194
|
+
[we.ON_VIEW_MORE_VIEWED]: {
|
|
195
|
+
action: W.MICRO_BEAT_DISPLAYED,
|
|
196
|
+
category: T.BEAT_INTERACTION,
|
|
197
|
+
label: O.VIEW_MORE,
|
|
198
|
+
value: v
|
|
199
199
|
},
|
|
200
|
+
...nt(),
|
|
200
201
|
...at(),
|
|
201
|
-
...ct()
|
|
202
|
-
|
|
203
|
-
}, Ie = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticEvent(ge[i]).then((t) => t).catch((t) => {
|
|
202
|
+
...ct()
|
|
203
|
+
}, ge = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticEvent(Re[i]).then((t) => t).catch((t) => {
|
|
204
204
|
throw t;
|
|
205
|
-
}),
|
|
205
|
+
}), Ie = async (i, o) => !o || !me[i] ? null : o.sendAnalyticsPageview(me[i]).then((t) => t).catch((t) => {
|
|
206
206
|
throw t;
|
|
207
207
|
});
|
|
208
|
-
class
|
|
209
|
-
onAnalyticEvent =
|
|
210
|
-
onAnalyticPageView =
|
|
211
|
-
beatApi = new
|
|
208
|
+
class st {
|
|
209
|
+
onAnalyticEvent = ge;
|
|
210
|
+
onAnalyticPageView = Ie;
|
|
211
|
+
beatApi = new _e("/", "");
|
|
212
212
|
constructor() {
|
|
213
|
-
|
|
213
|
+
se(this);
|
|
214
214
|
}
|
|
215
|
-
initialize = async (o, t,
|
|
216
|
-
this.onAnalyticEvent = (
|
|
217
|
-
|
|
218
|
-
throw a.status === 401 &&
|
|
215
|
+
initialize = async (o, t, l) => {
|
|
216
|
+
this.onAnalyticEvent = (r, n) => {
|
|
217
|
+
ge(r, n).then((a) => a).catch((a) => {
|
|
218
|
+
throw a.status === 401 && l(), a;
|
|
219
219
|
});
|
|
220
|
-
}, this.onAnalyticPageView = (
|
|
221
|
-
|
|
222
|
-
throw a.status === 401 &&
|
|
220
|
+
}, this.onAnalyticPageView = (r, n) => {
|
|
221
|
+
Ie(r, n).then((a) => a).catch((a) => {
|
|
222
|
+
throw a.status === 401 && l(), a;
|
|
223
223
|
});
|
|
224
|
-
}, this.beatApi = new
|
|
224
|
+
}, this.beatApi = new _e(o, t);
|
|
225
225
|
};
|
|
226
226
|
updateBeat = async (o) => {
|
|
227
227
|
this.beatApi.updateBeat(o);
|
|
@@ -230,7 +230,7 @@ class dt {
|
|
|
230
230
|
this.beatApi.updateOffer(o);
|
|
231
231
|
};
|
|
232
232
|
}
|
|
233
|
-
class
|
|
233
|
+
class dt {
|
|
234
234
|
copyStore;
|
|
235
235
|
endpoint = "/";
|
|
236
236
|
insightsMicroWidgetStore;
|
|
@@ -238,62 +238,61 @@ class ht {
|
|
|
238
238
|
token = "";
|
|
239
239
|
isInitialized = !1;
|
|
240
240
|
constructor() {
|
|
241
|
-
this.copyStore = new
|
|
241
|
+
this.copyStore = new rt(), this.insightsMicroWidgetStore = new st(), se(this);
|
|
242
242
|
}
|
|
243
|
-
initialize = async (o, t,
|
|
244
|
-
await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t,
|
|
245
|
-
const
|
|
246
|
-
|
|
247
|
-
this.session =
|
|
243
|
+
initialize = async (o, t, l) => {
|
|
244
|
+
await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
|
|
245
|
+
const r = await qe(o, t, "1.0.0", "Micro Insights Carousel");
|
|
246
|
+
Ae(() => {
|
|
247
|
+
this.session = r, this.isInitialized = !0;
|
|
248
248
|
});
|
|
249
249
|
};
|
|
250
250
|
}
|
|
251
|
-
const
|
|
251
|
+
const K = u.createContext(null), ht = ({
|
|
252
252
|
onEvent: i,
|
|
253
253
|
onPageview: o,
|
|
254
254
|
store: t,
|
|
255
|
-
children:
|
|
256
|
-
}) => /* @__PURE__ */ e(
|
|
255
|
+
children: l
|
|
256
|
+
}) => /* @__PURE__ */ e(K.Provider, { value: { onEvent: i, onPageview: o, store: t, children: l }, children: l }), oe = u.forwardRef(
|
|
257
257
|
function({
|
|
258
258
|
actionText: o,
|
|
259
259
|
ariaLabel: t,
|
|
260
|
-
backgroundColor:
|
|
261
|
-
description:
|
|
262
|
-
heightOverrides:
|
|
260
|
+
backgroundColor: l,
|
|
261
|
+
description: r,
|
|
262
|
+
heightOverrides: n,
|
|
263
263
|
icon: a,
|
|
264
|
-
isActiveCard:
|
|
265
|
-
isZeroState:
|
|
264
|
+
isActiveCard: h,
|
|
265
|
+
isZeroState: s,
|
|
266
266
|
onCardClick: _ = () => {
|
|
267
267
|
},
|
|
268
|
-
showIcon:
|
|
269
|
-
style:
|
|
270
|
-
|
|
271
|
-
title: m,
|
|
268
|
+
showIcon: p,
|
|
269
|
+
style: C = {},
|
|
270
|
+
title: f,
|
|
272
271
|
variant: c,
|
|
273
272
|
widthOverrides: E
|
|
274
|
-
},
|
|
275
|
-
const
|
|
276
|
-
|
|
273
|
+
}, m) {
|
|
274
|
+
const g = ce(), [w, A] = u.useState(!1), { cardStyle: I, linkTextStyle: k } = C, b = c ? I : { border: "none", boxShadow: "none", ...I }, R = /* @__PURE__ */ e(
|
|
275
|
+
ze,
|
|
277
276
|
{
|
|
278
277
|
className: "mx-micro-card-description",
|
|
279
|
-
color:
|
|
278
|
+
color: "text.primary",
|
|
280
279
|
sx: {
|
|
281
280
|
display: "-webkit-box",
|
|
282
281
|
fontSize: 13,
|
|
283
282
|
letterSpacing: 0.48,
|
|
284
283
|
lineHeight: "20px",
|
|
285
284
|
overflow: "hidden",
|
|
286
|
-
pl:
|
|
287
|
-
pr:
|
|
285
|
+
pl: s ? 0 : 28,
|
|
286
|
+
pr: s ? 0 : 8,
|
|
288
287
|
WebkitBoxOrient: "vertical",
|
|
289
288
|
WebkitLineClamp: 2,
|
|
290
289
|
wordWrap: "break-word"
|
|
291
290
|
},
|
|
292
|
-
children:
|
|
291
|
+
children: r && /* @__PURE__ */ e(
|
|
293
292
|
"span",
|
|
294
293
|
{
|
|
295
|
-
dangerouslySetInnerHTML: { __html:
|
|
296
|
-
style: { fontFamily:
|
|
294
|
+
dangerouslySetInnerHTML: { __html: r },
|
|
295
|
+
style: { fontFamily: g.typography.fontFamily }
|
|
297
296
|
}
|
|
298
297
|
)
|
|
299
298
|
}
|
|
@@ -301,55 +300,54 @@ const $ = u.createContext(null), Et = ({
|
|
|
301
300
|
return /* @__PURE__ */ e(
|
|
302
301
|
U,
|
|
303
302
|
{
|
|
304
|
-
"aria-hidden": !
|
|
303
|
+
"aria-hidden": !h,
|
|
305
304
|
"aria-label": t,
|
|
306
305
|
"aria-labelledby": "divButton",
|
|
307
306
|
"aria-roledescription": "slide",
|
|
308
|
-
ref:
|
|
307
|
+
ref: m,
|
|
309
308
|
role: "group",
|
|
310
309
|
sx: {
|
|
311
310
|
height: "100%",
|
|
312
311
|
minWidth: E ? `${E}px` : "100%",
|
|
313
|
-
fontFamily:
|
|
312
|
+
fontFamily: g.typography.fontFamily
|
|
314
313
|
},
|
|
315
314
|
children: /* @__PURE__ */ e(
|
|
316
315
|
U,
|
|
317
316
|
{
|
|
318
|
-
"aria-hidden": !
|
|
317
|
+
"aria-hidden": !h,
|
|
319
318
|
"aria-label": t,
|
|
320
319
|
id: "divButton",
|
|
321
320
|
onClick: () => _(),
|
|
322
|
-
onKeyDown: () =>
|
|
323
|
-
onKeyUp: () =>
|
|
324
|
-
ref:
|
|
321
|
+
onKeyDown: () => A(!1),
|
|
322
|
+
onKeyUp: () => A(!0),
|
|
323
|
+
ref: m,
|
|
325
324
|
role: "button",
|
|
326
325
|
sx: {
|
|
327
|
-
border:
|
|
326
|
+
border: w ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
|
|
328
327
|
borderRadius: "8px",
|
|
329
328
|
height: "100%"
|
|
330
329
|
},
|
|
331
|
-
tabIndex:
|
|
330
|
+
tabIndex: h ? 0 : -1,
|
|
332
331
|
children: /* @__PURE__ */ e(
|
|
333
|
-
|
|
332
|
+
tt,
|
|
334
333
|
{
|
|
335
334
|
"aria-roledescription": "slide",
|
|
336
335
|
className: "mx-micro-card",
|
|
337
336
|
role: "group",
|
|
338
337
|
sx: {
|
|
339
|
-
backgroundColor:
|
|
338
|
+
backgroundColor: l,
|
|
340
339
|
boxSizing: "border-box",
|
|
341
340
|
cursor: "pointer",
|
|
342
|
-
height:
|
|
341
|
+
height: n ? "100%" : 124,
|
|
343
342
|
p: 16,
|
|
344
|
-
...
|
|
343
|
+
...b,
|
|
345
344
|
"& .MuiCardHeader-avatar": {
|
|
346
|
-
color: h.iconColor,
|
|
347
345
|
mr: "8px"
|
|
348
346
|
}
|
|
349
347
|
},
|
|
350
348
|
variant: c,
|
|
351
|
-
children: /* @__PURE__ */
|
|
352
|
-
|
|
349
|
+
children: /* @__PURE__ */ y(
|
|
350
|
+
z,
|
|
353
351
|
{
|
|
354
352
|
sx: {
|
|
355
353
|
alignItems: "space-between",
|
|
@@ -359,16 +357,16 @@ const $ = u.createContext(null), Et = ({
|
|
|
359
357
|
/* @__PURE__ */ e(
|
|
360
358
|
lt,
|
|
361
359
|
{
|
|
362
|
-
avatar:
|
|
363
|
-
subheader:
|
|
364
|
-
sx: {
|
|
365
|
-
title:
|
|
360
|
+
avatar: p && a,
|
|
361
|
+
subheader: s && R,
|
|
362
|
+
sx: { p: 0 },
|
|
363
|
+
title: f,
|
|
366
364
|
titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
|
|
367
365
|
}
|
|
368
366
|
),
|
|
369
|
-
/* @__PURE__ */ e(
|
|
367
|
+
/* @__PURE__ */ e(ot, { sx: { p: 0 }, children: !s && R }),
|
|
370
368
|
!!o && /* @__PURE__ */ e(
|
|
371
|
-
|
|
369
|
+
it,
|
|
372
370
|
{
|
|
373
371
|
sx: {
|
|
374
372
|
mt: "auto",
|
|
@@ -377,13 +375,13 @@ const $ = u.createContext(null), Et = ({
|
|
|
377
375
|
children: /* @__PURE__ */ e(
|
|
378
376
|
U,
|
|
379
377
|
{
|
|
380
|
-
sx: (
|
|
381
|
-
color:
|
|
378
|
+
sx: (x) => ({
|
|
379
|
+
color: x.palette.primary.main,
|
|
382
380
|
fontSize: 14,
|
|
383
381
|
fontWeight: "bold",
|
|
384
382
|
px: 28,
|
|
385
|
-
fontFamily:
|
|
386
|
-
...
|
|
383
|
+
fontFamily: x.typography.fontFamily,
|
|
384
|
+
...k
|
|
387
385
|
}),
|
|
388
386
|
children: o
|
|
389
387
|
}
|
|
@@ -400,15 +398,15 @@ const $ = u.createContext(null), Et = ({
|
|
|
400
398
|
}
|
|
401
399
|
);
|
|
402
400
|
}
|
|
403
|
-
),
|
|
404
|
-
const [o, t] =
|
|
405
|
-
return
|
|
401
|
+
), Et = ({ beat: i }) => {
|
|
402
|
+
const [o, t] = ee(Ye.UNCATEGORIZED);
|
|
403
|
+
return ie(() => {
|
|
406
404
|
i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
|
|
407
|
-
}, []), /* @__PURE__ */ e(
|
|
408
|
-
},
|
|
409
|
-
const o =
|
|
405
|
+
}, []), /* @__PURE__ */ e(Ke, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
|
|
406
|
+
}, ut = ({ beat: i }) => {
|
|
407
|
+
const o = Me(), t = pt(o);
|
|
410
408
|
return /* @__PURE__ */ e(
|
|
411
|
-
|
|
409
|
+
$e,
|
|
412
410
|
{
|
|
413
411
|
categoryGuid: i.primary_category_guid || i.category_guids && i.category_guids[0] || "",
|
|
414
412
|
className: t,
|
|
@@ -416,18 +414,18 @@ const $ = u.createContext(null), Et = ({
|
|
|
416
414
|
size: 16
|
|
417
415
|
}
|
|
418
416
|
);
|
|
419
|
-
},
|
|
417
|
+
}, pt = (i) => je({
|
|
420
418
|
marginTop: i.Spacing.XTiny,
|
|
421
419
|
"& .kyper-categoryicon": {
|
|
422
420
|
display: "flex"
|
|
423
421
|
}
|
|
424
|
-
}),
|
|
422
|
+
}), _t = P(ut), Ct = ({
|
|
425
423
|
color: i = "currentColor",
|
|
426
424
|
height: o,
|
|
427
425
|
size: t = 16,
|
|
428
|
-
styles:
|
|
429
|
-
viewBox:
|
|
430
|
-
width:
|
|
426
|
+
styles: l,
|
|
427
|
+
viewBox: r = "0 0 16 16",
|
|
428
|
+
width: n
|
|
431
429
|
}) => /* @__PURE__ */ e(
|
|
432
430
|
"svg",
|
|
433
431
|
{
|
|
@@ -435,9 +433,9 @@ const $ = u.createContext(null), Et = ({
|
|
|
435
433
|
className: "kyper-icon",
|
|
436
434
|
focusable: !1,
|
|
437
435
|
height: o || t,
|
|
438
|
-
style:
|
|
439
|
-
viewBox:
|
|
440
|
-
width:
|
|
436
|
+
style: l,
|
|
437
|
+
viewBox: r,
|
|
438
|
+
width: n || t,
|
|
441
439
|
xmlns: "http://www.w3.org/2000/svg",
|
|
442
440
|
children: /* @__PURE__ */ e(
|
|
443
441
|
"path",
|
|
@@ -447,18 +445,18 @@ const $ = u.createContext(null), Et = ({
|
|
|
447
445
|
}
|
|
448
446
|
)
|
|
449
447
|
}
|
|
450
|
-
),
|
|
448
|
+
), ft = (i) => i ? i.data ? i.data.map((o) => {
|
|
451
449
|
const t = {};
|
|
452
|
-
return i.names?.map((
|
|
453
|
-
t[
|
|
450
|
+
return i.names?.map((l, r) => {
|
|
451
|
+
t[l] = o[r];
|
|
454
452
|
}), t;
|
|
455
|
-
}) : [] : [],
|
|
456
|
-
const t =
|
|
457
|
-
return !
|
|
458
|
-
},
|
|
459
|
-
const o =
|
|
460
|
-
return /* @__PURE__ */ e(
|
|
461
|
-
},
|
|
453
|
+
}) : [] : [], mt = (i, o) => {
|
|
454
|
+
const t = ft(i), l = t.length / 2, r = t.slice(0, l), n = t.slice(l);
|
|
455
|
+
return !r.length || !n.length ? o.Color.Primary300 : r[0].amount > n[0].amount ? o.Color.Error300 : r[0].amount < n[0].amount ? o.Color.Success300 : o.Color.Primary300;
|
|
456
|
+
}, Rt = ({ beat: i }) => {
|
|
457
|
+
const o = Me(), t = mt(i.data_series, o);
|
|
458
|
+
return /* @__PURE__ */ e(te, { name: "bar_chart", sx: { color: t } });
|
|
459
|
+
}, xe = () => /* @__PURE__ */ y("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
462
460
|
/* @__PURE__ */ e(
|
|
463
461
|
"path",
|
|
464
462
|
{
|
|
@@ -702,7 +700,7 @@ const $ = u.createContext(null), Et = ({
|
|
|
702
700
|
fillRule: "evenodd"
|
|
703
701
|
}
|
|
704
702
|
),
|
|
705
|
-
/* @__PURE__ */
|
|
703
|
+
/* @__PURE__ */ y("g", { filter: "url(#filter0_d_1565_98011)", children: [
|
|
706
704
|
/* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
|
|
707
705
|
"path",
|
|
708
706
|
{
|
|
@@ -958,10 +956,10 @@ const $ = u.createContext(null), Et = ({
|
|
|
958
956
|
),
|
|
959
957
|
/* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
|
|
960
958
|
] }),
|
|
961
|
-
/* @__PURE__ */
|
|
959
|
+
/* @__PURE__ */ y("g", { filter: "url(#filter1_d_1565_98011)", children: [
|
|
962
960
|
/* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
|
|
963
961
|
/* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
|
|
964
|
-
/* @__PURE__ */
|
|
962
|
+
/* @__PURE__ */ y("g", { mask: "url(#mask2_1565_98011)", children: [
|
|
965
963
|
/* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
|
|
966
964
|
/* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
|
|
967
965
|
/* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
|
|
@@ -1151,8 +1149,8 @@ const $ = u.createContext(null), Et = ({
|
|
|
1151
1149
|
fill: "#CDD3DD"
|
|
1152
1150
|
}
|
|
1153
1151
|
),
|
|
1154
|
-
/* @__PURE__ */
|
|
1155
|
-
/* @__PURE__ */
|
|
1152
|
+
/* @__PURE__ */ y("defs", { children: [
|
|
1153
|
+
/* @__PURE__ */ y(
|
|
1156
1154
|
"filter",
|
|
1157
1155
|
{
|
|
1158
1156
|
colorInterpolationFilters: "sRGB",
|
|
@@ -1195,7 +1193,7 @@ const $ = u.createContext(null), Et = ({
|
|
|
1195
1193
|
]
|
|
1196
1194
|
}
|
|
1197
1195
|
),
|
|
1198
|
-
/* @__PURE__ */
|
|
1196
|
+
/* @__PURE__ */ y(
|
|
1199
1197
|
"filter",
|
|
1200
1198
|
{
|
|
1201
1199
|
colorInterpolationFilters: "sRGB",
|
|
@@ -1239,145 +1237,134 @@ const $ = u.createContext(null), Et = ({
|
|
|
1239
1237
|
}
|
|
1240
1238
|
)
|
|
1241
1239
|
] })
|
|
1242
|
-
] }),
|
|
1243
|
-
const
|
|
1244
|
-
return
|
|
1245
|
-
|
|
1240
|
+
] }), ye = ({ beat: i, color: o, type: t }) => {
|
|
1241
|
+
const l = ce();
|
|
1242
|
+
return t === 0 ? /* @__PURE__ */ e(te, { fill: !0, name: "error", sx: { color: o || l.palette.primary.main } }) : t === 1 && i ? /* @__PURE__ */ e(Et, { beat: i }) : t === 2 && i ? /* @__PURE__ */ e(_t, { beat: i }) : t === 3 && i ? /* @__PURE__ */ e(Rt, { beat: i }) : t === 5 && i ? /* @__PURE__ */ e(te, { name: "campaign" }) : /* @__PURE__ */ e(
|
|
1243
|
+
te,
|
|
1246
1244
|
{
|
|
1247
1245
|
fill: !0,
|
|
1248
1246
|
name: "info",
|
|
1249
1247
|
sx: {
|
|
1250
|
-
color: l
|
|
1248
|
+
color: l.palette.primary.main
|
|
1251
1249
|
}
|
|
1252
1250
|
}
|
|
1253
1251
|
);
|
|
1254
|
-
},
|
|
1255
|
-
const i = u.useContext(
|
|
1252
|
+
}, H = () => {
|
|
1253
|
+
const i = u.useContext(K);
|
|
1256
1254
|
if (!i)
|
|
1257
1255
|
throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
|
|
1258
1256
|
return i.store.copyStore;
|
|
1259
|
-
},
|
|
1260
|
-
const i = u.useContext(
|
|
1257
|
+
}, gt = () => {
|
|
1258
|
+
const i = u.useContext(K);
|
|
1261
1259
|
if (!i?.store?.insightsMicroWidgetStore)
|
|
1262
1260
|
throw new Error(
|
|
1263
1261
|
"useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
|
|
1264
1262
|
);
|
|
1265
1263
|
return i.store.insightsMicroWidgetStore;
|
|
1266
|
-
},
|
|
1267
|
-
const i = u.useContext(
|
|
1264
|
+
}, $ = () => {
|
|
1265
|
+
const i = u.useContext(K);
|
|
1268
1266
|
if (!i)
|
|
1269
1267
|
throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
|
|
1270
1268
|
return { onEvent: i.onEvent };
|
|
1271
|
-
},
|
|
1272
|
-
const i = u.useContext(
|
|
1269
|
+
}, De = () => {
|
|
1270
|
+
const i = u.useContext(K);
|
|
1273
1271
|
if (!i)
|
|
1274
1272
|
throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
|
|
1275
1273
|
return { onPageview: i.onPageview };
|
|
1276
|
-
},
|
|
1274
|
+
}, Le = {
|
|
1277
1275
|
LARGE: 180,
|
|
1278
1276
|
STANDARD: 154,
|
|
1279
1277
|
XLARGE: 200,
|
|
1280
1278
|
XXLARGE: 248
|
|
1281
|
-
},
|
|
1279
|
+
}, It = 50, Ne = 1, yt = ({
|
|
1282
1280
|
ariaLabel: i,
|
|
1283
1281
|
backgroundColor: o,
|
|
1284
1282
|
beat: t,
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
widthOverrides: h
|
|
1283
|
+
showCTAColocatedWithText: l = !0,
|
|
1284
|
+
heightOverrides: r,
|
|
1285
|
+
index: n,
|
|
1286
|
+
isActiveCard: a,
|
|
1287
|
+
onCardClick: h,
|
|
1288
|
+
posthog: s,
|
|
1289
|
+
showIcon: _,
|
|
1290
|
+
variant: p,
|
|
1291
|
+
widthOverrides: C
|
|
1295
1292
|
}) => {
|
|
1296
|
-
const { ref:
|
|
1297
|
-
threshold:
|
|
1298
|
-
}), { cardsCopy: E } =
|
|
1299
|
-
|
|
1300
|
-
c && (t.has_been_displayed ?
|
|
1293
|
+
const { ref: f, inView: c } = Se({
|
|
1294
|
+
threshold: Ne
|
|
1295
|
+
}), { cardsCopy: E } = H(), { onEvent: m } = $(), { updateBeat: g, updateOffer: w } = gt();
|
|
1296
|
+
ie(() => {
|
|
1297
|
+
c && (t.has_been_displayed ? m(Te(t.template)) : (t.guid.startsWith("OFR") ? w({
|
|
1301
1298
|
...t,
|
|
1302
1299
|
has_been_displayed: !0
|
|
1303
|
-
}) :
|
|
1300
|
+
}) : g({
|
|
1304
1301
|
...t,
|
|
1305
1302
|
has_been_displayed: !0
|
|
1306
|
-
}),
|
|
1307
|
-
}, [c]),
|
|
1303
|
+
}), m(We(t.template))));
|
|
1304
|
+
}, [c]), ie(() => {
|
|
1308
1305
|
if (c && t)
|
|
1309
1306
|
if (t.template === "MarketingOffer") {
|
|
1310
|
-
const
|
|
1311
|
-
|
|
1307
|
+
const I = t;
|
|
1308
|
+
s?.capture("viewed_messaging_insight", {
|
|
1312
1309
|
template: t.template,
|
|
1313
|
-
campaign_guid:
|
|
1314
|
-
campaign_name:
|
|
1310
|
+
campaign_guid: I.campaign_guid,
|
|
1311
|
+
campaign_name: I.pulse_campaign_name
|
|
1315
1312
|
});
|
|
1316
1313
|
} else
|
|
1317
|
-
|
|
1314
|
+
s?.capture("viewed_insight", {
|
|
1318
1315
|
beat_guid: t.guid,
|
|
1319
1316
|
template: t.template,
|
|
1320
|
-
position:
|
|
1317
|
+
position: n
|
|
1321
1318
|
});
|
|
1322
|
-
}, [t,
|
|
1323
|
-
const
|
|
1324
|
-
if (
|
|
1325
|
-
const
|
|
1326
|
-
|
|
1319
|
+
}, [t, n, c]);
|
|
1320
|
+
const A = () => {
|
|
1321
|
+
if (h && h(t), m(Oe(t.template)), t.template === "MarketingOffer") {
|
|
1322
|
+
const I = t;
|
|
1323
|
+
s?.capture("clicked_messaging_insight", {
|
|
1327
1324
|
template: t.template,
|
|
1328
|
-
campaign_guid:
|
|
1329
|
-
campaign_name:
|
|
1325
|
+
campaign_guid: I.campaign_guid,
|
|
1326
|
+
campaign_name: I.pulse_campaign_name
|
|
1330
1327
|
});
|
|
1331
1328
|
} else
|
|
1332
|
-
|
|
1329
|
+
s?.capture("clicked_insight", {
|
|
1333
1330
|
beat_guid: t.guid,
|
|
1334
1331
|
template: t.template,
|
|
1335
|
-
position:
|
|
1332
|
+
position: n
|
|
1336
1333
|
});
|
|
1337
1334
|
};
|
|
1338
1335
|
return /* @__PURE__ */ e(
|
|
1339
|
-
|
|
1336
|
+
oe,
|
|
1340
1337
|
{
|
|
1341
1338
|
actionText: t.micro_call_to_action || E.micro_card_cta,
|
|
1342
1339
|
ariaLabel: i,
|
|
1343
1340
|
backgroundColor: o,
|
|
1344
1341
|
description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description,
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
type: t?.icon_type
|
|
1354
|
-
}
|
|
1355
|
-
),
|
|
1356
|
-
isActiveCard: d,
|
|
1357
|
-
onCardClick: O,
|
|
1358
|
-
posthog: _,
|
|
1359
|
-
ref: m,
|
|
1360
|
-
showCTAColocatedWithText: n,
|
|
1361
|
-
showIcon: C,
|
|
1342
|
+
heightOverrides: r,
|
|
1343
|
+
icon: ye && /* @__PURE__ */ e(ye, { beat: t, color: t?.icon_color, type: t?.icon_type }),
|
|
1344
|
+
isActiveCard: a,
|
|
1345
|
+
onCardClick: A,
|
|
1346
|
+
posthog: s,
|
|
1347
|
+
ref: f,
|
|
1348
|
+
showCTAColocatedWithText: l,
|
|
1349
|
+
showIcon: _,
|
|
1362
1350
|
title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
|
|
1363
|
-
variant:
|
|
1364
|
-
widthOverrides:
|
|
1351
|
+
variant: p,
|
|
1352
|
+
widthOverrides: C
|
|
1365
1353
|
}
|
|
1366
1354
|
);
|
|
1367
|
-
},
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
visibleCardsCount: p = 1
|
|
1355
|
+
}, vt = ({
|
|
1356
|
+
currentBeatIndex: i,
|
|
1357
|
+
numBeats: o,
|
|
1358
|
+
onNextClick: t,
|
|
1359
|
+
onPreviousClick: l,
|
|
1360
|
+
scrollRightBoundary: r,
|
|
1361
|
+
scrollX: n,
|
|
1362
|
+
shouldApplyNewAnimation: a = !1,
|
|
1363
|
+
visibleCardsCount: h = 1
|
|
1377
1364
|
}) => {
|
|
1378
|
-
const
|
|
1379
|
-
return /* @__PURE__ */
|
|
1380
|
-
|
|
1365
|
+
const s = be(), { carouselCopy: _ } = H(), p = Math.floor(n) > r || i - h + 1 === 0, C = n < 0 || o - 1 === i, f = s.palette.grey[500], c = s.palette.primary.main;
|
|
1366
|
+
return /* @__PURE__ */ y(
|
|
1367
|
+
z,
|
|
1381
1368
|
{
|
|
1382
1369
|
direction: "row",
|
|
1383
1370
|
sx: {
|
|
@@ -1392,34 +1379,34 @@ const $ = u.createContext(null), Et = ({
|
|
|
1392
1379
|
},
|
|
1393
1380
|
children: [
|
|
1394
1381
|
/* @__PURE__ */ e(
|
|
1395
|
-
|
|
1382
|
+
ue,
|
|
1396
1383
|
{
|
|
1397
|
-
"aria-disabled":
|
|
1398
|
-
"aria-label":
|
|
1399
|
-
disabled:
|
|
1400
|
-
onClick:
|
|
1384
|
+
"aria-disabled": p,
|
|
1385
|
+
"aria-label": _.previous_insight_cta_aria,
|
|
1386
|
+
disabled: p,
|
|
1387
|
+
onClick: l,
|
|
1401
1388
|
children: /* @__PURE__ */ e(
|
|
1402
|
-
|
|
1389
|
+
Ge,
|
|
1403
1390
|
{
|
|
1404
1391
|
style: {
|
|
1405
|
-
color:
|
|
1392
|
+
color: p ? f : c
|
|
1406
1393
|
}
|
|
1407
1394
|
}
|
|
1408
1395
|
)
|
|
1409
1396
|
}
|
|
1410
1397
|
),
|
|
1411
|
-
Array.from({ length:
|
|
1412
|
-
const
|
|
1398
|
+
Array.from({ length: o }).map((E, m) => {
|
|
1399
|
+
const g = m === i;
|
|
1413
1400
|
return /* @__PURE__ */ e(
|
|
1414
1401
|
U,
|
|
1415
1402
|
{
|
|
1416
1403
|
className: "mx-insights-micro-carousel-dots",
|
|
1417
1404
|
sx: {
|
|
1418
|
-
bgcolor:
|
|
1405
|
+
bgcolor: g ? c : f,
|
|
1419
1406
|
height: 8,
|
|
1420
1407
|
mr: 8,
|
|
1421
1408
|
// existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
|
|
1422
|
-
...
|
|
1409
|
+
...a ? {
|
|
1423
1410
|
borderRadius: "4px",
|
|
1424
1411
|
transformOrigin: "center",
|
|
1425
1412
|
transition: "all 0.5s ease-out",
|
|
@@ -1428,24 +1415,24 @@ const $ = u.createContext(null), Et = ({
|
|
|
1428
1415
|
borderRadius: "50%",
|
|
1429
1416
|
p: 0
|
|
1430
1417
|
},
|
|
1431
|
-
width:
|
|
1418
|
+
width: g && a ? 24 : 8
|
|
1432
1419
|
}
|
|
1433
1420
|
},
|
|
1434
|
-
`carousel-button-${
|
|
1421
|
+
`carousel-button-${m}`
|
|
1435
1422
|
);
|
|
1436
1423
|
}),
|
|
1437
1424
|
/* @__PURE__ */ e(
|
|
1438
|
-
|
|
1425
|
+
ue,
|
|
1439
1426
|
{
|
|
1440
|
-
"aria-disabled":
|
|
1441
|
-
"aria-label":
|
|
1442
|
-
disabled:
|
|
1443
|
-
onClick:
|
|
1427
|
+
"aria-disabled": C,
|
|
1428
|
+
"aria-label": _.next_insight_cta_aria,
|
|
1429
|
+
disabled: C,
|
|
1430
|
+
onClick: t,
|
|
1444
1431
|
children: /* @__PURE__ */ e(
|
|
1445
|
-
|
|
1432
|
+
ve,
|
|
1446
1433
|
{
|
|
1447
1434
|
style: {
|
|
1448
|
-
color:
|
|
1435
|
+
color: C ? f : c
|
|
1449
1436
|
}
|
|
1450
1437
|
}
|
|
1451
1438
|
)
|
|
@@ -1454,119 +1441,117 @@ const $ = u.createContext(null), Et = ({
|
|
|
1454
1441
|
]
|
|
1455
1442
|
}
|
|
1456
1443
|
);
|
|
1457
|
-
},
|
|
1444
|
+
}, St = ({
|
|
1458
1445
|
analyticsMetadata: i,
|
|
1459
1446
|
allowSingleCardPeeking: o = !1,
|
|
1460
1447
|
beats: t = [],
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
widthOverrides: m,
|
|
1448
|
+
showCTAColocatedWithText: l,
|
|
1449
|
+
heightOverrides: r,
|
|
1450
|
+
onCardClick: n,
|
|
1451
|
+
posthog: a,
|
|
1452
|
+
shouldApplyNewAnimation: h = !1,
|
|
1453
|
+
showCarouselControls: s,
|
|
1454
|
+
showIcon: _,
|
|
1455
|
+
showWithMargin: p = !0,
|
|
1456
|
+
variant: C,
|
|
1457
|
+
widthOverrides: f,
|
|
1472
1458
|
visibleCardsCount: c = 1
|
|
1473
1459
|
// Default to 1 card visible
|
|
1474
1460
|
}) => {
|
|
1475
|
-
const E = u.useRef(null),
|
|
1461
|
+
const E = u.useRef(null), m = u.useRef(null), [g, w] = u.useState(0), [A, I] = u.useState(null), [k, b] = u.useState(null), [R, x] = u.useState(null), [G, F] = u.useState(h), { carouselCopy: Y } = H(), { onEvent: B } = $();
|
|
1476
1462
|
u.useEffect(() => {
|
|
1477
1463
|
if (E.current && !o) {
|
|
1478
|
-
const
|
|
1479
|
-
let
|
|
1464
|
+
const d = E.current.offsetWidth, M = 8;
|
|
1465
|
+
let L;
|
|
1480
1466
|
if (c > 1) {
|
|
1481
|
-
const
|
|
1482
|
-
|
|
1467
|
+
const q = (d - (c - 1) * M) / c / 3;
|
|
1468
|
+
L = (d - q - (c - 1) * M) / c;
|
|
1483
1469
|
} else
|
|
1484
|
-
|
|
1485
|
-
|
|
1470
|
+
L = d;
|
|
1471
|
+
x(L);
|
|
1486
1472
|
}
|
|
1487
1473
|
}, [c, E.current?.offsetWidth]), u.useEffect(() => {
|
|
1488
|
-
const
|
|
1489
|
-
if (typeof
|
|
1490
|
-
const
|
|
1491
|
-
|
|
1492
|
-
const
|
|
1474
|
+
const d = m.current?.offsetWidth;
|
|
1475
|
+
if (typeof d == "number" && o) {
|
|
1476
|
+
const M = (Z) => {
|
|
1477
|
+
F(!0);
|
|
1478
|
+
const J = [
|
|
1493
1479
|
{ maxWidth: 375, cardWidth: 268 },
|
|
1494
1480
|
{ maxWidth: 444, cardWidth: 300 },
|
|
1495
1481
|
{ maxWidth: 599, cardWidth: 350 },
|
|
1496
1482
|
{ maxWidth: 749, cardWidth: 450 },
|
|
1497
1483
|
{ maxWidth: 900, cardWidth: 600 }
|
|
1498
|
-
].find((
|
|
1499
|
-
return
|
|
1484
|
+
].find((ae) => Z <= ae.maxWidth);
|
|
1485
|
+
return J ? J.cardWidth : 750;
|
|
1500
1486
|
};
|
|
1501
|
-
|
|
1502
|
-
const
|
|
1503
|
-
const
|
|
1504
|
-
typeof
|
|
1487
|
+
x(M(d));
|
|
1488
|
+
const L = () => {
|
|
1489
|
+
const Z = m.current?.offsetWidth;
|
|
1490
|
+
typeof Z == "number" && x(M(Z));
|
|
1505
1491
|
};
|
|
1506
|
-
return window.addEventListener("resize",
|
|
1507
|
-
window.removeEventListener("resize",
|
|
1492
|
+
return window.addEventListener("resize", L), () => {
|
|
1493
|
+
window.removeEventListener("resize", L);
|
|
1508
1494
|
};
|
|
1509
1495
|
}
|
|
1510
|
-
}, [o,
|
|
1511
|
-
const
|
|
1512
|
-
|
|
1513
|
-
left:
|
|
1496
|
+
}, [o, m]);
|
|
1497
|
+
const j = () => {
|
|
1498
|
+
B(S.ON_CAROUSEL_FORWARD_CLICK, i), E.current && R && E.current.scrollTo({
|
|
1499
|
+
left: g + R + 8,
|
|
1514
1500
|
top: 0,
|
|
1515
1501
|
behavior: "smooth"
|
|
1516
1502
|
});
|
|
1517
1503
|
}, le = () => {
|
|
1518
|
-
|
|
1519
|
-
left: Math.max(0,
|
|
1504
|
+
B(S.ON_CAROUSEL_BACK_CLICK, i), E.current && R && E.current.scrollTo({
|
|
1505
|
+
left: Math.max(0, g - (R + 8)),
|
|
1520
1506
|
top: 0,
|
|
1521
1507
|
behavior: "smooth"
|
|
1522
1508
|
});
|
|
1523
|
-
},
|
|
1524
|
-
E.current &&
|
|
1525
|
-
},
|
|
1526
|
-
if (!
|
|
1527
|
-
|
|
1528
|
-
},
|
|
1529
|
-
|
|
1530
|
-
},
|
|
1531
|
-
|
|
1532
|
-
},
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
K,
|
|
1509
|
+
}, re = () => {
|
|
1510
|
+
E.current && w(E.current.scrollLeft);
|
|
1511
|
+
}, X = () => {
|
|
1512
|
+
if (!k || !A) return;
|
|
1513
|
+
k - A > It ? B(S.ON_CAROUSEL_FORWARD_SWIPE, i) : B(S.ON_CAROUSEL_BACK_SWIPE, i);
|
|
1514
|
+
}, Q = (d) => {
|
|
1515
|
+
I(d.targetTouches[0].clientX);
|
|
1516
|
+
}, D = (d) => {
|
|
1517
|
+
I(null), b(d.targetTouches[0].clientX);
|
|
1518
|
+
}, Ee = {
|
|
1519
|
+
showCTAColocatedWithText: l,
|
|
1520
|
+
heightOverrides: r,
|
|
1521
|
+
posthog: a,
|
|
1522
|
+
showIcon: _,
|
|
1523
|
+
variant: C
|
|
1524
|
+
}, ne = R ? Math.round(g / (R + 8)) : 0, ke = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
|
|
1525
|
+
return /* @__PURE__ */ y(
|
|
1526
|
+
z,
|
|
1542
1527
|
{
|
|
1543
|
-
"aria-label":
|
|
1528
|
+
"aria-label": Y.carousel_title,
|
|
1544
1529
|
"aria-roledescription": "carousel",
|
|
1545
|
-
ref:
|
|
1530
|
+
ref: m,
|
|
1546
1531
|
role: "group/region",
|
|
1547
1532
|
sx: {
|
|
1548
1533
|
alignItems: "center",
|
|
1549
1534
|
boxSizing: "border-box",
|
|
1550
|
-
height:
|
|
1551
|
-
width:
|
|
1535
|
+
height: r,
|
|
1536
|
+
width: f || "100%"
|
|
1552
1537
|
},
|
|
1553
1538
|
children: [
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
|
|
1539
|
+
/* @__PURE__ */ y(
|
|
1540
|
+
z,
|
|
1556
1541
|
{
|
|
1557
1542
|
direction: "row",
|
|
1558
|
-
onScroll:
|
|
1559
|
-
onTouchEnd:
|
|
1560
|
-
onTouchMove:
|
|
1561
|
-
onTouchStart:
|
|
1543
|
+
onScroll: re,
|
|
1544
|
+
onTouchEnd: X,
|
|
1545
|
+
onTouchMove: Q,
|
|
1546
|
+
onTouchStart: D,
|
|
1562
1547
|
ref: E,
|
|
1563
1548
|
sx: {
|
|
1564
1549
|
alignItems: "center",
|
|
1565
|
-
height:
|
|
1550
|
+
height: r && "100%",
|
|
1566
1551
|
gap: 8,
|
|
1567
1552
|
listStyleType: "none",
|
|
1568
1553
|
m: 0,
|
|
1569
|
-
maxWidth:
|
|
1554
|
+
maxWidth: p ? "calc(100% - 32px)" : "100%",
|
|
1570
1555
|
overflowX: "auto",
|
|
1571
1556
|
overflowY: "hidden",
|
|
1572
1557
|
p: 0,
|
|
@@ -1578,67 +1563,65 @@ const $ = u.createContext(null), Et = ({
|
|
|
1578
1563
|
}
|
|
1579
1564
|
},
|
|
1580
1565
|
children: [
|
|
1581
|
-
t.map((
|
|
1582
|
-
const
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
),
|
|
1566
|
+
t.map((d, M) => {
|
|
1567
|
+
const L = M + 1, Z = t.length + 1, q = Xe(
|
|
1568
|
+
Y.card_position_in_carousel_aria,
|
|
1569
|
+
L.toString(),
|
|
1570
|
+
Z.toString()
|
|
1571
|
+
), J = d.micro_title && d.micro_title.length > 0, ae = d.micro_description && d.micro_description.length > 0, Fe = J ? d.micro_title : d.title, Be = ae ? d.micro_description : d.description;
|
|
1587
1572
|
return /* @__PURE__ */ e(
|
|
1588
|
-
|
|
1573
|
+
yt,
|
|
1589
1574
|
{
|
|
1590
|
-
ariaLabel: `${
|
|
1591
|
-
beat:
|
|
1592
|
-
index:
|
|
1593
|
-
isActiveCard:
|
|
1594
|
-
onCardClick:
|
|
1595
|
-
widthOverrides:
|
|
1596
|
-
...
|
|
1575
|
+
ariaLabel: `${q}: ${Fe}, ${Be}`,
|
|
1576
|
+
beat: d,
|
|
1577
|
+
index: M,
|
|
1578
|
+
isActiveCard: M === ne,
|
|
1579
|
+
onCardClick: n,
|
|
1580
|
+
widthOverrides: R || void 0,
|
|
1581
|
+
...Ee
|
|
1597
1582
|
},
|
|
1598
|
-
`${
|
|
1583
|
+
`${d.guid} ${M}`
|
|
1599
1584
|
);
|
|
1600
1585
|
}),
|
|
1601
1586
|
/* @__PURE__ */ e(
|
|
1602
|
-
|
|
1587
|
+
Dt,
|
|
1603
1588
|
{
|
|
1604
|
-
isActiveCard:
|
|
1605
|
-
onCardClick:
|
|
1606
|
-
widthOverrides:
|
|
1607
|
-
...
|
|
1589
|
+
isActiveCard: ne === t.length,
|
|
1590
|
+
onCardClick: n,
|
|
1591
|
+
widthOverrides: R || void 0,
|
|
1592
|
+
...Ee
|
|
1608
1593
|
}
|
|
1609
1594
|
)
|
|
1610
1595
|
]
|
|
1611
1596
|
}
|
|
1612
1597
|
),
|
|
1613
|
-
|
|
1614
|
-
|
|
1598
|
+
s && /* @__PURE__ */ e(
|
|
1599
|
+
vt,
|
|
1615
1600
|
{
|
|
1616
|
-
|
|
1617
|
-
currentBeatIndex: ae + c - 1,
|
|
1601
|
+
currentBeatIndex: ne + c - 1,
|
|
1618
1602
|
numBeats: t.length + 1,
|
|
1619
|
-
onNextClick:
|
|
1603
|
+
onNextClick: j,
|
|
1620
1604
|
onPreviousClick: le,
|
|
1621
|
-
scrollRightBoundary:
|
|
1622
|
-
scrollX:
|
|
1623
|
-
shouldApplyNewAnimation:
|
|
1605
|
+
scrollRightBoundary: ke,
|
|
1606
|
+
scrollX: g,
|
|
1607
|
+
shouldApplyNewAnimation: G,
|
|
1624
1608
|
visibleCardsCount: c
|
|
1625
1609
|
}
|
|
1626
1610
|
)
|
|
1627
1611
|
]
|
|
1628
1612
|
}
|
|
1629
1613
|
);
|
|
1630
|
-
},
|
|
1614
|
+
}, Mt = P(St), At = ({
|
|
1631
1615
|
analyticsMetadata: i,
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
widthOverrides: n
|
|
1616
|
+
onCardClick: o,
|
|
1617
|
+
posthog: t,
|
|
1618
|
+
widthOverrides: l
|
|
1636
1619
|
}) => {
|
|
1637
|
-
const { carouselCopy:
|
|
1638
|
-
|
|
1620
|
+
const { carouselCopy: r } = H(), { onEvent: n } = $(), a = () => {
|
|
1621
|
+
n && (n(S.ON_VIEW_MORE_CLICKED, i), o(), t?.capture("clicked_view_more"));
|
|
1639
1622
|
};
|
|
1640
|
-
return
|
|
1641
|
-
|
|
1623
|
+
return r ? /* @__PURE__ */ y(
|
|
1624
|
+
z,
|
|
1642
1625
|
{
|
|
1643
1626
|
alignItems: "center",
|
|
1644
1627
|
direction: "row",
|
|
@@ -1646,48 +1629,47 @@ const $ = u.createContext(null), Et = ({
|
|
|
1646
1629
|
spacing: 2,
|
|
1647
1630
|
sx: {
|
|
1648
1631
|
padding: 16,
|
|
1649
|
-
width:
|
|
1632
|
+
width: l || void 0
|
|
1650
1633
|
},
|
|
1651
1634
|
children: [
|
|
1652
1635
|
/* @__PURE__ */ e(
|
|
1653
|
-
|
|
1636
|
+
Pe,
|
|
1654
1637
|
{
|
|
1655
1638
|
sx: {
|
|
1656
|
-
color: o?.primary_300,
|
|
1657
1639
|
fontSize: 18,
|
|
1658
1640
|
fontWeight: 700,
|
|
1659
1641
|
lineHeight: "24px"
|
|
1660
1642
|
},
|
|
1661
1643
|
variant: "h3",
|
|
1662
|
-
children:
|
|
1644
|
+
children: r.carousel_title
|
|
1663
1645
|
}
|
|
1664
1646
|
),
|
|
1665
1647
|
/* @__PURE__ */ e(
|
|
1666
|
-
|
|
1648
|
+
Ze,
|
|
1667
1649
|
{
|
|
1668
|
-
endIcon: /* @__PURE__ */ e(
|
|
1669
|
-
onClick:
|
|
1650
|
+
endIcon: /* @__PURE__ */ e(ve, { size: 20 }),
|
|
1651
|
+
onClick: a,
|
|
1670
1652
|
size: "small",
|
|
1671
|
-
sx: {
|
|
1672
|
-
color:
|
|
1673
|
-
},
|
|
1653
|
+
sx: (h) => ({
|
|
1654
|
+
color: h.palette.primary.main
|
|
1655
|
+
}),
|
|
1674
1656
|
variant: "text",
|
|
1675
|
-
children:
|
|
1657
|
+
children: r.view_all_insights_in_full_feed_cta_aria
|
|
1676
1658
|
}
|
|
1677
1659
|
)
|
|
1678
1660
|
]
|
|
1679
1661
|
}
|
|
1680
1662
|
) : /* @__PURE__ */ e(Ue, {});
|
|
1681
|
-
},
|
|
1663
|
+
}, Ot = P(At), Tt = ({
|
|
1682
1664
|
heightOverrides: i,
|
|
1683
1665
|
widthOverrides: o,
|
|
1684
1666
|
children: t
|
|
1685
1667
|
}) => {
|
|
1686
|
-
const { carouselCopy:
|
|
1668
|
+
const { carouselCopy: l } = H();
|
|
1687
1669
|
return /* @__PURE__ */ e(
|
|
1688
1670
|
U,
|
|
1689
1671
|
{
|
|
1690
|
-
"aria-label":
|
|
1672
|
+
"aria-label": l?.carousel_title,
|
|
1691
1673
|
"aria-roledescription": "carousel",
|
|
1692
1674
|
role: "group",
|
|
1693
1675
|
sx: {
|
|
@@ -1699,46 +1681,44 @@ const $ = u.createContext(null), Et = ({
|
|
|
1699
1681
|
children: t
|
|
1700
1682
|
}
|
|
1701
1683
|
);
|
|
1702
|
-
},
|
|
1684
|
+
}, Ve = ({
|
|
1703
1685
|
ariaLabel: i,
|
|
1704
1686
|
carouselSize: o,
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
widthOverrides: _
|
|
1687
|
+
heightOverrides: t,
|
|
1688
|
+
onCardClick: l,
|
|
1689
|
+
posthog: r,
|
|
1690
|
+
showIcon: n,
|
|
1691
|
+
showWithMargin: a,
|
|
1692
|
+
variant: h,
|
|
1693
|
+
widthOverrides: s
|
|
1713
1694
|
}) => {
|
|
1714
|
-
const { cardsCopy:
|
|
1695
|
+
const { cardsCopy: _ } = H(), { onEvent: p } = $(), { onPageview: C } = De();
|
|
1715
1696
|
u.useEffect(() => {
|
|
1716
|
-
|
|
1697
|
+
C(V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
|
|
1717
1698
|
}, []);
|
|
1718
|
-
const
|
|
1719
|
-
|
|
1699
|
+
const f = () => {
|
|
1700
|
+
l && l(), p(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), r?.capture("clicked_insight", {
|
|
1720
1701
|
template: "no_relevant_insights"
|
|
1721
1702
|
});
|
|
1722
1703
|
};
|
|
1723
1704
|
return /* @__PURE__ */ e(
|
|
1724
|
-
|
|
1705
|
+
oe,
|
|
1725
1706
|
{
|
|
1726
|
-
actionText:
|
|
1707
|
+
actionText: _.micro_card_cta,
|
|
1727
1708
|
ariaLabel: i,
|
|
1728
|
-
description:
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
icon: /* @__PURE__ */ e(De, {}),
|
|
1709
|
+
description: _.no_relevant_insights_card_description,
|
|
1710
|
+
heightOverrides: t,
|
|
1711
|
+
icon: /* @__PURE__ */ e(xe, {}),
|
|
1732
1712
|
isZeroState: !0,
|
|
1733
|
-
onCardClick:
|
|
1734
|
-
posthog:
|
|
1735
|
-
showIcon:
|
|
1713
|
+
onCardClick: f,
|
|
1714
|
+
posthog: r,
|
|
1715
|
+
showIcon: n,
|
|
1736
1716
|
style: {
|
|
1737
1717
|
cardStyle: {
|
|
1738
1718
|
card: {
|
|
1739
|
-
height: `calc(${
|
|
1719
|
+
height: `calc(${Le[o]}px - 44px)`,
|
|
1740
1720
|
m: "0 auto",
|
|
1741
|
-
width:
|
|
1721
|
+
width: a ? "calc(100% - 32px)" : "100%"
|
|
1742
1722
|
},
|
|
1743
1723
|
description: {
|
|
1744
1724
|
WebkitLineClamp: 4
|
|
@@ -1748,40 +1728,40 @@ const $ = u.createContext(null), Et = ({
|
|
|
1748
1728
|
ml: 48
|
|
1749
1729
|
}
|
|
1750
1730
|
},
|
|
1751
|
-
title:
|
|
1752
|
-
variant:
|
|
1753
|
-
widthOverrides:
|
|
1731
|
+
title: _.no_relevant_insights_card_title,
|
|
1732
|
+
variant: h,
|
|
1733
|
+
widthOverrides: s
|
|
1754
1734
|
}
|
|
1755
1735
|
);
|
|
1756
|
-
}, li =
|
|
1736
|
+
}, li = P(Ve), He = ({
|
|
1757
1737
|
ariaLabel: i,
|
|
1758
1738
|
carouselSize: o,
|
|
1759
1739
|
heightOverrides: t,
|
|
1760
|
-
onCardClick:
|
|
1761
|
-
posthog:
|
|
1762
|
-
showIcon:
|
|
1740
|
+
onCardClick: l,
|
|
1741
|
+
posthog: r,
|
|
1742
|
+
showIcon: n,
|
|
1763
1743
|
showWithMargin: a,
|
|
1764
|
-
variant:
|
|
1765
|
-
widthOverrides:
|
|
1744
|
+
variant: h,
|
|
1745
|
+
widthOverrides: s
|
|
1766
1746
|
}) => {
|
|
1767
|
-
const { onPageview: _ } =
|
|
1747
|
+
const { onPageview: _ } = De(), { zeroStateCopy: p } = H();
|
|
1768
1748
|
return u.useEffect(() => {
|
|
1769
|
-
_(
|
|
1749
|
+
_(V.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
|
|
1770
1750
|
}, []), /* @__PURE__ */ e(
|
|
1771
|
-
|
|
1751
|
+
oe,
|
|
1772
1752
|
{
|
|
1773
1753
|
ariaLabel: i,
|
|
1774
|
-
description:
|
|
1754
|
+
description: p.carousel_zero_state_description,
|
|
1775
1755
|
heightOverrides: t,
|
|
1776
|
-
icon: /* @__PURE__ */ e(
|
|
1756
|
+
icon: /* @__PURE__ */ e(xe, {}),
|
|
1777
1757
|
isZeroState: !0,
|
|
1778
|
-
onCardClick:
|
|
1779
|
-
posthog:
|
|
1780
|
-
showIcon:
|
|
1758
|
+
onCardClick: l,
|
|
1759
|
+
posthog: r,
|
|
1760
|
+
showIcon: n,
|
|
1781
1761
|
style: {
|
|
1782
1762
|
cardStyle: {
|
|
1783
1763
|
card: {
|
|
1784
|
-
height: `calc(${
|
|
1764
|
+
height: `calc(${Le[o]}px - 44px)`,
|
|
1785
1765
|
m: "0 auto",
|
|
1786
1766
|
width: a ? "calc(100% - 32px)" : "100%"
|
|
1787
1767
|
},
|
|
@@ -1790,12 +1770,12 @@ const $ = u.createContext(null), Et = ({
|
|
|
1790
1770
|
}
|
|
1791
1771
|
}
|
|
1792
1772
|
},
|
|
1793
|
-
title:
|
|
1794
|
-
variant:
|
|
1795
|
-
widthOverrides:
|
|
1773
|
+
title: p.carousel_zero_state_title,
|
|
1774
|
+
variant: h,
|
|
1775
|
+
widthOverrides: s
|
|
1796
1776
|
}
|
|
1797
1777
|
);
|
|
1798
|
-
},
|
|
1778
|
+
}, ri = P(He), Wt = () => /* @__PURE__ */ e(
|
|
1799
1779
|
U,
|
|
1800
1780
|
{
|
|
1801
1781
|
sx: {
|
|
@@ -1805,148 +1785,142 @@ const $ = u.createContext(null), Et = ({
|
|
|
1805
1785
|
justifyContent: "center",
|
|
1806
1786
|
width: "100%"
|
|
1807
1787
|
},
|
|
1808
|
-
children: /* @__PURE__ */ e(
|
|
1788
|
+
children: /* @__PURE__ */ e(Qe, {})
|
|
1809
1789
|
}
|
|
1810
|
-
),
|
|
1790
|
+
), N = new dt(), wt = ({
|
|
1811
1791
|
allowSingleCardPeeking: i,
|
|
1812
1792
|
areBeatsLoading: o,
|
|
1813
1793
|
beats: t = [],
|
|
1814
1794
|
// This also determines the length of the carousel controls (beat.length + 1)
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
logOutUser: d,
|
|
1821
|
-
onCardClick: p = () => {
|
|
1795
|
+
showCTAColocatedWithText: l = !0,
|
|
1796
|
+
endpoint: r = "/",
|
|
1797
|
+
heightOverrides: n,
|
|
1798
|
+
logOutUser: a,
|
|
1799
|
+
onCardClick: h = () => {
|
|
1822
1800
|
},
|
|
1823
|
-
onEvent:
|
|
1801
|
+
onEvent: s = () => {
|
|
1824
1802
|
},
|
|
1825
|
-
onPageview:
|
|
1803
|
+
onPageview: _ = () => {
|
|
1826
1804
|
},
|
|
1827
|
-
posthog:
|
|
1828
|
-
shouldApplyNewAnimation:
|
|
1829
|
-
showBorder:
|
|
1805
|
+
posthog: p,
|
|
1806
|
+
shouldApplyNewAnimation: C = !1,
|
|
1807
|
+
showBorder: f = !0,
|
|
1830
1808
|
showCarouselControls: c,
|
|
1831
1809
|
showHeader: E,
|
|
1832
|
-
showIcon:
|
|
1833
|
-
showWithMargin:
|
|
1834
|
-
token:
|
|
1835
|
-
useDarkMode:
|
|
1836
|
-
userHasFullInsightFeedBeats:
|
|
1837
|
-
variant:
|
|
1838
|
-
visibleCardsCount:
|
|
1839
|
-
widthOverrides:
|
|
1810
|
+
showIcon: m,
|
|
1811
|
+
showWithMargin: g = !0,
|
|
1812
|
+
token: w = "",
|
|
1813
|
+
useDarkMode: A,
|
|
1814
|
+
userHasFullInsightFeedBeats: I,
|
|
1815
|
+
variant: k,
|
|
1816
|
+
visibleCardsCount: b = 1,
|
|
1817
|
+
widthOverrides: R
|
|
1840
1818
|
}) => {
|
|
1841
|
-
const [
|
|
1819
|
+
const [x, G] = ee("STANDARD"), [F, Y] = ee(!1), [B, j] = ee(!1), le = Je([s], N), re = et([_], N);
|
|
1842
1820
|
u.useEffect(() => {
|
|
1843
|
-
!
|
|
1844
|
-
}, [
|
|
1845
|
-
const
|
|
1846
|
-
|
|
1821
|
+
!N.isInitialized && !B && (N.initialize(r, w, a).catch(() => j(!1)), j(!0));
|
|
1822
|
+
}, [r, w, a, N.isInitialized, B]), u.useEffect(() => {
|
|
1823
|
+
const D = window.innerHeight;
|
|
1824
|
+
D < 180 ? G("STANDARD") : D >= 180 && D < 200 ? G("LARGE") : D >= 200 && D < 248 ? G("XLARGE") : D >= 248 && G("XXLARGE");
|
|
1847
1825
|
}, [window.innerHeight]), u.useEffect(() => {
|
|
1848
|
-
|
|
1849
|
-
}, [o,
|
|
1850
|
-
const
|
|
1851
|
-
showCTAColocatedWithText:
|
|
1852
|
-
heightOverrides:
|
|
1853
|
-
onCardClick:
|
|
1854
|
-
posthog:
|
|
1855
|
-
showIcon:
|
|
1856
|
-
showWithMargin:
|
|
1857
|
-
useDarkMode:
|
|
1858
|
-
widthOverrides:
|
|
1859
|
-
},
|
|
1860
|
-
carouselSize:
|
|
1861
|
-
variant:
|
|
1862
|
-
...
|
|
1826
|
+
Y(!o && N.isInitialized);
|
|
1827
|
+
}, [o, N.isInitialized]);
|
|
1828
|
+
const X = {
|
|
1829
|
+
showCTAColocatedWithText: l,
|
|
1830
|
+
heightOverrides: n,
|
|
1831
|
+
onCardClick: h,
|
|
1832
|
+
posthog: p,
|
|
1833
|
+
showIcon: m,
|
|
1834
|
+
showWithMargin: g,
|
|
1835
|
+
useDarkMode: A,
|
|
1836
|
+
widthOverrides: R
|
|
1837
|
+
}, Q = {
|
|
1838
|
+
carouselSize: x,
|
|
1839
|
+
variant: k,
|
|
1840
|
+
...X
|
|
1863
1841
|
};
|
|
1864
|
-
return /* @__PURE__ */ e(
|
|
1865
|
-
!
|
|
1866
|
-
|
|
1867
|
-
|
|
1842
|
+
return /* @__PURE__ */ e(ht, { onEvent: le, onPageview: re, store: N, children: /* @__PURE__ */ y(Tt, { heightOverrides: n, widthOverrides: R, children: [
|
|
1843
|
+
!F && /* @__PURE__ */ e(Wt, {}),
|
|
1844
|
+
F && E && /* @__PURE__ */ e(
|
|
1845
|
+
Ot,
|
|
1868
1846
|
{
|
|
1869
|
-
analyticsMetadata:
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
widthOverrides: g
|
|
1847
|
+
analyticsMetadata: Ce,
|
|
1848
|
+
onCardClick: h,
|
|
1849
|
+
posthog: p,
|
|
1850
|
+
widthOverrides: R
|
|
1874
1851
|
}
|
|
1875
1852
|
),
|
|
1876
|
-
|
|
1877
|
-
|
|
1853
|
+
F && !!t.length && /* @__PURE__ */ e(
|
|
1854
|
+
Mt,
|
|
1878
1855
|
{
|
|
1879
1856
|
allowSingleCardPeeking: i,
|
|
1880
|
-
analyticsMetadata:
|
|
1857
|
+
analyticsMetadata: Ce,
|
|
1881
1858
|
beats: t,
|
|
1882
|
-
|
|
1883
|
-
shouldApplyNewAnimation: h,
|
|
1859
|
+
shouldApplyNewAnimation: C,
|
|
1884
1860
|
showCarouselControls: c,
|
|
1885
|
-
variant:
|
|
1886
|
-
visibleCardsCount:
|
|
1887
|
-
...
|
|
1861
|
+
variant: f ? k : void 0,
|
|
1862
|
+
visibleCardsCount: b,
|
|
1863
|
+
...X
|
|
1888
1864
|
}
|
|
1889
1865
|
),
|
|
1890
|
-
|
|
1891
|
-
|
|
1866
|
+
F && !t.length && I && /* @__PURE__ */ e(Ve, { ...Q }),
|
|
1867
|
+
F && !t.length && !I && /* @__PURE__ */ e(He, { ...Q })
|
|
1892
1868
|
] }) });
|
|
1893
|
-
},
|
|
1869
|
+
}, ni = P(wt), xt = ({
|
|
1894
1870
|
isActiveCard: i,
|
|
1895
1871
|
ariaLabel: o,
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
widthOverrides: p
|
|
1872
|
+
heightOverrides: t,
|
|
1873
|
+
onCardClick: l,
|
|
1874
|
+
posthog: r,
|
|
1875
|
+
showIcon: n,
|
|
1876
|
+
variant: a,
|
|
1877
|
+
widthOverrides: h
|
|
1903
1878
|
}) => {
|
|
1904
|
-
const
|
|
1905
|
-
threshold:
|
|
1906
|
-
}), { cardsCopy:
|
|
1907
|
-
|
|
1908
|
-
|
|
1879
|
+
const s = ce(), { ref: _, inView: p } = Se({
|
|
1880
|
+
threshold: Ne
|
|
1881
|
+
}), { cardsCopy: C } = H(), { onEvent: f } = $();
|
|
1882
|
+
ie(() => {
|
|
1883
|
+
p && (f(we.ON_VIEW_MORE_VIEWED), r?.capture("viewed_insight", {
|
|
1909
1884
|
template: "view_more_card"
|
|
1910
1885
|
}));
|
|
1911
|
-
}, [
|
|
1886
|
+
}, [p]);
|
|
1912
1887
|
const c = () => {
|
|
1913
|
-
|
|
1888
|
+
l && l(), f(S.ON_VIEW_MORE_CLICKED), r?.capture("clicked_insight", {
|
|
1914
1889
|
template: "view_more_card"
|
|
1915
1890
|
});
|
|
1916
1891
|
};
|
|
1917
1892
|
return /* @__PURE__ */ e(
|
|
1918
|
-
|
|
1893
|
+
oe,
|
|
1919
1894
|
{
|
|
1920
|
-
actionText:
|
|
1895
|
+
actionText: C.micro_card_cta,
|
|
1921
1896
|
ariaLabel: o,
|
|
1922
|
-
description:
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? _.palette.primary.main }),
|
|
1897
|
+
description: C.view_more_card_description,
|
|
1898
|
+
heightOverrides: t,
|
|
1899
|
+
icon: /* @__PURE__ */ e(Ct, { color: s.palette.primary.main }),
|
|
1926
1900
|
isActiveCard: i,
|
|
1927
1901
|
onCardClick: c,
|
|
1928
|
-
posthog:
|
|
1929
|
-
ref:
|
|
1930
|
-
showIcon:
|
|
1931
|
-
title:
|
|
1932
|
-
variant:
|
|
1933
|
-
widthOverrides:
|
|
1902
|
+
posthog: r,
|
|
1903
|
+
ref: _,
|
|
1904
|
+
showIcon: n,
|
|
1905
|
+
title: C.view_more_card_title,
|
|
1906
|
+
variant: a,
|
|
1907
|
+
widthOverrides: h
|
|
1934
1908
|
}
|
|
1935
1909
|
);
|
|
1936
|
-
},
|
|
1910
|
+
}, Dt = P(xt);
|
|
1937
1911
|
export {
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1912
|
+
dt as A,
|
|
1913
|
+
yt as B,
|
|
1914
|
+
Ot as C,
|
|
1915
|
+
ht as I,
|
|
1916
|
+
Mt as M,
|
|
1943
1917
|
li as N,
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1918
|
+
Ce as T,
|
|
1919
|
+
Dt as V,
|
|
1920
|
+
ri as Z,
|
|
1921
|
+
oe as a,
|
|
1922
|
+
ni as b,
|
|
1923
|
+
Ct as c,
|
|
1924
|
+
Rt as d,
|
|
1925
|
+
xe as e
|
|
1952
1926
|
};
|