From adae00439898ccb0b2c20f2043aa4cd72bb23045 Mon Sep 17 00:00:00 2001 From: Mqdd Date: Wed, 19 Nov 2025 10:39:14 +0700 Subject: canonical Promo --- src/pages/shop/promo/[slug].jsx | 350 ++++++++++++++++++++++------------------ 1 file changed, 191 insertions(+), 159 deletions(-) diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx index cfb2c841..a0ffecea 100644 --- a/src/pages/shop/promo/[slug].jsx +++ b/src/pages/shop/promo/[slug].jsx @@ -1,16 +1,16 @@ -import dynamic from 'next/dynamic' +import dynamic from 'next/dynamic'; import NextImage from 'next/image'; -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' -import Seo from '../../../core/components/Seo.jsx' -import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx' -import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' -import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx' -import React from 'react' +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; +import Seo from '../../../core/components/Seo.jsx'; +import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx'; +import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx'; +import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx'; +import React from 'react'; import DesktopView from '../../../core/components/views/DesktopView.jsx'; import MobileView from '../../../core/components/views/MobileView.jsx'; import 'swiper/swiper-bundle.css'; -import useDevice from '../../../core/hooks/useDevice.js' +import useDevice from '../../../core/hooks/useDevice.js'; import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion.jsx'; import ProductFilter from '../../../lib/product/components/ProductFilter.jsx'; import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'; @@ -21,15 +21,17 @@ import _ from 'lodash'; import useActive from '../../../core/hooks/useActive.js'; import useProductSearch from '../../../lib/promo/hooks/usePromotionSearch.js'; -const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout.jsx')) +const BasicLayout = dynamic(() => + import('../../../core/components/layouts/BasicLayout.jsx') +); export default function PromoDetail() { - const router = useRouter() - const { slug = '', brand ='', category='', page = '1' } = router.query + const router = useRouter(); + const { slug = '', brand = '', category = '', page = '1' } = router.query; const [currentPage, setCurrentPage] = useState(parseInt(10) || 1); const [orderBy, setOrderBy] = useState(router.query?.orderBy); const popup = useActive(); - const prefixUrl = `/shop/promo/${slug}` + const prefixUrl = `/shop/promo/${slug}`; const [queryFinal, setQueryFinal] = useState({}); const [limit, setLimit] = useState(30); const [q, setQ] = useState('*'); @@ -42,38 +44,55 @@ export default function PromoDetail() { : [] : [] ); - + const [categoryValues, setCategory] = useState( router.query?.category?.split(',') || router.query?.category?.split(',') ); - + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); - useEffect(() => { const newQuery = { fq: `type_value_s:${slug}`, - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - category : router.query.category? router.query.category : '', - priceFrom : router.query.priceFrom? router.query.priceFrom : '', - priceTo : router.query.priceTo? router.query.priceTo : '', - limit : router.query.limit? router.query.limit : '', - orderBy : router.query.orderBy? router.query.orderBy : '' + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + category: router.query.category ? router.query.category : '', + priceFrom: router.query.priceFrom ? router.query.priceFrom : '', + priceTo: router.query.priceTo ? router.query.priceTo : '', + limit: router.query.limit ? router.query.limit : '', + orderBy: router.query.orderBy ? router.query.orderBy : '', }; setFinalQuery(newQuery); -}, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage]); + }, [ + router.query, + prefixUrl, + slug, + brand, + category, + priceFrom, + priceTo, + currentPage, + ]); useEffect(() => { - setQueryFinal({ ...finalQuery, q, limit, orderBy }); - }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage, finalQuery]); + setQueryFinal({ ...finalQuery, q, limit, orderBy }); + }, [ + router.query, + prefixUrl, + slug, + brand, + category, + priceFrom, + priceTo, + currentPage, + finalQuery, + ]); const { productSearch } = useProductSearch({ query: queryFinal, operation: 'OR', }); - const pageCount = Math.ceil(productSearch.data?.response.numFound / limit); const productStart = productSearch.data?.responseHeader.params.start; const productRows = limit; @@ -86,7 +105,8 @@ export default function PromoDetail() { const brands = []; for ( let i = 0; - i < productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s.length; + i < + productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s.length; i += 2 ) { const brand = @@ -104,7 +124,8 @@ export default function PromoDetail() { i < productSearch.data?.facet_counts?.facet_fields?.category_name.length; i += 2 ) { - const name = productSearch.data?.facet_counts?.facet_fields?.category_name[i]; + const name = + productSearch.data?.facet_counts?.facet_fields?.category_name[i]; const qty = productSearch.data?.facet_counts?.facet_fields?.category_name[i + 1]; if (qty > 0) { @@ -114,8 +135,8 @@ export default function PromoDetail() { function capitalizeFirstLetter(string) { string = string.replace(/_/g, ' '); - return string.replace(/(^\w|\s\w)/g, function(match) { - return match.toUpperCase(); + return string.replace(/(^\w|\s\w)/g, function (match) { + return match.toUpperCase(); }); } @@ -144,8 +165,8 @@ export default function PromoDetail() { break; case 'price': params.priceFrom = ''; - params.priceTo = ''; - break; + params.priceTo = ''; + break; case 'delete': params = { q: router.query.q, @@ -165,37 +186,41 @@ export default function PromoDetail() { params = toQuery(params); router.push(`${slug}?${params}`); }; - const toQuery = (obj) => { const str = Object.keys(obj) - .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`) - .join('&') - return str - } - - const whatPromo = capitalizeFirstLetter(slug) - const queryWithoutSlug = _.omit(router.query, ['slug']) - + .map( + (key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}` + ) + .join('&'); + return str; + }; + + const whatPromo = capitalizeFirstLetter(slug); + const queryWithoutSlug = _.omit(router.query, ['slug']); + return (

Promo {whatPromo}

- - - {products?.length >= 1 && ( + + + {products?.length >= 1 && (
)} - {productSearch.isLoading &&
- -
} + {productSearch.isLoading && ( +
+ +
+ )} {products && ( - <> -
- {products?.map((promotion) => ( -
- -
- ))} -
- - ) } + <> +
+ {products?.map((promotion) => ( +
+ +
+ ))} +
+ + )} - - + +
-

Promo {whatPromo}

-
- -
- - -
-
- - -
-
- {productSearch.isLoading ? ( -
- -
- ) : products && products.length >= 1 ? ( - <> +
+
+ +
+
+ +
+
+ {productSearch.isLoading ? ( +
+ +
+ ) : products && products.length >= 1 ? ( + <>
{products?.map((promotion) => ( -
- +
+
))}
- ) : ( -
-

Belum ada promo pada kategori ini

-
- )} -
-
- -
- - Barang yang anda cari tidak ada?{' '} - - Hubungi Kami - - -
-
- - - - +

Belum ada promo pada kategori ini

+
+ )} +
+
+ +
+ + Barang yang anda cari tidak ada?{' '} + + Hubungi Kami + + +
+ +
- ) - } - + ); +} + const FilterChoicesComponent = ({ brandValues, categoryValues, priceFrom, priceTo, handleDeleteFilter, - }) => ( +}) => (
{brandValues?.map((value, index) => ( @@ -344,7 +376,7 @@ const FilterChoicesComponent = ({ borderRadius='lg' variant='outline' colorScheme='gray' - > + > {value} handleDeleteFilter('brands', value)} /> @@ -357,11 +389,11 @@ const FilterChoicesComponent = ({ borderRadius='lg' variant='outline' colorScheme='gray' - > + > {value} handleDeleteFilter('category', value)} - /> + /> ))} {priceFrom && priceTo && ( @@ -371,7 +403,7 @@ const FilterChoicesComponent = ({ handleDeleteFilter('price', priceFrom)} - /> + /> )} {brandValues?.length > 0 || @@ -382,13 +414,13 @@ const FilterChoicesComponent = ({ ) : ( '' - )} + )}
); -- cgit v1.2.3