From 74b50f120bef9a9e963c1e5773785b9125275449 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Sun, 4 Jan 2026 21:44:05 -0600
Subject: [PATCH] feat(client): refine payment handling and improve type safety
 in components

---
 src/GroundsForSupport.Client/src/App.tsx      |  4 ++--
 .../src/CheckoutForm.tsx                      |  2 +-
 .../src/PaymentConfirmationCard.tsx           | 18 ++++++++--------
 .../src/PaymentForm.tsx                       |  6 +++---
 .../src/PreviousPaymentsList.tsx              | 18 ++++++++--------
 src/GroundsForSupport.Client/src/index.css    | 21 ++++++++++---------
 .../tests/App.spec.tsx                        | 11 +++++-----
 7 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/GroundsForSupport.Client/src/App.tsx b/src/GroundsForSupport.Client/src/App.tsx
index ac4a4b0..ab3e419 100644
--- a/src/GroundsForSupport.Client/src/App.tsx
+++ b/src/GroundsForSupport.Client/src/App.tsx
@@ -7,7 +7,7 @@ import PaymentForm from './PaymentForm';
 import PaymentConfirmationCard from './PaymentConfirmationCard';
 import PreviousPaymentsList from './PreviousPaymentsList';
 
-const stripe = loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
+const stripe = loadStripe(import.meta.env.VITE_STRIPE_API_KEY as string);
 
 function App() {
   const queryParams = new URLSearchParams(window.location.search);
@@ -44,7 +44,7 @@ function App() {
         return;
       }
 
-      const data = await res.json();
+      const data = await res.json() as { clientSecret: string };
       setSecret(data.clientSecret);
     } catch (err) {
       console.error(err);
diff --git a/src/GroundsForSupport.Client/src/CheckoutForm.tsx b/src/GroundsForSupport.Client/src/CheckoutForm.tsx
index 6e7cac6..245a8f4 100644
--- a/src/GroundsForSupport.Client/src/CheckoutForm.tsx
+++ b/src/GroundsForSupport.Client/src/CheckoutForm.tsx
@@ -32,7 +32,7 @@ export default function CheckoutForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={e => void handleSubmit(e)}>
       <PaymentElement
         id='payment-element'
         options={{ layout: 'accordion' }}
diff --git a/src/GroundsForSupport.Client/src/PaymentConfirmationCard.tsx b/src/GroundsForSupport.Client/src/PaymentConfirmationCard.tsx
index 0290688..96f2547 100644
--- a/src/GroundsForSupport.Client/src/PaymentConfirmationCard.tsx
+++ b/src/GroundsForSupport.Client/src/PaymentConfirmationCard.tsx
@@ -8,16 +8,16 @@ type PaymentConfirmationCardProps = {
 
 type PaymentIntentData =
   | {
-    status: 'loading';
-  }
+      status: 'loading';
+    }
   | {
-    status: 'loaded';
-    intent: PaymentIntent;
-  }
+      status: 'loaded';
+      intent: PaymentIntent;
+    }
   | {
-    status: 'error';
-    error: string;
-  };
+      status: 'error';
+      error: string;
+    };
 
 export default function PaymentConfirmationCard({ clientSecret }: PaymentConfirmationCardProps) {
   const stripe = useStripe();
@@ -58,7 +58,7 @@ export default function PaymentConfirmationCard({ clientSecret }: PaymentConfirm
       }
     }
 
-    fetchPaymentIntent();
+    void fetchPaymentIntent();
 
     return () => {
       isMounted = false;
diff --git a/src/GroundsForSupport.Client/src/PaymentForm.tsx b/src/GroundsForSupport.Client/src/PaymentForm.tsx
index 9b46693..cc88d80 100644
--- a/src/GroundsForSupport.Client/src/PaymentForm.tsx
+++ b/src/GroundsForSupport.Client/src/PaymentForm.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react';
 
 type DonationFormProps = {
-  onValidSubmit: (data: { name: string; amount: number; message?: string; email?: string }) => void;
+  onValidSubmit: (data: { name: string; amount: number; message?: string; email?: string }) => Promise<void> | void;
   isSubmitting?: boolean;
 };
 
@@ -98,12 +98,12 @@ export default function PaymentForm({ onValidSubmit, isSubmitting }: DonationFor
       throw new Error('amount after validation should never be an empty string');
     }
 
-    onValidSubmit({ name, amount, message, email });
+    await onValidSubmit({ name, amount, message, email });
   }
 
   return (
     <form
-      onSubmit={handleSubmit}
+      onSubmit={e => void handleSubmit(e)}
       noValidate
     >
       <div className='group'>
diff --git a/src/GroundsForSupport.Client/src/PreviousPaymentsList.tsx b/src/GroundsForSupport.Client/src/PreviousPaymentsList.tsx
index 5734605..feaaafb 100644
--- a/src/GroundsForSupport.Client/src/PreviousPaymentsList.tsx
+++ b/src/GroundsForSupport.Client/src/PreviousPaymentsList.tsx
@@ -11,13 +11,13 @@ type PaymentPage = {
 
 type PaymentData =
   | {
-    status: 'loading';
-  }
+      status: 'loading';
+    }
   | { status: 'error'; message: string }
   | {
-    status: 'success';
-    pages: PaymentPage[];
-  };
+      status: 'success';
+      pages: PaymentPage[];
+    };
 
 export default function PreviousPaymentsList() {
   const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
@@ -45,7 +45,7 @@ export default function PreviousPaymentsList() {
           setPaymentData({ status: 'error', message: 'Failed to fetch payments' });
         }
 
-        const data = await res.json();
+        const data = await res.json() as PaymentPage;
 
         setPaymentData({ status: 'success', pages: [data] });
       } catch (err) {
@@ -58,7 +58,7 @@ export default function PreviousPaymentsList() {
       }
     }
 
