add success graphic

TritonSE · Apr 17, 2024 · 2f70529 · 2f70529
1 parent 550b8e3
commit 2f70529
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/frontend/public/donations/successGraphic.svg b/frontend/public/donations/successGraphic.svg
diff --git a/frontend/src/app/(web app)/donations/page.tsx b/frontend/src/app/(web app)/donations/page.tsx
@@ -17,7 +17,7 @@ export default function App() {
         />
         <div className="absolute top-0 left-0 w-full h-full bg-black opacity-40"></div>
       </div>
-      <DonateApp className="absolute top-[900px] left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+      <DonateApp className="absolute left-1/2 top-48 transform -translate-x-1/2" />
     </>
   );
 }
diff --git a/frontend/src/components/payment/PhysicalDonationForm.tsx b/frontend/src/components/payment/PhysicalDonationForm.tsx
@@ -16,7 +16,6 @@ const PhysicalDonationForm = ({ setSuccess }: PhysicalDonationFormProps) => {
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    console.log(firstName, lastName, email, phone, comment);
     const donationEmailRequest: CreateDonationEmailRequest = {
       type: "donation",
       firstName,
@@ -27,11 +26,9 @@ const PhysicalDonationForm = ({ setSuccess }: PhysicalDonationFormProps) => {
     };
     sendEmail(donationEmailRequest)
       .then(() => {
-        console.log("success!");
         setSuccess(true);
       })
       .catch(() => {
-        console.log("error!");
         setSuccess(false);
       });
   };

diff --git a/frontend/src/components/payment/SuccessCard.tsx b/frontend/src/components/payment/SuccessCard.tsx
@@ -1,9 +1,31 @@
 "use client";
+import Image from "next/image";
 
 const SuccessCard = () => {
   return (
     <div className="justify-content-center container grid w-[90%] p-8 md:w-[616px]">
-      <div className="bg-white p-10 rounded-lg shadow-xl">Testing!</div>
+      <div className="flex flex-col bg-white p-10 rounded-lg shadow-xl">
+        <button
+          className="w-3/5  rounded-md bg-[#694C97] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-[#7b61a3] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7b61a3]"
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          ← Make Another Donation
+        </button>
+        <div>
+          <Image
+            src="/donations/successGraphic.svg"
+            alt="Success Image"
+            quality={100}
+            width={606}
+            height={606}
+          />
+        </div>
+        <h1 className="w-full text-center text-2xl font-bold card-title pb-2">
+          Thank you for your generous donation!
+        </h1>
+      </div>
     </div>
   );
 };