@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.
@@ -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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
193
- setStatus('waiting');
194
- form.reset();
195
- warn.setFalse();
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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
197
- if (status === 'success' && !warn.value) {
198
- warn.setTrue();
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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
191
- setStatus('waiting');
192
- form.reset();
193
- warn.setFalse();
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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
195
- if (status === 'success' && !warn.value) {
196
- warn.setTrue();
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 { 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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
191
- setStatus('waiting');
192
- form.reset();
193
- warn.setFalse();
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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
195
- if (status === 'success' && !warn.value) {
196
- warn.setTrue();
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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
191
- setStatus('waiting');
192
- form.reset();
193
- warn.setFalse();
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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
195
- if (status === 'success' && !warn.value) {
196
- warn.setTrue();
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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
184
- setStatus('waiting');
185
- form.reset();
186
- warn.setFalse();
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.Context, { children: (api) => (_jsx("button", { type: "button", className: "absolute top-2.5 right-2.5 flex icon:size-6 size-11 items-center justify-center text-text-quinary", onClick: () => {
188
- if (status === 'success' && !warn.value) {
189
- warn.setTrue();
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
  }