Merged in Feature/voucher (pull request #12)

Feature/voucher

4 files changed, 375 insertions, 9 deletions

diff --git a/public/images/DISKONICON.svg b/public/images/DISKONICON.svg
new file mode 100644
index 00000000..95d4eb47
--- /dev/null
+++ b/public/images/DISKONICON.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E20613;}
+</style>
+<g>
+	<path class="st0" d="M73.3,149c-5.1-1-8.9-4-12.3-7.6c-1.7-1.8-3.5-3.5-5.1-5.3c-2.9-3.2-6.5-4.5-10.7-4.4c-3.7,0-7.3,0.1-11-0.1
+		c-1.6-0.1-3.3-0.3-4.8-0.7c-6.3-1.6-9.8-5.9-10.6-12.2c-0.5-3.7-0.6-7.4-0.3-11.1c0.4-6.3-1.6-11.3-6.5-15.4
+		c-2.7-2.3-5.2-4.9-7.3-7.7c-4.8-6.2-4.7-12.6,0-18.8C6,63.7,7.7,62,9.3,60.3c1.1-1.2,2.2-2.3,3.4-3.3c4.3-3.5,5.9-8,5.7-13.5
+		c-0.2-3.8-0.2-7.6,0.3-11.4c1.1-8.8,6.3-13.4,15.2-13.7c4.5-0.2,8.9-0.1,13.4-0.2c3-0.1,5.5-1.3,7.6-3.4c3-2.9,5.8-5.9,8.8-8.7
+		c2.4-2.3,5.2-4,8.5-4.7c4.5-1,8.6,0.2,12,3c2.9,2.3,5.8,4.9,8.2,7.7c4,4.7,8.9,6.6,15,6.3c4.1-0.2,8.3-0.1,12.4,0.6
+		c6.7,1.1,10.8,5.6,11.5,12.4c0.4,3.6,0.6,7.3,0.3,10.9c-0.4,6.3,1.4,11.4,6.5,15.4c1.1,0.8,1.9,1.9,2.9,2.8c3.7,3.6,7,7.5,8,12.7
+		c0,1.2,0,2.3,0,3.5c-1,5.3-4.3,9.1-8,12.7c-1,1-2,2.1-3.1,3c-4.8,3.8-6.6,8.8-6.3,14.9c0.2,3.7,0.1,7.5-0.3,11.2
+		c-0.7,5.9-3.7,10.2-9.5,12c-1.9,0.6-3.8,0.9-5.8,1c-3.6,0.2-7.3,0.1-11,0.1c-4.3-0.1-8,1.3-10.9,4.6c-1.6,1.7-3.3,3.4-4.9,5.1
+		c-3.5,3.6-7.3,6.7-12.4,7.7C75.6,149,74.4,149,73.3,149z M26.9,109.4c0.1,0,0.1,0,0.2,0c0,1.8,0,3.7,0,5.5c0.2,6,2.1,7.9,8,8.1
+		c3.2,0.1,6.4,0.1,9.5,0c7.1-0.2,13.1,2.2,17.9,7.5c2,2.2,4.2,4.4,6.4,6.4c4.7,4.4,7.4,4.4,12.1,0c2.7-2.5,5.3-5.2,7.9-7.8
+		c3.7-3.7,8.1-5.8,13.4-6c4.2-0.1,8.4-0.1,12.6-0.2c6-0.2,7.9-2.1,8.1-8.1c0.1-3.2,0.1-6.5,0-9.7c-0.2-6.9,2.2-12.8,7.3-17.5
+		c2.3-2.1,4.4-4.3,6.5-6.5c4.5-4.8,4.5-7.5,0.1-12.3c-2.6-2.7-5.3-5.3-7.9-8c-3.6-3.6-5.7-8-5.8-13.1c-0.1-4.2-0.1-8.4-0.2-12.6
+		c-0.2-6.1-2-8-8.1-8.2c-3.2-0.1-6.4-0.1-9.5,0c-7,0.2-12.9-2.2-17.7-7.4c-1.3-1.4-2.6-2.7-3.9-4c-1.6-1.5-3.2-3.1-5-4.4
+		c-2.7-2-4.8-2-7.5,0c-1.3,1-2.5,2.1-3.7,3.2c-2.3,2.2-4.5,4.5-6.8,6.7c-3.6,3.5-7.9,5.6-13,5.7c-4.2,0.1-8.5,0.1-12.7,0.2
+		c-5.9,0.2-7.8,2.1-8,8c-0.1,3.3-0.1,6.6,0,9.8c0.1,6.9-2.2,12.7-7.3,17.4c-2.3,2.1-4.4,4.3-6.5,6.5c-4.6,4.9-4.6,7.5,0,12.5
+		c2.4,2.6,5,5.1,7.5,7.6c3.7,3.8,6,8.2,6.1,13.6C26.9,104.8,26.9,107.1,26.9,109.4z"/>
+	<path class="st0" d="M101.1,53.5c0,1.3-0.7,2.4-1.8,3.4C90,66.2,80.7,75.5,71.5,84.7c-4.9,4.9-9.8,9.8-14.7,14.7
+		c-1.4,1.4-2.9,2-4.8,1.4c-2.8-0.9-3.9-4.3-2.1-6.7c0.3-0.3,0.6-0.7,0.9-1C64.8,79,79,64.9,93.1,50.7c1-1,2.1-1.8,3.6-1.8
+		C99.2,49,101.1,50.8,101.1,53.5z"/>
+	<path class="st0" d="M57.7,44.6c7.2,0,13,5.9,13,13.1c0,7.2-6,13-13.1,13c-7.2,0-13-5.9-13-13.1C44.6,50.3,50.5,44.5,57.7,44.6z
+		 M53.3,57.5c0,2.4,1.9,4.4,4.2,4.4c2.4,0.1,4.5-2,4.5-4.4c0-2.4-2-4.3-4.3-4.3C55.2,53.3,53.3,55.1,53.3,57.5z"/>
+	<path class="st0" d="M92.4,105.4c-7.2,0-13-5.9-13-13.1c0-7.2,5.9-13,13.1-13c7.2,0,13,5.9,13,13.1
+		C105.4,99.7,99.6,105.5,92.4,105.4z M96.7,92.4c0-2.4-1.9-4.3-4.3-4.4c-2.3,0-4.4,2-4.4,4.3c0,2.4,1.9,4.4,4.4,4.4
+		C94.9,96.7,96.7,94.8,96.7,92.4z"/>
+</g>
+</svg>
diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
new file mode 100644
index 00000000..03ac3d6d
--- /dev/null
+++ b/src/lib/checkout/api/getVoucher.js
@@ -0,0 +1,11 @@
+import odooApi from '@/core/api/odooApi'
+
+export  const getVoucher = async () => {
+  const dataVoucher = await odooApi('GET', `/api/v1/voucher`)
+  return dataVoucher
+}
+
+export const findVoucher = async (code) => {
+  const dataVoucher = await odooApi('GET', `/api/v1/voucher?code=${code}`)
+  return dataVoucher
+}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 07d9acb6..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'
@@ -24,6 +25,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 { findVoucher, getVoucher } from '../api/getVoucher'
 
 const SELF_PICKUP_ID = 32
 
@@ -81,7 +83,42 @@ 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 [activeVoucher, SetActiveVoucher] = 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()
+    SetListVoucher(dataVoucher)
+  }
+  const VoucherCode = async (code) => {
+    let dataVoucher = await findVoucher(code)
+    if (dataVoucher.length <= 0) {
+      SetFindVoucher(1)
+      return
+    }
 
+    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))
+      )
+      SetFindVoucher(2)
+      return
+    } else {
+      SetFindVoucher(3)
+      SetButtonTerapkan(true)
+    }
+    SetListVoucher((prevList) => [addNewLine, ...prevList])
+    SetActiveVoucher(addNewLine.code)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -93,8 +130,36 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+    voucher()
   }, [])
 
+  const hitungDiscountVoucher = (code) => {
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
+    let dataActiveVoucher = listVouchers[dataVoucherIndex]
+
+    let countDiscount = 0
+
+    if (dataActiveVoucher.discountType === 'percentage') {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
+      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
+        countDiscount = dataActiveVoucher.maxDiscountAmount
+      }
+    } else {
+      countDiscount = dataActiveVoucher.discountAmount
+    }
+
+    return countDiscount
+  }
+
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    const countDiscount = hitungDiscountVoucher(activeVoucher)
+
+    SetDiscountVoucher(countDiscount)
+  }, [activeVoucher, listVouchers])
+
   useEffect(() => {
     const loadProducts = async () => {
       let variantIds = ''
@@ -222,6 +287,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
@@ -256,10 +322,179 @@ const Checkout = () => {
       event_callback: midtrans
     })
   }
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+  const handlingActivateCode = async () => {
+    VoucherCode(codeVoucher)
+  }
+
+  const handleUseVoucher = async (code) => {
+    if(code === activeVoucher){
+      SetActiveVoucher(null)
+    }else{
+      SetActiveVoucher(code)
+      SetFindVoucher(null)
+      document.getElementById('uniqCode').value = ''
+      SetButtonTerapkan(false)
+    }
+  }
+
+  const onChangeCodeVoucher = async (e) => {
+    SetCodeVoucher(e.target.value)
+    SetButtonTerapkan(false)
+  }
+
+  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
+      <BottomPopup
+        className='w-full md:!w-[40%] !min-h-[350px]'
+        active={bottomPopup}
+        close={() => SetBottomPopup(false)}
+        title='Gunakan Promo'
+      >
+        <div className='row'>
+          <div className='flex justify-between items-center'>
+            <div className='flex md:w-[70%]'>
+              <input
+                type='text'
+                id='uniqCode'
+                name='uniqCode'
+                className='form-input w-full rounded-md'
+                placeholder='Kode Voucher'
+                autoCapitalize='true'
+                onChange={(e) => onChangeCodeVoucher(e)}
+              />
+            </div>
+            <div className='flex'>
+              <button
+                className='btn-solid-red flex-1 md:flex-none rounded-md'
+                type='button'
+                onClick={() => handlingActivateCode()}
+                disabled={buttonTerapkan}
+              >
+                Terapkan
+              </button>
+            </div>
+          </div>
+          {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-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-10 my-4 border-gray_r-10' />
+          <div className=''>
+            {!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 && (
+                  <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='hidden md:w-[250px] md:block md:h-[150px]'>
+                      <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-3'>{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={() => handleUseVoucher(item.code)}
+                          >
+                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
+                          </button>
+                        </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'>
+                          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>
+                  </div>
+                  <div className='mt-3'>
+                    <p className='text-justify text-sm '>
+                      {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+                        ? 'Tambah ' +
+                          currencyFormat(
+                            item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
+                          ) +
+                          ' 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>
       <MobileView>
         <div className='p-4'>
           <Alert type='info' className='text-caption-2 flex gap-x-3'>
@@ -323,12 +558,18 @@ 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>
+              <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>PPN 11%</div>
@@ -347,12 +588,49 @@ const Checkout = () => {
             <div className='font-semibold text-gray_r-12'>
               {currencyFormat(
                 totalAmount -
-                  totalDiscountAmount +
+                  totalDiscountAmount -
+                  discountVoucher +
                   taxTotal +
                   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)}
+              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'>
+                <span className='text-left text-gray_r-9'>
+                  <Image
+                    src={'/images/DISKONICON.svg'}
+                    alt={''}
+                    className='object-contain object-center h-6 rounded-md'
+                  />
+                </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> */}
           <p className='text-caption-2 text-gray_r-10 leading-5'>
             Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
@@ -545,12 +823,18 @@ 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>
+                  <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>PPN 11%</div>
@@ -572,12 +856,49 @@ const Checkout = () => {
                 <div className='font-semibold text-gray_r-12'>
                   {currencyFormat(
                     totalAmount -
-                      totalDiscountAmount +
+                      totalDiscountAmount -
+                      discountVoucher +
                       taxTotal +
                       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)}
+                  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'>
+                    <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>
+
               <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'>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 6a87d022..cafab721 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -66,9 +66,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   const handleBuy = (variant) => {
-    const quantity = variantQuantityRefs.current[variant.id].value
+    const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
-    router.push(`/shop/checkout?productId=${variant.id}&quantity=${quantity}`)
+    router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`)
   }
 
   const variantSectionRef = useRef(null)