@opexa/portal-components 0.0.805 → 0.0.807
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/AccountInfo/GoogleDisconnect.d.ts +7 -0
- package/dist/components/AccountInfo/GoogleDisconnect.js +11 -0
- 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/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +191 -0
- 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/Disclaimer/DisclaimerV2.js +1 -1
- package/dist/components/KYC/KYCVerificationStatus.lazy.js +4 -7
- package/dist/components/PortalProvider/CXDTokenObserver.js +11 -11
- package/dist/icons/LinkBrokenIcon.d.ts +2 -0
- package/dist/icons/LinkBrokenIcon.js +4 -0
- package/dist/styles/theme.css +1 -4
- package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
- package/dist/ui/Avatar/Avatar.d.ts +9 -9
- package/dist/ui/Avatar/avatar.recipe.d.ts +3 -3
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
- package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
- package/dist/ui/Combobox/Combobox.d.ts +42 -42
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +33 -33
- package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Menu/Menu.d.ts +144 -144
- package/dist/ui/Menu/menu.recipe.d.ts +8 -8
- package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
- package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
- package/dist/ui/Popover/Popover.d.ts +154 -154
- package/dist/ui/Popover/popover.recipe.d.ts +14 -14
- package/dist/ui/QrCode/QrCode.d.ts +25 -25
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/ui/Select/Select.d.ts +45 -45
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/dist/ui/Tabs/Tabs.d.ts +15 -15
- package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
- package/dist/ui/Tooltip/Tooltip.d.ts +30 -30
- package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
- package/package.json +1 -1
- package/dist/components/Banner/Banner.client.d.ts +0 -12
- package/dist/components/Banner/Banner.client.js +0 -49
- package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +0 -1
- package/dist/components/PortalProvider/AndroidOnlyComponents.js +0 -12
- package/dist/components/SignIn/utils.d.ts +0 -8
- package/dist/components/SignIn/utils.js +0 -26
- package/dist/constants/Branches.d.ts +0 -2
- package/dist/constants/Branches.js +0 -42
- package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +0 -4
- package/dist/third-parties/FacebookPixel/FacebookPixel.js +0 -4
- package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
- package/dist/third-parties/FacebookPixel/api.js +0 -1
- package/dist/third-parties/FacebookPixel/index.d.ts +0 -1
- package/dist/third-parties/FacebookPixel/index.js +0 -1
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +0 -4
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +0 -4
- package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
- package/dist/third-parties/GoogleRecaptcha/api.js +0 -1
- package/dist/third-parties/GoogleRecaptcha/index.d.ts +0 -1
- package/dist/third-parties/GoogleRecaptcha/index.js +0 -1
- package/dist/third-parties/index.d.ts +0 -2
- package/dist/third-parties/index.js +0 -2
|
@@ -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 { useCreateMayaWebpayDepositMutation } from '../../../../client/hooks/useCreateMayaWebpayDepositMutation.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 MayaWebpayDeposit() {
|
|
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 MayaWebpayDeposit() {
|
|
|
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();
|
|
@@ -183,29 +154,13 @@ export function MayaWebpayDeposit() {
|
|
|
183
154
|
globalStore.depositWithdrawal.setPromo(null);
|
|
184
155
|
}, 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) => {
|
|
185
156
|
disclosure.setOpen(details.open);
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}, 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.
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
else {
|
|
157
|
+
if (!details.open) {
|
|
158
|
+
setStatus('waiting');
|
|
159
|
+
form.reset();
|
|
160
|
+
}
|
|
161
|
+
}, 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' &&
|
|
162
|
+
"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' &&
|
|
163
|
+
'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: () => {
|
|
195
164
|
api.setOpen(false);
|
|
196
|
-
}
|
|
197
|
-
}, 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' &&
|
|
198
|
-
!warn.value &&
|
|
199
|
-
'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' &&
|
|
200
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
201
|
-
!warn.value &&
|
|
202
|
-
'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' &&
|
|
203
|
-
warn.value &&
|
|
204
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
205
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
206
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
207
|
-
status === 'success' ||
|
|
208
|
-
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: () => {
|
|
209
|
-
warn.setFalse();
|
|
210
|
-
}, 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" })) }))] }))] }) })] }) })] }));
|
|
165
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
211
166
|
}
|
|
@@ -5,19 +5,16 @@ import Link from 'next/link';
|
|
|
5
5
|
import { useEffect, useState } from 'react';
|
|
6
6
|
import { Controller, useForm } from 'react-hook-form';
|
|
7
7
|
import invariant from 'tiny-invariant';
|
|
8
|
-
import { useBoolean } from 'usehooks-ts';
|
|
9
8
|
import { z } from 'zod';
|
|
10
9
|
import { useShallow } from 'zustand/shallow';
|
|
11
10
|
import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
|
|
12
11
|
import { useCreatePisoPayDepositMutation } from '../../../../client/hooks/useCreatePisoPayDepositMutation.js';
|
|
13
|
-
import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
|
|
14
12
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
15
13
|
import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
16
14
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
17
15
|
import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
|
|
18
16
|
import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
|
|
19
17
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
20
|
-
import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
|
|
21
18
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
22
19
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
23
20
|
import { ObjectType } from '../../../../services/ObjectType.js';
|
|
@@ -30,16 +27,11 @@ import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
|
30
27
|
import { getDepositsCountQueryKey } from '../../../../utils/queryKeys.js';
|
|
31
28
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
32
29
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
30
|
+
import { explainError } from '../../utils.js';
|
|
33
31
|
import { AvailablePromos } from '../AvailablePromos.js';
|
|
34
32
|
export function PisoPayDeposit() {
|
|
35
33
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
36
|
-
const disclosure = useDisclosure(
|
|
37
|
-
onOpenChange(open) {
|
|
38
|
-
if (!open) {
|
|
39
|
-
form.reset();
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
});
|
|
34
|
+
const disclosure = useDisclosure();
|
|
43
35
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
44
36
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
45
37
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
@@ -63,26 +55,6 @@ export function PisoPayDeposit() {
|
|
|
63
55
|
setStatus('failed');
|
|
64
56
|
},
|
|
65
57
|
});
|
|
66
|
-
const warn = useBoolean();
|
|
67
|
-
const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
|
|
68
|
-
enabled: !warn.value && status === 'success',
|
|
69
|
-
refetchInterval: (ctx) => ctx.state.data?.status === 'CONFIRMED' ||
|
|
70
|
-
ctx.state.data?.status === 'REJECTED' ||
|
|
71
|
-
ctx.state.data?.status === 'CANCELLED'
|
|
72
|
-
? false
|
|
73
|
-
: 1000,
|
|
74
|
-
});
|
|
75
|
-
useEffect(() => {
|
|
76
|
-
if (depositQuery.data?.status === 'CONFIRMED') {
|
|
77
|
-
setStatus('confirmed');
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
if (depositQuery.data?.status === 'REJECTED' ||
|
|
81
|
-
depositQuery.data?.status === 'CANCELLED') {
|
|
82
|
-
setStatus('failed');
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
}, [depositQuery.data?.status]);
|
|
86
58
|
const depositsCountQuery = useDepositsCountQuery();
|
|
87
59
|
const depositsCount = depositsCountQuery.data ?? 0;
|
|
88
60
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
@@ -196,29 +168,13 @@ export function PisoPayDeposit() {
|
|
|
196
168
|
globalStore.depositWithdrawal.setPromo(null);
|
|
197
169
|
}, 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) => {
|
|
198
170
|
disclosure.setOpen(details.open);
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
}, 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.
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
else {
|
|
171
|
+
if (!details.open) {
|
|
172
|
+
setStatus('waiting');
|
|
173
|
+
form.reset();
|
|
174
|
+
}
|
|
175
|
+
}, 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' &&
|
|
176
|
+
"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' &&
|
|
177
|
+
explainError(createDepositMutation?.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
208
178
|
api.setOpen(false);
|
|
209
|
-
}
|
|
210
|
-
}, 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' &&
|
|
211
|
-
!warn.value &&
|
|
212
|
-
'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' &&
|
|
213
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
214
|
-
!warn.value &&
|
|
215
|
-
'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' &&
|
|
216
|
-
warn.value &&
|
|
217
|
-
'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
|
|
218
|
-
'Your deposit has been successfully processed.', status === 'failed' &&
|
|
219
|
-
'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
|
|
220
|
-
status === 'success' ||
|
|
221
|
-
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: () => {
|
|
222
|
-
warn.setFalse();
|
|
223
|
-
}, 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" })) }))] }))] }) })] }) })] }));
|
|
179
|
+
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
224
180
|
}
|
|
@@ -48,7 +48,7 @@ export function DisclaimerV2(props) {
|
|
|
48
48
|
sessionStorage.clear();
|
|
49
49
|
},
|
|
50
50
|
});
|
|
51
|
-
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[450px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-2 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
51
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[450px] lg:rounded-xl", "aria-label": `${props.siteName} Player Disclaimer`, "aria-describedby": "disclaimer-description", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-2 text-sm", id: "disclaimer-description", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
52
52
|
if (e.checked === 'indeterminate')
|
|
53
53
|
return;
|
|
54
54
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
@@ -19,18 +19,15 @@ export function KYCVerificationStatus() {
|
|
|
19
19
|
const icons = status === 'PENDING' ? bellIcon : alertIcon;
|
|
20
20
|
return (_jsx(Dialog.Root, { open: globalStore.kycVerificationStatus.open, onOpenChange: (details) => {
|
|
21
21
|
globalStore.kycVerificationStatus.setOpen(details.open);
|
|
22
|
-
}, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED'
|
|
23
|
-
(status === 'CREATED' && 'Verification Required')] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
|
|
22
|
+
}, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' && 'Verification Required'] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
|
|
24
23
|
`Your account verification is still under review. Please wait
|
|
25
24
|
until it's approved before you can continue playing or
|
|
26
25
|
depositing.`, status === 'REJECTED' &&
|
|
27
|
-
'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED'
|
|
28
|
-
(status === '
|
|
29
|
-
'Your account is not yet verified. Please complete the verification process to continue playing or depositing.')] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
|
|
26
|
+
'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
|
|
27
|
+
'Your account is not yet verified. Please complete the verification process to continue playing or depositing.'] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
|
|
30
28
|
globalStore.kycVerificationStatus.setOpen(false);
|
|
31
29
|
globalStore.kyc.setOpen(true);
|
|
32
|
-
}, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED'
|
|
33
|
-
(status === 'CREATED' && 'Verify Now')] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
|
|
30
|
+
}, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
|
|
34
31
|
globalStore.kycVerificationStatus.setOpen(false);
|
|
35
32
|
}, children: "Close" })] }) }) })] }) }));
|
|
36
33
|
}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { addHours } from 'date-fns';
|
|
3
3
|
import { clamp } from 'lodash-es';
|
|
4
|
+
import { useSearchParams } from 'next/navigation';
|
|
4
5
|
import { useLocalStorage, useTimeout } from 'usehooks-ts';
|
|
5
6
|
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
6
7
|
export function CXDTokenObserver() {
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const [cxd, setCxd, removeCxd] = useLocalStorage('
|
|
8
|
+
const searchParams = useSearchParams();
|
|
9
|
+
const cxdToken = searchParams.get('cxd');
|
|
10
|
+
const accountQuery = useAccountQuery();
|
|
11
|
+
const account = accountQuery.data;
|
|
12
|
+
const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
|
|
12
13
|
const now = new Date();
|
|
14
|
+
const shouldTimeoutRun = cxdToken && account;
|
|
13
15
|
const removeCxdUntilInMs = cxd?.timestamp
|
|
14
16
|
? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
|
|
15
17
|
: 0;
|
|
16
18
|
useTimeout(() => {
|
|
17
|
-
const isSame = cxd?.cxd ===
|
|
19
|
+
const isSame = cxd?.cxd === cxdToken;
|
|
18
20
|
if (!isSame) {
|
|
19
21
|
const extendedTimestamp = addHours(new Date(), 6).getTime();
|
|
20
22
|
setCxd({
|
|
21
|
-
cxd:
|
|
23
|
+
cxd: cxdToken,
|
|
22
24
|
timestamp: extendedTimestamp,
|
|
23
25
|
});
|
|
24
26
|
}
|
|
25
|
-
},
|
|
26
|
-
useTimeout(() =>
|
|
27
|
-
removeCxd();
|
|
28
|
-
}, account ? removeCxdUntilInMs : null);
|
|
27
|
+
}, shouldTimeoutRun ? 100 : null);
|
|
28
|
+
useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
|
|
29
29
|
return null;
|
|
30
30
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function LinkBrokenIcon(props) {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
4
|
+
}
|
package/dist/styles/theme.css
CHANGED
|
@@ -264,13 +264,10 @@
|
|
|
264
264
|
--color-text-warning-primary: #f79009;
|
|
265
265
|
--color-text-warning-primary-600: #fdb022;
|
|
266
266
|
--color-text-error-primary: #f04438;
|
|
267
|
-
--color-dark-text: #cccccc;
|
|
268
|
-
|
|
269
267
|
--color-text-featured-icon-light-success: #abefc6;
|
|
270
268
|
--color-text-featured-icon-light-error: #fecdca;
|
|
271
269
|
--color-text-featured-icon-light-warning: #fedf89;
|
|
272
|
-
--color-text
|
|
273
|
-
--color-text-featured-icon-light-brand: #E4D5A4;
|
|
270
|
+
--color-dark-text: #cccccc;
|
|
274
271
|
|
|
275
272
|
--color-border-primary: #373a41;
|
|
276
273
|
--color-border-secondary: #22262f;
|