From d725e36151eea62ace5e1136e7963600da0394f0 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 12 May 2023 16:14:53 +0700
Subject: fedback testing

---
 src/lib/checkout/components/Checkout.jsx | 214 +++++++++++++++++++------------
 1 file changed, 129 insertions(+), 85 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index b51c9b34..03d3e2d9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -69,13 +69,21 @@ const Checkout = () => {
   const [listExpedisi, setExpedisi] = useState([])
   const [listserviceExpedisi, setListServiceExpedisi] = useState([])
   const [selectedExpedisi, setSelectedExpedisi] = useState(0)
-  const [biayaKirim, setBiayaKirim] = useState(null)
+  const [selectedCarrierId, setselectedCarrierId] = useState(0)
+  const [selectedCarrier, setselectedCarrier] = useState(0)
+  const [biayaKirim, setBiayaKirim] = useState(0)
   const [checkWeigth, setCheckWeight] = useState(false)
+  const [selectedServiceType, setSelectedServiceType] = useState(null)
+  const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
 
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
-      dataExpedisi = dataExpedisi.map((city) => ({ value: city.id, label: city.name }))
+      dataExpedisi = dataExpedisi.map((expedisi) => ({
+        value: expedisi.id,
+        label: expedisi.name,
+        carrierId: expedisi.deliveryCarrierId
+      }))
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
@@ -135,22 +143,47 @@ const Checkout = () => {
         origin: 155,
         destination: selectedAddress.shipping.rajaongkirCityId,
         weight: totalWeight,
-        courier: selectedExpedisi,
+        courier: selectedCarrier,
         originType: 'city',
         destinationType: 'city'
       }
       setBiayaKirim(0)
       const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
       setListServiceExpedisi(dataService.data[0].costs)
-      setBiayaKirim(dataService.data[0].costs[0].cost[0].value)
+      if (dataService.data[0].costs[0]) {
+        setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value)
+        setselectedExpedisiService(
+          dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service
+        )
+        toast.success('Silahkan Pilih Service Tipe')
+      } else {
+        toast.error('Tidak Ada Service, Silahkan Pilih Expedisi lain !')
+      }
     }
-    if (selectedExpedisi != 0 && selectedExpedisi != 1 && totalWeight > 0) {
+    if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
       loadServiceRajaOngkir()
     } else {
       setListServiceExpedisi()
       setBiayaKirim(0)
+      setselectedExpedisiService()
+    }
+  }, [selectedCarrier, selectedAddress, totalWeight])
+
+  useEffect(() => {
+    if (selectedServiceType) {
+      let serviceType = selectedServiceType.split(',')
+      setBiayaKirim(serviceType[0])
+      setselectedExpedisiService(serviceType[1])
+    }
+  }, [selectedServiceType])
+
+  useEffect(() => {
+    if (selectedExpedisi) {
+      let serviceType = selectedExpedisi.split(',')
+      setselectedCarrier(serviceType[0])
+      setselectedCarrierId(serviceType[1])
     }
-  }, [selectedExpedisi, selectedAddress, totalWeight])
+  }, [selectedExpedisi])
 
   const poNumber = useRef(null)
   const poFile = useRef(null)
@@ -172,7 +205,9 @@ const Checkout = () => {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
       order_line: JSON.stringify(productOrder),
-      delivery_amount : biayaKirim,
+      delivery_amount: biayaKirim,
+      carrier_id: selectedCarrierId,
+      delivery_service_type: selectedExpedisiService,
       type: 'sale_order'
     }
     if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -188,7 +223,6 @@ const Checkout = () => {
     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
   }
