96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
import Head from 'next/head';
|
|
|
|
import SiteLayout from '../../components/SiteLayout';
|
|
import { buildMediaUrl, fetchProduct, fetchProducts } from '../../lib/api';
|
|
import ProductCard from '../../components/ProductCard';
|
|
import { useCart } from '../../context/CartContext';
|
|
|
|
export default function ProductPage({ product, suggestions }) {
|
|
const { addItem } = useCart();
|
|
const imageUrl = buildMediaUrl(product.hero_image) || product.imageUrl;
|
|
const price = Number(product.price || 0).toFixed(2);
|
|
|
|
return (
|
|
<SiteLayout>
|
|
<Head>
|
|
<title>{product.name} · Full Moon Bakehouse</title>
|
|
<meta name="description" content={product.short_description || product.description || ''} />
|
|
</Head>
|
|
|
|
<div className="wrapper">
|
|
<section className="product-detail">
|
|
<div className="product-detail__gallery">
|
|
<img src={imageUrl} alt={product.name} />
|
|
</div>
|
|
|
|
<div className="product-detail__info">
|
|
<button className="ghost-btn" onClick={() => history.back()} style={{ width: 'fit-content' }}>
|
|
← Back to products
|
|
</button>
|
|
<h1>{product.name}</h1>
|
|
<div className="product-detail__price">${price}</div>
|
|
{product.short_description ? (
|
|
<p className="product-detail__description">{product.short_description}</p>
|
|
) : null}
|
|
{product.description ? (
|
|
<p className="product-detail__description">{product.description}</p>
|
|
) : null}
|
|
<div className="product-detail__meta">
|
|
<span>Inventory: {product.inventory_quantity ?? '—'} available</span>
|
|
<span>Max {product.max_per_order ?? '—'} per order</span>
|
|
{product.allergens ? <span>Allergens: {product.allergens}</span> : null}
|
|
{product.ingredients ? <span>Ingredients: {product.ingredients}</span> : null}
|
|
</div>
|
|
<div className="product-card__actions">
|
|
<button className="btn btn-primary" type="button" onClick={() => addItem(product)}>
|
|
Add to cart
|
|
</button>
|
|
{Number.isFinite(product.max_per_order) ? (
|
|
<span className="cart-note">Max {product.max_per_order} per order</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{suggestions.length ? (
|
|
<section className="section" style={{ paddingTop: 0 }}>
|
|
<div className="section-header">
|
|
<div>
|
|
<h2>More from this week's bake</h2>
|
|
<p>Round out your order with another loaf, bagel pack, or sweet.</p>
|
|
</div>
|
|
</div>
|
|
<div className="product-grid">
|
|
{suggestions.map((item) => (
|
|
<ProductCard key={item.id || item.slug} product={item} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</SiteLayout>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps({ params }) {
|
|
const { slug } = params;
|
|
try {
|
|
const product = await fetchProduct(slug);
|
|
const products = await fetchProducts();
|
|
const suggestions = products
|
|
.filter((item) => item.slug !== slug)
|
|
.slice(0, 4)
|
|
.map((item) => ({ ...item, imageUrl: buildMediaUrl(item.hero_image), isSample: false }));
|
|
|
|
return {
|
|
props: {
|
|
product: { ...product, imageUrl: buildMediaUrl(product.hero_image), isSample: false },
|
|
suggestions,
|
|
},
|
|
};
|
|
} catch (error) {
|
|
console.warn('Product detail fallback', error);
|
|
return { notFound: true };
|
|
}
|
|
}
|