diff options
5 files changed, 38 insertions, 12 deletions
diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css index 38b895f9..aac27a84 100644 --- a/src-migrate/modules/product-card/styles/product-card.module.css +++ b/src-migrate/modules/product-card/styles/product-card.module.css @@ -41,7 +41,7 @@ } .ready-stock { - @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md; + @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md whitespace-nowrap; } .price-inc, diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index dd211f6f..cade21b8 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -2,7 +2,6 @@ import style from '../styles/price-action.module.css' import React, { useEffect } from 'react' import formatCurrency from '~/libs/formatCurrency' -import { formatToShortText } from '~/libs/formatNumber' import { IProductDetail } from '~/types/product' import { useProductDetail } from '../stores/useProductDetail' import AddToCart from './AddToCart' @@ -27,7 +26,7 @@ const PriceAction = ({ product }: Props) => { }, [product, setActive]); return ( - <div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'> + <div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10' id='price-section'> {!!activePrice && activePrice.price > 0 && ( <> <div className={style['main-price']}> diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx index e8c18921..931563e0 100644 --- a/src-migrate/modules/product-detail/components/VariantList.tsx +++ b/src-migrate/modules/product-detail/components/VariantList.tsx @@ -10,6 +10,7 @@ import { useProductDetail } from '../stores/useProductDetail' import { LazyLoadComponent } from 'react-lazy-load-image-component'; import { getVariantSLA } from '~/services/productVariant' import { useQuery } from 'react-query' +import useDevice from '@/core/hooks/useDevice' type Props = { variants: IProductVariantDetail[] @@ -20,12 +21,13 @@ const VariantList = ({ variants }: Props) => { <div className='overflow-auto'> <div className={style['wrapper']}> <div className={style['header']}> - <div className="w-2/12 sticky left-0 bg-gray-200">Part Number</div> + <div className="w-2/12">Part Number</div> <div className="w-2/12">Variant</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-3/12">Harga</div> + <div className='w-1/12 sticky right-0 bg-gray-200'></div> </div> {variants.map((variant) => ( <LazyLoadComponent key={variant.id}> @@ -38,6 +40,8 @@ const VariantList = ({ variants }: Props) => { } const Row = ({ variant }: { variant: IProductVariantDetail }) => { + const { isMobile } = useDevice() + const { activeVariantId, setActive } = useProductDetail() const querySLA = useQuery<IProductVariantSLA>({ queryKey: ['variant-sla', variant.id], @@ -46,17 +50,32 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => { const sla = querySLA?.data + const handleSelect = (variant: IProductVariantDetail) => { + const priceSectionEl = document.getElementById('price-section') + if (isMobile && priceSectionEl) { + window.scrollTo({ + top: priceSectionEl.offsetTop - 120, + behavior: 'smooth' + }) + } + setActive(variant) + } + 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.code}</div> <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 && ( - <> + <div className={clsxm('text-center rounded-md', { + [style['stock-empty']]: sla.qty == 0, + [style['stock-ready']]: sla.qty > 0, + })} + > {sla.qty > 0 && sla.qty} {sla.qty == 0 && '-'} - </> + </div> )} </Skeleton> </div> @@ -72,9 +91,9 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => { {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`} {variant.price.price === 0 && '-'} </div> - <div className='w-1/12'> + <div className='w-1/12 sticky right-0 bg-white md:bg-transparent'> <Button - onClick={() => setActive(variant)} + onClick={() => handleSelect(variant)} size='sm' w='100%' className={clsxm(style['select-btn'], { diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css index 40cbd1bb..a56822c1 100644 --- a/src-migrate/modules/product-detail/styles/variant-list.module.css +++ b/src-migrate/modules/product-detail/styles/variant-list.module.css @@ -3,11 +3,11 @@ } .header { - @apply flex py-2.5 px-4 font-medium bg-gray-200 rounded-md; + @apply flex py-2.5 pl-4 font-medium bg-gray-200 rounded-md; } .row { - @apply flex items-center py-2.5 px-4 text-gray-800; + @apply flex items-center py-2.5 pl-4 text-gray-800; } .select-btn { @@ -17,3 +17,11 @@ .select-btn--active { @apply !text-white !bg-danger-500 hover:!text-white; } + +.stock-empty { + @apply bg-red-50 border border-red-500 text-red-800; +} + +.stock-ready { + @apply bg-green-50 border border-green-500 text-green-800; +} diff --git a/src-migrate/modules/product-slider/components/ProductSlider.tsx b/src-migrate/modules/product-slider/components/ProductSlider.tsx index 6ef9f688..3d6e7593 100644 --- a/src-migrate/modules/product-slider/components/ProductSlider.tsx +++ b/src-migrate/modules/product-slider/components/ProductSlider.tsx @@ -14,7 +14,7 @@ type Props = { } const ProductSlider = ({ products, productLayout }: Props) => { - const { isDesktop, isMobile } = useDevice() + const { isDesktop } = useDevice() return ( <div> |