logo and mapping courier

1 files changed, 157 insertions, 57 deletions

diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx
index 2098d5b5..8b59d210 100644
--- a/src/lib/checkout/components/SectionExpedition.jsx
+++ b/src/lib/checkout/components/SectionExpedition.jsx
@@ -1,7 +1,7 @@
 import { Skeleton, Spinner } from '@chakra-ui/react';
 import axios from 'axios';
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'react-query';
 import { useAddress } from '../stores/useAdress';
@@ -9,6 +9,8 @@ import { useAddress } from '../stores/useAdress';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { useCheckout } from '../stores/stateCheckout';
 import { formatShipmentRange } from '../utils/functionCheckouit';
+import Image from 'next/image';
+import toast from 'react-hot-toast';
 
 function mappingItems(products) {
   return products?.map((item) => ({
@@ -21,6 +23,57 @@ function mappingItems(products) {
   }));
 }
 
+function reverseMappingCourier(couriersOdoo, couriers) {
+  // Buat peta courier berdasarkan nama courier dari couriers
+  const courierMap = couriers.reduce((acc, item) => {
+    const { courier_name, courier_code, courier_service_code } = item;
+    const key = courier_name.toLowerCase();
+
+    if (!acc[key]) {
+      acc[key] = {
+        courier_name: item.courier_name,
+        courier_code: courier_code,
+        service_type: {},
+      };
+    }
+
+    acc[key].service_type[courier_service_code] = {
+      service_name: item.courier_service_name,
+      duration: item.duration,
+      shipment_range: item.shipment_duration_range,
+      shipment_unit: item.shipment_duration_unit,
+      price: item.price,
+      service_type: item.service_type,
+      description: item.description,
+    };
+
+    return acc;
+  }, {});
+
+  // Iterasi berdasarkan couriersOdoo
+  return couriersOdoo.map((courierOdoo) => {
+    const courierNameKey = courierOdoo.label.toLowerCase();
+    const carrierId = courierOdoo.carrierId;
+
+    const mappedCourier = courierMap[courierNameKey] || false;
+
+    if (!mappedCourier) {
+      return {
+        ...courierOdoo,
+        courier: false,
+      };
+    }
+
+    return {
+      ...courierOdoo,
+      courier: {
+        ...mappedCourier,
+        courier_id_odoo: carrierId,
+      },
+    };
+  });
+}
+
 function mappingCourier(couriersOdoo, couriers, notIncludeInstant = false) {
   const validCourierMap = couriersOdoo.reduce((acc, courier) => {
     acc[courier.label.toLowerCase()] = courier.carrierId;
@@ -110,7 +163,9 @@ export default function SectionExpedition({ products }) {
   const { control, handleSubmit } = useForm();
   const [serviceOptions, setServiceOptions] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
+  const [selectedE, setIsOpenCourier] = useState(false);
   const [onFocusSelectedCourier, setOnFocuseSelectedCourier] = useState(false);
+  const [couriers, setCouriers] = useState(null);
 
   const {
     checkWeigth,
@@ -173,22 +228,31 @@ export default function SectionExpedition({ products }) {
     }
   );
 
-  const couriers =
-    mappingCourier(listExpedisi, data?.data?.pricing, notIncludeInstant) ||
-    null;
+  console.log('ini response', data);
 
-  console.log('ini scourier', data?.data?.pricing);
+  useEffect(() => {
+    if (data) {
+      const couriers = reverseMappingCourier(listExpedisi, data?.data?.pricing);
+      setCouriers(couriers);
+      console.log('ini scourier', couriers);
+    }
+  }, [data]);
 
-  const onCourierChange = (e) => {
+  const onCourierChange = (code) => {
     setIsOpen(false);
-    const courier = e.target.value;
+    setOnFocuseSelectedCourier(false);
+    const courier = code;
     setSelectedService(null);
-    setSelectedCourier(courier);
-    // setSelectedCourierId(Object.values(couriers[courier]?.courier_id_odoo);
     setBiayaKirim(0);
-    if (courier && courier !== '0' && courier !== '32' && couriers[courier]) {
-      setServiceOptions(Object.values(couriers[courier]?.service_type));
+    if (courier !== 0 && courier !== 32) {
+      if (courier.courier) {
+        setSelectedCourier(courier.courier.courier_code);
+        setServiceOptions(Object.values(courier.courier.service_type));
+      } else {
+        toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+      }
     } else {
+      setSelectedCourier(courier === 32 ? 'SELF PICKUP' : null);
       setServiceOptions([]);
     }
   };
@@ -198,6 +262,11 @@ export default function SectionExpedition({ products }) {
     console.log(data);
   };
 
+  const handleOnFocuse = (value) => {
+    setOnFocuseSelectedCourier(!value);
+    setIsOpen(false);
+  };
+
   const handleSelect = (service) => {
     setSelectedService(service);
     setBiayaKirim(service?.price);
@@ -206,48 +275,79 @@ export default function SectionExpedition({ products }) {
     setIsOpen(false);
   };
 
+  console.log('ini selectedCourier', selectedCourier);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className='px-4 py-2'>
         <div className='flex justify-between items-center'>
           <div className='font-medium'>Pilih Ekspedisi: </div>
-          <div className='w-[250px]'>
-            <div className='flex items-center gap-x-4'>
-              <select
-                className={`form-input `}
-                onChange={onCourierChange}
-                onMouseDown={() => setOnFocuseSelectedCourier(true)}
-                required
-              >
-                {!isLoading ? (
-                  <>
-                    <option value='0'>Pilih Pengiriman</option>
-                    <option value='32'>SELF PICKUP</option>
-                    {couriers &&
-                      Object.values(couriers)?.map((expedisi) => (
-                        <option
-                          value={expedisi.courier_code}
-                          key={expedisi.courier_name}
-                        >
-                          {' '}
-                          {expedisi.courier_name}
-                        </option>
-                      ))}
-                  </>
-                ) : (
-                  <>
-                    <option disabled className='skeleton-option'>
-                      <Skeleton height={40} containerClassName='w-full' />
-                    </option>
-                    <option disabled className='skeleton-option'>
-                      <Skeleton height={40} containerClassName='w-full' />
-                    </option>
-                    <option disabled className='skeleton-option'>
-                      <Skeleton height={40} containerClassName='w-full' />
-                    </option>
-                  </>
-                )}
-              </select>
+          <div className='w-[350px] max'>
+            <div className='px-4 py-2'>
+              <div className='flex justify-between items-center'>
+                <div className='w-[450px]'>
+                  <div className='relative'>
+                    {/* Custom Select Input Field */}
+                    <div
+                      className='w-full p-2 border rounded-lg bg-white cursor-pointer'
+                      onClick={() => handleOnFocuse(onFocusSelectedCourier)}
+                    >
+                      {selectedCourier ? (
+                        <div className='flex justify-between'>
+                          <span>{selectedCourier}</span>
+                        </div>
+                      ) : (
+                        <span className='text-gray-500'>Pilih Expedisi</span>
+                      )}
+                    </div>
+
+                    {/* Dropdown Options */}
+                    {onFocusSelectedCourier && (
+                      <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10 max-h-[200px] overflow-y-auto'>
+                        {!isLoading ? (
+                          <>
+                            <div
+                              key={32}
+                              onClick={() => onCourierChange(32)}
+                              className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                            >
+                              <div>
+                                <p className='font-semibold'>SELF PICKUP</p>
+                              </div>
+                            </div>
+                            {couriers?.map((courier) => (
+                              <div
+                                key={courier?.courier?.courier_code}
+                                onClick={() => onCourierChange(courier)}
+                                className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer'
+                              >
+                                <div>
+                                  <p className='font-semibold'>
+                                    {courier?.label}
+                                  </p>
+                                </div>
+                                <span className='font-semibold'>
+                                  <Image
+                                    src={courier?.logo}
+                                    alt={courier?.courier?.courier_name}
+                                    width={50}
+                                    height={50}
+                                  />
+                                </span>
+                              </div>
+                            ))}
+                          </>
+                        ) : (
+                          <>
+                            <Skeleton height={40} containerClassName='w-full' />
+                            <Skeleton height={40} containerClassName='w-full' />
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
             </div>
             {checkoutValidation && (
               <span className='text-sm text-red-500'>
@@ -276,9 +376,9 @@ export default function SectionExpedition({ products }) {
         )}
       </div>
 
-      {selectedCourier &&
-        selectedCourier !== '32' &&
-        selectedCourier !== '0' && (
+      {serviceOptions.length > 0 && selectedCourier &&
+        selectedCourier !== 32 &&
+        selectedCourier !== 0 && (
           <div className='px-4 py-2'>
             <div className='flex justify-between items-center'>
               <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
@@ -294,8 +394,9 @@ export default function SectionExpedition({ products }) {
                         <span>{selectedService.service_name}</span>
                         <span className='font-semibold'>
                           {currencyFormat(
-                            Math.round(parseInt(selectedService?.price * 1.1) / 1000) *
-                              1000
+                            Math.round(
+                              parseInt(selectedService?.price * 1.1) / 1000
+                            ) * 1000
                           )}
                         </span>
                       </div>
@@ -305,8 +406,6 @@ export default function SectionExpedition({ products }) {
                       </span>
                     )}
                   </div>
-
-                  {/* Dropdown Options */}
                   {isOpen && (
                     <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10'>
                       {serviceOptions.map((service) => (
@@ -328,8 +427,9 @@ export default function SectionExpedition({ products }) {
                           </div>
                           <span className='font-semibold'>
                             {currencyFormat(
-                              Math.round(parseInt(service?.price * 1.1) / 1000) *
-                                1000
+                              Math.round(
+                                parseInt(service?.price * 1.1) / 1000
+                              ) * 1000
                             )}
                           </span>
                         </div>