@opexa/portal-components 0.0.826 → 0.0.827

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 (117) 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/AccountInfo/GoogleDisconnect.d.ts +7 -0
  29. package/dist/components/AccountInfo/GoogleDisconnect.js +11 -0
  30. package/dist/components/DepositWithdrawal/AiOPaymentMethods.d.ts +11 -0
  31. package/dist/components/DepositWithdrawal/AiOPaymentMethods.js +55 -0
  32. package/dist/components/DepositWithdrawal/Deposit/AiOGCashDeposit/AiOGCashDeposit.js +5 -4
  33. package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +5 -4
  34. package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +5 -4
  35. package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +5 -4
  36. package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +5 -4
  37. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +5 -4
  38. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +1 -0
  39. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +191 -0
  40. package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +5 -4
  41. package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.js +5 -4
  42. package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +5 -4
  43. package/dist/components/DepositWithdrawal/Deposit/MayaWebpayDeposit/MayaWebpayDeposit.js +5 -4
  44. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.js +7 -4
  45. package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +5 -4
  46. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
  47. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
  48. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.js +7 -4
  49. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts +2 -2
  50. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts +1 -1
  51. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/QRPHDepositContext.d.ts +2 -2
  52. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/useQRPHDeposit.d.ts +1 -1
  53. package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts +1 -0
  54. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  55. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  56. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
  57. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
  58. package/dist/components/DigitainLauncher/Loading.d.ts +1 -0
  59. package/dist/components/DigitainLauncher/Loading.js +5 -0
  60. package/dist/components/FavoriteGames/FavoriteGames.client.d.ts +1 -0
  61. package/dist/components/FavoriteGames/FavoriteGames.client.js +3 -3
  62. package/dist/components/GameLaunch/GameLaunchTrigger.d.ts +1 -0
  63. package/dist/components/GameLaunch/GameLaunchTrigger.js +6 -4
  64. package/dist/components/Games/Game.d.ts +1 -0
  65. package/dist/components/Games/Game.js +1 -1
  66. package/dist/components/Games/GamesCarousel.client.d.ts +1 -0
  67. package/dist/components/Games/GamesCarousel.client.js +1 -1
  68. package/dist/components/Games/GamesList.client.d.ts +1 -0
  69. package/dist/components/Games/GamesList.client.js +1 -1
  70. package/dist/components/GamesSearch/GamesSearch.d.ts +1 -0
  71. package/dist/components/GamesSearch/GamesSearch.js +1 -1
  72. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -0
  73. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -0
  74. package/dist/components/KYC/BasicInformation.d.ts +1 -0
  75. package/dist/components/KYC/BasicInformation.js +101 -0
  76. package/dist/components/KYC/IdentityVerification.d.ts +1 -0
  77. package/dist/components/KYC/IdentityVerification.js +120 -0
  78. package/dist/components/KYC/Indicator.d.ts +1 -0
  79. package/dist/components/KYC/Indicator.js +8 -0
  80. package/dist/components/KYC/KYC.lazy.d.ts +6 -0
  81. package/dist/components/KYC/KYC.lazy.js +45 -0
  82. package/dist/components/KYC/KYCContext.d.ts +6 -0
  83. package/dist/components/KYC/KYCContext.js +2 -0
  84. package/dist/components/KYC/KYCDefault/BasicInformation.d.ts +1 -0
  85. package/dist/components/KYC/KYCDefault/BasicInformation.js +101 -0
  86. package/dist/components/KYC/KYCDefault/KYCVerificationStatus.lazy.js +1 -1
  87. package/dist/components/KYC/KYCSumsub.d.ts +1 -0
  88. package/dist/components/KYC/KYCSumsub.js +4 -1
  89. package/dist/components/KYC/KYCVerificationStatus.d.ts +1 -0
  90. package/dist/components/KYC/KYCVerificationStatus.js +10 -0
  91. package/dist/components/KYC/KYCVerificationStatus.lazy.d.ts +1 -0
  92. package/dist/components/KYC/KYCVerificationStatus.lazy.js +33 -0
  93. package/dist/components/KYC/PersonalInformation.d.ts +1 -0
  94. package/dist/components/KYC/PersonalInformation.js +122 -0
  95. package/dist/components/KYC/useKYC.d.ts +25 -0
  96. package/dist/components/KYC/useKYC.js +38 -0
  97. package/dist/components/KYCNotRequired/KYCNotRequired.d.ts +0 -0
  98. package/dist/components/KYCNotRequired/KYCNotRequired.js +1 -0
  99. package/dist/components/PortalProvider/CXDTokenObserver.d.ts +1 -0
  100. package/dist/components/PortalProvider/CXDTokenObserver.js +30 -0
  101. package/dist/components/PortalProvider/LinkGoogleAccountObserver.d.ts +1 -0
  102. package/dist/components/PortalProvider/LinkGoogleAccountObserver.js +29 -0
  103. package/dist/components/Quests/MultiWageringQuest.d.ts +1 -0
  104. package/dist/components/Quests/MultiWageringQuest.js +111 -0
  105. package/dist/components/Search/Search.lazy.d.ts +1 -0
  106. package/dist/components/Search/Search.lazy.js +1 -1
  107. package/dist/components/SessionWatcher/SessionWatcher.d.ts +1 -0
  108. package/dist/components/SessionWatcher/SessionWatcher.js +20 -0
  109. package/dist/components/SessionWatcher/index.d.ts +1 -0
  110. package/dist/components/SessionWatcher/index.js +1 -0
  111. package/dist/icons/LinkBrokenIcon.d.ts +2 -0
  112. package/dist/icons/LinkBrokenIcon.js +4 -0
  113. package/dist/images/game-providers/ALPHACHINKO.png +0 -0
  114. package/dist/images/responsible-gaming-yellow.png +0 -0
  115. package/dist/ui/AlertDialog/AlertDialog.d.ts +187 -187
  116. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +17 -17
  117. package/package.json +1 -1
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,7 @@
1
+ import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
2
+ interface GoogleDisconnectProps {
3
+ onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
4
+ children?: (ctx: UseDisclosureReturn) => React.ReactNode;
5
+ }
6
+ export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
@@ -0,0 +1,11 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
4
+ import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
5
+ import { XIcon } from '../../icons/XIcon.js';
6
+ import { Dialog } from '../../ui/Dialog/index.js';
7
+ import { Portal } from '../../ui/Portal/index.js';
8
+ export function GoogleDisconnect(props) {
9
+ const disclosure = useDisclosure();
10
+ return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
11
+ }
@@ -0,0 +1,11 @@
1
+ import { type AiOeWalletPaymentMethod } from './utils';
2
+ interface AiOPaymentMethodsProps {
3
+ value?: AiOeWalletPaymentMethod;
4
+ onChange?: (value: AiOeWalletPaymentMethod) => void;
5
+ defaultValue?: AiOeWalletPaymentMethod;
6
+ options?: AiOeWalletPaymentMethod[];
7
+ className?: string;
8
+ label?: string;
9
+ }
10
+ export declare function AiOPaymentMethods(props: AiOPaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -0,0 +1,55 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Image from 'next/image';
3
+ import { twMerge } from 'tailwind-merge';
4
+ import { useControllableState } from '../../client/hooks/useControllableState.js';
5
+ import { CheckIcon } from '../../icons/CheckIcon.js';
6
+ import gcash from '../../images/gcash.png';
7
+ import grabPay from '../../images/grabpay.png';
8
+ import maya from '../../images/maya.png';
9
+ import palawanPay from '../../images/palawanpay.png';
10
+ import { Checkbox } from '../../ui/Checkbox/index.js';
11
+ import { Field } from '../../ui/Field/index.js';
12
+ import { AiOeWalletPaymentMethodDefinition, } from './utils.js';
13
+ const AIO_EWALLET_OPTIONS = [
14
+ {
15
+ value: 'AIO_GCASH',
16
+ label: 'GCash',
17
+ image: gcash,
18
+ },
19
+ {
20
+ value: 'AIO_PAY_MAYA',
21
+ label: 'Maya',
22
+ image: maya,
23
+ },
24
+ {
25
+ value: 'AIO_GRAB_PAY',
26
+ label: 'GrabPay',
27
+ image: grabPay,
28
+ },
29
+ {
30
+ value: 'AIO_PALAWAN_PAY',
31
+ label: 'Palawan Pay',
32
+ image: palawanPay,
33
+ },
34
+ ];
35
+ export function AiOPaymentMethods(props) {
36
+ const options = props.options && props.options.length > 0
37
+ ? AIO_EWALLET_OPTIONS.filter((option) => props.options?.includes(option.value))
38
+ : AIO_EWALLET_OPTIONS;
39
+ const [value, setValue] = useControllableState({
40
+ value: props.value,
41
+ defaultValue: props.defaultValue ?? options[0]?.value,
42
+ onChange: props.onChange,
43
+ });
44
+ const parseValue = (val) => {
45
+ return AiOeWalletPaymentMethodDefinition.parse(val);
46
+ };
47
+ return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: props.label || 'AIO eWallet payment methods' }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
48
+ const lastValue = newValue.at(-1);
49
+ if (!lastValue)
50
+ return;
51
+ setValue(parseValue(lastValue));
52
+ }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx("div", { className: twMerge('rounded-xs', option.value === 'AIO_GRAB_PAY'
53
+ ? 'bg-transparent px-0 py-0'
54
+ : 'bg-white px-sm py-[0.688rem]', option.value === 'AIO_GCASH' && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value === 'AIO_PAY_MAYA' && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('h-[1.063rem] w-auto', option.value === 'AIO_GRAB_PAY' && 'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
55
+ }
@@ -159,10 +159,11 @@ export function AiOGCashDeposit() {
159
159
  }
160
160
  }, [form, minimumAmount]);
161
161
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
162
- if (verificationStatus === 'PENDING' ||
163
- verificationStatus === 'UNVERIFIED' ||
164
- verificationStatus === 'REJECTED' ||
165
- verificationStatus === 'CREATED') {
162
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
163
+ (verificationStatus === 'PENDING' ||
164
+ verificationStatus === 'UNVERIFIED' ||
165
+ verificationStatus === 'REJECTED' ||
166
+ verificationStatus === 'CREATED')) {
166
167
  globalStore.kycVerificationStatus.setOpen(true);
167
168
  return;
168
169
  }
@@ -157,10 +157,11 @@ export function AiOGrabPayDeposit() {
157
157
  }
158
158
  }, [form, minimumAmount]);
159
159
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
160
- if (verificationStatus === 'PENDING' ||
161
- verificationStatus === 'UNVERIFIED' ||
162
- verificationStatus === 'REJECTED' ||
163
- verificationStatus === 'CREATED') {
160
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
161
+ (verificationStatus === 'PENDING' ||
162
+ verificationStatus === 'UNVERIFIED' ||
163
+ verificationStatus === 'REJECTED' ||
164
+ verificationStatus === 'CREATED')) {
164
165
  globalStore.kycVerificationStatus.setOpen(true);
165
166
  return;
166
167
  }
@@ -157,10 +157,11 @@ export function AiOPalawanPayDeposit() {
157
157
  }
158
158
  }, [form, minimumAmount]);
159
159
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
160
- if (verificationStatus === 'PENDING' ||
161
- verificationStatus === 'UNVERIFIED' ||
162
- verificationStatus === 'REJECTED' ||
163
- verificationStatus === 'CREATED') {
160
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
161
+ (verificationStatus === 'PENDING' ||
162
+ verificationStatus === 'UNVERIFIED' ||
163
+ verificationStatus === 'REJECTED' ||
164
+ verificationStatus === 'CREATED')) {
164
165
  globalStore.kycVerificationStatus.setOpen(true);
165
166
  return;
166
167
  }
