110 lines
3.9 KiB
Vue
110 lines
3.9 KiB
Vue
<template>
|
|
<div v-if="invoice" class="min-w-0">
|
|
<el-descriptions :column="1" class="mb-16 descriptions-row-labels">
|
|
<el-descriptions-item v-if="invoice.statusLabel" label="Status">
|
|
<el-tag :type="resolveInvoiceStatusTagType(invoice.statusLabel)">
|
|
{{ invoice.statusLabel }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item label="Expected total">
|
|
<span class="mono">{{ invoice.expectedTotalCrypto }} {{ invoice.paymentLabel }}</span>
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item v-if="fiatPerCryptoAtCreation !== undefined" :label="`Rate at ${rateLabel}`">
|
|
{{ formatFiatPrice(fiatPerCryptoAtCreation, config.shopFiatCurrency) }} /
|
|
{{ invoice.paymentLabel }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-descriptions :column="1" direction="vertical" class="mb-16">
|
|
<el-descriptions-item label="Payment address">
|
|
<span class="mono text-break">{{ invoice.paymentAddress }}</span>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<p class="secondary-text m-0 mb-8">Transactions</p>
|
|
|
|
<div v-if="payments.length" class="cms-table-scroll">
|
|
<el-table :data="payments" stripe size="small" class="mb-0">
|
|
<el-table-column label="Tx hash" min-width="200" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
<span class="mono">{{ row.txHash }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Amount" width="140">
|
|
<template #default="{ row }">
|
|
<span class="mono">{{ row.amountCrypto }} {{ invoice.paymentLabel }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Detected" width="120">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.createdAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Confirmations" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.isConfirmed ? 'success' : 'warning'" size="small">
|
|
{{ row.confirmationsLabel }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<p v-else class="secondary-text m-0">No transactions detected yet.</p>
|
|
</div>
|
|
|
|
<p v-else class="secondary-text m-0">{{ emptyText }}</p>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, type PropType } from 'vue';
|
|
import { config } from '@/config';
|
|
import type { InvoiceExtended } from '@/types/payment/InvoiceExtended';
|
|
import { PaymentMethod } from '@/types/payment/PaymentMethod';
|
|
import { formatDate } from '@/utils/formatDate';
|
|
import { formatFiatPrice } from '@/utils/formatFiatPrice';
|
|
import { resolveInvoiceStatusTagType } from '@/utils/order/resolveInvoiceStatusTagType';
|
|
|
|
const props = defineProps({
|
|
invoice: {
|
|
type: Object as PropType<InvoiceExtended | null | undefined>,
|
|
default: undefined
|
|
},
|
|
rateLabel: {
|
|
type: String,
|
|
default: 'checkout'
|
|
},
|
|
emptyText: {
|
|
type: String,
|
|
default: 'No payment session.'
|
|
}
|
|
});
|
|
|
|
const payments = computed(() => props.invoice?.payments ?? []);
|
|
|
|
const fiatPerCryptoAtCreation = computed(() => {
|
|
const invoice = props.invoice;
|
|
|
|
if (!invoice) {
|
|
return undefined;
|
|
}
|
|
|
|
if (invoice.paymentMethod === PaymentMethod.Btc) {
|
|
return invoice.btcDetails?.fiatPerBtcAtCreation;
|
|
}
|
|
|
|
return invoice.moneroDetails?.fiatPerXmrAtCreation;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-descriptions__content) {
|
|
min-width: 0;
|
|
}
|
|
</style>
|