@everymatrix/casino-challenge-details 0.9.27 → 0.9.29

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 (22) hide show
  1. package/dist/casino-challenge-details/casino-challenge-details-8f737e06.js +7 -0
  2. package/dist/casino-challenge-details/casino-challenge-details_4.entry.js +1 -1
  3. package/dist/casino-challenge-details/index.esm.js +1 -1
  4. package/dist/cjs/{casino-challenge-details-df1d40f7.js → casino-challenge-details-8c125023.js} +601 -302
  5. package/dist/cjs/casino-challenge-details_4.cjs.entry.js +5 -10
  6. package/dist/cjs/index.cjs.js +1 -1
  7. package/dist/collection/assets/slot-machine.svg +39 -0
  8. package/dist/collection/assets/sportsbook.svg +46 -0
  9. package/dist/collection/components/casino-challenge-details/casino-challenge-details.css +66 -5
  10. package/dist/collection/components/casino-challenge-details/casino-challenge-details.js +411 -260
  11. package/dist/collection/components/components/casino-challenge-progress-bar.css +17 -11
  12. package/dist/collection/components/components/casino-challenge-progress-bar.js +3 -7
  13. package/dist/collection/utils/locale.utils.js +152 -42
  14. package/dist/collection/utils/types.js +36 -0
  15. package/dist/esm/{casino-challenge-details-252d9b9c.js → casino-challenge-details-8f737e06.js} +601 -302
  16. package/dist/esm/casino-challenge-details_4.entry.js +6 -11
  17. package/dist/esm/index.js +1 -1
  18. package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts +49 -31
  19. package/dist/types/utils/types.d.ts +77 -2
  20. package/package.json +1 -1
  21. package/dist/casino-challenge-details/casino-challenge-details-252d9b9c.js +0 -7
  22. package/dist/collection/assets/trophy.svg +0 -14
package/dist/collection/components/casino-challenge-details/casino-challenge-details.js CHANGED
@@ -12,19 +12,114 @@ import infoIcon from "../../assets/info-circle.svg";
12
12
  import titleIcon from "../../assets/title-icon.svg";
13
13
  import notificationIcon from "../../assets/notification.svg";
14
14
  import { EventSourcePolyfill } from "event-source-polyfill";
15
- import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus, EWalletTypes } from "../../utils/types";
15
+ import sportsbookIcon from "../../assets/sportsbook.svg";
16
+ import casinoIcon from "../../assets/slot-machine.svg";
17
+ import { ChallengeStatusDictionary, EBanker, EBetBuilder, EBetType, EChallengeLevelTargetType, EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus, EContributedFrom, EDetailsTabs, EMatchType, EWalletTypes } from "../../utils/types";
16
18
  export class CasinoChallengeDetails {
17
19
  constructor() {
18
20
  this.activeEntityRef = null;
19
21
  this.scrollContainerRef = null;
20
22
  this.challengesTabs = ['Active', 'Pending', 'Finished', 'Code'];
21
- this.tabs = ['LEVELS', 'GAMES', 'RULES'];
23
+ this.tabOptions = {
24
+ casino: ['LEVELS', 'GAMES', 'RULES'],
25
+ sportsbook: ['LEVELS', 'EVENTS', 'RULES']
26
+ };
22
27
  this.showNotification = 10;
23
28
  this.abortController = new AbortController();
29
+ this.currentFetchGamesId = 0;
30
+ this.currentFetchChallengeId = 0;
31
+ this.infinity = '∞';
32
+ this.maxSelections = 999;
33
+ this.nonValue = 'undefined';
34
+ this.scrollToActiveLevel = () => {
35
+ if (this.activeEntityRef) {
36
+ const container = this.scrollContainerRef;
37
+ const target = this.activeEntityRef;
38
+ const containerTop = container.getBoundingClientRect().top;
39
+ const targetTop = target.getBoundingClientRect().top;
40
+ const scrollOffset = targetTop - containerTop;
41
+ container.scrollTo({
42
+ top: container.scrollTop + scrollOffset - container.clientHeight / 2 + target.clientHeight / 2,
43
+ behavior: 'smooth'
44
+ });
45
+ }
46
+ };
24
47
  this.checkIsMobile = () => {
25
48
  this.isMobile = window.innerWidth <= 768;
26
49
  };
27
- this.currentFetchChallengeId = 0;
50
+ this.updateChallengeViewedStatus = () => {
51
+ if (!this.checkAttrs()) {
52
+ const url = `${this.endpoint}/challenge/ChangeProgressIsNewStatus`;
53
+ const body = {
54
+ DomainId: this.domain,
55
+ ChallengeProgressId: this.challenge.Id
56
+ };
57
+ return fetch(url, {
58
+ method: 'POST',
59
+ headers: {
60
+ 'Content-Type': 'application/json'
61
+ },
62
+ body: JSON.stringify(body)
63
+ })
64
+ .then((res) => res.json())
65
+ .then((res) => {
66
+ if (res.Success) {
67
+ this.challenge.IsNew = false;
68
+ }
69
+ });
70
+ }
71
+ };
72
+ this.getChallenge = () => {
73
+ if (!this.checkAttrs()) {
74
+ this.currentFetchChallengeId++;
75
+ const fetchId = this.currentFetchChallengeId;
76
+ if (this.abortController) {
77
+ this.abortController.abort();
78
+ }
79
+ this.abortController = new AbortController();
80
+ const signal = this.abortController.signal;
81
+ const url = `${this.endpoint}/challenge/GetChallengesInfo`;
82
+ const body = Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 0, PageSize: 20 }, (this.session && { PlayerSession: this.session }));
83
+ this.loading = true;
84
+ return fetch(url, {
85
+ method: 'POST',
86
+ headers: {
87
+ 'Content-Type': 'application/json'
88
+ },
89
+ signal,
90
+ body: JSON.stringify(body)
91
+ })
92
+ .then((res) => res.json())
93
+ .then((res) => {
94
+ var _a;
95
+ if (res.Success) {
96
+ const challenge = (_a = res === null || res === void 0 ? void 0 : res.Data) === null || _a === void 0 ? void 0 : _a.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.ChallengeId) === this.challengeId);
97
+ if (challenge) {
98
+ this.challenge = challenge;
99
+ this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
100
+ if (this.challenge.IsNew) {
101
+ this.updateChallengeViewedStatus();
102
+ }
103
+ }
104
+ else if (this.redirectIfNotFound) {
105
+ this.goBack();
106
+ }
107
+ }
108
+ })
109
+ .finally(() => {
110
+ if (fetchId === this.currentFetchChallengeId) {
111
+ this.loading = false;
112
+ }
113
+ });
114
+ }
115
+ };
116
+ this.getReward = (level) => {
117
+ return level.CustomRewardMessage || '-';
118
+ };
119
+ this.getTarget = (level) => {
120
+ var _a;
121
+ return this.calculateTargetValue(level, (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.CurrencySymbol) || '-';
122
+ };
28
123
  this.calculateTargetValue = (level, currencySymbol) => {
29
124
  var _a;
30
125
  if (!level)
@@ -46,6 +141,17 @@ export class CasinoChallengeDetails {
46
141
  }
47
142
  }
48
143
  };
