hamid zarghami
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import DefaulModal from '@/components/DefaulModal'
|
||
import { useSharedStore } from '@/shared/store/sharedStore'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { FC, useState } from 'react'
|
||
import { clx } from '@/helpers/utils'
|
||
import Input from '@/components/Input'
|
||
import { NumberFormat } from '@/config/func'
|
||
import { useGetSpace } from '@/pages/setting/domain/hooks/useDomainData'
|
||
import { useBuySpace } from '../hooks/useShareData'
|
||
import Button from '@/components/Button'
|
||
import { Receipt1 } from 'iconsax-react'
|
||
import { toast } from '@/components/Toast'
|
||
|
||
const BuySpace: FC = () => {
|
||
|
||
const { t } = useTranslation()
|
||
const { openBuySpace, setOpenBuySpace } = useSharedStore()
|
||
const [spaceSelected, setSpaceSelected] = useState(1)
|
||
const { data: spaceData } = useGetSpace()
|
||
const { mutate: buySpace, isPending } = useBuySpace()
|
||
const price = spaceData?.data?.quota?.quotaPricePerGB
|
||
|
||
const gigs = [5, 10, 20, 30, 40, 50]
|
||
|
||
const handleBuySpace = () => {
|
||
buySpace(spaceSelected * 1024 * 1024 * 1024, {
|
||
onSuccess(data) {
|
||
toast(data?.data?.message, 'success')
|
||
window.location.href = import.meta.env.VITE_CONSOLE_URL + '/receipts/' + data?.data?.invoice?.id
|
||
},
|
||
})
|
||
}
|
||
|
||
return (
|
||
<DefaulModal
|
||
open={openBuySpace}
|
||
close={() => setOpenBuySpace(false)}
|
||
isHeader={true}
|
||
title_header={t('space.title')}
|
||
>
|
||
<div>
|
||
<div className='mt-8 text-sm'>
|
||
{t('space.select_space')}
|
||
</div>
|
||
<div className='mt-4 flex gap-4 flex-wrap'>
|
||
{gigs.map((gig) => (
|
||
<div onClick={() => setSpaceSelected(gig)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
|
||
spaceSelected === gig && 'border-black'
|
||
)}>
|
||
{gig} گیگبایت
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Input
|
||
label={t('space.enter_space')}
|
||
className='bg-white/50'
|
||
value={spaceSelected}
|
||
onChange={(e) => setSpaceSelected(Number(e.target.value))}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6 flex gap-1'>
|
||
<div className='text-xs'>{t('space.price')}</div>
|
||
<div className='font-bold text-xs'>{NumberFormat(spaceSelected * price)} تومان</div>
|
||
</div>
|
||
|
||
|
||
<div className='mt-24 flex justify-end'>
|
||
<Button
|
||
onClick={handleBuySpace}
|
||
className='px-8 w-auto'
|
||
variant='secondary'
|
||
loading={isPending}
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<Receipt1 size={18} color='black' />
|
||
{t('space.invoice_created')}
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DefaulModal >
|
||
)
|
||
}
|
||
|
||
export default BuySpace |