@opexa/portal-components 0.0.98 → 0.0.100

package/dist/components/Cashback/Cashback.d.ts

@@ -1,7 +1,3 @@
-export interface CashbackProps {
-    id: string;
-    /** @default '/promos' */
-    viewAllPromosUrl?: string;
-    className?: string;
-}
+import { type CashbackProps } from './Cashback.client';
 export declare function Cashback(props: CashbackProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { CashbackProps };

package/dist/components/Cashback/Cashback.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notFound } from 'next/navigation';
-import { prefetchCashbackQuery } from '../../server/utils/index.js';
-import { getCashbackQueryKey, getQueryClient } from '../../utils/index.js';
+import { prefetchCashbackQuery } from '../../server/utils/prefetchCashbackQuery.js';
+import { getCashback } from '../../services/wallet.js';
 import { Cashback__client } from './Cashback.client.js';
 export async function Cashback(props) {
-    await prefetchCashbackQuery(props.id);
-    const cashback = getQueryClient().getQueryData(getCashbackQueryKey(props.id));
-    if (!cashback)
+    const [result] = await Promise.allSettled([
+        getCashback(props.id),
+        prefetchCashbackQuery(props.id),
+    ]);
+    if (result.status === 'fulfilled' && result.value) {
+        return _jsx(Cashback__client, { ...props });
+    }
+    else {
         return notFound();
-    return _jsx(Cashback__client, { ...props });
+    }
 }

package/dist/components/DepositWithdrawal/AmountChoices.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { twMerge } from 'tailwind-merge';
-import { useControllableState, useLocaleInfo } from '../../client/hooks/index.js';
-import { Button } from '../../ui/index.js';
-import { dataAttr, formatNumber } from '../../utils/index.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { Button } from '../../ui/Button/index.js';
+import { dataAttr } from '../../utils/dataAttr.js';
+import { formatNumber } from '../../utils/formatNumber.js';
 export function AmountChoices(props) {
     const min = props.min ?? 0;
     const max = props.max ?? 9999999;

package/dist/components/DepositWithdrawal/Deposit/AvailablePromos.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createListCollection } from '@ark-ui/react';
 import Image from 'next/image';
-import { useAvailablePromosQuery, useControllableState, } from '../../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon } from '../../../icons/index.js';
+import { useAvailablePromosQuery } from '../../../client/hooks/useAvailablePromosQuery.js';
+import { useControllableState } from '../../../client/hooks/useControllableState.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
 import gift from '../../../images/gift.png';
-import { Select } from '../../../ui/index.js';
+import { Select } from '../../../ui/Select/index.js';
 export function AvailablePromos(props) {
     const query = useAvailablePromosQuery();
     const promos = query.data ?? [];

package/dist/components/DepositWithdrawal/Deposit/Deposit.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { useIsMayaSessionValidQuery, useOnMMA, usePaymentSettingsQuery, } from '../../../client/hooks/index.js';
-import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
-import { onMobileDevice } from '../../../utils/index.js';
+import { useIsMayaSessionValidQuery } from '../../../client/hooks/useIsMayaSessionValidQuery.js';
+import { useOnMMA } from '../../../client/hooks/useOnMMA.js';
+import { usePaymentSettingsQuery } from '../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.js';
+import { SpinnerIcon } from '../../../icons/SpinnerIcon.js';
+import { onMobileDevice } from '../../../utils/onMobileDevice.js';
 import { PaymentMethods } from '../PaymentMethods.js';
 import { GCashDeposit } from './GCashDeposit/GCashDeposit.js';
 import { MayaAppDeposit } from './MayaAppDeposit/MayaAppDeposit.js';

package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js

@@ -6,10 +6,21 @@ import { Controller, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateGCashDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useCreateGCashDepositMutation } from '../../../../client/hooks/useCreateGCashDepositMutation.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 export function GCashDeposit() {

package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.js

@@ -5,10 +5,21 @@ import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateMayaAppDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useCreateMayaAppDepositMutation } from '../../../../client/hooks/useCreateMayaAppDepositMutation.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 export function MayaAppDeposit() {

