summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/cart/components/Cartheader.jsx30
-rw-r--r--src/lib/product/components/ProductFilter.jsx64
-rw-r--r--src/lib/product/components/ProductFilterDesktop.jsx70
-rw-r--r--src/lib/product/components/ProductSearch.jsx54
4 files changed, 143 insertions, 75 deletions
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 901b1501..aa6980ac 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -125,7 +125,7 @@ const Cardheader = (cartCount) => {
>
<div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
<div className='p-2 flex justify-between items-center'>
- <h5 class='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+ <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
<Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
Lihat Semua
</Link>
@@ -145,15 +145,15 @@ const Cardheader = (cartCount) => {
)}
{isLoading &&
itemLoading.map((item) => (
- <div key={item} role='status' class='max-w-sm animate-pulse'>
- <div class='flex items-center space-x-4 mb- 2'>
- <div class='flex-shrink-0'>
- <PhotoIcon class='h-16 w-16 text-gray-500' />
+ <div key={item} role='status' className='max-w-sm animate-pulse'>
+ <div className='flex items-center space-x-4 mb- 2'>
+ <div className='flex-shrink-0'>
+ <PhotoIcon className='h-16 w-16 text-gray-500' />
</div>
- <div class='flex-1 min-w-0'>
- <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
- <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
- <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div className='flex-1 min-w-0'>
+ <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+ <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+ <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
</div>
</div>
</div>
@@ -167,13 +167,13 @@ const Cardheader = (cartCount) => {
)}
{auth && products.length > 0 && !isLoading && (
<>
- <ul role='list' class='divide-y divide-gray-200 dark:divide-gray-700'>
+ <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
{products &&
products?.map((product, index) => (
<>
- <li class='py-1 sm:py-2'>
- <div class='flex items-center space-x-4'>
- <div class='flex-shrink-0'>
+ <li className='py-1 sm:py-2'>
+ <div className='flex items-center space-x-4'>
+ <div className='flex-shrink-0'>
<Link
href={createSlug(
'/shop/product/',
@@ -189,7 +189,7 @@ const Cardheader = (cartCount) => {
/>
</Link>
</div>
- <div class='flex-1 min-w-0'>
+ <div className='flex-1 min-w-0'>
<Link
href={createSlug(
'/shop/product/',
@@ -199,7 +199,7 @@ const Cardheader = (cartCount) => {
className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
>
{' '}
- <p class='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+ <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
{product.parent.name}
</p>
</Link>
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 40bfc824..14eef0ba 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -87,27 +87,31 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
return (
<BottomPopup active={active} close={close} title='Filter Produk'>
<div className='flex flex-col gap-y-4'>
- {!router.pathname.includes('brands') &&
- !defaultBrand && (
- <div>
- <label>Brand</label>
- <select
- name='brand'
- className='form-input mt-2'
- value={brand}
- onChange={(e) => setBrand(e.target.value)}
- >
- <option value=''>Pilih Brand...</option>
- {brands.map((brand, index) => (
- <option value={brand.brand} key={index}>
- {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
- </option>
- ))}
- </select>
- </div>
- )
- }
-
+ {!router.pathname.includes('brands') && !defaultBrand && (
+ <div>
+ <label>Brand</label>
+ <select
+ name='brand'
+ className='form-input mt-2'
+ value={brand}
+ onChange={(e) => setBrand(e.target.value)}
+ >
+ {brands.length > 0 ? (
+ <>
+ <option value=''>Pilih Brand...</option>
+ {brands.map((brand, index) => (
+ <option value={brand.brand} key={index}>
+ {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
+ </option>
+ ))}
+ </>
+ ) : (
+ <option value=''>Brands tidak tersedia</option>
+ )}
+ </select>
+ </div>
+ )}
+
<div>
<label>Kategori</label>
<select
@@ -116,12 +120,18 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
value={category}
onChange={(e) => setCategory(e.target.value)}
>
- <option value=''>Pilih Kategori...</option>
- {categories.map((category, index) => (
- <option value={category} key={index}>
- {category}
- </option>
- ))}
+ {categories.length > 0 ? (
+ <>
+ <option value=''>Pilih Kategori...</option>
+ {categories.map((category, index) => (
+ <option value={category.name} key={index}>
+ {category.name} <span className='text-sm text-gray-200'>({category.qty})</span>
+ </option>
+ ))}
+ </>
+ ) : (
+ <option value=''>Kategori tidak tersedia</option>
+ )}
</select>
</div>
<div>
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index cdfd85e8..e84d6526 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -111,7 +111,6 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
return (
<>
<Accordion defaultIndex={[0]} allowMultiple>
-
{!router.pathname.includes('brands') && (
<AccordionItem>
<AccordionButton padding={[2, 4]}>
@@ -123,21 +122,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
<AccordionPanel>
<Stack gap={3} direction='column' maxH={'240px'} overflow='auto'>
- {brands.map((brand, index) => (
- <div className='flex items-center gap-2 ' key={index}>
- <Checkbox
- isChecked={brandValues.includes(brand.brand)}
- onChange={handleBrandsChange}
- value={brand.brand}
- size='md'
- >
- <div className='flex items-center gap-2'>
- <span>{brand.brand} </span>
- <span className='text-sm text-gray-600'>({brand.qty})</span>
- </div>
- </Checkbox>
- </div>
- ))}
+ {brands && brands.length > 0 ? (
+ brands.map((brand, index) => (
+ <div className='flex items-center gap-2 ' key={index}>
+ <Checkbox
+ isChecked={brandValues.includes(brand.brand)}
+ onChange={handleBrandsChange}
+ value={brand.brand}
+ size='md'
+ >
+ <div className='flex items-center gap-2'>
+ <span>{brand.brand} </span>
+ <span className='text-sm text-gray-600'>({brand.qty})</span>
+ </div>
+ </Checkbox>
+ </div>
+ ))
+ ) : (
+ <div className='flex items-center gap-2'>Brands tidak tersedia</div>
+ )}
</Stack>
</AccordionPanel>
</AccordionItem>
@@ -153,18 +156,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
<AccordionPanel>
<Stack gap={3} direction='column' maxH={'240px'} overflow='auto'>
- {categories.map((category, index) => (
- <div className='flex items-center gap-2' key={index}>
- <Checkbox
- isChecked={categoryValues.includes(category)}
- onChange={handleCategoriesChange}
- value={category}
- size='md'
- >
- {category}
- </Checkbox>
- </div>
- ))}
+ {categories && categories.length > 0 ? (
+ categories.map((category, index) => (
+ <div className='flex items-center gap-2' key={index}>
+ <Checkbox
+ isChecked={categoryValues.includes(category.name)}
+ onChange={handleCategoriesChange}
+ value={category.name}
+ size='md'
+ >
+ <div className='flex items-center gap-2'>
+ <span>{category.name} </span>
+ <span className='text-sm text-gray-600'>({category.qty})</span>
+ </div>
+ </Checkbox>
+ </div>
+ ))
+ ) : (
+ <div className='flex items-center gap-2'>Kategori tidak tersedia</div>
+ )}
</Stack>
</AccordionPanel>
</AccordionItem>
@@ -215,7 +225,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
</AccordionPanel>
</AccordionItem>
- <AccordionItem>
+ {/* <AccordionItem>
<AccordionButton padding={[2, 4]}>
<Box as='span' flex='1' textAlign='left' fontWeight='semibold'>
Ketersedian Stok
@@ -233,7 +243,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
Ketersedian Stock
</Checkbox>
</AccordionPanel>
- </AccordionItem>
+ </AccordionItem> */}
</Accordion>
<Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index edc98197..fd75d587 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -15,6 +15,8 @@ import { useRouter } from 'next/router'
import searchSpellApi from '@/core/api/searchSpellApi'
import Link from '@/core/components/elements/Link/Link'
import whatsappUrl from '@/core/utils/whatsappUrl'
+import { Image } from '@chakra-ui/react'
+import odooApi from '@/core/api/odooApi'
const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
const router = useRouter()
@@ -25,6 +27,8 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
const { productSearch } = useProductSearch({ query: { ...query, q, limit } })
const [products, setProducts] = useState(null)
const [spellings, setSpellings] = useState(null)
+ const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null)
+ const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null)
const popup = useActive()
const numRows = [30, 50, 80, 100]
@@ -71,7 +75,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
) {
const brand = productSearch.data?.facetCounts?.facetFields?.manufactureName[i]
const qty = productSearch.data?.facetCounts?.facetFields?.manufactureName[i + 1]
- brands.push({ brand, qty })
+ if (qty > 0) {
+ brands.push({ brand, qty })
+ }
}
/*const brandsList = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
(value, index) => {
@@ -83,13 +89,22 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
}
)*/
- const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
+ const categories = []
+ for (let i = 0; i < productSearch.data?.facetCounts?.facetFields?.categoryName.length; i += 2) {
+ const name = productSearch.data?.facetCounts?.facetFields?.categoryName[i]
+ const qty = productSearch.data?.facetCounts?.facetFields?.categoryName[i + 1]
+ if (qty > 0) {
+ categories.push({ name, qty })
+ }
+ }
+
+ /*const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
(value, index) => {
if (index % 2 === 0) {
return true
}
}
- )
+ )*/
const orderOptions = [
{ value: 'price-asc', label: 'Harga Terendah' },
@@ -117,6 +132,20 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
params = toQuery(params)
router.push(`${prefixUrl}?${params}`)
}
+ const getBanner = async () => {
+ if (router.pathname.includes('search')) {
+ const getBannerHeader = await odooApi('GET', '/api/v1/banner?type=promotion-header')
+ const getBannerFooter = await odooApi('GET', '/api/v1/banner?type=promotion-footer')
+ var randomIndex = Math.floor(Math.random() * getBannerHeader.length)
+ var randomIndexFooter = Math.floor(Math.random() * getBannerFooter.length)
+ setBannerPromotionHeader(getBannerHeader[randomIndex])
+ setBannerPromotionFooter(getBannerFooter[randomIndexFooter])
+ }
+ }
+
+ useEffect(() => {
+ getBanner()
+ }, [])
useEffect(() => {
setProducts(productSearch.data?.response?.products)
@@ -230,6 +259,16 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
/>
</div>
<div className='w-9/12 pl-6'>
+ {bannerPromotionHeader && bannerPromotionHeader?.image && (
+ <div className='mb-3'>
+ <Image
+ src={bannerPromotionHeader?.image}
+ alt=''
+ className='object-cover object-center h-full mx-auto'
+ />
+ </div>
+ )}
+
<h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
<div className='flex justify-between items-center mb-2'>
<div className='mb-2 leading-6 text-gray_r-11'>
@@ -332,6 +371,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
className='!justify-end'
/>
</div>
+ {bannerPromotionFooter && bannerPromotionFooter?.image && (
+ <div className='mb-3'>
+ <Image
+ src={bannerPromotionFooter?.image}
+ alt=''
+ className='object-cover object-center h-full mx-auto'
+ />
+ </div>
+ )}
</div>
</div>
</DesktopView>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-19 10:07:06 +0000