4
0
forked from crowetic/commerce

Added usePrice to products in the landing

This commit is contained in:
Luis Alvarez 2020-10-25 17:52:52 -05:00
parent 7d9dad9b0d
commit af9dfe79d2
3 changed files with 17 additions and 3 deletions

View File

@ -1,10 +1,11 @@
import React, { FC, ReactNode, Component } from 'react' import React, { FC, ReactNode, Component } from 'react'
import cn from 'classnames' import cn from 'classnames'
import s from './ProductCard.module.css'
import Link from 'next/link' import Link from 'next/link'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import usePrice from '@lib/bigcommerce/use-price'
import { Heart } from '@components/icon' import { Heart } from '@components/icon'
import { EnhancedImage } from '@components/core' import { EnhancedImage } from '@components/core'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products' import s from './ProductCard.module.css'
interface Props { interface Props {
className?: string className?: string
@ -46,6 +47,12 @@ const ProductCard: FC<Props> = ({
) )
} }
const { price } = usePrice({
amount: p.prices?.price?.value,
baseAmount: p.prices?.retailPrice?.value,
currencyCode: p.prices?.price?.currencyCode!,
})
return ( return (
<Link href={`product${p.path}`}> <Link href={`product${p.path}`}>
<a <a
@ -57,7 +64,7 @@ const ProductCard: FC<Props> = ({
<h3 className={s.productTitle}> <h3 className={s.productTitle}>
<span>{p.name}</span> <span>{p.name}</span>
</h3> </h3>
<span className={s.productPrice}>${p.prices?.price.value}</span> <span className={s.productPrice}>{price}</span>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>
<Heart /> <Heart />

View File

@ -51,6 +51,10 @@ export const productInfoFragment = /* GraphQL */ `
value value
currencyCode currencyCode
} }
retailPrice {
value
currencyCode
}
} }
images { images {
edges { edges {

View File

@ -1739,6 +1739,9 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
salePrice?: Maybe< salePrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'> { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
> >
retailPrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
} }
> >
images: { __typename?: 'ImageConnection' } & { images: { __typename?: 'ImageConnection' } & {