Improve invoice status
* show if invoice expired * refactor style if invoice not found
This commit is contained in:
parent
530f87304b
commit
6171bfebde
|
@ -3,13 +3,15 @@
|
||||||
<div class="font-mono mb-3">
|
<div class="font-mono mb-3">
|
||||||
Payment Required
|
Payment Required
|
||||||
</div>
|
</div>
|
||||||
<router-link v-if="invoice.ConfirmedAt" :to="callbackUrl" class="label success font-mono">
|
<router-link v-if="invoice?.ConfirmedAt" :to="callbackUrl" class="label success font-mono">
|
||||||
<div>Paid</div>
|
<div>Paid</div>
|
||||||
<small v-if="redirectTimeout < 4">Redirecting in {{ redirectTimeout }} ...</small>
|
<small v-if="redirectTimeout < 4">Redirecting in {{ redirectTimeout }} ...</small>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div v-if="error" class="label error font-mono">
|
<div v-if="invoice && !invoice.ConfirmedAt && new Date(invoice.ExpiresAt) < new Date()" class="label error font-mono">
|
||||||
<div>Error</div>
|
<div>Expired</div>
|
||||||
<small>{{ error }}</small>
|
</div>
|
||||||
|
<div v-if="notFound" class="label error font-mono">
|
||||||
|
<div>Not Found</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="invoice">
|
<div v-if="invoice">
|
||||||
<figure class="flex flex-col m-auto">
|
<figure class="flex flex-col m-auto">
|
||||||
|
@ -67,7 +69,7 @@ const route = useRoute()
|
||||||
|
|
||||||
const invoice = ref(undefined)
|
const invoice = ref(undefined)
|
||||||
const redirectTimeout = ref(4)
|
const redirectTimeout = ref(4)
|
||||||
const error = ref(null)
|
const notFound = ref(undefined)
|
||||||
const label = ref('copy')
|
const label = ref('copy')
|
||||||
let copyTimeout = null
|
let copyTimeout = null
|
||||||
|
|
||||||
|
@ -86,8 +88,8 @@ const INVOICE_POLL = 2000
|
||||||
const fetchInvoice = async () => {
|
const fetchInvoice = async () => {
|
||||||
const url = window.origin + '/api/invoice/' + route.params.id
|
const url = window.origin + '/api/invoice/' + route.params.id
|
||||||
const res = await fetch(url)
|
const res = await fetch(url)
|
||||||
|
notFound.value = res.status === 404
|
||||||
if (res.status === 404) {
|
if (res.status === 404) {
|
||||||
error.value = 'invoice not found'
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const body = await res.json()
|
const body = await res.json()
|
||||||
|
@ -103,6 +105,10 @@ const fetchInvoice = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
invoice.value = body
|
invoice.value = body
|
||||||
|
if (new Date(invoice.value.ExpiresAt) < new Date()) {
|
||||||
|
// invoice expired
|
||||||
|
return
|
||||||
|
}
|
||||||
if (!invoice.value.ConfirmedAt) {
|
if (!invoice.value.ConfirmedAt) {
|
||||||
// invoice not pad (yet?)
|
// invoice not pad (yet?)
|
||||||
pollTimeout = setTimeout(() => {
|
pollTimeout = setTimeout(() => {
|
||||||
|
|
Loading…
Reference in New Issue