@everymatrix/player-kyc-verification 1.44.0 → 1.45.2

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

@@ -1,572 +1,508 @@
-import { Component, h, State, Prop, Fragment, Watch } from '@stencil/core';
-import { getTranslations, translate } from '../../utils/locale.utils';
-import { isMobile } from '../../utils/utils';
+import { h, Fragment } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import { isMobile } from "../../utils/utils";
 export class PlayerKycVerificationWidget {
-  constructor() {
-    /**
-     * The userId
-     */
-    this.userId = '';
-    /**
-    * The session
-    */
-    this.session = '';
-    /**
-    * The NorWAy endpoint
-    */
-    this.endpoint = '';
-    /**
-     * The translationurl
-     */
-    this.translationUrl = '';
-    /**
-    * Client custom styling via string
-    */
-    this.clientStyling = '';
-    /**
-    * For verified status this icon will be displayed
-    */
-    this.verifiedIcon = '';
-    /**
-    * For failed status this icon will be displayed
-    */
-    this.failedIcon = '';
-    /**
-    * For the default status this icon will be displayed
-    */
-    this.defaultIcon = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrl = '';
-    this.verificationType = [];
-    this.isLoading = false;
-    this.stylingAppends = false;
-    this.selectedFile = null;
-    this.uploadSizeExceeded = false;
-    this.expandedOnDesktop = false;
-    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);
-    };
-  }
-  handleNewTranslations() {
-    this.isLoading = true;
-    getTranslations(this.translationUrl).then(() => {
-      this.isLoading = false;
-    });
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
+    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;
+        });
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
     }
-    // end custom styling area
-  }
-  async componentDidLoad() {
-    if (window.innerWidth > 700) {
-      this.expandedOnDesktop = true;
+    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
     }
-    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();
+    async componentDidLoad() {
+        if (window.innerWidth > 700) {
+            this.expandedOnDesktop = true;
         }
-        else {
-          throw new Error("HTTP status " + res.status);
+        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);
         }
-      })
-        .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;
+        });
     }
-  }
-  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);
+    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 {
-              this.uploadingStatus = translate('failedUpload', this.language);
-              this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
-              console.error('File upload error:', res.status);
+                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);
+                });
             }
-          })
-            .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);
+            });
         });
-      }
     }
-  }
-  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);
+    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 {
-          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);
+            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)));
         }
-      })
-        .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);
-      //   });
+    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))))));
+        }
     }
-    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 *" })));
+    static get is() { return "player-kyc-verification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-kyc-verification.scss"]
+        };
     }
-    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)));
+    static get styleUrls() {
+        return {
+            "$": ["player-kyc-verification.css"]
+        };
     }
-  }
-  render() {
-    if (this.isLoading) {
-      return (h("div", null,
-        h("p", null, translate('loading', this.language))));
+    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": "''"
+            }
+        };
     }
-    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 states() {
+        return {
+            "verificationType": {},
+            "isLoading": {},
+            "stylingAppends": {},
+            "selectedFile": {},
+            "uploadingStatus": {},
+            "uploadSizeExceeded": {},
+            "selectedOption": {},
+            "expandedOnDesktop": {}
+        };
     }
-  }
-  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 watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
     }
-  }; }
-  static get states() { return {
-    "verificationType": {},
-    "isLoading": {},
-    "stylingAppends": {},
-    "selectedFile": {},
-    "uploadingStatus": {},
-    "uploadSizeExceeded": {},
-    "selectedOption": {},
-    "expandedOnDesktop": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "translationUrl",
-      "methodName": "handleNewTranslations"
-    }]; }
 }