@opexa/portal-components 0.0.809 → 0.0.811

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 (178) hide show
  1. package/dist/assets/providers/alize.png +0 -0
  2. package/dist/assets/providers/bigtime-gaming.png +0 -0
  3. package/dist/assets/providers/bng.png +0 -0
  4. package/dist/assets/providers/boongo.png +0 -0
  5. package/dist/assets/providers/btg.png +0 -0
  6. package/dist/assets/providers/cq9.png +0 -0
  7. package/dist/assets/providers/darwin.png +0 -0
  8. package/dist/assets/providers/digitain.png +0 -0
  9. package/dist/assets/providers/evolution.png +0 -0
  10. package/dist/assets/providers/fantasma-games.png +0 -0
  11. package/dist/assets/providers/fc.png +0 -0
  12. package/dist/assets/providers/fp.png +0 -0
  13. package/dist/assets/providers/habanero.png +0 -0
  14. package/dist/assets/providers/hacksaw.png +0 -0
  15. package/dist/assets/providers/jdb.png +0 -0
  16. package/dist/assets/providers/jili.png +0 -0
  17. package/dist/assets/providers/leap.png +0 -0
  18. package/dist/assets/providers/live-22-metaverse.png +0 -0
  19. package/dist/assets/providers/netent.png +0 -0
  20. package/dist/assets/providers/no-limit.png +0 -0
  21. package/dist/assets/providers/pg.png +0 -0
  22. package/dist/assets/providers/pgsoft.png +0 -0
  23. package/dist/assets/providers/pragmatic-play.png +0 -0
  24. package/dist/assets/providers/realtime-gaming.png +0 -0
  25. package/dist/assets/providers/redtiger.png +0 -0
  26. package/dist/assets/providers/rtg.png +0 -0
  27. package/dist/assets/providers/sagaming.png +0 -0
  28. package/dist/components/Banner/Banner.client.d.ts +12 -0
  29. package/dist/components/Banner/Banner.client.js +49 -0
  30. package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +11 -0
  31. package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +55 -0
  32. package/dist/components/DigitainLauncher/Loading.d.ts +1 -0
  33. package/dist/components/DigitainLauncher/Loading.js +5 -0
  34. package/dist/components/DigitainLauncher/utils.js +4 -1
  35. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -0
  36. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -0
  37. package/dist/components/KYC/BasicInformation.d.ts +1 -0
  38. package/dist/components/KYC/BasicInformation.js +101 -0
  39. package/dist/components/KYC/IdentityVerification.d.ts +1 -0
  40. package/dist/components/KYC/IdentityVerification.js +120 -0
  41. package/dist/components/KYC/Indicator.d.ts +1 -0
  42. package/dist/components/KYC/Indicator.js +8 -0
  43. package/dist/components/KYC/KYC.lazy.d.ts +6 -0
  44. package/dist/components/KYC/KYC.lazy.js +45 -0
  45. package/dist/components/KYC/KYCContext.d.ts +6 -0
  46. package/dist/components/KYC/KYCContext.js +2 -0
  47. package/dist/components/KYC/KYCDefault/BasicInformation.d.ts +1 -0
  48. package/dist/components/KYC/KYCDefault/BasicInformation.js +101 -0
  49. package/dist/components/KYC/KYCVerificationStatus.d.ts +1 -0
  50. package/dist/components/KYC/KYCVerificationStatus.js +10 -0
  51. package/dist/components/KYC/KYCVerificationStatus.lazy.d.ts +1 -0
  52. package/dist/components/KYC/KYCVerificationStatus.lazy.js +36 -0
  53. package/dist/components/KYC/PersonalInformation.d.ts +1 -0
  54. package/dist/components/KYC/PersonalInformation.js +122 -0
  55. package/dist/components/KYC/useKYC.d.ts +25 -0
  56. package/dist/components/KYC/useKYC.js +38 -0
  57. package/dist/components/KYCNotRequired/KYCNotRequired.d.ts +0 -0
  58. package/dist/components/KYCNotRequired/KYCNotRequired.js +1 -0
  59. package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +1 -0
  60. package/dist/components/PortalProvider/AndroidOnlyComponents.js +12 -0
  61. package/dist/components/PortalProvider/CXDTokenObserver.d.ts +1 -0
  62. package/dist/components/PortalProvider/CXDTokenObserver.js +30 -0
  63. package/dist/components/PortalProvider/LinkGoogleAccountObserver.d.ts +1 -0
  64. package/dist/components/PortalProvider/LinkGoogleAccountObserver.js +29 -0
  65. package/dist/components/Quests/MultiWageringQuest.d.ts +1 -0
  66. package/dist/components/Quests/MultiWageringQuest.js +111 -0
  67. package/dist/components/SessionWatcher/SessionWatcher.d.ts +1 -0
  68. package/dist/components/SessionWatcher/SessionWatcher.js +20 -0
  69. package/dist/components/SessionWatcher/index.d.ts +1 -0
  70. package/dist/components/SessionWatcher/index.js +1 -0
  71. package/dist/components/SignIn/utils.d.ts +8 -0
  72. package/dist/components/SignIn/utils.js +26 -0
  73. package/dist/constants/Branches.d.ts +2 -0
  74. package/dist/constants/Branches.js +42 -0
  75. package/dist/images/game-providers/ALPHACHINKO.png +0 -0
  76. package/dist/images/responsible-gaming-yellow.png +0 -0
  77. package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +4 -0
  78. package/dist/third-parties/FacebookPixel/FacebookPixel.js +4 -0
  79. package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
  80. package/dist/third-parties/FacebookPixel/api.js +1 -0
  81. package/dist/third-parties/FacebookPixel/index.d.ts +1 -0
  82. package/dist/third-parties/FacebookPixel/index.js +1 -0
  83. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +4 -0
  84. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +4 -0
  85. package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
  86. package/dist/third-parties/GoogleRecaptcha/api.js +1 -0
  87. package/dist/third-parties/GoogleRecaptcha/index.d.ts +1 -0
  88. package/dist/third-parties/GoogleRecaptcha/index.js +1 -0
  89. package/dist/third-parties/index.d.ts +2 -0
  90. package/dist/third-parties/index.js +2 -0
  91. package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
  92. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
  93. package/dist/ui/Avatar/Avatar.d.ts +9 -9
  94. package/dist/ui/Avatar/avatar.recipe.d.ts +3 -3
  95. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  96. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  97. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  98. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  99. package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
  100. package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
  101. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  102. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  103. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  104. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  105. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  106. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  107. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  108. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  109. package/dist/ui/Menu/Menu.d.ts +144 -144
  110. package/dist/ui/Menu/menu.recipe.d.ts +8 -8
  111. package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
  112. package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
  113. package/dist/ui/Popover/Popover.d.ts +154 -154
  114. package/dist/ui/Popover/popover.recipe.d.ts +14 -14
  115. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  116. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  117. package/dist/ui/Select/Select.d.ts +45 -45
  118. package/dist/ui/Select/select.recipe.d.ts +3 -3
  119. package/dist/ui/Table/Table.d.ts +21 -21
  120. package/dist/ui/Table/table.anatomy.d.ts +1 -1
  121. package/dist/ui/Table/table.recipe.d.ts +3 -3
  122. package/dist/ui/Tabs/Tabs.d.ts +15 -15
  123. package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
  124. package/dist/ui/Tooltip/Tooltip.d.ts +30 -30
  125. package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
  126. package/package.json +1 -1
  127. package/dist/components/DepositWithdrawal/Deposit__next/AiOGCashDeposit/AiOGCashDeposit.d.ts +0 -1
  128. package/dist/components/DepositWithdrawal/Deposit__next/AiOGCashDeposit/AiOGCashDeposit.js +0 -217
  129. package/dist/components/DepositWithdrawal/Deposit__next/AiOGrabPayDeposit/AiOGrabPayDeposit.d.ts +0 -1
  130. package/dist/components/DepositWithdrawal/Deposit__next/AiOGrabPayDeposit/AiOGrabPayDeposit.js +0 -215
  131. package/dist/components/DepositWithdrawal/Deposit__next/AiOPalawanPayDeposit/AiOPalawanPayDeposit.d.ts +0 -1
  132. package/dist/components/DepositWithdrawal/Deposit__next/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +0 -215
  133. package/dist/components/DepositWithdrawal/Deposit__next/AiOPayMayaDeposit/AiOPayMayaDeposit.d.ts +0 -1
  134. package/dist/components/DepositWithdrawal/Deposit__next/AiOPayMayaDeposit/AiOPayMayaDeposit.js +0 -215
  135. package/dist/components/DepositWithdrawal/Deposit__next/AvailablePromos.d.ts +0 -8
  136. package/dist/components/DepositWithdrawal/Deposit__next/AvailablePromos.js +0 -33
  137. package/dist/components/DepositWithdrawal/Deposit__next/Deposit.d.ts +0 -1
  138. package/dist/components/DepositWithdrawal/Deposit__next/Deposit.js +0 -120
  139. package/dist/components/DepositWithdrawal/Deposit__next/GCashDeposit/GCashDeposit.d.ts +0 -1
  140. package/dist/components/DepositWithdrawal/Deposit__next/GCashDeposit/GCashDeposit.js +0 -208
  141. package/dist/components/DepositWithdrawal/Deposit__next/GCashWebpayDeposit/GCashWebpayDeposit.d.ts +0 -1
  142. package/dist/components/DepositWithdrawal/Deposit__next/GCashWebpayDeposit/GCashWebpayDeposit.js +0 -210
  143. package/dist/components/DepositWithdrawal/Deposit__next/LibanganDeposit/LibanganDeposit.d.ts +0 -1
  144. package/dist/components/DepositWithdrawal/Deposit__next/LibanganDeposit/LibanganDeposit.js +0 -210
  145. package/dist/components/DepositWithdrawal/Deposit__next/MayaAppDeposit/MayaAppDeposit.d.ts +0 -1
  146. package/dist/components/DepositWithdrawal/Deposit__next/MayaAppDeposit/MayaAppDeposit.js +0 -157
  147. package/dist/components/DepositWithdrawal/Deposit__next/MayaDeposit/MayaDeposit.d.ts +0 -1
  148. package/dist/components/DepositWithdrawal/Deposit__next/MayaDeposit/MayaDeposit.js +0 -208
  149. package/dist/components/DepositWithdrawal/Deposit__next/MayaWebpayDeposit/MayaWebpayDeposit.d.ts +0 -1
  150. package/dist/components/DepositWithdrawal/Deposit__next/MayaWebpayDeposit/MayaWebpayDeposit.js +0 -211
  151. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDeposit.d.ts +0 -1
  152. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDeposit.js +0 -10
  153. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositAlert.d.ts +0 -1
  154. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositAlert.js +0 -99
  155. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositContext.d.ts +0 -25
  156. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositContext.js +0 -2
  157. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositDetails.d.ts +0 -1
  158. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositDetails.js +0 -19
  159. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositForm.d.ts +0 -1
  160. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/OnlineBankDepositForm.js +0 -115
  161. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/useOnlineBankDeposit.d.ts +0 -13
  162. package/dist/components/DepositWithdrawal/Deposit__next/OnlineBankDeposit/useOnlineBankDeposit.js +0 -81
  163. package/dist/components/DepositWithdrawal/Deposit__next/PisoPayDeposit/PisoPayDeposit.d.ts +0 -1
  164. package/dist/components/DepositWithdrawal/Deposit__next/PisoPayDeposit/PisoPayDeposit.js +0 -224
  165. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDeposit.d.ts +0 -1
  166. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDeposit.js +0 -10
  167. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositAlert.d.ts +0 -1
  168. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositAlert.js +0 -99
  169. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositContext.d.ts +0 -25
  170. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositContext.js +0 -2
  171. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositDetails.d.ts +0 -1
  172. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositDetails.js +0 -17
  173. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositForm.d.ts +0 -1
  174. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHDepositForm.js +0 -116
  175. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHQRCode.d.ts +0 -3
  176. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/QRPHQRCode.js +0 -69
  177. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/useQRPHDeposit.d.ts +0 -13
  178. package/dist/components/DepositWithdrawal/Deposit__next/QRPHDeposit/useQRPHDeposit.js +0 -85
