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

cms/src/components/OrderInvoicePaymentPanel.vue

@@ -8,14 +8,12 @@
             </el-descriptions-item>
 
             <el-descriptions-item label="Expected total">
-                <span class="mono"
+                <span class="mono">{{ invoice.expectedTotalCrypto }} {{ invoice.paymentLabel }}</span>
-                    >{{ invoice.expectedTotalCrypto }} {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}</span
-                >
             </el-descriptions-item>
 
-            <el-descriptions-item v-if="fiatPerXmrAtCreation !== undefined" :label="`Rate at ${rateLabel}`">
+            <el-descriptions-item v-if="fiatPerCryptoAtCreation !== undefined" :label="`Rate at ${rateLabel}`">
-                {{ formatFiatPrice(fiatPerXmrAtCreation, config.shopFiatCurrency) }} /
+                {{ formatFiatPrice(fiatPerCryptoAtCreation, config.shopFiatCurrency) }} /
-                {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}
+                {{ invoice.paymentLabel }}
             </el-descriptions-item>
         </el-descriptions>
 
@@ -37,9 +35,7 @@
 
                 <el-table-column label="Amount" width="140">
                     <template #default="{ row }">
-                        <span class="mono"
+                        <span class="mono">{{ row.amountCrypto }} {{ invoice.paymentLabel }}</span>
-                            >{{ row.amountCrypto }} {{ paymentMethodCryptoCurrency[invoice.paymentMethod] }}</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>

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>
 

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."

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[];
 };

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'
-};