@everymatrix/player-kyc-verification 1.0.69

package/dist/collection/components/player-kyc-verification/player-kyc-verification.js

@@ -0,0 +1,508 @@
+import { h, Fragment } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import { isMobile } from "../../utils/utils";
+export class PlayerKycVerificationWidget {
+    constructor() {
+        this.scriptInjected = false;
+        this.MAX_UPLOAD_SIZE = 50000000;
+        this.userAgent = window.navigator.userAgent;
+        this.isMobile = isMobile(this.userAgent);
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.handleToggleScreen = () => {
+            this.toggleScreen(this.isMobile);
+        };
+        this.userId = '';
+        this.session = '';
+        this.language = undefined;
+        this.endpoint = '';
+        this.translationUrl = '';
+        this.clientStyling = '';
+        this.verifiedIcon = '';
+        this.failedIcon = '';
+        this.defaultIcon = '';
+        this.clientStylingUrl = '';
+        this.verificationType = [];
+        this.isLoading = false;
+        this.stylingAppends = false;
+        this.selectedFile = null;
+        this.uploadingStatus = undefined;
+        this.uploadSizeExceeded = false;
+        this.selectedOption = undefined;
+        this.expandedOnDesktop = false;
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    async componentDidLoad() {
+        if (window.innerWidth > 700) {
+            this.expandedOnDesktop = true;
+        }
+        try {
+            let url = new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);
+            const options = {
+                method: 'POST',
+                headers: {
+                    'X-SessionId': this.session,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({})
+            };
+            fetch(url.href, options)
+                .then((res) => {
+                if (res.status === 200) {
+                    return res.json();
+                }
+                else {
+                    throw new Error("HTTP status " + res.status);
+                }
+            })
+                .then((data) => {
+                this.verificationType = data.verifications;
+            })
+                .catch((err) => {
+                // Handle any errors
+                console.error(err);
+            });
+        }
+        catch (error) {
+            console.error('Error fetching verification types:', error);
+        }
+    }
+    handleOptionChange(event, verificationTypeId) {
+        const target = event.target;
+        this.selectedOption = target.value;
+        this.verificationType = this.verificationType.map((type) => {
+            if (type.type === verificationTypeId) {
+                type.optionChosen = target.value;
+            }
+            return type;
+        });
+    }
+    handleDocumentsStatus(verificationTypeId, documentsStatus, documentCode) {
+        this.verificationType = this.verificationType.map((vType) => {
+            if (vType.type === verificationTypeId) {
+                const document = vType.documents.find((doc) => doc.code === documentCode);
+                if (document) {
+                    document.statusUploaded = documentsStatus;
+                }
+            }
+            return vType;
+        });
+    }
+    downloadPDF(pdfUrl) {
+        const link = document.createElement('a');
+        link.href = pdfUrl;
+        link.download = 'file.pdf';
+        link.target = '_blank';
+        link.dispatchEvent(new MouseEvent('click'));
+    }
+    toggleVerificationType(verificationTypeId, verificationTypeFlowInfoType) {
+        this.expandedOnDesktop = false;
+        this.verificationType = this.verificationType.map((type) => {
+            var _a;
+            if (type.type === verificationTypeId && ((_a = type.flowInfo) === null || _a === void 0 ? void 0 : _a.type) == verificationTypeFlowInfoType) {
+                type.expanded = !type.expanded;
+            }
+            return type;
+        });
+    }
+    toggleScreen(isMobile) {
+        window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
+    }
+    checkFileSize(file) {
+        let size = 0;
+        Object.keys(file).forEach(element => {
+            size += file[element].size;
+        });
+        return size <= this.MAX_UPLOAD_SIZE;
+    }
+    handleFileSelection(file, documentType, verificationTypeId) {
+        if (file && file.length > 0) {
+            this.selectedFile = file;
+            if (!this.checkFileSize(this.selectedFile)) {
+                console.error(translate('fileSizeExceeded', this.language));
+                this.uploadingStatus = translate('fileSizeExceeded', this.language);
+                this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+                this.uploadSizeExceeded = true;
+            }
+            else {
+                const uploadOptions = {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-SessionId': this.session,
+                    },
+                    body: JSON.stringify({ DocumentCode: documentType }),
+                };
+                fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`, uploadOptions)
+                    .then(response => {
+                    if (response.ok) {
+                        this.uploadingStatus = translate('uploading', this.language);
+                        this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+                        return response.json();
+                    }
+                }).then((data) => {
+                    const formData = new FormData();
+                    formData.append(documentType, this.selectedFile[0]);
+                    fetch(data.Url, { method: "POST", body: formData })
+                        .then(res => {
+                        if (res.ok) {
+                            if (this.selectedFile.length > 1) {
+                                this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
+                            }
+                            else {
+                                this.uploadingStatus = translate('successUpload', this.language);
+                            }
+                            this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+                        }
+                        else {
+                            this.uploadingStatus = translate('failedUpload', this.language);
+                            this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
+                            console.error('File upload error:', res.status);
+                        }
+                    })
+                        .catch(error => {
+                        console.error('File upload error:', error);
+                    });
+                })
+                    .catch(error => {
+                    console.error('File upload error:', error);
+                });
+            }
+        }
+    }
+    importScript(url) {
+        return new Promise((resolve, reject) => {
+            fetch(url)
+                .then((res) => res.text())
+                .then((res) => {
+                const scriptFunction = new Function(res);
+                scriptFunction();
+                if (this.scriptInjected) {
+                    resolve(true);
+                }
+                else {
+                    const scriptElement = document.createElement('script');
+                    scriptElement.src = 'https://test.insic.de/frontend3/static/js/avs-loader.min.js';
+                    document.head.appendChild(scriptElement);
+                    this.scriptInjected = true;
+                    resolve(true);
+                }
+            })
+                .catch(error => {
+                reject(error);
+            });
+        });
+    }
+    isStatusUploaded(document) {
+        if (document && document.status === 'Uploaded')
+            return true;
+        return false;
+    }
+    renderVerificationTypeBox(verificationType) {
+        if (this.expandedOnDesktop) {
+            verificationType.expanded = true;
+        }
+        let expanded = verificationType.expanded;
+        let name = verificationType.type.trim();
+        let optionChosen = verificationType.optionChosen;
+        let status = verificationType.status;
+        let documents = verificationType.documents;
+        let flowInfo = verificationType.flowInfo;
+        const isVerified = status === 'Verified';
+        const isFailedOrExpired = status === 'Failed' || status === 'Expired';
+        return (h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, h("div", { class: "box-icon" }, isVerified ? (h("div", null, this.verifiedIcon ? (h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (h("div", null, this.failedIcon ? (h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (h("div", null, this.defaultIcon ? (h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4 4V20C4 21.1046 4.89543 22 6 22L18 22C19.1046 22 20 21.1046 20 20V8.34162C20 7.8034 19.7831 7.28789 19.3982 6.91161L14.9579 2.56999C14.5842 2.20459 14.0824 2 13.5597 2L6 2C4.89543 2 4 2.89543 4 4Z", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), h("div", { class: "box-title" }, translate(name, this.language)), h("div", { class: "chevron-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded ? (this.renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired)) :
+            (h("div", { class: "box box-content" }, h("div", { id: "__avs-wrapper" })))));
+    }
+    renderDocumentsActions(selectedDocument, optionChosen, verificationType) {
+        return (h("div", null, this.isStatusUploaded(selectedDocument) ? (h("div", { class: "upload-status" }, translate('uploaded', this.language))) :
+            (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded) ? (h("div", { class: "upload-status" }, selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded)) : (h("div", { class: "documents-action" }, h("div", { class: "sample-file" }, (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleType) === "FileDownload" ? (h("button", { class: "download-button", onClick: () => this.downloadPDF(selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleUrl) }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 0C5.372 0 0 5.372 0 12C0 18.628 5.372 24 12 24C18.628 24 24 18.628 24 12C24 5.372 18.628 0 12 0ZM12 22C6.485 22 2 17.515 2 12C2 6.485 6.485 2 12 2C17.515 2 22 6.485 22 12C22 17.515 17.515 22 12 22Z", fill: "var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))" }), h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))" })), h("span", null, translate('download', this.language)))) : null), h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", onChange: ($event) => this.handleFileSelection($event.target.files, this.selectedOption, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C))" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))));
+    }
+    ;
+    renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired) {
+        if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Widget') {
+            return (h("div", null, h("hr", { style: { margin: '5px' } }), h("iframe", { src: flowInfo.url, frameborder: "0", height: "400px", width: "100%", allowfullScreen: true, allow: "camera *;microphone *" })));
+            // comment the functionality under because it might have a different type of script that we might have to handle
+            // this.importScript(flowInfo.url)
+            //   .then(() => {
+            //     // Script imported successfully
+            //     console.log('Script imported correctly');
+            //     // Open/show the widget
+            //     // You'll need to check the widget documentation for how to open/show it
+            //   })
+            //   .catch(error => {
+            //     // Handle script import error
+            //     console.error('Error importing script:', error);
+            //   });
+        }
+        else if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Redirect' && verificationType.vendorName !== "Manual" && status !== "Verified") {
+            return (h("div", null, h("hr", { style: { margin: '5px' } }), h("iframe", { src: flowInfo.url, frameborder: "0", height: "400px", width: "100%", allowfullScreen: true, allow: "camera *;microphone *" })));
+        }
+        else {
+            return (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, h("option", { value: "", selected: true, disabled: true, hidden: true }, translate('chooseDocument', this.language)), documents.map((doc) => (h("option", { selected: optionChosen == doc.code ? true : false, value: doc.code }, translate(doc.type, this.language))))), this.renderDocumentsActions(documents.find((e) => e.code === optionChosen), optionChosen, verificationType))) : null)));
+        }
+    }
+    render() {
+        if (this.isLoading) {
+            return (h("div", null, h("p", null, translate('loading', this.language))));
+        }
+        else {
+            return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
+                h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("defs", null), 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('kycTitle', this.language)))
+                :
+                    h("h2", null, translate('kycTitle', this.language))), this.verificationType.length === 0 ?
+                h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))
+                :
+                    h(Fragment, null, h("div", { class: "widget-description" }, translate('kycDescription', this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null))))));
+        }
+    }
+    static get is() { return "player-kyc-verification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-kyc-verification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-kyc-verification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The userId"
+                },
+                "attribute": "user-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The session"
+                },
+                "attribute": "session",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language"
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The NorWAy endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translationurl"
+                },
+                "attribute": "translation-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "verifiedIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For verified status this icon will be displayed"
+                },
+                "attribute": "verified-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "failedIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For failed status this icon will be displayed"
+                },
+                "attribute": "failed-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "defaultIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For the default status this icon will be displayed"
+                },
+                "attribute": "default-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url content"
+                },
+                "attribute": "client-styling-url",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "verificationType": {},
+            "isLoading": {},
+            "stylingAppends": {},
+            "selectedFile": {},
+            "uploadingStatus": {},
+            "uploadSizeExceeded": {},
+            "selectedOption": {},
+            "expandedOnDesktop": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+}

package/dist/collection/index.js

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