@propellerads/kyc-form 5.0.3 → 5.0.5
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.
- package/dist/index.js +173 -159
- package/dist/index.js.map +1 -1
- package/package.json +4 -5
package/dist/index.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import e, { ButtonVariant as t } from "@propellerads/button";
|
|
2
2
|
import { useEffect as n, useState as r } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { black as
|
|
8
|
-
import { jsx as
|
|
9
|
-
import T from "@propellerads/success-label";
|
|
3
|
+
import { Check as i, Close as a, Color as o, Delete as s, Insert as c, Pdf as l, Size as u } from "@propellerads/icon";
|
|
4
|
+
import d, { Direction as f } from "@propellerads/image-uploader";
|
|
5
|
+
import { Textarea as p } from "@propellerads/input";
|
|
6
|
+
import m from "styled-components";
|
|
7
|
+
import { black as h, borderRadius as g, errorColor as _, fontNormal as v, fontSmall as y, gray50 as b, gray95 as x, lineHeight as S, mediumDevices as C, spacing as w, successColor as ee, white as T } from "@propellerads/stylevariables";
|
|
8
|
+
import { jsx as E, jsxs as D } from "react/jsx-runtime";
|
|
10
9
|
//#region src/document.types.ts
|
|
11
|
-
var
|
|
10
|
+
var O = {
|
|
12
11
|
Id: "id",
|
|
13
12
|
Ub: "ub",
|
|
14
13
|
IdExtra: "id_extra",
|
|
@@ -22,7 +21,7 @@ var E = {
|
|
|
22
21
|
TransactionConfirmation: "transaction_confirmation",
|
|
23
22
|
Other: "other",
|
|
24
23
|
Feedback: "feedback"
|
|
25
|
-
},
|
|
24
|
+
}, k = {
|
|
26
25
|
IdFront: "id_front",
|
|
27
26
|
IdBack: "id_back",
|
|
28
27
|
Ub: "ub_item",
|
|
@@ -36,118 +35,118 @@ var E = {
|
|
|
36
35
|
TransactionConfirmationImage: "transaction_confirmation_image",
|
|
37
36
|
OtherImage: "other_image",
|
|
38
37
|
Feedback: "feedback"
|
|
39
|
-
},
|
|
38
|
+
}, A = 5242880, te = 3, j = "application/pdf", M = "image/heic", N = {
|
|
40
39
|
"image/png": [".png"],
|
|
41
40
|
"image/jpeg": [
|
|
42
41
|
".jpg",
|
|
43
42
|
".jpe",
|
|
44
43
|
".jpeg"
|
|
45
44
|
],
|
|
46
|
-
[
|
|
47
|
-
[
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
],
|
|
58
|
-
[
|
|
59
|
-
[
|
|
60
|
-
},
|
|
45
|
+
[j]: [".pdf"],
|
|
46
|
+
[M]: [".heic"]
|
|
47
|
+
}, P = [
|
|
48
|
+
O.Card,
|
|
49
|
+
O.Card,
|
|
50
|
+
O.PaypalDetailsPage,
|
|
51
|
+
O.BankWireDetails,
|
|
52
|
+
O.TransactionConfirmation,
|
|
53
|
+
O.SelfieWithIdCard,
|
|
54
|
+
O.PaymentSystemScreen,
|
|
55
|
+
O.Other
|
|
56
|
+
], ne = {
|
|
57
|
+
[O.Id]: { parts: [k.IdBack] },
|
|
58
|
+
[O.IdExtra]: { parts: [k.IdBack] }
|
|
59
|
+
}, re = m.div`
|
|
61
60
|
display: flex;
|
|
62
61
|
align-items: center;
|
|
63
|
-
color: ${
|
|
64
|
-
margin-top: ${
|
|
65
|
-
margin-bottom: ${
|
|
66
|
-
`,
|
|
62
|
+
color: ${_};
|
|
63
|
+
margin-top: ${w * 2}px;
|
|
64
|
+
margin-bottom: ${w * 4}px;
|
|
65
|
+
`, F = m.span`
|
|
67
66
|
display: flex;
|
|
68
67
|
align-items: center;
|
|
69
68
|
justify-content: center;
|
|
70
69
|
width: 14px;
|
|
71
70
|
height: 14px;
|
|
72
71
|
border-radius: 100%;
|
|
73
|
-
background-color: ${
|
|
72
|
+
background-color: ${_};
|
|
74
73
|
|
|
75
74
|
&:before {
|
|
76
|
-
font-size: ${
|
|
77
|
-
color: ${
|
|
75
|
+
font-size: ${y};
|
|
76
|
+
color: ${T};
|
|
78
77
|
content: '!';
|
|
79
78
|
}
|
|
80
|
-
`,
|
|
81
|
-
margin-left: ${
|
|
82
|
-
`,
|
|
83
|
-
color:
|
|
84
|
-
hoverColor:
|
|
85
|
-
size:
|
|
86
|
-
}), /* @__PURE__ */
|
|
79
|
+
`, I = m.span`
|
|
80
|
+
margin-left: ${w * 2}px;
|
|
81
|
+
`, L = (e) => /* @__PURE__ */ D(re, { children: [e.isDocumentPartError ? /* @__PURE__ */ E(F, {}) : /* @__PURE__ */ E(a, {
|
|
82
|
+
color: o.Error,
|
|
83
|
+
hoverColor: o.Error,
|
|
84
|
+
size: u.Small
|
|
85
|
+
}), /* @__PURE__ */ E(I, { children: e.label })] }), R = (e) => P.includes(e), ie = (e, t) => R(e) && t.every((e) => !!e.data) && t.length < 3 && t.length > 0, z = (e) => e?.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)?.[0], ae = (e) => z(e) === j, oe = (e) => z(e) === M, B = (e, t) => t.every((t) => t.data !== e?.data), V = async (e) => {
|
|
87
86
|
let t = new FileReader();
|
|
88
87
|
return new Promise((n, r) => {
|
|
89
88
|
t.onload = () => n(t.result), t.onerror = (e) => r(e), t.readAsDataURL(e);
|
|
90
89
|
});
|
|
91
|
-
},
|
|
92
|
-
margin-top: ${
|
|
93
|
-
margin-left: ${
|
|
94
|
-
`,
|
|
95
|
-
margin-bottom: ${
|
|
96
|
-
`,
|
|
90
|
+
}, H = m.div`
|
|
91
|
+
margin-top: ${w * 4}px;
|
|
92
|
+
margin-left: ${w * 4}px;
|
|
93
|
+
`, U = m.div`
|
|
94
|
+
margin-bottom: ${w}px;
|
|
95
|
+
`, W = m.div`
|
|
97
96
|
display: flex;
|
|
98
97
|
align-items: center;
|
|
99
|
-
background-color: ${
|
|
100
|
-
padding: ${
|
|
101
|
-
border-radius: ${
|
|
102
|
-
`,
|
|
98
|
+
background-color: ${x};
|
|
99
|
+
padding: ${w * 2}px;
|
|
100
|
+
border-radius: ${g}px;
|
|
101
|
+
`, G = m.span`
|
|
103
102
|
width: 100%;
|
|
104
|
-
margin-left: ${
|
|
105
|
-
margin-right: ${
|
|
106
|
-
`,
|
|
103
|
+
margin-left: ${w * 4}px;
|
|
104
|
+
margin-right: ${w * 2}px;
|
|
105
|
+
`, K = m.span`
|
|
107
106
|
cursor: pointer !important;
|
|
108
|
-
margin-right: ${
|
|
109
|
-
`,
|
|
107
|
+
margin-right: ${w * 2}px;
|
|
108
|
+
`, q = m.div`
|
|
110
109
|
height: 66px;
|
|
111
|
-
`,
|
|
110
|
+
`, se = m.div`
|
|
112
111
|
display: flex;
|
|
113
112
|
flex-direction: column;
|
|
114
|
-
margin-top: ${
|
|
115
|
-
margin-left: ${
|
|
116
|
-
`,
|
|
113
|
+
margin-top: ${w * 4}px;
|
|
114
|
+
margin-left: ${w * 4}px;
|
|
115
|
+
`, ce = m.img`
|
|
117
116
|
width: auto;
|
|
118
117
|
max-width: 204px;
|
|
119
118
|
height: 50px;
|
|
120
119
|
object-fit: contain;
|
|
121
|
-
border-radius: ${
|
|
122
|
-
`,
|
|
120
|
+
border-radius: ${g}px;
|
|
121
|
+
`, le = m.div`
|
|
123
122
|
display: flex;
|
|
124
123
|
align-items: center;
|
|
125
124
|
justify-content: center;
|
|
126
125
|
min-width: 50px;
|
|
127
126
|
height: 50px;
|
|
128
|
-
border-radius: ${
|
|
129
|
-
background-color: ${
|
|
130
|
-
`,
|
|
131
|
-
let { data: t } = e, n =
|
|
132
|
-
return n || r ? /* @__PURE__ */
|
|
133
|
-
color:
|
|
134
|
-
hoverColor:
|
|
135
|
-
}), r && /* @__PURE__ */
|
|
136
|
-
color:
|
|
137
|
-
hoverColor:
|
|
138
|
-
})] }) : /* @__PURE__ */
|
|
139
|
-
},
|
|
127
|
+
border-radius: ${g}px;
|
|
128
|
+
background-color: ${T};
|
|
129
|
+
`, ue = (e) => {
|
|
130
|
+
let { data: t } = e, n = ae(t), r = oe(t);
|
|
131
|
+
return n || r ? /* @__PURE__ */ D(le, { children: [n && /* @__PURE__ */ E(l, {
|
|
132
|
+
color: o.Gray,
|
|
133
|
+
hoverColor: o.Gray
|
|
134
|
+
}), r && /* @__PURE__ */ E(c, {
|
|
135
|
+
color: o.Gray,
|
|
136
|
+
hoverColor: o.Gray
|
|
137
|
+
})] }) : /* @__PURE__ */ E(ce, { src: t });
|
|
138
|
+
}, J = {
|
|
140
139
|
KYCFormItemFileExtraPart: (e) => {
|
|
141
140
|
let { elementId: t, title: n, uploaderLabels: r, onFileAdd: i } = e;
|
|
142
|
-
return /* @__PURE__ */
|
|
141
|
+
return /* @__PURE__ */ D(se, {
|
|
143
142
|
id: t,
|
|
144
|
-
children: [n && /* @__PURE__ */
|
|
143
|
+
children: [n && /* @__PURE__ */ E(U, { children: n }), /* @__PURE__ */ E(q, { children: /* @__PURE__ */ E(d, {
|
|
145
144
|
title: r.title,
|
|
146
145
|
action: r.action,
|
|
147
|
-
maxSize:
|
|
148
|
-
acceptFormats:
|
|
146
|
+
maxSize: A,
|
|
147
|
+
acceptFormats: N,
|
|
149
148
|
elementId: `${t}_uploader`,
|
|
150
|
-
direction:
|
|
149
|
+
direction: f.Row,
|
|
151
150
|
onDrop: (e) => {
|
|
152
151
|
let [t] = e;
|
|
153
152
|
t && i(t);
|
|
@@ -156,34 +155,34 @@ var E = {
|
|
|
156
155
|
});
|
|
157
156
|
},
|
|
158
157
|
KYCFormItemFile: (e) => {
|
|
159
|
-
let { name: t, title: n, data: r, error: i, elementId:
|
|
160
|
-
return /* @__PURE__ */
|
|
161
|
-
id:
|
|
158
|
+
let { name: t, title: n, data: r, error: i, elementId: a, uploaderLabels: c, onFileChange: l, onFileRemove: u } = e;
|
|
159
|
+
return /* @__PURE__ */ D(H, {
|
|
160
|
+
id: a,
|
|
162
161
|
children: [
|
|
163
|
-
n && /* @__PURE__ */
|
|
164
|
-
r ? /* @__PURE__ */
|
|
165
|
-
/* @__PURE__ */
|
|
166
|
-
/* @__PURE__ */
|
|
167
|
-
/* @__PURE__ */
|
|
168
|
-
onClick:
|
|
169
|
-
children: /* @__PURE__ */
|
|
170
|
-
color:
|
|
171
|
-
hoverColor:
|
|
162
|
+
n && /* @__PURE__ */ E(U, { children: n }),
|
|
163
|
+
r ? /* @__PURE__ */ D(W, { children: [
|
|
164
|
+
/* @__PURE__ */ E(ue, { data: r }),
|
|
165
|
+
/* @__PURE__ */ E(G, { children: t }),
|
|
166
|
+
/* @__PURE__ */ E(K, {
|
|
167
|
+
onClick: u,
|
|
168
|
+
children: /* @__PURE__ */ E(s, {
|
|
169
|
+
color: o.Blue,
|
|
170
|
+
hoverColor: o.Blue
|
|
172
171
|
})
|
|
173
172
|
})
|
|
174
|
-
] }) : /* @__PURE__ */
|
|
173
|
+
] }) : /* @__PURE__ */ E(q, { children: /* @__PURE__ */ E(d, {
|
|
175
174
|
title: c.title,
|
|
176
175
|
action: c.action,
|
|
177
|
-
maxSize:
|
|
178
|
-
acceptFormats:
|
|
179
|
-
elementId: `${
|
|
180
|
-
direction:
|
|
176
|
+
maxSize: A,
|
|
177
|
+
acceptFormats: N,
|
|
178
|
+
elementId: `${a}_uploader`,
|
|
179
|
+
direction: f.Row,
|
|
181
180
|
onDrop: (e) => {
|
|
182
181
|
let [t] = e;
|
|
183
182
|
t && l(t);
|
|
184
183
|
}
|
|
185
184
|
}) }),
|
|
186
|
-
i && /* @__PURE__ */
|
|
185
|
+
i && /* @__PURE__ */ E(L, {
|
|
187
186
|
label: i,
|
|
188
187
|
isDocumentPartError: !0
|
|
189
188
|
})
|
|
@@ -191,34 +190,35 @@ var E = {
|
|
|
191
190
|
});
|
|
192
191
|
},
|
|
193
192
|
KYCFormItemText: (e) => {
|
|
194
|
-
let { onFeedbackChange: t, value: n = "" } = e
|
|
195
|
-
return /* @__PURE__ */
|
|
196
|
-
onChange:
|
|
197
|
-
onBlur:
|
|
193
|
+
let { onFeedbackChange: t, value: n = "" } = e;
|
|
194
|
+
return /* @__PURE__ */ E(H, { children: /* @__PURE__ */ E(p, {
|
|
195
|
+
onChange: (e) => t(e.target.value),
|
|
196
|
+
onBlur: (e) => t(e.target.value),
|
|
198
197
|
value: n,
|
|
199
|
-
|
|
198
|
+
rows: 5,
|
|
200
199
|
name: "kyc-client-comments",
|
|
201
|
-
|
|
200
|
+
id: "kyc-feedback-textarea",
|
|
201
|
+
"aria-label": "Comments"
|
|
202
202
|
}) });
|
|
203
203
|
}
|
|
204
|
-
},
|
|
205
|
-
margin-top: ${
|
|
206
|
-
`,
|
|
207
|
-
font-size: ${_}px;
|
|
208
|
-
font-weight: bold;
|
|
209
|
-
color: ${m};
|
|
210
|
-
margin-bottom: ${x}px;
|
|
211
|
-
`, le = p.div`
|
|
204
|
+
}, de = m.div`
|
|
205
|
+
margin-top: ${w * 6}px;
|
|
206
|
+
`, fe = m.div`
|
|
212
207
|
font-size: ${v}px;
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
208
|
+
font-weight: bold;
|
|
209
|
+
color: ${h};
|
|
210
|
+
margin-bottom: ${w}px;
|
|
211
|
+
`, pe = m.div`
|
|
212
|
+
font-size: ${y}px;
|
|
213
|
+
color: ${b};
|
|
214
|
+
margin-left: ${w * 4}px;
|
|
215
|
+
`, Y = (e, t) => `[${e}].parts[${t}].data`, me = (e) => {
|
|
216
|
+
let { type: t, index: n, uploaderLabels: i, documentLabels: a, elementId: o, parts: s, errors: c, onDocumentChange: l } = e, [u, d] = r(/* @__PURE__ */ new Map()), f = ie(t, s), p = a?.parts, m = s[0], h = m ? p?.[m.type]?.title : void 0, [g, _] = r(/* @__PURE__ */ new Map()), v = (e) => {
|
|
217
217
|
let t = new Map(u);
|
|
218
|
-
t.set(
|
|
218
|
+
t.set(Y(n, e), i.oversizeError), d(t);
|
|
219
219
|
}, y = (e) => {
|
|
220
220
|
let t = new Map(u);
|
|
221
|
-
t.delete(
|
|
221
|
+
t.delete(Y(n, e)), d(t);
|
|
222
222
|
}, b = (e, n, r) => {
|
|
223
223
|
let i = {
|
|
224
224
|
...e,
|
|
@@ -235,7 +235,7 @@ var E = {
|
|
|
235
235
|
}
|
|
236
236
|
let n = s[e] ?? s[0];
|
|
237
237
|
if (!n) return;
|
|
238
|
-
let r = await
|
|
238
|
+
let r = await V(t);
|
|
239
239
|
b(n, e, r);
|
|
240
240
|
let i = new Map(g);
|
|
241
241
|
i.set(r, t.name), _(i), y(e);
|
|
@@ -245,29 +245,29 @@ var E = {
|
|
|
245
245
|
b(t, e);
|
|
246
246
|
let n = s[e], r = new Map(g);
|
|
247
247
|
n?.data && B(n, s) && r.delete(n?.data), _(r), y(e);
|
|
248
|
-
},
|
|
248
|
+
}, C = (e) => {
|
|
249
249
|
if (e) return g.get(e);
|
|
250
|
-
},
|
|
250
|
+
}, w = (e, t) => {
|
|
251
251
|
let n = s[e] ?? s[0];
|
|
252
252
|
n && b(n, e, t);
|
|
253
253
|
};
|
|
254
|
-
return /* @__PURE__ */
|
|
254
|
+
return /* @__PURE__ */ D(de, {
|
|
255
255
|
id: o,
|
|
256
256
|
children: [
|
|
257
|
-
/* @__PURE__ */
|
|
258
|
-
a?.description && /* @__PURE__ */
|
|
257
|
+
/* @__PURE__ */ E(fe, { children: `${n + 1}. ${a?.title}` }),
|
|
258
|
+
a?.description && /* @__PURE__ */ E(pe, { children: a?.description }),
|
|
259
259
|
s.map((e, r) => {
|
|
260
|
-
let a = `kyc-form_item_file_${e.type}`, l =
|
|
261
|
-
|
|
262
|
-
let m = c?.[
|
|
263
|
-
return e.type ===
|
|
260
|
+
let a = `kyc-form_item_file_${e.type}`, l = R(t), d = p?.[e.type], f = l ? void 0 : d?.title;
|
|
261
|
+
R(t) && e.data && (a = `${a}_${e.data?.substr(-32)}`, B(e, s) || (a = `${a}_${r}`));
|
|
262
|
+
let m = c?.[Y(n, r)], h = u.get(Y(n, r));
|
|
263
|
+
return e.type === k.Feedback ? /* @__PURE__ */ E(J.KYCFormItemText, {
|
|
264
264
|
value: e.data,
|
|
265
|
-
onFeedbackChange: (e) =>
|
|
266
|
-
}, a) : /* @__PURE__ */
|
|
265
|
+
onFeedbackChange: (e) => w(r, e)
|
|
266
|
+
}, a) : /* @__PURE__ */ E(J.KYCFormItemFile, {
|
|
267
267
|
title: f,
|
|
268
268
|
data: e.data,
|
|
269
269
|
type: e.type,
|
|
270
|
-
name:
|
|
270
|
+
name: C(e.data),
|
|
271
271
|
uploaderLabels: i,
|
|
272
272
|
error: h || m,
|
|
273
273
|
elementId: `${o}_part_${e.type}_${r}`,
|
|
@@ -275,7 +275,7 @@ var E = {
|
|
|
275
275
|
onFileRemove: () => S(r)
|
|
276
276
|
}, a);
|
|
277
277
|
}),
|
|
278
|
-
f && m && /* @__PURE__ */
|
|
278
|
+
f && m && /* @__PURE__ */ E(J.KYCFormItemFileExtraPart, {
|
|
279
279
|
elementId: `${o}_extra`,
|
|
280
280
|
title: h,
|
|
281
281
|
uploaderLabels: i,
|
|
@@ -283,55 +283,69 @@ var E = {
|
|
|
283
283
|
})
|
|
284
284
|
]
|
|
285
285
|
});
|
|
286
|
-
},
|
|
286
|
+
}, he = m.div`
|
|
287
287
|
display: flex;
|
|
288
288
|
flex-direction: column;
|
|
289
|
-
`,
|
|
290
|
-
margin-bottom: ${
|
|
291
|
-
`,
|
|
292
|
-
color: ${
|
|
293
|
-
`,
|
|
289
|
+
`, X = m.span`
|
|
290
|
+
margin-bottom: ${w * 8}px;
|
|
291
|
+
`, ge = m.span`
|
|
292
|
+
color: ${b};
|
|
293
|
+
`, _e = m.span`
|
|
294
|
+
display: inline-flex;
|
|
295
|
+
align-items: center;
|
|
296
|
+
gap: ${w}px;
|
|
297
|
+
min-height: ${S}px;
|
|
298
|
+
color: ${ee};
|
|
299
|
+
|
|
300
|
+
@media (min-width: ${C}px) {
|
|
301
|
+
max-width: 350px;
|
|
302
|
+
white-space: nowrap;
|
|
303
|
+
}
|
|
304
|
+
`, ve = m.div`
|
|
294
305
|
display: flex;
|
|
295
306
|
flex-direction: column;
|
|
296
|
-
`,
|
|
297
|
-
margin-bottom: ${
|
|
307
|
+
`, Z = m.span`
|
|
308
|
+
margin-bottom: ${w * 6}px;
|
|
298
309
|
`, Q = {
|
|
299
310
|
KYCSuccessScreen: (e) => {
|
|
300
|
-
let { elementId: t, title: n, description: r, support:
|
|
301
|
-
return /* @__PURE__ */
|
|
311
|
+
let { elementId: t, title: n, description: r, support: a } = e;
|
|
312
|
+
return /* @__PURE__ */ D(he, {
|
|
302
313
|
id: t,
|
|
303
314
|
children: [
|
|
304
|
-
/* @__PURE__ */
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
children:
|
|
315
|
+
/* @__PURE__ */ E(X, { children: /* @__PURE__ */ D(_e, {
|
|
316
|
+
id: `${t}_success`,
|
|
317
|
+
role: "status",
|
|
318
|
+
children: [/* @__PURE__ */ E(i, {
|
|
319
|
+
color: o.Success,
|
|
320
|
+
size: u.Small
|
|
321
|
+
}), n]
|
|
308
322
|
}) }),
|
|
309
|
-
r && /* @__PURE__ */
|
|
310
|
-
|
|
323
|
+
r && /* @__PURE__ */ E(X, { children: r }),
|
|
324
|
+
a && /* @__PURE__ */ E(ge, { children: a })
|
|
311
325
|
]
|
|
312
326
|
});
|
|
313
327
|
},
|
|
314
328
|
KYCFailScreen: (e) => {
|
|
315
329
|
let { elementId: t, title: n, support: r } = e;
|
|
316
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */ D(ve, {
|
|
317
331
|
id: t,
|
|
318
|
-
children: [/* @__PURE__ */
|
|
332
|
+
children: [/* @__PURE__ */ E(Z, { children: /* @__PURE__ */ E(L, {
|
|
319
333
|
label: n,
|
|
320
334
|
isDocumentPartError: !1
|
|
321
335
|
}) }), r]
|
|
322
336
|
});
|
|
323
337
|
}
|
|
324
|
-
},
|
|
338
|
+
}, ye = m.div`
|
|
325
339
|
display: flex;
|
|
326
340
|
flex-direction: column;
|
|
327
341
|
align-items: flex-start;
|
|
328
342
|
width: 100%;
|
|
329
|
-
`,
|
|
330
|
-
font-size: ${
|
|
331
|
-
`,
|
|
343
|
+
`, be = m.div`
|
|
344
|
+
font-size: ${v}px;
|
|
345
|
+
`, xe = m.div`
|
|
332
346
|
width: 100%;
|
|
333
|
-
margin-bottom: ${
|
|
334
|
-
`,
|
|
347
|
+
margin-bottom: ${w * 6}px;
|
|
348
|
+
`, Se = m.div`
|
|
335
349
|
display: flex;
|
|
336
350
|
justify-content: flex-end;
|
|
337
351
|
width: 100%;
|
|
@@ -346,13 +360,13 @@ var E = {
|
|
|
346
360
|
let n = [...h];
|
|
347
361
|
n.splice(e, 1, t), g(n);
|
|
348
362
|
};
|
|
349
|
-
return /* @__PURE__ */
|
|
363
|
+
return /* @__PURE__ */ D(ye, {
|
|
350
364
|
id: a,
|
|
351
365
|
children: [
|
|
352
|
-
o && /* @__PURE__ */
|
|
353
|
-
/* @__PURE__ */
|
|
366
|
+
o && /* @__PURE__ */ E(be, { children: o }),
|
|
367
|
+
/* @__PURE__ */ E(xe, { children: h.map((e, t) => {
|
|
354
368
|
let n = `kyc-form_item_${e.type}_${t}`;
|
|
355
|
-
return /* @__PURE__ */
|
|
369
|
+
return /* @__PURE__ */ E(me, {
|
|
356
370
|
index: t,
|
|
357
371
|
type: e.type,
|
|
358
372
|
parts: e.parts,
|
|
@@ -363,7 +377,7 @@ var E = {
|
|
|
363
377
|
onDocumentChange: (e) => y(t, e)
|
|
364
378
|
}, n);
|
|
365
379
|
}) }),
|
|
366
|
-
/* @__PURE__ */
|
|
380
|
+
/* @__PURE__ */ E(Se, { children: /* @__PURE__ */ E(e, {
|
|
367
381
|
id: `${a}_button`,
|
|
368
382
|
variant: t.Primary,
|
|
369
383
|
isDisabled: _,
|
|
@@ -376,6 +390,6 @@ var E = {
|
|
|
376
390
|
};
|
|
377
391
|
$.SuccessScreen = Q.KYCSuccessScreen, $.FailScreen = Q.KYCFailScreen;
|
|
378
392
|
//#endregion
|
|
379
|
-
export {
|
|
393
|
+
export { N as ACCEPT_FORMATS, P as AVAILABLE_EXTRA_PARTS_DOCUMENTS, O as DocumentType, te as MAX_EXTRA_PARTS_COUNT, A as MAX_FILE_SIZE, ne as OPTIONAL_DOCUMENT_PARTS, j as PDF_MIME_TYPE, k as PartType, $ as default };
|
|
380
394
|
|
|
381
395
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/document.types.ts","../src/constants.ts","../src/KYCErrorLabel/style.tsx","../src/KYCErrorLabel/index.tsx","../src/utils.ts","../src/KYCDocumentParts/style.tsx","../src/KYCDocumentParts/index.tsx","../src/KYCFormItem/style.tsx","../src/KYCFormItem/index.tsx","../src/KYCStatusScreen/style.tsx","../src/KYCStatusScreen/index.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["export const DocumentType = {\n Id: 'id',\n Ub: 'ub',\n IdExtra: 'id_extra',\n Card: 'bank_card',\n PaymentSystemScreen: 'payment_system_screen',\n OnlineBankingStatement: 'online_banking_statement',\n CompanyRegistrationDocument: 'company_registration_document',\n SelfieWithIdCard: 'selfie_with_id_card_or_bank_card',\n PaypalDetailsPage: 'pay_pal_details_page',\n BankWireDetails: 'bank_wire_details',\n TransactionConfirmation: 'transaction_confirmation',\n Other: 'other',\n Feedback: 'feedback',\n} as const;\nexport type DocumentType = (typeof DocumentType)[keyof typeof DocumentType];\n\nexport const PartType = {\n IdFront: 'id_front',\n IdBack: 'id_back',\n Ub: 'ub_item',\n Card: 'card_item',\n PaymentSystemScreen: 'screen_item',\n OnlineBankingStatement: 'obs_item',\n CompanyRegistrationDocument: 'crd_item',\n SelfieWithIdCard: 'selfie_item',\n PaypalDetailsPageImage: 'pay_pal_details_page_image',\n BankWireDetailsPage: 'bank_wire_details_image',\n TransactionConfirmationImage: 'transaction_confirmation_image',\n OtherImage: 'other_image',\n Feedback: 'feedback',\n} as const;\nexport type PartType = (typeof PartType)[keyof typeof PartType];\n\nexport type KYCFileData = string | undefined;\n\nexport type KYCFile = {\n type: PartType;\n data?: KYCFileData;\n};\n\nexport type KYCDocument = {\n type: DocumentType;\n parts: KYCFile[];\n};\n","import type {ImageUploaderProps} from '@propellerads/image-uploader';\nimport {DocumentType, PartType} from './document.types';\n\nexport const MAX_FILE_SIZE = 5242880;\n\nexport const MAX_EXTRA_PARTS_COUNT = 3;\n\nexport const PDF_MIME_TYPE = 'application/pdf';\nexport const HEIC_MIME_TYPE = 'image/heic';\nexport const ACCEPT_FORMATS: ImageUploaderProps['acceptFormats'] = {\n 'image/png': ['.png'],\n 'image/jpeg': ['.jpg', '.jpe', '.jpeg'],\n [PDF_MIME_TYPE]: ['.pdf'],\n [HEIC_MIME_TYPE]: ['.heic'],\n};\n\nexport const AVAILABLE_EXTRA_PARTS_DOCUMENTS: DocumentType[] = [\n DocumentType.Card,\n DocumentType.Card,\n DocumentType.PaypalDetailsPage,\n DocumentType.BankWireDetails,\n DocumentType.TransactionConfirmation,\n DocumentType.SelfieWithIdCard,\n DocumentType.PaymentSystemScreen,\n DocumentType.Other,\n];\n\nexport const OPTIONAL_DOCUMENT_PARTS = {\n [DocumentType.Id]: {\n parts: [PartType.IdBack],\n },\n [DocumentType.IdExtra]: {\n parts: [PartType.IdBack],\n },\n};\n","import styled from 'styled-components';\nimport {fontSmall, spacing, white, errorColor} from '@propellerads/stylevariables';\n\nconst StyledKYCErrorLabel = styled.div`\n display: flex;\n align-items: center;\n color: ${errorColor};\n margin-top: ${spacing * 2}px;\n margin-bottom: ${spacing * 4}px;\n`;\n\nconst StyledKYCErrorLabelIcon = styled.span`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 100%;\n background-color: ${errorColor};\n\n &:before {\n font-size: ${fontSmall};\n color: ${white};\n content: '!';\n }\n`;\n\nconst StyledKYCErrorLabelText = styled.span`\n margin-left: ${spacing * 2}px;\n`;\n\nexport {StyledKYCErrorLabel, StyledKYCErrorLabelIcon, StyledKYCErrorLabelText};\n","import {Close, Color, Size} from '@propellerads/icon';\nimport {StyledKYCErrorLabel, StyledKYCErrorLabelIcon, StyledKYCErrorLabelText} from './style';\nimport {KYCErrorLabelProps} from './types';\n\nconst KYCErrorLabel = (props: KYCErrorLabelProps) => (\n <StyledKYCErrorLabel>\n {props.isDocumentPartError ? (\n <StyledKYCErrorLabelIcon />\n ) : (\n <Close color={Color.Error} hoverColor={Color.Error} size={Size.Small} />\n )}\n <StyledKYCErrorLabelText>{props.label}</StyledKYCErrorLabelText>\n </StyledKYCErrorLabel>\n);\n\nexport default KYCErrorLabel;\n","import {AVAILABLE_EXTRA_PARTS_DOCUMENTS, HEIC_MIME_TYPE, MAX_EXTRA_PARTS_COUNT, PDF_MIME_TYPE} from './constants';\nimport {DocumentType, KYCFile, KYCFileData} from './document.types';\n\nconst isDocumentExtraPartAvailable = (documentType: DocumentType): boolean =>\n AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType);\n\nconst canAddExtraPart = (documentType: DocumentType, parts: KYCFile[]): boolean =>\n isDocumentExtraPartAvailable(documentType) &&\n parts.every((part: KYCFile) => Boolean(part.data)) &&\n parts.length < MAX_EXTRA_PARTS_COUNT &&\n parts.length > 0;\n\nconst canRemoveExtraPart = (documentType: DocumentType, parts: KYCFile[]): boolean =>\n AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType) && parts.length > 1;\n\nconst getMimeType = (partData: KYCFileData): string | undefined => partData?.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)?.[0];\n\nconst isPDF = (partData: KYCFileData): boolean => {\n const mimeType: string | undefined = getMimeType(partData);\n return mimeType === PDF_MIME_TYPE;\n};\n\nconst isHEIC = (partData: KYCFileData): boolean => {\n const mimeType: string | undefined = getMimeType(partData);\n return mimeType === HEIC_MIME_TYPE;\n};\n\nconst isFileUniqueInDocument = (file: KYCFile, parts: KYCFile[]): boolean =>\n parts.every((part: KYCFile) => part.data !== file?.data);\n\nconst getFileBase64 = async (file: File): Promise<string> => {\n const reader: FileReader = new FileReader();\n\n return new Promise<string>((resolve, reject) => {\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = (error) => reject(error);\n\n reader.readAsDataURL(file);\n });\n};\n\nexport {\n canAddExtraPart,\n canRemoveExtraPart,\n getFileBase64,\n isDocumentExtraPartAvailable,\n isFileUniqueInDocument,\n isHEIC,\n isPDF,\n};\n","import styled from 'styled-components';\nimport {borderRadius, spacing, gray95, white} from '@propellerads/stylevariables';\n\nconst StyledKYCFormItem = styled.div`\n margin-top: ${spacing * 4}px;\n margin-left: ${spacing * 4}px;\n`;\n\nconst StyledKYCFormItemFileTitle = styled.div`\n margin-bottom: ${spacing}px;\n`;\n\nconst StyledKYCFormItemFilePreview = styled.div`\n display: flex;\n align-items: center;\n background-color: ${gray95};\n padding: ${spacing * 2}px;\n border-radius: ${borderRadius}px;\n`;\n\nconst StyledKYCFormItemFilePreviewName = styled.span`\n width: 100%;\n margin-left: ${spacing * 4}px;\n margin-right: ${spacing * 2}px;\n`;\n\nconst StyledKYCFormItemFilePreviewRemove = styled.span`\n cursor: pointer !important;\n margin-right: ${spacing * 2}px;\n`;\n\nconst StyledKYCFormItemFileUploaderContainer = styled.div`\n height: 66px;\n`;\n\nconst StyledKYCFormItemFileExtraPart = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: ${spacing * 4}px;\n margin-left: ${spacing * 4}px;\n`;\n\nconst StyledKYCDocumentPartImgMiniature = styled.img`\n width: auto;\n max-width: 204px;\n height: 50px;\n object-fit: contain;\n border-radius: ${borderRadius}px;\n`;\n\nconst StyledKYCDocumentPartIconMiniature = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 50px;\n height: 50px;\n border-radius: ${borderRadius}px;\n background-color: ${white};\n`;\n\nexport {\n StyledKYCFormItem,\n StyledKYCFormItemFilePreview,\n StyledKYCFormItemFilePreviewName,\n StyledKYCFormItemFilePreviewRemove,\n StyledKYCFormItemFileTitle,\n StyledKYCFormItemFileUploaderContainer,\n StyledKYCFormItemFileExtraPart,\n StyledKYCDocumentPartImgMiniature,\n StyledKYCDocumentPartIconMiniature,\n};\n","import {Color, Delete, Insert, Pdf} from '@propellerads/icon';\nimport ImageUploader, {Direction} from '@propellerads/image-uploader';\nimport TextArea from '@propellerads/textarea';\nimport {ACCEPT_FORMATS, MAX_FILE_SIZE} from '../constants';\nimport KYCErrorLabel from '../KYCErrorLabel';\nimport {isHEIC, isPDF} from '../utils';\nimport {\n StyledKYCDocumentPartIconMiniature,\n StyledKYCDocumentPartImgMiniature,\n StyledKYCFormItem,\n StyledKYCFormItemFileExtraPart,\n StyledKYCFormItemFilePreview,\n StyledKYCFormItemFilePreviewName,\n StyledKYCFormItemFilePreviewRemove,\n StyledKYCFormItemFileTitle,\n StyledKYCFormItemFileUploaderContainer,\n} from './style';\nimport {\n KYCDocumentPartMiniatureProps,\n KYCFormItemFileExtraPartProps,\n KYCFormItemFileProps,\n KYCFormItemTextProps,\n} from './types';\n\nconst KYCDocumentPartMiniature = (props: KYCDocumentPartMiniatureProps) => {\n const {data} = props;\n const isPDFPart: boolean = isPDF(data);\n const isHEICPart: boolean = isHEIC(data);\n\n if (isPDFPart || isHEICPart) {\n return (\n <StyledKYCDocumentPartIconMiniature>\n {isPDFPart && <Pdf color={Color.Gray} hoverColor={Color.Gray} />}\n {isHEICPart && <Insert color={Color.Gray} hoverColor={Color.Gray} />}\n </StyledKYCDocumentPartIconMiniature>\n );\n }\n\n return <StyledKYCDocumentPartImgMiniature src={data} />;\n};\n\nconst KYCFormItemFileExtraPart = (props: KYCFormItemFileExtraPartProps) => {\n const {elementId, title, uploaderLabels, onFileAdd} = props;\n const handleDrop = (files: File[]) => {\n const [file] = files;\n\n if (file) {\n onFileAdd(file);\n }\n };\n\n return (\n <StyledKYCFormItemFileExtraPart id={elementId}>\n {title && <StyledKYCFormItemFileTitle>{title}</StyledKYCFormItemFileTitle>}\n\n <StyledKYCFormItemFileUploaderContainer>\n <ImageUploader\n title={uploaderLabels.title}\n action={uploaderLabels.action}\n maxSize={MAX_FILE_SIZE}\n acceptFormats={ACCEPT_FORMATS}\n elementId={`${elementId}_uploader`}\n direction={Direction.Row}\n onDrop={handleDrop}\n />\n </StyledKYCFormItemFileUploaderContainer>\n </StyledKYCFormItemFileExtraPart>\n );\n};\n\nconst KYCFormItemFile = (props: KYCFormItemFileProps) => {\n const {name, title, data, error, elementId, uploaderLabels, onFileChange, onFileRemove} = props;\n const handleDrop = (files: File[]) => {\n const [file] = files;\n\n if (file) {\n onFileChange(file);\n }\n };\n\n return (\n <StyledKYCFormItem id={elementId}>\n {title && <StyledKYCFormItemFileTitle>{title}</StyledKYCFormItemFileTitle>}\n\n {data ? (\n <StyledKYCFormItemFilePreview>\n <KYCDocumentPartMiniature data={data} />\n <StyledKYCFormItemFilePreviewName>{name}</StyledKYCFormItemFilePreviewName>\n <StyledKYCFormItemFilePreviewRemove onClick={onFileRemove}>\n <Delete color={Color.Blue} hoverColor={Color.Blue} />\n </StyledKYCFormItemFilePreviewRemove>\n </StyledKYCFormItemFilePreview>\n ) : (\n <StyledKYCFormItemFileUploaderContainer>\n <ImageUploader\n title={uploaderLabels.title}\n action={uploaderLabels.action}\n maxSize={MAX_FILE_SIZE}\n acceptFormats={ACCEPT_FORMATS}\n elementId={`${elementId}_uploader`}\n direction={Direction.Row}\n onDrop={handleDrop}\n />\n </StyledKYCFormItemFileUploaderContainer>\n )}\n\n {error && <KYCErrorLabel label={error} isDocumentPartError />}\n </StyledKYCFormItem>\n );\n};\n\nconst KYCFormItemText = (props: KYCFormItemTextProps) => {\n const {onFeedbackChange, value = ''} = props;\n\n const handleChange = (newValue: string) => onFeedbackChange(newValue);\n\n return (\n <StyledKYCFormItem>\n <TextArea\n onChange={handleChange}\n onBlur={handleChange}\n value={value}\n errors={[]}\n name=\"kyc-client-comments\"\n elementId=\"kyc-feedback-textarea\"\n />\n </StyledKYCFormItem>\n );\n};\n\nexport default {\n KYCFormItemFileExtraPart,\n KYCFormItemFile,\n KYCFormItemText,\n};\n","import styled from 'styled-components';\nimport {fontNormal, fontSmall, spacing, gray50, black} from '@propellerads/stylevariables';\n\nconst StyledKYCFormItem = styled.div`\n margin-top: ${spacing * 6}px;\n`;\n\nconst StyledKYCFormItemTitle = styled.div`\n font-size: ${fontNormal}px;\n font-weight: bold;\n color: ${black};\n margin-bottom: ${spacing}px;\n`;\n\nconst StyledKYCFormItemDescription = styled.div`\n font-size: ${fontSmall}px;\n color: ${gray50};\n margin-left: ${spacing * 4}px;\n`;\n\nexport {StyledKYCFormItem, StyledKYCFormItemTitle, StyledKYCFormItemDescription};\n","import {useState} from 'react';\nimport {KYCDocument, KYCFile, KYCFileData, PartType} from '../document.types';\nimport KYCDocumentParts from '../KYCDocumentParts';\nimport {PartLabels, PartsLabels} from '../labels.types';\nimport {canAddExtraPart, getFileBase64, isDocumentExtraPartAvailable, isFileUniqueInDocument} from '../utils';\nimport {StyledKYCFormItem, StyledKYCFormItemDescription, StyledKYCFormItemTitle} from './style';\nimport {KYCFormItemProps} from './types';\n\nconst getErrorKey = (documentIndex: number, partIndex: number) => `[${documentIndex}].parts[${partIndex}].data`;\n\nconst KYCFormItem = (props: KYCFormItemProps) => {\n const {type, index, uploaderLabels, documentLabels, elementId, parts, errors, onDocumentChange} = props;\n const [localErrors, setLocalErrors] = useState<Map<string, string>>(new Map<string, string>());\n\n const isAddExtraPartAvailable: boolean = canAddExtraPart(type, parts);\n const documentLabelsParts: PartsLabels | undefined = documentLabels?.parts;\n const firstPart = parts[0];\n const extraPartTitle = firstPart ? documentLabelsParts?.[firstPart.type]?.title : undefined;\n\n const [fileNames, setFileNames] = useState<Map<string, string>>(new Map<string, string>());\n\n const setLocalErrorByPartIndex = (partIndex: number) => {\n const newLocalErrors = new Map<string, string>(localErrors);\n newLocalErrors.set(getErrorKey(index, partIndex), uploaderLabels.oversizeError);\n setLocalErrors(newLocalErrors);\n };\n\n const deleteLocalErrorByPartIndex = (partIndex: number) => {\n const newLocalErrors = new Map<string, string>(localErrors);\n newLocalErrors.delete(getErrorKey(index, partIndex));\n setLocalErrors(newLocalErrors);\n };\n\n const updateDocumentPart = (part: KYCFile, partIndex: number, data?: KYCFileData) => {\n const newPart: KYCFile = {\n ...part,\n data,\n };\n\n const newParts: KYCFile[] = [...parts];\n newParts.splice(partIndex, 1, newPart);\n\n const newDocument: KYCDocument = {\n type,\n parts: newParts,\n };\n\n onDocumentChange(newDocument);\n };\n\n const onFileChange = async (partIndex: number, file: File) => {\n if (!file) {\n setLocalErrorByPartIndex(partIndex);\n return;\n }\n\n const part = parts[partIndex] ?? parts[0];\n\n if (!part) {\n return;\n }\n\n const data: string = await getFileBase64(file);\n\n updateDocumentPart(part, partIndex, data);\n\n const newFileNames = new Map<string, string>(fileNames);\n newFileNames.set(data, file.name);\n setFileNames(newFileNames);\n\n deleteLocalErrorByPartIndex(partIndex);\n };\n\n const onFileRemove = (partIndex: number) => {\n const part = parts[partIndex];\n\n if (!part) {\n return;\n }\n\n updateDocumentPart(part, partIndex);\n\n const removedPart = parts[partIndex];\n const newFileNames = new Map<string, string>(fileNames);\n\n if (removedPart?.data && isFileUniqueInDocument(removedPart, parts)) {\n newFileNames.delete(removedPart?.data);\n }\n\n setFileNames(newFileNames);\n\n deleteLocalErrorByPartIndex(partIndex);\n };\n\n const getFileName = (key: string | undefined): string | undefined => {\n if (!key) {\n return undefined;\n }\n\n return fileNames.get(key);\n };\n\n const onFeedbackChange = (partIndex: number, data: string) => {\n const part = parts[partIndex] ?? parts[0];\n\n if (!part) {\n return;\n }\n\n updateDocumentPart(part, partIndex, data);\n };\n\n return (\n <StyledKYCFormItem id={elementId}>\n <StyledKYCFormItemTitle>{`${index + 1}. ${documentLabels?.title}`}</StyledKYCFormItemTitle>\n\n {documentLabels?.description && (\n <StyledKYCFormItemDescription>{documentLabels?.description}</StyledKYCFormItemDescription>\n )}\n\n {parts.map((part, partIndex) => {\n let itemKey = `kyc-form_item_file_${part.type}`;\n\n const isExtraPartAvailable: boolean = isDocumentExtraPartAvailable(type);\n const partLabels: PartLabels | undefined = documentLabelsParts?.[part.type];\n const partTitle = isExtraPartAvailable ? undefined : partLabels?.title;\n\n if (isDocumentExtraPartAvailable(type) && part.data) {\n itemKey = `${itemKey}_${part.data?.substr(-32)}`;\n\n if (!isFileUniqueInDocument(part, parts)) {\n itemKey = `${itemKey}_${partIndex}`;\n }\n }\n\n const partError = errors?.[getErrorKey(index, partIndex)];\n const localPartError = localErrors.get(getErrorKey(index, partIndex));\n\n if (part.type === PartType.Feedback) {\n return (\n <KYCDocumentParts.KYCFormItemText\n key={itemKey}\n value={part.data}\n onFeedbackChange={(value) => onFeedbackChange(partIndex, value)}\n />\n );\n }\n\n return (\n <KYCDocumentParts.KYCFormItemFile\n title={partTitle}\n data={part.data}\n type={part.type}\n name={getFileName(part.data)}\n uploaderLabels={uploaderLabels}\n error={localPartError || partError}\n key={itemKey}\n elementId={`${elementId}_part_${part.type}_${partIndex}`}\n onFileChange={(file) => onFileChange(partIndex, file)}\n onFileRemove={() => onFileRemove(partIndex)}\n />\n );\n })}\n\n {isAddExtraPartAvailable && firstPart && (\n <KYCDocumentParts.KYCFormItemFileExtraPart\n elementId={`${elementId}_extra`}\n title={extraPartTitle}\n uploaderLabels={uploaderLabels}\n onFileAdd={(file) => onFileChange(parts.length, file)}\n />\n )}\n </StyledKYCFormItem>\n );\n};\n\nexport default KYCFormItem;\n","import styled from 'styled-components';\nimport {spacing, gray50} from '@propellerads/stylevariables';\n\nconst StyledKYCSucessScreen = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledKYCSucessScreenItem = styled.span`\n margin-bottom: ${spacing * 8}px;\n`;\n\nconst StyledKYCSucessScreenSuppport = styled.span`\n color: ${gray50};\n`;\n\nconst StyledKYCFailScreen = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledKYCFailScreenItem = styled.span`\n margin-bottom: ${spacing * 6}px;\n`;\n\nexport {\n StyledKYCSucessScreen,\n StyledKYCSucessScreenItem,\n StyledKYCSucessScreenSuppport,\n StyledKYCFailScreen,\n StyledKYCFailScreenItem,\n};\n","import SuccessLabel from '@propellerads/success-label';\nimport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n PDF_MIME_TYPE,\n} from '../constants';\nimport KYCErrorLabel from '../KYCErrorLabel';\nimport {\n StyledKYCFailScreen,\n StyledKYCFailScreenItem,\n StyledKYCSucessScreen,\n StyledKYCSucessScreenItem,\n StyledKYCSucessScreenSuppport,\n} from './style';\nimport {KYCFailScreenProps, KYCSuccessScreenProps} from './types';\n\nconst KYCSuccessScreen = (props: KYCSuccessScreenProps) => {\n const {elementId, title, description, support} = props;\n\n return (\n <StyledKYCSucessScreen id={elementId}>\n <StyledKYCSucessScreenItem>\n <SuccessLabel show elementId={`${elementId}_success`}>\n {title}\n </SuccessLabel>\n </StyledKYCSucessScreenItem>\n\n {description && <StyledKYCSucessScreenItem>{description}</StyledKYCSucessScreenItem>}\n\n {support && <StyledKYCSucessScreenSuppport>{support}</StyledKYCSucessScreenSuppport>}\n </StyledKYCSucessScreen>\n );\n};\n\nconst KYCFailScreen = (props: KYCFailScreenProps) => {\n const {elementId, title, support} = props;\n\n return (\n <StyledKYCFailScreen id={elementId}>\n <StyledKYCFailScreenItem>\n <KYCErrorLabel label={title} isDocumentPartError={false} />\n </StyledKYCFailScreenItem>\n\n {support}\n </StyledKYCFailScreen>\n );\n};\n\nexport default {\n KYCSuccessScreen,\n KYCFailScreen,\n};\n\nexport {ACCEPT_FORMATS, AVAILABLE_EXTRA_PARTS_DOCUMENTS, MAX_EXTRA_PARTS_COUNT, MAX_FILE_SIZE, PDF_MIME_TYPE};\n","import styled from 'styled-components';\nimport {fontNormal, spacing} from '@propellerads/stylevariables';\n\nconst StyledKYCForm = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n`;\n\nconst StyledKYCFormTitle = styled.div`\n font-size: ${fontNormal}px;\n`;\n\nconst StyledKYCFormDocuments = styled.div`\n width: 100%;\n margin-bottom: ${spacing * 6}px;\n`;\n\nconst StyledKYCFormButton = styled.div`\n display: flex;\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport {StyledKYCForm, StyledKYCFormTitle, StyledKYCFormDocuments, StyledKYCFormButton};\n","import Button, {ButtonVariant} from '@propellerads/button';\nimport {useEffect, useState} from 'react';\nimport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n OPTIONAL_DOCUMENT_PARTS,\n PDF_MIME_TYPE,\n} from './constants';\nimport {DocumentType, KYCDocument, PartType, KYCFile} from './document.types';\nimport KYCFormItem from './KYCFormItem';\nimport KYCStatusScreen from './KYCStatusScreen';\nimport {StyledKYCForm, StyledKYCFormButton, StyledKYCFormDocuments, StyledKYCFormTitle} from './style';\nimport {KYCFormProps} from './types';\n\nconst KYCForm = (props: KYCFormProps) => {\n const {\n elementId,\n title,\n uploadButtonLabel,\n uploaderLabels,\n documentsLabels,\n documents,\n errors,\n isLoading,\n validator,\n onUploadClick,\n } = props;\n\n const [userDocuments, setUserDocuments] = useState<KYCDocument[]>(documents);\n const [isButtonDisabled, setButtonDisabled] = useState<boolean>(true);\n\n useEffect(() => {\n setUserDocuments(documents);\n }, [documents]);\n\n useEffect(() => {\n const isValid: boolean = validator(userDocuments);\n setButtonDisabled(!isValid);\n }, [userDocuments, validator]);\n\n const onDocumentChange = (index: number, document: KYCDocument) => {\n const newDocuments: KYCDocument[] = [...userDocuments];\n newDocuments.splice(index, 1, document);\n\n setUserDocuments(newDocuments);\n };\n\n return (\n <StyledKYCForm id={elementId}>\n {title && <StyledKYCFormTitle>{title}</StyledKYCFormTitle>}\n\n <StyledKYCFormDocuments>\n {userDocuments.map((document, index) => {\n const key = `kyc-form_item_${document.type}_${index}`;\n\n return (\n <KYCFormItem\n index={index}\n type={document.type}\n parts={document.parts}\n documentLabels={documentsLabels[document.type]}\n uploaderLabels={uploaderLabels}\n errors={errors}\n elementId={`${elementId}_item_${document.type}`}\n key={key}\n onDocumentChange={(doc) => onDocumentChange(index, doc)}\n />\n );\n })}\n </StyledKYCFormDocuments>\n <StyledKYCFormButton>\n <Button\n id={`${elementId}_button`}\n variant={ButtonVariant.Primary}\n isDisabled={isButtonDisabled}\n isLoading={isLoading || false}\n onClick={() => onUploadClick(userDocuments)}\n >\n {uploadButtonLabel}\n </Button>\n </StyledKYCFormButton>\n </StyledKYCForm>\n );\n};\n\nKYCForm.SuccessScreen = KYCStatusScreen.KYCSuccessScreen;\nKYCForm.FailScreen = KYCStatusScreen.KYCFailScreen;\n\nexport default KYCForm;\n\nexport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n DocumentType,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n OPTIONAL_DOCUMENT_PARTS,\n PartType,\n PDF_MIME_TYPE,\n};\nexport type {KYCDocument, KYCFile};\n"],"mappings":";;;;;;;;;;AAAA,IAAa,IAAe;CAC1B,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,MAAM;CACN,qBAAqB;CACrB,wBAAwB;CACxB,6BAA6B;CAC7B,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;CACjB,yBAAyB;CACzB,OAAO;CACP,UAAU;CACX,EAGY,IAAW;CACtB,SAAS;CACT,QAAQ;CACR,IAAI;CACJ,MAAM;CACN,qBAAqB;CACrB,wBAAwB;CACxB,6BAA6B;CAC7B,kBAAkB;CAClB,wBAAwB;CACxB,qBAAqB;CACrB,8BAA8B;CAC9B,YAAY;CACZ,UAAU;CACX,EC5BY,IAAgB,SAEhB,KAAwB,GAExB,IAAgB,mBAChB,IAAiB,cACjB,IAAsD;CACjE,aAAa,CAAC,OAAO;CACrB,cAAc;EAAC;EAAQ;EAAQ;EAAQ;EACtC,IAAgB,CAAC,OAAO;EACxB,IAAiB,CAAC,QAAQ;CAC5B,EAEY,IAAkD;CAC7D,EAAa;CACb,EAAa;CACb,EAAa;CACb,EAAa;CACb,EAAa;CACb,EAAa;CACb,EAAa;CACb,EAAa;CACd,EAEY,KAA0B;EACpC,EAAa,KAAK,EACjB,OAAO,CAAC,EAAS,OAAO,EACzB;EACA,EAAa,UAAU,EACtB,OAAO,CAAC,EAAS,OAAO,EACzB;CACF,EC/BK,IAAsB,EAAO,GAAG;;;WAG3B,EAAW;gBACN,IAAU,EAAE;mBACT,IAAU,EAAE;GAGzB,IAA0B,EAAO,IAAI;;;;;;;sBAOrB,EAAW;;;iBAGhB,EAAU;aACd,EAAM;;;GAKb,IAA0B,EAAO,IAAI;iBAC1B,IAAU,EAAE;GCxBvB,KAAiB,MACrB,kBAAC,GAAD,EAAA,UAAA,CACG,EAAM,sBACL,kBAAC,GAAD,EAA2B,CAAA,GAE3B,kBAAC,GAAD;CAAO,OAAO,EAAM;CAAO,YAAY,EAAM;CAAO,MAAM,EAAK;CAAS,CAAA,EAE1E,kBAAC,GAAD,EAAA,UAA0B,EAAM,OAAgC,CAAA,CAC5C,EAAA,CAAA,ECTlB,KAAgC,MACpC,EAAgC,SAAS,EAAa,EAElD,MAAmB,GAA4B,MACnD,EAA6B,EAAa,IAC1C,EAAM,OAAO,MAAkB,EAAQ,EAAK,KAAM,IAClD,EAAM,SAAA,KACN,EAAM,SAAS,GAKX,KAAe,MAA8C,GAAU,MAAM,6BAA6B,GAAG,IAE7G,KAAS,MACwB,EAAY,EAC1C,KAAa,GAGhB,MAAU,MACuB,EAAY,EAC1C,KAAa,GAGhB,KAA0B,GAAe,MAC7C,EAAM,OAAO,MAAkB,EAAK,SAAS,GAAM,KAAK,EAEpD,KAAgB,OAAO,MAAgC;CAC3D,IAAM,IAAqB,IAAI,YAAY;CAE3C,OAAO,IAAI,SAAiB,GAAS,MAAW;EAI9C,AAHA,EAAO,eAAe,EAAQ,EAAO,OAAiB,EACtD,EAAO,WAAW,MAAU,EAAO,EAAM,EAEzC,EAAO,cAAc,EAAK;GAC1B;GCnCE,IAAoB,EAAO,GAAG;gBACpB,IAAU,EAAE;iBACX,IAAU,EAAE;GAGvB,IAA6B,EAAO,GAAG;mBAC1B,EAAQ;GAGrB,IAA+B,EAAO,GAAG;;;sBAGzB,EAAO;aAChB,IAAU,EAAE;mBACN,EAAa;GAG1B,IAAmC,EAAO,IAAI;;iBAEnC,IAAU,EAAE;kBACX,IAAU,EAAE;GAGxB,IAAqC,EAAO,IAAI;;kBAEpC,IAAU,EAAE;GAGxB,IAAyC,EAAO,GAAG;;GAInD,IAAiC,EAAO,GAAG;;;gBAGjC,IAAU,EAAE;iBACX,IAAU,EAAE;GAGvB,IAAoC,EAAO,GAAG;;;;;mBAKjC,EAAa;GAG1B,KAAqC,EAAO,GAAG;;;;;;mBAMlC,EAAa;sBACV,EAAM;GCjCtB,MAA4B,MAAyC;CACzE,IAAM,EAAC,YAAQ,GACT,IAAqB,EAAM,EAAK,EAChC,IAAsB,GAAO,EAAK;CAWxC,OATI,KAAa,IAEb,kBAAC,IAAD,EAAA,UAAA,CACG,KAAa,kBAAC,GAAD;EAAK,OAAO,EAAM;EAAM,YAAY,EAAM;EAAQ,CAAA,EAC/D,KAAc,kBAAC,GAAD;EAAQ,OAAO,EAAM;EAAM,YAAY,EAAM;EAAQ,CAAA,CACjC,EAAA,CAAA,GAIlC,kBAAC,GAAD,EAAmC,KAAK,GAAQ,CAAA;GA4FzD,IAAe;CACb,2BA1FgC,MAAyC;EACzE,IAAM,EAAC,cAAW,UAAO,mBAAgB,iBAAa;EAStD,OACE,kBAAC,GAAD;GAAgC,IAAI;aAApC,CACG,KAAS,kBAAC,GAAD,EAAA,UAA6B,GAAmC,CAAA,EAE1E,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,OAAO,EAAe;IACtB,QAAQ,EAAe;IACvB,SAAS;IACT,eAAe;IACf,WAAW,GAAG,EAAU;IACxB,WAAW,EAAU;IACrB,SApBY,MAAkB;KACpC,IAAM,CAAC,KAAQ;KAEf,AAAI,KACF,EAAU,EAAK;;IAiBX,CAAA,EACqC,CAAA,CACV;;;CAkEnC,kBA9DuB,MAAgC;EACvD,IAAM,EAAC,SAAM,UAAO,SAAM,UAAO,cAAW,mBAAgB,iBAAc,oBAAgB;EAS1F,OACE,kBAAC,GAAD;GAAmB,IAAI;aAAvB;IACG,KAAS,kBAAC,GAAD,EAAA,UAA6B,GAAmC,CAAA;IAEzE,IACC,kBAAC,GAAD,EAAA,UAAA;KACE,kBAAC,IAAD,EAAgC,SAAQ,CAAA;KACxC,kBAAC,GAAD,EAAA,UAAmC,GAAwC,CAAA;KAC3E,kBAAC,GAAD;MAAoC,SAAS;gBAC3C,kBAAC,GAAD;OAAQ,OAAO,EAAM;OAAM,YAAY,EAAM;OAAQ,CAAA;MAClB,CAAA;KACR,EAAA,CAAA,GAE/B,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,OAAO,EAAe;KACtB,QAAQ,EAAe;KACvB,SAAS;KACT,eAAe;KACf,WAAW,GAAG,EAAU;KACxB,WAAW,EAAU;KACrB,SA7BU,MAAkB;MACpC,IAAM,CAAC,KAAQ;MAEf,AAAI,KACF,EAAa,EAAK;;KA0BZ,CAAA,EACqC,CAAA;IAG1C,KAAS,kBAAC,GAAD;KAAe,OAAO;KAAO,qBAAA;KAAsB,CAAA;IAC3C;;;CA0BtB,kBAtBuB,MAAgC;EACvD,IAAM,EAAC,qBAAkB,WAAQ,OAAM,GAEjC,KAAgB,MAAqB,EAAiB,EAAS;EAErE,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACE,UAAU;GACV,QAAQ;GACD;GACP,QAAQ,EAAE;GACV,MAAK;GACL,WAAU;GACV,CAAA,EACgB,CAAA;;CAQvB,ECnIK,KAAoB,EAAO,GAAG;gBACpB,IAAU,EAAE;GAGtB,KAAyB,EAAO,GAAG;eAC1B,EAAW;;WAEf,EAAM;mBACE,EAAQ;GAGrB,KAA+B,EAAO,GAAG;eAChC,EAAU;WACd,EAAO;iBACD,IAAU,EAAE;GCTvB,KAAe,GAAuB,MAAsB,IAAI,EAAc,UAAU,EAAU,SAElG,MAAe,MAA4B;CAC/C,IAAM,EAAC,SAAM,UAAO,mBAAgB,mBAAgB,cAAW,UAAO,WAAQ,wBAAoB,GAC5F,CAAC,GAAa,KAAkB,kBAA8B,IAAI,KAAqB,CAAC,EAExF,IAAmC,GAAgB,GAAM,EAAM,EAC/D,IAA+C,GAAgB,OAC/D,IAAY,EAAM,IAClB,IAAiB,IAAY,IAAsB,EAAU,OAAO,QAAQ,KAAA,GAE5E,CAAC,GAAW,KAAgB,kBAA8B,IAAI,KAAqB,CAAC,EAEpF,KAA4B,MAAsB;EACtD,IAAM,IAAiB,IAAI,IAAoB,EAAY;EAE3D,AADA,EAAe,IAAI,EAAY,GAAO,EAAU,EAAE,EAAe,cAAc,EAC/E,EAAe,EAAe;IAG1B,KAA+B,MAAsB;EACzD,IAAM,IAAiB,IAAI,IAAoB,EAAY;EAE3D,AADA,EAAe,OAAO,EAAY,GAAO,EAAU,CAAC,EACpD,EAAe,EAAe;IAG1B,KAAsB,GAAe,GAAmB,MAAuB;EACnF,IAAM,IAAmB;GACvB,GAAG;GACH;GACD,EAEK,IAAsB,CAAC,GAAG,EAAM;EAQtC,AAPA,EAAS,OAAO,GAAW,GAAG,EAAQ,EAOtC,EAAiB;GAJf;GACA,OAAO;GAGQ,CAAY;IAGzB,IAAe,OAAO,GAAmB,MAAe;EAC5D,IAAI,CAAC,GAAM;GACT,EAAyB,EAAU;GACnC;;EAGF,IAAM,IAAO,EAAM,MAAc,EAAM;EAEvC,IAAI,CAAC,GACH;EAGF,IAAM,IAAe,MAAM,GAAc,EAAK;EAE9C,EAAmB,GAAM,GAAW,EAAK;EAEzC,IAAM,IAAe,IAAI,IAAoB,EAAU;EAIvD,AAHA,EAAa,IAAI,GAAM,EAAK,KAAK,EACjC,EAAa,EAAa,EAE1B,EAA4B,EAAU;IAGlC,KAAgB,MAAsB;EAC1C,IAAM,IAAO,EAAM;EAEnB,IAAI,CAAC,GACH;EAGF,EAAmB,GAAM,EAAU;EAEnC,IAAM,IAAc,EAAM,IACpB,IAAe,IAAI,IAAoB,EAAU;EAQvD,AANI,GAAa,QAAQ,EAAuB,GAAa,EAAM,IACjE,EAAa,OAAO,GAAa,KAAK,EAGxC,EAAa,EAAa,EAE1B,EAA4B,EAAU;IAGlC,KAAe,MAAgD;EAC9D,OAIL,OAAO,EAAU,IAAI,EAAI;IAGrB,KAAoB,GAAmB,MAAiB;EAC5D,IAAM,IAAO,EAAM,MAAc,EAAM;EAElC,KAIL,EAAmB,GAAM,GAAW,EAAK;;CAG3C,OACE,kBAAC,IAAD;EAAmB,IAAI;YAAvB;GACE,kBAAC,IAAD,EAAA,UAAyB,GAAG,IAAQ,EAAE,IAAI,GAAgB,SAAiC,CAAA;GAE1F,GAAgB,eACf,kBAAC,IAAD,EAAA,UAA+B,GAAgB,aAA2C,CAAA;GAG3F,EAAM,KAAK,GAAM,MAAc;IAC9B,IAAI,IAAU,sBAAsB,EAAK,QAEnC,IAAgC,EAA6B,EAAK,EAClE,IAAqC,IAAsB,EAAK,OAChE,IAAY,IAAuB,KAAA,IAAY,GAAY;IAEjE,AAAI,EAA6B,EAAK,IAAI,EAAK,SAC7C,IAAU,GAAG,EAAQ,GAAG,EAAK,MAAM,OAAO,IAAI,IAEzC,EAAuB,GAAM,EAAM,KACtC,IAAU,GAAG,EAAQ,GAAG;IAI5B,IAAM,IAAY,IAAS,EAAY,GAAO,EAAU,GAClD,IAAiB,EAAY,IAAI,EAAY,GAAO,EAAU,CAAC;IAYrE,OAVI,EAAK,SAAS,EAAS,WAEvB,kBAAC,EAAiB,iBAAlB;KAEE,OAAO,EAAK;KACZ,mBAAmB,MAAU,EAAiB,GAAW,EAAM;KAC/D,EAHK,EAGL,GAKJ,kBAAC,EAAiB,iBAAlB;KACE,OAAO;KACP,MAAM,EAAK;KACX,MAAM,EAAK;KACX,MAAM,EAAY,EAAK,KAAK;KACZ;KAChB,OAAO,KAAkB;KAEzB,WAAW,GAAG,EAAU,QAAQ,EAAK,KAAK,GAAG;KAC7C,eAAe,MAAS,EAAa,GAAW,EAAK;KACrD,oBAAoB,EAAa,EAAU;KAC3C,EAJK,EAIL;KAEJ;GAED,KAA2B,KAC1B,kBAAC,EAAiB,0BAAlB;IACE,WAAW,GAAG,EAAU;IACxB,OAAO;IACS;IAChB,YAAY,MAAS,EAAa,EAAM,QAAQ,EAAK;IACrD,CAAA;GAEc;;GCzKlB,KAAwB,EAAO,GAAG;;;GAKlC,IAA4B,EAAO,IAAI;mBAC1B,IAAU,EAAE;GAGzB,KAAgC,EAAO,IAAI;WACtC,EAAO;GAGZ,KAAsB,EAAO,GAAG;;;GAKhC,KAA0B,EAAO,IAAI;mBACxB,IAAU,EAAE;GC4B/B,IAAe;CACb,mBAjCwB,MAAiC;EACzD,IAAM,EAAC,cAAW,UAAO,gBAAa,eAAW;EAEjD,OACE,kBAAC,IAAD;GAAuB,IAAI;aAA3B;IACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAc,MAAA;KAAK,WAAW,GAAG,EAAU;eACxC;KACY,CAAA,EACW,CAAA;IAE3B,KAAe,kBAAC,GAAD,EAAA,UAA4B,GAAwC,CAAA;IAEnF,KAAW,kBAAC,IAAD,EAAA,UAAgC,GAAwC,CAAA;IAC9D;;;CAoB1B,gBAhBqB,MAA8B;EACnD,IAAM,EAAC,cAAW,UAAO,eAAW;EAEpC,OACE,kBAAC,IAAD;GAAqB,IAAI;aAAzB,CACE,kBAAC,IAAD,EAAA,UACE,kBAAC,GAAD;IAAe,OAAO;IAAO,qBAAqB;IAAS,CAAA,EACnC,CAAA,EAEzB,EACmB;;;CAOzB,EClDK,KAAgB,EAAO,GAAG;;;;;GAO1B,KAAqB,EAAO,GAAG;eACtB,EAAW;GAGpB,KAAyB,EAAO,GAAG;;mBAEtB,IAAU,EAAE;GAGzB,KAAsB,EAAO,GAAG;;;;GCHhC,KAAW,MAAwB;CACvC,IAAM,EACJ,cACA,UACA,sBACA,mBACA,oBACA,cACA,WACA,cACA,cACA,qBACE,GAEE,CAAC,GAAe,KAAoB,EAAwB,EAAU,EACtE,CAAC,GAAkB,KAAqB,EAAkB,GAAK;CAMrE,AAJA,QAAgB;EACd,EAAiB,EAAU;IAC1B,CAAC,EAAU,CAAC,EAEf,QAAgB;EAEd,EAAkB,CADO,EAAU,EAChB,CAAQ;IAC1B,CAAC,GAAe,EAAU,CAAC;CAE9B,IAAM,KAAoB,GAAe,MAA0B;EACjE,IAAM,IAA8B,CAAC,GAAG,EAAc;EAGtD,AAFA,EAAa,OAAO,GAAO,GAAG,EAAS,EAEvC,EAAiB,EAAa;;CAGhC,OACE,kBAAC,IAAD;EAAe,IAAI;YAAnB;GACG,KAAS,kBAAC,IAAD,EAAA,UAAqB,GAA2B,CAAA;GAE1D,kBAAC,IAAD,EAAA,UACG,EAAc,KAAK,GAAU,MAAU;IACtC,IAAM,IAAM,iBAAiB,EAAS,KAAK,GAAG;IAE9C,OACE,kBAAC,IAAD;KACS;KACP,MAAM,EAAS;KACf,OAAO,EAAS;KAChB,gBAAgB,EAAgB,EAAS;KACzB;KACR;KACR,WAAW,GAAG,EAAU,QAAQ,EAAS;KAEzC,mBAAmB,MAAQ,EAAiB,GAAO,EAAI;KACvD,EAFK,EAEL;KAEJ,EACqB,CAAA;GACzB,kBAAC,IAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI,GAAG,EAAU;IACjB,SAAS,EAAc;IACvB,YAAY;IACZ,WAAW,KAAa;IACxB,eAAe,EAAc,EAAc;cAE1C;IACM,CAAA,EACW,CAAA;GACR;;;AAIpB,EAAQ,gBAAgB,EAAgB,kBACxC,EAAQ,aAAa,EAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/document.types.ts","../src/constants.ts","../src/KYCErrorLabel/style.tsx","../src/KYCErrorLabel/index.tsx","../src/utils.ts","../src/KYCDocumentParts/style.tsx","../src/KYCDocumentParts/index.tsx","../src/KYCFormItem/style.tsx","../src/KYCFormItem/index.tsx","../src/KYCStatusScreen/style.tsx","../src/KYCStatusScreen/index.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["export const DocumentType = {\n Id: 'id',\n Ub: 'ub',\n IdExtra: 'id_extra',\n Card: 'bank_card',\n PaymentSystemScreen: 'payment_system_screen',\n OnlineBankingStatement: 'online_banking_statement',\n CompanyRegistrationDocument: 'company_registration_document',\n SelfieWithIdCard: 'selfie_with_id_card_or_bank_card',\n PaypalDetailsPage: 'pay_pal_details_page',\n BankWireDetails: 'bank_wire_details',\n TransactionConfirmation: 'transaction_confirmation',\n Other: 'other',\n Feedback: 'feedback',\n} as const;\nexport type DocumentType = (typeof DocumentType)[keyof typeof DocumentType];\n\nexport const PartType = {\n IdFront: 'id_front',\n IdBack: 'id_back',\n Ub: 'ub_item',\n Card: 'card_item',\n PaymentSystemScreen: 'screen_item',\n OnlineBankingStatement: 'obs_item',\n CompanyRegistrationDocument: 'crd_item',\n SelfieWithIdCard: 'selfie_item',\n PaypalDetailsPageImage: 'pay_pal_details_page_image',\n BankWireDetailsPage: 'bank_wire_details_image',\n TransactionConfirmationImage: 'transaction_confirmation_image',\n OtherImage: 'other_image',\n Feedback: 'feedback',\n} as const;\nexport type PartType = (typeof PartType)[keyof typeof PartType];\n\nexport type KYCFileData = string | undefined;\n\nexport type KYCFile = {\n type: PartType;\n data?: KYCFileData;\n};\n\nexport type KYCDocument = {\n type: DocumentType;\n parts: KYCFile[];\n};\n","import type {ImageUploaderProps} from '@propellerads/image-uploader';\nimport {DocumentType, PartType} from './document.types';\n\nexport const MAX_FILE_SIZE = 5242880;\n\nexport const MAX_EXTRA_PARTS_COUNT = 3;\n\nexport const PDF_MIME_TYPE = 'application/pdf';\nexport const HEIC_MIME_TYPE = 'image/heic';\nexport const ACCEPT_FORMATS: ImageUploaderProps['acceptFormats'] = {\n 'image/png': ['.png'],\n 'image/jpeg': ['.jpg', '.jpe', '.jpeg'],\n [PDF_MIME_TYPE]: ['.pdf'],\n [HEIC_MIME_TYPE]: ['.heic'],\n};\n\nexport const AVAILABLE_EXTRA_PARTS_DOCUMENTS: DocumentType[] = [\n DocumentType.Card,\n DocumentType.Card,\n DocumentType.PaypalDetailsPage,\n DocumentType.BankWireDetails,\n DocumentType.TransactionConfirmation,\n DocumentType.SelfieWithIdCard,\n DocumentType.PaymentSystemScreen,\n DocumentType.Other,\n];\n\nexport const OPTIONAL_DOCUMENT_PARTS = {\n [DocumentType.Id]: {\n parts: [PartType.IdBack],\n },\n [DocumentType.IdExtra]: {\n parts: [PartType.IdBack],\n },\n};\n","import styled from 'styled-components';\nimport {fontSmall, spacing, white, errorColor} from '@propellerads/stylevariables';\n\nconst StyledKYCErrorLabel = styled.div`\n display: flex;\n align-items: center;\n color: ${errorColor};\n margin-top: ${spacing * 2}px;\n margin-bottom: ${spacing * 4}px;\n`;\n\nconst StyledKYCErrorLabelIcon = styled.span`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 100%;\n background-color: ${errorColor};\n\n &:before {\n font-size: ${fontSmall};\n color: ${white};\n content: '!';\n }\n`;\n\nconst StyledKYCErrorLabelText = styled.span`\n margin-left: ${spacing * 2}px;\n`;\n\nexport {StyledKYCErrorLabel, StyledKYCErrorLabelIcon, StyledKYCErrorLabelText};\n","import {Close, Color, Size} from '@propellerads/icon';\nimport {StyledKYCErrorLabel, StyledKYCErrorLabelIcon, StyledKYCErrorLabelText} from './style';\nimport {KYCErrorLabelProps} from './types';\n\nconst KYCErrorLabel = (props: KYCErrorLabelProps) => (\n <StyledKYCErrorLabel>\n {props.isDocumentPartError ? (\n <StyledKYCErrorLabelIcon />\n ) : (\n <Close color={Color.Error} hoverColor={Color.Error} size={Size.Small} />\n )}\n <StyledKYCErrorLabelText>{props.label}</StyledKYCErrorLabelText>\n </StyledKYCErrorLabel>\n);\n\nexport default KYCErrorLabel;\n","import {AVAILABLE_EXTRA_PARTS_DOCUMENTS, HEIC_MIME_TYPE, MAX_EXTRA_PARTS_COUNT, PDF_MIME_TYPE} from './constants';\nimport {DocumentType, KYCFile, KYCFileData} from './document.types';\n\nconst isDocumentExtraPartAvailable = (documentType: DocumentType): boolean =>\n AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType);\n\nconst canAddExtraPart = (documentType: DocumentType, parts: KYCFile[]): boolean =>\n isDocumentExtraPartAvailable(documentType) &&\n parts.every((part: KYCFile) => Boolean(part.data)) &&\n parts.length < MAX_EXTRA_PARTS_COUNT &&\n parts.length > 0;\n\nconst canRemoveExtraPart = (documentType: DocumentType, parts: KYCFile[]): boolean =>\n AVAILABLE_EXTRA_PARTS_DOCUMENTS.includes(documentType) && parts.length > 1;\n\nconst getMimeType = (partData: KYCFileData): string | undefined => partData?.match(/[^:]\\w+\\/[\\w-+\\d.]+(?=;|,)/)?.[0];\n\nconst isPDF = (partData: KYCFileData): boolean => {\n const mimeType: string | undefined = getMimeType(partData);\n return mimeType === PDF_MIME_TYPE;\n};\n\nconst isHEIC = (partData: KYCFileData): boolean => {\n const mimeType: string | undefined = getMimeType(partData);\n return mimeType === HEIC_MIME_TYPE;\n};\n\nconst isFileUniqueInDocument = (file: KYCFile, parts: KYCFile[]): boolean =>\n parts.every((part: KYCFile) => part.data !== file?.data);\n\nconst getFileBase64 = async (file: File): Promise<string> => {\n const reader: FileReader = new FileReader();\n\n return new Promise<string>((resolve, reject) => {\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = (error) => reject(error);\n\n reader.readAsDataURL(file);\n });\n};\n\nexport {\n canAddExtraPart,\n canRemoveExtraPart,\n getFileBase64,\n isDocumentExtraPartAvailable,\n isFileUniqueInDocument,\n isHEIC,\n isPDF,\n};\n","import styled from 'styled-components';\nimport {borderRadius, spacing, gray95, white} from '@propellerads/stylevariables';\n\nconst StyledKYCFormItem = styled.div`\n margin-top: ${spacing * 4}px;\n margin-left: ${spacing * 4}px;\n`;\n\nconst StyledKYCFormItemFileTitle = styled.div`\n margin-bottom: ${spacing}px;\n`;\n\nconst StyledKYCFormItemFilePreview = styled.div`\n display: flex;\n align-items: center;\n background-color: ${gray95};\n padding: ${spacing * 2}px;\n border-radius: ${borderRadius}px;\n`;\n\nconst StyledKYCFormItemFilePreviewName = styled.span`\n width: 100%;\n margin-left: ${spacing * 4}px;\n margin-right: ${spacing * 2}px;\n`;\n\nconst StyledKYCFormItemFilePreviewRemove = styled.span`\n cursor: pointer !important;\n margin-right: ${spacing * 2}px;\n`;\n\nconst StyledKYCFormItemFileUploaderContainer = styled.div`\n height: 66px;\n`;\n\nconst StyledKYCFormItemFileExtraPart = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: ${spacing * 4}px;\n margin-left: ${spacing * 4}px;\n`;\n\nconst StyledKYCDocumentPartImgMiniature = styled.img`\n width: auto;\n max-width: 204px;\n height: 50px;\n object-fit: contain;\n border-radius: ${borderRadius}px;\n`;\n\nconst StyledKYCDocumentPartIconMiniature = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 50px;\n height: 50px;\n border-radius: ${borderRadius}px;\n background-color: ${white};\n`;\n\nexport {\n StyledKYCFormItem,\n StyledKYCFormItemFilePreview,\n StyledKYCFormItemFilePreviewName,\n StyledKYCFormItemFilePreviewRemove,\n StyledKYCFormItemFileTitle,\n StyledKYCFormItemFileUploaderContainer,\n StyledKYCFormItemFileExtraPart,\n StyledKYCDocumentPartImgMiniature,\n StyledKYCDocumentPartIconMiniature,\n};\n","import {Color, Delete, Insert, Pdf} from '@propellerads/icon';\nimport ImageUploader, {Direction} from '@propellerads/image-uploader';\nimport {Textarea} from '@propellerads/input';\nimport {ACCEPT_FORMATS, MAX_FILE_SIZE} from '../constants';\nimport KYCErrorLabel from '../KYCErrorLabel';\nimport {isHEIC, isPDF} from '../utils';\nimport {\n StyledKYCDocumentPartIconMiniature,\n StyledKYCDocumentPartImgMiniature,\n StyledKYCFormItem,\n StyledKYCFormItemFileExtraPart,\n StyledKYCFormItemFilePreview,\n StyledKYCFormItemFilePreviewName,\n StyledKYCFormItemFilePreviewRemove,\n StyledKYCFormItemFileTitle,\n StyledKYCFormItemFileUploaderContainer,\n} from './style';\nimport {\n KYCDocumentPartMiniatureProps,\n KYCFormItemFileExtraPartProps,\n KYCFormItemFileProps,\n KYCFormItemTextProps,\n} from './types';\n\nconst KYCDocumentPartMiniature = (props: KYCDocumentPartMiniatureProps) => {\n const {data} = props;\n const isPDFPart: boolean = isPDF(data);\n const isHEICPart: boolean = isHEIC(data);\n\n if (isPDFPart || isHEICPart) {\n return (\n <StyledKYCDocumentPartIconMiniature>\n {isPDFPart && <Pdf color={Color.Gray} hoverColor={Color.Gray} />}\n {isHEICPart && <Insert color={Color.Gray} hoverColor={Color.Gray} />}\n </StyledKYCDocumentPartIconMiniature>\n );\n }\n\n return <StyledKYCDocumentPartImgMiniature src={data} />;\n};\n\nconst KYCFormItemFileExtraPart = (props: KYCFormItemFileExtraPartProps) => {\n const {elementId, title, uploaderLabels, onFileAdd} = props;\n const handleDrop = (files: File[]) => {\n const [file] = files;\n\n if (file) {\n onFileAdd(file);\n }\n };\n\n return (\n <StyledKYCFormItemFileExtraPart id={elementId}>\n {title && <StyledKYCFormItemFileTitle>{title}</StyledKYCFormItemFileTitle>}\n\n <StyledKYCFormItemFileUploaderContainer>\n <ImageUploader\n title={uploaderLabels.title}\n action={uploaderLabels.action}\n maxSize={MAX_FILE_SIZE}\n acceptFormats={ACCEPT_FORMATS}\n elementId={`${elementId}_uploader`}\n direction={Direction.Row}\n onDrop={handleDrop}\n />\n </StyledKYCFormItemFileUploaderContainer>\n </StyledKYCFormItemFileExtraPart>\n );\n};\n\nconst KYCFormItemFile = (props: KYCFormItemFileProps) => {\n const {name, title, data, error, elementId, uploaderLabels, onFileChange, onFileRemove} = props;\n const handleDrop = (files: File[]) => {\n const [file] = files;\n\n if (file) {\n onFileChange(file);\n }\n };\n\n return (\n <StyledKYCFormItem id={elementId}>\n {title && <StyledKYCFormItemFileTitle>{title}</StyledKYCFormItemFileTitle>}\n\n {data ? (\n <StyledKYCFormItemFilePreview>\n <KYCDocumentPartMiniature data={data} />\n <StyledKYCFormItemFilePreviewName>{name}</StyledKYCFormItemFilePreviewName>\n <StyledKYCFormItemFilePreviewRemove onClick={onFileRemove}>\n <Delete color={Color.Blue} hoverColor={Color.Blue} />\n </StyledKYCFormItemFilePreviewRemove>\n </StyledKYCFormItemFilePreview>\n ) : (\n <StyledKYCFormItemFileUploaderContainer>\n <ImageUploader\n title={uploaderLabels.title}\n action={uploaderLabels.action}\n maxSize={MAX_FILE_SIZE}\n acceptFormats={ACCEPT_FORMATS}\n elementId={`${elementId}_uploader`}\n direction={Direction.Row}\n onDrop={handleDrop}\n />\n </StyledKYCFormItemFileUploaderContainer>\n )}\n\n {error && <KYCErrorLabel label={error} isDocumentPartError />}\n </StyledKYCFormItem>\n );\n};\n\nconst KYCFormItemText = (props: KYCFormItemTextProps) => {\n const {onFeedbackChange, value = ''} = props;\n\n return (\n <StyledKYCFormItem>\n <Textarea\n onChange={(event) => onFeedbackChange(event.target.value)}\n onBlur={(event) => onFeedbackChange(event.target.value)}\n value={value}\n rows={5}\n name=\"kyc-client-comments\"\n id=\"kyc-feedback-textarea\"\n aria-label=\"Comments\"\n />\n </StyledKYCFormItem>\n );\n};\n\nexport default {\n KYCFormItemFileExtraPart,\n KYCFormItemFile,\n KYCFormItemText,\n};\n","import styled from 'styled-components';\nimport {fontNormal, fontSmall, spacing, gray50, black} from '@propellerads/stylevariables';\n\nconst StyledKYCFormItem = styled.div`\n margin-top: ${spacing * 6}px;\n`;\n\nconst StyledKYCFormItemTitle = styled.div`\n font-size: ${fontNormal}px;\n font-weight: bold;\n color: ${black};\n margin-bottom: ${spacing}px;\n`;\n\nconst StyledKYCFormItemDescription = styled.div`\n font-size: ${fontSmall}px;\n color: ${gray50};\n margin-left: ${spacing * 4}px;\n`;\n\nexport {StyledKYCFormItem, StyledKYCFormItemTitle, StyledKYCFormItemDescription};\n","import {useState} from 'react';\nimport {KYCDocument, KYCFile, KYCFileData, PartType} from '../document.types';\nimport KYCDocumentParts from '../KYCDocumentParts';\nimport {PartLabels, PartsLabels} from '../labels.types';\nimport {canAddExtraPart, getFileBase64, isDocumentExtraPartAvailable, isFileUniqueInDocument} from '../utils';\nimport {StyledKYCFormItem, StyledKYCFormItemDescription, StyledKYCFormItemTitle} from './style';\nimport {KYCFormItemProps} from './types';\n\nconst getErrorKey = (documentIndex: number, partIndex: number) => `[${documentIndex}].parts[${partIndex}].data`;\n\nconst KYCFormItem = (props: KYCFormItemProps) => {\n const {type, index, uploaderLabels, documentLabels, elementId, parts, errors, onDocumentChange} = props;\n const [localErrors, setLocalErrors] = useState<Map<string, string>>(new Map<string, string>());\n\n const isAddExtraPartAvailable: boolean = canAddExtraPart(type, parts);\n const documentLabelsParts: PartsLabels | undefined = documentLabels?.parts;\n const firstPart = parts[0];\n const extraPartTitle = firstPart ? documentLabelsParts?.[firstPart.type]?.title : undefined;\n\n const [fileNames, setFileNames] = useState<Map<string, string>>(new Map<string, string>());\n\n const setLocalErrorByPartIndex = (partIndex: number) => {\n const newLocalErrors = new Map<string, string>(localErrors);\n newLocalErrors.set(getErrorKey(index, partIndex), uploaderLabels.oversizeError);\n setLocalErrors(newLocalErrors);\n };\n\n const deleteLocalErrorByPartIndex = (partIndex: number) => {\n const newLocalErrors = new Map<string, string>(localErrors);\n newLocalErrors.delete(getErrorKey(index, partIndex));\n setLocalErrors(newLocalErrors);\n };\n\n const updateDocumentPart = (part: KYCFile, partIndex: number, data?: KYCFileData) => {\n const newPart: KYCFile = {\n ...part,\n data,\n };\n\n const newParts: KYCFile[] = [...parts];\n newParts.splice(partIndex, 1, newPart);\n\n const newDocument: KYCDocument = {\n type,\n parts: newParts,\n };\n\n onDocumentChange(newDocument);\n };\n\n const onFileChange = async (partIndex: number, file: File) => {\n if (!file) {\n setLocalErrorByPartIndex(partIndex);\n return;\n }\n\n const part = parts[partIndex] ?? parts[0];\n\n if (!part) {\n return;\n }\n\n const data: string = await getFileBase64(file);\n\n updateDocumentPart(part, partIndex, data);\n\n const newFileNames = new Map<string, string>(fileNames);\n newFileNames.set(data, file.name);\n setFileNames(newFileNames);\n\n deleteLocalErrorByPartIndex(partIndex);\n };\n\n const onFileRemove = (partIndex: number) => {\n const part = parts[partIndex];\n\n if (!part) {\n return;\n }\n\n updateDocumentPart(part, partIndex);\n\n const removedPart = parts[partIndex];\n const newFileNames = new Map<string, string>(fileNames);\n\n if (removedPart?.data && isFileUniqueInDocument(removedPart, parts)) {\n newFileNames.delete(removedPart?.data);\n }\n\n setFileNames(newFileNames);\n\n deleteLocalErrorByPartIndex(partIndex);\n };\n\n const getFileName = (key: string | undefined): string | undefined => {\n if (!key) {\n return undefined;\n }\n\n return fileNames.get(key);\n };\n\n const onFeedbackChange = (partIndex: number, data: string) => {\n const part = parts[partIndex] ?? parts[0];\n\n if (!part) {\n return;\n }\n\n updateDocumentPart(part, partIndex, data);\n };\n\n return (\n <StyledKYCFormItem id={elementId}>\n <StyledKYCFormItemTitle>{`${index + 1}. ${documentLabels?.title}`}</StyledKYCFormItemTitle>\n\n {documentLabels?.description && (\n <StyledKYCFormItemDescription>{documentLabels?.description}</StyledKYCFormItemDescription>\n )}\n\n {parts.map((part, partIndex) => {\n let itemKey = `kyc-form_item_file_${part.type}`;\n\n const isExtraPartAvailable: boolean = isDocumentExtraPartAvailable(type);\n const partLabels: PartLabels | undefined = documentLabelsParts?.[part.type];\n const partTitle = isExtraPartAvailable ? undefined : partLabels?.title;\n\n if (isDocumentExtraPartAvailable(type) && part.data) {\n itemKey = `${itemKey}_${part.data?.substr(-32)}`;\n\n if (!isFileUniqueInDocument(part, parts)) {\n itemKey = `${itemKey}_${partIndex}`;\n }\n }\n\n const partError = errors?.[getErrorKey(index, partIndex)];\n const localPartError = localErrors.get(getErrorKey(index, partIndex));\n\n if (part.type === PartType.Feedback) {\n return (\n <KYCDocumentParts.KYCFormItemText\n key={itemKey}\n value={part.data}\n onFeedbackChange={(value) => onFeedbackChange(partIndex, value)}\n />\n );\n }\n\n return (\n <KYCDocumentParts.KYCFormItemFile\n title={partTitle}\n data={part.data}\n type={part.type}\n name={getFileName(part.data)}\n uploaderLabels={uploaderLabels}\n error={localPartError || partError}\n key={itemKey}\n elementId={`${elementId}_part_${part.type}_${partIndex}`}\n onFileChange={(file) => onFileChange(partIndex, file)}\n onFileRemove={() => onFileRemove(partIndex)}\n />\n );\n })}\n\n {isAddExtraPartAvailable && firstPart && (\n <KYCDocumentParts.KYCFormItemFileExtraPart\n elementId={`${elementId}_extra`}\n title={extraPartTitle}\n uploaderLabels={uploaderLabels}\n onFileAdd={(file) => onFileChange(parts.length, file)}\n />\n )}\n </StyledKYCFormItem>\n );\n};\n\nexport default KYCFormItem;\n","import {gray50, lineHeight, mediumDevices, spacing, successColor} from '@propellerads/stylevariables';\nimport styled from 'styled-components';\n\nconst StyledKYCSucessScreen = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledKYCSucessScreenItem = styled.span`\n margin-bottom: ${spacing * 8}px;\n`;\n\nconst StyledKYCSucessScreenSuppport = styled.span`\n color: ${gray50};\n`;\n\n// The success title, as @propellerads/success-label drew it: a check and the\n// text in the success colour.\nconst StyledKYCSuccessTitle = styled.span`\n display: inline-flex;\n align-items: center;\n gap: ${spacing}px;\n min-height: ${lineHeight}px;\n color: ${successColor};\n\n @media (min-width: ${mediumDevices}px) {\n max-width: 350px;\n white-space: nowrap;\n }\n`;\n\nconst StyledKYCFailScreen = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledKYCFailScreenItem = styled.span`\n margin-bottom: ${spacing * 6}px;\n`;\n\nexport {\n StyledKYCFailScreen,\n StyledKYCFailScreenItem,\n StyledKYCSuccessTitle,\n StyledKYCSucessScreen,\n StyledKYCSucessScreenItem,\n StyledKYCSucessScreenSuppport,\n};\n","import {Check, Color, Size} from '@propellerads/icon';\nimport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n PDF_MIME_TYPE,\n} from '../constants';\nimport KYCErrorLabel from '../KYCErrorLabel';\nimport {\n StyledKYCFailScreen,\n StyledKYCFailScreenItem,\n StyledKYCSuccessTitle,\n StyledKYCSucessScreen,\n StyledKYCSucessScreenItem,\n StyledKYCSucessScreenSuppport,\n} from './style';\nimport {KYCFailScreenProps, KYCSuccessScreenProps} from './types';\n\nconst KYCSuccessScreen = (props: KYCSuccessScreenProps) => {\n const {elementId, title, description, support} = props;\n\n return (\n <StyledKYCSucessScreen id={elementId}>\n <StyledKYCSucessScreenItem>\n <StyledKYCSuccessTitle id={`${elementId}_success`} role=\"status\">\n <Check color={Color.Success} size={Size.Small} />\n {title}\n </StyledKYCSuccessTitle>\n </StyledKYCSucessScreenItem>\n\n {description && <StyledKYCSucessScreenItem>{description}</StyledKYCSucessScreenItem>}\n\n {support && <StyledKYCSucessScreenSuppport>{support}</StyledKYCSucessScreenSuppport>}\n </StyledKYCSucessScreen>\n );\n};\n\nconst KYCFailScreen = (props: KYCFailScreenProps) => {\n const {elementId, title, support} = props;\n\n return (\n <StyledKYCFailScreen id={elementId}>\n <StyledKYCFailScreenItem>\n <KYCErrorLabel label={title} isDocumentPartError={false} />\n </StyledKYCFailScreenItem>\n\n {support}\n </StyledKYCFailScreen>\n );\n};\n\nexport default {\n KYCSuccessScreen,\n KYCFailScreen,\n};\n\nexport {ACCEPT_FORMATS, AVAILABLE_EXTRA_PARTS_DOCUMENTS, MAX_EXTRA_PARTS_COUNT, MAX_FILE_SIZE, PDF_MIME_TYPE};\n","import styled from 'styled-components';\nimport {fontNormal, spacing} from '@propellerads/stylevariables';\n\nconst StyledKYCForm = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n`;\n\nconst StyledKYCFormTitle = styled.div`\n font-size: ${fontNormal}px;\n`;\n\nconst StyledKYCFormDocuments = styled.div`\n width: 100%;\n margin-bottom: ${spacing * 6}px;\n`;\n\nconst StyledKYCFormButton = styled.div`\n display: flex;\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport {StyledKYCForm, StyledKYCFormTitle, StyledKYCFormDocuments, StyledKYCFormButton};\n","import Button, {ButtonVariant} from '@propellerads/button';\nimport {useEffect, useState} from 'react';\nimport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n OPTIONAL_DOCUMENT_PARTS,\n PDF_MIME_TYPE,\n} from './constants';\nimport {DocumentType, KYCDocument, PartType, KYCFile} from './document.types';\nimport KYCFormItem from './KYCFormItem';\nimport KYCStatusScreen from './KYCStatusScreen';\nimport {StyledKYCForm, StyledKYCFormButton, StyledKYCFormDocuments, StyledKYCFormTitle} from './style';\nimport {KYCFormProps} from './types';\n\nconst KYCForm = (props: KYCFormProps) => {\n const {\n elementId,\n title,\n uploadButtonLabel,\n uploaderLabels,\n documentsLabels,\n documents,\n errors,\n isLoading,\n validator,\n onUploadClick,\n } = props;\n\n const [userDocuments, setUserDocuments] = useState<KYCDocument[]>(documents);\n const [isButtonDisabled, setButtonDisabled] = useState<boolean>(true);\n\n useEffect(() => {\n setUserDocuments(documents);\n }, [documents]);\n\n useEffect(() => {\n const isValid: boolean = validator(userDocuments);\n setButtonDisabled(!isValid);\n }, [userDocuments, validator]);\n\n const onDocumentChange = (index: number, document: KYCDocument) => {\n const newDocuments: KYCDocument[] = [...userDocuments];\n newDocuments.splice(index, 1, document);\n\n setUserDocuments(newDocuments);\n };\n\n return (\n <StyledKYCForm id={elementId}>\n {title && <StyledKYCFormTitle>{title}</StyledKYCFormTitle>}\n\n <StyledKYCFormDocuments>\n {userDocuments.map((document, index) => {\n const key = `kyc-form_item_${document.type}_${index}`;\n\n return (\n <KYCFormItem\n index={index}\n type={document.type}\n parts={document.parts}\n documentLabels={documentsLabels[document.type]}\n uploaderLabels={uploaderLabels}\n errors={errors}\n elementId={`${elementId}_item_${document.type}`}\n key={key}\n onDocumentChange={(doc) => onDocumentChange(index, doc)}\n />\n );\n })}\n </StyledKYCFormDocuments>\n <StyledKYCFormButton>\n <Button\n id={`${elementId}_button`}\n variant={ButtonVariant.Primary}\n isDisabled={isButtonDisabled}\n isLoading={isLoading || false}\n onClick={() => onUploadClick(userDocuments)}\n >\n {uploadButtonLabel}\n </Button>\n </StyledKYCFormButton>\n </StyledKYCForm>\n );\n};\n\nKYCForm.SuccessScreen = KYCStatusScreen.KYCSuccessScreen;\nKYCForm.FailScreen = KYCStatusScreen.KYCFailScreen;\n\nexport default KYCForm;\n\nexport {\n ACCEPT_FORMATS,\n AVAILABLE_EXTRA_PARTS_DOCUMENTS,\n DocumentType,\n MAX_EXTRA_PARTS_COUNT,\n MAX_FILE_SIZE,\n OPTIONAL_DOCUMENT_PARTS,\n PartType,\n PDF_MIME_TYPE,\n};\nexport type {KYCDocument, KYCFile};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/kyc-form",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -26,10 +26,9 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@propellerads/button": "^11.0.0",
|
|
28
28
|
"@propellerads/icon": "^8.0.0",
|
|
29
|
-
"@propellerads/image-uploader": "^4.0.
|
|
30
|
-
"@propellerads/
|
|
31
|
-
"@propellerads/
|
|
32
|
-
"@propellerads/textarea": "^5.0.3"
|
|
29
|
+
"@propellerads/image-uploader": "^4.0.1",
|
|
30
|
+
"@propellerads/input": "^0.1.0",
|
|
31
|
+
"@propellerads/stylevariables": "^2.0.2"
|
|
33
32
|
},
|
|
34
33
|
"peerDependencies": {
|
|
35
34
|
"react": "^18.0.0 || ^19.0.0",
|