feedback UAT

2 files changed, 62 insertions, 20 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 098d1e66..0c7a35fa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -91,6 +91,9 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
+  const [checkoutValidation, setCheckoutValidation] = useState(false)
+
+  const expedisiValidation = useRef(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -212,6 +215,7 @@ const Checkout = () => {
   }, [products])
 
   useEffect(() => {
+    setCheckoutValidation(false)
     const loadServiceRajaOngkir = async () => {
       const body = {
         origin: 2127,
@@ -261,7 +265,7 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
-      if(serviceType[0] === 0){
+      if (serviceType[0] === 0) {
         setSelectedExpedisi(0)
       }
       setselectedCarrier(serviceType[0])
@@ -281,6 +285,21 @@ const Checkout = () => {
       toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
       return
     }
+    if (selectedExpedisi === 0) {
+      setCheckoutValidation(true)
+      if (expedisiValidation.current) {
+        const position = expedisiValidation.current.getBoundingClientRect()
+        window.scrollTo({
+          top: position.top - 300 + window.pageYOffset,
+          behavior: 'smooth'
+        })
+      }
+      return
+    }
+    if (selectedCarrier != 1 && biayaKirim == 0) {
+      toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+      return
+    }
     setIsLoading(true)
     const productOrder = products.map((product) => ({
       product_id: product.id,
@@ -337,6 +356,7 @@ const Checkout = () => {
     if (isCheck) {
       if (code === activeVoucher) {
         SetActiveVoucher(null)
+        SetDiscountVoucher(0)
       } else {
         SetActiveVoucher(code)
         SetFindVoucher(null)
@@ -414,7 +434,8 @@ const Checkout = () => {
           {findCodeVoucher === 2 && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-red-600'>
-                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini
+                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo
+                ini
               </span>
             </div>
           )}
@@ -471,9 +492,7 @@ const Checkout = () => {
                         </p>
                         <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className=' text-green-600'>
-                              Voucher digunakan{' '}
-                            </span>
+                            <span className=' text-green-600'>Voucher digunakan </span>
                           )}
                         </p>
                       </div>
@@ -556,6 +575,8 @@ const Checkout = () => {
           listExpedisi={listExpedisi}
           setSelectedExpedisi={setSelectedExpedisi}
           checkWeigth={checkWeigth}
+          checkoutValidation={checkoutValidation}
+          expedisiValidation={expedisiValidation}
         />
         <Divider />
         <SectionListService
@@ -693,9 +714,7 @@ const Checkout = () => {
           <button
             className='flex-1 btn-yellow'
             onClick={checkout}
-            disabled={
-              isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
-            }
+            disabled={isLoading || !products || products?.length == 0 || priceCheck}
           >
             {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
           </button>
@@ -738,6 +757,8 @@ const Checkout = () => {
               listExpedisi={listExpedisi}
               setSelectedExpedisi={setSelectedExpedisi}
               checkWeigth={checkWeigth}
+              checkoutValidation={checkoutValidation}
+              expedisiValidation={expedisiValidation}
             />
             <Divider />
             <SectionListService
@@ -958,14 +979,7 @@ const Checkout = () => {
               <button
                 className='w-full btn-yellow mt-4'
                 onClick={checkout}
-                disabled={
-                  isLoading ||
-                  !products ||
-                  products?.length == 0 ||
-                  priceCheck ||
-                  selectedCarrier == 0 ||
-                  (selectedCarrier != 1 && biayaKirim == 0)
-                }
+                disabled={isLoading || !products || products?.length == 0 || priceCheck}
               >
                 {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
               </button>
@@ -1028,13 +1042,24 @@ const SectionValidation = ({ address }) =>
     </BottomPopup>
   )
 
-const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+const SectionExpedisi = ({
+  address,
+  listExpedisi,
+  setSelectedExpedisi,
+  checkWeigth,
+  checkoutValidation,
+  expedisiValidation
+}) =>
   address?.rajaongkirCityId > 0 && (
-    <div className='p-4'>
+    <div className='p-4' ref={expedisiValidation}>
       <div className='flex justify-between items-center'>
         <div className='font-medium'>Pilih Expedisi : </div>
-        <div>
-          <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+        <div className='w-[250px]'>
+          <select
+            className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`}
+            onChange={(e) => setSelectedExpedisi(e.target.value)}
+            required
+          >
             <option value='0,0'>Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
             {checkWeigth != true &&
@@ -1049,7 +1074,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
                 </option>
               ))}
           </select>
+          {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'>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cb55d768..d6594069 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -626,3 +626,12 @@ button {
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    10%, 90% { transform: translateX(-10px); }
+    20%, 80% { transform: translateX(10px); }
+    30%, 50%, 70% { transform: translateX(-10px); }
+    40%, 60% { transform: translateX(10px); }
+    100% { transform: translateX(0); }
+  }