144
+ this.updateTime = () => {
145
+ var _a, _b;
146
+ if (this.challenge) {
147
+ this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
148
+ if (!this.timeLeft && this.timerExpired) {
149
+ clearInterval(this.timerId);
150
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Expired });
151
+ this.timerExpired.emit((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Id);
152
+ }
153
+ }
154
+ };
49
155
  this.getBadgeContent = () => {
50
156
  var _a;
51
157
  if (this.challenge) {
@@ -88,6 +194,12 @@ export class CasinoChallengeDetails {
88
194
  }
89
195
  return this.hasError;
90
196
  };
197
+ this.openLoginRegisterModal = () => {
198
+ window.postMessage({
199
+ type: 'OpenLoginRegisterModal',
200
+ transition: 'Login'
201
+ });
202
+ };
91
203
  this.joinUnjoinProgress = async () => {
92
204
  var _a, _b;
93
205
  if (!this.isUserAuthorized) {
@@ -120,15 +232,17 @@ export class CasinoChallengeDetails {
120
232
  .finally(() => (this.actionLoading = false));
121
233
  }
122
234
  };
123
- this.currentFetchGamesId = 0;
124
235
  this.handleTabClick = (index) => () => {
125
- if (index === 0) {
236
+ var _a;
237
+ if (index === EDetailsTabs.Levels) {
126
238
  setTimeout(() => {
127
239
  this.scrollToActiveLevel();
128
240
  }, 0);
129
241
  }
130
- if (index === 1) {
131
- this.fetchGames();
242
+ if (index === EDetailsTabs.GamesOrEvents) {
243
+ if (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedFrom) === EContributedFrom.Casino) {
244
+ this.fetchGames();
245
+ }
132
246
  }
133
247
  this.activeTabIndex = index;
134
248
  };
@@ -138,6 +252,141 @@ export class CasinoChallengeDetails {
138
252
  this.getBackButtonText = () => {
139
253
  return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
140
254
  };
255
+ this.getLevelStatus = (level, active) => {
256
+ if (this.isUserAuthorized) {
257
+ if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && !active)
258
+ return (h("div", { class: "level__status" }, h("span", null, Math.floor(level.ProgressPercentage), "%"), h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
259
+ else if (level.ProgressStatus === EChallengeProgressLevelStatus.Closed || !active)
260
+ return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
261
+ else if (level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
262
+ return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
263
+ else if (level.ProgressStatus === EChallengeProgressLevelStatus.Completed)
264
+ return h("span", { class: "completed" }, translate('completed', this.language));
265
+ else if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)
266
+ return h("span", { class: "level__status in-progress" }, Math.floor(level.ProgressPercentage), "%");
267
+ }
268
+ return null;
269
+ };
270
+ this.pageHeader = () => {
271
+ return (h("div", { class: "challenges-header" }, h("h1", { class: "challenges-title" }, h("img", { src: titleIcon, alt: "icon" }), translate('title', this.language)), this.isUserAuthorized && (h("div", { class: "challenges-tabs" }, this.challengesTabs.map((label, index) => (h("div", { class: `challenges-tab ${index === +this.activeChallengeTabIndex ? 'active' : ''}`, onClick: this.handleChallengesTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))));
272
+ };
273
+ this.cardGeneralInfo = () => {
274
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
275
+ const showButton = !(((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused ||
276
+ ((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Forfeited ||
277
+ ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeProgressStatus.Completed ||
278
+ ((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeProgressStatus.Expired);
279
+ return (h("div", { class: "details__general-info" }, h("div", { class: "details__general-info-image-container" }, h("img", { class: {
280
+ 'details__general-info-image': true,
281
+ grayed: [
282
+ EChallengeProgressStatus.Expired,
283
+ EChallengeProgressStatus.Forfeited,
284
+ EChallengeProgressStatus.Completed
285
+ ].includes((_e = this.challenge) === null || _e === void 0 ? void 0 : _e.Status) || this.isChallengePaused
286
+ }, src: (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.BannerUrl, alt: "banner-image", title: "banner-image" }), this.getCardBadge()), h("div", { class: "details__general-info-content" }, h("h1", { class: "details__general-info-title" }, (_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 :
287
+ _j.PresentationName, this.renderCardIcon()), h("h3", { class: "details__general-info-end-date_label" }, translate('endDate', this.language), " -", ' ', h("span", { class: "details__general-info-end-date_value" }, this.challenge ? formatDate((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ExpirationTime) : '-')), h("casino-challenge-progress-bar", { challenge: this.challenge, isUserAuthorized: this.isUserAuthorized, language: this.language }), showButton && (h("button", { class: {
288
+ 'details__general-info-action-button': true,
289
+ filled: ((_l = this.challenge) === null || _l === void 0 ? void 0 : _l.Status) === EChallengeProgressStatus.Started,
290
+ grayed: ((_m = this.challenge) === null || _m === void 0 ? void 0 : _m.Status) === EChallengeProgressStatus.Paused ||
291
+ ((_o = this.challenge) === null || _o === void 0 ? void 0 : _o.Status) === EChallengeProgressStatus.InProgress ||
292
+ ((_p = this.challenge) === null || _p === void 0 ? void 0 : _p.Status) === EChallengeProgressStatus.PendingLevelReward
293
+ }, disabled: this.actionLoading, onClick: this.joinUnjoinProgress }, translate(this.actionButtonText, this.language))))));
294
+ };
295
+ this.challengeTabs = () => {
296
+ var _a;
297
+ const isSportsbook = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedFrom) === EContributedFrom.Sportsbook;
298
+ const tabs = isSportsbook ? this.tabOptions.sportsbook : this.tabOptions.casino;
299
+ return (h("div", { class: "details__tabs" }, tabs.map((label, index) => (h("div", { class: {
300
+ details__tab: true,
301
+ active: index === this.activeTabIndex
302
+ }, onClick: this.handleTabClick(index) }, label))), h("div", { class: "active-tab-indicator" })));
303
+ };
304
+ this.challengeTabContent = () => {
305
+ var _a;
306
+ switch (this.activeTabIndex) {
307
+ case EDetailsTabs.Levels:
308
+ return this.levelsTab();
309
+ case EDetailsTabs.GamesOrEvents:
310
+ if (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedFrom) === EContributedFrom.Sportsbook) {
311
+ return this.eventsTab();
312
+ }
313
+ return this.gamesTab();
314
+ case EDetailsTabs.Rules:
315
+ return this.rulesTab();
316
+ }
317
+ };
318
+ this.levelsTab = () => {
319
+ var _a, _b;
320
+ return (h("div", { class: "levels__tab", ref: (el) => (this.scrollContainerRef = el) }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses) === null || _b === void 0 ? void 0 : _b.map((level, index) => {
321
+ var _a;
322
+ const activeChallenge = [0, 1, 2, 3].includes((_a = this === null || this === void 0 ? void 0 : this.challenge) === null || _a === void 0 ? void 0 : _a.Status) && !this.isChallengePaused;
323
+ const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressLevelStatus.InProgress) ||
324
+ !activeChallenge;
325
+ const isActiveMatch = level.ProgressStatus === EChallengeProgressLevelStatus.InProgress;
326
+ return (h("div", { class: {
327
+ level: true,
328
+ active: this.isUserAuthorized &&
329
+ activeChallenge &&
330
+ level.ProgressStatus === EChallengeProgressLevelStatus.InProgress,
331
+ completed: this.isUserAuthorized &&
332
+ activeChallenge &&
333
+ level.ProgressStatus === EChallengeProgressLevelStatus.Completed,
334
+ grayed: this.isUserAuthorized &&
335
+ (level.ProgressStatus === EChallengeProgressLevelStatus.Closed ||
336
+ level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
337
+ }, ref: isActiveMatch ? (el) => (this.activeEntityRef = el) : undefined, key: level.LevelId }, h("div", { class: {
338
+ level__title: true,
339
+ grayed: isGrayed
340
+ } }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && (h("div", { class: "level__progress" }, h("casino-challenge-level-progress-bar", { height: "8px", value: level.ProgressPercentage, active: activeChallenge }))), h("casino-challenge-expandable-paragraph", { "max-height": "56", active: level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && activeChallenge }, h("div", { class: {
341
+ level__bonus: true,
342
+ grayed: isGrayed
343
+ } }, h("span", { class: "level__icon" }, h("img", { class: {
344
+ grayed: isGrayed
345
+ }, src: giftIcon, alt: "gift-icon", title: "gift-icon" })), h("span", { class: {
346
+ level__value: true,
347
+ grayed: isGrayed
348
+ } }, this.getReward(level))), h("div", { class: {
349
+ level__target: true,
350
+ grayed: isGrayed
351
+ } }, h("span", { class: "level__icon" }, h("img", { class: {
352
+ grayed: isGrayed
353
+ }, src: targetIcon, alt: "target-icon", title: "target-icon" })), h("span", { class: {
354
+ level__value: true,
355
+ grayed: isGrayed
356
+ } }, this.getTarget(level))))));
357
+ })));
358
+ };
359
+ this.gamesTab = () => {
360
+ var _a;
361
+ return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : ((_a = this.games) === null || _a === void 0 ? void 0 : _a.map((game) => {
362
+ return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.Thumbnail, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
363
+ }))));
364
+ };
365
+ this.renderEventRule = (rule) => {
366
+ var _a, _b, _c, _d, _e;
367
+ const value = [
368
+ (_a = rule === null || rule === void 0 ? void 0 : rule.Discipline) === null || _a === void 0 ? void 0 : _a.Name,
369
+ (_b = rule === null || rule === void 0 ? void 0 : rule.Location) === null || _b === void 0 ? void 0 : _b.Name,
370
+ (_c = rule === null || rule === void 0 ? void 0 : rule.Template) === null || _c === void 0 ? void 0 : _c.Name,
371
+ (_d = rule === null || rule === void 0 ? void 0 : rule.Tournament) === null || _d === void 0 ? void 0 : _d.Name,
372
+ (_e = rule === null || rule === void 0 ? void 0 : rule.Event) === null || _e === void 0 ? void 0 : _e.Name
373
+ ]
374
+ .filter((x) => !!x)
375
+ .join(', ');
376
+ return (h("p", { class: "event" }, `${value} - ${rule.ContributionPercent}% `, h("span", null, translate('contribution', this.language))));
377
+ };
378
+ this.eventsTab = () => {
379
+ var _a, _b, _c;
380
+ const sortedRules = (_c = (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.SportSettings) === null || _b === void 0 ? void 0 : _b.EventRules) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.OrderNumber - b.OrderNumber);
381
+ return (h("div", { class: "events__tab" }, sortedRules === null || sortedRules === void 0 ? void 0 : sortedRules.map((rule) => {
382
+ if (rule.OrderNumber === 0) {
383
+ return (h("p", { class: "event" }, translate('defaultRule', this.language) + `${rule.ContributionPercent}% `, h("span", null, translate('contribution', this.language))));
384
+ }
385
+ else {
386
+ return this.renderEventRule(rule);
387
+ }
388
+ })));
389
+ };
141
390
  this.getContributionRule = (isContributeToOne) => {
142
391
  if (isContributeToOne) {
143
392
  return translate('isContributeToOne', this.language);
@@ -158,6 +407,92 @@ export class CasinoChallengeDetails {
158
407
  }
159
408
  return '';
160
409
  };
410
+ this.getSportsbookContributionType = (contributedBy) => {
411
+ switch (contributedBy) {
412
+ case EWalletTypes.BonusMoney:
413
+ return translate('sportsbookBonusMoney', this.language);
414
+ case EWalletTypes.RealCash:
415
+ return translate('sportsbookRealMoney', this.language);
416
+ case EWalletTypes.Mixed:
417
+ return translate('sportsbookMixMoney', this.language);
418
+ default:
419
+ return '';
420
+ }
421
+ };
422
+ this.getSportsbookMatchType = (matchType) => {
423
+ switch (matchType) {
424
+ case EMatchType.Live:
425
+ return translate('liveMatchType', this.language);
426
+ case EMatchType.Any:
427
+ return translate('mixMatchType', this.language);
428
+ case EMatchType.PreLive:
429
+ return translate('preLiveMatchType', this.language);
430
+ default:
431
+ return '';
432
+ }
433
+ };
434
+ this.getSportsbookBetBuilder = (betBuilder) => {
435
+ switch (betBuilder) {
436
+ case EBetBuilder.BetBuilderOnly:
437
+ return translate('betBuilder', this.language);
438
+ case EBetBuilder.Any:
439
+ return translate('mixBetBuilder', this.language);
440
+ case EBetBuilder.NotBetBuilderOnly:
441
+ return translate('nonBetBuilder', this.language);
442
+ default:
443
+ return '';
444
+ }
445
+ };
446
+ this.getSportsbookBanker = (banker) => {
447
+ switch (banker) {
448
+ case EBanker.BankerOnly:
449
+ return translate('banker', this.language);
450
+ case EBanker.Any:
451
+ return translate('mixBanker', this.language);
452
+ case EBanker.NotBankerOnly:
453
+ return translate('nonBanker', this.language);
454
+ default:
455
+ return '';
456
+ }
457
+ };
458
+ this.renderOddsLabel = (labelKey, total) => (h("span", null, translate(labelKey, this.language), ": ", this.renderOddsValue(total)));
459
+ this.renderOddsValue = (total) => {
460
+ var _a, _b, _c, _d;
461
+ if (!total)
462
+ return this.nonValue;
463
+ return (h("span", { class: "rule__title__value" }, `${(_b = (_a = total.MinOdds) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : '0'} - `, (_d = (_c = total.MaxOdds) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : h("strong", { class: "infinity" }, this.infinity)));
464
+ };
465
+ this.renderSingleBetType = () => {
466
+ return (h("div", null, h("h3", { class: "rule__title" }, translate('single', this.language)), this.renderOddsLabel('totalOdds', this.challenge.SportSettings.TotalOddsRangeSingle)));
467
+ };
468
+ this.renderMultipleBetType = () => {
469
+ const betBuilder = this.getSportsbookBetBuilder(this.challenge.SportSettings.BetBuilder);
470
+ const formatedSelectionAmount = this.formatSelectionRange(this.challenge.SportSettings.SelectionsAmountRangeMultiple, this.challenge.SportSettings.BetBuilder === EBetBuilder.NotBetBuilderOnly ? '2' : '1');
471
+ return (h("div", null, h("h3", { class: "rule__title" }, translate('multi', this.language)), h("span", null, betBuilder), h("br", null), h("span", null, this.renderOddsLabel('totalOdds', this.challenge.SportSettings.TotalOddsRangeMultiple), h("br", null)), h("span", null, translate('selections', this.language), ": ", formatedSelectionAmount), h("br", null), h("span", null, this.renderOddsLabel('oddsPerSection', this.challenge.SportSettings.OddsPerSelectionRangeMultiple), h("br", null))));
472
+ };
473
+ this.renderSystemBetType = () => {
474
+ const banker = this.getSportsbookBanker(this.challenge.SportSettings.Banker);
475
+ const formatedSelectionAmount = this.formatSelectionRange(this.challenge.SportSettings.SelectionsAmountRangeSystem, '3');
476
+ return (h("div", null, h("h3", { class: "rule__title" }, translate('system', this.language)), h("span", null, banker), h("br", null), this.renderOddsLabel('totalOdds', this.challenge.SportSettings.TotalOddsRangeSystem), h("br", null), h("span", null, translate('selections', this.language), ": ", formatedSelectionAmount), h("br", null), this.renderOddsLabel('oddsPerSection', this.challenge.SportSettings.OddsPerSelectionRangeSystem), " ", h("br", null)));
477
+ };
478
+ this.renderSportsbookRules = () => {
479
+ var _a;
480
+ if (!((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.SportSettings)) {
481
+ return;
482
+ }
483
+ const { SportSettings, ContributedBy } = this.challenge;
484
+ const { MatchType, BetTypes } = SportSettings;
485
+ const contributionType = this.getSportsbookContributionType(ContributedBy);
486
+ const matchType = this.getSportsbookMatchType(MatchType);
487
+ return (h("div", { class: "sportsbook-rules" }, h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('fundsUsed', this.language)), h("span", null, contributionType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleMatchTypes', this.language)), h("span", null, matchType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleBetTypes', this.language)), h("div", { class: "rule__inners" }, BetTypes.includes(EBetType.Single) && this.renderSingleBetType(), BetTypes.includes(EBetType.Multiple) && this.renderMultipleBetType(), BetTypes.includes(EBetType.System) && this.renderSystemBetType()))));
488
+ };
489
+ this.rulesTab = () => {
490
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
491
+ const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
492
+ const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
493
+ const isSportsbook = ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ContributedFrom) === EContributedFrom.Sportsbook;
494
+ return (h("div", { class: "rules__tab" }, ((_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.Description) && (h("div", { class: "rule" }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.Description)), !isSportsbook && (h("div", null, contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule))), ((_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.Url) && (h("a", { class: "link", href: (_l = (_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ChallengePresentation) === null || _l === void 0 ? void 0 : _l.Url, target: "_blank" }, translate('terms', this.language))), isSportsbook && this.renderSportsbookRules()));
495
+ };
161
496
  this.footer = () => {
162
497
  var _a, _b, _c, _d, _e, _f, _g, _h;
163
498
  const showButton = !(((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused ||
@@ -176,6 +511,18 @@ export class CasinoChallengeDetails {
176
511
  ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) === EChallengeProgressStatus.PendingLevelReward)
177
512
  }, onClick: this.joinUnjoinProgress, disabled: this.actionLoading }, translate(this.actionButtonText, this.language))));
178
513
  };
514
+ this.forfeitedNofitication = () => {
515
+ var _a;
516
+ return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 5 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: alertIcon }), h("span", { class: "notification__message" }, translate('forfeitNotification', this.language)))));
517
+ };
518
+ this.completedNotification = () => {
519
+ var _a;
520
+ return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 3 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: checkIcon }), h("div", { class: "notification__column" }, h("span", { class: "notification__title" }, translate('congrats', this.language)), h("span", { class: "notification__message" }, translate('completedNofitication', this.language))))));
521
+ };
522
+ this.expiredNotification = () => {
523
+ var _a;
524
+ return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoIcon }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
525
+ };
179
526
  this.goBack = () => {
180
527
  window.history.back();
181
528
  };
