From 0a87455727114468c216fbcd74266ea928eaec37 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 13 Jun 2024 09:34:24 +0700 Subject: update promotion-program --- .../modules/product-promo/components/Card.tsx | 6 +- .../product/components/ProductFilterDesktop.jsx | 10 +- src/pages/shop/promo/[slug].tsx | 243 +++++++++++++-------- 3 files changed, 165 insertions(+), 94 deletions(-) diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx index 0be27af2..e927508f 100644 --- a/src-migrate/modules/product-promo/components/Card.tsx +++ b/src-migrate/modules/product-promo/components/Card.tsx @@ -18,10 +18,10 @@ import ProductPromoCardCountdown from "./CardCountdown" type Props = { promotion: IPromotion - slug?: string + } -const ProductPromoCard = ({ promotion, slug }: Props) => { +const ProductPromoCard = ({ promotion}: Props) => { const [products, setProducts] = useState([]) const [freeProducts, setFreeProducts] = useState([]) const [error, setError] = useState(null) @@ -74,7 +74,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => { const allProducts = [...products, ...freeProducts] - const shouldRender = !slug || promotion.type.value === slug + return ( // shouldRender && ( 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}`) + } } diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx index a2b790ca..1935c61f 100644 --- a/src/pages/shop/promo/[slug].tsx +++ b/src/pages/shop/promo/[slug].tsx @@ -3,21 +3,26 @@ import { useEffect, useState } from 'react' import { useRouter } from 'next/router' import Seo from '../../../core/components/Seo' import Promocrumb from '../../../lib/promo/components/Promocrumb' -import { fetchPromoItemsSolr } from '../../../api/promoApi' +import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi' import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card' import { IPromotion } from '../../../../src-migrate/types/promotion' import React from 'react' import { SolrResponse } from "../../../../src-migrate/types/solr.ts"; -import { Swiper, SwiperSlide } from 'swiper/react'; +import DesktopView from '../../../core/components/views/DesktopView'; import 'swiper/swiper-bundle.css'; import useDevice from '../../../core/hooks/useDevice' +import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktop'; +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' const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout')) export default function PromoDetail() { const router = useRouter() - const { slug = '' } = router.query + const { slug = '', brand, category } = router.query const [promoItems, setPromoItems] = useState([]) const [promoData, setPromoData] = useState(null) const [currentPage, setCurrentPage] = useState(1); @@ -25,42 +30,95 @@ export default function PromoDetail() { const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = Math.min(startIndex + itemsPerPage, promoData?.length || 0); const [loading, setLoading] = useState(true); - const [fetchingData, setFetchingData] = useState(false) const { isMobile, isDesktop } = useDevice() + const [brands, setBrands] = useState([]); + const [categories, setCategories] = useState([]); + + interface Brand { + brand: string; + qty: number; + } + + interface Category { + name: string; + qty: number; + } useEffect(() => { const loadPromo = async () => { + setLoading(true); + const brandsData: Brand[] = []; + const categoriesData: Category[] = []; + + try { const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`) - console.log("slug sekarang ", slug) - setPromoItems(items) - console.log("data dari promotion pakai SOLR", items) - + if (items.length === 0) { setPromoData([]) setLoading(false); return; - } - - const promoDataPromises = items.map(async (item) => { - const queryParams = new URLSearchParams({ q: `id:${item.id}` }) - console.log("Constructed URL:", `/solr/promotion_program_lines/select?${queryParams.toString()}`) + } + + const promoDataPromises = items.map(async (item) => { + // const queryParams = new URLSearchParams({ q: `id:${item.id}` }) + console.log("produk id",item.product_id) + + try { + if(brand && category){ + const response = await fetchVariantSolr(`id:${item.product_id} && manufacture_name_s:${brand} && category_name :${category}`); + const product = response.response.docs[0]; + const product_id = product.id + console.log("data brand ",brand) + console.log("data respon varian ",product) + console.log("data ID respon varian ",product_id) + const response2 = await fetchPromoItemsSolr( `type_value_s:${Array.isArray(slug) ? slug[0] : slug} && product_ids:${product_id}`) + console.log("data response2 ",response2) + return response2; + }else if(brand){ // belum bisa menangani lebih dari 1 brand + const response = await fetchVariantSolr(`id:${item.product_id} && manufacture_name_s:${brand}`); + const product = response.response.docs[0]; + const product_id = product.id + console.log("data brand ",brand) + console.log("data respon varian ",product) + console.log("data ID respon varian ",product_id) + const response2 = await fetchPromoItemsSolr( `type_value_s:${Array.isArray(slug) ? slug[0] : slug} && product_ids:${product_id}`) + console.log("data response2 ",response2) + return response2; + }else if (category){ // belum bisa menangani lebih dari 1 category + const response = await fetchVariantSolr(`id:${item.product_id} && category_name :${category}`); + const product = response.response.docs[0]; + const product_id = product.id + console.log("data brand ",brand) + console.log("data respon varian ",product) + console.log("data ID respon varian ",product_id) + const response2 = await fetchPromoItemsSolr( `type_value_s:${Array.isArray(slug) ? slug[0] : slug} && product_ids:${product_id}`) + return response2; + }else{ + const response = await fetchPromoItemsSolr( `id:${item.id}`) + console.log("data respon",response) + return response; + } + // if(brand || category){ + // let query = `id:${item.product_id}`; + // if (brand) query += ` OR manufacture_name_s:${brand}`; + // if (category) query += ` OR category_name:${category}`; + // const response = await fetchVariantSolr(query); + // const product = response.response.docs[0]; + // const product_id = product.id + // const response2 = await fetchPromoItemsSolr( `type_value_s:${Array.isArray(slug) ? slug[0] : slug} && product_ids:${product_id}`) + // return response2; - try { - const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}`) - console.log("respon data ", response) - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`) - } + // }else{ + // const response = await fetchPromoItemsSolr( `id:${item.id}`) + // console.log("data respon",response) + // return response; + // } - const data: SolrResponse = await response.json() - console.log("data promo IPromotion[]", data) - - const promotions = await map(data.response.docs) - return promotions; + } catch (fetchError) { - console.error("Error fetching promotion data:", fetchError) + // console.error("Error fetching promotion data:", fetchError) return []; } }); @@ -68,7 +126,61 @@ export default function PromoDetail() { const promoDataArray = await Promise.all(promoDataPromises); const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); setPromoData(mergedPromoData); - setTimeout(() => setLoading(false), 120); // Menambahkan delay 120ms sebelum mengubah status loading + + const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => { + if (promoData) { + const dataBrandCategory = promoData.map(async (item) => { + // const response = await fetch(`/solr/variants/select?${queryParams2.toString()}`); + let response; + if(category){ + // response = await fetchVariantSolr(`id:${item.products[0].product_id} && manufacture_name_s:${brand}`); + response = await fetchVariantSolr(`id:${item.products[0].product_id} && category_name:${category}`); + }else{ + response = await fetchVariantSolr(`id:${item.products[0].product_id}`) + } + + + if (response.response?.docs?.length > 0) { + const product = response.response.docs[0]; + const manufactureNameS = product.manufacture_name; + if (Array.isArray(manufactureNameS)) { + for (let i = 0; i < manufactureNameS.length; i += 2) { + const brand = manufactureNameS[i]; + const qty = 1; + const existingBrandIndex = brandsData.findIndex(b => b.brand === brand); + if (existingBrandIndex !== -1) { + brandsData[existingBrandIndex].qty += qty; + } else { + brandsData.push({ brand, qty }); + } + } + } + + const categoryNameS = product.category_name; + if (Array.isArray(categoryNameS)) { + for (let i = 0; i < categoryNameS.length; i += 2) { + const name = categoryNameS[i]; + const qty = 1; + const existingCategoryIndex = categoriesData.findIndex(c => c.name === name); + if (existingCategoryIndex !== -1) { + categoriesData[existingCategoryIndex].qty += qty; + } else { + categoriesData.push({ name, qty }); + } + } + } + } + }); + + return Promise.all(dataBrandCategory); + } + }); + + await Promise.all(dataBrandCategoryPromises); + setBrands(brandsData); + setCategories(categoriesData); + setLoading(false); + } catch (loadError) { console.error("Error loading promo items:", loadError) setLoading(false); @@ -80,13 +192,9 @@ export default function PromoDetail() { } }, [slug]) - useEffect(() => { - window.scrollTo({ top: 0, behavior: 'auto' }); // Auto scroll to top when component mounts or updates - }, []); // Run only once when component mounts - const map = async (promotions: any[]): Promise => { const result: IPromotion[] = [] - + for (const promotion of promotions) { const data: IPromotion = { id: promotion.id, @@ -104,67 +212,22 @@ export default function PromoDetail() { products: JSON.parse(promotion.products_s), free_products: JSON.parse(promotion.free_products_s), } - + result.push(data) } - + return result } - console.log("data yg dikirim ke ProductPromoCard", promoData) function capitalizeFirstLetter(string) { - // Ganti semua tanda _ dengan spasi string = string.replace(/_/g, ' '); - - // Kapitalisasi huruf pertama setelah spasi atau awal string return string.replace(/(^\w|\s\w)/g, function(match) { return match.toUpperCase(); }); } - useEffect(() => { - const handleScroll = () => { - if ( - !fetchingData && - window.innerHeight + document.documentElement.scrollTop >= 0.95 * document.documentElement.offsetHeight - ) { - // User has scrolled to 95% of page height - - setTimeout(() => setFetchingData(true), 120); - setCurrentPage((prevPage) => prevPage + 1) - } - } - - window.addEventListener('scroll', handleScroll) - return () => window.removeEventListener('scroll', handleScroll) - }, [fetchingData]) - - useEffect(() => { - if (fetchingData) { - // Fetch more data - // You may need to adjust this logic according to your API - fetchMoreData() - } - }, [fetchingData]) - - const fetchMoreData = async () => { - try { - // Add a delay of approximately 150ms - setTimeout(async () => { - // Fetch more data - // Update promoData state with the new data - }, 150) - } catch (error) { - console.error('Error fetching more data:', error) - } finally { - setTimeout(() => setFetchingData(false), 120); - - } - } - - const visiblePromotions = promoData?.slice(0, currentPage * 12) - + const isNotReadyStockPage = router.asPath !== '/shop/promo?orderBy=stock'; return ( - + {loading ? (
) : promoData && promoItems.length >= 1 ? ( <> - -
+
{visiblePromotions?.map((promotion) => ( - -
- -
- +
+ +
))} -
- ) : (
@@ -199,4 +262,4 @@ export default function PromoDetail() { )} ) -} \ No newline at end of file +} -- cgit v1.2.3