voucher multiple brand

1 files changed, 78 insertions, 65 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index ce691403..a565e13a 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,7 +4,13 @@ import Link from '@/core/components/elements/Link/Link'
 import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress } from '@/core/utils/address'
 import addressesApi from '@/lib/address/api/addressesApi'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import {
+  ArrowLongLeftIcon,
+  BanknotesIcon,
+  ChevronLeftIcon,
+  ClockIcon,
+  ExclamationCircleIcon
+} from '@heroicons/react/24/outline'
 import React, { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
 import { deleteItemCart, getCartApi } from '@/core/utils/cart'
@@ -93,6 +99,8 @@ const Checkout = () => {
   const [etd, setEtd] = useState(null)
   const [etdFix, setEtdFix] = useState(null)
   const [bottomPopup, SetBottomPopup] = useState(null)
+  const [bottomPopupTnC, SetBottomPopupTnC] = useState(null)
+  const [itemTnC, setItemTnC] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
   const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
@@ -370,11 +378,59 @@ const Checkout = () => {
     handleUseVoucher(code, !isChecked)
   }
 
+  const handlingTnC = async (item) => {
+    setItemTnC(item)
+    SetBottomPopupTnC(true)
+  }
   // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
       <BottomPopup
+        className='w-full md:!w-[40%] !min-h-[550px]'
+        active={bottomPopupTnC}
+        close={() => {
+          SetBottomPopupTnC(false)
+          SetBottomPopup(false)
+        }}
+        title={
+          <div>
+            <button className='flex gap-x-2 items-center' onClick={() => SetBottomPopupTnC(false)}>
+              <ChevronLeftIcon class='h- w-5 text-black' /> <span className='text-lg'>Voucher</span>
+            </button>{' '}
+          </div>
+        }
+      >
+        <div className='row'>
+          <h3 className='font-semibold mb-4'> {itemTnC?.name}</h3>
+          <div className='flex items-center justify-between bg-gray-50 rounded-lg border-t border-b border-green-50 p-3'>
+            <div className='flex items-center gap-x-1'>
+              <ClockIcon class='h-6 w-6 text-green-500' />{' '}
+              <span className='text-sm'>
+                {' '}
+                Berakhir dalam :{' '}
+                <span className='text-sm text-red-500'>{itemTnC?.remainingTime} lagi</span>
+              </span>
+            </div>
+            <div className='flex items-center gap-x-1'>
+              <BanknotesIcon class='h-6 w-6 text-green-500' />
+              <span className='text-sm'> Kode Voucher : </span>
+              <span className='text-red-500 font-semibold'>{itemTnC?.code}</span>
+            </div>
+          </div>
+          <div>
+            <h3 className='font-semibold mb-4 mt-4'>Syarat dan Ketentuan</h3>
+            <hr />
+            <div className='p-2 pl-4 pr-4 mx-auto text-sm'>
+              <div
+                className='prose prose-sm'
+                dangerouslySetInnerHTML={{ __html: itemTnC?.termsConditions }}
+              ></div>
+            </div>
+          </div>
+        </div>
+      </BottomPopup>
+      <BottomPopup
         className='w-full md:!w-[40%] !min-h-[350px]'
         active={bottomPopup}
         close={() => SetBottomPopup(false)}
@@ -488,10 +544,6 @@ const Checkout = () => {
             {!loadingVoucher &&
               listVouchers?.map((item) => (
                 <div key={item.id} className='relative'>
-                  {item.canApply === false && (
-                    <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
-                  )}
-
                   <div
                     className={`border border-solid mb-5 w-full hover:cursor-pointer  p-2 pl-4 pr-4 `}
                   >
@@ -508,67 +560,23 @@ const Checkout = () => {
                         </p>
                       </div>
                     )}
-                    {!item.canApply && item.applyStatus === 'MPA-HF' && (
-                      <div
-                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
-                        role='alert'
-                      >
-                        <p className='text-sm'>Voucher tidak bisa digabung dengan promo lainya</p>
-                      </div>
-                    )}
-                    {!item.canApply && item.applyStatus === 'UM' && (
+                    {!item.canApply && (
                       <div
-                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
+                        class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
                         role='alert'
+                        onClick={() => handlingTnC(item)}
                       >
-                        <p className='text-sm'>
-                          Tambah produk{' '}
-                          <span className='text-red-500 font-bold '>{item.manufactureNames}</span>{' '}
-                          senilai{' '}
-                          <span className='text-red-500 font-bold'>
-                            {currencyFormat(item.minPurchaseAmount)}
-                          </span>{' '}
-                          untuk pakai promo ini
+                        <p>
+                          Voucher tidak bisa di gunakan,{' '}
+                          <span className='text-red font-bold'>Baca Selengkapnya !</span>
                         </p>
                       </div>
                     )}
 
-                    {!item.canApply &&
-                      item.applyStatus === 'MPA' &&
-                      item.manufactureNames != '' && (
-                        <div
-                          class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
-                          role='alert'
-                        >
-                          <p className='text-sm'>
-                            Tambah produk{' '}
-                            <span className='text-red-500 font-bold'>{item.manufactureNames}</span>{' '}
-                            senilai{' '}
-                            <span className='text-red-500 font-bold'>
-                              {currencyFormat(item.differenceToApply)}
-                            </span>{' '}
-                            untuk pakai promo ini
-                          </p>
-                        </div>
-                      )}
-
-                    {!item.canApply &&
-                      item.applyStatus === 'MPA' &&
-                      item.manufactureNames === '' && (
-                        <div
-                          class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
-                          role='alert'
-                        >
-                          <p className='text-sm'>
-                            Tambah{' '}
-                            <span className='text-red-500 font-bold'>
-                              {currencyFormat(item.differenceToApply)}
-                            </span>{' '}
-                            untuk pakai promo ini{' '}
-                          </p>
-                        </div>
+                    <div className={`flex gap-x-3 relative`}>
+                      {item.canApply === false && (
+                        <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                       )}
-                    <div className={`flex gap-x-3`}>
                       <div className='hidden md:w-[250px] md:block'>
                         <Image src={item.image} alt={item.name} className={`object-cover`} />
                       </div>
@@ -620,10 +628,15 @@ const Checkout = () => {
                               stroke-linejoin='round'
                             ></path>
                           </svg>
-                          <span className='text-left ml-3 text-sm '>
-                            Berakhir dalam{' '}
-                            <span className='text-red-600'>{item.remainingTime}</span> lagi{' '}
-                          </span>
+                          <div className='flex justify-between items-center'>
+                            <span className='text-left ml-3 text-sm '>
+                              Berakhir dalam{' '}
+                              <span className='text-red-600'>{item.remainingTime}</span> lagi{' '}
+                            </span>
+                            <span className='text-sm ml-auto'>
+                             Baca S&K
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1496,13 +1509,13 @@ function calculateEstimatedArrival(duration) {
   return ''
 }
 
-function splitDuration(duration){
+function splitDuration(duration) {
   if (duration) {
     let estimationDate = null
-    if (duration.includes('-')){
+    if (duration.includes('-')) {
       estimationDate = duration.split('-')
       estimationDate = parseInt(estimationDate[1])
-    }else{
+    } else {
       estimationDate = parseInt(duration)
     }