@everymatrix/lottery-game-page 1.52.5 → 1.53.0

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

@@ -1,6 +1,6 @@
 import { h, getAssetPath } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
-import { isMobile } from "../../utils/utils";
+import { isMobile, generateUUID } from "../../utils/utils";
 import "../../../../../lottery-ticket-controller/dist/types/index";
 import "../../../../../helper-modal/dist/types/index";
 import "../../../../../lottery-game-details/dist/types/index";
@@ -10,9 +10,10 @@ export class LotteryGamePage {
     constructor() {
         // @TODO fix any type
         this.userAgent = window.navigator.userAgent;
-        this.multiplier = false;
         this.quickPick = false;
+        this.gameData = {};
         this.isMobile = isMobile(this.userAgent);
+        this.secondarySelectionAllowed = false;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
@@ -33,38 +34,38 @@ export class LotteryGamePage {
             });
         };
         this.endpoint = undefined;
+        this.endpointTicket = 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.mainTickets = [];
+        this.secondaryTickets = [];
         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;
+        this.isLoading = false;
+        this.showSubmitError = false;
+        this.submitError = '';
+        this.showApiError = false;
+        this.apiError = '';
     }
-    // @TODO fix `any` type later, I'm lazy now
     connectedCallback() {
         this.getGameDetails();
-        this.getDraws();
         if (this.sessionId) {
             this.isLoggedIn = true;
         }
@@ -102,9 +103,16 @@ export class LotteryGamePage {
             return res.json();
         })
             .then((data) => {
+            var _a, _b;
             this.gameData = data;
-            this.basicStake = this.gameData.type.stakes[0].amount;
-            let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
+            this.basicStake = this.gameData.rules.stakes.length ? Number(this.gameData.rules.stakes[0].value) : 0;
+            this.basicLine = ((_a = this.gameData.rules.betTypes) === null || _a === void 0 ? void 0 : _a.length) ? this.gameData.rules.betTypes[0].boardsAllowed[0] : 1;
+            this.basicBetType = this.gameData.rules.betTypes[0];
+            this.nextDate = (_b = this.gameData.currentDraw) === null || _b === void 0 ? void 0 : _b.date;
+            this.nextDate && this.countdownLogic(this.nextDate);
+            this.secondarySelectionAllowed = this.gameData.rules.secondarySelectionAllowed === "INPUT" ? true : false;
+            this.quickPick = this.gameData.rules.quickPickAvailable;
+            let draws = this.gameData.draws ? this.gameData.draws.filter((item) => !item.winningNumbers) : [];
             draws.length > 0 && (this.nextDraw = draws[0].id);
             this.createNewTicket();
         })
