From fdfb47c3a825258b871ac5921605642e5e05fdd8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 12:04:20 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 149 +++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 src/lib/transaction/components/Transaction.jsx

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

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
new file mode 100644
index 00000000..c9bdf715
--- /dev/null
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -0,0 +1,149 @@
+import Spinner from "@/core/components/elements/Spinner/Spinner"
+import useTransaction from "../hooks/useTransaction"
+import TransactionStatusBadge from "./TransactionStatusBadge"
+import Divider from "@/core/components/elements/Divider/Divider"
+import { useRef, useState } from "react"
+import { downloadPurchaseOrder } from "../utils/transactions"
+import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
+import uploadPoApi from "../api/uploadPoApi"
+import { toast } from "react-hot-toast"
+import getFileBase64 from "@/core/utils/getFileBase64"
+import currencyFormat from "@/core/utils/currencyFormat"
+import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
+
+const Transaction = ({ id }) => {
+  const { transaction } = useTransaction({ id })
+
+  const poNumber = useRef('')
+  const poFile = useRef('')
+  const [ uploadPo, setUploadPo ] = useState(false)
+  const openUploadPo = () => setUploadPo(true)
+  const closeUploadPo = () => setUploadPo(false)
+  const submitUploadPo = async () => {
+    const file = poFile.current.files[0]
+    const name = poNumber.current.value
+    if (typeof file === 'undefined' || !name) {
+      toast.error('Nomor dan Dokumen PO harus diisi', { position: 'bottom-center' })
+      return
+    }
+    if (file.size > 5000000) {
+      toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
+      return
+    }
+    const data = { name, file: await getFileBase64(file) }
+    const isUploaded = await uploadPoApi({ id, data })
+    if (isUploaded) {
+      toast.success('Berhasil upload PO')
+      transaction.refetch()
+      closeUploadPo()
+      return
+    }
+    toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami')
+  }
+
+  return (
+    <>
+      { transaction.isLoading && (
+        <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>
+          </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>
+
+          <Divider />
+
+          <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>
+
+          <Divider />
+
+          <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>
+        </>
+      )}
+
+    </>
+  )
+}
+
+const DescriptionRow = ({ children, label }) => (
+  <div className="grid grid-cols-2">
+    <span className="text-gray_r-11">{ label }</span>
+    <span className="text-right">{ children }</span>
+  </div>
+)
+
+export default Transaction
\ No newline at end of file
-- 
cgit v1.2.3


From 3f2ff1475676ba47a841796e39e7d17d627e5356 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 14:46:24 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 191 ++++++++++++++++++++++++-
 1 file changed, 190 insertions(+), 1 deletion(-)

(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 c9bdf715..143b24bb 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -3,13 +3,18 @@ import useTransaction from "../hooks/useTransaction"
 import TransactionStatusBadge from "./TransactionStatusBadge"
 import Divider from "@/core/components/elements/Divider/Divider"
 import { useRef, useState } from "react"
-import { downloadPurchaseOrder } from "../utils/transactions"
+import { downloadPurchaseOrder, downloadQuotation } from "../utils/transactions"
 import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
 import uploadPoApi from "../api/uploadPoApi"
 import { toast } from "react-hot-toast"
 import getFileBase64 from "@/core/utils/getFileBase64"
 import currencyFormat from "@/core/utils/currencyFormat"
 import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
+import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline"
+import Link from "@/core/components/elements/Link/Link"
+import Alert from "@/core/components/elements/Alert/Alert"
+import checkoutPoApi from "../api/checkoutPoApi"
+import cancelTransactionApi from "../api/cancelTransactionApi"
 
 const Transaction = ({ id }) => {
   const { transaction } = useTransaction({ id })
@@ -41,6 +46,37 @@ 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)
+  const submitCancelTransaction = async () => {
+    const isCancelled = await cancelTransactionApi({ transaction: transaction.data })
+    if (isCancelled) {
+      toast.success('Berhasil batalkan transaksi')
+      transaction.refetch()
+    }
+    closeCancelTransaction()
+  }
+
+  const checkout = async () => {
+    if (!transaction.data?.purchaseOrderFile) {
+      toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan')
+      return
+    }
+    await checkoutPoApi({ id })
+    toast.success('Berhasil melanjutkan pesanan')
+    transaction.refetch()
+  }
+
   return (
     <>
       { transaction.isLoading && (
@@ -105,6 +141,122 @@ const Transaction = ({ id }) => {
           </div>
 
           <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} /> }
+
+          <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>
+                </Link>
+              )) }
+              { transaction.data?.invoices?.length === 0 && (
+                <Alert type='info' className='text-center'>
+                  Belum ada Invoice
+                </Alert>
+              ) }
+            </div>
+          </div>
+
+          <Divider />
+
+          <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>
+
+          <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}
+              >
+                Ya, Batalkan
+              </button>
+              <button 
+                className="btn-light flex-1" 
+                type="button"
+                onClick={closeCancelTransaction}
+              >
+                Batal
+              </button>
+            </div>
+          </BottomPopup>
 
           <BottomPopup
             title="Upload PO"
