From 43bed6bf9ebe559e32e7572ea17278b5f3b0897c Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 11 Jun 2025 16:31:35 +0700
Subject: <miqdad> fix checkout

---
 src/lib/checkout/components/Checkout.jsx | 416 ++++++++++++-------------------
 1 file changed, 154 insertions(+), 262 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 0dc025f5..f6889558 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -28,15 +28,10 @@ import getFileBase64 from '@/core/utils/getFileBase64';
 import { gtagPurchase } from '@/core/utils/googleTag';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import addressesApi from '@/lib/address/api/addressesApi';
-import { MapPinIcon } from 'lucide-react';
 import CartItem from '~/modules/cart/components/Item.tsx';
 import ExpedisiList from '../api/ExpedisiList';
 import { findVoucher, getVoucher, getVoucherNew } from '../api/getVoucher';
 
-import { useAddress } from '../stores/useAdress';
-import SectionExpedition from './SectionExpedition';
-import { useCheckout } from '../stores/stateCheckout';
-import { formatShipmentRange, getToDate } from '../utils/functionCheckouit';
 const SELF_PICKUP_ID = 32;
 
 const { checkoutApi } = require('../api/checkoutApi');
@@ -73,28 +68,14 @@ const Checkout = () => {
         source: query,
         voucher: activeVoucher,
         voucher_shipping: activeVoucherShipping,
-      }),
-    //biteship
-      {
-        keepPreviousData: true, // Menjaga data sebelumnya sampai data baru tersedia
-      }
+      })
   );
 
-  // const [selectedAddress, setSelectedAddress] = useState({
-  //   shipping: null,
-  //   invoicing: null,
-  // });
-  // const [addresses, setAddresses] = useState(null);
-
-  const {
-    selectedAddress,
-    setSelectedAddress,
-    addresses,
-    setAddresses,
-    setAddressMaps,
-    setCoordinate,
-    setPostalCode,
-  } = useAddress();
+  const [selectedAddress, setSelectedAddress] = useState({
+    shipping: null,
+    invoicing: null,
+  });
+  const [addresses, setAddresses] = useState(null);
 
   useEffect(() => {
     if (!auth) return;
@@ -124,37 +105,26 @@ const Checkout = () => {
       return addresses[0];
     };
 
-    let ship = matchAddress('shipping');
-
     setSelectedAddress({
       shipping: matchAddress('shipping'),
       invoicing: matchAddress('invoicing'),
     });
-    setPostalCode(ship?.zip);
-    if (ship?.addressMap) {
-      setAddressMaps(ship?.addressMap);
-      setCoordinate({
-        destination_latitude: ship?.latitude,
-        destination_longitude: ship?.longtitude,
-      });
-    }
   }, [addresses]);
 
-  // const [products, setProducts] = useState(null);
+  const [products, setProducts] = useState(null);
   const [totalWeight, setTotalWeight] = useState(0);
   const [priceCheck, setPriceCheck] = useState(false);
-  // const [listExpedisi, setExpedisi] = useState([]);
+  const [listExpedisi, setExpedisi] = useState([]);
   const [listserviceExpedisi, setListServiceExpedisi] = useState([]);
   const [selectedExpedisi, setSelectedExpedisi] = useState(0);
   const [selectedCarrierId, setselectedCarrierId] = useState(0);
   const [selectedCarrier, setselectedCarrier] = useState(0);
-  //new release
-  // const [biayaKirim, setBiayaKirim] = useState(0);
-  // const [checkWeigth, setCheckWeight] = useState(false);
+  const [biayaKirim, setBiayaKirim] = useState(0);
+  const [checkWeigth, setCheckWeight] = useState(false);
   const [selectedServiceType, setSelectedServiceType] = useState(null);
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null);
-  // const [etd, setEtd] = useState(null);
-  // const [etdFix, setEtdFix] = useState(null);
+  const [etd, setEtd] = useState(null);
+  const [etdFix, setEtdFix] = useState(null);
   const [bottomPopup, SetBottomPopup] = useState(null);
   const [bottomPopupTnC, SetBottomPopupTnC] = useState(null);
   const [itemTnC, setItemTnC] = useState(null);
@@ -165,31 +135,12 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null);
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null);
   const [buttonTerapkan, SetButtonTerapkan] = useState(false);
-  // const [checkoutValidation, setCheckoutValidation] = useState(false);
+  const [checkoutValidation, setCheckoutValidation] = useState(false);
   const [loadingVoucher, setLoadingVoucher] = useState(true);
   const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false);
   const [grandTotal, setGrandTotal] = useState(0);
   const [hasFlashSale, setHasFlashSale] = useState(false);
 