@@ -157,10 +157,11 @@ export function AiOPayMayaDeposit() {
157
157
  }
158
158
  }, [form, minimumAmount]);
159
159
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
160
- if (verificationStatus === 'PENDING' ||
161
- verificationStatus === 'UNVERIFIED' ||
162
- verificationStatus === 'REJECTED' ||
163
- verificationStatus === 'CREATED') {
160
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
161
+ (verificationStatus === 'PENDING' ||
162
+ verificationStatus === 'UNVERIFIED' ||
163
+ verificationStatus === 'REJECTED' ||
164
+ verificationStatus === 'CREATED')) {
164
165
  globalStore.kycVerificationStatus.setOpen(true);
165
166
  return;
166
167
  }
@@ -153,10 +153,11 @@ export function GCashDeposit() {
153
153
  }
154
154
  }, [form, minimumAmount]);
155
155
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
156
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
157
+ (verificationStatus === 'PENDING' ||
158
+ verificationStatus === 'UNVERIFIED' ||
159
+ verificationStatus === 'REJECTED' ||
160
+ verificationStatus === 'CREATED')) {
160
161
  globalStore.kycVerificationStatus.setOpen(true);
161
162
  return;
162
163
  }
@@ -153,10 +153,11 @@ export function GCashWebpayDeposit() {
153
153
  }
