diff options
Diffstat (limited to 'src-migrate/modules')
7 files changed, 106 insertions, 70 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx index eab3c7be..fccbdcf5 100644 --- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx +++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx @@ -6,7 +6,7 @@ const AddToWishlist = () => { return ( <Button variant='link' - className='!text-gray-500 !font-medium' + colorScheme='gray' leftIcon={<HeartIcon size={18} />} > Wishlist diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx new file mode 100644 index 00000000..0ee5b115 --- /dev/null +++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx @@ -0,0 +1,40 @@ +import React, { Fragment } from 'react' +import { useQuery } from 'react-query' +import { getProductCategoryBreadcrumb } from '~/services/product' +import Link from 'next/link' +import { createSlug } from '~/libs/slug' + +type Props = { + id: number, + name: string +} + +const Breadcrumb = ({ id, name }: Props) => { + const query = useQuery({ + queryKey: ['product-category-breadcrumb'], + queryFn: () => getProductCategoryBreadcrumb(id) + }) + + const breadcrumbs = query.data || [] + + return ( + <div className='line-clamp-3 md:line-clamp-1 leading-7'> + <Link href='/' className='text-danger-500'>Home</Link> + <span className='mx-2'>/</span> + {breadcrumbs.map((category, index) => ( + <Fragment key={index}> + <Link + href={createSlug('/shop/category/', category.name, category.id.toString())} + className='text-danger-500' + > + {category.name} + </Link> + <span className='mx-2'>/</span> + </Fragment> + ))} + <span>{name}</span> + </div> + ) +} + +export default Breadcrumb
\ No newline at end of file diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 361580ea..2c5e989b 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -11,14 +11,16 @@ type Props = { const Image = ({ product }: Props) => { return ( - <div className='h-[340px] border border-gray-200 rounded-lg p-2 relative'> + <div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'> <ImageUI src={product.image || '/images/noimage.jpeg'} alt={product.name} - width={512} - height={512} - className='object-contain object-center h-full' - classNames={{ wrapper: 'h-full' }} + width={256} + height={256} + className='object-contain object-center h-full w-full' + classNames={{ wrapper: 'h-full w-full' }} + loading='eager' + priority /> <div className='absolute hidden md:block top-4 right-4'> <Tooltip diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index fd0e0b3c..52eb6b88 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -9,6 +9,7 @@ import { IProductDetail } from '~/types/product' import { IProductVariantSLA } from '~/types/productVariant' import { createSlug } from '~/libs/slug' import { getVariantSLA } from '~/services/productVariant' +import { formatToShortText } from '~/libs/formatNumber' const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton)) @@ -31,10 +32,6 @@ const Information = ({ product }: Props) => { <div className={style['label']}>SKU Number</div> <div className={style['value']}>SKU-{product.id}</div> </div> - {/* <div className={style['row']}> - <div className={style['label']}>Part Number</div> - <div className={style['value']}>{product.code || '-'}</div> - </div> */} <div className={style['row']}> <div className={style['label']}>Manufacture</div> <div className={style['value']}> @@ -48,35 +45,10 @@ const Information = ({ product }: Props) => { ) : '-'} </div> </div> - {/* <div className={style['row']}> - <div className={style['label']}>Preparation Time</div> - <div className={style['value']}> - {product.variant_total > 1 && 'Lihat Variant'} - {product.variant_total === 1 && ( - <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '40px'} h='100%'> - {sla?.sla_date} - </Skeleton> - )} - </div> - </div> <div className={style['row']}> - <div className={style['label']}>Stock</div> - <div className={style['value']}> - {product.variant_total > 1 && 'Lihat Variant'} - {product.variant_total === 1 && ( - <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '10px'} h='100%'> - {sla?.qty && sla.qty > 0 ? sla?.qty : '-'} - </Skeleton> - )} - </div> + <div className={style['label']}>Terjual</div> + <div className={style['value']}>{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}</div> </div> - <div className={style['row']}> - <div className={style['label']}>Weight</div> - <div className={style['value']}> - {product.variant_total > 1 && 'Lihat Variant'} - {product.variant_total === 1 && (product.weight > 0 ? `${product.weight} kg` : '-')} - </div> - </div> */} </div> ) } diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index cfb596fa..dd211f6f 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -28,13 +28,6 @@ const PriceAction = ({ product }: Props) => { return ( <div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'> - {product.qty_sold > 0 && ( - <div className={style['secondary-text']}> - {formatToShortText(product.qty_sold)} Terjual - </div> - )} - <div className='h-2' /> - {!!activePrice && activePrice.price > 0 && ( <> <div className={style['main-price']}> @@ -60,7 +53,8 @@ const PriceAction = ({ product }: Props) => { <div className='h-4' /> <div className={style['action-wrapper']}> - <input type='number' value={quantityInput} onChange={(e) => setQuantityInput(e.target.value)} className={style['quantity-input']} /> + <label htmlFor="quantity" className='hidden'>Quantity</label> + <input type='number' id='quantity' value={quantityInput} onChange={(e) => setQuantityInput(e.target.value)} className={style['quantity-input']} /> <AddToCart variantId={activeVariantId} quantity={Number(quantityInput)} /> <AddToCart source='buy' variantId={activeVariantId} quantity={Number(quantityInput)} /> </div> diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 08ad7d51..93fa7118 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -2,28 +2,34 @@ import style from '../styles/product-detail.module.css' import React, { useEffect } from 'react' import Link from 'next/link' -import { MessageCircleIcon } from 'lucide-react' +import { useRouter } from 'next/router' + +import { MessageCircleIcon, Share2Icon } from 'lucide-react' import { Button } from '@chakra-ui/react' import { IProductDetail } from '~/types/product' +import useDevice from '@/core/hooks/useDevice' +import { whatsappUrl } from '~/libs/whatsappUrl' +import { useProductDetail } from '../stores/useProductDetail' + +import { RWebShare } from 'react-web-share' import ProductImage from './Image' import Information from './Information' import AddToWishlist from './AddToWishlist' import VariantList from './VariantList' import SimilarSide from './SimilarSide' import SimilarBottom from './SimilarBottom' -import useDevice from '@/core/hooks/useDevice' import PriceAction from './PriceAction' -import { whatsappUrl } from '~/libs/whatsappUrl' -import { useRouter } from 'next/router' -import { useProductDetail } from '../stores/useProductDetail' import ProductPromoSection from '~/modules/product-promo/components/Section' +import Breadcrumb from './Breadcrumb' type Props = { product: IProductDetail } +const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST + const ProductDetail = ({ product }: Props) => { const { isDesktop, isMobile } = useDevice() const router = useRouter() @@ -46,6 +52,9 @@ const ProductDetail = ({ product }: Props) => { return ( <> <div className='md:flex md:flex-wrap'> + <div className="w-full mb-4 md:mb-6 px-4 md:px-0"> + <Breadcrumb id={product.id} name={product.name} /> + </div> <div className='md:w-9/12 md:flex md:flex-col md:pr-4'> <div className='md:flex md:flex-wrap'> <div className="md:w-4/12"> @@ -63,18 +72,39 @@ const ProductDetail = ({ product }: Props) => { <Information product={product} /> - <div className='h-4' /> + <div className='h-6' /> + + <div className="flex gap-x-5"> + <Button + as={Link} + href={askAdminUrl} + variant='link' + target='_blank' + colorScheme='gray' + leftIcon={<MessageCircleIcon size={18} />} + > + Ask Admin + </Button> + + <AddToWishlist /> + + <RWebShare + data={{ + text: 'Check out this product', + title: `${product.name} - Indoteknik.com`, + url: SELF_HOST + router.asPath + }} + > + <Button + variant='link' + colorScheme='gray' + leftIcon={<Share2Icon size={18} />} + > + Share + </Button> + </RWebShare> + </div> - <Button - as={Link} - href={askAdminUrl} - variant='link' - target='_blank' - colorScheme='red' - leftIcon={<MessageCircleIcon size={18} />} - > - Ask Admin - </Button> </div> </div> @@ -117,9 +147,7 @@ const ProductDetail = ({ product }: Props) => { <div className="md:w-3/12"> <PriceAction product={product} /> - <AddToWishlist /> - - <div className='h-8' /> + <div className='h-6' /> <div className={style['heading']}> Produk Serupa @@ -131,7 +159,7 @@ const ProductDetail = ({ product }: Props) => { </div> )} - <div className='md:w-full py-0 md:py-10 px-4 md:px-0'> + <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'> <div className={style['heading']}> Kamu Mungkin Juga Suka </div> diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx index 96b7486b..e8c18921 100644 --- a/src-migrate/modules/product-detail/components/VariantList.tsx +++ b/src-migrate/modules/product-detail/components/VariantList.tsx @@ -22,10 +22,10 @@ const VariantList = ({ variants }: Props) => { <div className={style['header']}> <div className="w-2/12 sticky left-0 bg-gray-200">Part Number</div> <div className="w-2/12">Variant</div> - <div className="w-2/12">Stock</div> + <div className="w-1/12">Stock</div> <div className="w-2/12">Masa Persiapan</div> <div className="w-1/12">Berat</div> - <div className="w-2/12">Harga</div> + <div className="w-3/12">Harga</div> </div> {variants.map((variant) => ( <LazyLoadComponent key={variant.id}> @@ -49,8 +49,8 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => { return ( <div className={style['row']}> <div className='w-2/12 sticky left-0 bg-white md:bg-transparent'>{variant.code}</div> - <div className='w-2/12'>{variant.attributes.join(', ')}</div> - <div className='w-2/12'> + <div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div> + <div className='w-1/12'> <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}> {sla?.qty !== undefined && ( <> @@ -68,7 +68,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => { <div className='w-1/12'> {variant.weight > 0 ? `${variant.weight} Kg` : '-'} </div> - <div className='w-2/12'> + <div className='w-3/12'> {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`} {variant.price.price === 0 && '-'} </div> |