View account/routing numbers

app.config.js

@@ -54,6 +54,12 @@ export default {
           cameraPermission: "Allow HCB to take photos of receipts",
         },
       ],
+      [
+        "expo-font",
+        {
+          fonts: ["./assets/fonts/JetBrainsMono-Regular.ttf"],
+        },
+      ],
       "expo-secure-store",
       ["@config-plugins/react-native-dynamic-app-icon", appIconConfig],
     ],

package.json

@@ -51,7 +51,8 @@
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
     "react-native-web": "^0.19.8",
-    "swr": "^2.2.1"
+    "swr": "^2.2.1",
+    "expo-clipboard": "~5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",

src/Navigator.tsx

@@ -21,6 +21,7 @@ import CardsPage from "./pages/cards";
 import Home from "./pages/index";
 import InvitationPage from "./pages/Invitation";
 import OrganizationPage from "./pages/organization";
+import AccountNumberPage from "./pages/organization/AccountNumber";
 import ReceiptsPage from "./pages/Receipts";
 import RenameTransactionPage from "./pages/RenameTransaction";
 import SettingsPage from "./pages/Settings";
@@ -130,11 +131,16 @@ export default function Navigator() {
               name="Event"
               options={({ route }) => ({
                 // headerTitle: () => <OrganizationTitle {...route.params} />,
-                title: route.params.organization?.name,
+                title: route.params.organization?.name || "Organization",
                 headerBackTitle: "Back",
               })}
               component={OrganizationPage}
             />
+            <Stack.Screen
+              name="AccountNumber"
+              component={AccountNumberPage}
+              options={{ presentation: "modal", title: "Account Details" }}
+            />
             <Stack.Screen
               options={{ headerBackTitle: "Back" }}
               name="Transaction"

src/lib/NavigatorParamList.ts

@@ -9,6 +9,7 @@ export type StackParamList = {
   Organizations: undefined;
   Invitation: { inviteId: Invitation["id"]; invitation?: Invitation };
   Event: { orgId: Organization["id"]; organization?: Organization };
+  AccountNumber: { orgId: Organization["id"] };
   Transaction: {
     transactionId: Transaction["id"];
     orgId?: Organization["id"];

src/pages/organization/AccountNumber.tsx

@@ -0,0 +1,127 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@react-navigation/native";
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import * as Clipboard from "expo-clipboard";
+import { useEffect, useState } from "react";
+import { View, Text, StatusBar, Button } from "react-native";
+import useSWR from "swr";
+
+import { StackParamList } from "../../lib/NavigatorParamList";
+import { OrganizationExpanded } from "../../lib/types/Organization";
+import { palette } from "../../theme";
+
+type Props = NativeStackScreenProps<StackParamList, "AccountNumber">;
+
+function AccountDetail({
+  title,
+  value,
+}: {
+  title: string;
+  value: string | undefined;
+}) {
+  const { colors: themeColors } = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopied(false), 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [copied]);
+
+  return (
+    <View>
+      <Text style={{ color: palette.muted, fontSize: 16 }}>{title}</Text>
+      <View
+        style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
+      >
+        <Text
+          style={{
+            color: themeColors.text,
+            fontFamily: "JetBrains Mono",
+            fontSize: 30,
+          }}
+        >
+          {value}
+        </Text>
+        <Ionicons.Button
+          name={copied ? "checkmark" : "copy-outline"}
+          iconStyle={{ marginRight: 0 }}
+          color={copied ? palette.success : palette.primary}
+          backgroundColor="transparent"
+          underlayColor={themeColors.background}
+          onPress={() => {
+            if (value) {
+              Clipboard.setStringAsync(value);
+              setCopied(true);
+            }
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default function AccountNumberPage({
+  navigation,
+  route: {
+    params: { orgId },
+  },
+}: Props) {
+  const { data: organization } = useSWR<OrganizationExpanded>(
+    `/organizations/${orgId}`,
+  );
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <Button
+          title="Done"
+          color={palette.primary}
+          onPress={() => navigation.goBack()}
+        />
+      ),
+    });
+  }, []);
+
+  return (
+    <View
+      style={{
+        padding: 20,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+      }}
+    >
+      <StatusBar barStyle="light-content" />
+
+      <View style={{ flexDirection: "column" }}>
+        <AccountDetail
+          title="Routing number"
+          value={organization?.routing_number}
+        />
+        <AccountDetail
+          title="Account number"
+          value={organization?.account_number}
+        />
+        <AccountDetail
+          title="SWIFT BIC code"
+          value={organization?.swift_bic_code}
+        />
+
+        <View style={{ flexDirection: "row" }}>
+          <Ionicons
+            name="information-circle-outline"
+            color={palette.muted}
+            size={20}
+            style={{ marginRight: 10 }}
+          />
+          <Text style={{ alignSelf: "center", color: palette.muted }}>
+            Use these details to receive ACH and wire transfers.
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

src/pages/organization/index.tsx

@@ -94,11 +94,18 @@ export default function OrganizationPage({
               actions={[
                 {
                   id: "accountNumber",
-                  title: "View Account Number",
-                  attributes: { disabled: true },
+                  title: "View Account Details",
+                  image: "creditcard.and.123",
                 },
               ]}
               themeVariant={scheme || undefined}
+              onPressAction={({ nativeEvent: { event } }) => {
+                if (event == "accountNumber") {
+                  navigation.navigate("AccountNumber", {
+                    orgId: organization.id,
+                  });
+                }
+              }}
             >
               <Ionicons.Button
                 name="ellipsis-horizontal-circle"