add space

.env

@@ -1,8 +1,9 @@
 VITE_TOKEN_NAME = 'dsc_token'
 VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
 VITE_DANAK_BASE_URL ='https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.134:4000'
+# VITE_BASE_URL = 'http://192.168.1.113:4000'
 VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
 VITE_SERVICE_ID = 'e51afdc3-ea0b-49cf-8f49-2a6f131b024e'
 
 VITE_LOGIN_URL = 'https://console.danakcorp.com/auth/login'
+VITE_CONSOLE_URL = 'https://console.danakcorp.com'

src/langs/fa.json

@@ -20,7 +20,8 @@
     "title": "خرید فضای ذخیره سازی",
     "select_space": "لطفا یک فضا انتخاب کنید",
     "enter_space": "فضای دلخواه‌",
-    "price": "قیمت :"
+    "price": "قیمت :",
+    "invoice_created": "صدور صورتحساب"
   },
   "header": {
     "search": "جستجو"

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 >

src/shared/hooks/useShareData.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import { buySpace } from "../service/Service";
+
+export const useBuySpace = () => {
+  return useMutation({
+    mutationFn: buySpace,
+  });
+};

src/shared/service/Service.ts

@@ -0,0 +1,8 @@
+import axios from "@/config/axios";
+
+export const buySpace = async (space: number) => {
+  const response = await axios.post("/business/quota/purchase", {
+    quota: space,
+  });
+  return response.data;
+};