@everymatrix/casino-engagement-suite-challenges-list 1.39.2 → 1.40.0

package/dist/cjs/{index-1216b764.js → index-0a011384.js}

@@ -47,6 +47,40 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
         return false;
     })()
     ;
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = getHostListenerTarget(elm, flags) ;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 8 /* TargetWindow */)
+        return win;
+    return elm;
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
 const createTime = (fnName, tagName = '') => {
     {
@@ -647,6 +681,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const instance = hostRef.$lazyInstance$ ;
     let promise;
     if (isInitialLoad) {
+        {
+            hostRef.$flags$ |= 256 /* isListenReady */;
+            if (hostRef.$queuedListeners$) {
+                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$ = null;
+            }
+        }
         {
             promise = safeCall(instance, 'componentWillLoad');
         }
@@ -1081,6 +1122,12 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // not the first time this has connected
+            // reattach any event listeners to the host
+            // since they would have been removed when disconnected
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+        }
         endConnected();
     }
 };
@@ -1088,6 +1135,12 @@ const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
         const instance = hostRef.$lazyInstance$ ;
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$.map((rmListener) => rmListener());
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
         {
             safeCall(instance, 'disconnectedCallback');
         }
@@ -1117,6 +1170,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
@@ -1203,6 +1259,7 @@ const registerHost = (elm, cmpMeta) => {
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1216b764.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_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],"pausedChallengeIds":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[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);
+  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],"pausedChallengeIds":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32],"activeTab":[32],"historyLoading":[32],"challengesHistory":[32],"openedHistoryIds":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
 :host {
   display: block;
   font-family: inherit;
@@ -55,11 +54,13 @@ button:focus {
   line-height: 14px;
 }
 
+.HistoryList,
 .ChallengesListWrapper {
   overflow-y: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+.HistoryList::-webkit-scrollbar,
 .ChallengesListWrapper::-webkit-scrollbar {
   display: none;
 }
@@ -213,6 +214,161 @@ button:focus {
   position: absolute;
 }
 
+.Tabs::after,
+.HistoryCols::after,
+.HistoryListItem.Opened .HistoryListItemBody::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--emw--color-typography, #FFF);
+  opacity: 0.1;
+}
+
+.TabsWrapper {
+  padding: 0 20px;
+  margin: 8px 0;
+}
+.TabsWrapper .Tabs {
+  display: flex;
+  position: relative;
+}
+.TabsWrapper .Tabs .Tab {
+  padding: 9px 16px 7px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 15px;
+  color: var(--emw--color-background, #666178);
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+.TabsWrapper .Tabs .Tab.Active {
+  color: var(--emw--color-typography, #FFF);
+  border-color: var(--emw--color-typography, #FFF);
+}
+
+.HistoryWrapper {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.HistoryWrapper .HistoryEmptyMessage {
+  margin-top: 8px;
+  font-size: var(--emw--font-size-x-small, 14px);
+  color: var(--emw--color-gray-100, #BBB9C3);
+  line-height: 30px;
+}
+.HistoryWrapper .HistoryCols {
+  padding: 12px 0;
+  position: relative;
+  display: flex;
+}
+.HistoryWrapper .HistoryCols .HistoryColName {
+  padding: 0 5px;
+  font-size: var(--emw--font-size-x-small, 12px);
+  color: var(--emw--color-gray-100, #BBB9C3);
+}
+.HistoryWrapper .HistoryCols .HistoryColName.Level {
+  flex-basis: 90px;
+}
+.HistoryWrapper .HistoryCols .HistoryColName.Status {
+  flex-basis: 100px;
+}
+.HistoryWrapper .HistoryLoader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: inherit;
+  font-size: var(--emw--font-size-x-small, 12px);
+  color: var(--emw--color-primary, #8F8B9C);
+}
+.HistoryWrapper .HistoryLoader casino-engagement-suite-progress-bar {
+  margin-bottom: 8px;
+  width: 100px;
+}
+.HistoryWrapper .HistoryListItem {
+  margin-top: 8px;
+}
+.HistoryWrapper .HistoryListItem.Opened .HistoryListItemButton {
+  transform: rotate(180deg);
+}
+.HistoryWrapper .HistoryListItem.Opened .HistoryListItemBody {
+  padding-bottom: 8px;
+  grid-template-rows: 1fr;
+}
+.HistoryWrapper .HistoryListItem .HistoryListItemHeader {
+  padding: 16px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--emw--color-typography, #FFFFFF);
+  font-size: var(--emw--font-size-small, 14px);
+}
+.HistoryWrapper .HistoryListItem .HistoryListItemButton {
+  transition: transform 0.3s ease-out;
+  width: 16px;
+  height: 16px;
+  background: center/100% url(https://static.everymatrix.com/gic/img/engagement-suite/arrow-down.svg) no-repeat;
+}
+.HistoryWrapper .HistoryListItem .HistoryListItemBody {
+  position: relative;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-out;
+}
+.HistoryWrapper .HistoryListItem .HistoryListItemBody > div {
+  overflow: hidden;
+}
+.HistoryWrapper .HistoryListItem .HistoryListItemLevelCard {
+  padding: 12px 0;
+}
+.HistoryWrapper .HistoryListItem .HistoryLevelInfo {
+  display: flex;
+  font-size: var(--emw--font-size-x-small, 12px);
+  color: var(--emw--color-gray-100, #BBB9C3);
+}
+.HistoryWrapper .HistoryListItem .HistoryLevelInfo .Level {
+  flex-basis: 70px;
+}
+.HistoryWrapper .HistoryListItem .HistoryLevelInfo .Time {
+  flex-grow: 1;
+  text-align: right;
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-size: var(--emw--font-size-x-small, 10px);
+  font-weight: var(--emw--font-weight-bold, 700);
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardStatusIcon,
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsIcon {
+  height: 14px;
+  width: 14px;
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsItem {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--emw--color-typography, #FFF);
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsItem .HistoryRewardStatusIcon {
+  background: center/100% url(https://static.everymatrix.com/gic/img/engagement-suite/check.svg) no-repeat;
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsItem.IsNotRewarded {
+  color: var(--emw--color-background, #666178);
+}
+.HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsItem.IsNotRewarded .HistoryRewardStatusIcon {
+  background-image: url(https://static.everymatrix.com/gic/img/engagement-suite/close.svg);
+}
+
 .ChallengesListPopup.Tablet .ChallengesListPopupHeader,
 .ChallengesListPopup.Desktop .ChallengesListPopupHeader {
   padding-top: 16px;
@@ -277,4 +433,92 @@ button:focus {
 .ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton {
   top: 24px;
   right: 24px;
+}
+.ChallengesListPopup.Tablet .TabsWrapper,
+.ChallengesListPopup.Desktop .TabsWrapper {
+  padding: 0 24px;
+  margin: 20px 0;
+}
+.ChallengesListPopup.Tablet .TabsWrapper .Tabs .Tab,
+.ChallengesListPopup.Desktop .TabsWrapper .Tabs .Tab {
+  font-size: var(--emw--font-size-small, 16px);
+}
+.ChallengesListPopup.Tablet .HistoryWrapper,
+.ChallengesListPopup.Desktop .HistoryWrapper {
+  padding: 0 24px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryEmptyMessage,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryEmptyMessage {
+  margin-top: 20px;
+  font-size: var(--emw--font-size-small, 16px);
+  line-height: 20px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryCols,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryCols {
+  gap: 15px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryCols .HistoryColName,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryCols .HistoryColName {
+  padding: 0 12px;
+  font-size: var(--emw--font-size-small, 16px);
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryCols .HistoryColName.Level,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryCols .HistoryColName.Level {
+  flex-basis: 140px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryCols .HistoryColName.Status,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryCols .HistoryColName.Status {
+  flex-basis: 200px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryLoader,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryLoader {
+  font-size: var(--emw--font-size-small, 16px);
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryLoader casino-engagement-suite-progress-bar,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryLoader casino-engagement-suite-progress-bar {
+  margin-bottom: 10px;
+  width: 150px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem {
+  margin-top: 20px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem.Opened .HistoryListItemBody,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem.Opened .HistoryListItemBody {
+  padding-bottom: 24px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryListItemHeader,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryListItemHeader {
+  padding: 17px 5px;
+  font-size: var(--emw--font-size-small, 16px);
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryListItemButton,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryListItemButton {
+  width: 24px;
+  height: 24px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryListItemLevelCard,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryListItemLevelCard {
+  padding: 12px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryLevelInfo,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryLevelInfo {
+  font-size: var(--emw--font-size-small, 16px);
+  gap: 70px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryLevelInfo .Level,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryLevelInfo .Level {
+  flex-basis: 80px;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryRewardsList,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryRewardsList {
+  margin-top: 12px;
+  gap: 12px;
+  font-size: var(--emw--font-size-small, 14px);
+  align-items: flex-end;
+}
+.ChallengesListPopup.Tablet .HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsIcon,
+.ChallengesListPopup.Desktop .HistoryWrapper .HistoryListItem .HistoryRewardsList .HistoryRewardsIcon {
+  height: 24px;
+  flex-basis: 24px;
 }

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

@@ -1,7 +1,8 @@
-import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';
 import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from '../../models/challenge';
 import { translate } from '../../utils/locale.utils';
 import '@everymatrix/casino-engagement-suite-progress-bar';
+import { getChallengesHistoryTemplate, getHistoryLoaderTemplate } from '../../renders/ChallengesHistory';
 export class CasinoEngagementSuiteChallengesList {
   constructor() {
     /**
@@ -31,6 +32,9 @@ export class CasinoEngagementSuiteChallengesList {
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.activeTab = 1;
+    this.historyLoading = false;
+    this.openedHistoryIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -49,6 +53,23 @@ export class CasinoEngagementSuiteChallengesList {
         console.log('Error ', err);
       });
     };
+    this.handleTabChange = (e) => {
+      this.activeTab = +(e.target.getAttribute('data-index'));
+      if (this.activeTab === 2) {
+        this.sendHistoryRequest();
+      }
+    };
+    this.toggleChallengeHistory = (ev) => {
+      const id = ev.currentTarget.getAttribute('data-id');
+      const index = this.openedHistoryIds.findIndex(historyId => historyId === id);
+      if (index > -1) {
+        this.openedHistoryIds.splice(index, 1);
+      }
+      else {
+        this.openedHistoryIds.push(id);
+      }
+      this.openedHistoryIds = [...this.openedHistoryIds];
+    };
     this.handleCloseClick = () => {
       this.close.emit();
       this.tooltip = false;
@@ -91,6 +112,13 @@ export class CasinoEngagementSuiteChallengesList {
       });
     };
   }
+  handleEvent(e) {
+    const { type } = e === null || e === void 0 ? void 0 : e.data;
+    if (type === 'ChallengesHistoryResponse') {
+      this.challengesHistory = e.data.data;
+      this.historyLoading = false;
+    }
+  }
   challengesPropHandler(value) {
     if (!this.interval && value.length) {
       this.updateTimers();
@@ -115,6 +143,12 @@ export class CasinoEngagementSuiteChallengesList {
   disconnectedCallback() {
     this.interval && clearInterval(this.interval);
   }
+  sendHistoryRequest() {
+    this.historyLoading = true;
+    window.postMessage({
+      type: 'ChallengesHistoryRequest'
+    });
+  }
   startCountdown() {
     this.interval = setInterval(() => {
       this.updateTimers();
@@ -226,7 +260,7 @@ export class CasinoEngagementSuiteChallengesList {
       h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick },
         h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close missions list" })));
   }
-  getListTemplate() {
+  getListTabTemplate() {
     if (this.challenges.length) {
       return h("div", { class: "ChallengesListWrapper" },
         h("div", { class: "ChallengesList" }, this.challenges.map(challenge => this.getChallengeTemplate(challenge))));
@@ -244,10 +278,32 @@ export class CasinoEngagementSuiteChallengesList {
           h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })),
         translate('tooltip', this.language)));
   }
+  getHistoryTabTemplate() {
+    return h("div", { class: "HistoryWrapper" },
+      h("div", { class: "HistoryCols" },
+        h("div", { class: "HistoryColName Level" }, translate('level', this.language)),
+        h("div", { class: "HistoryColName Status" }, translate('status', this.language)),
+        h("div", { class: "HistoryColName Time" }, translate('time', this.language))),
+      this.historyLoading
+        ? getHistoryLoaderTemplate(this.language)
+        : getChallengesHistoryTemplate(this.challengesHistory, this.openedHistoryIds, this.toggleChallengeHistory, this.language));
+  }
+  getTabsTemplate() {
+    return h("div", { class: "TabsWrapper" },
+      h("div", { class: "Tabs" },
+        h("div", { "data-index": "1", onClick: this.handleTabChange, class: `Tab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('missions', this.language)),
+        h("div", { "data-index": "2", onClick: this.handleTabChange, class: `Tab ${this.activeTab === 2 ? 'Active' : ''}` }, translate('history', this.language))));
+  }
+  getTabsContentTemplate() {
+    return this.activeTab === 1
+      ? this.getListTabTemplate()
+      : this.getHistoryTabTemplate();
+  }
   render() {
     return h("div", { class: `ChallengesListPopup ${this.device}` },
       this.getHeaderTemplate(),
-      this.getListTemplate(),
+      this.getTabsTemplate(),
+      this.getTabsContentTemplate(),
       this.tooltip && this.getTooltipTemplate());
   }
   static get is() { return "casino-engagement-suite-challenges-list"; }
@@ -415,7 +471,11 @@ export class CasinoEngagementSuiteChallengesList {
   static get states() { return {
     "tooltip": {},
     "timers": {},
-    "limitStylingAppends": {}
+    "limitStylingAppends": {},
+    "activeTab": {},
+    "historyLoading": {},
+    "challengesHistory": {},
+    "openedHistoryIds": {}
   }; }
   static get events() { return [{
       "method": "close",
@@ -453,4 +513,11 @@ export class CasinoEngagementSuiteChallengesList {
       "propName": "challenges",
       "methodName": "challengesPropHandler"
     }]; }
+  static get listeners() { return [{
+      "name": "message",
+      "method": "handleEvent",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/models/challenge.js

@@ -1,3 +1,11 @@
+export var ChallengeRewardType;
+(function (ChallengeRewardType) {
+  ChallengeRewardType[ChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+  ChallengeRewardType[ChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+  ChallengeRewardType[ChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+  ChallengeRewardType[ChallengeRewardType["Challenge"] = 3] = "Challenge";
+  ChallengeRewardType[ChallengeRewardType["Custom"] = 4] = "Custom";
+})(ChallengeRewardType || (ChallengeRewardType = {}));
 export var ChallengeLevelProgressStatus;
 (function (ChallengeLevelProgressStatus) {
   ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";

package/dist/collection/renders/ChallengesHistory.js

@@ -0,0 +1,55 @@
+import { ChallengeRewardType } from '../models/challenge';
+import { h } from '@stencil/core';
+import { translate } from '../utils/locale.utils';
+import { format } from 'date-fns';
+export const getHistoryLoaderTemplate = (lang) => {
+  return h("div", { class: "HistoryLoader" },
+    h("casino-engagement-suite-progress-bar", { indeterminate: true }),
+    h("span", null, translate('loading', lang)));
+};
+const getRewardNameByType = (type, lang) => {
+  switch (type) {
+    case 0: return translate('freeSpins', lang);
+    case 1: return translate('luckyWheel', lang);
+    case 2: return translate('leaderboard', lang);
+    case 3: return translate('mission', lang);
+  }
+};
+export const getRewardTemplate = (reward, lang) => {
+  const isCustom = reward.Type === ChallengeRewardType.Custom;
+  const rewardName = isCustom ? reward.RewardDescription : getRewardNameByType(reward.Type, lang);
+  const isRewarded = isCustom || reward.IsRewarded;
+  return h("div", { class: `HistoryRewardsItem ${isRewarded || isCustom ? 'IsRewarded' : 'IsNotRewarded'}` },
+    h("span", { class: "HistoryRewardsItemName" }, rewardName),
+    !isCustom && h("div", { class: "HistoryRewardStatusIcon" }));
+};
+export const getHistoryLevelRewardsTemplate = (level, lang) => {
+  return h("div", { class: "HistoryRewardsList" },
+    h("img", { class: "HistoryRewardsIcon", src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward-list.svg", alt: "Reward" }),
+    Object.values(level.Rewards).map(reward => getRewardTemplate(reward, lang)));
+};
+export const getHistoryLevelTemplate = (level, index, lang) => {
+  return h("div", { class: "HistoryLevelInfo" },
+    h("span", { class: "Level" }, `${translate('level', lang)} ${index + 1}`),
+    h("span", { class: "Status" }, level.IsCompleted
+      ? translate('completed', lang)
+      : translate('expired', lang)),
+    h("span", { class: "Time" }, format(new Date(level.Time), 'LLL d, yyyy HH:mm:ss')));
+};
+export const getChallengesHistoryTemplate = (histories, openedHistoryIds, toggleChallengeHistory, lang) => {
+  if (histories.length === 0) {
+    return h("p", { class: "HistoryEmptyMessage" }, translate('noHistory', lang));
+  }
+  return h("div", { class: "HistoryList" }, histories.map((history) => {
+    return h("div", { key: history.ProgressId, class: `HistoryListItem ${openedHistoryIds.includes(history.ProgressId) ? 'Opened' : 'Closed'}` },
+      h("header", { class: "HistoryListItemHeader" },
+        history.Name,
+        h("button", { onClick: toggleChallengeHistory, "data-id": history.ProgressId, class: "HistoryListItemButton" })),
+      h("div", { class: "HistoryListItemBody" },
+        h("div", null, history.Levels.map((level, index) => {
+          return h("div", { class: "HistoryListItemLevelCard" },
+            getHistoryLevelTemplate(level, index, lang),
+            level.Rewards && getHistoryLevelRewardsTemplate(level, lang));
+        }))));
+  }));
+};

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

@@ -8,7 +8,19 @@ const TRANSLATIONS = {
     new: 'new',
     noMissions: 'No Missions yet',
     tryOtherGames: 'Try winning Missions as rewards or launching other booster games',
-    tooltip: 'Mission where your real money bets contribute towards the level progress to achieve the level reward'
+    tooltip: 'Mission where your real money bets contribute towards the level progress to achieve the level reward',
+    history: 'History',
+    level: 'Level',
+    status: 'Status',
+    time: 'Time',
+    loading: 'Loading...',
+    completed: 'Completed',
+    expired: 'Expired',
+    noHistory: 'No missions’ history available (last 30 days)',
+    freeSpins: 'Free Spins',
+    luckyWheel: 'Lucky Wheel',
+    leaderboard: 'Leaderboard',
+    mission: 'Mission'
   }
 };
 export const translate = (key, customLang) => {