@opexa/portal-components 0.0.924 → 0.0.926
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/assets/providers/alize.png +0 -0
- package/dist/assets/providers/bigtime-gaming.png +0 -0
- package/dist/assets/providers/bng.png +0 -0
- package/dist/assets/providers/boongo.png +0 -0
- package/dist/assets/providers/btg.png +0 -0
- package/dist/assets/providers/cq9.png +0 -0
- package/dist/assets/providers/darwin.png +0 -0
- package/dist/assets/providers/digitain.png +0 -0
- package/dist/assets/providers/evolution.png +0 -0
- package/dist/assets/providers/fantasma-games.png +0 -0
- package/dist/assets/providers/fc.png +0 -0
- package/dist/assets/providers/fp.png +0 -0
- package/dist/assets/providers/habanero.png +0 -0
- package/dist/assets/providers/hacksaw.png +0 -0
- package/dist/assets/providers/jdb.png +0 -0
- package/dist/assets/providers/jili.png +0 -0
- package/dist/assets/providers/leap.png +0 -0
- package/dist/assets/providers/live-22-metaverse.png +0 -0
- package/dist/assets/providers/netent.png +0 -0
- package/dist/assets/providers/no-limit.png +0 -0
- package/dist/assets/providers/pg.png +0 -0
- package/dist/assets/providers/pgsoft.png +0 -0
- package/dist/assets/providers/pragmatic-play.png +0 -0
- package/dist/assets/providers/realtime-gaming.png +0 -0
- package/dist/assets/providers/redtiger.png +0 -0
- package/dist/assets/providers/rtg.png +0 -0
- package/dist/assets/providers/sagaming.png +0 -0
- package/dist/client/hooks/useAiOGCashDepositMutation.d.ts +4 -0
- package/dist/client/hooks/useAiOGCashDepositMutation.js +90 -0
- package/dist/client/hooks/useAiOGrabPayDepositMutation.d.ts +4 -0
- package/dist/client/hooks/useAiOGrabPayDepositMutation.js +80 -0
- package/dist/client/hooks/useAiOPalawanPayDepositMutation.d.ts +4 -0
- package/dist/client/hooks/useAiOPalawanPayDepositMutation.js +80 -0
- package/dist/client/hooks/useAiOPayMayaDepositMutation.d.ts +4 -0
- package/dist/client/hooks/useAiOPayMayaDepositMutation.js +80 -0
- package/dist/client/hooks/useRedeemVoucherMutation.d.ts +3 -0
- package/dist/client/hooks/useRedeemVoucherMutation.js +24 -0
- package/dist/components/Banner/Banner.client.d.ts +12 -0
- package/dist/components/Banner/Banner.client.js +49 -0
- package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +11 -0
- package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +55 -0
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +21 -2
- package/dist/components/DepositWithdrawal/Deposit/Deposit.js +20 -9
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositAlert.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositAlert.js +99 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.js +17 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.js +116 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHQRCode.d.ts +3 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHQRCode.js +69 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDeposit.js +10 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositAlert.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositAlert.js +99 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts +25 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.js +2 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositDetails.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositDetails.js +17 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositForm.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositForm.js +116 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHQRCode.d.ts +3 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHQRCode.js +69 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts +13 -0
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.js +85 -0
- package/dist/components/DepositWithdrawal/Deposit/Voucher/Voucher.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/Voucher/Voucher.js +86 -0
- package/dist/components/DepositWithdrawal/Deposit/Voucher/definition.d.ts +11 -0
- package/dist/components/DepositWithdrawal/Deposit/Voucher/definition.js +6 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGCashDeposit/AiOGCashDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGCashDeposit/AiOGCashDeposit.js +173 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGrabPayDeposit/AiOGrabPayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGrabPayDeposit/AiOGrabPayDeposit.js +171 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPalawanPayDeposit/AiOPalawanPayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +171 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPayMayaDeposit/AiOPayMayaDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPayMayaDeposit/AiOPayMayaDeposit.js +171 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AvailablePromos.d.ts +8 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/AvailablePromos.js +33 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/Deposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/Deposit.js +120 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/GCashDeposit/GCashDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/GCashDeposit/GCashDeposit.js +163 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/GCashWebpayDeposit/GCashWebpayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/GCashWebpayDeposit/GCashWebpayDeposit.js +165 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/LibanganDeposit/LibanganDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/LibanganDeposit/LibanganDeposit.js +186 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaAppDeposit/MayaAppDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaAppDeposit/MayaAppDeposit.js +157 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaDeposit/MayaDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaDeposit/MayaDeposit.js +163 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaWebpayDeposit/MayaWebpayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/MayaWebpayDeposit/MayaWebpayDeposit.js +166 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDeposit.js +10 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositAlert.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositAlert.js +99 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts +25 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.js +2 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositDetails.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositDetails.js +19 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositForm.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositForm.js +115 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts +13 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.js +81 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/PisoPayDeposit/PisoPayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/PisoPayDeposit/PisoPayDeposit.js +180 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDeposit.js +10 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositAlert.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositAlert.js +99 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts +25 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.js +2 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositDetails.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositDetails.js +17 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositForm.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositForm.js +116 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.d.ts +3 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.js +69 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts +13 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.js +85 -0
- package/dist/components/DepositWithdrawal/PaymentMethods.js +9 -2
- package/dist/components/DepositWithdrawal/utils.d.ts +1 -1
- package/dist/components/DepositWithdrawal/utils.js +1 -0
- package/dist/components/DigitainLauncher/Loading.d.ts +1 -0
- package/dist/components/DigitainLauncher/Loading.js +5 -0
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -0
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -0
- package/dist/components/KYC/BasicInformation.d.ts +1 -0
- package/dist/components/KYC/BasicInformation.js +101 -0
- package/dist/components/KYC/IdentityVerification.d.ts +1 -0
- package/dist/components/KYC/IdentityVerification.js +120 -0
- package/dist/components/KYC/Indicator.d.ts +1 -0
- package/dist/components/KYC/Indicator.js +8 -0
- package/dist/components/KYC/KYC.lazy.d.ts +6 -0
- package/dist/components/KYC/KYC.lazy.js +45 -0
- package/dist/components/KYC/KYCContext.d.ts +6 -0
- package/dist/components/KYC/KYCContext.js +2 -0
- package/dist/components/KYC/KYCDefault/BasicInformation.d.ts +1 -0
- package/dist/components/KYC/KYCDefault/BasicInformation.js +101 -0
- package/dist/components/KYC/KYCNonPagCor/PersonalInformation.js +51 -5
- package/dist/components/KYC/KYCNonPagCor/useKYCNonPagCor.js +5 -3
- package/dist/components/KYC/KYCVerificationStatus.d.ts +1 -0
- package/dist/components/KYC/KYCVerificationStatus.js +10 -0
- package/dist/components/KYC/KYCVerificationStatus.lazy.d.ts +1 -0
- package/dist/components/KYC/KYCVerificationStatus.lazy.js +36 -0
- package/dist/components/KYC/PersonalInformation.d.ts +1 -0
- package/dist/components/KYC/PersonalInformation.js +122 -0
- package/dist/components/KYC/useKYC.d.ts +25 -0
- package/dist/components/KYC/useKYC.js +38 -0
- package/dist/components/KYCNotRequired/KYCNotRequired.d.ts +0 -0
- package/dist/components/KYCNotRequired/KYCNotRequired.js +1 -0
- package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +1 -0
- package/dist/components/PortalProvider/AndroidOnlyComponents.js +12 -0
- package/dist/components/PortalProvider/CXDTokenObserver.d.ts +1 -0
- package/dist/components/PortalProvider/CXDTokenObserver.js +30 -0
- package/dist/components/PortalProvider/LinkGoogleAccountObserver.d.ts +1 -0
- package/dist/components/PortalProvider/LinkGoogleAccountObserver.js +29 -0
- package/dist/components/Quests/MultiWageringQuest.d.ts +1 -0
- package/dist/components/Quests/MultiWageringQuest.js +111 -0
- package/dist/components/SessionWatcher/SessionWatcher.d.ts +1 -0
- package/dist/components/SessionWatcher/SessionWatcher.js +20 -0
- package/dist/components/SessionWatcher/index.d.ts +1 -0
- package/dist/components/SessionWatcher/index.js +1 -0
- package/dist/components/SignIn/utils.d.ts +8 -0
- package/dist/components/SignIn/utils.js +26 -0
- package/dist/components/SingleSignOn/SingleSignOn.d.ts +1 -1
- package/dist/components/SingleSignOn/SingleSignOn.js +7 -15
- package/dist/constants/Branches.d.ts +2 -0
- package/dist/constants/Branches.js +42 -0
- package/dist/icons/CelebrationIcon.d.ts +2 -0
- package/dist/icons/CelebrationIcon.js +4 -0
- package/dist/images/game-providers/ALPHACHINKO.png +0 -0
- package/dist/images/responsible-gaming-yellow.png +0 -0
- package/dist/images/voucher-lazada.png +0 -0
- package/dist/images/voucher-ticket.png +0 -0
- package/dist/services/queries.d.ts +1 -0
- package/dist/services/queries.js +18 -0
- package/dist/services/wallet.d.ts +25 -0
- package/dist/services/wallet.js +19 -1
- package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +4 -0
- package/dist/third-parties/FacebookPixel/FacebookPixel.js +4 -0
- package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
- package/dist/third-parties/FacebookPixel/api.js +1 -0
- package/dist/third-parties/FacebookPixel/index.d.ts +1 -0
- package/dist/third-parties/FacebookPixel/index.js +1 -0
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +4 -0
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +4 -0
- package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
- package/dist/third-parties/GoogleRecaptcha/api.js +1 -0
- package/dist/third-parties/GoogleRecaptcha/index.d.ts +1 -0
- package/dist/third-parties/GoogleRecaptcha/index.js +1 -0
- package/dist/third-parties/index.d.ts +2 -0
- package/dist/third-parties/index.js +2 -0
- package/dist/ui/QrCode/QrCode.d.ts +25 -25
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/utils/getLocaleInfo.d.ts +79 -0
- package/dist/utils/getLocaleInfo.js +175 -0
- package/dist/utils/mutationKeys.d.ts +1 -0
- package/dist/utils/mutationKeys.js +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
import invariant from 'tiny-invariant';
|
|
3
|
+
import { useShallow } from 'zustand/shallow';
|
|
4
|
+
import { useCreateQRPHDepositMutation } from '../../../../client/hooks/useCreateQRPHDepositMutation.js';
|
|
5
|
+
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
6
|
+
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
7
|
+
import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
|
|
8
|
+
import { getQueryClient } from '../../../../utils/getQueryClient.js';
|
|
9
|
+
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
10
|
+
export function useQRPHDeposit() {
|
|
11
|
+
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
12
|
+
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
13
|
+
})));
|
|
14
|
+
const [deposit, setDeposit] = useState(null);
|
|
15
|
+
const verificationQuery = useMemberVerificationQuery();
|
|
16
|
+
const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
|
|
17
|
+
const [status, setStatus] = useState('waiting');
|
|
18
|
+
const view = status === 'verification-failed' ||
|
|
19
|
+
status === 'verification-waiting' ||
|
|
20
|
+
status === 'verification-success' ||
|
|
21
|
+
status === 'verification-processing'
|
|
22
|
+
? 'qrCode'
|
|
23
|
+
: 'form';
|
|
24
|
+
const mutation = useCreateQRPHDepositMutation({
|
|
25
|
+
onMutate() {
|
|
26
|
+
setStatus('processing');
|
|
27
|
+
},
|
|
28
|
+
onSuccess(data) {
|
|
29
|
+
const queryClient = getQueryClient();
|
|
30
|
+
invariant(data.qrCode);
|
|
31
|
+
setStatus('verification-waiting');
|
|
32
|
+
queryClient.invalidateQueries({ queryKey: getDepositsCountQueryKey() });
|
|
33
|
+
setDeposit(data);
|
|
34
|
+
},
|
|
35
|
+
onError() {
|
|
36
|
+
setStatus('failed');
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
const generateQRCode = (input) => {
|
|
40
|
+
//handle new kyc process
|
|
41
|
+
if (verificationStatus === 'PENDING' ||
|
|
42
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
43
|
+
verificationStatus === 'REJECTED' ||
|
|
44
|
+
verificationStatus === 'CREATED') {
|
|
45
|
+
globalStore.kycVerificationStatus.setOpen(true);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
mutation.mutate({
|
|
50
|
+
amount: input.amount,
|
|
51
|
+
promo: input.promo ?? undefined,
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const query = useDepositQuery(deposit?.id, {
|
|
56
|
+
enabled: !!deposit,
|
|
57
|
+
refetchInterval: 5000,
|
|
58
|
+
});
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (query.data?.status === 'APPROVED' ||
|
|
61
|
+
query.data?.status === 'CONFIRMED') {
|
|
62
|
+
setStatus('verification-success');
|
|
63
|
+
}
|
|
64
|
+
if (query.data?.status === 'CANCELLED' ||
|
|
65
|
+
query.data?.status === 'REJECTED' ||
|
|
66
|
+
query.data?.status === 'FAILED') {
|
|
67
|
+
setStatus('verification-failed');
|
|
68
|
+
}
|
|
69
|
+
}, [query.data?.status]);
|
|
70
|
+
const reset = () => {
|
|
71
|
+
setDeposit(null);
|
|
72
|
+
setStatus('waiting');
|
|
73
|
+
};
|
|
74
|
+
const verify = () => {
|
|
75
|
+
setStatus('verification-processing');
|
|
76
|
+
};
|
|
77
|
+
return {
|
|
78
|
+
view,
|
|
79
|
+
status,
|
|
80
|
+
verify,
|
|
81
|
+
reset,
|
|
82
|
+
deposit,
|
|
83
|
+
generateQRCode,
|
|
84
|
+
};
|
|
85
|
+
}
|
|
@@ -12,6 +12,7 @@ import maya from '../../images/maya.png';
|
|
|
12
12
|
import onlineBank from '../../images/online-bank.png';
|
|
13
13
|
import palawanPay from '../../images/palawanpay.png';
|
|
14
14
|
import pisoPay from '../../images/piso-pay.png';
|
|
15
|
+
import voucherIcon from '../../images/voucher-ticket.png';
|
|
15
16
|
import qrph from '../../images/QRPH.png';
|
|
16
17
|
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
17
18
|
import { Field } from '../../ui/Field/index.js';
|
|
@@ -127,6 +128,11 @@ const OPTIONS = [
|
|
|
127
128
|
label: 'QRPH',
|
|
128
129
|
image: qrph,
|
|
129
130
|
},
|
|
131
|
+
{
|
|
132
|
+
value: 'VOUCHER',
|
|
133
|
+
label: 'Voucher',
|
|
134
|
+
image: voucherIcon,
|
|
135
|
+
}
|
|
130
136
|
];
|
|
131
137
|
export function PaymentMethods(props) {
|
|
132
138
|
const options = useMemo(() => props.options?.length
|
|
@@ -145,10 +151,11 @@ export function PaymentMethods(props) {
|
|
|
145
151
|
}, [setValue]);
|
|
146
152
|
return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Available payment methods" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: handleValueChange, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx("div", { className: twMerge('rounded-xs', option.value === 'AIO_GRAB_PAY'
|
|
147
153
|
? 'bg-transparent px-0 py-0'
|
|
148
|
-
: 'bg-white px-sm py-[0.688rem]', option.value.includes('GCASH') && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value.includes('MAYA') && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('w-auto', 'h-[1.063rem]', option.value === 'LIBANGAN_PAY_IN' ||
|
|
154
|
+
: 'bg-white px-sm py-[0.688rem]', option.value.includes('GCASH') && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value.includes('MAYA') && 'bg-black', option.value.includes('VOUCHER') && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('w-auto', 'h-[1.063rem]', option.value === 'LIBANGAN_PAY_IN' ||
|
|
149
155
|
option.value === 'VENTAJA_DISBURSEMENT'
|
|
150
156
|
? 'h-[2.5rem]'
|
|
151
157
|
: '', (option.value === 'AIO_GRAB_PAY' ||
|
|
152
158
|
option.value === 'AURIX_PAY_GRAB_PAY') &&
|
|
153
|
-
'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]'
|
|
159
|
+
'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]' ||
|
|
160
|
+
option.value === "VOUCHER" && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
|
|
154
161
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { z } from 'zod';
|
|
2
2
|
import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
|
|
3
|
-
export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH"]>;
|
|
3
|
+
export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH", "VOUCHER"]>;
|
|
4
4
|
export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
|
|
5
5
|
export declare const PaymentMethodDefinitionCrazywin: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY"]>;
|
|
6
6
|
export type PaymentMethodCrazywin = z.infer<typeof PaymentMethodDefinitionCrazywin>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function Loading(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,5 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,184 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,184 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function BasicInformation(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,101 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function IdentityVerification(): import("react/jsx-runtime").JSX.Element;
|