From de7361718def0f6bb32294bb074841ba2c0a3ce6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 16:25:35 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 377 ++++++++++++-------------
 1 file changed, 187 insertions(+), 190 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 143b24bb..e049a9ac 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -77,216 +77,213 @@ const Transaction = ({ id }) => {
     transaction.refetch()
   }
 
-  return (
-    <>
-      { transaction.isLoading && (
-        <div className="flex justify-center my-4">
-          <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
-        </div>
-      ) }
+  if (transaction.isLoading) {
+    return (
+      <div className="flex justify-center my-4">
+        <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      </div>
+    )
+  }
 
-      { transaction.data?.name && (
-        <>
-          <div className="flex flex-col gap-y-4 p-4">
-            <DescriptionRow label="Status Transaksi">
-              <div className="flex justify-end">
-                <TransactionStatusBadge status={transaction.data?.status} />
-              </div>
-            </DescriptionRow>
-            <DescriptionRow label="No Transaksi">
-              { transaction.data?.name }
-            </DescriptionRow>
-            <DescriptionRow label="Ketentuan Pembayaran">
-              { transaction.data?.paymentTerm }
-            </DescriptionRow>
-            <DescriptionRow label="Nama Sales">
-              { transaction.data?.sales }
-            </DescriptionRow>
-            <DescriptionRow label="Waktu Transaksi">
-              { transaction.data?.dateOrder }
-            </DescriptionRow>
+  return transaction.data?.name && (
+    <>
+      <div className="flex flex-col gap-y-4 p-4">
+        <DescriptionRow label="Status Transaksi">
+          <div className="flex justify-end">
+            <TransactionStatusBadge status={transaction.data?.status} />
           </div>
-          
-          <Divider />
+        </DescriptionRow>
+        <DescriptionRow label="No Transaksi">
+          { transaction.data?.name }
+        </DescriptionRow>
+        <DescriptionRow label="Ketentuan Pembayaran">
+          { transaction.data?.paymentTerm }
+        </DescriptionRow>
+        <DescriptionRow label="Nama Sales">
+          { transaction.data?.sales }
+        </DescriptionRow>
+        <DescriptionRow label="Waktu Transaksi">
+          { transaction.data?.dateOrder }
+        </DescriptionRow>
+      </div>
+      
+      <Divider />
 
-          <div className="p-4 flex flex-col gap-y-4">
-            <DescriptionRow label="Purchase Order">
-              { transaction.data?.purchaseOrderName || '-' }
-            </DescriptionRow>
-            <div className="flex items-center">
-              <p className="text-gray_r-11 leading-none">Dokumen PO</p>
-              <button 
-                type="button"
-                className="btn-light py-1.5 px-3 ml-auto"
-                onClick={transaction.data?.purchaseOrderFile ? () => downloadPurchaseOrder(transaction.data) : openUploadPo}
-              >
-                { transaction.data?.purchaseOrderFile ? 'Download' : 'Upload' }
-              </button>
-            </div>
-          </div>
+      <div className="p-4 flex flex-col gap-y-4">
+        <DescriptionRow label="Purchase Order">
+          { transaction.data?.purchaseOrderName || '-' }
+        </DescriptionRow>
+        <div className="flex items-center">
+          <p className="text-gray_r-11 leading-none">Dokumen PO</p>
+          <button 
+            type="button"
+            className="btn-light py-1.5 px-3 ml-auto"
+            onClick={transaction.data?.purchaseOrderFile ? () => downloadPurchaseOrder(transaction.data) : openUploadPo}
+          >
+            { transaction.data?.purchaseOrderFile ? 'Download' : 'Upload' }
+          </button>
+        </div>
+      </div>
 
-          <Divider />
+      <Divider />
 
-          <div className="font-medium p-4">Detail Produk</div>
+      <div className="font-medium p-4">Detail Produk</div>
 
-          <div className="p-4 pt-0 flex flex-col gap-y-3">
-            <VariantGroupCard 
-              variants={transaction.data?.products} 
-              buyMore 
-            />
-            <div className="flex justify-between mt-3 font-medium">
-              <p>Total Belanja</p>
-              <p>{ currencyFormat(transaction.data?.amountTotal) }</p>
-            </div>
-          </div>
+      <div className="p-4 pt-0 flex flex-col gap-y-3">
+        <VariantGroupCard 
+          variants={transaction.data?.products} 
+          buyMore 
+        />
+        <div className="flex justify-between mt-3 font-medium">
+          <p>Total Belanja</p>
+          <p>{ currencyFormat(transaction.data?.amountTotal) }</p>
+        </div>
+      </div>
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Pelanggan" 
-            active={section.customer}
-            toggle={() => toggleSection('customer')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Pelanggan" 
+        active={section.customer}
+        toggle={() => toggleSection('customer')}
+      />
 
-          { section.customer && <SectionContent address={transaction.data?.address?.customer} /> }
+      { section.customer && <SectionContent address={transaction.data?.address?.customer} /> }
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Pengiriman" 
-            active={section.shipping}
-            toggle={() => toggleSection('shipping')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Pengiriman" 
+        active={section.shipping}
+        toggle={() => toggleSection('shipping')}
+      />
 
-          { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> }
+      { section.shipping && <SectionContent address={transaction.data?.address?.shipping} /> }
 
-          <Divider />
-          
-          <SectionButton 
-            label="Detail Penagihan" 
-            active={section.invoice}
-            toggle={() => toggleSection('invoice')}
-          />
+      <Divider />
+      
+      <SectionButton 
+        label="Detail Penagihan" 
+        active={section.invoice}
+        toggle={() => toggleSection('invoice')}
+      />
 
-          { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> }
+      { section.invoice && <SectionContent address={transaction.data?.address?.invoice} /> }
 
-          <Divider />
+      <Divider />
 
-          <div className="p-4">
-            <p className="font-medium">Invoice</p>
-            <div className="flex flex-col gap-y-3 mt-4">
-              { transaction.data?.invoices?.map((invoice, index) => (
-                <Link href={`/my/invoice/${invoice.id}`} key={index}>
-                  <div className="shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between">
-                    <div>
-                      <p className="mb-2">{ invoice?.name }</p>
-                      <div className="flex items-center gap-x-1">
-                        { invoice.amountResidual > 0 ? (
-                          <div className="badge-red">Belum Lunas</div>
-                          ) : (
-                          <div className="badge-green">Lunas</div>
-                        ) }
-                        <p className="text-caption-2 text-gray_r-11">
-                          { currencyFormat(invoice.amountTotal) }
-                        </p>
-                      </div>
-                    </div>
-                    <ChevronRightIcon className="w-5 stroke-2" />
+      <div className="p-4">
+        <p className="font-medium">Invoice</p>
+        <div className="flex flex-col gap-y-3 mt-4">
+          { transaction.data?.invoices?.map((invoice, index) => (
+            <Link href={`/my/invoice/${invoice.id}`} key={index}>
+              <div className="shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between">
+                <div>
+                  <p className="mb-2">{ invoice?.name }</p>
+                  <div className="flex items-center gap-x-1">
+                    { invoice.amountResidual > 0 ? (
+                      <div className="badge-red">Belum Lunas</div>
+                      ) : (
+                      <div className="badge-green">Lunas</div>
+                    ) }
+                    <p className="text-caption-2 text-gray_r-11">
+                      { currencyFormat(invoice.amountTotal) }
+                    </p>
                   </div>
-                </Link>
-              )) }
-              { transaction.data?.invoices?.length === 0 && (
-                <Alert type='info' className='text-center'>
-                  Belum ada Invoice
-                </Alert>
-              ) }
-            </div>
-          </div>
-
-          <Divider />
+                </div>
+                <ChevronRightIcon className="w-5 stroke-2" />
+              </div>
+            </Link>
+          )) }
+          { transaction.data?.invoices?.length === 0 && (
+            <Alert type='info' className='text-center'>
+              Belum ada Invoice
+            </Alert>
+          ) }
+        </div>
+      </div>
 
-          <div className="p-4 pt-0">
-            { transaction.data?.status == 'draft' && (
-              <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'}
-              onClick={downloadQuotation}
-            >
-              Download Quotation
-            </button>
-            { transaction.data?.status != 'draft' && (
-              <button 
-                className="btn-light w-full mt-4" 
-                disabled={transaction.data?.status != 'waiting'}
-                onClick={openCancelTransaction}
-              >
-                Batalkan Transaksi
-              </button>
-            ) }
-          </div>
+      <Divider />
 
-          <BottomPopup
-            active={cancelTransaction}
-            close={closeCancelTransaction}
-            title="Batalkan Transaksi"
+      <div className="p-4 pt-0">
+        { transaction.data?.status == 'draft' && (
+          <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'}
+          onClick={downloadQuotation}
+        >
+          Download Quotation
+        </button>
+        { transaction.data?.status != 'draft' && (
+          <button 
+            className="btn-light w-full mt-4" 
+            disabled={transaction.data?.status != 'waiting'}
+            onClick={openCancelTransaction}
           >
-            <div className="leading-7 text-gray_r-12/80">
-              Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.name}</span>?
-            </div>
-            <div className="flex mt-6 gap-x-4">
-              <button 
-                className="btn-solid-red flex-1" 
-                type="button"
-                onClick={submitCancelTransaction}
-              >
-                Ya, Batalkan
-              </button>
-              <button 
-                className="btn-light flex-1" 
-                type="button"
-                onClick={closeCancelTransaction}
-              >
-                Batal
-              </button>
-            </div>
-          </BottomPopup>
+            Batalkan Transaksi
+          </button>
+        ) }
+      </div>
 
-          <BottomPopup
-            title="Upload PO"
-            close={closeUploadPo}
-            active={uploadPo}
+      <BottomPopup
+        active={cancelTransaction}
+        close={closeCancelTransaction}
+        title="Batalkan Transaksi"
+      >
+        <div className="leading-7 text-gray_r-12/80">
+          Apakah anda yakin membatalkan transaksi <span className="underline">{transaction.data?.name}</span>?
+        </div>
+        <div className="flex mt-6 gap-x-4">
+          <button 
+            className="btn-solid-red flex-1" 
+            type="button"
+            onClick={submitCancelTransaction}
           >
-            <div>
-              <label>Nomor PO</label>
-              <input type="text" className="form-input mt-3" ref={poNumber} />
-            </div>
-            <div className="mt-4">
-              <label>Dokumen PO</label>
-              <input type="file" className="form-input mt-3 py-2" ref={poFile} />
-            </div>
-            <div className="grid grid-cols-2 gap-x-3 mt-6">
-              <button 
-                type="button"
-                className="btn-light w-full"
-                onClick={closeUploadPo}
-              >Batal</button>
-              <button 
-                type="button"
-                className="btn-solid-red w-full"
-                onClick={submitUploadPo}
-              >Upload</button>
-            </div>
-          </BottomPopup>
-        </>
-      )}
+            Ya, Batalkan
+          </button>
+          <button 
+            className="btn-light flex-1" 
+            type="button"
+            onClick={closeCancelTransaction}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
 
+      <BottomPopup
+        title="Upload PO"
+        close={closeUploadPo}
+        active={uploadPo}
+      >
+        <div>
+          <label>Nomor PO</label>
+          <input type="text" className="form-input mt-3" ref={poNumber} />
+        </div>
+        <div className="mt-4">
+          <label>Dokumen PO</label>
+          <input type="file" className="form-input mt-3 py-2" ref={poFile} />
+        </div>
+        <div className="grid grid-cols-2 gap-x-3 mt-6">
+          <button 
+            type="button"
+            className="btn-light w-full"
+            onClick={closeUploadPo}
+          >Batal</button>
+          <button 
+            type="button"
+            className="btn-solid-red w-full"
+            onClick={submitUploadPo}
+          >Upload</button>
+        </div>
+      </BottomPopup>
     </>
   )
 }
@@ -305,7 +302,7 @@ const SectionButton = ({ label, active, toggle }) => (
 const SectionContent = ({ address }) => {
   let fullAddress = []
   if (address?.street) fullAddress.push(address.street)
-  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name)
+  if (address?.subDistrict?.name) fullAddress.push(address.sub_district.name)
   if (address?.district?.name) fullAddress.push(address.district.name)
   if (address?.city?.name) fullAddress.push(address.city.name)
   fullAddress = fullAddress.join(', ')
-- 
cgit v1.2.3