@everymatrix/lottery-game-page 1.31.2 → 1.32.4

package/dist/collection/components/lottery-game-page/lottery-game-page.js

@@ -1,658 +0,0 @@
-import { Component, h, Prop, State, Listen, Element, Event, getAssetPath } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
-import { isMobile } from "../../utils/utils";
-import '@everymatrix/lottery-ticket-controller';
-import '@everymatrix/helper-modal';
-import '@everymatrix/lottery-game-details';
-import '@everymatrix/lottery-draw-results-history';
-import '@everymatrix/lottery-draw-results';
-export class LotteryGamePage {
-  constructor() {
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Shows the auto-pick button
-     */
-    this.autoPick = false;
-    /**
-     * Shows the reset button
-     */
-    this.resetButton = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingurl = '';
-    this.clientStylingUrlContent = '';
-    this.tickets = [];
-    this.tabIndex = 0;
-    this.hasErrors = false;
-    this.totalAmount = 0;
-    this.successVisible = false;
-    this.deleteVisible = false;
-    this.latestDraw = {};
-    this.totalWinningsAmount = 0;
-    this.isLoggedIn = false;
-    this.loginModalVisible = false;
-    this.limitStylingAppends = false;
-    // @TODO fix any type
-    this.userAgent = window.navigator.userAgent;
-    this.multiplier = false;
-    this.quickPick = false;
-    this.isMobile = isMobile(this.userAgent);
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingurl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        this.clientStylingUrlContent = data;
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-  }
-  // @TODO fix `any` type later, I'm lazy now
-  connectedCallback() {
-    this.getGameDetails();
-    this.getDraws();
-    if (this.sessionId) {
-      this.isLoggedIn = true;
-    }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingurl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  countdownLogic(date) {
-    this.interval = setInterval(() => {
-      this.daysRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60 * 24));
-      this.hoursRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60) - this.daysRemaining * 24);
-      this.minutesRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60) - this.daysRemaining * 24 * 60 - this.hoursRemaining * 60);
-      this.secondsRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / 1000 - this.daysRemaining * 24 * 60 * 60 - this.hoursRemaining * 60 * 60 - this.minutesRemaining * 60);
-    }, 1000);
-  }
-  disconnectedCallback() {
-    clearInterval(this.interval);
-  }
-  getGameDetails() {
-    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-    fetch(url.href)
-      .then((res) => {
-      if (res.status >= 300) {
-        this.hasErrors = true;
-        throw new Error('There was an error while fetching the data');
-      }
-      return res.json();
-    })
-      .then((data) => {
-      this.gameData = data;
-      this.basicStake = this.gameData.type.stakes[0].amount;
-      let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
-      draws.length > 0 && (this.nextDraw = draws[0].id);
-      this.createNewTicket();
-    })
-      .catch((err) => {
-      this.hasErrors = true;
-      console.log('Error', err);
-    });
-  }
-  calculateTotalAmount() {
-    const { currency } = this.gameData.type.stakes[0];
-    this.totalAmount = 0;
-    this.tickets.forEach((item) => {
-      if (item.completed) {
-        this.totalAmount += item.amount * item.stake;
-      }
-    });
-    this.currency = currency;
-  }
-  // @TODO CustomEvent type
-  gridFilledHandler(event) {
-    // @TODO item ts
-    this.tickets = this.tickets.map((item) => {
-      if (item.ticketId == event.detail.id) {
-        let arr = item.selectedNumbers || [];
-        arr[event.detail.index] = event.detail.selectedNumbers.map((item) => parseInt(item, 10));
-        return {
-          gameId: item.gameId,
-          ticketId: item.ticketId,
-          completed: true,
-          amount: event.detail.draws,
-          stake: item.stake,
-          selectedNumbers: arr
-        };
-      }
-      return item;
-    });
-    this.calculateTotalAmount();
-  }
-  // @TODO fix any type
-  gridDirtyHandler(event) {
-    // @TODO item ts
-    this.tickets = this.tickets.map((item) => {
-      if (item.gameId == event.detail.id) {
-        return {
-          gameId: item.gameId,
-          ticketId: item.ticketId,
-          completed: false,
-          amount: item.amount,
-          stake: item.stake,
-          grids: []
-        };
-      }
-      return item;
-    });
-  }
-  // @TODO CustomEvent type
-  deleteTicketHandler(event) {
-    this.deleteVisible = true;
-    this.deleteEventData = event;
-  }
-  modalCloseEvent() {
-    this.deleteVisible = false;
-    this.loginModalVisible = false;
-  }
-  stakeChangeHandler(event) {
-    const { ticketId, stake } = event.detail;
-    this.tickets[ticketId - 1].stake = stake;
-    this.calculateTotalAmount();
-  }
-  multiplierChangeHandler(event) {
-    this.multiplier = event.detail;
-  }
-  getDraws() {
-    // append from query param with the current date value in order to get the next draw
-    let url = new URL(`${this.endpoint}/games/${this.gameId}/draws`);
-    let drawOptions = {
-      method: "GET",
-      headers: {
-        'Content-Type': "application/json",
-        'Accept': 'application/json',
-      },
-    };
-    fetch(url.href, drawOptions)
-      .then((response) => {
-      return response.json();
-    })
-      .then((data) => {
-      var _a;
-      let upcoming = data.items.filter((item) => {
-        if (Date.parse(item.date) > new Date().getTime()) {
-          return !item.winningNumbers;
-        }
-      });
-      let past = data.items.filter((item) => item.winningNumbers);
-      if (!upcoming[0])
-        return;
-      this.latestDraw = upcoming[0];
-      this.nextDate = this.latestDraw.date;
-      this.countdownLogic(this.nextDate);
-      this.lastDrawId = past[past.length - 1].id;
-      // calculate total winnings
-      // @TODO fix any type
-      (_a = this.latestDraw) === null || _a === void 0 ? void 0 : _a.prizes.forEach((element) => {
-        this.totalWinningsAmount += JSON.parse(element.amount);
-      });
-    })
-      .catch((err) => {
-      console.log('error ', err);
-    });
-  }
-  ;
-  // @TODO fix any type
-  confirmDeleteTicketHandler(event) {
-    // @TODO fix any type
-    this.tickets = this.tickets.filter((item) => {
-      if (item.ticketId == event.detail.ticketId) {
-        return false;
-      }
-      return true;
-    });
-    this.calculateTotalAmount();
-    this.deleteVisible = false;
-  }
-  createNewTicket() {
-    this.tickets = [
-      ...this.tickets,
-      { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
-    ];
-  }
-  showLoginModal() {
-    this.loginModalVisible = true;
-  }
-  submitTickets() {
-    let url = new URL(`${this.endpoint}/tickets`);
-    // @TODO Body TS type
-    let body = {
-      gameId: this.gameId,
-      tickets: []
-    };
-    this.tickets.forEach((item) => {
-      body.tickets.push({
-        startingDrawId: this.nextDraw,
-        amount: item.stake,
-        gameId: this.gameId,
-        currency: this.currency,
-        selection: item.selectedNumbers,
-        multiplier: this.multiplier,
-        drawCount: item.amount,
-        quickPick: this.quickPick,
-      });
-    });
-    // @TODO Options TS type
-    let options = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-        'Authorization': `Bearer ${this.sessionId}`
-      },
-      body: JSON.stringify(body)
-    };
-    fetch(url.href, options)
-      .then((res) => {
-      if (res.status > 300) {
-        throw new Error('err');
-      }
-      return res.json();
-    })
-      .then((data) => {
-      // should we treat this res?
-      console.log('data', data);
-    })
-      .catch((err) => {
-      console.log('error ', err);
-    });
-    this.successVisible = true;
-  }
-  goBack() {
-    this.goBackEvent.emit();
-  }
-  goToLobby() {
-    this.goToLobbyEvent.emit();
-  }
-  render() {
-    //Get path for background image
-    const backgroundImagePath = getAssetPath(this.isMobile ? '/assets/chrono_lottery_mobile.png' : '/assets/chrono_desktop.png');
-    if (this.hasErrors) {
-      return (h("div", { class: "GamePage" },
-        h("div", { class: "Title" }, translate('error', this.language))));
-    }
-    return (
-    /* Game details */
-    h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr', ref: el => this.stylingContainer = el },
-      h("div", { class: "GridBanner", style: { 'background': `url(${this.backgroundUrl ? this.backgroundUrl : backgroundImagePath})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' } },
-        h("div", { class: "BannerButtonsWrapper" },
-          h("button", { class: "BannerBackButton", onClick: this.goBack.bind(this) },
-            h("span", { class: "BannerBackButtonArrow" }, "\u1438 "),
-            translate('backButton', this.language)),
-          h("button", { class: "BannerLobbyButton", onClick: this.goToLobby.bind(this) }, translate('lobbyButton', this.language))),
-        h("div", { class: "Tabs" },
-          h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate('buy', this.language)),
-          h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate('viewLatest', this.language)))),
-      h("div", { class: "NextDrawWrapper" },
-        h("div", { class: "TotalWinnings" },
-          translate('winUpTo', this.language),
-          ": ",
-          h("span", null,
-            "$",
-            this.totalWinningsAmount.toLocaleString('en-US', { maximumFractionDigits: 2 }))),
-        h("div", { class: "NextDraw" },
-          h("p", { class: "BannerText" }, translate('nextDraw', this.language)),
-          h("div", { class: "BannerCountdown" },
-            h("span", { class: "CountdownDays" },
-              this.daysRemaining,
-              "D"),
-            h("span", { class: "CountdownHours" },
-              this.hoursRemaining,
-              "H"),
-            h("span", { class: "CountdownMinutes" },
-              this.minutesRemaining,
-              "M"),
-            h("span", { class: "CountdownSeconds" },
-              this.secondsRemaining,
-              "S")))),
-      this.tabIndex == 0 &&
-        h("div", { class: "GamePageContent" },
-          h("div", { class: "GameDetails" },
-            h("lottery-game-details", { "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })),
-          h("div", { class: "TicketsWrapper" },
-            this.tickets.map((item) => h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": this.autoPick, "reset-button": this.resetButton, "total-controllers": this.tickets.length, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })),
-            h("div", { class: "CreateNewTicket" },
-              h("button", { onClick: () => this.createNewTicket() }, "+"),
-              h("span", null, translate('createTicket', this.language)))),
-          h("div", { class: "OrderSummary" },
-            h("h3", { class: "OrderSummaryTitle" }, translate('orderSummaryTitle', this.language)),
-            h("div", { class: "Ticket" },
-              translate('orderSummaryTickets', this.language),
-              ": ",
-              h("span", null, this.tickets.length)),
-            h("hr", null),
-            h("div", { class: "Total" },
-              translate('orderSummaryTotal', this.language),
-              ": ",
-              h("span", null,
-                this.totalAmount,
-                " ",
-                this.currency)),
-            h("div", { class: "ButtonWrapper" },
-              this.isLoggedIn &&
-                h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language)),
-              !this.isLoggedIn &&
-                h("div", null,
-                  h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate('orderSummarySubmit', this.language)),
-                  h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent },
-                    h("p", { class: "SubmitModalSuccess" }, translate('modalLogin', this.language))))))),
-      this.tabIndex == 1 &&
-        h("div", null,
-          h("h4", { class: "LastDrawResultsTitle" }, translate('lastDrawResultsTitle', this.language)),
-          h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }),
-          h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })),
-      h("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent },
-        h("p", { class: "SubmitModalSuccess" }, translate('modalSuccess', this.language))),
-      h("helper-modal", { "title-modal": "Delete Ticket", visible: this.deleteVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent },
-        h("div", { class: "DeleteTicketModalWrapper" },
-          h("h3", { class: "DeleteTicketModalTitle" }, translate('deleteTicketModalTitle', this.language)),
-          h("p", { class: "DeleteTicketModalText" }, translate('deleteTicketModalText', this.language)),
-          h("div", { class: "DeleteTicketModalButtons" },
-            h("button", { class: "DeleteTicketModalCancel", onClick: () => this.modalCloseEvent() }, translate('deleteTicketModalCancel', this.language)),
-            h("button", { class: "DeleteTicketModalConfirm", onClick: () => this.confirmDeleteTicketHandler(this.deleteEventData) }, translate('deleteTicketModalConfirm', this.language)))))));
-  }
-  static get is() { return "lottery-game-page"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["lottery-game-page.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["lottery-game-page.css"]
-  }; }
-  static get assetsDirs() { return ["static"]; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint URL for the source of data"
-      },
-      "attribute": "endpoint",
-      "reflect": true
-    },
-    "gameId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "GameID of the lottery game"
-      },
-      "attribute": "game-id",
-      "reflect": true
-    },
-    "playerId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Player ID"
-      },
-      "attribute": "player-id",
-      "reflect": true
-    },
-    "sessionId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "GIC Session"
-      },
-      "attribute": "session-id",
-      "reflect": true
-    },
-    "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": true,
-      "defaultValue": "'en'"
-    },
-    "backgroundUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Url for banner's custom background image"
-      },
-      "attribute": "background-url",
-      "reflect": true
-    },
-    "autoPick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Shows the auto-pick button"
-      },
-      "attribute": "auto-pick",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "resetButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Shows the reset button"
-      },
-      "attribute": "reset-button",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "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-stylingurl",
-      "reflect": true,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "clientStylingUrlContent": {},
-    "tickets": {},
-    "tabIndex": {},
-    "hasErrors": {},
-    "totalAmount": {},
-    "successVisible": {},
-    "deleteVisible": {},
-    "deleteEventData": {},
-    "daysRemaining": {},
-    "hoursRemaining": {},
-    "minutesRemaining": {},
-    "secondsRemaining": {},
-    "latestDraw": {},
-    "totalWinningsAmount": {},
-    "nextDate": {},
-    "isLoggedIn": {},
-    "loginModalVisible": {},
-    "limitStylingAppends": {}
-  }; }
-  static get events() { return [{
-      "method": "goBackEvent",
-      "name": "goBackEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "goToLobbyEvent",
-      "name": "goToLobbyEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "element"; }
-  static get listeners() { return [{
-      "name": "ticketCompleted",
-      "method": "gridFilledHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "gridDirty",
-      "method": "gridDirtyHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "deleteTicket",
-      "method": "deleteTicketHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "modalCloseEvent",
-      "method": "modalCloseEvent",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "stakeChange",
-      "method": "stakeChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "multiplierChange",
-      "method": "multiplierChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
-//# sourceMappingURL=lottery-game-page.js.map