This commit is contained in:
Belen Curcio
2021-01-10 15:55:11 -03:00
parent 92a2388bd1
commit 0a05182f3b
6 changed files with 43 additions and 45 deletions

View File

@@ -1,16 +1,16 @@
import { FC, useState } from 'react'
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/context'
import { useUI } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product'
import { Button, Container, Text } from '@components/ui'
import usePrice from '@framework/product/use-price'
import useAddItem from '@framework/cart/use-add-item'
import type { ProductNode } from '@framework/api/operations/get-product'
import { usePrice } from '@framework/product'
import { useAddItem } from '@framework/cart'
import {
getCurrentVariant,
getProductOptions,
@@ -21,15 +21,15 @@ import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
children?: any
product: ProductNode
product: Product
}
const ProductView: FC<Props> = ({ product }) => {
const addItem = useAddItem()
const { price } = usePrice({
amount: product.prices?.price?.value,
baseAmount: product.prices?.retailPrice?.value,
currencyCode: product.prices?.price?.currencyCode!,
amount: product.price.value,
baseAmount: product.price.retailValue,
currencyCode: product.price.currencyCode!,
})
const { openSidebar } = useUI()
const options = getProductOptions(product)
@@ -38,15 +38,15 @@ const ProductView: FC<Props> = ({ product }) => {
size: null,
color: null,
})
const variant =
getCurrentVariant(product, choices) || product.variants.edges?.[0]
const variant = getCurrentVariant(product, choices) || product.variants[0]
const addToCart = async () => {
setLoading(true)
try {
await addItem({
productId: product.entityId,
variantId: product.variants.edges?.[0]?.node.entityId!,
productId: Number(product.id),
variantId: Number(product.variants[0].id),
})
openSidebar()
setLoading(false)
@@ -66,7 +66,7 @@ const ProductView: FC<Props> = ({ product }) => {
description: product.description,
images: [
{
url: product.images.edges?.[0]?.node.urlOriginal!,
url: product.images[0]?.url!,
width: 800,
height: 600,
alt: product.name,
@@ -81,18 +81,18 @@ const ProductView: FC<Props> = ({ product }) => {
<div className={s.price}>
{price}
{` `}
{product.prices?.price.currencyCode}
{product.price?.currencyCode}
</div>
</div>
<div className={s.sliderContainer}>
<ProductSlider key={product.entityId}>
{product.images.edges?.map((image, i) => (
<div key={image?.node.urlOriginal} className={s.imageContainer}>
<ProductSlider key={product.id}>
{product.images.map((image, i) => (
<div key={image.url} className={s.imageContainer}>
<Image
className={s.img}
src={image?.node.urlOriginal!}
alt={image?.node.altText || 'Product Image'}
src={image.url!}
alt={image.alt || 'Product Image'}
width={1050}
height={1050}
priority={i === 0}
@@ -152,11 +152,10 @@ const ProductView: FC<Props> = ({ product }) => {
</Button>
</div>
</div>
<WishlistButton
className={s.wishlistButton}
productId={product.entityId}
variant={product.variants.edges?.[0]!}
productId={product.id}
variant={product.variants[0]!}
/>
</div>
</Container>