draft product

src/pages/products/List.tsx

@@ -1,5 +1,5 @@
 import { type FC, useState } from 'react'
-import { useDeleteProduct, useGetProducts } from './hooks/useProductData';
+import { useDeleteProduct, useDraftProduct, useGetProducts } from './hooks/useProductData';
 import { type ProductListType } from './types/Types';
 import { ProductStatus } from './enum/ProductEnum';
 import PageLoading from '../../components/PageLoading';
@@ -8,6 +8,7 @@ import PaginationUi from '../../components/PaginationUi';
 import StatusWithText from '../../components/StatusWithText';
 import Td from '../../components/Td';
 import TrashWithConfrim from '../../components/TrashWithConfrim';
+import ModalConfrim from '../../components/ModalConfrim';
 import PageTitle from '../../components/PageTitle';
 import { Edit } from 'iconsax-react';
 import Button from '@/components/Button';
@@ -21,8 +22,12 @@ const List: FC = () => {
 
     const navigate = useNavigate();
     const [currentPage, setCurrentPage] = useState(1);
+    const [isDraftConfirmOpen, setIsDraftConfirmOpen] = useState(false);
+    const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
     const { data: productsData, isLoading, error, refetch } = useGetProducts(currentPage);
     const deleteProductMutation = useDeleteProduct();
+    const draftProductMutation = useDraftProduct();
+
     if (isLoading) {
         return (
             <div className="flex justify-center items-center min-h-[400px]">
@@ -140,6 +145,18 @@ const List: FC = () => {
                                     <Td text={String(product.default_variant?.stock || 0)} />
                                     <Td text="">
                                         <div className="flex items-center gap-2">
+                                            {
+                                                product.status !== ProductStatus.Draft && (
+                                                    <Button
+                                                        variant='outline'
+                                                        label='پیش نویس شدن'
+                                                        onClick={() => {
+                                                            setSelectedProductId(String(product._id));
+                                                            setIsDraftConfirmOpen(true);
+                                                        }}
+                                                    />
+                                                )
+                                            }
                                             {product.status === ProductStatus.Draft && (
                                                 <Link to={`${Pages.products.update}${product._id}`}>
                                                     <Edit color='#8C90A3' size={16} className="cursor-pointer hover:text-blue-500" />
@@ -175,6 +192,31 @@ const List: FC = () => {
                     setCurrentPage(page);
                 }}
             />
+
+            <ModalConfrim
+                isOpen={isDraftConfirmOpen}
+                close={() => {
+                    setIsDraftConfirmOpen(false);
+                    setSelectedProductId(null);
+                }}
+                onConfrim={() => {
+                    if (selectedProductId) {
+                        draftProductMutation.mutate(selectedProductId, {
+                            onSuccess: () => {
+                                toast.success('وضعیت محصول به پیش‌نویس تغییر یافت');
+                                setIsDraftConfirmOpen(false);
+                                setSelectedProductId(null);
+                                refetch();
+                            },
+                            onError: (error) => {
+                                toast.error(extractErrorMessage(error));
+                            }
+                        });
+                    }
+                }}
+                label="آیا مطمئن هستید که می‌خواهید این محصول را به وضعیت پیش‌نویس تغییر دهید؟"
+                isLoading={draftProductMutation.isPending}
+            />
         </div>
     )
 }

src/pages/products/hooks/useProductData.ts

@@ -136,3 +136,9 @@ export const useAnswerProductQuestion = () => {
     mutationFn: api.answerProductQuestion,
   });
 };
+
+export const useDraftProduct = () => {
+  return useMutation({
+    mutationFn: api.draftProduct,
+  });
+};

src/pages/products/service/ProductService.ts

@@ -128,3 +128,8 @@ export const answerProductQuestion = async (params: {id: string, answer: string}
   const { data } = await axios.post(`/admin/products/questions/${params.id}/answer`, { content:params.answer });
   return data;
 };
+
+export const draftProduct = async (id: string) => {
+  const { data } = await axios.post(`/admin/products/${id}/draft`);
+  return data;
+};