diff options
Diffstat (limited to 'src/lib/transaction/components/Transaction.jsx')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 191 |
1 files changed, 190 insertions, 1 deletions
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> |