add space

src/shared/components/BuySpace.tsx

@@ -5,12 +5,31 @@ 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
@@ -24,24 +43,43 @@ const BuySpace: FC = () => {
                     {t('space.select_space')}
                 </div>
                 <div className='mt-4 flex gap-4 flex-wrap'>
-                    <div onClick={() => setSpaceSelected(1)} className={clx(
-                        'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
-                        spaceSelected === 1 && 'border-black'
-                    )}>
-                        1 گیگبایت
-                    </div>
+                    {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(1000000)} تومان</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 >