@opexa/portal-components 0.0.789 → 0.0.790

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 (83) hide show
  1. package/dist/components/Messages/MessagesPopup.js +3 -7
  2. package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +1 -0
  3. package/dist/components/PortalProvider/AndroidOnlyComponents.js +12 -0
  4. package/dist/ui/AlertDialog/AlertDialog.d.ts +121 -121
  5. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +11 -11
  6. package/dist/ui/Badge/Badge.d.ts +12 -12
  7. package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
  8. package/dist/ui/Badge/badge.recipe.d.ts +3 -3
  9. package/dist/ui/Carousel/Carousel.d.ts +72 -72
  10. package/dist/ui/Carousel/carousel.recipe.d.ts +8 -8
  11. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  12. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  13. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  14. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  15. package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
  16. package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
  17. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  18. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  19. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  20. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  21. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  22. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  23. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  24. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  25. package/dist/ui/Field/Field.d.ts +21 -21
  26. package/dist/ui/Field/field.recipe.d.ts +3 -3
  27. package/dist/ui/Menu/Menu.d.ts +90 -90
  28. package/dist/ui/Menu/menu.recipe.d.ts +5 -5
  29. package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
  30. package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
  31. package/dist/ui/PasswordInput/PasswordInput.d.ts +18 -18
  32. package/dist/ui/PasswordInput/passwordInput.recipe.d.ts +3 -3
  33. package/dist/ui/PinInput/PinInput.d.ts +12 -12
  34. package/dist/ui/PinInput/pinInput.recipe.d.ts +3 -3
  35. package/dist/ui/Progress/Progress.d.ts +27 -27
  36. package/dist/ui/Progress/progress.recipe.d.ts +3 -3
  37. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  38. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  39. package/dist/ui/SegmentGroup/SegmentGroup.d.ts +18 -18
  40. package/dist/ui/SegmentGroup/segmentGroup.recipe.d.ts +3 -3
  41. package/dist/ui/Select/Select.d.ts +45 -45
  42. package/dist/ui/Select/select.recipe.d.ts +3 -3
  43. package/dist/ui/Table/Table.d.ts +21 -21
  44. package/dist/ui/Table/table.anatomy.d.ts +1 -1
  45. package/dist/ui/Table/table.recipe.d.ts +3 -3
  46. package/dist/ui/Tabs/Tabs.d.ts +15 -15
  47. package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
  48. package/package.json +1 -1
  49. package/dist/components/AccountInfo/GoogleDisconnect.d.ts +0 -7
  50. package/dist/components/AccountInfo/GoogleDisconnect.js +0 -11
  51. package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +0 -11
  52. package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +0 -55
  53. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +0 -1
  54. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +0 -191
  55. package/dist/components/DigitainLauncher/Loading.d.ts +0 -1
  56. package/dist/components/DigitainLauncher/Loading.js +0 -5
  57. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +0 -184
  58. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +0 -184
  59. package/dist/components/KYC/BasicInformation.d.ts +0 -1
  60. package/dist/components/KYC/BasicInformation.js +0 -101
  61. package/dist/components/KYC/IdentityVerification.d.ts +0 -1
  62. package/dist/components/KYC/IdentityVerification.js +0 -120
  63. package/dist/components/KYC/Indicator.d.ts +0 -1
  64. package/dist/components/KYC/Indicator.js +0 -8
  65. package/dist/components/KYC/KYC.lazy.d.ts +0 -6
  66. package/dist/components/KYC/KYC.lazy.js +0 -45
  67. package/dist/components/KYC/KYCContext.d.ts +0 -6
  68. package/dist/components/KYC/KYCContext.js +0 -2
  69. package/dist/components/KYC/PersonalInformation.d.ts +0 -1
  70. package/dist/components/KYC/PersonalInformation.js +0 -122
  71. package/dist/components/KYC/useKYC.d.ts +0 -25
  72. package/dist/components/KYC/useKYC.js +0 -38
  73. package/dist/components/PortalProvider/CXDTokenObserver.d.ts +0 -1
  74. package/dist/components/PortalProvider/CXDTokenObserver.js +0 -30
  75. package/dist/components/PortalProvider/LinkGoogleAccountObserver.d.ts +0 -1
  76. package/dist/components/PortalProvider/LinkGoogleAccountObserver.js +0 -29
  77. package/dist/components/SessionWatcher/SessionWatcher.d.ts +0 -1
  78. package/dist/components/SessionWatcher/SessionWatcher.js +0 -20
  79. package/dist/components/SessionWatcher/index.d.ts +0 -1
  80. package/dist/components/SessionWatcher/index.js +0 -1
  81. package/dist/icons/LinkBrokenIcon.d.ts +0 -2
  82. package/dist/icons/LinkBrokenIcon.js +0 -4
  83. package/dist/images/responsible-gaming-yellow.png +0 -0
