import cn from 'classnames' import Image from 'next/image' import { NextSeo } from 'next-seo' import { FC, useState } from 'react' import s from './ProductView.module.css' import { useUI } from '@components/ui' import { Swatch, ProductSlider } from '@components/product' import { Button, Container, Text } from '@components/ui' import type { Product } from '@commerce/types' import usePrice from '@framework/product/use-price' import { useAddItem } from '@framework/cart' import { getVariant, SelectedOptions } from '../helpers' // import WishlistButton from '@components/wishlist/WishlistButton' interface Props { className?: string children?: any product: Product } const ProductView: FC = ({ product }) => { const addItem = useAddItem() const { price } = usePrice({ amount: product.price.value, baseAmount: product.price.retailPrice, currencyCode: product.price.currencyCode!, }) const { openSidebar } = useUI() const [loading, setLoading] = useState(false) const [choices, setChoices] = useState({ size: null, color: null, }) // Select the correct variant based on choices const variant = getVariant(product, choices) const addToCart = async () => { setLoading(true) try { await addItem({ productId: String(product.id), variantId: String(variant ? variant.id : product.variants[0].id), }) openSidebar() setLoading(false) } catch (err) { setLoading(false) } } return (

{product.name}

{price} {` `} {product.price?.currencyCode}
{product.images.map((image, i) => (
{image.alt
))}
{product.options?.map((opt) => (

{opt.displayName}

{opt.values.map((v, i: number) => { const active = (choices as any)[ opt.displayName.toLowerCase() ] return ( { setChoices((choices) => { return { ...choices, [opt.displayName.toLowerCase()]: v.label.toLowerCase(), } }) }} /> ) })}
))}
{/* */}
) } export default ProductView