npm - @everymatrix/player-kyc-verification - Versions diffs - 1.93.13 → 1.93.15 - Mend

@everymatrix/player-kyc-verification 1.93.13 → 1.93.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["player-kyc-verification.cjs",[[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 index.bootstrapLazy([["player-kyc-verification.cjs",[[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);
 };
 exports.setNonce = index.setNonce;

package/dist/cjs/player-kyc-verification.cjs.entry.js CHANGED Viewed

@@ -753,7 +753,7 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
   });
 }
-const playerKycVerificationCss = ":host {\n  font-family: inherit;\n}\n\nbutton, select {\n  font-family: inherit;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n  padding: 20px;\n  align-items: center;\n}\n.player-kyc-verification-widget h2 {\n  margin: 15px;\n  font-weight: var(--emw--font-weight-semibold, 500);\n}\n.player-kyc-verification-widget .widget-description, .player-kyc-verification-widget .widget-description-verified, .player-kyc-verification-widget .widget-description-failed {\n  margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n  transition: height 0.3s, border-color 0.3s;\n  border: solid 1px var(--emw--color-gray-100, #E6E6E6);\n  border-radius: 2px;\n  display: flex;\n  flex-direction: column;\n  padding: 0px 14px;\n  border-width: 2px 2px 8px 2px;\n  align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n  flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n  display: flex;\n  padding: 14px 0px;\n  justify-content: space-between;\n  cursor: pointer;\n  align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n  height: 24px;\n  width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n  flex-grow: 1;\n  font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n  flex-grow: 10;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n  width: 20px;\n  height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n  flex-grow: 1;\n  border-top: 0.4px solid var(--emw--color-gray-100, #E6E6E6);\n  padding: 10px 0px;\n  flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n  text-align: center;\n  padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n  margin: 16px;\n  cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n  cursor: pointer;\n  width: 100%;\n  height: 30px;\n  padding: 4px 14px;\n  font-size: 14px;\n  border: 1px solid var(--emw--color-gray-150, #828282);\n  border-radius: 2px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  color: #333;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  padding-right: 30px;\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--emw--color-white, #FFFFFF);\n  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  border: none;\n  font-size: 16px;\n  padding: 10px 0px 0px 0px;\n  cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n  margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n  border-color: var(--emw--color-valid, var(--emw--color-green, #48952a));\n  min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n  border-color: var(--emw--color-error, var(--emw--color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n  border-color: var(--emw--color-valid, var(--emw--color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n  margin: 12px 0px 16px;\n  font-size: 18px;\n  text-align: center;\n  color: var(--emw--color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n  display: flex;\n  align-items: center;\n}\n\n@container (min-width: 700px) {\n  .player-kyc-verification-widget {\n    padding: 100px 60px;\n  }\n}\n@container (max-width: 700px) {\n  .player-kyc-verification-widget h2 {\n    margin: 15px;\n    text-align: center;\n  }\n  .player-kyc-verification-widget .verification-types {\n    grid-template-columns: 1fr;\n    grid-gap: 16px;\n  }\n}\n@container (max-width: 475px) {\n  .player-kyc-verification-widget .verification-types {\n    display: block;\n  }\n  .player-kyc-verification-widget .verification-types .verification-box {\n    margin-bottom: 20px;\n  }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n  .player-kyc-verification-widget .verification-types {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}";
+const playerKycVerificationCss = ":host {\n  font-family: inherit;\n}\n\nbutton, select {\n  font-family: inherit;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.player-kyc-verification-widget {\n  padding: 20px;\n  align-items: center;\n}\n.player-kyc-verification-widget h2 {\n  margin: 15px;\n  font-weight: var(--emw--font-weight-semibold, 500);\n}\n.player-kyc-verification-widget .widget-description, .player-kyc-verification-widget .widget-description-verified, .player-kyc-verification-widget .widget-description-failed {\n  margin: 24px 0px;\n}\n.player-kyc-verification-widget .verification-types {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 34px;\n}\n.player-kyc-verification-widget .verification-types .verification-box {\n  transition: height 0.3s, border-color 0.3s;\n  border: solid 1px var(--emw--color-gray-100, #E6E6E6);\n  border-radius: 2px;\n  display: flex;\n  flex-direction: column;\n  padding: 0px 14px;\n  border-width: 2px 2px 8px 2px;\n  align-self: start;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box {\n  flex-shrink: 0;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header {\n  display: flex;\n  padding: 14px 0px;\n  justify-content: space-between;\n  cursor: pointer;\n  align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-icon svg {\n  height: 24px;\n  width: 24px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .box-title {\n  flex-grow: 1;\n  font-size: 18px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon {\n  flex-grow: 10;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  justify-content: flex-end;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-header .chevron-icon svg {\n  width: 20px;\n  height: 22px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content {\n  flex-grow: 1;\n  border-top: 0.4px solid var(--emw--color-gray-100, #E6E6E6);\n  padding: 10px 0px;\n  flex-grow: 1;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .upload-status {\n  text-align: center;\n  padding: 20px;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-items: center;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown svg {\n  margin: 16px;\n  cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .nice-select {\n  cursor: pointer;\n  width: 100%;\n  height: 30px;\n  padding: 4px 14px;\n  font-size: 14px;\n  border: 1px solid var(--emw--color-gray-150, #828282);\n  border-radius: 2px;\n  background-color: var(--emw--color-white, #FFFFFF);\n  color: #333;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  padding-right: 30px;\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"%23333\" d=\"M10 18.4l-6.5-6.5h13z\"/><path fill=\"%23333\" d=\"M10 1.6l6.5 6.5H3.5z\"/></svg>');\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button {\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--emw--color-white, #FFFFFF);\n  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  border: none;\n  font-size: 16px;\n  padding: 10px 0px 0px 0px;\n  cursor: pointer;\n}\n.player-kyc-verification-widget .verification-types .verification-box .box-content .documents-dropdown .sample-file .download-button svg {\n  margin-right: 10px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded {\n  border-color: var(--emw--color-valid, var(--emw--color-green, #48952a));\n  min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n  border-color: var(--emw--color-error, var(--emw--color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n  border-color: var(--emw--color-valid, var(--emw--color-green, #48952a));\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.player-kyc-verification-widget .verification-types .verification-box.expanded .box-content .verification-status {\n  margin: 12px 0px 16px;\n  font-size: 18px;\n  text-align: center;\n  color: var(--emw--color-gray-150, #828282);\n}\n\n.MenuReturnButton {\n  display: flex;\n  align-items: center;\n}\n\n@container (min-width: 700px) {\n  .player-kyc-verification-widget {\n    padding: 100px 60px;\n  }\n}\n@container (max-width: 700px) {\n  .player-kyc-verification-widget h2 {\n    margin: 15px;\n    text-align: center;\n  }\n  .player-kyc-verification-widget .verification-types {\n    grid-template-columns: 1fr;\n    grid-gap: 16px;\n  }\n}\n@container (max-width: 475px) {\n  .player-kyc-verification-widget .verification-types {\n    display: block;\n  }\n  .player-kyc-verification-widget .verification-types .verification-box {\n    margin-bottom: 20px;\n  }\n}\n@container (max-width: 1240px) and (min-width: 701px) {\n  .player-kyc-verification-widget .verification-types {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n.ModalLoader {\n  width: 300px;\n  height: 300px;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ModalLoader:after {\n  content: \" \";\n  display: block;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border-radius: 50%;\n  border: 5px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));\n  border-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E)) transparent var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E)) transparent;\n  animation: Loader 1.2s linear infinite;\n}\n\n@keyframes Loader {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 const PlayerKycVerificationStyle0 = playerKycVerificationCss;
 const PlayerKycVerificationWidget = class {
@@ -763,13 +763,84 @@ const PlayerKycVerificationWidget = class {
         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;
+                }
+            }
+        };
         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 = '';
@@ -783,6 +854,7 @@ const PlayerKycVerificationWidget = class {
         this.hasAllDocumentsUploaded = false;
         this.verificationsGeneralStatus = undefined;
         this.isLoading = false;
+        this.isKYCLoading = false;
         this.selectedFile = null;
         this.uploadingStatus = undefined;
         this.uploadSizeExceeded = false;
@@ -825,61 +897,33 @@ const PlayerKycVerificationWidget = class {
         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;
@@ -923,7 +967,7 @@ const PlayerKycVerificationWidget = class {
     }
     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;
@@ -942,23 +986,24 @@ const PlayerKycVerificationWidget = class {
                     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);
@@ -973,7 +1018,8 @@ const PlayerKycVerificationWidget = class {
                                 this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
                                 console.error('File upload error:', res.status);
                             }
-                        }).catch(error => {
+                        })
+                            .catch((error) => {
                             console.error('File upload error:', error);
                         });
                     }
@@ -982,7 +1028,7 @@ const PlayerKycVerificationWidget = class {
                         this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
                     }
                 })
