x

apps/spa/src/components/ProductCard.tsx

@@ -13,6 +13,24 @@ function resolveStr(v: TranslatableString | null | undefined, lang: string): str
   return v[lang] ?? v[lang.slice(0, 2)] ?? v['th'] ?? v['en'] ?? Object.values(v)[0] ?? ''
 }
 
+function resolveOptionValue(val: string, options: any[] | null | undefined, 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 = typeof v === 'string' ? v : (v['th'] || v['en'] || Object.values(v)[0] || '');
+      if (baseStr === val) {
+        if (typeof v === 'string') return v;
+        return v[lang] ?? v[lang.slice(0, 2)] ?? v['th'] ?? v['en'] ?? Object.values(v)[0] ?? baseStr;
+      }
+    }
+  }
+
+  return val;
+}
+
 interface ProductCardProps {
   product: Product;
   enableQuickShop?: boolean;
@@ -100,7 +118,7 @@ export default function ProductCard({ product, enableQuickShop = false, category
                       : 'border-pop-black/10 bg-transparent text-pop-black/70 hover:border-pop-black/30 hover:bg-pop-black/5'
                   }`}
                 >
-                  {[variant.option1, variant.option2, variant.option3].filter(Boolean).join(' / ')}
+                  {[variant.option1, variant.option2, variant.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}
                 </button>
               );
             })}
@@ -131,7 +149,7 @@ export default function ProductCard({ product, enableQuickShop = false, category
                   quantity: 1,
                   price: selectedVariant.price || 0,
                   productName: displayName,
-                  variantName: [selectedVariant.option1, selectedVariant.option2, selectedVariant.option3].filter(Boolean).join(' / '),
+                  variantName: [selectedVariant.option1, selectedVariant.option2, selectedVariant.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / '),
                   productImage: product.images?.[0]?.url || getCategoryImage(displayCategoryName)
                 });
               }}