Total
diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceMainRow/BillingInvoiceMainRow.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceMainRow/BillingInvoiceMainRow.tsx
index 9ee578759f..e100a68d3e 100644
--- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceMainRow/BillingInvoiceMainRow.tsx
+++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceMainRow/BillingInvoiceMainRow.tsx
@@ -12,6 +12,10 @@ const StyledSubText = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.caption.fontSize,
}));
+type BillingInvoiceMainRowProps = DetailedInvoicesLineSchema & {
+ invoiceCurrency?: string;
+};
+
export const BillingInvoiceMainRow = ({
quantity,
description,
@@ -19,7 +23,8 @@ export const BillingInvoiceMainRow = ({
totalAmount,
startDate,
endDate,
-}: DetailedInvoicesLineSchema) => {
+ invoiceCurrency,
+}: BillingInvoiceMainRowProps) => {
const formattedStart = startDate
? new Date(startDate).toLocaleDateString(undefined, {
month: 'short',
@@ -45,7 +50,7 @@ export const BillingInvoiceMainRow = ({
{quantity ? formatLargeNumbers(quantity) : '–'}
- {formatCurrency(totalAmount || 0, currency)}
+ {formatCurrency(totalAmount || 0, invoiceCurrency)}
>
);
diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceUsageRow/BillingInvoiceUsageRow.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceUsageRow/BillingInvoiceUsageRow.tsx
index 4eed74fb5a..59a1039511 100644
--- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceUsageRow/BillingInvoiceUsageRow.tsx
+++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceUsageRow/BillingInvoiceUsageRow.tsx
@@ -15,6 +15,10 @@ const StyledCellWithIndicator = styled('div')(({ theme }) => ({
maxHeight: theme.spacing(2.5),
}));
+type BillingInvoiceUsageRowProps = DetailedInvoicesLineSchema & {
+ invoiceCurrency?: string;
+};
+
export const BillingInvoiceUsageRow = ({
quantity,
consumption,
@@ -22,12 +26,15 @@ export const BillingInvoiceUsageRow = ({
description,
currency,
totalAmount,
-}: DetailedInvoicesLineSchema) => {
+ invoiceCurrency,
+}: BillingInvoiceUsageRowProps) => {
const percentage =
limit && limit > 0
? Math.min(100, Math.round(((consumption || 0) / limit) * 100))
: undefined;
+ const hasAmount = totalAmount && totalAmount > 0;
+
return (
<>
{description}
@@ -43,10 +50,14 @@ export const BillingInvoiceUsageRow = ({
: '–'}
- {quantity ? formatLargeNumbers(quantity) : '–'}
-
- {formatCurrency(totalAmount || 0, currency)}
-
+ {quantity ? formatLargeNumbers(quantity) : ''}
+ {hasAmount ? (
+
+ {formatCurrency(totalAmount, invoiceCurrency)}
+
+ ) : (
+
+ )}
>
);
};