154
154
  }, [form, minimumAmount]);
155
155
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
156
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
157
+ (verificationStatus === 'PENDING' ||
158
+ verificationStatus === 'UNVERIFIED' ||
159
+ verificationStatus === 'REJECTED' ||
160
+ verificationStatus === 'CREATED')) {
160
161
  globalStore.kycVerificationStatus.setOpen(true);
161
162
  return;
162
163
  }
@@ -0,0 +1 @@
1
+ export declare function GCashWebpayDeposit(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,191 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } 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 { useCreateGCashWebpayDepositMutation } from '../../../../client/hooks/useCreateGCashWebpayDepositMutation.js';
11
+ import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
12
+ import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
13
+ import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
14
+ import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
15
+ import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
16
+ import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
17
+ import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
18
+ import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
19
+ import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
20
+ import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
21
+ import { XIcon } from '../../../../icons/XIcon.js';
22
+ import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
23
+ import { Button } from '../../../../ui/Button/index.js';
24
+ import { Field } from '../../../../ui/Field/index.js';
25
+ import { NumberInput } from '../../../../ui/NumberInput/index.js';
26
+ import { Portal } from '../../../../ui/Portal/index.js';
27
+ import { parseDecimal } from '../../../../utils/parseDecimal.js';
28
+ import { AmountChoices } from '../../AmountChoices.js';
29
+ import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
30
+ import { AvailablePromos } from '../AvailablePromos.js';
31
+ export function GCashWebpayDeposit() {
32
+ const depositWithdrawalProps = useDepositWithdrawalPropsContext();
33
+ const disclosure = useDisclosure();
34
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
35
+ depositWithdrawal: ctx.depositWithdrawal,
36
+ kycVerificationStatus: ctx.kycVerificationStatus,
37
+ })));
38
+ const verificationQuery = useMemberVerificationQuery();
39
+ const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
40
+ const [status, setStatus] = useState('waiting');
41
+ const createDepositMutation = useCreateGCashWebpayDepositMutation({
42
+ onMutate() {
43
+ disclosure.setOpen(true);
44
+ setStatus('processing');
45
+ },
46
+ onSuccess(data) {
47
+ invariant(data.checkoutUrl);
48
+ window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
49
+ form.reset();
50
+ disclosure.setOpen(false);
51
+ },
52
+ onError() {
53
+ disclosure.setOpen(true);
54
+ setStatus('failed');
55
+ },
56
+ });
57
+ const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
58
+ enabled: createDepositMutation.data != null,
59
+ refetchInterval(ctx) {
60
+ if (ctx.state.data?.status === 'CANCELLED' ||
61
+ ctx.state.data?.status === 'CONFIRMED') {
62
+ return false;
63
+ }
64
+ else {
65
+ return 2500;
66
+ }
67
+ },
68
+ });
69
+ useEffect(() => {
70
+ if (depositQuery.data?.status === 'CANCELLED') {
71
+ disclosure.setOpen(true);
72
+ setStatus('failed');
73
+ }
74
+ else if (depositQuery.data?.status === 'CONFIRMED') {
75
+ disclosure.setOpen(true);
76
+ setStatus('success');
77
+ }
78
+ }, [depositQuery.data?.status, disclosure]);
79
+ const depositsCountQuery = useDepositsCountQuery();
80
+ const depositsCount = depositsCountQuery.data ?? 0;
81
+ const paymentSettingsQuery = usePaymentSettingsQuery();
82
+ const paymentSettings = paymentSettingsQuery.data;
83
+ const gatewaySettings = paymentSettings?.gcashWebpayDepositGatewaySettings;
84
+ const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
85
+ const minimumAmount = depositsCount <= 0
86
+ ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
87
+ : parseDecimal(gatewaySettings?.minimumAmount, 0);
88
+ const promosQuery = useAvailablePromosQuery();
89
+ const promos = promosQuery.data ?? [];
90
+ const definition = z
91
+ .object({
92
+ amount: z.string().superRefine((val, ctx) => {
93
+ const n = parseDecimal(val, 0);
94
+ if (n < minimumAmount) {
95
+ ctx.addIssue({
96
+ type: 'number',
97
+ code: z.ZodIssueCode.too_small,
98
+ inclusive: true,
99
+ minimum: minimumAmount,
100
+ message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
101
+ });
102
+ }
103
+ if (n > maximumAmount) {
104
+ ctx.addIssue({
105
+ type: 'number',
106
+ code: z.ZodIssueCode.too_big,
107
+ inclusive: true,
108
+ maximum: maximumAmount,
109
+ message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
110
+ });
111
+ }
112
+ }),
113
+ promo: z.string().optional().nullable(),
114
+ })
115
+ .superRefine((value, ctx) => {
116
+ const promo = promos.find((o) => o.id === value.promo);
117
+ const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
118
+ const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
119
+ const amount = parseDecimal(value.amount, 0);
120
+ if (promo && amount < promoMinAmount) {
121
+ ctx.addIssue({
122
+ path: ['amount'],
123
+ code: z.ZodIssueCode.custom,
124
+ message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
125
+ });
126
+ }
127
+ if (promo && amount > promoMaxAmount) {
128
+ ctx.addIssue({
129
+ path: ['amount'],
130
+ code: z.ZodIssueCode.custom,
131
+ message: `Maximum amount for this promo is ${promoMaxAmount}`,
132
+ });
133
+ }
134
+ });
135
+ const form = useForm({
136
+ mode: 'all',
137
+ resolver: zodResolver(definition),
138
+ defaultValues: {
139
+ amount: '0',
140
+ promo: globalStore.depositWithdrawal.promo ?? null,
141
+ },
142
+ });
143
+ useEffect(() => {
144
+ if (minimumAmount) {
145
+ form.reset({
146
+ amount: minimumAmount.toString(),
147
+ promo: form.getValues('promo') ?? null,
148
+ });
149
+ }
150
+ }, [form, minimumAmount]);
151
+ return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
152
+ //handle new kyc process
153
+ if (verificationStatus === 'PENDING' ||
154
+ verificationStatus === 'UNVERIFIED' ||
155
+ verificationStatus === 'REJECTED' ||
156
+ verificationStatus === 'CREATED') {
157
+ globalStore.kycVerificationStatus.setOpen(true);
158
+ return;
159
+ }
160
+ else {
161
+ createDepositMutation.reset();
162
+ createDepositMutation.mutate({
163
+ amount: data.amount.toString(),
164
+ promo: data.promo ?? undefined,
165
+ successRedirectionUrl: window.location.origin,
166
+ cancelRedirectionUrl: window.location.origin,
167
+ });
168
+ }
169
+ }), 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) => {
170
+ o.field.onChange(details.value);
171
+ }, formatOptions: {
172
+ maximumFractionDigits: 2,
173
+ minimumFractionDigits: 0,
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, 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' &&
186
+ "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
187
+ 'Your deposit has been successfully processed.', status === 'failed' &&
188
+ '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: () => {
189
+ api.setOpen(false);
190
+ }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
191
+ }
@@ -154,10 +154,11 @@ export function LibanganDeposit() {
154
154
  }, [form, minimumAmount]);
