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 +++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 26 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 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) => (
-- 
cgit v1.2.3


From 6aa5fa70cf5ccd2825e5657ec1a90e370dea3bcf Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 16 Oct 2023 11:16:33 +0700
Subject: Fix buy action before and after login

---
 src/lib/checkout/components/Checkout.jsx | 4 ----
 1 file changed, 4 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 35236e79..511fcdba 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -5,7 +5,6 @@ import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress } from '@/core/utils/address'
 import addressesApi from '@/lib/address/api/addressesApi'
 import {
-  ArrowLongLeftIcon,
   BanknotesIcon,
   ChevronLeftIcon,
   ClockIcon,
@@ -17,17 +16,14 @@ import { deleteItemCart, getCartApi } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { toast } from 'react-hot-toast'
 import getFileBase64 from '@/core/utils/getFileBase64'
-// import checkoutApi from '../api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
 import Image from '@/core/components/elements/Image/Image'
-import imageNext from 'next/image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ExpedisiList from '../api/ExpedisiList'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
-- 
cgit v1.2.3


From f20d4bdf0cf4acc65ae634eb3a58ecd976275c77 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 17 Oct 2023 15:26:51 +0700
Subject: handle arrow back browser di page checkout

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(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 511fcdba..c78757a0 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -168,6 +168,16 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+
+    const handlePopState = () => {
+      router.push('/shop/cart')
+    }
+
+    window.onpopstate = handlePopState
+
+    return () => {
+      window.onpopstate = null
+    }
     // voucher()
   }, [])
 
-- 
cgit v1.2.3

