@opexa/portal-components 0.0.947 → 0.0.948

package/dist/client/hooks/useAiOGCashDepositMutation.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type CreateAiOGCashDepositInput } from '../../services/wallet';
+import type { Deposit, Mutation } from '../../types';
+export declare const useCreateAiOGCashDepositMutation: Mutation<Deposit, SetOptional<CreateAiOGCashDepositInput, 'id'>>;

package/dist/client/hooks/useAiOGCashDepositMutation.js

@@ -0,0 +1,90 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
+import invariant from 'tiny-invariant';
+import { explainError } from '../../components/DepositWithdrawal/utils.js';
+import { OPEXAPAY_ENDPOINT } from '../../constants/index.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createAiOGCashDeposit, getDeposit, } from '../../services/wallet.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { createPoll } from '../../utils/createPoll.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getCreateAiOGCashDepositMutationKey } from '../../utils/mutationKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useCreateAiOGCashDepositMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getCreateAiOGCashDepositMutationKey(),
+        mutationFn: async (input) => {
+            const id = input.id ?? ObjectId.generate(ObjectType.Deposit).toString();
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const successRedirectUrl = new URL('/transactions', input.redirectUrl);
+            successRedirectUrl.searchParams.set('tab', 'deposits');
+            successRedirectUrl.searchParams.set('id', id);
+            await createAiOGCashDeposit({
+                ...input,
+                id,
+                redirectUrl: `${OPEXAPAY_ENDPOINT}/aio/success?redirectUrl=${encodeURIComponent(successRedirectUrl.toString())}`,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                    ...(session.domain && {
+                        Domain: session.domain,
+                    }),
+                },
+            });
+            const poll = createPoll(async () => {
+                const session = await getSession();
+                invariant(session.status === 'authenticated');
+                return await getDeposit(id, {
+                    headers: {
+                        Authorization: `Bearer ${session.token}`,
+                    },
+                });
+            }, {
+                until(res) {
+                    return (!!res?.checkoutUrl || !!res?.error || res?.status === 'FAILED');
+                },
+                interval: 1000,
+                maxAttempt: 20,
+            });
+            const res = await poll();
+            if (res?.error) {
+                const error = new Error();
+                error.name = capitalize(res.error, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                });
+                error.message = explainError(res.error);
+                throw error;
+            }
+            if (!res?.checkoutUrl) {
+                const error = new Error();
+                error.name = 'AiOGCashDepositError';
+                error.message = 'Failed to process GCash deposit';
+                throw error;
+            }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
+            return res;
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useAiOGrabPayDepositMutation.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type CreateAiOGrabPayDepositInput } from '../../services/wallet';
+import type { Deposit, Mutation } from '../../types';
+export declare const useCreateAiOGrabPayDepositMutation: Mutation<Deposit, SetOptional<CreateAiOGrabPayDepositInput, 'id'>>;

package/dist/client/hooks/useAiOGrabPayDepositMutation.js

@@ -0,0 +1,80 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
+import invariant from 'tiny-invariant';
+import { OPEXAPAY_ENDPOINT } from '../../constants/index.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createAiOGrabPayDeposit, getDeposit, } from '../../services/wallet.js';
+import { createPoll } from '../../utils/createPoll.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getCreateAiOGrabPayDepositMutationKey } from '../../utils/mutationKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useCreateAiOGrabPayDepositMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getCreateAiOGrabPayDepositMutationKey(),
+        mutationFn: async (input) => {
+            const id = input.id ?? ObjectId.generate(ObjectType.Deposit).toString();
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const successRedirectUrl = new URL('/transactions', input.redirectUrl);
+            successRedirectUrl.searchParams.set('tab', 'deposits');
+            successRedirectUrl.searchParams.set('id', id);
+            await createAiOGrabPayDeposit({
+                ...input,
+                id,
+                redirectUrl: `${OPEXAPAY_ENDPOINT}/aio/success?redirectUrl=${encodeURIComponent(successRedirectUrl.toString())}`,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                    ...(session.domain && {
+                        Domain: session.domain,
+                    }),
+                },
+            });
+            const poll = createPoll(async () => {
+                const session = await getSession();
+                invariant(session.status === 'authenticated');
+                return await getDeposit(id, {
+                    headers: {
+                        Authorization: `Bearer ${session.token}`,
+                    },
+                });
+            }, {
+                until(res) {
+                    return (!!res?.checkoutUrl || !!res?.error || res?.status === 'FAILED');
+                },
+                interval: 1000,
+                maxAttempt: 20,
+            });
+            const res = await poll();
+            if (!res?.checkoutUrl) {
+                const error = new Error();
+                error.name = 'AiOGrabPayDepositError';
+                error.message = 'Failed to process Grab Pay deposit';
+                throw error;
+            }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
+            return res;
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useAiOPalawanPayDepositMutation.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type CreateAiOPalawanPayDepositInput } from '../../services/wallet';
+import type { Deposit, Mutation } from '../../types';
+export declare const useCreateAiOPalawanPayDepositMutation: Mutation<Deposit, SetOptional<CreateAiOPalawanPayDepositInput, 'id'>>;

