Vula Builder
76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import { Suspense } from 'react'
|
|
import Link from 'next/link'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import ProductDetailClient from '@/components/shop/ProductDetailClient'
|
|
|
|
export const dynamic = 'force-dynamic'
|
|
export const revalidate = 0
|
|
|
|
const BACKEND_URL = process.env.VULA_ECOMMERCE_BACKEND_URL || 'http://vula-ecommerce:9000'
|
|
const PUB_KEY = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || ''
|
|
|
|
async function getProduct(productId: string) {
|
|
try {
|
|
const regRes = await fetch(`${BACKEND_URL}/store/regions?limit=1`, {
|
|
headers: { 'x-publishable-api-key': PUB_KEY },
|
|
cache: 'no-store',
|
|
signal: AbortSignal.timeout(8000),
|
|
})
|
|
const regData = regRes.ok ? await regRes.json() : {}
|
|
const regionId = regData.regions?.[0]?.id
|
|
const params = new URLSearchParams({
|
|
fields: '+variants.prices.amount,+variants.prices.currency_code,+collection,+categories,+images',
|
|
})
|
|
if (regionId) params.set('region_id', regionId)
|
|
const res = await fetch(`${BACKEND_URL}/store/products/${productId}?${params}`, {
|
|
headers: { 'x-publishable-api-key': PUB_KEY },
|
|
cache: 'no-store',
|
|
signal: AbortSignal.timeout(8000),
|
|
})
|
|
if (!res.ok) return null
|
|
const { product } = await res.json()
|
|
if (product?.variants) {
|
|
product.variants = product.variants.map((v: any) => ({
|
|
...v,
|
|
prices: v.prices?.length ? v.prices : v.calculated_price
|
|
? [{ amount: v.calculated_price.calculated_amount, currency_code: v.calculated_price.currency_code }]
|
|
: [],
|
|
}))
|
|
}
|
|
return product
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
interface PageProps { params: { productId: string } }
|
|
|
|
export default async function ProductDetailPage({ params }: PageProps) {
|
|
const product = await getProduct(params.productId)
|
|
return (
|
|
<main className="min-h-screen bg-background">
|
|
<div className="container mx-auto px-4 py-10 max-w-6xl">
|
|
<nav className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
|
|
<Link href="/products" className="hover:text-foreground transition-colors flex items-center gap-1">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
All Products
|
|
</Link>
|
|
{product?.collection?.title && (
|
|
<>
|
|
<span>/</span>
|
|
<span className="text-foreground">{product.collection.title}</span>
|
|
</>
|
|
)}
|
|
</nav>
|
|
<Suspense fallback={
|
|
<div className="flex justify-center py-20">
|
|
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary" />
|
|
</div>
|
|
}>
|
|
<ProductDetailClient product={product} productId={params.productId} />
|
|
</Suspense>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|