@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.
Files changed (78) hide show
  1. package/dist/components/AccountInfo/GoogleDisconnect.d.ts +7 -0
  2. package/dist/components/AccountInfo/GoogleDisconnect.js +11 -0
  3. package/dist/components/DepositWithdrawal/Deposit/AiOGCashDeposit/AiOGCashDeposit.js +10 -54
  4. package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +10 -54
  5. package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +10 -54
  6. package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +10 -54
  7. package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +9 -54
  8. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +9 -54
  9. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +1 -0
  10. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +191 -0
  11. package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +25 -49
  12. package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +9 -54
  13. package/dist/components/DepositWithdrawal/Deposit/MayaWebpayDeposit/MayaWebpayDeposit.js +9 -54
  14. package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +10 -54
  15. package/dist/components/Disclaimer/DisclaimerV2.js +1 -1
  16. package/dist/components/KYC/KYCVerificationStatus.lazy.js +4 -7
  17. package/dist/components/PortalProvider/CXDTokenObserver.js +11 -11
  18. package/dist/icons/LinkBrokenIcon.d.ts +2 -0
  19. package/dist/icons/LinkBrokenIcon.js +4 -0
  20. package/dist/styles/theme.css +1 -4
  21. package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
  22. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
  23. package/dist/ui/Avatar/Avatar.d.ts +9 -9
  24. package/dist/ui/Avatar/avatar.recipe.d.ts +3 -3
  25. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  26. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  27. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  28. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  29. package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
  30. package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
  31. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  32. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  33. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  34. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  35. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  36. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  37. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  38. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  39. package/dist/ui/Menu/Menu.d.ts +144 -144
  40. package/dist/ui/Menu/menu.recipe.d.ts +8 -8
  41. package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
  42. package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
  43. package/dist/ui/Popover/Popover.d.ts +154 -154
  44. package/dist/ui/Popover/popover.recipe.d.ts +14 -14
  45. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  46. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  47. package/dist/ui/Select/Select.d.ts +45 -45
  48. package/dist/ui/Select/select.recipe.d.ts +3 -3
  49. package/dist/ui/Table/Table.d.ts +21 -21
  50. package/dist/ui/Table/table.anatomy.d.ts +1 -1
  51. package/dist/ui/Table/table.recipe.d.ts +3 -3
  52. package/dist/ui/Tabs/Tabs.d.ts +15 -15
  53. package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
  54. package/dist/ui/Tooltip/Tooltip.d.ts +30 -30
  55. package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
  56. package/package.json +1 -1
  57. package/dist/components/Banner/Banner.client.d.ts +0 -12
  58. package/dist/components/Banner/Banner.client.js +0 -49
  59. package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +0 -1
  60. package/dist/components/PortalProvider/AndroidOnlyComponents.js +0 -12
  61. package/dist/components/SignIn/utils.d.ts +0 -8
  62. package/dist/components/SignIn/utils.js +0 -26
  63. package/dist/constants/Branches.d.ts +0 -2
  64. package/dist/constants/Branches.js +0 -42
  65. package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +0 -4
  66. package/dist/third-parties/FacebookPixel/FacebookPixel.js +0 -4
  67. package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
  68. package/dist/third-parties/FacebookPixel/api.js +0 -1
  69. package/dist/third-parties/FacebookPixel/index.d.ts +0 -1
  70. package/dist/third-parties/FacebookPixel/index.js +0 -1
  71. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +0 -4
  72. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +0 -4
  73. package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
  74. package/dist/third-parties/GoogleRecaptcha/api.js +0 -1
  75. package/dist/third-parties/GoogleRecaptcha/index.d.ts +0 -1
  76. package/dist/third-parties/GoogleRecaptcha/index.js +0 -1
  77. package/dist/third-parties/index.d.ts +0 -2
  78. 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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
187
- setStatus('waiting');
188
- form.reset();
189
- warn.setFalse();
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.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: () => {
191
- if (status === 'success' && !warn.value) {
192
- warn.setTrue();
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
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
200
- setStatus('waiting');
201
- form.reset();
202
- warn.setFalse();
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.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: () => {
204
- if (status === 'success' && !warn.value) {
205
- warn.setTrue();
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 === 'CREATED' &&
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 { data: account } = useAccountQuery();
8
- const accountCxd = {
9
- cxd: account?.cellxpertDetails?.cxd,
10
- };
11
- const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
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 === accountCxd.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: accountCxd.cxd,
23
+ cxd: cxdToken,
22
24
  timestamp: extendedTimestamp,
23
25
  });
24
26
  }
25
- }, account ? 100 : null);
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,2 @@
1
+ import type { ComponentPropsWithRef } from 'react';
2
+ export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;
@@ -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
+ }
@@ -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-featured-icon-light-warning: #fedf89;
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;