@everymatrix/lottery-game-page 0.1.26 → 1.0.69

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

@@ -1,607 +1,592 @@
-import { Component, h, Prop, State, Listen, Element, Watch, getAssetPath } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
+import { h, 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';
+import "../../../../../lottery-ticket-controller/dist/types/index";
+import "../../../../../helper-modal/dist/types/index";
+import "../../../../../lottery-game-details/dist/types/index";
+import "../../../../../lottery-draw-results-history/dist/types/index";
+import "../../../../../lottery-draw-results/dist/types/index";
 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;
+    constructor() {
+        // @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);
+            });
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.playerId = undefined;
+        this.sessionId = undefined;
+        this.language = 'en';
+        this.backgroundUrl = undefined;
+        this.autoPick = false;
+        this.resetButton = false;
+        this.clientStyling = '';
+        this.clientStylingurl = '';
+        this.clientStylingUrlContent = '';
+        this.tickets = [];
+        this.tabIndex = 0;
+        this.hasErrors = false;
+        this.totalAmount = 0;
+        this.successVisible = false;
+        this.deleteVisible = false;
+        this.deleteEventData = undefined;
+        this.daysRemaining = undefined;
+        this.hoursRemaining = undefined;
+        this.minutesRemaining = undefined;
+        this.secondsRemaining = undefined;
+        this.latestDraw = {};
+        this.totalWinningsAmount = 0;
+        this.nextDate = undefined;
+        this.isLoggedIn = false;
+        this.loginModalVisible = false;
+        this.limitStylingAppends = false;
+    }
+    // @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
-    this.userAgent = window.navigator.userAgent;
-    this.multiplier = false;
-    this.quickPick = false;
-    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
-  handleSessionIdValue() {
-    this.isLoggedIn = true;
-  }
-  connectedCallback() {
-    this.getGameDetails();
-    this.getDraws();
-    if (this.sessionId) {
-      this.isLoggedIn = true;
+    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();
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingurl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    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;
     }
-    // end custom styling area
-  }
-  countdownLogic(date) {
-    if (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);
+    createNewTicket() {
+        this.tickets = [
+            ...this.tickets,
+            { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
+        ];
     }
-  }
-  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.rules.stakes[0].amount;
-      let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
-      this.nextDraw = draws[0].id;
-      this.createNewTicket();
-    })
-      .catch((err) => {
-      this.hasErrors = true;
-      console.log('Error', err);
-    });
-  }
-  calculateTotalAmount() {
-    const { currency } = this.gameData.rules.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));
+    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 {
-          gameId: item.gameId,
-          ticketId: item.ticketId,
-          completed: true,
-          amount: event.detail.draws,
-          stake: item.stake,
-          selectedNumbers: arr
+            "$": ["lottery-game-page.css"]
         };
-      }
-      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) {
+    }
+    static get assetsDirs() { return ["static"]; }
+    static get properties() {
         return {
-          gameId: item.gameId,
-          ticketId: item.ticketId,
-          completed: false,
-          amount: item.amount,
-          stake: item.stake,
-          grids: []
+            "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": "''"
+            }
         };
-      }
-      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, _b;
-      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);
-      this.latestDraw = upcoming[0] || {};
-      this.nextDate = (_a = this.latestDraw) === null || _a === void 0 ? void 0 : _a.date;
-      this.countdownLogic(this.nextDate || '');
-      this.lastDrawId = past[past.length - 1].id;
-      // calculate total winnings
-      // @TODO fix any type
-      (_b = this.latestDraw) === null || _b === void 0 ? void 0 : _b.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) => {
-      console.log('data', data);
-    })
-      .catch((err) => {
-      console.log('error ', err);
-    });
-    this.successVisible = true;
-  }
-  render() {
-    const backgroundSrc = getAssetPath('./static/chrono_lottery_mobile.png');
-    const backgroundDesktopSrc = getAssetPath('./static/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: { backgroundImage: isMobile(this.userAgent) ? `url(${backgroundSrc})` : `url(${backgroundDesktopSrc})` } },
-        h("div", { class: "BannerButtonsWrapper" },
-          h("button", { class: "BannerBackButton" },
-            h("span", { class: "BannerBackButtonArrow" }, "\u1438 "),
-            translate('backButton', this.language)),
-          h("button", { class: "BannerLobbyButton" }, 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, "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("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": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint URL for the source of data"
-      },
-      "attribute": "endpoint",
-      "reflect": false
-    },
-    "gameId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "GameID of the lottery game"
-      },
-      "attribute": "game-id",
-      "reflect": false
-    },
-    "playerId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Player ID"
-      },
-      "attribute": "player-id",
-      "reflect": false
-    },
-    "sessionId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "GIC Session"
-      },
-      "attribute": "session-id",
-      "reflect": false
-    },
-    "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'"
-    },
-    "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": false,
-      "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": false,
-      "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": false,
-      "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": false,
-      "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
+            }];
     }
-  }; }
-  static get states() { return {
-    "clientStylingUrlContent": {},
-    "tickets": {},
-    "tabIndex": {},
-    "hasErrors": {},
-    "totalAmount": {},
-    "successVisible": {},
-    "deleteVisible": {},
-    "deleteEventData": {},
-    "daysRemaining": {},
-    "hoursRemaining": {},
-    "minutesRemaining": {},
-    "secondsRemaining": {},
-    "latestDraw": {},
-    "totalWinningsAmount": {},
-    "nextDate": {},
-    "isLoggedIn": {},
-    "loginModalVisible": {},
-    "limitStylingAppends": {}
-  }; }
-  static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "sessionId",
-      "methodName": "handleSessionIdValue"
-    }]; }
-  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
-    }]; }
 }