<iman> update promotion-program

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<IProductVariantPromo[]>([])
   const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
   const [error, setError] = useState<string | null>(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<any[]>([])
   const [promoData, setPromoData] = useState<IPromotion[] | null>(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<Brand[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  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<any[]> = 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<IPromotion[]> => {
     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 (
     <BasicLayout>
       <Seo
@@ -172,25 +235,25 @@ export default function PromoDetail() {
         description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
       />
       <Promocrumb brandName={capitalizeFirstLetter(Array.isArray(slug) ? slug[0] : slug)} /> 
-
+      <ProductFilterDesktop
+              brands={brands || []}
+              categories={categories || []}  
+              prefixUrl={'/shop/promo'}
+              defaultBrand={null}
+            />
       {loading ? (
         <div className='container flex justify-center my-4'>
           <LogoSpinner width={48} height={48} />
         </div>
       ) : promoData && promoItems.length >= 1 ? (
         <>
-          <Swiper slidesPerView={isMobile? 1:4.7} spaceBetween={10} freeMode={true}>
-            <div className=' relative bg-slate-900'>
+          <div className=''>
             {visiblePromotions?.map((promotion) => (
-              <SwiperSlide className='' key={promotion.id}>
-                <div 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>
-              </SwiperSlide>
+              <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>
-          </Swiper>
         </>
       ) : (
         <div className="text-center my-8">
@@ -199,4 +262,4 @@ export default function PromoDetail() {
       )}
     </BasicLayout>
   )
-}
\ No newline at end of file
+}