From 037c06c8c7ee0751105b5aea22819a5c4c41fdd8 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 29 Feb 2024 16:14:31 +0700 Subject: Add utm source function on product card --- src/lib/product/components/ProductCard.jsx | 134 +++++++++++++++++------------ 1 file changed, 78 insertions(+), 56 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 1cec0804..9908a573 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,34 +1,46 @@ -import Image from '@/core/components/elements/Image/Image' -import Link from '@/core/components/elements/Link/Link' -import currencyFormat from '@/core/utils/currencyFormat' -import { sellingProductFormat } from '@/core/utils/formatValue' -import { createSlug } from '@/core/utils/slug' -import whatsappUrl from '@/core/utils/whatsappUrl' -import ImageNext from 'next/image' -import { useRouter } from 'next/router' -import { useMemo } from 'react' +import clsx from 'clsx'; +import ImageNext from 'next/image'; +import { useRouter } from 'next/router'; +import { useMemo } from 'react'; + +import Image from '@/core/components/elements/Image/Image'; +import Link from '@/core/components/elements/Link/Link'; +import currencyFormat from '@/core/utils/currencyFormat'; +import { sellingProductFormat } from '@/core/utils/formatValue'; +import { createSlug } from '@/core/utils/slug'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import useUtmSource from '~/hooks/useUtmSource'; const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { - const router = useRouter() + const router = useRouter(); + const utmSource = useUtmSource(); const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, manufacture: product.manufacture?.name, - url: createSlug('/shop/product/', product.name, product.id, true) - }) + url: createSlug('/shop/product/', product.name, product.id, true), + }); const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + if (product.image) return product.image + '?ratio=square'; + return '/images/noimage.jpeg'; + }, [product.image]); + + const URL = { + product: + createSlug('/shop/product/', product?.name, product?.id) + + `?utm_source=${utmSource}`, + manufacture: createSlug( + '/shop/brands/', + product?.manufacture?.name, + product?.manufacture.id + ), + }; if (variant == 'vertical') { return (
- + {product?.name} { height={5} /> - {product?.flashSale?.tag != 'false' || product?.flashSale?.tag + {product?.flashSale?.tag != 'false' || + product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'} @@ -75,27 +88,21 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
{product?.manufacture?.name ? ( - + {product.manufacture.name} ) : (
-
)} {product?.name} - {product?.flashSale?.id > 0 && product?.lowestPrice.discountPercentage > 0 ? ( + {product?.flashSale?.id > 0 && + product?.lowestPrice.discountPercentage > 0 ? ( <>
@@ -109,7 +116,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {product?.lowestPrice.priceDiscount > 0 ? ( currencyFormat(product?.lowestPrice.priceDiscount) ) : ( - + Call for Inquiry )} @@ -122,11 +133,17 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {currencyFormat(product?.lowestPrice.price)}
Inc. PPN:{' '} - {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)} + {currencyFormat( + product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN + )}
) : ( - + Call for Inquiry )} @@ -134,7 +151,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )}
- {product?.stockTotal > 0 &&
Ready Stock
} + {product?.stockTotal > 0 && ( +
Ready Stock
+ )} {/*
{product?.stockTotal > 5 ? '> 5' : '< 5'}
*/} {product?.qtySold > 0 && (
@@ -144,17 +163,14 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
- ) + ); } if (variant == 'horizontal') { return (
- + {product?.name} {
)} {product?.manufacture?.name ? ( - + {product.manufacture.name} ) : (
-
)} {product?.name} - {product?.flashSale?.id > 0 && product?.lowestPrice?.discountPercentage > 0 ? ( + {product?.flashSale?.id > 0 && + product?.lowestPrice?.discountPercentage > 0 ? ( <> {product?.lowestPrice.discountPercentage > 0 && (
@@ -220,7 +230,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {product?.lowestPrice?.priceDiscount > 0 ? ( currencyFormat(product?.lowestPrice?.priceDiscount) ) : ( - + Call for Inquiry )} @@ -233,11 +247,17 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {currencyFormat(product?.lowestPrice.price)}
Inc. PPN:{' '} - {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)} + {currencyFormat( + product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN + )}
) : ( - + Call for Inquiry )} @@ -245,7 +265,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )}
- {product?.stockTotal > 0 &&
Ready Stock
} + {product?.stockTotal > 0 && ( +
Ready Stock
+ )} {/*
{product?.stockTotal > 5 ? '> 5' : '< 5'}
*/} {product?.qtySold > 0 && (
@@ -255,8 +277,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
- ) + ); } -} +}; -export default ProductCard +export default ProductCard; -- cgit v1.2.3 From 87bc6b410b875d6f811e21e1e1d6f974e7cac653 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 5 Mar 2024 13:22:30 +0700 Subject: Update background flash sale --- src/lib/product/components/Product/ProductDesktop.jsx | 2 +- src/lib/product/components/Product/ProductMobile.jsx | 2 +- src/lib/product/components/ProductCard.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index a12b8609..444ddd8e 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -235,7 +235,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { {
{
Date: Tue, 5 Mar 2024 14:02:12 +0700 Subject: Update bg flash sale --- src/lib/product/components/Product/ProductMobile.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 50a59655..113a1e42 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -202,9 +202,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
-- cgit v1.2.3 From 7892008931b6c2e4c0f220212aa51b489d79dc86 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 7 Mar 2024 14:51:12 +0700 Subject: add information product in page variant detail --- .../components/Product/ProductDesktopVariant.jsx | 49 +++++++--------------- 1 file changed, 14 insertions(+), 35 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index bae00b87..09b30a44 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -1,3 +1,4 @@ + import { Box, Skeleton, Tooltip } from '@chakra-ui/react'; import { HeartIcon } from '@heroicons/react/24/outline'; import { Info } from 'lucide-react'; @@ -264,41 +265,19 @@ const ProductDesktopVariant = ({
- {/*
-
-
Informasi Produk
-
- {informationTabOptions.map((option) => ( - setInformationTab(option.value)} - > - {option.label} - - ))} -
-
-
- - - - - - Belum ada informasi. - -
-
-
-
*/} +
+

Informasi Produk

+
+

' + ? 'Belum ada deskripsi' + : product.parent.description, + }} + /> +
{product?.isFlashsale > 0 && -- cgit v1.2.3 From 59e4c1cf1b45497bc98cbc13c57e33e1a256a22e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 25 Apr 2024 11:33:09 +0700 Subject: Add side and bottom banner on search --- src/lib/product/components/ProductSearch.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ee4ec2de..08b64c13 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -24,6 +24,9 @@ import ProductFilter from './ProductFilter'; import ProductFilterDesktop from './ProductFilterDesktop'; import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'; +import SideBanner from '~/modules/side-banner'; +import FooterBanner from '~/modules/footer-banner'; + const ProductSearch = ({ query, prefixUrl, @@ -401,6 +404,10 @@ const ProductSearch = ({ prefixUrl={prefixUrl} defaultBrand={defaultBrand} /> + +
+ +
{bannerPromotionHeader && bannerPromotionHeader?.image && ( @@ -552,6 +559,7 @@ const ProductSearch = ({ />
)} +
-- cgit v1.2.3 From d953eb482d003694076af851e750c7226d2d2559 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 5 Jun 2024 13:02:27 +0700 Subject: add Informasi SNI & TKDN --- src/lib/product/components/ProductCard.jsx | 109 +++++++++++++++++++++++++++-- 1 file changed, 102 insertions(+), 7 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 38ed35f8..8dde4dbe 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import ImageNext from 'next/image'; import { useRouter } from 'next/router'; -import { useMemo } from 'react'; +import { useMemo, useEffect, useState } from 'react'; import Image from '@/core/components/elements/Image/Image'; import Link from '@/core/components/elements/Link/Link'; @@ -15,6 +15,47 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const router = useRouter(); const utmSource = useUtmSource(); + const [isSni, setIsSni] = useState(false); + const [isTkdn, setTkdn] = useState(false); + + useEffect(() => { + // Lakukan pemanggilan API untuk memeriksa isSni + const fetchSniData = async () => { + try { + const response = await fetch('URL_API_SNI'); + const data = await response.json(); + if (data && data.sni) { + setIsSni(true); + } else { + setIsSni(false); + } + } catch (error) { + console.error('Error fetching SNI data:', error); + setIsSni(false); + } + }; + + // Lakukan pemanggilan API untuk memeriksa isTkdn + const fetchTkdnData = async () => { + try { + const response = await fetch('URL_API_TKDN'); + const data = await response.json(); + if (data && data.tkdn) { + setTkdn(true); + } else { + setTkdn(false); + } + } catch (error) { + console.error('Error fetching TKDN data:', error); + setTkdn(false); + } + }; + fetchSniData(); + fetchTkdnData(); + return () => { + }; + }, []); + const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, manufacture: product.manufacture?.name, @@ -41,11 +82,39 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { return (
+
{product?.name} +
+
+ {!isSni && ( + + )} +
+
+ {!isTkdn && ( + + )} +
+
+
+ + {router.pathname != '/' && product?.flashSale?.id > 0 && (
@@ -171,11 +240,37 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
- {product?.name} +
+ {product?.name} +
+
+ {!isSni && ( + + )} +
+
+ {!isTkdn && ( + + )} +
+
+
{product.variantTotal > 1 && (
{product.variantTotal} Varian -- cgit v1.2.3 From 87432c8627896711167813654dce2969ce45e643 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 5 Jun 2024 13:11:26 +0700 Subject: add Informasi SNI & TKDN --- src/lib/product/components/ProductCard.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 8dde4dbe..00edc29d 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -90,7 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { />
- {!isSni && ( + {isSni && ( { )}
- {!isTkdn && ( + {isTkdn && ( Date: Wed, 5 Jun 2024 15:24:42 +0700 Subject: add feature SNI-TKDR --- src/lib/product/components/ProductCard.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 00edc29d..8dde4dbe 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -90,7 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { />
- {isSni && ( + {!isSni && ( { )}
- {isTkdn && ( + {!isTkdn && ( Date: Wed, 5 Jun 2024 16:50:38 +0700 Subject: add feature SNI-TKDN --- src/lib/product/components/ProductCard.jsx | 103 +++++++++-------------------- 1 file changed, 32 insertions(+), 71 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 8dde4dbe..48a30b51 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import ImageNext from 'next/image'; import { useRouter } from 'next/router'; -import { useMemo, useEffect, useState } from 'react'; +import { useMemo} from 'react'; import Image from '@/core/components/elements/Image/Image'; import Link from '@/core/components/elements/Link/Link'; @@ -15,46 +15,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const router = useRouter(); const utmSource = useUtmSource(); - const [isSni, setIsSni] = useState(false); - const [isTkdn, setTkdn] = useState(false); - - useEffect(() => { - // Lakukan pemanggilan API untuk memeriksa isSni - const fetchSniData = async () => { - try { - const response = await fetch('URL_API_SNI'); - const data = await response.json(); - if (data && data.sni) { - setIsSni(true); - } else { - setIsSni(false); - } - } catch (error) { - console.error('Error fetching SNI data:', error); - setIsSni(false); - } - }; - - // Lakukan pemanggilan API untuk memeriksa isTkdn - const fetchTkdnData = async () => { - try { - const response = await fetch('URL_API_TKDN'); - const data = await response.json(); - if (data && data.tkdn) { - setTkdn(true); - } else { - setTkdn(false); - } - } catch (error) { - console.error('Error fetching TKDN data:', error); - setTkdn(false); - } - }; - fetchSniData(); - fetchTkdnData(); - return () => { - }; - }, []); + const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, @@ -90,7 +51,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { />
- {!isSni && ( + {product.isSni && ( { )}
- {!isTkdn && ( + {product.isTkdn && ( {
- {product?.name} -
-
- {!isSni && ( - - )} -
-
- {!isTkdn && ( - - )} + {product?.name} +
+
+ {product.isSni && ( + + )} +
+
+ {product.isTkdn && ( + + )} +
-
{product.variantTotal > 1 && (
-- cgit v1.2.3 From f39f03f4d4e59597ffcc73ddb1b108c233842bf8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 5 Jun 2024 17:01:12 +0700 Subject: add feature SNI-TKDN --- src/lib/product/components/ProductCard.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 48a30b51..357f3fd9 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import ImageNext from 'next/image'; import { useRouter } from 'next/router'; -import { useMemo} from 'react'; +import { useMemo, useEffect, useState } from 'react'; import Image from '@/core/components/elements/Image/Image'; import Link from '@/core/components/elements/Link/Link'; @@ -15,7 +15,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const router = useRouter(); const utmSource = useUtmSource(); - const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, -- cgit v1.2.3 From e7ff25b6c0763149981df738ff50871b851bf4a6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 6 Jun 2024 10:07:51 +0700 Subject: add feature SNI-TKDN --- src/lib/product/components/ProductCard.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 357f3fd9..98732407 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -50,7 +50,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { />
- {product.isSni && ( + {product?.isSni && ( { )}
- {product.isTkdn && ( + {product?.isTkdn && ( { />
- {product.isSni && ( + {product?.isSni && ( { )}
- {product.isTkdn && ( + {product?.isTkdn && ( Date: Thu, 13 Jun 2024 09:34:24 +0700 Subject: update promotion-program --- src/lib/product/components/ProductFilterDesktop.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index e4a62abb..b4afebc2 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -21,6 +21,7 @@ import Image from '@/core/components/elements/Image/Image' import { formatCurrency } from '@/core/utils/formatValue' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { + console.log("prefixUrl",prefixUrl) const router = useRouter() const { query } = router const [order, setOrder] = useState(query?.orderBy) @@ -102,7 +103,14 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu } params = _.pickBy(params, _.identity) params = toQuery(params) - router.push(`${prefixUrl}?${params}`) + + const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; + + if (slug) { + router.push(`${prefixUrl}/${slug}?${params}`) + } else { + router.push(`${prefixUrl}?${params}`) + } } -- cgit v1.2.3 From e3e3fe8d87130fcd1872046de0160272b6ea9763 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 14 Jun 2024 15:15:30 +0700 Subject: update promotion-program --- src/lib/product/components/ProductSearch.jsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 08b64c13..ec0077c2 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -130,6 +130,7 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } + console.log("daftar brand",brands) const categories = []; for ( @@ -144,6 +145,7 @@ const ProductSearch = ({ categories.push({ name, qty }); } } + console.log("daftar kategori",categories) const orderOptions = [ { value: 'price-asc', label: 'Harga Terendah' }, -- cgit v1.2.3 From ced37d32aa345fc288483716771422e7b7c0913a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 19 Jun 2024 17:10:24 +0700 Subject: update tampilan promotion program --- .../components/ProductFilterDesktopPromotion.jsx | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/lib/product/components/ProductFilterDesktopPromotion.jsx (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductFilterDesktopPromotion.jsx b/src/lib/product/components/ProductFilterDesktopPromotion.jsx new file mode 100644 index 00000000..332d2374 --- /dev/null +++ b/src/lib/product/components/ProductFilterDesktopPromotion.jsx @@ -0,0 +1,98 @@ +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import _ from 'lodash' +import { toQuery } from 'lodash-contrib' +import { Button } from '@chakra-ui/react' +import { MultiSelect } from 'primereact/multiselect'; + +const ProductFilterDesktop = ({ brands, categories, prefixUrl }) => { + const router = useRouter() + const { query } = router + + const [selectedBrand, setSelectedBrand] = useState(null); + const [selectedCategory, setSelectedCategory] = useState(null); + + const handleSubmit = () => { + let params = { + q: router.query.q, + orderBy: query?.orderBy, + brand: selectedBrand ? selectedBrand.map(b => b.code).join(',') : '', + category: query?.category, + priceFrom: query?.priceFrom, + priceTo: query?.priceTo, + stock: query?.stock + } + params = _.pickBy(params, _.identity) + params = toQuery(params) + + const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; + + if (slug) { + router.push(`${prefixUrl}/${slug}?${params}`) + } else { + router.push(`${prefixUrl}?${params}`) + } + } + + const countryTemplate = (option) => { + return ( +
+
{option.name}
+
+ ); + }; + + const brandOptions = brands.map(brand => ({ + name: `${brand.brand} (${brand.qty})`, + code: brand.brand + })); + + const categoryOptions = categories.map(category => ({ + name: `${category.name} (${category.qty})`, + code: category.name + })); + + const panelFooterTemplate = () => { + return ( + + ); + }; + + return ( +
+
+ + setSelectedBrand(e.value)} + optionLabel="name" + placeholder="Pilih Brand" + itemTemplate={countryTemplate} + panelFooterTemplate={panelFooterTemplate} + className="w-full" + display="chip" + /> +
+ +
+ + setSelectedCategory(e.value)} + optionLabel="name" + placeholder="Pilih Kategori" + itemTemplate={countryTemplate} + panelFooterTemplate={panelFooterTemplate} + className="w-full" + display="chip" + /> +
+
+ ) +} + +export default ProductFilterDesktop -- cgit v1.2.3 From fd96f81bdf1ad6bfe8c7a60571eb9ea70f432ff8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 20 Jun 2024 11:54:11 +0700 Subject: update filter promotion-program --- .../components/ProductFilterDesktopPromotion.jsx | 186 ++++++++++++--------- 1 file changed, 110 insertions(+), 76 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductFilterDesktopPromotion.jsx b/src/lib/product/components/ProductFilterDesktopPromotion.jsx index 332d2374..0815b881 100644 --- a/src/lib/product/components/ProductFilterDesktopPromotion.jsx +++ b/src/lib/product/components/ProductFilterDesktopPromotion.jsx @@ -1,98 +1,132 @@ -import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' -import _ from 'lodash' -import { toQuery } from 'lodash-contrib' -import { Button } from '@chakra-ui/react' -import { MultiSelect } from 'primereact/multiselect'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import _ from 'lodash'; +import { toQuery } from 'lodash-contrib'; +import { Button } from '@chakra-ui/react'; +import { MultiSelect } from 'react-multi-select-component'; const ProductFilterDesktop = ({ brands, categories, prefixUrl }) => { - const router = useRouter() - const { query } = router + const router = useRouter(); + const { query } = router; + const [order, setOrder] = useState(query?.orderBy); + const [brandValues, setBrand] = useState([]); + const [categoryValues, setCategory] = useState([]); + const [priceFrom, setPriceFrom] = useState(query?.priceFrom); + const [priceTo, setPriceTo] = useState(query?.priceTo); + const [stock, setStock] = useState(query?.stock); + const [activeRange, setActiveRange] = useState(null); + const [isBrandDropdownClicked, setIsBrandDropdownClicked] = useState(false); + const [isCategoryDropdownClicked, setIsCategoryDropdownClicked] = useState(false); - const [selectedBrand, setSelectedBrand] = useState(null); - const [selectedCategory, setSelectedCategory] = useState(null); + // Effect to set brandValues from query parameter 'brand' + useEffect(() => { + const brandParam = query?.brand; + if (brandParam) { + const brandsArray = brandParam.split(',').map((b) => ({ + label: b, + value: b, + })); + setBrand(brandsArray); + } + + }, [query.brand]); // Trigger effect whenever query.brand changes + + useEffect(() => { + const categoryParam = query?.category; + if (categoryParam) { + const categoriesArray = categoryParam.split(',').map((c) => ({ + label: c, + value: c, + })); + setCategory(categoriesArray); + } + }, [query.category]); // Trigger effect whenever query.category changes const handleSubmit = () => { let params = { q: router.query.q, - orderBy: query?.orderBy, - brand: selectedBrand ? selectedBrand.map(b => b.code).join(',') : '', - category: query?.category, - priceFrom: query?.priceFrom, - priceTo: query?.priceTo, - stock: query?.stock - } - params = _.pickBy(params, _.identity) - params = toQuery(params) + orderBy: order, + brand: brandValues.map((b) => b.value).join(','), + category: categoryValues.map((c) => c.value).join(','), + priceFrom, + priceTo, + stock: stock, + }; + params = _.pickBy(params, _.identity); + params = toQuery(params); - const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; + const slug = Array.isArray(router.query.slug) + ? router.query.slug[0] + : router.query.slug; if (slug) { - router.push(`${prefixUrl}/${slug}?${params}`) + router.push(`${prefixUrl}/${slug}?${params}`); } else { - router.push(`${prefixUrl}?${params}`) + router.push(`${prefixUrl}?${params}`); } - } - - const countryTemplate = (option) => { - return ( -
-
{option.name}
-
- ); }; - const brandOptions = brands.map(brand => ({ - name: `${brand.brand} (${brand.qty})`, - code: brand.brand - })); - const categoryOptions = categories.map(category => ({ - name: `${category.name} (${category.qty})`, - code: category.name + const brandOptions = brands.map((brand) => ({ + label: `${brand.brand} (${brand.qty})`, + value: brand.brand, })); - const panelFooterTemplate = () => { - return ( - - ); - }; + const categoryOptions = categories.map((category) => ({ + label: `${category.name} (${category.qty})`, + value: category.name, + })); return ( -
-
- - setSelectedBrand(e.value)} - optionLabel="name" - placeholder="Pilih Brand" - itemTemplate={countryTemplate} - panelFooterTemplate={panelFooterTemplate} - className="w-full" - display="chip" - /> -
+ <> +
+ {/* Brand MultiSelect */} +
+
+ +
+ setIsBrandDropdownClicked(isOpen)} + hasSelectAll={false} + /> +
+
+
+ + {/* Category MultiSelect */} +
+
+ +
+ + setIsCategoryDropdownClicked(!isCategoryDropdownClicked) + } + hasSelectAll={false} + /> +
+
+
-
- - setSelectedCategory(e.value)} - optionLabel="name" - placeholder="Pilih Kategori" - itemTemplate={countryTemplate} - panelFooterTemplate={panelFooterTemplate} - className="w-full" - display="chip" - /> + {/* Apply Button */} +
+
+ +
+
-
- ) -} + + ); +}; -export default ProductFilterDesktop +export default ProductFilterDesktop; -- cgit v1.2.3 From 936f7f9fb1c6951e02dd8a5f7e85fb8d39cc7e6a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 28 Jun 2024 10:23:57 +0700 Subject: delete console.log --- src/lib/product/components/ProductFilterDesktop.jsx | 2 +- src/lib/product/components/ProductSearch.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/lib/product') diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index b4afebc2..a8073036 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -21,7 +21,7 @@ import Image from '@/core/components/elements/Image/Image' import { formatCurrency } from '@/core/utils/formatValue' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { - console.log("prefixUrl",prefixUrl) + const router = useRouter() const { query } = router const [order, setOrder] = useState(query?.orderBy) diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ec0077c2..b1a5d409 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -130,7 +130,7 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } - console.log("daftar brand",brands) + const categories = []; for ( @@ -145,7 +145,7 @@ const ProductSearch = ({ categories.push({ name, qty }); } } - console.log("daftar kategori",categories) + const orderOptions = [ { value: 'price-asc', label: 'Harga Terendah' }, -- cgit v1.2.3