From cff198277e14450f8d20d9e18548325e6f277682 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 8 May 2023 16:40:15 +0700
Subject: raja ongkir

---
 src/lib/checkout/components/Checkout.jsx | 211 +++++++++++++++++++++++++++++--
 1 file changed, 203 insertions(+), 8 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 eee679fd..111117c9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -19,6 +19,7 @@ import axios from 'axios'
 import Image from '@/core/components/elements/Image/Image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
+import ExpedisiList from '../api/ExpedisiList'
 
 const Checkout = () => {
   const router = useRouter()
@@ -61,7 +62,22 @@ const Checkout = () => {
   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([])
+  const [listserviceExpedisi, setListServiceExpedisi] = useState([])
+  const [selectedExpedisi, setSelectedExpedisi] = useState(0)
+  const [biayaKirim, setBiayaKirim] = useState(null)
+  const [checkWeigth, setCheckWeight] = useState(false)
+
+  useEffect(() => {
+    const loadExpedisi = async () => {
+      let dataExpedisi = await ExpedisiList()
+      dataExpedisi = dataExpedisi.map((city) => ({ value: city.id, label: city.name }))
+      setExpedisi(dataExpedisi)
+    }
+    loadExpedisi()
+  }, [])
 
   useEffect(() => {
     const loadProducts = async () => {
@@ -95,16 +111,44 @@ const Checkout = () => {
     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])
 
+  useEffect(() => {
+    const loadServiceRajaOngkir = async () => {
+      const body = {
+        origin: 155,
+        destination: selectedAddress.shipping.rajaongkirCityId,
+        weight: totalWeight,
+        courier: selectedExpedisi,
+        originType: 'city',
+        destinationType: 'city'
+      }
+      setBiayaKirim(0)
+      const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
+      setListServiceExpedisi(dataService.data[0].costs)
+    }
+    if (selectedExpedisi != 0 && totalWeight > 0) {
+      loadServiceRajaOngkir()
+    } else {
+      setListServiceExpedisi()
+      setBiayaKirim(0)
+    }
+  }, [selectedExpedisi, selectedAddress, totalWeight])
+
   const poNumber = useRef(null)
   const poFile = useRef(null)
 
@@ -125,6 +169,7 @@ const Checkout = () => {
       partner_shipping_id: selectedAddress.shipping.id,
       partner_invoice_id: selectedAddress.invoicing.id,
       order_line: JSON.stringify(productOrder),
+      delivery_amount : biayaKirim,
       type: 'sale_order'
     }
     if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -136,10 +181,11 @@ const Checkout = () => {
       return
     }
 
-    for (const product of products) deleteItemCart({ productId: product.id })
+    // for (const product of products) deleteItemCart({ productId: product.id })
     const payment = await axios.post(
       `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
     )
+    console.log(payment)
     setIsLoading(false)
     window.location.href = payment.data.redirectUrl
   }
@@ -162,9 +208,50 @@ const Checkout = () => {
 
         <Divider />
 
-        <PickupAddress label='Alamat Pickup' />
-
-        <Divider />
+         {/* <PickupAddress label='Alamat Pickup' /> */}
+         <SectionAddress
+              address={selectedAddress.shipping}
+              label='Alamat Kirim'
+              url='/my/address?select=shipping'
+            ></SectionAddress>
+            <Divider />
+            <SectionAddress
+              address={selectedAddress.invoicing}
+              label='Alamat Penagihan'
+              url='/my/address?select=invoice'
+            ></SectionAddress>
+            <Divider />
+            <SectionValidation
+              address={selectedAddress.invoicing}
+              checkWeigth={checkWeigth}
+            ></SectionValidation>
+            <Divider />
+            <SectionExpedisi
+              address={selectedAddress.shipping}
+              listExpedisi={listExpedisi}
+              setSelectedExpedisi={setSelectedExpedisi}
+              checkWeigth={checkWeigth}
+            ></SectionExpedisi>
+            <Divider />
+            {listserviceExpedisi && (
+              <div className='p-4'>
+                <div className='flex justify-between items-center'>
+                  <div className='font-medium'>Service Type Expedisi : </div>
+                  <div>
+                    <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}>
+                      <option value=''>Service Type</option>
+                      {listserviceExpedisi.map((service) => (
+                        <option value={service.cost[0].value} key={service.service}>
+                          {' '}
+                          {service.service.toUpperCase()}{' '}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            )}
+            <Divider />
 
         <div className='p-4 flex flex-col gap-y-4'>
           {products && <VariantGroupCard openOnClick={false} variants={products} />}
@@ -195,12 +282,16 @@ const Checkout = () => {
               <div className='text-gray_r-11'>PPN 11%</div>
               <div>{currencyFormat(taxTotal)}</div>
             </div>
+            <div className='flex gap-x-2 justify-between'>
+              <div className='text-gray_r-11'>Biaya Kirim</div>
+              <div>{currencyFormat(biayaKirim)}</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(totalAmount - totalDiscountAmount + taxTotal)}
+              {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + biayaKirim)}
             </div>
           </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -262,8 +353,49 @@ const Checkout = () => {
       <DesktopView>
         <div className='container mx-auto py-10 flex'>
           <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
-            <PickupAddress label='Alamat Pickup' />
-
+            {/* <PickupAddress label='Alamat Pickup' /> */}
+            <SectionAddress
+              address={selectedAddress.shipping}
+              label='Alamat Kirim'
+              url='/my/address?select=shipping'
+            ></SectionAddress>
+            <Divider />
+            <SectionAddress
+              address={selectedAddress.invoicing}
+              label='Alamat Penagihan'
+              url='/my/address?select=invoice'
+            ></SectionAddress>
+            <Divider />
+            <SectionValidation
+              address={selectedAddress.invoicing}
+              checkWeigth={checkWeigth}
+            ></SectionValidation>
+            <Divider />
+            <SectionExpedisi
+              address={selectedAddress.shipping}
+              listExpedisi={listExpedisi}
+              setSelectedExpedisi={setSelectedExpedisi}
+              checkWeigth={checkWeigth}
+            ></SectionExpedisi>
+            <Divider />
+            {listserviceExpedisi && (
+              <div className='p-4'>
+                <div className='flex justify-between items-center'>
+                  <div className='font-medium'>Service Type Expedisi : </div>
+                  <div>
+                    <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}>
+                      <option value=''>Service Type</option>
+                      {listserviceExpedisi.map((service) => (
+                        <option value={service.cost[0].value} key={service.service}>
+                          {' '}
+                          {service.service.toUpperCase()}{' '}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            )}
             <Divider />
 
             <div className='p-4'>
@@ -298,6 +430,9 @@ const Checkout = () => {
                               ? `| ${product?.attributes.join(', ')}`
                               : ''}
                           </div>
+                          <div className='text-gray_r-11 mt-2'>
+                            Berat item : {product?.weight} Kg
+                          </div>
                         </div>
                       </td>
                       <td>
@@ -369,6 +504,10 @@ const Checkout = () => {
                   <div className='text-gray_r-11'>PPN 11%</div>
                   <div>{currencyFormat(taxTotal)}</div>
                 </div>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Biaya Kirim</div>
+                  <div>{currencyFormat(biayaKirim)}</div>
+                </div>
               </div>
 
               <hr className='my-4 border-gray_r-6' />
@@ -376,7 +515,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(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))}
                 </div>
               </div>
               <p className='text-caption-2 text-gray_r-11 leading-5'>
@@ -460,6 +599,62 @@ const SectionAddress = ({ address, label, url }) => (
     )}
   </div>
 )
+
+const SectionValidation = ({ address, checkWeigth }) => (
+  address?.rajaongkirCityId == 0 && (
+    <div className='p-4'>
+      <div className='flex justify-between items-center'>
+        <div>
+          <p className='mt-2 text-gray_r-11'>
+            SIlahkan Update alamat kirim melalui{' '}
+            <Link className='text-caption-1 inline' href={`/my/address/${address.id}/edit`}>
+              Link ini !
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  checkWeigth == true && (
+    <div className='p-4'>
+      <div className='flex justify-between items-center'>
+        <div>
+          <p className='mt-2 text-gray_r-11'>
+            Ada item barang yang belum di setting berat nya, silahkan hub admin di{' '}
+            <span>
+              <a
+                className='text-danger-500'
+                href='https://api.whatsapp.com/send?phone=628128080622'
+              >
+                Link InI !
+              </a>
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+)
+
+const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+  (address?.rajaongkirCityId > 0 && checkWeigth != true) && (
+    <div className='p-4'>
+      <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)}>
+            <option value=''>Pengiriman</option>
+            {listExpedisi.map((expedisi) => (
+              <option value={expedisi.label} key={expedisi.value}>
+                {' '}
+                {expedisi.label.toUpperCase()}{' '}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  )
 const PickupAddress = ({ label }) => (
   <div className='p-4'>
     <div className='flex justify-between items-center'>
-- 
cgit v1.2.3

