Create order

src/config/Paths.tsx

@@ -91,5 +91,5 @@ export const Paths = {
     update: '/print/update/',
     form: '/print/form/',
   },
-  convertToOrder: '/convert-to-order/',
+  convertToOrder: '/convert-to-order',
 };

src/pages/invoice/components/InvoiceItemRow.tsx

@@ -123,7 +123,7 @@ const InvoiceItemRow: FC<Props> = ({
           </button>
         )}
         {item.id && (
-          <Link to={Paths.convertToOrder + '/' + item.id}>
+          <Link to={Paths.convertToOrder + '?invoiceItemId=' + item.id}>
             <button
               type="button"
               onClick={onConvertToOrder}

src/pages/order/ConvertToOrders.tsx

@@ -5,40 +5,49 @@ import Input from '@/components/Input'
 import Select from '@/components/Select'
 import UploadBox from '@/components/UploadBox'
 import Button from '@/components/Button'
-import { useGetUsers } from '../user/hooks/useUserData'
-import { useGetProducts } from './hooks/useOrderData'
 import { useMultiUpload } from '@/pages/uploader/hooks/useUploader'
-import { OrderStatusEnum } from './enum/OrderEnum'
 import type { ConvertToOrderItemType } from './types/Types'
+import { useConverToOrder, useGetProducts } from './hooks/useOrderData'
+import { useGetCategory } from '@/pages/product/hooks/useProductData'
+import { useGetUsers } from '@/pages/user/hooks/useUserData'
+import { useSearchParams } from 'react-router-dom'
 
-const initialValues: ConvertToOrderItemType = {
+const getInitialValues = (invoiceItemId: string | null): ConvertToOrderItemType => ({
+    invoiceItemId: invoiceItemId ?? '',
+    productId: '',
     userId: '',
-  invoiceItemId: '',
     typeId: '',
     estimatedDays: 0,
-  productId: '',
     title: '',
     attachments: [],
-}
+})
 
-const validationSchema = Yup.object({
-  userId: Yup.string().required('انتخاب کاربر اجباری است.'),
+const getValidationSchema = (invoiceItemId: string | null) =>
+    Yup.object({
         invoiceItemId: Yup.string(),
+        productId: invoiceItemId ? Yup.string() : Yup.string().required('انتخاب محصول اجباری است.'),
+        userId: invoiceItemId ? Yup.string() : Yup.string().required('انتخاب کاربر اجباری است.'),
         typeId: Yup.string().required('انتخاب نوع اجباری است.'),
         estimatedDays: Yup.number().required('تخمین روز اجباری است.').min(0, 'باید عدد مثبت باشد'),
-  productId: Yup.string().required('انتخاب محصول اجباری است.'),
         title: Yup.string().required('عنوان اجباری است.'),
     })
 
 const ConvertToOrders: FC = () => {
-  const { data: users } = useGetUsers()
-  const { data: products } = useGetProducts()
+
+    const [searchParams] = useSearchParams()
+    const invoiceItemId = searchParams.get('invoiceItemId')
     const multiUpload = useMultiUpload()
     const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
+    const { data: categories } = useGetCategory()
+    const { data: users } = useGetUsers()
+    const { data: products } = useGetProducts()
+
+    const { mutate: converToOrder, isPending } = useConverToOrder()
 
     const formik = useFormik<ConvertToOrderItemType>({
-    initialValues,
-    validationSchema,
+        initialValues: getInitialValues(invoiceItemId),
+        validationSchema: getValidationSchema(invoiceItemId),
+        enableReinitialize: true,
         onSubmit: async (values) => {
             const attachments: string[] = [...values.attachments]
 
@@ -51,12 +60,14 @@ const ConvertToOrders: FC = () => {
 
             const payload: ConvertToOrderItemType = {
                 ...values,
+                invoiceItemId: invoiceItemId ?? values.invoiceItemId ?? '',
+                productId: invoiceItemId ? undefined : values.productId,
+                userId: invoiceItemId ? undefined : values.userId,
                 estimatedDays: Number(values.estimatedDays),
                 attachments,
             }
 
-      console.log('Submit:', payload)
-      // TODO: call API
+            await converToOrder(payload)
         },
     })
 
@@ -69,11 +80,12 @@ const ConvertToOrders: FC = () => {
                     onSubmit={formik.handleSubmit}
                     className="space-y-6"
                 >
+                    {!invoiceItemId && (
                         <div className="rowTwoInput">
                             <Select
                                 items={
                                     users?.data?.map((item) => ({
-                  label: item.firstName && item.lastName ? `${item.firstName} ${item.lastName}` : item.phone,
+                                        label: item.firstName ? `${item.firstName} ${item.lastName}` : item.phone,
                                         value: item.id,
                                     })) ?? []
                                 }
@@ -84,39 +96,34 @@ const ConvertToOrders: FC = () => {
                                     formik.touched.userId && formik.errors.userId ? formik.errors.userId : ''
                                 }
                             />
-
                             <Select
                                 items={
                                     products?.data?.map((item) => ({
                                         label: item.title,
-                  value: item.id,
+                                        value: String(item.id),
                                     })) ?? []
                                 }
                                 label="محصول"
                                 placeholder="انتخاب محصول"
                                 {...formik.getFieldProps('productId')}
                                 error_text={
-                formik.touched.productId && formik.errors.productId ? formik.errors.productId : ''
-              }
-            />
-          </div>
-
-          <div className="rowTwoInput">
-            <Input
-              label="شناسه آیتم فاکتور"
-              {...formik.getFieldProps('invoiceItemId')}
-              error_text={
-                formik.touched.invoiceItemId && formik.errors.invoiceItemId
-                  ? formik.errors.invoiceItemId
+                                    formik.touched.productId && formik.errors.productId
+                                        ? formik.errors.productId
                                         : ''
                                 }
                             />
+                        </div>
+                    )}
+
+                    <div className="rowTwoInput">
 
                         <Select
-              items={Object.values(OrderStatusEnum).map((item) => ({
-                label: item,
-                value: item,
-              }))}
+                            items={
+                                categories?.data?.map((item) => ({
+                                    label: item.title,
+                                    value: String(item.id),
+                                })) ?? []
+                            }
                             label="نوع"
                             placeholder="انتخاب نوع"
                             {...formik.getFieldProps('typeId')}
@@ -156,7 +163,7 @@ const ConvertToOrders: FC = () => {
                     </div>
 
                     <div className="flex justify-end">
-            <Button type="submit" isLoading={multiUpload.isPending}>
+                        <Button type="submit" isLoading={multiUpload.isPending || isPending}>
                             ثبت
                         </Button>
                     </div>

src/pages/order/hooks/useOrderData.ts

@@ -57,6 +57,12 @@ export const useCreateOrder = () => {
   });
 };
 
+export const useConverToOrder = () => {
+  return useMutation({
+    mutationFn: api.converToOrder,
+  });
+};
+
 export const useUpdateOrder = () => {
   return useMutation({
     mutationFn: ({

src/pages/order/service/OrderService.ts

@@ -1,6 +1,7 @@
 import axios from "@/config/axios";
 import type {
   AddTicketType,
+  ConvertToOrderItemType,
   CreateFinalOrderType,
   OrderDetailResponseType,
   OrderItemResponseType,
@@ -82,3 +83,8 @@ export const getOrderItem = async (itemId?: number) => {
   );
   return data;
 };
+
+export const converToOrder = async (params: ConvertToOrderItemType) => {
+  const { data } = await axios.post(`/admin/orders`, params);
+  return data;
+};

src/pages/order/types/Types.ts

@@ -178,11 +178,11 @@ export interface CreateFinalOrderType extends CreateBaseOrderType {
 }
 
 export type ConvertToOrderItemType = {
-  userId: string;
   invoiceItemId: string;
+  productId?: string;
+  userId?: string;
   typeId: string;
   estimatedDays: number;
-  productId: string;
   title: string;
   attachments: string[];
 };

src/router/MainRouter.tsx

@@ -88,7 +88,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.order.details + ":id"} element={<OrderDetail />} />
                             <Route path={Paths.order.create} element={<NewOrder />} />
                             <Route path={Paths.order.edit + ":id"} element={<EditOrder />} />
-                            <Route path={Paths.convertToOrder + ":id"} element={<ConvertToOrders />} />
+                            <Route path={Paths.convertToOrder} element={<ConvertToOrders />} />
 
                             <Route path={Paths.print.list} element={<SectionList />} />
                             <Route path={Paths.print.create} element={<CreateSection />} />