@everymatrix/casino-engagement-suite-challenges-details 1.44.0 → 1.45.0

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

@@ -1,507 +1,452 @@
-import { Component, h, Prop, State, Element, Event, Watch } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
-import { ChallengeProgressStatus } from '../../models/casino-challenges-details';
-import '@everymatrix/casino-engagement-suite-progress-bar';
-import { formatBalance } from '../../utils';
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { ChallengeProgressStatus } from "../../models/casino-challenges-details";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { formatBalance } from "../../utils";
 export class CasinoEngagementSuiteChallengesDetails {
-  constructor() {
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-    * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Current game slug
-     */
-    this.gameSlug = '';
-    /**
-    * User's device type
-     */
-    this.device = 'Mobile';
-    /**
-     *Paused Challenge Ids
-     */
-    this.pausedChallengeIds = [];
-    this.limitStylingAppends = false;
-    this.timer = '';
-    this.showDetails = false;
-    this.isExpiredChallenge = false;
-    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.handleCloseClick = () => {
-      this.resetNewLabel();
-      this.close.emit();
-    };
-    this.handleBackClick = () => {
-      this.resetNewLabel();
-      this.back.emit();
-    };
-    this.onGameClick = (ev) => {
-      const slug = ev.currentTarget.getAttribute('data-slug');
-      if (slug) {
-        window.postMessage({
-          type: 'EngagementSuiteGameRedirect',
-          data: {
-            Slug: slug
-          }
-        });
-      }
-    };
-    this.changeChallengeStatus = (e) => {
-      var _a, _b;
-      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.toggle = () => {
-      this.showDetails = !this.showDetails;
-    };
-  }
-  challengePropHandler(value) {
-    if (!this.interval && value) {
-      this.updateTimer();
-      this.startCountdown();
+    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.handleCloseClick = () => {
+            this.resetNewLabel();
+            this.close.emit();
+        };
+        this.handleBackClick = () => {
+            this.resetNewLabel();
+            this.back.emit();
+        };
+        this.onGameClick = (ev) => {
+            const slug = ev.currentTarget.getAttribute('data-slug');
+            if (slug) {
+                window.postMessage({
+                    type: 'EngagementSuiteGameRedirect',
+                    data: {
+                        Slug: slug
+                    }
+                });
+            }
+        };
+        this.changeChallengeStatus = (e) => {
+            var _a, _b;
+            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.toggle = () => {
+            this.showDetails = !this.showDetails;
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.challenge = undefined;
+        this.inProgressChallenges = undefined;
+        this.language = 'en';
+        this.gameSlug = '';
+        this.device = 'Mobile';
+        this.isJoiningToChallenge = undefined;
+        this.pausedChallengeIds = [];
+        this.limitStylingAppends = false;
+        this.timer = '';
+        this.showDetails = false;
+        this.isExpiredChallenge = false;
     }
-    if (this.interval && !value) {
-      clearInterval(this.interval);
+    challengePropHandler(value) {
+        if (!this.interval && value) {
+            this.updateTimer();
+            this.startCountdown();
+        }
+        if (this.interval && !value) {
+            clearInterval(this.interval);
+        }
+    }
+    componentWillLoad() {
+        this.challengePropHandler(this.challenge);
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
     }
-  }
-  componentWillLoad() {
-    this.challengePropHandler(this.challenge);
-  }
-  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);
     }
-  }
-  disconnectedCallback() {
-    this.interval && clearInterval(this.interval);
-  }
-  getActionsTemplate() {
-    return (h("header", { class: "ChallengeActions" },
-      h("button", { class: "ChallengeIconButton", onClick: this.handleBackClick },
-        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })),
-      h("button", { class: "ChallengeIconButton", onClick: this.handleCloseClick },
-        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "close" }))));
-  }
-  getChallengeHeader() {
-    const presentationName = this.challenge.ChallengePresentation.PresentationName;
-    const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress
-      || this.challenge.Status === ChallengeProgressStatus.PendingLevelReward;
-    const isDisabledButton = this.isExpiredChallenge || this.isJoiningToChallenge ||
-      this.pausedChallengeIds.includes(this.challenge.ChallengeId);
-    const showJoinButton = ![ChallengeProgressStatus.Completed, ChallengeProgressStatus.Forfeited]
-      .includes(this.challenge.Status);
-    return (h("div", { class: "ChallengeDetailsHeader" },
-      h("span", { class: "ChallengeName" }, presentationName),
-      showJoinButton ? (h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+    getActionsTemplate() {
+        return (h("header", { class: "ChallengeActions" }, h("button", { class: "EngagementSuiteIconButton Back", onClick: this.handleBackClick }), h("button", { class: "EngagementSuiteIconButton Close", onClick: this.handleCloseClick })));
+    }
+    getChallengeHeader() {
+        const presentationName = this.challenge.ChallengePresentation.PresentationName;
+        const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress
+            || this.challenge.Status === ChallengeProgressStatus.PendingLevelReward;
+        const isDisabledButton = this.isExpiredChallenge || this.isJoiningToChallenge ||
+            this.pausedChallengeIds.includes(this.challenge.ChallengeId);
+        const showJoinButton = ![ChallengeProgressStatus.Completed, ChallengeProgressStatus.Forfeited]
+            .includes(this.challenge.Status);
+        const showNewLabel = this.challenge.Status !== ChallengeProgressStatus.Forfeited;
+        return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), showJoinButton ? (h("button", { onClick: this.changeChallengeStatus, class: `EngagementSuiteButton ${inProgressChallenge ? 'Active' : ''}
                 ${isDisabledButton ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
-        ? translate('unjoin', this.language)
-        : translate('join', this.language))) : null,
-      h("div", { class: `ChallengeLabel ${this.challenge.IsNew ? 'ShowChallengeLabel' : ''}` },
-        h("span", null, translate('new', this.language)))));
-  }
-  getChallengeCountdown() {
-    const timerMessage = this.isExpiredChallenge ? 'Expired' : this.timer;
-    const showChallengeCountdown = this.challenge.Status !== ChallengeProgressStatus.Forfeited;
-    return (showChallengeCountdown ? (h("div", { class: `ChallengeCountdown ${this.isExpiredChallenge ? 'Expired' : ''}` }, timerMessage)) : null);
-  }
-  getChallengeDetails() {
-    const description = this.challenge.ChallengePresentation.Description;
-    const url = this.challenge.ChallengePresentation.Url;
-    const games = this.challenge.Games;
-    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` },
-      description && h("div", { class: "ChallengeDescription" }, description),
-      url && (h("div", { class: "TC" },
-        h("a", { href: url, target: "_blank" }, translate('tc', this.language)))),
-      (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game", key: game.CasinoGameId },
-        h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
-  }
-  resetNewLabel() {
-    this.resetNewChallengeLabel.emit(this.challenge.Id);
-  }
-  startCountdown() {
-    this.interval = setInterval(() => {
-      this.updateTimer();
-    }, 1000);
-  }
-  updateTimer() {
-    const expirationTime = new Date(this.challenge.ExpirationTime).getTime();
-    const now = new Date().getTime();
-    const distance = expirationTime - now;
-    if (distance < 1) {
-      clearInterval(this.interval);
-      this.timer = '';
-      this.isExpiredChallenge = true;
-      return;
+            ? translate('unjoin', this.language)
+            : translate('join', this.language))) : null, showNewLabel ? (h("div", { class: `ChallengeLabel ${this.challenge.IsNew ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))) : null));
+    }
+    getChallengeCountdown() {
+        const timerMessage = this.isExpiredChallenge ? 'Expired' : this.timer;
+        const showChallengeCountdown = this.challenge.Status !== ChallengeProgressStatus.Forfeited;
+        return (showChallengeCountdown ? (h("div", { class: `ChallengeCountdown ${this.isExpiredChallenge ? 'Expired' : ''}` }, timerMessage)) : null);
     }
-    const { days, hours, minutes, seconds } = {
-      days: String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0'),
-      hours: String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
-      minutes: String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
-      seconds: String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0')
-    };
-    this.timer = days === '00'
-      ? `${hours}h:${minutes}m:${seconds}s`
-      : `${days}d:${hours}h:${minutes}m`;
-  }
-  getLevelTarget(level) {
-    const targetTurnover = formatBalance(level.DisplayCurrencyTargetTurnover, this.challenge.CurrencySymbol);
-    let levelTarget = `${translate('place', this.language)} ${targetTurnover}`;
-    if (level.LevelTargetType === 1) {
-      levelTarget += ` ${translate('bet', this.language)}`;
+    getChallengeDetails() {
+        const description = this.challenge.ChallengePresentation.Description;
+        const url = this.challenge.ChallengePresentation.Url;
+        const games = this.challenge.Games;
+        return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("div", { class: "ChallengeDescription" }, description), url && (h("div", { class: "TC" }, h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game", key: game.CasinoGameId }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
     }
-    else if (level.LevelTargetType === 2) {
-      levelTarget += ` ${translate('bets', this.language)} X ${level.TargetBetCount}`;
+    resetNewLabel() {
+        this.resetNewChallengeLabel.emit(this.challenge.Id);
     }
-    return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
-  }
-  getLevelBetRangesDetails(level) {
-    var _a, _b, _c, _d;
-    const isAccumulativeLevelType = level.LevelTargetType === 0;
-    if (isAccumulativeLevelType) {
-      const formattedMinBet = formatBalance((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet, this.challenge.CurrencySymbol);
-      const formattedMaxBet = formatBalance((_b = level.BetRange) === null || _b === void 0 ? void 0 : _b.MaxBet, this.challenge.CurrencySymbol);
-      const formattedContributionPercentage = level.LevelContributionPercent + '%';
-      const showMinBet = !!((_c = level.BetRange) === null || _c === void 0 ? void 0 : _c.MinBet);
-      const showMaxBet = !!((_d = level.BetRange) === null || _d === void 0 ? void 0 : _d.MaxBet);
-      const showContributionPercentage = level.LevelContributionPercent !== 100;
-      if (showMinBet || showMaxBet || showContributionPercentage) {
-        return (h("div", { class: 'ChallengeLevelBetDetails' },
-          showMinBet &&
-            h("div", { class: 'ChallengeLevelBetDetail' },
-              h("span", null,
-                translate('minBet', this.language),
-                ":  "),
-              h("span", { class: 'ChallengeLevelBetRange' }, formattedMinBet)),
-          showMaxBet &&
-            h("div", { class: 'ChallengeLevelBetDetail' },
-              h("span", null,
-                translate('maxBet', this.language),
-                ":  "),
-              h("span", { class: 'ChallengeLevelBetRange' }, formattedMaxBet)),
-          showContributionPercentage &&
-            h("div", { class: 'ChallengeLevelBetDetail' },
-              h("span", null,
-                translate('contribution', this.language),
-                ":  "),
-              h("span", { class: 'ChallengeLevelBetContribution' }, formattedContributionPercentage))));
-      }
+    startCountdown() {
+        this.interval = setInterval(() => {
+            this.updateTimer();
+        }, 1000);
     }
-  }
-  getChallengeLevels() {
-    const isChallengePaused = this.pausedChallengeIds.includes(this.challenge.ChallengeId);
-    const InProgressLevel = (level) => {
-      return level.ProgressStatus === 1 && !this.isExpiredChallenge && !isChallengePaused;
-    };
-    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${InProgressLevel(level) ? 'InProgress' : ''}` },
-      h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": (level.ProgressPercentage === 0 && !InProgressLevel(level)) || level.ProgressPercentage === 100, disabled: this.isExpiredChallenge || isChallengePaused },
-        h("span", { slot: "Title", class: "ChallengeLevelTitle" },
-          h("span", null,
-            "Level ",
-            index + 1,
-            ": "),
-          this.getLevelTarget(level))),
-      h("div", { class: "ChallengeRewardMessage" },
-        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg", alt: "win" }),
-        h("span", null,
-          translate('win', this.language),
-          ": "),
-        h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)),
-      this.getLevelBetRangesDetails(level))))));
-  }
-  getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle },
-      h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }),
-      h("span", null, translate('details', this.language))));
-  }
-  render() {
-    return h("div", { class: `ChallengeDetailsPopup ${this.device}` },
-      this.getActionsTemplate(),
-      h("div", { class: `ChallengeDetails ${this.challenge.IsNew ? 'IsNewChallenge' : ''}` },
-        this.getChallengeHeader(),
-        this.getChallengeCountdown(),
-        this.getToggleButton(),
-        this.getChallengeDetails(),
-        this.getChallengeLevels()));
-  }
-  static get is() { return "casino-engagement-suite-challenges-details"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["casino-engagement-suite-challenges-details.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["casino-engagement-suite-challenges-details.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": "''"
-    },
-    "challenge": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Challenge",
-        "resolved": "Challenge",
-        "references": {
-          "Challenge": {
-            "location": "import",
-            "path": "../../models/casino-challenges-details"
-          }
+    updateTimer() {
+        const expirationTime = new Date(this.challenge.ExpirationTime).getTime();
+        const now = new Date().getTime();
+        const distance = expirationTime - now;
+        if (distance < 1) {
+            clearInterval(this.interval);
+            this.timer = '';
+            this.isExpiredChallenge = true;
+            return;
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected challenge"
-      }
-    },
-    "inProgressChallenges": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<string>",
-        "resolved": "string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
+        const { days, hours, minutes, seconds } = {
+            days: String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+            hours: String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+            minutes: String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+            seconds: String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0')
+        };
+        this.timer = days === '00'
+            ? `${hours}h:${minutes}m:${seconds}s`
+            : `${days}d:${hours}h:${minutes}m`;
+    }
+    getLevelTarget(level) {
+        const targetTurnover = formatBalance(level.DisplayCurrencyTargetTurnover, this.challenge.CurrencySymbol);
+        let levelTarget = `${translate('place', this.language)} ${targetTurnover}`;
+        if (level.LevelTargetType === 1) {
+            levelTarget += ` ${translate('bet', this.language)}`;
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active challenges"
-      }
-    },
-    "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'"
-    },
-    "gameSlug": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Current game slug"
-      },
-      "attribute": "game-slug",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "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'"
-    },
-    "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
-    },
-    "pausedChallengeIds": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
+        else if (level.LevelTargetType === 2) {
+            levelTarget += ` ${translate('bets', this.language)} X ${level.TargetBetCount}`;
+        }
+        return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
+    }
+    getLevelBetRangesDetails(level) {
+        var _a, _b, _c, _d;
+        const isAccumulativeLevelType = level.LevelTargetType === 0;
+        if (isAccumulativeLevelType) {
+            const formattedMinBet = formatBalance((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet, this.challenge.CurrencySymbol);
+            const formattedMaxBet = formatBalance((_b = level.BetRange) === null || _b === void 0 ? void 0 : _b.MaxBet, this.challenge.CurrencySymbol);
+            const formattedContributionPercentage = level.LevelContributionPercent + '%';
+            const showMinBet = !!((_c = level.BetRange) === null || _c === void 0 ? void 0 : _c.MinBet);
+            const showMaxBet = !!((_d = level.BetRange) === null || _d === void 0 ? void 0 : _d.MaxBet);
+            const showContributionPercentage = level.LevelContributionPercent !== 100;
+            if (showMinBet || showMaxBet || showContributionPercentage) {
+                return (h("div", { class: 'ChallengeLevelBetDetails' }, showMinBet &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('minBet', this.language), ":  "), h("span", { class: 'ChallengeLevelBetRange' }, formattedMinBet)), showMaxBet &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('maxBet', this.language), ":  "), h("span", { class: 'ChallengeLevelBetRange' }, formattedMaxBet)), showContributionPercentage &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('contribution', this.language), ":  "), h("span", { class: 'ChallengeLevelBetContribution' }, formattedContributionPercentage))));
+            }
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Paused Challenge Ids"
-      },
-      "defaultValue": "[] as Array<string>"
     }
