diff options
Diffstat (limited to 'src-migrate/modules')
| -rw-r--r-- | src-migrate/modules/promo/components/FlashSale.tsx | 21 | ||||
| -rw-r--r-- | src-migrate/modules/promo/components/PromoList.jsx | 98 | ||||
| -rw-r--r-- | src-migrate/modules/promo/components/PromotinProgram.jsx | 2 |
3 files changed, 105 insertions, 16 deletions
diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx new file mode 100644 index 00000000..dac0365c --- /dev/null +++ b/src-migrate/modules/promo/components/FlashSale.tsx @@ -0,0 +1,21 @@ +import dynamic from "next/dynamic"; +import React from "react"; +import { FlashSaleSkeleton } from "@/lib/flashSale/skeleton/FlashSaleSkeleton"; + +const FlashSale = dynamic( + () => import('@/lib/flashSale/components/FlashSale'), + { + loading: () => <FlashSaleSkeleton />, + } + ); + + const FlashSalePromo = ()=> { + return( + <> + <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>Bayar Setengahnya!</h1> + <FlashSale/> + </> + ) + } + + export default FlashSalePromo
\ No newline at end of file diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx index ed758fbc..fb4b6ee3 100644 --- a/src-migrate/modules/promo/components/PromoList.jsx +++ b/src-migrate/modules/promo/components/PromoList.jsx @@ -1,24 +1,92 @@ -import Image from 'next/image'; -import Link from '@/core/components/elements/Link/Link'; -import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card' +import React, { useState, useEffect } from 'react'; +import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'; +import { fetchPromoItemsSolr } from '../../../../src/api/promoApi'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import useDevice from '@/core/hooks/useDevice'; +import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner' const PromoList = ({ selectedPromo }) => { - let title = ''; - - if (selectedPromo === 'Bundling') { - title = 'Kombinasi Kilat Pilihan Kami!'; - } else if (selectedPromo === 'Loading') { - title = 'Belanja Borong Pilihan Kami!'; - } else if (selectedPromo === 'Merchandise') { - title = 'Gratis Merchandise Spesial Indoteknik'; - } + const [title, setTitle] = useState(''); + const [slug, setSlug] = useState(''); + const [promoItems, setPromoItems] = useState([]); + const [promoData, setPromoData] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const { isMobile } = useDevice(); + + useEffect(() => { + if (selectedPromo === 'Bundling') { + setTitle('Kombinasi Kilat Pilihan Kami!'); + setSlug('bundling'); + } else if (selectedPromo === 'Loading') { + setTitle('Belanja Borong Pilihan Kami!'); + setSlug('discount_loading'); + } else if (selectedPromo === 'Merchandise') { + setTitle('Gratis Merchandise Spesial Indoteknik'); + setSlug('merchandise'); + } + }, [selectedPromo]); + + useEffect(() => { + const fetchPromotions = async () => { + setIsLoading(true); + try { + const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 50); + setPromoItems(items); + + console.log("selectedPromo",selectedPromo) + console.log("slug",slug) + console.log("items",items) + console.log("promoItems",promoItems) + + const promoDataPromises = items.map(async (item) => { + try { + const response = await fetchPromoItemsSolr(`id:${item.id}`, 0, 10); + return response; + } catch (fetchError) { + return []; + } + }); + + const promoDataArray = await Promise.all(promoDataPromises); + const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); + setPromoData(mergedPromoData); + } catch (error) { + console.error('Error fetching promo items:', error); + } finally { + setIsLoading(false); + } + }; + + if (slug) { + setIsLoading(true); + // Reset the promoItems and promoData when slug changes + setPromoItems([]); + setPromoData([]); + fetchPromotions(); + } + }, [slug]); return ( <div> - <h1 className='text-h-sm md:text-h-lg font-semibold mb-4'>{title}</h1> - <div>DISINI CARD {selectedPromo}</div> + <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1> + {isLoading ? ( + <div className="loading-spinner flex justify-center"> + <LogoSpinner width={48} height={48} /> + </div> + ) : ( + + <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode> + {promoData?.map((promotion) => ( + <SwiperSlide key={promotion.id}> + <div className="min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]"> + <ProductPromoCard promotion={promotion} /> + </div> + </SwiperSlide> + ))} + </Swiper> + )} </div> ); -} +}; export default PromoList; diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx index a7e5dfef..13a8405b 100644 --- a/src-migrate/modules/promo/components/PromotinProgram.jsx +++ b/src-migrate/modules/promo/components/PromotinProgram.jsx @@ -5,7 +5,7 @@ import { InfoIcon } from "lucide-react" const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { return ( <> - <div className="text-h-sm md:text-h-lg font-semibold mb-4">Serba Serbi Promo</div> + <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div> <div className='px-4 sm:px-0'> <div className='grid md:grid-cols-3 grid-cols-2 justify-between gap-2 items-center'> <div className='w-full'> |