From 7640f5d74d7e4f4ee53b3f1be9e46e51a40cd4f4 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Sun, 6 Sep 2026 16:07:44 +0200
Subject: [PATCH] generalize CMS order invoice payment panel for multi-crypto
 invoices.

---
 ...Panel.vue => OrderInvoicePaymentPanel.vue} | 32 ++++++++++++-------
 .../OrderManualShippingQuotePanel.vue         |  3 +-
 cms/src/components/OrderPaymentPanel.vue      |  2 +-
 cms/src/types/payment/InvoiceExtended.ts      |  1 +
 cms/src/types/payment/PaymentMethod.ts        |  5 ---
 5 files changed, 23 insertions(+), 20 deletions(-)
 rename cms/src/components/{OrderMoneroPaymentPanel.vue => OrderInvoicePaymentPanel.vue} (78%)

diff --git a/cms/src/components/OrderMoneroPaymentPanel.vue b/cms/src/components/OrderInvoicePaymentPanel.vue
similarity index 78%
rename from cms/src/components/OrderMoneroPaymentPanel.vue
rename to cms/src/components/OrderInvoicePaymentPanel.vue
index ab3241d..ac27640 100644
--- a/cms/src/components/OrderMoneroPaymentPanel.vue
+++ b/cms/src/components/OrderInvoicePaymentPanel.vue
@@ -8,14 +8,12 @@
             </el-descriptions-item>
 
             <el-descriptions-item label="Expected total">
-                <span class="mono"
-                    >{{ invoice.expectedTotalCrypto }} {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}</span
-                >
+                <span class="mono">{{ invoice.expectedTotalCrypto }} {{ invoice.paymentLabel }}</span>
             </el-descriptions-item>
 
-            <el-descriptions-item v-if="fiatPerXmrAtCreation !== undefined" :label="`Rate at ${rateLabel}`">
-                {{ formatFiatPrice(fiatPerXmrAtCreation, config.shopFiatCurrency) }} /
-                {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}
+            <el-descriptions-item v-if="fiatPerCryptoAtCreation !== undefined" :label="`Rate at ${rateLabel}`">
+                {{ formatFiatPrice(fiatPerCryptoAtCreation, config.shopFiatCurrency) }} /
+                {{ invoice.paymentLabel }}
             </el-descriptions-item>
         </el-descriptions>
 
@@ -37,9 +35,7 @@
 
                 <el-table-column label="Amount" width="140">
                     <template #default="{ row }">
-                        <span class="mono"
-                            >{{ row.amountCrypto }} {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}</span
-                        >
+                        <span class="mono">{{ row.amountCrypto }} {{ invoice.paymentLabel }}</span>
                     </template>
                 </el-table-column>
 
@@ -69,7 +65,7 @@
 import { computed, type PropType } from 'vue';
 import { config } from '@/config';
 import type { InvoiceExtended } from '@/types/payment/InvoiceExtended';
-import { paymentMethodCryptoCurrency } from '@/types/payment/PaymentMethod';
+import { PaymentMethod } from '@/types/payment/PaymentMethod';
 import { formatDate } from '@/utils/formatDate';
 import { formatFiatPrice } from '@/utils/formatFiatPrice';
 import { resolveInvoiceStatusTagType } from '@/utils/order/resolveInvoiceStatusTagType';
@@ -85,13 +81,25 @@ const props = defineProps({
     },
     emptyText: {
         type: String,
-        default: 'No Monero payment session.'
+        default: 'No payment session.'
     }
 });
 
 const payments = computed(() => props.invoice?.payments ?? []);
 
-const fiatPerXmrAtCreation = computed(() => props.invoice?.moneroDetails?.fiatPerXmrAtCreation);
+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>
diff --git a/cms/src/components/OrderManualShippingQuotePanel.vue b/cms/src/components/OrderManualShippingQuotePanel.vue
index 91c037d..cdff2d2 100644
--- a/cms/src/components/OrderManualShippingQuotePanel.vue
+++ b/cms/src/components/OrderManualShippingQuotePanel.vue
@@ -53,10 +53,9 @@
             </el-descriptions>
 
             <template v-if="order.shippingInvoice">
-                <order-monero-payment-panel
+                <order-invoice-payment-panel
                     :invoice="order.shippingInvoice"
                     rate-label="quote"
-                    empty-text="Shipping payment session not created yet."
                 />
             </template>
 
diff --git a/cms/src/components/OrderPaymentPanel.vue b/cms/src/components/OrderPaymentPanel.vue
index 1728530..4238342 100644
--- a/cms/src/components/OrderPaymentPanel.vue
+++ b/cms/src/components/OrderPaymentPanel.vue
@@ -4,7 +4,7 @@
             <span>Order payment</span>
         </template>
 
-        <order-monero-payment-panel
+        <order-invoice-payment-panel
             :invoice="order.checkoutInvoice"
             rate-label="checkout"
             empty-text="No checkout payment session."
diff --git a/cms/src/types/payment/InvoiceExtended.ts b/cms/src/types/payment/InvoiceExtended.ts
index 1210097..2cc1c97 100644
--- a/cms/src/types/payment/InvoiceExtended.ts
+++ b/cms/src/types/payment/InvoiceExtended.ts
@@ -4,6 +4,7 @@ import type { InvoiceStatusLabel } from './InvoiceStatusLabel';
 
 export type InvoiceExtended = Omit<Invoice, 'payments'> & {
     statusLabel: InvoiceStatusLabel | null;
+    paymentLabel: string;
     expectedTotalCrypto: string;
     payments: InvoicePaymentExtended[];
 };
diff --git a/cms/src/types/payment/PaymentMethod.ts b/cms/src/types/payment/PaymentMethod.ts
index d4b138b..9299073 100644
--- a/cms/src/types/payment/PaymentMethod.ts
+++ b/cms/src/types/payment/PaymentMethod.ts
@@ -2,8 +2,3 @@ export enum PaymentMethod {
     Xmr = 'xmr',
     Btc = 'btc'
 }
-
-export const paymentMethodCryptoCurrency: Record<PaymentMethod, string> = {
-    [PaymentMethod.Xmr]: 'XMR',
-    [PaymentMethod.Btc]: 'BTC'
-};