invoices

src/components/transaction/types/InvoiceTransaction.tsx

@@ -0,0 +1,42 @@
+import { View } from "react-native";
+
+import { TransactionInvoice } from "../../../lib/types/Transaction";
+import { renderMoney } from "../../../util";
+import TransactionDetails, { descriptionDetail } from "../TransactionDetails";
+import TransactionTitle, { Muted } from "../TransactionTitle";
+
+import { TransactionViewProps } from "./TransactionViewProps";
+
+export default function InvoiceTransaction({
+  transaction: { invoice, ...transaction },
+  ...props
+}: TransactionViewProps<TransactionInvoice>) {
+  return (
+    <View>
+      <TransactionTitle>
+        {renderMoney(transaction.amount_cents)}{" "}
+        <Muted>invoice payment from</Muted>
+        {"\n"}
+        {invoice.sponsor.name}
+      </TransactionTitle>
+
+      <TransactionDetails
+        details={[
+          descriptionDetail(props.orgId, transaction, props.navigation),
+          {
+            label: "Invoice description",
+            value: invoice.description,
+          },
+        ]}
+      />
+
+      <TransactionDetails
+        title="Sponsor details"
+        details={[
+          { label: "Name", value: invoice.sponsor.name },
+          { label: "Email", value: invoice.sponsor.email },
+        ]}
+      />
+    </View>
+  );
+}

src/pages/Transaction.tsx

@@ -21,6 +21,7 @@ import CardChargeTransaction from "../components/transaction/types/CardChargeTra
 import CheckDepositTransaction from "../components/transaction/types/CheckDepositTransaction";
 import CheckTransaction from "../components/transaction/types/CheckTransaction";
 import DonationTransaction from "../components/transaction/types/DonationTransaction";
+import InvoiceTransaction from "../components/transaction/types/InvoiceTransaction";
 import { TransactionViewProps } from "../components/transaction/types/TransactionViewProps";
 import TransferTransaction from "../components/transaction/types/TransferTransaction";
 import { StackParamList } from "../lib/NavigatorParamList";
@@ -96,6 +97,7 @@ export default function TransactionPage({
           .with({ donation: P.any },               (tx) => <DonationTransaction     transaction={tx} {...transactionViewProps} />)
           .with({ ach_transfer: P.any },           (tx) => <AchTransferTransaction  transaction={tx} {...transactionViewProps} />)
           .with({ check_deposit: P.any },          (tx) => <CheckDepositTransaction transaction={tx} {...transactionViewProps} />)
+          .with({ invoice: P.any },                (tx) => <InvoiceTransaction      transaction={tx} {...transactionViewProps} />)
           .with({ code: TransactionType.BankFee }, (tx) => <BankFeeTransaction      transaction={tx} {...transactionViewProps} />)
           .otherwise(                              (tx) => <BankAccountTransaction  transaction={tx} {...transactionViewProps} />)
       }