summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/cart/components/Cart.jsx210
1 files changed, 138 insertions, 72 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 0cbcacd8..45f2f770 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -256,85 +256,151 @@ const Cart = () => {
</div>
)}
- {products?.map((product) => (
- <div key={product?.id} className='flex mx-4'>
- <input
- type='checkbox'
- onClick={() => toggleSelected(product.id)}
- checked={product?.selected}
- className='mr-2 accent-danger-500 w-4'
- />
-
- <Link
- href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
- className='w-[30%] flex-shrink-0'
- >
- <Image
- src={product?.parent?.image}
- alt={product?.name}
- className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
- />
- </Link>
- <div className='flex-1 px-2 text-caption-2'>
- <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-1'>
- {product?.code}{' '}
- {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
- </div>
- {product?.price?.discountPercentage > 0 && (
- <div className='flex gap-x-1 items-center mt-3'>
- <div className='text-gray_r-11 line-through text-caption-2'>
- {currencyFormat(product?.price?.price)}
+ {products &&
+ products?.map((product) => (
+ <>
+ {product.isPromo > 0 && (
+ <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 text-caption-2'>
+ <span className='text-red-600'>{product.program.type.label}</span>
+ </div>
+ <div className='flex text-caption-2'>
+ {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 text-caption-2'>
+ {' '}
+ {currencyFormat(product.program.price.priceDiscount)}
+ </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 text-caption-2'> 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 className='badge-solid-red'>{product?.price?.discountPercentage}%</div>
</div>
)}
- <div className='font-normal mt-1'>
- {currencyFormat(product?.price?.priceDiscount)}
- </div>
- <div className='flex justify-between items-center mt-1'>
- <div className='text-danger-500 font-medium'>
- {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
- </div>
- <div className='flex gap-x-1'>
- <button
- type='button'
- className='btn-light px-2 py-1'
- onClick={() => updateQuantity(1, product?.id, 'MINUS')}
- disabled={product?.quantity == 1}
- >
- -
- </button>
- <input
- className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
- type='number'
- value={product?.quantity}
- onChange={(e) => updateQuantity(e.target.value, product?.id)}
- onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+ <div key={product?.id} className='flex mx-4'>
+ <input
+ type='checkbox'
+ onClick={() => toggleSelected(product.id)}
+ checked={product?.selected}
+ className='mr-2 accent-danger-500 w-4'
+ />
+
+ <Link
+ href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+ className='w-[30%] flex-shrink-0'
+ >
+ <Image
+ src={product?.parent?.image}
+ alt={product?.name}
+ className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
/>
- <button
- type='button'
- className='btn-light px-2 py-1'
- onClick={() => updateQuantity(1, product?.id, 'PLUS')}
- >
- +
- </button>
- <button
- className='btn-red p-1 ml-1'
- onClick={() => setDeleteConfirmation(product)}
+ </Link>
+ <div className='flex-1 px-2 text-caption-2'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product?.parent.name,
+ product?.parent.id
+ )}
+ className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
>
- <TrashIcon className='w-4' />
- </button>
+ {product?.parent?.name}
+ </Link>
+ <div className='text-gray_r-11 mt-1'>
+ {product?.code}{' '}
+ {product?.attributes.length > 0
+ ? `| ${product?.attributes.join(', ')}`
+ : ''}
+ </div>
+ {product?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center mt-3'>
+ <div className='text-gray_r-11 line-through text-caption-2'>
+ {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>
+ <div className='flex justify-between items-center mt-1'>
+ <div className='text-danger-500 font-medium'>
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+ </div>
+ <div className='flex gap-x-1'>
+ <button
+ type='button'
+ className='btn-light px-2 py-1'
+ onClick={() => updateQuantity(1, product?.id, 'MINUS')}
+ disabled={product?.quantity == 1}
+ >
+ -
+ </button>
+ <input
+ className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
+ type='number'
+ value={product?.quantity}
+ onChange={(e) => updateQuantity(e.target.value, product?.id)}
+ onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+ />
+ <button
+ type='button'
+ className='btn-light px-2 py-1'
+ onClick={() => updateQuantity(1, product?.id, 'PLUS')}
+ >
+ +
+ </button>
+ <button
+ className='btn-red p-1 ml-1'
+ onClick={() => setDeleteConfirmation(product)}
+ >
+ <TrashIcon className='w-4' />
+ </button>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- ))}
+ </>
+ ))}
<div className='sticky bottom-0 left-0 w-full p-4 mt-auto border-t border-gray_r-6 bg-white'>
<div className='flex justify-between mb-4'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:49:05 +0000