@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.
Files changed (54) hide show
  1. package/dist/components/KYC/KYCReminder.lazy.js +11 -9
  2. package/dist/components/PortalProvider/CXDTokenObserver.js +11 -11
  3. package/dist/components/Quests/JourneyQuest.js +2 -2
  4. package/dist/handlers/index.d.ts +7 -7
  5. package/dist/styles/theme.css +10 -1
  6. package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
  7. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
  8. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  9. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  10. package/dist/ui/Checkbox/checkbox.recipe.js +3 -3
  11. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  12. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  13. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  14. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  15. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  16. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  17. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  18. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  19. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  20. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  21. package/dist/ui/Progress/Progress.d.ts +27 -27
  22. package/dist/ui/Progress/progress.recipe.d.ts +3 -3
  23. package/dist/ui/Progress/progress.recipe.js +2 -2
  24. package/dist/ui/Select/Select.d.ts +45 -45
  25. package/dist/ui/Select/select.recipe.d.ts +3 -3
  26. package/dist/ui/Table/Table.d.ts +21 -21
  27. package/dist/ui/Table/table.anatomy.d.ts +1 -1
  28. package/dist/ui/Table/table.recipe.d.ts +3 -3
  29. package/package.json +1 -1
  30. package/dist/components/AccountInfo/GoogleDisconnect.d.ts +0 -7
  31. package/dist/components/AccountInfo/GoogleDisconnect.js +0 -11
  32. package/dist/components/DigitainLauncher/Loading.d.ts +0 -1
  33. package/dist/components/DigitainLauncher/Loading.js +0 -5
  34. package/dist/components/KYC/BasicInformation.d.ts +0 -1
  35. package/dist/components/KYC/BasicInformation.js +0 -101
  36. package/dist/components/KYC/IdentityVerification.d.ts +0 -1
  37. package/dist/components/KYC/IdentityVerification.js +0 -120
  38. package/dist/components/KYC/Indicator.d.ts +0 -1
  39. package/dist/components/KYC/Indicator.js +0 -8
  40. package/dist/components/KYC/KYC.lazy.d.ts +0 -6
  41. package/dist/components/KYC/KYC.lazy.js +0 -45
  42. package/dist/components/KYC/KYCContext.d.ts +0 -6
  43. package/dist/components/KYC/KYCContext.js +0 -2
  44. package/dist/components/KYC/PersonalInformation.d.ts +0 -1
  45. package/dist/components/KYC/PersonalInformation.js +0 -122
  46. package/dist/components/KYC/useKYC.d.ts +0 -25
  47. package/dist/components/KYC/useKYC.js +0 -38
  48. package/dist/components/SessionWatcher/SessionWatcher.d.ts +0 -1
  49. package/dist/components/SessionWatcher/SessionWatcher.js +0 -20
  50. package/dist/components/SessionWatcher/index.d.ts +0 -1
  51. package/dist/components/SessionWatcher/index.js +0 -1
  52. package/dist/icons/LinkBrokenIcon.d.ts +0 -2
  53. package/dist/icons/LinkBrokenIcon.js +0 -4
  54. package/dist/images/responsible-gaming-yellow.png +0 -0
@@ -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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading">;
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, {
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, import("tailwind-variants").TVReturnType<{
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" | "footer" | "header" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>;
43
+ }, Record<"body" | "header" | "footer" | "root" | "row" | "cell" | "heading", string | string[]>, undefined, unknown, unknown, undefined>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.569",
3
+ "version": "0.0.571",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",
@@ -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,6 +0,0 @@
1
- import type { UseKYCReturn } from './useKYC';
2
- export declare const KYCContext: (props: {
3
- value: UseKYCReturn;
4
- } & {
5
- children?: import("react").ReactNode | undefined;
6
- }) => React.ReactNode, useKYCContext: () => UseKYCReturn;
@@ -1,2 +0,0 @@
1
- import { createContext } from '../../client/utils/createContext.js';
2
- export const [KYCContext, useKYCContext] = createContext();
@@ -1 +0,0 @@
1
- export declare function PersonalInformation(): import("react/jsx-runtime").JSX.Element;