handling cart

2 files changed, 48 insertions, 18 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 31aa034d..a9113e75 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,15 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { addCart, deleteItemCart, getCart, getCartApi, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
+import {
+  addCart,
+  deleteItemCart,
+  getCart,
+  getCartApi,
+  getCartnew,
+  getItemCart,
+  updateItemCart
+} from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -18,6 +26,7 @@ import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const Cart = () => {
   const router = useRouter()
@@ -25,8 +34,7 @@ const Cart = () => {
   const [isLoading, setIsLoading] = useState(true)
   const auth = useAuth()
 
-
-  const [cart, setCart]  = useState(null)
+  const [cart, setCart] = useState(null)
 
   useEffect(() => {
     if (!auth) return
@@ -38,16 +46,15 @@ const Cart = () => {
       setCart(listCart)
     }
     cart()
-  })
+  },[])
 
   useEffect(() => {
-    if(cart){
+    if (cart) {
       setProducts(cart.products)
       setIsLoading(false)
     }
   }, [cart])
 
-
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
   const [totalTaxAmount, setTotalTaxAmount] = useState(0)
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
@@ -56,7 +63,6 @@ const Cart = () => {
 
   const [productRecomendation, setProductRecomendation] = useState(null)
 
-
   useEffect(() => {
     if (!products) return
 
@@ -116,7 +122,7 @@ const Cart = () => {
     }
     let qty = quantity
     productsToUpdate[productIndex].quantity = qty
-    
+
     setProducts([...productsToUpdate])
     addCart(productId, qty, productsToUpdate[productIndex].selected)
   }
@@ -128,8 +134,7 @@ const Cart = () => {
     let productsToUpdate = products
     let isSelected = !productsToUpdate[productIndex].selected
     productsToUpdate[productIndex].selected = isSelected
-    
-    
+
     setProducts([...productsToUpdate])
     addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
   }
@@ -332,8 +337,8 @@ const Cart = () => {
                 {isLoading && (
                   <tr>
                     <td colSpan={6}>
-                      <div className='flex justify-center my-2'>
-                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      <div className='container flex justify-center my-4'>
+                        <LogoSpinner width={48} height={48} />
                       </div>
                     </td>
                   </tr>
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index a6382cb1..8c31cf0d 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -47,6 +47,20 @@ const PromotionType = ({ isModal = false }) => {
       type: 'Promo Bundling'
     },
     {
+      id: 7,
+      title: 'Promo 5',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg',
+      type: 'Promo Bundling'
+    },
+    {
+      id: 8,
+      title: 'Promo 5',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg',
+      type: 'Promo Bundling'
+    },
+    {
       id: 6,
       title: 'Promo 6',
       description: 'Deskripsi Promo 3',
@@ -76,12 +90,12 @@ const PromotionType = ({ isModal = false }) => {
   }
 
   const handlePopUp = () => {
-    if(isModal == false){
+    if (isModal == false) {
       setPromotionType(true)
     }
   }
   return (
-    <div className='h-[50%]'>
+    <div className='h-[50%] relative'>
       <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
         <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
         <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
@@ -144,9 +158,15 @@ const PromotionType = ({ isModal = false }) => {
                       </div>
                       <p className='text-justify text-gray-500 line-clamp-3'>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
-                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem ada lah ini ditu kamu dia merek
+                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem
+                        ada lah ini ditu kamu dia merek
                       </p>
-                      <div className='text-danger-500 font-semibold mb-1 mt-2'>Rp. 999.000</div>
+                      <div className='flex justify-between mt-3'>
+                        <div className='text-danger-500 font-semibold '>Rp. 999.000</div>
+                        <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
+                          <div className='bg-yellow-500 h-5 rounded-full w-[90%]'> <span className='text-black ml-1'>+999 Produk Terjual</span></div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -157,7 +177,7 @@ const PromotionType = ({ isModal = false }) => {
             if (index > 2) {
               return null
             } else {
-              if (index === 2) {
+              if (index === 2 && promos.length > 2) {
                 return (
                   <>
                     <div
@@ -205,8 +225,13 @@ const PromotionType = ({ isModal = false }) => {
                       </div>
                       <div className='p-2'>
                         <div className='badge-yellow  text-black mb-1'>{promo.title}</div>
-                        <p className='text-justify line-clamp-2'>Lorem ipsum dolor sit amet, consectetur ...</p>
+                        <p className='text-justify line-clamp-2'>
+                          Lorem ipsum dolor sit amet, consectetur ...
+                        </p>
                         <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
+                        <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
+                          <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                        </div>
                         <div>
                           <CountDown2 initialTime={360}></CountDown2>
                         </div>