feat: add taxes to invoices (#10821)

frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx

@@ -109,13 +109,14 @@ export const BillingInvoice = ({
     invoicePDF,
     invoiceURL,
     totalAmount,
+    subtotal,
+    taxAmount,
+    currency,
     mainLines,
     usageLines,
     monthText,
     defaultExpanded,
 }: BillingInvoiceProps) => {
-    const currency = mainLines?.[0]?.currency || usageLines?.[0]?.currency;
-
     const formattedTitle = invoiceDate
         ? new Date(invoiceDate).toLocaleDateString(undefined, {
               month: 'long',
@@ -181,7 +182,10 @@ export const BillingInvoice = ({
                         </StyledTableRow>
                         {mainLines.map((line) => (
                             <StyledTableRow key={line.description}>
-                                <BillingInvoiceMainRow {...line} />
+                                <BillingInvoiceMainRow
+                                    {...line}
+                                    invoiceCurrency={currency}
+                                />
                             </StyledTableRow>
                         ))}
                     </TableBody>
@@ -201,7 +205,10 @@ export const BillingInvoice = ({
                             </StyledTableRow>
                             {usageLines.map((line) => (
                                 <StyledTableRow key={line.description}>
-                                    <BillingInvoiceUsageRow {...line} />
+                                    <BillingInvoiceUsageRow
+                                        {...line}
+                                        invoiceCurrency={currency}
+                                    />
                                 </StyledTableRow>
                             ))}
                         </TableBody>
@@ -210,6 +217,8 @@ export const BillingInvoice = ({
                     )}
 
                     <BillingInvoiceFooter
+                        subTotal={subtotal}
+                        taxAmount={taxAmount}
                         totalAmount={totalAmount}
                         currency={currency}
                     />

frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceFooter/BillingInvoiceFooter.tsx

@@ -29,7 +29,10 @@ const StyledTableFooterCell = styled('div', {
     ...(colSpan ? { gridColumn: `span ${colSpan}` } : {}),
 }));
 
-const TaxRow: FC<{ value?: number }> = ({ value }) => {
+const TaxRow: FC<{ value?: number; currency?: string }> = ({
+    value,
+    currency,
+}) => {
     if (value === undefined) {
         return (
             <StyledTableFooterCell colSpan={2}>
@@ -42,7 +45,9 @@ const TaxRow: FC<{ value?: number }> = ({ value }) => {
         <>
             <StyledTableFooterCell>Tax</StyledTableFooterCell>
             <StyledTableFooterCell>
-                <StyledAmountCell>{formatCurrency(value)}</StyledAmountCell>
+                <StyledAmountCell>
+                    {formatCurrency(value, currency)}
+                </StyledAmountCell>
             </StyledTableFooterCell>
         </>
     );
@@ -63,18 +68,16 @@ export const BillingInvoiceFooter = ({
 }: BillingInvoiceFooterProps) => {
     return (
         <StyledTableFooter>
-            {subTotal || !taxAmount ? (
-                <StyledTableFooterRow>
-                    <StyledTableFooterCell>Sub total</StyledTableFooterCell>
-                    <StyledTableFooterCell>
-                        <StyledAmountCell>
-                            {formatCurrency(subTotal || totalAmount, currency)}
-                        </StyledAmountCell>
-                    </StyledTableFooterCell>
-                </StyledTableFooterRow>
-            ) : null}
             <StyledTableFooterRow>
-                <TaxRow value={taxAmount} />
+                <StyledTableFooterCell>Sub total</StyledTableFooterCell>
+                <StyledTableFooterCell>
+                    <StyledAmountCell>
+                        {formatCurrency(subTotal || 0, currency)}
+                    </StyledAmountCell>
+                </StyledTableFooterCell>
+            </StyledTableFooterRow>
+            <StyledTableFooterRow>
+                <TaxRow value={taxAmount} currency={currency} />
             </StyledTableFooterRow>
             <StyledTableFooterRow last>
                 <StyledTableFooterCell>Total</StyledTableFooterCell>

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 = ({
             </StyledDescriptionCell>
             <div>{quantity ? formatLargeNumbers(quantity) : '–'}</div>
             <StyledAmountCell>
-                {formatCurrency(totalAmount || 0, currency)}
+                {formatCurrency(totalAmount || 0, invoiceCurrency)}
             </StyledAmountCell>
         </>
     );

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 (
         <>
             <StyledDescriptionCell>{description}</StyledDescriptionCell>
@@ -43,10 +50,14 @@ export const BillingInvoiceUsageRow = ({
                             : '–'}
                 </div>
             </StyledCellWithIndicator>
-            <div>{quantity ? formatLargeNumbers(quantity) : '–'}</div>
+            <div>{quantity ? formatLargeNumbers(quantity) : ''}</div>
-            <StyledAmountCell>
+            {hasAmount ? (
-                {formatCurrency(totalAmount || 0, currency)}
+                <StyledAmountCell>
-            </StyledAmountCell>
+                    {formatCurrency(totalAmount, invoiceCurrency)}
+                </StyledAmountCell>
+            ) : (
+                <div />
+            )}
         </>
     );
 };