@everymatrix/user-funds-acknowledgment 0.0.1

package/dist/collection/components/user-funds-acknowledgment/user-funds-acknowledgment.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+}
+
+.QueryReferenceContainer {
+  height: 100%;
+  width: 100%;
+}
+
+.UserProtectionFundsTitle {
+  font-size: 1.2rem;
+  font-weight: 200;
+  text-align: center;
+}
+
+.CloseButton {
+  width: 25px;
+  height: 25px;
+  align-self: flex-end;
+}
+
+.UserProtectionFundsContainer {
+  font-family: inherit;
+  font-weight: 100;
+  height: 100%;
+  padding: 1rem 1.5rem;
+  background-color: var(--emw--color-white, #FFFFFF);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: var(--emw--border-radius-large, 20px);
+  max-width: fit-content;
+}
+
+.ConsentSubmitButton {
+  font-size: 1rem;
+  font-family: var(--emw--button-typography);
+  padding: 0.4rem 1.4rem;
+  background: var(--emw--button-background-color, #FFFFFF);
+  border: var(--emw--button-border, 2px solid #000000);
+  color: var(--emw--button-text-color, #000000);
+  border-radius: var(--emw--button-border-radius, 10px);
+  align-self: center;
+  cursor: pointer;
+}
+.ConsentSubmitButton:disabled {
+  border: 2px solid #ccc;
+  color: #ccc;
+  cursor: unset;
+}
+
+.ButtonsWrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  gap: 40px;
+}
+.ButtonsWrapper button:only-child {
+  margin-left: auto;
+}
+
+.UserProtectionError {
+  color: var(--emw--color-error, #FD2839);
+  text-align: center;
+  height: 22px;
+}
+
+@media screen and (max-width: 320px) {
+  .QueryReferenceContainer {
+    font-size: 0.8rem;
+    color: var(--emw--button-text-color, #000000);
+  }
+}
+.spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+}
+.spinner .path {
+  stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/dist/collection/components/user-funds-acknowledgment/user-funds-acknowledgment.js

@@ -0,0 +1,533 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { getTranslations, translate } from "../../utils/locale.utils";
+export class UserFundsAcknowledgment {
+    constructor() {
+        this.abortController = null;
+        this.TIMEOUT_MS = 10000; // 10 seconds
+        /**
+         * Returns the formatted balance
+         * @param balance -> the balance value to be formatted
+         */
+        this.formatBalance = (balance) => {
+            if (this.customdisplayformat) {
+                return this.formatFromCustom(balance);
+            }
+            const locales = this.currencylocale || this.language;
+            const formatOptions = {
+                style: 'currency',
+                currency: this.playercurrency,
+                useGrouping: true,
+                currencyDisplay: this.currencydisplay,
+                maximumFractionDigits: this.maximumfractiondigits === '' || isNaN(Number(this.maximumfractiondigits)) ? 2 : Number(this.maximumfractiondigits),
+                minimumFractionDigits: this.minimumfractiondigits === '' || isNaN(Number(this.minimumfractiondigits)) ? 0 : Number(this.minimumfractiondigits),
+            };
+            return new Intl.NumberFormat(locales, formatOptions).format(balance);
+        };
+        /**
+         * Parses customdisplayformat and returns the formatted balance accordingly.
+         * Example:
+         *    if customdisplayformat = '{amount|,.1} {currency}', currency = 'EUR'
+         *    then formatFromCustom(123123.199) = '123,123.1 EUR'
+         * @param balance
+         */
+        this.formatFromCustom = (balance) => {
+            const tokens = [];
+            let acc = '';
+            for (const char of this.customdisplayformat) {
+                switch (char) {
+                    default:
+                        acc += char;
+                        break;
+                    case '{':
+                        acc && tokens.push(acc);
+                        acc = '';
+                        break;
+                    case '}':
+                        const [variable, args] = acc.split('|');
+                        acc = '';
+                        if (variable.toLowerCase() === 'currency') {
+                            acc = this.playercurrency;
+                        }
+                        else if (variable.toLowerCase() === 'amount') {
+                            // defaults
+                            let sepThousands = ',';
+                            let sepDecimal = '.';
+                            let decimals = 2;
+                            // override defaults if args provided (' ' is considered empty so default is used)
+                            if (args) {
+                                args[0] !== ' ' && (sepThousands = args[0]);
+                                args[1] !== ' ' && (sepDecimal = args[1]);
+                                args[2] !== ' ' && !isNaN(Number(args[2])) && (decimals = Number(args[2]));
+                            }
+                            // separate int and fractional part, also round down to desired precision
+                            let [integerPart, fractionalPart] = String(Math.floor(balance * 10 ** decimals) / 10 ** decimals).split('.');
+                            // format int part by adding thousands separators
+                            acc += integerPart[0];
+                            for (let i = 1; i < integerPart.length; ++i) {
+                                if ((integerPart.length - i) % 3 === 0) {
+                                    acc += (sepThousands + integerPart[i]);
+                                }
+                                else {
+                                    acc += integerPart[i];
+                                }
+                            }
+                            let finalFraction = fractionalPart || '';
+                            const forceDecimals = this.alwaysshowdecimals === 'true';
+                            const maxFractionDigits = Number(this.maximumfractiondigits);
+                            if (forceDecimals) {
+                                // Always show exactly maxFractionDigits decimals
+                                finalFraction = finalFraction.padEnd(maxFractionDigits || 2, '0').substring(0, maxFractionDigits);
+                            }
+                            else {
+                                // Default behavior: only show decimals if they exist
+                                if (!finalFraction) {
+                                    break;
+                                }
+                            }
+                            // Append decimals
+                            acc += sepDecimal + finalFraction;
+                        }
+                        acc && tokens.push(acc);
+                        acc = '';
+                        break;
+                }
+            }
+            tokens.push(acc);
+            return tokens.join('');
+        };
+        this.handleSubmit = () => {
+            var _a;
+            this.consentsSubmitted = true;
+            // Abort any in-flight request before starting a new one
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.abortController = new AbortController();
+            const timeoutId = setTimeout(() => {
+                var _a;
+                (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort('Request timed out');
+            }, this.TIMEOUT_MS);
+            const url = `${this.endpoint}/api/pam/v1/actions/customer-funds-protection`;
+            const headers = new Headers();
+            headers.append('Content-Type', 'application/json');
+            headers.append('X-SessionId', `${this.session}`);
+            headers.append('X-Tenant-ID', `${this.operatorid}`);
+            return fetch(url, {
+                method: 'POST',
+                headers: headers,
+                body: JSON.stringify({ accepted: true }),
+                signal: this.abortController.signal,
+            })
+                .then((res) => {
+                if (!res.ok) {
+                    this.errorMessage = `${translate('apiCallError', this.language)} ${res.status}`;
+                    throw new Error(`Request failed with status ${res.status}`);
+                }
+                // 202 Accepted has no body, skip res.json()
+                if (res.status === 202) {
+                    this.errorMessage = '';
+                    localStorage.removeItem("totalCashAmount");
+                    window.postMessage({ type: 'ProtectionFundsAccepted' }, window.location.href);
+                    return;
+                }
+                return res.json();
+            })
+                .catch((error) => {
+                var _a;
+                if (error.name === 'AbortError') {
+                    // Validate between timeout/unmount
+                    const reason = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal.reason;
+                    if (reason === 'Request timed out') {
+                        this.errorMessage = translate('serverNotResponding', this.language);
+                    }
+                    return;
+                }
+                console.error('Customer funds protection request failed:', error.message);
+                this.errorMessage = translate('serverNotResponding', this.language);
+            })
+                .finally(() => {
+                clearTimeout(timeoutId); // clear timer
+                this.abortController = null;
+            });
+            ;
+        };
+        this.session = undefined;
+        this.operatorid = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.currencylocale = 'en';
+        this.currencydisplay = 'symbol';
+        this.maximumfractiondigits = '2';
+        this.minimumfractiondigits = '0';
+        this.customdisplayformat = '';
+        this.alwaysshowdecimals = 'true';
+        this.playercurrency = 'EUR';
+        this.isLoading = false;
+        this.isConsentChecked = false;
+        this.totalCashAmount = 0;
+        this.errorMessage = '';
+        this.consentsSubmitted = false;
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    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);
+        }
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        this.totalCashAmount = parseFloat(localStorage.getItem('totalCashAmount')) || 0;
+    }
+    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() {
+        var _a;
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort('Component unmounted');
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    userLegislationConsentHandler() {
+        if (this.checkboxInput) {
+            this.isConsentChecked = this.checkboxInput.checked;
+        }
+        // In case of a network error, permit the user to retry consents submission
+        if (this.isConsentChecked) {
+            this.consentsSubmitted = false;
+            this.errorMessage = '';
+        }
+    }
+    consentsArea() {
+        return (h("div", { class: "UserProtectionFundsCheckboxArea" }, h("label", { class: "UserProtectionFundsCheckboxContent", htmlFor: "userProtectionFunds" }, h("input", { ref: el => this.checkboxInput = el, id: "userProtectionFunds", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), h("span", { innerHTML: `${translate('protectionCheckboxLabel', this.language)}` }))));
+    }
+    render() {
+        return (h("div", { key: 'e6361dbe3338fd1bbf9b54eb41b3fddf0f8829c7', class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (h("div", null, h("slot", { name: 'spinner' }), h("svg", { class: "spinner", viewBox: "0 0 50 50" }, h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })))) : (h("div", { class: "UserProtectionFundsContainer" }, h("div", { class: "UserProtectionFundsTitle" }, h("h2", null, translate('protectionTitle', this.language))), h("div", { class: "UserProtectionFundsWrapper" }, h("p", { innerHTML: `${translate('protectionContent', this.language)}` })), h("div", { class: "UserProtectionFundsBalance" }, h("p", null, translate('balanceArea', this.language), " ", h("span", null, this.formatBalance(this.totalCashAmount)))), h("div", { class: "UserProtectionFundsButtonsWrapper" }, h("div", null, this.consentsArea()), h("div", null, h("button", { class: "UserProtectionFundsSubmitButton", disabled: !this.isConsentChecked || this.errorMessage != '' || this.consentsSubmitted, onClick: this.handleSubmit }, translate('submitButtonText', this.language))), h("div", { class: "UserProtectionError" }, this.errorMessage != '' && this.errorMessage))))));
+    }
+    static get is() { return "user-funds-acknowledgment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["user-funds-acknowledgment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["user-funds-acknowledgment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The session required for the submit call"
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "operatorid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "operatorid",
+                "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": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "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-styling-url",
+                "reflect": true
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The endpoint required for the submit call"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "currencylocale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "These props are used only by Intl.NumberFormat and have no effect if customdisplayformat is passed, as it will be used instead"
+                },
+                "attribute": "currencylocale",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "currencydisplay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "currencydisplay",
+                "reflect": true,
+                "defaultValue": "'symbol'"
+            },
+            "maximumfractiondigits": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "maximumfractiondigits",
+                "reflect": true,
+                "defaultValue": "'2'"
+            },
+            "minimumfractiondigits": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "minimumfractiondigits",
+                "reflect": true,
+                "defaultValue": "'0'"
+            },
+            "customdisplayformat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Example value: '{amount|,.2} {currency}'. The {} blocks are replaced by their respective values.\nEverything else in the string is left as it is. The \"amount\" block also accepts arguments that must be placed after \"|\".\nFirst char is the Thousands Separator, second is the Decimal Separator, third is Decimal Precision.\nAn empty value (' ') indicates that the default values should be used for that specific arg."
+                },
+                "attribute": "customdisplayformat",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "alwaysshowdecimals": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "alwaysshowdecimals",
+                "reflect": true,
+                "defaultValue": "'true'"
+            },
+            "playercurrency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "playercurrency",
+                "reflect": true,
+                "defaultValue": "'EUR'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isConsentChecked": {},
+            "totalCashAmount": {},
+            "errorMessage": {},
+            "consentsSubmitted": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/user-funds-acknowledgment';