From 637c22f1886cecf7307ced88dc951134d466a3fa Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 19 Jun 2023 15:46:03 +0700
Subject: checkout

---
 src/lib/checkout/components/Checkout.jsx | 90 ++++++++------------------------
 1 file changed, 22 insertions(+), 68 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 088b641b..09fdbd86 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,15 +4,14 @@ 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 CartApi from '@/lib/cart/api/CartApi'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import React, { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
-import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCartApi } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { toast } from 'react-hot-toast'
 import getFileBase64 from '@/core/utils/getFileBase64'
-import checkoutApi from '../api/checkoutApi'
+// import checkoutApi from '../api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
@@ -24,12 +23,18 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import { Button, Modal } from 'flowbite-react'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useQuery } from 'react-query'
 
 const SELF_PICKUP_ID = 32
 
+const { checkoutApi } = require('../api/checkoutApi')
+const { getProductsCheckout } = require('../api/checkoutApi')
+
 const Checkout = () => {
   const router = useRouter()
   const auth = useAuth()
+  const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
     invoicing: null
@@ -66,8 +71,6 @@ const Checkout = () => {
   }, [addresses])
 
   const [products, setProducts] = useState(null)
-  const [totalAmount, setTotalAmount] = useState(0)
-  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
   const [totalWeight, setTotalWeight] = useState(0)
   const [priceCheck, setPriceCheck] = useState(false)
   const [listExpedisi, setExpedisi] = useState([])
