fix bug when don't exsist variant
This commit is contained in:
hamid zarghami
@@ -75,170 +75,56 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* نمایش variant ها */}
|
{/* نمایش variant ها */}
|
||||||
{product.variants.length > 0 && (
|
{(() => {
|
||||||
<div className='mt-4 sm:mt-6'>
|
if (product.variants.length === 0) return null
|
||||||
{/* بررسی وجود فیلدهای خاص در 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)
|
|
||||||
|
|
||||||
// اگر هیچ فیلد خاصی وجود نداشت، نمایش عمومی
|
const hasMeterage = product.variants.some(v => v.meterage)
|
||||||
if (!hasMeterage && !hasColor && !hasSize && !hasThemeValue) {
|
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 (
|
return (
|
||||||
<div className='flex flex-wrap items-center gap-1.5'>
|
<>
|
||||||
{product.variants.map((variant, index) => {
|
{/* متراژ */}
|
||||||
const isSelected = variantId === variant._id
|
{hasMeterage && (
|
||||||
return (
|
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||||
<button
|
{product.variants.map((variant) => {
|
||||||
key={variant._id}
|
if (variant.meterage) {
|
||||||
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) {
|
|
||||||
const isSelected = variantId === variant._id
|
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 (
|
return (
|
||||||
<button
|
<button
|
||||||
key={variant._id}
|
key={variant._id}
|
||||||
@@ -248,20 +134,144 @@ const BaseInformation: FC<BaseInformationProps> = ({ product, stats }) => {
|
|||||||
: 'hover:border-primary/50'
|
: 'hover:border-primary/50'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{variant.themeValue.name}
|
{variant.meterage.value}
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
))
|
)}
|
||||||
})()}
|
|
||||||
</>
|
{/* رنگ ها */}
|
||||||
)
|
{hasColor && (
|
||||||
})()}
|
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
|
||||||
</div>
|
{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 ?
|
product.specifications.length > 0 ?
|
||||||
|
|||||||
Reference in New Issue
Block a user