@@ -139,6 +291,43 @@ const Transaction = ({ id }) => {
   )
 }
 
+const SectionButton = ({ label, active, toggle }) => (
+  <button className="p-4 font-medium flex justify-between w-full" onClick={toggle}>
+    <span>{label}</span>
+    { active ? (
+      <ChevronUpIcon className="w-5" />
+    ) : (
+      <ChevronDownIcon className="w-5" />
+    ) }
+  </button>
+)
+
+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?.district?.name) fullAddress.push(address.district.name)
+  if (address?.city?.name) fullAddress.push(address.city.name)
+  fullAddress = fullAddress.join(', ')
+
+  return (
+    <div className="flex flex-col gap-y-4 p-4 border-t border-gray_r-6">
+      <DescriptionRow label="Nama">
+        { address.name }
+      </DescriptionRow>
+      <DescriptionRow label="Email">
+        { address.email || '-' }
+      </DescriptionRow>
+      <DescriptionRow label="No Telepon">
+        { address.mobile || '-' }
+      </DescriptionRow>
+      <DescriptionRow label="Alamat">
+        { fullAddress }
+      </DescriptionRow>
+    </div>
+  )
+}
+
 const DescriptionRow = ({ children, label }) => (
   <div className="grid grid-cols-2">
     <span className="text-gray_r-11">{ label }</span>
-- 
cgit v1.2.3


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


From 5933732a74ae1ca4124ddd4e8265b1f443234736 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 21:51:51 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 79 ++++++++++++++------------
 1 file changed, 43 insertions(+), 36 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 e049a9ac..0759dbf8 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)
@@ -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>
-- 
cgit v1.2.3


From 98c8fc56db91664b98a50e9113787b56fe785b9e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 22:33:32 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 0759dbf8..0017afba 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -70,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>
     )
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/transaction/components/Transaction.jsx | 393 ++++++++++++-------------
 1 file changed, 182 insertions(+), 211 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 0017afba..2220f3be 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -1,27 +1,27 @@
-import Spinner from "@/core/components/elements/Spinner/Spinner"
-import useTransaction from "../hooks/useTransaction"
-import TransactionStatusBadge from "./TransactionStatusBadge"
-import Divider from "@/core/components/elements/Divider/Divider"
-import { useRef, useState } from "react"
-import { downloadPurchaseOrder, downloadQuotation } from "../utils/transactions"
-import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
-import uploadPoApi from "../api/uploadPoApi"
-import { toast } from "react-hot-toast"
-import getFileBase64 from "@/core/utils/getFileBase64"
-import currencyFormat from "@/core/utils/currencyFormat"
-import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
-import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline"
-import Link from "@/core/components/elements/Link/Link"
-import Alert from "@/core/components/elements/Alert/Alert"
-import checkoutPoApi from "../api/checkoutPoApi"
-import cancelTransactionApi from "../api/cancelTransactionApi"
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import useTransaction from '../hooks/useTransaction'
+import TransactionStatusBadge from './TransactionStatusBadge'
+import Divider from '@/core/components/elements/Divider/Divider'
+import { useRef, useState } from 'react'
+import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import uploadPoApi from '../api/uploadPoApi'
+import { toast } from 'react-hot-toast'
+import getFileBase64 from '@/core/utils/getFileBase64'
+import currencyFormat from '@/core/utils/currencyFormat'
+import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
+import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import Link from '@/core/components/elements/Link/Link'
+import Alert from '@/core/components/elements/Alert/Alert'
+import checkoutPoApi from '../api/checkoutPoApi'
+import cancelTransactionApi from '../api/cancelTransactionApi'
 
 const Transaction = ({ id }) => {
   const { transaction } = useTransaction({ id })
 
   const poNumber = useRef('')
   const poFile = useRef('')
-  const [ uploadPo, setUploadPo ] = useState(false)
+  const [uploadPo, setUploadPo] = useState(false)
   const openUploadPo = () => setUploadPo(true)
   const closeUploadPo = () => setUploadPo(false)
   const submitUploadPo = async () => {
@@ -46,7 +46,7 @@ const Transaction = ({ id }) => {
     toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami')
   }
 
-  const [ cancelTransaction, setCancelTransaction ] = useState(false)
+  const [cancelTransaction, setCancelTransaction] = useState(false)
   const openCancelTransaction = () => setCancelTransaction(true)
   const closeCancelTransaction = () => setCancelTransaction(false)
   const submitCancelTransaction = async () => {
@@ -70,191 +70,174 @@ const Transaction = ({ id }) => {
 
   if (transaction.isLoading) {
     return (
-      <div className="flex justify-center my-6">
-        <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
       </div>
     )
   }
 
-  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>
-        </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 />
+  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>
+          </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>
 
-      <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>
+        <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>
 
-      <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 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>
 
-      <Divider />
-      
-      <SectionAddress address={transaction.data?.address} />
+        <Divider />
 
-      <Divider />
+        <SectionAddress address={transaction.data?.address} />
+
+        <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='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 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>
-                <ChevronRightIcon className="w-5 stroke-2" />
-              </div>
-            </Link>
-          )) }
-          { transaction.data?.invoices?.length === 0 && (
-            <Alert type='info' className='text-center'>
-              Belum ada Invoice
-            </Alert>
-          ) }
+              </Link>
+            ))}
+            {transaction.data?.invoices?.length === 0 && (
+              <Alert type='info' className='text-center'>
+                Belum ada Invoice
+              </Alert>
+            )}
+          </div>
         </div>
