@everymatrix/casino-engagement-suite-tournament 1.45.14 → 1.46.1

package/dist/collection/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.js

@@ -1,141 +1,81 @@
 import { __rest } from "tslib";
-import { Fragment, h, Host } from "@stencil/core";
-import { TRANSLATIONS, Tab, localePostprocess } from "../../utils/translations";
-import { classnames } from "../../utils/utils";
-import { TournamentState, LeaderboardPage, DialogType, } from "../../utils/types";
-import { GradientRoundedButton } from "../../shared/GradientRoundedButton";
-import { iconBack, iconClose, iconReward, iconEyeClose, iconEyeOpen, iconQuestion, iconTrophy } from "../../shared/icons";
-import { CloseBar } from "../../shared/renderBar";
-import { addSeconds, formatDate, getDifference, getProgress } from "../../utils/util.date";
-import { leaderboardsAdapter, tournamentAdapter } from "../../utils/api.apdater";
+import { h, Host } from "@stencil/core";
+import { TRANSLATIONS, Tab } from "../../utils/translations";
+import { getNewItems } from "../../utils/utils";
+import { LeaderboardPage, DialogType } from "../../utils/types";
+import { isTournamentClosed } from "../../utils/bussiness";
+import { renders } from "../../shared/renders";
+import { messageReceiver, messageSender } from "../../utils/message";
 import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
 import "../../../../../general-styling-wrapper/dist/types/index";
 import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
 export class CasinoEngagementSuiteTournament {
-    constructor() {
-        this.onClickConfirmJoin = () => {
-            this.actionJoin(this.tournamentItem);
-            this.nextPage = LeaderboardPage.List;
-        };
-        this.onClickConfirmUnjoin = () => {
-            this.close.emit();
-        };
-        this.onClickDialogUnjoin = () => {
-            this.actionJoin(this.dialog.data);
-            this.closeDialog();
-        };
-        this.onClickDialogJoin = () => {
-            this.closeDialog();
-        };
-        this.onClickBarInLayout = () => {
-            this.close.emit();
-        };
-        this.onClickBarInLayoutDialog = () => {
-            this.closeDialog();
-        };
-        this.onClickShowInfo = () => {
-            this.isShowInfo = !this.isShowInfo;
-        };
-        this.onClickBarTip = () => {
-            this.openDialog(DialogType.Tip);
-        };
-        this.onClickBarBack = () => {
-            this.setPage(LeaderboardPage.List);
-        };
-        this.language = 'en';
-        this.clientStyling = '';
-        this.clientStylingUrl = '';
-        this.translationUrl = '';
-        this.leaderboardsInit = undefined;
-        this.tab = Tab.Info;
-        this.locale = TRANSLATIONS;
-        this.tournamentItem = undefined;
-        this.tournamentList = undefined;
-        this.leaderboards = [];
-        this.isActionJoinPending = false;
-        this.isDialogOpen = false;
-        this.isShowInfo = false;
-        this.page = LeaderboardPage.List;
-        this.tournamentInDialog = undefined;
-        this.dialog = {
-            isOpen: false,
-            type: undefined,
-            data: undefined,
-        };
-        this.time = 0;
+    handleEvent(e) {
+        var _a, _b;
+        const _c = e.data, { type } = _c, rest = __rest(_c, ["type"]);
+        (_b = (_a = messageReceiver(this)) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b.call(null, rest);
+    }
+    checkNewIdList() {
+        if (this.newIdList.length > 0) {
+            this.addLabel('new');
+        }
+        else {
+            this.removeLabel('new');
+        }
+    }
+    syncBarState(newTournamentList, oldTournamentList) {
+        if (!oldTournamentList) {
+            // init
+            this.checkNewIdList();
+            if (this.gifts.length) {
+                this.addLabel('win');
+            }
+        }
+        else {
+            const items = getNewItems(newTournamentList, oldTournamentList, (newItem, oldItem) => newItem.id === oldItem.id);
+            this.newIdList = [...this.newIdList, ...items.map((item) => item.id)];
+        }
+    }
+    showPropWatcher(newValue, oldValue) {
+        if (oldValue == false && newValue == true) {
+            this.checkGift();
+        }
+    }
+    addLabel(tag) {
+        if (!this.labels.includes(tag)) {
+            this.labels.push(tag);
+        }
+        messageSender.UpdateSuiteBarState(this.labels);
+    }
+    removeLabel(tag) {
+        this.labels = this.labels.filter((label) => label != tag);
+        messageSender.UpdateSuiteBarState(this.labels);
     }
     setTimeInterval() {
         this.timeHolder = setInterval(() => {
-            if (this.tournamentList || this.tournamentItem) {
-                this.time += 1;
-            }
-            else {
-                this.time = 0;
-            }
+            this.time = (this.tournamentList || this.tournamentItem) ? this.time + 1 : 0;
         }, 1000);
     }
-    updateTournamentListByItem(tournament) {
-        this.tournamentList = this.tournamentList.map((_tournament) => {
-            if (_tournament.id === tournament.id) {
-                return tournamentAdapter(tournament);
-            }
-            else {
-                return _tournament;
-            }
-        });
-    }
-    handleEvent(e) {
-        const _a = e.data, { type } = _a, rest = __rest(_a, ["type"]);
-        switch (type) {
-            case 'ShowLeaderboardRewardModal': {
-                const { tournament } = rest;
-                this.setPage(LeaderboardPage.Confirm, { tournament: tournamentAdapter(tournament) });
-                postMessage({ type: 'BarLeaderboardsClick' });
-                break;
-            }
-            case 'UpdateTournamentsItemRes': {
-                const tournamentNew = tournamentAdapter(rest.data.item);
-                this.tournamentItem = tournamentNew;
-                this.updateTournamentListByItem(tournamentNew);
-                break;
-            }
-            case 'UpdateLeaderboardsRes': {
-                this.leaderboards = leaderboardsAdapter(rest.data);
-                break;
-            }
-            case 'JoinTournamentRes':
-            case 'UnjoinTournamentRes':
-                const { success } = rest;
-                if (success) {
-                    this.tournamentItem = Object.assign(Object.assign({}, this.tournamentItem), { playerEnrolled: !!!this.tournamentItem.playerEnrolled });
-                    switch (this.page) {
-                        case LeaderboardPage.Item: {
-                            break;
-                        }
-                        case LeaderboardPage.List: {
-                            this.updateTournamentListByItem(this.tournamentItem);
-                            break;
-                        }
-                    }
+    checkGift() {
+        //check gift
+        if (this.gifts.length) {
+            const onClose = () => {
+                if (this.dialog.type === DialogType.gift) {
+                    this.gifts = this.gifts.slice(1);
+                    setTimeout(() => {
+                        this.checkGift();
+                    }, 300);
                 }
-                if (this.nextPage) {
-                    this.setPage(this.nextPage);
-                    this.nextPage = undefined;
-                }
-                this.isActionJoinPending = false;
-                break;
+            };
+            this.openDialog(DialogType.gift, this.gifts[0], onClose);
+        }
+        else {
+            this.removeLabel('win');
         }
-    }
-    get messageSender() {
-        return {
-            JoinTournamentReq: (tournament) => { var _a; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_a = tournament.wallets[0]) === null || _a === void 0 ? void 0 : _a.code }); },
-            UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
-            UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
-            UpdateLeaderboardsReq: (tournament) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id }),
-        };
     }
     connectedCallback() {
         this.setTimeInterval();
+        messageSender.UpdateLeaderboardsPlayerReq();
     }
     disconnectedCallback() {
         clearInterval(this.timeHolder);
@@ -146,10 +86,10 @@ export class CasinoEngagementSuiteTournament {
         this.isActionJoinPending = true;
         try {
             if (tournament.playerEnrolled) {
-                this.messageSender.UnjoinTournamentReq(tournament);
+                messageSender.UnjoinTournamentReq(tournament);
             }
             else {
-                this.messageSender.JoinTournamentReq(tournament);
+                messageSender.JoinTournamentReq(tournament);
             }
         }
         catch (e) {
@@ -157,204 +97,70 @@ export class CasinoEngagementSuiteTournament {
             return;
         }
     }
-    isTournamentClosed(tournament) {
-        return [
-            TournamentState.Closed,
-            TournamentState.Closing
-        ].includes(tournament.state);
-    }
     setPage(page, metaData) {
-        switch (page) {
-            case LeaderboardPage.Confirm:
-            case LeaderboardPage.Item:
-                this.tournamentItem = metaData.tournament;
-                if (!this.tournamentItem) {
-                    this.messageSender.UpdateTournamentsItemReq(metaData.tournament);
-                }
-                if (this.isTournamentClosed(this.tournamentItem)) {
-                    this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
-                }
-                break;
-            case LeaderboardPage.List:
-                break;
+        if (page == LeaderboardPage.item) {
+            this.tournamentItem = metaData.tournament;
+            if (!this.tournamentItem) {
+                messageSender.UpdateTournamentsItemReq(metaData.tournament);
+            }
+            if (isTournamentClosed(this.tournamentItem)) {
+                messageSender.UpdateLeaderboardsReq(this.tournamentItem);
+            }
         }
-        this.tab = Tab.Info;
+        this.tab = Tab.info;
         this.page = page;
     }
-    renderPage() {
-        switch (this.page) {
-            case LeaderboardPage.Confirm: return this.renderPageConfirm();
-            case LeaderboardPage.Item: return this.renderPageLeaderboardItem();
-            case LeaderboardPage.List: return this.renderPageLeaderboardList();
-        }
-    }
     render() {
-        return (h(Host, { key: '07ebdb6c71a03be84b430e18a80417323a9cd3cc' }, h("general-styling-wrapper", { key: 'ac0134009a6bfcdb4b79816138ea441a8415b953', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+        return (h(Host, { key: 'f9e9ea96e0fddd20d3f12141c7cf66588ab94ccd' }, h("general-styling-wrapper", { key: 'aea948ea6c8f8cc5e4aaea5812873d3fe7045568', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renderPage()));
-    }
-    onClickListItemChangePage(tournament) {
-        this.setPage(LeaderboardPage.Item, { tournament });
-    }
-    onClickItemJoin(tournament, e) {
-        e.stopPropagation();
-        if (tournament.playerEnrolled) {
-            this.openDialog(DialogType.Unjoin, tournament);
-        }
-        else {
-            this.actionJoin(tournament);
-            this.tournamentItem = tournament;
-        }
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renders.page[this.page]()));
     }
-    onClickTab(tab) {
-        this.tab = tab;
-        switch (tab) {
-            case Tab.Leaderboard:
-                this.leaderboards = undefined;
-                this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
-                break;
-            case Tab.Games:
-                this.messageSender.UpdateTournamentsItemReq(this.tournamentItem);
-                break;
-        }
+    openDialog(type, data = undefined, onClose = undefined) {
+        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
+            type,
+            data });
     }
-    renderPageLeaderboardList() {
-        var _a;
-        if (!this.tournamentList) {
-            this.tournamentList = (_a = this.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map(item => tournamentAdapter(item));
-            return h("general-animation-loading", null);
-        }
-        const { locale } = this;
-        if (this.tournamentList.length) {
-            return this.renderLeaderboardContainer(h(Fragment, null, h("div", { class: "Leaderboards Row" }, this.tournamentList.map(_tournament => (h("div", { class: classnames("LeaderboardsItem", _tournament.playerEnrolled ? ' GradientRounded Hollow' : ''), onClick: this.onClickListItemChangePage.bind(this, _tournament) }, h("div", { class: "LeaderboardsItemContainer" }, this.renderTitleContainer(_tournament), this.renderTimeBar(_tournament))))))));
-        }
-        else {
-            return (h("div", { class: "NoLeaderboards Row" }, h("div", null, locale.NoLeaderboards), h("div", null, locale.NoLeaderboardsTip)));
-        }
-    }
-    renderPageConfirm() {
-        if (!this.tournamentItem)
-            return h("general-animation-loading", null);
-        const tournamentName = this.tournamentItem.nameOrTitle;
-        const { locale } = this;
-        return (h("div", { class: "PageConfirmContainer" }, h("div", { class: "GradientRounded Hollow PageConfirm" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.JoinDialog.Tile), h("div", { class: "Description", innerHTML: localePostprocess(locale.JoinDialog.Description, { tournamentName }) }), h("div", { class: "PageConfirmButtonsGroup" }, h(GradientRoundedButton, { statedClasses: {
-                isPending: this.isActionJoinPending,
-            },
-            onClick: this.onClickConfirmJoin,
-            innerHTML: locale.JoinDialog.ButtonYes }), h(GradientRoundedButton, { statedClasses: {
-                isPending: this.isActionJoinPending,
-                isHollow: true,
-            },
-            onClick: this.onClickConfirmUnjoin,
-            innerHTML: locale.JoinDialog.ButtonNo })))));
-    }
-    renderPageLeaderboardItem() {
-        if (!this.tournamentItem)
-            return h("general-animation-loading", null);
-        return this.renderLeaderboardContainer(h(Fragment, null, this.renderTitleContainer(this.tournamentItem), this.renderTabs(), this.renderTabbedContent()));
-    }
-    renderDialogContent() {
-        switch (this.dialog.type) {
-            case DialogType.Unjoin:
-                return this.renderDialogContentUnjoin();
-            case DialogType.Tip:
-                return (h("div", { class: "Tip" }, this.locale.Tip));
-        }
-    }
-    renderDialogContentUnjoin() {
-        const { locale } = this;
-        return (h("div", { class: "DialogContentUnjoin" }, h("div", { class: "DialogContentUnjoinTitle" }, locale.UnjoinDialog.Title), h("div", { class: "DialogContentUnjoinDescription", innerHTML: locale.UnjoinDialog.Description }), h(GradientRoundedButton, { statedClasses: {
-                isPending: this.isActionJoinPending,
-            },
-            onClick: this.onClickDialogUnjoin,
-            innerHTML: locale.UnjoinDialog.ButtonYes }), h(GradientRoundedButton, { statedClasses: {
-                isHollow: true,
-                isPending: this.isActionJoinPending,
-            },
-            onClick: this.onClickDialogJoin,
-            innerHTML: locale.UnjoinDialog.ButtonNo })));
-    }
-    renderTitleContainer(tournament) {
-        const { locale } = this;
-        return (h("div", { class: "TitleContainer" }, h("div", { class: "Title" }, tournament.nameOrTitle), tournament.state !== TournamentState.Closed && (h("div", null, h(GradientRoundedButton, { statedClasses: {
-                isHollow: tournament.playerEnrolled,
-                isPending: this.isActionJoinPending,
-            },
-            onClick: this.onClickItemJoin.bind(this, tournament),
-            innerHTML: tournament.playerEnrolled ? locale.Unjoin : locale.Join })))));
-    }
-    renderTabbedContent() {
-        switch (this.tab) {
-            case Tab.Info: return this.renderInfo();
-            case Tab.Leaderboard: return this.renderLeaderboard();
-            case Tab.Games: return this.renderGames();
-        }
-    }
-    renderGames() {
+    closeDialog() {
         var _a;
-        return (h("div", { class: "Games" }, (_a = this.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map(game => (h("div", null, h("img", { src: game.defaultThumbnail, alt: "" }))))));
-    }
-    renderLeaderboard() {
-        if (!this.leaderboards)
-            return h("general-animation-loading", null);
-        if (!this.leaderboards.length)
-            return '';
-        return (h("table", { class: "Leaderboards" }, this.leaderboards.map(leaderboard => (h("tr", { class: classnames({ isMe: leaderboard.isMe }) }, h("td", { class: "LeaderboardRank" }, h("span", null, leaderboard.rank)), h("td", { class: "LeaderboardName" }, leaderboard.shortName), h("td", { class: "LeaderboardScore" }, leaderboard.score), h("td", { class: "LeaderboardPrize" }, leaderboard.prizeName))))));
+        (_a = this.dialog.onClose) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false, onClose: undefined });
     }
-    renderTabs() {
-        const { locale, tab } = this;
-        return (h("div", { class: "TabsContainer" }, h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", { class: classnames({ active: tab === _tab }),
-            onClick: this.onClickTab.bind(this, _tab) }, locale[_tab]))))));
-    }
-    renderTimeBar(tournament) {
-        return (h("section", { class: "TimeContainer" }, h("div", { class: 'Time' }, tournament.playerEnrolled ? (h(Fragment, null, h("div", null, getDifference(addSeconds(tournament.startTime, this.time), tournament.endTime)), h("div", null, h(GradientRoundedButton, { statedClasses: {
-                isHollow: true,
-                isPendding: false,
-            }, innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%` })))) : (h(Fragment, null, h("div", null, formatDate(tournament.startTime)), h("div", null, formatDate(tournament.endTime))))), h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
-    }
-    renderInfo() {
-        var _a, _b;
-        const { locale, tournamentItem: tournament, isShowInfo } = this;
-        return (h("div", { class: "InfoContainer" }, this.renderTimeBar(tournament), (h("section", { class: "ShowInfo", onClick: this.onClickShowInfo }, h("p", null, h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen), h("span", null, locale.LeaderboardDetails)))), isShowInfo && (h("section", { class: "Info" }, h("div", null, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: '_blank' }, locale.TC)))), this.isTournamentClosed(this.tournamentItem) && ((_a = this.leaderboards) === null || _a === void 0 ? void 0 : _a.find(l => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, this.getResultPrize((_b = this.leaderboards) === null || _b === void 0 ? void 0 : _b.find(l => l.isMe))) })), h("section", { class: "Prizes" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))));
-    }
-    getResultPrize(leaderboard) {
-        return {
-            prize: leaderboard.prizeName,
-            place: leaderboard.rank,
+    constructor() {
+        this.gifts = [];
+        this.labels = [];
+        this.language = 'en';
+        this.show = false;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.device = 'Mobile';
+        this.leaderboardsInit = undefined;
+        this.tab = Tab.info;
+        this.locale = TRANSLATIONS;
+        this.tournamentItem = undefined;
+        this.tournamentList = undefined;
+        this.leaderboards = [];
+        this.isActionJoinPending = false;
+        this.isDialogOpen = false;
+        this.isShowInfo = false;
+        this.page = LeaderboardPage.list;
+        this.tournamentInDialog = undefined;
+        this.dialog = {
+            isOpen: false,
+            type: undefined,
+            data: undefined,
+            onClose: undefined
         };
-    }
-    renderCloseBarInLayout() {
-        const { left, middle } = this.getWrapperBarData();
-        return (h(CloseBar, { left, middle,
-            right: (h("span", { onClick: this.onClickBarInLayout }, iconClose)) }));
-    }
-    renderCloseBarInLayoutDialog() {
-        return (h(CloseBar, { right: (h("span", { onClick: this.onClickBarInLayoutDialog }, iconClose)) }));
-    }
-    renderLeaderboardContainer(render) {
-        const { dialog: { isOpen } } = this;
-        return (h("div", { class: "Wrapper" }, h("div", { class: classnames("WrapperContent", { faded: isOpen }) }, this.renderCloseBarInLayout(), h("div", { class: "Root" }, h("div", { class: "Main" }, render))), h("div", { class: "WrapperUtil" }, h("dialog", { open: isOpen }, h("div", null, this.renderCloseBarInLayoutDialog(), isOpen && this.renderDialogContent())))));
-    }
-    getWrapperBarData() {
-        const { page, locale } = this;
-        switch (page) {
-            case LeaderboardPage.List:
-                return {
-                    left: h("span", { onClick: this.onClickBarTip }, iconQuestion),
-                    middle: locale.Leaderboards
-                };
-            case LeaderboardPage.Item:
-                return {
-                    left: (h("span", { onClick: this.onClickBarBack }, iconBack)),
-                    middle: '',
-                };
-        }
-    }
-    openDialog(type, data = undefined) {
-        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, type, data });
-    }
-    closeDialog() {
-        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false });
+        this.time = 0;
+        this.newIdList = [];
+        // bind all renders
+        this.renders = {};
+        Object.keys(renders).forEach((key) => {
+            this.renders[key] = {};
+            Object.keys(renders[key]).forEach((subKey) => {
+                this.renders[key][subKey] = renders[key][subKey].bind(this, this);
+            });
+        });
     }
     static get is() { return "casino-engagement-suite-tournament"; }
     static get encapsulation() { return "shadow"; }
@@ -388,6 +194,24 @@ export class CasinoEngagementSuiteTournament {
                 "reflect": false,
                 "defaultValue": "'en'"
             },
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "if widget is showing"
+                },
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "clientStyling": {
                 "type": "string",
                 "mutable": false,
@@ -442,6 +266,24 @@ export class CasinoEngagementSuiteTournament {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's device type"
+                },
+                "attribute": "device",
+                "reflect": false,
+                "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+            },
             "leaderboardsInit": {
                 "type": "unknown",
                 "mutable": false,
@@ -478,7 +320,8 @@ export class CasinoEngagementSuiteTournament {
             "page": {},
             "tournamentInDialog": {},
             "dialog": {},
-            "time": {}
+            "time": {},
+            "newIdList": {}
         };
     }
     static get events() {
@@ -499,6 +342,18 @@ export class CasinoEngagementSuiteTournament {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "newIdList",
+                "methodName": "checkNewIdList"
+            }, {
+                "propName": "tournamentList",
+                "methodName": "syncBarState"
+            }, {
+                "propName": "show",
+                "methodName": "showPropWatcher"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "message",

package/dist/collection/shared/GradientRoundedButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { h } from "@stencil/core";
 import { classnames } from "../utils/utils";
-export const GradientRoundedButton = (_a) => {
+export const renderGradientRoundedButton = (_a) => {
     var { statedClasses, innerHTML } = _a, props = __rest(_a, ["statedClasses", "innerHTML"]);
     const { isHollow, isPending } = statedClasses;
     return (h("button", Object.assign({ class: classnames('GradientRoundedButton', 'GradientRounded', {

package/dist/collection/shared/renderBar.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-export const CloseBar = (props) => {
-    const { left, middle, right } = props;
+export const renderCloseBar = (attr) => {
+    const { left, middle, right } = attr;
     const slots = {
         left,
         middle,

package/dist/collection/shared/renders.dialog.js

@@ -0,0 +1,49 @@
+import { h } from "@stencil/core";
+import { iconTrophy } from "./icons";
+import { localePostprocess } from "../utils/translations";
+import { renderGradientRoundedButton } from "./GradientRoundedButton";
+var GradientButton;
+(function (GradientButton) {
+    GradientButton["normal"] = "normal";
+    GradientButton["unjoinYes"] = "unjoinYes";
+    GradientButton["unjoinNo"] = "unjoinNo";
+})(GradientButton || (GradientButton = {}));
+const renderButton = (instance, buttonType) => {
+    const { locale } = instance;
+    const buttonCollector = {
+        normal: {
+            innerHTML: locale.WinDialog.ButtonContinue
+        },
+        unjoinYes: {
+            onClick: () => instance.actionJoin(instance.dialog.data),
+            innerHTML: locale.UnjoinDialog.ButtonYes
+        },
+        unjoinNo: {
+            statedClasses: {
+                isHollow: true,
+            },
+            innerHTML: locale.UnjoinDialog.ButtonNo,
+        }
+    };
+    const props = buttonCollector[buttonType];
+    return renderGradientRoundedButton({
+        statedClasses: Object.assign({ isPending: instance.isActionJoinPending }, props.statedClasses),
+        onClick: () => {
+            var _a;
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call();
+            instance.closeDialog();
+        },
+        innerHTML: props.innerHTML,
+    });
+};
+export const dialog = {
+    gift(instance) {
+        const { name: tournamentName } = instance.gifts[0];
+        const { locale } = instance;
+        return (h("div", { class: "PageConfirmContainer" }, h("div", { class: "PageConfirm" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.WinDialog.Tile), h("div", { class: "Description", innerHTML: localePostprocess(locale.WinDialog.Description, { tournamentName }) }), h("div", { class: "PageConfirmButtonsGroup" }, renderButton(instance, GradientButton.normal)))));
+    },
+    unjoin(instance) {
+        const { locale } = instance;
+        return (h("div", { class: "DialogContentUnjoin" }, h("div", { class: "DialogContentUnjoinTitle" }, locale.UnjoinDialog.Title), h("div", { class: "DialogContentUnjoinDescription", innerHTML: locale.UnjoinDialog.Description }), renderButton(instance, GradientButton.unjoinYes), renderButton(instance, GradientButton.unjoinNo)));
+    }
+};

package/dist/collection/shared/renders.js

@@ -0,0 +1,8 @@
+import { dialog } from "./renders.dialog";
+import { page } from "./renders.page";
+import { tab } from "./renders.tab";
+export const renders = {
+    dialog,
+    page,
+    tab
+};