add comment in order

src/app/product/components/AddComment.tsx

@@ -19,13 +19,15 @@ import { extractErrorMessage } from '@/helpers/errorUtils'
 type Props = {
     open: boolean,
     close: () => void,
+    productId?: string,
 }
 
 const AddComment: FC<Props> = (props) => {
 
 
-    const { open, close } = props
+    const { open, close, productId: propProductId } = props
     const { id } = useParams()
+    const productId = propProductId || (id as string)
     const [advantages, setAdvantages] = useState<string[]>([])
     const [disadvantages, setDisadvantages] = useState<string[]>([])
     const [currentAdvantage, setCurrentAdvantage] = useState<string>('')
@@ -55,7 +57,7 @@ const AddComment: FC<Props> = (props) => {
             disAdvantage: [],
             content: '',
             rate: 0,
-            productId: id as string
+            productId: productId
         }
     })
 

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 && (
+                    <div className='flex gap-4 items-center'>
-                        <Link href={`/profile/orders/${id}/cancel`}>
+                        <button
-                            <button
+                            onClick={() => setIsCommentModalOpen(true)}
-                                className='flex items-center cursor-pointer gap-2 text-[#B3261E] hover:bg-red-50 p-2 rounded-lg transition-colors'
+                            className='flex items-center cursor-pointer gap-2 text-primary rounded-lg transition-colors'
-                            >
+                        >
-                                <div>لغو سفارش</div>
+                            <MessageAdd color={PRIMARY_COLOR} size={16} />
-                                <CloseCircle className='mt-0.5' color='#B3261E' size={16} />
+                            <div>ثبت دیدگاه</div>
-                            </button>
+                        </button>
-                        </Link>
+
-                    )}
+                        <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>
     )
 }

src/components/MenuItem.tsx

@@ -30,13 +30,13 @@ const MenuItem: FC<MenuItemProps> = ({
 
     const content = (
         <div
-            className={`flex items-center gap-2.5 cursor-pointer transition-colors hover:text-blue-600 ${className}`}
+            className={`flex items-center gap-2.5 cursor-pointer transition-colors hover:text-primary ${className}`}
             onClick={handleClick}
         >
-            <div className="text-[#333333] group-hover:text-blue-600 transition-colors">
+            <div className="text-[#333333] group-hover:text-primary transition-colors">
                 {icon}
             </div>
-            <div className="text-[#333333] group-hover:text-blue-600 transition-colors">
+            <div className="text-[#333333] group-hover:text-primary transition-colors">
                 {title}
             </div>
         </div>