@@ -1,191 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { zodResolver } from '@hookform/resolvers/zod';
3
- import Link from 'next/link';
4
- import { useEffect, useState } from 'react';
5
- import { Controller, useForm } from 'react-hook-form';
6
- import invariant from 'tiny-invariant';
7
- import { z } from 'zod';
8
- import { useShallow } from 'zustand/shallow';
9
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
- import { useCreateGCashWebpayDepositMutation } from '../../../../client/hooks/useCreateGCashWebpayDepositMutation.js';
11
- import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
12
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
13
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
14
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
15
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
16
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
17
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
18
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
19
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
20
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
21
- import { XIcon } from '../../../../icons/XIcon.js';
22
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
23
- import { Button } from '../../../../ui/Button/index.js';
24
- import { Field } from '../../../../ui/Field/index.js';
25
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
26
- import { Portal } from '../../../../ui/Portal/index.js';
27
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
28
- import { AmountChoices } from '../../AmountChoices.js';
29
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
30
- import { AvailablePromos } from '../AvailablePromos.js';
31
- export function GCashWebpayDeposit() {
32
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
33
- const disclosure = useDisclosure();
34
- const globalStore = useGlobalStore(useShallow((ctx) => ({
35
- depositWithdrawal: ctx.depositWithdrawal,
36
- kycVerificationStatus: ctx.kycVerificationStatus,
37
- })));
38
- const verificationQuery = useMemberVerificationQuery();
39
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
40
- const [status, setStatus] = useState('waiting');
41
- const createDepositMutation = useCreateGCashWebpayDepositMutation({
42
- onMutate() {
43
- disclosure.setOpen(true);
44
- setStatus('processing');
45
- },
46
- onSuccess(data) {
47
- invariant(data.checkoutUrl);
48
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
49
- form.reset();
50
- disclosure.setOpen(false);
51
- },
52
- onError() {
53
- disclosure.setOpen(true);
54
- setStatus('failed');
55
- },
56
- });
57
- const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
58
- enabled: createDepositMutation.data != null,
59
- refetchInterval(ctx) {
60
- if (ctx.state.data?.status === 'CANCELLED' ||
61
- ctx.state.data?.status === 'CONFIRMED') {
62
- return false;
63
- }
64
- else {
65
- return 2500;
66
- }
67
- },
68
- });
69
- useEffect(() => {
70
- if (depositQuery.data?.status === 'CANCELLED') {
71
- disclosure.setOpen(true);
72
- setStatus('failed');
73
- }
74
- else if (depositQuery.data?.status === 'CONFIRMED') {
75
- disclosure.setOpen(true);
76
- setStatus('success');
77
- }
78
- }, [depositQuery.data?.status, disclosure]);
79
- const depositsCountQuery = useDepositsCountQuery();
80
- const depositsCount = depositsCountQuery.data ?? 0;
81
- const paymentSettingsQuery = usePaymentSettingsQuery();
82
- const paymentSettings = paymentSettingsQuery.data;
83
- const gatewaySettings = paymentSettings?.gcashWebpayDepositGatewaySettings;
84
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
85
- const minimumAmount = depositsCount <= 0
86
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
87
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
88
- const promosQuery = useAvailablePromosQuery();
89
- const promos = promosQuery.data ?? [];
90
- const definition = z
91
- .object({
92
- amount: z.string().superRefine((val, ctx) => {
93
- const n = parseDecimal(val, 0);
94
- if (n < minimumAmount) {
95
- ctx.addIssue({
96
- type: 'number',
97
- code: z.ZodIssueCode.too_small,
98
- inclusive: true,
99
- minimum: minimumAmount,
100
- message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
101
- });
102
- }
103
- if (n > maximumAmount) {
104
- ctx.addIssue({
105
- type: 'number',
106
- code: z.ZodIssueCode.too_big,
107
- inclusive: true,
108
- maximum: maximumAmount,
109
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
110
- });
111
- }
112
- }),
113
- promo: z.string().optional().nullable(),
114
- })
115
- .superRefine((value, ctx) => {
116
- const promo = promos.find((o) => o.id === value.promo);
117
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
118
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
119
- const amount = parseDecimal(value.amount, 0);
120
- if (promo && amount < promoMinAmount) {
121
- ctx.addIssue({
122
- path: ['amount'],
123
- code: z.ZodIssueCode.custom,
124
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
125
- });
126
- }
127
- if (promo && amount > promoMaxAmount) {
128
- ctx.addIssue({
129
- path: ['amount'],
130
- code: z.ZodIssueCode.custom,
131
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
132
- });
133
- }
134
- });
135
- const form = useForm({
136
- mode: 'all',
137
- resolver: zodResolver(definition),
138
- defaultValues: {
139
- amount: '0',
140
- promo: globalStore.depositWithdrawal.promo ?? null,
141
- },
142
- });
143
- useEffect(() => {
144
- if (minimumAmount) {
145
- form.reset({
146
- amount: minimumAmount.toString(),
147
- promo: form.getValues('promo') ?? null,
148
- });
149
- }
150
- }, [form, minimumAmount]);
151
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
152
- //handle new kyc process
153
- if (verificationStatus === 'PENDING' ||
154
- verificationStatus === 'UNVERIFIED' ||
155
- verificationStatus === 'REJECTED' ||
156
- verificationStatus === 'CREATED') {
157
- globalStore.kycVerificationStatus.setOpen(true);
158
- return;
159
- }
160
- else {
161
- createDepositMutation.reset();
162
- createDepositMutation.mutate({
163
- amount: data.amount.toString(),
164
- promo: data.promo ?? undefined,
165
- successRedirectionUrl: window.location.origin,
166
- cancelRedirectionUrl: window.location.origin,
167
- });
168
- }
169
- }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
170
- o.field.onChange(details.value);
171
- }, formatOptions: {
172
- maximumFractionDigits: 2,
173
- minimumFractionDigits: 0,
174
- }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
175
- form.setValue('amount', value.toString(), {
176
- shouldTouch: true,
177
- shouldDirty: true,
178
- shouldValidate: true,
179
- });
180
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
181
- o.field.onChange(value);
182
- globalStore.depositWithdrawal.setPromo(null);
183
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: disclosure.open, onOpenChange: (details) => {
184
- disclosure.setOpen(details.open);
185
- }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
186
- "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
187
- 'Your deposit has been successfully processed.', status === 'failed' &&
188
- 'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
189
- api.setOpen(false);
190
- }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
191
- }
@@ -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,184 +0,0 @@
1
- @keyframes arrow-green-flash {
2
- 0% {
3
- color: #abefc6;
4
- }
5
- 100% {
6
- color: #079455;
7
- }
8
- }
9
-
10
- .animate-arrow-green-flash-1 {
11
- animation: arrow-green-flash 0.4s infinite;
12
- animation-delay: -0.2s;
13
- }
14
-
15
- .animate-arrow-green-flash-2 {
16
- animation: arrow-green-flash 0.4s infinite;
17
- animation-delay: -0.1s;
18
- }
19
-
20
- .animate-arrow-green-flash-3 {
21
- animation: arrow-green-flash 0.4s infinite;
22
- }
23
-
24
- @keyframes arrow-red-flash {
25
- 0%,
26
- 100% {
27
- color: #f97066;
28
- }
29
- 50% {
30
- color: #fecdca;
31
- }
32
- }
33
-
34
- .animate-arrow-red-flash-1 {
35
- animation: arrow-red-flash 0.4s infinite;
36
- }
37
-
38
- .animate-arrow-red-flash-2 {
39
- animation: arrow-red-flash 0.4s infinite;
40
- animation-delay: -0.1s;
41
- }
42
-
43
- .animate-arrow-red-flash-3 {
44
- animation: arrow-red-flash 0.4s infinite;
45
- animation-delay: -0.2s;
46
- }
47
-
48
- /* Animated BG */
49
- @keyframes rotate {
50
- to {
51
- transform: rotate(1turn);
52
- }
53
- }
54
-
55
- .light-rays {
56
- position: absolute;
57
- top: 0;
58
- left: 0;
59
- right: 0;
60
- bottom: 0;
61
- overflow: hidden;
62
-
63
- --first: var(--color-bg-tertiary);
64
- --second: var(--color-bg-quaternary);
65
- }
66
-
67
- .light-rays::before,
68
- .light-rays::after {
69
- content: '';
70
- position: absolute;
71
- top: var(--light-rays-top, 150px);
72
- left: calc(50% - 90px);
73
- margin: -100vmax;
74
- width: 200vmax;
75
- height: 200vmax;
76
- opacity: 0.6;
77
- transform-origin: center;
78
- }
79
-
80
- .light-rays::before {
81
- background: conic-gradient(
82
- var(--first) 0deg 7.2deg,
83
- var(--second) 7.2deg 14.4deg,
84
- var(--first) 14.4deg 21.6deg,
85
- var(--second) 21.6deg 28.8deg,
86
- var(--first) 28.8deg 36deg,
87
- var(--second) 36deg 43.2deg,
88
- var(--first) 43.2deg 50.4deg,
89
- var(--second) 50.4deg 57.6deg,
90
- var(--first) 57.6deg 64.8deg,
91
- var(--second) 64.8deg 72deg,
92
- var(--first) 72deg 79.2deg,
93
- var(--second) 79.2deg 86.4deg,
94
- var(--first) 86.4deg 93.6deg,
95
- var(--second) 93.6deg 100.8deg,
96
- var(--first) 100.8deg 108deg,
97
- var(--second) 108deg 115.2deg,
98
- var(--first) 115.2deg 122.4deg,
99
- var(--second) 122.4deg 129.6deg,
100
- var(--first) 129.6deg 136.8deg,
101
- var(--second) 136.8deg 144deg,
102
- var(--first) 144deg 151.2deg,
103
- var(--second) 151.2deg 158.4deg,
104
- var(--first) 158.4deg 165.6deg,
105
- var(--second) 165.6deg 172.8deg,
106
- var(--first) 172.8deg 180deg,
107
- var(--second) 180deg 187.2deg,
108
- var(--first) 187.2deg 194.4deg,
109
- var(--second) 194.4deg 201.6deg,
110
- var(--first) 201.6deg 208.8deg,
111
- var(--second) 208.8deg 216deg,
112
- var(--first) 216deg 223.2deg,
113
- var(--second) 223.2deg 230.4deg,
114
- var(--first) 230.4deg 237.6deg,
115
- var(--second) 237.6deg 244.8deg,
116
- var(--first) 244.8deg 252deg,
117
- var(--second) 252deg 259.2deg,
118
- var(--first) 259.2deg 266.4deg,
119
- var(--second) 266.4deg 273.6deg,
120
- var(--first) 273.6deg 280.8deg,
121
- var(--second) 280.8deg 288deg,
122
- var(--first) 288deg 295.2deg,
123
- var(--second) 295.2deg 302.4deg,
124
- var(--first) 302.4deg 309.6deg,
125
- var(--second) 309.6deg 316.8deg,
126
- var(--first) 316.8deg 324deg,
127
- var(--second) 324deg 331.2deg,
128
- var(--first) 331.2deg 338.4deg,
129
- var(--second) 338.4deg 345.6deg,
130
- var(--first) 345.6deg 352.8deg,
131
- var(--second) 352.8deg 360deg
132
- );
133
- animation: rotate 20s linear infinite;
134
- }
135
-
136
- @media (max-width: 1024px) {
137
- .light-rays::before,
138
- .light-rays::after {
139
- left: auto;
140
- right: 11%;
141
- }
142
- }
143
-
144
- /* ScrollArea.module.css */
145
- .scrollArea {
146
- overflow-y: scroll;
147
- padding-right: 4px;
148
- }
149
-
150
- /* WebKit-based browsers */
151
- .scrollArea::-webkit-scrollbar {
152
- width: 8px;
153
- }
154
-
155
- .scrollArea::-webkit-scrollbar-track {
156
- background: var(--color-bg-primary-alt);
157
- border-radius: 9999px;
158
- }
159
-
160
- .scrollArea::-webkit-scrollbar-thumb {
161
- background-color: var(--color-bg-quaternary);
162
- border-radius: 9999px;
163
- }
164
-
165
- @keyframes waveColor {
166
- 0%,
167
- 2.5% {
168
- color: var(--wave-highlight-color);
169
- }
170
- 2.51%,
171
- 100% {
172
- color: var(--color-brand-300);
173
- }
174
- }
175
-
176
- .animate-wave-color-success {
177
- --wave-highlight-color: var(--color-success-800);
178
- animation: waveColor 4s ease-in-out infinite;
179
- }
180
-
181
- .animate-wave-color-error {
182
- --wave-highlight-color: var(--color-error-600);
183
- animation: waveColor 4s ease-in-out infinite;
184
- }
@@ -1,184 +0,0 @@
1
- @keyframes arrow-green-flash {
2
- 0% {
3
- color: #abefc6;
4
- }
5
- 100% {
6
- color: #079455;
7
- }
8
- }
9
-
10
- .animate-arrow-green-flash-1 {
11
- animation: arrow-green-flash 0.4s infinite;
12
- animation-delay: -0.2s;
13
- }
14
-
15
- .animate-arrow-green-flash-2 {
16
- animation: arrow-green-flash 0.4s infinite;
17
- animation-delay: -0.1s;
18
- }
19
-
20
- .animate-arrow-green-flash-3 {
21
- animation: arrow-green-flash 0.4s infinite;
22
- }
23
-
24
- @keyframes arrow-red-flash {
25
- 0%,
26
- 100% {
27
- color: #f97066;
28
- }
29
- 50% {
30
- color: #fecdca;
31
- }
32
- }
33
-
34
- .animate-arrow-red-flash-1 {
35
- animation: arrow-red-flash 0.4s infinite;
36
- }
37
-
38
- .animate-arrow-red-flash-2 {
39
- animation: arrow-red-flash 0.4s infinite;
40
- animation-delay: -0.1s;
41
- }
42
-
43
- .animate-arrow-red-flash-3 {
44
- animation: arrow-red-flash 0.4s infinite;
45
- animation-delay: -0.2s;
46
- }
47
-
48
- /* Animated BG */
49
- @keyframes rotate {
50
- to {
51
- transform: rotate(1turn);
52
- }
53
- }
54
-
55
- .light-rays {
56
- position: absolute;
57
- top: 0;
58
- left: 0;
59
- right: 0;
60
- bottom: 0;
61
- overflow: hidden;
62
-
63
- --first: var(--color-bg-tertiary);
64
- --second: var(--color-bg-quaternary);
65
- }
66
-
67
- .light-rays::before,
68
- .light-rays::after {
69
- content: '';
70
- position: absolute;
71
- top: var(--light-rays-top, 150px);
72
- left: calc(50% - 90px);
73
- margin: -100vmax;
74
- width: 200vmax;
75
- height: 200vmax;
76
- opacity: 0.6;
77
- transform-origin: center;
78
- }
79
-
80
- .light-rays::before {
81
- background: conic-gradient(
82
- var(--first) 0deg 7.2deg,
83
- var(--second) 7.2deg 14.4deg,
84
- var(--first) 14.4deg 21.6deg,
85
- var(--second) 21.6deg 28.8deg,
86
- var(--first) 28.8deg 36deg,
87
- var(--second) 36deg 43.2deg,
88
- var(--first) 43.2deg 50.4deg,
89
- var(--second) 50.4deg 57.6deg,
90
- var(--first) 57.6deg 64.8deg,
91
- var(--second) 64.8deg 72deg,
92
- var(--first) 72deg 79.2deg,
93
- var(--second) 79.2deg 86.4deg,
94
- var(--first) 86.4deg 93.6deg,
95
- var(--second) 93.6deg 100.8deg,
96
- var(--first) 100.8deg 108deg,
97
- var(--second) 108deg 115.2deg,
98
- var(--first) 115.2deg 122.4deg,
99
- var(--second) 122.4deg 129.6deg,
100
- var(--first) 129.6deg 136.8deg,
101
- var(--second) 136.8deg 144deg,
102
- var(--first) 144deg 151.2deg,
103
- var(--second) 151.2deg 158.4deg,
104
- var(--first) 158.4deg 165.6deg,
105
- var(--second) 165.6deg 172.8deg,
106
- var(--first) 172.8deg 180deg,
107
- var(--second) 180deg 187.2deg,
108
- var(--first) 187.2deg 194.4deg,
109
- var(--second) 194.4deg 201.6deg,
110
- var(--first) 201.6deg 208.8deg,
111
- var(--second) 208.8deg 216deg,
112
- var(--first) 216deg 223.2deg,
113
- var(--second) 223.2deg 230.4deg,
114
- var(--first) 230.4deg 237.6deg,
115
- var(--second) 237.6deg 244.8deg,
116
- var(--first) 244.8deg 252deg,
117
- var(--second) 252deg 259.2deg,
118
- var(--first) 259.2deg 266.4deg,
119
- var(--second) 266.4deg 273.6deg,
120
- var(--first) 273.6deg 280.8deg,
121
- var(--second) 280.8deg 288deg,
122
- var(--first) 288deg 295.2deg,
123
- var(--second) 295.2deg 302.4deg,
124
- var(--first) 302.4deg 309.6deg,
125
- var(--second) 309.6deg 316.8deg,
126
- var(--first) 316.8deg 324deg,
127
- var(--second) 324deg 331.2deg,
128
- var(--first) 331.2deg 338.4deg,
129
- var(--second) 338.4deg 345.6deg,
130
- var(--first) 345.6deg 352.8deg,
131
- var(--second) 352.8deg 360deg
132
- );
133
- animation: rotate 20s linear infinite;
134
- }
135
-
136
- @media (max-width: 1024px) {
137
- .light-rays::before,
138
- .light-rays::after {
139
- left: auto;
140
- right: 11%;
141
- }
142
- }
143
-
144
- /* ScrollArea.module.css */
145
- .scrollArea {
146
- overflow-y: scroll;
147
- padding-right: 4px;
148
- }
149
-
150
- /* WebKit-based browsers */
151
- .scrollArea::-webkit-scrollbar {
152
- width: 8px;
153
- }
154
-
155
- .scrollArea::-webkit-scrollbar-track {
156
- background: var(--color-bg-primary-alt);
157
- border-radius: 9999px;
158
- }
159
-
160
- .scrollArea::-webkit-scrollbar-thumb {
161
- background-color: var(--color-bg-quaternary);
162
- border-radius: 9999px;
163
- }
164
-
165
- @keyframes waveColor {
166
- 0%,
167
- 2.5% {
168
- color: var(--wave-highlight-color);
169
- }
170
- 2.51%,
171
- 100% {
172
- color: var(--color-brand-300);
173
- }
174
- }
175
-
176
- .animate-wave-color-success {
177
- --wave-highlight-color: var(--color-success-800);
178
- animation: waveColor 4s ease-in-out infinite;
179
- }
180
-
181
- .animate-wave-color-error {
182
- --wave-highlight-color: var(--color-error-600);
183
- animation: waveColor 4s ease-in-out infinite;
184
- }
@@ -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;