@everymatrix/player-kyc-verification 1.37.5 → 1.37.7

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 (11) hide show
  1. package/dist/cjs/player-kyc-verification.cjs.entry.js +125 -13
  2. package/dist/collection/components/player-kyc-verification/player-kyc-verification.css +7 -2
  3. package/dist/collection/components/player-kyc-verification/player-kyc-verification.js +22 -4
  4. package/dist/collection/utils/locale.utils.js +96 -8
  5. package/dist/components/player-kyc-verification.js +125 -13
  6. package/dist/esm/player-kyc-verification.entry.js +125 -13
  7. package/dist/player-kyc-verification/p-1315e0b5.entry.js +1 -0
  8. package/dist/player-kyc-verification/player-kyc-verification.esm.js +1 -1
  9. package/dist/types/components/player-kyc-verification/player-kyc-verification.d.ts +4 -0
  10. package/package.json +1 -1
  11. package/dist/player-kyc-verification/p-7a5dea2d.entry.js +0 -1
package/dist/cjs/player-kyc-verification.cjs.entry.js CHANGED
@@ -21,7 +21,18 @@ let TRANSLATIONS = {
21
21
  chooseDocument: 'Choose Document',
22
22
  kycTitle: 'Account Verification',
23
23
  kycDescription: 'We require some documents to protect your account and to comply with legal and license requirements.',
24
- download: 'Download'
24
+ download: 'Download',
25
+ Age: 'Age',
26
+ Aml: 'AML',
27
+ Documents: 'Documents',
28
+ PEP: 'PEP',
29
+ Sanction: 'Sanctions',
30
+ Recheck: 'Recheck',
31
+ Biometric: 'Biometric',
32
+ ProofOfAddress: 'Proof of Address',
33
+ SourceOfWealth: 'Source of Wealth',
34
+ SocialMedia: 'Social Media',
35
+ ProofOfPayment: 'Proof of Payment',
25
36
  },