-  }; }
-  static get states() { return {
-    "limitStylingAppends": {},
-    "timer": {},
-    "showDetails": {},
-    "isExpiredChallenge": {}
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "back",
-      "name": "back",
-      "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": "challenge",
-      "methodName": "challengePropHandler"
-    }]; }
+    getChallengeLevels() {
+        const isChallengePaused = this.pausedChallengeIds.includes(this.challenge.ChallengeId);
+        const InProgressLevel = (level) => {
+            return level.ProgressStatus === 1 && !this.isExpiredChallenge && !isChallengePaused;
+        };
+        return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${InProgressLevel(level) ? 'InProgress' : ''}` }, h("casino-engagement-suite-progress-bar", { clientStylingUrl: this.clientStylingUrl, class: this.device, value: level.ProgressPercentage, "hide-percent": (level.ProgressPercentage === 0 && !InProgressLevel(level)) || level.ProgressPercentage === 100, disabled: this.isExpiredChallenge || isChallengePaused }, h("span", { slot: "Title", class: "ChallengeLevelTitle" }, h("span", null, "Level ", index + 1, ": "), this.getLevelTarget(level))), h("div", { class: "ChallengeRewardMessage" }, h("div", { class: "EngagementSuiteIconButton Reward" }), h("span", null, translate('win', this.language), ": "), h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)), this.getLevelBetRangesDetails(level))))));
+    }
+    getToggleButton() {
+        return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
+    }
+    render() {
+        return h("div", { key: '413a8354c03545a336b044a26f33275423548ee2', class: `ChallengeDetailsPopup ${this.device}` }, this.getActionsTemplate(), h("div", { key: 'e58aac0709effc8ed9df011c07b52ee6a0c4fa66', class: `ChallengeDetails ${this.challenge.IsNew ? 'IsNewChallenge' : ''}` }, this.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
+    }
+    static get is() { return "casino-engagement-suite-challenges-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-details.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": "''"
+            },
+            "challenge": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Challenge",
+                    "resolved": "Challenge",
+                    "references": {
+                        "Challenge": {
+                            "location": "import",
+                            "path": "../../models/casino-challenges-details",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-challenges-details/src/models/casino-challenges-details.ts::Challenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected challenge"
+                }
+            },
+            "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"
+                }
+            },
+            "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'"
+            },
+            "gameSlug": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current game slug"
+                },
+                "attribute": "game-slug",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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'"
+            },
+            "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
+            },
+            "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 {
+            "limitStylingAppends": {},
+            "timer": {},
+            "showDetails": {},
+            "isExpiredChallenge": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "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": "challenge",
+                "methodName": "challengePropHandler"
+            }];
+    }
 }