@everymatrix/pam-player-addresses 0.11.0

package/dist/collection/components/pam-player-addresses/pam-player-addresses.js

@@ -0,0 +1,534 @@
+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 "../../../../../ui-skeleton/dist/types/index";
+export class PamPlayerAddresses {
+    constructor() {
+        this.dataRef = {};
+        this.fieldsState = {};
+        this.sendLoadedMessage = () => {
+            window.postMessage({ type: 'ADDRESSES_LOADED' });
+        };
+        this.sendValidMessage = () => {
+            window.postMessage({ type: 'ADDRESSES_VALIDITY', data: this.isSubmitButtonAvailable });
+        };
+        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 = () => {
+            window.postMessage({ type: 'ADDRESSES_UPDATE_DATA', data: this.data }, window.location.href);
+        };
+        this.messageHandler = (message) => {
+            var _a;
+            switch ((_a = message.data) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'ADDRESSES_DATA':
+                    this.data = message.data.data;
+                    this.resetState();
+                    this.isSkeletonLoading = false;
+                    break;
+                case 'ADDRESSES_SEND_DATA':
+                    this.sendData();
+                    break;
+            }
+        };
+        this.getData = () => {
+            const url = new URL(`/api/v1/players/${this.userId}/player-identifiable-information/addresses/`, this.endpoint);
+            const headers = new Headers();
+            headers.append('X-SessionID', this.session);
+            const options = {
+                method: 'GET',
+                headers: headers
+            };
+            return new Promise((resolve) => {
+                fetch(url.href, options)
+                    .then(res => {
+                    if (res.ok) {
+                        return res.json();
+                    }
+                    this.sendErrorNotification('errorMessageFetch');
+                })
+                    .then(res => {
+                    this.data = res;
+                    resolve();
+                });
+            });
+        };
+        this.buildFieldState = (isValid, initialValue, rule) => Object.assign({ 'isValid': isValid, 'initialValue': initialValue, 'rule': rule });
+        this.resetState = () => {
+            this.initData();
+            this.initEditableFieldsState();
+            this.invalidFields = 0;
+            this.isSubmitButtonAvailable = false;
+        };
+        this.updateState = (sectionKey, subSectionKey, fieldKey) => (e) => {
+            if (subSectionKey) {
+                this.dataRef[sectionKey][subSectionKey][fieldKey] = e.target.value;
+            }
+            else {
+                this.dataRef[sectionKey][fieldKey] = e.target.value;
+            }
+            const fieldState = this.fieldsState[sectionKey]['data'][fieldKey];
+            const value = e.target.value;
+            const passedRuleCheck = fieldState.rule(value);
+            if (passedRuleCheck && !fieldState.isValid) {
+                fieldState.isValid = true;
+                this.invalidFields -= 1;
+            }
+            else if (!passedRuleCheck && fieldState.isValid) {
+                fieldState.isValid = false;
+                this.invalidFields += 1;
+            }
+            this.fieldsState[sectionKey]['hasChanged'] = value !== fieldState.initialValue;
+            const previous = this.isSubmitButtonAvailable;
+            this.updateSubmitButtonStatus();
+            if (this.isStandAlone !== 'true' && this.isSubmitButtonAvailable !== previous) {
+                this.sendValidMessage();
+            }
+        };
+        this.updateData = (e) => {
+            if (e)
+                e.preventDefault();
+            const promises = [];
+            for (const addressType of Object.keys(this.fieldsState)) {
+                if (!this.fieldsState[addressType]['hasChanged'])
+                    continue;
+                const address = this.dataRef[addressType];
+                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)
+                };
+                promises.push(fetch(url, reqParams));
+            }
+            Promise.all(promises)
+                .then(resArr => {
+                if (resArr.some(res => !res.ok)) {
+                    return this.sendErrorNotification('errorMessageUpdate');
+                }
+                this.sendSuccessNotification();
+                this.getData().then(() => this.resetState());
+            });
+        };
+        this.updateSubmitButtonStatus = () => {
+            this.isSubmitButtonAvailable = this.invalidFields === 0 && Object.values(this.fieldsState).some(v => v.hasChanged);
+        };
+        this.editableField = (sectionKey, subSectionKey = null, fieldKey, labelTranslationKey, errorTranslationKey) => {
+            const fieldState = this.fieldsState[sectionKey]['data'][fieldKey];
+            let value;
+            if (subSectionKey) {
+                value = this.dataRef[sectionKey][subSectionKey][fieldKey];
+            }
+            else {
+                value = this.dataRef[sectionKey][fieldKey];
+            }
+            if (fieldState) {
+                return (h("div", { class: `Field  ${fieldState.isValid ? '' : 'Invalid'}` }, h("label", null, translate(labelTranslationKey, this.lang)), h("input", { type: "text", value: value, onKeyUp: this.updateState(sectionKey, subSectionKey, fieldKey) }), !fieldState.isValid &&
+                    h("p", { class: "Error" }, translate(errorTranslationKey, this.lang))));
+            }
+            else {
+                return null;
+            }
+        };
+        this.staticField = (value, labelTranslationKey) => {
+            if (value) {
+                return (h("div", { class: "Field Disabled" }, h("label", null, translate(labelTranslationKey, this.lang)), h("input", { type: "text", value: value, readonly: true })));
+            }
+            else {
+                return null;
+            }
+        };
+        this.section = (sectionKey, editable) => {
+            let activeSection = sectionKey === 'Permanent' ? this.isPermanentAddressSectionActive : this.isTemporaryAddressSectionActive;
+            if (editable) {
+                return (h("div", { class: "Section" }, h("button", { class: "SectionTitle", onClick: this.toggleSection(sectionKey) }, translate(`title${sectionKey}Address`)), h("section", { class: activeSection ? "SectionContent Active" : "SectionContent" }, this.editableField(sectionKey, null, 'line1', 'line1', 'line1Error'), this.staticField(this.dataRef[sectionKey].country, 'country'), this.editableField(sectionKey, null, 'line2', 'line2', 'line2Error'), this.editableField(sectionKey, null, 'stateProvince', 'stateProvince', 'stateProvinceError'), this.editableField(sectionKey, null, 'line3', 'line3', 'line3Error'), this.editableField(sectionKey, null, 'city', 'city', 'cityError'), this.editableField(sectionKey, null, 'postalCode', 'postalCode', 'postalCodeError'), this.isFullAddressDisplayed == 'true' &&
+                    h("div", { class: "CompoundField" }, this.editableField(sectionKey, 'addressInfo', 'floor', 'floor', 'floorError'), this.editableField(sectionKey, 'addressInfo', 'doorCode', 'doorCode', 'doorCodeError')), this.isFullAddressDisplayed == 'true' &&
+                    this.editableField(sectionKey, 'addressInfo', 'buildingName', 'buildingName', 'buildingNameError'), this.isFullAddressDisplayed == 'true' &&
+                    this.editableField(sectionKey, 'addressInfo', 'additionalInstructions', 'additionalInstructions', 'additionalInstructionsError'))));
+            }
+            return (h("div", { class: "Section" }, h("button", { class: "SectionTitle", onClick: this.toggleSection(sectionKey) }, translate(`title${sectionKey}Address`, this.lang)), h("section", { class: activeSection ? "SectionContent Active" : "SectionContent" }, this.staticField(this.dataRef[sectionKey].line1, 'line1'), this.staticField(this.dataRef[sectionKey].country, 'country'), this.staticField(this.dataRef[sectionKey].line2, 'line2'), this.staticField(this.dataRef[sectionKey].stateProvince, 'stateProvince'), this.staticField(this.dataRef[sectionKey].line3, 'line3'), this.staticField(this.dataRef[sectionKey].city, 'city'), this.staticField(this.dataRef[sectionKey].postalCode, 'postalCode'), this.isFullAddressDisplayed == 'true' &&
+                h("div", { class: "CompoundField" }, this.staticField(this.dataRef[sectionKey].addressInfo.floor, 'floor'), this.staticField(this.dataRef[sectionKey].addressInfo.doorCode, 'doorCode')), this.isFullAddressDisplayed == 'true' &&
+                this.staticField(this.dataRef[sectionKey].addressInfo.buildingName, 'buildingName'), this.isFullAddressDisplayed == 'true' &&
+                this.staticField(this.dataRef[sectionKey].addressInfo.additionalInstructions, 'additionalInstructions'))));
+        };
+        this.toggleScreen = () => {
+            window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: this.isMobile }, window.location.href);
+        };
+        this.toggleSection = (section) => (e) => {
+            e.preventDefault();
+            switch (section) {
+                case 'Permanent':
+                    this.isPermanentAddressSectionActive = !this.isPermanentAddressSectionActive;
+                    break;
+                case 'Temporary':
+                    this.isTemporaryAddressSectionActive = !this.isTemporaryAddressSectionActive;
+                    break;
+            }
+        };
+        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.isFullAddressDisplayed = 'false';
+        this.isPermanentAdressEditable = 'false';
+        this.isTemporaryAdressEditable = 'true';
+        this.isStandAlone = 'true';
+        this.limitStylingAppends = false;
+        this.isSkeletonLoading = true;
+        this.isSubmitButtonAvailable = false;
+        this.invalidFields = 0;
+        this.isMobile = isMobile(window.navigator.userAgent);
+        this.isPermanentAddressSectionActive = true;
+        this.isTemporaryAddressSectionActive = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    async componentWillLoad() {
+        if (this.isStandAlone !== 'true') {
+            return;
+        }
+        await this.getData()
+            .then(() => {
+            this.initData();
+            this.initEditableFieldsState();
+        })
+            .finally(() => this.isSkeletonLoading = 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);
+            }
+        }
+        if (this.isStandAlone !== 'true') {
+            window.addEventListener('message', this.messageHandler, false);
+            this.sendLoadedMessage();
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        if (this.isStandAlone !== 'true')
+            window.removeEventListener('message', this.messageHandler, false);
+    }
+    initData() {
+        for (const address of this.data.addresses) {
+            this.dataRef[address.type] = address;
+        }
+        if (this.dataRef['Temporary'] && this.isSkeletonLoading) {
+            this.isPermanentAddressSectionActive = false;
+            this.isTemporaryAddressSectionActive = true;
+        }
+    }
+    initEditableFieldsState() {
+        for (const [type, address] of Object.entries(this.dataRef)) {
+            if ((type === 'Permanent' && this.isPermanentAdressEditable !== 'true') ||
+                (type === 'Temporary' && this.isTemporaryAdressEditable !== 'true'))
+                continue;
+            const addressState = {};
+            ['line1', 'line2', 'line3'].forEach(key => {
+                if (address[key])
+                    addressState[key] = this.buildFieldState(true, address[key], (val) => val && val.length <= 100);
+            });
+            if (address['city']) {
+                addressState['city'] = this.buildFieldState(true, address['city'], (val) => val && val.length <= 50);
+            }
+            if (address['postalCode']) {
+                addressState['postalCode'] = this.buildFieldState(true, address['postalCode'], (val) => val && val.length <= 20);
+            }
+            if (address['stateProvince']) {
+                addressState['stateProvince'] = this.buildFieldState(true, address['stateProvince'], (val) => val && val.length <= 50);
+            }
+            if (Object.keys(address['addressInfo']).length > 0) {
+                if (address['addressInfo'].floor) {
+                    addressState['floor'] = this.buildFieldState(true, address['addressInfo'].floor, (val) => val && val.length <= 10);
+                }
+                if (address['addressInfo'].doorCode) {
+                    addressState['doorCode'] = this.buildFieldState(true, address['addressInfo'].doorCode, (val) => val && val.length <= 10);
+                }
+                if (address['addressInfo'].buildingName) {
+                    addressState['buildingName'] = this.buildFieldState(true, address['addressInfo'].buildingName, (val) => val && val.length <= 50);
+                }
+                if (address['addressInfo'].additionalInstructions) {
+                    addressState['additionalInstructions'] = this.buildFieldState(true, address['addressInfo'].additionalInstructions, (val) => val && val.length <= 120);
+                }
+            }
+            this.fieldsState[type] = {};
+            this.fieldsState[type]['data'] = addressState;
+            this.fieldsState[type]['hasChanged'] = false;
+        }
+    }
+    render() {
+        return (h("div", { key: 'f273967a4c5ead5e29d5f475eb564f4f5c183134', ref: el => this.stylingContainer = el }, this.isSkeletonLoading
+            ? h("form", { class: "PamPlayerAddressesWrapper skeleton" }, h("div", { class: "ReturnButton" }, h("ui-skeleton", { structure: "title", width: "auto", height: "30px" })), h("div", { class: "Section" }, h("section", { class: "SectionContent" }, [...Array(6).keys()].map(() => h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" }))), h("div", { class: "CompoundField" }, h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" })), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "100%", height: "20px" }))), h("div", { class: "Field" }, h("ui-skeleton", { structure: "text", width: "auto", "margin-bottom": "10px", height: "10px" }), h("ui-skeleton", { structure: "rectangle", width: "auto", height: "20px" })))), h("section", { class: "ButtonsArea" }, h("div", { class: "SaveButton" }, h("ui-skeleton", { structure: "rectangle", width: "auto", height: "50px" }))))
+            : h("form", { class: "PamPlayerAddressesWrapper" }, 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", { class: "HeaderText" }, translate('title', this.lang)), this.dataRef['Temporary'] && this.section('Temporary', this.isTemporaryAdressEditable === 'true'), this.dataRef['Permanent'] && this.section('Permanent', this.isPermanentAdressEditable === 'true'), this.isStandAlone === 'true' &&
+                h("section", { class: "ButtonsArea" }, h("button", { class: `SaveButton ${this.isSubmitButtonAvailable ? '' : 'Disabled'}`, onClick: this.updateData }, translate('saveButton'))))));
+    }
+    static get is() { return "pam-player-addresses"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-player-addresses.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-player-addresses.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
+            },
+            "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,
+                "defaultValue": "'false'"
+            },
+            "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'"
+            },
+            "isStandAlone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-stand-alone",
+                "reflect": true,
+                "defaultValue": "'true'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "isSkeletonLoading": {},
+            "isSubmitButtonAvailable": {},
+            "invalidFields": {},
+            "isMobile": {},
+            "isPermanentAddressSectionActive": {},
+            "isTemporaryAddressSectionActive": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUrlChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/pam-player-addresses';