feat: [M3-6980] - Add DC Specific Pricing Invoice Support

packages/api-v4/src/account/types.ts

@@ -119,7 +119,7 @@ export interface InvoiceItem {
   unit_price: null | string;
   tax: number;
   total: number;
-  region: Region['id'];
+  region: string | null;
 }
 
 export interface Payment {

packages/manager/.changeset/pr-9597-upcoming-features-1693255450332.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DC Specific Pricing Invoice Support ([#9597](https://github.com/linode/manager/pull/9597))

packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx

@@ -247,7 +247,8 @@ export const BillingActivityPanel = (props: Props) => {
             account!,
             invoice,
             invoiceItems,
-            taxes
+            taxes,
+            flags
           );
 
           if (result.status === 'error') {

packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx

@@ -85,11 +85,23 @@ export const InvoiceDetail = () => {
   ) => {
     const taxes =
       flags[getShouldUseAkamaiBilling(invoice.date) ? 'taxes' : 'taxBanner'];
-    const result = await printInvoice(account, invoice, items, taxes);
+    const result = await printInvoice(account, invoice, items, taxes, flags);
 
     setPDFGenerationError(result.status === 'error' ? result.error : undefined);
   };
 
+  const csvHeaders = [
+    { key: 'label', label: 'Description' },
+    { key: 'from', label: 'From' },
+    { key: 'to', label: 'To' },
+    { key: 'quantity', label: 'Quantity' },
+    ...(flags.dcSpecificPricing ? [{ key: 'region', label: 'Region' }] : []),
+    { key: 'unit_price', label: 'Unit Price' },
+    { key: 'amount', label: 'Amount (USD)' },
+    { key: 'tax', label: 'Tax (USD)' },
+    { key: 'total', label: 'Total (USD)' },
+  ];
+
   const sxGrid = {
     alignItems: 'center',
     display: 'flex',
@@ -226,14 +238,3 @@ export const InvoiceDetail = () => {
 };
 
 export default InvoiceDetail;
-
-const csvHeaders = [
-  { key: 'label', label: 'Description' },
-  { key: 'from', label: 'From' },
-  { key: 'to', label: 'To' },
-  { key: 'quantity', label: 'Quantity' },
-  { key: 'unit_price', label: 'Unit Price' },
-  { key: 'amount', label: 'Amount (USD)' },
-  { key: 'tax', label: 'Tax (USD)' },
-  { key: 'total', label: 'Total (USD)' },
-];

packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx

@@ -17,6 +17,8 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { renderUnitPrice } from 'src/features/Billing/billingUtils';
+import { useFlags } from 'src/hooks/useFlags';
+import { getInvoiceRegion } from '../PdfGenerator/utils';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   table: {
@@ -38,23 +40,23 @@ interface Props {
 
 const InvoiceTable = (props: Props) => {
   const { classes } = useStyles();
+  const flags = useFlags();
 
   const { errors, items, loading } = props;
 
   return (
     <Table aria-label="Invoice Details" className={classes.table} noBorder>
       <TableHead>
         <TableRow>
-          <TableCell data-qa-column="Description">Description</TableCell>
-          <TableCell data-qa-column="From">From</TableCell>
-          <TableCell data-qa-column="To">To</TableCell>
-          <TableCell data-qa-column="Quantity">Quantity</TableCell>
-          <TableCell data-qa-column="Unit Price" noWrap>
-            Unit Price
-          </TableCell>
-          <TableCell data-qa-column="Amount">Amount (USD)</TableCell>
-          <TableCell data-qa-column="Taxes">Tax (USD)</TableCell>
-          <TableCell data-qa-column="Total">Total (USD)</TableCell>
+          <TableCell>Description</TableCell>
+          <TableCell>From</TableCell>
+          <TableCell>To</TableCell>
+          <TableCell>Quantity</TableCell>
+          {flags.dcSpecificPricing && <TableCell>Region</TableCell>}
+          <TableCell noWrap>Unit Price</TableCell>
+          <TableCell>Amount (USD)</TableCell>
+          <TableCell>Tax (USD)</TableCell>
+          <TableCell>Total (USD)</TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
@@ -70,6 +72,7 @@ const renderDate = (v: null | string) =>
 const renderQuantity = (v: null | number) => (v ? v : null);
 
 const RenderData = (props: { items: InvoiceItem[] }) => {
+  const flags = useFlags();
   const { items } = props;
 
   const MIN_PAGE_SIZE = 25;
@@ -85,36 +88,48 @@ const RenderData = (props: { items: InvoiceItem[] }) => {
         pageSize,
       }) => (
         <React.Fragment>
-          {paginatedData.map(
-            ({ amount, from, label, quantity, tax, to, total, unit_price }) => (
-              <TableRow key={`${label}-${from}-${to}`}>
-                <TableCell data-qa-description parentColumn="Description">
-                  {label}
-                </TableCell>
-                <TableCell data-qa-from parentColumn="From">
-                  {renderDate(from)}
-                </TableCell>
-                <TableCell data-qa-to parentColumn="To">
-                  {renderDate(to)}
-                </TableCell>
-                <TableCell data-qa-quantity parentColumn="Quantity">
-                  {renderQuantity(quantity)}
-                </TableCell>
-                <TableCell data-qa-unit-price parentColumn="Unit Price">
-                  {unit_price !== 'None' && renderUnitPrice(unit_price)}
-                </TableCell>
-                <TableCell data-qa-amount parentColumn="Amount (USD)">
-                  <Currency quantity={amount} wrapInParentheses={amount < 0} />
-                </TableCell>
-                <TableCell data-qa-tax parentColumn="Tax (USD)">
-                  <Currency quantity={tax} />
-                </TableCell>
-                <TableCell data-qa-total parentColumn="Total (USD)">
-                  <Currency quantity={total} wrapInParentheses={total < 0} />
+          {paginatedData.map((invoiceItem: InvoiceItem) => (
+            <TableRow
+              key={`${invoiceItem.label}-${invoiceItem.from}-${invoiceItem.to}`}
+            >
+              <TableCell data-qa-description parentColumn="Description">
+                {invoiceItem.label}
+              </TableCell>
+              <TableCell data-qa-from parentColumn="From">
+                {renderDate(invoiceItem.from)}
+              </TableCell>
+              <TableCell data-qa-to parentColumn="To">
+                {renderDate(invoiceItem.to)}
+              </TableCell>
+              <TableCell data-qa-quantity parentColumn="Quantity">
+                {renderQuantity(invoiceItem.quantity)}
+              </TableCell>
+              {flags.dcSpecificPricing && (
+                <TableCell parentColumn="Region">
+                  {getInvoiceRegion(invoiceItem)}
                 </TableCell>
-              </TableRow>
-            )
-          )}
+              )}
+              <TableCell data-qa-unit-price parentColumn="Unit Price">
+                {invoiceItem.unit_price !== 'None' &&
+                  renderUnitPrice(invoiceItem.unit_price)}
+              </TableCell>
+              <TableCell data-qa-amount parentColumn="Amount (USD)">
+                <Currency
+                  quantity={invoiceItem.amount}
+                  wrapInParentheses={invoiceItem.amount < 0}
+                />
+              </TableCell>
+              <TableCell data-qa-tax parentColumn="Tax (USD)">
+                <Currency quantity={invoiceItem.tax} />
+              </TableCell>
+              <TableCell data-qa-total parentColumn="Total (USD)">
+                <Currency
+                  quantity={invoiceItem.total}
+                  wrapInParentheses={invoiceItem.total < 0}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
           {count > MIN_PAGE_SIZE && (
             <TableRow>
               <TableCell
@@ -145,6 +160,7 @@ const MaybeRenderContent = (props: {
   items?: any[];
   loading: boolean;
 }) => {
+  const flags = useFlags();
   const { errors, items, loading } = props;
 
   if (loading) {
@@ -153,15 +169,18 @@ const MaybeRenderContent = (props: {
 
   if (errors) {
     return (
-      <TableRowError colSpan={8} message="Unable to retrieve invoice items." />
+      <TableRowError
+        colSpan={flags.dcSpecificPricing ? 9 : 8}
+        message="Unable to retrieve invoice items."
+      />
     );
   }
 
   if (items && items.length > 0) {
     return <RenderData items={items} />;
   }
 
-  return <TableRowEmpty colSpan={8} />;
+  return <TableRowEmpty colSpan={flags.dcSpecificPricing ? 9 : 8} />;
 };
 
 export default InvoiceTable;

packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts

@@ -184,6 +184,7 @@ export const printInvoice = async (
   invoice: Invoice,
   items: InvoiceItem[],
   taxes: FlagSet['taxBanner'] | FlagSet['taxes'],
+  flags: FlagSet,
   timezone?: string
 ): Promise<PdfResult> => {
   try {
@@ -264,7 +265,7 @@ export const printInvoice = async (
         text: `Invoice: #${invoiceId}`,
       });
 
-      createInvoiceItemsTable(doc, itemsChunk, timezone);
+      createInvoiceItemsTable(doc, itemsChunk, flags, timezone);
       createFooter(doc, baseFont, account.country, invoice.date);
       if (index < itemsChunks.length - 1) {
         doc.addPage();

packages/manager/src/features/Billing/PdfGenerator/utils.ts

@@ -12,6 +12,7 @@ import { ADDRESSES } from 'src/constants';
 import { formatDate } from 'src/utilities/formatDate';
 
 import { getShouldUseAkamaiBilling } from '../billingUtils';
+import { FlagSet } from 'src/featureFlags';
 
 /**
  * Margin that has to be applied to every item added to the PDF.
@@ -90,6 +91,7 @@ export const createPaymentsTotalsTable = (doc: JSPDF, payment: Payment) => {
 export const createInvoiceItemsTable = (
   doc: JSPDF,
   items: InvoiceItem[],
+  flags: FlagSet,
   timezone?: string
 ) => {
   autoTable(doc, {
@@ -116,6 +118,18 @@ export const createInvoiceItemsTable = (
           content: item.quantity || '',
           styles: { fontSize: 8, halign: 'center', overflow: 'linebreak' },
         },
+        ...(flags.dcSpecificPricing
+          ? [
+              {
+                content: getInvoiceRegion(item) ?? '',
+                styles: {
+                  fontSize: 8,
+                  halign: 'center',
+                  overflow: 'linebreak',
+                },
+              } as const,
+            ]
+          : []),
         {
           content: item.unit_price || '',
           styles: { fontSize: 8, halign: 'center', overflow: 'linebreak' },
@@ -146,6 +160,7 @@ export const createInvoiceItemsTable = (
         'From',
         'To',
         'Quantity',
+        ...(flags.dcSpecificPricing ? ['Region'] : []),
         'Unit Price',
         'Amount',
         'Tax',
@@ -279,6 +294,21 @@ const truncateLabel = (label: string) => {
   return label.length > 20 ? `${label.substr(0, 20)}...` : label;
 };
 
+export const getInvoiceRegion = (invoiceItem: InvoiceItem) => {
+  // If the invoice item is not regarding transfer, just return the region.
+  if (!invoiceItem.label.toLowerCase().includes('transfer')) {
+    return invoiceItem.region;
+  }
+
+  // If there is no region, assume this invoice item is for global transfer.
+  if (!invoiceItem.region) {
+    return 'Global';
+  }
+
+  // The transfer is for a specific region's pool.
+  return invoiceItem.region;
+};
+
 const formatDescription = (desc?: string) => {
   if (!desc) {
     return 'No Description';

packages/manager/src/mocks/serverHandlers.ts

@@ -918,6 +918,26 @@ export const handlers = [
   rest.get('*/kubeconfig', (req, res, ctx) => {
     return res(ctx.json({ kubeconfig: 'SSBhbSBhIHRlYXBvdA==' }));
   }),
+  rest.get('*invoices/555/items', (req, res, ctx) => {
+    return res(
+      ctx.json(
+        makeResourcePage([
+          invoiceItemFactory.build({
+            label: 'Linode',
+            region: 'br-gru',
+          }),
+          invoiceItemFactory.build({
+            label: 'Outbound Transfer',
+            region: null,
+          }),
+          invoiceItemFactory.build({
+            label: 'Outbound Transfer',
+            region: 'id-cgk',
+          }),
+        ])
+      )
+    );
+  }),
   rest.get('*invoices/:invoiceId/items', (req, res, ctx) => {
     const items = invoiceItemFactory.buildList(10);
     return res(ctx.json(makeResourcePage(items, { page: 1, pages: 4 })));