2 files changed, 80 insertions, 28 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index b0f8f884..152b84ed 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -1674,10 +1674,6 @@ const SectionValidation = ({ address }) =>
     </BottomPopup>
   );
 
-const SectionExpedisiBiteship = ({ listExpedisi, setSelectedExpedisi }) => (
-  <></>
-);
-
 const SectionExpedisi = ({
   address,
   listExpedisi,
diff --git a/src/lib/checkout/components/SectionExpedition.tsx b/src/lib/checkout/components/SectionExpedition.jsx
index a6e05893..ead65a6f 100644
--- a/src/lib/checkout/components/SectionExpedition.tsx
+++ b/src/lib/checkout/components/SectionExpedition.jsx
@@ -7,6 +7,8 @@ import { useForm, Controller } from 'react-hook-form';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Spinner } from '@chakra-ui/react';
 
+import currencyFormat from '@/core/utils/currencyFormat';
+
 function mappingItems(products) {
   return products?.map((item) => ({
     name: item.parent.name,
@@ -52,26 +54,37 @@ function mappingCourier(couriers) {
   }, {});
 }
 
-interface CourierService {
-  courier_name: string;
-  courier_code: string;
-  service_type: {
-    [key: string]: {
-      service_name: string;
-      duration: number;
-      shipment_duration: number;
-      price: number;
-      service_type: string;
-      description: string;
-    };
-  };
-}
+// interface CourierService {
+//   courier_name: string;
+//   courier_code: string;
+//   service_type: {
+//     [key: string]: {
+//       service_name: string;
+//       duration: number;
+//       shipment_duration: number;
+//       price: number;
+//       service_type: string;
+//       description: string;
+//     };
+//   };
+// }
+
+// interface ServiceOption {
+//   service_name: string;
+//   duration: number;
+//   shipment_duration: number;
+//   price: number;
+//   service_type: string;
+//   description: string;
+// }
 
 export default function SectionExpedition({ products }) {
   const { addressMaps, coordinate, postalCode } = useAddress();
   const { control, handleSubmit } = useForm();
   const [selectedCourier, setSelectedCourier] = useState('');
   const [serviceOptions, setServiceOptions] = useState([]);
+  const [selectedService, setSelectedService] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
 
   let destination = {};
   let items = mappingItems(products);
@@ -92,7 +105,7 @@ export default function SectionExpedition({ products }) {
     let body = {
       ...destination,
       couriers:
-        'gojek, grab, deliveree, lalamove, jne, tiki, ninja, lion, rara, sicepat, jnt, pos, idexpress, rpx, wahana, jdl, pos, anteraja, sap, paxel, borzo',
+        'gojek,grab,deliveree,lalamove,jne,tiki,ninja,lion,rara,sicepat,jnt,pos,idexpress,rpx,wahana,jdl,pos,anteraja,sap,paxel,borzo',
       items: items,
     };
     try {
@@ -116,7 +129,7 @@ export default function SectionExpedition({ products }) {
     }
   );
 
-  const couriers: CourierService = mappingCourier(data?.data?.pricing);
+  const couriers = mappingCourier(data?.data?.pricing);
 
   console.log('couriers', couriers);
 
@@ -132,15 +145,15 @@ export default function SectionExpedition({ products }) {
     }
   };
 
-  console.log(
-    'serviceOptions',
-    couriers[selectedCourier]?.service_type,
-    selectedCourier
-  );
   const onSubmit = (data) => {
     console.log(data);
   };
 
+  const handleSelect = (service) => {
+    setSelectedService(service);
+    setIsOpen(false);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       {/* Dropdown untuk memilih jenis pengiriman */}
@@ -215,8 +228,51 @@ export default function SectionExpedition({ products }) {
         <div className='px-4 py-2'>
           <div className='flex justify-between items-center'>
             <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
-            <div className='w-[250px]'>
-              <select
+            <div className='w-[350px]'>
+              <div className='relative'>
+                {/* Custom Select Input Field */}
+                <div
+                  className='w-full p-2 border rounded-lg bg-white cursor-pointer'
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  {selectedService ? (
+                    <div className='flex justify-between'>
+                      <span>{selectedService.service_name}</span>
+                      <span className='font-semibold'>
+                        {currencyFormat(selectedService.price)}
+                      </span>
+                    </div>
+                  ) : (
+                    <span className='text-gray-500'>
+                      Pilih layanan pengiriman
+                    </span>
+                  )}
+                </div>
+
+                {/* Dropdown Options */}
+                {isOpen && (
+                  <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10'>
+                    {serviceOptions.map((service) => (
+                      <div
+                        key={service.service_type}
+                        onClick={() => handleSelect(service)}
+                        className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                      >
+                        <div>
+                          <p className='font-semibold'>
+                            {service.service_name}
+                          </p>
+                          <p className='text-gray-600 text-sm'>
+                            Estimasi Tiba {service.duration}
+                          </p>
+                        </div>
+                        <span className='font-semibold'>{currencyFormat(service.price)}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {/* <select
                 className='form-input'
                 // onChange={(e) => setSelectedServiceType(e.target.value)}
               >
@@ -238,7 +294,7 @@ export default function SectionExpedition({ products }) {
                     </option>
                   )
                 )}
-              </select>
+              </select> */}
             </div>
           </div>
         </div>