-                    .catch(error => {
+                    .catch((error) => {
                     console.error('File upload error:', error);
                 });
             }
@@ -1006,7 +1052,7 @@ const PlayerKycVerificationWidget = class {
                     resolve(true);
                 }
             })
-                .catch(error => {
+                .catch((error) => {
                 reject(error);
             });
         });
@@ -1020,7 +1066,7 @@ const PlayerKycVerificationWidget = class {
         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;
             }
         });
@@ -1032,14 +1078,14 @@ const PlayerKycVerificationWidget = class {
     renderDescription(status) {
         const shouldHideDescription = this.hideKycDescription === 'true' && this.hasAllDocumentsUploaded;
         switch (status) {
-            case "Verified":
-                return index.h("div", { class: "widget-description-verified" }, translate("kycVerifiedDescription", this.language));
-            case "Failed":
-                return index.h("div", { class: "widget-description-failed" }, translate("kycFailedDescription", this.language));
+            case 'Verified':
+                return index.h("div", { class: "widget-description-verified" }, translate('kycVerifiedDescription', this.language));
+            case 'Failed':
+                return index.h("div", { class: "widget-description-failed" }, translate('kycFailedDescription', this.language));
             default:
                 if (shouldHideDescription)
                     return null;
-                return index.h("div", { class: "widget-description" }, translate("kycDescription", this.language));
+                return index.h("div", { class: "widget-description" }, translate('kycDescription', this.language));
         }
     }
     renderVerificationTypeBox(verificationType) {
@@ -1053,20 +1099,20 @@ const PlayerKycVerificationWidget = class {
         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 (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.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); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("div", null, this.verifiedIcon ? (index.h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (index.h("div", null, this.failedIcon ? (index.h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (index.h("div", null, this.defaultIcon ? (index.h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), index.h("div", { class: "box-title" }, translate(name, this.language)), index.h("div", { class: "chevron-icon" }, index.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" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded ? (this.renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired)) :
-            (index.h("div", { class: "box box-content" }, index.h("div", { id: "__avs-wrapper" })))));
+        return (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.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); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("div", null, this.verifiedIcon ? (index.h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : isFailedOrExpired ? (index.h("div", null, this.failedIcon ? (index.h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (index.h("div", null, this.defaultIcon ? (index.h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" })))))), index.h("div", { class: "box-title" }, translate(name, this.language)), index.h("div", { class: "chevron-icon" }, index.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" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded ? (this.renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired)) : (index.h("div", { class: "box box-content" }, index.h("div", { id: "__avs-wrapper" })))));
     }
     renderDocumentsActions(selectedDocument, optionChosen, verificationType) {
-        return (index.h("div", null, this.isStatusUploaded(selectedDocument) ? (index.h("div", { class: "upload-status" }, translate('uploaded', this.language))) :
-            (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded) ? (index.h("div", { class: "upload-status" }, selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded)) : (index.h("div", { class: "documents-action" }, index.h("div", { class: "sample-file" }, (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleType) === "FileDownload" ? (index.h("button", { class: "download-button", onClick: () => this.downloadPDF(selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleUrl) }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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))" }), index.h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), index.h("span", null, translate('download', this.language)))) : null), index.h("div", { class: "upload-button" }, optionChosen ? (index.h("label", null, index.h("input", { type: "file", accept: "*", onChange: ($event) => this.handleFileSelection($event.target.files, optionChosen, verificationType.type), style: { display: 'none' } }), index.h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), index.h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), index.h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))));
+        return (index.h("div", null, this.isStatusUploaded(selectedDocument) ? (index.h("div", { class: "upload-status" }, translate('uploaded', this.language))) : (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded) ? (index.h("div", { class: "upload-status" }, selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded)) : (index.h("div", { class: "documents-action" }, index.h("div", { class: "sample-file" }, (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleType) === 'FileDownload' ? (index.h("button", { class: "download-button", onClick: () => this.downloadPDF(selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleUrl) }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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))" }), index.h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), index.h("span", null, translate('download', this.language)))) : null), index.h("div", { class: "upload-button" }, optionChosen ? (index.h("label", null, index.h("input", { type: "file", accept: "*", onChange: ($event) => this.handleFileSelection($event.target.files, optionChosen, verificationType.type), style: { display: 'none' } }), index.h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), index.h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), index.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 (index.h("div", null, index.h("hr", { style: { margin: '5px' } }), index.h("iframe", { src: flowInfo.url, frameborder: "0", height: "400px", width: "100%", allowfullScreen: true, allow: "camera *;microphone *" })));
@@ -1083,12 +1129,14 @@ const PlayerKycVerificationWidget = class {
             //     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 (index.h("div", null, index.h("hr", { style: { margin: '5px' } }), index.h("iframe", { src: flowInfo.url, frameborder: "0", height: iframeSize, width: "100%", allowfullScreen: true, allow: "camera *;microphone *" })));
         }
         else {
-            return (index.h("div", { class: "box box-content" }, index.h(index.Fragment, null, isVerified ? (index.h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (index.h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (index.h("div", { class: "documents-dropdown" }, index.h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, documents.map((doc) => (index.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 (index.h("div", { class: "box box-content" }, index.h(index.Fragment, null, isVerified ? (index.h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (index.h("div", { class: "verification-status" }, status === 'Failed'
+                ? translate('verificationFailed', this.language)
+                : translate('verificationExpired', this.language))) : documents.length > 0 ? (index.h("div", { class: "documents-dropdown" }, index.h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, documents.map((doc) => (index.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() {
@@ -1096,13 +1144,7 @@ const PlayerKycVerificationWidget = class {
             return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
         }
         else {
-            return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
-                index.h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("defs", null), index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.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)" })))), index.h("h2", null, translate('kycTitle', this.language)))
-                :
-                    index.h("h2", null, translate('kycTitle', this.language))), this.verificationType.length === 0 ?
-                index.h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))
-                :
-                    index.h(index.Fragment, null, this.hideKycDescription === "true" ? this.renderDescription(this.verificationsGeneralStatus) : index.h("div", { class: "widget-description" }, " ", translate("kycDescription", this.language)), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null))))));
+            return (index.h("div", { class: "ModalContainer", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "player-kyc-verification-widget" }, this.isMobile ? (index.h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("defs", null), index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.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)" })))), index.h("h2", null, translate('kycTitle', this.language)))) : (index.h("h2", null, translate('kycTitle', this.language))), this.isKYCLoading ? (index.h("div", { class: "ModalLoader" })) : this.verificationType.length === 0 ? (index.h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))) : (index.h(index.Fragment, null, this.hideKycDescription === 'true' ? (this.renderDescription(this.verificationsGeneralStatus)) : (index.h("div", { class: "widget-description" }, " ", translate('kycDescription', this.language))), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))))));
         }
     }
     static get watchers() { return {

package/dist/cjs/player-kyc-verification.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["player-kyc-verification.cjs",[[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 index.bootstrapLazy([["player-kyc-verification.cjs",[[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);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/components/player-kyc-verification/player-kyc-verification.css CHANGED Viewed

@@ -178,4 +178,33 @@ button, select {
   .player-kyc-verification-widget .verification-types {
     grid-template-columns: repeat(2, 1fr);
   }
+}
+.ModalLoader {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ModalLoader:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 5px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+  border-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E)) transparent var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E)) transparent;
+  animation: Loader 1.2s linear infinite;
+}
+@keyframes Loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }