Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-24 20:06:55 +01:00
Code Issues Projects Releases Wiki Activity

feat: add taxes to invoices (#10821)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-10-17 09:49:09 +03:00 committed by GitHub
parent f22144de2a
commit e9d2b30603
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 52 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx
View File

@ -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}
/>

29
frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceFooter/BillingInvoiceFooter.tsx
View File

@ -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>

9
frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceMainRow/BillingInvoiceMainRow.tsx
View File

@ -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>
</>
);

21
frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoiceUsageRow/BillingInvoiceUsageRow.tsx
View File

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