promotion program

1 files changed, 127 insertions, 67 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 09fdbd86..0eaab020 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -289,8 +289,8 @@ const Checkout = () => {
           <div className='flex gap-x-2 justify-between mb-4'>
             <div>Grand Total</div>
             <div className='font-semibold text-gray_r-12'>
-              {currencyFormat(cartCheckout?.grandTotal +
-                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+              {currencyFormat(
+                cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
             </div>
           </div>
@@ -398,73 +398,131 @@ const Checkout = () => {
                 </thead>
                 <tbody>
                   {products?.map((product) => (
-                    <tr key={product.id}>
-                      <td className='flex'>
-                        <div 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-40 w-full rounded-md'
-                          />
-                        </div>
-                        <div className='px-2 text-left'>
-                          <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
-                            {product?.parent?.name}
-                          </div>
-                          <div className='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                          <div className='text-gray_r-11 mt-2'>
-                            Berat item : {product?.weight} Kg
+                    <>
+                      <tr
+                        key={product.id}
+                        className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+                      >
+                        <td className='flex'>
+                          <div 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-40 w-full rounded-md'
+                            />
                           </div>
-                        </div>
-                      </td>
-                      <td>
-                        <input
-                          className='form-input w-16 py-2 text-center bg-gray_r-1'
-                          type='number'
-                          value={product?.quantity}
-                          disabled
-                        />
-                      </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'>
+                            <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                              {product?.parent?.name}
                             </div>
-                            <div className='badge-solid-red'>
-                              {product?.price?.discountPercentage}%
+                            <div className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
+                            </div>
+                            <div className='text-gray_r-11 mt-2'>
+                              Berat item : {product?.weight} Kg
                             </div>
                           </div>
-                        )}
-                        <div className='font-normal mt-1'>
-                          {product.price.priceDiscount > 0
-                            ? currencyFormat(product?.price?.priceDiscount)
-                            : 'Call For Price'}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='text-danger-500 font-medium'>
-                          {product.price.priceDiscount > 0 ? (
-                            currencyFormat(product?.price?.priceDiscount * product?.quantity)
-                          ) : (
-                            <a
-                              href={whatsappUrl('product', {
-                                name: product.name,
-                                url: createSlug('/shop/product/', product.name, product.id, true)
-                              })}
-                              className='underline'
-                            >
-                              Call For Price{' '}
-                            </a>
+                        </td>
+                        <td>
+                          <input
+                            className='form-input w-16 py-2 text-center bg-gray_r-1'
+                            type='number'
+                            value={product?.quantity}
+                            disabled
+                          />
+                        </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>
-                      </td>
-                    </tr>
+                          <div className='font-normal mt-1'>
+                            {product.price.priceDiscount > 0
+                              ? currencyFormat(product?.price?.priceDiscount)
+                              : 'Call For Price'}
+                          </div>
+                        </td>
+                        <td>
+                          <div className='text-danger-500 font-medium'>
+                            {product.price.priceDiscount > 0 ? (
+                              currencyFormat(product?.price?.priceDiscount * product?.quantity)
+                            ) : (
+                              <a
+                                href={whatsappUrl('product', {
+                                  name: product.name,
+                                  url: createSlug('/shop/product/', product.name, product.id, true)
+                                })}
+                                className='underline'
+                              >
+                                Call For Price{' '}
+                              </a>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                      {product.program &&
+                        product.program.items &&
+                        product.program.items.map((item) => (
+                          <>
+                            <tr key={product?.program?.id} className='!border-t-0'>
+                              <td className='flex'>
+                                <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-40 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>
+                                <input
+                                  className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                  type='number'
+                                  value={1}
+                                  disabled
+                                />
+                              </td>
+                              <td>
+                                {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>
+                                <div className='text-danger-500 font-medium'>
+                                  {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                </div>
+                              </td>
+                              <td></td>
+                            </tr>
+                          </>
+                        ))}
+                    </>
                   ))}
                 </tbody>
               </table>
@@ -487,7 +545,9 @@ const Checkout = () => {
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
+                  <div className='text-danger-500'>
+                    - {currencyFormat(cartCheckout?.totalDiscount)}
+                  </div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
@@ -511,8 +571,8 @@ const Checkout = () => {
               <div className='flex gap-x-2 justify-between mb-4'>
                 <div>Grand Total</div>
                 <div className='font-semibold text-gray_r-12'>
-                  {currencyFormat(cartCheckout?.grandTotal +
-                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                  {currencyFormat(
+                    cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
                 </div>
               </div>