crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-26 19:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/m1-get-product-detail' of github.com:KieIO/grocery-vercel-commerce into feature/m3-add-product-to-cart-product-detail

Browse Source
This commit is contained in:
DatNguyen
2021-10-11 16:05:56 +07:00
parent 587eb5d1bc 148326c7ef
commit df679163c5
15 changed files with 79 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/hooks/product/index.tsx Normal file
View File

@@ -0,0 +1 @@
export { default as useProductDetail } from './useProductDetail'

16
src/components/hooks/product/useProductDetail.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { GetProductQuery } from '@framework/schema'
import { getProductDetailQuery } from '@framework/utils/queries/get-product-query';
import gglFetcher from 'src/utils/gglFetcher'
import useSWR from 'swr'
interface ProductDetail {
slug: string
}
const useProductDetail = () => {
const { data, ...rest } = useSWR<GetProductQuery>([getProductDetailQuery],gglFetcher)
return { productDetail: data?.product, ...rest }
}
export default useProductDetail

22
src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
View File

@@ -1,20 +1,28 @@
import React from 'react'
import React, { useMemo } from 'react';
import ProductImgs from './components/ProductImgs/ProductImgs'
import ProductInfo from './components/ProductInfo/ProductInfo'
import s from './ProductInfoDetail.module.scss'
import { Product } from '@commerce/types/product'
import { Collection } from '@framework/schema'
import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils';
interface Props {
className?: string
children?: any
productDetail: Product,
collections: Collection[]
}
const ProductInfoDetail = ({ }: Props) => {
const ProductInfoDetail = ({ productDetail, collections }: Props) => {
const dataWithCategoryName = useMemo(() => {
return {
...productDetail,
collection: getCategoryNameFromCollectionId(collections, productDetail.collectionIds ? productDetail.collectionIds[0] : undefined)
}
}, [productDetail, collections])
return (
<section className={s.productInfoDetail}>
<ProductImgs/>
<ProductInfo/>
<ProductImgs productImage={productDetail.images}/>
<ProductInfo productInfoDetail={dataWithCategoryName}/>
</section >
)
}
export default ProductInfoDetail

6
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
View File

@@ -3,15 +3,15 @@ import { ImgWithLink } from 'src/components/common'
import s from './ProductImgItem.module.scss'
export interface ProductImgItemProps {
src: string
url: string
alt?: string
}
const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
const ProductImgItem = ({ url, alt }: ProductImgItemProps) => {
return (
<section className={s.productImgItem}>
<ImgWithLink src={src} alt={alt} />
<ImgWithLink src={url} alt={alt} />
</section >
)
}

22
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
View File

@@ -3,26 +3,12 @@ import { ResponsiveType } from 'react-multi-carousel'
import { CarouselCommon } from 'src/components/common'
import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
import s from './ProductImgs.module.scss'
import { ProductImage } from '@commerce/types/product';
interface Props {
className?: string
children?: any,
productImage: ProductImage[]
}
const DATA = [
{
src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
alt: 'Meat',
},
{
src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
alt: 'Broccoli',
},
{
src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
alt: 'Broccoli',
}
]
const RESPONSIVE: ResponsiveType = {
desktop: {
@@ -31,11 +17,11 @@ const RESPONSIVE: ResponsiveType = {
slidesToSlide: 1, // optional, default to 1.
},
}
const ProductImgs = ({ }: Props) => {
const ProductImgs = ({ productImage }: Props) => {
return (
<section className={s.productImgs}>
<CarouselCommon<ProductImgItemProps>
data={DATA}
data={productImage}
itemKey="product-detail-img"
Component={ProductImgItem}
responsive={RESPONSIVE}

17
src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
View File

@@ -1,3 +1,4 @@
import { Product } from '@commerce/types/product'
import React from 'react'
import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
import { IconBuy } from 'src/components/icons'
@@ -5,25 +6,25 @@ import { LANGUAGE } from 'src/utils/language.utils'
import s from './ProductInfo.module.scss'
interface Props {
className?: string
children?: any,
productInfoDetail: Product
}
const ProductInfo = ({ }: Props) => {
const ProductInfo = ({ productInfoDetail }: Props) => {
console.log(productInfoDetail)
return (
<section className={s.productInfo}>
<div className={s.info}>
<LabelCommon shape='half'>SEAFOOD</LabelCommon>
<h2 className={s.heading}>SeaPAk</h2>
<LabelCommon shape='half'>{productInfoDetail.collection}</LabelCommon>
<h2 className={s.heading}>{productInfoDetail.name}</h2>
<div className={s.price}>
<div className={s.old}>
<span className={s.number}>Rp 32.000</span>
<span className={s.number}>Rp {productInfoDetail.price}</span>
<LabelCommon type='discount'>-15%</LabelCommon>
</div>
<div className={s.current}>Rp 27.500</div>
<div className={s.current}>Rp {productInfoDetail.price}</div>
</div>
<div className={s.description}>
In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
{productInfoDetail.description}
</div>
</div>
<div className={s.actions}>

1
src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
View File

@@ -23,7 +23,6 @@ const ReleventProducts = ({ data, collections }: Props) => {
if (data.length === 0) {
return null
}
return (
<ListProductWithInfo
title="Relevant Products"