blob: c9bdf7151ae2e2fb965a52a37070f1523e03a26e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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
|
