@everymatrix/player-kyc-verification 1.93.13 → 1.93.15

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

@@ -8,13 +8,86 @@ export class PlayerKycVerificationWidget {
         this.MAX_UPLOAD_SIZE = 50000000;
         this.userAgent = window.navigator.userAgent;
         this.isMobile = isMobile(this.userAgent);
+        this.getKYCCustomerStatus = () => {
+            try {
+                this.isKYCLoading = true;
+                let url = new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus?language=${this.language}`);
+                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) => {
+                    var _a;
+                    this.verificationType = data.verifications;
+                    if (((_a = this.verificationType) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        if (this.hideKycDescription === 'true') {
+                            this.hasAllDocumentsUploaded = this.verificationType.every((kycElement) => {
+                                var _a;
+                                if ((kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents.length) === 0)
+                                    return;
+                                return (_a = kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents) === null || _a === void 0 ? void 0 : _a.some((document) => document.status === 'Uploaded');
+                            });
+                        }
+                        this.verificationsGeneralStatus = this.getGeneralVerificationStatus(this.verificationType);
+                        if (Array.isArray(this.verificationType)) {
+                            this.handleVerificationShuftiMessage(this.verificationType);
+                        }
+                    }
+                    this.isKYCLoading = false;
+                })
+                    .catch((err) => {
+                    // Handle any errors
+                    this.isKYCLoading = false;
+                    console.error(err);
+                });
+            }
+            catch (error) {
+                console.error('Error fetching verification types:', error);
+            }
+        };
+        this.handleShuftiMessage = (event) => {
+            const data = event.data;
+            const status = data.event || data.verification_status;
+            if (status) {
+                const DELAY_KYC_API = 5500;
+                const DELAY_IFRAME_SHUFTI_LOADING = 500;
+                switch (status) {
+                    case 'verification.declined':
+                    case 'verification.accepted':
+                        // Use for delayed iframe render UI and then trigger loading
+                        setTimeout(() => {
+                            this.isKYCLoading = true;
+                        }, DELAY_IFRAME_SHUFTI_LOADING);
+                        // Use for delayed BE handle the content take around 5 sec and FE re-call again
+                        setTimeout(() => {
+                            this.getKYCCustomerStatus();
+                        }, DELAY_KYC_API);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
         this.handleToggleScreen = () => {
             this.toggleScreen(this.isMobile);
         };
         this.hideVulnerabilityCheck = 'false';
         this.userId = '';
         this.session = '';
-        this.language = undefined;
+        this.language = 'en';
         this.endpoint = '';
         this.translationUrl = '';
         this.clientStyling = '';
@@ -28,6 +101,7 @@ export class PlayerKycVerificationWidget {
         this.hasAllDocumentsUploaded = false;
         this.verificationsGeneralStatus = undefined;
         this.isLoading = false;
+        this.isKYCLoading = false;
         this.selectedFile = null;
         this.uploadingStatus = undefined;
         this.uploadSizeExceeded = false;
@@ -70,61 +144,33 @@ export class PlayerKycVerificationWidget {
         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) => {
-                var _a;
-                this.verificationType = data.verifications;
-                if (this.hideKycDescription === "true" && ((_a = this.verificationType) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    this.hasAllDocumentsUploaded = this.verificationType.every((kycElement) => {
-                        var _a;
-                        if ((kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents.length) === 0)
-                            return;
-                        return (_a = kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents) === null || _a === void 0 ? void 0 : _a.some((document) => document.status === "Uploaded");
-                    });
-                    this.verificationsGeneralStatus = this.getGeneralVerificationStatus(this.verificationType);
-                }
-            })
-                .catch((err) => {
-                // Handle any errors
-                console.error(err);
-            });
-        }
-        catch (error) {
-            console.error('Error fetching verification types:', error);
+        this.getKYCCustomerStatus();
+    }
+    removeVerificationShuftiMessage() {
+        window.removeEventListener('message', this.handleShuftiMessage);
+    }
+    handleVerificationShuftiMessage(verifications) {
+        const isActionNeeded = verifications.find((val) => { var _a; return val.vendorName === 'ShuftiPro' && ((_a = val.flowInfo) === null || _a === void 0 ? void 0 : _a.actionNeeded) === true; });
+        this.removeVerificationShuftiMessage();
+        if (isActionNeeded) {
+            window.addEventListener('message', this.handleShuftiMessage);
         }
     }
     getGeneralVerificationStatus(verifications) {
-        const statuses = verifications === null || verifications === void 0 ? void 0 : verifications.map(docType => docType.status.toLowerCase());
-        if (statuses.includes("failed"))
-            return "Failed";
-        if (statuses.includes("expired"))
-            return "Expired";
-        if (statuses.includes("inprogress"))
-            return "InProgress";
-        if (statuses.every(status => status === "verified"))
-            return "Verified";
-        return "Unknown";
+        const statuses = verifications === null || verifications === void 0 ? void 0 : verifications.map((docType) => docType.status.toLowerCase());
+        if (statuses.includes('failed'))
+            return 'Failed';
+        if (statuses.includes('expired'))
+            return 'Expired';
+        if (statuses.includes('inprogress'))
+            return 'InProgress';
+        if (statuses.every((status) => status === 'verified'))
+            return 'Verified';
+        return 'Unknown';
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.removeVerificationShuftiMessage();
     }
     handleOptionChange(event, verificationTypeId) {
         const target = event.target;
@@ -168,7 +214,7 @@ export class PlayerKycVerificationWidget {
     }
     checkFileSize(file) {
         let size = 0;
-        Object.keys(file).forEach(element => {
+        Object.keys(file).forEach((element) => {
             size += file[element].size;
         });
         return size <= this.MAX_UPLOAD_SIZE;
@@ -187,23 +233,24 @@ export class PlayerKycVerificationWidget {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
-                        'X-SessionId': this.session,
+                        'X-SessionId': this.session
                     },
-                    body: JSON.stringify({ DocumentCode: documentType }),
+                    body: JSON.stringify({ DocumentCode: documentType })
                 };
                 fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`, uploadOptions)
-                    .then(response => {
+                    .then((response) => {
                     if (response.ok) {
                         this.uploadingStatus = translate('uploading', this.language);
                         this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
                         return response.json();
                     }
-                }).then((data) => {
+                })
+                    .then((data) => {
                     if (data.ResponseCode == 'Success') {
                         const formData = new FormData();
                         formData.append(documentType, this.selectedFile[0]);
-                        fetch(data.Url, { method: "POST", body: formData })
-                            .then(res => {
+                        fetch(data.Url, { method: 'POST', body: formData })
+                            .then((res) => {
                             if (res.ok) {
                                 if (this.selectedFile.length > 1) {
                                     this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
@@ -218,7 +265,8 @@ export class PlayerKycVerificationWidget {
                                 this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
                                 console.error('File upload error:', res.status);
                             }
-                        }).catch(error => {
+                        })
+                            .catch((error) => {
                             console.error('File upload error:', error);
                         });
                     }
@@ -227,7 +275,7 @@ export class PlayerKycVerificationWidget {
                         this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
                     }
                 })
-                    .catch(error => {
+                    .catch((error) => {
                     console.error('File upload error:', error);
                 });
             }
@@ -251,7 +299,7 @@ export class PlayerKycVerificationWidget {
                     resolve(true);
                 }
             })
-                .catch(error => {
+                .catch((error) => {
                 reject(error);
             });
         });
@@ -265,7 +313,7 @@ export class PlayerKycVerificationWidget {
         var _a, _b;
         let result;
         (_a = verificationType === null || verificationType === void 0 ? void 0 : verificationType.documents) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
-            if (item.status == "Requested") {
+            if (item.status == 'Requested') {
                 result = result !== null && result !== void 0 ? result : item.code;
             }
         });
@@ -277,14 +325,14 @@ export class PlayerKycVerificationWidget {
     renderDescription(status) {
         const shouldHideDescription = this.hideKycDescription === 'true' && this.hasAllDocumentsUploaded;
         switch (status) {
-            case "Verified":
-                return h("div", { class: "widget-description-verified" }, translate("kycVerifiedDescription", this.language));
-            case "Failed":
-                return h("div", { class: "widget-description-failed" }, translate("kycFailedDescription", this.language));
+            case 'Verified':
+                return h("div", { class: "widget-description-verified" }, translate('kycVerifiedDescription', this.language));
+            case 'Failed':
+                return h("div", { class: "widget-description-failed" }, translate('kycFailedDescription', this.language));
             default:
                 if (shouldHideDescription)
                     return null;
-                return h("div", { class: "widget-description" }, translate("kycDescription", this.language));
+                return h("div", { class: "widget-description" }, translate('kycDescription', this.language));
         }
     }
     renderVerificationTypeBox(verificationType) {
@@ -298,20 +346,20 @@ export class PlayerKycVerificationWidget {
         let status = verificationType.status;
         let documents = verificationType.documents;
         let flowInfo = verificationType.flowInfo;
+        const vendorName = verificationType.vendorName;
+        const isShuftiButNotInProgress = vendorName === 'ShuftiPro' && status !== 'InProgress';
         const isVerified = status === 'Verified';
         const isFailedOrExpired = status === 'Failed' || status === 'Expired';
-        const isVulnerabilityCheck = name === "VulnerabilityCheck";
-        if (isVerified && isVulnerabilityCheck && this.hideVulnerabilityCheck === 'true') {
+        const isVulnerabilityCheck = name === 'VulnerabilityCheck';
+        const isHiddenVulnerability = isVerified && isVulnerabilityCheck && this.hideVulnerabilityCheck === 'true';
+        if (isHiddenVulnerability || isShuftiButNotInProgress) {
             return null;
         }
-        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" })))));
+        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(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), 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, optionChosen, 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(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), 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)))));
+        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(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), 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, optionChosen, 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(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), 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 *" })));
@@ -328,12 +376,14 @@ export class PlayerKycVerificationWidget {
             //     console.error('Error importing script:', error);
             //   });
         }
-        else if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Redirect' && verificationType.vendorName !== "Manual" && status !== "Verified") {
+        else if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Redirect' && verificationType.vendorName !== 'Manual' && status !== 'Verified') {
             const iframeSize = verificationType.vendorName === 'ShuftiPro' ? '650px' : '400px';
             return (h("div", null, h("hr", { style: { margin: '5px' } }), h("iframe", { src: flowInfo.url, frameborder: "0", height: iframeSize, 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) }, documents.map((doc) => (h("option", { selected: doc.code == optionChosen, value: doc.code }, translate(doc.type, this.language))))), this.renderDocumentsActions(documents.find((e) => e.code === optionChosen), optionChosen, verificationType))) : null)));
+            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) }, documents.map((doc) => (h("option", { selected: doc.code == optionChosen, value: doc.code }, translate(doc.type, this.language))))), this.renderDocumentsActions(documents.find((e) => e.code === optionChosen), optionChosen, verificationType))) : null)));
         }
     }
     render() {
@@ -341,13 +391,7 @@ export class PlayerKycVerificationWidget {
             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, this.hideKycDescription === "true" ? this.renderDescription(this.verificationsGeneralStatus) : h("div", { class: "widget-description" }, " ", translate("kycDescription", this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null))))));
