add comment in order

src/app/profile/orders/[id]/components/OrderProductItem.tsx

@@ -1,10 +1,13 @@
 'use client'
-import React from 'react'
+import React, { useState } from 'react'
 import Image from 'next/image'
-import { MessageText, ShieldTick, Truck, CloseCircle } from 'iconsax-react'
+import { MessageText, ShieldTick, Truck, CloseCircle, MessageAdd } from 'iconsax-react'
 import { ShipmentItemDetail } from '../../types/Types'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import AddComment from '@/app/product/components/AddComment'
+import { PRIMARY_COLOR } from '@/config/const'
+import { Separator } from '@/components/ui/separator'
 
 interface OrderProductItemProps {
     item: ShipmentItemDetail
@@ -15,6 +18,7 @@ interface OrderProductItemProps {
 const OrderProductItem: React.FC<OrderProductItemProps> = ({ item, shipperName }) => {
 
     const { id } = useParams()
+    const [isCommentModalOpen, setIsCommentModalOpen] = useState(false)
 
     return (
         <div className='mt-8 py-7 border-t items-start flex gap-6 sm:flex-row flex-col'>
@@ -84,18 +88,36 @@ const OrderProductItem: React.FC<OrderProductItemProps> = ({ item, shipperName }
                         <div className='text-xs mt-1 text-gray-500'>تومان</div>
                     </div>
 
-                    {item.quantity !== item.cancelled_quantity && (
-                        <Link href={`/profile/orders/${id}/cancel`}>
-                            <button
-                                className='flex items-center cursor-pointer gap-2 text-[#B3261E] hover:bg-red-50 p-2 rounded-lg transition-colors'
-                            >
-                                <div>لغو سفارش</div>
-                                <CloseCircle className='mt-0.5' color='#B3261E' size={16} />
-                            </button>
-                        </Link>
-                    )}
+                    <div className='flex gap-4 items-center'>
+                        <button
+                            onClick={() => setIsCommentModalOpen(true)}
+                            className='flex items-center cursor-pointer gap-2 text-primary rounded-lg transition-colors'
+                        >
+                            <MessageAdd color={PRIMARY_COLOR} size={16} />
+                            <div>ثبت دیدگاه</div>
+                        </button>
+
+                        <Separator orientation='vertical' color='gray' style={{ height: 24 }} />
+
+                        {item.quantity !== item.cancelled_quantity && (
+                            <Link href={`/profile/orders/${id}/cancel`}>
+                                <button
+                                    className='flex items-center cursor-pointer gap-2 text-[#B3261E]  rounded-lg transition-colors'
+                                >
+                                    <CloseCircle color='#B3261E' size={16} />
+                                    <div>لغو سفارش</div>
+                                </button>
+                            </Link>
+                        )}
+                    </div>
                 </div>
             </div>
+
+            <AddComment
+                open={isCommentModalOpen}
+                close={() => setIsCommentModalOpen(false)}
+                productId={item.product._id.toString()}
+            />
         </div>
     )
 }