@everymatrix/casino-challenge-details 0.3.11 → 0.3.13

package/dist/collection/components/casino-challenge-details/casino-challenge-details.js

@@ -11,7 +11,7 @@ import checkIcon from "../../assets/check.svg";
 import infoIcon from "../../assets/info-circle.svg";
 import titleIcon from "../../assets/title-icon.svg";
 import notificationIcon from "../../assets/notification.svg";
-import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
+import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
 export class CasinoChallengeDetails {
     constructor() {
         this.activeEntityRef = null;
@@ -19,6 +19,7 @@ export class CasinoChallengeDetails {
         this.challengesTabs = ['Active', 'Pending', 'Finished', 'Code'];
         this.tabs = ['LEVELS', 'GAMES', 'RULES'];
         this.showNotification = 10;
+        this.abortController = new AbortController();
         this.checkIsMobile = () => {
             this.isMobile = window.innerWidth <= 768;
         };
@@ -43,14 +44,17 @@ export class CasinoChallengeDetails {
         this.getBadgeContent = () => {
             var _a;
             if (this.challenge) {
+                if (this.isChallengePaused) {
+                    return translate('unavailable', this.language);
+                }
                 switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
-                    case EChallengeStatus.Expired:
+                    case EChallengeProgressStatus.Expired:
                         return translate('expired', this.language);
-                    case EChallengeStatus.Forfeited:
+                    case EChallengeProgressStatus.Forfeited:
                         return translate('forfeited', this.language);
-                    case EChallengeStatus.Completed:
+                    case EChallengeProgressStatus.Completed:
                         return translate('finished', this.language);
-                    case EChallengeStatus.Paused:
+                    case EChallengeProgressStatus.Paused:
                         return translate('suspended', this.language);
                     default:
                         return [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft || null)];
@@ -68,15 +72,15 @@ export class CasinoChallengeDetails {
             return this.hasError;
         };
         this.joinUnjoinProgress = async () => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (!this.isUserAuthorized) {
                 this.openLoginRegisterModal();
             }
-            const join = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeStatus.Started || ((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeStatus.Paused;
-            const progress = (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.LevelProgresses) === null || _d === void 0 ? void 0 : _d.find((x) => (x === null || x === void 0 ? void 0 : x.ProgressStatus) === EChallengeProgressStatus.InProgress);
-            if (!this.checkAttrs() && progress) {
+            const join = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeProgressStatus.Started ||
+                ((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Paused;
+            if (!this.checkAttrs() && this.challengeId) {
                 const url = `${this.endpoint}/challenge/ChangeProgressStatus`;
-                const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.userId && { InternalUserId: this.userId })), (join ? { ProgressToActivate: progress === null || progress === void 0 ? void 0 : progress.LevelId } : { ProgressToDeactivate: progress === null || progress === void 0 ? void 0 : progress.LevelId }));
+                const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.userId && { InternalUserId: this.userId })), (join ? { ProgressToActivate: this.challenge.Id } : { ProgressToDeactivate: this.challenge.Id }));
                 this.actionLoading = true;
                 return fetch(url, {
                     method: 'POST',
@@ -106,6 +110,9 @@ export class CasinoChallengeDetails {
         this.getBackButtonText = () => {
             return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
         };
+        this.goBack = () => {
+            window.history.back();
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.endpoint = '';
@@ -128,6 +135,7 @@ export class CasinoChallengeDetails {
         this.gamesAreLoading = false;
         this.challenge = undefined;
         this.loading = false;
+        this.isChallengePaused = false;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -144,10 +152,21 @@ export class CasinoChallengeDetails {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
+    handleCombinedChange() {
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            if (this.isUserAuthorized && this.session && this.challengeId) {
+                if (this.activeTabIndex === 0)
+                    this.getChallenge();
+                else if (this.activeTabIndex === 1)
+                    this.fetchGames();
+            }
+        }, 50);
+    }
     onEntityChange(newChallenge, previousChallenge) {
         var _a, _b, _c, _d;
-        const newActiveProgressId = (_b = (_a = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.LevelProgresses) === null || _a === void 0 ? void 0 : _a.find((level) => level.ProgressStatus === EChallengeProgressStatus.InProgress)) === null || _b === void 0 ? void 0 : _b.LevelId;
-        const prevActiveProgressId = (_d = (_c = previousChallenge === null || previousChallenge === void 0 ? void 0 : previousChallenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find((level) => level.ProgressStatus === EChallengeProgressStatus.InProgress)) === null || _d === void 0 ? void 0 : _d.LevelId;
+        const newActiveProgressId = (_b = (_a = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.LevelProgresses) === null || _a === void 0 ? void 0 : _a.find((level) => level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)) === null || _b === void 0 ? void 0 : _b.LevelId;
+        const prevActiveProgressId = (_d = (_c = previousChallenge === null || previousChallenge === void 0 ? void 0 : previousChallenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find((level) => level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)) === null || _d === void 0 ? void 0 : _d.LevelId;
         if (newActiveProgressId == prevActiveProgressId) {
             setTimeout(() => {
                 this.scrollToActiveLevel();
@@ -174,19 +193,32 @@ export class CasinoChallengeDetails {
     }
     async getChallenge() {
         if (!this.checkAttrs()) {
+            if (this.abortController) {
+                this.abortController.abort();
+            }
+            this.abortController = new AbortController();
+            const signal = this.abortController.signal;
             const url = `${this.endpoint}/challenge/GetChallengesInfo`;
-            const body = Object.assign(Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 0, PageSize: 1 }, (this.isUserAuthorized ? { ChallengeProgressId: this.challengeId } : { ChallengeId: this.challengeId })), (this.session && { PlayerSession: this.session }));
+            const body = Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 0, PageSize: 20 }, (this.session && { PlayerSession: this.session }));
             this.loading = true;
             return fetch(url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
+                signal,
                 body: JSON.stringify(body)
             })
                 .then((res) => res.json())
                 .then((res) => {
-                this.challenge = res.Data[0];
+                var _a;
+                if (res.Success) {
+                    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);
+                    if (challenge) {
+                        this.challenge = challenge;
+                        this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
+                    }
+                }
             })
                 .finally(() => (this.loading = false));
         }
@@ -249,16 +281,14 @@ export class CasinoChallengeDetails {
         if (this.isUserAuthorized) {
             let buttonText;
             switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
-                case EChallengeStatus.Started:
+                case EChallengeProgressStatus.Started:
                     buttonText = 'start';
                     break;
-                case EChallengeStatus.Paused:
-                    buttonText = 'resume';
-                    break;
-                case EChallengeStatus.InProgress:
+                case EChallengeProgressStatus.Paused:
                     buttonText = 'resume';
                     break;
-                case EChallengeStatus.PendingLevelReward:
+                case EChallengeProgressStatus.InProgress:
+                case EChallengeProgressStatus.PendingLevelReward:
                     buttonText = 'pause';
                     break;
                 default:
@@ -276,15 +306,18 @@ export class CasinoChallengeDetails {
         });
     }
     async fetchGames() {
-        var _a;
         if (!this.checkAttrs()) {
+            if (this.abortController) {
+                this.abortController.abort();
+            }
+            this.abortController = new AbortController();
+            const signal = this.abortController.signal;
             const url = `${this.endpoint}/challenge/GetChallengeGames`;
-            const body = {
-                ChallengeId: (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeId
-            };
+            const body = Object.assign({ ChallengeId: this.challengeId }, (this.session && { PlayerSession: this.session }));
             this.gamesAreLoading = true;
             return fetch(url, {
                 method: 'POST',
+                signal,
                 headers: {
                     'Content-Type': 'application/json'
                 },
@@ -292,22 +325,30 @@ export class CasinoChallengeDetails {
             })
                 .then((res) => res.json())
                 .then((res) => {
-                this.games = res.ChallengeGames;
+                if (res.ChallengeGames)
+                    this.games = res.ChallengeGames;
+                else
+                    this.games = [];
             })
-                .finally(() => (this.gamesAreLoading = false));
+                .catch(() => {
+                this.games = [];
+            })
+                .finally(() => {
+                this.gamesAreLoading = false;
+            });
         }
     }
     getLevelStatus(level, active) {
         if (this.isUserAuthorized) {
-            if (level.ProgressStatus === EChallengeProgressStatus.InProgress && !active)
+            if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && !active)
                 return (h("div", { class: "level__status" }, h("span", null, level.ProgressPercentage, "%"), h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
-            else if (level.ProgressStatus === EChallengeProgressStatus.Closed || !active)
+            else if (level.ProgressStatus === EChallengeProgressLevelStatus.Closed || !active)
                 return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
-            else if (level.ProgressStatus === EChallengeProgressStatus.Fillup)
+            else if (level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
                 return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
-            else if (level.ProgressStatus === EChallengeProgressStatus.Completed)
+            else if (level.ProgressStatus === EChallengeProgressLevelStatus.Completed)
                 return h("span", { class: "completed" }, translate('completed', this.language));
-            else if (level.ProgressStatus === EChallengeProgressStatus.InProgress)
+            else if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)
                 return h("span", { class: "level__status in-progress" }, level.ProgressPercentage, "%");
         }
         return null;
@@ -319,13 +360,17 @@ export class CasinoChallengeDetails {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return (h("div", { class: "details__general-info" }, h("div", { class: "details__general-info-image-container" }, h("img", { class: {
                 'details__general-info-image': true,
-                grayed: [EChallengeStatus.Expired, EChallengeStatus.Forfeited, EChallengeStatus.Completed].includes((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status)
+                grayed: [
+                    EChallengeProgressStatus.Expired,
+                    EChallengeProgressStatus.Forfeited,
+                    EChallengeProgressStatus.Completed
+                ].includes((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status)
             }, src: (_c = (_b = this.challenge) === null || _b === void 0 ? void 0 : _b.ChallengePresentation) === null || _c === void 0 ? void 0 : _c.BannerUrl, alt: "banner-image", title: "banner-image" }), this.getCardBadge), h("div", { class: "details__general-info-content" }, h("h1", { class: "details__general-info-title" }, (_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.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((_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ExpirationTime) : '-')), h("casino-challenge-progress-bar", { challenge: this.challenge, isUserAuthorized: this.isUserAuthorized, language: this.language }), h("button", { class: {
                 'details__general-info-action-button': true,
-                filled: ((_g = this.challenge) === null || _g === void 0 ? void 0 : _g.Status) === EChallengeStatus.Started,
-                grayed: ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) === EChallengeStatus.Paused ||
-                    ((_j = this.challenge) === null || _j === void 0 ? void 0 : _j.Status) === EChallengeStatus.InProgress ||
-                    ((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.Status) === EChallengeStatus.PendingLevelReward
+                filled: ((_g = this.challenge) === null || _g === void 0 ? void 0 : _g.Status) === EChallengeProgressStatus.Started,
+                grayed: ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) === EChallengeProgressStatus.Paused ||
+                    ((_j = this.challenge) === null || _j === void 0 ? void 0 : _j.Status) === EChallengeProgressStatus.InProgress ||
+                    ((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.Status) === EChallengeProgressStatus.PendingLevelReward
             }, disabled: this.actionLoading, onClick: this.joinUnjoinProgress }, translate(this.actionButtonText, this.language)))));
     }
     get challengeTabs() {
@@ -339,23 +384,24 @@ export class CasinoChallengeDetails {
         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) => {
             var _a;
             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);
-            const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressStatus.InProgress) || !activeChallenge;
-            const isActiveMatch = level.ProgressStatus === EChallengeProgressStatus.InProgress;
+            const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressLevelStatus.InProgress) ||
+                !activeChallenge;
+            const isActiveMatch = level.ProgressStatus === EChallengeProgressLevelStatus.InProgress;
             return (h("div", { class: {
                     level: true,
                     active: this.isUserAuthorized &&
                         activeChallenge &&
-                        level.ProgressStatus === EChallengeProgressStatus.InProgress,
+                        level.ProgressStatus === EChallengeProgressLevelStatus.InProgress,
                     completed: this.isUserAuthorized &&
                         activeChallenge &&
-                        level.ProgressStatus === EChallengeProgressStatus.Completed,
+                        level.ProgressStatus === EChallengeProgressLevelStatus.Completed,
                     grayed: this.isUserAuthorized &&
-                        (level.ProgressStatus === EChallengeProgressStatus.Closed ||
-                            level.ProgressStatus === EChallengeProgressStatus.Fillup)
+                        (level.ProgressStatus === EChallengeProgressLevelStatus.Closed ||
+                            level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
                 }, ref: isActiveMatch ? (el) => (this.activeEntityRef = el) : undefined, key: level.LevelId }, h("div", { class: {
                     level__title: true,
                     grayed: isGrayed
-                } }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus === EChallengeProgressStatus.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 === EChallengeProgressStatus.InProgress && activeChallenge }, h("div", { class: {
+                } }, 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: {
                     level__bonus: true,
                     grayed: isGrayed
                 } }, h("span", { class: "level__icon" }, h("img", { class: {
@@ -393,22 +439,22 @@ export class CasinoChallengeDetails {
     }
     get gamesTab() {
         return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : (this.games.map((game) => {
-            return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.GameIcon, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
+            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, "%")));
         }))));
     }
     get rulesTab() {
-        var _a, _b, _c, _d;
-        return (h("div", { class: "rules__tab" }, h("div", { class: "rule" }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description), h("a", { class: "link", href: (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Url, target: "_blank" }, translate('terms', this.language))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (h("div", { class: "rules__tab" }, ((_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description) && (h("div", { class: "rule" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description)), ((_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Url) && (h("a", { class: "link", href: (_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url, target: "_blank" }, translate('terms', this.language)))));
     }
     get footer() {
         var _a, _b, _c, _d;
         return (h("div", { class: "button__container" }, h("button", { class: {
                 'footer-action-button': true,
-                filled: ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeStatus.Started || !this.isUserAuthorized,
+                filled: ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeProgressStatus.Started || !this.isUserAuthorized,
                 grayed: this.isUserAuthorized &&
-                    (((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeStatus.Paused ||
-                        ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeStatus.InProgress ||
-                        ((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeStatus.PendingLevelReward)
+                    (((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Paused ||
+                        ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeProgressStatus.InProgress ||
+                        ((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeProgressStatus.PendingLevelReward)
             }, onClick: this.joinUnjoinProgress, disabled: this.actionLoading }, translate(this.actionButtonText, this.language))));
     }
     get forfeitedNofitication() {
@@ -424,7 +470,7 @@ export class CasinoChallengeDetails {
         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)))));
     }
     render() {
-        return (h("div", { key: '0d96a09f1ed0f090cf01b2b6077b803f64886422', 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" }, 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)))));
+        return (h("div", { key: 'db59c429bf40a1ad703f3f26763549ece9fe8723', 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)))));
     }
     static get is() { return "casino-challenge-details"; }
     static get encapsulation() { return "shadow"; }
@@ -666,7 +712,8 @@ export class CasinoChallengeDetails {
             "games": {},
             "gamesAreLoading": {},
             "challenge": {},
-            "loading": {}
+            "loading": {},
+            "isChallengePaused": {}
         };
     }
     static get events() {
@@ -697,6 +744,15 @@ export class CasinoChallengeDetails {
             }, {
                 "propName": "mbSource",
                 "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "challengeId",
+                "methodName": "handleCombinedChange"
+            }, {
+                "propName": "isUserAuthorized",
+                "methodName": "handleCombinedChange"
+            }, {
+                "propName": "session",
+                "methodName": "handleCombinedChange"
             }, {
                 "propName": "challenge",
                 "methodName": "onEntityChange"

package/dist/collection/components/components/casino-challenge-progress-bar.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
+import { EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
 import { translate } from "../../utils/locale.utils";
 import trophyIcon from "../../assets/trophy.svg";
 import finishIcon from "../../assets/finish.svg";
@@ -11,39 +11,42 @@ export class CasinoChallengeProgressBar {
     }
     get challengeProgress() {
         var _a;
-        const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress);
+        const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressLevelStatus.InProgress);
         if (!this.isUserAuthorized || !currLevel)
             return null;
-        const { Status, LevelProgresses } = this.challenge;
-        if (Status === EChallengeStatus.Expired || Status === EChallengeStatus.Started) {
+        const { Status, LevelProgresses, ChallengeStatus } = this.challenge;
+        if (ChallengeStatus === EChallengeStatus.Closed ||
+            ChallengeStatus === EChallengeStatus.Deleted ||
+            Status === EChallengeProgressStatus.Expired ||
+            Status === EChallengeProgressStatus.Started) {
             return null;
         }
-        const barValue = Status === EChallengeStatus.Paused
+        const barValue = Status === EChallengeProgressStatus.Paused
             ? translate('suspended', this.language)
-            : Status === EChallengeStatus.Completed
+            : Status === EChallengeProgressStatus.Completed
                 ? translate('finished', this.language)
                 : `${currLevel.ProgressPercentage}%`;
         const isLastLevel = !LevelProgresses.some((x) => x.OrderNumber > currLevel.OrderNumber);
-        const secondImgSrc = Status === EChallengeStatus.Completed ? trophyIcon : isLastLevel ? finishIcon : '';
+        const secondImgSrc = Status === EChallengeProgressStatus.Completed ? trophyIcon : isLastLevel ? finishIcon : '';
         return (h("div", { class: {
                 progress: true,
-                paused: Status === EChallengeStatus.Paused,
-                grayed: Status === EChallengeStatus.Forfeited
+                paused: Status === EChallengeProgressStatus.Paused,
+                grayed: Status === EChallengeProgressStatus.Forfeited
             } }, h("div", { class: {
                 progress__point: true,
                 start: true,
-                hidden: Status === EChallengeStatus.Completed
+                hidden: Status === EChallengeProgressStatus.Completed
             } }, currLevel.OrderNumber + 1), h("div", { class: {
                 progress__bar: true,
-                finished: Status === EChallengeStatus.Completed
+                finished: Status === EChallengeProgressStatus.Completed
             }, style: { width: `${currLevel.ProgressPercentage}%` } }, barValue), h("div", { class: {
                 progress__point: true,
                 end: true,
-                finished: Status === EChallengeStatus.Completed
+                finished: Status === EChallengeProgressStatus.Completed
             } }, secondImgSrc ? h("img", { class: "progress__icon", src: secondImgSrc }) : currLevel.OrderNumber + 2)));
     }
     render() {
-        return h(Host, { key: 'e75584687abe5ea34c8f1e3a66ca09fca73ba8ed' }, this.challengeProgress);
+        return h(Host, { key: '026daa3db1fe4e19e74dc4cc994e2fbb6f833356' }, this.challengeProgress);
     }
     static get is() { return "casino-challenge-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/locale.utils.js

@@ -15,6 +15,7 @@ const TRANSLATIONS = {
         finished: 'Finished',
         suspended: 'Suspended',
         completed: 'Completed',
+        unavailable: 'Unavailable',
         start: 'Start',
         resume: 'Resume',
         pause: 'Pause',
@@ -43,6 +44,7 @@ const TRANSLATIONS = {
         finished: 'Terminat',
         suspended: 'Suspendat',
         start: 'Start',
+        unavailable: 'Indisponibil',
         resume: 'Reia',
         pause: 'Pauză',
         join: 'Alătură-te pentru a începe',
@@ -70,6 +72,7 @@ const TRANSLATIONS = {
         finished: 'Terminé',
         suspended: 'Suspendu',
         start: 'Démarrer',
+        unavailable: 'Indisponible',
         resume: 'Reprendre',
         pause: 'Pause',
         join: 'Rejoindre pour commencer',
@@ -97,6 +100,7 @@ const TRANSLATIONS = {
         finished: 'منتهي',
         suspended: 'معلق',
         start: 'ابدأ',
+        unavailable: 'غير متاح',
         resume: 'استئناف',
         pause: 'إيقاف مؤقت',
         join: 'انضم للبدء',
@@ -124,6 +128,7 @@ const TRANSLATIONS = {
         finished: 'Završeno',
         suspended: 'Suspendirano',
         start: 'Počni',
+        unavailable: 'nedostupan',
         resume: 'Nastavi',
         pause: 'Pauza',
         join: 'Pridruži se za početak',

package/dist/collection/utils/types.js

@@ -19,23 +19,31 @@ export var EChallengeRewardType;
     EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
     EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
 })(EChallengeRewardType || (EChallengeRewardType = {}));
+export var EChallengeProgressLevelStatus;
+(function (EChallengeProgressLevelStatus) {
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Closed"] = 0] = "Closed";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Fillup"] = 2] = "Fillup";
+    EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Completed"] = 3] = "Completed";
+})(EChallengeProgressLevelStatus || (EChallengeProgressLevelStatus = {}));
 export var EChallengeProgressStatus;
 (function (EChallengeProgressStatus) {
-    EChallengeProgressStatus[EChallengeProgressStatus["Closed"] = 0] = "Closed";
+    EChallengeProgressStatus[EChallengeProgressStatus["Started"] = 0] = "Started";
     EChallengeProgressStatus[EChallengeProgressStatus["InProgress"] = 1] = "InProgress";
-    EChallengeProgressStatus[EChallengeProgressStatus["Fillup"] = 2] = "Fillup";
+    EChallengeProgressStatus[EChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
     EChallengeProgressStatus[EChallengeProgressStatus["Completed"] = 3] = "Completed";
+    EChallengeProgressStatus[EChallengeProgressStatus["Expired"] = 4] = "Expired";
+    EChallengeProgressStatus[EChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
+    EChallengeProgressStatus[EChallengeProgressStatus["Awaiting"] = 6] = "Awaiting";
+    EChallengeProgressStatus[EChallengeProgressStatus["Paused"] = 7] = "Paused";
 })(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
 export var EChallengeStatus;
 (function (EChallengeStatus) {
-    EChallengeStatus[EChallengeStatus["Started"] = 0] = "Started";
-    EChallengeStatus[EChallengeStatus["InProgress"] = 1] = "InProgress";
-    EChallengeStatus[EChallengeStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
-    EChallengeStatus[EChallengeStatus["Completed"] = 3] = "Completed";
-    EChallengeStatus[EChallengeStatus["Expired"] = 4] = "Expired";
-    EChallengeStatus[EChallengeStatus["Forfeited"] = 5] = "Forfeited";
-    EChallengeStatus[EChallengeStatus["Awaiting"] = 6] = "Awaiting";
-    EChallengeStatus[EChallengeStatus["Paused"] = 7] = "Paused";
+    EChallengeStatus[EChallengeStatus["Draft"] = 0] = "Draft";
+    EChallengeStatus[EChallengeStatus["Enabled"] = 1] = "Enabled";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
 })(EChallengeStatus || (EChallengeStatus = {}));
 export const ChallengeStatusDictionary = [
     'started',