diff options
| author | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-05-08 16:44:09 +0700 |
|---|---|---|
| committer | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-05-08 16:44:09 +0700 |
| commit | 486f85a45fc7e0669576f59824a31be472ed25bb (patch) | |
| tree | 0268afa8efe48746e040611ba41ad2cafda7ad08 /src/lib/flashSale/components/FlashSale.jsx | |
| parent | cff198277e14450f8d20d9e18548325e6f277682 (diff) | |
| parent | 30fc50600009ca54f085d594d838803c107e87f2 (diff) | |
Merge branch 'master' into development_tri/implementasi_raja_ongkir
# Conflicts:
# src/lib/checkout/components/Checkout.jsx
Diffstat (limited to 'src/lib/flashSale/components/FlashSale.jsx')
| -rw-r--r-- | src/lib/flashSale/components/FlashSale.jsx | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx new file mode 100644 index 00000000..e4a4a25c --- /dev/null +++ b/src/lib/flashSale/components/FlashSale.jsx @@ -0,0 +1,66 @@ +import { useEffect, useState } from 'react' +import flashSaleApi from '../api/flashSaleApi' +import Image from '@/core/components/elements/Image/Image' +import CountDown from '@/core/components/elements/CountDown/CountDown' +import productSearchApi from '@/lib/product/api/productSearchApi' +import ProductSlider from '@/lib/product/components/ProductSlider' + +const FlashSale = () => { + const [flashSales, setFlashSales] = useState(null) + + useEffect(() => { + const loadFlashSales = async () => { + const dataFlashSales = await flashSaleApi() + setFlashSales(dataFlashSales) + } + loadFlashSales() + }, []) + + return ( + flashSales?.length > 0 && ( + <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8'> + {flashSales.map((flashSale, index) => ( + <div key={index}> + <div className='flex gap-x-3 mb-4 justify-between sm:justify-start'> + <div className='font-medium sm:text-h-lg mt-1.5'>{flashSale.name}</div> + <CountDown initialTime={flashSale.duration} /> + </div> + + <div className='relative'> + <Image + src={flashSale.banner} + alt={flashSale.name} + className='w-full rounded mb-4 hidden sm:block' + /> + <Image + src={flashSale.bannerMobile} + alt={flashSale.name} + className='w-full rounded mb-4 block sm:hidden' + /> + <FlashSaleProduct flashSaleId={flashSale.pricelistId} /> + </div> + </div> + ))} + </div> + ) + ) +} + +const FlashSaleProduct = ({ flashSaleId }) => { + const [products, setProducts] = useState(null) + + useEffect(() => { + const loadProducts = async () => { + const dataProducts = await productSearchApi({ + query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500`, + operation: 'AND' + }) + setProducts(dataProducts.response) + } + loadProducts() + }, [flashSaleId]) + + return <ProductSlider products={products} /> +} + +export default FlashSale |
