@everymatrix/player-kyc-verification 1.93.12 → 1.93.14

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
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/player-kyc-verification.cjs.entry.js +125 -83
  3. package/dist/cjs/player-kyc-verification.cjs.js +1 -1
  4. package/dist/collection/components/player-kyc-verification/player-kyc-verification.css +29 -0
  5. package/dist/collection/components/player-kyc-verification/player-kyc-verification.js +129 -83
  6. package/dist/esm/loader.js +1 -1
  7. package/dist/esm/player-kyc-verification.entry.js +125 -83
  8. package/dist/esm/player-kyc-verification.js +1 -1
  9. package/dist/player-kyc-verification/player-kyc-verification.entry.js +1 -1
  10. package/dist/player-kyc-verification/player-kyc-verification.esm.js +1 -1
  11. package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts +24 -19
  12. package/package.json +1 -1
package/dist/esm/player-kyc-verification.entry.js CHANGED
@@ -749,7 +749,7 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
749
749
  });
750
750
  }
751
751
 
752
- 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}";
752
+ 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}";
753
753
  const PlayerKycVerificationStyle0 = playerKycVerificationCss;
754
754
 
755
755
  const PlayerKycVerificationWidget = class {
@@ -759,13 +759,84 @@ const PlayerKycVerificationWidget = class {
759
759
  this.MAX_UPLOAD_SIZE = 50000000;
760
760
  this.userAgent = window.navigator.userAgent;
761
761
  this.isMobile = isMobile(this.userAgent);
762
+ this.getKYCCustomerStatus = () => {
763
+ try {
764
+ this.isKYCLoading = true;
765
+ let url = new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus?language=${this.language}`);
766
+ const options = {
767
+ method: 'POST',
768
+ headers: {
769
+ 'X-SessionId': this.session,
770
+ 'Content-Type': 'application/json'
771
+ },
772
+ body: JSON.stringify({})
773
+ };
774
+ fetch(url.href, options)
775
+ .then((res) => {
776
+ if (res.status === 200) {
777
+ return res.json();
778
+ }
779
+ else {
780
+ throw new Error('HTTP status ' + res.status);
781
+ }
782
+ })
783
+ .then((data) => {
784
+ var _a;
785
+ this.verificationType = data.verifications;
786
+ if (((_a = this.verificationType) === null || _a === void 0 ? void 0 : _a.length) > 0) {
787
+ if (this.hideKycDescription === 'true') {
788
+ this.hasAllDocumentsUploaded = this.verificationType.every((kycElement) => {
789
+ var _a;
790
+ if ((kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents.length) === 0)
791
+ return;
792
+ return (_a = kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents) === null || _a === void 0 ? void 0 : _a.some((document) => document.status === 'Uploaded');
793
+ });
794
+ }
795
+ this.verificationsGeneralStatus = this.getGeneralVerificationStatus(this.verificationType);
796
+ if (Array.isArray(this.verificationType)) {
797
+ this.handleVerificationShuftiMessage(this.verificationType);
798
+ }
799
+ }
800
+ this.isKYCLoading = false;
801
+ })
802
+ .catch((err) => {
803
+ // Handle any errors
804
+ this.isKYCLoading = false;
805
+ console.error(err);
806
+ });
807
+ }
808
+ catch (error) {
809
+ console.error('Error fetching verification types:', error);
810
+ }
811
+ };
812
+ this.handleShuftiMessage = (event) => {
813
+ const data = event.data;
814
+ const status = data.event || data.verification_status;
815
+ if (status) {
816
+ const DELAY_KYC_API = 5500;
817
+ const DELAY_IFRAME_SHUFTI_LOADING = 500;
818
+ switch (status) {
819
+ case 'verification.declined':
820
+ case 'verification.accepted':
821
+ // Use for delayed iframe render UI and then trigger loading
822
+ setTimeout(() => {
823
+ this.isKYCLoading = true;
824
+ }, DELAY_IFRAME_SHUFTI_LOADING);
825
+ // Use for delayed BE handle the content take around 5 sec and FE re-call again
826
+ setTimeout(() => {
827
+ this.getKYCCustomerStatus();
828
+ }, DELAY_KYC_API);
829
+ break;
830
+ }
831
+ }
832
+ };
762
833
  this.handleToggleScreen = () => {
763
834
  this.toggleScreen(this.isMobile);
764
835
  };
765
836
  this.hideVulnerabilityCheck = 'false';
766
837
  this.userId = '';
767
838
  this.session = '';
768
- this.language = undefined;
839
+ this.language = 'en';
769
840
  this.endpoint = '';
770
841
  this.translationUrl = '';
771
842
  this.clientStyling = '';
@@ -779,6 +850,7 @@ const PlayerKycVerificationWidget = class {
779
850
  this.hasAllDocumentsUploaded = false;
780
851
  this.verificationsGeneralStatus = undefined;
781
852
  this.isLoading = false;
853
+ this.isKYCLoading = false;
782
854
  this.selectedFile = null;
783
855
  this.uploadingStatus = undefined;
784
856
  this.uploadSizeExceeded = false;
@@ -821,61 +893,33 @@ const PlayerKycVerificationWidget = class {
821
893
  if (window.innerWidth > 700) {
822
894
  this.expandedOnDesktop = true;
823
895
  }
824
- try {
825
- let url = new URL(`${this.endpoint}/v2/player/${this.userId}/verification/GetKYCCustomerStatus`);
826
- const options = {
827
- method: 'POST',
828
- headers: {
829
- 'X-SessionId': this.session,
830
- 'Content-Type': 'application/json',
831
- },
832
- body: JSON.stringify({})
833
- };
834
- fetch(url.href, options)
835
- .then((res) => {
836
- if (res.status === 200) {
837
- return res.json();
838
- }
839
- else {
840
- throw new Error("HTTP status " + res.status);
841
- }
842
- })
843
- .then((data) => {
844
- var _a;
845
- this.verificationType = data.verifications;
846
- if (this.hideKycDescription === "true" && ((_a = this.verificationType) === null || _a === void 0 ? void 0 : _a.length) > 0) {
847
- this.hasAllDocumentsUploaded = this.verificationType.every((kycElement) => {
848
- var _a;
849
- if ((kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents.length) === 0)
850
- return;
851
- return (_a = kycElement === null || kycElement === void 0 ? void 0 : kycElement.documents) === null || _a === void 0 ? void 0 : _a.some((document) => document.status === "Uploaded");
852
- });
853
- this.verificationsGeneralStatus = this.getGeneralVerificationStatus(this.verificationType);
854
- }
855
- })
856
- .catch((err) => {
857
- // Handle any errors
858
- console.error(err);
859
- });
860
- }
861
- catch (error) {
862
- console.error('Error fetching verification types:', error);
896
+ this.getKYCCustomerStatus();
897
+ }
898
+ removeVerificationShuftiMessage() {
899
+ window.removeEventListener('message', this.handleShuftiMessage);
900
+ }
901
+ handleVerificationShuftiMessage(verifications) {
902
+ const isActionNeeded = verifications.find((val) => { var _a; return val.vendorName === 'ShuftiPro' && ((_a = val.flowInfo) === null || _a === void 0 ? void 0 : _a.actionNeeded) === true; });
903
+ this.removeVerificationShuftiMessage();
904
+ if (isActionNeeded) {
905
+ window.addEventListener('message', this.handleShuftiMessage);
863
906
  }
864
907
  }
865
908
  getGeneralVerificationStatus(verifications) {
866
- const statuses = verifications === null || verifications === void 0 ? void 0 : verifications.map(docType => docType.status.toLowerCase());
867
- if (statuses.includes("failed"))
868
- return "Failed";
869
- if (statuses.includes("expired"))
870
- return "Expired";
871
- if (statuses.includes("inprogress"))
872
- return "InProgress";
873
- if (statuses.every(status => status === "verified"))
874
- return "Verified";
875
- return "Unknown";
909
+ const statuses = verifications === null || verifications === void 0 ? void 0 : verifications.map((docType) => docType.status.toLowerCase());
910
+ if (statuses.includes('failed'))
911
+ return 'Failed';
912
+ if (statuses.includes('expired'))
913
+ return 'Expired';
914
+ if (statuses.includes('inprogress'))
915
+ return 'InProgress';
916
+ if (statuses.every((status) => status === 'verified'))
917
+ return 'Verified';
918
+ return 'Unknown';
876
919
  }
877
920
  disconnectedCallback() {
878
921
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
922
+ this.removeVerificationShuftiMessage();
879
923
  }
880
924
  handleOptionChange(event, verificationTypeId) {
881
925
  const target = event.target;
@@ -919,7 +963,7 @@ const PlayerKycVerificationWidget = class {
919
963
  }
920
964
  checkFileSize(file) {
921
965
  let size = 0;
922
- Object.keys(file).forEach(element => {
966
+ Object.keys(file).forEach((element) => {
923
967
  size += file[element].size;
924
968
  });
925
969
  return size <= this.MAX_UPLOAD_SIZE;
@@ -938,23 +982,24 @@ const PlayerKycVerificationWidget = class {
938
982
  method: 'POST',
939
983
  headers: {
940
984
  'Content-Type': 'application/json',
941
- 'X-SessionId': this.session,
985
+ 'X-SessionId': this.session
942
986
  },
943
- body: JSON.stringify({ DocumentCode: documentType }),
987
+ body: JSON.stringify({ DocumentCode: documentType })
944
988
  };
945
989
  fetch(`${this.endpoint}/v1/player/${this.userId}/verification/GetKYCVerificationDocumentUploadUrl`, uploadOptions)
946
- .then(response => {
990
+ .then((response) => {
947
991
  if (response.ok) {
948
992
  this.uploadingStatus = translate('uploading', this.language);
949
993
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
950
994
  return response.json();
951
995
  }
952
- }).then((data) => {
996
+ })
997
+ .then((data) => {
953
998
  if (data.ResponseCode == 'Success') {
954
999
  const formData = new FormData();
955
1000
  formData.append(documentType, this.selectedFile[0]);
956
- fetch(data.Url, { method: "POST", body: formData })
957
- .then(res => {
1001
+ fetch(data.Url, { method: 'POST', body: formData })
1002
+ .then((res) => {
958
1003
  if (res.ok) {
959
1004
  if (this.selectedFile.length > 1) {
960
1005
  this.uploadingStatus = translate('successUploadMultipleFiles', this.language);
@@ -969,7 +1014,8 @@ const PlayerKycVerificationWidget = class {
969
1014
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
970
1015
  console.error('File upload error:', res.status);
971
1016
  }
972
- }).catch(error => {
1017
+ })
1018
+ .catch((error) => {
973
1019
  console.error('File upload error:', error);
974
1020
  });
975
1021
  }
@@ -978,7 +1024,7 @@ const PlayerKycVerificationWidget = class {
978
1024
  this.handleDocumentsStatus(verificationTypeId, this.uploadingStatus, documentType);
979
1025
  }
980
1026
  })
981
- .catch(error => {
1027
+ .catch((error) => {
982
1028
  console.error('File upload error:', error);
983
1029
  });
984
1030
  }
@@ -1002,7 +1048,7 @@ const PlayerKycVerificationWidget = class {
1002
1048
  resolve(true);
1003
1049
  }
1004
1050
  })
1005
- .catch(error => {
1051
+ .catch((error) => {
1006
1052
  reject(error);
1007
1053
  });
1008
1054
  });
@@ -1016,7 +1062,7 @@ const PlayerKycVerificationWidget = class {
1016
1062
  var _a, _b;
1017
1063
  let result;
1018
1064
  (_a = verificationType === null || verificationType === void 0 ? void 0 : verificationType.documents) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
1019
- if (item.status == "Requested") {
1065
+ if (item.status == 'Requested') {
1020
1066
  result = result !== null && result !== void 0 ? result : item.code;
1021
1067
  }
1022
1068
  });
@@ -1028,14 +1074,14 @@ const PlayerKycVerificationWidget = class {
1028
1074
  renderDescription(status) {
1029
1075
  const shouldHideDescription = this.hideKycDescription === 'true' && this.hasAllDocumentsUploaded;
1030
1076
  switch (status) {
1031
- case "Verified":
1032
- return h("div", { class: "widget-description-verified" }, translate("kycVerifiedDescription", this.language));
1033
- case "Failed":
1034
- return h("div", { class: "widget-description-failed" }, translate("kycFailedDescription", this.language));
1077
+ case 'Verified':
1078
+ return h("div", { class: "widget-description-verified" }, translate('kycVerifiedDescription', this.language));
1079
+ case 'Failed':
1080
+ return h("div", { class: "widget-description-failed" }, translate('kycFailedDescription', this.language));
1035
1081
  default:
1036
1082
  if (shouldHideDescription)
1037
1083
  return null;
1038
- return h("div", { class: "widget-description" }, translate("kycDescription", this.language));
1084
+ return h("div", { class: "widget-description" }, translate('kycDescription', this.language));
1039
1085
  }
1040
1086
  }
1041
1087
  renderVerificationTypeBox(verificationType) {
@@ -1049,20 +1095,20 @@ const PlayerKycVerificationWidget = class {
1049
1095
  let status = verificationType.status;
1050
1096
  let documents = verificationType.documents;
1051
1097
  let flowInfo = verificationType.flowInfo;
1098
+ const vendorName = verificationType.vendorName;
1099
+ const isShuftiButNotInProgress = vendorName === 'ShuftiPro' && status !== 'InProgress';
1052
1100
  const isVerified = status === 'Verified';
1053
1101
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
1054
- const isVulnerabilityCheck = name === "VulnerabilityCheck";
1055
- if (isVerified && isVulnerabilityCheck && this.hideVulnerabilityCheck === 'true') {
1102
+ const isVulnerabilityCheck = name === 'VulnerabilityCheck';
1103
+ const isHiddenVulnerability = isVerified && isVulnerabilityCheck && this.hideVulnerabilityCheck === 'true';
1104
+ if (isHiddenVulnerability || isShuftiButNotInProgress) {
1056
1105
  return null;
1057
1106
  }
1058
- 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)) :
1059
- (h("div", { class: "box box-content" }, h("div", { id: "__avs-wrapper" })))));
1107
+ 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" })))));
1060
1108
  }
1061
1109
  renderDocumentsActions(selectedDocument, optionChosen, verificationType) {
1062
- return (h("div", null, this.isStatusUploaded(selectedDocument) ? (h("div", { class: "upload-status" }, translate('uploaded', this.language))) :
1063
- (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded) ? (h("div", { class: "upload-status" }, selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded)) : (h("div", { class: "documents-action" }, h("div", { class: "sample-file" }, (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleType) === "FileDownload" ? (h("button", { class: "download-button", onClick: () => this.downloadPDF(selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleUrl) }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 0C5.372 0 0 5.372 0 12C0 18.628 5.372 24 12 24C18.628 24 24 18.628 24 12C24 5.372 18.628 0 12 0ZM12 22C6.485 22 2 17.515 2 12C2 6.485 6.485 2 12 2C17.515 2 22 6.485 22 12C22 17.515 17.515 22 12 22Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), h("span", null, translate('download', this.language)))) : null), h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", onChange: ($event) => this.handleFileSelection($event.target.files, optionChosen, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))));
1110
+ return (h("div", null, this.isStatusUploaded(selectedDocument) ? (h("div", { class: "upload-status" }, translate('uploaded', this.language))) : (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded) ? (h("div", { class: "upload-status" }, selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.statusUploaded)) : (h("div", { class: "documents-action" }, h("div", { class: "sample-file" }, (selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleType) === 'FileDownload' ? (h("button", { class: "download-button", onClick: () => this.downloadPDF(selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.sampleUrl) }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 0C5.372 0 0 5.372 0 12C0 18.628 5.372 24 12 24C18.628 24 24 18.628 24 12C24 5.372 18.628 0 12 0ZM12 22C6.485 22 2 17.515 2 12C2 6.485 6.485 2 12 2C17.515 2 22 6.485 22 12C22 17.515 17.515 22 12 22Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("path", { d: "M17 11H14V6H10V11H7L12 16L17 11ZM7 17V19H17V17H7Z", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" })), h("span", null, translate('download', this.language)))) : null), h("div", { class: "upload-button" }, optionChosen ? (h("label", null, h("input", { type: "file", accept: "*", onChange: ($event) => this.handleFileSelection($event.target.files, optionChosen, verificationType.type), style: { display: 'none' } }), h("svg", { width: "100", height: "100", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E))" }), h("line", { x1: "30", y1: "50", x2: "70", y2: "50", stroke: "white", "stroke-width": "6" }), h("line", { x1: "50", y1: "30", x2: "50", y2: "70", stroke: "white", "stroke-width": "6" })))) : null)))));
1064
1111
  }
1065
- ;
1066
1112
  renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired) {
1067
1113
  if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Widget') {
1068
1114
  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 *" })));
@@ -1079,12 +1125,14 @@ const PlayerKycVerificationWidget = class {
1079
1125
  // console.error('Error importing script:', error);
1080
1126
  // });
1081
1127
  }
1082
- else if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Redirect' && verificationType.vendorName !== "Manual" && status !== "Verified") {
1128
+ else if ((flowInfo === null || flowInfo === void 0 ? void 0 : flowInfo.type) === 'Redirect' && verificationType.vendorName !== 'Manual' && status !== 'Verified') {
1083
1129
  const iframeSize = verificationType.vendorName === 'ShuftiPro' ? '650px' : '400px';
1084
1130
  return (h("div", null, h("hr", { style: { margin: '5px' } }), h("iframe", { src: flowInfo.url, frameborder: "0", height: iframeSize, width: "100%", allowfullScreen: true, allow: "camera *;microphone *" })));
1085
1131
  }
1086
1132
  else {
1087
- return (h("div", { class: "box box-content" }, h(Fragment, null, isVerified ? (h("div", { class: "verification-status" }, translate('verificationComplete', this.language))) : isFailedOrExpired ? (h("div", { class: "verification-status" }, status === 'Failed' ? translate('verificationFailed', this.language) : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, documents.map((doc) => (h("option", { selected: doc.code == optionChosen, value: doc.code }, translate(doc.type, this.language))))), this.renderDocumentsActions(documents.find((e) => e.code === optionChosen), optionChosen, verificationType))) : null)));
1133
+ 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'
1134
+ ? translate('verificationFailed', this.language)
1135
+ : translate('verificationExpired', this.language))) : documents.length > 0 ? (h("div", { class: "documents-dropdown" }, h("select", { class: "nice-select", onChange: (event) => this.handleOptionChange(event, verificationType.type) }, documents.map((doc) => (h("option", { selected: doc.code == optionChosen, value: doc.code }, translate(doc.type, this.language))))), this.renderDocumentsActions(documents.find((e) => e.code === optionChosen), optionChosen, verificationType))) : null)));
1088
1136
  }
1089
1137
  }
1090
1138
  render() {
@@ -1092,13 +1140,7 @@ const PlayerKycVerificationWidget = class {
1092
1140
  return (h("div", null, h("p", null, translate('loading', this.language))));
1093
1141
  }
1094
1142
  else {
1095
- return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
1096
- 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)))
1097
- :
1098
- h("h2", null, translate('kycTitle', this.language))), this.verificationType.length === 0 ?
1099
- h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))
1100
- :
1101
- h(Fragment, null, this.hideKycDescription === "true" ? this.renderDescription(this.verificationsGeneralStatus) : h("div", { class: "widget-description" }, " ", translate("kycDescription", this.language)), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null))))));
1143
+ return (h("div", { class: "ModalContainer", ref: (el) => (this.stylingContainer = el) }, h("div", { class: "player-kyc-verification-widget" }, this.isMobile ? (h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("defs", null), h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", null, translate('kycTitle', this.language)))) : (h("h2", null, translate('kycTitle', this.language))), this.isKYCLoading ? (h("div", { class: "ModalLoader" })) : this.verificationType.length === 0 ? (h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language))) : (h(Fragment, null, this.hideKycDescription === 'true' ? (this.renderDescription(this.verificationsGeneralStatus)) : (h("div", { class: "widget-description" }, " ", translate('kycDescription', this.language))), h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))))));
1102
1144
  }
1103
1145
  }
1104
1146
  static get watchers() { return {
package/dist/esm/player-kyc-verification.js CHANGED
@@ -16,5 +16,5 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"hideVulnerabilityCheck":[1,"hide-vulnerability-check"],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"verifiedIcon":[1,"verified-icon"],"failedIcon":[1,"failed-icon"],"defaultIcon":[1,"default-icon"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"hideKycDescription":[1,"hide-kyc-description"],"verificationType":[32],"hasAllDocumentsUploaded":[32],"verificationsGeneralStatus":[32],"isLoading":[32],"selectedFile":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"expandedOnDesktop":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
19
+ return bootstrapLazy([["player-kyc-verification",[[1,"player-kyc-verification",{"hideVulnerabilityCheck":[1,"hide-vulnerability-check"],"userId":[1,"user-id"],"session":[1],"language":[1],"endpoint":[1],"translationUrl":[1,"translation-url"],"clientStyling":[1,"client-styling"],"verifiedIcon":[1,"verified-icon"],"failedIcon":[1,"failed-icon"],"defaultIcon":[1,"default-icon"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"hideKycDescription":[1,"hide-kyc-description"],"verificationType":[32],"hasAllDocumentsUploaded":[32],"verificationsGeneralStatus":[32],"isLoading":[32],"isKYCLoading":[32],"selectedFile":[32],"uploadingStatus":[32],"uploadSizeExceeded":[32],"expandedOnDesktop":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
20
20
  });