feedback UAT

1 files changed, 86 insertions, 30 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 03d3e2d9..b2f9a866 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -6,7 +6,7 @@ import { getItemAddress } from '@/core/utils/address'
 import addressesApi from '@/lib/address/api/addressesApi'
 import CartApi from '@/lib/cart/api/CartApi'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
 import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
@@ -22,6 +22,8 @@ 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 { Button, Modal } from 'flowbite-react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 
 const Checkout = () => {
   const router = useRouter()
@@ -75,6 +77,8 @@ const Checkout = () => {
   const [checkWeigth, setCheckWeight] = useState(false)
   const [selectedServiceType, setSelectedServiceType] = useState(null)
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
+  const [etd, setEtd] = useState(null)
+  const [etdFix, setEtdFix] = useState(null)
 
   useEffect(() => {
     const loadExpedisi = async () => {
@@ -155,6 +159,7 @@ const Checkout = () => {
         setselectedExpedisiService(
           dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service
         )
+        setEtd(dataService.data[0].costs[0]?.cost[0].etd)
         toast.success('Silahkan Pilih Service Tipe')
       } else {
         toast.error('Tidak Ada Service, Silahkan Pilih Expedisi lain !')
@@ -166,6 +171,7 @@ const Checkout = () => {
       setListServiceExpedisi()
       setBiayaKirim(0)
       setselectedExpedisiService()
+      setEtd()
     }
   }, [selectedCarrier, selectedAddress, totalWeight])
 
@@ -174,10 +180,39 @@ const Checkout = () => {
       let serviceType = selectedServiceType.split(',')
       setBiayaKirim(serviceType[0])
       setselectedExpedisiService(serviceType[1])
+      setEtd(serviceType[2])
     }
   }, [selectedServiceType])
 
   useEffect(() => {
+    if (etd) {
+      let estimationDate = etd.split('-')
+      if (Array.isArray(estimationDate)) {
+        let from = new Date()
+        let to = new Date()
+        from.setDate(from.getDate() + parseInt(estimationDate[0]))
+        to.setDate(to.getDate() + parseInt(estimationDate[1]))
+        setEtdFix(
+          '(' +
+            from.getDate() +
+            ' ' +
+            from.toLocaleString('default', { month: 'short' }) +
+            ' - ' +
+            to.getDate() +
+            ' ' +
+            to.toLocaleString('default', { month: 'short' }) +
+            ')'
+        )
+      } else {
+        let to = new Date()
+        to.setDate(to.getDate() + parseInt(10))
+        setEtdFrom('>')
+        setEtdTo(to.getDate() + ' ' + to.toLocaleString('default', { month: 'short' }))
+      }
+    }
+  }, [etd])
+
+  useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
       setselectedCarrier(serviceType[0])
@@ -308,15 +343,22 @@ const Checkout = () => {
               <div>{currencyFormat(taxTotal)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Biaya Kirim</div>
-              <div>{currencyFormat(biayaKirim)}</div>
+              <div className='text-gray_r-11'>
+                Biaya Kirim <p className='text-xs'>*Estimasi tiba {etdFix} </p>
+              </div>
+              <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
             </div>
           </div>
           <hr className='my-4 border-gray_r-6' />
           <div className='flex gap-x-2 justify-between mb-4'>
             <div>Grand Total</div>
             <div className='font-semibold text-gray_r-12'>
-              {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))}
+              {currencyFormat(
+                totalAmount -
+                  totalDiscountAmount +
+                  taxTotal +
+                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+              )}
             </div>
           </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -524,8 +566,11 @@ const Checkout = () => {
                   <div>{currencyFormat(taxTotal)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Biaya Kirim</div>
-                  <div>{currencyFormat(biayaKirim)}</div>
+                  <div className='text-gray_r-11'>
+                    Biaya Kirim
+                    <p className='text-xs'>*Estimasi tiba {etdFix} </p>
+                  </div>
+                  <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
                 </div>
               </div>
 
@@ -535,7 +580,10 @@ const Checkout = () => {
                 <div>Grand Total</div>
                 <div className='font-semibold text-gray_r-12'>
                   {currencyFormat(
-                    totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim)
+                    totalAmount -
+                      totalDiscountAmount +
+                      taxTotal +
+                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
                 </div>
               </div>
@@ -630,18 +678,16 @@ const SectionAddress = ({ address, label, url }) => (
 
 const SectionValidation = ({ address, checkWeigth }) =>
   address?.rajaongkirCityId == 0 && (
-    <div className='p-4'>
-      <div className='flex justify-between items-center'>
-        <div>
-          <p className='mt-2 text-gray_r-11'>
-            SIlahkan Update alamat kirim melalui{' '}
-            <Link className='text-caption-1 inline' href={`/my/address/${address.id}/edit`}>
-              Link ini !
-            </Link>
-          </p>
-        </div>
+    <BottomPopup active={true} title='Update Alamat'>
+      <div className='leading-7 text-gray_r-12/80'>
+        Silahkan Update Alamat Anda Melalui Tombol di bawah ini{' '}
       </div>
-    </div>
+      <div className='flex justify-center mt-6 gap-x-4'>
+        <Link className='btn-solid-red w-full md:w-fit text-white' href={`/my/address/${address?.id}/edit`}>
+          Update Alamat
+        </Link>
+      </div>
+    </BottomPopup>
   )
 
 const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
@@ -653,16 +699,17 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
           <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
             <option value='0,0'>Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
-            {listExpedisi.map((expedisi) => (
-              <option
-                disabled={checkWeigth}
-                value={expedisi.label + ',' + expedisi.carrierId}
-                key={expedisi.value}
-              >
-                {' '}
-                {expedisi.label.toUpperCase()}{' '}
-              </option>
-            ))}
+            {checkWeigth != true &&
+              listExpedisi.map((expedisi) => (
+                <option
+                  disabled={checkWeigth}
+                  value={expedisi.label + ',' + expedisi.carrierId}
+                  key={expedisi.value}
+                >
+                  {' '}
+                  {expedisi.label.toUpperCase()}{' '}
+                </option>
+              ))}
           </select>
         </div>
       </div>
@@ -689,11 +736,20 @@ const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
           <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}>
             {listserviceExpedisi.map((service) => (
               <option
-                value={service.cost[0].value + ',' + service.description + '-' + service.service}
+                value={
+                  service.cost[0].value +
+                  ',' +
+                  service.description +
+                  '-' +
+                  service.service +
+                  ',' +
+                  service.cost[0].etd
+                }
                 key={service.service}
               >
                 {' '}
-                {service.description} - {service.service.toUpperCase()}{' '}
+                {service.description} - {service.service.toUpperCase()} (Estimasi Tiba{' '}
+                {service.cost[0].etd} Hari)
               </option>
             ))}
           </select>