diff options
| author | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-07-05 09:29:46 +0700 |
|---|---|---|
| committer | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-07-05 09:29:46 +0700 |
| commit | 9272a07644a75d201753501cfff173b1260963ea (patch) | |
| tree | b1d79ae462266e21ff15c3ae0b827379309b5fc7 /src/lib/cart | |
| parent | 8b173abd19630b7cab5f0f562925c46e3f71d096 (diff) | |
cart, checkout dan nav bar mobile
Diffstat (limited to 'src/lib/cart')
| -rw-r--r-- | src/lib/cart/components/Cart.jsx | 69 |
1 files changed, 61 insertions, 8 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index f1584f98..224d02d1 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -278,18 +278,18 @@ const Cart = () => { <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'> + <div className='border border-solid border-red-600 rounded-md p-1 text-caption-2 whitespace-nowrap'> <span className='text-red-600'>{product.program.type.label}</span> </div> - <div className='flex text-caption-2'> + <div className='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'> + Selamat! Pembelian anda hemat + <span className='text-red-600 font-semibold text-caption-2'> {' '} - {currencyFormat(product.program.price.priceDiscount)} + {currencyFormat(product.program?.totalSavings)} </span> </> )} @@ -307,9 +307,12 @@ const Cart = () => { onClick={() => handlePopUpPromo(product.id, product.quantity, product.program?.id) } - className='ml-auto text-red-500 flex gap-x-1 cursor-pointer' + className='ml-auto text-red-500 flex gap-x-0 cursor-pointer' > - <div className='font-semibold text-caption-2'> Cek Promo</div> + <div className='font-semibold text-caption-2 whitespace-nowrap'> + {' '} + Cek Promo + </div> <div> <svg aria-hidden='true' @@ -329,7 +332,8 @@ const Cart = () => { </div> </div> )} - <div key={product?.id} className='flex mx-4'> + <div key={product?.id} className='flex mx-4 relative'> + <ComponentCanBuy canBuy={product.canBuy} /> <input type='checkbox' onClick={() => toggleSelected(product.id)} @@ -414,6 +418,55 @@ const Cart = () => { </div> </div> </div> + {product.program && + product.program.items && + product.program.items.map((item) => ( + <div key={item.id} className='flex mx-4 relative'> + <ComponentCanBuy canBuy={product.canBuy} /> + <input 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={item?.parent?.image} + alt={item?.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' + > + <div className='px-2 text-left mt-2'> + <div className='mb-2'> + <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'> + {product.program.type.label} + </span> + </div> + <div>{item.name}</div> + </div> + </Link> + {item.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center mt-3 ml-3'> + <div className='text-gray_r-11 line-through text-caption-2'> + {currencyFormat(item?.price?.price)} + </div> + </div> + )} + <div className='text-danger-500 font-medium mt-1 ml-3'>Gratis</div> + </div> + </div> + ))} </> ))} |