-      </div>
 
-      <Divider />
+        <Divider />
 
-      <div className="p-4 pt-0">
-        { transaction.data?.status == 'draft' && (
-          <button 
-            className="btn-yellow w-full mt-4" 
-            onClick={checkout}
+        <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}
           >
-            Lanjutkan Transaksi
+            Download Quotation
           </button>
-        ) }
-        <button 
-          className="btn-light w-full mt-4" 
-          disabled={transaction.data?.status != 'draft'}
-          onClick={downloadQuotation}
+          {transaction.data?.status != 'draft' && (
+            <button
+              className='btn-light w-full mt-4'
+              disabled={transaction.data?.status != 'waiting'}
+              onClick={openCancelTransaction}
+            >
+              Batalkan Transaksi
+            </button>
+          )}
+        </div>
+
+        <BottomPopup
+          active={cancelTransaction}
+          close={closeCancelTransaction}
+          title='Batalkan Transaksi'
         >
-          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>
+          <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>
 
-      <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}
-          >
-            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>
-    </>
+        <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>
+      </>
+    )
   )
 }
 
 const SectionAddress = ({ address }) => {
-  const [ section, setSection ] = useState({
+  const [section, setSection] = useState({
     customer: false,
     invoice: false,
     shipping: false
@@ -265,44 +248,40 @@ const SectionAddress = ({ address }) => {
 
   return (
     <>
-      <SectionButton 
-        label="Detail Pelanggan" 
+      <SectionButton
+        label='Detail Pelanggan'
         active={section.customer}
         toggle={() => toggleSection('customer')}
       />
 
-      { section.customer && <SectionContent address={address?.customer} /> }
+      {section.customer && <SectionContent address={address?.customer} />}
 
       <Divider />
-      
-      <SectionButton 
-        label="Detail Pengiriman" 
+
+      <SectionButton
+        label='Detail Pengiriman'
         active={section.shipping}
         toggle={() => toggleSection('shipping')}
       />
 
-      { section.shipping && <SectionContent address={address?.shipping} /> }
+      {section.shipping && <SectionContent address={address?.shipping} />}
 
       <Divider />
-      
-      <SectionButton 
-        label="Detail Penagihan" 
+
+      <SectionButton
+        label='Detail Penagihan'
         active={section.invoice}
         toggle={() => toggleSection('invoice')}
       />
-      { section.invoice && <SectionContent address={address?.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}>
+  <button className='p-4 font-medium flex justify-between w-full' onClick={toggle}>
     <span>{label}</span>
-    { active ? (
-      <ChevronUpIcon className="w-5" />
-    ) : (
-      <ChevronDownIcon className="w-5" />
-    ) }
+    {active ? <ChevronUpIcon className='w-5' /> : <ChevronDownIcon className='w-5' />}
   </button>
 )
 
@@ -315,28 +294,20 @@ const SectionContent = ({ address }) => {
   fullAddress = fullAddress.join(', ')
 
   return (
-    <div className="flex flex-col gap-y-4 p-4 border-t border-gray_r-6">
-      <DescriptionRow label="Nama">
-        { address.name }
-      </DescriptionRow>
-      <DescriptionRow label="Email">
-        { address.email || '-' }
-      </DescriptionRow>
-      <DescriptionRow label="No Telepon">
-        { address.mobile || '-' }
-      </DescriptionRow>
-      <DescriptionRow label="Alamat">
-        { fullAddress }
-      </DescriptionRow>
+    <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
+      <DescriptionRow label='Nama'>{address.name}</DescriptionRow>
+      <DescriptionRow label='Email'>{address.email || '-'}</DescriptionRow>
+      <DescriptionRow label='No Telepon'>{address.mobile || '-'}</DescriptionRow>
+      <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
     </div>
   )
 }
 
 const DescriptionRow = ({ children, label }) => (
-  <div className="grid grid-cols-2">
-    <span className="text-gray_r-11">{ label }</span>
-    <span className="text-right">{ children }</span>
+  <div className='grid grid-cols-2'>
+    <span className='text-gray_r-11'>{label}</span>
+    <span className='text-right'>{children}</span>
   </div>
 )
 
-export default Transaction
\ No newline at end of file
+export default Transaction
-- 
cgit v1.2.3


From 7265295454801c1d921385a4b67fb3780b46771e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 14:00:00 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 2220f3be..17eacd45 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -288,7 +288,7 @@ const SectionButton = ({ label, active, toggle }) => (
 const SectionContent = ({ address }) => {
   let fullAddress = []
   if (address?.street) fullAddress.push(address.street)
-  if (address?.subDistrict?.name) fullAddress.push(address.sub_district.name)
+  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.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


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/transaction/components/Transaction.jsx | 61 +++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 11 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 17eacd45..7da33551 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -120,7 +120,10 @@ const Transaction = ({ id }) => {
         <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 />
+          <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>
@@ -137,7 +140,10 @@ const Transaction = ({ id }) => {
           <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}>
+              <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>
@@ -157,7 +163,10 @@ const Transaction = ({ id }) => {
               </Link>
             ))}
             {transaction.data?.invoices?.length === 0 && (
-              <Alert type='info' className='text-center'>
+              <Alert
+                type='info'
+                className='text-center'
+              >
                 Belum ada Invoice
               </Alert>
             )}
@@ -168,7 +177,10 @@ const Transaction = ({ id }) => {
 
         <div className='p-4 pt-0'>
           {transaction.data?.status == 'draft' && (
-            <button className='btn-yellow w-full mt-4' onClick={checkout}>
+            <button
+              className='btn-yellow w-full mt-4'
+              onClick={checkout}
+            >
               Lanjutkan Transaksi
             </button>
           )}
@@ -207,26 +219,50 @@ const Transaction = ({ id }) => {
             >
               Ya, Batalkan
             </button>
-            <button className='btn-light flex-1' type='button' onClick={closeCancelTransaction}>
+            <button
+              className='btn-light flex-1'
+              type='button'
+              onClick={closeCancelTransaction}
+            >
               Batal
             </button>
           </div>
         </BottomPopup>
 
-        <BottomPopup title='Upload PO' close={closeUploadPo} active={uploadPo}>
+        <BottomPopup
+          title='Upload PO'
+          close={closeUploadPo}
+          active={uploadPo}
+        >
           <div>
             <label>Nomor PO</label>
-            <input type='text' className='form-input mt-3' ref={poNumber} />
+            <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} />
+            <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}>
+            <button
+              type='button'
+              className='btn-light w-full'
+              onClick={closeUploadPo}
+            >
               Batal
             </button>
-            <button type='button' className='btn-solid-red w-full' onClick={submitUploadPo}>
+            <button
+              type='button'
+              className='btn-solid-red w-full'
+              onClick={submitUploadPo}
+            >
               Upload
             </button>
           </div>
@@ -279,7 +315,10 @@ const SectionAddress = ({ address }) => {
 }
 
 const SectionButton = ({ label, active, toggle }) => (
-  <button className='p-4 font-medium flex justify-between w-full' onClick={toggle}>
+  <button
+    className='p-4 font-medium flex justify-between w-full'
+    onClick={toggle}
+  >
     <span>{label}</span>
     {active ? <ChevronUpIcon className='w-5' /> : <ChevronDownIcon className='w-5' />}
   </button>
-- 
cgit v1.2.3