1 files changed, 44 insertions, 37 deletions
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index e049a9ac..0017afba 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -46,15 +46,6 @@ const Transaction = ({ id }) => {
     toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami')
   }
 
-  const [ section, setSection ] = useState({
-    customer: false,
-    invoice: false,
-    shipping: false
-  })
-  const toggleSection = (name) => {
-    setSection({ ...section, [name]: !section[name] })
-  }
-
   const [ cancelTransaction, setCancelTransaction ] = useState(false)
   const openCancelTransaction = () => setCancelTransaction(true)
   const closeCancelTransaction = () => setCancelTransaction(false)
@@ -79,7 +70,7 @@ const Transaction = ({ id }) => {
 
   if (transaction.isLoading) {
     return (
-      <div className="flex justify-center my-4">
+      <div className="flex justify-center my-6">
         <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
       </div>
     )
@@ -142,33 +133,7 @@ const Transaction = ({ id }) => {
 
       <Divider />
       
-      <SectionButton 
-        label="Detail Pelanggan" 
-        active={section.customer}
-        toggle={() => toggleSection('customer')}
-      />
-
-      { section.customer && <SectionContent address={transaction.data?.address?.customer} /> }
-
-      <Divider />
-      
-      <SectionButton 
-        label="Detail Pengiriman" 
-        active={section.shipping}
-        toggle={() => toggleSection('shipping')}
-      />
-
-      { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> }
-
-      <Divider />
-      
-      <SectionButton 
-        label="Detail Penagihan" 
-        active={section.invoice}
-        toggle={() => toggleSection('invoice')}
-      />
-
-      { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> }
+      <SectionAddress address={transaction.data?.address} />
 
       <Divider />
 
@@ -288,6 +253,48 @@ const Transaction = ({ id }) => {
   )
 }
 
+const SectionAddress = ({ address }) => {
+  const [ section, setSection ] = useState({
+    customer: false,
+    invoice: false,
+    shipping: false
+  })
+  const toggleSection = (name) => {
+    setSection({ ...section, [name]: !section[name] })
+  }
+
+  return (
+    <>
+      <SectionButton 
+        label="Detail Pelanggan" 
+        active={section.customer}
+        toggle={() => toggleSection('customer')}
+      />
+
+      { section.customer && <SectionContent address={address?.customer} /> }
+
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Pengiriman" 
+        active={section.shipping}
+        toggle={() => toggleSection('shipping')}
+      />
+
+      { section.shipping && <SectionContent address={address?.shipping} /> }
+
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Penagihan" 
+        active={section.invoice}
+        toggle={() => toggleSection('invoice')}
+      />
+      { section.invoice && <SectionContent address={address?.invoice} /> }
+    </>
+  )
+}
+
 const SectionButton = ({ label, active, toggle }) => (
   <button className="p-4 font-medium flex justify-between w-full" onClick={toggle}>
     <span>{label}</span>