+            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.isKYCLoading ? (h("div", { class: "ModalLoader" })) : this.verificationType.length === 0 ? (h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))) : (h(Fragment, null, this.hideKycDescription === 'true' ? (this.renderDescription(this.verificationsGeneralStatus)) : (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"; }
@@ -433,7 +477,8 @@ export class PlayerKycVerificationWidget {
                     "text": "The language"
                 },
                 "attribute": "language",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'en'"
             },
             "endpoint": {
                 "type": "string",
@@ -604,6 +649,7 @@ export class PlayerKycVerificationWidget {
             "hasAllDocumentsUploaded": {},
             "verificationsGeneralStatus": {},
             "isLoading": {},
+            "isKYCLoading": {},
             "selectedFile": {},
             "uploadingStatus": {},
             "uploadSizeExceeded": {},

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"hideVulnerabilityCheck":[1,"hide-vulnerability-check"],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"verifiedIcon":[1,"verified-icon"],"failedIcon":[1,"failed-icon"],"defaultIcon":[1,"default-icon"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"hideKycDescription":[1,"hide-kyc-description"],"verificationType":[32],"hasAllDocumentsUploaded":[32],"verificationsGeneralStatus":[32],"isLoading":[32],"selectedFile":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"expandedOnDesktop":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"hideVulnerabilityCheck":[1,"hide-vulnerability-check"],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"verifiedIcon":[1,"verified-icon"],"failedIcon":[1,"failed-icon"],"defaultIcon":[1,"default-icon"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"hideKycDescription":[1,"hide-kyc-description"],"verificationType":[32],"hasAllDocumentsUploaded":[32],"verificationsGeneralStatus":[32],"isLoading":[32],"isKYCLoading":[32],"selectedFile":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"expandedOnDesktop":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 };
 
 export { defineCustomElements };