check deposits!

.eslintrc.js

@@ -7,14 +7,15 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
   overrides: [],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint", "import"],
+  plugins: ["react", "@typescript-eslint", "import", "react-hooks"],
   rules: {
     "import/no-duplicates": "error",
     "import/order": [

package.json

@@ -67,6 +67,7 @@
     "eslint": "^8.49.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.0.3",
     "typescript": "^5.3.0"
   },

src/components/transaction/types/CheckDepositTransaction.tsx

@@ -0,0 +1,57 @@
+import { useTheme } from "@react-navigation/native";
+import { Image } from "expo-image";
+import { View } from "react-native";
+
+import { TransactionCheckDeposit } from "../../../lib/types/Transaction";
+import { renderMoney, statusColor } from "../../../util";
+import Badge from "../../Badge";
+import UserMention from "../../UserMention";
+import TransactionDetails, { descriptionDetail } from "../TransactionDetails";
+import TransactionTitle, { Muted } from "../TransactionTitle";
+
+import { TransactionViewProps } from "./TransactionViewProps";
+
+export default function CheckDepositTransaction(
+  props: TransactionViewProps<TransactionCheckDeposit>,
+) {
+  const { colors: themeColors } = useTheme();
+
+  return (
+    <View>
+      <TransactionTitle
+        badge={
+          <Badge color={statusColor(props.transaction.check_deposit.status)}>
+            {props.transaction.check_deposit.status}
+          </Badge>
+        }
+      >
+        Check deposit <Muted>of</Muted>{" "}
+        {renderMoney(props.transaction.amount_cents)}
+      </TransactionTitle>
+
+      <Image
+        source={{ uri: props.transaction.check_deposit.front_url }}
+        style={{
+          width: "100%",
+          height: 150,
+          borderRadius: 8,
+          marginBottom: 30,
+          backgroundColor: themeColors.card,
+        }}
+        contentFit="cover"
+      />
+
+      <TransactionDetails
+        details={[
+          descriptionDetail(props.orgId, props.transaction, props.navigation),
+          {
+            label: "Deposited by",
+            value: (
+              <UserMention user={props.transaction.check_deposit.submitter} />
+            ),
+          },
+        ]}
+      />
+    </View>
+  );
+}

src/components/transaction/types/TransactionViewProps.ts

@@ -1,7 +1,11 @@
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+import { StackParamList } from "../../../lib/NavigatorParamList";
 import { TransactionBase } from "../../../lib/types/Transaction";
 
 export type TransactionViewProps<T extends TransactionBase = TransactionBase> =
   {
     transaction: T;
     orgId: string;
+    navigation: NativeStackNavigationProp<StackParamList, "Transaction">;
   };

src/lib/types/Invitation.ts

@@ -2,7 +2,7 @@ import HcbApiObject from "./HcbApiObject";
 import Organization from "./Organization";
 import User from "./User";
 
-export default interface Invitation extends HcbApiObject<"inv"> {
+export default interface Invitation extends HcbApiObject<"ivt"> {
   sender?: User; // Field is optional for future-proofing reasons
   accepted: boolean;
   organization: Organization;

src/lib/types/Transaction.ts

@@ -119,13 +119,45 @@ export interface TransactionAchTransfer extends TransactionBase {
   ach_transfer: AchTransfer;
 }
 
+export interface Invoice extends HcbApiObject<"inv"> {
+  amount_cents: number;
+  send_at: string;
+  paid_at?: string;
+  description: string;
+  due_date: string;
+  sponsor: {
+    id: string;
+    name: string;
+    email: string;
+  };
+}
+
+export interface TransactionInvoice extends TransactionBase {
+  code: TransactionType.Invoice;
+  invoice: Invoice;
+}
+
+export interface CheckDeposit {
+  status: "pending" | "rejected" | "returned" | "deposited";
+  front_url: string;
+  back_url: string;
+  submitter: User;
+}
+
+export interface TransactionCheckDeposit extends TransactionBase {
+  code: TransactionType.CheckDeposit;
+  check_deposit: CheckDeposit;
+}
+
 // |
 // |
 // v this is cool, i should finish this
 //
 // type SpecificTransaction<Code extends TransactionType, Key extends string, Obj> = TransactionBase & {code: Code; } & {[k in Key]: Obj}
 
 type Transaction =
+  | TransactionCheckDeposit
+  | TransactionInvoice
   | TransactionAchTransfer
   | TransactionTransfer
   | TransactionCheck

src/pages/Transaction.tsx

@@ -18,6 +18,7 @@ import AchTransferTransaction from "../components/transaction/types/AchTransferT
 import BankAccountTransaction from "../components/transaction/types/BankAccountTransaction";
 import BankFeeTransaction from "../components/transaction/types/BankFeeTransaction";
 import CardChargeTransaction from "../components/transaction/types/CardChargeTransaction";
+import CheckDepositTransaction from "../components/transaction/types/CheckDepositTransaction";
 import CheckTransaction from "../components/transaction/types/CheckTransaction";
 import DonationTransaction from "../components/transaction/types/DonationTransaction";
 import { TransactionViewProps } from "../components/transaction/types/TransactionViewProps";
@@ -34,6 +35,7 @@ export default function TransactionPage({
   route: {
     params: { transactionId, transaction: _transaction, orgId },
   },
+  navigation,
 }: Props) {
   const { data: transaction } = useSWR<
     Transaction & { organization?: Organization }
@@ -63,6 +65,7 @@ export default function TransactionPage({
 
   const transactionViewProps: Omit<TransactionViewProps, "transaction"> = {
     orgId: orgId || transaction.organization!.id,
+    navigation,
   };
 
   return (
@@ -87,13 +90,14 @@ export default function TransactionPage({
       {
         /* prettier-ignore */
         match(transaction)
-          .with({ card_charge: P.any },            (tx) => <CardChargeTransaction  transaction={tx} {...transactionViewProps} />)
-          .with({ check: P.any },                  (tx) => <CheckTransaction       transaction={tx} {...transactionViewProps} />)
-          .with({ transfer: P.any },               (tx) => <TransferTransaction    transaction={tx} {...transactionViewProps} />)
-          .with({ donation: P.any },               (tx) => <DonationTransaction    transaction={tx} {...transactionViewProps} />)
-          .with({ ach_transfer: P.any },           (tx) => <AchTransferTransaction transaction={tx} {...transactionViewProps} />)
-          .with({ code: TransactionType.BankFee }, (tx) => <BankFeeTransaction     transaction={tx} {...transactionViewProps} />)
-          .otherwise(                              (tx) => <BankAccountTransaction transaction={tx} {...transactionViewProps} />)
+          .with({ card_charge: P.any },            (tx) => <CardChargeTransaction   transaction={tx} {...transactionViewProps} />)
+          .with({ check: P.any },                  (tx) => <CheckTransaction        transaction={tx} {...transactionViewProps} />)
+          .with({ transfer: P.any },               (tx) => <TransferTransaction     transaction={tx} {...transactionViewProps} />)
+          .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({ code: TransactionType.BankFee }, (tx) => <BankFeeTransaction      transaction={tx} {...transactionViewProps} />)
+          .otherwise(                              (tx) => <BankAccountTransaction  transaction={tx} {...transactionViewProps} />)
       }
 
       {comments && comments.length > 0 && (

src/pages/cards.tsx

@@ -54,7 +54,7 @@ export default function CardsPage({ navigation }: Props) {
         </MenuView>
       ),
     });
-  }, [navigation, frozenCardsShown]);
+  }, [navigation, frozenCardsShown, scheme]);
 
   if (cards) {
     return (

src/pages/organization/Settings.tsx

@@ -41,11 +41,11 @@ export default function OrganizationSettingsPage({
   );
   const { data: currentUser } = useSWR<User>("/user");
 
-  if (!organization) return null;
-
   const tabBarHeight = useBottomTabBarHeight();
   const { colors: themeColors } = useTheme();
 
+  if (!organization) return null;
+
   return (
     <ScrollView
       contentContainerStyle={{ padding: 20, paddingBottom: tabBarHeight + 20 }}

src/pages/organization/index.tsx

@@ -130,14 +130,14 @@ export default function OrganizationPage({
         ),
       });
     }
-  }, [organization]);
+  }, [organization, scheme, navigation]);
 
   const tabBarSize = useBottomTabBarHeight();
   const { colors: themeColors } = useTheme();
 
   const transactions = useMemo(
     () => addPendingFeeToTransactions(_transactions, organization),
-    [_transactions],
+    [_transactions, organization],
   );
 
   const sections: { title: string; data: TransactionWithoutId[] }[] = useMemo(