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

package/dist/cjs/{index-79c88755.js → index-0a011384.js}

@@ -279,6 +279,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'key')
             ;
         else if ((!isProp ) &&
@@ -547,11 +572,14 @@ const patch = (oldVNode, newVNode) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
+    const tag = newVNode.$tag$;
     const text = newVNode.$text$;
     if (text === null) {
         // element node
         {
-            {
+            if (tag === 'slot')
+                ;
+            else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
                 // this updates the element's css classes, attrs, props, listeners, etc.
@@ -819,6 +847,15 @@ const addHydratedFlag = (elm) => elm.classList.add('hydrated')
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-79c88755.js');
+const index = require('./index-0a011384.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["casino-engagement-suite-challenges-list.cjs",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32]},[[8,"message","handleEvent"]]]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-challenges-list_2.cjs",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"inProgressChallenges":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32],"newChallengeIds":[32],"pausedChallengeIds":[32]},[[8,"message","handleEvent"]]],[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);
   });
 };
 

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,
@@ -123,6 +124,12 @@ button:focus {
   border-radius: 99px;
 }
 
+.Disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: auto;
+}
+
 .ChallengesListEmpty {
   padding: 20px 32px;
 }
@@ -149,6 +156,33 @@ button:focus {
   line-height: 12px;
 }
 
+.ChallengeLabel {
+  min-width: 35px;
+  height: 18px;
+  background: linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);
+  border-radius: 2px;
+  display: none;
+  position: absolute;
+  top: -11px;
+  right: 11px;
+  padding: 0 2px;
+  align-items: center;
+  justify-content: center;
+}
+.ChallengeLabel span {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 10px;
+  line-height: 10px;
+  font-weight: 700;
+  font-family: "Montserrat", sans-serif;
+  color: var(--emw--color-typography, #1E1638);
+}
+
+.ShowChallengeLabel {
+  display: inline-flex;
+}
+
 .ChallengesTooltipBackdrop {
   padding: 48px 30px 0;
   position: absolute;

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() {
@@ -29,6 +28,8 @@ export class CasinoEngagementSuiteChallengesList {
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -50,10 +51,12 @@ export class CasinoEngagementSuiteChallengesList {
     this.handleCloseClick = () => {
       this.close.emit();
       this.tooltip = false;
+      this.newChallengeIds = [];
     };
     this.handleChallengeClick = (ev) => {
       const id = +ev.currentTarget.getAttribute('data-id');
-      window.postMessage({ type: `ChallengeClick`, id });
+      window.postMessage({ type: 'ChallengeClick', id });
+      this.newChallengeIds = this.newChallengeIds.filter(item => item !== id);
     };
     this.showTooltip = () => {
       this.tooltip = true;
@@ -61,6 +64,32 @@ export class CasinoEngagementSuiteChallengesList {
     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,
+        },
+      });
+    };
   }
   challengesPropHandler(value) {
     if (!this.interval && value.length) {
@@ -72,19 +101,42 @@ export class CasinoEngagementSuiteChallengesList {
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -104,23 +156,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`;
@@ -138,14 +188,16 @@ export class CasinoEngagementSuiteChallengesList {
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -172,22 +224,27 @@ 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'} ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
         ? translate('unjoin', this.language)
         : translate('join', this.language)));
   }
   getChallengeTemplate(challenge) {
     const challengeProgress = this.getChallengeProgress(challenge);
     const countdown = this.timers[challenge.Id];
+    const isNewChallenge = this.newChallengeIds.includes(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 (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id },
       this.getChallengeHeaderTemplate(challenge),
-      progressTemplate));
+      progressTemplate,
+      h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` },
+        h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
     return h("header", { class: "ChallengesListPopupHeader" },
@@ -195,7 +252,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) {
@@ -209,22 +266,17 @@ export class CasinoEngagementSuiteChallengesList {
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      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" })),
-          translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    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)));
   }
   render() {
     return h("div", { class: `ChallengesListPopup ${this.device}` },
       this.getHeaderTemplate(),
       this.getListTemplate(),
-      this.getTooltipTemplate());
+      this.tooltip && this.getTooltipTemplate());
   }
   static get is() { return "casino-engagement-suite-challenges-list"; }
   static get encapsulation() { return "shadow"; }
@@ -330,12 +382,50 @@ export class CasinoEngagementSuiteChallengesList {
         "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<number>",
+        "resolved": "number[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active challenges"
+      }
     }
   }; }
   static get states() { return {
     "tooltip": {},
     "timers": {},
-    "limitStylingAppends": {}
+    "limitStylingAppends": {},
+    "newChallengeIds": {},
+    "pausedChallengeIds": {}
   }; }
   static get events() { return [{
       "method": "close",

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

@@ -5,6 +5,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'