promotion detail

1 files changed, 83 insertions, 72 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index a9113e75..cfbc3989 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -46,7 +46,7 @@ const Cart = () => {
       setCart(listCart)
     }
     cart()
-  },[])
+  }, [])
 
   useEffect(() => {
     if (cart) {
@@ -350,89 +350,100 @@ const Cart = () => {
                 )}
                 {products &&
                   products?.map((product) => (
-                    <tr key={product.id}>
-                      <td>
-                        <input
-                          type='checkbox'
-                          onClick={() => toggleSelected(product.id)}
-                          checked={product?.selected}
-                          className='accent-danger-500 w-4'
-                        />
-                      </td>
-                      <td className='flex'>
-                        <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'
+                    <>
+                      <tr className='!border-b-0 pb-0'>
+                        <td colSpan={6}>
+                          <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+                            <div className='flex border border-solid border-red-600 rounded-md p-1'><span className='text-red-600'>Promo</span></div>
+                            <div className='flex font-semibold'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
+                            <div className='justify-end'>Cek Promo </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr key={product.id} className='!border-t-0'>
+                        <td>
+                          <input
+                            type='checkbox'
+                            onClick={() => toggleSelected(product.id)}
+                            checked={product?.selected}
+                            className='accent-danger-500 w-4'
                           />
-                        </Link>
-                        <div className='px-2 text-left'>
+                        </td>
+                        <td className='flex'>
                           <Link
                             href={createSlug(
                               '/shop/product/',
                               product?.parent.name,
                               product?.parent.id
                             )}
-                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            className='w-[20%] flex-shrink-0'
                           >
-                            {product?.parent?.name}
+                            <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='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                        </div>
-                      </td>
-                      <td>
-                        <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>
-                        {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 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 className='badge-solid-red'>
-                              {product?.price?.discountPercentage}%
+                          </div>
+                        </td>
+                        <td>
+                          <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>
+                          {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>
-                        )}
-                        <div className='font-normal mt-1'>
-                          {currencyFormat(product?.price?.priceDiscount)}
-                        </div>
-                      </td>
-                      <td>
-                        <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>
+                        </td>
+                        <td>
+                          <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>
+                    </>
                   ))}
               </tbody>
             </table>