From c210cdc221db85f6711af92442808e15fc2eb10e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 20 Jul 2023 16:41:30 +0700
Subject: voucher get perhitungan dari api

---
 src/lib/checkout/components/Checkout.jsx | 416 ++++++++++++++++++-------------
 1 file changed, 243 insertions(+), 173 deletions(-)

(limited to 'src/lib/checkout/components/Checkout.jsx')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 44e0b0b6..3686ced9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,6 +26,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const SELF_PICKUP_ID = 32
 
@@ -35,7 +36,12 @@ const { getProductsCheckout } = require('../api/checkoutApi')
 const Checkout = () => {
   const router = useRouter()
   const auth = useAuth()
-  const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
+  const [activeVoucher, SetActiveVoucher] = useState(null)
+
+  const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () =>
+    getProductsCheckout(activeVoucher)
+  )
 
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
@@ -88,7 +94,6 @@ const Checkout = () => {
   const [etdFix, setEtdFix] = useState(null)
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
-  const [activeVoucher, SetActiveVoucher] = useState(null)
   const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
   const [findCodeVoucher, SetFindVoucher] = useState(null)
@@ -99,11 +104,11 @@ const Checkout = () => {
   const expedisiValidation = useRef(null)
 
   const voucher = async () => {
-    let dataVoucher = await getVoucher()
+    let dataVoucher = await getVoucher(auth?.id)
     SetListVoucher(dataVoucher)
   }
   const VoucherCode = async (code) => {
-    let dataVoucher = await findVoucher(code)
+    let dataVoucher = await findVoucher(code, auth.id)
     if (dataVoucher.length <= 0) {
       SetFindVoucher(1)
       return
@@ -111,11 +116,18 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if (checkList >= 0) return
-    if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
-      SetSelisihHargaCode(
-        currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
-      )
+    if (checkList >= 0) {
+      if (listVouchers[checkList].canApply) {
+        ToggleSwitch(code)
+        SetCodeVoucher(null)
+      } else {
+        SetSelisihHargaCode(listVouchers[checkList].differenceToApply)
+        SetFindVoucher(2)
+      }
+      return
+    }
+    if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) {
+      SetSelisihHargaCode(currencyFormat(addNewLine.minPurchaseAmount - cartCheckout?.subtotal))
       SetFindVoucher(2)
       return
     } else {
@@ -125,6 +137,11 @@ const Checkout = () => {
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
   }
+
+  useEffect(() => {
+    SetFindVoucher(null)
+  }, [bottomPopup])
+
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -136,7 +153,7 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
-    voucher()
+    // voucher()
   }, [])
 
   const hitungDiscountVoucher = (code) => {
@@ -146,7 +163,7 @@ const Checkout = () => {
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+      countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
       if (
         dataActiveVoucher.maxDiscountAmount > 0 &&
         countDiscount > dataActiveVoucher.maxDiscountAmount
@@ -269,7 +286,7 @@ const Checkout = () => {
     let data = {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
-      user_id : auth.id,
+      user_id: auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
@@ -299,11 +316,7 @@ const Checkout = () => {
 
     gtag('event', 'conversion', {
       send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD',
-      value:
-        totalAmount -
-        totalDiscountAmount +
-        taxTotal +
-        Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
+      value: cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
       currency: 'IDR',
       transaction_id: isCheckouted.id,
       event_callback: midtrans
@@ -345,8 +358,6 @@ const Checkout = () => {
     handleUseVoucher(code, !isChecked)
   }
 
-  console.log('ini adalah', listVouchers)
-
   // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
@@ -418,7 +429,7 @@ const Checkout = () => {
             )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
-                {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
+                {item.canApply === false && (
                   <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                 )}
 
@@ -464,11 +475,9 @@ const Checkout = () => {
                   </div>
                   <div className='mt-3'>
                     <p className='text-justify text-sm '>
-                      {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+                      {item.canApply === false
                         ? 'Tambah ' +
-                          currencyFormat(
-                            item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
-                          ) +
+                          currencyFormat(item.differenceToApply) +
                           ' untuk pakai promo ini'
                         : 'Potensi potongan sebesar ' +
                           currencyFormat(hitungDiscountVoucher(item.code))}
@@ -567,7 +576,7 @@ const Checkout = () => {
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Diskon Produk</div>
-              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
             </div>
             {activeVoucher && (
               <div className='flex gap-x-2 justify-between'>
@@ -738,133 +747,149 @@ const Checkout = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {products?.map((product) => (
-                    <>
-                      <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 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
+                  {!products ? (
+                    <tr>
+                      <td colSpan={4}>
+                        <div className='container my-4'>
+                          <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                        </div>
+                      </td>
+                    </tr>
+                  ) : (
+                    products?.map((product) => (
+                      <>
+                        <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>
-                            )}
-                          </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'
-                                  />
+                          </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 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='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='mt-2 line-clamp-2 leading-6'>
-                                    {item.name}
+                                  <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>
-                                </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)}
+                                </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>
-                                )}
-                                <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>
-                          </>
-                        ))}
-                    </>
-                  ))}
+                                </td>
+                                <td>
+                                  <div className='text-danger-500 font-medium'>
+                                    {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                  </div>
+                                </td>
+                                <td></td>
+                              </tr>
+                            </>
+                          ))}
+                      </>
+                    ))
+                  )}
                 </tbody>
               </table>
             </div>
@@ -878,38 +903,80 @@ const Checkout = () => {
               </div>
 
               <hr className='my-4 border-gray_r-6' />
-
-              <div className='flex flex-col gap-y-4'>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Total Belanja</div>
-                  <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
-                </div>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Diskon Produk</div>
-                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
+              {!cartCheckout ? (
+                <div
+                  role='status'
+                  class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+                >
+                  <div class='flex items-center justify-between'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <span class='sr-only'>Loading...</span>
                 </div>
-                {activeVoucher && (
+              ) : (
+                <div className='flex flex-col gap-y-4'>
                   <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>Diskon Voucher</div>
-                    <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                    <div className='text-gray_r-11'>Total Belanja</div>
+                    <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                   </div>
-                )}
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Subtotal</div>
-                  <div>{currencyFormat(cartCheckout?.subtotal)}</div>
-                </div>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>PPN 11%</div>
-                  <div>{currencyFormat(cartCheckout?.tax)}</div>
-                </div>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>
-                    Biaya Kirim
-                    <p className='text-xs mt-3'>{etdFix}</p>
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>Diskon Produk</div>
+                    <div className='text-danger-500'>
+                      - {currencyFormat(cartCheckout?.totalDiscount)}
+                    </div>
+                  </div>
+                  {activeVoucher && (
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>Diskon Voucher</div>
+                      <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                    </div>
+                  )}
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>Subtotal</div>
+                    <div>{currencyFormat(cartCheckout?.subtotal)}</div>
+                  </div>
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>PPN 11%</div>
+                    <div>{currencyFormat(cartCheckout?.tax)}</div>
+                  </div>
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>
+                      Biaya Kirim
+                      <p className='text-xs mt-3'>{etdFix}</p>
+                    </div>
+                    <div>
+                      {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}
+                    </div>
                   </div>
-                  <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
                 </div>
-              </div>
+              )}
 
               <hr className='my-4 border-gray_r-6' />
 
@@ -927,7 +994,10 @@ const Checkout = () => {
               <div className='mt-4 mb-4'>
                 <button
                   type='button'
-                  onClick={() => SetBottomPopup(true)}
+                  onClick={() => {
+                    SetBottomPopup(true)
+                    voucher()
+                  }}
                   className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                 >
                   <div className='flex items-center justify-between gap-x-3'>
@@ -1074,7 +1144,7 @@ const SectionExpedisi = ({
             onChange={(e) => setSelectedExpedisi(e.target.value)}
             required
           >
-            <option value='0,0'>Pengiriman</option>
+            <option value='0,0'>Pilih Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
             {checkWeigth != true &&
               listExpedisi.map((expedisi) => (
@@ -1113,7 +1183,7 @@ const SectionExpedisi = ({
     </div>
   )
 
-const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => 
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
   listserviceExpedisi?.length > 0 && (
     <>
       <div className='p-4'>
-- 
cgit v1.2.3