@@ -114,11 +122,12 @@ export class LotteryGamePage {
         });
     }
     calculateTotalAmount() {
-        const { currency } = this.gameData.type.stakes[0];
+        const { currency } = this.gameData.rules.stakes[0];
         this.totalAmount = 0;
-        this.tickets.forEach((item) => {
-            if (item.completed) {
-                this.totalAmount += item.amount * item.stake;
+        this.mainTickets.forEach((item) => {
+            var _a;
+            if (item.completed.every((v) => v)) {
+                this.totalAmount += (item.drawCount) * (item.stake || this.basicStake) * (item.multiplierNum) * (item.lineNum) * ((_a = item.betType) === null || _a === void 0 ? void 0 : _a.combinations);
             }
         });
         this.currency = currency;
@@ -126,161 +135,205 @@ export class LotteryGamePage {
     // @TODO CustomEvent type
     gridFilledHandler(event) {
         // @TODO item ts
-        this.tickets = this.tickets.map((item) => {
+        let tickets = event.detail.selectionType === 'secondarySelection' ? this.secondaryTickets : this.mainTickets;
+        tickets = 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));
+                let completed = item.completed || [];
+                completed[event.detail.index] = true;
                 return {
                     gameId: item.gameId,
                     ticketId: item.ticketId,
-                    completed: true,
-                    amount: event.detail.draws,
-                    stake: item.stake,
-                    selectedNumbers: arr
+                    completed: completed,
+                    drawCount: event.detail.drawCount,
+                    stake: item.stake || this.basicStake,
+                    selectedNumbers: arr,
+                    multiplierNum: event.detail.multiplierNum,
+                    multiplier: event.detail.multiplier,
+                    lineNum: item.lineNum,
+                    betType: item.betType,
                 };
             }
             return item;
         });
+        if (event.detail.selectionType === 'secondarySelection') {
+            this.secondaryTickets = tickets;
+        }
+        else {
+            this.mainTickets = tickets;
+        }
         this.calculateTotalAmount();
     }
     // @TODO fix any type
     gridDirtyHandler(event) {
         // @TODO item ts
-        this.tickets = this.tickets.map((item) => {
-            if (item.gameId == event.detail.id) {
+        let tickets = event.detail.selectionType === 'secondarySelection' ? this.secondaryTickets : this.mainTickets;
+        tickets = 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));
+                let completed = item.completed || [];
+                completed[event.detail.index] = false;
                 return {
                     gameId: item.gameId,
                     ticketId: item.ticketId,
-                    completed: false,
-                    amount: item.amount,
+                    completed: completed,
+                    drawCount: item.drawCount,
                     stake: item.stake,
-                    grids: []
+                    selectedNumbers: arr,
+                    multiplierNum: item.multiplierNum,
+                    multiplier: item.multiplier,
+                    lineNum: item.lineNum,
+                    betType: item.betType,
                 };
             }
-            return item;
+            else {
+                return item;
+            }
         });
-    }
-    // @TODO CustomEvent type
-    deleteTicketHandler(event) {
-        this.deleteVisible = true;
-        this.deleteEventData = event;
+        if (event.detail.selectionType === 'secondarySelection') {
+            this.secondaryTickets = tickets;
+        }
+        else {
+            this.mainTickets = tickets;
+        }
+        this.calculateTotalAmount();
     }
     modalCloseEvent() {
-        this.deleteVisible = false;
         this.loginModalVisible = false;
+        this.successVisible = false;
     }
     stakeChangeHandler(event) {
         const { ticketId, stake } = event.detail;
-        this.tickets[ticketId - 1].stake = stake;
+        this.mainTickets[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);
-        });
+        const { ticketId, multiplierNum, multiplier } = event.detail;
+        this.mainTickets[ticketId - 1].multiplierNum = multiplierNum;
+        this.mainTickets[ticketId - 1].multiplier = multiplier;
+        this.calculateTotalAmount();
     }