@@ -193,7 +540,7 @@ export class CasinoChallengeDetails {
193
540
  this.userId = '';
194
541
  this.redirectIfNotFound = true;
195
542
  this.timeLeft = undefined;
196
- this.activeTabIndex = 0;
543
+ this.activeTabIndex = EDetailsTabs.Levels;
197
544
  this.actionLoading = false;
198
545
  this.isMobile = false;
199
546
  this.error = '';
@@ -205,51 +552,6 @@ export class CasinoChallengeDetails {
205
552
  this.isChallengePaused = false;
206
553
  this.sseConnection = undefined;
207
554
  }
208
- connectGameToLiveLobby() {
209
- if (EventSource && !this.sseConnection) {
210
- const updateUrl = `${this.endpoint}/v1/encoder/challenges/*/update`;
211
- this.sseConnection = new EventSourcePolyfill(updateUrl);
212
- this.sseConnection.addEventListener('message', this.handleEvent.bind(this));
213
- }
214
- }
215
- disconnectGameFromLiveLobby() {
216
- if (this.sseConnection) {
217
- this.sseConnection.removeEventListener('message');
218
- this.sseConnection.close();
219
- this.sseConnection = undefined;
220
- }
221
- }
222
- handleEvent(e) {
223
- try {
224
- const parsedData = JSON.parse(e === null || e === void 0 ? void 0 : e.data);
225
- const { data } = parsedData;
226
- switch (data === null || data === void 0 ? void 0 : data.messageType) {
227
- case 'disabledChallengeNotification': {
228
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
229
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
230
- }
231
- break;
232
- }
233
- case 'enabledChallengeNotification': {
234
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
235
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
236
- }
237
- break;
238
- }
239
- case 'forfeitedChallengeProgressNotification': {
240
- if (this.session) {
241
- if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
242
- this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
243
- }
244
- }
245
- break;
246
- }
247
- }
248
- }
249
- catch (e) {
250
- console.error('Exception when parse challenges NWA live updates', e);
251
- }
252
- }
253
555
  handleClientStylingChange(newValue, oldValue) {
254
556
  if (newValue != oldValue) {
255
557
  setClientStyling(this.stylingContainer, this.clientStyling);
@@ -270,7 +572,7 @@ export class CasinoChallengeDetails {
270
572
  this.debounceTimer = setTimeout(() => {
271
573
  if (this.isUserAuthorized && this.session && this.challengeId) {
272
574
  this.getChallenge();
273
- if (this.activeTabIndex === 1)
575
+ if (this.activeTabIndex === EDetailsTabs.GamesOrEvents)
274
576
  this.fetchGames();
275
577
  }
276
578
  }, 50);
@@ -286,17 +588,18 @@ export class CasinoChallengeDetails {
286
588
  }, 0);
287
589
  }
288
590
  }
