Start implementing UI for transfers

hackclub · Feb 7, 2024 · 568de12 · 568de12
1 parent 70de76e
commit 568de12
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 13 deletions.
diff --git a/src/Navigator.tsx b/src/Navigator.tsx
@@ -25,6 +25,7 @@ import Home from "./pages/index";
 import InvitationPage from "./pages/Invitation";
 import { discovery } from "./pages/login";
 import OrganizationPage from "./pages/organization";
+import TransferPage from "./pages/organization/transfer";
 import ReceiptsPage from "./pages/Receipts";
 import RenameTransactionPage from "./pages/RenameTransaction";
 import TransactionPage from "./pages/Transaction";
@@ -150,6 +151,14 @@ export default function Navigator() {
                 title: "Edit Transaction Description",
               }}
             />
+            <Stack.Screen
+              name="Transfer"
+              component={TransferPage}
+              options={{
+                presentation: "modal",
+                title: "Send Transfer",
+              }}
+            />
           </Stack.Navigator>
         )}
       </Tab.Screen>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -14,6 +14,7 @@ export interface ButtonProps {
   onPress?: () => void;
   color?: string;
   loading?: boolean;
+  disabled?: boolean;
 }
 
 const styles = StyleSheet.create({
@@ -38,9 +39,13 @@ export default function Button(
 ) {
   return (
     <Pressable
-      style={{ ...styles.button, ...(props.style as object) }}
+      style={{
+        ...styles.button,
+        ...(props.style as object),
+        opacity: props.disabled ? 0.6 : undefined,
+      }}
       onPress={() => props.onPress && props.onPress()}
-      disabled={props.loading}
+      disabled={props.loading || props.disabled}
     >
       <Text
         style={{

diff --git a/src/lib/NavigatorParamList.ts b/src/lib/NavigatorParamList.ts
@@ -9,6 +9,7 @@ export type StackParamList = {
   Event: { organization: Organization };
   Transaction: { orgId: string; transaction: Transaction };
   RenameTransaction: { orgId: string; transaction: Transaction };
+  Transfer: { organization: Organization };
 };
 
 export type CardsStackParamList = {

diff --git a/src/pages/organization/index.tsx b/src/pages/organization/index.tsx
@@ -12,6 +12,7 @@ import {
 } from "react-native";
 import useSWR from "swr";
 
+import Button from "../../components/Button";
 import PlaygroundBanner from "../../components/organizations/PlaygroundBanner";
 import Transaction from "../../components/Transaction";
 import { StackParamList } from "../../lib/NavigatorParamList";
@@ -119,20 +120,45 @@ export default function OrganizationPage({
               {organization?.playground_mode && (
                 <PlaygroundBanner organization={organization} />
               )}
-              <View style={{ marginBottom: 20 }}>
-                <Text
+              <View
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  marginBottom: 32,
+                  gap: 10,
+                }}
+              >
+                <View>
+                  <Text
+                    style={{
+                      color: palette.muted,
+                      fontSize: 12,
+                      textTransform: "uppercase",
+                    }}
+                  >
+                    Balance
+                  </Text>
+                  <Text style={{ color: themeColors.text, fontSize: 36 }}>
+                    {"balance_cents" in organization &&
+                      renderMoney(organization.balance_cents)}
+                  </Text>
+                </View>
+                <Button
                   style={{
-                    color: palette.muted,
-                    fontSize: 12,
-                    textTransform: "uppercase",
+                    backgroundColor: "#5bc0de",
+                    borderTopWidth: 0,
                   }}
+                  color="#186177"
+                  disabled={organization.playground_mode}
+                  onPress={() =>
+                    navigation.navigate("Transfer", { organization })
+                  }
                 >
-                  Balance
-                </Text>
-                <Text style={{ color: themeColors.text, fontSize: 36 }}>
-                  {"balance_cents" in organization &&
-                    renderMoney(organization.balance_cents)}
-                </Text>
+                  Transfer Money
+                </Button>
               </View>
               {/* <View style={{ display: "flex" }}>
                 <Text

diff --git a/src/pages/organization/transfer.tsx b/src/pages/organization/transfer.tsx
@@ -0,0 +1,67 @@
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { useEffect, useState } from "react";
+import { Button as NativeButton, View } from "react-native";
+
+import Button from "../../components/Button";
+import { StackParamList } from "../../lib/NavigatorParamList";
+import { palette } from "../../theme";
+
+type Props = NativeStackScreenProps<StackParamList, "Transfer">;
+
+export default function TransferPage({ navigation }: Props) {
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <NativeButton
+          color={palette.primary}
+          title="Cancel"
+          onPress={() => navigation.goBack()}
+        />
+      ),
+    });
+  }, []);
+
+  const [transferType, setTransferType] = useState<"ach" | "check" | "account">(
+    "ach",
+  );
+
+  return (
+    <View style={{ padding: 20 }}>
+      <View style={{ flexDirection: "row", gap: 10 }}>
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor:
+              transferType == "ach" ? palette.primary : palette.slate,
+            borderTopWidth: 0,
+          }}
+          onPress={() => setTransferType("ach")}
+        >
+          ACH
+        </Button>
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor:
+              transferType == "check" ? palette.primary : palette.slate,
+            borderTopWidth: 0,
+          }}
+          onPress={() => setTransferType("check")}
+        >
+          Check
+        </Button>
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor:
+              transferType == "account" ? palette.primary : palette.slate,
+            borderTopWidth: 0,
+          }}
+          onPress={() => setTransferType("account")}
+        >
+          Account
+        </Button>
+      </View>
+    </View>
+  );
+}