package/dist/client/hooks/useAiOPalawanPayDepositMutation.js

@@ -0,0 +1,80 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
+import invariant from 'tiny-invariant';
+import { OPEXAPAY_ENDPOINT } from '../../constants/index.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createAiOPalawanPayDeposit, getDeposit, } from '../../services/wallet.js';
+import { createPoll } from '../../utils/createPoll.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getCreateAiOPalawanPayDepositMutationKey } from '../../utils/mutationKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useCreateAiOPalawanPayDepositMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getCreateAiOPalawanPayDepositMutationKey(),
+        mutationFn: async (input) => {
+            const id = input.id ?? ObjectId.generate(ObjectType.Deposit).toString();
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const successRedirectUrl = new URL('/transactions', input.redirectUrl);
+            successRedirectUrl.searchParams.set('tab', 'deposits');
+            successRedirectUrl.searchParams.set('id', id);
+            await createAiOPalawanPayDeposit({
+                ...input,
+                id,
+                redirectUrl: `${OPEXAPAY_ENDPOINT}/aio/success?redirectUrl=${encodeURIComponent(successRedirectUrl.toString())}`,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                    ...(session.domain && {
+                        Domain: session.domain,
+                    }),
+                },
+            });
+            const poll = createPoll(async () => {
+                const session = await getSession();
+                invariant(session.status === 'authenticated');
+                return await getDeposit(id, {
+                    headers: {
+                        Authorization: `Bearer ${session.token}`,
+                    },
+                });
+            }, {
+                until(res) {
+                    return (!!res?.checkoutUrl || !!res?.error || res?.status === 'FAILED');
+                },
+                interval: 1000,
+                maxAttempt: 20,
+            });
+            const res = await poll();
+            if (!res?.checkoutUrl) {
+                const error = new Error();
+                error.name = 'AiOPalawanPayDepositError';
+                error.message = 'Failed to process Palawan Pay deposit';
+                throw error;
+            }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
+            return res;
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useAiOPayMayaDepositMutation.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type CreateAiOPayMayaDepositInput } from '../../services/wallet';
+import type { Deposit, Mutation } from '../../types';
+export declare const useCreateAiOPayMayaDepositMutation: Mutation<Deposit, SetOptional<CreateAiOPayMayaDepositInput, 'id'>>;

package/dist/client/hooks/useAiOPayMayaDepositMutation.js

@@ -0,0 +1,80 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
+import invariant from 'tiny-invariant';
+import { OPEXAPAY_ENDPOINT } from '../../constants/index.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { createAiOPayMayaDeposit, getDeposit, } from '../../services/wallet.js';
+import { createPoll } from '../../utils/createPoll.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getCreateAiOPayMayaDepositMutationKey } from '../../utils/mutationKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useCreateAiOPayMayaDepositMutation = (config) => {
+    const queryClient = getQueryClient();
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getCreateAiOPayMayaDepositMutationKey(),
+        mutationFn: async (input) => {
+            const id = input.id ?? ObjectId.generate(ObjectType.Deposit).toString();
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const successRedirectUrl = new URL('/transactions', input.redirectUrl);
+            successRedirectUrl.searchParams.set('tab', 'deposits');
+            successRedirectUrl.searchParams.set('id', id);
+            await createAiOPayMayaDeposit({
+                ...input,
+                id,
+                redirectUrl: `${OPEXAPAY_ENDPOINT}/aio/success?redirectUrl=${encodeURIComponent(successRedirectUrl.toString())}`,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                    ...(session.domain && {
+                        Domain: session.domain,
+                    }),
+                },
+            });
+            const poll = createPoll(async () => {
+                const session = await getSession();
+                invariant(session.status === 'authenticated');
+                return await getDeposit(id, {
+                    headers: {
+                        Authorization: `Bearer ${session.token}`,
+                    },
+                });
+            }, {
+                until(res) {
+                    return (!!res?.checkoutUrl || !!res?.error || res?.status === 'FAILED');
+                },
+                interval: 1000,
+                maxAttempt: 20,
+            });
+            const res = await poll();
+            if (!res?.checkoutUrl) {
+                const error = new Error();
+                error.name = 'AiOPayMayaDepositError';
+                error.message = 'Failed to process Pay Maya deposit';
+                throw error;
+            }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
+            return res;
+        },
+    });
+    return mutation;
+};

package/dist/components/Banner/Banner.client.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

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

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

package/dist/components/DepositWithdrawal/AiOPaymentMethods.js

@@ -0,0 +1,55 @@
+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/useControllableState.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import gcash from '../../images/gcash.png';
+import grabPay from '../../images/grabpay.png';
+import maya from '../../images/maya.png';
+import palawanPay from '../../images/palawanpay.png';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { AiOeWalletPaymentMethodDefinition, } from './utils.js';
+const AIO_EWALLET_OPTIONS = [
+    {
+        value: 'AIO_GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'AIO_PAY_MAYA',
+        label: 'Maya',
+        image: maya,
+    },
+    {
+        value: 'AIO_GRAB_PAY',
+        label: 'GrabPay',
+        image: grabPay,
+    },
+    {
+        value: 'AIO_PALAWAN_PAY',
+        label: 'Palawan Pay',
+        image: palawanPay,
+    },
+];
+export function AiOPaymentMethods(props) {
+    const options = props.options && props.options.length > 0
+        ? AIO_EWALLET_OPTIONS.filter((option) => props.options?.includes(option.value))
+        : AIO_EWALLET_OPTIONS;
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? options[0]?.value,
+        onChange: props.onChange,
+    });
+    const parseValue = (val) => {
+        return AiOeWalletPaymentMethodDefinition.parse(val);
+    };
+    return (_jsxs("div", { className: props.className, children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: props.label || 'AIO eWallet payment methods' }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
+                    const lastValue = newValue.at(-1);
+                    if (!lastValue)
+                        return;
+                    setValue(parseValue(lastValue));
+                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx("div", { className: twMerge('rounded-xs', option.value === 'AIO_GRAB_PAY'
+                                ? 'bg-transparent px-0 py-0'
+                                : 'bg-white px-sm py-[0.688rem]', option.value === 'AIO_GCASH' && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value === 'AIO_PAY_MAYA' && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('h-[1.063rem] w-auto', option.value === 'AIO_GRAB_PAY' && 'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+}

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

@@ -97,7 +97,7 @@ export function AurixPayGrabPayDeposit() {
     const depositsCount = depositsCountQuery.data ?? 0;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.aioGCashDepositGatewaySettings;
+    const gatewaySettings = paymentSettings?.aurixPayGrabPayDepositGatewaySettings;
     const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
     const minimumAmount = depositsCount <= 0
         ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
@@ -200,7 +200,26 @@ export function AurixPayGrabPayDeposit() {
                     accountNumber: data.accountNumber,
                 });
             }
-        }), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "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-lg", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
+        }), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Account number" }), _jsx(Field.Input, { ...form.register('accountNumber', {
+                            onChange: (e) => {
+                                // Allow only digits and leading +
+                                let value = e.target.value;
+                                // Remove all non-digit except leading +
+                                value = value.replace(/(?!^)\D/g, '');
+                                if (value.startsWith('+')) {
+                                    // keep leading +
+                                    value = '+' + value.slice(1).replace(/\D/g, '');
+                                }
+                                else {
+                                    // remove all non-digits
+                                    value = value.replace(/\D/g, '');
+                                }
+                                e.target.value = value;
+                                form.setValue('accountNumber', value, {
+                                    shouldValidate: true,
+                                });
+                            },
+                        }), inputMode: "tel", pattern: "^\\+?[0-9]*$", autoComplete: "tel" }), _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-lg", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, 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(), {

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

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