From 5bf157219e343412fe230e48931fbe9c8f2a8719 Mon Sep 17 00:00:00 2001
From: hosseintaromi <hosseintaromii@gmail.com>
Date: Fri, 1 Aug 2025 14:38:16 +0330
Subject: [PATCH] =?UTF-8?q?fix:=20=D8=B1=D9=81=D8=B9=20=D9=85=D8=B4=DA=A9?=
 =?UTF-8?q?=D9=84=D8=A7=D8=AA=20=D9=86=D9=85=D8=A7=DB=8C=D8=B4=20=D8=AC?=
 =?UTF-8?q?=D8=B2=D8=A6=DB=8C=D8=A7=D8=AA=20=D9=85=D8=AD=D8=B5=D9=88=D9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- اصلاح نمایش دسته‌بندی‌ها با fallback به product_categories
- رفع خطای React hooks order با جابجایی useState
- حل مشکلات TypeScript و نمایش صحیح تمام اطلاعات محصول
---
 .../product-detail/ProductDetailPage.tsx      | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/pages/products/product-detail/ProductDetailPage.tsx b/src/pages/products/product-detail/ProductDetailPage.tsx
index 361fcd5..4ce1f4b 100644
--- a/src/pages/products/product-detail/ProductDetailPage.tsx
+++ b/src/pages/products/product-detail/ProductDetailPage.tsx
@@ -14,6 +14,9 @@ const ProductDetailPage = () => {
 
     const { data: product, isLoading, error } = useProduct(id);
 
+    // State for image preview – must be defined before any early returns to keep hook order stable
+    const [previewImage, setPreviewImage] = useState<string | null>(null);
+
     if (isLoading) return <LoadingSpinner />;
     if (error) return <div className="text-red-600">خطا در بارگذاری اطلاعات محصول</div>;
     if (!product) return <div>محصول یافت نشد</div>;
@@ -22,8 +25,6 @@ const ProductDetailPage = () => {
         return new Intl.NumberFormat('fa-IR').format(price) + ' تومان';
     };
 
-    const [previewImage, setPreviewImage] = useState<string | null>(null);
-
     const formatNumber = (num: number) => {
         return new Intl.NumberFormat('fa-IR').format(num);
     };
@@ -31,8 +32,12 @@ const ProductDetailPage = () => {
     // تصاویر محصول (حاصل تجمیع دو فیلد مختلف از API)
     const images = (product.file_ids && product.file_ids.length > 0) ? product.file_ids : ((product as any).files || []);
 
+    // نسخه‌های محصول
     const variants = (product.variants && product.variants.length > 0) ? product.variants : ((product as any).product_variants || []);
 
+    // دسته‌بندی‌های محصول
+    const categoriesData = (product.categories && product.categories.length > 0) ? product.categories : ((product as any).product_categories || []);
+
     return (
         <>
             <PageContainer>
@@ -225,7 +230,7 @@ const ProductDetailPage = () => {
                                     نسخه‌های محصول
                                 </SectionTitle>
                                 <div className="space-y-6">
-                                    {variants.map((variant, index) => (
+                                    {variants.map((variant: any, index: number) => (
                                         <div key={variant.id || index} className="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                                             <div className="flex items-center justify-between mb-4">
                                                 <h4 className="font-medium text-gray-900 dark:text-gray-100">
@@ -299,11 +304,11 @@ const ProductDetailPage = () => {
                                                         ویژگی‌های نسخه
                                                     </h5>
                                                     <div className="grid grid-cols-2 gap-2">
-                                                        {Object.entries(variant.attributes).map(([key, value]) => (
+                                                        {Object.entries(variant.attributes).map(([key, value]: [string, any]) => (
                                                             <div key={key} className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
                                                                 <span className="font-medium text-gray-700 dark:text-gray-300">{key}:</span>
                                                                 <span className="ml-1 text-gray-900 dark:text-gray-100">
-                                                                    {typeof value === 'object' ? JSON.stringify(value) : value}
+                                                                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}
                                                                 </span>
                                                             </div>
                                                         ))}
@@ -318,11 +323,11 @@ const ProductDetailPage = () => {
                                                         اطلاعات تکمیلی
                                                     </h5>
                                                     <div className="grid grid-cols-2 gap-2">
-                                                        {Object.entries(variant.meta).map(([key, value]) => (
+                                                        {Object.entries(variant.meta).map(([key, value]: [string, any]) => (
                                                             <div key={key} className="p-2 bg-gray-50 dark:bg-gray-700 rounded text-sm">
                                                                 <span className="font-medium text-gray-700 dark:text-gray-300">{key}:</span>
                                                                 <span className="ml-1 text-gray-900 dark:text-gray-100">
-                                                                    {typeof value === 'object' ? JSON.stringify(value) : value}
+                                                                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}
                                                                 </span>
                                                             </div>
                                                         ))}
@@ -416,7 +421,7 @@ const ProductDetailPage = () => {
                                     </div>
                                 )}
 
-                                {product.categories && product.categories.length > 0 && (
+                                {categoriesData.length > 0 && (
                                     <div className="flex items-center justify-between">
                                         <div className="flex items-center gap-2">
                                             <Tag className="h-4 w-4 text-orange-500" />
@@ -425,7 +430,7 @@ const ProductDetailPage = () => {
                                             </span>
                                         </div>
                                         <span className="font-semibold text-gray-900 dark:text-gray-100">
-                                            {formatNumber(product.categories.length)}
+                                            {formatNumber(categoriesData.length)}
                                         </span>
                                     </div>
                                 )}
@@ -433,14 +438,14 @@ const ProductDetailPage = () => {
                         </div>
 
                         {/* دسته‌بندی‌ها */}
-                        {product.categories && product.categories.length > 0 && (
+                        {categoriesData.length > 0 && (
                             <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                                 <SectionTitle className="flex items-center gap-2 mb-4">
                                     <Tag className="h-5 w-5" />
                                     دسته‌بندی‌ها
                                 </SectionTitle>
                                 <div className="space-y-2">
-                                    {product.categories.map((category) => (
+                                    {categoriesData.map((category: any) => (
                                         <div
                                             key={category.id}
                                             className="flex items-center gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg"