diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/cart/components/Cart.jsx | 29 | ||||
| -rw-r--r-- | src/lib/promotinProgram/components/PromotionType.jsx | 37 |
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> |