@everymatrix/casino-challenges-overlay 0.17.103 → 0.17.105

package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.js

@@ -4,11 +4,11 @@ import bgIcon from "../../assets/bg-icon.svg";
 import bellIcon from "../../assets/bell.svg";
 import giftIcon from "../../assets/gift.svg";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
-import { EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeRewardType } from "../../utils/types";
+import { EChallengeProgressLevelStatus, EChallengeProgressStatus, EChallengeRewardType, EChallengesTabs } from "../../utils/types";
 import "../../../../../casino-challenges-overlay-modal/dist/types/index";
+import "../../../../../casino-challenges-overlay-drawer/dist/types/index";
 export class CasinoChallengesOverlay {
     constructor() {
-        this.activeChallengesTabIndex = 1;
         this.updateChallengesArray = (challengeId, isEnabled, isExpired) => {
             this.challenges = this.challenges.map((challenge) => {
                 if (challenge.ChallengeId !== challengeId) {
@@ -29,28 +29,42 @@ export class CasinoChallengesOverlay {
             this.modalIsFreeSpinsGranted = false;
             this.modalBonusProgramGames = [];
         };
-        this.goToDetailsPage = () => {
-            window.parent.postMessage({
-                type: 'GoToDetailsPage',
-                info: {
-                    challengeId: this.activeChallenge,
-                    activeChallengesTabIndex: this.activeChallengesTabIndex
-                }
-            }, '*');
+        this.handleClick = () => {
+            var _a;
+            if (this.extendedIngameWidget) {
+                this.showDrawer = true;
+                return;
+            }
+            if (this.inProgressCount > 0 && ((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.ChallengeId)) {
+                window.parent.postMessage({
+                    type: 'GoToDetailsPage',
+                    info: {
+                        challengeId: this.activeChallenge.ChallengeId,
+                        activeChallengesTabIndex: EChallengesTabs.Active
+                    }
+                }, '*');
+            }
+            else {
+                window.postMessage({ type: 'GoToChallengesPage', tab: EChallengesTabs.Promo }, '*');
+            }
         };
+        this.closeDrawer = () => {
+            this.showDrawer = false;
+        };
+        this.isActiveChallenge = ({ Status }) => Status === EChallengeProgressStatus.Started || Status === EChallengeProgressStatus.Paused;
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
         this.challenges = undefined;
+        this.extendedIngameWidget = false;
         this.progress = 0;
-        this.isGrayed = false;
         this.isNew = false;
         this.isGift = false;
         this.isNotification = false;
         this.inProgressCount = 0;
-        this.activeChallenge = '';
+        this.activeChallenge = undefined;
         this.completedLevelId = '';
         this.prevUpdateEvent = undefined;
         this.showModal = false;
@@ -60,6 +74,7 @@ export class CasinoChallengesOverlay {
         this.modalOrderNumber = 1;
         this.modalIsFreeSpinsGranted = false;
         this.modalBonusProgramGames = [];
+        this.showDrawer = false;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -90,8 +105,7 @@ export class CasinoChallengesOverlay {
                     if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress) {
                         if (level.ProgressPercentage >= maxPercentage) {
                             maxPercentage = level.ProgressPercentage;
-                            this.activeChallenge = challenge.ChallengeId;
-                            this.isGrayed = false;
+                            this.activeChallenge = challenge;
                         }
                     }
                 }
@@ -178,17 +192,15 @@ export class CasinoChallengesOverlay {
                 break;
             }
             case 'ChangeChallengeProgressStatus': {
-                const currentProgress = (_g = this.challenges) === null || _g === void 0 ? void 0 : _g.find((x) => (x === null || x === void 0 ? void 0 : x.ChallengeId) === this.activeChallenge);
-                this.challenges = (_h = this.challenges) === null || _h === void 0 ? void 0 : _h.map((x) => {
-                    if (this.isGrayed &&
-                        this.inProgressCount === 1 &&
-                        currentProgress &&
-                        (currentProgress === null || currentProgress === void 0 ? void 0 : currentProgress.Id) !== (data === null || data === void 0 ? void 0 : data.ChallengeProgressId) &&
-                        (currentProgress === null || currentProgress === void 0 ? void 0 : currentProgress.Id) === x.Id) {
-                        return Object.assign(Object.assign({}, x), { Status: EChallengeProgressStatus.Forfeited });
-                    }
-                    return x.Id === (data === null || data === void 0 ? void 0 : data.ChallengeProgressId) ? Object.assign(Object.assign({}, x), { Status: data === null || data === void 0 ? void 0 : data.ChallengeProgressStatus }) : x;
-                });
+                this.challenges = (_g = this.challenges) === null || _g === void 0 ? void 0 : _g.map((x) => x.Id === (data === null || data === void 0 ? void 0 : data.ChallengeProgressId) ? Object.assign(Object.assign({}, x), { Status: data === null || data === void 0 ? void 0 : data.ChallengeProgressStatus }) : x);
+                break;
+            }
+            case 'NewChallengeProgressGranted': {
+                const newChallenge = data;
+                if ((_h = this.challenges) === null || _h === void 0 ? void 0 : _h.some((x) => x.Id === (newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.Id)))
+                    break;
+                this.challenges = [...this.challenges, newChallenge];
+                break;
             }
         }
     }
@@ -211,31 +223,17 @@ export class CasinoChallengesOverlay {
         return false;
     }
     handleStatusEvent(data, isExpired) {
+        var _a;
         const isChallengeExist = this.challenges.find((challenge) => challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.ChallengeId));
         if (!isChallengeExist) {
             return;
         }
-        if ((data === null || data === void 0 ? void 0 : data.ChallengeId) === this.activeChallenge && !(data === null || data === void 0 ? void 0 : data.IsEnabled)) {
+        if ((data === null || data === void 0 ? void 0 : data.ChallengeId) === ((_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.ChallengeId) && !(data === null || data === void 0 ? void 0 : data.IsEnabled)) {
             this.isNotification = true;
-            if (this.inProgressCount === 1) {
-                this.statusTimeoutId = setTimeout(() => {
-                    if ((data === null || data === void 0 ? void 0 : data.ChallengeId) === this.activeChallenge) {
-                        if (this.inProgressCount === 1) {
-                            this.isGrayed = true;
-                        }
-                        else {
-                            this.updateChallengesArray(data === null || data === void 0 ? void 0 : data.ChallengeId, data === null || data === void 0 ? void 0 : data.IsEnabled, isExpired);
-                        }
-                    }
-                    this.isNotification = false;
-                }, 10000);
-            }
-            else if (this.inProgressCount > 1) {
-                this.statusTimeoutId = setTimeout(() => {
-                    this.updateChallengesArray(data === null || data === void 0 ? void 0 : data.ChallengeId, data === null || data === void 0 ? void 0 : data.IsEnabled, isExpired);
-                    this.isNotification = false;
-                }, 10000);
-            }
+            this.statusTimeoutId = setTimeout(() => {
+                this.updateChallengesArray(data === null || data === void 0 ? void 0 : data.ChallengeId, data === null || data === void 0 ? void 0 : data.IsEnabled, isExpired);
+                this.isNotification = false;
+            }, 10000);
         }
         else {
             this.updateChallengesArray(data === null || data === void 0 ? void 0 : data.ChallengeId, data === null || data === void 0 ? void 0 : data.IsEnabled, isExpired);
@@ -245,6 +243,13 @@ export class CasinoChallengesOverlay {
         if (this.translationUrl) {
             resolveTranslationUrl(this.translationUrl);
         }
+        if (!document.getElementById('cherry-bomb-font')) {
+            const link = document.createElement('link');
+            link.id = 'cherry-bomb-font';
+            link.rel = 'stylesheet';
+            link.href = 'https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap';
+            document.head.appendChild(link);
+        }
     }
     componentDidLoad() {
         if (this.stylingContainer) {
@@ -365,16 +370,25 @@ export class CasinoChallengesOverlay {
      */
     async init(config) {
         this.challenges = config.challenges;
+        this.extendedIngameWidget = String(config === null || config === void 0 ? void 0 : config.extendedIngameWidget).toLowerCase() === 'true';
     }
     render() {
+        var _a, _b, _c;
         const currProgress = this.completedLevelId ? 100 : this.progress;
         const dot = this.getCapsuleDotPosition(currProgress);
-        return (h("div", { key: '639d5d2272af4364490409a540e8a43b860aa21e', ref: (el) => (this.stylingContainer = el) }, this.inProgressCount > 0 && (h("div", { key: '1908b6c7642a44c845b5835a530c755de5a66ddb', class: "container", onClick: this.goToDetailsPage }, h("div", { key: '27119842af3826143d1b1c092dfbc822265a12f1', class: `circle ${this.isGrayed ? 'grayed' : ''}`, style: {
+        const hasActiveProgress = this.inProgressCount > 0;
+        const activeProgressId = hasActiveProgress
+            ? (_a = this.activeChallenge) === null || _a === void 0 ? void 0 : _a.Id
+            : (_c = (_b = this.challenges) === null || _b === void 0 ? void 0 : _b.find(this.isActiveChallenge)) === null || _c === void 0 ? void 0 : _c.Id;
+        return (h("div", { key: '018163dcf771c05058f5031cd8cfc280821967c3', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '2371f5fde52da2459ec2a8bd3d07b8a63212de00', class: "container", onClick: this.handleClick }, h("div", { key: '3db9cf35ccd29acefe7df6cadbfb129c896669dd', class: "circle", style: {
                 '--progress': `${currProgress}%`
-            } }, h("img", { key: '52467d911cc7934708605b2c4ba8f284c7c2268d', class: "circle__img", src: bgIcon }), h("div", { key: '6b53bb87e026fdc18b72f35e9feb24f3ed640d19', class: "circle__content" }, h("span", { key: '1bcf879a911b0032c59c9972ae3197315cec4cfb' }, Math.floor(currProgress), "%")), dot && (h("div", { key: '6377568c12a5c0999a46f8320f27249d2d3c9efa', class: "dot", style: {
+            } }, h("img", { key: '8ef7b99fc1ef49fde9616283b7bdfb21dcc175ba', class: "circle__img", src: bgIcon }), h("div", { key: '31211661c353641b9f81810c395ab23d069919ce', class: "circle__content" }, hasActiveProgress ? (h("span", null, Math.floor(currProgress), "%")) : (h("span", null, translate('join', this.language)))), dot && (h("div", { key: '5ee00b99b0ad5abe5d7c0d38a2e3cb5bfede3d81', class: "dot", style: {
                 left: `${dot.x}px`,
                 top: `${dot.y}px`
-            } }))), !this.isGrayed && h("div", { key: '98744b4743572ea10e578bf595c0b6df690d0afe', class: `badge ${this.isNew ? 'new' : ''}` }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: '1f91b25bd3b4538cdd16312741e2c8b62bd57607', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl })));
+            } }))), hasActiveProgress && (h("div", { key: '016411269e205666af6a0ee8b5213e313715a9e7', class: {
+                badge: true,
+                new: this.isNew
+            } }, this.renderBadgeContent()))), h("casino-challenges-overlay-modal", { key: 'c5b6a2cf21e7a3828c22bb05342c0d0258448c16', isOpen: this.showModal, handleClick: this.closeModal, reward: this.modalReward, addition: this.modalAddition, isFreeSpinsGranted: this.modalIsFreeSpinsGranted, bonusProgramGames: this.modalBonusProgramGames, errored: this.modalErrored, orderNumber: this.modalOrderNumber, translationUrl: this.translationUrl, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl }), this.extendedIngameWidget && (h("casino-challenges-overlay-drawer", { key: '932823367fae1026297948d0ac85fbb449f96265', mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, language: this.language, isOpen: this.showDrawer, handleClose: this.closeDrawer, challenges: this.challenges, initialProgressId: activeProgressId }))));
     }
     static get is() { return "casino-challenges-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -497,13 +511,30 @@ export class CasinoChallengesOverlay {
                     "tags": [],
                     "text": "User challenges list"
                 }
+            },
+            "extendedIngameWidget": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extended widget version feature flag"
+                },
+                "attribute": "extended-ingame-widget",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "progress": {},
-            "isGrayed": {},
             "isNew": {},
             "isGift": {},
             "isNotification": {},
@@ -517,17 +548,18 @@ export class CasinoChallengesOverlay {
             "modalAddition": {},
             "modalOrderNumber": {},
             "modalIsFreeSpinsGranted": {},
-            "modalBonusProgramGames": {}
+            "modalBonusProgramGames": {},
+            "showDrawer": {}
         };
     }
     static get methods() {
         return {
             "init": {
                 "complexType": {
-                    "signature": "(config: { challenges: IChallenge[]; }) => Promise<void>",
+                    "signature": "(config: ICasinoChallengesOverlayInitProps) => Promise<void>",
                     "parameters": [{
                             "name": "config",
-                            "type": "{ challenges: IChallenge[]; }",
+                            "type": "ICasinoChallengesOverlayInitProps",
                             "docs": ""
                         }],
                     "references": {
@@ -535,10 +567,10 @@ export class CasinoChallengesOverlay {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "IChallenge": {
+                        "ICasinoChallengesOverlayInitProps": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "../../../../packages/stencil/casino-challenges-overlay/src/utils/types.ts::IChallenge"
+                            "id": "../../../../packages/stencil/casino-challenges-overlay/src/utils/types.ts::ICasinoChallengesOverlayInitProps"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -3,6 +3,7 @@ const DEFAULT_LANGUAGE = 'en';
 export const TRANSLATIONS = {
     en: {
         new: 'new',
+        join: 'Join',
         // casino-challenges-overlay-modal
         congrats: 'Congratulations!',
         continue: 'Continue',

package/dist/collection/utils/types.js

@@ -34,9 +34,23 @@ export var EChallengeProgressStatus;
     EChallengeProgressStatus[EChallengeProgressStatus["Awaiting"] = 6] = "Awaiting";
     EChallengeProgressStatus[EChallengeProgressStatus["Paused"] = 7] = "Paused";
 })(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
+export var EChallengesTabs;
+(function (EChallengesTabs) {
+    EChallengesTabs[EChallengesTabs["Promo"] = 0] = "Promo";
+    EChallengesTabs[EChallengesTabs["Active"] = 1] = "Active";
+    EChallengesTabs[EChallengesTabs["Pending"] = 2] = "Pending";
+    EChallengesTabs[EChallengesTabs["Finished"] = 3] = "Finished";
+    EChallengesTabs[EChallengesTabs["Code"] = 4] = "Code";
+})(EChallengesTabs || (EChallengesTabs = {}));
 export var EChallengeLevelTargetType;
 (function (EChallengeLevelTargetType) {
     EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
     EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
     EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
 })(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+export var EContributedFrom;
+(function (EContributedFrom) {
+    EContributedFrom[EContributedFrom["Casino"] = 0] = "Casino";
+    EContributedFrom[EContributedFrom["Any"] = 1] = "Any";
+    EContributedFrom[EContributedFrom["Sportsbook"] = 2] = "Sportsbook";
+})(EContributedFrom || (EContributedFrom = {}));