@everymatrix/casino-challenges-overlay-drawer 0.0.1

package/dist/collection/components/casino-challenges-overlay-drawer/casino-challenges-overlay-drawer.js

@@ -0,0 +1,793 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { hasUpdateDataChanged, isMobile as isMobileView } from "../../utils/utils";
+import { resolveTranslationUrl, translate, TRANSLATIONS } from "../../utils/locale.utils";
+import { EChallengeProgressStatus, EChallengesTabs, EChallengeStatus, EPostMessageRequestType, EPostMessageResponseType } from "../../utils/types";
+import crossSvg from "../../assets/cross.svg";
+import errorIcon from "../../assets/error.svg";
+import checkIcon from "../../assets/check.svg";
+import "../../../../../casino-challenges-overlay-slider/dist/types/index";
+import "../../../../../casino-challenges-overlay-drawer-details/dist/types/index";
+import "../../../../../casino-challenges-modal/dist/types/index";
+export class CasinoChallengesOverlayDrawer {
+    constructor() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        this.EMPTY_STATE_PAGE_DESCRIPTION_MAP = {
+            [EChallengesTabs.Promo]: {
+                header: (_a = TRANSLATIONS[this.language]) === null || _a === void 0 ? void 0 : _a.promoTabEmptyHeader,
+                description: (_b = TRANSLATIONS[this.language]) === null || _b === void 0 ? void 0 : _b.promoTabEmptyDescription
+            },
+            [EChallengesTabs.Active]: {
+                header: (_c = TRANSLATIONS[this.language]) === null || _c === void 0 ? void 0 : _c.activeTabEmptyHeader,
+                description: (_d = TRANSLATIONS[this.language]) === null || _d === void 0 ? void 0 : _d.activeTabEmptyDescription
+            },
+            [EChallengesTabs.Pending]: {
+                header: (_e = TRANSLATIONS[this.language]) === null || _e === void 0 ? void 0 : _e.pendingTabEmptyHeader,
+                description: (_f = TRANSLATIONS[this.language]) === null || _f === void 0 ? void 0 : _f.pendingTabEmptyDescription
+            },
+            [EChallengesTabs.Finished]: {
+                header: (_g = TRANSLATIONS[this.language]) === null || _g === void 0 ? void 0 : _g.finishedTabEmptyHeader,
+                description: (_h = TRANSLATIONS[this.language]) === null || _h === void 0 ? void 0 : _h.finishedTabEmptyDescription
+            }
+        };
+        this.onActiveChallengeChange = (e) => {
+            var _a, _b, _c;
+            if (!(e === null || e === void 0 ? void 0 : e.detail)) {
+                return;
+            }
+            this.removeOptedOutChallenge();
+            if (this.activeTabIndex === EChallengesTabs.Active) {
+                this.updateActiveChallenge((_a = this.activeChallenges) === null || _a === void 0 ? void 0 : _a.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.Id) === e.detail));
+            }
+            else if (this.activeTabIndex === EChallengesTabs.Pending) {
+                this.updateActiveChallenge((_b = this.pendingChallenges) === null || _b === void 0 ? void 0 : _b.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.Id) === e.detail));
+            }
+            else {
+                this.updateActiveChallenge((_c = this.promoChallenges) === null || _c === void 0 ? void 0 : _c.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.Id) === e.detail));
+            }
+        };
+        this.onSeeMoreClick = (e) => {
+            this.detailsSubPageInfo = { open: e.detail.open, tab: e.detail.tab };
+        };
+        this.onLoadMorePlayerHistory = (e) => {
+            window.postMessage({
+                type: EPostMessageRequestType.ChallengesHistory,
+                data: e.detail
+            });
+        };
+        this.isInactiveChallenge = (challenge) => [
+            EChallengeProgressStatus.Awaiting,
+            EChallengeProgressStatus.Forfeited,
+            EChallengeProgressStatus.Completed,
+            EChallengeProgressStatus.Expired
+        ].includes(challenge.Status) || challenge.ChallengeStatus === EChallengeStatus.Paused;
+        this.updateActiveChallenge = (challenge) => {
+            var _a;
+            this.activeChallenge = challenge;
+            this.activeProgressId = (_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id;
+        };
+        this.removeOptedOutChallenge = () => {
+            var _a;
+            if (this.isOptedOut) {
+                this.isOptedOut = false;
+                this.activeChallenges = (_a = this.activeChallenges) === null || _a === void 0 ? void 0 : _a.filter((activeChallenge) => { var _a; return (activeChallenge === null || activeChallenge === void 0 ? void 0 : activeChallenge.Id) !== ((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id); });
+                this.activeChallenge = null;
+            }
+        };
+        this.handleTabClick = (event) => {
+            if (event.detail !== this.activeTabIndex) {
+                this.removeOptedOutChallenge();
+                this.activeTabIndex = event.detail;
+                if (this.activeTabIndex === EChallengesTabs.Promo) {
+                    window.postMessage({
+                        type: EPostMessageRequestType.ChallengePromoTab,
+                        data: {}
+                    });
+                }
+                if (this.activeTabIndex === EChallengesTabs.Active) {
+                    this.updateActiveChallenge(this.activeChallenges[0]);
+                }
+                if (this.activeTabIndex === EChallengesTabs.Pending) {
+                    this.updateActiveChallenge(this.pendingChallenges[0]);
+                }
+                if (this.activeTabIndex === EChallengesTabs.Finished) {
+                    window.postMessage({
+                        type: EPostMessageRequestType.ChallengesHistory,
+                        data: {
+                            PageSize: 20,
+                            PageNumber: 0
+                        }
+                    });
+                }
+                if (event.detail !== EChallengesTabs.Code)
+                    this.emptyState = this.EMPTY_STATE_PAGE_DESCRIPTION_MAP[event.detail];
+            }
+        };
+        this.openNotification = (notification) => {
+            this.notification = notification;
+            setTimeout(() => (this.notification = null), 10000);
+        };
+        this.renderNotification = () => {
+            var _a, _b, _c;
+            return (h("div", { class: `notification ${((_a = this.notification) === null || _a === void 0 ? void 0 : _a.errored) ? 'errored' : ''}` }, h("div", { class: "row" }, h("img", { src: ((_b = this.notification) === null || _b === void 0 ? void 0 : _b.errored) ? errorIcon : checkIcon, class: "notification__icon", alt: "" }), h("p", { class: "notification__message" }, (_c = this.notification) === null || _c === void 0 ? void 0 : _c.message))));
+        };
+        this.renderHeader = (isMobile) => {
+            return (h("div", null, h("h1", { class: "challenges__drawer__title" }, h("span", null, translate('title', this.language)), h("button", { class: "challenges__drawer__close", onClick: this.onCloseClick }, h("img", { src: crossSvg, alt: "" }))), h("casino-challenges-overlay-tabs", { onTabClick: this.handleTabClick, activeTabIndex: this.activeTabIndex, activeTabHasNotification: false, pendingTabHasNotification: false, language: this.language, "is-mobile": isMobile })));
+        };
+        this.isEmptyState = () => {
+            if (!this.loading && this.activeTabIndex !== EChallengesTabs.Code) {
+                if (this.activeTabIndex === EChallengesTabs.Active && !this.activeChallenges.length) {
+                    return true;
+                }
+                else if (this.activeTabIndex === EChallengesTabs.Pending && !this.pendingChallenges.length) {
+                    return true;
+                }
+                else if (this.activeTabIndex === EChallengesTabs.Promo && !this.promoChallenges.length) {
+                    return true;
+                }
+                else if (this.activeTabIndex === EChallengesTabs.Finished && !this.playerHistory.length) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.renderEmptyState = (isMobile) => {
+            var _a, _b;
+            return (h("div", null, this.renderHeader(isMobile), h("casino-challenges-empty-state", { header: (_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.header, description: (_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.description, "is-mobile": isMobile })));
+        };
+        this.renderFinishedTab = (isMobile) => {
+            return (h("div", null, this.renderHeader(isMobile), h("casino-challenges-overlay-drawer-history", { mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isMobile: isMobile, historyItems: this.playerHistory, hasMore: this.hasMorePlayerHistory, onLoadMore: this.onLoadMorePlayerHistory, loading: this.loading })));
+        };
+        this.renderCodeTab = (isMobile) => {
+            return (h("div", null, this.renderHeader(isMobile), h("casino-challenges-claim-code", { "is-mobile": isMobile })));
+        };
+        this.renderChallengeDetails = (isMobile, isUnique = false) => {
+            return (h("casino-challenges-overlay-drawer-details", { challenge: this.activeChallenge, swipped: this.swipped, progress: this.progress, "is-mobile": isMobile, "is-unique": isUnique, "is-opted-out": this.isOptedOut, "active-challenges-tab-index": this.activeTabIndex, onSeeMoreClick: this.onSeeMoreClick, detailsSubPageInfo: this.detailsSubPageInfo, challengeGames: this.challengeGames, onCloseClick: this.onCloseClick }));
+        };
+        this.renderChallengesTabs = (isMobile) => {
+            const challenges = this.activeTabIndex === EChallengesTabs.Active
+                ? this.activeChallenges
+                : this.activeTabIndex === EChallengesTabs.Pending
+                    ? this.pendingChallenges
+                    : this.promoChallenges;
+            const isUnique = challenges.length === 1;
+            return (h("swipe-up", { onSwippedUp: (e) => {
+                    this.swipped = e.detail.swipped;
+                    this.progress = e.detail.progress;
+                }, isMobile: isMobile, isOneSlider: isUnique }, h("div", { class: "content-header", slot: "header" }, this.renderHeader(isMobile), h("div", { class: { 'content-spacer': this.swipped || !isMobile, 'one-slide': isUnique && this.swipped } }, h("casino-challenges-overlay-slider", { mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, challenges: challenges, isMobile: isMobile, onActiveChallengeChange: this.onActiveChallengeChange, initialProgressId: this.activeProgressId, activeTabIndex: this.activeTabIndex }))), h("div", { class: "content-details", slot: "details" }, this.renderChallengeDetails(isMobile, isUnique))));
+        };
+        this.onCloseClick = () => {
+            var _a, _b;
+            this.pendingChallenges = (_a = this.pendingChallenges) === null || _a === void 0 ? void 0 : _a.filter((c) => c.Status === EChallengeProgressStatus.Awaiting);
+            this.activeChallenges = (_b = this.activeChallenges) === null || _b === void 0 ? void 0 : _b.filter((challenge) => !this.isInactiveChallenge(challenge));
+            this.detailsSubPageInfo = { open: false, tab: null };
+            this.loading = false;
+            this.isOptedOut = false;
+            this.handleClose();
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.isOpen = false;
+        this.handleClose = () => { };
+        this.challenges = [];
+        this.initialProgressId = '';
+        this.activeChallenge = null;
+        this.activeProgressId = '';
+        this.activeTabIndex = EChallengesTabs.Active;
+        this.error = '';
+        this.hasError = false;
+        this.swipped = false;
+        this.detailsSubPageInfo = undefined;
+        this.progress = 0;
+        this.loading = false;
+        this.notification = null;
+        this.optOutModaIsOpen = false;
+        this.isOptedOut = false;
+        this.prevUpdateEvent = undefined;
+        this.challengeGames = [];
+        this.activeChallenges = [];
+        this.pendingChallenges = [];
+        this.promoChallenges = [];
+        this.playerHistory = [];
+        this.hasMorePlayerHistory = false;
+        this.emptyState = {
+            header: (_j = TRANSLATIONS[this.language]) === null || _j === void 0 ? void 0 : _j.activeTabEmptyHeader,
+            description: (_k = TRANSLATIONS[this.language]) === null || _k === void 0 ? void 0 : _k.activeTabEmptyDescription
+        };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    handleIsOpenChange(newValue) {
+        var _a;
+        if (newValue) {
+            if (this.initialProgressId && this.challenges.length) {
+                this.activeTabIndex = EChallengesTabs.Active;
+                this.activeProgressId = this.initialProgressId;
+                const currentChallenge = ((_a = this.activeChallenges) === null || _a === void 0 ? void 0 : _a.find((x) => x.Id === this.activeProgressId)) || this.activeChallenges[0];
+                this.updateActiveChallenge(currentChallenge || null);
+            }
+            else {
+                this.activeTabIndex = EChallengesTabs.Promo;
+                window.postMessage({
+                    type: EPostMessageRequestType.ChallengePromoTab,
+                    data: {}
+                });
+            }
+        }
+    }
+    onActiveChallengeChanged() {
+        this.challengeGames = [];
+    }
+    onOpenOptOut() {
+        this.optOutModaIsOpen = true;
+    }
+    onCloseOptOut() {
+        this.optOutModaIsOpen = false;
+    }
+    onConfirmOptOut() {
+        window.postMessage({
+            type: EPostMessageRequestType.ForfeitChallenge,
+            data: {
+                ChallengeId: this.activeChallenge.ChallengeId
+            }
+        });
+    }
+    onChallengeExpired(event) {
+        if (!(event === null || event === void 0 ? void 0 : event.detail)) {
+            return;
+        }
+        switch (this.activeTabIndex) {
+            case EChallengesTabs.Active:
+                this.activeChallenges = this.updateChallenge(this.activeChallenges, event.detail, {
+                    Status: EChallengeProgressStatus.Expired
+                });
+                break;
+            case EChallengesTabs.Pending:
+                this.pendingChallenges = this.updateChallenge(this.pendingChallenges, event.detail, {
+                    Status: EChallengeProgressStatus.Expired
+                });
+                break;
+            case EChallengesTabs.Promo:
+                this.promoChallenges = this.updateChallenge(this.promoChallenges, event.detail, {
+                    Status: EChallengeProgressStatus.Expired
+                });
+                break;
+        }
+    }
+    handleEvent(e) {
+        var _a, _b, _c, _d;
+        const { type, data, success, errorMessage } = e === null || e === void 0 ? void 0 : e.data;
+        console.log('\nReceived event: ', e === null || e === void 0 ? void 0 : e.data.type);
+        console.log(e); // left here temporarily for debugging in the developer environment
+        switch (type) {
+            case EPostMessageResponseType.ChallengePromoTab: {
+                if (success) {
+                    this.promoChallenges = data || [];
+                    this.updateActiveChallenge(this.promoChallenges[0]);
+                }
+                else {
+                    this.promoChallenges = [];
+                    this.updateActiveChallenge(null);
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ChallengesHistory: {
+                if (success) {
+                    if (this.playerHistory.length < ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.totalItem)) {
+                        this.playerHistory = [...this.playerHistory, ...data];
+                    }
+                    else {
+                        this.playerHistory = data;
+                    }
+                    this.hasMorePlayerHistory = ((_b = e === null || e === void 0 ? void 0 : e.data) === null || _b === void 0 ? void 0 : _b.totalItem) > this.playerHistory.length;
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ClaimChallengeByCode: {
+                if (success) {
+                    this.openNotification({ message: translate('claimCodeSuccessMessage', this.language) });
+                    this.activeChallenges = [...this.activeChallenges, data];
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ChallengeJoin: {
+                if (success) {
+                    const isJoining = [EChallengeProgressStatus.Paused, EChallengeProgressStatus.Started].includes((_c = this.activeChallenge) === null || _c === void 0 ? void 0 : _c.Status);
+                    const id = isJoining ? data === null || data === void 0 ? void 0 : data.joinId : data === null || data === void 0 ? void 0 : data.unjoinId;
+                    const status = isJoining ? EChallengeProgressStatus.InProgress : EChallengeProgressStatus.Paused;
+                    this.activeChallenges = this.updateChallenge(this.activeChallenges, id, {
+                        Status: status
+                    });
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ChallengeIsNew: {
+                if (success) {
+                    this.updateChallengeByProgressId(data === null || data === void 0 ? void 0 : data.challengeProgressId, { IsNew: false });
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                break;
+            }
+            case EPostMessageResponseType.GetChallengeGames: {
+                if (success) {
+                    this.challengeGames = data;
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ClaimChallengeByButton: {
+                if (success) {
+                    const challenge = Array.isArray(data) ? data[0] : data;
+                    if (challenge) {
+                        challenge.IsNew = false;
+                        this.activeChallenges = [...this.activeChallenges, challenge];
+                        this.updateActiveChallenge(challenge);
+                        this.activeTabIndex = EChallengesTabs.Active;
+                        this.openNotification({ message: translate('grantClaimByButtonSuccessMessage', this.language) });
+                    }
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            case EPostMessageResponseType.ForfeitChallenge: {
+                this.optOutModaIsOpen = false;
+                if (success) {
+                    this.openNotification({ message: translate('optOutSuccessMessage', this.language) });
+                    this.detailsSubPageInfo = { open: false, tab: null };
+                    this.isOptedOut = true;
+                }
+                else {
+                    this.openNotification({ message: errorMessage, errored: true });
+                }
+                this.loading = false;
+                break;
+            }
+            //
+            case EPostMessageResponseType.ChangeChallengeProgressStatus: {
+                this.updateChallengeByProgressId(data === null || data === void 0 ? void 0 : data.ChallengeProgressId, { Status: data === null || data === void 0 ? void 0 : data.ChallengeProgressStatus });
+                break;
+            }
+            case EPostMessageResponseType.ChallengeChangeStatusNotification: {
+                this.updateChallengeById(data === null || data === void 0 ? void 0 : data.ChallengeId, {
+                    ChallengeStatus: (data === null || data === void 0 ? void 0 : data.IsEnabled) ? EChallengeStatus.Enabled : EChallengeStatus.Paused
+                });
+                break;
+            }
+            case EPostMessageResponseType.ChallengeForfeitNotification: {
+                this.updateChallengeById(data === null || data === void 0 ? void 0 : data.ChallengeId, { Status: EChallengeProgressStatus.Forfeited });
+                break;
+            }
+            case EPostMessageResponseType.UpdateChallengeProgress: {
+                const newChallenge = data;
+                if (!hasUpdateDataChanged(this.prevUpdateEvent, newChallenge)) {
+                    return;
+                }
+                this.prevUpdateEvent = newChallenge;
+                this.activeChallenges = (_d = this.activeChallenges) === null || _d === void 0 ? void 0 : _d.map((challenge) => {
+                    if (challenge.Id !== (newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.ProgressId))
+                        return challenge;
+                    const updatedLevels = challenge.LevelProgresses.map((level) => {
+                        const newLevelData = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.Levels.find((l) => l.LevelId === level.LevelId);
+                        if (!newLevelData)
+                            return level;
+                        return Object.assign(Object.assign({}, level), { ProgressStatus: newLevelData.ProgressStatus, ProgressPercentage: newLevelData.ProgressPercentage });
+                    });
+                    return Object.assign(Object.assign({}, challenge), { Status: newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.Status, LevelProgresses: updatedLevels });
+                });
+                break;
+            }
+            case EPostMessageResponseType.NewChallengeProgressGranted:
+                const isPending = (data === null || data === void 0 ? void 0 : data.Status) === EChallengeProgressStatus.Awaiting;
+                const challenges = isPending ? this.pendingChallenges : this.activeChallenges;
+                if (challenges === null || challenges === void 0 ? void 0 : challenges.some((x) => x.Id === (data === null || data === void 0 ? void 0 : data.Id)))
+                    break;
+                if (isPending) {
+                    this.pendingChallenges = [...challenges, data];
+                }
+                else {
+                    this.activeChallenges = [...challenges, data];
+                }
+                break;
+            // component loading state processing for requests
+            case EPostMessageRequestType.ChallengeJoin:
+            case EPostMessageRequestType.GetChallengeGames:
+            case EPostMessageRequestType.ClaimChallengeByButton:
+            case EPostMessageRequestType.RedirectToDepositPage:
+            case EPostMessageRequestType.ChallengeInGameRedirect:
+            case EPostMessageRequestType.ChallengesHistory:
+            case EPostMessageRequestType.ChallengePromoTab:
+            case EPostMessageRequestType.ClaimChallengeByCode:
+            case EPostMessageRequestType.ForfeitChallenge:
+                this.loading = true;
+                break;
+        }
+    }
+    componentWillLoad() {
+        var _a;
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+        if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+            const challenges = [...this.challenges];
+            this.pendingChallenges = challenges.filter((c) => c.Status === EChallengeProgressStatus.Awaiting);
+            this.activeChallenges = challenges.filter((challenge) => !this.isInactiveChallenge(challenge));
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    updateChallenge(challenges, progressId, updates) {
+        var _a;
+        if (((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id) === progressId) {
+            this.activeChallenge = Object.assign(Object.assign({}, this.activeChallenge), updates);
+        }
+        return challenges.map((challenge) => (challenge.Id === progressId ? Object.assign(Object.assign({}, challenge), updates) : challenge));
+    }
+    updateChallengeList(list, challengeId, updates) {
+        let changed = false;
+        const updated = list.map((challenge) => {
+            if (challenge.ChallengeId === challengeId) {
+                changed = true;
+                return Object.assign(Object.assign({}, challenge), updates);
+            }
+            return challenge;
+        });
+        return changed ? updated : list;
+    }
+    updateChallengeById(challengeId, updates) {
+        var _a;
+        if (((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.ChallengeId) === challengeId) {
+            this.activeChallenge = Object.assign(Object.assign({}, this.activeChallenge), updates);
+        }
+        this.activeChallenges = this.updateChallengeList(this.activeChallenges, challengeId, updates);
+        this.pendingChallenges = this.updateChallengeList(this.pendingChallenges, challengeId, updates);
+        this.promoChallenges = this.updateChallengeList(this.promoChallenges, challengeId, updates);
+    }
+    updateChallengeByProgressId(progressId, updates) {
+        var _a;
+        if (((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id) === progressId) {
+            this.activeChallenge = Object.assign(Object.assign({}, this.activeChallenge), updates);
+        }
+        if (this.activeChallenges.find((x) => x.Id === progressId)) {
+            this.activeChallenges = this.activeChallenges.map((challenge) => challenge.Id === progressId ? Object.assign(Object.assign({}, challenge), updates) : challenge);
+        }
+        else if (this.pendingChallenges.find((x) => x.Id === progressId)) {
+            this.pendingChallenges = this.pendingChallenges.map((challenge) => challenge.Id === progressId ? Object.assign(Object.assign({}, challenge), updates) : challenge);
+        }
+        else {
+            this.promoChallenges = this.promoChallenges.map((challenge) => challenge.Id === progressId ? Object.assign(Object.assign({}, challenge), updates) : challenge);
+        }
+    }
+    renderContent(isMobile, showEmptyState) {
+        var _a;
+        if (showEmptyState) {
+            return this.renderEmptyState(isMobile);
+        }
+        if ((_a = this.detailsSubPageInfo) === null || _a === void 0 ? void 0 : _a.open) {
+            return (h("div", { class: "content-sub-page", slot: "details" }, this.renderChallengeDetails(isMobile)));
+        }
+        switch (this.activeTabIndex) {
+            case EChallengesTabs.Promo:
+            case EChallengesTabs.Active:
+            case EChallengesTabs.Pending:
+                return this.renderChallengesTabs(isMobile);
+            case EChallengesTabs.Code:
+                return this.renderCodeTab(isMobile);
+            case EChallengesTabs.Finished:
+                return this.renderFinishedTab(isMobile);
+            default:
+                return;
+        }
+    }
+    render() {
+        if (!this.isOpen) {
+            return;
+        }
+        const isMobile = isMobileView() || window.innerWidth <= 768;
+        const showEmptyState = this.isEmptyState();
+        return (h("div", { ref: (el) => (this.stylingContainer = el), class: {
+                container: true,
+                mobile: isMobile
+            } }, h("div", { class: "challenges__backdrop", onClick: this.onCloseClick }), h("div", { class: "challenges__drawer" }, h("casino-challenge-overlay-background", { empty: showEmptyState }), h("div", { class: "challenges__drawer__content" }, this.renderContent(isMobile, showEmptyState)), this.loading && h("casino-challenges-overlay-loader", { "full-size": true, "is-mobile": isMobile }), h("casino-challenge-opt-out-modal", { open: this.optOutModaIsOpen, "is-mobile": isMobile, language: this.language })), this.notification && this.renderNotification()));
+    }
+    static get is() { return "casino-challenges-overlay-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "handleClose": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "challenges": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IChallenge[]",
+                    "resolved": "IChallenge[]",
+                    "references": {
+                        "IChallenge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-drawer/src/utils/types.ts::IChallenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "initialProgressId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "initial-progress-id",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeChallenge": {},
+            "activeProgressId": {},
+            "activeTabIndex": {},
+            "error": {},
+            "hasError": {},
+            "swipped": {},
+            "detailsSubPageInfo": {},
+            "progress": {},
+            "loading": {},
+            "notification": {},
+            "optOutModaIsOpen": {},
+            "isOptedOut": {},
+            "prevUpdateEvent": {},
+            "challengeGames": {},
+            "activeChallenges": {},
+            "pendingChallenges": {},
+            "promoChallenges": {},
+            "playerHistory": {},
+            "hasMorePlayerHistory": {},
+            "emptyState": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleIsOpenChange"
+            }, {
+                "propName": "activeChallenge",
+                "methodName": "onActiveChallengeChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "openOptOutModal",
+                "method": "onOpenOptOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "closeOptOutModal",
+                "method": "onCloseOptOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "confirmOptOut",
+                "method": "onConfirmOptOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "challengeExpired",
+                "method": "onChallengeExpired",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}