@everymatrix/casino-engagement-suite-challenges-details 1.0.69

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

@@ -0,0 +1,451 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { ChallengeProgressStatus } from "../../models/casino-challenges-details";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { formatBalance } from "../../utils";
+export class CasinoEngagementSuiteChallengesDetails {
+    constructor() {
+        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);
+            });
+        };
+        this.handleCloseClick = () => {
+            this.resetNewLabel();
+            this.close.emit();
+        };
+        this.handleBackClick = () => {
+            this.resetNewLabel();
+            this.back.emit();
+        };
+        this.onGameClick = (ev) => {
+            const slug = ev.currentTarget.getAttribute('data-slug');
+            if (slug) {
+                window.postMessage({
+                    type: 'EngagementSuiteGameRedirect',
+                    data: {
+                        Slug: slug
+                    }
+                });
+            }
+        };
+        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;
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.challenge = undefined;
+        this.inProgressChallenges = undefined;
+        this.language = 'en';
+        this.gameSlug = '';
+        this.device = 'Mobile';
+        this.isJoiningToChallenge = undefined;
+        this.pausedChallengeIds = [];
+        this.limitStylingAppends = false;
+        this.timer = '';
+        this.showDetails = false;
+        this.isExpiredChallenge = false;
+    }
+    challengePropHandler(value) {
+        if (!this.interval && value) {
+            this.updateTimer();
+            this.startCountdown();
+        }
+        if (this.interval && !value) {
+            clearInterval(this.interval);
+        }
+    }
+    componentWillLoad() {
+        this.challengePropHandler(this.challenge);
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    disconnectedCallback() {
+        this.interval && clearInterval(this.interval);
+    }
+    getActionsTemplate() {
+        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" })), 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
+            || this.challenge.Status === ChallengeProgressStatus.PendingLevelReward;
+        const isDisabledButton = this.isExpiredChallenge || this.isJoiningToChallenge ||
+            this.pausedChallengeIds.includes(this.challenge.ChallengeId);
+        const showJoinButton = ![ChallengeProgressStatus.Completed, ChallengeProgressStatus.Forfeited]
+            .includes(this.challenge.Status);
+        return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), showJoinButton ? (h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+                ${isDisabledButton ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
+            ? translate('unjoin', this.language)
+            : translate('join', this.language))) : null, h("div", { class: `ChallengeLabel ${this.challenge.IsNew ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))));
+    }
+    getChallengeCountdown() {
+        const timerMessage = this.isExpiredChallenge ? 'Expired' : this.timer;
+        const showChallengeCountdown = this.challenge.Status !== ChallengeProgressStatus.Forfeited;
+        return (showChallengeCountdown ? (h("div", { class: `ChallengeCountdown ${this.isExpiredChallenge ? 'Expired' : ''}` }, timerMessage)) : null);
+    }
+    getChallengeDetails() {
+        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("div", { 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 }))))))));
+    }
+    resetNewLabel() {
+        this.resetNewChallengeLabel.emit(this.challenge.Id);
+    }
+    startCountdown() {
+        this.interval = setInterval(() => {
+            this.updateTimer();
+        }, 1000);
+    }
+    updateTimer() {
+        const expirationTime = new Date(this.challenge.ExpirationTime).getTime();
+        const now = new Date().getTime();
+        const distance = expirationTime - now;
+        if (distance < 1) {
+            clearInterval(this.interval);
+            this.timer = '';
+            this.isExpiredChallenge = true;
+            return;
+        }
+        const { days, hours, minutes, seconds } = {
+            days: String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+            hours: String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+            minutes: String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+            seconds: String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0')
+        };
+        this.timer = days === '00'
+            ? `${hours}h:${minutes}m:${seconds}s`
+            : `${days}d:${hours}h:${minutes}m`;
+    }
+    getLevelTarget(level) {
+        const targetTurnover = formatBalance(level.DisplayCurrencyTargetTurnover, this.challenge.CurrencySymbol);
+        let levelTarget = `${translate('place', this.language)} ${targetTurnover}`;
+        if (level.LevelTargetType === 1) {
+            levelTarget += ` ${translate('bet', this.language)}`;
+        }
+        else if (level.LevelTargetType === 2) {
+            levelTarget += ` ${translate('bets', this.language)} X ${level.TargetBetCount}`;
+        }
+        return (h("span", { class: "ChallengeLevelTarget" }, levelTarget));
+    }
+    getLevelBetRangesDetails(level) {
+        var _a, _b, _c, _d;
+        const isAccumulativeLevelType = level.LevelTargetType === 0;
+        if (isAccumulativeLevelType) {
+            const formattedMinBet = formatBalance((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet, this.challenge.CurrencySymbol);
+            const formattedMaxBet = formatBalance((_b = level.BetRange) === null || _b === void 0 ? void 0 : _b.MaxBet, this.challenge.CurrencySymbol);
+            const formattedContributionPercentage = level.LevelContributionPercent + '%';
+            const showMinBet = !!((_c = level.BetRange) === null || _c === void 0 ? void 0 : _c.MinBet);
+            const showMaxBet = !!((_d = level.BetRange) === null || _d === void 0 ? void 0 : _d.MaxBet);
+            const showContributionPercentage = level.LevelContributionPercent !== 100;
+            if (showMinBet || showMaxBet || showContributionPercentage) {
+                return (h("div", { class: 'ChallengeLevelBetDetails' }, showMinBet &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('minBet', this.language), ":  "), h("span", { class: 'ChallengeLevelBetRange' }, formattedMinBet)), showMaxBet &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('maxBet', this.language), ":  "), h("span", { class: 'ChallengeLevelBetRange' }, formattedMaxBet)), showContributionPercentage &&
+                    h("div", { class: 'ChallengeLevelBetDetail' }, h("span", null, translate('contribution', this.language), ":  "), h("span", { class: 'ChallengeLevelBetContribution' }, formattedContributionPercentage))));
+            }
+        }
+    }
+    getChallengeLevels() {
+        const isChallengePaused = this.pausedChallengeIds.includes(this.challenge.ChallengeId);
+        const InProgressLevel = (level) => {
+            return level.ProgressStatus === 1 && !this.isExpiredChallenge && !isChallengePaused;
+        };
+        return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: `ChallengeLevelCard ${InProgressLevel(level) ? 'InProgress' : ''}` }, h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": (level.ProgressPercentage === 0 && !InProgressLevel(level)) || 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)), this.getLevelBetRangesDetails(level))))));
+    }
+    getToggleButton() {
+        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", { key: '413a8354c03545a336b044a26f33275423548ee2', class: `ChallengeDetailsPopup ${this.device}` }, this.getActionsTemplate(), h("div", { key: 'e58aac0709effc8ed9df011c07b52ee6a0c4fa66', class: `ChallengeDetails ${this.challenge.IsNew ? 'IsNewChallenge' : ''}` }, this.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
+    }
+    static get is() { return "casino-engagement-suite-challenges-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-challenges-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "challenge": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Challenge",
+                    "resolved": "Challenge",
+                    "references": {
+                        "Challenge": {
+                            "location": "import",
+                            "path": "../../models/casino-challenges-details",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-challenges-details/src/models/casino-challenges-details.ts::Challenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected challenge"
+                }
+            },
+            "inProgressChallenges": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active challenges"
+                }
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "gameSlug": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current game slug"
+                },
+                "attribute": "game-slug",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's device type"
+                },
+                "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
+            },
+            "pausedChallengeIds": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Paused Challenge Ids"
+                },
+                "defaultValue": "[] as Array<string>"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "timer": {},
+            "showDetails": {},
+            "isExpiredChallenge": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "resetNewChallengeLabel",
+                "name": "resetNewChallengeLabel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "challenge",
+                "methodName": "challengePropHandler"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export { CasinoEngagementSuiteChallengesDetails } from './casino-engagement-suite-challenges-details';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/casino-challenges-details.js

@@ -0,0 +1,16 @@
+export var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+    ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+export var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+    ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+    ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+    ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+    ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+    ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+    ChallengeProgressStatus[ChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));

package/dist/collection/utils/index.js

@@ -0,0 +1,10 @@
+export function formatBalance(amount, currency) {
+    return `${currency}${new Intl.NumberFormat('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+        .format(amount)}`;
+}
+export function formatBetRange(amount, currency) {
+    return `${currency}${new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+    }).format(amount).replace(/,/g, ' ')}`;
+}

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

@@ -0,0 +1,23 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        challenges: 'Challenges',
+        join: 'Join',
+        unjoin: 'Unjoin',
+        details: 'Challenge Details',
+        tc: 'Terms & Conditions',
+        level: 'Level',
+        place: 'Place',
+        bet: 'bet',
+        bets: 'bets',
+        win: 'Win',
+        minBet: 'Min Bet',
+        maxBet: 'Max Bet',
+        contribution: 'Contribution'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

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

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-c193b756.js';
+export { s as setNonce } from './index-c193b756.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["casino-engagement-suite-challenges-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[1040],"inProgressChallenges":[1040],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"pausedChallengeIds":[1040],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]},null,{"challenge":["challengePropHandler"]}],[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);
+});