@everymatrix/pam-account-balance-modal 0.1.0

package/dist/collection/components/pam-account-balance-modal/pam-account-balance-modal.js

@@ -0,0 +1,635 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { EventSourcePolyfill } from "event-source-polyfill";
+import * as currencyFormatter from "currency.js";
+import { translate } from "../../utils/locale.utils";
+import "../../../../../ui-skeleton/dist/types/index";
+export class PamAccountBalanceModal {
+    constructor() {
+        this.totalCalculationModes = ['totalCashAmount', 'totalRealAmount'];
+        this.setLocaleIdentifier = () => {
+            if (this.customLocaleIdentifier.includes(this.language)) {
+                return this.customLocaleIdentifier;
+            }
+        };
+        this.formatBalance = (balance) => {
+            if (this.customLocaleIdentifier) {
+                return new Intl.NumberFormat(this.setLocaleIdentifier(), { useGrouping: true }).format(balance);
+            }
+            if (this.currencySeparator && this.currencyDecimal) {
+                // @ts-ignore
+                return currencyFormatter.default(balance, { separator: this.currencySeparator, decimal: this.currencyDecimal, symbol: '', precision: parseInt(this.currencyPrecision || '2', 10) }).format();
+            }
+            // @ts-ignore
+            return currencyFormatter.default(balance, { separator: '.', decimal: ',', symbol: '', precision: parseInt(this.currencyPrecision || '2', 10) }).format();
+        };
+        this.getBalances = () => {
+            this.isLoading = true;
+            const url = new URL(`/v2/player/${this.userId}/balance/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const params = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve) => {
+                return fetch(url, params)
+                    .then(res => res.json())
+                    .then(res => resolve(res))
+                    .catch((err) => {
+                    console.log('Balance fetch error', err);
+                    throw new Error('Failed to fetch balance data!');
+                })
+                    .finally(() => this.isLoading = false);
+            });
+        };
+        this.subscribeToBalanceUpdates = () => {
+            if (this.currentStream) {
+                this.currentStream.close();
+            }
+            ;
+            if (this.session.length < 1) {
+                return;
+            }
+            const url = new URL(`/v2/player/${this.userId}/information/updates/`, this.endpoint);
+            const headers = {
+                'accept': 'text/event-stream',
+                'X-SessionId': this.session
+            };
+            const stream = new EventSourcePolyfill(url, { headers: headers });
+            this.currentStream = stream;
+            stream.addEventListener("message", this.updateBalances);
+        };
+        this.parseData = (data) => {
+            let parsedData;
+            try {
+                parsedData = JSON.parse(data);
+            }
+            catch (e) {
+                console.log('Balance stream failed: ', e);
+                return;
+            }
+            return parsedData;
+        };
+        this.updateRealAmount = (currentRealAmount, state, balanceItem) => {
+            let updatedRealAmount = null;
+            switch (balanceItem.walletAccountType) {
+                case 'Ordinary':
+                    if (balanceItem.afterAmount !== balanceItem.affectedAmount || state.lastOrdinaryAfterAmount === 0) {
+                        state.lastOrdinaryAfterAmount = balanceItem.afterAmount;
+                        if (!state.showCreditLineAfterAmount) {
+                            updatedRealAmount = balanceItem.afterAmount;
+                        }
+                    }
+                    break;
+                case 'CreditLine':
+                    if (balanceItem.afterAmount !== 0) {
+                        updatedRealAmount = balanceItem.afterAmount;
+                        state.showCreditLineAfterAmount = true;
+                    }
+                    else {
+                        updatedRealAmount = state.lastOrdinaryAfterAmount;
+                        state.showCreditLineAfterAmount = false;
+                    }
+                    break;
+                default:
+                    updatedRealAmount = balanceItem.afterAmount;
+            }
+            return updatedRealAmount === null ? currentRealAmount : updatedRealAmount;
+        };
+        this.updateTotalAmount = () => {
+            switch (this.totalCalculationMode) {
+                case 'totalCashAmount':
+                    let totalCashAmount = 0;
+                    for (const balanceType of ['Real', 'Bonus']) {
+                        for (const balance of this.balances[balanceType]) {
+                            totalCashAmount += Math.max(balance.amount, 0);
+                        }
+                    }
+                    this.balances['Total'][0].amount = totalCashAmount;
+                    break;
+                case 'totalRealAmount':
+                    if (!this.isSplitWallet) {
+                        return;
+                    }
+                    let totalRealAmount = 0;
+                    for (const balance of this.balances['Real']) {
+                        totalRealAmount += balance.amount;
+                    }
+                    this.balances['Total'][0].amount = totalRealAmount;
+                    break;
+            }
+        };
+        this.updateBalances = (e) => {
+            const parsedData = this.parseData(e.data);
+            if (!parsedData) {
+                this.subscribeToBalanceUpdates();
+                return;
+            }
+            if (parsedData.type !== 'BALANCE_UPDATE_V2') {
+                return;
+            }
+            const balanceChange = parsedData.body.balanceChange;
+            for (const [balanceType, balanceItem] of Object.entries(balanceChange)) {
+                // Compute totalRealAmount for single wallet
+                if (this.totalCalculationMode === 'totalRealAmount' && balanceType === 'Real' && !this.isSplitWallet) {
+                    this.balances["Total"][0].amount = this.updateRealAmount(this.balances["Total"][0].amount, this.updateRealAmountState, balanceItem);
+                }
+                if (!this.balances[balanceType]) {
+                    continue;
+                }
+                // Assign new balance values
+                for (const balance of this.balances[balanceType]) {
+                    if (!this.isSplitWallet) {
+                        balance.amount = balanceType === 'Real'
+                            ? this.updateRealAmount(balance.amount, this.updateRealAmountState, balanceItem)
+                            : balanceItem.afterAmount;
+                        continue;
+                    }
+                    if (balanceItem.productType === balance.productType) {
+                        balance.amount = balanceType === 'Real'
+                            ? this.updateRealAmount(balance.amount, this.updateRealAmountState[balance.productType], balanceItem)
+                            : balanceItem.afterAmount;
+                    }
+                }
+            }
+            this.updateTotalAmount();
+            this.balances = Object.assign({}, this.balances);
+        };
+        this.balanceModalOpenDeposit = () => {
+            this.toggleModal('close');
+            window.postMessage({ type: 'GoToDeposit' }, window.location.href);
+            // @ts-ignore Analytics event
+            if (typeof gtag == 'function') {
+                // @ts-ignore
+                gtag('event', 'GoToDeposit', {
+                    'context': 'PlayerAccountBalanceModal'
+                });
+            }
+        };
+        this.validateTotalCalculationMode = () => {
+            if (!this.totalCalculationModes.includes(this.totalCalculationMode)) {
+                console.error(`Unsupported value ('${this.totalCalculationMode}') for totalcalculationmode parameter. Only the following values are supported ${this.totalCalculationModes}. Using default value ('${this.totalCalculationModes[0]}').`);
+                this.totalCalculationMode = this.totalCalculationModes[0];
+            }
+        };
+        this.messageHandler = (e) => e.data && e.data.type === 'LogoutSuccessfull' && this.currentStream.close();
+        this.updateBalanceStyling = () => {
+            window.postMessage({ type: 'UpdateBalanceBackground' }, window.location.href);
+        };
+        this.toggleModal = (action) => {
+            switch (action) {
+                case 'open':
+                    window.postMessage({ type: 'BalanceModalStatus', status: 'open' }, window.location.href);
+                    this.isModalDisplayed = true;
+                    break;
+                case 'close':
+                    window.postMessage({ type: 'BalanceModalStatus', status: 'close' }, window.location.href);
+                    this.isModalDisplayed = false;
+                    break;
+            }
+        };
+        this.userId = undefined;
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.customLocaleIdentifier = undefined;
+        this.displayBalanceOption = undefined;
+        this.totalCalculationMode = undefined;
+        this.currencySeparator = undefined;
+        this.currencyDecimal = undefined;
+        this.currencyPrecision = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.language = 'en';
+        this.isLoading = true;
+        this.isModalDisplayed = false;
+        this.isSplitWallet = false;
+        this.currentStream = undefined;
+        this.currency = undefined;
+        this.updateRealAmountState = undefined;
+        this.balances = { Total: [], Real: [], Bonus: [], Credit: [] };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        this.validateTotalCalculationMode();
+        this.getBalances()
+            .then(balanceData => this.setBalances(balanceData));
+        this.subscribeToBalanceUpdates();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    setBalances(balanceData) {
+        if (!balanceData[this.totalCalculationMode]) {
+            this.totalCalculationMode = this.totalCalculationModes[0];
+        }
+        this.balances.Total.push({ amount: 0, productType: '' });
+        // we consider the first real ordinary balance to be a source of truth
+        const firstRealOrdinaryBalance = balanceData.items.find(item => item['type'] === 'Real' && item['walletAccountType'] === 'Ordinary');
+        this.currency = firstRealOrdinaryBalance['currency'];
+        this.isSplitWallet = Boolean(firstRealOrdinaryBalance['productType']);
+        if (this.isSplitWallet) {
+            this.setBalancesWhenSplitWallet(balanceData);
+        }
+        else {
+            this.setBalancesWhenSingleWallet(balanceData);
+        }
+    }
+    setBalancesWhenSingleWallet(balanceData) {
+        this.updateRealAmountState = { lastOrdinaryAfterAmount: 0, showCreditLineAfterAmount: false };
+        this.balances['Total'][0].amount = balanceData[this.totalCalculationMode][this.currency];
+        for (const balance of balanceData.items) {
+            switch (balance.type) {
+                case 'Bonus':
+                    if (this.balances['Bonus'].length === 0) {
+                        this.balances['Bonus'].push({ amount: balance.amount, productType: '' });
+                    }
+                    else {
+                        this.balances['Bonus'][0].amount += balance.amount;
+                    }
+                    break;
+                case 'Real':
+                    if (balance.creditLine && this.balances['Credit'].length === 0) {
+                        this.balances['Credit'].push({ amount: balance.creditLine, productType: '' });
+                    }
+                    /*
+                      In the case of "totalRealAmount", Real and Total will always have the same value,
+                      therefore we only show the Total balance ( required for Fitzdares )
+                    **/
+                    if (this.totalCalculationMode === 'totalRealAmount') {
+                        continue;
+                    }
+                    if (this.balances['Real'].length === 0) {
+                        this.balances['Real'].push({ amount: balance.amount, productType: '' });
+                    }
+                    else {
+                        this.balances['Real'][0].amount += balance.amount;
+                    }
+                    break;
+            }
+        }
+        for (const [balanceType, balance] of Object.entries(this.balances)) {
+            if (balance.length < 1) {
+                delete this.balances[balanceType];
+            }
+        }
+    }
+    setBalancesWhenSplitWallet(balanceData) {
+        this.updateRealAmountState = {
+            'Casino': { lastOrdinaryAfterAmount: 0, showCreditLineAfterAmount: false },
+            'Sports': { lastOrdinaryAfterAmount: 0, showCreditLineAfterAmount: false }
+        };
+        let balanceItems = balanceData.items;
+        if (this.displayBalanceOption && this.displayBalanceOption !== 'All') {
+            balanceItems = balanceData.items.filter((elem) => elem.productType === this.displayBalanceOption);
+        }
+        for (const balance of balanceItems) {
+            let idx;
+            switch (balance.type) {
+                case 'Bonus':
+                    idx = this.balances['Bonus'].findIndex(b => b.productType === balance.productType);
+                    if (idx > 0) {
+                        this.balances['Bonus'][idx].amount += balance.amount;
+                    }
+                    else {
+                        this.balances['Bonus'].push({ amount: balance.amount, productType: balance.productType });
+                    }
+                    break;
+                case 'Real':
+                    if (balance.creditLine) {
+                        this.balances['Credit'].push({ amount: balance.creditLine, productType: balance.productType });
+                    }
+                    idx = this.balances['Real'].findIndex(b => b.productType === balance.productType);
+                    if (idx > 0) {
+                        this.balances['Real'][idx].amount += balance.amount;
+                    }
+                    else {
+                        this.balances['Real'].push({ amount: balance.amount, productType: balance.productType });
+                    }
+                    break;
+            }
+        }
+        this.updateTotalAmount();
+        for (const [balanceType, balance] of Object.entries(this.balances)) {
+            if (balance.length < 1) {
+                delete this.balances[balanceType];
+            }
+        }
+    }
+    render() {
+        const balanceButton = (h("button", { class: "BalanceValue", onClick: () => this.toggleModal('open') }, h("p", null, this.balances['Total'].length > 0 ? this.formatBalance(this.balances['Total'][0].amount) : '0', " ", this.currency), h("span", { class: " {isModalDisplayed ? 'TriangleActive' : 'TriangleInactive'}" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)", fill: "#d1d1d1" })))));
+        const balanceModal = (h("div", { class: this.isModalDisplayed ? 'BalanceModalWrapper Open' : 'BalanceModalWrapper' }, h("button", { class: "BalanceModalClose", onClick: () => this.toggleModal('close') }), h("div", { class: "BalanceModal" }, h("div", { class: "ModalContent" }, h("div", { class: "BalanceModalHeader" }, h("p", { class: "BalanceModalTitle" }, translate('Title', this.language))), h("div", { class: "BalanceModalBody" }, Object.keys(this.balances).map((key) => {
+            return (h("div", { class: "BalanceModalRowBoth" }, this.balances[key].map((balance) => {
+                return (h("div", { class: "BalanceModalRowLine" }, h("p", { class: "BalanceModalText" }, translate(key, this.language), " ", balance.productType ? translate(balance.productType, this.language) : ''), h("p", { class: "BalanceModalValue" }, h("span", { class: "BalanceModalAmount" }, balance.amount ? this.formatBalance(balance.amount) : '0'), h("span", { class: "BalanceModalCurrency" }, " " + this.currency))));
+            })));
+        })), h("div", { class: "BalanceModalFooter" }, h("button", { class: "BalanceModalAction", onClick: () => this.balanceModalOpenDeposit() }, translate('DepositButton', this.language)))))));
+        const skeleton = (h("div", { class: "LoadingSkeleton" }, h("ui-skeleton", { structure: "title", height: "20px", width: "auto" })));
+        return (h("div", { ref: (el) => (this.stylingContainer = el) }, h("div", { class: "PamAccountBalanceModal" }, this.isLoading
+            ? skeleton
+            : h("div", null, balanceButton, balanceModal)), this.isModalDisplayed && (h("button", { class: "PamAccountBalanceModalOverlay", onClick: () => this.toggleModal('close') }))));
+    }
+    static get is() { return "pam-account-balance-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-account-balance-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-account-balance-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-id",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "customLocaleIdentifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-locale-identifier",
+                "reflect": true
+            },
+            "displayBalanceOption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "display-balance-option",
+                "reflect": true
+            },
+            "totalCalculationMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "total-calculation-mode",
+                "reflect": true
+            },
+            "currencySeparator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "currency-separator",
+                "reflect": true
+            },
+            "currencyDecimal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "currency-decimal",
+                "reflect": true
+            },
+            "currencyPrecision": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "currency-precision",
+                "reflect": true
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isModalDisplayed": {},
+            "isSplitWallet": {},
+            "currentStream": {},
+            "currency": {},
+            "updateRealAmountState": {},
+            "balances": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/pam-account-balance-modal';