-    fetchPayments();
+    void fetchPayments();
 
     return () => {
       isMounted = false;
@@ -84,7 +84,7 @@ export default function PreviousPaymentsList() {
         return;
       }
 
-      const data = await res.json();
+      const data = await res.json() as PaymentPage;
 
       setPaymentData({
         status: 'success',
@@ -117,7 +117,7 @@ export default function PreviousPaymentsList() {
             <button
               className='load-more-button'
               type='button'
-              onClick={handleLoadMoreButtonClick}
+              onClick={() => void handleLoadMoreButtonClick()}
               disabled={currentPageNumber >= totalNumberOfPages || isLoadingMore}
             >
               Load More
diff --git a/src/GroundsForSupport.Client/src/index.css b/src/GroundsForSupport.Client/src/index.css
index 3d5f015..e6ca7e3 100644
--- a/src/GroundsForSupport.Client/src/index.css
+++ b/src/GroundsForSupport.Client/src/index.css
@@ -1,13 +1,14 @@
 @font-face {
-    font-family: 'CaskaydiaCove NFM';
-    src: url('/CaskaydiaCoveNFM-Regular.eot');
-    src: url('/CaskaydiaCoveNFM-Regular.eot?#iefix') format('embedded-opentype'),
-        url('/CaskaydiaCoveNFM-Regular.woff2') format('woff2'),
-        url('/CaskaydiaCoveNFM-Regular.woff') format('woff'),
-        url('/CaskaydiaCoveNFM-Regular.svg#CaskaydiaCoveNFM-Regular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'CaskaydiaCove NFM';
+  src: url('/CaskaydiaCoveNFM-Regular.eot');
+  src:
+    url('/CaskaydiaCoveNFM-Regular.eot?#iefix') format('embedded-opentype'),
+    url('/CaskaydiaCoveNFM-Regular.woff2') format('woff2'),
+    url('/CaskaydiaCoveNFM-Regular.woff') format('woff'),
+    url('/CaskaydiaCoveNFM-Regular.svg#CaskaydiaCoveNFM-Regular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 /* CSS Reset */
@@ -56,7 +57,7 @@ table {
 
 :root {
   --bg-color: #323232;
-  --text-color: #E4E4E4;
+  --text-color: #e4e4e4;
 
   font-size: 16px;
   font-family: 'CaskaydiaCove NFM', monospace;
diff --git a/src/GroundsForSupport.Client/tests/App.spec.tsx b/src/GroundsForSupport.Client/tests/App.spec.tsx
index f6d8dac..c6dbdf3 100644
--- a/src/GroundsForSupport.Client/tests/App.spec.tsx
+++ b/src/GroundsForSupport.Client/tests/App.spec.tsx
@@ -7,7 +7,7 @@ import userEvent, { type UserEvent } from '@testing-library/user-event';
 describe('profile info', () => {
   test('it should display a profile image', () => {
     const screen = render(<App />);
-    
+
     const profileImage = screen.getByAltText('Profile picture of Stevan Freeborn');
 
     expect(profileImage).toBeInTheDocument();
@@ -26,16 +26,16 @@ describe('form', () => {
   let user: UserEvent;
 
   const mockFetch = vi.fn();
- 
+
   beforeEach(() => {
     user = userEvent.setup();
     vi.stubGlobal('fetch', mockFetch);
 
-    mockFetch.mockImplementation(async (url: URL) => {
+    mockFetch.mockImplementation((url: URL) => {
       if (url.toString().endsWith('/payments/create-intent')) {
         return {
           ok: true,
-          json: async () => ({
+          json: () => ({
             clientSecret: 'test_client_secret',
           }),
         };
@@ -44,7 +44,7 @@ describe('form', () => {
       if (url.toString().endsWith('/payments')) {
         return {
           ok: true,
-          json: async () => ({
+          json: () => ({
             payments: [],
           }),
         };
@@ -118,7 +118,6 @@ describe('form', () => {
 
     await user.type(amountInput, '10');
     await user.click(submitButton);
-
   });
 
   test('it should validate email if provided', async () => {