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

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

@@ -0,0 +1,460 @@
+import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import '@everymatrix/casino-engagement-suite-progress-bar';
+import { formatBalance } from '../../utils';
+export class CasinoEngagementSuiteJackpotDetails {
+  constructor() {
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+    * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Current game slug
+     */
+    this.gameSlug = '';
+    /**
+    * User's device type
+     */
+    this.device = 'Mobile';
+    this.limitStylingAppends = false;
+    this.timer = '';
+    this.disabledStatus = '';
+    this.activeTab = 1;
+    this.visibleGames = [];
+    this.loading = false;
+    this.enabled = false;
+    this.showDetails = false;
+    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.changeJackpotStatus = (ev) => {
+      ev.stopPropagation();
+      window.postMessage({
+        type: 'JackpotChangeStatusRequest',
+        data: {
+          [this.jackpot.Id]: !this.jackpot.Enabled,
+        },
+      });
+      this.loading = true;
+    };
+    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
+          }
+        });
+      }
+    };
+  }
+  handleEvent(e) {
+    const { type, data } = e === null || e === void 0 ? void 0 : e.data;
+    switch (type) {
+      case 'UpdateJackpotStatus': {
+        this.updateJackpotStatus(e.data.data);
+        break;
+      }
+      case 'JoinJackpotResult': {
+        const res = data;
+        if (res.Success && this.jackpot.Id in res.JackpotIds) {
+          this.enabled = this.jackpot.Enabled = res.JackpotIds[this.jackpot.Id];
+        }
+        this.loading = false;
+        break;
+      }
+      case 'UpdateJackpotBalance': {
+        const jackpotUpdate = data
+          .find((updateMessage => updateMessage.JackpotId === this.jackpot.Id));
+        if (jackpotUpdate) {
+          this.balance = this.jackpot.Balance = jackpotUpdate.Balance;
+          this.winBalance = this.jackpot.WinBalance = jackpotUpdate.WinBalance;
+        }
+      }
+    }
+  }
+  componentWillLoad() {
+    this.startCountdown();
+    this.enabled = this.jackpot.Enabled;
+    this.balance = this.jackpot.Balance;
+    this.winBalance = this.jackpot.WinBalance;
+  }
+  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) {
+      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.floor(this.gamesListWrapperEl.offsetHeight / gameElHeight) * gamesPerRow;
+      this.visibleGames = this.jackpot.GamesInfo.slice(0, this.maxVisibleGames);
+    }
+  }
+  disconnectedCallback() {
+    this.clearInterval();
+  }
+  clearInterval() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+  updateJackpotStatus(event) {
+    if (event.IsClosed) {
+      this.clearInterval();
+      this.disabledStatus = event.Reason;
+      this.activeTab = 1;
+    }
+    else {
+      this.disabledStatus = '';
+      this.jackpot.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.winBalance || this.balance, this.jackpot.Currency);
+  }
+  getJoinButtonClasses() {
+    return {
+      PopupButton: true,
+      Active: this.enabled,
+      Loading: this.loading
+    };
+  }
+  getJackpotDetailsHeaderTemplate() {
+    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: !!this.disabledStatus, onClick: this.changeJackpotStatus, class: this.getJoinButtonClasses() }, 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("p", { class: "JackpotDescription" }, this.jackpot.Description));
+  }
+  getJackpotInfoTemplate() {
+    return h("div", null,
+      this.jackpot.Description && this.getJackpotDetailsTemplate(),
+      h("div", { class: "JackpotInfo" },
+        h("div", { class: "JackpotInfoItem" },
+          translate('operatorContribution', this.language),
+          ":\u00A0",
+          h("span", null,
+            this.jackpot.OperatorContributionPercent,
+            "%")),
+        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)),
+        this.jackpot.JackpotRulesUrl && h("div", { class: "JackpotInfoItem" },
+          h("a", { class: "tc", href: this.jackpot.JackpotRulesUrl, target: "_blank" }, translate('tc', this.jackpot.JackpotRulesUrl)))));
+  }
+  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 = this.disabledStatus || 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.jackpot.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,
+      [this.device]: true,
+      [this.jackpot.Type.charAt(0).toUpperCase() + this.jackpot.Type.slice(1)]: true
+    };
+  }
+  render() {
+    return h("div", { class: this.getPopupClasses() },
+      this.getTopNavigationTemplate(),
+      h("div", { class: "JackpotDetailsPopupContent" },
+        this.getJackpotDetailsHeaderTemplate(),
+        this.getJackpotCountdown(),
+        this.getTabsTemplate(),
+        this.getTabsContentTemplate()));
+  }
+  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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected jackpot"
+      }
+    },
+    "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": {},
+    "loading": {},
+    "enabled": {},
+    "balance": {},
+    "winBalance": {},
+    "showDetails": {}
+  }; }
+  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 listeners() { return [{
+      "name": "message",
+      "method": "handleEvent",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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/components/casino-engagement-suite-jackpot-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CasinoEngagementSuiteJackpotDetails extends Components.CasinoEngagementSuiteJackpotDetails, HTMLElement {}
+export const CasinoEngagementSuiteJackpotDetails: {
+  prototype: CasinoEngagementSuiteJackpotDetails;
+  new (): CasinoEngagementSuiteJackpotDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;