@everymatrix/casino-engagement-suite-challenges-list 1.44.0 → 1.45.2

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

@@ -1,541 +1,497 @@
-import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';
-import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from '../../models/challenge';
-import { translate } from '../../utils/locale.utils';
-import '@everymatrix/casino-engagement-suite-progress-bar';
-import { getChallengesHistoryTemplate, getHistoryLoaderTemplate } from '../../renders/ChallengesHistory';
+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() {
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * User's device type
-     */
-    this.device = 'Mobile';
-    /**
-     * List of challenges
-     */
-    this.challenges = [];
-    /**
-     *Paused Challenge Ids
-     */
-    this.pausedChallengeIds = [];
-    this.tooltip = false;
-    this.timers = {};
-    this.limitStylingAppends = false;
-    this.activeTab = 1;
-    this.historyLoading = false;
-    this.openedHistoryIds = [];
-    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) {
+    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: 'ShowConfirmationModal',
-          ProgressToActivate: id,
-          ProgressToDeactivate: this.inProgressChallenges[0],
+            type: 'ChallengesHistoryRequest'
         });
-        return;
-      }
-      window.postMessage({
-        type: 'ChallengeJoinRequest',
-        data: {
-          ProgressToActivate: id,
-        },
-      });
-    };
-  }
-  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();
+    startCountdown() {
+        this.interval = setInterval(() => {
+            this.updateTimers();
+        }, 1000);
     }
-    if (this.interval && !value.length) {
-      clearInterval(this.interval);
+    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 });
+        }, {});
     }
-  }
-  componentWillLoad() {
-    this.challengesPropHandler(this.challenges);
-  }
-  componentDidRender() {
-    if (!this.limitStylingAppends && this.host) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    removeChallenge(id) {
+        const index = this.challenges.findIndex(challenge => challenge.Id === id);
+        if (index > -1) {
+            this.challenges.splice(index, 1);
+            window.postMessage({ type: 'ChallengeHasExpired', id });
+        }
     }
-  }
-  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')
+    getChallengeClasses(challenge) {
+        return {
+            ChallengeCard: true,
+            InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+                && !this.pausedChallengeIds.includes(challenge.ChallengeId),
+            Completed: this.isChallengeCompleted(challenge),
+            Paused: this.isChallengePaused(challenge)
         };
-        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;
+    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;
     }
-    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);
+    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 ?
+                'EngagementSuiteButton Active' : 'EngagementSuiteButton'} ${this.isJoiningToChallenge ||
+                this.pausedChallengeIds.includes(challenge.ChallengeId) ?
+                'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, inProgressChallenge
+            ? translate('unjoin', this.language)
+            : translate('join', this.language))) : null);
     }
-    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))));
+    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", { clientStylingUrl: this.clientStylingUrl, 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)))));
     }
-    else {
-      return h("div", { class: "ChallengesListEmpty" },
-        h("h2", null, translate('noMissions', this.language)),
-        h("p", null, translate('tryOtherGames', 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)))));
     }
-  }
-  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", { 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": {
-          "Array": {
-            "location": "global"
-          },
-          "Challenge": {
-            "location": "import",
-            "path": "../../models/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"
-          }
+    getHeaderTemplate() {
+        return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "EngagementSuiteIconButton Help" }), h("div", { class: "ChallengesListPopupHeaderName" }, translate('missions', this.language)), h("button", { class: "EngagementSuiteIconButton Close", onClick: this.handleCloseClick }));
+    }
+    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))));
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active challenges"
-      }
-    },
-    "pausedChallengeIds": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
+        else {
+            return h("div", { class: "ChallengesListEmpty" }, h("h2", null, translate('noMissions', this.language)), h("p", null, translate('tryOtherGames', this.language)));
         }
-      },
-      "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
-    }]; }
+    getTooltipTemplate() {
+        return h("div", { class: "EngagementSuiteTooltipBackdrop" }, h("div", { class: "EngagementSuiteTooltip" }, h("button", { class: "EngagementSuiteIconButton Close", onClick: this.hideTooltip }), 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: "EngagementSuiteTabsWrapper" }, h("div", { class: "EngagementSuiteTabs" }, h("div", { "data-index": "1", onClick: this.handleTabChange, class: `EngagementSuiteTab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('missions', this.language)), h("div", { "data-index": "2", onClick: this.handleTabChange, class: `EngagementSuiteTab ${this.activeTab === 2 ? 'Active' : ''}` }, translate('history', this.language))));
+    }
+    getTabsContentTemplate() {
+        return this.activeTab === 1
+            ? this.getListTabTemplate()
+            : this.getHistoryTabTemplate();
+    }
+    render() {
+        return h("div", { key: '50b676f6394d813aa946ed1fd85e9612ba04a7a1', 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
+            }];
+    }
 }