midtrans integration

1 files changed, 16 insertions, 42 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index f6170b13..42608cef 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -5,7 +5,6 @@ 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 VariantCard from '@/lib/variant/components/VariantCard'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
@@ -16,6 +15,8 @@ import getFileBase64 from '@/core/utils/getFileBase64'
 import checkoutApi from '../api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
+import axios from 'axios'
+import Script from 'next/script'
 
 const Checkout = () => {
   const router = useRouter()
@@ -89,18 +90,12 @@ const Checkout = () => {
     }
   }, [products])
 
-  const [selectedPayment, setSelectedPayment] = useState(null)
-
   const poNumber = useRef('')
   const poFile = useRef('')
 
   const [isLoading, setIsLoading] = useState(false)
 
   const checkout = async () => {
-    if (!selectedPayment) {
-      toast.error('Pilih metode pembayaran', { position: 'bottom-center' })
-      return
-    }
     const file = poFile.current.files[0]
     if (typeof file !== 'undefined' && file.size > 5000000) {
       toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
@@ -122,12 +117,16 @@ const Checkout = () => {
 
     const isCheckouted = await checkoutApi({ data })
     setIsLoading(false)
-    if (isCheckouted?.id) {
-      for (const product of products) deleteItemCart({ productId: product.id })
-      router.push(`/shop/checkout/finish?id=${isCheckouted.id}`)
+    if (!isCheckouted?.id) {
+      toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
       return
     }
-    toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
+
+    const payment = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
+    )
+    for (const product of products) deleteItemCart({ productId: product.id })
+    window.snap.pay(payment.data.token)
   }
 
   return (
@@ -223,32 +222,6 @@ const Checkout = () => {
       <Divider />
 
       <div className='p-4'>
-        <div className='font-medium'>
-          Metode Pembayaran <span className='font-normal text-gray_r-11'>(Wajib dipilih)</span>
-        </div>
-        <div className='grid gap-y-3 mt-4'>
-          {payments.map((payment, index) => (
-            <button
-              type='button'
-              className={
-                'text-left border border-gray_r-6 rounded-md p-3 ' +
-                (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')
-              }
-              onClick={() => setSelectedPayment(payment.name)}
-              key={index}
-            >
-              <p>
-                {payment.name} - {payment.number}
-              </p>
-              <p className='mt-1 text-gray_r-11'>PT. Indoteknik Dotcom Gemilang</p>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <Divider />
-
-      <div className='p-4'>
         <div className='font-medium'>Purchase Order</div>
 
         <div className='mt-4 flex gap-x-3'>
@@ -284,15 +257,16 @@ const Checkout = () => {
           {isLoading ? 'Loading...' : 'Bayar'}
         </button>
       </div>
+
+      <Script
+        async
+        src='https://app.sandbox.midtrans.com/snap/snap.js'
+        data-client-key=''
+      />
     </>
   )
 }
 
-const payments = [
-  { name: 'BCA', number: '8870-4000-81' },
-  { name: 'MANDIRI', number: '155-0067-6869-75' }
-]
-
 const SectionAddress = ({ address, label, url }) => (
   <div className='p-4'>
     <div className='flex justify-between items-center'>