<hafid> merging new release

1 files changed, 505 insertions, 0 deletions

diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx
new file mode 100644
index 00000000..7a02c6e9
--- /dev/null
+++ b/src/lib/checkout/components/SectionExpedition.jsx
@@ -0,0 +1,505 @@
+import { Skeleton, Spinner } from '@chakra-ui/react';
+import axios from 'axios';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useQuery } from 'react-query';
+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';
+
+import odooApi from '@/core/api/odooApi';
+import { getProductsSla } from '../api/checkoutApi';
+
+function mappingItems(products) {
+  return products?.map((item) => ({
+    // name: item.parent.name || item?.name || 'Unknown Product',
+    name:  item?.name,
+    description: `${item.code} - ${item.name}`,
+    value: item.price.priceDiscount,
+    weight: item.weight * 1000,
+    quantity: item.quantity,
+  }));
+}
+
+function reverseMappingCourier(couriersOdoo, couriers, includeInstant = false) {
+  // 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_code.toLowerCase();
+
+    if (
+      !includeInstant && (['hours'].includes(item.shipment_duration_unit.toLowerCase()) || item.service_type == 'same_day')
+      
+    ) {
+      return acc;
+    }
+
+    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: courier_service_code,
+      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;
+    return acc;
+  }, {});
+
+  return couriers?.reduce((result, item) => {
+    const { courier_name, courier_code, courier_service_code } = item;
+    if (!validCourierMap[courier_name.toLowerCase()]) {
+      return result; // Jika tidak ada, lewati item ini
+    }
+
+    if (
+      notIncludeInstant &&
+      ['hours'].includes(item.shipment_duration_unit.toLowerCase())
+    ) {
+      return result;
+    }
+
+    const carrierId = validCourierMap[courier_name];
+
+    // Jika courier_code belum ada di result, buat objek baru untuknya
+    if (!result[courier_code]) {
+      result[courier_code] = {
+        courier_name: item.courier_name,
+        courier_code: courier_code,
+        courier_id_odoo: carrierId,
+        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,
+          },
+        },
+      };
+    } else {
+      result[courier_code].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,
+        shipment_duration: item.duration,
+        price: item.price,
+        service_type: item.service_type,
+        description: item.description,
+      };
+    }
+
+    return result;
+  }, {});
+}
+
+// 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 [serviceOptions, setServiceOptions] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [onFocusSelectedCourier, setOnFocuseSelectedCourier] = useState(false);
+  const [couriers, setCouriers] = useState(null);
+  const [slaProducts, setSlaProducts] = useState(null);
+  const [savedServiceOptions, setSavedServiceOptions] = useState([]);
+
+  const {
+    checkWeigth,
+    checkoutValidation,
+    setBiayaKirim,
+    setUnit,
+    setEtd,
+    selectedCourier,
+    setSelectedCourier,
+    selectedService,
+    setSelectedService,
+    listExpedisi,
+    productSla,
+    setProductSla,
+    setSelectedCourierId,
+  } = useCheckout();
+
+  let destination = {};
+  let items = mappingItems(products);
+
+  if (addressMaps) {
+    destination = {
+      origin_latitude: -6.3031123,
+      origin_longitude: 106.7794934999,
+      ...coordinate,
+    };
+  } else if (postalCode) {
+    destination = {
+      origin_postal_code: 14440,
+      destination_postal_code: postalCode,
+    };
+  }
+
+  const fetchSlaProducts = async () => {
+    try {
+      let productsMapped = products.map((item) => ({
+        id: item.id,
+        quantity: item.quantity,
+      }));
+
+      let data = {
+        products: JSON.stringify(productsMapped),
+      }
+      const res = await odooApi('POST', `/api/v1/product/variants/sla`, data);
+      setSlaProducts(res);
+    } catch (error) {
+      console.error('Failed to fetch expedition rates:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchSlaProducts();
+  }, []);
+
+  useEffect(() => {
+    if (slaProducts) {
+      let productSla = slaProducts?.slaTotal;
+      if (slaProducts.slaUnit === 'jam') {
+        productSla = 1;
+      }
+      setProductSla(productSla);
+    }
+  }, [slaProducts]);
+
+  const fetchExpedition = async () => {
+    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',
+      items: items,
+    };
+    try {
+      const response = await axios.get(`/api/biteship-service`, {
+        params: { body: JSON.stringify(body) },
+      });
+      return response;
+    } catch (error) {
+      console.error('Failed to fetch expedition rates:', error);
+    }
+  };
+
+  const { data, isLoading } = useQuery(
+    ['expedition', JSON.stringify(destination), JSON.stringify(items)],
+    fetchExpedition,
+    {
+      enabled:
+        Boolean(Object.keys(destination).length) &&
+        items?.length > 0 &&
+        !checkWeigth &&
+        onFocusSelectedCourier,
+      staleTime: Infinity,
+      cacheTime: Infinity,
+    }
+  );
+
+  useEffect(() => {
+    const instant = slaProducts?.includeInstant || false;
+    if (data) {
+      const couriers = reverseMappingCourier(
+        listExpedisi,
+        data?.data?.pricing,
+        instant
+      );
+      setCouriers(couriers);
+    }
+  }, [data, slaProducts]);
+
+  const onCourierChange = (code) => {
+    setIsOpen(false);
+    setOnFocuseSelectedCourier(false);
+    const courier = code;
+    setSelectedService(null);
+    setBiayaKirim(0);
+    if (courier !== 0 && courier !== 32) {
+      if (courier.courier) {
+        setSelectedCourier(courier.courier.courier_code);
+        setSelectedCourierId(courier.carrierId);
+        setServiceOptions(Object.values(courier.courier.service_type));
+      } else {
+        if (
+          (courier.label === 'GRAB' || courier.label === 'GOJEK') &&
+          !addressMaps
+        ) {
+          toast.error(
+            'Maaf, layanan kurir ' +
+              courier.label +
+              ' tidak tersedia. Karena Anda Belum Melakukan Pengaturan PinPoint Alamat Pegiriman.'
+          );
+        } else {
+          toast.error(
+            'Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'
+          );
+        }
+        setServiceOptions([]);
+      }
+    } else {
+      setSelectedCourier(courier === 32 ? 'SELF PICKUP' : null);
+      setSelectedCourierId(courier);
+      setServiceOptions([]);
+    }
+  };
+
+  const handleOnFocuse = (value) => {
+    setOnFocuseSelectedCourier(!value);
+    setIsOpen(false);
+  };
+
+  const handleSelect = (service) => {
+    setSelectedService(service);
+    setBiayaKirim(service?.price);
+    setEtd(service?.shipment_range);
+    setUnit(service?.shipment_unit);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+  if (serviceOptions.length > 0) {
+    setSavedServiceOptions(serviceOptions);
+  }
+}, [serviceOptions]);
+
+  return (
+    <form >
+      <div className='px-4 py-2'>
+        <div className='flex justify-between items-center'>
+          <div className='font-medium'>Pilih Ekspedisi: </div>
+          <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'>
+                *silahkan pilih expedisi
+              </span>
+            )}
+          </div>
+          <style jsx>{`
+            .shake {
+              animation: shake 0.4s ease-in-out;
+            }
+          `}</style>
+        </div>
+        {checkWeigth == true && (
+          <p className='mt-4 text-gray_r-11 leading-6'>
+            Mohon maaf, pengiriman hanya tersedia untuk self pickup karena
+            terdapat barang yang belum diatur beratnya. Mohon atur berat barang
+            dengan menghubungi admin melalui{' '}
+            <a
+              className='text-danger-500 inline'
+              href='https://api.whatsapp.com/send?phone=6281717181922'
+            >
+              tautan ini
+            </a>
+          </p>
+        )}
+      </div>
+
+      {(serviceOptions.length > 0 ||
+        selectedService )&&
+        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>
+              <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(
+                            Math.round(
+                              parseInt(selectedService?.price * 1.1) / 1000
+                            ) * 1000
+                          )}
+                        </span>
+                      </div>
+                    ) : (
+                      <span className='text-gray-500'>
+                        Pilih layanan pengiriman
+                      </span>
+                    )}
+                  </div>
+                  {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'>
+                              {formatShipmentRange(
+                                service.shipment_range,
+                                service.shipment_unit,
+                                productSla
+                              )}
+                            </p>
+                          </div>
+                          <span className='font-semibold'>
+                            {currencyFormat(
+                              Math.round(
+                                parseInt(service?.price * 1.1) / 1000
+                              ) * 1000
+                            )}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+    </form>
+  );
+}