-  const {
-    checkWeigth,
-    setCheckWeight,
-    // hasFlashSale,
-    // setHasFlashSale,
-    checkoutValidation,
-    setCheckoutValidation,
-    biayaKirim,
-    products,
-    setProducts,
-    etd,
-    unit,
-    selectedCourier,
-    selectedCourierId,
-    selectedService,
-    listExpedisi,
-    setExpedisi,
-    productSla
-  } = useCheckout();
   const expedisiValidation = useRef(null);
 
   const voucher = async () => {
@@ -253,7 +204,6 @@ const Checkout = () => {
       return;
     }
 
-
     dataVoucher.forEach((addNewLine) => {
       if (addNewLine.applyType !== 'shipping') {
         // Mencari voucher dalam listVouchers
@@ -346,7 +296,6 @@ const Checkout = () => {
         value: expedisi.id,
         label: expedisi.name,
         carrierId: expedisi.deliveryCarrierId,
-        logo: expedisi.image,
       }));
       setExpedisi(dataExpedisi);
     };
@@ -363,38 +312,38 @@ const Checkout = () => {
     };
   }, []);
 
-  // const hitungDiscountVoucher = (code, source) => {
-  //   let countDiscount = 0;
-  //   if (source === 'voucher') {
-  //     let dataVoucherIndex = listVouchers.findIndex(
-  //       (voucher) => voucher.code == code
-  //     );
-  //     let dataActiveVoucher = listVouchers[dataVoucherIndex];
-  //
-  //     countDiscount = dataActiveVoucher.discountVoucher;
-  //   } else {
-  //     let dataVoucherIndex = listVoucherShippings.findIndex(
-  //       (voucher) => voucher.code == code
-  //     );
-  //     let dataActiveVoucher = listVoucherShippings[dataVoucherIndex];
-  //
-  //     countDiscount = dataActiveVoucher.discountVoucher;
-  //   }
-  //
-  //   /*if (dataActiveVoucher.discountType === 'percentage') {
-  //     countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
-  //     if (
-  //       dataActiveVoucher.maxDiscountAmount > 0 &&
-  //       countDiscount > dataActiveVoucher.maxDiscountAmount
-  //     ) {
-  //       countDiscount = dataActiveVoucher.maxDiscountAmount
-  //     }
-  //   } else {
-  //     countDiscount = dataActiveVoucher.discountAmount
-  //   }*/
-  //
-  //   return countDiscount;
-  // };
+  const hitungDiscountVoucher = (code, source) => {
+    let countDiscount = 0;
+    if (source === 'voucher') {
+      let dataVoucherIndex = listVouchers.findIndex(
+        (voucher) => voucher.code == code
+      );
+      let dataActiveVoucher = listVouchers[dataVoucherIndex];
+
+      countDiscount = dataActiveVoucher.discountVoucher;
+    } else {
+      let dataVoucherIndex = listVoucherShippings.findIndex(
+        (voucher) => voucher.code == code
+      );
+      let dataActiveVoucher = listVoucherShippings[dataVoucherIndex];
+
+      countDiscount = dataActiveVoucher.discountVoucher;
+    }
+
+    /*if (dataActiveVoucher.discountType === 'percentage') {
+      countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
+      if (
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
+      ) {
+        countDiscount = dataActiveVoucher.maxDiscountAmount
+      }
+    } else {
+      countDiscount = dataActiveVoucher.discountAmount
+    }*/
+
+    return countDiscount;
+  };
 
   // useEffect(() => {
   //   if (!listVouchers) return;
@@ -432,71 +381,70 @@ const Checkout = () => {
     setHasFlashSale(hasFlashSale);
   }, [cartCheckout]);
 
