@everymatrix/pam-player-profile-controller 0.7.4

package/dist/collection/components/pam-player-profile-controller/pam-player-profile-controller.js

@@ -0,0 +1,713 @@
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { isMobile } from "../../utils/utils";
+import "../../../../../pam-player-profile/dist/types/index";
+import "../../../../../pam-player-addresses/dist/types/index";
+import "../../../../../pam-player-contacts/dist/types/index";
+import "../../../../../pam-player-documents/dist/types/index";
+import "../../../../../../svelte/player-consents/es2015/player-consents";
+export class PlayerProfileController {
+    constructor() {
+        this.data = {};
+        this.validStatus = {};
+        this.numUpdateDataReceived = 0;
+        this.numUpdateDataExpected = 0;
+        this.numUpdateDataSuccessful = 0;
+        this.sectionsToUpdate = [];
+        this.updateFunctionMap = {
+            'PROFILE': this.updateDataProfile.bind(this),
+            'ADDRESSES': this.updateDataAddresses.bind(this),
+            'DOCUMENTS': this.updateDataDocuments.bind(this),
+            'CONTACTS': this.updateDataContacts.bind(this)
+        };
+        this.sendSuccessNotification = () => {
+            window.postMessage({ type: 'WidgetNotification', data: { type: 'success', message: translate('successMessage', this.lang) } }, window.location.href);
+        };
+        this.sendErrorNotification = (errorKey) => {
+            window.postMessage({ type: 'WidgetNotification', data: { type: 'error', message: translate(errorKey, this.lang) } }, window.location.href);
+        };
+        this.sendData = (section) => {
+            let data = {};
+            switch (section) {
+                case 'PROFILE':
+                    data = this.data;
+                    break;
+                case 'ADDRESSES':
+                    data['addresses'] = this.data.addresses;
+                    break;
+                case 'CONTACTS':
+                    data['contacts'] = this.data.contacts;
+                    break;
+                case 'DOCUMENTS':
+                    data['documents'] = this.data.documents;
+                    break;
+            }
+            window.postMessage({ type: `${section}_DATA`, data: data });
+        };
+        this.messageHandler = (message) => {
+            var _a, _b, _c;
+            let section = (_a = message.data) === null || _a === void 0 ? void 0 : _a.type.split('_')[0];
+            switch ((_b = message.data) === null || _b === void 0 ? void 0 : _b.type) {
+                case 'PROFILE_LOADED':
+                case 'ADDRESSES_LOADED':
+                case 'CONTACTS_LOADED':
+                case 'DOCUMENTS_LOADED':
+                    this.sendData(section);
+                    break;
+                case 'PROFILE_VALIDITY':
+                case 'ADDRESSES_VALIDITY':
+                case 'CONTACTS_VALIDITY':
+                case 'DOCUMENTS_VALIDITY':
+                    this.validStatus[section] = message.data.data;
+                    this.updateSubmitButtonStatus();
+                    break;
+                case 'PROFILE_UPDATE_DATA':
+                case 'ADDRESSES_UPDATE_DATA':
+                case 'CONTACTS_UPDATE_DATA':
+                case 'DOCUMENTS_UPDATE_DATA':
+                    const sectionToUpdate = (_c = message.data) === null || _c === void 0 ? void 0 : _c.type.split('_')[0];
+                    this.sectionsToUpdate.push(sectionToUpdate);
+                    this.numUpdateDataReceived += 1;
+                    // update this.data with the data received
+                    for (const key of Object.keys(message.data.data)) {
+                        this.data[key] = message.data.data[key];
+                    }
+                    // check if all subwidgets have sent their update data before making the update calls
+                    if (this.numUpdateDataReceived === this.numUpdateDataExpected) {
+                        this.updateDataRecursive(0);
+                    }
+                    break;
+            }
+        };
+        this.updateDataRecursive = (idx) => {
+            const section = this.sectionsToUpdate[idx];
+            if (idx >= this.sectionsToUpdate.length) {
+                if (this.numUpdateDataSuccessful === this.numUpdateDataExpected) {
+                    this.sendSuccessNotification();
+                }
+                this.resetState();
+                return null;
+            }
+            ;
+            const updateFn = this.updateFunctionMap[section];
+            updateFn()
+                .then((success) => {
+                success ? ++this.numUpdateDataSuccessful : this.sendErrorNotification(`errorMessage${this.toTitle(section)}Update`);
+                this.updateDataRecursive(++idx);
+            });
+        };
+        /**
+       * Promise for fetching the response and returning the response or the erorr message
+       * @param res - response from the API
+       */
+        this.handleFetchResponse = async (res) => {
+            var _a;
+            if (res.status >= 300) {
+                this.isError = true;
+                let response = await res.json();
+                this.errorCode = (_a = response.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.errorCode;
+                this.errorMessage = this.errorCode ? translate(this.errorCode, this.lang) : translate('errorMessageFetch', this.lang);
+                window.postMessage({
+                    type: 'WidgetNotification',
+                    data: {
+                        type: 'error',
+                        message: this.errorMessage
+                    }
+                }, window.location.href);
+                return Promise.reject(this.errorMessage);
+            }
+            else {
+                this.isError = false;
+                if (res.headers.get('content-type')) {
+                    let response = await res.json();
+                    return Promise.resolve(response);
+                }
+                return Promise.resolve();
+            }
+        };
+        this.getData = () => {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve, reject) => {
+                fetch(url.href, options)
+                    .then((res) => this.handleFetchResponse(res))
+                    .then(res => {
+                    this.data = res.player;
+                    resolve();
+                })
+                    .catch((error) => {
+                    console.log(error);
+                    reject();
+                });
+            });
+        };
+        this.sendDataRequest = (e) => {
+            if (e)
+                e.preventDefault();
+            this.isSubmitButtonAvailable = false;
+            Object.values(this.validStatus).forEach(v => {
+                if (v)
+                    this.numUpdateDataExpected += 1;
+            });
+            for (const [section, isValid] of Object.entries(this.validStatus)) {
+                if (isValid)
+                    window.postMessage({ type: `${section}_SEND_DATA` });
+            }
+        };
+        this.updateSubmitButtonStatus = () => {
+            this.isSubmitButtonAvailable = Object.values(this.validStatus).some(v => v);
+        };
+        this.toTitle = (value) => value.charAt(0).toUpperCase() + value.substring(1).toLowerCase();
+        this.toggleScreen = () => {
+            window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: this.isMobile }, window.location.href);
+        };
+        this.userId = undefined;
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.lang = 'en';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.addProfile = 'true';
+        this.addAddresses = undefined;
+        this.addContacts = undefined;
+        this.addDocuments = undefined;
+        this.addConsents = undefined;
+        this.dobFormat = 'DD/MM/YYYY';
+        this.isFullAddressDisplayed = undefined;
+        this.isPermanentAdressEditable = 'false';
+        this.isTemporaryAdressEditable = 'true';
+        this.isContactVerificationStatusDisplayed = 'false';
+        this.isPhoneNumberEditable = 'true';
+        this.isDocumentsEditable = 'false';
+        this.isMobile = isMobile(window.navigator.userAgent);
+        this.limitStylingAppends = false;
+        this.isLoading = true;
+        this.isSubmitButtonAvailable = false;
+        this.isError = false;
+        this.errorMessage = '';
+        this.errorCode = '';
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    async componentWillLoad() {
+        await this.getData().finally(() => this.isLoading = false);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBuss != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+        window.addEventListener('message', this.messageHandler, false);
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        window.removeEventListener('message', this.messageHandler, false);
+    }
+    resetState() {
+        this.getData().then(() => {
+            for (const section of this.sectionsToUpdate) {
+                this.sendData(section);
+            }
+            this.validStatus = {};
+            this.numUpdateDataReceived = 0;
+            this.numUpdateDataExpected = 0;
+            this.numUpdateDataSuccessful = 0;
+            this.sectionsToUpdate = [];
+        });
+    }
+    updateDataProfile() {
+        const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/`, this.endpoint);
+        const headers = new Headers();
+        headers.append('X-SessionId', this.session);
+        headers.append('Content-Type', 'application/problem+json; charset=utf-8');
+        const reqParams = {
+            method: 'PUT',
+            headers,
+            body: JSON.stringify(this.data)
+        };
+        return new Promise((resolve) => {
+            fetch(url, reqParams)
+                .then(res => resolve(res.ok));
+        });
+    }
+    updateDataDocuments() {
+        const promises = [];
+        for (const document of this.data.documents) {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/documents/${document['documentId']}/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionId', this.session);
+            headers.append('Content-Type', 'application/json-patch+json');
+            const reqParams = {
+                method: 'PUT',
+                headers,
+                body: JSON.stringify(document)
+            };
+            const promise = new Promise((resolve) => {
+                fetch(url, reqParams)
+                    .then(res => resolve(res.ok));
+            });
+            promises.push(promise);
+        }
+        return Promise.all(promises).then(successArr => successArr.every(v => v));
+    }
+    updateDataAddresses() {
+        const promises = [];
+        for (const address of this.data.addresses) {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/addresses/${address['addressId']}/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionId', this.session);
+            headers.append('Content-Type', 'application/json-patch+json');
+            const reqParams = {
+                method: 'PUT',
+                headers,
+                body: JSON.stringify(address)
+            };
+            const promise = new Promise((resolve) => {
+                fetch(url, reqParams)
+                    .then(res => resolve(res.ok));
+            });
+            promises.push(promise);
+        }
+        return Promise.all(promises).then(successArr => successArr.every(v => v));
+    }
+    updateDataContacts() {
+        const promises = [];
+        for (const contact of this.data.contacts) {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/contacts/${contact['contactId']}/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionId', this.session);
+            headers.append('Content-Type', 'application/json-patch+json');
+            const reqParams = {
+                method: 'PUT',
+                headers,
+                body: JSON.stringify(contact)
+            };
+            const promise = new Promise((resolve) => {
+                fetch(url, reqParams)
+                    .then(res => resolve(res.ok));
+            });
+            promises.push(promise);
+        }
+        return Promise.all(promises).then(successArr => successArr.every(v => v));
+    }
+    render() {
+        if (!this.isLoading && this.isError) {
+            return (h("div", { class: "errorContainer" }, h("p", { class: "errorMessage", innerHTML: this.errorMessage })));
+        }
+        return (h("div", { ref: el => this.stylingContainer = el }, this.isLoading
+            ? h("div", { class: "Loading" }, h("p", null, "Still Loading..."))
+            : h("form", { class: `PlayerProfileControllerWrapper ${this.isMobile ? 'Mobile' : ''}` }, this.isMobile
+                ? h("div", { class: "ReturnButton", onClick: this.toggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('title', this.lang)))
+                : h("h2", null, translate('title', this.lang)), this.addProfile === 'true' &&
+                h("pam-player-profile", { lang: this.lang, "dob-format": this.dobFormat, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "is-stand-alone": "false" }), this.addContacts === 'true' &&
+                h("pam-player-contacts", { lang: this.lang, "is-verification-status-displayed": this.isContactVerificationStatusDisplayed, "is-phone-number-editable": this.isPhoneNumberEditable, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "is-stand-alone": "false" }), this.addAddresses === 'true' &&
+                h("pam-player-addresses", { lang: this.lang, "is-permanent-adress-editable": this.isPermanentAdressEditable, "is-temporary-adress-editable": this.isTemporaryAdressEditable, "is-full-address-displayed": this.isFullAddressDisplayed, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "is-stand-alone": "false" }), this.addDocuments === 'true' &&
+                h("pam-player-documents", { lang: this.lang, "is-editable": this.isDocumentsEditable, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "is-stand-alone": "false" }), h("section", { class: "ButtonsArea" }, h("button", { class: `SaveButton ${this.isSubmitButtonAvailable ? '' : 'Disabled'}`, onClick: this.sendDataRequest }, translate('saveButton'))), this.addConsents === 'true' &&
+                h("div", { class: "ConsentsWrapper" }, h("pam-player-consents", { lang: this.lang, endpoint: this.endpoint, userid: this.userId, session: this.session, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, displayconsentdescription: "false" })))));
+    }
+    static get is() { return "pam-player-profile-controller"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-player-profile-controller.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-player-profile-controller.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
+            },
+            "lang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "lang",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "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
+            },
+            "addProfile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "add-profile",
+                "reflect": true,
+                "defaultValue": "'true'"
+            },
+            "addAddresses": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "add-addresses",
+                "reflect": true
+            },
+            "addContacts": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "add-contacts",
+                "reflect": true
+            },
+            "addDocuments": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "add-documents",
+                "reflect": true
+            },
+            "addConsents": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "add-consents",
+                "reflect": true
+            },
+            "dobFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dob-format",
+                "reflect": true,
+                "defaultValue": "'DD/MM/YYYY'"
+            },
+            "isFullAddressDisplayed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-full-address-displayed",
+                "reflect": true
+            },
+            "isPermanentAdressEditable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-permanent-adress-editable",
+                "reflect": true,
+                "defaultValue": "'false'"
+            },
+            "isTemporaryAdressEditable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-temporary-adress-editable",
+                "reflect": true,
+                "defaultValue": "'true'"
+            },
+            "isContactVerificationStatusDisplayed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-contact-verification-status-displayed",
+                "reflect": true,
+                "defaultValue": "'false'"
+            },
+            "isPhoneNumberEditable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-phone-number-editable",
+                "reflect": true,
+                "defaultValue": "'true'"
+            },
+            "isDocumentsEditable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-documents-editable",
+                "reflect": true,
+                "defaultValue": "'false'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "limitStylingAppends": {},
+            "isLoading": {},
+            "isSubmitButtonAvailable": {},
+            "isError": {},
+            "errorMessage": {},
+            "errorCode": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUrlChange"
+            }];
+    }
+}