123 lines
2.3 KiB
Vue
123 lines
2.3 KiB
Vue
<template>
|
||
<UiAccordion
|
||
active-icon="disclosure-up"
|
||
inactive-icon="disclosure-down"
|
||
:model-value="accordion ? undefined : 'details'"
|
||
:disabled="!accordion"
|
||
>
|
||
<UiAccordionItem id="details" :class="cn.b()">
|
||
<template #title>
|
||
<p :class="cn.e('title')">
|
||
Payment details
|
||
</p>
|
||
</template>
|
||
|
||
<template #default>
|
||
<dl :class="cn.e('list')">
|
||
<!-- <dt>Date</dt> -->
|
||
<!-- <dd>22 сент. 2022г., 11:27</dd> -->
|
||
|
||
<dt>Status</dt>
|
||
<dd :class="[cn.e('status-text'), invoice.status]">
|
||
{{ statusText }}
|
||
</dd>
|
||
|
||
<dt>Blockchain</dt>
|
||
<dd>
|
||
TRON
|
||
</dd>
|
||
|
||
<dt>Sender</dt>
|
||
<dd>
|
||
<TextShortener :text="invoice.transfers?.[0]?.sender" />
|
||
</dd>
|
||
|
||
<dt>Recipient</dt>
|
||
<dd>
|
||
<TextShortener :text="invoice.transfers?.[0]?.recipient" />
|
||
</dd>
|
||
|
||
<dt>TXID</dt>
|
||
<dd>
|
||
<TextShortener :text="invoice.transfers?.[0]?.txID" />
|
||
</dd>
|
||
</dl>
|
||
</template>
|
||
</UiAccordionItem>
|
||
</UiAccordion>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
accordion: Boolean,
|
||
})
|
||
|
||
const { invoice } = inject('public-invoice')
|
||
|
||
const cn = useClassname('invoice-form-details')
|
||
|
||
const statusText = computed(() => {
|
||
switch (invoice.value.status) {
|
||
case 'completed':
|
||
return 'Payment success'
|
||
case 'underpaid':
|
||
return 'Invoice has been partially paid'
|
||
case 'overpaid':
|
||
return 'Invoice has been over paid'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.invoice-form-details {
|
||
$self: &;
|
||
|
||
--accordion-head-padding: 16px;
|
||
--accordion-head-active-padding: 16px;
|
||
--accordion-content-padding: 0 16px 16px;
|
||
|
||
text-align: left;
|
||
outline: none !important;
|
||
|
||
&:hover,
|
||
&.is-active {
|
||
background-color: $clr-grey-100;
|
||
}
|
||
|
||
&__title {
|
||
@include txt-l-m;
|
||
}
|
||
|
||
&__list {
|
||
@include txt-r-m;
|
||
@include txt-r-m('text-shortener', true);
|
||
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
row-gap: 16px;
|
||
margin: 0;
|
||
color: $clr-grey-500;
|
||
|
||
dt, dd {
|
||
margin: 0;
|
||
}
|
||
|
||
dt {
|
||
color: $clr-grey-600;
|
||
}
|
||
|
||
dd {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&__status-text {
|
||
color: $clr-warn-500;
|
||
|
||
&.completed {
|
||
color: $clr-green-500;
|
||
}
|
||
}
|
||
}
|
||
</style>
|