Merge "Tap to Pay" into main (#137)

hackclub · Jan 17, 2025 · 10e6e06 · 10e6e06
1 parent f5a3e66
commit 10e6e06
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/App.tsx b/App.tsx
@@ -2,6 +2,7 @@ import "expo-dev-client";
 
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { LinkingOptions, NavigationContainer } from "@react-navigation/native";
+import { useStripeTerminal } from "@stripe/stripe-terminal-react-native";
 import { useFonts } from "expo-font";
 import * as Linking from "expo-linking";
 import * as SecureStorage from "expo-secure-store";
@@ -62,7 +63,8 @@ export default function App() {
   const [token, setToken] = useState<string | null>(null);
   const hcb = useClient(token);
   const scheme = useColorScheme();
-
+  useStripeTerminal()
+
   const fetcher = useCallback(
     async (url: string, options: any) => {
       try {

diff --git a/app.config.js b/app.config.js
@@ -65,24 +65,24 @@ export default {
       [
         "@stripe/stripe-terminal-react-native",
         {
-          bluetoothBackgroundMode: true,
-          locationWhenInUsePermission:
-            "Location access is required in order to accept payments.",
-          bluetoothPeripheralPermission:
-            "Bluetooth access is required in order to connect to supported bluetooth card readers.",
-          bluetoothAlwaysUsagePermission:
-            "This app uses Bluetooth to connect to supported card readers.",
-        },
+          "bluetoothBackgroundMode": true,
+          "locationWhenInUsePermission": "Location access is required in order to accept payments.",
+          "bluetoothPeripheralPermission": "Bluetooth access is required in order to connect to supported bluetooth card readers.",
+          "bluetoothAlwaysUsagePermission": "This app uses Bluetooth to connect to supported card readers."
+        }
       ],
       [
         "expo-build-properties",
         {
           android: {
-            minSdkVersion: 26,
-          },
+            minSdkVersion: 26
+          }
         },
       ],
-      ["expo-alternate-app-icons", appIcons],
+      [
+        "expo-alternate-app-icons",
+        appIcons
+      ]
     ],
   },
-};
+};
diff --git a/src/components/Transaction.tsx b/src/components/Transaction.tsx
@@ -3,7 +3,7 @@ import { faPaypal } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useTheme } from "@react-navigation/native";
 import { LinearGradient } from "expo-linear-gradient";
-import Icon from "hackclub-icons-rn";
+import Icon from "@hackclub/hackclub-icons-rn";
 import { memo } from "react";
 import { View, Text, ViewProps, StyleSheet } from "react-native";
 import { match } from "ts-pattern";

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -242,7 +242,8 @@ export default function App({ navigation }: Props) {
     for (const org of organizations || []) {
       preload(`organizations/${org.id}`, fetcher!);
     }
-  }, []);
+  }), [];
+
 
   const onRefresh = () => {
     reloadOrganizations();

diff --git a/src/pages/organization/Donation.tsx b/src/pages/organization/Donation.tsx
@@ -233,6 +233,7 @@ function PageContent({ orgId, orgName, navigation }: any) {
           donation: "true"
         },
         statementDescriptor: `HCB* ${orgName || "DONATION"}`.substring(0, 22),
+        receiptEmail: email,
       })
 
       if (error) {
@@ -435,19 +436,21 @@ function PageContent({ orgId, orgName, navigation }: any) {
       <View style={{
         flexDirection: "column",
         display: "flex",
-        alignItems: "start",
-        justifyContent: "center",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
         marginBottom: 10,
 
       }}>
 
         <View style={{
           flexDirection: "row",
           alignItems: "center",
+          justifyContent: "flex-start",
           gap: 20
         }}>
-          <Text style={{ color: colors.text, fontSize: 20 }}>Name</Text>
-
+          <View style={{ flexBasis: 55 }}>
+            <Text style={{ color: colors.text, fontSize: 20 }}>Name</Text>
+          </View>
           <TextInput
             style={{
               color: colors.text,
@@ -479,11 +482,13 @@ function PageContent({ orgId, orgName, navigation }: any) {
         <View style={{
           flexDirection: "row",
           alignItems: "center",
+          justifyContent: "flex-start",
           gap: 20,
           marginTop: 10
         }}>
-          <Text style={{ color: colors.text, fontSize: 20 }}>Email</Text>
-
+          <View style={{ flexBasis: 55 }}>
+            <Text style={{ color: colors.text, fontSize: 20 }}>Email</Text>
+          </View>
           <TextInput
             style={{
               color: colors.text,
@@ -519,6 +524,10 @@ function PageContent({ orgId, orgName, navigation }: any) {
       {connectedReader ? (
         <Button
           onPress={async () => {
+            if (!email.includes("@") || !email.includes(".")) {
+              Alert.alert("Please provide a valid email address")
+              return
+            }
             const donation_id = await createDonation();
             await paymentIntent({ donation_id });
           }}