Create print

src/pages/order/List.tsx

@@ -1,7 +1,7 @@
 import Filters from '@/components/Filters'
 import { type FC } from 'react'
 import Table from '@/components/Table'
-import { Edit2, Eye, Receipt21, Setting2 } from 'iconsax-react'
+import { Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
 import { useGetOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
 import { Link } from 'react-router-dom'
@@ -101,6 +101,12 @@ const OrdersList: FC = () => {
                             render: (item) => {
                                 return (
                                     <div className='flex gap-2 items-center'>
+                                        <Link title='فرم چاپ' to={Paths.orderPrint + item.id}>
+                                            <Printer
+                                                size={20}
+                                                color='black'
+                                            />
+                                        </Link>
                                         <Link
                                             to={Paths.order.details + item.id}
                                         >
@@ -110,7 +116,6 @@ const OrdersList: FC = () => {
                                             <Edit2 size={20} color='#0037FF' />
                                         </Link>
                                         <Receipt21 size={20} color='#FF8000' />
-                                        <Setting2 size={20} color='#00B89F' />
                                     </div>
                                 )
                             }

src/pages/order/Print.tsx

@@ -0,0 +1,74 @@
+import { type FC } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useFormik } from 'formik'
+import { useGetSections } from '../print/hooks/usePrintData'
+import { useSubmitOrderPrint } from './hooks/useOrderData'
+import type { OrderPrintFormType } from './types/Types'
+import ManageForms from '../print/components/ManageForms'
+import Button from '@/components/Button'
+import { TickSquare } from 'iconsax-react'
+import { toast } from '@/shared/toast'
+import { extractErrorMessage } from '@/config/func'
+
+const OrderPrint: FC = () => {
+    const { id: orderId } = useParams()
+    const navigate = useNavigate()
+    const { data } = useGetSections()
+    const { isPending, mutate } = useSubmitOrderPrint()
+
+    const formik = useFormik<OrderPrintFormType>({
+        initialValues: {
+            fields: []
+        },
+        onSubmit: (values) => {
+            if (!orderId) return
+            mutate(
+                { orderId, params: values },
+                {
+                    onSuccess: () => {
+                        toast('با موفقیت ذخیره شد', 'success')
+                        navigate(-1)
+                    },
+                    onError: (error) => {
+                        toast(extractErrorMessage(error), 'error')
+                    }
+                }
+            )
+        }
+    })
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>فرم چاپ سفارش</h1>
+                <Button
+                    className='w-fit px-6'
+                    isLoading={isPending}
+                    onClick={() => formik.handleSubmit()}
+                >
+                    <div className='flex gap-1.5'>
+                        <TickSquare size={18} color='black' />
+                        <div className='text-[13px] font-light'>ذخیره</div>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex flex-col gap-5 mt-6'>
+                {data?.data?.map((section) => (
+                    <div
+                        key={section.id}
+                        className='bg-white p-6 rounded-3xl'
+                    >
+                        <div className='font-bold'>{section.title}</div>
+                        <ManageForms
+                            formik={formik}
+                            attributes={section.fields}
+                            formFieldKey='fields'
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default OrderPrint

src/pages/order/hooks/useOrderData.ts

@@ -1,6 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
-import type { AddTicketType, CreateFinalOrderType } from "../types/Types";
+import type {
+  AddTicketType,
+  CreateFinalOrderType,
+  OrderPrintFormType,
+} from "../types/Types";
 
 export const useGetOrders = () => {
   return useQuery({
@@ -97,3 +101,15 @@ export const useGetOrderItem = (id?: string) => {
     enabled: !!id,
   });
 };
+
+export const useSubmitOrderPrint = () => {
+  return useMutation({
+    mutationFn: ({
+      orderId,
+      params,
+    }: {
+      orderId: string;
+      params: OrderPrintFormType;
+    }) => api.submitOrderPrint(orderId, params),
+  });
+};

src/pages/order/service/OrderService.ts

@@ -6,6 +6,7 @@ import type {
   OrderDetailResponseType,
   OrderItemResponseType,
   OrderListResponseType,
+  OrderPrintFormType,
   TicketsResponseType,
 } from "../types/Types";
 import type {
@@ -90,3 +91,11 @@ export const converToOrder = async (params: ConvertToOrderItemType) => {
   const { data } = await axios.post(`/admin/orders`, params);
   return data;
 };
+
+export const submitOrderPrint = async (
+  orderId: string,
+  params: OrderPrintFormType,
+) => {
+  const { data } = await axios.post(`/admin/orders/${orderId}/print`, params);
+  return data;
+};

src/pages/order/types/Types.ts

@@ -207,3 +207,12 @@ export type ConvertToOrderItemType = {
   description?: string;
   attachments: string[];
 };
+
+export type OrderPrintFieldType = {
+  fieldId: string;
+  value: string;
+};
+
+export type OrderPrintFormType = {
+  fields: OrderPrintFieldType[];
+};