@@ -96,52 +99,10 @@ const Checkout = () => {
   }, [])
 
   useEffect(() => {
-    const loadProducts = async () => {
-      let variantIds = ''
-      let { query } = router
-      if (query?.productId) {
-        variantIds = query.productId
-      } else {
-        const cart = getCart()
-        variantIds = _.filter(cart, (o) => o.selected == true)
-          .map((o) => o.productId)
-          .join(',')
-      }
-
-      const dataProducts = await CartApi({ variantIds })
-      const productsWithQuantity = dataProducts?.map((product) => {
-        if (product.price.priceDiscount == 0) setPriceCheck(true)
-        return {
-          ...product,
-          quantity: query.quantity
-            ? query.quantity
-            : getItemCart({ productId: product.id }).quantity
-        }
-      })
-      setProducts(productsWithQuantity)
-    }
-    loadProducts()
-  }, [router])
-
-  useEffect(() => {
-    if (products) {
-      let calculateTotalAmount = 0
-      let calculateTotalDiscountAmount = 0
-      let calcuateTotalWeight = 0
-      products.forEach((product) => {
-        calculateTotalAmount += product.price.price * product.quantity
-        calculateTotalDiscountAmount +=
-          (product.price.price - product.price.priceDiscount) * product.quantity
-        calcuateTotalWeight += product.weight * product.quantity
-        if (product.weight == 0) {
-          setCheckWeight(true)
-        }
-      })
-      setTotalAmount(calculateTotalAmount)
-      setTotalDiscountAmount(calculateTotalDiscountAmount)
-      setTotalWeight(calcuateTotalWeight * 1000)
-    }
-  }, [products])
+    setProducts(cartCheckout?.products)
+    setCheckWeight(cartCheckout?.hasProductWithoutWeight)
+    setTotalWeight(cartCheckout?.totalWeight.g)
+  }, [cartCheckout])
 
   useEffect(() => {
     const loadServiceRajaOngkir = async () => {
@@ -240,7 +201,6 @@ const Checkout = () => {
     setIsLoading(false)
     window.location.href = payment.data.redirectUrl
   }
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
     <>
@@ -304,19 +264,19 @@ const Checkout = () => {
           <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(totalAmount)}</div>
+              <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Total Diskon</div>
-              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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>
-              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</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(taxTotal)}</div>
+              <div>{currencyFormat(cartCheckout?.tax)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>
@@ -329,10 +289,7 @@ 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(
-                totalAmount -
-                  totalDiscountAmount +
-                  taxTotal +
+              {currencyFormat(cartCheckout?.grandTotal +
                   Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
             </div>
@@ -526,19 +483,19 @@ const Checkout = () => {
               <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(totalAmount)}</div>
+                  <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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>
-                  <div>{currencyFormat(totalAmount - totalDiscountAmount)}</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(taxTotal)}</div>
+                  <div>{currencyFormat(cartCheckout?.tax)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>
@@ -554,10 +511,7 @@ 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(
-                    totalAmount -
-                      totalDiscountAmount +
-                      taxTotal +
+                  {currencyFormat(cartCheckout?.grandTotal +
                       Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
                 </div>
-- 
cgit v1.2.3


From 8b173abd19630b7cab5f0f562925c46e3f71d096 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 4 Jul 2023 13:38:33 +0700
Subject: promotion program

---
 src/lib/checkout/components/Checkout.jsx | 194 ++++++++++++++++++++-----------
 1 file changed, 127 insertions(+), 67 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 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>
-- 
cgit v1.2.3


From 9272a07644a75d201753501cfff173b1260963ea Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 5 Jul 2023 09:29:46 +0700
Subject: cart, checkout dan nav bar mobile

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(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 0eaab020..b30f7e43 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -270,6 +270,10 @@ const Checkout = () => {
               <div className='text-gray_r-11'>Total Diskon</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'>Total Hemat</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalSavings)}</div>
+            </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
               <div>{currencyFormat(cartCheckout?.subtotal)}</div>
@@ -549,6 +553,12 @@ const Checkout = () => {
                     - {currencyFormat(cartCheckout?.totalDiscount)}
                   </div>
                 </div>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Total Hemat</div>
+                  <div className='text-danger-500'>
+                    - {currencyFormat(cartCheckout?.totalSavings)}
+                  </div>
+                </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
                   <div>{currencyFormat(cartCheckout?.subtotal)}</div>
-- 
cgit v1.2.3


From 581334e8d077916c3a9ab87fd5b6e6b5126aba12 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 10:00:33 +0700
Subject: add auth id

---
 src/lib/checkout/components/Checkout.jsx | 1 +
 1 file changed, 1 insertion(+)

(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 b30f7e43..f5b27cfb 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -179,6 +179,7 @@ const Checkout = () => {
     let data = {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
+      user_id : auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
-- 
cgit v1.2.3


From 502ea2700003e8959f3d81c8978126da0d3b9828 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 10:31:42 +0700
Subject: button voucher

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(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 07d9acb6..6cb735fe 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -578,6 +578,16 @@ const Checkout = () => {
                   )}
                 </div>
               </div>
+
+              <hr className='my-4 border-gray_r-6' />
+
+              <button
+                className='w-full btn-yellow mt-4 mb-4'
+                onClick={checkout}
+              >
+                <span className='text-sm'>{'Hemat belanja dengan promo >'}</span>
+              </button>
+
               <p className='text-caption-2 text-gray_r-11 leading-5'>
                 Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
                 <Link href='/syarat-ketentuan' className='inline font-normal'>
-- 
cgit v1.2.3


From bdb8aa884317fdca72a20989f73764fdde06f42e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 16:56:58 +0700
Subject: layouting

---
 src/lib/checkout/components/Checkout.jsx | 134 +++++++++++++++++++++++++++++--
 1 file changed, 128 insertions(+), 6 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 6cb735fe..629ec5bc 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,6 +24,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { gtagPurchase } from '@/core/utils/googleTag'
+import getVoucher from '../api/getVoucher'
 
 const SELF_PICKUP_ID = 32
 
@@ -81,7 +82,13 @@ const Checkout = () => {
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
   const [etd, setEtd] = useState(null)
   const [etdFix, setEtdFix] = useState(null)
+  const [bottomPopup, SetBottomPopup] = useState(null)
+  const [listVouchers, SetListVoucher] = useState(null)
 
+  const voucher = async () => {
+    let dataVoucher = await getVoucher()
+    SetListVoucher(dataVoucher)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -93,8 +100,11 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+    voucher()
   }, [])
 
+  console.log('ini voucher', listVouchers)
+
   useEffect(() => {
     const loadProducts = async () => {
       let variantIds = ''
@@ -260,6 +270,95 @@ const Checkout = () => {
 
   return (
     <>
+      <BottomPopup active={bottomPopup} close={() => SetBottomPopup(false)} title='Gunakan Promo'>
+        <div className='row'>
+          <div className='flex justify-between items-center'>
+            <div className='flex w-[70%]'>
+              <input
+                type='text'
+                id='companyName'
+                name='companyName'
+                className='form-input w-full rounded-md'
+                placeholder=''
+                autoCapitalize='true'
+              />
+            </div>
+            <div className='flex'>
+              <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+                Terapkan
+              </button>
+            </div>
+          </div>
+
+          <hr className='mt-14 my-4 border-gray_r-10' />
+          <div className=''>
+            <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            {listVouchers?.map((item) => (
+              <div
+                key={item.id}
+                className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}
+              >
+                <div className={`flex gap-x-3`}>
+                  <div className=''>
+                    <Image src={item.image} alt={item.name} className={`object-cover`} />
+                  </div>
+                  <div className='w-full'>
+                    <div className='flex justify-between mb-1 items-center'>
+                      <div className=''>
+                        <h3 className='font-semibold'>{item.name}</h3>
+                        <div className='mt-1'>
+                          <span className='text-caption-1'>{item.description} </span>
+                        </div>
+                      </div>
+                      <div className=''>
+                        <button
+                          className='btn-solid-red flex-1 md:flex-none rounded-md'
+                          type='button'
+                        >
+                          Pakai
+                        </button>
+                      </div>
+                    </div>
+                    <hr className='mt-1 my-4 border-gray_r-8' />
+                    <p className='text-justify'>
+                      Kode Voucher :{' '}
+                      <span className='text-red-500 font-semibold'>{item.code}</span>
+                    </p>
+                  </div>
+                </div>
+                <div className='mt-3'>
+                  <p className='text-justify '>
+                    Voucher ini dapat anda gunakan untuk pengguna pertama{' '}
+                  </p>
+                  <hr className='mt-2 my-4 border-gray_r-8' />
+                  <div className='flex items-center'>
+                    <svg
+                      aria-hidden='true'
+                      fill='none'
+                      stroke='currentColor'
+                      stroke-width='1.5'
+                      viewBox='0 0 24 24'
+                      className='w-5 text-black'
+                    >
+                      <path
+                        d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                        stroke-linecap='round'
+                        stroke-linejoin='round'
+                      ></path>
+                    </svg>
+                    <span className='text-left ml-3 text-sm'>
+                      Berakhir dalam <span>{item.endTime}</span> lagi !{' '}
+                      <Link href='#' className='inline font-normal'>
+                        Lihat Detail
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </BottomPopup>
       <MobileView>
         <div className='p-4'>
           <Alert type='info' className='text-caption-2 flex gap-x-3'>
@@ -353,6 +452,22 @@ const Checkout = () => {
               )}
             </div>
           </div>
+
+          <hr className='my-4 border-gray_r-6' />
+
+          <div className='mt-4 mb-4'>
+            <button
+              type='button'
+              onClick={() => SetBottomPopup(true)}
+              className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+            >
+              <span className='text-left text-gray_r-9'>%</span>
+              <span className='text-left ml-3 text-sm text-gray_r-9'>
+                Hemat belanja dengan promo
+              </span>
+              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+            </button>
+          </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
           <p className='text-caption-2 text-gray_r-10 leading-5'>
             Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
@@ -581,12 +696,19 @@ const Checkout = () => {
 
               <hr className='my-4 border-gray_r-6' />
 
-              <button
-                className='w-full btn-yellow mt-4 mb-4'
-                onClick={checkout}
-              >
-                <span className='text-sm'>{'Hemat belanja dengan promo >'}</span>
-              </button>
+              <div className='mt-4 mb-4'>
+                <button
+                  type='button'
+                  onClick={() => SetBottomPopup(true)}
+                  className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                >
+                  <span className='text-left text-gray_r-9'>%</span>
+                  <span className='text-left ml-3 text-sm text-gray_r-9'>
+                    Hemat belanja dengan promo
+                  </span>
+                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                </button>
+              </div>
 
               <p className='text-caption-2 text-gray_r-11 leading-5'>
                 Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
-- 
cgit v1.2.3


From dc334fa49ad13959b6a0d572fd56a4cde38176fa Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 11 Jul 2023 15:29:03 +0700
Subject: get voucher

---
 src/lib/checkout/components/Checkout.jsx | 230 ++++++++++++++++++++++---------
 1 file changed, 163 insertions(+), 67 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 629ec5bc..dcc00eb8 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,7 +24,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { gtagPurchase } from '@/core/utils/googleTag'
-import getVoucher from '../api/getVoucher'
+import { findVoucher, getVoucher } from '../api/getVoucher'
 
 const SELF_PICKUP_ID = 32
 
@@ -84,11 +84,22 @@ 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(null)
+  const [codeVoucher, SetCodeVoucher] = useState(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
     SetListVoucher(dataVoucher)
   }
+  const VoucherCode = async (code) => {
+    let dataVoucher = await findVoucher(code)
+    if (!dataVoucher) return
+
+    let addNewLine = dataVoucher[0]
+    SetListVoucher((prevList) => [addNewLine, ...prevList])
+    SetActiveVoucher(addNewLine.code)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -103,7 +114,27 @@ const Checkout = () => {
     voucher()
   }, [])
 
-  console.log('ini voucher', listVouchers)
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+    let dataActiveVocuher = listVouchers[dataVoucherIndex]
+    let countDiscount = 0
+
+    if (dataActiveVocuher.discountType === 'percentage') {
+      countDiscount = (totalAmount - totalDiscountAmount) * 0.1
+      if (
+        dataActiveVocuher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVocuher.maxDiscountAmount
+      ) {
+        countDiscount = dataActiveVocuher.maxDiscountAmount
+      }
+    } else {
+      countDiscount = dataActiveVocuher.discountAmount
+    }
+    SetDiscountVoucher(countDiscount)
+  }, [activeVoucher, listVouchers])
 
   useEffect(() => {
     const loadProducts = async () => {
@@ -266,92 +297,137 @@ const Checkout = () => {
       event_callback: midtrans
     })
   }
+
+  const handlingActivateCode = async () => {
+    VoucherCode(codeVoucher)
+  }
   const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
     <>
-      <BottomPopup active={bottomPopup} close={() => SetBottomPopup(false)} title='Gunakan Promo'>
+      <BottomPopup
+        className='!w-[40%]'
+        active={bottomPopup}
+        close={() => SetBottomPopup(false)}
+        title='Gunakan Promo'
+      >
         <div className='row'>
           <div className='flex justify-between items-center'>
             <div className='flex w-[70%]'>
               <input
                 type='text'
-                id='companyName'
-                name='companyName'
+                id='uniqCode'
+                name='uniqCode'
                 className='form-input w-full rounded-md'
-                placeholder=''
+                placeholder='Kode Voucher'
                 autoCapitalize='true'
+                onChange={(e) => SetCodeVoucher(e.target.value)}
               />
             </div>
             <div className='flex'>
-              <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+              <button
+                className='btn-solid-red flex-1 md:flex-none rounded-md'
+                type='button'
+                onClick={() => handlingActivateCode()}
+              >
                 Terapkan
               </button>
             </div>
           </div>
+          {codeVoucher && activeVoucher == codeVoucher ? (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-green-600'>
+                Voucher berhasil ditambahkan{' '}
+              </span>
+            </div>
+          ) : (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-green-600'>
+                Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya.
+              </span>
+            </div>
+          )}
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
             <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
             {listVouchers?.map((item) => (
-              <div
-                key={item.id}
-                className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}
-              >
-                <div className={`flex gap-x-3`}>
-                  <div className=''>
-                    <Image src={item.image} alt={item.name} className={`object-cover`} />
-                  </div>
-                  <div className='w-full'>
-                    <div className='flex justify-between mb-1 items-center'>
-                      <div className=''>
-                        <h3 className='font-semibold'>{item.name}</h3>
-                        <div className='mt-1'>
-                          <span className='text-caption-1'>{item.description} </span>
+              <div key={item.id} className='relative'>
+                {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
+                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' />
+                )}
+
+                <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
+                  <div className={`flex gap-x-3`}>
+                    <div className=''>
+                      <Image src={item.image} alt={item.name} className={`object-cover`} />
+                    </div>
+                    <div className='w-full'>
+                      <div className='flex justify-between mb-1 items-center'>
+                        <div className=''>
+                          <h3 className='font-semibold'>{item.name}</h3>
+                          <div className='mt-1'>
+                            <span className='text-sm line-clamp-2 '>{item.description} </span>
+                          </div>
+                        </div>
+                        <div className='flex justify-end'>
+                          <button
+                            className='btn-solid-red w-[102px]  md:flex-none rounded-md'
+                            type='button'
+                            onClick={() => SetActiveVoucher(item.code)}
+                            disabled={activeVoucher === item.code}
+                          >
+                            {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
+                          </button>
                         </div>
                       </div>
-                      <div className=''>
-                        <button
-                          className='btn-solid-red flex-1 md:flex-none rounded-md'
-                          type='button'
-                        >
-                          Pakai
-                        </button>
+                      <hr className='mt-3 my-4 border-gray_r-8' />
+                      <div className='flex justify-between items-center'>
+                        <p className='text-justify text-sm'>
+                          Kode Voucher :{' '}
+                          <span className='text-red-500 font-semibold'>{item.code}</span>
+                        </p>
+                        <p className='text-sm'>
+                          {activeVoucher === item.code && (
+                            <span className='text-caption-1 text-green-600'>
+                              Voucher digunakan{' '}
+                            </span>
+                          )}
+                        </p>
                       </div>
                     </div>
-                    <hr className='mt-1 my-4 border-gray_r-8' />
-                    <p className='text-justify'>
-                      Kode Voucher :{' '}
-                      <span className='text-red-500 font-semibold'>{item.code}</span>
-                    </p>
                   </div>
-                </div>
-                <div className='mt-3'>
-                  <p className='text-justify '>
-                    Voucher ini dapat anda gunakan untuk pengguna pertama{' '}
-                  </p>
-                  <hr className='mt-2 my-4 border-gray_r-8' />
-                  <div className='flex items-center'>
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      viewBox='0 0 24 24'
-                      className='w-5 text-black'
-                    >
-                      <path
-                        d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                    <span className='text-left ml-3 text-sm'>
-                      Berakhir dalam <span>{item.endTime}</span> lagi !{' '}
-                      <Link href='#' className='inline font-normal'>
-                        Lihat Detail
-                      </Link>
-                    </span>
+                  <div className='mt-3'>
+                    <p className='text-justify text-sm '>
+                      {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+                        ? 'Tambah ' +
+                          currencyFormat(
+                            item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
+                          ) +
+                          ' untuk pakai promo ini'
+                        : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+                    </p>
+                    <hr className='mt-2 my-4 border-gray_r-8' />
+                    <div className='flex items-center'>
+                      <svg
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='1.5'
+                        viewBox='0 0 24 24'
+                        className='w-5 text-black'
+                      >
+                        <path
+                          d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                          stroke-linecap='round'
+                          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>
                   </div>
                 </div>
               </div>
@@ -462,9 +538,18 @@ const Checkout = () => {
               className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
             >
               <span className='text-left text-gray_r-9'>%</span>
-              <span className='text-left ml-3 text-sm text-gray_r-9'>
-                Hemat belanja dengan promo
-              </span>
+              {activeVoucher ? (
+                <div>
+                  <span className='text-left ml-3 text-sm text-black font-semibold'>
+                    Kamu dapat potogan {discountVoucher}
+                  </span>
+                  <span className='text-green-500 text-caption-1'>Voucher berhasil digunakan</span>
+                </div>
+              ) : (
+                <span className='text-left ml-3 text-sm text-gray_r-9'>
+                  Hemat belanja dengan promo
+                </span>
+              )}
               <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
             </button>
           </div>
@@ -700,12 +785,23 @@ const Checkout = () => {
                 <button
                   type='button'
                   onClick={() => SetBottomPopup(true)}
-                  className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                  className='text-gray-900 p-2 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%]'
                 >
                   <span className='text-left text-gray_r-9'>%</span>
-                  <span className='text-left ml-3 text-sm text-gray_r-9'>
-                    Hemat belanja dengan promo
-                  </span>
+                  {activeVoucher ? (
+                    <div className='row'>
+                      <div className='text-left text-sm text-black font-semibold'>
+                        Hemat {currencyFormat(discountVoucher)}
+                      </div>
+                      <div className='text-left mt-1 text-green-600 text-xs'>
+                        Voucher berhasil digunakan
+                      </div>
+                    </div>
+                  ) : (
+                    <span className='text-left text-sm text-gray_r-9'>
+                      Hemat belanja dengan promo
+                    </span>
+                  )}
                   <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
-- 
cgit v1.2.3


From b3855694c2723168d1c7ad949d892649fff220b8 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 11 Jul 2023 17:05:43 +0700
Subject: find voucher

---
 src/lib/checkout/components/Checkout.jsx | 40 ++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 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 dcc00eb8..f19b6054 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -87,6 +87,8 @@ const Checkout = () => {
   const [activeVoucher, SetActiveVoucher] = useState(null)
   const [discountVoucher, SetDiscountVoucher] = useState(null)
   const [codeVoucher, SetCodeVoucher] = useState(null)
+  const [findCodeVoucher, SetFindVoucher] = useState(null)
+  const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -94,9 +96,21 @@ const Checkout = () => {
   }
   const VoucherCode = async (code) => {
     let dataVoucher = await findVoucher(code)
-    if (!dataVoucher) return
+    if (dataVoucher.length <= 0) {
+      SetFindVoucher(1)
+      return
+    }
 
     let addNewLine = dataVoucher[0]
+    if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
+      SetSelisihHargaCode(
+        currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
+      )
+      SetFindVoucher(2)
+      return
+    } else {
+      SetFindVoucher(3)
+    }
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
   }
@@ -301,6 +315,14 @@ const Checkout = () => {
   const handlingActivateCode = async () => {
     VoucherCode(codeVoucher)
   }
+
+  const handleUseVoucher = async (code) => {
+    SetActiveVoucher(code)
+    SetFindVoucher(null)
+    // document.getElementById('uniqCode').val('')
+  }
+  
+  console.log('ini find voucher', findCodeVoucher)
   const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
@@ -334,19 +356,27 @@ const Checkout = () => {
               </button>
             </div>
           </div>
-          {codeVoucher && activeVoucher == codeVoucher ? (
+          {findCodeVoucher === 3 && activeVoucher === codeVoucher && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-green-600'>
                 Voucher berhasil ditambahkan{' '}
               </span>
             </div>
-          ) : (
+          )}
+          {findCodeVoucher === 1 && (
             <div className='mt-2'>
-              <span className='text-caption-1 mt-2 text-green-600'>
+              <span className='text-caption-1 mt-2 text-red-600'>
                 Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya.
               </span>
             </div>
           )}
+          {findCodeVoucher === 2 && (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-red-600'>
+                {'Tambah ' + selisihHargaCode + ' untuk pakai promo ini'}
+              </span>
+            </div>
+          )}
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
@@ -374,7 +404,7 @@ const Checkout = () => {
                           <button
                             className='btn-solid-red w-[102px]  md:flex-none rounded-md'
                             type='button'
-                            onClick={() => SetActiveVoucher(item.code)}
+                            onClick={() => handleUseVoucher(item.code)}
                             disabled={activeVoucher === item.code}
                           >
                             {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
-- 
cgit v1.2.3


From 578456cacf1ec5106854277222a6f7a9f4790bd5 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 10:48:19 +0700
Subject: checout mobile

---
 src/lib/checkout/components/Checkout.jsx | 113 ++++++++++++++++++++++---------
 1 file changed, 82 insertions(+), 31 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 f19b6054..1763ae5b 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -85,10 +85,11 @@ const Checkout = () => {
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
   const [activeVoucher, SetActiveVoucher] = useState(null)
-  const [discountVoucher, SetDiscountVoucher] = useState(null)
+  const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
+  const [buttonTerapkan, SetButtonTerapkan] = useState(false)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -102,6 +103,8 @@ 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))
@@ -110,6 +113,7 @@ const Checkout = () => {
       return
     } else {
       SetFindVoucher(3)
+      SetButtonTerapkan(true)
     }
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
@@ -132,7 +136,7 @@ const Checkout = () => {
     if (!listVouchers) return
     if (!activeVoucher) return
 
-    let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
     let dataActiveVocuher = listVouchers[dataVoucherIndex]
     let countDiscount = 0
 
@@ -277,6 +281,7 @@ const Checkout = () => {
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
       delivery_service_type: selectedExpedisiService,
+      voucher: activeVoucher,
       type: 'sale_order'
     }
     if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -319,16 +324,21 @@ const Checkout = () => {
   const handleUseVoucher = async (code) => {
     SetActiveVoucher(code)
     SetFindVoucher(null)
-    // document.getElementById('uniqCode').val('')
+    document.getElementById('uniqCode').value = ''
+    SetButtonTerapkan(false)
   }
-  
-  console.log('ini find voucher', findCodeVoucher)
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+  const onChangeCodeVoucher = async (e) => {
+    SetCodeVoucher(e.target.value)
+    SetButtonTerapkan(false)
+  }
+
+  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
       <BottomPopup
-        className='!w-[40%]'
+        className='w-full md:!w-[40%] !min-h-[350px]'
         active={bottomPopup}
         close={() => SetBottomPopup(false)}
         title='Gunakan Promo'
@@ -343,7 +353,7 @@ const Checkout = () => {
                 className='form-input w-full rounded-md'
                 placeholder='Kode Voucher'
                 autoCapitalize='true'
-                onChange={(e) => SetCodeVoucher(e.target.value)}
+                onChange={(e) => onChangeCodeVoucher(e)}
               />
             </div>
             <div className='flex'>
@@ -351,6 +361,7 @@ const Checkout = () => {
                 className='btn-solid-red flex-1 md:flex-none rounded-md'
                 type='button'
                 onClick={() => handlingActivateCode()}
+                disabled={buttonTerapkan}
               >
                 Terapkan
               </button>
@@ -380,7 +391,16 @@ const Checkout = () => {
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
-            <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            {!listVouchers ? (
+              <div className='flex items-center justify-center mt-4 mb-4'>
+                <div className='text-center'>
+                  <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
+                  <p className='text-gray-500'>Maaf, saat ini tidak ada voucher yang tersedia.</p>
+                </div>
+              </div>
+            ) : (
+              <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
                 {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
@@ -389,7 +409,7 @@ const Checkout = () => {
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className=''>
+                    <div className='hidden md:w-auto md:block'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
@@ -528,9 +548,15 @@ const Checkout = () => {
               <div>{currencyFormat(totalAmount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Total Diskon</div>
+              <div className='text-gray_r-11'>Diskon Produk</div>
               <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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(totalAmount - totalDiscountAmount)}</div>
@@ -552,7 +578,8 @@ const Checkout = () => {
             <div className='font-semibold text-gray_r-12'>
               {currencyFormat(
                 totalAmount -
-                  totalDiscountAmount +
+                  totalDiscountAmount -
+                  discountVoucher +
                   taxTotal +
                   Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
@@ -565,22 +592,33 @@ const Checkout = () => {
             <button
               type='button'
               onClick={() => SetBottomPopup(true)}
-              className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+              className='text-gray-900 p-4 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%]'
             >
-              <span className='text-left text-gray_r-9'>%</span>
-              {activeVoucher ? (
-                <div>
-                  <span className='text-left ml-3 text-sm text-black font-semibold'>
-                    Kamu dapat potogan {discountVoucher}
-                  </span>
-                  <span className='text-green-500 text-caption-1'>Voucher berhasil digunakan</span>
-                </div>
-              ) : (
-                <span className='text-left ml-3 text-sm text-gray_r-9'>
-                  Hemat belanja dengan promo
+              <div className='flex items-center justify-between gap-x-3'>
+                <span className='text-left text-gray_r-9'>
+                  <Image
+                    src={'/images/DISKONICON.svg'}
+                    alt={''}
+                    className='object-contain object-center h-6 w-full rounded-md'
+                  />
                 </span>
-              )}
-              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                {activeVoucher ? (
+                  <div className=''>
+                    <div className='text-left text-sm text-black font-semibold'>
+                      Potongan Senilai {currencyFormat(discountVoucher)}
+                    </div>
+                    <div className='text-left mt-1 text-green-600 text-xs'>
+                      Voucher berhasil digunakan
+                    </div>
+                  </div>
+                ) : (
+                  <span className='text-left text-sm text-gray_r-9'>
+                    Hemat belanja dengan promo
+                  </span>
+                )}
+              </div>
+
+              <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
             </button>
           </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -778,9 +816,15 @@ const Checkout = () => {
                   <div className='text-gray_r-11'>Total Diskon</div>
                   <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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(totalAmount - totalDiscountAmount)}</div>
+                  <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>PPN 11%</div>
@@ -802,7 +846,8 @@ const Checkout = () => {
                 <div className='font-semibold text-gray_r-12'>
                   {currencyFormat(
                     totalAmount -
-                      totalDiscountAmount +
+                      totalDiscountAmount -
+                      discountVoucher +
                       taxTotal +
                       Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
@@ -815,9 +860,15 @@ const Checkout = () => {
                 <button
                   type='button'
                   onClick={() => SetBottomPopup(true)}
-                  className='text-gray-900 p-2 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%]'
+                  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%]'
                 >
-                  <span className='text-left text-gray_r-9'>%</span>
+                  <span className='text-left text-gray_r-9'>
+                    <Image
+                      src={'/images/DISKONICON.svg'}
+                      alt={''}
+                      className='object-contain object-center h-6 w-full rounded-md'
+                    />
+                  </span>
                   {activeVoucher ? (
                     <div className='row'>
                       <div className='text-left text-sm text-black font-semibold'>
@@ -832,7 +883,7 @@ const Checkout = () => {
                       Hemat belanja dengan promo
                     </span>
                   )}
-                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                  <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
 
-- 
cgit v1.2.3


From c2be9e77d22840eb33142ea2e694c3278613c4ef Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 11:49:53 +0700
Subject: checkout

---
 src/lib/checkout/components/Checkout.jsx | 80 ++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 34 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 1763ae5b..6990b420 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -104,7 +104,7 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if(checkList > 0) return
+    if (checkList > 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -132,25 +132,34 @@ const Checkout = () => {
     voucher()
   }, [])
 
-  useEffect(() => {
-    if (!listVouchers) return
-    if (!activeVoucher) return
+  const hitungDiscountVoucher = (code) => {
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
+    let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
-    let dataActiveVocuher = listVouchers[dataVoucherIndex]
+    console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex)
     let countDiscount = 0
 
-    if (dataActiveVocuher.discountType === 'percentage') {
+    if (dataActiveVoucher.discountType === 'percentage') {
       countDiscount = (totalAmount - totalDiscountAmount) * 0.1
       if (
-        dataActiveVocuher.maxDiscountAmount > 0 &&
-        countDiscount > dataActiveVocuher.maxDiscountAmount
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
       ) {
-        countDiscount = dataActiveVocuher.maxDiscountAmount
+        countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
-      countDiscount = dataActiveVocuher.discountAmount
+      countDiscount = dataActiveVoucher.discountAmount
     }
+
+    return countDiscount
+  }
+
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    const countDiscount = hitungDiscountVoucher(activeVoucher)
+
     SetDiscountVoucher(countDiscount)
   }, [activeVoucher, listVouchers])
 
@@ -417,7 +426,7 @@ const Checkout = () => {
                         <div className=''>
                           <h3 className='font-semibold'>{item.name}</h3>
                           <div className='mt-1'>
-                            <span className='text-sm line-clamp-2 '>{item.description} </span>
+                            <span className='text-sm line-clamp-3'>{item.description} </span>
                           </div>
                         </div>
                         <div className='flex justify-end'>
@@ -455,7 +464,8 @@ const Checkout = () => {
                             item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
                           ) +
                           ' untuk pakai promo ini'
-                        : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+                        : 'Potensi potongan sebesar ' +
+                          currencyFormat(hitungDiscountVoucher(item.code))}
                     </p>
                     <hr className='mt-2 my-4 border-gray_r-8' />
                     <div className='flex items-center'>
@@ -559,7 +569,7 @@ const Checkout = () => {
             )}
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
-              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+              <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>PPN 11%</div>
@@ -862,27 +872,29 @@ const Checkout = () => {
                   onClick={() => SetBottomPopup(true)}
                   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%]'
                 >
-                  <span className='text-left text-gray_r-9'>
-                    <Image
-                      src={'/images/DISKONICON.svg'}
-                      alt={''}
-                      className='object-contain object-center h-6 w-full rounded-md'
-                    />
-                  </span>
-                  {activeVoucher ? (
-                    <div className='row'>
-                      <div className='text-left text-sm text-black font-semibold'>
-                        Hemat {currencyFormat(discountVoucher)}
-                      </div>
-                      <div className='text-left mt-1 text-green-600 text-xs'>
-                        Voucher berhasil digunakan
-                      </div>
-                    </div>
-                  ) : (
-                    <span className='text-left text-sm text-gray_r-9'>
-                      Hemat belanja dengan promo
+                  <div className='flex items-center justify-between gap-x-3'>
+                    <span className='text-left text-gray_r-9'>
+                      <Image
+                        src={'/images/DISKONICON.svg'}
+                        alt={''}
+                        className='object-contain object-center h-6 w-full rounded-md'
+                      />
                     </span>
-                  )}
+                    {activeVoucher ? (
+                      <div className=''>
+                        <div className='text-left text-sm text-black font-semibold'>
+                          Hemat {currencyFormat(discountVoucher)}
+                        </div>
+                        <div className='text-left mt-1 text-green-600 text-xs'>
+                          Voucher berhasil digunakan
+                        </div>
+                      </div>
+                    ) : (
+                      <span className='text-left text-sm text-gray_r-9'>
+                        Hemat belanja dengan promo
+                      </span>
+                    )}
+                  </div>
                   <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
-- 
cgit v1.2.3


From 3f890e6d482cefba37014e021cb4c2b8d5de2a9d Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 14:31:07 +0700
Subject: cr

---
 src/lib/checkout/components/Checkout.jsx | 34 ++++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 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 6990b420..27cdda76 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -17,6 +17,7 @@ import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
 import Image from '@/core/components/elements/Image/Image'
+import imageNext from 'next/image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ExpedisiList from '../api/ExpedisiList'
@@ -136,15 +137,11 @@ const Checkout = () => {
     let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
     let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex)
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * 0.1
-      if (
-        dataActiveVoucher.maxDiscountAmount > 0 &&
-        countDiscount > dataActiveVoucher.maxDiscountAmount
-      ) {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
+      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
         countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
@@ -331,10 +328,14 @@ const Checkout = () => {
   }
 
   const handleUseVoucher = async (code) => {
-    SetActiveVoucher(code)
-    SetFindVoucher(null)
-    document.getElementById('uniqCode').value = ''
-    SetButtonTerapkan(false)
+    if(code === activeVoucher){
+      SetActiveVoucher(null)
+    }else{
+      SetActiveVoucher(code)
+      SetFindVoucher(null)
+      document.getElementById('uniqCode').value = ''
+      SetButtonTerapkan(false)
+    }
   }
 
   const onChangeCodeVoucher = async (e) => {
@@ -354,7 +355,7 @@ const Checkout = () => {
       >
         <div className='row'>
           <div className='flex justify-between items-center'>
-            <div className='flex w-[70%]'>
+            <div className='flex md:w-[70%]'>
               <input
                 type='text'
                 id='uniqCode'
@@ -398,7 +399,7 @@ const Checkout = () => {
             </div>
           )}
 
-          <hr className='mt-14 my-4 border-gray_r-10' />
+          <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
             {!listVouchers ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
@@ -418,7 +419,7 @@ const Checkout = () => {
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-auto md:block'>
+                    <div className='hidden md:w-[250px] md:block md:h-[150px]'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
@@ -434,9 +435,8 @@ const Checkout = () => {
                             className='btn-solid-red w-[102px]  md:flex-none rounded-md'
                             type='button'
                             onClick={() => handleUseVoucher(item.code)}
-                            disabled={activeVoucher === item.code}
                           >
-                            {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
+                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
                           </button>
                         </div>
                       </div>
@@ -609,7 +609,7 @@ const Checkout = () => {
                   <Image
                     src={'/images/DISKONICON.svg'}
                     alt={''}
-                    className='object-contain object-center h-6 w-full rounded-md'
+                    className='object-contain object-center h-6 rounded-md'
                   />
                 </span>
                 {activeVoucher ? (
@@ -823,7 +823,7 @@ const Checkout = () => {
                   <div>{currencyFormat(totalAmount)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Total Diskon</div>
+                  <div className='text-gray_r-11'>Diskon Produk</div>
                   <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                 </div>
                 {activeVoucher && (
-- 
cgit v1.2.3


From b886fcf2dbc9114bc2e2347e3d4bf5299ed43d3b Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 14 Jul 2023 09:26:08 +0700
Subject: toggle on off

---
 src/lib/checkout/components/Checkout.jsx | 62 +++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 21 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 27cdda76..78d61770 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -105,7 +105,7 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if (checkList > 0) return
+    if (checkList >= 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -140,8 +140,11 @@ const Checkout = () => {
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
-      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+      if (
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
+      ) {
         countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
@@ -327,10 +330,17 @@ const Checkout = () => {
     VoucherCode(codeVoucher)
   }
 
-  const handleUseVoucher = async (code) => {
-    if(code === activeVoucher){
-      SetActiveVoucher(null)
-    }else{
+  const handleUseVoucher = async (code, isCheck) => {
+    if (isCheck) {
+      if (code === activeVoucher) {
+        SetActiveVoucher(null)
+      } else {
+        SetActiveVoucher(code)
+        SetFindVoucher(null)
+        document.getElementById('uniqCode').value = ''
+        SetButtonTerapkan(false)
+      }
+    } else {
       SetActiveVoucher(code)
       SetFindVoucher(null)
       document.getElementById('uniqCode').value = ''
@@ -343,6 +353,13 @@ const Checkout = () => {
     SetButtonTerapkan(false)
   }
 
+  const [isChecked, setIsChecked] = useState(false)
+
+  const ToggleSwitch = (code) => {
+    setIsChecked(!isChecked)
+    handleUseVoucher(code, !isChecked)
+  }
+
   const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
@@ -409,21 +426,21 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
             )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
                 {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
-                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' />
+                  <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-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-[250px] md:block md:h-[150px]'>
+                    <div className='hidden md:w-[250px] md:block'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
-                      <div className='flex justify-between mb-1 items-center'>
+                      <div className='flex justify-between gap-x-2 mb-1 items-center'>
                         <div className=''>
                           <h3 className='font-semibold'>{item.name}</h3>
                           <div className='mt-1'>
@@ -431,24 +448,27 @@ const Checkout = () => {
                           </div>
                         </div>
                         <div className='flex justify-end'>
-                          <button
-                            className='btn-solid-red w-[102px]  md:flex-none rounded-md'
-                            type='button'
-                            onClick={() => handleUseVoucher(item.code)}
-                          >
-                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
-                          </button>
+                          <label class='relative inline-flex items-center cursor-pointer'>
+                            <input
+                              type='checkbox'
+                              value=''
+                              class='sr-only peer'
+                              checked={activeVoucher === item.code ? true : false}
+                              onChange={() => ToggleSwitch(item.code)}
+                            />
+                            <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                          </label>
                         </div>
                       </div>
                       <hr className='mt-3 my-4 border-gray_r-8' />
                       <div className='flex justify-between items-center'>
-                        <p className='text-justify text-sm'>
+                        <p className='text-justify text-sm md:text-xs'>
                           Kode Voucher :{' '}
                           <span className='text-red-500 font-semibold'>{item.code}</span>
                         </p>
-                        <p className='text-sm'>
+                        <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className='text-caption-1 text-green-600'>
+                            <span className=' text-green-600'>
                               Voucher digunakan{' '}
                             </span>
                           )}
-- 
cgit v1.2.3


From e3679ab4a7c58f6b8b9ac661b3adaa8d2dc0b0f2 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 14 Jul 2023 13:24:57 +0700
Subject: bug fixing button lanjut pembayaran

---
 src/lib/checkout/components/Checkout.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(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 78d61770..098d1e66 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -261,6 +261,9 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
+      if(serviceType[0] === 0){
+        setSelectedExpedisi(0)
+      }
       setselectedCarrier(serviceType[0])
       setselectedCarrierId(serviceType[1])
       setListServiceExpedisi([])
@@ -411,7 +414,7 @@ const Checkout = () => {
           {findCodeVoucher === 2 && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-red-600'>
-                {'Tambah ' + selisihHargaCode + ' untuk pakai promo ini'}
+                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini
               </span>
             </div>
           )}
-- 
cgit v1.2.3


From e39d3b0082e83ad08044918f0b6d8e977223100d Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 17 Jul 2023 16:30:17 +0700
Subject: feedback UAT

---
 src/lib/checkout/components/Checkout.jsx | 73 +++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 20 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 098d1e66..0c7a35fa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -91,6 +91,9 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
+  const [checkoutValidation, setCheckoutValidation] = useState(false)
+
+  const expedisiValidation = useRef(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -212,6 +215,7 @@ const Checkout = () => {
   }, [products])
 
   useEffect(() => {
+    setCheckoutValidation(false)
     const loadServiceRajaOngkir = async () => {
       const body = {
         origin: 2127,
@@ -261,7 +265,7 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
-      if(serviceType[0] === 0){
+      if (serviceType[0] === 0) {
         setSelectedExpedisi(0)
       }
       setselectedCarrier(serviceType[0])
@@ -281,6 +285,21 @@ const Checkout = () => {
       toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
       return
     }
+    if (selectedExpedisi === 0) {
+      setCheckoutValidation(true)
+      if (expedisiValidation.current) {
+        const position = expedisiValidation.current.getBoundingClientRect()
+        window.scrollTo({
+          top: position.top - 300 + window.pageYOffset,
+          behavior: 'smooth'
+        })
+      }
+      return
+    }
+    if (selectedCarrier != 1 && biayaKirim == 0) {
+      toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+      return
+    }
     setIsLoading(true)
     const productOrder = products.map((product) => ({
       product_id: product.id,
@@ -337,6 +356,7 @@ const Checkout = () => {
     if (isCheck) {
       if (code === activeVoucher) {
         SetActiveVoucher(null)
+        SetDiscountVoucher(0)
       } else {
         SetActiveVoucher(code)
         SetFindVoucher(null)
@@ -414,7 +434,8 @@ const Checkout = () => {
           {findCodeVoucher === 2 && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-red-600'>
-                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini
+                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo
+                ini
               </span>
             </div>
           )}
@@ -471,9 +492,7 @@ const Checkout = () => {
                         </p>
                         <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className=' text-green-600'>
-                              Voucher digunakan{' '}
-                            </span>
+                            <span className=' text-green-600'>Voucher digunakan </span>
                           )}
                         </p>
                       </div>
@@ -556,6 +575,8 @@ const Checkout = () => {
           listExpedisi={listExpedisi}
           setSelectedExpedisi={setSelectedExpedisi}
           checkWeigth={checkWeigth}
+          checkoutValidation={checkoutValidation}
+          expedisiValidation={expedisiValidation}
         />
         <Divider />
         <SectionListService
@@ -693,9 +714,7 @@ const Checkout = () => {
           <button
             className='flex-1 btn-yellow'
             onClick={checkout}
-            disabled={
-              isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
-            }
+            disabled={isLoading || !products || products?.length == 0 || priceCheck}
           >
             {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
           </button>
@@ -738,6 +757,8 @@ const Checkout = () => {
               listExpedisi={listExpedisi}
               setSelectedExpedisi={setSelectedExpedisi}
               checkWeigth={checkWeigth}
+              checkoutValidation={checkoutValidation}
+              expedisiValidation={expedisiValidation}
             />
             <Divider />
             <SectionListService
@@ -958,14 +979,7 @@ const Checkout = () => {
               <button
                 className='w-full btn-yellow mt-4'
                 onClick={checkout}
-                disabled={
-                  isLoading ||
-                  !products ||
-                  products?.length == 0 ||
-                  priceCheck ||
-                  selectedCarrier == 0 ||
-                  (selectedCarrier != 1 && biayaKirim == 0)
-                }
+                disabled={isLoading || !products || products?.length == 0 || priceCheck}
               >
                 {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
               </button>
@@ -1028,13 +1042,24 @@ const SectionValidation = ({ address }) =>
     </BottomPopup>
   )
 
-const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+const SectionExpedisi = ({
+  address,
+  listExpedisi,
+  setSelectedExpedisi,
+  checkWeigth,
+  checkoutValidation,
+  expedisiValidation
+}) =>
   address?.rajaongkirCityId > 0 && (
-    <div className='p-4'>
+    <div className='p-4' ref={expedisiValidation}>
       <div className='flex justify-between items-center'>
         <div className='font-medium'>Pilih Expedisi : </div>
-        <div>
-          <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+        <div className='w-[250px]'>
+          <select
+            className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`}
+            onChange={(e) => setSelectedExpedisi(e.target.value)}
+            required
+          >
             <option value='0,0'>Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
             {checkWeigth != true &&
@@ -1049,7 +1074,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
                 </option>
               ))}
           </select>
+          {checkoutValidation && (
+            <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span>
+          )}
         </div>
+        <style jsx>{`
+          .shake {
+            animation: shake 0.4s ease-in-out;
+          }
+        `}</style>
       </div>
       {checkWeigth == true && (
         <p className='mt-4 text-gray_r-11 leading-6'>
-- 
cgit v1.2.3


From 91f5a1251c5eac261ac5a1997df581f5ccd8e868 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 18 Jul 2023 17:03:07 +0700
Subject: proses merging

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 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 9c026372..44e0b0b6 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -345,7 +345,9 @@ const Checkout = () => {
     handleUseVoucher(code, !isChecked)
   }
 
-  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
+  console.log('ini adalah', listVouchers)
+
+  // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
@@ -565,7 +567,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(totalDiscountAmount)}</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
             </div>
             {activeVoucher && (
               <div className='flex gap-x-2 justify-between'>
@@ -884,7 +886,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'>
@@ -1111,7 +1113,7 @@ const SectionExpedisi = ({
     </div>
   )
 
-const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => 
   listserviceExpedisi?.length > 0 && (
     <>
       <div className='p-4'>
-- 
cgit v1.2.3


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


From 8b8560742a16b46a114a86966e13ba59c1c248f6 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 21 Jul 2023 16:24:06 +0700
Subject: voucher brand

---
 src/lib/checkout/components/Checkout.jsx | 393 +++++++++++++++++++++----------
 1 file changed, 275 insertions(+), 118 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 3686ced9..23a471aa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,7 +26,6 @@ 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
 
@@ -100,12 +99,17 @@ const Checkout = () => {
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
   const [checkoutValidation, setCheckoutValidation] = useState(false)
+  const [loadingVoucher, setLoadingVoucher] = useState(true)
 
   const expedisiValidation = useRef(null)
 
   const voucher = async () => {
-    let dataVoucher = await getVoucher(auth?.id)
-    SetListVoucher(dataVoucher)
+    try {
+      let dataVoucher = await getVoucher(auth?.id)
+      SetListVoucher(dataVoucher)
+    } finally {
+      setLoadingVoucher(false)
+    }
   }
   const VoucherCode = async (code) => {
     let dataVoucher = await findVoucher(code, auth.id)
@@ -417,7 +421,7 @@ const Checkout = () => {
 
           <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
-            {!listVouchers ? (
+            {!loadingVoucher && !listVouchers ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
                 <div className='text-center'>
                   <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
@@ -425,88 +429,174 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
+              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth?.name}</h3>
             )}
-            {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-4 `}>
-                  <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-[250px] md:block'>
-                      <Image src={item.image} alt={item.name} className={`object-cover`} />
+            {loadingVoucher && (
+              <>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
+                      <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
+                        aria-hidden='true'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
+                      >
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
+                      </svg>
                     </div>
-                    <div className='w-full'>
-                      <div className='flex justify-between gap-x-2 mb-1 items-center'>
-                        <div className=''>
-                          <h3 className='font-semibold'>{item.name}</h3>
-                          <div className='mt-1'>
-                            <span className='text-sm line-clamp-3'>{item.description} </span>
-                          </div>
-                        </div>
-                        <div className='flex justify-end'>
-                          <label class='relative inline-flex items-center cursor-pointer'>
-                            <input
-                              type='checkbox'
-                              value=''
-                              class='sr-only peer'
-                              checked={activeVoucher === item.code ? true : false}
-                              onChange={() => ToggleSwitch(item.code)}
-                            />
-                            <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                      <hr className='mt-3 my-4 border-gray_r-8' />
-                      <div className='flex justify-between items-center'>
-                        <p className='text-justify text-sm md:text-xs'>
-                          Kode Voucher :{' '}
-                          <span className='text-red-500 font-semibold'>{item.code}</span>
-                        </p>
-                        <p className='text-sm md:text-xs'>
-                          {activeVoucher === item.code && (
-                            <span className=' text-green-600'>Voucher digunakan </span>
-                          )}
-                        </p>
-                      </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 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>
                   </div>
-                  <div className='mt-3'>
-                    <p className='text-justify text-sm '>
-                      {item.canApply === false
-                        ? 'Tambah ' +
-                          currencyFormat(item.differenceToApply) +
-                          ' untuk pakai promo ini'
-                        : 'Potensi potongan sebesar ' +
-                          currencyFormat(hitungDiscountVoucher(item.code))}
-                    </p>
-                    <hr className='mt-2 my-4 border-gray_r-8' />
-                    <div className='flex items-center'>
+                </div>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
                       <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
                         aria-hidden='true'
-                        fill='none'
-                        stroke='currentColor'
-                        stroke-width='1.5'
-                        viewBox='0 0 24 24'
-                        className='w-5 text-black'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
                       >
-                        <path
-                          d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
-                          stroke-linecap='round'
-                          stroke-linejoin='round'
-                        ></path>
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
                       </svg>
-                      <span className='text-left ml-3 text-sm '>
-                        Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
-                        lagi{' '}
-                      </span>
+                    </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 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>
                   </div>
                 </div>
-              </div>
-            ))}
+              </>
+            )}
+            {!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-4 `}>
+                    <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>
+                      <div className='w-full'>
+                        <div className='flex justify-between gap-x-2 mb-1 items-center'>
+                          <div className=''>
+                            <h3 className='font-semibold'>{item.name}</h3>
+                            <div className='mt-1'>
+                              <span className='text-sm line-clamp-3'>{item.description} </span>
+                            </div>
+                          </div>
+                          <div className='flex justify-end'>
+                            <label class='relative inline-flex items-center cursor-pointer'>
+                              <input
+                                type='checkbox'
+                                value=''
+                                class='sr-only peer'
+                                checked={activeVoucher === item.code ? true : false}
+                                onChange={() => ToggleSwitch(item.code)}
+                              />
+                              <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                            </label>
+                          </div>
+                        </div>
+                        <hr className='mt-3 my-4 border-gray_r-8' />
+                        <div className='flex justify-between items-center'>
+                          <p className='text-justify text-sm md:text-xs'>
+                            Kode Voucher :{' '}
+                            <span className='text-red-500 font-semibold'>{item.code}</span>
+                          </p>
+                          <p className='text-sm md:text-xs'>
+                            {activeVoucher === item.code && (
+                              <span className=' text-green-600'>Voucher digunakan </span>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div className='mt-3'>
+                      <p className='text-justify text-sm '>
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames != '' && (
+                            <p>
+                              Tambah produk{' '}
+                              <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini
+                            </p>
+                          )}
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames === '' && (
+                            <p>
+                              Tambah{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini{' '}
+                            </p>
+                          )}
+                        {!item.canApply && item.applyStatus === 'UM' && (
+                          <p>
+                            Tambah produk{' '}
+                            <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                            <span className='text-red-500'>
+                              {currencyFormat(item.minPurchaseAmount)}
+                            </span>{' '}
+                            untuk pakai promo ini
+                          </p>
+                        )}
+                        {item.canApply && (
+                          <p>
+                            Potensi potongan sebesar{' '}
+                            <span className='text-red-500'>{item.discountVoucher}</span>
+                          </p>
+                        )}
+                        {/* {item.canApply === false
+                          ? 'Tambah ' +
+                            currencyFormat(item.differenceToApply) +
+                            ' untuk pakai promo ini'
+                          : 'Potensi potongan sebesar ' +
+                            currencyFormat(hitungDiscountVoucher(item.code))} */}
+                      </p>
+                      <hr className='mt-2 my-4 border-gray_r-8' />
+                      <div className='flex items-center'>
+                        <svg
+                          aria-hidden='true'
+                          fill='none'
+                          stroke='currentColor'
+                          stroke-width='1.5'
+                          viewBox='0 0 24 24'
+                          className='w-5 text-black'
+                        >
+                          <path
+                            d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                            stroke-linecap='round'
+                            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>
+                    </div>
+                  </div>
+                </div>
+              ))}
           </div>
         </div>
       </BottomPopup>
@@ -569,52 +659,108 @@ const Checkout = () => {
             <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
           </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>
             </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' />
-          <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
-              )}
+          {!cartCheckout ? (
+            <div className='flex gap-x-2 justify-between mb-4'>
+              <div>
+                {' '}
+                <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+              </div>
+              <div className='font-semibold text-gray_r-12'>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
             </div>
-          </div>
+          ) : (
+            <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
+                )}
+              </div>
+            </div>
+          )}
 
           <hr className='my-4 border-gray_r-6' />
 
           <div className='mt-4 mb-4'>
             <button
               type='button'
-              onClick={() => SetBottomPopup(true)}
+              onClick={() => {
+                SetBottomPopup(true)
+                voucher()
+              }}
               className='text-gray-900 p-4 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'>
@@ -938,7 +1084,6 @@ const Checkout = () => {
                     </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>
               ) : (
                 <div className='flex flex-col gap-y-4'>
@@ -979,15 +1124,27 @@ const Checkout = () => {
               )}
 
               <hr className='my-4 border-gray_r-6' />
-
-              <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
-                  )}
+              {!cartCheckout ? (
+                <div className='flex gap-x-2 justify-between mb-4'>
+                  <div>
+                    {' '}
+                    <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                  </div>
+                  <div className='font-semibold text-gray_r-12'>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <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
+                    )}
+                  </div>
+                </div>
+              )}
 
               <hr className='my-4 border-gray_r-6' />
 
@@ -1159,7 +1316,7 @@ const SectionExpedisi = ({
               ))}
           </select>
           {checkoutValidation && (
-            <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span>
+            <span className='text-sm text-red-500'>*silahkan pilih expedisi</span>
           )}
         </div>
         <style jsx>{`
-- 
cgit v1.2.3


From 71b30f5c313b0571ecf34c78ccc9887b57cfcbbc Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Sat, 22 Jul 2023 10:29:05 +0700
Subject: get discount value

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 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 23a471aa..5a9dcf7f 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -164,9 +164,9 @@ const Checkout = () => {
     let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
     let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    let countDiscount = 0
+    let countDiscount = dataActiveVoucher.discountVoucher
 
-    if (dataActiveVoucher.discountType === 'percentage') {
+    /*if (dataActiveVoucher.discountType === 'percentage') {
       countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
       if (
         dataActiveVoucher.maxDiscountAmount > 0 &&
@@ -176,7 +176,7 @@ const Checkout = () => {
       }
     } else {
       countDiscount = dataActiveVoucher.discountAmount
-    }
+    }*/
 
     return countDiscount
   }
@@ -562,7 +562,9 @@ const Checkout = () => {
                         {item.canApply && (
                           <p>
                             Potensi potongan sebesar{' '}
-                            <span className='text-red-500'>{item.discountVoucher}</span>
+                            <span className='text-red-500'>
+                              {currencyFormat(item.discountVoucher)}
+                            </span>
                           </p>
                         )}
                         {/* {item.canApply === false
-- 
cgit v1.2.3


From 619f79d87752e28d24d3cb0a79448e8c3191e9ff Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 24 Jul 2023 10:42:45 +0700
Subject: validate list voucher

---
 src/lib/checkout/components/Checkout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 5a9dcf7f..11a14e31 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -421,7 +421,7 @@ const Checkout = () => {
 
           <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
-            {!loadingVoucher && !listVouchers ? (
+            {!loadingVoucher && listVouchers.length === 0 ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
                 <div className='text-center'>
                   <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
-- 
cgit v1.2.3

