@everymatrix/casino-engagement-suite-challenges-list 1.35.0 → 1.36.0

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/casino-engagement-suite-progress-bar",
+      "tags": [
+        "casino-engagement-suite-progress-bar"
+      ]
+    }
+  ],
   "bundles": []
 }

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

@@ -70,6 +70,7 @@ button:focus {
   border: 1px solid var(--emw--button-border-color, #403956);
   border-radius: 6px;
   position: relative;
+  cursor: pointer;
 }
 
 .ChallengeJoinButton.Joined::before,

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

@@ -2,7 +2,6 @@ import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stenc
 import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from '../../models/challenge';
 import { translate } from '../../utils/locale.utils';
 import '@everymatrix/casino-engagement-suite-progress-bar';
-import intervalToDuration from 'date-fns/intervalToDuration';
 import differenceInSeconds from 'date-fns/differenceInSeconds';
 export class CasinoEngagementSuiteChallengesList {
   constructor() {
@@ -53,7 +52,7 @@ export class CasinoEngagementSuiteChallengesList {
     };
     this.handleChallengeClick = (ev) => {
       const id = +ev.currentTarget.getAttribute('data-id');
-      window.postMessage({ type: `ChallengeClick`, id });
+      window.postMessage({ type: 'ChallengeClick', id });
     };
     this.showTooltip = () => {
       this.tooltip = true;
@@ -61,6 +60,35 @@ export class CasinoEngagementSuiteChallengesList {
     this.hideTooltip = () => {
       this.tooltip = false;
     };
+    this.changeChallengeStatus = (e) => {
+      e.stopPropagation();
+      const id = +e.currentTarget.getAttribute('data-id');
+      const inProgressChallenges = this.challenges.filter(c => c.Status === ChallengeProgressStatus.InProgress).map(c => c.Id);
+      if (inProgressChallenges.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          action: 'unjoin',
+          id,
+        });
+        return;
+      }
+      if ((inProgressChallenges === null || inProgressChallenges === void 0 ? void 0 : inProgressChallenges.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          action: 'join',
+          prevId: inProgressChallenges[0],
+          id,
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeAttendance',
+        confirmationData: {
+          action: 'join',
+          id,
+        },
+      });
+    };
   }
   challengesPropHandler(value) {
     if (!this.interval && value.length) {
@@ -104,23 +132,21 @@ export class CasinoEngagementSuiteChallengesList {
     }, 1000);
   }
   updateTimers() {
-    const now = new Date();
+    const now = new Date().getTime();
     this.timers = this.challenges.filter(challenge => challenge.Status !== ChallengeProgressStatus.Expired).reduce((acc, challenge) => {
-      const expirationDate = new Date(challenge.ExpirationTime);
-      const diff = differenceInSeconds(expirationDate, now);
-      const duration = intervalToDuration({
-        start: now,
-        end: expirationDate
-      });
+      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 = duration.days.toString().padStart(2, '0');
-        const hours = duration.hours.toString().padStart(2, '0');
-        const minutes = duration.minutes.toString().padStart(2, '0');
-        const seconds = duration.seconds.toString().padStart(2, '0');
+        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`;
@@ -172,9 +198,10 @@ export class CasinoEngagementSuiteChallengesList {
     return -1;
   }
   getChallengeHeaderTemplate(challenge) {
+    const { Id } = challenge;
     return h("div", { class: "ChallengeCardHeader" },
       h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName),
-      h("button", { class: challenge.Status === ChallengeProgressStatus.InProgress ? 'ChallengeJoinButton Joined' : 'ChallengeJoinButton' }, challenge.Status === ChallengeProgressStatus.InProgress
+      h("button", { class: challenge.Status === ChallengeProgressStatus.InProgress ? 'ChallengeJoinButton Joined' : 'ChallengeJoinButton', onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
         ? translate('unjoin', this.language)
         : translate('join', this.language)));
   }
@@ -195,7 +222,7 @@ export class CasinoEngagementSuiteChallengesList {
         h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })),
       h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)),
       h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick },
-        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose challenges list" })));
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close challenges list" })));
   }
   getListTemplate() {
     if (this.challenges.length) {
@@ -213,7 +240,7 @@ export class CasinoEngagementSuiteChallengesList {
       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: "\u0421lose tooltip" })),
+            h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })),
           translate('tooltip', this.language)));
     }
     else {