feat: tanstack query for return screen

UoaWDCC · Dec 21, 2024 · d803021 · d803021
1 parent a030c39
commit d803021
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 64 deletions.
diff --git a/web/src/components/return-page/ErrorReturn.tsx b/web/src/components/return-page/ErrorReturn.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router";
+import { EmailLink } from "../../data/data";
+
+
+export default function ErrorReturn() {
+  const navigate = useNavigate();
+    return (
+        <>
+          <div className="from-AUIS-dark-teal to-AUIS-teal min-h-svh bg-gradient-to-b pb-20">
+            <div className="flex items-center justify-center pt-36">
+              <div>
+                <h1 className="mx-3 pb-2 text-center text-5xl font-bold text-white">
+                  Payment Failed
+                </h1>
+              </div>
+            </div>
+            <div>
+              <p className="pt-12 text-center text-white">
+                Please try again, or contact{" "}
+                <a className="text-blue-500" href={`mailto:${EmailLink}`}>
+                  {EmailLink}
+                </a>
+                .
+              </p>
+            </div>
+
+            <div className="flex justify-center">
+              <button
+                type="button"
+                className="bg-primary-orange mt-24 rounded-2xl px-10 py-3 text-3xl font-bold text-white transition-all hover:scale-110"
+                onClick={() => {
+                  navigate("/");
+                }}
+              >
+                Return to Home screen
+              </button>
+            </div>
+          </div>
+        </>
+      );
+}
diff --git a/web/src/hooks/api/useUpdateUserTicketInfo.ts b/web/src/hooks/api/useUpdateUserTicketInfo.ts
@@ -2,8 +2,6 @@ import { useMutation } from "@tanstack/react-query";
 import { updateUserTicketInfo } from "../../api/apiRequests";
 import {
     AnswerList,
-    QuestionAnswer,
-  SubmitUpdateUserInfoOrNewUser,
   UpdateUserInfoOrNewUser,
 } from "../../types/types";
 

diff --git a/web/src/screens/ReturnScreen.tsx b/web/src/screens/ReturnScreen.tsx
@@ -1,83 +1,71 @@
 import { useState, useEffect } from "react";
-import { Navigate, useNavigate } from "react-router";
+import { Navigate, useNavigate, useParams } from "react-router";
 import { EmailLink } from "../data/data";
-import { getSessionStatus } from "../api/apiRequests";
+// import { getSessionStatus } from "../api/apiRequests";
+import { useSessionStatus } from "../hooks/api/useSessionStatus";
+import LoadingSpinner from "@components/navigation/LoadingSpinner";
+import { useSearchParams } from "react-router-dom";
+import ErrorReturn from "@components/return-page/ErrorReturn";
+
+export default function ReturnScreen() {  
+
+
+  let sessionId: string;
+  const [searchParams] = useSearchParams();
+  const session_id = searchParams.get("session_id");
+  if (session_id !== null && session_id.length !== 0) {
+    sessionId = session_id;
+  } else {
+    return <ErrorReturn />;
+  }
+
 
-export default function ReturnScreen() {
   const navigate = useNavigate();
-  const [status, setStatus] = useState(null);
+  const [status, setStatus] = useState<string>("");
   const [customerEmail, setCustomerEmail] = useState("");
 
+  const {
+    data: sessionStatus,
+    status: sessionStatusHookStatus,
+  } = useSessionStatus(sessionId);
+
+  // update values once data is fetched
   useEffect(() => {
-    async function getSessionData() {
-      const queryString = window.location.search;
-      const urlParams = new URLSearchParams(queryString);
-      const sessionId = urlParams.get("session_id");
-      const response = await getSessionStatus(sessionId!);
-      return response;
+    if (sessionStatusHookStatus === "success") {
+      setStatus(sessionStatus.status);
+      setCustomerEmail(sessionStatus.customer_email);
     }
+  }, [sessionStatusHookStatus, sessionStatus]);
 
-    getSessionData().then((response) => {
-      setStatus(response.data.status);
-      setCustomerEmail(response.data.customer_email);
-    });
-  }, []);
-
-  if (status === "open") {
-    return <Navigate to="/checkout/payment" />;
+  if (sessionStatusHookStatus === "pending") {
+    return <LoadingSpinner />;
   }
 
-  if (status === "complete") {
-    return (
-      <div className="from-AUIS-dark-teal to-AUIS-teal min-h-svh bg-gradient-to-b pb-20">
-        <div className="flex items-center justify-center pt-36">
-          <div>
-            <h1 className="mx-3 pb-2 text-center text-5xl font-bold text-white">
-              Payment Successful
-            </h1>
-          </div>
-        </div>
-        <div>
-          <h1 className="pt-12 text-center text-lg text-white">
-            Payment successful, a confirmation email will be sent to{" "}
-            {customerEmail}.
-          </h1>
-          <p className="text-center text-lg text-white">
-            If you have any questions, please email{" "}
-            <a className="text-blue-500" href={`mailto:${EmailLink}`}>
-              {EmailLink}
-            </a>
-            .
-          </p>
-        </div>
+  if (sessionStatusHookStatus === "error" ){
+    return <ErrorReturn/>
+  }
 
-        <div className="flex justify-center">
-          <button
-            type="button"
-            className="bg-primary-orange mt-24 rounded-2xl px-10 py-3 text-3xl font-bold text-white transition-all hover:scale-110"
-            onClick={() => {
-              navigate("/");
-            }}
-          >
-            Return to Home screen
-          </button>
-        </div>
-      </div>
-    );
-  } else {
-    return (
-      <>
+  if (sessionStatusHookStatus === "success") {
+    if (status === "open") {
+      return <Navigate to="/checkout/payment" />;
+    }
+    if (status === "complete") {
+      return (
         <div className="from-AUIS-dark-teal to-AUIS-teal min-h-svh bg-gradient-to-b pb-20">
           <div className="flex items-center justify-center pt-36">
             <div>
               <h1 className="mx-3 pb-2 text-center text-5xl font-bold text-white">
-                Payment Failed
+                Payment Successful
               </h1>
             </div>
           </div>
           <div>
-            <p className="pt-12 text-center text-white">
-              Please try again, or contact{" "}
+            <h1 className="pt-12 text-center text-lg text-white">
+              Payment successful, a confirmation email will be sent to{" "}
+              {customerEmail}.
+            </h1>
+            <p className="text-center text-lg text-white">
+              If you have any questions, please email{" "}
               <a className="text-blue-500" href={`mailto:${EmailLink}`}>
                 {EmailLink}
               </a>
@@ -97,7 +85,9 @@ export default function ReturnScreen() {
             </button>
           </div>
         </div>
-      </>
-    );
+      );
+    }
+  } else {
+      <ErrorReturn />
   }
 }