initiate purchase

src/pages/catalogue/hooks/useCatalogueData.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/CatalogueService";
+
+export const usePurchaseInitate = () => {
+  return useMutation({
+    mutationFn: api.purchaseInitate,
+  });
+};

src/pages/catalogue/service/CatalogueService.ts

@@ -0,0 +1,10 @@
+import axios from "@/config/axios";
+import type { PurchaseInitiate } from "../types/Types";
+
+export const purchaseInitate = async (params: PurchaseInitiate) => {
+  const { data } = await axios.post(
+    `/admin/catalogue/purchase/initiate`,
+    params,
+  );
+  return data;
+};

src/pages/catalogue/types/Types.ts

@@ -11,3 +11,7 @@ export type CatalogItemType = {
 
 export type CatalogResponseType = BaseResponse<CatalogItemType[]>;
 export type CatalogByIdResponseType = BaseResponse<CatalogItemType>;
+
+export type PurchaseInitiate = {
+  count: number;
+};

src/shared/SideBar.tsx

@@ -12,6 +12,7 @@ import { useLocation } from 'react-router-dom'
 import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
 import { Paths } from '../config/Paths'
+import BuyCatalog from './components/BuyCatalog'
 
 
 const SideBar: FC = () => {
@@ -62,6 +63,7 @@ const SideBar: FC = () => {
                 </div>
 
                 <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
+
                     <div className={clx(
                         'mt-10 px-12 text-header text-sm font-normal',
                         hasSubMenu && 'px-2 text-center'
@@ -88,7 +90,8 @@ const SideBar: FC = () => {
                     </div>
 
                     <div className='flex-1 flex flex-col justify-end mt-14'>
-                        <div className='text-xs text-[#8C90A3]'>
+                        <BuyCatalog />
+                        <div className='text-xs text-[#8C90A3] mt-5'>
                             <SideBarItem
                                 icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title="خروج"

src/shared/components/BuyCatalog.tsx

@@ -0,0 +1,63 @@
+import { useState, type FC } from 'react'
+import Button from '@/components/Button'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import { toast } from '@/components/Toast'
+import { usePurchaseInitate } from '@/pages/catalogue/hooks/useCatalogueData'
+import { extractErrorMessage } from '@/helpers/utils'
+
+const BuyCatalog: FC = () => {
+
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [count, setCount] = useState<number>(0)
+    const { mutate, isPending } = usePurchaseInitate()
+
+    const handlePurchaseInitate = () => {
+        if (count > 0) {
+            mutate({ count: count }, {
+                onSuccess: (data) => {
+                    console.log(data);
+
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error')
+                }
+            })
+        } else {
+            toast('تعداد را انتخاب کنید')
+        }
+    }
+
+    return (
+        <div className='px-4'>
+            <div className='flex justify-center'>
+                <Button onClick={() => setShowModal(true)} className='w-fit px-5'>
+                    خرید کاتالو
+                </Button>
+            </div>
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='خرید کاتالوگ'
+            >
+                <div className='mt-4'>
+                    <Input
+                        label='تعداد'
+                        type='number'
+                        value={count}
+                        onChange={(e) => setCount(+e.target.value)}
+                    />
+                </div>
+                <div className='mt-6 flex justify-end'>
+                    <Button disabled={isPending} onClick={handlePurchaseInitate} className='w-fit px-5'>
+                        صدور صورتحساب
+                    </Button>
+                </div>
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default BuyCatalog