@opexa/portal-components 0.0.804 → 0.0.806
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/Deposit/AiOGCashDeposit/AiOGCashDeposit.js +10 -54
- package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +10 -54
- package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +10 -54
- package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +10 -54
- package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +9 -54
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +9 -54
- package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +25 -49
- package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +9 -54
- package/dist/components/DepositWithdrawal/Deposit/MayaWebpayDeposit/MayaWebpayDeposit.js +9 -54
- package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +10 -54
- package/dist/components/Quests/Quests.client.d.ts +2 -0
- package/dist/components/Quests/Quests.client.js +3 -1
- package/dist/components/Quests/WageringQuest__next.d.ts +2 -0
- package/dist/components/Quests/WageringQuest__next.js +13 -9
- package/dist/styles/theme.css +1 -4
- package/package.json +1 -1
|
@@ -4,12 +4,10 @@ import Link from 'next/link';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
-
import { useBoolean } from 'usehooks-ts';
|
|
8
7
|
import { z } from 'zod';
|
|
9
8
|
import { useShallow } from 'zustand/shallow';
|
|
10
9
|
import { useCreateAiOGCashDepositMutation } from '../../../../client/hooks/useAiOGCashDepositMutation.js';
|
|
11
10
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
12
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
13
11
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
14
12
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
15
13
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
@@ -18,7 +16,6 @@ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSett
|
|
|
18
16
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
19
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
20
18
|
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
21
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
22
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
23
20
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
24
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
@@ -31,16 +28,11 @@ import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
|
31
28
|
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
32
29
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
33
30
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
31
|
+
import { explainError } from '../../utils.js';
|
|
34
32
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
35
33
|
export function AiOGCashDeposit() {
|
|
36
34
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
37
|
-
const disclosure = useDisclosure(
|
|
38
|
-
onOpenChange(open) {
|
|
39
|
-
if (!open) {
|
|
40
|
-
form.reset();
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
});
|
|
35
|
+
const disclosure = useDisclosure();
|
|
44
36
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
45
37
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
46
38
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -66,26 +58,6 @@ export function AiOGCashDeposit() {
|
|
|
66
58
|
setStatus('failed');
|
|
67
59
|
},
|
|
68
60
|
});
|
|
69
|
-
const warn = useBoolean();
|
|
70
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
71
|
-
enabled: !warn.value && status === 'success',
|
|
72
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
73
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
74
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
75
|
-
? false
|
|
76
|
-
: 1000,
|
|
77
|
-
});
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
80
|
-
setStatus('confirmed');
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
84
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
85
|
-
setStatus('failed');
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
}, [depositQuery.data?.status]);
|
|
89
61
|
const depositsCountQuery = useDepositsCountQuery();
|
|
90
62
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
91
63
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -189,29 +161,13 @@ export function AiOGCashDeposit() {
|
|
|
189
161
|
globalStore.depositWithdrawal.setPromo(null);
|
|
190
162
|
}, 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) => {
|
|
191
163
|
disclosure.setOpen(details.open);
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}, 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.
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
164
|
+
if (!details.open) {
|
|
165
|
+
setStatus('waiting');
|
|
166
|
+
form.reset();
|
|
167
|
+
}
|
|
168
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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' &&
|
|
169
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
|
|
170
|
+
explainError(createDepositMutation?.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
201
171
|
api.setOpen(false);
|
|
202
|
-
}
|
|
203
|
-
}, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_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, {}) })), status === 'confirmed' && (_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' &&
|
|
204
|
-
!warn.value &&
|
|
205
|
-
'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
206
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
207
|
-
!warn.value &&
|
|
208
|
-
'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
|
|
209
|
-
warn.value &&
|
|
210
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
211
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
212
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
213
|
-
status === 'success' ||
|
|
214
|
-
status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
|
|
215
|
-
warn.setFalse();
|
|
216
|
-
}, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
|
|
172
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
217
173
|
}
|
|
@@ -4,12 +4,10 @@ import Link from 'next/link';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
-
import { useBoolean } from 'usehooks-ts';
|
|
8
7
|
import { z } from 'zod';
|
|
9
8
|
import { useShallow } from 'zustand/shallow';
|
|
10
9
|
import { useCreateAiOGrabPayDepositMutation } from '../../../../client/hooks/useAiOGrabPayDepositMutation.js';
|
|
11
10
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
12
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
13
11
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
14
12
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
15
13
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
@@ -18,7 +16,6 @@ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSett
|
|
|
18
16
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
19
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
20
18
|
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
21
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
22
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
23
20
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
24
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
@@ -31,16 +28,11 @@ import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
|
31
28
|
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
32
29
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
33
30
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
31
|
+
import { explainError } from '../../utils.js';
|
|
34
32
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
35
33
|
export function AiOGrabPayDeposit() {
|
|
36
34
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
37
|
-
const disclosure = useDisclosure(
|
|
38
|
-
onOpenChange(open) {
|
|
39
|
-
if (!open) {
|
|
40
|
-
form.reset();
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
});
|
|
35
|
+
const disclosure = useDisclosure();
|
|
44
36
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
45
37
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
46
38
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -64,26 +56,6 @@ export function AiOGrabPayDeposit() {
|
|
|
64
56
|
setStatus('failed');
|
|
65
57
|
},
|
|
66
58
|
});
|
|
67
|
-
const warn = useBoolean();
|
|
68
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
69
|
-
enabled: !warn.value && status === 'success',
|
|
70
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
71
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
72
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
73
|
-
? false
|
|
74
|
-
: 1000,
|
|
75
|
-
});
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
78
|
-
setStatus('confirmed');
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
82
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
83
|
-
setStatus('failed');
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
}, [depositQuery.data?.status]);
|
|
87
59
|
const depositsCountQuery = useDepositsCountQuery();
|
|
88
60
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
89
61
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -187,29 +159,13 @@ export function AiOGrabPayDeposit() {
|
|
|
187
159
|
globalStore.depositWithdrawal.setPromo(null);
|
|
188
160
|
}, 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) => {
|
|
189
161
|
disclosure.setOpen(details.open);
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}, 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.
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
162
|
+
if (!details.open) {
|
|
163
|
+
setStatus('waiting');
|
|
164
|
+
form.reset();
|
|
165
|
+
}
|
|
166
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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' &&
|
|
167
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
|
|
168
|
+
explainError(createDepositMutation?.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
199
169
|
api.setOpen(false);
|
|
200
|
-
}
|
|
201
|
-
}, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_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, {}) })), status === 'confirmed' && (_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' &&
|
|
202
|
-
!warn.value &&
|
|
203
|
-
'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
204
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
205
|
-
!warn.value &&
|
|
206
|
-
'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
|
|
207
|
-
warn.value &&
|
|
208
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
209
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
210
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
211
|
-
status === 'success' ||
|
|
212
|
-
status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
|
|
213
|
-
warn.setFalse();
|
|
214
|
-
}, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
|
|
170
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
215
171
|
}
|
package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js
CHANGED
|
@@ -4,12 +4,10 @@ import Link from 'next/link';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
-
import { useBoolean } from 'usehooks-ts';
|
|
8
7
|
import { z } from 'zod';
|
|
9
8
|
import { useShallow } from 'zustand/shallow';
|
|
10
9
|
import { useCreateAiOPalawanPayDepositMutation } from '../../../../client/hooks/useAiOPalawanPayDepositMutation.js';
|
|
11
10
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
12
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
13
11
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
14
12
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
15
13
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
@@ -18,7 +16,6 @@ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSett
|
|
|
18
16
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
19
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
20
18
|
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
21
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
22
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
23
20
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
24
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
@@ -31,16 +28,11 @@ import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
|
31
28
|
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
32
29
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
33
30
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
31
|
+
import { explainError } from '../../utils.js';
|
|
34
32
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
35
33
|
export function AiOPalawanPayDeposit() {
|
|
36
34
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
37
|
-
const disclosure = useDisclosure(
|
|
38
|
-
onOpenChange(open) {
|
|
39
|
-
if (!open) {
|
|
40
|
-
form.reset();
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
});
|
|
35
|
+
const disclosure = useDisclosure();
|
|
44
36
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
45
37
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
46
38
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -64,26 +56,6 @@ export function AiOPalawanPayDeposit() {
|
|
|
64
56
|
setStatus('failed');
|
|
65
57
|
},
|
|
66
58
|
});
|
|
67
|
-
const warn = useBoolean();
|
|
68
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
69
|
-
enabled: !warn.value && status === 'success',
|
|
70
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
71
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
72
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
73
|
-
? false
|
|
74
|
-
: 1000,
|
|
75
|
-
});
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
78
|
-
setStatus('confirmed');
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
82
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
83
|
-
setStatus('failed');
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
}, [depositQuery.data?.status]);
|
|
87
59
|
const depositsCountQuery = useDepositsCountQuery();
|
|
88
60
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
89
61
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -187,29 +159,13 @@ export function AiOPalawanPayDeposit() {
|
|
|
187
159
|
globalStore.depositWithdrawal.setPromo(null);
|
|
188
160
|
}, 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) => {
|
|
189
161
|
disclosure.setOpen(details.open);
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}, 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.
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
162
|
+
if (!details.open) {
|
|
163
|
+
setStatus('waiting');
|
|
164
|
+
form.reset();
|
|
165
|
+
}
|
|
166
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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' &&
|
|
167
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
|
|
168
|
+
explainError(createDepositMutation?.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
199
169
|
api.setOpen(false);
|
|
200
|
-
}
|
|
201
|
-
}, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_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, {}) })), status === 'confirmed' && (_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' &&
|
|
202
|
-
!warn.value &&
|
|
203
|
-
'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
204
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
205
|
-
!warn.value &&
|
|
206
|
-
'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
|
|
207
|
-
warn.value &&
|
|
208
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
209
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
210
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
211
|
-
status === 'success' ||
|
|
212
|
-
status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
|
|
213
|
-
warn.setFalse();
|
|
214
|
-
}, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
|
|
170
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
215
171
|
}
|
|
@@ -4,12 +4,10 @@ import Link from 'next/link';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
-
import { useBoolean } from 'usehooks-ts';
|
|
8
7
|
import { z } from 'zod';
|
|
9
8
|
import { useShallow } from 'zustand/shallow';
|
|
10
9
|
import { useCreateAiOPayMayaDepositMutation } from '../../../../client/hooks/useAiOPayMayaDepositMutation.js';
|
|
11
10
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
12
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
13
11
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
14
12
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
15
13
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
@@ -18,7 +16,6 @@ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSett
|
|
|
18
16
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
19
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
20
18
|
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
21
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
22
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
23
20
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
24
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
@@ -31,16 +28,11 @@ import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
|
31
28
|
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
32
29
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
33
30
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
31
|
+
import { explainError } from '../../utils.js';
|
|
34
32
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
35
33
|
export function AiOPayMayaDeposit() {
|
|
36
34
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
37
|
-
const disclosure = useDisclosure(
|
|
38
|
-
onOpenChange(open) {
|
|
39
|
-
if (!open) {
|
|
40
|
-
form.reset();
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
});
|
|
35
|
+
const disclosure = useDisclosure();
|
|
44
36
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
45
37
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
46
38
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -64,26 +56,6 @@ export function AiOPayMayaDeposit() {
|
|
|
64
56
|
setStatus('failed');
|
|
65
57
|
},
|
|
66
58
|
});
|
|
67
|
-
const warn = useBoolean();
|
|
68
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
69
|
-
enabled: !warn.value && status === 'success',
|
|
70
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
71
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
72
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
73
|
-
? false
|
|
74
|
-
: 1000,
|
|
75
|
-
});
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
78
|
-
setStatus('confirmed');
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
82
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
83
|
-
setStatus('failed');
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
}, [depositQuery.data?.status]);
|
|
87
59
|
const depositsCountQuery = useDepositsCountQuery();
|
|
88
60
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
89
61
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -187,29 +159,13 @@ export function AiOPayMayaDeposit() {
|
|
|
187
159
|
globalStore.depositWithdrawal.setPromo(null);
|
|
188
160
|
}, 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) => {
|
|
189
161
|
disclosure.setOpen(details.open);
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}, 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.
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
162
|
+
if (!details.open) {
|
|
163
|
+
setStatus('waiting');
|
|
164
|
+
form.reset();
|
|
165
|
+
}
|
|
166
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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' &&
|
|
167
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
|
|
168
|
+
explainError(createDepositMutation?.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
199
169
|
api.setOpen(false);
|
|
200
|
-
}
|
|
201
|
-
}, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_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, {}) })), status === 'confirmed' && (_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' &&
|
|
202
|
-
!warn.value &&
|
|
203
|
-
'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
204
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
205
|
-
!warn.value &&
|
|
206
|
-
'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
|
|
207
|
-
warn.value &&
|
|
208
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
209
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
210
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
211
|
-
status === 'success' ||
|
|
212
|
-
status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
|
|
213
|
-
warn.setFalse();
|
|
214
|
-
}, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
|
|
170
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
215
171
|
}
|
|
@@ -4,12 +4,10 @@ import Link from 'next/link';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
-
import { useBoolean } from 'usehooks-ts';
|
|
8
7
|
import { z } from 'zod';
|
|
9
8
|
import { useShallow } from 'zustand/shallow';
|
|
10
9
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
11
10
|
import { useCreateGCashDepositMutation } from '../../../../client/hooks/useCreateGCashDepositMutation.js';
|
|
12
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
13
11
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
14
12
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
15
13
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
@@ -18,7 +16,6 @@ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSett
|
|
|
18
16
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
19
17
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
20
18
|
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
21
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
22
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
23
20
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
24
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
@@ -32,13 +29,7 @@ import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext
|
|
|
32
29
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
33
30
|
export function GCashDeposit() {
|
|
34
31
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
35
|
-
const disclosure = useDisclosure(
|
|
36
|
-
onOpenChange(open) {
|
|
37
|
-
if (!open) {
|
|
38
|
-
form.reset();
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
});
|
|
32
|
+
const disclosure = useDisclosure();
|
|
42
33
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
43
34
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
44
35
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -60,26 +51,6 @@ export function GCashDeposit() {
|
|
|
60
51
|
setStatus('failed');
|
|
61
52
|
},
|
|
62
53
|
});
|
|
63
|
-
const warn = useBoolean();
|
|
64
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
65
|
-
enabled: !warn.value && status === 'success',
|
|
66
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
67
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
68
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
69
|
-
? false
|
|
70
|
-
: 1000,
|
|
71
|
-
});
|
|
72
|
-
useEffect(() => {
|
|
73
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
74
|
-
setStatus('confirmed');
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
78
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
79
|
-
setStatus('failed');
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
}, [depositQuery.data?.status]);
|
|
83
54
|
const depositsCountQuery = useDepositsCountQuery();
|
|
84
55
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
85
56
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -180,29 +151,13 @@ export function GCashDeposit() {
|
|
|
180
151
|
globalStore.depositWithdrawal.setPromo(null);
|
|
181
152
|
}, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_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) => {
|
|
182
153
|
disclosure.setOpen(details.open);
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}, 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.
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
191
|
-
else {
|
|
154
|
+
if (!details.open) {
|
|
155
|
+
setStatus('waiting');
|
|
156
|
+
form.reset();
|
|
157
|
+
}
|
|
158
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, 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' &&
|
|
159
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
|
|
160
|
+
'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: () => {
|
|
192
161
|
api.setOpen(false);
|
|
193
|
-
}
|
|
194
|
-
}, children: _jsx(XIcon, {}) })) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && !warn.value && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-featured-icon-light-brand", children: _jsx(RefreshCcw01Icon, {}) })), status === 'success' && warn.value && (_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, {}) })), status === 'confirmed' && (_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' &&
|
|
195
|
-
!warn.value &&
|
|
196
|
-
'Didn’t see the payment window?', status === 'success' && warn.value && (_jsx(_Fragment, { children: "Are you sure you want to close this\u00A0window?" })), status === 'confirmed' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
197
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
198
|
-
!warn.value &&
|
|
199
|
-
'Sometimes the payment pop up doesn’t appear right away. Don’t worry, just click the button below to reopen it and continue your deposit.', status === 'success' &&
|
|
200
|
-
warn.value &&
|
|
201
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
202
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
203
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
204
|
-
status === 'success' ||
|
|
205
|
-
status === 'confirmed') && (_jsxs(AlertDialog.Footer, { children: [status === 'success' && !warn.value && (_jsx(Button, { asChild: true, children: _jsx("a", { href: createDepositMutation.data?.checkoutUrl ?? '', target: "_blank", rel: "noopener noreferrer", children: "Try Again" }) })), status === 'success' && warn.value && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => {
|
|
206
|
-
warn.setFalse();
|
|
207
|
-
}, children: "Go back" }), _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Continue" })) })] })), status !== 'success' && (_jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => api.setOpen(false), children: "Ok" })) }))] }))] }) })] }) })] }));
|
|
162
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
208
163
|
}
|