-  // useEffect(() => {
-  //   setCheckoutValidation(false);
-  //   const loadServiceRajaOngkir = async () => {
-  //     setLoadingRajaOngkir(true);
-  //     const body = {
-  //       origin: 2127,
-  //       destination: selectedAddress.shipping.rajaongkirCityId,
-  //       weight: totalWeight,
-  //       courier: selectedCarrier,
-  //       originType: 'subdistrict',
-  //       destinationType: 'subdistrict',
-  //     };
-  //     setBiayaKirim(0);
-  //     const dataService = await axios(
-  //       '/api/rajaongkir-service?body=' + JSON.stringify(body)
-  //     );
-  //     setLoadingRajaOngkir(false);
-  //     setListServiceExpedisi(dataService.data[0].costs);
-  //     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
-  //       );
-  //       setEtd(dataService.data[0].costs[0]?.cost[0].etd);
-  //       toast.success('Harap pilih tipe layanan pengiriman');
-  //     } else {
-  //       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
-  //     }
-  //   };
-  //   if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
-  //     loadServiceRajaOngkir();
-  //   } else {
-  //     setListServiceExpedisi();
-  //     setBiayaKirim(0);
-  //     setselectedExpedisiService();
-  //     setEtd();
-  //   }
-  // }, [selectedCarrier, selectedAddress, totalWeight]);
-  //
-  // useEffect(() => {
-  //   if (selectedServiceType) {
-  //     let serviceType = selectedServiceType.split(',');
-  //     setBiayaKirim(serviceType[0]);
-  //     setselectedExpedisiService(serviceType[1]);
-  //     setEtd(serviceType[2]);
-  //   }
-  // }, [selectedServiceType]);
-  //
-  // useEffect(() => {
-  //   if (etd) setEtdFix(calculateEstimatedArrival(etd));
-  // }, [etd]);
-  //
-  // useEffect(() => {
-  //   if (selectedExpedisi) {
-  //     let serviceType = selectedExpedisi.split(',');
-  //     if (serviceType[0] === 0) return;
-  //
-  //     setselectedCarrier(serviceType[0]);
-  //     setselectedCarrierId(serviceType[1]);
-  //     setListServiceExpedisi([]);
-  //   }
-  // }, [selectedExpedisi]);
-  //
+  useEffect(() => {
+    setCheckoutValidation(false);
+    const loadServiceRajaOngkir = async () => {
+      setLoadingRajaOngkir(true);
+      const body = {
+        origin: 2127,
+        destination: selectedAddress.shipping.rajaongkirCityId,
+        weight: totalWeight,
+        courier: selectedCarrier,
+        originType: 'subdistrict',
+        destinationType: 'subdistrict',
+      };
+      setBiayaKirim(0);
+      const dataService = await axios(
+        '/api/rajaongkir-service?body=' + JSON.stringify(body)
+      );
+      setLoadingRajaOngkir(false);
+      setListServiceExpedisi(dataService.data[0].costs);
+      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
+        );
+        setEtd(dataService.data[0].costs[0]?.cost[0].etd);
+        toast.success('Harap pilih tipe layanan pengiriman');
+      } else {
+        toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+      }
+    };
+    if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
+      loadServiceRajaOngkir();
+    } else {
+      setListServiceExpedisi();
+      setBiayaKirim(0);
+      setselectedExpedisiService();
+      setEtd();
+    }
+  }, [selectedCarrier, selectedAddress, totalWeight]);
+
+  useEffect(() => {
+    if (selectedServiceType) {
+      let serviceType = selectedServiceType.split(',');
+      setBiayaKirim(serviceType[0]);
+      setselectedExpedisiService(serviceType[1]);
+      setEtd(serviceType[2]);
+    }
+  }, [selectedServiceType]);
+
+  useEffect(() => {
+    if (etd) setEtdFix(calculateEstimatedArrival(etd));
+  }, [etd]);
+
+  useEffect(() => {
+    if (selectedExpedisi) {
+      let serviceType = selectedExpedisi.split(',');
+      if (serviceType[0] === 0) return;
+
+      setselectedCarrier(serviceType[0]);
+      setselectedCarrierId(serviceType[1]);
+      setListServiceExpedisi([]);
+    }
+  }, [selectedExpedisi]);
 
   const poNumber = useRef(null);
   const poFile = useRef(null);
@@ -524,7 +472,7 @@ const Checkout = () => {
       });
       return;
     }
