@opexa/portal-components 0.0.29 → 0.0.31

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SpinnerIcon } from '../../../../icons/index.js';
+export function OnlineBankDepositLoading() {
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:py-16", children: [_jsx(SpinnerIcon, { className: "mx-auto size-8 lg:size-10" }), _jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "Processing Your Deposit" }), _jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Your deposit is being processed. Please hold tight as we verify the account details and amount. Once verified, a Virtual Collection Account (VCA) will be displayed for you to copy and paste in a designated field and complete the transaction." })] }));
+}

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleBrokenIcon } from '../../../../icons/index.js';
+export function OnlineBankDepositSuccess() {
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", children: [_jsx(CheckCircleBrokenIcon, { className: "text-green-600 mx-auto size-8 lg:size-10" }), _jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "Deposit Successful!" }), _jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Your funds have been successfully added and are now ready to use in your account." })] }));
+}

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

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

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

@@ -0,0 +1,14 @@
+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 '../../../../images/bank-icon.png';
+import { Button, Clipboard, Dialog } from '../../../../ui/index.js';
+import { useOnlineBankDepositContext } from './OnlineBankDepositContext.js';
+export function OnlineBankDepositVCA() {
+    const context = useOnlineBankDepositContext();
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", 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.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, {})] }));
+}
+function Instruction() {
+    return (_jsxs("p", { className: "text-gray-500 mt-6 text-center text-xs", children: ["Need help using the online bank for payment?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-blue-500", 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)] rounded-lg bg-white 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: "border-gray-200 flex size-11 items-center justify-center rounded-lg border", children: _jsx(BankIcon, { className: "text-gray-600 size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", 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." })] })] }) })] })] })] }));
+}

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QRPHDepositContext } from './QRPHDepositContext.js';
+import { QRPHDepositForm } from './QRPHDepositForm.js';
+import { QRPHDepositLoading } from './QRPHDepositLoading.js';
+import { QRPHDepositQrCode } from './QRPHDepositQrCode.js';
+import { QRPHDepositSuccess } from './QRPHDepositSuccess.js';
+import { useQRPHDeposit } from './useQRPHDeposit.js';
+export function QRPHDeposit() {
+    const context = useQRPHDeposit();
+    return (_jsxs(QRPHDepositContext, { value: context, children: [context.view === 'FORM' && _jsx(QRPHDepositForm, {}), context.view === 'LOADING' && _jsx(QRPHDepositLoading, {}), context.view === 'SUCCESS' && _jsx(QRPHDepositSuccess, {}), (context.view === 'QR_CODE' || context.view === 'VERIFYING') && (_jsx(QRPHDepositQrCode, {}))] }));
+}

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

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

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
+import { parseDecimal } from '../../../../utils/index.js';
+import { AmountChoices } from '../../AmountChoices.js';
+import { AvailablePromos } from '../AvailablePromos.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function QRPHDepositForm() {
+    const context = useQRPHDepositContext();
+    const disclosure = useDisclosure();
+    const depositsCountQuery = useDepositsCountQuery();
+    const depositsCount = depositsCountQuery.data ?? 0;
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const gatewaySettings = paymentSettings?.qrphDepositGatewaySettings;
+    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
+    const minimumAmount = depositsCount <= 0
+        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
+        : parseDecimal(gatewaySettings?.minimumAmount, 0);
+    const promosQuery = useAvailablePromosQuery();
+    const promos = promosQuery.data ?? [];
+    const definition = z
+        .object({
+        amount: z.string().superRefine((val, ctx) => {
+            const n = parseDecimal(val, 0);
+            if (n < minimumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_small,
+                    inclusive: true,
+                    minimum: minimumAmount,
+                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
+                });
+            }
+            if (n > maximumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_big,
+                    inclusive: true,
+                    maximum: maximumAmount,
+                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
+                });
+            }
+        }),
+        promo: z.string().optional().nullable(),
+    })
+        .superRefine((value, ctx) => {
+        const promo = promos.find((o) => o.id === value.promo);
+        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
+        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
+        const amount = parseDecimal(value.amount, 0);
+        if (promo && amount < promoMinAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
+            });
+        }
+        if (promo && amount > promoMaxAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Maximum amount for this promo is ${promoMaxAmount}`,
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            promo: null,
+        },
+    });
+    useEffect(() => {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                promo: null,
+            });
+        }
+    }, [form, minimumAmount]);
+    const handleSubmit = form.handleSubmit(async (data) => {
+        context.generateQrCode({
+            amount: data.amount.toString(),
+            promo: data.promo ?? undefined,
+        }, {
+            onSuccess() {
+                form.reset();
+            },
+        });
+    });
+    return (_jsxs("form", { onSubmit: handleSubmit, 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) => {
+                                o.field.onChange(details.value);
+                            }, formatOptions: {
+                                maximumFractionDigits: 2,
+                                minimumFractionDigits: 0,
+                            }, 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) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        shouldDirty: true,
+                        shouldValidate: true,
+                    });
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { className: "mt-4xl", value: o.field.value, onChange: o.field.onChange })) }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", onClick: async (e) => {
+                    const ok = await form.trigger('amount');
+                    if (!ok)
+                        return;
+                    if (promos.length <= 0)
+                        return;
+                    if (form.getValues('promo'))
+                        return;
+                    e.preventDefault();
+                    disclosure.setOpen(true);
+                }, children: "Deposit" }), _jsx(AlertDialog.Root, { role: "alertdialog", open: disclosure.open, onOpenChange: (details) => {
+                    disclosure.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+10)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+25)]", children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Submit deposit request without promo?" }), _jsx(AlertDialog.Description, { children: "You haven\u2019t selected a promo. Are you sure you want to proceed without one?" })] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                                    disclosure.setOpen(false);
+                                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                                    handleSubmit();
+                                                    disclosure.setOpen(false);
+                                                }, children: "Proceed" })] })] }) })] }) })] }));
+}

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SpinnerIcon } from '../../../../icons/index.js';
+export function QRPHDepositLoading() {
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", children: [_jsx(SpinnerIcon, { className: "mx-auto size-8 lg:size-10" }), _jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "Generating QR Code" }), _jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Please hold tight as we verify the account details and amount. Once verified, a QRPH code will be displayed for you to scan and complete the transaction." })] }));
+}

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

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

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

@@ -0,0 +1,18 @@
+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, SpinnerIcon, XIcon } from '../../../../icons/index.js';
+import qrphIcon from '../../../../images/qrph-icon.png';
+import { Button, Dialog } from '../../../../ui/index.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function QRPHDepositQrCode() {
+    const context = useQRPHDepositContext();
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", children: [_jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "QR Code" }), _jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Scan the QR code below with your banking app, or upload it to complete your deposit." }), _jsxs(QrCode.Root, { value: context.qrCode ?? '', className: "border-gray-200 mx-auto mt-6 w-[12.5rem] rounded-lg border bg-white p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "border-gray-200 mx-auto size-[10rem] rounded-[0.25rem] border", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsx(QrCode.DownloadTrigger, { fileName: `qrcode-${new Date().getTime()}`, mimeType: "image/png", className: "text-gray-900 mt-5 block w-full text-center text-sm font-semibold", children: "Download QR Code" })] }), context.view === 'QR_CODE' && (_jsxs("div", { className: "mt-6 flex flex-col gap-4 lg:flex-row", children: [_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => {
+                            context.reset();
+                        }, children: "Generate New QR Code" }), _jsx(Button, { size: "sm", onClick: () => {
+                            context.verify();
+                        }, children: "Confirm Deposit" })] })), context.view === 'VERIFYING' && (_jsxs("div", { className: "border-gray-200 mt-6 rounded-lg border bg-white p-4 lg:p-6", children: [_jsx(SpinnerIcon, { className: "mx-auto size-6 lg:size-8" }), _jsx("p", { className: "mt-5 text-center font-semibold lg:text-lg", children: "Processing your deposit" }), _jsxs("p", { className: "text-gray-700 mx-auto mt-2 text-center text-xs lg:text-sm", children: ["Your deposit is being processed. ", _jsx("br", {}), "Please hold tight as we verify the account details and amount."] })] })), _jsx(Instruction, {})] }));
+}
+function Instruction() {
+    return (_jsxs("p", { className: "text-gray-500 mt-6 text-center text-xs", children: ["Need help using the QR Code?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-blue-500", 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)] rounded-lg bg-white 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: "border-gray-200 flex size-11 items-center justify-center rounded-lg border", children: _jsx(QrCode02Icon, { className: "text-gray-600 size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "How to Use the QR Code 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: "Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR'" }), _jsx("li", { children: "Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent." }), _jsx("li", { children: "Proceed with the transfer or payment." })] })] })] }) })] })] })] }));
+}

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleBrokenIcon } from '../../../../icons/index.js';
+import { Button } from '../../../../ui/index.js';
+import { useQRPHDepositContext } from './QRPHDepositContext.js';
+export function QRPHDepositSuccess() {
+    const context = useQRPHDepositContext();
+    return (_jsxs("div", { className: "bg-gray-50 rounded-lg px-10 py-12 lg:p-16", children: [_jsx(CheckCircleBrokenIcon, { className: "text-green-600 mx-auto size-8 lg:size-10" }), _jsx("p", { className: "mt-5 text-center text-lg font-semibold lg:text-xl", children: "Deposit Successful!" }), _jsx("p", { className: "text-gray-700 mt-3 text-center text-sm lg:text-base", children: "Your funds have been successfully added and are now ready to use in your account." }), _jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", className: "mx-auto mt-6 w-fit", onClick: () => context.reset(), children: "Generate New QR Code" })] }));
+}

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

@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
 interface DepositWithdrawalProps {
     children?: ReactNode;
 }
-export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react").JSX.Element;
+export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DepositWithdrawal/DepositWithdrawal.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useLocaleInfo, useWalletQuery } from '../../client/hooks/index.js';
+import { Wallet02Icon, XIcon } from '../../icons/index.js';
+import { Dialog, Tabs } from '../../ui/index.js';
+import { formatNumber } from '../../utils/index.js';
+import { Deposit } from './Deposit/Deposit.js';
+import { Withdrawal } from './Withdrawal/Withdrawal.js';
+export function DepositWithdrawal(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
+    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
+            globalStore.depositWithdrawal.setOpen(details.open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? _jsx(DefaulTrigger, {}) }), _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 p-2xl lg:w-[640px] lg:rounded-xl lg:p-3xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-secondary shadow-xs text-gray-700 flex size-12 items-center justify-center rounded-lg border", children: _jsx(Wallet02Icon, {}) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" })] }), _jsxs(Dialog.Body, { className: "mt-5", children: [_jsx("p", { className: "text-gray-500 text-center text-sm font-medium leading-tight", children: "Available Balance" }), _jsx("p", { className: "mt-lg text-center text-4xl font-semibold 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-4xl 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-4xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-4xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] })] }));
+}
+function DefaulTrigger(props) {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 5000,
+    });
+    return (_jsxs("button", { type: "button", ...props, className: twMerge('flex', props.className), children: [_jsx("div", { className: "border-border-primary flex h-10 items-center rounded-l-md border border-r-0 px-3.5", children: formatNumber(walletQuery.data?.balance, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                }) }), _jsx("div", { className: "bg-button-primary-bg text-button-primary-fg flex h-10 items-center gap-1.5 rounded-r-md px-3.5 text-sm font-semibold", children: "Deposit" })] }));
+}

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

@@ -2,4 +2,4 @@ import type { ComponentPropsWithRef } from 'react';
 export interface DepositWithdrawalTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function DepositWithdrawalTrigger(props: DepositWithdrawalTriggerProps): import("react").JSX.Element;
+export declare function DepositWithdrawalTrigger(props: DepositWithdrawalTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/{DepositWithdrawalTrigger.jsx → DepositWithdrawalTrigger.js}

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore, useSessionQuery } from '../../client/hooks/index.js';
@@ -12,8 +13,8 @@ export function DepositWithdrawalTrigger(props) {
         : globalStore.depositWithdrawal.open
             ? true
             : props.disabled;
-    return (<ark.button type="button" {...props} onClick={async (e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: async (e) => {
             props.onClick?.(e);
             globalStore.depositWithdrawal.setOpen(true);
-        }} disabled={disabled} data-state={globalStore.depositWithdrawal.open ? 'open' : 'closed'}/>);
+        }, disabled: disabled, "data-state": globalStore.depositWithdrawal.open ? 'open' : 'closed' }));
 }

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

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

package/dist/components/DepositWithdrawal/MayaSessionExpired.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon } from '../../icons/index.js';
+export function MayaSessionExpired() {
+    return (_jsxs("div", { className: "bg-gray-50 mt-3xl rounded-lg px-5 py-16 lg:mt-4xl", children: [_jsx(AlertTriangleIcon, { className: "text-amber-500 mx-auto size-10" }), _jsx("h2", { className: "mt-3 text-center text-lg font-semibold", children: "Session Expired" }), _jsx("p", { className: "text-gray-700 mx-auto mt-2 max-w-[30rem] text-center text-sm", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));
+}

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

@@ -6,5 +6,5 @@ interface PaymentMethodsProps {
     options?: PaymentMethod[];
     className?: string;
 }
-export declare function PaymentMethods(props: PaymentMethodsProps): import("react").JSX.Element;
+export declare function PaymentMethods(props: PaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DepositWithdrawal/{PaymentMethods.jsx → PaymentMethods.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import { useControllableState } from '../../client/hooks/index.js';
 import { CheckIcon } from '../../icons/index.js';
@@ -49,27 +50,10 @@ export function PaymentMethods(props) {
         defaultValue: props.defaultValue ?? options[0].value,
         onChange: props.onChange,
     });
-    return (<div className={props.className}>
-      <Field.Label asChild>
-        <div>Select your payment method</div>
-      </Field.Label>
-      <Checkbox.Group value={[value]} onValueChange={(newValue) => {
-            const lastValue = newValue.at(-1);
-            if (!lastValue)
-                return;
-            setValue(PaymentMethodDefinition.parse(lastValue));
-        }} className="grid grid-cols-2 gap-x-4 gap-y-3">
-        {options.map((option) => (<Checkbox.Root key={option.value} value={option.value} className="border-border-secondary ui-checked:border-gray-900 ui-checked:outline-solid ui-checked:outline-border-secondary flex cursor-pointer rounded-xl border p-xl ui-checked:outline">
-            <div className="grow">
-              <Image src={option.image} alt="" width={200} height={40} className="h-5 w-auto lg:h-8" draggable={false}/>
-            </div>
-            <Checkbox.Control className="shrink-0">
-              <Checkbox.Indicator asChild>
-                <CheckIcon />
-              </Checkbox.Indicator>
-            </Checkbox.Control>
-            <Checkbox.HiddenInput />
-          </Checkbox.Root>))}
-      </Checkbox.Group>
-    </div>);
+    return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Select your payment method" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
+                    const lastValue = newValue.at(-1);
+                    if (!lastValue)
+                        return;
+                    setValue(PaymentMethodDefinition.parse(lastValue));
+                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "border-border-secondary ui-checked:border-gray-900 ui-checked:outline-solid ui-checked:outline-border-secondary flex cursor-pointer rounded-xl border p-xl ui-checked:outline", children: [_jsx("div", { className: "grow", children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: "h-5 w-auto lg:h-8", draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
 }

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

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

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/{GCashWithdrawal.jsx → GCashWithdrawal.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -8,7 +9,7 @@ import { toaster } from '../../../../client/utils/index.js';
 import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
 import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
+import { AmountChoices } from '../../AmountChoices.js';
 export function GCashWithdrawal() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
@@ -89,81 +90,16 @@ export function GCashWithdrawal() {
             transactionPassword: data.password,
         });
     });
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Field.Root invalid={!!form.formState.errors.mobileNumber}>
-        <Field.Label>Mobile Number</Field.Label>
-        <div className="relative">
-          <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
-          <Field.Input className="pl-10.5" {...form.register('mobileNumber')}/>
-        </div>
-        <Field.ErrorText>
-          {form.formState.errors.mobileNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _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) => {
+                                o.field.onChange(details.value);
+                            }, formatOptions: {
+                                maximumFractionDigits: 2,
+                                minimumFractionDigits: 0,
+                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _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) => {
+                    form.setValue('amount', value.toString(), {
+                        shouldTouch: true,
+                        shouldDirty: true,
+                        shouldValidate: true,
+                    });
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') })] }));
 }

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

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