289
- scrollToActiveLevel() {
290
- if (this.activeEntityRef) {
291
- const container = this.scrollContainerRef;
292
- const target = this.activeEntityRef;
293
- const containerTop = container.getBoundingClientRect().top;
294
- const targetTop = target.getBoundingClientRect().top;
295
- const scrollOffset = targetTop - containerTop;
296
- container.scrollTo({
297
- top: container.scrollTop + scrollOffset - container.clientHeight / 2 + target.clientHeight / 2,
298
- behavior: 'smooth'
299
- });
591
+ connectGameToLiveLobby() {
592
+ if (EventSource && !this.sseConnection) {
593
+ const updateUrl = `${this.endpoint}/v1/encoder/challenges/*/update`;
594
+ this.sseConnection = new EventSourcePolyfill(updateUrl);
595
+ this.sseConnection.addEventListener('message', this.handleEvent.bind(this));
596
+ }
597
+ }
598
+ disconnectGameFromLiveLobby() {
599
+ if (this.sseConnection) {
600
+ this.sseConnection.removeEventListener('message');
601
+ this.sseConnection.close();
602
+ this.sseConnection = undefined;
300
603
  }
301
604
  }
302
605
  connectedCallback() {
@@ -304,72 +607,6 @@ export class CasinoChallengeDetails {
304
607
  this.updateTime();
305
608
  }, 1000);
306
609
  }
307
- async updateChallengeViewedStatus() {
308
- if (!this.checkAttrs()) {
309
- const url = `${this.endpoint}/challenge/ChangeProgressIsNewStatus`;
310
- const body = {
311
- DomainId: this.domain,
312
- ChallengeProgressId: this.challenge.Id
313
- };
314
- return fetch(url, {
315
- method: 'POST',
316
- headers: {
317
- 'Content-Type': 'application/json'
318
- },
319
- body: JSON.stringify(body)
320
- })
321
- .then((res) => res.json())
322
- .then((res) => {
323
- if (res.Success) {
324
- this.challenge.IsNew = false;
325
- }
326
- });
327
- }
328
- }
329
- async getChallenge() {
330
- if (!this.checkAttrs()) {
331
- this.currentFetchChallengeId++;
332
- const fetchId = this.currentFetchChallengeId;
333
- if (this.abortController) {
334
- this.abortController.abort();
335
- }
336
- this.abortController = new AbortController();
337
- const signal = this.abortController.signal;
338
- const url = `${this.endpoint}/challenge/GetChallengesInfo`;
339
- const body = Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 0, PageSize: 20 }, (this.session && { PlayerSession: this.session }));
340
- this.loading = true;
341
- return fetch(url, {
342
- method: 'POST',
343
- headers: {
344
- 'Content-Type': 'application/json'
345
- },
346
- signal,
347
- body: JSON.stringify(body)
348
- })
349
- .then((res) => res.json())
350
- .then((res) => {
351
- var _a;
352
- if (res.Success) {
353
- const challenge = (_a = res === null || res === void 0 ? void 0 : res.Data) === null || _a === void 0 ? void 0 : _a.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.ChallengeId) === this.challengeId);
354
- if (challenge) {
355
- this.challenge = challenge;
356
- this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
357
- if (this.challenge.IsNew) {
358
- this.updateChallengeViewedStatus();
359
- }
360
- }
361
- else if (this.redirectIfNotFound) {
362
- this.goBack();
363
- }
364
- }
365
- })
366
- .finally(() => {
367
- if (fetchId === this.currentFetchChallengeId) {
368
- this.loading = false;
369
- }
370
- });
371
- }
372
- }
373
610
  componentWillLoad() {
374
611
  if (this.translationUrl) {
375
612
  resolveTranslationUrl(this.translationUrl);
@@ -401,23 +638,36 @@ export class CasinoChallengeDetails {
401
638
  this.disconnectGameFromLiveLobby();
402
639
  window.removeEventListener('resize', this.checkIsMobile);
403
640
  }
404
- getReward(level) {
405
- return level.CustomRewardMessage || '-';
406
- }
407
- getTarget(level) {
408
- var _a;
409
- return this.calculateTargetValue(level, (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.CurrencySymbol) || '-';
410
- }
411
- updateTime() {
412
- var _a, _b;
413
- if (this.challenge) {
414
- this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
415
- if (!this.timeLeft && this.timerExpired) {
416
- clearInterval(this.timerId);
417
- this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Expired });
418
- this.timerExpired.emit((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Id);
641
+ handleEvent(e) {
642
+ try {
643
+ const parsedData = JSON.parse(e === null || e === void 0 ? void 0 : e.data);
644
+ const { data } = parsedData;
645
+ switch (data === null || data === void 0 ? void 0 : data.messageType) {
646
+ case 'disabledChallengeNotification': {
647
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
648
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
649
+ }
650
+ break;
651
+ }
652
+ case 'enabledChallengeNotification': {
653
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
654
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
655
+ }
656
+ break;
657
+ }
658
+ case 'forfeitedChallengeProgressNotification': {
659
+ if (this.session) {
660
+ if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
661
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
662
+ }
663
+ }
664
+ break;
665
+ }
419
666
  }
420
667
  }
668
+ catch (e) {
669
+ console.error('Exception when parse challenges NWA live updates', e);
670
+ }
421
671
  }
422
672
  get actionButtonText() {
423
673
  var _a;
@@ -442,12 +692,6 @@ export class CasinoChallengeDetails {
442
692
  }
443
693
  return 'join';
444
694
  }
445
- openLoginRegisterModal() {
446
- window.postMessage({
447
- type: 'OpenLoginRegisterModal',
448
- transition: 'Login'
449
- });
450
- }
451
695
  async fetchGames() {
452
696
  if (!this.checkAttrs()) {
453
697
  this.currentFetchGamesId++;
@@ -486,92 +730,6 @@ export class CasinoChallengeDetails {
486
730
  });
487
731
  }
488
732
  }
489
- getLevelStatus(level, active) {
490
- if (this.isUserAuthorized) {
491
- if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && !active)
492
- return (h("div", { class: "level__status" }, h("span", null, Math.floor(level.ProgressPercentage), "%"), h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
493
- else if (level.ProgressStatus === EChallengeProgressLevelStatus.Closed || !active)
494
- return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
495
- else if (level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
496
- return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
497
- else if (level.ProgressStatus === EChallengeProgressLevelStatus.Completed)
498
- return h("span", { class: "completed" }, translate('completed', this.language));
499
- else if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)
500
- return h("span", { class: "level__status in-progress" }, Math.floor(level.ProgressPercentage), "%");
501
- }
502
- return null;
503
- }
504
- get pageHeader() {
505
- return (h("div", { class: "challenges-header" }, h("h1", { class: "challenges-title" }, h("img", { src: titleIcon, alt: "icon" }), translate('title', this.language)), this.isUserAuthorized && (h("div", { class: "challenges-tabs" }, this.challengesTabs.map((label, index) => (h("div", { class: `challenges-tab ${index === +this.activeChallengeTabIndex ? 'active' : ''}`, onClick: this.handleChallengesTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))));
506
- }
507
- get cardGeneralInfo() {
508
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
509
- const showButton = !(((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeStatus) === EChallengeStatus.Paused ||
510
- ((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Forfeited ||
511
- ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeProgressStatus.Completed ||
512
- ((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeProgressStatus.Expired);
513
- return (h("div", { class: "details__general-info" }, h("div", { class: "details__general-info-image-container" }, h("img", { class: {
514
- 'details__general-info-image': true,
515
- grayed: [
516
- EChallengeProgressStatus.Expired,
517
- EChallengeProgressStatus.Forfeited,
518
- EChallengeProgressStatus.Completed
519
- ].includes((_e = this.challenge) === null || _e === void 0 ? void 0 : _e.Status) || this.isChallengePaused
520
- }, src: (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.BannerUrl, alt: "banner-image", title: "banner-image" }), this.getCardBadge()), h("div", { class: "details__general-info-content" }, h("h1", { class: "details__general-info-title" }, (_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.PresentationName), h("h3", { class: "details__general-info-end-date_label" }, translate('endDate', this.language), " -", ' ', h("span", { class: "details__general-info-end-date_value" }, this.challenge ? formatDate((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ExpirationTime) : '-')), h("casino-challenge-progress-bar", { challenge: this.challenge, isUserAuthorized: this.isUserAuthorized, language: this.language }), showButton && (h("button", { class: {
521
- 'details__general-info-action-button': true,
522
- filled: ((_l = this.challenge) === null || _l === void 0 ? void 0 : _l.Status) === EChallengeProgressStatus.Started,
523
- grayed: ((_m = this.challenge) === null || _m === void 0 ? void 0 : _m.Status) === EChallengeProgressStatus.Paused ||
524
- ((_o = this.challenge) === null || _o === void 0 ? void 0 : _o.Status) === EChallengeProgressStatus.InProgress ||
525
- ((_p = this.challenge) === null || _p === void 0 ? void 0 : _p.Status) === EChallengeProgressStatus.PendingLevelReward
526
- }, disabled: this.actionLoading, onClick: this.joinUnjoinProgress }, translate(this.actionButtonText, this.language))))));
527
- }
528
- get challengeTabs() {
529
- return (h("div", { class: "details__tabs" }, this.tabs.map((label, index) => (h("div", { class: {
530
- details__tab: true,
531
- active: index === this.activeTabIndex
532
- }, onClick: this.handleTabClick(index) }, label))), h("div", { class: "active-tab-indicator" })));
533
- }
534
- get levelsTab() {
535
- var _a, _b;
536
- return (h("div", { class: "levels__tab", ref: (el) => (this.scrollContainerRef = el) }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses) === null || _b === void 0 ? void 0 : _b.map((level, index) => {
537
- var _a;
538
- const activeChallenge = [0, 1, 2, 3].includes((_a = this === null || this === void 0 ? void 0 : this.challenge) === null || _a === void 0 ? void 0 : _a.Status) && !this.isChallengePaused;
539
- const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressLevelStatus.InProgress) ||
540
- !activeChallenge;
541
- const isActiveMatch = level.ProgressStatus === EChallengeProgressLevelStatus.InProgress;
542
- return (h("div", { class: {
543
- level: true,
544
- active: this.isUserAuthorized &&
545
- activeChallenge &&
546
- level.ProgressStatus === EChallengeProgressLevelStatus.InProgress,
547
- completed: this.isUserAuthorized &&
548
- activeChallenge &&
549
- level.ProgressStatus === EChallengeProgressLevelStatus.Completed,
550
- grayed: this.isUserAuthorized &&
551
- (level.ProgressStatus === EChallengeProgressLevelStatus.Closed ||
552
- level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
553
- }, ref: isActiveMatch ? (el) => (this.activeEntityRef = el) : undefined, key: level.LevelId }, h("div", { class: {
554
- level__title: true,
555
- grayed: isGrayed
556
- } }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && (h("div", { class: "level__progress" }, h("casino-challenge-level-progress-bar", { height: "8px", value: level.ProgressPercentage, active: activeChallenge }))), h("casino-challenge-expandable-paragraph", { "max-height": "56", active: level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && activeChallenge }, h("div", { class: {
557
- level__bonus: true,
558
- grayed: isGrayed
559
- } }, h("span", { class: "level__icon" }, h("img", { class: {
560
- grayed: isGrayed
561
- }, src: giftIcon, alt: "gift-icon", title: "gift-icon" })), h("span", { class: {
562
- level__value: true,
563
- grayed: isGrayed
564
- } }, this.getReward(level))), h("div", { class: {
565
- level__target: true,
566
- grayed: isGrayed
567
- } }, h("span", { class: "level__icon" }, h("img", { class: {
568
- grayed: isGrayed
569
- }, src: targetIcon, alt: "target-icon", title: "target-icon" })), h("span", { class: {
570
- level__value: true,
571
- grayed: isGrayed
572
- } }, this.getTarget(level))))));
573
- })));
574
- }
575
733
  handleGameClick(game) {
576
734
  if (!this.isUserAuthorized) {
577
735
  this.openLoginRegisterModal();
@@ -589,32 +747,25 @@ export class CasinoChallengeDetails {
589
747
  }
590
748
  });
591
749
  }
592
- get gamesTab() {
593
- var _a;
594
- return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : ((_a = this.games) === null || _a === void 0 ? void 0 : _a.map((game) => {
595
- return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.Thumbnail, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
596
- }))));
597
- }
598
- get rulesTab() {
599
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
600
- const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
601
- const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
602
- return (h("div", { class: "rules__tab" }, ((_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description) && (h("div", { class: "rule" }, (_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Description)), contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule), ((_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url) && (h("a", { class: "link", href: (_k = (_j = this.challenge) === null || _j === void 0 ? void 0 : _j.ChallengePresentation) === null || _k === void 0 ? void 0 : _k.Url, target: "_blank" }, translate('terms', this.language)))));
603
- }
604
- get forfeitedNofitication() {
605
- var _a;
606
- return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 5 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: alertIcon }), h("span", { class: "notification__message" }, translate('forfeitNotification', this.language)))));
607
- }
608
- get completedNotification() {
609
- var _a;
610
- return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 3 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: checkIcon }), h("div", { class: "notification__column" }, h("span", { class: "notification__title" }, translate('congrats', this.language)), h("span", { class: "notification__message" }, translate('completedNofitication', this.language))))));
750
+ formatSelectionRange(range, fallbackMin) {
751
+ var _a, _b;
752
+ if (!range)
753
+ return this.nonValue;
754
+ return `${(_a = range.Min) !== null && _a !== void 0 ? _a : fallbackMin} - ${(_b = range.Max) !== null && _b !== void 0 ? _b : this.maxSelections}`;
611
755
  }
612
- get expiredNotification() {
756
+ renderCardIcon() {
613
757
  var _a;
614
- return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoIcon }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
758
+ switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedFrom) {
759
+ case EContributedFrom.Casino:
760
+ return h("img", { class: "details__general-info-title__icon--casino", src: casinoIcon });
761
+ case EContributedFrom.Sportsbook:
762
+ return h("img", { class: "details__general-info-title__icon--sportsbook", src: sportsbookIcon });
763
+ default:
764
+ return;
765
+ }
615
766
  }
616
767
  render() {
617
- return (h("div", { key: 'a5deb370d19234d211f2b0c8bfbdabd15bae600a', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer())))));
768
+ return (h("div", { key: 'c7cab4f0694412840a4d7b9fa1fdae1f7fc8e65f', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader(), this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication(), this.completedNotification(), this.expiredNotification(), h("div", { class: "details" }, this.cardGeneralInfo(), h("div", { class: "details__tabs-container" }, this.challengeTabs(), this.challengeTabContent()), this.footer())))));
618
769
  }
619
770
  static get is() { return "casino-challenge-details"; }
620
771
  static get encapsulation() { return "shadow"; }