@opexa/portal-components 0.0.946 → 0.0.947

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 (189) hide show
  1. package/dist/client/hooks/useGlobalStore.d.ts +1 -0
  2. package/dist/client/hooks/useGlobalStore.js +13 -0
  3. package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +2 -21
  4. package/dist/components/KYC/KYCDefault/KYCDefault.d.ts +1 -0
  5. package/dist/components/KYC/KYCDefault/KYCDefault.js +3 -2
  6. package/dist/components/KYC/KYCDefault/PersonalInformation.js +7 -0
  7. package/dist/components/KYC/KYCDefault/useKYCDefault.d.ts +2 -1
  8. package/dist/components/KYC/KYCDefault/useKYCDefault.js +2 -1
  9. package/dist/components/KYC/KYCReview.d.ts +1 -0
  10. package/dist/components/KYC/KYCReview.js +20 -0
  11. package/dist/components/SingleSignOn/SingleSignOn.d.ts +1 -1
  12. package/dist/components/SingleSignOn/SingleSignOn.js +15 -7
  13. package/dist/handlers/index.d.ts +2 -2
  14. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  15. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  16. package/package.json +1 -1
  17. package/dist/assets/providers/alize.png +0 -0
  18. package/dist/assets/providers/bigtime-gaming.png +0 -0
  19. package/dist/assets/providers/bng.png +0 -0
  20. package/dist/assets/providers/boongo.png +0 -0
  21. package/dist/assets/providers/btg.png +0 -0
  22. package/dist/assets/providers/cq9.png +0 -0
  23. package/dist/assets/providers/darwin.png +0 -0
  24. package/dist/assets/providers/digitain.png +0 -0
  25. package/dist/assets/providers/evolution.png +0 -0
  26. package/dist/assets/providers/fantasma-games.png +0 -0
  27. package/dist/assets/providers/fc.png +0 -0
  28. package/dist/assets/providers/fp.png +0 -0
  29. package/dist/assets/providers/habanero.png +0 -0
  30. package/dist/assets/providers/hacksaw.png +0 -0
  31. package/dist/assets/providers/jdb.png +0 -0
  32. package/dist/assets/providers/jili.png +0 -0
  33. package/dist/assets/providers/leap.png +0 -0
  34. package/dist/assets/providers/live-22-metaverse.png +0 -0
  35. package/dist/assets/providers/netent.png +0 -0
  36. package/dist/assets/providers/no-limit.png +0 -0
  37. package/dist/assets/providers/pg.png +0 -0
  38. package/dist/assets/providers/pgsoft.png +0 -0
  39. package/dist/assets/providers/pragmatic-play.png +0 -0
  40. package/dist/assets/providers/realtime-gaming.png +0 -0
  41. package/dist/assets/providers/redtiger.png +0 -0
  42. package/dist/assets/providers/rtg.png +0 -0
  43. package/dist/assets/providers/sagaming.png +0 -0
  44. package/dist/client/hooks/useAiOGCashDepositMutation.d.ts +0 -4
  45. package/dist/client/hooks/useAiOGCashDepositMutation.js +0 -90
  46. package/dist/client/hooks/useAiOGrabPayDepositMutation.d.ts +0 -4
  47. package/dist/client/hooks/useAiOGrabPayDepositMutation.js +0 -80
  48. package/dist/client/hooks/useAiOPalawanPayDepositMutation.d.ts +0 -4
  49. package/dist/client/hooks/useAiOPalawanPayDepositMutation.js +0 -80
  50. package/dist/client/hooks/useAiOPayMayaDepositMutation.d.ts +0 -4
  51. package/dist/client/hooks/useAiOPayMayaDepositMutation.js +0 -80
  52. package/dist/components/Banner/Banner.client.d.ts +0 -12
  53. package/dist/components/Banner/Banner.client.js +0 -49
  54. package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +0 -11
  55. package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +0 -55
  56. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositAlert.d.ts +0 -1
  57. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositAlert.js +0 -99
  58. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.d.ts +0 -1
  59. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.js +0 -17
  60. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.d.ts +0 -1
  61. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.js +0 -116
  62. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHQRCode.d.ts +0 -3
  63. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHQRCode.js +0 -69
  64. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDeposit.d.ts +0 -1
  65. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDeposit.js +0 -10
  66. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositAlert.d.ts +0 -1
  67. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositAlert.js +0 -99
  68. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts +0 -25
  69. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.js +0 -2
  70. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositDetails.d.ts +0 -1
  71. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositDetails.js +0 -17
  72. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositForm.d.ts +0 -1
  73. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositForm.js +0 -116
  74. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHQRCode.d.ts +0 -3
  75. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHQRCode.js +0 -69
  76. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts +0 -13
  77. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.js +0 -85
  78. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGCashDeposit/AiOGCashDeposit.d.ts +0 -1
  79. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGCashDeposit/AiOGCashDeposit.js +0 -173
  80. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGrabPayDeposit/AiOGrabPayDeposit.d.ts +0 -1
  81. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOGrabPayDeposit/AiOGrabPayDeposit.js +0 -171
  82. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPalawanPayDeposit/AiOPalawanPayDeposit.d.ts +0 -1
  83. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +0 -171
  84. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPayMayaDeposit/AiOPayMayaDeposit.d.ts +0 -1
  85. package/dist/components/DepositWithdrawal/Deposit__legacy/AiOPayMayaDeposit/AiOPayMayaDeposit.js +0 -171
  86. package/dist/components/DepositWithdrawal/Deposit__legacy/AvailablePromos.d.ts +0 -8
  87. package/dist/components/DepositWithdrawal/Deposit__legacy/AvailablePromos.js +0 -33
  88. package/dist/components/DepositWithdrawal/Deposit__legacy/Deposit.d.ts +0 -1
  89. package/dist/components/DepositWithdrawal/Deposit__legacy/Deposit.js +0 -120
  90. package/dist/components/DepositWithdrawal/Deposit__legacy/GCashDeposit/GCashDeposit.d.ts +0 -1
  91. package/dist/components/DepositWithdrawal/Deposit__legacy/GCashDeposit/GCashDeposit.js +0 -163
  92. package/dist/components/DepositWithdrawal/Deposit__legacy/GCashWebpayDeposit/GCashWebpayDeposit.d.ts +0 -1
  93. package/dist/components/DepositWithdrawal/Deposit__legacy/GCashWebpayDeposit/GCashWebpayDeposit.js +0 -165
  94. package/dist/components/DepositWithdrawal/Deposit__legacy/LibanganDeposit/LibanganDeposit.d.ts +0 -1
  95. package/dist/components/DepositWithdrawal/Deposit__legacy/LibanganDeposit/LibanganDeposit.js +0 -186
  96. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaAppDeposit/MayaAppDeposit.d.ts +0 -1
  97. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaAppDeposit/MayaAppDeposit.js +0 -157
  98. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaDeposit/MayaDeposit.d.ts +0 -1
  99. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaDeposit/MayaDeposit.js +0 -163
  100. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaWebpayDeposit/MayaWebpayDeposit.d.ts +0 -1
  101. package/dist/components/DepositWithdrawal/Deposit__legacy/MayaWebpayDeposit/MayaWebpayDeposit.js +0 -166
  102. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDeposit.d.ts +0 -1
  103. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDeposit.js +0 -10
  104. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositAlert.d.ts +0 -1
  105. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositAlert.js +0 -99
  106. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts +0 -25
  107. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.js +0 -2
  108. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositDetails.d.ts +0 -1
  109. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositDetails.js +0 -19
  110. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositForm.d.ts +0 -1
  111. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositForm.js +0 -115
  112. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts +0 -13
  113. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.js +0 -81
  114. package/dist/components/DepositWithdrawal/Deposit__legacy/PisoPayDeposit/PisoPayDeposit.d.ts +0 -1
  115. package/dist/components/DepositWithdrawal/Deposit__legacy/PisoPayDeposit/PisoPayDeposit.js +0 -180
  116. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDeposit.d.ts +0 -1
  117. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDeposit.js +0 -10
  118. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositAlert.d.ts +0 -1
  119. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositAlert.js +0 -99
  120. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts +0 -25
  121. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.js +0 -2
  122. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositDetails.d.ts +0 -1
  123. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositDetails.js +0 -17
  124. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositForm.d.ts +0 -1
  125. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositForm.js +0 -116
  126. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.d.ts +0 -3
  127. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHQRCode.js +0 -69
  128. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts +0 -13
  129. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.js +0 -85
  130. package/dist/components/DigitainLauncher/Loading.d.ts +0 -1
  131. package/dist/components/DigitainLauncher/Loading.js +0 -5
  132. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +0 -184
  133. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +0 -184
  134. package/dist/components/KYC/BasicInformation.d.ts +0 -1
  135. package/dist/components/KYC/BasicInformation.js +0 -101
  136. package/dist/components/KYC/IdentityVerification.d.ts +0 -1
  137. package/dist/components/KYC/IdentityVerification.js +0 -120
  138. package/dist/components/KYC/Indicator.d.ts +0 -1
  139. package/dist/components/KYC/Indicator.js +0 -8
  140. package/dist/components/KYC/KYC.lazy.d.ts +0 -6
  141. package/dist/components/KYC/KYC.lazy.js +0 -45
  142. package/dist/components/KYC/KYCContext.d.ts +0 -6
  143. package/dist/components/KYC/KYCContext.js +0 -2
  144. package/dist/components/KYC/KYCDefault/BasicInformation.d.ts +0 -1
  145. package/dist/components/KYC/KYCDefault/BasicInformation.js +0 -101
  146. package/dist/components/KYC/KYCVerificationStatus.d.ts +0 -1
  147. package/dist/components/KYC/KYCVerificationStatus.js +0 -10
  148. package/dist/components/KYC/KYCVerificationStatus.lazy.d.ts +0 -1
  149. package/dist/components/KYC/KYCVerificationStatus.lazy.js +0 -36
  150. package/dist/components/KYC/PersonalInformation.d.ts +0 -1
  151. package/dist/components/KYC/PersonalInformation.js +0 -122
  152. package/dist/components/KYC/useKYC.d.ts +0 -25
  153. package/dist/components/KYC/useKYC.js +0 -38
  154. package/dist/components/KYCNotRequired/KYCNotRequired.d.ts +0 -0
  155. package/dist/components/KYCNotRequired/KYCNotRequired.js +0 -1
  156. package/dist/components/PortalProvider/AndroidOnlyComponents.d.ts +0 -1
  157. package/dist/components/PortalProvider/AndroidOnlyComponents.js +0 -12
  158. package/dist/components/PortalProvider/CXDTokenObserver.d.ts +0 -1
  159. package/dist/components/PortalProvider/CXDTokenObserver.js +0 -30
  160. package/dist/components/PortalProvider/LinkGoogleAccountObserver.d.ts +0 -1
  161. package/dist/components/PortalProvider/LinkGoogleAccountObserver.js +0 -29
  162. package/dist/components/Quests/MultiWageringQuest.d.ts +0 -1
  163. package/dist/components/Quests/MultiWageringQuest.js +0 -111
  164. package/dist/components/SessionWatcher/SessionWatcher.d.ts +0 -1
  165. package/dist/components/SessionWatcher/SessionWatcher.js +0 -20
  166. package/dist/components/SessionWatcher/index.d.ts +0 -1
  167. package/dist/components/SessionWatcher/index.js +0 -1
  168. package/dist/components/SignIn/utils.d.ts +0 -8
  169. package/dist/components/SignIn/utils.js +0 -26
  170. package/dist/constants/Branches.d.ts +0 -2
  171. package/dist/constants/Branches.js +0 -42
  172. package/dist/images/game-providers/ALPHACHINKO.png +0 -0
  173. package/dist/images/responsible-gaming-yellow.png +0 -0
  174. package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +0 -4
  175. package/dist/third-parties/FacebookPixel/FacebookPixel.js +0 -4
  176. package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
  177. package/dist/third-parties/FacebookPixel/api.js +0 -1
  178. package/dist/third-parties/FacebookPixel/index.d.ts +0 -1
  179. package/dist/third-parties/FacebookPixel/index.js +0 -1
  180. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +0 -4
  181. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +0 -4
  182. package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
  183. package/dist/third-parties/GoogleRecaptcha/api.js +0 -1
  184. package/dist/third-parties/GoogleRecaptcha/index.d.ts +0 -1
  185. package/dist/third-parties/GoogleRecaptcha/index.js +0 -1
  186. package/dist/third-parties/index.d.ts +0 -2
  187. package/dist/third-parties/index.js +0 -2
  188. package/dist/utils/getLocaleInfo.d.ts +0 -79
  189. package/dist/utils/getLocaleInfo.js +0 -175
