generalize CMS order invoice payment panel for multi-crypto invoices.

2026-09-06 16:07:44 +02:00
parent 35052661f8
commit 7640f5d74d
5 changed files with 23 additions and 20 deletions
@@ -0,0 +1,109 @@
+<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>