-    if (selectedCourier === 0 || !selectedCourier) {
+    if (selectedExpedisi === 0) {
       setCheckoutValidation(true);
       if (expedisiValidation.current) {
         const position = expedisiValidation.current.getBoundingClientRect();
@@ -535,20 +483,7 @@ const Checkout = () => {
       }
       return;
     }
-    //new release
-    // if (!selectedService) {
-      toast.error('Harap pilih tipe layanan pengiriman');
-      return;
-    }
-    if (selectedCourier != 1 && biayaKirim == 0) {
-    //   toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
-    //   return;
-    // }
-    // if (!selectedService) {
-    //   toast.error('Harap pilih tipe layanan pengiriman');
-    //   return;
-    // }
-    if (selectedCourier != 1 && biayaKirim == 0) {
+    if (selectedCarrier != 1 && biayaKirim == 0) {
       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
       return;
     }
@@ -558,39 +493,23 @@ const Checkout = () => {
       quantity: product.quantity,
       available_quantity: product?.availableQuantity,
     }));
-    let estimated_courier = etd.split('-').map(Number);
-    let eta_courier = Math.max(...estimated_courier);
-    let eta_courier_start = Math.min(...estimated_courier);
-
     let data = {
-      // partner_shipping_id: auth.partnerId,,
+      // partner_shipping_id: auth.partnerId,
       // partner_invoice_id: auth.partnerId,
       partner_shipping_id: selectedAddress?.shipping?.id || auth.partnerId,
       partner_invoice_id: selectedAddress?.invoicing?.id || auth.partnerId,
       user_id: auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
-      carrier_id: selectedCourierId,
-      // estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla),
-      // estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla),
-      // If NaN conver to 0 (int)
-      estimated_arrival_days_start: (isNaN(parseInt(eta_courier_start)) ? 0 : parseInt(eta_courier_start)) +
-        (isNaN(parseInt(productSla)) ? 0 : parseInt(productSla)),
-
-      estimated_arrival_days: (isNaN(parseInt(eta_courier)) ? 0 : parseInt(eta_courier)) +
-        (isNaN(parseInt(productSla)) ? 0 : parseInt(productSla)),
-
-      delivery_service_type: selectedService?.service_type,
-      // New release
-      // carrier_id: selectedCourierId,
-      estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla),
-      // estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla),
-      // delivery_service_type: selectedService?.service_type,
+      carrier_id: selectedCarrierId,
+      estimated_arrival_days: splitDuration(etd),
+      delivery_service_type: selectedExpedisiService,
       flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false
       voucher: activeVoucher,
       voucher_shipping: activeVoucherShipping,
       type: 'sale_order',
     };
+
     if (query) {
       data.source = 'buy';
     }
