diff options
Diffstat (limited to 'src/lib/cart/components')
| -rw-r--r-- | src/lib/cart/components/Cart.jsx | 257 | ||||
| -rw-r--r-- | src/lib/cart/components/Cartheader.jsx | 2 |
2 files changed, 7 insertions, 252 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index b5976a1b..c6aaa596 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -23,6 +23,8 @@ import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagBeginCheckout } from '@/core/utils/googleTag' import { useProductCartContext } from '@/contexts/ProductCartContext' +import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList' +// import cardProdcuctsList from '@/core/components/elements/Product/cartProductsList' const Cart = () => { const router = useRouter() @@ -32,7 +34,7 @@ const Cart = () => { const [cart, setCart] = useState(null) - const {setRefreshCart} = useProductCartContext() + const { setRefreshCart } = useProductCartContext() useEffect(() => { if (!auth) return @@ -115,7 +117,7 @@ const Cart = () => { selected: true }).then(() => { getCart().then(() => { - if(promotionActiveId){ + if (promotionActiveId) { setPromotionType(false) } }) @@ -438,7 +440,7 @@ const Cart = () => { product.program.items && product.program.items.map((item) => ( <div key={item.id} className='flex mx-4 relative'> - <ComponentCanBuy canBuy={product.canBuy} /> + <ComponentCanBuy canBuy={product.canBuy} /> <input className='mr-2 accent-danger-500 w-4' /> <Link href={createSlug( @@ -530,254 +532,7 @@ const Cart = () => { <div className='col-span-9 border border-gray_r-6 rounded bg-white p-4 pt-6'> <h1 className='text-title-sm font-semibold mb-6'>Keranjang</h1> - <table className='table-cart'> - <thead> - <tr> - <th colSpan={2}>Nama Produk</th> - <th>Jumlah</th> - <th>Harga</th> - <th>Subtotal</th> - <th>Action</th> - </tr> - </thead> - <tbody> - {isLoading && ( - <tr> - <td colSpan={6}> - <div className='container flex justify-center my-4'> - <LogoSpinner width={48} height={48} /> - </div> - </td> - </tr> - )} - {!isLoading && (!products || products?.length == 0) && ( - <tr> - <td colSpan={6}>Keranjang belanja anda masih kosong</td> - </tr> - )} - {products && - products?.map((product) => ( - <> - {product.hasProgram && ( - <tr className='!border-b-0 pb-0'> - <td colSpan={6}> - <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'> - {product.program ? ( - <> - <div className='flex border border-solid border-red-600 rounded-md p-1'> - <span className='text-red-600'> - {product.program.type.label} - </span> - </div> - <div className='flex'> - {product.program.type.value == 'merchandise' ? ( - <>Selamat anda mendapatkan merchandise indoteknik.com</> - ) : ( - <> - Selamat! Pembelian anda lebih hemat - <span className='text-red-600 font-semibold ml-2'> - {' '} - {currencyFormat(product.program?.totalSavings)} - </span> - </> - )} - </div> - </> - ) : ( - <> - <div className='flex border border-solid border-red-600 rounded-md p-1'> - <span className='text-red-600'>Promo</span> - </div> - <div className='flex'> - Pilih Promo Yang Tersedia Bisa lebih Hemat - </div> - </> - )} - <div - onClick={() => - handlePopUpPromo( - product.id, - product.quantity, - product.program?.id - ) - } - className='ml-auto text-red-500 flex gap-x-1 cursor-pointer' - > - <div className='font-semibold'> Cek Promo</div> - <div> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - viewBox='0 0 20 24' - className='h-5 w-5 font-semibold' - > - <path - d='M8.25 4.5l7.5 7.5-7.5 7.5' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </div> - </div> - </td> - </tr> - )} - <tr - key={product.id} - className={`${product.hasProgram ? '!border-t-0 !border-b-0' : ''}`} - > - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <input - type='checkbox' - onClick={() => toggleSelected(product.id)} - checked={product?.selected} - className='accent-danger-500 w-4' - /> - </td> - <td className='flex relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <Link - href={createSlug( - '/shop/product/', - product?.parent.name, - product?.parent.id - )} - className='w-[20%] flex-shrink-0' - > - <Image - src={product?.parent?.image} - alt={product?.name} - className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md' - /> - </Link> - <div className='px-2 text-left'> - <Link - href={createSlug( - '/shop/product/', - product?.parent.name, - product?.parent.id - )} - className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' - > - {product?.parent?.name} - </Link> - <div className='text-gray_r-11 mt-2'> - {product?.code}{' '} - {product?.attributes.length > 0 - ? `| ${product?.attributes.join(', ')}` - : ''} - </div> - </div> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <input - className='form-input w-16 py-2 text-center bg-gray_r-1' - type='number' - value={product?.quantity} - onChange={(e) => updateQuantity(e.target.value, product?.id)} - onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} - /> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - {product?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center justify-center mt-3'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(product?.price?.price)} - </div> - <div className='badge-solid-red'> - {product?.price?.discountPercentage}% - </div> - </div> - )} - <div className='font-normal mt-1'> - {currencyFormat(product?.price?.priceDiscount)} - </div> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <div className='text-danger-500 font-medium'> - {currencyFormat(product?.price?.priceDiscount * product?.quantity)} - </div> - </td> - <td> - <div className='flex justify-center items-center h-full'> - <button - className='btn-red p-1 ml-1' - onClick={() => setDeleteConfirmation(product)} - > - <TrashIcon className='w-4' /> - </button> - </div> - </td> - </tr> - {product?.program?.items && ( - <tr key={product.program.id} className='!border-t-0'> - {product.program.items.map((item) => ( - <> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - </td> - <td className='flex relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <div className='w-[20%] flex-shrink-0'> - <Image - src={item.parent.image} - alt={item.name} - className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md' - /> - </div> - <div className='px-2 text-left'> - <div className=''> - <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'> - {product.program.type.label} - </span> - </div> - <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div> - </div> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <input - className='form-input w-16 py-2 text-center bg-gray_r-1' - type='number' - value={1} - disabled - /> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - {item?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center justify-center mt-3'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(product?.price?.price)} - </div> - </div> - )} - <div className='font-normal mt-1'> - {item?.price.priceDiscount > 0 ? 'Gratis' : ''} - </div> - </td> - <td className='relative'> - <ComponentCanBuy canBuy={product.canBuy} /> - <div className='text-danger-500 font-medium'> - {item.price.priceDiscount > 0 ? 'Gratis' : ''} - </div> - </td> - <td></td> - </> - ))} - </tr> - )} - </> - ))} - </tbody> - </table> + <CardProdcuctsList isLoading={isLoading} products={products} source='cart' handlePopUpPromo ={handlePopUpPromo} toggleSelected ={toggleSelected} updateQuantity ={updateQuantity} setDeleteConfirmation ={setDeleteConfirmation}/> <div className='pt-2 pb-6 flex items-center gap-x-3'> <NextImage diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx index cbe7c7e1..901b1501 100644 --- a/src/lib/cart/components/Cartheader.jsx +++ b/src/lib/cart/components/Cartheader.jsx @@ -204,7 +204,7 @@ const Cardheader = (cartCount) => { </p> </Link> - {product?.price?.discountPercentage > 0 && ( + {product?.hasFlashsale && ( <div className='flex gap-x-1 items-center mb-2 mt-1'> <div className='badge-solid-red'> {product?.price?.discountPercentage}% |