127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<template>
|
|
<div :class="cn.m('underpaid')">
|
|
<img
|
|
src="/partially.svg"
|
|
alt="Success"
|
|
class="mb-16"
|
|
data-status-illustration
|
|
>
|
|
|
|
<h2 class="text-clr-grey-600">
|
|
Invoice has been partially paid
|
|
</h2>
|
|
|
|
<p :class="cn.e('total')">
|
|
Total amount to be paid - <strong>{{ total }}</strong>
|
|
</p>
|
|
|
|
<div class="mt-32">
|
|
<UiCoin :code="invoice.currencyCode" />
|
|
|
|
<div :class="cn.e('collected-amount')">
|
|
<span>Funds received</span>
|
|
|
|
<MoneyAmount
|
|
:value="invoice.collectedAmount"
|
|
:currency="invoice.currencyCode"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<UiAlert type="warning" :class="cn.e('alert')">
|
|
You need to deposit the missing part of the funds - <span style="white-space: nowrap">{{ missingAmount }}</span>, otherwise the bill will not be paid
|
|
</UiAlert>
|
|
|
|
<InvoiceFormDetails :class="cn.e('details')" accordion />
|
|
|
|
<UiButton
|
|
:class="cn.e('pay-additional')"
|
|
size="large"
|
|
@click="notify({ type: 'warning', id: 'wip', text: 'Work in progress' })"
|
|
>
|
|
Pay in addition
|
|
</UiButton>
|
|
|
|
<UiButton
|
|
:class="cn.e('explorer')"
|
|
type="link"
|
|
color="secondary"
|
|
:href="explorerLink"
|
|
target="_blank"
|
|
>
|
|
Просмотреть в обозревателе блоков
|
|
</UiButton>
|
|
|
|
<InvoiceFormSeparator />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Decimal from 'decimal.js'
|
|
|
|
const { invoice } = inject('public-invoice')
|
|
|
|
const cn = useClassname('invoice-form')
|
|
const notify = useNotify()
|
|
|
|
const total = computed(() => $money.fullFormat(invoice.value.amount, invoice.value.currencyCode))
|
|
const missingAmount = computed(() => $money.fullFormat(Decimal.sub(invoice.value.amount, invoice.value.collectedAmount), invoice.value.currencyCode))
|
|
const explorerLink = computed(() => {
|
|
return `https://nile.tronscan.org/#/address/${invoice.value.walletAddress}`
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.invoice-form {
|
|
$self: &;
|
|
|
|
&--underpaid {
|
|
#{$self}__total {
|
|
@include h4;
|
|
|
|
color: $clr-grey-400;
|
|
margin-top: 4px;
|
|
|
|
strong {
|
|
color: $clr-grey-500;
|
|
}
|
|
}
|
|
|
|
#{$self}__collected-amount {
|
|
@include h3('money-amount-value', true);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
|
|
> span {
|
|
@include txt-r-m;
|
|
|
|
color: $clr-grey-500;
|
|
}
|
|
}
|
|
|
|
#{$self}__alert {
|
|
margin-top: 32px;
|
|
padding-block: 16px;
|
|
}
|
|
|
|
#{$self}__details {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
#{$self}__pay-additional {
|
|
width: 100%;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
#{$self}__explorer {
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|