26
37
  de: {
27
38
  loading: 'Loading, please wait ...',
@@ -37,7 +48,18 @@ let TRANSLATIONS = {
37
48
  chooseDocument: 'Choose Document',
38
49
  kycTitle: 'Account-Verifizierung',
39
50
  kycDescription: 'Wir benötigen einige Dokumente, um Ihr Konto zu schützen und den rechtlichen und Lizenzanforderungen zu entsprechen.',
40
- download: 'Download'
51
+ download: 'Download',
52
+ Age: 'Age',
53
+ Aml: 'AML',
54
+ Documents: 'Documents',
55
+ PEP: 'PEP',
56
+ Sanction: 'Sanctions',
57
+ Biometric: 'Biometric',
58
+ Recheck: 'Recheck',
59
+ ProofOfAddress: 'Proof of Address',
60
+ SourceOfWealth: 'Source of Wealth',
61
+ SocialMedia: 'Social Media',
62
+ ProofOfPayment: 'Proof of Payment',
41
63
  },
42
64
  ro: {
43
65
  loading: 'Loading, please wait ...',
@@ -53,7 +75,18 @@ let TRANSLATIONS = {
53
75
  chooseDocument: 'Choose Document',
54
76
  kycTitle: 'Verificarea contului',
55
77
  kycDescription: 'Avem nevoie de câteva documente pentru a proteja contul dvs. și pentru a respecta cerințele legale și de licență.',
56
- download: 'Download'
78
+ download: 'Download',
79
+ Age: 'Age',
80
+ Aml: 'AML',
81
+ Documents: 'Documents',
82
+ PEP: 'PEP',
83
+ Sanction: 'Sanctions',
84
+ Biometric: 'Biometric',
85
+ Recheck: 'Recheck',
86
+ ProofOfAddress: 'Proof of Address',
87
+ SourceOfWealth: 'Source of Wealth',
88
+ SocialMedia: 'Social Media',
89
+ ProofOfPayment: 'Proof of Payment',
57
90
  },
58
91
  fr: {
59
92
  loading: 'Loading, please wait ...',
@@ -69,7 +102,18 @@ let TRANSLATIONS = {
69
102
  chooseDocument: 'Choose Document',
70
103
  kycTitle: 'Vérification de compte',
71
104
  kycDescription: 'Nous avons besoin de certains documents pour protéger votre compte et pour nous conformer aux exigences légales et de licence.',
72
- download: 'Download'
105
+ download: 'Download',
106
+ Age: 'Age',
107
+ Aml: 'AML',
108
+ Documents: 'Documents',
109
+ PEP: 'PEP',
110
+ Sanction: 'Sanctions',
111
+ Biometric: 'Biometric',
112
+ Recheck: 'Recheck',
113
+ ProofOfAddress: 'Proof of Address',
114
+ SourceOfWealth: 'Source of Wealth',
115
+ SocialMedia: 'Social Media',
116
+ ProofOfPayment: 'Proof of Payment',
73
117
  },
74
118
  ar: {
75
119
  loading: 'Loading, please wait ...',
@@ -85,7 +129,18 @@ let TRANSLATIONS = {
85
129
  chooseDocument: 'Choose Document',
86
130
  kycTitle: 'التحقق من الحساب',
87
131
  kycDescription: 'نحتاج إلى بعض الوثائق لحماية حسابك والامتثال للمتطلبات القانونية والترخيص.',
88
- download: 'Download'
132
+ download: 'Download',
133
+ Age: 'Age',
134
+ Aml: 'AML',
135
+ Documents: 'Documents',
136
+ PEP: 'PEP',
137
+ Sanction: 'Sanctions',
138
+ Biometric: 'Biometric',
139
+ Recheck: 'Recheck',
140
+ ProofOfAddress: 'Proof of Address',
141
+ SourceOfWealth: 'Source of Wealth',
142
+ SocialMedia: 'Social Media',
143
+ ProofOfPayment: 'Proof of Payment',
89
144
  },
90
145
  hr: {
91
146
  loading: 'Učitavanje, molimo pričekajte ...',
@@ -101,9 +156,27 @@ let TRANSLATIONS = {
101
156
  chooseDocument: 'Odaberite Dokument',
102
157
  kycTitle: 'Verifikacija računa',
103
158
  kycDescription: 'Potrebni su nam neki dokumenti kako bismo zaštitili vaš račun i kako bismo se pridržavali zakonskih i licencijskih zahtjeva.',
104
- download: 'Download'
159
+ download: 'Download',
160
+ Age: 'Dob',
161
+ Aml: 'AML',
162
+ Documents: 'Dokumenti',
163
+ PEP: 'Politički izložena osoba',
164
+ Sanction: 'Sankcija',
165
+ Biometric: 'Verifikacija',
166
+ Recheck: 'Ponovna provjera',
167
+ ProofOfAddress: 'Potvrda adrese',
168
+ SourceOfWealth: 'Izvor sredstava',
169
+ SocialMedia: 'Društvene mreže',
170
+ ProofOfPayment: 'Platna metoda',
105
171
  },
106
172
  'pt-br': {
173
+ Age: 'Age',
174
+ Aml: 'AML',
175
+ Documents: 'Documents',
176
+ PEP: 'PEP',
177
+ Sanction: 'Sanctions',
178
+ Biometric: 'Biometric',
179
+ Recheck: 'Recheck',
107
180
  'Loading': 'Carregando, espere por favor…',
108
181
  'noVerificationRequired': 'Não há necessidade de verificação para sua conta no momento',
109
182
  'verificationComplete': 'Verificação completa',
@@ -115,9 +188,20 @@ let TRANSLATIONS = {
115
188
  'successUploadMultipleFiles': 'Seus documentos foram enviados e serão revisados ​​em breve',
116
189
  'failedUpload': 'Falha no upload do arquivo, tente novamente',
117
190
  'chooseDocument': 'Escolha um arquivo',
118
- 'download': 'Download'
191
+ 'download': 'Download',
192
+ ProofOfAddress: 'Proof of Address',
193
+ SourceOfWealth: 'Source of Wealth',
194
+ SocialMedia: 'Social Media',
195
+ ProofOfPayment: 'Proof of Payment',
119
196
  },
120
197
  'es-mx': {
198
+ Age: 'Age',
199
+ Aml: 'AML',
200
+ Documents: 'Documents',
201
+ PEP: 'PEP',
202
+ Sanction: 'Sanctions',
203
+ Biometric: 'Biometric',
204
+ Recheck: 'Recheck',
121
205
  'Loading': 'Cargando, espere por favor…',
122
206
  'noVerificationRequired': 'No hay verificación requerida para su cuenta al momento',
123
207
  'verificationComplete': 'Verificación completa',
@@ -129,7 +213,11 @@ let TRANSLATIONS = {
129
213
  'successUploadMultipleFiles': 'Sus documento han sido cargados y serán revisado en breve',
130
214
  'failedUpload': 'La carga del archivo falló, por favor intente de nuevo',
131
215
  'chooseDocument': 'Elija un archivo',
132
- 'download': 'Download'
216
+ 'download': 'Download',
217
+ ProofOfAddress: 'Proof of Address',
218
+ SourceOfWealth: 'Source of Wealth',
219
+ SocialMedia: 'Social Media',
220
+ ProofOfPayment: 'Proof of Payment',
133
221
  }
134
222
  };
135
223
  const getTranslations = (url) => {
@@ -159,7 +247,20 @@ const translate = (key, customLang, values) => {
159
247
  return translation;
160
248
  };
161
249
 
162
- 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: 4px;\n}\n.player-kyc-verification-widget .widget-description {\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(--emfe-w-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 display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-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(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-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(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\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(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-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(--emfe-w-color-gray-150, #828282);\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: 4px;\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: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
250
+ /**
251
+ * @name isMobile
252
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
253
+ * @param {String} userAgent window.navigator.userAgent
254
+ * @returns {Boolean} true or false
255
+ */
256
+ const isMobile = (userAgent) => {
257
+ return !!(userAgent.toLowerCase().match(/android/i) ||
258
+ userAgent.toLowerCase().match(/blackberry|bb/i) ||
259
+ userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
260
+ userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
261
+ };
262
+
263
+ 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}\n.player-kyc-verification-widget .widget-description {\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(--emfe-w-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 display: none;\n flex-grow: 1;\n border-top: 0.4px solid var(--emfe-w-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(--emfe-w-color-gray-150, #828282);\n border-radius: 2px;\n background-color: var(--emfe-w-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(--emfe-w-color-white, #FFFFFF);\n color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));\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(--emfe-w-color-valid var(--emfe-w-color-green, #48952a));\n min-height: 120px;\n}\n.player-kyc-verification-widget .verification-types .verification-box.failed {\n border-color: var(--emfe-w-color-error var(--emfe-w-color-red, #FD2839));\n}\n.player-kyc-verification-widget .verification-types .verification-box.success {\n border-color: var(--emfe-w-color-valid var(--emfe-w-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(--emfe-w-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: 1240px) and (min-width: 701px) {\n .player-kyc-verification-widget .verification-types {\n grid-template-columns: repeat(2, 1fr);\n }\n}";
163
264
 
164
265
  const PlayerKycVerificationWidget = class {
165
266
  constructor(hostRef) {
@@ -208,6 +309,8 @@ const PlayerKycVerificationWidget = class {
208
309
  this.expandedOnDesktop = false;
209
310
  this.scriptInjected = false;
210
311
  this.MAX_UPLOAD_SIZE = 50000000;
312
+ this.userAgent = window.navigator.userAgent;
313
+ this.isMobile = isMobile(this.userAgent);
211
314
  this.setClientStyling = () => {
212
315
  let sheet = document.createElement('style');
213
316
  sheet.innerHTML = this.clientStyling;
@@ -226,6 +329,9 @@ const PlayerKycVerificationWidget = class {
226
329
  console.log('error ', err);
227
330
  });
228
331
  };
332
+ this.handleToggleScreen = () => {
333
+ this.toggleScreen(this.isMobile);
334
+ };
229
335
  }
230
336
  handleNewTranslations() {
231
337
  this.isLoading = true;
@@ -322,6 +428,9 @@ const PlayerKycVerificationWidget = class {
322
428
  return type;
323
429
  });
324
430
  }
431
+ toggleScreen(isMobile) {
432
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
433
+ }
325
434
  checkFileSize(file) {
326
435
  let size = 0;
327
436
  Object.keys(file).forEach(element => {
@@ -412,14 +521,14 @@ const PlayerKycVerificationWidget = class {
412
521
  verificationType.expanded = true;
413
522
  }
414
523
  let expanded = verificationType.expanded;
415
- let name = verificationType.type.replace(/([A-Z])/g, ' $1');
524
+ let name = verificationType.type.trim();
416
525
  let optionChosen = verificationType.optionChosen;
417
526
  let status = verificationType.status;
418
527
  let documents = verificationType.documents;
419
528
  let flowInfo = verificationType.flowInfo;
420
529
  const isVerified = status === 'Verified';
421
530
  const isFailedOrExpired = status === 'Failed' || status === 'Expired';
422
- return (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("div", null, this.verifiedIcon ? (index.h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (index.h("div", null, this.failedIcon ? (index.h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (index.h("div", null, this.defaultIcon ? (index.h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4 4V20C4 21.1046 4.89543 22 6 22L18 22C19.1046 22 20 21.1046 20 20V8.34162C20 7.8034 19.7831 7.28789 19.3982 6.91161L14.9579 2.56999C14.5842 2.20459 14.0824 2 13.5597 2L6 2C4.89543 2 4 2.89543 4 4Z", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), index.h("div", { class: "box-title" }, name), index.h("div", { class: "chevron-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded ? (this.renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired)) :
531
+ return (index.h("div", { class: `verification-box ${expanded ? 'expanded' : ''} ${isFailedOrExpired ? 'failed' : ''} ${isVerified ? 'success' : ''}` }, index.h("div", { class: `box box-header ${expanded ? 'expanded' : ''}`, onClick: () => { var _a; return this.toggleVerificationType(verificationType.type, (_a = verificationType.flowInfo) === null || _a === void 0 ? void 0 : _a.type); } }, index.h("div", { class: "box-icon" }, isVerified ? (index.h("div", null, this.verifiedIcon ? (index.h("img", { class: "CustomVerifiedIcon", src: this.verifiedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "#388D79" }), index.h("circle", { cx: "50", cy: "50", r: "34", fill: "none", stroke: "#fff", "stroke-width": "12px" }), index.h("polyline", { points: "30,50 45,63 70,35", fill: "none", stroke: "#fff", "stroke-width": "8px" }))))) : (isFailedOrExpired ? (index.h("div", null, this.failedIcon ? (index.h("img", { class: "CustomFailedIcon", src: this.failedIcon, alt: "" })) : (index.h("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "50", cy: "50", r: "40", fill: "red" }), index.h("line", { x1: "30", y1: "30", x2: "70", y2: "70", stroke: "#fff", "stroke-width": "10px" }), index.h("line", { x1: "30", y1: "70", x2: "70", y2: "30", stroke: "#fff", "stroke-width": "10px" }))))) : (index.h("div", null, this.defaultIcon ? (index.h("img", { class: "CustomDefaultIcon", src: this.defaultIcon, alt: "" })) : (index.h("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4 4V20C4 21.1046 4.89543 22 6 22L18 22C19.1046 22 20 21.1046 20 20V8.34162C20 7.8034 19.7831 7.28789 19.3982 6.91161L14.9579 2.56999C14.5842 2.20459 14.0824 2 13.5597 2L6 2C4.89543 2 4 2.89543 4 4Z", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))), index.h("div", { class: "box-title" }, translate(name, this.language)), index.h("div", { class: "chevron-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))), expanded ? (this.renderExpandedContent(verificationType, optionChosen, status, documents, flowInfo, isVerified, isFailedOrExpired)) :
423
532
  (index.h("div", { class: "box box-content" }, index.h("div", { id: "__avs-wrapper" })))));
424
533
  }
425
534
  renderDocumentsActions(selectedDocument, optionChosen, verificationType) {
@@ -455,10 +564,13 @@ const PlayerKycVerificationWidget = class {
455
564
  }
456
565
  else {
457
566
  if (this.verificationType.length === 0) {
458
- return index.h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
567
+ return index.h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
459
568
  }
460
569
  else {
461
- return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, index.h("h2", null, translate('kycTitle', this.language)), index.h("div", { class: "widget-description" }, translate('kycDescription', this.language)), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
570
+ return (index.h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "player-kyc-verification-widget" }, (this.isMobile ?
571
+ index.h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, index.h("defs", null), index.h("g", { transform: "translate(-20 -158)" }, index.h("g", { transform: "translate(20 158)" }, index.h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), index.h("h2", null, translate('kycTitle', this.language)))
572
+ :
573
+ index.h("h2", null, translate('kycTitle', this.language))), index.h("div", { class: "widget-description" }, translate('kycDescription', this.language)), index.h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
462
574
  }
463
575
  }
464
576
  }
package/dist/collection/components/player-kyc-verification/player-kyc-verification.css CHANGED
@@ -15,7 +15,7 @@ button, select {
15
15
  align-items: center;
16
16
  }
17
17
  .player-kyc-verification-widget h2 {
18
- margin: 4px;
18
+ margin: 15px;
19
19
  }
20
20
  .player-kyc-verification-widget .widget-description {
21
21
  margin: 24px 0px;
@@ -146,6 +146,11 @@ button, select {
146
146
  color: var(--emfe-w-color-gray-150, #828282);
147
147
  }
148
148
 
149
+ .MenuReturnButton {
150
+ display: flex;
151
+ align-items: center;
152
+ }
153
+
149
154
  @container (min-width: 700px) {
150
155
  .player-kyc-verification-widget {
151
156
  padding: 100px 60px;
@@ -153,7 +158,7 @@ button, select {
153
158
  }
154
159
  @container (max-width: 700px) {
155
160
  .player-kyc-verification-widget h2 {
156
- margin: 4px;
161
+ margin: 15px;
157
162
  text-align: center;
158
163
  }
159
164
  .player-kyc-verification-widget .verification-types {
package/dist/collection/components/player-kyc-verification/player-kyc-verification.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Component, h, State, Prop, Fragment, Watch } from '@stencil/core';
2
2
  import { getTranslations, translate } from '../../utils/locale.utils';
3
+ import { isMobile } from '../../utils/utils';
3
4
  export class PlayerKycVerificationWidget {
4
5
  constructor() {
5
6
  /**
@@ -46,6 +47,8 @@ export class PlayerKycVerificationWidget {
46
47
  this.expandedOnDesktop = false;
47
48
  this.scriptInjected = false;
48
49
  this.MAX_UPLOAD_SIZE = 50000000;
50
+ this.userAgent = window.navigator.userAgent;
51
+ this.isMobile = isMobile(this.userAgent);
49
52
  this.setClientStyling = () => {
50
53
  let sheet = document.createElement('style');
51
54
  sheet.innerHTML = this.clientStyling;
@@ -64,6 +67,9 @@ export class PlayerKycVerificationWidget {
64
67
  console.log('error ', err);
65
68
  });
66
69
  };
70
+ this.handleToggleScreen = () => {
71
+ this.toggleScreen(this.isMobile);
72
+ };
67
73
  }
68
74
  handleNewTranslations() {
69
75
  this.isLoading = true;
@@ -160,6 +166,9 @@ export class PlayerKycVerificationWidget {
160
166
  return type;
161
167
  });
162
168
  }
169
+ toggleScreen(isMobile) {
170
+ window.postMessage({ type: 'PlayerAccountMenuActive', isMobile }, window.location.href);
171
+ }
163
172
  checkFileSize(file) {
164
173
  let size = 0;
165
174
  Object.keys(file).forEach(element => {
@@ -250,7 +259,7 @@ export class PlayerKycVerificationWidget {
250
259
  verificationType.expanded = true;
251
260
  }
252
261
  let expanded = verificationType.expanded;
253
- let name = verificationType.type.replace(/([A-Z])/g, ' $1');
262
+ let name = verificationType.type.trim();
254
263
  let optionChosen = verificationType.optionChosen;
255
264
  let status = verificationType.status;
256
265
  let documents = verificationType.documents;
@@ -270,7 +279,7 @@ export class PlayerKycVerificationWidget {
270
279
  h("path", { d: "M9 13H15", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
271
280
  h("path", { d: "M9 17H12", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
272
281
  h("path", { d: "M14 2V6C14 7.10457 14.8954 8 16 8H20", stroke: "#000000", "stroke-width": "2", "stroke-linejoin": "round" }))))))),
273
- h("div", { class: "box-title" }, name),
282
+ h("div", { class: "box-title" }, translate(name, this.language)),
274
283
  h("div", { class: "chevron-icon" },
275
284
  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" },
276
285
  h("path", { d: expanded ? 'M6 15l6-6 6 6' : 'M6 9l6 6 6-6' })))),
@@ -332,12 +341,21 @@ export class PlayerKycVerificationWidget {
332
341
  }
333
342
  else {
334
343
  if (this.verificationType.length === 0) {
335
- return h("div", { style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
344
+ return h("div", { class: "no-verification-description", style: { padding: '24px', fontSize: '18px' } }, translate('noVerificationRequired', this.language));
336
345
  }
337
346
  else {
338
347
  return (h("div", { class: "ModalContainer", ref: el => this.stylingContainer = el },
339
348
  h("div", { class: "player-kyc-verification-widget" },
340
- h("h2", null, translate('kycTitle', this.language)),
349
+ (this.isMobile ?
350
+ h("div", { class: "MenuReturnButton", onClick: this.handleToggleScreen },
351
+ h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" },
352
+ h("defs", null),
353
+ h("g", { transform: "translate(-20 -158)" },
354
+ h("g", { transform: "translate(20 158)" },
355
+ 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)" })))),
356
+ h("h2", null, translate('kycTitle', this.language)))
357
+ :
358
+ h("h2", null, translate('kycTitle', this.language))),
341
359
  h("div", { class: "widget-description" }, translate('kycDescription', this.language)),
342
360
  h("div", { class: "verification-types" }, this.verificationType.map((verificationType) => verificationType ? this.renderVerificationTypeBox(verificationType) : null)))));
343
361
  }
package/dist/collection/utils/locale.utils.js CHANGED
@@ -15,7 +15,18 @@ let TRANSLATIONS = {
15
15
  chooseDocument: 'Choose Document',
16
16
  kycTitle: 'Account Verification',
17
17
  kycDescription: 'We require some documents to protect your account and to comply with legal and license requirements.',
18
- download: 'Download'
18
+ download: 'Download',
19
+ Age: 'Age',
20
+ Aml: 'AML',
21
+ Documents: 'Documents',
22
+ PEP: 'PEP',
23
+ Sanction: 'Sanctions',
24
+ Recheck: 'Recheck',
25
+ Biometric: 'Biometric',
26
+ ProofOfAddress: 'Proof of Address',
27
+ SourceOfWealth: 'Source of Wealth',
28
+ SocialMedia: 'Social Media',
29
+ ProofOfPayment: 'Proof of Payment',
19
30
  },
20
31
  de: {
21
32
  loading: 'Loading, please wait ...',
@@ -31,7 +42,18 @@ let TRANSLATIONS = {
31
42
  chooseDocument: 'Choose Document',
32
43
  kycTitle: 'Account-Verifizierung',
33
44
  kycDescription: 'Wir benötigen einige Dokumente, um Ihr Konto zu schützen und den rechtlichen und Lizenzanforderungen zu entsprechen.',
34
- download: 'Download'
45
+ download: 'Download',
46
+ Age: 'Age',
47
+ Aml: 'AML',
48
+ Documents: 'Documents',
49
+ PEP: 'PEP',
50
+ Sanction: 'Sanctions',
51
+ Biometric: 'Biometric',
52
+ Recheck: 'Recheck',
53
+ ProofOfAddress: 'Proof of Address',
54
+ SourceOfWealth: 'Source of Wealth',
55
+ SocialMedia: 'Social Media',
56
+ ProofOfPayment: 'Proof of Payment',
35
57
  },
36
58
  ro: {
37
59
  loading: 'Loading, please wait ...',
@@ -47,7 +69,18 @@ let TRANSLATIONS = {
47
69
  chooseDocument: 'Choose Document',
48
70
  kycTitle: 'Verificarea contului',
49
71
  kycDescription: 'Avem nevoie de câteva documente pentru a proteja contul dvs. și pentru a respecta cerințele legale și de licență.',
50
- download: 'Download'
72
+ download: 'Download',
73
+ Age: 'Age',
74
+ Aml: 'AML',
75
+ Documents: 'Documents',
76
+ PEP: 'PEP',
77
+ Sanction: 'Sanctions',
78
+ Biometric: 'Biometric',
79
+ Recheck: 'Recheck',
80
+ ProofOfAddress: 'Proof of Address',
81
+ SourceOfWealth: 'Source of Wealth',
82
+ SocialMedia: 'Social Media',
83
+ ProofOfPayment: 'Proof of Payment',
51
84
  },
52
85
  fr: {
53
86
  loading: 'Loading, please wait ...',
@@ -63,7 +96,18 @@ let TRANSLATIONS = {
63
96
  chooseDocument: 'Choose Document',
64
97
  kycTitle: 'Vérification de compte',
65
98
  kycDescription: 'Nous avons besoin de certains documents pour protéger votre compte et pour nous conformer aux exigences légales et de licence.',
66
- download: 'Download'
99
+ download: 'Download',
100
+ Age: 'Age',
101
+ Aml: 'AML',
102
+ Documents: 'Documents',
103
+ PEP: 'PEP',
104
+ Sanction: 'Sanctions',
105
+ Biometric: 'Biometric',
106
+ Recheck: 'Recheck',
107
+ ProofOfAddress: 'Proof of Address',
108
+ SourceOfWealth: 'Source of Wealth',
109
+ SocialMedia: 'Social Media',
110
+ ProofOfPayment: 'Proof of Payment',
67
111
  },
68
112
  ar: {
69
113
  loading: 'Loading, please wait ...',
@@ -79,7 +123,18 @@ let TRANSLATIONS = {
79
123
  chooseDocument: 'Choose Document',
80
124
  kycTitle: 'التحقق من الحساب',
81
125
  kycDescription: 'نحتاج إلى بعض الوثائق لحماية حسابك والامتثال للمتطلبات القانونية والترخيص.',
82
- download: 'Download'
126
+ download: 'Download',
127
+ Age: 'Age',
128
+ Aml: 'AML',
129
+ Documents: 'Documents',
130
+ PEP: 'PEP',
131
+ Sanction: 'Sanctions',
132
+ Biometric: 'Biometric',
133
+ Recheck: 'Recheck',
134
+ ProofOfAddress: 'Proof of Address',
135
+ SourceOfWealth: 'Source of Wealth',
136
+ SocialMedia: 'Social Media',
137
+ ProofOfPayment: 'Proof of Payment',
83
138
  },
84
139
  hr: {
85
140
  loading: 'Učitavanje, molimo pričekajte ...',
@@ -95,9 +150,27 @@ let TRANSLATIONS = {
95
150
  chooseDocument: 'Odaberite Dokument',
96
151
  kycTitle: 'Verifikacija računa',
97
152
  kycDescription: 'Potrebni su nam neki dokumenti kako bismo zaštitili vaš račun i kako bismo se pridržavali zakonskih i licencijskih zahtjeva.',
98
- download: 'Download'
153
+ download: 'Download',
154
+ Age: 'Dob',
155
+ Aml: 'AML',
156
+ Documents: 'Dokumenti',
157
+ PEP: 'Politički izložena osoba',
158
+ Sanction: 'Sankcija',
159
+ Biometric: 'Verifikacija',
160
+ Recheck: 'Ponovna provjera',
161
+ ProofOfAddress: 'Potvrda adrese',
162
+ SourceOfWealth: 'Izvor sredstava',
163
+ SocialMedia: 'Društvene mreže',
164
+ ProofOfPayment: 'Platna metoda',
99
165
  },
100
166
  'pt-br': {
167
+ Age: 'Age',
168
+ Aml: 'AML',
169
+ Documents: 'Documents',
170
+ PEP: 'PEP',
171
+ Sanction: 'Sanctions',
172
+ Biometric: 'Biometric',
173
+ Recheck: 'Recheck',
101
174
  'Loading': 'Carregando, espere por favor…',
102
175
  'noVerificationRequired': 'Não há necessidade de verificação para sua conta no momento',
103
176
  'verificationComplete': 'Verificação completa',
@@ -109,9 +182,20 @@ let TRANSLATIONS = {
109
182
  'successUploadMultipleFiles': 'Seus documentos foram enviados e serão revisados ​​em breve',
110
183
  'failedUpload': 'Falha no upload do arquivo, tente novamente',
111
184
  'chooseDocument': 'Escolha um arquivo',
112
- 'download': 'Download'
185
+ 'download': 'Download',
186
+ ProofOfAddress: 'Proof of Address',
187
+ SourceOfWealth: 'Source of Wealth',
188
+ SocialMedia: 'Social Media',
189
+ ProofOfPayment: 'Proof of Payment',
113
190
  },
114
191
  'es-mx': {
192
+ Age: 'Age',
193
+ Aml: 'AML',
194
+ Documents: 'Documents',
195
+ PEP: 'PEP',
196
+ Sanction: 'Sanctions',
197
+ Biometric: 'Biometric',
198
+ Recheck: 'Recheck',
115
199
  'Loading': 'Cargando, espere por favor…',
116
200
  'noVerificationRequired': 'No hay verificación requerida para su cuenta al momento',
117
201
  'verificationComplete': 'Verificación completa',
@@ -123,7 +207,11 @@ let TRANSLATIONS = {
123
207
  'successUploadMultipleFiles': 'Sus documento han sido cargados y serán revisado en breve',
124
208
  'failedUpload': 'La carga del archivo falló, por favor intente de nuevo',
125
209
  'chooseDocument': 'Elija un archivo',
126
- 'download': 'Download'
210
+ 'download': 'Download',
211
+ ProofOfAddress: 'Proof of Address',
212
+ SourceOfWealth: 'Source of Wealth',
213
+ SocialMedia: 'Social Media',
214
+ ProofOfPayment: 'Proof of Payment',
127
215
  }
128
216
  };
129
217
  export const getTranslations = (url) => {