@@ -598,8 +517,8 @@ const Checkout = () => {
       if (typeof file == 'undefined') {
         toast.error(
           'Nomor PO ' +
-            poNumber.current.value +
-            ' telah dimasukkan, Harap upload file PO yang dimaksud'
+          poNumber.current.value +
+          ' telah dimasukkan, Harap upload file PO yang dimaksud'
         );
         setIsLoading(false);
         return;
@@ -1240,22 +1159,21 @@ const Checkout = () => {
           </Skeleton>
         )}
         <Divider />
-        <SectionValidation address={selectedAddress.invoicing} />
-        {/*new-relase*/}
-       {/*<SectionExpedisi*/}
-       {/*   address={selectedAddress.shipping}*/}
-       {/*   listExpedisi={listExpedisi}*/}
-       {/*   setSelectedExpedisi={setSelectedExpedisi}*/}
-       {/*   checkWeigth={checkWeigth}*/}
-       {/*   checkoutValidation={checkoutValidation}*/}
-       {/*   expedisiValidation={expedisiValidation}*/}
-       {/*   loadingRajaOngkir={loadingRajaOngkir}*/}
-       {/* />*/}
-       {/* <Divider />*/}
-       {/* <SectionListService*/}
-       {/*   listserviceExpedisi={listserviceExpedisi}*/}
-       {/*   setSelectedServiceType={setSelectedServiceType}*/}
-       {/* /> */}
+        <SectionValidation address={selectedAddress.shipping} />
+        <SectionExpedisi
+          address={selectedAddress.shipping}
+          listExpedisi={listExpedisi}
+          setSelectedExpedisi={setSelectedExpedisi}
+          checkWeigth={checkWeigth}
+          checkoutValidation={checkoutValidation}
+          expedisiValidation={expedisiValidation}
+          loadingRajaOngkir={loadingRajaOngkir}
+        />
+        <Divider />
+        <SectionListService
+          listserviceExpedisi={listserviceExpedisi}
+          setSelectedServiceType={setSelectedServiceType}
+        />
 
         <div className='p-4 flex flex-col gap-y-4'>
           {!!products &&
@@ -1344,10 +1262,7 @@ const Checkout = () => {
               </div>
               <div className='flex gap-x-2 justify-between'>
                 <div className='text-gray_r-11'>
-                  Biaya Kirim{' '}
-                  <p className='text-xs mt-1'>
-                    {formatShipmentRange(etd, unit, productSla)}
-                  </p>
+                  Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p>
                 </div>
                 <div>
                   {currencyFormat(
@@ -1471,8 +1386,7 @@ const Checkout = () => {
             className='flex-1 btn-yellow'
             onClick={checkout}
             disabled={
-            //new release
-              // isLoading ||
+              isLoading ||
               !products ||
               products?.length == 0 ||
               priceCheck ||
@@ -1544,10 +1458,9 @@ const Checkout = () => {
                   />
                 </Skeleton>
               )}
-              {products && <SectionExpedition products={products} />}
               <Divider />
-              <SectionValidation address={selectedAddress.invoicing} />
-              {/* <SectionExpedisi
+              <SectionValidation address={selectedAddress.shipping} />
+              <SectionExpedisi
                 address={selectedAddress.shipping}
                 listExpedisi={listExpedisi}
                 setSelectedExpedisi={setSelectedExpedisi}
@@ -1560,7 +1473,7 @@ const Checkout = () => {
               <SectionListService
                 listserviceExpedisi={listserviceExpedisi}
                 setSelectedServiceType={setSelectedServiceType}
-              /> */}
+              />
 
               <div className='p-4'>
                 <div className='font-medium mb-6'>Detail Pesanan</div>
@@ -1656,9 +1569,7 @@ const Checkout = () => {
                     <div className='flex gap-x-2 justify-between'>
                       <div className='text-gray_r-11'>
                         Biaya Kirim
-                        <p className='text-xs mt-1'>
-                          {formatShipmentRange(etd, unit, productSla)}
-                        </p>
+                        <p className='text-xs mt-1'>{etdFix}</p>
                       </div>
                       <div>
                         {currencyFormat(
@@ -1780,8 +1691,7 @@ const Checkout = () => {
                   className='w-full btn-yellow mt-4'
                   onClick={checkout}
                   disabled={
-                  // new-relase
-                    // isLoading ||
+                    isLoading ||
                     !products ||
                     products?.length == 0 ||
                     priceCheck ||
@@ -1830,32 +1740,14 @@ const SectionAddress = ({ address, label, url }) => (
         <p className='mt-1 text-gray_r-11'>
           {address.street}, {address?.city?.name}
         </p>
-        <div className='flex gap-x-2 items-center mt-4 cursor-pointer'>
-          <MapPinIcon
-            className={
-              address.addressMap
-                ? `h-6 w-6 text-gray-500`
-                : `h-6 w-6 text-red-500`
-            }
-          />
-          {address.addressMap ? (
-            <label>Sudah Pinpoint</label>
-          ) : (
-            <Link href={'/my/address/' + address.id + '/edit'} target='_blank' className='cursor-pointer'>
-              <label className='text-red-500 cursor-pointer '>Belum Pinpoint</label>
-            </Link>
-          )}
-        </div>
       </div>
     )}
   </div>
 );
 
 const SectionValidation = ({ address }) =>
-  //new release
-  // address?.stateId == 0 ||
-  // (address?.rajaongkirCityId == 0 && (
-  address?.stateId == 0 && (
+  address?.stateId == 0 ||
+  (address?.rajaongkirCityId == 0 && (
     <BottomPopup active={true} title='Update Alamat'>
       <div className='leading-7 text-gray_r-12/80'>
         Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
@@ -1869,17 +1761,17 @@ const SectionValidation = ({ address }) =>
         </Link>
       </div>
     </BottomPopup>
-  );
+  ));
 
 const SectionExpedisi = ({
-  address,
-  listExpedisi,
-  setSelectedExpedisi,
-  checkWeigth,
-  checkoutValidation,
-  expedisiValidation,
-  loadingRajaOngkir,
-}) =>
+                           address,
+                           listExpedisi,
+                           setSelectedExpedisi,
+                           checkWeigth,
+                           checkoutValidation,
+                           expedisiValidation,
+                           loadingRajaOngkir,
+                         }) =>
   address?.rajaongkirCityId > 0 && (
     <div className='p-4' ref={expedisiValidation}>
       <div className='flex justify-between items-center'>
@@ -1931,9 +1823,9 @@ const SectionExpedisi = ({
           )}
         </div>
         <style jsx>{`
-          .shake {
-            animation: shake 0.4s ease-in-out;
-          }
+            .shake {
+                animation: shake 0.4s ease-in-out;
+            }
         `}</style>
       </div>
       {checkWeigth == true && (
-- 
cgit v1.2.3

