flash sale

3 files changed, 40 insertions, 4 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 7e1d0d3b..e13e2ab1 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -18,8 +18,10 @@ import odooApi from '@/core/api/odooApi'
 import { Button, Spinner } from 'flowbite-react'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
+import ImageNext from 'next/image'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
+  console.log('ini product', products)
   const router = useRouter()
   const auth = useAuth()
   const { slug } = router.query
@@ -96,7 +98,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       router.push(`/login?next=/shop/product/${slug}`)
       return
     }
-    
+
     const quantity = variantQuantityRefs.current[variantId].value
 
     if (!validQuantity(quantity)) return
@@ -142,7 +144,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   useEffect(() => {
     const loadProductSimilarInBrand = async () => {
       const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
-      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
+      const source = 'right'
+      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery, source })
       setProductSimilarInBrand(dataProductSimilar.products)
     }
     if (!productSimilarInBrand) loadProductSimilarInBrand()
@@ -170,7 +173,22 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       <div className='container mx-auto pt-10'>
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
-            <div className='w-5/12'>
+            <div className='w-5/12 relative'>
+              <div className='absolute bottom-0 bg-red-600 w-full'>
+                <div className='flex gap-x-2 items-center p-2'>
+                  <div className='bg-yellow-400 rounded-full p-1 h-10 w-14 flex items-center justify-center '>
+                    <span className='text-lg font-bold'>40%</span>
+                  </div>
+                  <div className='bg-red-600 border border-solid border-yellow-400 rounded-full h-10 p-2 flex w-[50%] items-center justify-center gap-x-4'>
+                    <ImageNext
+                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      width={20}
+                      height={10}
+                    />
+                    <span className='text-white text-lg font-semibold'>FLASH SALE</span>
+                  </div>
+                </div>
+              </div>
               <Image
                 src={product.image}
                 alt={product.name}
@@ -375,6 +393,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 <div className='text-gray_r-11 line-through text-caption-1'>
                   {currencyFormat(lowestPrice?.price)}
                 </div>
+                {product.flashSale.remainingTime > 0 && (
+                  <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+                    <ImageNext
+                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      width={15}
+                      height={10}
+                    />
+                    <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+                  </div>
+                )}
               </div>
             )}
             <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a8964310..c85a76e9 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -3,6 +3,7 @@ import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import ImageNext from 'next/image'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const callForPriceWhatsapp = whatsappUrl('product', {
@@ -101,6 +102,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           </Link>
         </div>
         <div className='w-8/12 p-2'>
+          {product.flashSale.id > 0 && (
+            <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+              <ImageNext src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' width={15} height={10} />
+              <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+            </div>
+          )}
           {product?.manufacture?.name ? (
             <Link
               href={createSlug(
diff --git a/src/lib/product/components/ProductSimilar.jsx b/src/lib/product/components/ProductSimilar.jsx
index 63a33089..1b82c2e5 100644
--- a/src/lib/product/components/ProductSimilar.jsx
+++ b/src/lib/product/components/ProductSimilar.jsx
@@ -3,7 +3,8 @@ import useProductSimilar from '../hooks/useProductSimilar'
 import ProductSlider from './ProductSlider'
 
 const ProductSimilar = ({ query }) => {
-  const { productSimilar } = useProductSimilar({ query })
+  const source = "bottom"
+  const { productSimilar } = useProductSimilar({ query, source })
 
   if (productSimilar.isLoading) {
     return <PopularProductSkeleton />