@everymatrix/casino-engagement-suite-challenges-list 1.0.69

package/dist/collection/components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.js

@@ -0,0 +1,497 @@
+import { h } from "@stencil/core";
+import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from "../../models/challenge";
+import { translate } from "../../utils/locale.utils";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { getChallengesHistoryTemplate, getHistoryLoaderTemplate } from "../../renders/ChallengesHistory";
+export class CasinoEngagementSuiteChallengesList {
+    constructor() {
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.host.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('Error ', err);
+            });
+        };
+        this.handleTabChange = (e) => {
+            this.activeTab = +(e.target.getAttribute('data-index'));
+            if (this.activeTab === 2) {
+                this.sendHistoryRequest();
+            }
+        };
+        this.toggleChallengeHistory = (ev) => {
+            const id = ev.currentTarget.getAttribute('data-id');
+            const index = this.openedHistoryIds.findIndex(historyId => historyId === id);
+            if (index > -1) {
+                this.openedHistoryIds.splice(index, 1);
+            }
+            else {
+                this.openedHistoryIds.push(id);
+            }
+            this.openedHistoryIds = [...this.openedHistoryIds];
+        };
+        this.handleCloseClick = () => {
+            this.close.emit();
+            this.tooltip = false;
+            this.resetNewChallengeLabel.emit('list');
+        };
+        this.handleChallengeClick = (ev) => {
+            const id = ev.currentTarget.getAttribute('data-id');
+            window.postMessage({ type: 'ChallengeClick', id });
+        };
+        this.showTooltip = () => {
+            this.tooltip = true;
+        };
+        this.hideTooltip = () => {
+            this.tooltip = false;
+        };
+        this.changeChallengeStatus = (e) => {
+            var _a, _b;
+            e.stopPropagation();
+            const id = e.currentTarget.getAttribute('data-id');
+            if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+                window.postMessage({
+                    type: 'ShowConfirmationModal',
+                    ProgressToDeactivate: id,
+                });
+                return;
+            }
+            if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                window.postMessage({
+                    type: 'ShowConfirmationModal',
+                    ProgressToActivate: id,
+                    ProgressToDeactivate: this.inProgressChallenges[0],
+                });
+                return;
+            }
+            window.postMessage({
+                type: 'ChallengeJoinRequest',
+                data: {
+                    ProgressToActivate: id,
+                },
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.language = 'en';
+        this.device = 'Mobile';
+        this.challenges = [];
+        this.isJoiningToChallenge = undefined;
+        this.inProgressChallenges = undefined;
+        this.pausedChallengeIds = [];
+        this.tooltip = false;
+        this.timers = {};
+        this.limitStylingAppends = false;
+        this.activeTab = 1;
+        this.historyLoading = false;
+        this.challengesHistory = undefined;
+        this.openedHistoryIds = [];
+    }
+    handleEvent(e) {
+        const { type } = e === null || e === void 0 ? void 0 : e.data;
+        if (type === 'ChallengesHistoryResponse') {
+            this.openedHistoryIds = [];
+            this.challengesHistory = e.data.data || [];
+            this.historyLoading = false;
+        }
+        if (type === 'BarChallengesClick') {
+            this.activeTab = 1;
+            this.openedHistoryIds = [];
+        }
+    }
+    challengesPropHandler(value) {
+        if (!this.interval && value.length) {
+            this.updateTimers();
+            this.startCountdown();
+        }
+        if (this.interval && !value.length) {
+            clearInterval(this.interval);
+        }
+    }
+    componentWillLoad() {
+        this.challengesPropHandler(this.challenges);
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    disconnectedCallback() {
+        this.interval && clearInterval(this.interval);
+    }
+    sendHistoryRequest() {
+        this.historyLoading = true;
+        window.postMessage({
+            type: 'ChallengesHistoryRequest'
+        });
+    }
+    startCountdown() {
+        this.interval = setInterval(() => {
+            this.updateTimers();
+        }, 1000);
+    }
+    updateTimers() {
+        const now = new Date().getTime();
+        this.timers = this.challenges.filter(challenge => challenge.Status !== ChallengeProgressStatus.Expired).reduce((acc, challenge) => {
+            const expirationDate = new Date(challenge.ExpirationTime).getTime();
+            const diff = expirationDate - now;
+            let countdown = '00h:00m:00s';
+            if (diff < 1) {
+                this.removeChallenge(challenge.Id);
+            }
+            else {
+                const { days, hours, minutes, seconds } = {
+                    days: String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+                    hours: String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+                    minutes: String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+                    seconds: String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0')
+                };
+                countdown = days === '00'
+                    ? `${hours}h:${minutes}m:${seconds}s`
+                    : `${days}d:${hours}h:${minutes}m`;
+            }
+            return Object.assign(Object.assign({}, acc), { [challenge.Id]: countdown });
+        }, {});
+    }
+    removeChallenge(id) {
+        const index = this.challenges.findIndex(challenge => challenge.Id === id);
+        if (index > -1) {
+            this.challenges.splice(index, 1);
+            window.postMessage({ type: 'ChallengeHasExpired', id });
+        }
+    }
+    getChallengeClasses(challenge) {
+        return {
+            ChallengeCard: true,
+            InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+                && !this.pausedChallengeIds.includes(challenge.ChallengeId),
+            Completed: this.isChallengeCompleted(challenge),
+            Paused: this.isChallengePaused(challenge)
+        };
+    }
+    isChallengePaused(challenge) {
+        return (challenge.Status === ChallengeProgressStatus.Started
+            && challenge.LevelProgresses[0].ProgressPercentage > 0)
+            || this.pausedChallengeIds.includes(challenge.ChallengeId);
+    }
+    isChallengeCompleted(challenge) {
+        return challenge.Status === ChallengeProgressStatus.Completed
+            || (challenge.Status === ChallengeProgressStatus.PendingLevelReward
+                && challenge.LevelProgresses.every(progress => progress.ProgressPercentage === 100));
+    }
+    getChallengeProgress(challenge) {
+        if (challenge.Status === ChallengeProgressStatus.Completed) {
+            return 100;
+        }
+        if (this.isChallengePaused(challenge)
+            || challenge.Status === ChallengeProgressStatus.PendingLevelReward
+            || challenge.Status === ChallengeProgressStatus.InProgress) {
+            const activeLevel = challenge.LevelProgresses
+                .find(level => level.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+            const completedLevel = challenge.LevelProgresses
+                .filter(level => level.ProgressStatus === ChallengeLevelProgressStatus.Fillup ||
+                level.ProgressStatus === ChallengeLevelProgressStatus.Completed).slice(-1)[0];
+            /**
+             * It is possible that Paused/InProgress challenge
+             * doesn't have InProgress, Fillup or Completed level
+             * because level becomes InProgress after user's bet.
+             * In this case should be displayed progress of the next level (0%)
+             */
+            return activeLevel ? activeLevel.ProgressPercentage
+                : (completedLevel ? completedLevel.ProgressPercentage : 0);
+        }
+        return -1;
+    }
+    getChallengeHeaderTemplate(challenge) {
+        const { Id } = challenge;
+        const inProgressChallenge = challenge.Status === ChallengeProgressStatus.InProgress
+            || challenge.Status === ChallengeProgressStatus.PendingLevelReward;
+        return h("div", { class: "ChallengeCardHeader" }, h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), challenge.Status !== ChallengeProgressStatus.Completed ? (h("button", { class: `${inProgressChallenge ?
+                'ChallengeJoinButton Joined' : 'ChallengeJoinButton'} ${this.isJoiningToChallenge ||
+                this.pausedChallengeIds.includes(challenge.ChallengeId) ?
+                'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, inProgressChallenge
+            ? translate('unjoin', this.language)
+            : translate('join', this.language))) : null);
+    }
+    getChallengeTemplate(challenge) {
+        const isForfeitedChallenge = challenge.Status === ChallengeProgressStatus.Forfeited;
+        const challengeProgress = this.getChallengeProgress(challenge);
+        const countdown = this.timers[challenge.Id];
+        const progressTemplate = challengeProgress > -1
+            ? h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) }, h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
+            : h("span", { class: "ChallengeCountdown" }, countdown);
+        return isForfeitedChallenge ? (this.getForfeitedChallengeTemplate(challenge)) : (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate, h("div", { class: `ChallengeLabel ${challenge.IsNew ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))));
+    }
+    getForfeitedChallengeTemplate(challenge) {
+        return h("div", { class: "ChallengeCard ForfeitedChallengeCard" }, h("div", { class: "ForfeitedChallengeName" }, challenge.ChallengePresentation.PresentationName), h("div", { class: "ForfeitedChallengeInfo" }, h("div", null, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/alert-circle.svg", alt: "Forfeited" })), h("div", { class: "ForfeitedChallengeMessage" }, h("div", null, translate('missionHasBeenForfeited', this.language)), h("div", null, translate('support', this.language)))));
+    }
+    getHeaderTemplate() {
+        return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), h("div", { class: "ChallengesListPopupHeaderName" }, translate('missions', this.language)), h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close missions list" })));
+    }
+    getListTabTemplate() {
+        if (this.challenges.length) {
+            return h("div", { class: "ChallengesListWrapper" }, h("div", { class: "ChallengesList" }, [...this.challenges]
+                .sort(challenge => challenge.Status === ChallengeProgressStatus.InProgress ? -1 : 0)
+                .map(challenge => this.getChallengeTemplate(challenge))));
+        }
+        else {
+            return h("div", { class: "ChallengesListEmpty" }, h("h2", null, translate('noMissions', this.language)), h("p", null, translate('tryOtherGames', this.language)));
+        }
+    }
+    getTooltipTemplate() {
+        return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
+    }
+    getHistoryTabTemplate() {
+        return h("div", { class: "HistoryWrapper" }, h("div", { class: "HistoryCols" }, h("div", { class: "HistoryColName Level" }, translate('level', this.language)), h("div", { class: "HistoryColName Status" }, translate('status', this.language)), h("div", { class: "HistoryColName Time" }, translate('time', this.language))), this.historyLoading
+            ? getHistoryLoaderTemplate(this.language)
+            : getChallengesHistoryTemplate(this.challengesHistory, this.openedHistoryIds, this.toggleChallengeHistory, this.language));
+    }
+    getTabsTemplate() {
+        return h("div", { class: "TabsWrapper" }, h("div", { class: "Tabs" }, h("div", { "data-index": "1", onClick: this.handleTabChange, class: `Tab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('missions', this.language)), h("div", { "data-index": "2", onClick: this.handleTabChange, class: `Tab ${this.activeTab === 2 ? 'Active' : ''}` }, translate('history', this.language))));
+    }
+    getTabsContentTemplate() {
+        return this.activeTab === 1
+            ? this.getListTabTemplate()
+            : this.getHistoryTabTemplate();
+    }
+    render() {
+        return h("div", { key: 'c97094033153bc81185e96ab77da5f3bd7618d36', class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getTabsTemplate(), this.getTabsContentTemplate(), this.tooltip && this.getTooltipTemplate());
+    }
+    static get is() { return "casino-engagement-suite-challenges-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's device type"
+                },
+                "attribute": "device",
+                "reflect": false,
+                "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+            },
+            "challenges": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Challenge[]",
+                    "resolved": "Challenge[]",
+                    "references": {
+                        "Challenge": {
+                            "location": "import",
+                            "path": "../../models/challenge",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-challenges-list/src/models/challenge.ts::Challenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of challenges"
+                },
+                "defaultValue": "[] as Array<Challenge>"
+            },
+            "isJoiningToChallenge": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is joining to challenge"
+                },
+                "attribute": "is-joining-to-challenge",
+                "reflect": false
+            },
+            "inProgressChallenges": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active challenges"
+                }
+            },
+            "pausedChallengeIds": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Paused Challenge Ids"
+                },
+                "defaultValue": "[] as Array<string>"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltip": {},
+            "timers": {},
+            "limitStylingAppends": {},
+            "activeTab": {},
+            "historyLoading": {},
+            "challengesHistory": {},
+            "openedHistoryIds": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "resetNewChallengeLabel",
+                "name": "resetNewChallengeLabel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "challenges",
+                "methodName": "challengesPropHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/casino-engagement-suite-challenges-list/index.js

@@ -0,0 +1 @@
+export { CasinoEngagementSuiteChallengesList } from './casino-engagement-suite-challenges-list';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/challenge.js

@@ -0,0 +1,30 @@
+export var ChallengeRewardType;
+(function (ChallengeRewardType) {
+    ChallengeRewardType[ChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    ChallengeRewardType[ChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    ChallengeRewardType[ChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    ChallengeRewardType[ChallengeRewardType["Challenge"] = 3] = "Challenge";
+    ChallengeRewardType[ChallengeRewardType["Custom"] = 4] = "Custom";
+})(ChallengeRewardType || (ChallengeRewardType = {}));
+export var ChallengeHistoryLevelStatus;
+(function (ChallengeHistoryLevelStatus) {
+    ChallengeHistoryLevelStatus[ChallengeHistoryLevelStatus["Completed"] = 0] = "Completed";
+    ChallengeHistoryLevelStatus[ChallengeHistoryLevelStatus["Expired"] = 1] = "Expired";
+    ChallengeHistoryLevelStatus[ChallengeHistoryLevelStatus["Forfeited"] = 2] = "Forfeited";
+})(ChallengeHistoryLevelStatus || (ChallengeHistoryLevelStatus = {}));
+export var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+export var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+    ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+    ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+    ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+    ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+    ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+    ChallengeProgressStatus[ChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));

package/dist/collection/renders/ChallengesHistory.js

@@ -0,0 +1,48 @@
+import { ChallengeHistoryLevelStatus, ChallengeRewardType } from "../models/challenge";
+import { h } from "@stencil/core";
+import { translate } from "../utils/locale.utils";
+import { format } from "date-fns";
+export const getHistoryLoaderTemplate = (lang) => {
+    return h("div", { class: "HistoryLoader" }, h("casino-engagement-suite-progress-bar", { indeterminate: true }), h("span", null, translate('loading', lang)));
+};
+const getRewardNameByType = (type, lang) => {
+    switch (type) {
+        case 0: return translate('freeSpins', lang);
+        case 1: return translate('luckyWheel', lang);
+        case 2: return translate('leaderboard', lang);
+        case 3: return translate('mission', lang);
+    }
+};
+const getLevelStatusString = (status, lang) => {
+    switch (status) {
+        case ChallengeHistoryLevelStatus.Completed: return translate('completed', lang);
+        case ChallengeHistoryLevelStatus.Expired: return translate('expired', lang);
+        case ChallengeHistoryLevelStatus.Forfeited: return translate('forfeited', lang);
+        default: return status;
+    }
+};
+const showRewards = (level) => {
+    return !!level.Rewards && level.Status === ChallengeHistoryLevelStatus.Completed;
+};
+export const getRewardTemplate = (reward, lang) => {
+    const isCustom = reward.Type === ChallengeRewardType.Custom;
+    const rewardName = isCustom ? reward.RewardDescription : getRewardNameByType(reward.Type, lang);
+    const isRewarded = isCustom || reward.IsRewarded;
+    return h("div", { class: `HistoryRewardsItem ${isRewarded || isCustom ? 'IsRewarded' : 'IsNotRewarded'}` }, h("span", { class: "HistoryRewardsItemName" }, rewardName), !isCustom && h("div", { class: "HistoryRewardStatusIcon" }));
+};
+export const getHistoryLevelRewardsTemplate = (level, lang) => {
+    return h("div", { class: "HistoryRewardsList" }, h("img", { class: "HistoryRewardsIcon", src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward-list.svg", alt: "Reward" }), Object.values(level.Rewards).map(reward => getRewardTemplate(reward, lang)));
+};
+export const getHistoryLevelTemplate = (level, index, lang) => {
+    return h("div", { class: "HistoryLevelInfo" }, h("span", { class: "Level" }, `${translate('level', lang)} ${index + 1}`), h("span", { class: "Status" }, getLevelStatusString(level.Status, lang)), h("span", { class: "Time" }, format(new Date(level.Time), 'LLL d, yyyy HH:mm:ss')));
+};
+export const getChallengesHistoryTemplate = (histories, openedHistoryIds, toggleChallengeHistory, lang) => {
+    if (histories.length === 0) {
+        return h("p", { class: "HistoryEmptyMessage" }, translate('noHistory', lang));
+    }
+    return h("div", { class: "HistoryList" }, histories.map((history) => {
+        return h("div", { key: history.ProgressId, class: `HistoryListItem ${openedHistoryIds.includes(history.ProgressId) ? 'Opened' : 'Closed'}` }, h("header", { class: "HistoryListItemHeader", "data-id": history.ProgressId, onClick: toggleChallengeHistory }, history.Name, h("button", { class: "HistoryListItemButton" })), h("div", { class: "HistoryListItemBody" }, h("div", null, history.Levels.map((level, index) => {
+            return h("div", { class: "HistoryListItemLevelCard" }, getHistoryLevelTemplate(level, index, lang), showRewards(level) && getHistoryLevelRewardsTemplate(level, lang));
+        }))));
+    }));
+};

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

@@ -0,0 +1,17 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        challenges: 'Challenges',
+        join: 'Join',
+        unjoin: 'Unjoin',
+        new: 'new',
+        noChallenges: 'No Challenges yet',
+        tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
+        tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/esm/casino-engagement-suite-challenges-list.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-00eb432b.js';
+export { s as setNonce } from './index-00eb432b.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["casino-engagement-suite-challenges-list_2",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"inProgressChallenges":[1040],"pausedChallengeIds":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32],"activeTab":[32],"historyLoading":[32],"challengesHistory":[32],"openedHistoryIds":[32]},[[8,"message","handleEvent"]],{"challenges":["challengesPropHandler"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+});