-    ;
-    // @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;
-        });
+    drawMultiplierChangeHandler(event) {
+        const { ticketId, drawCount } = event.detail;
+        this.mainTickets[ticketId - 1].drawCount = drawCount;
         this.calculateTotalAmount();
-        this.deleteVisible = false;
+    }
+    lineMultiplierChangeHandler(event) {
+        const { ticketId, lineNum } = event.detail;
+        this.mainTickets[ticketId - 1].lineNum = lineNum;
+        this.mainTickets[ticketId - 1].completed = Array.from({ length: lineNum }, (_) => false);
+        this.mainTickets[ticketId - 1].selectedNumbers = [];
+    }
+    betTypeChangeHandler(event) {
+        const { ticketId, betType } = event.detail;
+        this.mainTickets[ticketId - 1].betType = betType;
     }
     createNewTicket() {
-        this.tickets = [
-            ...this.tickets,
-            { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
+        this.mainTickets = [
+            ...this.mainTickets,
+            { gameId: this.gameId, ticketId: this.mainTickets.length + 1, drawCount: 1, multiplierNum: 1, completed: [false], stake: this.basicStake, betType: this.basicBetType, lineNum: this.basicLine }
+        ];
+        this.secondaryTickets = [
+            ...this.secondaryTickets,
+            { gameId: this.gameId, ticketId: this.secondaryTickets.length + 1, drawCount: 1, multiplierNum: 1, completed: [false], stake: this.basicStake, betType: this.basicBetType, lineNum: this.basicLine }
         ];
     }
     showLoginModal() {
         this.loginModalVisible = true;
     }
     submitTickets() {
-        let url = new URL(`${this.endpoint}/tickets`);
+        let url = new URL(`${this.endpointTicket}/tickets`);
         // @TODO Body TS type
         let body = {
-            gameId: this.gameId,
+            playerId: this.playerId.toString(),
             tickets: []
         };
-        this.tickets.forEach((item) => {
+        let secondaryDirtyTicketLines = [];
+        if (this.secondarySelectionAllowed) {
+            // Only one ticket on the page,but there are multiple ticket lines. So we need to get the indices of the dirty lines
+            secondaryDirtyTicketLines = this.secondaryTickets[0].completed.reduce((indices, element, index) => {
+                if (!element) {
+                    indices.push(index);
+                }
+                return indices;
+            }, []);
+        }
+        let dirtyTicketLines = this.mainTickets[0].completed.reduce((indices, element, index) => {
+            if (!element) {
+                indices.push(index);
+            }
+            return indices;
+        }, []);
+        let mergedUniqueArray = [...new Set([...secondaryDirtyTicketLines, ...dirtyTicketLines])].sort((a, b) => a - b);
+        ;
+        if (mergedUniqueArray.length) {
+            this.showSubmitError = true;
+            let lines = mergedUniqueArray.map(item => `Line${item + 1}`).join();
+            this.submitError = `The number of the selected number(s) on ${lines} is invalid.`;
+            setTimeout(() => {
+                this.showSubmitError = false;
+            }, 3000);
+            return;
+        }
+        this.mainTickets.forEach((item, index) => {
+            var _a;
             body.tickets.push({
                 startingDrawId: this.nextDraw,
-                amount: item.stake,
+                amount: (item.stake * item.drawCount * item.multiplierNum * (item.lineNum || 1) * ((_a = item.betType) === null || _a === void 0 ? void 0 : _a.combinations)).toString(),
                 gameId: this.gameId,
+                gameName: this.gameData.name,
                 currency: this.currency,
-                selection: item.selectedNumbers,
-                multiplier: this.multiplier,
-                drawCount: item.amount,
+                selection: item.selectedNumbers.map((v, i) => {
+                    var _a;
+                    return {
+                        betType: ((_a = item.betType) === null || _a === void 0 ? void 0 : _a.id) || this.gameData.rules.defaultBetType,
+                        stake: item.stake,
+                        selections: v,
+                        secondarySelections: this.secondarySelectionAllowed ? this.secondaryTickets[index].selectedNumbers[i] : []
+                    };
+                }),
+                multiplier: item.multiplier,
+                multiplierNum: item.multiplierNum,
+                drawCount: item.drawCount,
                 quickPick: this.quickPick,
             });
         });
+        const uuid = generateUUID();
         // @TODO Options TS type
         let options = {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
-                'Authorization': `Bearer ${this.sessionId}`
+                'Authorization': `Bearer ${this.sessionId}`,
+                'X-Idempotency-Key': uuid
             },
             body: JSON.stringify(body)
         };
+        this.isLoading = true;
         fetch(url.href, options)
             .then((res) => {
             if (res.status > 300) {
-                throw new Error('err');
+                this.apiError = res.statusText + '.';
+                this.showApiError = true;
+                setTimeout(() => {
+                    this.showApiError = false;
+                }, 3000);
+                throw new Error(res.statusText);
             }
             return res.json();
         })
-            .then((data) => {
-            // should we treat this res?
-            console.log('data', data);
+            .then(() => {
+            this.successVisible = true;
         })
             .catch((err) => {
-            console.log('error ', err);
+            console.log('Error ', err);
+        })
+            .finally(() => {
+            this.isLoading = false;
         });
-        this.successVisible = true;
     }
     goBack() {
         this.goBackEvent.emit();
@@ -289,18 +342,25 @@ export class LotteryGamePage {
         this.goToLobbyEvent.emit();
     }
     render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         //Get path for background image
-        const backgroundImagePath = getAssetPath(this.isMobile ? '/assets/chrono_lottery_mobile.png' : '/assets/chrono_desktop.png');
+        const backgroundImagePath = getAssetPath(this.isMobile ? '../static/chrono_lottery_mobile.png' : '../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: { '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", { 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("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" }, this.nextDate && 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", { "low-number": (_b = (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.boards[0]) === null || _b === void 0 ? void 0 : _b.lowNumber, "high-number": (_d = (_c = this.gameData.rules) === null || _c === void 0 ? void 0 : _c.boards[0]) === null || _d === void 0 ? void 0 : _d.highNumber, "minimum-allowed": (_f = (_e = this.gameData.rules) === null || _e === void 0 ? void 0 : _e.boards[0]) === null || _f === void 0 ? void 0 : _f.minimumAllowed, "maxinum-allowed": (_h = (_g = this.gameData.rules) === null || _g === void 0 ? void 0 : _g.boards[0]) === null || _h === void 0 ? void 0 : _h.maxinumAllowed, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h("div", { class: "TicketsWrapper" }, this.mainTickets.map((item) => {
+                var _a, _b;
+                return h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": (_a = this.gameData.rules) === null || _a === void 0 ? void 0 : _a.quickPickAvailable, "reset-button": (_b = this.gameData.rules) === null || _b === void 0 ? void 0 : _b.quickPickAvailable, "total-controllers": this.mainTickets.length, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent });
+            })), h("div", { class: "OrderSummary" }, h("h3", { class: "OrderSummaryTitle" }, translate('orderSummaryTitle', this.language)), h("div", { class: "OrderTicketInfo" }, h("div", { class: "Ticket" }, translate('orderSummaryTickets', this.language), ": ", h("span", null, this.mainTickets.length)), h("div", null, h("span", null, ((_k = (_j = this.mainTickets[0]) === null || _j === void 0 ? void 0 : _j.betType) === null || _k === void 0 ? void 0 : _k.combinations) * ((_l = this.mainTickets[0]) === null || _l === void 0 ? void 0 : _l.lineNum)), h("span", { class: "Multiplier" }, "x"), ((_m = this.gameData.rules) === null || _m === void 0 ? void 0 : _m.stakeMultiplierAvailable) &&
+                h("span", null, h("span", null, ((_o = this.mainTickets[0]) === null || _o === void 0 ? void 0 : _o.multiplierNum) === 1 ? `${(_p = this.mainTickets[0]) === null || _p === void 0 ? void 0 : _p.multiplierNum} Multiplier` : `${(_q = this.mainTickets[0]) === null || _q === void 0 ? void 0 : _q.multiplierNum} Multipliers`), h("span", { class: "Multiplier" }, "x")), h("span", null, `${(_r = this.mainTickets[0]) === null || _r === void 0 ? void 0 : _r.stake} EUR`), ((_s = this.gameData.rules) === null || _s === void 0 ? void 0 : _s.drawMultiplierAvailable) &&
+                h("span", null, h("span", { class: "Multiplier" }, "x"), h("span", null, ((_t = this.mainTickets[0]) === null || _t === void 0 ? void 0 : _t.drawCount) === 1 ? `${(_u = this.mainTickets[0]) === null || _u === void 0 ? void 0 : _u.drawCount} Draw` : `${(_v = this.mainTickets[0]) === null || _v === void 0 ? void 0 : _v.drawCount} Draws`)))), 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("div", null, !this.isLoading &&
+                    h("div", { class: "submitWrap" }, h("div", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language)), this.showSubmitError && h("div", { class: 'submitError' }, this.submitError), this.showApiError && h("div", { class: 'submitError' }, this.apiError)), this.isLoading && h("span", { class: "Button", style: { "cursor": "default" } }, translate('loading', 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)))))));
+            h("div", null, 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('submitSuccess', this.language)))));
     }
     static get is() { return "lottery-game-page"; }
     static get encapsulation() { return "shadow"; }
@@ -314,7 +374,7 @@ export class LotteryGamePage {
             "$": ["lottery-game-page.css"]
         };
     }
