@opexa/portal-components 0.0.767 → 0.0.769
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/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js +1 -5
- package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js +1 -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/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +0 -1
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +0 -191
- 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/PortalProvider/CXDTokenObserver.d.ts +0 -1
- package/dist/components/PortalProvider/CXDTokenObserver.js +0 -30
- 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/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js
CHANGED
|
@@ -15,7 +15,6 @@ import { useWalletQuery } from '../../../../client/hooks/useWalletQuery.js';
|
|
|
15
15
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
16
16
|
import { CheckIcon } from '../../../../icons/CheckIcon.js';
|
|
17
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
18
|
-
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
19
18
|
import { EyeIcon } from '../../../../icons/EyeIcon.js';
|
|
20
19
|
import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
|
|
21
20
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
@@ -23,7 +22,6 @@ import { XIcon } from '../../../../icons/XIcon.js';
|
|
|
23
22
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
24
23
|
import { Button } from '../../../../ui/Button/index.js';
|
|
25
24
|
import { Field } from '../../../../ui/Field/index.js';
|
|
26
|
-
import { NumberInput } from '../../../../ui/NumberInput/index.js';
|
|
27
25
|
import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
|
|
28
26
|
import { Portal } from '../../../../ui/Portal/index.js';
|
|
29
27
|
import { Select } from '../../../../ui/Select/index.js';
|
|
@@ -155,9 +153,7 @@ export function InstapayWithdrawal() {
|
|
|
155
153
|
sameWidth: true,
|
|
156
154
|
}, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
|
|
157
155
|
o.field.onChange(details.value.at(0) ?? '');
|
|
158
|
-
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }),
|
|
159
|
-
o.field.onChange(details.value);
|
|
160
|
-
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Bank account number" }), _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.accountNumber?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
|
156
|
+
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
|
161
157
|
form.setValue('amount', value.toString(), {
|
|
162
158
|
shouldTouch: true,
|
|
163
159
|
shouldDirty: true,
|
|
@@ -142,9 +142,7 @@ export function PisoPayWithdrawal() {
|
|
|
142
142
|
sameWidth: true,
|
|
143
143
|
}, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
|
|
144
144
|
o.field.onChange(details.value.at(0) ?? '');
|
|
145
|
-
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item, index) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, index))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsx(Controller, { control: form.control, name: "
|
|
146
|
-
o.field.onChange(details.value);
|
|
147
|
-
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Bank account number" }), _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.accountNumber?.message })] })) }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
|
+
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item, index) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, index))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
148
146
|
o.field.onChange(details.value);
|
|
149
147
|
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _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) => {
|
|
150
148
|
form.setValue('amount', value.toString(), {
|
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
|
-
}
|
package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function GCashWebpayDeposit(): import("react/jsx-runtime").JSX.Element;
|
package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js
DELETED
|
@@ -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 +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;
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { zodResolver } from '@hookform/resolvers/zod';
|
|
3
|
-
import { useForm } from 'react-hook-form';
|
|
4
|
-
import { z } from 'zod';
|
|
5
|
-
import { useShallow } from 'zustand/shallow';
|
|
6
|
-
import { useApproveMemberVerification } from '../../client/hooks/useApproveMemberVerification.js';
|
|
7
|
-
import { useCreateMemberVerificationMutation } from '../../client/hooks/useCreateMemberVerificationMutation.js';
|
|
8
|
-
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
9
|
-
import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
|
|
10
|
-
import { useUpdateMemberVerificationMutation } from '../../client/hooks/useUpdateMemberVerificationMutation.js';
|
|
11
|
-
import { toaster } from '../../client/utils/toaster.js';
|
|
12
|
-
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
13
|
-
import { Button } from '../../ui/Button/index.js';
|
|
14
|
-
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
15
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
16
|
-
import { Field } from '../../ui/Field/index.js';
|
|
17
|
-
import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
18
|
-
import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
|
|
19
|
-
import { useKYCContext } from './KYCContext.js';
|
|
20
|
-
const definition = z.object({
|
|
21
|
-
address: z.string().trim().min(1, 'Current address is required'),
|
|
22
|
-
permanentAddress: z.string().trim().min(1, 'Permanent address is required'),
|
|
23
|
-
sourceOfIncome: z.string().trim().min(1, 'Source of Income is required'),
|
|
24
|
-
natureOfWork: z.string().trim().min(1, 'Nature of Work is required'),
|
|
25
|
-
placeOfBirth: z.string().trim().min(1, 'Place of Birth is required'),
|
|
26
|
-
nationality: z.string().trim().min(1, 'Nationality is required'),
|
|
27
|
-
});
|
|
28
|
-
export function PersonalInformation() {
|
|
29
|
-
const kyc = useKYCContext();
|
|
30
|
-
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
31
|
-
kyc: ctx.kyc,
|
|
32
|
-
})));
|
|
33
|
-
const memberVerificationQuery = useMemberVerificationQuery();
|
|
34
|
-
const memberVerificationId = memberVerificationQuery.data?.id;
|
|
35
|
-
const approveMemberVerificationMutation = useApproveMemberVerification();
|
|
36
|
-
const updateMemberVerificationMutation = useUpdateMemberVerificationMutation({
|
|
37
|
-
onError(error) {
|
|
38
|
-
toaster.error({
|
|
39
|
-
description: error.message,
|
|
40
|
-
});
|
|
41
|
-
},
|
|
42
|
-
onSuccess() {
|
|
43
|
-
const queryClient = getQueryClient();
|
|
44
|
-
queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
|
|
45
|
-
if (!prev)
|
|
46
|
-
return prev;
|
|
47
|
-
return {
|
|
48
|
-
...prev,
|
|
49
|
-
status: 'PENDING',
|
|
50
|
-
};
|
|
51
|
-
});
|
|
52
|
-
kyc.setDone(true);
|
|
53
|
-
globalStore.kyc.setOpen(false);
|
|
54
|
-
toaster.success({
|
|
55
|
-
title: 'Success',
|
|
56
|
-
description: 'Personal information has been set successfully.',
|
|
57
|
-
});
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
const createMemberVerificationMutation = useCreateMemberVerificationMutation({
|
|
61
|
-
onError(error) {
|
|
62
|
-
toaster.error({
|
|
63
|
-
description: error.message,
|
|
64
|
-
});
|
|
65
|
-
},
|
|
66
|
-
onSuccess() {
|
|
67
|
-
kyc.setDone(true);
|
|
68
|
-
globalStore.kyc.setOpen(false);
|
|
69
|
-
toaster.success({
|
|
70
|
-
title: 'Success',
|
|
71
|
-
description: 'Personal information has been set successfully.',
|
|
72
|
-
});
|
|
73
|
-
},
|
|
74
|
-
});
|
|
75
|
-
const form = useForm({
|
|
76
|
-
resolver: zodResolver(definition),
|
|
77
|
-
defaultValues: {
|
|
78
|
-
address: '',
|
|
79
|
-
nationality: '',
|
|
80
|
-
natureOfWork: '',
|
|
81
|
-
placeOfBirth: '',
|
|
82
|
-
permanentAddress: '',
|
|
83
|
-
},
|
|
84
|
-
mode: 'all',
|
|
85
|
-
});
|
|
86
|
-
async function onSubmit(values) {
|
|
87
|
-
if (!memberVerificationId) {
|
|
88
|
-
createMemberVerificationMutation.mutate({
|
|
89
|
-
...values,
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
await updateMemberVerificationMutation.mutateAsync({
|
|
94
|
-
id: memberVerificationId,
|
|
95
|
-
data: {
|
|
96
|
-
...values,
|
|
97
|
-
},
|
|
98
|
-
});
|
|
99
|
-
//approve status of member to be pending
|
|
100
|
-
await approveMemberVerificationMutation.mutateAsync({
|
|
101
|
-
id: memberVerificationId,
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
const address = form.watch('address');
|
|
106
|
-
const permanentAddress = form.watch('permanentAddress');
|
|
107
|
-
return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Personal Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Provide your basic details and work info." }), _jsxs("form", { className: "mt-7", onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.permanentAddress, children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address", ...form.register('permanentAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.permanentAddress?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.address, children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address", ...form.register('address') }), _jsx(Field.ErrorText, { children: form.formState.errors.address?.message })] }), _jsxs(Checkbox.Root, { className: "mt-md", checked: address !== '' &&
|
|
108
|
-
permanentAddress !== '' &&
|
|
109
|
-
address === permanentAddress, onCheckedChange: (details) => {
|
|
110
|
-
if (details.checked === true) {
|
|
111
|
-
form.setValue('address', form.getValues('permanentAddress'), {
|
|
112
|
-
shouldDirty: true,
|
|
113
|
-
shouldTouch: true,
|
|
114
|
-
shouldValidate: true,
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
}, disabled: !permanentAddress, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Use permanent address as current address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.sourceOfIncome, children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income", ...form.register('sourceOfIncome') }), _jsx(Field.ErrorText, { children: form.formState.errors.sourceOfIncome?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.natureOfWork, children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description", ...form.register('natureOfWork') }), _jsx(Field.ErrorText, { children: form.formState.errors.natureOfWork?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.placeOfBirth, children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth", ...form.register('placeOfBirth') }), _jsx(Field.ErrorText, { children: form.formState.errors.placeOfBirth?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.nationality, children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality", ...form.register('nationality') }), _jsx(Field.ErrorText, { children: form.formState.errors.nationality?.message })] }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: updateMemberVerificationMutation.isPending ||
|
|
118
|
-
createMemberVerificationMutation.isPending, children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", onClick: () => {
|
|
119
|
-
globalStore.kyc.setOpen(false);
|
|
120
|
-
}, disabled: updateMemberVerificationMutation.isPending ||
|
|
121
|
-
createMemberVerificationMutation.isPending, children: "Skip for now" })] })] }));
|
|
122
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
type EventDetail = {
|
|
2
|
-
type: 'SELFIE_CAPTURED';
|
|
3
|
-
data: string;
|
|
4
|
-
} | {
|
|
5
|
-
type: 'ID_DOCUMENT_CAPTURED';
|
|
6
|
-
data: string;
|
|
7
|
-
};
|
|
8
|
-
type UnsubscribeFn = () => void;
|
|
9
|
-
type Subscriber = (detail: EventDetail) => UnsubscribeFn;
|
|
10
|
-
export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
|
|
11
|
-
export interface UseKYCReturn {
|
|
12
|
-
step: number;
|
|
13
|
-
setStep: (step: number) => void;
|
|
14
|
-
done: boolean;
|
|
15
|
-
setDone: (done: boolean) => void;
|
|
16
|
-
subscribe: (subscriber: Subscriber) => UnsubscribeFn;
|
|
17
|
-
triggerEvent: (detail: EventDetail) => void;
|
|
18
|
-
idFrontImageId: string | null;
|
|
19
|
-
setFrontImageId: (id: string | null) => void;
|
|
20
|
-
selfieImageId: string | null;
|
|
21
|
-
setSelfieImageId: (id: string | null) => void;
|
|
22
|
-
reset: () => void;
|
|
23
|
-
}
|
|
24
|
-
export declare function useKYC(): UseKYCReturn;
|
|
25
|
-
export {};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { useRef, useState } from 'react';
|
|
2
|
-
export function useKYC() {
|
|
3
|
-
const [step, setStep] = useState(2);
|
|
4
|
-
const [done, setDone] = useState(false);
|
|
5
|
-
const [idFrontImageId, setFrontImageId] = useState(null);
|
|
6
|
-
const [selfieImageId, setSelfieImageId] = useState(null);
|
|
7
|
-
const subscribers = useRef([]);
|
|
8
|
-
const subscribe = (subscriber) => {
|
|
9
|
-
subscribers.current.push(subscriber);
|
|
10
|
-
return () => {
|
|
11
|
-
subscribers.current = subscribers.current.filter((item) => item !== subscriber);
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
const triggerEvent = (detail) => {
|
|
15
|
-
subscribers.current.forEach((subscriber) => {
|
|
16
|
-
subscriber(detail);
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
|
-
const reset = () => {
|
|
20
|
-
setStep(1);
|
|
21
|
-
setDone(false);
|
|
22
|
-
setFrontImageId(null);
|
|
23
|
-
setSelfieImageId(null);
|
|
24
|
-
};
|
|
25
|
-
return {
|
|
26
|
-
step,
|
|
27
|
-
setStep,
|
|
28
|
-
done,
|
|
29
|
-
setDone,
|
|
30
|
-
idFrontImageId,
|
|
31
|
-
setFrontImageId,
|
|
32
|
-
selfieImageId,
|
|
33
|
-
setSelfieImageId,
|
|
34
|
-
subscribe,
|
|
35
|
-
triggerEvent,
|
|
36
|
-
reset,
|
|
37
|
-
};
|
|
38
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function CXDTokenObserver(): null;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { addHours } from 'date-fns';
|
|
3
|
-
import { clamp } from 'lodash-es';
|
|
4
|
-
import { useSearchParams } from 'next/navigation';
|
|
5
|
-
import { useLocalStorage, useTimeout } from 'usehooks-ts';
|
|
6
|
-
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
7
|
-
export function CXDTokenObserver() {
|
|
8
|
-
const searchParams = useSearchParams();
|
|
9
|
-
const cxdToken = searchParams.get('cxd');
|
|
10
|
-
const accountQuery = useAccountQuery();
|
|
11
|
-
const account = accountQuery.data;
|
|
12
|
-
const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
|
|
13
|
-
const now = new Date();
|
|
14
|
-
const shouldTimeoutRun = cxdToken && account;
|
|
15
|
-
const removeCxdUntilInMs = cxd?.timestamp
|
|
16
|
-
? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
|
|
17
|
-
: 0;
|
|
18
|
-
useTimeout(() => {
|
|
19
|
-
const isSame = cxd?.cxd === cxdToken;
|
|
20
|
-
if (!isSame) {
|
|
21
|
-
const extendedTimestamp = addHours(new Date(), 6).getTime();
|
|
22
|
-
setCxd({
|
|
23
|
-
cxd: cxdToken,
|
|
24
|
-
timestamp: extendedTimestamp,
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
}, shouldTimeoutRun ? 100 : null);
|
|
28
|
-
useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
export function LinkBrokenIcon(props) {
|
|
3
|
-
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
4
|
-
}
|
|
Binary file
|