Function InvoiceTable

console/src/platform/billing/InvoiceTable.tsx:42–117

({
  invoices,
  planType,
}: {
  invoices: Invoice[];
  planType: PlanType;
})

};

const InvoiceTable = ({
  invoices,
  planType,
}: {
  invoices: Invoice[];
  planType: PlanType;
}) => {
  const { colors } = useTheme<MaterializeTheme>();
  const shouldShowTotal = planType !== "capacity";
  return (
    <Table variant="standalone" data-testid="invoice-table">
      <Thead>
        <Tr>
          <Th {...headerProps}>Name</Th>
          <Th {...headerProps}>Date received</Th>
          {shouldShowTotal && (
            <Th {...headerProps} isNumeric>
              Total
            </Th>
          )}
          <Th {...headerProps}></Th>
        </Tr>
      </Thead>
      <Tbody>
        {invoices.map((invoice, i) => {
          const url = invoice.webUrl || invoice.pdfUrl;
          const isDraft = invoice.status === "draft";
          return (
            <Tr key={i}>
              <Td>
                <Text
                  textStyle="text-ui-med"
                  textColor={
                    isDraft
                      ? colors.foreground.secondary
                      : colors.foreground.primary
                  }
                  fontStyle={isDraft ? "italic" : "normal"}
                >
                  {isDraft ? "(Draft)" : invoice.invoiceNumber}
                </Text>
              </Td>
              <Td>
                <Text textStyle="text-ui-med">
                  {formatDateInUtc(new Date(invoice.issueDate), "MMM d, yyyy")}
                </Text>
              </Td>
              {shouldShowTotal && (
                <Td isNumeric>
                  <Text textStyle="text-ui-med">
                    {formatCurrency(parseFloat(invoice.total))}
                  </Text>
                </Td>
              )}
              <Td textAlign="end">
                {url && (
                  <TextLink
                    href={url}