@@ -1,163 +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 { z } from 'zod';
8
- import { useShallow } from 'zustand/shallow';
9
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
- import { useCreateMayaDepositMutation } from '../../../../client/hooks/useCreateMayaDepositMutation.js';
11
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
12
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
13
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
14
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
15
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
16
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
17
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
18
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
19
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
20
- import { XIcon } from '../../../../icons/XIcon.js';
21
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
22
- import { Button } from '../../../../ui/Button/index.js';
23
- import { Field } from '../../../../ui/Field/index.js';
24
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
25
- import { Portal } from '../../../../ui/Portal/index.js';
26
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
27
- import { AmountChoices } from '../../AmountChoices.js';
28
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
29
- import { AvailablePromos } from '../AvailablePromos.js';
30
- export function MayaDeposit() {
31
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
32
- const disclosure = useDisclosure();
33
- const globalStore = useGlobalStore(useShallow((ctx) => ({
34
- depositWithdrawal: ctx.depositWithdrawal,
35
- kycVerificationStatus: ctx.kycVerificationStatus,
36
- })));
37
- const verificationQuery = useMemberVerificationQuery();
38
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
39
- const [status, setStatus] = useState('waiting');
40
- const createDepositMutation = useCreateMayaDepositMutation({
41
- onMutate() {
42
- disclosure.setOpen(true);
43
- setStatus('processing');
44
- },
45
- onSuccess(data) {
46
- invariant(data.checkoutUrl);
47
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
48
- setStatus('success');
49
- },
50
- onError() {
51
- setStatus('failed');
52
- },
53
- });
54
- const depositsCountQuery = useDepositsCountQuery();
55
- const depositsCount = depositsCountQuery.data ?? 0;
56
- const paymentSettingsQuery = usePaymentSettingsQuery();
57
- const paymentSettings = paymentSettingsQuery.data;
58
- const gatewaySettings = paymentSettings?.mayaDepositGatewaySettings;
59
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
60
- const minimumAmount = depositsCount <= 0
61
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
62
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
63
- const promosQuery = useAvailablePromosQuery();
64
- const promos = promosQuery.data ?? [];
65
- const definition = z
66
- .object({
67
- amount: z.string().superRefine((val, ctx) => {
68
- const n = parseDecimal(val, 0);
69
- if (n < minimumAmount) {
70
- ctx.addIssue({
71
- type: 'number',
72
- code: z.ZodIssueCode.too_small,
73
- inclusive: true,
74
- minimum: minimumAmount,
75
- message: `Please enter ${minimumAmount.toLocaleString()} or more to proceed with your deposit.`,
76
- });
77
- }
78
- if (n > maximumAmount) {
79
- ctx.addIssue({
80
- type: 'number',
81
- code: z.ZodIssueCode.too_big,
82
- inclusive: true,
83
- maximum: maximumAmount,
84
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
85
- });
86
- }
87
- }),
88
- promo: z.string().optional().nullable(),
89
- })
90
- .superRefine((value, ctx) => {
91
- const promo = promos.find((o) => o.id === value.promo);
92
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
93
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
94
- const amount = parseDecimal(value.amount, 0);
95
- if (promo && amount < promoMinAmount) {
96
- ctx.addIssue({
97
- path: ['amount'],
98
- code: z.ZodIssueCode.custom,
99
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
100
- });
101
- }
102
- if (promo && amount > promoMaxAmount) {
103
- ctx.addIssue({
104
- path: ['amount'],
105
- code: z.ZodIssueCode.custom,
106
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
107
- });
108
- }
109
- });
110
- const form = useForm({
111
- mode: 'all',
112
- resolver: zodResolver(definition),
113
- defaultValues: {
114
- amount: '0',
115
- promo: globalStore.depositWithdrawal.promo ?? null,
116
- },
117
- });
118
- useEffect(() => {
119
- if (minimumAmount) {
120
- form.reset({
121
- amount: minimumAmount.toString(),
122
- promo: form.getValues('promo') ?? null,
123
- });
124
- }
125
- }, [form, minimumAmount]);
126
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
127
- if (verificationStatus === 'PENDING' ||
128
- verificationStatus === 'UNVERIFIED' ||
129
- verificationStatus === 'REJECTED' ||
130
- verificationStatus === 'CREATED') {
131
- globalStore.kycVerificationStatus.setOpen(true);
132
- return;
133
- }
134
- else {
135
- createDepositMutation.reset();
136
- createDepositMutation.mutate({
137
- amount: data.amount.toString(),
138
- promo: data.promo ?? undefined,
139
- });
140
- }
141
- }), 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) => {
142
- o.field.onChange(details.value);
143
- }, 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) => {
144
- form.setValue('amount', value.toString(), {
145
- shouldTouch: true,
146
- shouldDirty: true,
147
- shouldValidate: true,
148
- });
149
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
150
- o.field.onChange(value);
151
- globalStore.depositWithdrawal.setPromo(null);
152
- }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] })), _jsx(AlertDialog.Root, { open: disclosure.open, onOpenChange: (details) => {
153
- disclosure.setOpen(details.open);
154
- if (!details.open) {
155
- setStatus('waiting');
156
- form.reset();
157
- }
158
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
159
- "We're verifying your account and amount. Please hold a moment.", status === 'success' && (_jsxs(_Fragment, { children: ["Your deposit has been successfully processed. ", _jsx("br", {}), " If you are not redirected automatically, click", ' ', !!createDepositMutation.data?.checkoutUrl && (_jsx("a", { href: createDepositMutation.data?.checkoutUrl, target: "_blank", rel: "noopener noreferrer", className: "text-text-brand underline underline-offset-2", children: "here" })), "."] })), status === 'failed' &&
160
- 'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
161
- api.setOpen(false);
162
- }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
163
- }
@@ -1 +0,0 @@
1
- export declare function MayaWebpayDeposit(): import("react/jsx-runtime").JSX.Element;
@@ -1,166 +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 { z } from 'zod';
8
- import { useShallow } from 'zustand/shallow';
9
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
- import { useCreateMayaWebpayDepositMutation } from '../../../../client/hooks/useCreateMayaWebpayDepositMutation.js';
11
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
12
- import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
13
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
14
- import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
15
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
16
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
17
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
18
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
19
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
20
- import { XIcon } from '../../../../icons/XIcon.js';
21
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
22
- import { Button } from '../../../../ui/Button/index.js';
23
- import { Field } from '../../../../ui/Field/index.js';
24
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
25
- import { Portal } from '../../../../ui/Portal/index.js';
26
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
27
- import { AmountChoices } from '../../AmountChoices.js';
28
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
29
- import { AvailablePromos } from '../AvailablePromos.js';
30
- export function MayaWebpayDeposit() {
31
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
32
- const disclosure = useDisclosure();
33
- const globalStore = useGlobalStore(useShallow((ctx) => ({
34
- depositWithdrawal: ctx.depositWithdrawal,
35
- kycVerificationStatus: ctx.kycVerificationStatus,
36
- })));
37
- const verificationQuery = useMemberVerificationQuery();
38
- const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
39
- const [status, setStatus] = useState('waiting');
40
- const createDepositMutation = useCreateMayaWebpayDepositMutation({
41
- onMutate() {
42
- disclosure.setOpen(true);
43
- setStatus('processing');
44
- },
45
- onSuccess(data) {
46
- invariant(data.checkoutUrl);
47
- window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
48
- setStatus('success');
49
- },
50
- onError() {
51
- setStatus('failed');
52
- },
53
- });
54
- const depositsCountQuery = useDepositsCountQuery();
55
- const depositsCount = depositsCountQuery.data ?? 0;
56
- const paymentSettingsQuery = usePaymentSettingsQuery();
57
- const paymentSettings = paymentSettingsQuery.data;
58
- const gatewaySettings = paymentSettings?.mayaWebpayDepositGatewaySettings;
59
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
60
- const minimumAmount = depositsCount <= 0
61
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
62
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
63
- const promosQuery = useAvailablePromosQuery();
64
- const promos = promosQuery.data ?? [];
65
- const definition = z
66
- .object({
67
- amount: z.string().superRefine((val, ctx) => {
68
- const n = parseDecimal(val, 0);
69
- if (n < minimumAmount) {
70
- ctx.addIssue({
71
- type: 'number',
72
- code: z.ZodIssueCode.too_small,
73
- inclusive: true,
74
- minimum: minimumAmount,
75
- message: `Please enter ${minimumAmount.toLocaleString()} or more to proceed with your deposit.`,
76
- });
77
- }
78
- if (n > maximumAmount) {
79
- ctx.addIssue({
80
- type: 'number',
81
- code: z.ZodIssueCode.too_big,
82
- inclusive: true,
83
- maximum: maximumAmount,
84
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
85
- });
86
- }
87
- }),
88
- promo: z.string().optional().nullable(),
89
- })
90
- .superRefine((value, ctx) => {
91
- const promo = promos.find((o) => o.id === value.promo);
92
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
93
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
94
- const amount = parseDecimal(value.amount, 0);
95
- if (promo && amount < promoMinAmount) {
96
- ctx.addIssue({
97
- path: ['amount'],
98
- code: z.ZodIssueCode.custom,
99
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
100
- });
101
- }
102
- if (promo && amount > promoMaxAmount) {
103
- ctx.addIssue({
104
- path: ['amount'],
105
- code: z.ZodIssueCode.custom,
106
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
107
- });
108
- }
109
- });
110
- const form = useForm({
111
- mode: 'all',
112
- resolver: zodResolver(definition),
113
- defaultValues: {
114
- amount: '0',
115
- promo: globalStore.depositWithdrawal.promo ?? null,
116
- },
117
- });
118
- useEffect(() => {
119
- if (minimumAmount) {
120
- form.reset({
121
- amount: minimumAmount.toString(),
122
- promo: form.getValues('promo') ?? null,
123
- });
124
- }
125
- }, [form, minimumAmount]);
126
- return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
127
- if (verificationStatus === 'PENDING' ||
128
- verificationStatus === 'UNVERIFIED' ||
129
- verificationStatus === 'REJECTED' ||
130
- verificationStatus === 'CREATED') {
131
- globalStore.kycVerificationStatus.setOpen(true);
132
- return;
133
- }
134
- else {
135
- createDepositMutation.reset();
136
- createDepositMutation.mutate({
137
- amount: data.amount.toString(),
138
- promo: data.promo ?? undefined,
139
- redirectUrl: window.location.origin.includes('localhost')
140
- ? 'https://uat.powerplay.ph'
141
- : window.location.origin,
142
- });
143
- }
144
- }), 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) => {
145
- o.field.onChange(details.value);
146
- }, 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) => {
147
- form.setValue('amount', value.toString(), {
148
- shouldTouch: true,
149
- shouldDirty: true,
150
- shouldValidate: true,
151
- });
152
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
153
- o.field.onChange(value);
154
- globalStore.depositWithdrawal.setPromo(null);
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) => {
156
- disclosure.setOpen(details.open);
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: () => {
164
- api.setOpen(false);
165
- }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
166
- }
@@ -1 +0,0 @@
1
- export declare function OnlineBankDeposit(): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { OnlineBankDepositAlert } from './OnlineBankDepositAlert.js';
3
- import { OnlineBankDepositContext } from './OnlineBankDepositContext.js';
4
- import { OnlineBankDepositDetails } from './OnlineBankDepositDetails.js';
5
- import { OnlineBankDepositForm } from './OnlineBankDepositForm.js';
6
- import { useOnlineBankDeposit } from './useOnlineBankDeposit.js';
7
- export function OnlineBankDeposit() {
8
- const context = useOnlineBankDeposit();
9
- return (_jsxs(OnlineBankDepositContext, { value: context, children: [_jsx(OnlineBankDepositForm, {}), _jsx(OnlineBankDepositDetails, {}), _jsx(OnlineBankDepositAlert, {})] }));
10
- }
@@ -1 +0,0 @@
1
- export declare function OnlineBankDepositAlert(): import("react/jsx-runtime").JSX.Element;
@@ -1,99 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
3
- import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
4
- import { XIcon } from '../../../../icons/XIcon.js';
5
- import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
6
- import { Button } from '../../../../ui/Button/index.js';
7
- import { Portal } from '../../../../ui/Portal/index.js';
8
- import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
9
- export function OnlineBankDepositAlert() {
10
- const context = useOnlineBankDepositContext();
11
- const details = useDetails();
12
- return (_jsx(AlertDialog.Root, { open: context.status !== 'waiting' &&
13
- context.status !== 'verification-waiting', onOpenChange: (details) => {
14
- if (!details.open) {
15
- context.reset();
16
- }
17
- }, 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, { disabled: details.type === 'loading', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [details.type === 'loading' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), details.type === '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, {}) })), details.type === 'erorr' && (_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: [_jsx(AlertDialog.Title, { children: details.title }), _jsx(AlertDialog.Description, { children: details.description })] }), (details.type === 'erorr' || details.type === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
18
- api.setOpen(false);
19
- }, children: details.type === 'success' ? 'Ok' : 'Try Again' })) }) }))] }) })] }) }));
20
- }
21
- function useDetails() {
22
- const context = useOnlineBankDepositContext();
23
- const title = (() => {
24
- let s = '';
25
- if (context.status === 'processing') {
26
- s = 'Processing Deposit';
27
- }
28
- else if (context.status === 'failed') {
29
- s = 'Deposit Failed';
30
- }
31
- else if (context.status === 'verification-success') {
32
- s = 'Deposit Successful';
33
- }
34
- else if (context.status === 'verification-processing') {
35
- s = 'Verifying Deposit';
36
- }
37
- else if (context.status === 'verification-failed') {
38
- if (context.deposit?.status === 'CANCELLED') {
39
- s = 'Deposit Cancelled';
40
- }
41
- else if (context.deposit?.status === 'REJECTED') {
42
- s = 'Deposit Rejected';
43
- }
44
- else {
45
- s = 'Deposit Failed';
46
- }
47
- }
48
- return s;
49
- })();
50
- const description = (() => {
51
- let d = '';
52
- if (context.status === 'processing') {
53
- d = "We're verifying your account and amount. Please hold a moment.";
54
- }
55
- else if (context.status === 'failed') {
56
- d =
57
- 'Something went wrong while processing your deposit. ' +
58
- 'Please try again or contact support.';
59
- }
60
- else if (context.status === 'verification-success') {
61
- d = 'Your deposit has been successfully processed.';
62
- }
63
- else if (context.status === 'verification-processing') {
64
- d = 'Your deposit is being processed.';
65
- }
66
- else if (context.status === 'verification-failed') {
67
- if (context.deposit?.status === 'CANCELLED') {
68
- d = 'Your deposit has been cancelled.';
69
- }
70
- else if (context.deposit?.status === 'REJECTED') {
71
- d = 'Your deposit has been rejected.';
72
- }
73
- else if (context.deposit?.status === 'FAILED') {
74
- d = context.deposit.error ?? 'Your deposit has failed.';
75
- }
76
- else {
77
- d =
78
- 'Something went wrong while processing your deposit. ' +
79
- 'Please try again or contact support.';
80
- }
81
- }
82
- return d;
83
- })();
84
- const type = (() => {
85
- if (context.status === 'failed' ||
86
- context.status === 'verification-failed') {
87
- return 'erorr';
88
- }
89
- if (context.status === 'verification-success') {
90
- return 'success';
91
- }
92
- return 'loading';
93
- })();
94
- return {
95
- type,
96
- title,
97
- description,
98
- };
99
- }
@@ -1,25 +0,0 @@
1
- export declare const OnlineBankDepositContext: (props: {
2
- value: {
3
- view: "form" | "vca";
4
- status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
5
- verify: () => void;
6
- reset: () => void;
7
- deposit: import("../../../../types").Deposit | null;
8
- generateVCA: (input: {
9
- amount: string;
10
- promo?: string | null;
11
- }) => void;
12
- };
13
- } & {
14
- children?: import("react").ReactNode | undefined;
15
- }) => React.ReactNode, useOnlineBankDepositContext: () => {
16
- view: "form" | "vca";
17
- status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
18
- verify: () => void;
19
- reset: () => void;
20
- deposit: import("../../../../types").Deposit | null;
21
- generateVCA: (input: {
22
- amount: string;
23
- promo?: string | null;
24
- }) => void;
25
- };
@@ -1,2 +0,0 @@
1
- import { createContext } from '../../../../client/utils/createContext.js';
2
- export const [OnlineBankDepositContext, useOnlineBankDepositContext] = createContext();
@@ -1 +0,0 @@
1
- export declare function OnlineBankDepositDetails(): import("react/jsx-runtime").JSX.Element | null;
@@ -1,19 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Image from 'next/image';
3
- import { BankIcon } from '../../../../icons/BankIcon.js';
4
- import { XIcon } from '../../../../icons/XIcon.js';
5
- import bankIcon from '../../../../images/bank-icon.png';
6
- import { Button } from '../../../../ui/Button/index.js';
7
- import { Clipboard } from '../../../../ui/Clipboard/index.js';
8
- import { Dialog } from '../../../../ui/Dialog/index.js';
9
- import { Portal } from '../../../../ui/Portal/index.js';
10
- import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
11
- export function OnlineBankDepositDetails() {
12
- const context = useOnlineBankDepositContext();
13
- if (context.view !== 'vca')
14
- return null;
15
- return (_jsxs("div", { className: "rounded-lg bg-bg-primary-alt p-2xl", children: [_jsx(Image, { src: bankIcon, alt: "", width: 52, height: 44.2, className: "mx-auto h-auto w-[3.25rem]" }), _jsx("p", { className: "mt-8 text-center font-semibold", children: "Your unique Virtual Collection Account (VCA) is:" }), _jsx(Clipboard.Root, { value: context.deposit?.vca ?? '', className: "mx-auto mt-6 max-w-[22.5rem]", children: _jsxs(Clipboard.Control, { className: "flex flex-col gap-4 lg:flex-row", children: [_jsx(Clipboard.Input, { className: "lg:grow" }), _jsx(Clipboard.Context, { children: (ctx) => (_jsx(Clipboard.Trigger, { asChild: true, children: _jsx(Button, { fullWidth: false, className: "w-full shrink-0 lg:w-28", children: ctx.copied ? 'Copied' : 'Copy VCA' }) })) })] }) }), _jsx(Instruction, {})] }));
16
- }
17
- function Instruction() {
18
- return (_jsxs("p", { className: "mt-6 text-center text-text-tertiary-600 text-xs", children: ["Need help using the online bank for payment?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] overflow-y-auto rounded-lg p-4xl lg:w-[33.625rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "flex size-11 items-center justify-center rounded-lg border border-border-primary text-gray-700 text-text-secondary-700 shadow-xs", children: _jsx(BankIcon, { className: "size-6" }) }), _jsx(Dialog.Title, { className: "font-semibold text-lg", children: "How to Use Online Bank for Payment" })] }), _jsx(Dialog.Description, { className: "mt-5", children: "Follow these simple steps to complete your transaction:" }), _jsxs("ol", { className: "mt-3 list-inside list-decimal space-y-3", children: [_jsx("li", { children: "Click the 'Copy VCA' button to save your unique account number." }), _jsx("li", { children: "Log in to your Online Banking: Open your bank's app or website." }), _jsx("li", { children: "Initiate a Deposit: Choose the option to make a deposit." }), _jsx("li", { children: "Enter VCA: Paste your VCA in the designated field." }), _jsx("li", { children: "Complete Transaction: Follow your bank's prompts to finalize the deposit." })] }), _jsx("p", { className: "mt-3", children: "Note: Please ensure that the deposit amount you enter matches exactly." })] })] }) })] })] })] }));
19
- }
@@ -1 +0,0 @@
1
- export declare function OnlineBankDepositForm(): import("react/jsx-runtime").JSX.Element | null;
@@ -1,115 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { zodResolver } from '@hookform/resolvers/zod';
3
- import { noop } from 'lodash-es';
4
- import Link from 'next/link';
5
- import { useEffect } from 'react';
6
- import { Controller, useForm } from 'react-hook-form';
7
- import { z } from 'zod';
8
- import { useShallow } from 'zustand/shallow';
9
- import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
10
- import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
11
- import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
12
- import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
13
- import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
14
- import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
15
- import { Button } from '../../../../ui/Button/index.js';
16
- import { Field } from '../../../../ui/Field/index.js';
17
- import { NumberInput } from '../../../../ui/NumberInput/index.js';
18
- import { parseDecimal } from '../../../../utils/parseDecimal.js';
19
- import { AmountChoices } from '../../AmountChoices.js';
20
- import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
21
- import { AvailablePromos } from '../AvailablePromos.js';
22
- import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
23
- export function OnlineBankDepositForm() {
24
- const depositWithdrawalProps = useDepositWithdrawalPropsContext();
25
- const globalStore = useGlobalStore(useShallow((ctx) => ({
26
- depositWithdrawal: ctx.depositWithdrawal,
27
- })));
28
- const context = useOnlineBankDepositContext();
29
- const depositsCountQuery = useDepositsCountQuery();
30
- const depositsCount = depositsCountQuery.data ?? 0;
31
- const paymentSettingsQuery = usePaymentSettingsQuery();
32
- const paymentSettings = paymentSettingsQuery.data;
33
- const gatewaySettings = paymentSettings?.onlineBankDepositGatewaySettings;
34
- const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
35
- const minimumAmount = depositsCount <= 0
36
- ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
37
- : parseDecimal(gatewaySettings?.minimumAmount, 0);
38
- const promosQuery = useAvailablePromosQuery();
39
- const promos = promosQuery.data ?? [];
40
- const definition = z
41
- .object({
42
- amount: z.string().superRefine((val, ctx) => {
43
- const n = parseDecimal(val, 0);
44
- if (n < minimumAmount) {
45
- ctx.addIssue({
46
- type: 'number',
47
- code: z.ZodIssueCode.too_small,
48
- inclusive: true,
49
- minimum: minimumAmount,
50
- message: `Please enter ${minimumAmount.toLocaleString()} or more to proceed with your deposit.`,
51
- });
52
- }
53
- if (n > maximumAmount) {
54
- ctx.addIssue({
55
- type: 'number',
56
- code: z.ZodIssueCode.too_big,
57
- inclusive: true,
58
- maximum: maximumAmount,
59
- message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
60
- });
61
- }
62
- }),
63
- promo: z.string().optional().nullable(),
64
- })
65
- .superRefine((value, ctx) => {
66
- const promo = promos.find((o) => o.id === value.promo);
67
- const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
68
- const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
69
- const amount = parseDecimal(value.amount, 0);
70
- if (promo && amount < promoMinAmount) {
71
- ctx.addIssue({
72
- path: ['amount'],
73
- code: z.ZodIssueCode.custom,
74
- message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
75
- });
76
- }
77
- if (promo && amount > promoMaxAmount) {
78
- ctx.addIssue({
79
- path: ['amount'],
80
- code: z.ZodIssueCode.custom,
81
- message: `Maximum amount for this promo is ${promoMaxAmount}`,
82
- });
83
- }
84
- });
85
- const form = useForm({
86
- mode: 'all',
87
- resolver: zodResolver(definition),
88
- defaultValues: {
89
- amount: '0',
90
- promo: globalStore.depositWithdrawal.promo ?? null,
91
- },
92
- });
93
- useEffect(() => {
94
- if (minimumAmount) {
95
- form.reset({
96
- amount: minimumAmount.toString(),
97
- promo: form.getValues('promo') ?? null,
98
- });
99
- }
100
- }, [form, minimumAmount]);
101
- if (context.view !== 'form')
102
- return null;
103
- return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateVCA), noValidate: true, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Bank" }), _jsx(Field.Input, { value: "BANKNET", onChange: noop, readOnly: true })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
104
- o.field.onChange(details.value);
105
- }, 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) => {
106
- form.setValue('amount', value.toString(), {
107
- shouldTouch: true,
108
- shouldDirty: true,
109
- shouldValidate: true,
110
- });
111
- }, min: minimumAmount, max: maximumAmount, className: "mt-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-3xl", value: o.field.value, onChange: (value) => {
112
- o.field.onChange(value);
113
- globalStore.depositWithdrawal.setPromo(null);
114
- } })) }), _jsx(Button, { type: "submit", className: "mt-3xl", 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" }), "."] }))] }));
115
- }