diff options
7 files changed, 62 insertions, 58 deletions
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index d99b683c..c9687bf0 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -92,7 +92,7 @@ const Image = ({ product }: Props) => { </Tooltip> </div> - {flashSale.remaining_time > 0 && ( + {/* {flashSale.remaining_time > 0 && ( <div className='absolute bottom-0 w-full h-14'> <div className='relative w-full h-full'> <ImageUI @@ -126,7 +126,7 @@ const Image = ({ product }: Props) => { </div> </div> </div> - )} + )} */} </div> ); }; diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 03148150..e5f62553 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -174,7 +174,7 @@ const PriceAction = ({ product }: Props) => { // Tidak ada discount bawaan, tapi ada voucher → tampilkan harga setelah voucher <> <div - className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-sm`} + className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-md border border-red-500 `} style={fontSize ? { fontSize } : undefined} > <TicketIcon className='w-5 h-5 shrink-0' aria-hidden /> @@ -232,7 +232,7 @@ const PriceAction = ({ product }: Props) => { // Tidak ada discount bawaan, tapi ada voucher → tampilkan harga setelah voucher <> <div - className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-sm`} + className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-md border border-red-500`} style={fontSize ? { fontSize } : undefined} > <TicketIcon className='w-5 h-5 shrink-0' aria-hidden /> @@ -285,7 +285,7 @@ const PriceAction = ({ product }: Props) => { <DesktopView> <div className='h-4' /> - <div className='flex gap-x-4 items-center'> + <div className='flex gap-x-3 items-center'> {/* Qty */} <div className='relative flex items-center'> <button @@ -344,9 +344,9 @@ const PriceAction = ({ product }: Props) => { )} </div> </div> - <span className='block text-[12px] text-red-500 italic mt-1'> + {/* <span className='block text-[12px] text-red-500 italic mt-1'> * {qtyPickUp} barang bisa di pickup - </span> + </span> */} </DesktopView> {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */} @@ -381,11 +381,11 @@ const PriceAction = ({ product }: Props) => { )} </div> - {qtyPickUp > 0 && ( + {/* {qtyPickUp > 0 && ( <div className='text-[12px] mt-1 text-red-500 italic'> * {qtyPickUp} barang bisa di pickup </div> - )} + )} */} </div> {/* Kanan: hanya qty, rata kanan */} diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css index b94c33f7..def14e86 100644 --- a/src-migrate/modules/product-detail/styles/price-action.module.css +++ b/src-migrate/modules/product-detail/styles/price-action.module.css @@ -19,7 +19,7 @@ } .disc-badge { - @apply bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2; + @apply bg-danger-500 px-2 py-1 rounded text-white text-caption-2; } .disc-price { diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index e4f89103..d044d6a0 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -1,68 +1,72 @@ -import searchSuggestApi from '@/core/api/searchSuggestApi' -import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' -import { useCallback, useEffect, useRef, useState } from 'react' -import Link from '../Link/Link' -import { useRouter } from 'next/router' -import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug' +import searchSuggestApi from '@/core/api/searchSuggestApi'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import Link from '../Link/Link'; +import { useRouter } from 'next/router'; +import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'; const Search = () => { - const router = useRouter() - const queryRef = useRef() - const { slug = '' } = router.query - const [query, setQuery] = useState(router.query.q || '') - const [suggestions, setSuggestions] = useState([]) - const [segment, setSegment] = useState(null) - const [optionSegment, setOptionSegment] = useState(null) - const [optoinSelected, setOptionSelected] = useState(getNameFromSlug(slug) || 'default') - const [pathSegments, setPathSegments] = useState(router?.asPath.split('/') || []) + const router = useRouter(); + const queryRef = useRef(); + const { slug = '' } = router.query; + const [query, setQuery] = useState(router.query.q || ''); + const [suggestions, setSuggestions] = useState([]); + const [segment, setSegment] = useState(null); + const [optionSegment, setOptionSegment] = useState(null); + const [optoinSelected, setOptionSelected] = useState( + getNameFromSlug(slug) || 'default' + ); + const [pathSegments, setPathSegments] = useState( + router?.asPath.split('/') || [] + ); const loadSuggestion = useCallback(() => { if (query && document.activeElement == queryRef.current) { searchSuggestApi({ query }).then((response) => { - setSuggestions(response.data?.suggestions || []) - }) + setSuggestions(response.data?.suggestions || []); + }); } else { - setSuggestions([]) + setSuggestions([]); } - }, [query]) + }, [query]); useEffect(() => { if (query && document.activeElement == queryRef.current) { - loadSuggestion() + loadSuggestion(); } else { - setSuggestions([]) + setSuggestions([]); } - setFilterSearch() - }, [loadSuggestion, query]) + setFilterSearch(); + }, [loadSuggestion, query]); const handleSubmit = (e) => { - e.preventDefault() + e.preventDefault(); if (optionSegment && optoinSelected !== 'default' && optoinSelected) { - router.push(`/shop/${segment}/${slug}?q=${query}`) + router.push(`/shop/${segment}/${slug}?q=${query}`); } else { if (query) { - router.push(`/shop/search?q=${query}`) + router.push(`/shop/search?q=${query}`); } else { - queryRef.current.focus() + queryRef.current.focus(); } } - } + }; const handleSelectChange = async (e) => { - await setOptionSelected(e.target.value) - } + await setOptionSelected(e.target.value); + }; const setFilterSearch = async () => { if (router.pathname.includes('brands') && pathSegments[3]) { - await setSegment(pathSegments[2]) - await setOptionSegment(getNameFromSlug(slug)) + await setSegment(pathSegments[2]); + await setOptionSegment(getNameFromSlug(slug)); } - } + }; const onInputBlur = () => { setTimeout(() => { - setSuggestions([]) - }, 100) - } + setSuggestions([]); + }, 100); + }; return ( <> @@ -84,7 +88,7 @@ const Search = () => { className={`form-input p-3 ${ segment ? 'rounded-l-none border-l-0' : '' } rounded-r-none border-r-0 focus:border-gray_r-6`} - placeholder='Ketik nama, part number, merk' + placeholder='Ketik nama, part number, merek' value={query} onChange={(e) => setQuery(e.target.value)} onBlur={onInputBlur} @@ -115,7 +119,7 @@ const Search = () => { </div> </form> </> - ) -} + ); +}; -export default Search +export default Search; diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 24a8498a..64a6419a 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -639,14 +639,14 @@ const ProductDesktopVariant = ({ )} </div> </div> - {qtyPickUp > 0 && ( + {/* {qtyPickUp > 0 && ( <> <div className='text-[12px] mt-1 text-red-500 italic'> * {qtyPickUp} barang bisa di pickup </div> <div className='h-4' /> </> - )} + )} */} <div className='flex gap-x-3'> <Button onClick={() => handleAddToCart(product.id)} diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index acacb535..27664b4b 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -256,11 +256,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { {/* Stock : {activeVariant?.stock ?? 0} */} Stock : {fakeStock}{' '} </div> - {qtyPickUp > 0 && ( + {/* {qtyPickUp > 0 && ( <div className='text-[16px] mt-0.5 text-red-500 italic'> * {qtyPickUp} barang bisa di pickup </div> - )} + )} */} </div> <div className='col-span-5 flex justify-end'> <div className='inline-flex items-stretch border rounded-xl overflow-hidden'> diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 9523e937..7c1810e3 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -342,7 +342,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {(product?.stockTotal > 0 || product?.qtySold > 0) && ( <div className='flex w-full items-center gap-x-2 flex-nowrap min-w-0'> {product?.stockTotal > 0 && ( - <div className='badge-solid-red text-center shrink-0 whitespace-nowrap'> + <div className='badge-solid-red text-center shrink-0 whitespace-nowrap py-1.5'> Ready Stock </div> )} @@ -536,7 +536,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {/* baris harga sekarang + harga coret */} <div className='flex items-baseline gap-1 min-w-0'> {/* harga setelah voucher */} - <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-2.5 py-0.5 border border-solid border-danger-500'> + <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-2 py-0.5 border border-solid border-danger-500'> <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' /> {currencyFormat(finalAfterVoucher)} </span> @@ -596,7 +596,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {(product?.stockTotal > 0 || product?.qtySold > 0) && ( <div className='flex w-full items-center gap-x-2 flex-nowrap min-w-0'> {product?.stockTotal > 0 && ( - <div className='badge-solid-red text-center shrink-0 whitespace-nowrap'> + <div className='badge-solid-red text-center shrink-0 whitespace-nowrap py-1.5'> Ready Stock </div> )} @@ -818,7 +818,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { <div className='flex w-full items-center gap-x-1 '> {product?.stockTotal > 0 && ( - <div className='badge-solid-red'>Ready Stock</div> + <div className='badge-solid-red py-1.5'>Ready Stock</div> )} {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */} {product?.qtySold > 0 && ( |