Frontend form error handling

apps/web/src/app/_components/form/review-form.tsx

@@ -13,6 +13,7 @@
 import { cn } from "@cooper/ui";
 import { Button } from "@cooper/ui/button";
 import { Form } from "@cooper/ui/form";
+import { useToast } from "@cooper/ui/hooks/use-toast";
 import { CheckIcon } from "@cooper/ui/icons";
 
 import {
@@ -23,6 +24,7 @@
 } from "~/app/_components/form/sections";
 import { SubmissionConfirmation } from "~/app/_components/form/submission-confirmation";
 import { api } from "~/trpc/react";
+import { SubmissionFailure } from "./submission-failure";
 
 const formSchema = z.object({
   workTerm: z.nativeEnum(WorkTerm, {
@@ -262,20 +264,43 @@
     scroll.scrollToTop({ duration: 250, smooth: true });
   };
 
-  const mutation = api.review.create.useMutation();
+  const [validForm, setValidForm] = useState(true);
+  const { toast } = useToast();
 
-  function onSubmit(values: z.infer<ReviewFormType>) {
-    mutation.mutate({
-      roleId: props.roleId,
-      profileId: props.profileId,
-      companyId: props.company.id,
-      ...values,
-    });
+  const mutation = api.review.create.useMutation({
+    onError: (error) => {
+      console.error("Mutation Error:", error); // Logs the full error details
+      setValidForm(false);
+      toast({
+        title: "Submission Error",
+        description:
+          error?.message || "Something went wrong. Please try again.",
+        variant: "destructive",
+      });
+      setValidForm(false);
+    },
+  });
+
+  async function onSubmit(values: z.infer<ReviewFormType>) {
+    try {
+      await mutation.mutateAsync({
+        roleId: props.roleId,
+        profileId: props.profileId,
+        companyId: props.company?.id ?? "",
+        ...values,
+      });
+    } catch (error) {
+      console.error("Mutation failed:", error);
+    }
   }
 
   if (currentStep === steps.length + 1) {
+    if (validForm) {
+      return <SubmissionConfirmation />;
+    } else {
+      return <SubmissionFailure />;
+    }
     // Also check if the mutation is successful before displaying this. Otherwise, show a loading spinner.
-    return <SubmissionConfirmation />;
   }
 
   if (currentStep === 0) {

apps/web/src/app/_components/form/submission-failure.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+import { Button } from "@cooper/ui/button";
+
+export function SubmissionFailure() {
+  return (
+    <div className="flex flex-col border-2">
+      <div className="z-10 -mb-4 h-4 w-full rounded-t-xl bg-gradient-to-r from-rose-400 via-yellow-400 to-blue-600" />
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center space-y-6 rounded-xl bg-white px-8 py-32 text-cooper-blue-600">
+        <div className="text-5xl font-bold">
+          Whoops, your review is invalid...
+        </div>
+        <div className="max-w-3xl text-center text-2xl">
+          IM SORRY IT DOES NOT WORK
+        </div>
+        <div className="flex justify-between space-x-8">
+          <Link href="/">
+            <Button>Return to home </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}