@opexa/portal-components 0.0.63 → 0.0.65

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

@@ -1,16 +0,0 @@
-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 qrphIcon from '../../../../images/qrph-icon.png';
-import { Button, Dialog } from '../../../../ui/index.js';
-import { useQRPHDepositContext } from './QRPHDepositContext.js';
-export function QRPHDepositDetails() {
-    const context = useQRPHDepositContext();
-    if (context.view !== 'qrCode')
-        return null;
-    return (_jsxs("div", { className: "bg-bg-primary-alt rounded-lg p-2xl", children: [_jsx("p", { className: "text-center text-lg font-semibold lg:text-xl", children: "QR Code" }), _jsx("p", { className: "text-text-secondary-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.deposit?.qrCode ?? '', className: "border-border-primary bg-bg-brand-secondary-alt mx-auto mt-6 w-[12.5rem] rounded-lg border p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "border-border-primary mx-auto size-[10rem] rounded-[0.25rem] border bg-white", 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-text-secondary-700 mt-5 block w-full text-center text-sm font-semibold", children: "Download 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" })] }), _jsx(Instruction, {})] }));
-}
-function Instruction() {
-    return (_jsxs("p", { className: "text-text-tertiary-600 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-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] rounded-lg p-4xl lg:w-[33.625rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-11 items-center justify-center rounded-lg border", children: _jsx(QrCode02Icon, { className: "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/QRPHDepositForm.d.ts

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

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

@@ -1,101 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, 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 { AmountChoices } from '../../AmountChoices.js';
-import { AvailablePromos } from '../AvailablePromos.js';
-import { useQRPHDepositContext } from './QRPHDepositContext.js';
-export function QRPHDepositForm() {
-    const context = useQRPHDepositContext();
-    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]);
-    if (context.view !== 'form')
-        return null;
-    return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateQRCode), 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-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: o.field.onChange, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", children: "Deposit" }), _jsxs("p", { className: "text-text-tertiary-600 mt-lg text-xs", children: ["By depositing, you agree to our", ' ', _jsx("button", { type: "button", className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] })] }));
-}

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

@@ -1,13 +0,0 @@
-import type { Deposit } from '@opexa/portal-sdk-core';
-export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
-export declare function useQRPHDeposit(): {
-    view: "form" | "qrCode";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
-    verify: () => void;
-    reset: () => void;
-    deposit: Deposit | null;
-    generateQRCode: (input: {
-        amount: string;
-        promo?: string | null;
-    }) => void;
-};

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

@@ -1,60 +0,0 @@
-import { useEffect, useState } from 'react';
-import invariant from 'tiny-invariant';
-import { useCreateQRPHDepositMutation, useDepositQuery, } from '../../../../client/hooks/index.js';
-export function useQRPHDeposit() {
-    const [deposit, setDeposit] = useState(null);
-    const [status, setStatus] = useState('waiting');
-    const view = status === 'verification-failed' ||
-        status === 'verification-waiting' ||
-        status === 'verification-success' ||
-        status === 'verification-processing'
-        ? 'qrCode'
-        : 'form';
-    const mutation = useCreateQRPHDepositMutation({
-        onMutate() {
-            setStatus('processing');
-        },
-        onSuccess(data) {
-            invariant(data.qrCode);
-            setStatus('verification-waiting');
-            setDeposit(data);
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
-    const generateQRCode = (input) => mutation.mutate({
-        amount: input.amount,
-        promo: input.promo ?? undefined,
-    });
-    const query = useDepositQuery(deposit?.id, {
-        enabled: !!deposit,
-        refetchInterval: 5000,
-    });
-    useEffect(() => {
-        if (query.data?.status === 'APPROVED' ||
-            query.data?.status === 'CONFIRMED') {
-            setStatus('verification-success');
-        }
-        if (query.data?.status === 'CANCELLED' ||
-            query.data?.status === 'REJECTED' ||
-            query.data?.status === 'FAILED') {
-            setStatus('verification-failed');
-        }
-    }, [query.data?.status]);
-    const reset = () => {
-        setDeposit(null);
-        setStatus('waiting');
-    };
-    const verify = () => {
-        setStatus('verification-processing');
-    };
-    return {
-        view,
-        status,
-        verify,
-        reset,
-        deposit,
-        generateQRCode,
-    };
-}

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

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

package/dist/components/DepositWithdrawal/DepositWithdrawal.js

@@ -1,39 +0,0 @@
-'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, IconButton, 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 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, {}) })] })] })] }) })] })] }));
-}
-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

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

package/dist/components/DepositWithdrawal/DepositWithdrawalTrigger.js

@@ -1,21 +0,0 @@
-'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';
-export function DepositWithdrawalTrigger(props) {
-    const sessionQuery = useSessionQuery();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const disabled = sessionQuery.data?.status === 'unauthenticated'
-        ? true
-        : globalStore.depositWithdrawal.open
-            ? true
-            : props.disabled;
-    return (_jsx(ark.button, { type: "button", "aria-label": "Deposit or Withdraw", "data-state": globalStore.depositWithdrawal.open ? 'open' : 'closed', ...props, disabled: disabled, onClick: async (e) => {
-            props.onClick?.(e);
-            globalStore.depositWithdrawal.setTab('DEPOSIT');
-            globalStore.depositWithdrawal.setOpen(true);
-        } }));
-}

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

@@ -1,10 +0,0 @@
-import { type PaymentMethod } from './utils';
-interface PaymentMethodsProps {
-    value?: PaymentMethod;
-    onChange?: (value: PaymentMethod) => void;
-    defaultValue?: PaymentMethod;
-    options?: PaymentMethod[];
-    className?: string;
-}
-export declare function PaymentMethods(props: PaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -1,60 +0,0 @@
-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 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 { PaymentMethodDefinition } from './utils.js';
-const OPTIONS = [
-    {
-        value: 'GCASH',
-        label: 'GCash',
-        image: gcash,
-    },
-    {
-        value: 'MAYA_APP',
-        label: 'Maya App',
-        image: maya,
-    },
-    {
-        value: 'MAYA',
-        label: 'Maya',
-        image: maya,
-    },
-    {
-        value: 'QRPH',
-        label: 'QRPH',
-        image: qrph,
-    },
-    {
-        value: 'ONLINE_BANK',
-        label: 'Online Bank',
-        image: onlineBank,
-    },
-    {
-        value: 'INSTAPAY',
-        label: 'Instapay',
-        image: instapay,
-    },
-];
-export function PaymentMethods(props) {
-    const options = props.options?.length
-        ? OPTIONS.filter((option) => props.options?.includes(option.value))
-        : OPTIONS;
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? options[0].value,
-        onChange: props.onChange,
-    });
-    return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Available payment methods" }) }), _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-border-brand-solid flex cursor-pointer items-center justify-between rounded-xl border p-lg", children: [_jsx("div", { className: twMerge('rounded-xs bg-white px-sm py-[0.688rem]', option.value === 'GCASH' && 'bg-[#017EFF]'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: "h-[1.063rem] w-auto", 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 +0,0 @@
-export declare function GCashWithdrawal(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,109 +0,0 @@
-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, 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 { AmountChoices } from '../../AmountChoices.js';
-export function GCashWithdrawal() {
-    const [status, setStatus] = useState('waiting');
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
-        onMutate() {
-            setStatus('processing');
-        },
-        onSuccess() {
-            setStatus('success');
-            form.reset();
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.gcashWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    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()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        mobileNumber: z
-            .string()
-            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number'),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            mobileNumber: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                password: '',
-                mobileNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
-            transactionPassword: data.password,
-        });
-    });
-    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: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
-                    if (!details.open) {
-                        setStatus('waiting');
-                    }
-                }, 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, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
-                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
-                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
-                                                    api.setOpen(false);
-                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
-}

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

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

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

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createListCollection, Portal } from '@ark-ui/react';
-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 { AmountChoices } from '../../AmountChoices.js';
-export function InstapayWithdrawal() {
-    const [status, setStatus] = useState('waiting');
-    const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
-        onMutate() {
-            setStatus('processing');
-        },
-        onSuccess() {
-            form.reset();
-            setStatus('success');
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
-    const instapayBankListQuery = useInstapayBankListQuery();
-    const instapayBankList = instapayBankListQuery.data;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.instapayWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    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()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        accountNumber: z.string().min(1).trim(),
-        bankCode: z.string().min(1, 'Bank is required').trim(),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            accountNumber: '',
-            bankCode: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                bankCode: form.getValues('bankCode'),
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    useEffect(() => {
-        if (instapayBankList?.length) {
-            form.reset({
-                amount: form.getValues('amount'),
-                bankCode: instapayBankList[0].code,
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, instapayBankList]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            transactionPassword: data.password,
-            accountNumber: data.accountNumber,
-            bankCode: data.bankCode,
-        });
-    });
-    const bankCollection = useMemo(() => createListCollection({
-        items: instapayBankList ?? [],
-        itemToValue: (item) => item.code,
-        itemToString: (item) => item.name,
-    }), [instapayBankList]);
-    console.log(bankCollection.items);
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsx(Controller, { control: form.control, name: "bankCode", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.bankCode, children: [_jsxs(Select.Root, { collection: bankCollection, positioning: {
-                                sameWidth: true,
-                            }, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
-                                o.field.onChange(details.value.at(0) ?? '');
-                            }, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Bank account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.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: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
-                    if (!details.open) {
-                        setStatus('waiting');
-                    }
-                }, 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, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
-                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
-                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
-                                                    api.setOpen(false);
-                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
-}

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

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