@@ -211,50 +245,38 @@ const Checkout = () => {
 
         <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 />
+        {/* <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 />
+        <SectionListService
+          listserviceExpedisi={listserviceExpedisi}
+          setSelectedServiceType={setSelectedServiceType}
+        ></SectionListService>
+        <Divider />
+        <Divider />
+        <Divider />
 
         <div className='p-4 flex flex-col gap-y-4'>
           {products && <VariantGroupCard openOnClick={false} variants={products} />}
@@ -294,7 +316,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 + biayaKirim)}
+              {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))}
             </div>
           </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -336,7 +358,9 @@ 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 || selectedExpedisi == 0
+            }
           >
             {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
           </button>
@@ -381,23 +405,10 @@ const Checkout = () => {
               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)}>
-                      {listserviceExpedisi.map((service) => (
-                        <option value={service.cost[0].value} key={service.service}>
-                          {' '}
-                          {service.service.toUpperCase()}{' '}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              </div>
-            )}
+            <SectionListService
+              listserviceExpedisi={listserviceExpedisi}
+              setSelectedServiceType={setSelectedServiceType}
+            ></SectionListService>
             <Divider />
 
             <div className='p-4'>
@@ -523,7 +534,9 @@ 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 + parseInt(biayaKirim))}
+                  {currencyFormat(
+                    totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim)
+                  )}
                 </div>
               </div>
               <p className='text-caption-2 text-gray_r-11 leading-5'>
@@ -562,7 +575,14 @@ const Checkout = () => {
               <button
                 className='w-full btn-yellow mt-4'
                 onClick={checkout}
-                disabled={isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0}
+                disabled={
+                  isLoading ||
+                  !products ||
+                  products?.length == 0 ||
+                  priceCheck ||
+                  selectedCarrier == 0 ||
+                  (selectedCarrier != 1 && biayaKirim == 0)
+                }
               >
                 {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
               </button>
@@ -608,7 +628,7 @@ const SectionAddress = ({ address, label, url }) => (
   </div>
 )
 
-const SectionValidation = ({ address, checkWeigth }) => (
+const SectionValidation = ({ address, checkWeigth }) =>
   address?.rajaongkirCityId == 0 && (
     <div className='p-4'>
       <div className='flex justify-between items-center'>
@@ -623,7 +643,6 @@ const SectionValidation = ({ address, checkWeigth }) => (
       </div>
     </div>
   )
-)
 
 const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
   address?.rajaongkirCityId > 0 && (
@@ -632,10 +651,14 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
         <div className='font-medium'>Pilih Expedisi : </div>
         <div>
           <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
-            <option value=''>Pengiriman</option>
-            <option value='1'>SELF PICKUP</option>
+            <option value='0,0'>Pengiriman</option>
+            <option value='1,32'>SELF PICKUP</option>
             {listExpedisi.map((expedisi) => (
-              <option disabled={checkWeigth} value={expedisi.label} key={expedisi.value}>
+              <option
+                disabled={checkWeigth}
+                value={expedisi.label + ',' + expedisi.carrierId}
+                key={expedisi.value}
+              >
                 {' '}
                 {expedisi.label.toUpperCase()}{' '}
               </option>
@@ -644,20 +667,41 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
         </div>
       </div>
       {checkWeigth == true && (
-          <p className='mt-2 text-gray_r-11'>
-          Opsi pengiriman hanya ada self pickup,  , silahkan hub admin di{' '}
+        <p className='mt-2 text-gray_r-11'>
+          Opsi pengiriman hanya ada self pickup, ada berat item yang belum di setting, silahkan hub
+          admin di{' '}
           <span>
-            <a
-              className='text-danger-500'
-              href='https://api.whatsapp.com/send?phone=628128080622'
-            >
+            <a className='text-danger-500' href='https://api.whatsapp.com/send?phone=628128080622'>
               Link InI !
             </a>
           </span>
         </p>
-        )}
+      )}
     </div>
   )
+
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+  listserviceExpedisi?.length > 0 && (
+    <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) => setSelectedServiceType(e.target.value)}>
+            {listserviceExpedisi.map((service) => (
+              <option
+                value={service.cost[0].value + ',' + service.description + '-' + service.service}
+                key={service.service}
+              >
+                {' '}
+                {service.description} - {service.service.toUpperCase()}{' '}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  )
+
 const PickupAddress = ({ label }) => (
   <div className='p-4'>
     <div className='flex justify-between items-center'>
-- 
cgit v1.2.3