From 80295b97150495f56bd236a5345c2ddeb8313267 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 11 Oct 2023 16:51:03 +0700
Subject: Add product weight information and total weight on checkout page

---
 src/lib/checkout/components/Checkout.jsx   | 79 ++++++++++++++++++++----------
 src/lib/variant/components/VariantCard.jsx |  2 +-
 2 files changed, 54 insertions(+), 27 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index e2c1a85b..35236e79 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -33,6 +33,8 @@ import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
 import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList'
+import { Spinner } from '@chakra-ui/react'
+import { AnimatePresence, motion } from 'framer-motion'
 
 const SELF_PICKUP_ID = 32
 
@@ -110,6 +112,7 @@ const Checkout = () => {
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
   const [checkoutValidation, setCheckoutValidation] = useState(false)
   const [loadingVoucher, setLoadingVoucher] = useState(true)
+  const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false)
 
   const expedisiValidation = useRef(null)
 
@@ -211,6 +214,7 @@ const Checkout = () => {
   useEffect(() => {
     setCheckoutValidation(false)
     const loadServiceRajaOngkir = async () => {
+      setLoadingRajaOngkir(true)
       const body = {
         origin: 2127,
         destination: selectedAddress.shipping.rajaongkirCityId,
@@ -221,6 +225,7 @@ const Checkout = () => {
       }
       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)
@@ -259,9 +264,8 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
-      if (serviceType[0] === 0) {
-        setSelectedExpedisi(0)
-      }
+      if (serviceType[0] === 0) return
+
       setselectedCarrier(serviceType[0])
       setselectedCarrierId(serviceType[1])
       setListServiceExpedisi([])
@@ -723,6 +727,7 @@ const Checkout = () => {
           checkWeigth={checkWeigth}
           checkoutValidation={checkoutValidation}
           expedisiValidation={expedisiValidation}
+          loadingRajaOngkir={loadingRajaOngkir}
         />
         <Divider />
         <SectionListService
@@ -980,6 +985,7 @@ const Checkout = () => {
                 checkWeigth={checkWeigth}
                 checkoutValidation={checkoutValidation}
                 expedisiValidation={expedisiValidation}
+                loadingRajaOngkir={loadingRajaOngkir}
               />
               <Divider />
               <SectionListService
@@ -990,7 +996,7 @@ const Checkout = () => {
               <div className='p-4'>
                 <div className='font-medium'>Detail Pesanan</div>
                 <CardProdcuctsList isLoading={isLoading} products={products} />
-                
+
                 {/* <table className='table-checkout'>
                   <thead>
                     <tr>
@@ -1158,7 +1164,9 @@ const Checkout = () => {
               <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
                 <div className='flex justify-between items-center'>
                   <div className='font-medium'>Ringkasan Pesanan</div>
-                  <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+                  <div className='text-gray_r-11 text-caption-1'>
+                    {products?.length} Barang - {cartCheckout?.totalWeight.kg} Kg
+                  </div>
                 </div>
 
                 <hr className='my-4 border-gray_r-6' />
@@ -1403,32 +1411,51 @@ const SectionExpedisi = ({
   setSelectedExpedisi,
   checkWeigth,
   checkoutValidation,
-  expedisiValidation
+  expedisiValidation,
+  loadingRajaOngkir
 }) =>
   address?.rajaongkirCityId > 0 && (
     <div className='p-4' ref={expedisiValidation}>
       <div className='flex justify-between items-center'>
-        <div className='font-medium'>Pilih Expedisi : </div>
+        <div className='font-medium'>Pilih Ekspedisi: </div>
         <div className='w-[250px]'>
-          <select
-            className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`}
-            onChange={(e) => setSelectedExpedisi(e.target.value)}
-            required
-          >
-            <option value='0,0'>Pilih Pengiriman</option>
-            <option value='1,32'>SELF PICKUP</option>
-            {checkWeigth != true &&
-              listExpedisi.map((expedisi) => (
-                <option
-                  disabled={checkWeigth}
-                  value={expedisi.label + ',' + expedisi.carrierId}
-                  key={expedisi.value}
+          <div className='flex items-center gap-x-4'>
+            <select
+              className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`}
+              onChange={(e) => setSelectedExpedisi(e.target.value)}
+              required
+            >
+              <option value='0,0'>Pilih Pengiriman</option>
+              <option value='1,32'>SELF PICKUP</option>
+              {checkWeigth != true &&
+                listExpedisi.map((expedisi) => (
+                  <option
+                    disabled={checkWeigth}
+                    value={expedisi.label + ',' + expedisi.carrierId}
+                    key={expedisi.value}
+                  >
+                    {' '}
+                    {expedisi.label.toUpperCase()}{' '}
+                  </option>
+                ))}
+            </select>
+
+            <AnimatePresence>
+              {loadingRajaOngkir && (
+                <motion.div
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: '28px' }}
+                  exit={{ opacity: 0, width: 0 }}
+                  transition={{
+                    duration: 0.25
+                  }}
+                  className='overflow-hidden'
                 >
-                  {' '}
-                  {expedisi.label.toUpperCase()}{' '}
-                </option>
-              ))}
-          </select>
+                  <Spinner thickness='3px' speed='0.5s' color='red.500' />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
           {checkoutValidation && (
             <span className='text-sm text-red-500'>*silahkan pilih expedisi</span>
           )}
@@ -1459,7 +1486,7 @@ const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
     <>
       <div className='p-4'>
         <div className='flex justify-between items-center'>
-          <div className='font-medium'>Service Type Expedisi : </div>
+          <div className='font-medium'>Tipe Layanan Ekspedisi: </div>
           <div>
             <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}>
               {listserviceExpedisi.map((service) => (
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 64b6d146..6c0ab974 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -40,7 +40,7 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
           {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
         </p>
         <p className='text-caption-2 text-gray_r-11 mt-1'>
-          Berat Item : {product?.weight} Kg
+          Berat Item : {product?.weight} Kg x {product?.quantity} Barang
         </p>
         <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
           {product.hasFlashsale && (
-- 
cgit v1.2.3