@opexa/portal-components 0.0.826 → 0.0.827
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/components/AccountInfo/GoogleDisconnect.d.ts +7 -0
- package/dist/components/AccountInfo/GoogleDisconnect.js +11 -0
- package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +11 -0
- package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +55 -0
- package/dist/components/DepositWithdrawal/Deposit/AiOGCashDeposit/AiOGCashDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +191 -0
- package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/MayaWebpayDeposit/MayaWebpayDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.js +7 -4
- package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +5 -4
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.js +7 -4
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/QRPHDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/useQRPHDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
- package/dist/components/DigitainLauncher/Loading.d.ts +1 -0
- package/dist/components/DigitainLauncher/Loading.js +5 -0
- package/dist/components/FavoriteGames/FavoriteGames.client.d.ts +1 -0
- package/dist/components/FavoriteGames/FavoriteGames.client.js +3 -3
- package/dist/components/GameLaunch/GameLaunchTrigger.d.ts +1 -0
- package/dist/components/GameLaunch/GameLaunchTrigger.js +6 -4
- package/dist/components/Games/Game.d.ts +1 -0
- package/dist/components/Games/Game.js +1 -1
- package/dist/components/Games/GamesCarousel.client.d.ts +1 -0
- package/dist/components/Games/GamesCarousel.client.js +1 -1
- package/dist/components/Games/GamesList.client.d.ts +1 -0
- package/dist/components/Games/GamesList.client.js +1 -1
- package/dist/components/GamesSearch/GamesSearch.d.ts +1 -0
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- 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/KYCDefault/KYCVerificationStatus.lazy.js +1 -1
- package/dist/components/KYC/KYCSumsub.d.ts +1 -0
- package/dist/components/KYC/KYCSumsub.js +4 -1
- 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 +33 -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/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/Search/Search.lazy.d.ts +1 -0
- package/dist/components/Search/Search.lazy.js +1 -1
- 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/icons/LinkBrokenIcon.d.ts +2 -0
- package/dist/icons/LinkBrokenIcon.js +4 -0
- package/dist/images/game-providers/ALPHACHINKO.png +0 -0
- package/dist/images/responsible-gaming-yellow.png +0 -0
- package/dist/ui/AlertDialog/AlertDialog.d.ts +187 -187
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +17 -17
- package/package.json +1 -1
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,7 @@
|
|
|
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 {};
|
|
@@ -0,0 +1,11 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type AiOeWalletPaymentMethod } from './utils';
|
|
2
|
+
interface AiOPaymentMethodsProps {
|
|
3
|
+
value?: AiOeWalletPaymentMethod;
|
|
4
|
+
onChange?: (value: AiOeWalletPaymentMethod) => void;
|
|
5
|
+
defaultValue?: AiOeWalletPaymentMethod;
|
|
6
|
+
options?: AiOeWalletPaymentMethod[];
|
|
7
|
+
className?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function AiOPaymentMethods(props: AiOPaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import Image from 'next/image';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { useControllableState } from '../../client/hooks/useControllableState.js';
|
|
5
|
+
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
6
|
+
import gcash from '../../images/gcash.png';
|
|
7
|
+
import grabPay from '../../images/grabpay.png';
|
|
8
|
+
import maya from '../../images/maya.png';
|
|
9
|
+
import palawanPay from '../../images/palawanpay.png';
|
|
10
|
+
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
11
|
+
import { Field } from '../../ui/Field/index.js';
|
|
12
|
+
import { AiOeWalletPaymentMethodDefinition, } from './utils.js';
|
|
13
|
+
const AIO_EWALLET_OPTIONS = [
|
|
14
|
+
{
|
|
15
|
+
value: 'AIO_GCASH',
|
|
16
|
+
label: 'GCash',
|
|
17
|
+
image: gcash,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
value: 'AIO_PAY_MAYA',
|
|
21
|
+
label: 'Maya',
|
|
22
|
+
image: maya,
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
value: 'AIO_GRAB_PAY',
|
|
26
|
+
label: 'GrabPay',
|
|
27
|
+
image: grabPay,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
value: 'AIO_PALAWAN_PAY',
|
|
31
|
+
label: 'Palawan Pay',
|
|
32
|
+
image: palawanPay,
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
export function AiOPaymentMethods(props) {
|
|
36
|
+
const options = props.options && props.options.length > 0
|
|
37
|
+
? AIO_EWALLET_OPTIONS.filter((option) => props.options?.includes(option.value))
|
|
38
|
+
: AIO_EWALLET_OPTIONS;
|
|
39
|
+
const [value, setValue] = useControllableState({
|
|
40
|
+
value: props.value,
|
|
41
|
+
defaultValue: props.defaultValue ?? options[0]?.value,
|
|
42
|
+
onChange: props.onChange,
|
|
43
|
+
});
|
|
44
|
+
const parseValue = (val) => {
|
|
45
|
+
return AiOeWalletPaymentMethodDefinition.parse(val);
|
|
46
|
+
};
|
|
47
|
+
return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: props.label || 'AIO eWallet payment methods' }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
|
|
48
|
+
const lastValue = newValue.at(-1);
|
|
49
|
+
if (!lastValue)
|
|
50
|
+
return;
|
|
51
|
+
setValue(parseValue(lastValue));
|
|
52
|
+
}, 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'
|
|
53
|
+
? 'bg-transparent px-0 py-0'
|
|
54
|
+
: 'bg-white px-sm py-[0.688rem]', option.value === 'AIO_GCASH' && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value === 'AIO_PAY_MAYA' && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('h-[1.063rem] w-auto', option.value === 'AIO_GRAB_PAY' && 'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
|
|
55
|
+
}
|
|
@@ -159,10 +159,11 @@ export function AiOGCashDeposit() {
|
|
|
159
159
|
}
|
|
160
160
|
}, [form, minimumAmount]);
|
|
161
161
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
162
|
-
if (
|
|
163
|
-
verificationStatus === '
|
|
164
|
-
|
|
165
|
-
|
|
162
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
163
|
+
(verificationStatus === 'PENDING' ||
|
|
164
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
165
|
+
verificationStatus === 'REJECTED' ||
|
|
166
|
+
verificationStatus === 'CREATED')) {
|
|
166
167
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
167
168
|
return;
|
|
168
169
|
}
|
|
@@ -157,10 +157,11 @@ export function AiOGrabPayDeposit() {
|
|
|
157
157
|
}
|
|
158
158
|
}, [form, minimumAmount]);
|
|
159
159
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
160
|
-
if (
|
|
161
|
-
verificationStatus === '
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
161
|
+
(verificationStatus === 'PENDING' ||
|
|
162
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
163
|
+
verificationStatus === 'REJECTED' ||
|
|
164
|
+
verificationStatus === 'CREATED')) {
|
|
164
165
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
165
166
|
return;
|
|
166
167
|
}
|
package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js
CHANGED
|
@@ -157,10 +157,11 @@ export function AiOPalawanPayDeposit() {
|
|
|
157
157
|
}
|
|
158
158
|
}, [form, minimumAmount]);
|
|
159
159
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
160
|
-
if (
|
|
161
|
-
verificationStatus === '
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
161
|
+
(verificationStatus === 'PENDING' ||
|
|
162
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
163
|
+
verificationStatus === 'REJECTED' ||
|
|
164
|
+
verificationStatus === 'CREATED')) {
|
|
164
165
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
165
166
|
return;
|
|
166
167
|
}
|
|
@@ -157,10 +157,11 @@ export function AiOPayMayaDeposit() {
|
|
|
157
157
|
}
|
|
158
158
|
}, [form, minimumAmount]);
|
|
159
159
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
160
|
-
if (
|
|
161
|
-
verificationStatus === '
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
161
|
+
(verificationStatus === 'PENDING' ||
|
|
162
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
163
|
+
verificationStatus === 'REJECTED' ||
|
|
164
|
+
verificationStatus === 'CREATED')) {
|
|
164
165
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
165
166
|
return;
|
|
166
167
|
}
|
|
@@ -153,10 +153,11 @@ export function GCashDeposit() {
|
|
|
153
153
|
}
|
|
154
154
|
}, [form, minimumAmount]);
|
|
155
155
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
156
|
-
if (
|
|
157
|
-
verificationStatus === '
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
157
|
+
(verificationStatus === 'PENDING' ||
|
|
158
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
159
|
+
verificationStatus === 'REJECTED' ||
|
|
160
|
+
verificationStatus === 'CREATED')) {
|
|
160
161
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
161
162
|
return;
|
|
162
163
|
}
|
|
@@ -153,10 +153,11 @@ export function GCashWebpayDeposit() {
|
|
|
153
153
|
}
|
|
154
154
|
}, [form, minimumAmount]);
|
|
155
155
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
156
|
-
if (
|
|
157
|
-
verificationStatus === '
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
157
|
+
(verificationStatus === 'PENDING' ||
|
|
158
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
159
|
+
verificationStatus === 'REJECTED' ||
|
|
160
|
+
verificationStatus === 'CREATED')) {
|
|
160
161
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
161
162
|
return;
|
|
162
163
|
}
|
package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function GCashWebpayDeposit(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,191 @@
|
|
|
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
|
+
}
|
|
@@ -154,10 +154,11 @@ export function LibanganDeposit() {
|
|
|
154
154
|
}, [form, minimumAmount]);
|
|
155
155
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
156
156
|
//handle new kyc process
|
|
157
|
-
if (
|
|
158
|
-
verificationStatus === '
|
|
159
|
-
|
|
160
|
-
|
|
157
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
158
|
+
(verificationStatus === 'PENDING' ||
|
|
159
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
160
|
+
verificationStatus === 'REJECTED' ||
|
|
161
|
+
verificationStatus === 'CREATED')) {
|
|
161
162
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
162
163
|
return;
|
|
163
164
|
}
|
|
@@ -120,10 +120,11 @@ export function MayaAppDeposit() {
|
|
|
120
120
|
}, [form, minimumAmount]);
|
|
121
121
|
const handleSubmit = form.handleSubmit(async (data) => {
|
|
122
122
|
//handle new kyc process
|
|
123
|
-
if (
|
|
124
|
-
verificationStatus === '
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
124
|
+
(verificationStatus === 'PENDING' ||
|
|
125
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
126
|
+
verificationStatus === 'REJECTED' ||
|
|
127
|
+
verificationStatus === 'CREATED')) {
|
|
127
128
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
128
129
|
return;
|
|
129
130
|
}
|
|
@@ -153,10 +153,11 @@ export function MayaDeposit() {
|
|
|
153
153
|
}
|
|
154
154
|
}, [form, minimumAmount]);
|
|
155
155
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
156
|
-
if (
|
|
157
|
-
verificationStatus === '
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
157
|
+
(verificationStatus === 'PENDING' ||
|
|
158
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
159
|
+
verificationStatus === 'REJECTED' ||
|
|
160
|
+
verificationStatus === 'CREATED')) {
|
|
160
161
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
161
162
|
return;
|
|
162
163
|
}
|
|
@@ -153,10 +153,11 @@ export function MayaWebpayDeposit() {
|
|
|
153
153
|
}
|
|
154
154
|
}, [form, minimumAmount]);
|
|
155
155
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
156
|
-
if (
|
|
157
|
-
verificationStatus === '
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
157
|
+
(verificationStatus === 'PENDING' ||
|
|
158
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
159
|
+
verificationStatus === 'REJECTED' ||
|
|
160
|
+
verificationStatus === 'CREATED')) {
|
|
160
161
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
161
162
|
return;
|
|
162
163
|
}
|
|
@@ -5,7 +5,9 @@ import { useCreateOnlineBankDepositMutation } from '../../../../client/hooks/use
|
|
|
5
5
|
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
6
6
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
7
7
|
import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
|
|
8
|
+
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
8
9
|
export function useOnlineBankDeposit() {
|
|
10
|
+
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
9
11
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
10
12
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
11
13
|
})));
|
|
@@ -34,10 +36,11 @@ export function useOnlineBankDeposit() {
|
|
|
34
36
|
});
|
|
35
37
|
const generateVCA = (input) => {
|
|
36
38
|
//handle new kyc process
|
|
37
|
-
if (
|
|
38
|
-
verificationStatus === '
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
40
|
+
(verificationStatus === 'PENDING' ||
|
|
41
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
42
|
+
verificationStatus === 'REJECTED' ||
|
|
43
|
+
verificationStatus === 'CREATED')) {
|
|
41
44
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
42
45
|
return;
|
|
43
46
|
}
|
|
@@ -163,10 +163,11 @@ export function PisoPayDeposit() {
|
|
|
163
163
|
}
|
|
164
164
|
}, [form, minimumAmount]);
|
|
165
165
|
return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
|
|
166
|
-
if (
|
|
167
|
-
verificationStatus === '
|
|
168
|
-
|
|
169
|
-
|
|
166
|
+
if (!depositWithdrawalProps.bypassDepositKycCheck &&
|
|
167
|
+
(verificationStatus === 'PENDING' ||
|
|
168
|
+
verificationStatus === 'UNVERIFIED' ||
|
|
169
|
+
verificationStatus === 'REJECTED' ||
|
|
170
|
+
verificationStatus === 'CREATED')) {
|
|
170
171
|
globalStore.kycVerificationStatus.setOpen(true);
|
|
171
172
|
return;
|
|
172
173
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const QRPHDepositContext: (props: {
|
|
2
2
|
value: {
|
|
3
|
-
status: "idle" | "generating-qr-code" | "qr-code-generated"
|
|
3
|
+
status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
|
|
4
4
|
deposit: import("../../../../types").Deposit | null;
|
|
5
5
|
generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
|
|
6
6
|
regenerateQRCode: () => Promise<void>;
|
|
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: (props: {
|
|
|
9
9
|
} & {
|
|
10
10
|
children?: import("react").ReactNode | undefined;
|
|
11
11
|
}) => React.ReactNode, useQRPHDepositContext: () => {
|
|
12
|
-
status: "idle" | "generating-qr-code" | "qr-code-generated"
|
|
12
|
+
status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
|
|
13
13
|
deposit: import("../../../../types").Deposit | null;
|
|
14
14
|
generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
|
|
15
15
|
regenerateQRCode: () => Promise<void>;
|
|
@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
|
|
|
5
5
|
promo?: string | null;
|
|
6
6
|
}
|
|
7
7
|
export declare function useQRPHDeposit(): {
|
|
8
|
-
status: "idle" | "generating-qr-code" | "qr-code-generated"
|
|
8
|
+
status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
|
|
9
9
|
deposit: Deposit | null;
|
|
10
10
|
generateQRCode: (input: GenerateQRCodeInput) => Promise<void>;
|
|
11
11
|
regenerateQRCode: () => Promise<void>;
|