-    static get assetsDirs() { return ["static"]; }
+    static get assetsDirs() { return ["../static"]; }
     static get properties() {
         return {
             "endpoint": {
@@ -334,6 +394,23 @@ export class LotteryGamePage {
                 "attribute": "endpoint",
                 "reflect": true
             },
+            "endpointTicket": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "EndpointTicket URL for the source of ticket data"
+                },
+                "attribute": "endpoint-ticket",
+                "reflect": true
+            },
             "gameId": {
                 "type": "string",
                 "mutable": false,
@@ -420,42 +497,6 @@ export class LotteryGamePage {
                 "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,
@@ -498,22 +539,25 @@ export class LotteryGamePage {
         return {
             "clientStylingUrlContent": {},
             "tickets": {},
+            "mainTickets": {},
+            "secondaryTickets": {},
             "tabIndex": {},
             "hasErrors": {},
             "totalAmount": {},
             "successVisible": {},
-            "deleteVisible": {},
-            "deleteEventData": {},
             "daysRemaining": {},
             "hoursRemaining": {},
             "minutesRemaining": {},
             "secondsRemaining": {},
-            "latestDraw": {},
-            "totalWinningsAmount": {},
             "nextDate": {},
             "isLoggedIn": {},
             "loginModalVisible": {},
-            "limitStylingAppends": {}
+            "limitStylingAppends": {},
+            "isLoading": {},
+            "showSubmitError": {},
+            "submitError": {},
+            "showApiError": {},
+            "apiError": {}
         };
     }
     static get events() {
@@ -563,12 +607,6 @@ export class LotteryGamePage {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "deleteTicket",
-                "method": "deleteTicketHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }, {
                 "name": "modalCloseEvent",
                 "method": "modalCloseEvent",
@@ -587,6 +625,24 @@ export class LotteryGamePage {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "drawMultiplierChange",
+                "method": "drawMultiplierChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "lineMultiplierChange",
+                "method": "lineMultiplierChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "betTypeChange",
+                "method": "betTypeChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }