Change

hackclub · Dec 8, 2024 · 04973f1 · 04973f1
1 parent e269751
commit 04973f1
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 63 deletions.
diff --git a/App.tsx b/App.tsx
@@ -55,9 +55,9 @@ export default function App() {
   const scheme = useColorScheme();
 
   const fetcher = useCallback(
-    async (url: string) => {
+    async (url: string, options: any) => {
       try {
-        return await hcb(url).json();
+        return await hcb(url, options).json();
       } catch (error) {
         if (
           error.name === "HTTPError" &&

diff --git a/src/components/Stripe.tsx b/src/components/Stripe.tsx
@@ -64,7 +64,7 @@ export function PageStripe() {
   useEffect(() => {
     discoverReaders({
       discoveryMethod: 'localMobile',
-      simulated: true,
+      simulated: false,
     })
   }, [discoverReaders])
 

diff --git a/src/pages/organization/Donation.tsx b/src/pages/organization/Donation.tsx
@@ -25,6 +25,7 @@ import {
 } from 'react-native'
 import { useStripeTerminal } from '@stripe/stripe-terminal-react-native'
 import { useLocation } from "../../lib/useLocation";
+import { id } from 'date-fns/locale';
 
 interface PaymentIntent {
   id: string
@@ -47,8 +48,7 @@ export default function OrganizationDonationPage({
 
   const fetchTokenProvider = async () => {
     console.log("Fetching stripe token")
-
-    const result = await fetcher!("user");
+    const result = await fetcher!("stripe_terminal_connection_token");
 
     console.log(result);
 
@@ -68,7 +68,7 @@ export default function OrganizationDonationPage({
   );
 }
 
-function PageWrapper({ orgId, navigation }: any) {
+function PageWrapper({ orgId, orgName, navigation }: any) {
 
   const { initialize, isInitialized, connectLocalMobileReader } = useStripeTerminal({
 
@@ -92,7 +92,7 @@ function PageWrapper({ orgId, navigation }: any) {
     </View>
   );
 
-  return <PageContent orgId={orgId} navigation={navigation} />;
+  return <PageContent orgId={orgId} orgName={orgName} navigation={navigation} />;
 }
 
 const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }) => {
@@ -117,7 +117,7 @@ const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }
   );
 };
 
-function PageContent({ orgId, navigation }: any) {
+function PageContent({ orgId, orgName, navigation }: any) {
   const { colors } = useTheme();
 
   // const { data: organization } = useSWR<OrganizationExpanded>(
@@ -135,6 +135,8 @@ function PageContent({ orgId, navigation }: any) {
 
   const [amount, setAmount] = useState("$");
 
+  const { fetcher } = useSWRConfig();
+
   const value = parseFloat(amount.replace("$", "0"));
 
   const [reader, setReader] = useState()
@@ -144,8 +146,9 @@ function PageContent({ orgId, navigation }: any) {
   const [loadingConfirmPayment, setLoadingConfirmPayment] = useState(false)
   const [loadingConnectingReader, setLoadingConnectingReader] = useState(false)
   const [currentProgress, setCurrentProgress] = useState(null)
+  const [donation, setDonation] = useState<string>()
 
-  const locationIdStripeMock = 'tml_FrcFgksbiIZZ2V'
+  const locationIdStripeMock = 'tml_FWRkngENcVS5Pd'
 
   const {
     discoverReaders,
@@ -163,12 +166,27 @@ function PageContent({ orgId, navigation }: any) {
     }
   })
 
+  const createDonation = async () => {
+    const { id } = await fetcher!(`organizations/${orgId}/donations`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        amount_cents: value * 100,
+      })
+    }) as { id: string };
+
+    setDonation(id);
+    return id;
+  }
+
   console.log("discovery", discoverReaders)
 
   useEffect(() => {
     discoverReaders({
       discoveryMethod: 'localMobile',
-      simulated: true
+      simulated: false
     });
   }, [discoverReaders])
 
@@ -204,15 +222,20 @@ function PageContent({ orgId, navigation }: any) {
     }
   }
 
-  async function paymentIntent() {
+  async function paymentIntent({ donation_id }: { donation_id: any }) {
     setLoadingCreatePayment(true)
     try {
       const { error, paymentIntent } = await createPaymentIntent({
         amount: Number((value * 100).toFixed()),
         currency: 'usd',
         paymentMethodTypes: ['card_present'],
         offlineBehavior: 'prefer_online',
-        captureMethod: "automatic"
+        captureMethod: "automatic",
+        metadata: {
+          donation_id,
+          donation: "true"
+        },
+        statementDescriptor: `HCB* ${orgName || "DONATION"}`.substring(0, 22),
       })
 
       if (error) {
@@ -351,7 +374,8 @@ function PageContent({ orgId, navigation }: any) {
       {connectedReader ? (
         <Button
           onPress={async () => {
-            await paymentIntent();
+            const donation_id = await createDonation();
+            await paymentIntent({ donation_id });
           }}
           style={{
             width: "100%",

diff --git a/src/pages/organization/ProcessDonation.tsx b/src/pages/organization/ProcessDonation.tsx
@@ -35,42 +35,6 @@ const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }
     );
 };
 
-function Stat({
-    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>
-            </View>
-        </View>
-    );
-}
 
 export default function ProcessDonationPage({
     navigation,
@@ -88,13 +52,13 @@ export default function ProcessDonationPage({
         navigation.setOptions({
             headerLeft: () => (
                 <Button
-                    title="Done"
+                    title={status == "ready" || status == "loading" ? "Cancel" : "Done"}
                     color={palette.primary}
                     onPress={() => navigation.goBack()}
                 />
             ),
         });
-    }, []);
+    }, [status]);
 
     return (
         <View
@@ -114,12 +78,18 @@ export default function ProcessDonationPage({
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                flex: 1
+                flex: 1,
+                paddingBottom: 40
             }}>
-                <Stat
-                    title="Donation amount"
-                    value={"$" + (payment?.amount / 100).toFixed(2)}
-                />
+                <Text style={{ color: palette.muted, fontSize: 20 }}>Donation amount</Text>
+                <Text
+                    style={{
+                        fontSize: 50,
+                    }}
+                >
+                    ${(payment?.amount / 100).toFixed(2)}
+                </Text>
+
                 <StyledButton onPress={async () => {
                     setStatus("loading");
                     const status = await collectPayment();
@@ -136,7 +106,8 @@ export default function ProcessDonationPage({
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                flex: 1
+                flex: 1,
+                paddingBottom: 40
             }}>
                 <Ionicons name="checkmark-circle-outline" size={100} color={palette.success} />
                 <Text style={{
@@ -159,25 +130,34 @@ export default function ProcessDonationPage({
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                flex: 1
+                flex: 1,
+                paddingBottom: 40
             }}>
+                <ActivityIndicator size="large" style={{
+                    margin: 20
+                }} />
                 <Text style={{
-                    marginBottom: 20,
                     fontSize: 20,
-                }}>Processing...</Text>
-                <ActivityIndicator size="large" />
+                    fontWeight: "600",
+                    paddingBottom: 10
+                }}>Processing</Text>
+                <Text style={{
+                    fontSize: 16
+                }}>Please wait...</Text>
+
 
             </View> : <View style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                flex: 1
+                flex: 1,
+                marginBottom: 40
             }}>
                 <Ionicons name="close-circle-outline" size={100} color={palette.warning} />
                 <Text style={{
                     fontSize: 20,
                     fontWeight: "600",
-                    marginBottom: 10
+                    paddingBottom: 10
                 }}>Error</Text>
                 <Text style={{
                     fontSize: 16