package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js

@@ -6,10 +6,21 @@ import { Controller, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCreateMayaDepositMutation, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useCreateMayaDepositMutation } from '../../../../client/hooks/useCreateMayaDepositMutation.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 export function MayaDeposit() {

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositAlert.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { AlertCircleIcon, SpinnerIcon, XIcon } from '../../../../icons/index.js';
-import { AlertDialog, Button } from '../../../../ui/index.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
 import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
 export function OnlineBankDepositAlert() {
     const context = useOnlineBankDepositContext();

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const OnlineBankDepositContext: import("react").Context<{
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const OnlineBankDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useOnlineBankDepositContext: () => {
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../../../client/utils/index.js';
+import { createContext } from '../../../../client/utils/createContext.js';
 export const [OnlineBankDepositContext, useOnlineBankDepositContext] = createContext();

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositDetails.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
 import Image from 'next/image';
-import { BankIcon, XIcon } from '../../../../icons/index.js';
+import { BankIcon } from '../../../../icons/BankIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
 import bankIcon from '../../../../images/bank-icon.png';
-import { Button, Clipboard, Dialog } from '../../../../ui/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Clipboard } from '../../../../ui/Clipboard/index.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
 import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
 export function OnlineBankDepositDetails() {
     const context = useOnlineBankDepositContext();

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositForm.js

@@ -5,10 +5,16 @@ import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
-import { Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "form" | "vca";
+    view: "vca" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { useCreateOnlineBankDepositMutation, useDepositQuery, } from '../../../../client/hooks/index.js';
+import { useCreateOnlineBankDepositMutation } from '../../../../client/hooks/useCreateOnlineBankDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
 export function useOnlineBankDeposit() {
     const [deposit, setDeposit] = useState(null);
     const [status, setStatus] = useState('waiting');

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositAlert.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
-import { AlertCircleIcon, SpinnerIcon, XIcon } from '../../../../icons/index.js';
-import { AlertDialog, Button } from '../../../../ui/index.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function QRPHDepositAlert() {
     const context = useQRPHDepositContext();

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const QRPHDepositContext: import("react").Context<{
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useQRPHDepositContext: () => {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.js

@@ -1,2 +1,2 @@
-import { createContext } from '../../../../client/utils/index.js';
+import { createContext } from '../../../../client/utils/createContext.js';
 export const [QRPHDepositContext, useQRPHDepositContext] = createContext();

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal, QrCode } from '@ark-ui/react';
 import Image from 'next/image';
-import { QrCode02Icon, XIcon } from '../../../../icons/index.js';
+import { QrCode02Icon } from '../../../../icons/QrCode02Icon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
 import qrphIcon from '../../../../images/qrph-icon.png';
-import { Button, Dialog } from '../../../../ui/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';
 export function QRPHDepositDetails() {
     const context = useQRPHDepositContext();

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.js

@@ -4,10 +4,16 @@ import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useDepositsCountQuery, useGlobalStore, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { ChevronDownIcon, ChevronUpIcon } from '../../../../icons/index.js';
-import { Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { AvailablePromos } from '../AvailablePromos.js';
 import { useQRPHDepositContext } from './QRPHDepositContext.js';

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
+    view: "qrCode" | "form";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { useCreateQRPHDepositMutation, useDepositQuery, } from '../../../../client/hooks/index.js';
+import { useCreateQRPHDepositMutation } from '../../../../client/hooks/useCreateQRPHDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
 export function useQRPHDeposit() {
     const [deposit, setDeposit] = useState(null);
     const [status, setStatus] = useState('waiting');

package/dist/components/DepositWithdrawal/DepositWithdrawal.d.ts

@@ -1 +1 @@
-export declare function DepositWithdrawal(): import("react/jsx-runtime").JSX.Element;
+export declare function DepositWithdrawal(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/DepositWithdrawal/DepositWithdrawal.js

@@ -1,31 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { z } from 'zod';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useWalletQuery, } from '../../client/hooks/index.js';
-import { Wallet02Icon, XIcon } from '../../icons/index.js';
-import { Dialog, IconButton, Tabs } from '../../ui/index.js';
-import { formatNumber } from '../../utils/index.js';
-import { Deposit } from './Deposit/Deposit.js';
-import { Withdrawal } from './Withdrawal/Withdrawal.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./DepositWithdrawal.lazy.js').then((m) => m.DepositWithdrawal), {
+    ssr: false,
+    loading: () => null,
+});
 export function DepositWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
-            globalStore.depositWithdrawal.setOpen(details.open);
-            if (!details.open) {
-                globalStore.depositWithdrawal.setPromo(null);
-            }
-        }, 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)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
-                                            currency: localeInfo.currency.code,
-                                            minDecimalPlaces: 2,
-                                        }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
-                                            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-                                        }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] }) }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.depositWithdrawal['~touched']));
+    if (touched)
+        return _jsx(Component, {});
 }

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts

@@ -0,0 +1 @@
+export declare function DepositWithdrawal(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
+import { Wallet02Icon } from '../../icons/Wallet02Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { Tabs } from '../../ui/Tabs/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { Deposit } from './Deposit/Deposit.js';
+import { Withdrawal } from './Withdrawal/Withdrawal.js';
+export function DepositWithdrawal() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
+            globalStore.depositWithdrawal.setOpen(details.open);
+            if (!details.open) {
+                globalStore.depositWithdrawal.setPromo(null);
+            }
+        }, 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)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 2,
+                                        }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
+                                            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
+                                        }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] }) }));
+}

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.js

@@ -2,8 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useSessionQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { formatNumber } from '../../utils/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
+import { formatNumber } from '../../utils/formatNumber.js';
 export function DepositWithdrawalTrigger({ asChild, children, ...props }) {
     const sessionQuery = useSessionQuery();
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
-import { useControllableState } from '../../client/hooks/index.js';
-import { CheckIcon } from '../../icons/index.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
 import qrph from '../../images/QRPH.png';
 import gcash from '../../images/gcash.png';
 import instapay from '../../images/instapay.png';
 import maya from '../../images/maya.png';
 import onlineBank from '../../images/online-bank.png';
-import { Checkbox, Field } from '../../ui/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
 import { PaymentMethodDefinition } from './utils.js';
 const OPTIONS = [
     {

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js

@@ -4,10 +4,23 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useCreateGCashWithdrawalMutation, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useCreateGCashWithdrawalMutation } from '../../../../client/hooks/useCreateGCashWithdrawalMutation.js';
+import { useLocaleInfo } from '../../../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../../../client/hooks/useMobileNumberParser.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { EyeIcon } from '../../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function GCashWithdrawal() {
     const [status, setStatus] = useState('waiting');

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js

@@ -4,10 +4,24 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useCreateInstapayWithdrawalMutation, useInstapayBankListQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput, PasswordInput, Select, } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useCreateInstapayWithdrawalMutation } from '../../../../client/hooks/useCreateInstapayWithdrawalMutation.js';
+import { useInstapayBankListQuery } from '../../../../client/hooks/useInstapayBankListQuery.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { CheckIcon } from '../../../../icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { EyeIcon } from '../../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
+import { Select } from '../../../../ui/Select/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function InstapayWithdrawal() {
     const [status, setStatus] = useState('waiting');

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js

@@ -4,10 +4,21 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useCreateMayaAppWithdrawalMutation, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
+import { useCreateMayaAppWithdrawalMutation } from '../../../../client/hooks/useCreateMayaAppWithdrawalMutation.js';
+import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
+import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
+import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
+import { EyeIcon } from '../../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
+import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
+import { Button } from '../../../../ui/Button/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { NumberInput } from '../../../../ui/NumberInput/index.js';
+import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function MayaAppWithdrawal() {
     const [status, setStatus] = useState('waiting');