x

apps/spa/src/pages/ProductDetailPage.tsx

@@ -7,9 +7,17 @@ import ProductCard from '../components/ProductCard'
 import ProductReviews from '../components/ProductReviews'
 import ProductImageGallery from '../components/ProductImageGallery'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
-import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection } from '../types'
+import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection, type TranslatableString } from '../types'
 import { useCartStore } from '../store/cartStore'
 
+/** แปลง 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 ตัว → fallback 'th'/'en'
+  return value[lang] ?? value[lang.slice(0, 2)] ?? value['th'] ?? value['en'] ?? Object.values(value)[0] ?? ''
+}
+
 export default function ProductDetailPage() {
   const { id } = useParams<{ id: string }>()
 
@@ -176,8 +184,8 @@ export default function ProductDetailPage() {
               </p>
             </div>
 
-            {product.description && (
-              <p className="text-spa-stone leading-relaxed">{product.description}</p>
+            {resolveTranslatable(product.description, i18n.language) && (
+              <p className="text-spa-stone leading-relaxed">{resolveTranslatable(product.description, i18n.language)}</p>
             )}
 
             {/* Price */}
@@ -250,12 +258,12 @@ export default function ProductDetailPage() {
         </div>
 
         {/* Full Details Section */}
-        {product.details && (
+        {resolveTranslatable(product.details, i18n.language) && (
           <div className="pt-16 border-t border-spa-stone/10 space-y-6">
             <h2 className="text-3xl font-bold text-pop-black">Product Details</h2>
             <div 
               className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone"
-              dangerouslySetInnerHTML={{ __html: product.details }}
+              dangerouslySetInnerHTML={{ __html: resolveTranslatable(product.details, i18n.language) }}
             />
           </div>
         )}