diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/shop/promo/[slug].tsx | 182 |
1 files changed, 70 insertions, 112 deletions
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx index 4f223aed..c53bcf0e 100644 --- a/src/pages/shop/promo/[slug].tsx +++ b/src/pages/shop/promo/[slug].tsx @@ -15,16 +15,15 @@ import MobileView from '../../../core/components/views/MobileView'; import 'swiper/swiper-bundle.css'; import useDevice from '../../../core/hooks/useDevice' import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktop'; +import ProductFilter from '../../../lib/product/components/ProductFilter'; import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'; import { formatCurrency } from '../../../core/utils/formatValue'; import Pagination from '../../../core/components/elements/Pagination/Pagination'; -import { cons } from 'lodash-contrib' -// import SideBanner from '~/modules/side-banner'; import SideBanner from '../../../../src-migrate/modules/side-banner'; import whatsappUrl from '../../../core/utils/whatsappUrl'; import { toQuery } from 'lodash-contrib'; import _ from 'lodash'; -import { Query } from 'react-query'; +import useActive from '../../../core/hooks/useActive'; const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout')) @@ -43,6 +42,7 @@ export default function PromoDetail() { const [categoryValues, setCategoryValues] = useState<string[]>([]); const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular'); const [spellings, setSpellings] = useState(null); + const popup = useActive(); useEffect(() => { // Initialize brandValues based on router.query.brand @@ -82,10 +82,8 @@ export default function PromoDetail() { setCurrentPage(pageNumber) try { - // const start = (pageNumber-1) * itemsPerPage; const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`); setPromoItems(items); - console.log("promoItems lastIndexOf",promoItems.length) if (items.length === 0) { setPromoData([]) @@ -95,11 +93,8 @@ export default function PromoDetail() { const brandArray = Array.isArray(brand) ? brand : brand.split(','); const categoryArray = Array.isArray(category) ? category : category.split(','); - console.log("brandArray",brandArray) - console.log("categoryArray",categoryArray) + const promoDataPromises = items.map(async (item) => { - // const queryParams = new URLSearchParams({ q: `id:${item.id}` }) - console.log("produk id",item.product_id) try { let brandQuery = ''; @@ -137,16 +132,13 @@ export default function PromoDetail() { combinedQuery = brandQuery; } else if (category) { combinedQuery = categoryQuery; - } else if (priceFrom || priceTo) { } - console.log("combinedQuery",combinedQuery) if (combinedQuery && priceFrom || priceTo) { const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); const product = response.response.docs[0]; const product_id = product.id; - const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`); - // const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `); + const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`); return response2; }else if(combinedQuery){ const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); @@ -154,8 +146,7 @@ export default function PromoDetail() { const product_id = product.id; const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `); return response2; - } - else { + } else { const response = await fetchPromoItemsSolr(`id:${item.id}`); return response; } @@ -222,7 +213,7 @@ export default function PromoDetail() { setLoading(false); } catch (loadError) { - console.error("Error loading promo items:", loadError) + // console.error("Error loading promo items:", loadError) setLoading(false); } } @@ -264,8 +255,8 @@ export default function PromoDetail() { await setCategoryValues(catagories); break; case 'price': - params.priceFrom = ''; // Setel ke string kosong jika ingin menghapus nilai - params.priceTo = ''; // Setel ke string kosong jika ingin menghapus nilai + params.priceFrom = ''; + params.priceTo = ''; break; case 'delete': params = { @@ -285,19 +276,10 @@ export default function PromoDetail() { params = _.pickBy(params, _.identity); params = toQuery(params); router.push(`${slug}?${params}`); - // router.push(`${Array.isArray(slug) ? slug[0] : slug}`); }; - - const { search } = router.query; - const prefixUrl = `/promo/${slug}`; - - console.log("halaman sekarang", currentPage) - console.log("data yang di potong", (currentPage-1) * itemsPerPage, currentPage * 12) - const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12) - // const visiblePromotions = promoData?.slice( 0, 12) - const isNotReadyStockPage = router.asPath !== '/shop/promo?orderBy=stock'; + const whatPromo = capitalizeFirstLetter(slug) return ( <BasicLayout> @@ -306,7 +288,67 @@ export default function PromoDetail() { description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif' /> <Promocrumb brandName={whatPromo} /> + <MobileView> + <div className='p-4 pt-0'> + <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1> + + <FilterChoicesComponent + brandValues={brandValues} + categoryValues={categoryValues} + priceFrom={priceFrom} + priceTo={priceTo} + handleDeleteFilter={handleDeleteFilter} + /> + {promoItems.length >= 1 && ( + <div className='flex items-center gap-x-2 mb-5 justify-between'> + <div> + <button + className='btn-light py-2 px-5 h-[40px]' + onClick={popup.activate} + > + Filter + </button> + </div> + </div> + )} + + {loading ? ( + <div className='container flex justify-center my-4'> + <LogoSpinner width={48} height={48} /> + </div> + ) : promoData && promoItems.length >= 1 ? ( + <> + <div className='grid grid-cols-1 gap-x-1 gap-y-1'> + {visiblePromotions?.map((promotion) => ( + <div key={promotion.id} className="min-w-[350px] max-w-[350px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 "> + <ProductPromoCard promotion={promotion}/> + </div> + ))} + </div> + </> + ) : ( + <div className="text-center my-8"> + <p>Belum ada promo pada kategori ini</p> + </div> + )} + + <Pagination + pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)} + currentPage={currentPage} + url={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`} + className='mt-6 mb-2' + /> + <ProductFilter + active={popup.active} + close={popup.deactivate} + brands={brands || []} + categories={categories || []} + prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`} + defaultBrand={null} + /> + </div> + </MobileView> <DesktopView> <div className='container mx-auto flex mb-3'> <div className='w-3/12'> @@ -328,69 +370,6 @@ export default function PromoDetail() { priceTo={priceTo} handleDeleteFilter={handleDeleteFilter} /> - {/* <div className='flex justify-between items-center mb-5'> - <div className='leading-6 text-gray_r-11'> - {!spellings ? ( - <> - Menampilkan - {pageCount > 1 ? ( - <> - {productStart + 1}- - {parseInt(productStart) + parseInt(productRows) > - productFound - ? productFound - : parseInt(productStart) + parseInt(productRows)} - dari - </> - ) : ( - '' - )} - {productFound} - produk{' '} - {query.q && ( - <> - untuk pencarian{' '} - <span className='font-semibold'>{query.q}</span> - </> - )} - </> - ) : ( - SpellingComponent - )} - </div> - <div className='justify-end flex '> - <div className='ml-3'> - <select - name='urutan' - className='form-input' - value={orderBy} - onChange={(e) => handleOrderBy(e)} - > - {orderOptions.map((option, index) => ( - <option key={index} value={option.value}> - {' '} - {option.label}{' '} - </option> - ))} - </select> - </div> - <div className='ml-3'> - <select - name='limit' - className='form-input' - value={router.query?.limit || ''} - onChange={(e) => handleLimit(e)} - > - {numRows.map((option, index) => ( - <option key={index} value={option}> - {' '} - {option}{' '} - </option> - ))} - </select> - </div> - </div> - </div> */} {loading ? ( <div className='container flex justify-center my-4'> <LogoSpinner width={48} height={48} /> @@ -447,7 +426,6 @@ export default function PromoDetail() { </div> </div> - {console.log("promoItems lastIndexOf",promoItems.length)} </DesktopView> </BasicLayout> ) @@ -517,23 +495,3 @@ const FilterChoicesComponent = ({ </HStack> </div> ); - -// {loading ? ( -// <div className='container flex justify-center my-4'> -// <LogoSpinner width={48} height={48} /> -// </div> -// ) : promoData && promoItems.length >= 1 ? ( -// <> -// <div className=''> -// {visiblePromotions?.map((promotion) => ( -// <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4"> -// <ProductPromoCard promotion={promotion}/> -// </div> -// ))} -// </div> -// </> -// ) : ( -// <div className="text-center my-8"> -// <p>Belum ada promo pada kategori ini</p> -// </div> -// )}
\ No newline at end of file |