155
155
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
156
  //handle new kyc process
157
- if (verificationStatus === 'PENDING' ||
158
- verificationStatus === 'UNVERIFIED' ||
159
- verificationStatus === 'REJECTED' ||
160
- verificationStatus === 'CREATED') {
157
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
158
+ (verificationStatus === 'PENDING' ||
159
+ verificationStatus === 'UNVERIFIED' ||
160
+ verificationStatus === 'REJECTED' ||
161
+ verificationStatus === 'CREATED')) {
161
162
  globalStore.kycVerificationStatus.setOpen(true);
162
163
  return;
163
164
  }
@@ -120,10 +120,11 @@ export function MayaAppDeposit() {
120
120
  }, [form, minimumAmount]);
121
121
  const handleSubmit = form.handleSubmit(async (data) => {
122
122
  //handle new kyc process
123
- if (verificationStatus === 'PENDING' ||
124
- verificationStatus === 'UNVERIFIED' ||
125
- verificationStatus === 'REJECTED' ||
126
- verificationStatus === 'CREATED') {
123
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
124
+ (verificationStatus === 'PENDING' ||
125
+ verificationStatus === 'UNVERIFIED' ||
126
+ verificationStatus === 'REJECTED' ||
127
+ verificationStatus === 'CREATED')) {
127
128
  globalStore.kycVerificationStatus.setOpen(true);
128
129
  return;
129
130
  }
@@ -153,10 +153,11 @@ export function MayaDeposit() {
153
153
  }
154
154
  }, [form, minimumAmount]);
