hotfix - validate stepapproval on mobile version

1 files changed, 77 insertions, 47 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 8f4b2038..b68bb4cd 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -37,8 +37,8 @@ import rejectApi from '../api/rejectApi';
 const Transaction = ({ id }) => {
   const auth = useAuth();
   const { transaction } = useTransaction({ id });
-  
-  const statusApprovalWeb = transaction.data?.approvalStep
+
+  const statusApprovalWeb = transaction.data?.approvalStep;
 
   const { queryAirwayBill } = useAirwayBill({ orderId: id });
   const [airwayBillPopup, setAirwayBillPopup] = useState(null);
@@ -78,7 +78,7 @@ const Transaction = ({ id }) => {
   const closeCancelTransaction = () => setCancelTransaction(false);
 
   const [rejectTransaction, setRejectTransaction] = useState(false);
-  
+
   const openRejectTransaction = () => setRejectTransaction(true);
   const closeRejectTransaction = () => setRejectTransaction(false);
   const submitCancelTransaction = async () => {
@@ -106,13 +106,13 @@ const Transaction = ({ id }) => {
     await aprpoveApi({ id });
     toast.success('Berhasil melanjutkan approval');
     transaction.refetch();
-  }
+  };
 
   const handleReject = async () => {
-   await rejectApi({ id });
-   closeRejectTransaction()
-   transaction.refetch();
-  }
+    await rejectApi({ id });
+    closeRejectTransaction();
+    transaction.refetch();
+  };
 
   const memoizeVariantGroupCard = useMemo(
     () => (
@@ -238,7 +238,13 @@ const Transaction = ({ id }) => {
 
         <MobileView>
           <div className='p-4'>
-            <StepApproval layer={2} status={'cancel'} className='ml-auto' />
+            {auth?.feature?.soApproval && (
+              <StepApproval
+                layer={statusApprovalWeb}
+                status={transaction?.data?.status}
+                className='ml-auto'
+              />
+            )}
           </div>
           <div className='flex flex-col gap-y-4 p-4'>
             <DescriptionRow label='Status Transaksi'>
@@ -359,33 +365,43 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='p-4 pt-0'>
-            {transaction.data?.status == 'draft' && auth?.feature.soApproval && (
-              <div className='flex gap-x-2'>
-                <button
-                  className='btn-yellow w-full'
-                  onClick={checkout}
-                  disabled={
-                    transaction.data?.status === 'cancel' ? true : false  || auth?.webRole === statusApprovalWeb ? true : false
-                  }
-                >
-                  Approve
-                </button>
-                <button
-                  className='btn-solid-red px-7 w-full'
-                  onClick={checkout}
-                  disabled={
-                    transaction.data?.status === 'cancel' ? true : false  || auth?.webRole === statusApprovalWeb ? true : false
-                  }
-                >
-                  Reject
+            {transaction.data?.status == 'draft' &&
+              auth?.feature.soApproval && (
+                <div className='flex gap-x-2'>
+                  <button
+                    className='btn-yellow w-full'
+                    onClick={checkout}
+                    disabled={
+                      transaction.data?.status === 'cancel'
+                        ? true
+                        : false || auth?.webRole === statusApprovalWeb
+                        ? true
+                        : false
+                    }
+                  >
+                    Approve
+                  </button>
+                  <button
+                    className='btn-solid-red px-7 w-full'
+                    onClick={checkout}
+                    disabled={
+                      transaction.data?.status === 'cancel'
+                        ? true
+                        : false || auth?.webRole === statusApprovalWeb
+                        ? true
+                        : false
+                    }
+                  >
+                    Reject
+                  </button>
+                </div>
+              )}
+            {transaction.data?.status == 'draft' &&
+              !auth?.feature?.soApproval && (
+                <button className='btn-yellow w-full mt-4' onClick={checkout}>
+                  Lanjutkan Transaksi
                 </button>
-              </div>
-            )}
-            {transaction.data?.status == 'draft' && !auth?.feature?.soApproval && (
-              <button className='btn-yellow w-full mt-4' onClick={checkout}>
-                Lanjutkan Transaksi
-              </button>
-            )}
+              )}
             <button
               className='btn-light w-full mt-4'
               disabled={transaction.data?.status != 'draft'}
@@ -439,13 +455,20 @@ const Transaction = ({ id }) => {
                   Download
                 </button>
                 {transaction.data?.status == 'draft' &&
-                  auth?.feature?.soApproval && auth?.webRole && (
+                  auth?.feature?.soApproval &&
+                  auth?.webRole && (
                     <div className='flex gap-x-2'>
                       <button
                         className='btn-yellow'
                         onClick={handleApproval}
                         disabled={
-                          transaction.data?.status === 'cancel' ? true : false || auth?.webRole === statusApprovalWeb ? true : false || statusApprovalWeb < 1 ? true : false
+                          transaction.data?.status === 'cancel'
+                            ? true
+                            : false || auth?.webRole === statusApprovalWeb
+                            ? true
+                            : false || statusApprovalWeb < 1
+                            ? true
+                            : false
                         }
                       >
                         Approve
@@ -454,7 +477,13 @@ const Transaction = ({ id }) => {
                         className='btn-solid-red px-7'
                         onClick={openRejectTransaction}
                         disabled={
-                          transaction.data?.status === 'cancel' ? true : false || auth?.webRole === statusApprovalWeb ? true : false  || statusApprovalWeb < 1 ? true : false
+                          transaction.data?.status === 'cancel'
+                            ? true
+                            : false || auth?.webRole === statusApprovalWeb
+                            ? true
+                            : false || statusApprovalWeb < 1
+                            ? true
+                            : false
                         }
                       >
                         Reject
@@ -467,15 +496,16 @@ const Transaction = ({ id }) => {
                       Lanjutkan Transaksi
                     </button>
                   )}
-                {transaction.data?.status != 'draft' &&  !auth?.feature.soApproval &&  (
-                  <button
-                    className='btn-light'
-                    disabled={transaction.data?.status != 'waiting'}
-                    onClick={openCancelTransaction}
-                  >
-                    Batalkan Transaksi
-                  </button>
-                )}
+                {transaction.data?.status != 'draft' &&
+                  !auth?.feature.soApproval && (
+                    <button
+                      className='btn-light'
+                      disabled={transaction.data?.status != 'waiting'}
+                      onClick={openCancelTransaction}
+                    >
+                      Batalkan Transaksi
+                    </button>
+                  )}
               </div>
 
               <div className='grid grid-cols-2 gap-x-6 mt-6'>