From 887c3ae2e33ab223c3f98331203a98e0e87f4196 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 30 Aug 2021 17:20:35 +0700 Subject: [PATCH] :art: styles: product info detail :%s --- grocery-vercel-commerce | 1 - pages/product/[slug].tsx | 77 ++----------------- src/components/common/Header/Header.tsx | 2 +- src/components/hooks/index.ts | 1 + src/components/hooks/useModalCommon.tsx | 4 +- .../ProductInfoDetail.module.scss | 0 .../ProductInfoDetail/ProductInfoDetail.tsx | 20 +++++ .../ProductImgs/ProductImgs.module.scss | 6 ++ .../components/ProductImgs/ProductImgs.tsx | 24 ++++++ .../ProductInfo/ProductInfo.module.scss | 40 ++++++++++ .../components/ProductInfo/ProductInfo.tsx | 37 +++++++++ .../modules/product-detail/index.ts | 1 + src/styles/_base.scss | 2 +- src/utils/language.utils.ts | 1 + 14 files changed, 141 insertions(+), 75 deletions(-) delete mode 160000 grocery-vercel-commerce create mode 100644 src/components/hooks/index.ts create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx create mode 100644 src/components/modules/product-detail/index.ts diff --git a/grocery-vercel-commerce b/grocery-vercel-commerce deleted file mode 160000 index 3c7aa8e86..000000000 --- a/grocery-vercel-commerce +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 3c7aa8e862bfd8d44719be44c6c0a31ab01524a3 diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index c5bcbdba1..b26de19bb 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,76 +1,11 @@ -import { Layout } from '@components/common' -import commerce from '@lib/api/commerce' -import type { - GetStaticPathsContext, - GetStaticPropsContext, - InferGetStaticPropsType -} from 'next' -import { useRouter } from 'next/router' -export async function getStaticProps({ - params, - locale, - locales, - preview, -}: GetStaticPropsContext<{ slug: string }>) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const productPromise = commerce.getProduct({ - variables: { slug: params!.slug }, - config, - preview, - }) +import { Layout } from 'src/components/common' +import { ProductInfoDetail } from 'src/components/modules/product-detail' - const allProductsPromise = commerce.getAllProducts({ - variables: { first: 4 }, - config, - preview, - }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - const { product } = await productPromise - const { products: relatedProducts } = await allProductsPromise - - if (!product) { - throw new Error(`Product with slug '${params!.slug}' not found`) - } - - return { - props: { - pages, - product, - relatedProducts, - categories, - }, - revalidate: 200, - } -} - -export async function getStaticPaths({ locales }: GetStaticPathsContext) { - const { products } = await commerce.getAllProductPaths() - - return { - paths: locales - ? locales.reduce((arr, locale) => { - // Add a product path for every locale - products.forEach((product: any) => { - arr.push(`/${locale}/product${product.path}`) - }) - return arr - }, []) - : products.map((product: any) => `/product${product.path}`), - fallback: 'blocking', - } -} - -export default function Slug({ - product, - relatedProducts, -}: InferGetStaticPropsType) { - const router = useRouter() - - return
This is product page
+export default function Slug() { + return <> + + } Slug.Layout = Layout diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index e9a06b9a8..a9926f765 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import React, { memo, useEffect, useState } from 'react' -import { useModalCommon } from 'src/components/hooks/useModalCommon' +import { useModalCommon } from 'src/components/hooks' import { isMobile } from 'src/utils/funtion.utils' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts new file mode 100644 index 000000000..cf83feb42 --- /dev/null +++ b/src/components/hooks/index.ts @@ -0,0 +1 @@ +export { default as useModalCommon } from './useModalCommon' diff --git a/src/components/hooks/useModalCommon.tsx b/src/components/hooks/useModalCommon.tsx index 02626ce94..41aed648f 100644 --- a/src/components/hooks/useModalCommon.tsx +++ b/src/components/hooks/useModalCommon.tsx @@ -4,7 +4,7 @@ interface Props { initialValue?: boolean, } -export const useModalCommon = ({ initialValue = false }: Props) => { +const useModalCommon = ({ initialValue = false }: Props) => { const [visible, setVisible] = useState(initialValue) const openModal = (e?: any) => { @@ -21,3 +21,5 @@ export const useModalCommon = ({ initialValue = false }: Props) => { visible, openModal, closeModal } }; + +export default useModalCommon \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx new file mode 100644 index 000000000..d1047bd3a --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import ProductImgs from './components/ProductImgs/ProductImgs' +import ProductInfo from './components/ProductInfo/ProductInfo' +import s from './ProductInfoDetail.module.scss' + +interface Props { + className?: string + children?: any +} + +const ProductInfoDetail = ({ }: Props) => { + return ( +
+ + +
+ ) +} + +export default ProductInfoDetail diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss new file mode 100644 index 000000000..b368095e0 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -0,0 +1,6 @@ +.productImgs { + .img { + @apply w-full h-full; + object-fit: cover; + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx new file mode 100644 index 000000000..3a20a6f64 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { CarouselCommon } from 'src/components/common' +import s from './ProductImgs.module.scss' + +interface ImgProps { + src: string, alt?: string +} + +interface Props { + className?: string + children?: any, + // data: ImgProps[] +} + +const ProductImgs = ({ }: Props) => { + return ( +
+ {/* /> */} + +
+ ) +} + +export default ProductImgs diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss new file mode 100644 index 000000000..468e352ed --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -0,0 +1,40 @@ +@import "../../../../../../styles/utilities"; + +.productInfo { + .info { + margin-bottom: 3.2rem; + .heading { + @apply heading-2 font-heading; + margin-top: 0.8rem; + } + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active; + } + } + .description { + margin-top: 0.8rem; + } + } + .bottom { + @screen md { + margin-top: 2.4rem; + max-width: 39rem; + button { + @apply w-full; + &:first-child { + margin-bottom: 0.8rem; + } + } + } + } +} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx new file mode 100644 index 000000000..aeaf3e699 --- /dev/null +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' +import { LANGUAGE } from 'src/utils/language.utils' +import s from './ProductInfo.module.scss' + +interface Props { + className?: string + children?: any, +} + +const ProductInfo = ({ }: Props) => { + return ( +
+
+ SEAFOOD +

SeaPAk

+
+
+ Rp 32.000 + -15% +
+
Rp 27.500
+
+
+ In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley +
+
+ +
+ {LANGUAGE.BUTTON_LABEL.BUY_NOW} + {LANGUAGE.BUTTON_LABEL.ADD_TO_CARD} +
+
+ ) +} + +export default ProductInfo diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts new file mode 100644 index 000000000..79dd056d0 --- /dev/null +++ b/src/components/modules/product-detail/index.ts @@ -0,0 +1 @@ +export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 67eb96726..e17e36944 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -21,7 +21,7 @@ --warning-light: #fef8eb; --negative-dark: #741a06; - --negative: #f34f2b; + --negative: #D1644D; --negative-border-line: #fddfd8; --negative-light: #feefec; diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 3f8d61926..cb7760943 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -2,6 +2,7 @@ export const LANGUAGE = { BUTTON_LABEL: { BUY_NOW: 'Buy now', SHOP_NOW: 'Shop now', + ADD_TO_CARD: 'Add to Cart' }, PLACE_HOLDER: { SEARCH: 'Search',