155
155
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
156
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
157
+ (verificationStatus === 'PENDING' ||
158
+ verificationStatus === 'UNVERIFIED' ||
159
+ verificationStatus === 'REJECTED' ||
160
+ verificationStatus === 'CREATED')) {
160
161
  globalStore.kycVerificationStatus.setOpen(true);
161
162
  return;
162
163
  }
@@ -153,10 +153,11 @@ export function MayaWebpayDeposit() {
153
153
  }
154
154
  }, [form, minimumAmount]);
155
155
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
156
- if (verificationStatus === 'PENDING' ||
157
- verificationStatus === 'UNVERIFIED' ||
158
- verificationStatus === 'REJECTED' ||
159
- verificationStatus === 'CREATED') {
156
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
157
+ (verificationStatus === 'PENDING' ||
158
+ verificationStatus === 'UNVERIFIED' ||
159
+ verificationStatus === 'REJECTED' ||
160
+ verificationStatus === 'CREATED')) {
160
161
  globalStore.kycVerificationStatus.setOpen(true);
161
162
  return;
162
163
  }
@@ -5,7 +5,9 @@ import { useCreateOnlineBankDepositMutation } from '../../../../client/hooks/use
5
5
  import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
6
6
  import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
7
7
  import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.js';
8
+ import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
8
9
  export function useOnlineBankDeposit() {
10
+ const depositWithdrawalProps = useDepositWithdrawalPropsContext();
9
11
  const globalStore = useGlobalStore(useShallow((ctx) => ({
10
12
  kycVerificationStatus: ctx.kycVerificationStatus,
11
13
  })));
@@ -34,10 +36,11 @@ export function useOnlineBankDeposit() {
34
36
  });
35
37
  const generateVCA = (input) => {
36
38
  //handle new kyc process
37
- if (verificationStatus === 'PENDING' ||
38
- verificationStatus === 'UNVERIFIED' ||
39
- verificationStatus === 'REJECTED' ||
40
- verificationStatus === 'CREATED') {
39
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
40
+ (verificationStatus === 'PENDING' ||
41
+ verificationStatus === 'UNVERIFIED' ||
42
+ verificationStatus === 'REJECTED' ||
43
+ verificationStatus === 'CREATED')) {
41
44
  globalStore.kycVerificationStatus.setOpen(true);
42
45
  return;
43
46
  }
@@ -163,10 +163,11 @@ export function PisoPayDeposit() {
163
163
  }
164
164
  }, [form, minimumAmount]);
165
165
  return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
166
- if (verificationStatus === 'PENDING' ||
167
- verificationStatus === 'UNVERIFIED' ||
168
- verificationStatus === 'REJECTED' ||
169
- verificationStatus === 'CREATED') {
166
+ if (!depositWithdrawalProps.bypassDepositKycCheck &&
167
+ (verificationStatus === 'PENDING' ||
168
+ verificationStatus === 'UNVERIFIED' ||
169
+ verificationStatus === 'REJECTED' ||
170
+ verificationStatus === 'CREATED')) {
170
171
  globalStore.kycVerificationStatus.setOpen(true);
171
172
  return;
172
173
  }
@@ -1,6 +1,6 @@
1
1
  export declare const QRPHDepositContext: (props: {
2
2
  value: {
3
- status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
3
+ status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
4
4
  deposit: import("../../../../types").Deposit | null;
5
5
  generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
6
6
  regenerateQRCode: () => Promise<void>;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: (props: {
9
9
  } & {
10
10
  children?: import("react").ReactNode | undefined;
11
11
  }) => React.ReactNode, useQRPHDepositContext: () => {
12
- status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
12
+ status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
13
13
  deposit: import("../../../../types").Deposit | null;
14
14
  generateQRCode: (input: import("./useQRPHDeposit").GenerateQRCodeInput) => Promise<void>;
15
15
  regenerateQRCode: () => Promise<void>;
@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
5
5
  promo?: string | null;
6
6
  }
7
7
  export declare function useQRPHDeposit(): {
8
- status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
8
+ status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
9
9
  deposit: Deposit | null;
10
10
  generateQRCode: (input: GenerateQRCodeInput) => Promise<void>;
11
11
  regenerateQRCode: () => Promise<void>;