@@ -1,208 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { zodResolver } from '@hookform/resolvers/zod';
3
- import Link from 'next/link';
4
- import { useEffect, useState } from 'react';
5
- import { Controller, useForm } from 'react-hook-form';
6
- import invariant from 'tiny-invariant';
7
- import { useBoolean } from 'usehooks-ts';
8
- import { z } from 'zod';
9
- import { useShallow } from 'zustand/shallow';
10
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
11
- import { useCreateGCashDepositMutation } from '../../../../client/hooks/useCreateGCashDepositMutation.js';
12
- import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
13
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
14
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
15
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
16
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
17
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
18
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
19
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
20
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
21
- import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
22
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
23
- import { XIcon } from '../../../../icons/XIcon.js';
24
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
25
- import { Button } from '../../../../ui/Button/index.js';
26
- import { Field } from '../../../../ui/Field/index.js';
27
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
28
- import { Portal } from '../../../../ui/Portal/index.js';
29
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
30
- import { AmountChoices } from '../../AmountChoices.js';
31
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
32
- import { AvailablePromos } from '../AvailablePromos.js';
33
- export function GCashDeposit() {
34
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
35
- const disclosure = useDisclosure({
36
- onOpenChange(open) {
37
- if (!open) {
38
- form.reset();
39
- }
40
- },
41
- });
42
- const globalStore = useGlobalStore(useShallow((ctx) => ({
43
- depositWithdrawal: ctx.depositWithdrawal,
44
- kycVerificationStatus: ctx.kycVerificationStatus,
45
- })));
46
- const verificationQuery = useMemberVerificationQuery();
47
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
48
- const [status, setStatus] = useState('waiting');
49
- const createDepositMutation = useCreateGCashDepositMutation({
50
- onMutate() {
51
- disclosure.setOpen(true);
52
- setStatus('processing');
53
- },
54
- onSuccess(data) {
55
- invariant(data.checkoutUrl);
56
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
57
- setStatus('success');
58
- },
59
- onError() {
60
- setStatus('failed');
61
- },
62
- });
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
- const depositsCountQuery = useDepositsCountQuery();
84
- const depositsCount = depositsCountQuery.data ?? 0;
85
- const paymentSettingsQuery = usePaymentSettingsQuery();
86
- const paymentSettings = paymentSettingsQuery.data;
87
- const gatewaySettings = paymentSettings?.gcashDepositGatewaySettings;
88
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
89
- const minimumAmount = depositsCount <= 0
90
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
91
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
92
- const promosQuery = useAvailablePromosQuery();
93
- const promos = promosQuery.data ?? [];
94
- const definition = z
95
- .object({
96
- amount: z.string().superRefine((val, ctx) => {
97
- const n = parseDecimal(val, 0);
98
- if (n < minimumAmount) {
99
- ctx.addIssue({
100
- type: 'number',
101
- code: z.ZodIssueCode.too_small,
102
- inclusive: true,
103
- minimum: minimumAmount,
104
- message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
105
- });
106
- }
107
- if (n > maximumAmount) {
108
- ctx.addIssue({
109
- type: 'number',
110
- code: z.ZodIssueCode.too_big,
111
- inclusive: true,
112
- maximum: maximumAmount,
113
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
114
- });
115
- }
116
- }),
117
- promo: z.string().optional().nullable(),
118
- })
119
- .superRefine((value, ctx) => {
120
- const promo = promos.find((o) => o.id === value.promo);
121
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
122
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
123
- const amount = parseDecimal(value.amount, 0);
124
- if (promo && amount < promoMinAmount) {
125
- ctx.addIssue({
126
- path: ['amount'],
127
- code: z.ZodIssueCode.custom,
128
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
129
- });
130
- }
131
- if (promo && amount > promoMaxAmount) {
132
- ctx.addIssue({
133
- path: ['amount'],
134
- code: z.ZodIssueCode.custom,
135
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
136
- });
137
- }
138
- });
139
- const form = useForm({
140
- mode: 'all',
141
- resolver: zodResolver(definition),
142
- defaultValues: {
143
- amount: '0',
144
- promo: globalStore.depositWithdrawal.promo ?? null,
145
- },
146
- });
147
- useEffect(() => {
148
- if (minimumAmount) {
149
- form.reset({
150
- amount: minimumAmount.toString(),
151
- promo: form.getValues('promo') ?? null,
152
- });
153
- }
154
- }, [form, minimumAmount]);
155
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
160
- globalStore.kycVerificationStatus.setOpen(true);
161
- return;
162
- }
163
- else {
164
- createDepositMutation.reset();
165
- createDepositMutation.mutate({
166
- amount: data.amount.toString(),
167
- promo: data.promo ?? undefined,
168
- });
169
- }
170
- }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
171
- o.field.onChange(details.value);
172
- }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
173
- form.setValue('amount', value.toString(), {
174
- shouldTouch: true,
175
- shouldDirty: true,
176
- shouldValidate: true,
177
- });
178
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
179
- o.field.onChange(value);
180
- globalStore.depositWithdrawal.setPromo(null);
181
- }, 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
- 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 {
192
- 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" })) }))] }))] }) })] }) })] }));
208
- }
@@ -1 +0,0 @@
1
- export declare function GCashWebpayDeposit(): import("react/jsx-runtime").JSX.Element;
@@ -1,210 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { zodResolver } from '@hookform/resolvers/zod';
3
- import Link from 'next/link';
4
- import { useEffect, useState } from 'react';
5
- import { Controller, useForm } from 'react-hook-form';
6
- import invariant from 'tiny-invariant';
7
- import { useBoolean } from 'usehooks-ts';
8
- import { z } from 'zod';
9
- import { useShallow } from 'zustand/shallow';
10
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
11
- import { useCreateGCashWebpayDepositMutation } from '../../../../client/hooks/useCreateGCashWebpayDepositMutation.js';
12
- import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
13
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
14
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
15
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
16
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
17
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
18
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
19
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
20
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
21
- import { RefreshCcw01Icon } from '../../../../icons/RefreshCcw01Icon.js';
22
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
23
- import { XIcon } from '../../../../icons/XIcon.js';
24
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
25
- import { Button } from '../../../../ui/Button/index.js';
26
- import { Field } from '../../../../ui/Field/index.js';
27
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
28
- import { Portal } from '../../../../ui/Portal/index.js';
29
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
30
- import { AmountChoices } from '../../AmountChoices.js';
31
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
32
- import { AvailablePromos } from '../AvailablePromos.js';
33
- export function GCashWebpayDeposit() {
34
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
35
- const disclosure = useDisclosure({
36
- onOpenChange(open) {
37
- if (!open) {
38
- form.reset();
39
- }
40
- },
41
- });
42
- const globalStore = useGlobalStore(useShallow((ctx) => ({
43
- depositWithdrawal: ctx.depositWithdrawal,
44
- kycVerificationStatus: ctx.kycVerificationStatus,
45
- })));
46
- const verificationQuery = useMemberVerificationQuery();
47
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
48
- const [status, setStatus] = useState('waiting');
49
- const createDepositMutation = useCreateGCashWebpayDepositMutation({
50
- onMutate() {
51
- disclosure.setOpen(true);
52
- setStatus('processing');
53
- },
54
- onSuccess(data) {
55
- invariant(data.checkoutUrl);
56
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
57
- setStatus('success');
58
- },
59
- onError() {
60
- setStatus('failed');
61
- },
62
- });
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
- const depositsCountQuery = useDepositsCountQuery();
84
- const depositsCount = depositsCountQuery.data ?? 0;
85
- const paymentSettingsQuery = usePaymentSettingsQuery();
86
- const paymentSettings = paymentSettingsQuery.data;
87
- const gatewaySettings = paymentSettings?.gcashWebpayDepositGatewaySettings;
88
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
89
- const minimumAmount = depositsCount <= 0
90
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
91
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
92
- const promosQuery = useAvailablePromosQuery();
93
- const promos = promosQuery.data ?? [];
94
- const definition = z
95
- .object({
96
- amount: z.string().superRefine((val, ctx) => {
97
- const n = parseDecimal(val, 0);
98
- if (n < minimumAmount) {
99
- ctx.addIssue({
100
- type: 'number',
101
- code: z.ZodIssueCode.too_small,
102
- inclusive: true,
103
- minimum: minimumAmount,
104
- message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
105
- });
106
- }
107
- if (n > maximumAmount) {
108
- ctx.addIssue({
109
- type: 'number',
110
- code: z.ZodIssueCode.too_big,
111
- inclusive: true,
112
- maximum: maximumAmount,
113
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
114
- });
115
- }
116
- }),
117
- promo: z.string().optional().nullable(),
118
- })
119
- .superRefine((value, ctx) => {
120
- const promo = promos.find((o) => o.id === value.promo);
121
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
122
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
123
- const amount = parseDecimal(value.amount, 0);
124
- if (promo && amount < promoMinAmount) {
125
- ctx.addIssue({
126
- path: ['amount'],
127
- code: z.ZodIssueCode.custom,
128
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
129
- });
130
- }
131
- if (promo && amount > promoMaxAmount) {
132
- ctx.addIssue({
133
- path: ['amount'],
134
- code: z.ZodIssueCode.custom,
135
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
136
- });
137
- }
138
- });
139
- const form = useForm({
140
- mode: 'all',
141
- resolver: zodResolver(definition),
142
- defaultValues: {
143
- amount: '0',
144
- promo: globalStore.depositWithdrawal.promo ?? null,
145
- },
146
- });
147
- useEffect(() => {
148
- if (minimumAmount) {
149
- form.reset({
150
- amount: minimumAmount.toString(),
151
- promo: form.getValues('promo') ?? null,
152
- });
153
- }
154
- }, [form, minimumAmount]);
155
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
160
- globalStore.kycVerificationStatus.setOpen(true);
161
- return;
162
- }
163
- else {
164
- createDepositMutation.reset();
165
- createDepositMutation.mutate({
166
- amount: data.amount.toString(),
167
- promo: data.promo ?? undefined,
168
- successRedirectionUrl: window.location.origin,
169
- cancelRedirectionUrl: window.location.origin,
170
- });
171
- }
172
- }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
173
- o.field.onChange(details.value);
174
- }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
175
- form.setValue('amount', value.toString(), {
176
- shouldTouch: true,
177
- shouldDirty: true,
178
- shouldValidate: true,
179
- });
180
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
181
- o.field.onChange(value);
182
- globalStore.depositWithdrawal.setPromo(null);
183
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: disclosure.open, onOpenChange: (details) => {
184
- disclosure.setOpen(details.open);
185
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
186
- setStatus('waiting');
187
- form.reset();
188
- warn.setFalse();
189
- }, 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: () => {
190
- if (status === 'success' && !warn.value) {
191
- warn.setTrue();
192
- }
193
- else {
194
- api.setOpen(false);
195
- }
196
- }, 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' &&
197
- !warn.value &&
198
- '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' &&
199
- "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
200
- !warn.value &&
201
- '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' &&
202
- warn.value &&
203
- 'Closing this window might cancel your current deposit. Do you want to continue?', status === 'confirmed' &&
204
- 'Your deposit has been successfully processed.', status === 'failed' &&
205
- 'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' ||
206
- status === 'success' ||
207
- 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: () => {
208
- warn.setFalse();
209
- }, 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" })) }))] }))] }) })] }) })] }));
210
- }
@@ -1 +0,0 @@
1
- export declare function LibanganDeposit(): import("react/jsx-runtime").JSX.Element;