@opexa/portal-components 0.0.569 → 0.0.571
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/components/KYC/KYCReminder.lazy.js +11 -9
- package/dist/components/PortalProvider/CXDTokenObserver.js +11 -11
- package/dist/components/Quests/JourneyQuest.js +2 -2
- package/dist/handlers/index.d.ts +7 -7
- package/dist/styles/theme.css +10 -1
- package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Checkbox/checkbox.recipe.js +3 -3
- package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Combobox/Combobox.d.ts +42 -42
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +33 -33
- package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Progress/Progress.d.ts +27 -27
- package/dist/ui/Progress/progress.recipe.d.ts +3 -3
- package/dist/ui/Progress/progress.recipe.js +2 -2
- package/dist/ui/Select/Select.d.ts +45 -45
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/package.json +1 -1
- package/dist/components/AccountInfo/GoogleDisconnect.d.ts +0 -7
- package/dist/components/AccountInfo/GoogleDisconnect.js +0 -11
- package/dist/components/DigitainLauncher/Loading.d.ts +0 -1
- package/dist/components/DigitainLauncher/Loading.js +0 -5
- package/dist/components/KYC/BasicInformation.d.ts +0 -1
- package/dist/components/KYC/BasicInformation.js +0 -101
- package/dist/components/KYC/IdentityVerification.d.ts +0 -1
- package/dist/components/KYC/IdentityVerification.js +0 -120
- package/dist/components/KYC/Indicator.d.ts +0 -1
- package/dist/components/KYC/Indicator.js +0 -8
- package/dist/components/KYC/KYC.lazy.d.ts +0 -6
- package/dist/components/KYC/KYC.lazy.js +0 -45
- package/dist/components/KYC/KYCContext.d.ts +0 -6
- package/dist/components/KYC/KYCContext.js +0 -2
- package/dist/components/KYC/PersonalInformation.d.ts +0 -1
- package/dist/components/KYC/PersonalInformation.js +0 -122
- package/dist/components/KYC/useKYC.d.ts +0 -25
- package/dist/components/KYC/useKYC.js +0 -38
- package/dist/components/SessionWatcher/SessionWatcher.d.ts +0 -1
- package/dist/components/SessionWatcher/SessionWatcher.js +0 -20
- package/dist/components/SessionWatcher/index.d.ts +0 -1
- package/dist/components/SessionWatcher/index.js +0 -1
- package/dist/icons/LinkBrokenIcon.d.ts +0 -2
- package/dist/icons/LinkBrokenIcon.js +0 -4
- package/dist/images/responsible-gaming-yellow.png +0 -0
package/dist/ui/Table/Table.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
|
|
|
12
12
|
body: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
}, Record<"body" | "
|
|
15
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
16
16
|
size: {
|
|
17
17
|
md: {
|
|
18
18
|
root: string;
|
|
@@ -26,7 +26,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
|
|
|
26
26
|
body: string;
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
-
}, Record<"body" | "
|
|
29
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
30
30
|
size: {
|
|
31
31
|
md: {
|
|
32
32
|
root: string;
|
|
@@ -40,7 +40,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
|
|
|
40
40
|
body: string;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
}, Record<"body" | "
|
|
43
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
44
44
|
export declare const Header: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
45
45
|
size: {
|
|
46
46
|
md: {
|
|
@@ -55,7 +55,7 @@ export declare const Header: import("react").ComponentType<import("@ark-ui/react
|
|
|
55
55
|
body: string;
|
|
56
56
|
};
|
|
57
57
|
};
|
|
58
|
-
}, Record<"body" | "
|
|
58
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
59
59
|
size: {
|
|
60
60
|
md: {
|
|
61
61
|
root: string;
|
|
@@ -69,7 +69,7 @@ export declare const Header: import("react").ComponentType<import("@ark-ui/react
|
|
|
69
69
|
body: string;
|
|
70
70
|
};
|
|
71
71
|
};
|
|
72
|
-
}, Record<"body" | "
|
|
72
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
73
73
|
size: {
|
|
74
74
|
md: {
|
|
75
75
|
root: string;
|
|
@@ -83,7 +83,7 @@ export declare const Header: import("react").ComponentType<import("@ark-ui/react
|
|
|
83
83
|
body: string;
|
|
84
84
|
};
|
|
85
85
|
};
|
|
86
|
-
}, Record<"body" | "
|
|
86
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
87
87
|
export declare const Body: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
88
88
|
size: {
|
|
89
89
|
md: {
|
|
@@ -98,7 +98,7 @@ export declare const Body: import("react").ComponentType<import("@ark-ui/react")
|
|
|
98
98
|
body: string;
|
|
99
99
|
};
|
|
100
100
|
};
|
|
101
|
-
}, Record<"body" | "
|
|
101
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
102
102
|
size: {
|
|
103
103
|
md: {
|
|
104
104
|
root: string;
|
|
@@ -112,7 +112,7 @@ export declare const Body: import("react").ComponentType<import("@ark-ui/react")
|
|
|
112
112
|
body: string;
|
|
113
113
|
};
|
|
114
114
|
};
|
|
115
|
-
}, Record<"body" | "
|
|
115
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
116
116
|
size: {
|
|
117
117
|
md: {
|
|
118
118
|
root: string;
|
|
@@ -126,7 +126,7 @@ export declare const Body: import("react").ComponentType<import("@ark-ui/react")
|
|
|
126
126
|
body: string;
|
|
127
127
|
};
|
|
128
128
|
};
|
|
129
|
-
}, Record<"body" | "
|
|
129
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
130
130
|
export declare const Footer: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
131
131
|
size: {
|
|
132
132
|
md: {
|
|
@@ -141,7 +141,7 @@ export declare const Footer: import("react").ComponentType<import("@ark-ui/react
|
|
|
141
141
|
body: string;
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
|
-
}, Record<"body" | "
|
|
144
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
145
145
|
size: {
|
|
146
146
|
md: {
|
|
147
147
|
root: string;
|
|
@@ -155,7 +155,7 @@ export declare const Footer: import("react").ComponentType<import("@ark-ui/react
|
|
|
155
155
|
body: string;
|
|
156
156
|
};
|
|
157
157
|
};
|
|
158
|
-
}, Record<"body" | "
|
|
158
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
159
159
|
size: {
|
|
160
160
|
md: {
|
|
161
161
|
root: string;
|
|
@@ -169,7 +169,7 @@ export declare const Footer: import("react").ComponentType<import("@ark-ui/react
|
|
|
169
169
|
body: string;
|
|
170
170
|
};
|
|
171
171
|
};
|
|
172
|
-
}, Record<"body" | "
|
|
172
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
173
173
|
export declare const Row: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
174
174
|
size: {
|
|
175
175
|
md: {
|
|
@@ -184,7 +184,7 @@ export declare const Row: import("react").ComponentType<import("@ark-ui/react").
|
|
|
184
184
|
body: string;
|
|
185
185
|
};
|
|
186
186
|
};
|
|
187
|
-
}, Record<"body" | "
|
|
187
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
188
188
|
size: {
|
|
189
189
|
md: {
|
|
190
190
|
root: string;
|
|
@@ -198,7 +198,7 @@ export declare const Row: import("react").ComponentType<import("@ark-ui/react").
|
|
|
198
198
|
body: string;
|
|
199
199
|
};
|
|
200
200
|
};
|
|
201
|
-
}, Record<"body" | "
|
|
201
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
202
202
|
size: {
|
|
203
203
|
md: {
|
|
204
204
|
root: string;
|
|
@@ -212,7 +212,7 @@ export declare const Row: import("react").ComponentType<import("@ark-ui/react").
|
|
|
212
212
|
body: string;
|
|
213
213
|
};
|
|
214
214
|
};
|
|
215
|
-
}, Record<"body" | "
|
|
215
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
216
216
|
export declare const Heading: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
217
217
|
size: {
|
|
218
218
|
md: {
|
|
@@ -227,7 +227,7 @@ export declare const Heading: import("react").ComponentType<import("@ark-ui/reac
|
|
|
227
227
|
body: string;
|
|
228
228
|
};
|
|
229
229
|
};
|
|
230
|
-
}, Record<"body" | "
|
|
230
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
231
231
|
size: {
|
|
232
232
|
md: {
|
|
233
233
|
root: string;
|
|
@@ -241,7 +241,7 @@ export declare const Heading: import("react").ComponentType<import("@ark-ui/reac
|
|
|
241
241
|
body: string;
|
|
242
242
|
};
|
|
243
243
|
};
|
|
244
|
-
}, Record<"body" | "
|
|
244
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
245
245
|
size: {
|
|
246
246
|
md: {
|
|
247
247
|
root: string;
|
|
@@ -255,7 +255,7 @@ export declare const Heading: import("react").ComponentType<import("@ark-ui/reac
|
|
|
255
255
|
body: string;
|
|
256
256
|
};
|
|
257
257
|
};
|
|
258
|
-
}, Record<"body" | "
|
|
258
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
259
259
|
export declare const Cell: import("react").ComponentType<import("@ark-ui/react").Assign<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & import("@ark-ui/react").PolymorphicProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
|
|
260
260
|
size: {
|
|
261
261
|
md: {
|
|
@@ -270,7 +270,7 @@ export declare const Cell: import("react").ComponentType<import("@ark-ui/react")
|
|
|
270
270
|
body: string;
|
|
271
271
|
};
|
|
272
272
|
};
|
|
273
|
-
}, Record<"body" | "
|
|
273
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
274
274
|
size: {
|
|
275
275
|
md: {
|
|
276
276
|
root: string;
|
|
@@ -284,7 +284,7 @@ export declare const Cell: import("react").ComponentType<import("@ark-ui/react")
|
|
|
284
284
|
body: string;
|
|
285
285
|
};
|
|
286
286
|
};
|
|
287
|
-
}, Record<"body" | "
|
|
287
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
288
288
|
size: {
|
|
289
289
|
md: {
|
|
290
290
|
root: string;
|
|
@@ -298,4 +298,4 @@ export declare const Cell: import("react").ComponentType<import("@ark-ui/react")
|
|
|
298
298
|
body: string;
|
|
299
299
|
};
|
|
300
300
|
};
|
|
301
|
-
}, Record<"body" | "
|
|
301
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const tableAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"body" | "
|
|
1
|
+
export declare const tableAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading">;
|
|
@@ -12,7 +12,7 @@ export declare const tableRecipe: import("tailwind-variants").TVReturnType<{
|
|
|
12
12
|
body: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
}, Record<"body" | "
|
|
15
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
|
|
16
16
|
size: {
|
|
17
17
|
md: {
|
|
18
18
|
root: string;
|
|
@@ -26,7 +26,7 @@ export declare const tableRecipe: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
body: string;
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
-
}, Record<"body" | "
|
|
29
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
|
|
30
30
|
size: {
|
|
31
31
|
md: {
|
|
32
32
|
root: string;
|
|
@@ -40,4 +40,4 @@ export declare const tableRecipe: import("tailwind-variants").TVReturnType<{
|
|
|
40
40
|
body: string;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
}, Record<"body" | "
|
|
43
|
+
}, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>;
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
|
|
2
|
-
interface GoogleDisconnectProps {
|
|
3
|
-
onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
|
|
4
|
-
children?: (ctx: UseDisclosureReturn) => React.ReactNode;
|
|
5
|
-
}
|
|
6
|
-
export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
|
|
4
|
-
import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
|
|
5
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
6
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
7
|
-
import { Portal } from '../../ui/Portal/index.js';
|
|
8
|
-
export function GoogleDisconnect(props) {
|
|
9
|
-
const disclosure = useDisclosure();
|
|
10
|
-
return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Loading(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
export function Loading() {
|
|
4
|
-
return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
|
|
5
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function BasicInformation(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { zodResolver } from '@hookform/resolvers/zod';
|
|
3
|
-
import { differenceInYears, format, isSameDay, isValid, parse } from 'date-fns';
|
|
4
|
-
import { isNil, omitBy, size } from 'lodash-es';
|
|
5
|
-
import { useEffect } from 'react';
|
|
6
|
-
import { useForm } from 'react-hook-form';
|
|
7
|
-
import invariant from 'tiny-invariant';
|
|
8
|
-
import { z } from 'zod';
|
|
9
|
-
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
10
|
-
import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
|
|
11
|
-
import { toaster } from '../../client/utils/toaster.js';
|
|
12
|
-
import { Button } from '../../ui/Button/index.js';
|
|
13
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
14
|
-
import { Field } from '../../ui/Field/index.js';
|
|
15
|
-
import { useKYCContext } from './KYCContext.js';
|
|
16
|
-
const definition = z.object({
|
|
17
|
-
realName: z
|
|
18
|
-
.string()
|
|
19
|
-
.min(3, 'Name must be 3 or more characters')
|
|
20
|
-
.max(50, 'Name must not be more than 50 characters')
|
|
21
|
-
.regex(/^[a-z0-9 ]+$/gi, 'Name must not contain special characters')
|
|
22
|
-
.trim(),
|
|
23
|
-
birthDay: z
|
|
24
|
-
.string()
|
|
25
|
-
.min(1, 'Date of birth is required')
|
|
26
|
-
.superRefine((value, ctx) => {
|
|
27
|
-
const dob = parse(value, 'yyyy-MM-dd', new Date());
|
|
28
|
-
if (!isValid(dob)) {
|
|
29
|
-
return ctx.addIssue({
|
|
30
|
-
code: z.ZodIssueCode.invalid_date,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
const now = new Date();
|
|
34
|
-
const age = differenceInYears(now, dob);
|
|
35
|
-
if (age < 21) {
|
|
36
|
-
return ctx.addIssue({
|
|
37
|
-
code: z.ZodIssueCode.custom,
|
|
38
|
-
message: 'You must be at least 21 years old',
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}),
|
|
42
|
-
branchCode: z.string().min(4).max(10).optional().or(z.literal('')),
|
|
43
|
-
});
|
|
44
|
-
export function BasicInformation() {
|
|
45
|
-
const kyc = useKYCContext();
|
|
46
|
-
const form = useForm({
|
|
47
|
-
resolver: zodResolver(definition),
|
|
48
|
-
mode: 'all',
|
|
49
|
-
defaultValues: {
|
|
50
|
-
birthDay: '',
|
|
51
|
-
branchCode: '',
|
|
52
|
-
realName: '',
|
|
53
|
-
},
|
|
54
|
-
});
|
|
55
|
-
const accountQuery = useAccountQuery();
|
|
56
|
-
const account = accountQuery.data;
|
|
57
|
-
const stepCompleted = account != null && account.realName != null && account.birthDay != null;
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (stepCompleted)
|
|
60
|
-
kyc.setStep(2);
|
|
61
|
-
}, [stepCompleted, kyc]);
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
if (account) {
|
|
64
|
-
form.reset({
|
|
65
|
-
realName: account.realName ?? '',
|
|
66
|
-
birthDay: account.birthDay
|
|
67
|
-
? format(account.birthDay, 'yyyy-MM-dd')
|
|
68
|
-
: '',
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
}, [account, form]);
|
|
72
|
-
const updateAccountMutation = useUpdateAccountMutation({
|
|
73
|
-
onError(error) {
|
|
74
|
-
toaster.error({
|
|
75
|
-
title: 'Error',
|
|
76
|
-
description: error.message,
|
|
77
|
-
});
|
|
78
|
-
},
|
|
79
|
-
onSuccess() {
|
|
80
|
-
kyc.setStep(2);
|
|
81
|
-
toaster.success({
|
|
82
|
-
title: 'Success',
|
|
83
|
-
description: 'Basic information has been set successfully.',
|
|
84
|
-
});
|
|
85
|
-
},
|
|
86
|
-
});
|
|
87
|
-
return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Basic Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
|
|
88
|
-
invariant(account);
|
|
89
|
-
const input = omitBy({
|
|
90
|
-
realName: account.realName === data.realName ? undefined : data.realName,
|
|
91
|
-
birthDay: account.birthDay && isSameDay(data.birthDay, account.birthDay)
|
|
92
|
-
? undefined
|
|
93
|
-
: format(data.birthDay, 'yyyy-MM-dd'),
|
|
94
|
-
}, isNil);
|
|
95
|
-
if (size(input) === 0)
|
|
96
|
-
return kyc.setStep(2);
|
|
97
|
-
updateAccountMutation.mutate(input);
|
|
98
|
-
}), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: accountQuery.isLoading ||
|
|
99
|
-
updateAccountMutation.isPending ||
|
|
100
|
-
stepCompleted, children: "Continue" })] })] }));
|
|
101
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function IdentityVerification(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { zodResolver } from '@hookform/resolvers/zod';
|
|
4
|
-
import { useEffect } from 'react';
|
|
5
|
-
import { Controller, useForm } from 'react-hook-form';
|
|
6
|
-
import { z } from 'zod';
|
|
7
|
-
import { useShallow } from 'zustand/shallow';
|
|
8
|
-
import { useCreateMemberVerificationMutation } from '../../client/hooks/useCreateMemberVerificationMutation.js';
|
|
9
|
-
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
10
|
-
import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
|
|
11
|
-
import { useUpdateMemberVerificationMutation } from '../../client/hooks/useUpdateMemberVerificationMutation.js';
|
|
12
|
-
import { toaster } from '../../client/utils/toaster.js';
|
|
13
|
-
import { Button } from '../../ui/Button/index.js';
|
|
14
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
15
|
-
import { Field } from '../../ui/Field/index.js';
|
|
16
|
-
import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
17
|
-
import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
|
|
18
|
-
import { IdFrontImageField } from '../shared/IdFrontImageField/index.js';
|
|
19
|
-
import { SelfieImageField } from '../shared/SelfieImageField/index.js';
|
|
20
|
-
import { useKYCContext } from './KYCContext.js';
|
|
21
|
-
const formSchema = z.object({
|
|
22
|
-
selfieImage: z.string().min(1, 'Selfie image is required.'),
|
|
23
|
-
idFrontImage: z.string().min(1, 'Front image of ID is required.'),
|
|
24
|
-
});
|
|
25
|
-
export function IdentityVerification() {
|
|
26
|
-
const kyc = useKYCContext();
|
|
27
|
-
const { mutate: createMemberVerification, isPending: createPending } = useCreateMemberVerificationMutation({
|
|
28
|
-
onSuccess: () => {
|
|
29
|
-
toaster.success({
|
|
30
|
-
title: 'ID Front Image & Selfie Image uploaded successfully',
|
|
31
|
-
});
|
|
32
|
-
},
|
|
33
|
-
onError: (error) => {
|
|
34
|
-
toaster.error({
|
|
35
|
-
title: 'Failed to upload ID Front Image & Selfie Image',
|
|
36
|
-
description: error.message,
|
|
37
|
-
});
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
|
-
const { mutate: updateMemberVerification, isPending: updatePending } = useUpdateMemberVerificationMutation({
|
|
41
|
-
onSuccess: () => {
|
|
42
|
-
const queryClient = getQueryClient();
|
|
43
|
-
toaster.success({
|
|
44
|
-
title: 'ID Front Image & Selfie Image updated successfully',
|
|
45
|
-
});
|
|
46
|
-
queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
|
|
47
|
-
if (!prev)
|
|
48
|
-
return prev;
|
|
49
|
-
return {
|
|
50
|
-
...prev,
|
|
51
|
-
status: 'CREATED',
|
|
52
|
-
};
|
|
53
|
-
});
|
|
54
|
-
},
|
|
55
|
-
onError: (error) => {
|
|
56
|
-
toaster.error({
|
|
57
|
-
title: 'Failed to upload ID Front Image & Selfie Image',
|
|
58
|
-
description: error.message,
|
|
59
|
-
});
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
const memberVerification = useMemberVerificationQuery();
|
|
63
|
-
const memberId = memberVerification.data?.id;
|
|
64
|
-
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
65
|
-
kyc: ctx.kyc,
|
|
66
|
-
})));
|
|
67
|
-
const form = useForm({
|
|
68
|
-
resolver: zodResolver(formSchema),
|
|
69
|
-
defaultValues: {
|
|
70
|
-
idFrontImage: '',
|
|
71
|
-
selfieImage: '',
|
|
72
|
-
},
|
|
73
|
-
});
|
|
74
|
-
function onSubmit(values) {
|
|
75
|
-
if (!memberId) {
|
|
76
|
-
createMemberVerification({
|
|
77
|
-
selfieImage: values.selfieImage,
|
|
78
|
-
idFrontImage: values.idFrontImage,
|
|
79
|
-
address: '',
|
|
80
|
-
nationality: '',
|
|
81
|
-
natureOfWork: '',
|
|
82
|
-
permanentAddress: '',
|
|
83
|
-
placeOfBirth: '',
|
|
84
|
-
sourceOfIncome: '',
|
|
85
|
-
});
|
|
86
|
-
kyc.setStep(3);
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
updateMemberVerification({
|
|
90
|
-
id: memberId,
|
|
91
|
-
data: {
|
|
92
|
-
selfieImage: values.selfieImage,
|
|
93
|
-
idFrontImage: values.idFrontImage,
|
|
94
|
-
},
|
|
95
|
-
});
|
|
96
|
-
kyc.setStep(3);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
useEffect(() => {
|
|
100
|
-
if (kyc.selfieImageId)
|
|
101
|
-
form.setValue('selfieImage', kyc.selfieImageId);
|
|
102
|
-
if (kyc.idFrontImageId)
|
|
103
|
-
form.setValue('idFrontImage', kyc.idFrontImageId);
|
|
104
|
-
}, [form, kyc.idFrontImageId, kyc.selfieImageId]);
|
|
105
|
-
return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "mt-7 rounded-xl border border-border-primary bg-bg-primary p-lg text-text-placeholder text-xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: form.handleSubmit(onSubmit), children: [_jsx(Controller, { control: form.control, name: "idFrontImage", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsx(Field.Label, { children: "Front of your ID" }), _jsx(IdFrontImageField, { value: o.field.value, onChange: o.field.onChange, onError: (error) => {
|
|
106
|
-
form.setValue('idFrontImage', '');
|
|
107
|
-
form.setError('idFrontImage', {
|
|
108
|
-
type: 'validate',
|
|
109
|
-
message: error.message,
|
|
110
|
-
});
|
|
111
|
-
} }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Controller, { control: form.control, name: "selfieImage", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-3", children: [_jsx(Field.Label, { children: "Selfie holding your ID" }), _jsx(SelfieImageField, { value: o.field.value, onChange: o.field.onChange, onError: (error) => {
|
|
112
|
-
form.setValue('selfieImage', '');
|
|
113
|
-
form.setError('selfieImage', {
|
|
114
|
-
type: 'validate',
|
|
115
|
-
message: error.message,
|
|
116
|
-
});
|
|
117
|
-
} }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-6", disabled: createPending || updatePending, children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", type: "button", onClick: () => {
|
|
118
|
-
globalStore.kyc.setOpen(false);
|
|
119
|
-
}, children: "Skip for now" })] })] }));
|
|
120
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Indicator(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { noop } from 'lodash-es';
|
|
3
|
-
import { Progress } from '../../ui/Progress/index.js';
|
|
4
|
-
import { useKYCContext } from './KYCContext.js';
|
|
5
|
-
export function Indicator() {
|
|
6
|
-
const kyc = useKYCContext();
|
|
7
|
-
return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 1 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 2 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step === 3 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
|
|
8
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ImageProps } from 'next/image';
|
|
2
|
-
import { type KYCReminderProps } from './KYCReminder.lazy';
|
|
3
|
-
export interface KYCProps extends KYCReminderProps {
|
|
4
|
-
logo: ImageProps['src'];
|
|
5
|
-
}
|
|
6
|
-
export declare function KYC(props: KYCProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import Image from 'next/image';
|
|
3
|
-
import { useEffect } from 'react';
|
|
4
|
-
import { useShallow } from 'zustand/shallow';
|
|
5
|
-
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
6
|
-
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
7
|
-
import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
|
|
8
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
9
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
10
|
-
import { Portal } from '../../ui/Portal/index.js';
|
|
11
|
-
import { BasicInformation } from './BasicInformation.js';
|
|
12
|
-
import { IdentityVerification } from './IdentityVerification.js';
|
|
13
|
-
import { Indicator } from './Indicator.js';
|
|
14
|
-
import { KYCContext } from './KYCContext.js';
|
|
15
|
-
import { KYCReminder } from './KYCReminder.lazy.js';
|
|
16
|
-
import { PersonalInformation } from './PersonalInformation.js';
|
|
17
|
-
import { useKYC } from './useKYC.js';
|
|
18
|
-
export function KYC(props) {
|
|
19
|
-
const globalStore = useGlobalStore(useShallow((ctx) => ({ kyc: ctx.kyc })));
|
|
20
|
-
const kyc = useKYC();
|
|
21
|
-
const { data: account } = useAccountQuery();
|
|
22
|
-
const { data: verification } = useMemberVerificationQuery();
|
|
23
|
-
const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
|
|
24
|
-
const isUploadCompleted = Boolean(verification?.idFrontImage) && Boolean(verification?.selfieImage);
|
|
25
|
-
const isVerified = Boolean(verification?.status === 'VERIFIED') ||
|
|
26
|
-
Boolean(verification?.status === 'PENDING') ||
|
|
27
|
-
Boolean(verification?.status === 'APPROVED');
|
|
28
|
-
const isRejected = Boolean(verification?.status === 'REJECTED');
|
|
29
|
-
const hasMissingData = !isBasicInfoCompleted || !isUploadCompleted || !isVerified;
|
|
30
|
-
const steps = !isBasicInfoCompleted
|
|
31
|
-
? 1
|
|
32
|
-
: !isUploadCompleted
|
|
33
|
-
? 2
|
|
34
|
-
: isRejected
|
|
35
|
-
? 2
|
|
36
|
-
: 3;
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
if (steps) {
|
|
39
|
-
kyc.setStep(steps);
|
|
40
|
-
}
|
|
41
|
-
}, [steps, kyc]);
|
|
42
|
-
return (_jsxs(_Fragment, { children: [_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open && hasMissingData, onOpenChange: (details) => {
|
|
43
|
-
globalStore.kyc.setOpen(details.open);
|
|
44
|
-
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: "mx-auto min-h-full w-full overflow-y-auto bg-bg-primary-alt lg:min-h-auto lg:w-fit", children: _jsxs("div", { className: "flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
|
|
45
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function PersonalInformation(): import("react/jsx-runtime").JSX.Element;
|