From 89e715e22713ff0ebd72bb5b0fc755416966e860 Mon Sep 17 00:00:00 2001
From: Mohamad Mortada <mmortada685@gmail.com>
Date: Tue, 14 Jan 2025 21:36:55 -0800
Subject: [PATCH] speed up tap-to-pay by over 30 seconds

---
 App.tsx                             |  4 +++-
 src/components/Transaction.tsx      |  2 +-
 src/pages/index.tsx                 |  3 ++-
 src/pages/organization/Donation.tsx | 21 +++++++++++++++------
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/App.tsx b/App.tsx
index b8e1393..aead0f3 100644
--- 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/src/components/Transaction.tsx b/src/components/Transaction.tsx
index fedb3a5..2fe9d02 100644
--- 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
index 80b2dd9..035ef8b 100644
--- 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
index 75becbc..3ddc4b0 100644
--- 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,8 +436,8 @@ function PageContent({ orgId, orgName, navigation }: any) {
       <View style={{
         flexDirection: "column",
         display: "flex",
-        alignItems: "start",
-        justifyContent: "center",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
         marginBottom: 10,
 
       }}>
@@ -444,10 +445,12 @@ function PageContent({ orgId, orgName, navigation }: any) {
         <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 });
           }}