diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index 95429736f..5152054a3 100644 --- a/framework/commerce/types/product.ts +++ b/framework/commerce/types/product.ts @@ -47,6 +47,8 @@ export type Product = { currencyCode: CurrencyCode options: ProductOption[] facetValueIds?: string[] + collectionIds?: string[] + collection?: string, } export type ProductCard = { diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts index 239eb5b61..0aa761ab0 100644 --- a/framework/vendure/api/operations/get-product.ts +++ b/framework/vendure/api/operations/get-product.ts @@ -2,7 +2,7 @@ import { Product } from '@commerce/types/product' import { OperationContext } from '@commerce/api/operations' import { Provider, VendureConfig } from '../' import { GetProductQuery } from '../../schema' -import { getProductQuery } from '../../utils/queries/get-product-query' +import { getProductQuery, getProductDetailQuery } from '../../utils/queries/get-product-query' export default function getProductOperation({ commerce, @@ -53,7 +53,8 @@ export default function getProductOperation({ displayName: og.name, values: og.options.map((o) => ({ label: o.name })), })), - facetValueIds: product.facetValues.map(item=> item.id) + facetValueIds: product.facetValues.map(item=> item.id), + collectionIds: product.collections.map(item => item.id) } as Product } diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 8a947dc63..24119e9e6 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3303,7 +3303,7 @@ export type GetProductQuery = { __typename?: 'Query' } & { variants: Array< { __typename?: 'ProductVariant' } & Pick< ProductVariant, - 'id' | 'priceWithTax' | 'currencyCode' + 'id' | 'priceWithTax' | 'currencyCode' | 'price' > & { options: Array< { __typename?: 'ProductOption' } & Pick< diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts index f9d4e7002..6db960a96 100644 --- a/framework/vendure/utils/queries/get-product-query.ts +++ b/framework/vendure/utils/queries/get-product-query.ts @@ -39,6 +39,25 @@ export const getProductQuery = /* GraphQL */ ` facetValues { id } + collections { + id + } } } ` +export const getProductDetailQuery = /* GraphQL */ ` + query GetProductDetail($slug: String! = "hand-trowel") { + product(slug: $slug) { + name + description + variants { + price + priceWithTax + } + assets { + preview + name + } + } +} +` \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/package.json b/package.json index 84a77cf71..8474be667 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "body-scroll-lock": "^3.1.5", "classnames": "^2.3.1", "cookie": "^0.4.1", + "dns": "^0.2.2", "email-validator": "^2.0.4", "eslint": "^7.32.0", "eslint-config-next": "^11.1.2", @@ -35,6 +36,7 @@ "lodash.debounce": "^4.0.8", "lodash.random": "^3.2.0", "lodash.throttle": "^4.1.1", + "net": "^1.0.2", "next": "^11.0.0", "next-seo": "^4.26.0", "next-themes": "^0.0.14", diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 24901277e..2da14a995 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -12,7 +12,7 @@ import { PromiseWithKey } from 'src/utils/types.utils' export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType) { return <> - + diff --git a/pages/test.tsx b/pages/test.tsx index f9075c7e6..9a4db4421 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,11 +1,12 @@ import commerce from '@lib/api/commerce'; import { GetStaticPropsContext } from 'next'; +import { ProductCard } from '@commerce/types/product'; import { Layout, ListProductCardSkeleton } from 'src/components/common'; interface Props { - products: any + productDetail: ProductCard[], } -export default function Home({ products }: Props) { +export default function Home({ productDetail }: Props) { return ( <> {/* */} diff --git a/src/components/hooks/product/index.tsx b/src/components/hooks/product/index.tsx new file mode 100644 index 000000000..bfe1abac2 --- /dev/null +++ b/src/components/hooks/product/index.tsx @@ -0,0 +1 @@ +export { default as useProductDetail } from './useProductDetail' \ No newline at end of file diff --git a/src/components/hooks/product/useProductDetail.tsx b/src/components/hooks/product/useProductDetail.tsx new file mode 100644 index 000000000..a68b1449d --- /dev/null +++ b/src/components/hooks/product/useProductDetail.tsx @@ -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([getProductDetailQuery],gglFetcher) + return { productDetail: data?.product, ...rest } +} + +export default useProductDetail \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx index d1047bd3a..072c1fd56 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -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 (
- - + +
) } - export default ProductInfoDetail diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx index 95236266c..bebee187c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx @@ -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 (
- +
) } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 475d0f22e..c5624dc52 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -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 (
- data={DATA} + data={productImage} itemKey="product-detail-img" Component={ProductImgItem} responsive={RESPONSIVE} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 4abb62568..c3e51d46d 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -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 (
- SEAFOOD -

SeaPAk

+ {productInfoDetail.collection} +

{productInfoDetail.name}

- Rp 32.000 + Rp {productInfoDetail.price} -15%
-
Rp 27.500
+
Rp {productInfoDetail.price}
- In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley + {productInfoDetail.description}
diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx index 147115dc2..d1afde538 100644 --- a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -23,7 +23,6 @@ const ReleventProducts = ({ data, collections }: Props) => { if (data.length === 0) { return null } - return (