ticket with order item

src/pages/order/components/TicketSection.tsx

@@ -7,21 +7,24 @@ import { useVoiceRecorder } from '@/hooks/useVoiceRecorder'
 import { Play, Pause } from 'iconsax-react'
 import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
 import type { AddTicketType } from '../types/Types'
-import { useAddTicket, useGetTickets } from '../hooks/useOrderData'
+import { useAddTicket, useGetOrderDetails, useGetTickets } from '../hooks/useOrderData'
 import { useParams } from 'react-router-dom'
 import { toast } from '@/shared/toast'
 import { extractErrorMessage, getFileNameAndExtensionFromUrl } from '@/config/func'
 import VoicePlayer from '@/components/VoicePlayer'
+import Select from '@/components/Select'
 
 
 
 const TicketSection: FC = () => {
 
     const { id } = useParams()
+    const [itemId, setItemId] = useState<string>('')
+    const { data: order } = useGetOrderDetails(id!)
     const [message, setMessage] = useState('')
     const [files, setFiles] = useState<File[]>([])
     const addTicket = useAddTicket()
-    const { data, refetch } = useGetTickets(id!)
+    const { data, refetch } = useGetTickets(itemId)
     const singleUpload = useSingleUpload()
     const multiUpload = useMultiUpload()
 
@@ -66,7 +69,7 @@ const TicketSection: FC = () => {
             })
         }
 
-        addTicket.mutate({ orderId: id!, params: params }, {
+        addTicket.mutate({ orderId: itemId, params: params }, {
             onSuccess: () => {
                 toast('پیام شما با موفقیت ارسال شد')
                 refetch()
@@ -90,12 +93,24 @@ const TicketSection: FC = () => {
     return (
         <div className="bg-white rounded-2xl p-6">
             {/* Designer Name */}
-            <div className="mt-6">
+            <div className="mt-6 rowTwoInput">
                 <Input
                     label="نام طراح"
                     placeholder="عباس حسینی"
                     readOnly
                 />
+
+                <Select
+                    items={order?.data?.items?.map((item) => {
+                        return {
+                            label: item.product?.title,
+                            value: item.id + ''
+                        }
+                    }) || []}
+                    onChange={(e) => setItemId(e.target.value)}
+                    label='انتخاب محصول'
+                    placeholder='انتخاب'
+                />
             </div>
             {
                 data?.data?.map((item) => {

src/pages/order/service/OrderService.ts

@@ -25,7 +25,10 @@ export const getTickets = async (orderId: string) => {
   return data;
 };
 
-export const addTicket = async (orderId: string, params: AddTicketType) => {
-  const { data } = await axios.post(`/admin/ticket/order/${orderId}`, params);
+export const addTicket = async (ticketId: string, params: AddTicketType) => {
+  const { data } = await axios.post(
+    `/admin/ticket/order/item/${ticketId}`,
+    params
+  );
   return data;
 };

src/pages/order/types/Types.ts

@@ -118,6 +118,7 @@ export interface MyOrderType extends RowDataType {
 }
 
 export type OrderItemType = {
+  id: number;
   adminDescription?: string;
   attachments: {
     type: string;