From 32e7989ec6a877e26906d90ba72b1b9cbf99e021 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 30 Nov 2025 09:35:01 +0330
Subject: [PATCH] fix bug when don't exsist variant

---
 .../product/components/BaseInformation.tsx    | 348 +++++++++---------
 1 file changed, 179 insertions(+), 169 deletions(-)

diff --git a/src/app/product/components/BaseInformation.tsx b/src/app/product/components/BaseInformation.tsx
index aae2a53..000b387 100644
--- a/src/app/product/components/BaseInformation.tsx
+++ b/src/app/product/components/BaseInformation.tsx
@@ -75,170 +75,56 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
             </div>
 
             {/* نمایش variant ها */}
-            {product.variants.length > 0 && (
-                <div className='mt-4 sm:mt-6'>
-                    {/* بررسی وجود فیلدهای خاص در variant ها */}
-                    {(() => {
-                        const hasMeterage = product.variants.some(v => v.meterage)
-                        const hasColor = product.variants.some(v => v.color)
-                        const hasSize = product.variants.some(v => v.size)
-                        const hasThemeValue = product.variants.some(v => v.themeValue)
+            {(() => {
+                if (product.variants.length === 0) return null
 
-                        // اگر هیچ فیلد خاصی وجود نداشت، نمایش عمومی
-                        if (!hasMeterage && !hasColor && !hasSize && !hasThemeValue) {
+                const hasMeterage = product.variants.some(v => v.meterage)
+                const hasColor = product.variants.some(v => v.color)
+                const hasSize = product.variants.some(v => v.size)
+                const hasThemeValue = product.variants.some(v => v.themeValue)
+                const hasAnySpecificField = hasMeterage || hasColor || hasSize || hasThemeValue
+
+                // اگر فقط یک variant وجود دارد و هیچ فیلد خاصی ندارد، نمایش نده
+                if (product.variants.length === 1 && !hasAnySpecificField) {
+                    return null
+                }
+
+                return (
+                    <div className='mt-4 sm:mt-6'>
+                        {/* بررسی وجود فیلدهای خاص در variant ها */}
+                        {(() => {
+                            // اگر هیچ فیلد خاصی وجود نداشت، نمایش عمومی
+                            if (!hasAnySpecificField) {
+                                return (
+                                    <div className='flex flex-wrap items-center gap-1.5'>
+                                        {product.variants.map((variant, index) => {
+                                            const isSelected = variantId === variant._id
+                                            return (
+                                                <button
+                                                    key={variant._id}
+                                                    onClick={() => handleVariantSelect(variant._id)}
+                                                    className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
+                                                        ? 'bg-primary text-white border-primary'
+                                                        : 'hover:border-primary/50'
+                                                        }`}
+                                                >
+                                                    گزینه {index + 1}
+                                                </button>
+                                            )
+                                        })}
+                                    </div>
+                                )
+                            }
+
+                            // نمایش فیلدهای خاص
                             return (
-                                <div className='flex flex-wrap items-center gap-1.5'>
-                                    {product.variants.map((variant, index) => {
-                                        const isSelected = variantId === variant._id
-                                        return (
-                                            <button
-                                                key={variant._id}
-                                                onClick={() => handleVariantSelect(variant._id)}
-                                                className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
-                                                    ? 'bg-primary text-white border-primary'
-                                                    : 'hover:border-primary/50'
-                                                    }`}
-                                            >
-                                                گزینه {index + 1}
-                                            </button>
-                                        )
-                                    })}
-                                </div>
-                            )
-                        }
-
-                        // نمایش فیلدهای خاص
-                        return (
-                            <>
-                                {/* متراژ */}
-                                {hasMeterage && (
-                                    <div className='flex flex-wrap items-center gap-1.5 mb-4'>
-                                        {product.variants.map((variant) => {
-                                            if (variant.meterage) {
-                                                const isSelected = variantId === variant._id
-                                                return (
-                                                    <button
-                                                        key={variant._id}
-                                                        onClick={() => handleVariantSelect(variant._id)}
-                                                        className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
-                                                            ? 'bg-primary text-white border-primary'
-                                                            : 'hover:border-primary/50'
-                                                            }`}
-                                                    >
-                                                        {variant.meterage.value}
-                                                    </button>
-                                                )
-                                            }
-                                            return null
-                                        })}
-                                    </div>
-                                )}
-
-                                {/* رنگ ها */}
-                                {hasColor && (
-                                    <div className='flex flex-wrap items-center gap-1.5 mb-4'>
-                                        {product.variants.map((variant) => {
-                                            if (variant.color) {
-                                                const isSelected = variantId === variant._id
-                                                return (
-                                                    <button
-                                                        key={variant._id}
-                                                        onClick={() => handleVariantSelect(variant._id)}
-                                                        className={clx(
-                                                            'size-10 rounded-full flex justify-center items-center',
-                                                            variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
-                                                        )}
-                                                        style={{ backgroundColor: variant.color.hexColor }}
-                                                    >
-                                                        {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
-                                                            'size-5',
-                                                            variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
-                                                        )} />}
-                                                    </button>
-                                                )
-                                            }
-                                            return null
-                                        })}
-                                    </div>
-                                )}
-
-                                {/* سایزها */}
-                                {hasSize && (
-                                    <div className='flex flex-wrap items-center gap-1.5 mb-4'>
-                                        {product.variants.map((variant) => {
-                                            if (variant.size) {
-                                                const isSelected = variantId === variant._id
-                                                return (
-                                                    <button
-                                                        key={variant._id}
-                                                        onClick={() => handleVariantSelect(variant._id)}
-                                                        className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
-                                                            ? 'bg-primary text-white border-primary'
-                                                            : 'hover:border-primary/50'
-                                                            }`}
-                                                    >
-                                                        {variant.size.value}
-                                                    </button>
-                                                )
-                                            }
-                                            return null
-                                        })}
-                                    </div>
-                                )}
-
-                                {/* themeValue ها - نمایش داینامیک */}
-                                {hasThemeValue && (() => {
-                                    // گروه‌بندی variant‌ها بر اساس theme
-                                    const themeGroups = new Map<string, typeof product.variants>()
-
-                                    product.variants.forEach(variant => {
-                                        if (variant.themeValue) {
-                                            const theme = variant.themeValue.theme
-                                            if (!themeGroups.has(theme)) {
-                                                themeGroups.set(theme, [])
-                                            }
-                                            themeGroups.get(theme)!.push(variant)
-                                        }
-                                    })
-
-                                    // تابع برای بررسی hex بودن value
-                                    const isHexColor = (value: string | number): boolean => {
-                                        if (typeof value !== 'string') return false
-                                        const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
-                                        return hexPattern.test(value)
-                                    }
-
-                                    return Array.from(themeGroups.entries()).map(([theme, variants]) => (
-                                        <div key={theme} className='flex flex-wrap items-center gap-1.5 mb-4'>
-                                            {variants.map((variant) => {
-                                                if (variant.themeValue) {
+                                <>
+                                    {/* متراژ */}
+                                    {hasMeterage && (
+                                        <div className='flex flex-wrap items-center gap-1.5 mb-4'>
+                                            {product.variants.map((variant) => {
+                                                if (variant.meterage) {
                                                     const isSelected = variantId === variant._id
-                                                    const value = typeof variant.themeValue.value === 'string'
-                                                        ? variant.themeValue.value
-                                                        : String(variant.themeValue.value)
-                                                    const isHex = isHexColor(value)
-
-                                                    // اگر hex بود، دایره رنگی نمایش بده
-                                                    if (isHex) {
-                                                        return (
-                                                            <button
-                                                                key={variant._id}
-                                                                onClick={() => handleVariantSelect(variant._id)}
-                                                                className={clx(
-                                                                    'size-10 rounded-full flex justify-center items-center',
-                                                                    value === '#FFFFFF' ? 'border border-border' : ''
-                                                                )}
-                                                                style={{ backgroundColor: value }}
-                                                            >
-                                                                {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
-                                                                    'size-5',
-                                                                    value === '#FFFFFF' ? 'filterBlack' : ''
-                                                                )} />}
-                                                            </button>
-                                                        )
-                                                    }
-
-                                                    // اگر hex نبود، name را نمایش بده
                                                     return (
                                                         <button
                                                             key={variant._id}
@@ -248,20 +134,144 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
                                                                 : 'hover:border-primary/50'
                                                                 }`}
                                                         >
-                                                            {variant.themeValue.name}
+                                                            {variant.meterage.value}
                                                         </button>
                                                     )
                                                 }
                                                 return null
                                             })}
                                         </div>
-                                    ))
-                                })()}
-                            </>
-                        )
-                    })()}
-                </div>
-            )}
+                                    )}
+
+                                    {/* رنگ ها */}
+                                    {hasColor && (
+                                        <div className='flex flex-wrap items-center gap-1.5 mb-4'>
+                                            {product.variants.map((variant) => {
+                                                if (variant.color) {
+                                                    const isSelected = variantId === variant._id
+                                                    return (
+                                                        <button
+                                                            key={variant._id}
+                                                            onClick={() => handleVariantSelect(variant._id)}
+                                                            className={clx(
+                                                                'size-10 rounded-full flex justify-center items-center',
+                                                                variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
+                                                            )}
+                                                            style={{ backgroundColor: variant.color.hexColor }}
+                                                        >
+                                                            {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
+                                                                'size-5',
+                                                                variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
+                                                            )} />}
+                                                        </button>
+                                                    )
+                                                }
+                                                return null
+                                            })}
+                                        </div>
+                                    )}
+
+                                    {/* سایزها */}
+                                    {hasSize && (
+                                        <div className='flex flex-wrap items-center gap-1.5 mb-4'>
+                                            {product.variants.map((variant) => {
+                                                if (variant.size) {
+                                                    const isSelected = variantId === variant._id
+                                                    return (
+                                                        <button
+                                                            key={variant._id}
+                                                            onClick={() => handleVariantSelect(variant._id)}
+                                                            className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
+                                                                ? 'bg-primary text-white border-primary'
+                                                                : 'hover:border-primary/50'
+                                                                }`}
+                                                        >
+                                                            {variant.size.value}
+                                                        </button>
+                                                    )
+                                                }
+                                                return null
+                                            })}
+                                        </div>
+                                    )}
+
+                                    {/* themeValue ها - نمایش داینامیک */}
+                                    {hasThemeValue && (() => {
+                                        // گروه‌بندی variant‌ها بر اساس theme
+                                        const themeGroups = new Map<string, typeof product.variants>()
+
+                                        product.variants.forEach(variant => {
+                                            if (variant.themeValue) {
+                                                const theme = variant.themeValue.theme
+                                                if (!themeGroups.has(theme)) {
+                                                    themeGroups.set(theme, [])
+                                                }
+                                                themeGroups.get(theme)!.push(variant)
+                                            }
+                                        })
+
+                                        // تابع برای بررسی hex بودن value
+                                        const isHexColor = (value: string | number): boolean => {
+                                            if (typeof value !== 'string') return false
+                                            const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
+                                            return hexPattern.test(value)
+                                        }
+
+                                        return Array.from(themeGroups.entries()).map(([theme, variants]) => (
+                                            <div key={theme} className='flex flex-wrap items-center gap-1.5 mb-4'>
+                                                {variants.map((variant) => {
+                                                    if (variant.themeValue) {
+                                                        const isSelected = variantId === variant._id
+                                                        const value = typeof variant.themeValue.value === 'string'
+                                                            ? variant.themeValue.value
+                                                            : String(variant.themeValue.value)
+                                                        const isHex = isHexColor(value)
+
+                                                        // اگر hex بود، دایره رنگی نمایش بده
+                                                        if (isHex) {
+                                                            return (
+                                                                <button
+                                                                    key={variant._id}
+                                                                    onClick={() => handleVariantSelect(variant._id)}
+                                                                    className={clx(
+                                                                        'size-10 rounded-full flex justify-center items-center',
+                                                                        value === '#FFFFFF' ? 'border border-border' : ''
+                                                                    )}
+                                                                    style={{ backgroundColor: value }}
+                                                                >
+                                                                    {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
+                                                                        'size-5',
+                                                                        value === '#FFFFFF' ? 'filterBlack' : ''
+                                                                    )} />}
+                                                                </button>
+                                                            )
+                                                        }
+
+                                                        // اگر hex نبود، name را نمایش بده
+                                                        return (
+                                                            <button
+                                                                key={variant._id}
+                                                                onClick={() => handleVariantSelect(variant._id)}
+                                                                className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
+                                                                    ? 'bg-primary text-white border-primary'
+                                                                    : 'hover:border-primary/50'
+                                                                    }`}
+                                                            >
+                                                                {variant.themeValue.name}
+                                                            </button>
+                                                        )
+                                                    }
+                                                    return null
+                                                })}
+                                            </div>
+                                        ))
+                                    })()}
+                                </>
+                            )
+                        })()}
+                    </div>
+                )
+            })()}
 
             {
                 product.specifications.length > 0 ?