103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { recharge } from '@/services/user/order';
|
|
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
|
import { ButtonProps } from '@workspace/airo-ui/components/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@workspace/airo-ui/components/dialog';
|
|
import { EnhancedInput } from '@workspace/airo-ui/custom-components/enhanced-input';
|
|
import { unitConversion } from '@workspace/airo-ui/utils';
|
|
import { LoaderCircle } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useState, useTransition } from 'react';
|
|
import PaymentMethods from './payment-methods';
|
|
|
|
export default function Recharge(props: Readonly<ButtonProps>) {
|
|
const t = useTranslations('subscribe');
|
|
const { common } = useGlobalStore();
|
|
const { currency } = common;
|
|
|
|
const router = useRouter();
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
const [loading, startTransition] = useTransition();
|
|
|
|
const [params, setParams] = useState<API.RechargeOrderRequest>({
|
|
amount: 0,
|
|
payment: 1,
|
|
});
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<AiroButton variant={'primary'} {...props}>
|
|
{t('walletRecharge')}
|
|
</AiroButton>
|
|
</DialogTrigger>
|
|
<DialogContent className='flex h-auto flex-col overflow-hidden rounded-[32px]'>
|
|
<DialogHeader>
|
|
<DialogTitle className={'text-3xl'}>{t('balanceRecharge')}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className='mt-6 flex flex-col justify-between text-sm'>
|
|
<div className='grid gap-3'>
|
|
<div className='font-semibold'>{t('rechargeAmount')}</div>
|
|
<div className='mb-6 flex'>
|
|
<EnhancedInput
|
|
type='number'
|
|
placeholder={t('enterAmount')}
|
|
min={0}
|
|
value={params.amount}
|
|
formatInput={(value) => unitConversion('centsToDollars', value)}
|
|
formatOutput={(value) => unitConversion('dollarsToCents', value)}
|
|
onValueChange={(value) => {
|
|
setParams((prev) => ({
|
|
...prev,
|
|
amount: value as number,
|
|
}));
|
|
}}
|
|
prefix={currency.currency_symbol}
|
|
suffix={currency.currency_unit}
|
|
/>
|
|
</div>
|
|
<PaymentMethods
|
|
balance={false}
|
|
value={params.payment}
|
|
onChange={(value) => setParams({ ...params, payment: value })}
|
|
/>
|
|
</div>
|
|
<div className={'flex items-center justify-center'}>
|
|
<AiroButton
|
|
variant={'primary'}
|
|
className='relative mt-6'
|
|
disabled={loading || !params.amount}
|
|
onClick={() => {
|
|
startTransition(async () => {
|
|
try {
|
|
const response = await recharge(params);
|
|
const orderNo = response.data.data?.order_no;
|
|
if (orderNo) {
|
|
router.push(`/payment?order_no=${orderNo}`);
|
|
setOpen(false);
|
|
}
|
|
} catch (error) {
|
|
/* empty */
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
{loading && <LoaderCircle className='mr-2 animate-spin' />}
|
|
{t('rechargeNow')}
|
|
</AiroButton>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|