Show the tax-inclusive price for each catalogue product
Angular · Angular · intermediate · modification
Generalises GrossPricePipe for our mixed-rate catalogue: it now takes the product and renders its tax-inclusive price, instead of the standard-rate-only version it shipped with. Verified against our standard-rated homeware lines.
The catalogue mixes standard-, reduced- and zero-rated goods (books, kids' clothing, food); every price cell renders through this pipe, and product.vatRate comes from the product's tax category.
Requirements
- Generalise GrossPricePipe so it takes the whole product and renders that product's tax-inclusive price on the catalogue, replacing the standard-rate-only version.
- Apply the product's own VAT rate — product.vatRate holds the decimal rate for that product's tax category (0.2 standard, 0.05 reduced, 0 zero-rated).
- product.netPrice is a non-negative currency amount with at most two decimal places; product.vatRate is a non-negative decimal rate.
- Round the gross price to the nearest cent, with a half-cent tie rounded up (e.g. an exact 4.515 renders as 4.52).
Files touched
- src/app/catalogue/gross-price.pipe.ts
--- src/app/catalogue/gross-price.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
+
+export interface Product {
+ name: string;
+ netPrice: number;
+ /** Decimal VAT rate for this product's tax category: 0.2 standard, 0.05 reduced, 0 zero-rated. */
+ vatRate: number;
+}
@Pipe({ name: 'grossPrice' })
export class GrossPricePipe implements PipeTransform {
- /** Standard-rate goods only: net price plus 20% VAT, rounded to the cent (half-cent ties up). */
- transform(netPrice: number): number {
- const netCents = Math.round(netPrice * 100);
+ /** Net price plus this product's VAT, rounded to the cent (half-cent ties up). */
+ transform(product: Product): number {
+ const netCents = Math.round(product.netPrice * 100);
const grossCents = Math.round(netCents * (10000 + 2000) / 10000);
return grossCents / 100;