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

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

@@ -0,0 +1,472 @@
+import { h } from "@stencil/core";
+import { isBefore } from "date-fns";
+import { translate } from "../../utils/locale.utils";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { formatBalance } from "../../utils";
+export class CasinoEngagementSuiteJackpotDetails {
+    constructor() {
+        this.maxVisibleGames = 0;
+        this.handleTabChange = (e) => {
+            this.activeTab = +(e.target.getAttribute('data-index'));
+            this.visibleGames = [];
+            this.maxVisibleGames = 0;
+        };
+        this.handleLoadMore = () => {
+            this.visibleGames = this.jackpot.GamesInfo.slice(0, this.visibleGames.length + this.maxVisibleGames);
+        };
+        this.toggleShowDetails = () => {
+            this.showDetails = !this.showDetails;
+        };
+        this.toggleTooltip = () => {
+            this.showTooltip = !this.showTooltip;
+        };
+        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.close.emit();
+        };
+        this.handleBackClick = () => {
+            this.back.emit();
+        };
+        this.onGameClick = (ev) => {
+            const slug = ev.currentTarget.getAttribute('data-slug');
+            if (slug) {
+                window.postMessage({
+                    type: 'EngagementSuiteGameRedirect',
+                    data: {
+                        Slug: slug
+                    }
+                });
+            }
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.jackpot = undefined;
+        this.jackpotChangeStatusRequest = undefined;
+        this.language = 'en';
+        this.gameSlug = '';
+        this.device = 'Mobile';
+        this.limitStylingAppends = false;
+        this.timer = '';
+        this.disabledStatus = '';
+        this.activeTab = 1;
+        this.visibleGames = [];
+        this.enabled = false;
+        this.balance = undefined;
+        this.winBalance = undefined;
+        this.showDetails = false;
+        this.jackpotEndTime = '';
+        this.showTooltip = false;
+    }
+    handleEvent(e) {
+        const { type, data } = e === null || e === void 0 ? void 0 : e.data;
+        switch (type) {
+            case 'UpdateJackpotStatus': {
+                const data = e.data.data;
+                if (this.jackpot.JackpotId === data.JackpotId) {
+                    this.updateJackpotStatus(e.data.data);
+                }
+                break;
+            }
+            case 'JoinJackpotResult': {
+                const res = data;
+                if (res.Success && this.jackpot.JackpotId in res.JackpotIds) {
+                    this.enabled = this.jackpot.Enabled = res.JackpotIds[this.jackpot.JackpotId];
+                }
+                break;
+            }
+        }
+    }
+    handleJackpotUpdate() {
+        this.balance = this.jackpot.Balance;
+        this.winBalance = this.jackpot.WinBalance;
+    }
+    handleResize() {
+        this.activeTab === 2 && this.setVisibleGames();
+        this.showTooltip = false;
+    }
+    componentWillLoad() {
+        this.enabled = this.jackpot.Enabled;
+        this.balance = this.jackpot.Balance;
+        this.winBalance = this.jackpot.WinBalance;
+        this.jackpotEndTime = this.jackpot.JackpotEndTime;
+        this.disabledStatus = this.jackpot.Reason || '';
+        this.startCountdown();
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        if (this.activeTab === 2 && !this.maxVisibleGames) {
+            this.setVisibleGames();
+        }
+    }
+    disconnectedCallback() {
+        this.clearInterval();
+    }
+    clearInterval() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+    setVisibleGames() {
+        const gap = this.device === 'Mobile' ? 10 : 12;
+        const gamesPerRow = this.device === 'Mobile' ? 4 : 5;
+        const availableWidth = this.gamesListWrapperEl.offsetWidth - (gap * (gamesPerRow - 1));
+        const gameElWidth = availableWidth / gamesPerRow;
+        const gameElHeight = (gameElWidth / 74 * 40) + gap;
+        this.maxVisibleGames = Math.max(Math.floor(this.gamesListWrapperEl.offsetHeight / gameElHeight) * gamesPerRow, gamesPerRow);
+        this.visibleGames = this.jackpot.GamesInfo.slice(0, this.maxVisibleGames);
+    }
+    updateJackpotStatus(event) {
+        if (event.IsClosed) {
+            this.clearInterval();
+            this.disabledStatus = event.Reason;
+            this.activeTab = 1;
+        }
+        else {
+            this.disabledStatus = '';
+            this.jackpotEndTime = event.JackpotEndTime;
+            this.startCountdown();
+        }
+    }
+    getTopNavigationTemplate() {
+        return (h("div", { class: "JackpotDetailsNavigation" }, h("button", { class: "JackpotIconButton", onClick: this.handleBackClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })), h("div", { class: "JackpotPopupName" }, translate('jackpots', this.language)), h("button", { class: "JackpotIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "close" }))));
+    }
+    getJackpotBalance() {
+        return formatBalance(this.balance, this.jackpot.Currency);
+    }
+    getJoinButtonClasses() {
+        return {
+            PopupButton: true,
+            Active: this.enabled,
+            Loading: this.jackpot.Pending
+        };
+    }
+    getJackpotDetailsHeaderTemplate() {
+        const joinButtonDisabled = isBefore(new Date(this.jackpot.JackpotEndTime), new Date()) || !!this.disabledStatus;
+        return (h("div", { class: "JackpotDetailsHeader" }, h("div", null, h("div", { class: "JackpotType" }, this.jackpot.Type), h("div", { class: "JackpotBalance" }, this.getJackpotBalance())), h("div", { class: "JackpotDetailsHeaderSecondCol" }, h("button", { disabled: joinButtonDisabled, onClick: this.jackpotChangeStatusRequest, class: this.getJoinButtonClasses(), "data-id": this.jackpot.JackpotId }, this.enabled
+            ? translate('unjoin', this.language)
+            : translate('join', this.language)), !!this.winBalance && h("div", { class: "JackpotIsWon" }, translate('jackpotIsWon', this.language)))));
+    }
+    getTabsTemplate() {
+        return h("div", { class: "JackpotDetailsTabs" }, h("div", { "data-index": "1", onClick: this.handleTabChange, class: `JackpotDetailsTab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('info', this.language)), h("div", { "data-index": "2", onClick: this.handleTabChange, class: `JackpotDetailsTab ${this.activeTab === 2 ? 'Active' : ''}` }, translate('games', this.language)));
+    }
+    getTabsContentTemplate() {
+        return this.activeTab === 1
+            ? this.getJackpotInfoTemplate()
+            : this.getGamesTemplate();
+    }
+    getJackpotDetailsTemplate() {
+        return h("div", null, h("div", { class: "JackpotDetailsButton", onClick: this.toggleShowDetails }, h("div", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('jackpotDetails', this.language))), this.showDetails && h("div", { class: "JackpotDetailsContent" }, this.jackpot.Description && h("p", { class: "JackpotDescription" }, this.jackpot.Description), this.jackpot.JackpotRulesUrl && h("a", { class: "TermsAndConditions", href: this.jackpot.JackpotRulesUrl, target: "_blank" }, translate('tc', this.jackpot.JackpotRulesUrl))));
+    }
+    getBetLimitsRange() {
+        var _a, _b, _c, _d;
+        if (this.jackpot.BetLimits) {
+            const playerCurrency = this.jackpot.Currency;
+            const betCurrencies = Object.keys(this.jackpot.BetLimits);
+            const matchedCurrency = betCurrencies.find(currency => currency === playerCurrency);
+            const betCurrency = matchedCurrency ? matchedCurrency : betCurrencies[0];
+            const showMinBet = this.jackpot.BetLimits && !!((_a = this.jackpot.BetLimits[betCurrency]) === null || _a === void 0 ? void 0 : _a.MinBet);
+            const showMaxBet = this.jackpot.BetLimits && !!((_b = this.jackpot.BetLimits[betCurrency]) === null || _b === void 0 ? void 0 : _b.MaxBet);
+            const formattedMinBet = formatBalance((_c = this.jackpot.BetLimits[betCurrency]) === null || _c === void 0 ? void 0 : _c.MinBet, betCurrency);
+            const formattedMaxBet = formatBalance((_d = this.jackpot.BetLimits[betCurrency]) === null || _d === void 0 ? void 0 : _d.MaxBet, betCurrency);
+            return h("div", null, showMinBet && h("div", { class: "JackpotInfoItem" }, translate('minBet', this.language), ":\u00A0", h("span", null, formattedMinBet)), showMaxBet && h("div", { class: "JackpotInfoItem" }, translate('maxBet', this.language), ":\u00A0", h("span", null, formattedMaxBet)));
+        }
+    }
+    getJackpotInfoTemplate() {
+        const showDetails = !!(this.jackpot.Description || this.jackpot.JackpotRulesUrl);
+        return h("div", { class: "JackpotInfoTabContent" }, showDetails && this.getJackpotDetailsTemplate(), h("div", { class: "JackpotInfo" }, h("div", { class: "JackpotInfoItem" }, translate('betContribution', this.language), ":\u00A0", h("span", null, +this.jackpot.ContributionPercent, "%")), h("div", { class: "JackpotInfoItem" }, translate('type', this.language), ":\u00A0", h("span", null, this.jackpot.JackpotTypePresentation)), h("div", { class: "JackpotInfoItem" }, translate('winningProbability', this.language), ":\u00A0", h("span", null, "1:", this.jackpot.Probability)), h("div", { class: "JackpotInfoItem" }, translate('operatorContribution', this.language), ":\u00A0", h("span", null, +this.jackpot.OperatorContributionPercent, "%"), h("button", { class: "JackpotContributionTooltipButton", onClick: this.toggleTooltip })), this.getBetLimitsRange()));
+    }
+    getGamesTemplate() {
+        const list = this.visibleGames.map((game) => {
+            return h("div", { onClick: this.onGameClick, class: `JackpotGamesListItem ${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, key: game.CasinoGameId, "data-slug": game.GameSlug, style: { background: `center / cover url(${game.GameIcon}) no-repeat` }, title: game.GameName });
+        });
+        return [
+            h("div", { class: "JackpotGamesListWrapper", ref: el => this.gamesListWrapperEl = el }, h("div", { class: "JackpotGamesList" }, list)),
+            this.visibleGames.length < this.jackpot.GamesInfo.length
+                ? h("button", { class: "PopupButton Active JackpotGamesButton", onClick: this.handleLoadMore }, translate('loadMore', this.language))
+                : ''
+        ];
+    }
+    getJackpotCountdown() {
+        const timerMessage = translate(this.disabledStatus, this.language) || this.timer;
+        return (h("div", { class: `JackpotCountdown ${this.disabledStatus ? 'Suspended' : ''}` }, timerMessage));
+    }
+    startCountdown() {
+        this.updateTimer();
+        this.interval = setInterval(() => {
+            this.updateTimer();
+        }, 1000);
+    }
+    updateTimer() {
+        const expirationTime = new Date(this.jackpotEndTime).getTime();
+        const now = new Date().getTime();
+        const distance = expirationTime - now;
+        if (distance < 1) {
+            this.clearInterval();
+            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`;
+    }
+    getPopupClasses() {
+        return {
+            JackpotDetailsPopup: true,
+            Disabled: !!this.disabledStatus || isBefore(new Date(this.jackpot.JackpotEndTime), new Date()),
+            [this.device]: true,
+            [this.jackpot.Type.charAt(0).toUpperCase() + this.jackpot.Type.slice(1)]: true
+        };
+    }
+    getTooltipTemplate() {
+        return (h("div", { class: "JackpotsTooltipBackdrop" }, h("div", { class: "JackpotsTooltip" }, h("button", { class: "JackpotsIconButton", onClick: this.toggleTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('contributionTooltip', this.language))));
+    }
+    render() {
+        return h("div", { key: '1588370db82c0c7d4118fce75e60cb2e1204c9f3', class: this.getPopupClasses() }, this.getTopNavigationTemplate(), h("div", { key: '320b03501c86164369fc715590cfbbfa6dc8bf3e', class: "JackpotDetailsPopupContent" }, this.getJackpotDetailsHeaderTemplate(), this.getJackpotCountdown(), this.getTabsTemplate(), this.getTabsContentTemplate(), this.showTooltip && this.getTooltipTemplate()));
+    }
+    static get is() { return "casino-engagement-suite-jackpot-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-jackpot-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-jackpot-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": "''"
+            },
+            "jackpot": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Jackpot",
+                    "resolved": "Jackpot",
+                    "references": {
+                        "Jackpot": {
+                            "location": "import",
+                            "path": "../../models",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-jackpot-details/src/models/index.ts::Jackpot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected jackpot"
+                }
+            },
+            "jackpotChangeStatusRequest": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change jackpot status"
+                }
+            },
+            "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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "timer": {},
+            "disabledStatus": {},
+            "activeTab": {},
+            "visibleGames": {},
+            "enabled": {},
+            "balance": {},
+            "winBalance": {},
+            "showDetails": {},
+            "jackpotEndTime": {},
+            "showTooltip": {}
+        };
+    }
+    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": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "jackpot",
+                "methodName": "handleJackpotUpdate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

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

package/dist/collection/index.js

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

package/dist/collection/models/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/index.js

@@ -0,0 +1,5 @@
+export function formatBalance(amount, currency, maxAmount = 99999999) {
+    amount = Math.min(amount, maxAmount);
+    return `${currency} ${new Intl.NumberFormat('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+        .format(amount)}`;
+}

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

@@ -0,0 +1,22 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        jackpots: 'Jackpots',
+        join: 'Join',
+        unjoin: 'Unjoin',
+        info: 'Info',
+        games: 'Games',
+        operatorContribution: 'Operator Contribution',
+        type: 'Type',
+        winningProbability: 'Winning Probability',
+        tc: 'Terms & Conditions',
+        jackpotIsWon: 'Jackpot’s won!',
+        loadMore: 'Load More',
+        jackpotDetails: 'Jackpot Details',
+    }
+};
+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 };