cart mobile

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'>