548 lines
23 KiB
TypeScript
548 lines
23 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useParams, Link } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Navbar from '../components/Navbar'
|
|
import Footer from '../components/Footer'
|
|
import ProductCard from '../components/ProductCard'
|
|
import ProductReviews from '../components/ProductReviews'
|
|
import ProductImageGallery from '../components/ProductImageGallery'
|
|
import ProductHeroCarousel from '../components/ProductHeroCarousel'
|
|
import ProductDivider from '../components/ProductDivider'
|
|
import DynamicPageRenderer from '../components/DynamicPageRenderer'
|
|
import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection, type ProductAttribute, type ProductDetailSection, type TranslatableString } from '../types'
|
|
import { useCartStore } from '../store/cartStore'
|
|
import { marked } from 'marked'
|
|
import DOMPurify from 'dompurify'
|
|
|
|
/** แปลง TranslatableString (string | Record<string,string>) เป็น string ตาม locale */
|
|
function resolveTranslatable(value: TranslatableString | null | undefined, lang: string): string {
|
|
if (!value) return ''
|
|
if (typeof value === 'string') return value
|
|
// Record<string, string>: ลอง lang เต็ม → ลอง prefix 2 double-char → fallback 'th'/'en'
|
|
return value[lang] ?? value[lang.slice(0, 2)] ?? value['th'] ?? value['en'] ?? Object.values(value)[0] ?? ''
|
|
}
|
|
|
|
function resolveOptionValue(val: string, options: Product['options'], lang: string): string {
|
|
if (!val) return '';
|
|
if (!options || !Array.isArray(options)) return val;
|
|
|
|
for (const option of options) {
|
|
if (!option.values || !Array.isArray(option.values)) continue;
|
|
for (const v of option.values) {
|
|
const baseStr = resolveTranslatable(v, 'th') || resolveTranslatable(v, 'en');
|
|
if (baseStr === val) {
|
|
return resolveTranslatable(v, lang) || baseStr;
|
|
}
|
|
}
|
|
}
|
|
|
|
return val;
|
|
}
|
|
|
|
function formatAttributeValue(attribute: ProductAttribute): string {
|
|
const value = attribute.value
|
|
if (value === null || value === undefined || value === '') return ''
|
|
if (typeof value === 'boolean') return value ? 'Yes' : 'No'
|
|
if (typeof value === 'number') {
|
|
const unit = attribute.attributeDefinition.unit ? ` ${attribute.attributeDefinition.unit}` : ''
|
|
return `${value}${unit}`
|
|
}
|
|
if (typeof value === 'string') return value
|
|
return JSON.stringify(value)
|
|
}
|
|
|
|
const productNativeSectionTypes = new Set([
|
|
'PRODUCT_MAIN',
|
|
'PRODUCT_DETAILS',
|
|
'PRODUCT_SPECS',
|
|
'PRODUCT_REVIEWS',
|
|
'RELATED_PRODUCTS',
|
|
])
|
|
|
|
function isProductNativeSection(section: ProductDetailSection) {
|
|
return productNativeSectionTypes.has(section.type.toUpperCase())
|
|
}
|
|
|
|
function payloadRecord(section: ProductDetailSection) {
|
|
return section.payload && typeof section.payload === 'object' && !Array.isArray(section.payload)
|
|
? section.payload as Record<string, unknown>
|
|
: {}
|
|
}
|
|
|
|
function payloadText(payload: Record<string, unknown>, field: string, lang: string) {
|
|
return resolveTranslatable(payload[field] as TranslatableString | null | undefined, lang)
|
|
}
|
|
|
|
function resolveCategoryDisplayName(category: Category, lang: string) {
|
|
return resolveTranslatable(category.name, lang)
|
|
}
|
|
|
|
function resolveCategoryImageName(category: Category) {
|
|
return resolveTranslatable(category.name, 'en') || resolveTranslatable(category.name, 'th')
|
|
}
|
|
|
|
function toPageSection(section: ProductDetailSection): PageSection {
|
|
return {
|
|
id: section.id,
|
|
pageId: 0,
|
|
type: section.type,
|
|
order: section.order,
|
|
payload: section.payload,
|
|
isActive: section.isActive,
|
|
createdAt: section.createdAt,
|
|
updatedAt: section.updatedAt,
|
|
}
|
|
}
|
|
|
|
function normalizeProductLayoutSections(
|
|
sections: ProductDetailSection[],
|
|
defaultSections: ProductDetailSection[],
|
|
) {
|
|
if (sections.length === 0) return defaultSections
|
|
|
|
const productMainSection = sections.find((section) => section.type.toUpperCase() === 'PRODUCT_MAIN' && section.isLocked)
|
|
|| sections.find((section) => section.type.toUpperCase() === 'PRODUCT_MAIN')
|
|
|| defaultSections.find((section) => section.type === 'PRODUCT_MAIN')
|
|
const remainingSections = sections.filter((section) => section.type.toUpperCase() !== 'PRODUCT_MAIN')
|
|
|
|
return productMainSection ? [productMainSection, ...remainingSections] : remainingSections
|
|
}
|
|
|
|
export default function ProductDetailPage() {
|
|
const { id } = useParams<{ id: string }>()
|
|
|
|
const [categories, setCategories] = useState<Category[]>([])
|
|
const [product, setProduct] = useState<Product | null>(null)
|
|
const [related, setRelated] = useState<Product[]>([])
|
|
const [selectedVariant, setSelectedVariant] = useState<number>(0)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [cmsSections, setCmsSections] = useState<ProductDetailSection[]>([])
|
|
|
|
const { addToCart } = useCartStore()
|
|
const { i18n, t } = useTranslation()
|
|
|
|
function resolveStr(v: TranslatableString | null | undefined, lang: string): string {
|
|
if (!v) return ''
|
|
if (typeof v === 'string') return v
|
|
return v[lang] ?? v[lang.slice(0, 2)] ?? v['th'] ?? v['en'] ?? Object.values(v)[0] ?? ''
|
|
}
|
|
|
|
const displayName = resolveStr(product?.name, i18n.language) || product?.brand?.name || ''
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/categories?lang=${i18n.language}`)
|
|
.then((r) => r.json())
|
|
.then(setCategories)
|
|
.catch(console.error)
|
|
}, [i18n.language])
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
setLoading(true)
|
|
setError(null)
|
|
setSelectedVariant(0)
|
|
setCmsSections([])
|
|
|
|
fetch(`${API_BASE}/products/${id}?lang=${i18n.language}`)
|
|
.then(async (r) => {
|
|
if (!r.ok) throw new Error('Product not found')
|
|
return r.json()
|
|
})
|
|
.then(async (data: Product) => {
|
|
setProduct(data)
|
|
// Fetch related (same category, different product)
|
|
const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}&lang=${i18n.language}`)
|
|
const relJson = await relRes.json()
|
|
const relData: Product[] = relJson.data || []
|
|
setRelated(relData.filter((p) => p.id !== data.id).slice(0, 6))
|
|
const sectionsRes = await fetch(`${API_BASE}/products/${data.id}/detail-sections?lang=${i18n.language}`)
|
|
if (sectionsRes.ok) {
|
|
const sections: ProductDetailSection[] = await sectionsRes.json()
|
|
setCmsSections(sections)
|
|
}
|
|
})
|
|
.catch((err) => setError(err.message))
|
|
.finally(() => setLoading(false))
|
|
}, [id, i18n.language])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-pop-bg">
|
|
<Navbar categories={categories} />
|
|
<div className="pt-32 px-6 max-w-7xl mx-auto animate-pulse space-y-8">
|
|
<div className="h-6 w-48 bg-spa-stone/10 rounded" />
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
<div className="h-96 bg-spa-stone/10 rounded-2xl" />
|
|
<div className="space-y-4">
|
|
<div className="h-8 w-3/4 bg-spa-stone/10 rounded" />
|
|
<div className="h-4 w-1/2 bg-spa-stone/10 rounded" />
|
|
<div className="h-12 w-1/3 bg-spa-stone/10 rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer categories={categories} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error || !product) {
|
|
return (
|
|
<div className="min-h-screen bg-pop-bg">
|
|
<Navbar categories={categories} />
|
|
<div className="pt-40 text-center space-y-4">
|
|
<p className="text-4xl">⚠️</p>
|
|
<p className="text-spa-stone font-medium">{error ?? t('product.notFound')}</p>
|
|
<Link to="/shop" className="text-spa-forest hover:underline text-sm font-bold">
|
|
{t('common.backToShop')}
|
|
</Link>
|
|
</div>
|
|
<Footer categories={categories} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const currentVariant = product.variants[selectedVariant]
|
|
const visibleAttributes = (product.attributes || []).filter((attribute) => formatAttributeValue(attribute))
|
|
const categoryName = resolveCategoryDisplayName(product.category, i18n.language)
|
|
const productDescription = resolveTranslatable(product.description, i18n.language)
|
|
const productDetails = resolveTranslatable(product.details, i18n.language)
|
|
const fallbackImage = getCategoryImage(resolveCategoryImageName(product.category))
|
|
|
|
const handleAddToCart = () => {
|
|
if (!product || !currentVariant) return
|
|
addToCart({
|
|
productId: product.id,
|
|
variantId: currentVariant.id,
|
|
quantity: 1,
|
|
price: currentVariant.price || 0,
|
|
productName: displayName,
|
|
variantName: [currentVariant.option1, currentVariant.option2, currentVariant.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / '),
|
|
productImage: product.images?.[0]?.url || fallbackImage
|
|
})
|
|
}
|
|
|
|
const activeLayoutSections = cmsSections.filter(s => s.isActive);
|
|
const defaultProductSections: ProductDetailSection[] = [
|
|
{ id: -1, productId: product.id, type: 'PRODUCT_MAIN', order: 1, payload: {}, isActive: true, isLocked: true },
|
|
{ id: -2, productId: product.id, type: 'PRODUCT_DETAILS', order: 2, payload: { title: t('product.details'), showHeading: true }, isActive: true, isLocked: false },
|
|
{ id: -3, productId: product.id, type: 'PRODUCT_REVIEWS', order: 3, payload: {}, isActive: true, isLocked: false },
|
|
{ id: -4, productId: product.id, type: 'PRODUCT_SPECS', order: 4, payload: { title: 'Specifications', showHeading: true }, isActive: true, isLocked: false },
|
|
{ id: -5, productId: product.id, type: 'RELATED_PRODUCTS', order: 5, payload: { title: t('product.relatedProducts'), showHeading: true, showViewAllLink: true }, isActive: true, isLocked: false },
|
|
];
|
|
const productLayoutSections = normalizeProductLayoutSections(activeLayoutSections, defaultProductSections);
|
|
|
|
const renderProductMainSection = () => (
|
|
<div className="space-y-8">
|
|
{/* Breadcrumb */}
|
|
<div className="flex items-center flex-wrap gap-2 text-[10px] md:text-xs text-spa-stone/60 uppercase tracking-widest font-semibold mb-6 md:mb-0">
|
|
<Link to="/" className="hover:text-spa-forest transition-colors">{t('common.home')}</Link>
|
|
<span>/</span>
|
|
<Link to="/shop" className="hover:text-spa-forest transition-colors">{t('common.shop')}</Link>
|
|
<span>/</span>
|
|
<Link to={`/category/${product.category.id}`} className="hover:text-spa-forest transition-colors">
|
|
{categoryName}
|
|
</Link>
|
|
<span>/</span>
|
|
<span className="text-spa-forest">{displayName}</span>
|
|
</div>
|
|
|
|
{/* Product Detail */}
|
|
<div className="grid md:grid-cols-2 gap-8 md:gap-16 items-start">
|
|
{/* Image Gallery */}
|
|
<div className="w-full">
|
|
<ProductImageGallery
|
|
images={product.images || []}
|
|
fallback={fallbackImage}
|
|
alt={displayName}
|
|
badgeText={categoryName}
|
|
/>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="space-y-8">
|
|
<div className="space-y-2">
|
|
<p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80">
|
|
{categoryName}
|
|
</p>
|
|
<h1 className="text-5xl font-bold leading-tight text-pop-black">
|
|
{displayName}
|
|
</h1>
|
|
<p className="text-spa-stone/80 text-sm uppercase tracking-widest font-semibold">
|
|
{t('product.premiumCollection')}
|
|
</p>
|
|
</div>
|
|
|
|
{productDescription && (
|
|
<p className="text-spa-stone leading-relaxed">{productDescription}</p>
|
|
)}
|
|
|
|
{/* Price */}
|
|
<div className="flex items-baseline gap-3">
|
|
<span className="text-4xl font-bold text-rose-500">
|
|
{formatPrice(currentVariant?.price)}
|
|
</span>
|
|
{currentVariant && (
|
|
<span className="text-spa-stone/60 text-sm font-semibold">/ {[currentVariant.option1, currentVariant.option2, currentVariant.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Variant Selector */}
|
|
<div className="space-y-3">
|
|
<p className="text-xs uppercase tracking-widest text-spa-stone/80 font-bold">
|
|
{t('product.selectSize')}
|
|
</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
{product.variants.map((v, i) => (
|
|
<button
|
|
key={v.id}
|
|
onClick={() => setSelectedVariant(i)}
|
|
className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 border ${
|
|
selectedVariant === i
|
|
? 'bg-spa-forest text-spa-light border-spa-forest shadow-md'
|
|
: 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm'
|
|
}`}
|
|
>
|
|
{[v.option1, v.option2, v.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}
|
|
<span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-spa-light' : 'text-spa-stone/60'}`}>
|
|
{formatPrice(v.price)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="hidden md:flex gap-4">
|
|
<button
|
|
onClick={handleAddToCart}
|
|
className="flex-1 py-4 bg-spa-forest text-spa-light font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300"
|
|
>
|
|
{t('cart.addToCart')}
|
|
</button>
|
|
<button className="bg-spa-light border border-spa-stone/20 text-spa-stone p-4 rounded-lg hover:border-spa-forest hover:text-spa-forest shadow-sm transition-all">
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Meta */}
|
|
<div className="border-t border-spa-stone/10 pt-6 grid grid-cols-2 gap-4 text-sm text-spa-stone/80">
|
|
<div>
|
|
<span className="text-xs uppercase tracking-widest block mb-1 font-semibold text-spa-stone/60">{t('product.brand', 'Brand')}</span>
|
|
<span className="text-pop-black font-bold">{product.brand?.name || ''}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs uppercase tracking-widest block mb-1 font-semibold text-spa-stone/60">{t('product.category')}</span>
|
|
<Link
|
|
to={`/category/${product.category.id}`}
|
|
className="text-pop-black font-bold hover:text-spa-forest transition-colors"
|
|
>
|
|
{categoryName}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderProductDetailsSection = (section: ProductDetailSection) => {
|
|
if (!productDetails) return null;
|
|
|
|
const payload = payloadRecord(section);
|
|
const title = payloadText(payload, 'title', i18n.language) || t('product.details');
|
|
const subtitle = payloadText(payload, 'subtitle', i18n.language);
|
|
const showHeading = payload.showHeading !== false;
|
|
|
|
return (
|
|
<div className="pt-8 border-t border-spa-stone/10 space-y-6">
|
|
{showHeading && (
|
|
<div className="space-y-2">
|
|
<h2 className="text-3xl font-bold text-pop-black">{title}</h2>
|
|
{subtitle && <p className="text-sm text-spa-stone">{subtitle}</p>}
|
|
</div>
|
|
)}
|
|
<div
|
|
className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone"
|
|
dangerouslySetInnerHTML={{
|
|
__html: DOMPurify.sanitize(
|
|
marked.parse(productDetails.replace(/\\n/g, '\n'), { async: false }) as string
|
|
)
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderProductSpecsSection = (section: ProductDetailSection) => {
|
|
if (visibleAttributes.length === 0) return null;
|
|
|
|
const payload = payloadRecord(section);
|
|
const title = payloadText(payload, 'title', i18n.language) || 'Specifications';
|
|
const subtitle = payloadText(payload, 'subtitle', i18n.language);
|
|
const showHeading = payload.showHeading !== false;
|
|
|
|
return (
|
|
<section className="space-y-4 border-t border-spa-stone/10 pt-8">
|
|
{showHeading && (
|
|
<div>
|
|
<p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80">Product Specs</p>
|
|
<h2 className="text-xl font-bold text-pop-black">{title}</h2>
|
|
{subtitle && <p className="mt-2 text-sm text-spa-stone">{subtitle}</p>}
|
|
</div>
|
|
)}
|
|
<div className="grid gap-3">
|
|
{visibleAttributes.map((attribute) => {
|
|
const label = typeof attribute.attributeDefinition.label === 'string'
|
|
? attribute.attributeDefinition.label
|
|
: resolveTranslatable(attribute.attributeDefinition.label, i18n.language)
|
|
return (
|
|
<div key={attribute.id} className="flex items-start justify-between gap-6 rounded-2xl border border-spa-stone/10 bg-white/70 px-4 py-3">
|
|
<span className="text-sm font-semibold text-pop-black">{label}</span>
|
|
<span className="text-sm text-spa-stone text-right">{formatAttributeValue(attribute)}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const renderRelatedProductsSection = (section: ProductDetailSection) => {
|
|
if (related.length === 0) return null;
|
|
|
|
const payload = payloadRecord(section);
|
|
const title = payloadText(payload, 'title', i18n.language) || t('product.relatedProducts');
|
|
const subtitle = payloadText(payload, 'subtitle', i18n.language);
|
|
const showHeading = payload.showHeading !== false;
|
|
const showViewAllLink = payload.showViewAllLink !== false;
|
|
|
|
return (
|
|
<div className="space-y-8 border-t border-spa-stone/10 pt-8">
|
|
{showHeading && (
|
|
<div className="flex justify-between items-end">
|
|
<div>
|
|
<p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80 mb-2">
|
|
{subtitle || t('product.moreRelated', { category: categoryName })}
|
|
</p>
|
|
<h2 className="text-3xl font-bold text-pop-black">{title}</h2>
|
|
</div>
|
|
{showViewAllLink && (
|
|
<Link
|
|
to={`/category/${product.category.id}`}
|
|
className="text-spa-forest text-sm font-bold uppercase tracking-widest hover:underline"
|
|
>
|
|
{t('common.viewAll')}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
|
{related.map((p) => (
|
|
<ProductCard key={p.id} product={p} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderProductNativeSection = (section: ProductDetailSection, index: number) => {
|
|
const shellClass = `max-w-7xl mx-auto px-6 ${index === 0 ? 'pt-24 md:pt-28' : 'pt-8'} pb-8`;
|
|
|
|
switch (section.type.toUpperCase()) {
|
|
case 'PRODUCT_MAIN':
|
|
return <div key={section.id} className={shellClass}>{renderProductMainSection()}</div>;
|
|
case 'PRODUCT_DETAILS':
|
|
return <div key={section.id} className={shellClass}>{renderProductDetailsSection(section)}</div>;
|
|
case 'PRODUCT_SPECS':
|
|
return <div key={section.id} className={shellClass}>{renderProductSpecsSection(section)}</div>;
|
|
case 'PRODUCT_REVIEWS':
|
|
return <div key={section.id} className={shellClass}><ProductReviews productId={product.id} /></div>;
|
|
case 'RELATED_PRODUCTS':
|
|
return <div key={section.id} className={shellClass}>{renderRelatedProductsSection(section)}</div>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen pb-24 md:pb-0 bg-pop-bg">
|
|
<Navbar categories={categories} />
|
|
|
|
{productLayoutSections.map((section, index) => {
|
|
if (isProductNativeSection(section) || section.type.toUpperCase() === 'PRODUCT_REVIEWS') {
|
|
return renderProductNativeSection(section, index);
|
|
}
|
|
|
|
if (section.type.toUpperCase() === 'HERO_CAROUSEL') {
|
|
return (
|
|
<ProductHeroCarousel
|
|
key={section.id}
|
|
payload={section.payload}
|
|
lang={i18n.language}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (section.type.toUpperCase() === 'DIVIDER') {
|
|
return <ProductDivider key={section.id} payload={section.payload} />;
|
|
}
|
|
|
|
return (
|
|
<DynamicPageRenderer
|
|
key={section.id}
|
|
sections={[toPageSection(section)]}
|
|
categories={categories}
|
|
categoriesLoading={loading}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
<Footer categories={categories} />
|
|
|
|
{/* Mobile Sticky Add to Cart Bar */}
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-spa-light backdrop-blur-xl border-t border-spa-stone/10 z-40 animate-fade-in flex flex-col gap-3 shadow-[0_-10px_30px_rgba(0,0,0,0.05)]">
|
|
|
|
{/* Mobile Variant Selector */}
|
|
{product.variants && product.variants.length > 1 && (
|
|
<div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
|
|
{product.variants.map((v, i) => (
|
|
<button
|
|
key={`mobile-v-${v.id}`}
|
|
onClick={() => setSelectedVariant(i)}
|
|
className={`flex-shrink-0 px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap ${
|
|
selectedVariant === i
|
|
? 'bg-spa-forest border-spa-forest text-spa-light'
|
|
: 'bg-spa-light border-spa-stone/20 text-spa-stone'
|
|
}`}
|
|
>
|
|
{[v.option1, v.option2, v.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] uppercase tracking-widest text-spa-stone/60 font-semibold">
|
|
{product.variants && product.variants.length > 1 ? [currentVariant?.option1, currentVariant?.option2, currentVariant?.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ') : t('cart.totalPrice')}
|
|
</span>
|
|
<span className="text-xl font-bold text-rose-500">
|
|
{formatPrice(currentVariant?.price)}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={handleAddToCart}
|
|
className="flex-1 py-3.5 bg-spa-forest text-spa-light font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone shadow-sm transition-all flex justify-center items-center gap-2"
|
|
>
|
|
{t('cart.addToCart')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|