@everymatrix/casino-engagement-suite-challenges-details 1.35.0 → 1.36.1

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

@@ -129,6 +129,8 @@ button:focus {
   display: flex;
   flex-direction: row;
   align-items: center;
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 12px;
   color: var(--emw--color-primary-variant, #666178);
   cursor: pointer;
 }
@@ -160,6 +162,7 @@ button:focus {
 }
 .CollapseDetails .TC a {
   color: var(--emw--color-secondary, #59D1FF);
+  text-underline-offset: 3px;
 }
 .CollapseDetails .ChallengeGames {
   width: 100%;
@@ -201,8 +204,12 @@ button:focus {
   padding: 16px;
   border-radius: 8px;
 }
+.ChallengeLevels .ChallengeLevelCard .ChallengeLevelTitle {
+  margin-bottom: 2px;
+}
 .ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage {
   margin-top: 10px;
+  line-height: 15px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -210,7 +217,6 @@ button:focus {
 }
 .ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage {
   font-weight: var(--emw--font-weight-semibold, 600);
-  line-height: 15px;
   word-break: break-all;
 }
 .ChallengeLevels .InProgress {
@@ -233,6 +239,10 @@ button:focus {
   mask-composite: exclude;
 }
 
+.ChallengeDetailsPopup.Tablet .ChallengeActions,
+.ChallengeDetailsPopup.Desktop .ChallengeActions {
+  padding-top: 16px;
+}
 .ChallengeDetailsPopup.Tablet .ChallengeIconButton,
 .ChallengeDetailsPopup.Desktop .ChallengeIconButton {
   width: 24px;
@@ -264,7 +274,12 @@ button:focus {
 .ChallengeDetailsPopup.Desktop .ChallengeCollapseButton {
   margin-bottom: 12px;
 }
-.ChallengeDetailsPopup.Tablet .ChallengeLevels .CustomRewardMessage,
-.ChallengeDetailsPopup.Desktop .ChallengeLevels .CustomRewardMessage {
+.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeLevelTitle,
+.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeLevelTitle {
+  margin-bottom: 4px;
+}
+.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeRewardMessage,
+.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeRewardMessage {
+  margin-top: 12px;
   line-height: 17px;
 }

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

@@ -1,6 +1,7 @@
 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';
 export class CasinoEngagementSuiteChallengesDetails {
   constructor() {
     /**
@@ -47,17 +48,54 @@ export class CasinoEngagementSuiteChallengesDetails {
     };
     this.handleCloseClick = () => {
       this.close.emit();
-      clearInterval(this.interval);
-      this.isExpiredChallenge = false;
-      this.showDetails = false;
+    };
+    this.handleBackClick = () => {
+      this.back.emit();
+    };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    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() {
-    this.updateTimer();
-    this.startCountdown();
+  challengePropHandler(value) {
+    if (!this.interval && value) {
+      this.updateTimer();
+      this.startCountdown();
+    }
+    if (this.interval && !value) {
+      clearInterval(this.interval);
+    }
   }
   componentWillLoad() {
-    this.challengePropHandler();
+    this.challengePropHandler(this.challenge);
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -68,9 +106,12 @@ export class CasinoEngagementSuiteChallengesDetails {
       this.limitStylingAppends = true;
     }
   }
+  disconnectedCallback() {
+    this.interval && clearInterval(this.interval);
+  }
   getActionsTemplate() {
     return (h("header", { class: "ChallengeActions" },
-      h("button", { class: "ChallengeIconButton" },
+      h("button", { class: "ChallengeIconButton", onClick: this.handleBackClick },
         h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })),
       this.device !== 'Mobile' && h("div", { class: "ChallengePopupName" }, translate('challenges', this.language)),
       h("button", { class: "ChallengeIconButton", onClick: this.handleCloseClick },
@@ -81,8 +122,8 @@ export class CasinoEngagementSuiteChallengesDetails {
     const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
     return (h("div", { class: "ChallengeDetailsHeader" },
       h("span", { class: "ChallengeName" }, presentationName),
-      h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+      h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
         ? translate('unjoin', this.language)
         : translate('join', this.language))));
   }
@@ -98,11 +139,8 @@ export class CasinoEngagementSuiteChallengesDetails {
       description && h("span", { 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" },
-        h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+      (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 }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -130,7 +168,7 @@ export class CasinoEngagementSuiteChallengesDetails {
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -140,13 +178,19 @@ export class CasinoEngagementSuiteChallengesDetails {
     return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
   }
   getChallengeLevels() {
-    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${level.ProgressStatus === 1 ? 'InProgress' : ''}` },
-      h("div", { class: "ChallengeLevelHeader" },
-        h("span", null,
-          "Level ",
-          index + 1,
-          ": "),
-        this.getLevelTarget(level)),
+    const isChallengePaused = this.challenge.Status === ChallengeProgressStatus.Started
+      && this.challenge.LevelProgresses[0].ProgressPercentage > 0;
+    const getClass = (level) => {
+      return `ChallengeLevelCard ${(level.ProgressStatus === 1 && !this.isExpiredChallenge && !isChallengePaused) ? 'InProgress' : ''}`;
+    };
+    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: getClass(level) },
+      h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": level.ProgressPercentage === 0 || 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,
@@ -155,7 +199,7 @@ export class CasinoEngagementSuiteChallengesDetails {
         h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
   }
   getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails },
+    return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle },
       h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }),
       h("span", null, translate('details', this.language))));
   }
@@ -234,6 +278,25 @@ export class CasinoEngagementSuiteChallengesDetails {
         "text": "Selected challenge"
       }
     },
+    "inProgressChallenges": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<number>",
+        "resolved": "number[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active challenges"
+      }
+    },
     "language": {
       "type": "string",
       "mutable": false,
@@ -287,6 +350,23 @@ export class CasinoEngagementSuiteChallengesDetails {
       "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
     }
   }; }
   static get states() { return {
@@ -310,6 +390,21 @@ export class CasinoEngagementSuiteChallengesDetails {
         "resolved": "void",
         "references": {}
       }
+    }, {
+      "method": "back",
+      "name": "back",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

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

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './casino-engagement-suite-progress-bar2.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['en'];
@@ -37,7 +38,7 @@ var ChallengeProgressStatus;
   ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
 })(ChallengeProgressStatus || (ChallengeProgressStatus = {}));
 
-const casinoEngagementSuiteChallengesDetailsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap\"); :host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengeDetailsPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengeActions{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengeActions .ChallengeIconButton{width:16px;height:16px;cursor:pointer}.ChallengeActions .ChallengePopupName{color:var(--emw--color-gray-100, #BBB9C3);font-size:16px;font-weight:500;line-height:16px}.ChallengeDetails{padding:0px 19px 10px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengeDetails::-webkit-scrollbar{display:none}.ChallengeDetailsHeader{display:flex;justify-content:space-between;gap:12px}.ChallengeDetailsHeader .ChallengeName{font-family:\"Montserrat\", sans-serif;font-size:var(--emw--font-size-medium, 18px);font-weight:var(--emw--font-weight-bold, 700);line-height:22px;color:var(--emfe-w-color-white, #FFF);word-break:break-all}.ChallengeJoinButton.Joined::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengeCountdown{font-weight:var(--emw--font-weight-normal, 400);font-size:var(--emw--font-size-x-small, 12px);line-height:12px;margin:12px 0 24px;color:var(--emw--color-gray-150, #BBB9C3)}.ChallengeCountdown.Expired{font-weight:var(--emw--font-weight-normal, 700);color:var(--emfe-w-color-white, #FFF)}.ChallengeCollapseButton{margin-bottom:14px;display:flex;flex-direction:row;align-items:center;color:var(--emw--color-primary-variant, #666178);cursor:pointer}.ChallengeCollapseButton .Toggle{width:16px;height:16px;display:block;margin-right:4px}.ChallengeCollapseButton .Closed{background:url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg\") no-repeat center/contain}.ChallengeCollapseButton .Open{background:url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg\") no-repeat center/contain}.CollapseDetails{display:none;font-size:var(--emw--font-size-small, 14px);line-height:17px;font-weight:var(--emw--font-weight-normal, 400)}.CollapseDetails .ChallengeDescription{color:var(--emfe-w-color-white, #FFF);margin-bottom:12px}.CollapseDetails .TC{margin:12px 0 16px}.CollapseDetails .TC a{color:var(--emw--color-secondary, #59D1FF)}.CollapseDetails .ChallengeGames{width:100%;overflow-y:auto;display:flex;gap:4px}.CollapseDetails .ChallengeGames::-webkit-scrollbar{height:2px;background:none}.CollapseDetails .ChallengeGames::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--emw--color-background, #666178)}.CollapseDetails .ChallengeGames .Game img{width:96px;height:50px;border-radius:2px;cursor:pointer}.ShowDetails{display:block}.ChallengeLevels{display:flex;flex-direction:column;gap:16px;margin-top:24px;color:var(--emw--color-primary, #8F8B9C);font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-normal, 400);line-height:12px}.ChallengeLevels .ChallengeLevelCard{border:1px solid var(--emw--button-border-color, #403956);padding:16px;border-radius:8px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage{margin-top:10px;display:flex;flex-direction:row;align-items:center;gap:4px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage{font-weight:var(--emw--font-weight-semibold, 600);line-height:15px;word-break:break-all}.ChallengeLevels .InProgress{position:relative;border:none}.ChallengeLevels .InProgress .ChallengeLevelTarget,.ChallengeLevels .InProgress .CustomRewardMessage{color:var(--emfe-w-color-white, #FFF)}.ChallengeLevels .InProgress::before{content:\"\";position:absolute;inset:0;border-radius:8px;padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeDetailsPopup.Tablet .ChallengeIconButton,.ChallengeDetailsPopup.Desktop .ChallengeIconButton{width:24px;height:24px}.ChallengeDetailsPopup.Tablet .ChallengeDetails,.ChallengeDetailsPopup.Desktop .ChallengeDetails{padding:20px 24px}.ChallengeDetailsPopup.Tablet .ChallengeName,.ChallengeDetailsPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengeDetailsPopup.Tablet .ChallengeJoinButton,.ChallengeDetailsPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengeDetailsPopup.Tablet .ChallengeCountdown,.ChallengeDetailsPopup.Tablet .ChallengeLevels,.ChallengeDetailsPopup.Desktop .ChallengeCountdown,.ChallengeDetailsPopup.Desktop .ChallengeLevels{font-size:var(--emw--font-size-small, 14px);line-height:14px}.ChallengeDetailsPopup.Tablet .ChallengeCollapseButton,.ChallengeDetailsPopup.Desktop .ChallengeCollapseButton{margin-bottom:12px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .CustomRewardMessage,.ChallengeDetailsPopup.Desktop .ChallengeLevels .CustomRewardMessage{line-height:17px}";
+const casinoEngagementSuiteChallengesDetailsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap\"); :host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengeDetailsPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengeActions{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengeActions .ChallengeIconButton{width:16px;height:16px;cursor:pointer}.ChallengeActions .ChallengePopupName{color:var(--emw--color-gray-100, #BBB9C3);font-size:16px;font-weight:500;line-height:16px}.ChallengeDetails{padding:0px 19px 10px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengeDetails::-webkit-scrollbar{display:none}.ChallengeDetailsHeader{display:flex;justify-content:space-between;gap:12px}.ChallengeDetailsHeader .ChallengeName{font-family:\"Montserrat\", sans-serif;font-size:var(--emw--font-size-medium, 18px);font-weight:var(--emw--font-weight-bold, 700);line-height:22px;color:var(--emfe-w-color-white, #FFF);word-break:break-all}.ChallengeJoinButton.Joined::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengeCountdown{font-weight:var(--emw--font-weight-normal, 400);font-size:var(--emw--font-size-x-small, 12px);line-height:12px;margin:12px 0 24px;color:var(--emw--color-gray-150, #BBB9C3)}.ChallengeCountdown.Expired{font-weight:var(--emw--font-weight-normal, 700);color:var(--emfe-w-color-white, #FFF)}.ChallengeCollapseButton{margin-bottom:14px;display:flex;flex-direction:row;align-items:center;font-size:var(--emw--font-size-x-small, 12px);line-height:12px;color:var(--emw--color-primary-variant, #666178);cursor:pointer}.ChallengeCollapseButton .Toggle{width:16px;height:16px;display:block;margin-right:4px}.ChallengeCollapseButton .Closed{background:url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg\") no-repeat center/contain}.ChallengeCollapseButton .Open{background:url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg\") no-repeat center/contain}.CollapseDetails{display:none;font-size:var(--emw--font-size-small, 14px);line-height:17px;font-weight:var(--emw--font-weight-normal, 400)}.CollapseDetails .ChallengeDescription{color:var(--emfe-w-color-white, #FFF);margin-bottom:12px}.CollapseDetails .TC{margin:12px 0 16px}.CollapseDetails .TC a{color:var(--emw--color-secondary, #59D1FF);text-underline-offset:3px}.CollapseDetails .ChallengeGames{width:100%;overflow-y:auto;display:flex;gap:4px}.CollapseDetails .ChallengeGames::-webkit-scrollbar{height:2px;background:none}.CollapseDetails .ChallengeGames::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--emw--color-background, #666178)}.CollapseDetails .ChallengeGames .Game img{width:96px;height:50px;border-radius:2px;cursor:pointer}.ShowDetails{display:block}.ChallengeLevels{display:flex;flex-direction:column;gap:16px;margin-top:24px;color:var(--emw--color-primary, #8F8B9C);font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-normal, 400);line-height:12px}.ChallengeLevels .ChallengeLevelCard{border:1px solid var(--emw--button-border-color, #403956);padding:16px;border-radius:8px}.ChallengeLevels .ChallengeLevelCard .ChallengeLevelTitle{margin-bottom:2px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage{margin-top:10px;line-height:15px;display:flex;flex-direction:row;align-items:center;gap:4px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage{font-weight:var(--emw--font-weight-semibold, 600);word-break:break-all}.ChallengeLevels .InProgress{position:relative;border:none}.ChallengeLevels .InProgress .ChallengeLevelTarget,.ChallengeLevels .InProgress .CustomRewardMessage{color:var(--emfe-w-color-white, #FFF)}.ChallengeLevels .InProgress::before{content:\"\";position:absolute;inset:0;border-radius:8px;padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeDetailsPopup.Tablet .ChallengeActions,.ChallengeDetailsPopup.Desktop .ChallengeActions{padding-top:16px}.ChallengeDetailsPopup.Tablet .ChallengeIconButton,.ChallengeDetailsPopup.Desktop .ChallengeIconButton{width:24px;height:24px}.ChallengeDetailsPopup.Tablet .ChallengeDetails,.ChallengeDetailsPopup.Desktop .ChallengeDetails{padding:20px 24px}.ChallengeDetailsPopup.Tablet .ChallengeName,.ChallengeDetailsPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengeDetailsPopup.Tablet .ChallengeJoinButton,.ChallengeDetailsPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengeDetailsPopup.Tablet .ChallengeCountdown,.ChallengeDetailsPopup.Tablet .ChallengeLevels,.ChallengeDetailsPopup.Desktop .ChallengeCountdown,.ChallengeDetailsPopup.Desktop .ChallengeLevels{font-size:var(--emw--font-size-small, 14px);line-height:14px}.ChallengeDetailsPopup.Tablet .ChallengeCollapseButton,.ChallengeDetailsPopup.Desktop .ChallengeCollapseButton{margin-bottom:12px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeLevelTitle,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeLevelTitle{margin-bottom:4px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeRewardMessage,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeRewardMessage{margin-top:12px;line-height:17px}";
 
 const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,6 +46,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     this.__registerHost();
     this.__attachShadow();
     this.close = createEvent(this, "close", 7);
+    this.back = createEvent(this, "back", 7);
     /**
      * Client custom styling via string
      */
@@ -89,17 +91,54 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     };
     this.handleCloseClick = () => {
       this.close.emit();
-      clearInterval(this.interval);
-      this.isExpiredChallenge = false;
-      this.showDetails = false;
+    };
+    this.handleBackClick = () => {
+      this.back.emit();
+    };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    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() {
-    this.updateTimer();
-    this.startCountdown();
+  challengePropHandler(value) {
+    if (!this.interval && value) {
+      this.updateTimer();
+      this.startCountdown();
+    }
+    if (this.interval && !value) {
+      clearInterval(this.interval);
+    }
   }
   componentWillLoad() {
-    this.challengePropHandler();
+    this.challengePropHandler(this.challenge);
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -110,14 +149,17 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
       this.limitStylingAppends = true;
     }
   }
+  disconnectedCallback() {
+    this.interval && clearInterval(this.interval);
+  }
   getActionsTemplate() {
-    return (h("header", { class: "ChallengeActions" }, h("button", { class: "ChallengeIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })), this.device !== 'Mobile' && h("div", { class: "ChallengePopupName" }, translate('challenges', this.language)), h("button", { class: "ChallengeIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "close" }))));
+    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" })), this.device !== 'Mobile' && h("div", { class: "ChallengePopupName" }, translate('challenges', this.language)), 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;
-    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
       ? translate('unjoin', this.language)
       : translate('join', this.language))));
   }
@@ -129,10 +171,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     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("span", { 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" }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("span", { 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 }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -160,7 +199,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -170,10 +209,15 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
   }
   getChallengeLevels() {
-    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${level.ProgressStatus === 1 ? 'InProgress' : ''}` }, h("div", { class: "ChallengeLevelHeader" }, 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)))))));
+    const isChallengePaused = this.challenge.Status === ChallengeProgressStatus.Started
+      && this.challenge.LevelProgresses[0].ProgressPercentage > 0;
+    const getClass = (level) => {
+      return `ChallengeLevelCard ${(level.ProgressStatus === 1 && !this.isExpiredChallenge && !isChallengePaused) ? 'InProgress' : ''}`;
+    };
+    return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: getClass(level) }, h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": level.ProgressPercentage === 0 || 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)))))));
   }
   getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
+    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.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
@@ -187,9 +231,11 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "challenge": [16],
+    "inProgressChallenges": [16],
     "language": [1],
     "gameSlug": [1, "game-slug"],
     "device": [1],
+    "isJoiningToChallenge": [1028, "is-joining-to-challenge"],
     "limitStylingAppends": [32],
     "timer": [32],
     "showDetails": [32],
@@ -199,13 +245,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["casino-engagement-suite-challenges-details"];
+  const components = ["casino-engagement-suite-challenges-details", "casino-engagement-suite-progress-bar"];
   components.forEach(tagName => { switch (tagName) {
     case "casino-engagement-suite-challenges-details":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CasinoEngagementSuiteChallengesDetails$1);
       }
       break;
+    case "casino-engagement-suite-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/casino-engagement-suite-progress-bar.js

@@ -0,0 +1,6 @@
+import { C as CasinoEngagementSuiteProgressBar$1, d as defineCustomElement$1 } from './casino-engagement-suite-progress-bar2.js';
+
+const CasinoEngagementSuiteProgressBar = CasinoEngagementSuiteProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteProgressBar, defineCustomElement };

package/dist/components/casino-engagement-suite-progress-bar2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+
+const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Value for the widget
+     */
+    this.value = 0;
+    /**
+     * Shows disabled styles
+     */
+    this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.limitStylingAppends = 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);
+      });
+    };
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  getProgressBarClasses() {
+    return {
+      ProgressBar: true,
+      Completed: this.value === 100,
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
+    };
+  }
+  render() {
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+  }
+  get host() { return this; }
+  static get style() { return casinoEngagementSuiteProgressBarCss; }
+}, [1, "casino-engagement-suite-progress-bar", {
+    "value": [2],
+    "disabled": [4],
+    "hidePercent": [4, "hide-percent"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteProgressBar);
+      }
+      break;
+  } });
+}
+
+export { CasinoEngagementSuiteProgressBar as C, defineCustomElement as d };

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

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-13f457d0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c5abae48.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-challenges-details",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-challenges-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"inProgressChallenges":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 });