Forms need to show submit confirmation #539

src/components/contact-success/contact-success.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import Router from 'next/router';
+import styled from "styled-components";
+
+
+const Container = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+`;
+
+const SuccessMessage = styled.p`
+    color: red;
+    font-size: 18px;
+`;
+
+const contactSuccess: React.FC = () => {
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+          Router.push('/');
+        }, 5000);
+
+        return () => clearTimeout(timeout);
+      }, [Router]);
+
+    return (
+        <Container>
+            <img src="https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1627489505/VWC_Logo_Horizontal_gsxn3h.png" alt="Logo" width="158" height="26"></img>
+            <br />
+            <SuccessMessage> 
+                Thank you for your message!
+                We have received your message and will get back to you shortly.
+            </SuccessMessage>
+        </Container>
+    );
+};
+
+export default contactSuccess;

src/components/forms/contact-form.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, useState } from "react";
 import axios from "axios";
 import clsx from "clsx";
 import { useForm, SubmitHandler } from "react-hook-form";
+import Router from "next/router";
 import Input from "@ui/form-elements/input";
 import Textarea from "@ui/form-elements/textarea";
 import Feedback from "@ui/form-elements/feedback";
@@ -35,8 +36,9 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
             try {
                 const response = await axios.post("/api/contact", data);
                 if (response.status === 200) {
-                    setServerMessage("Thank you for your message!");
+                    // setServerMessage("Thank you for your message!");
                     reset();
+                    Router.push('/success');
                 } else {
                     setServerMessage(
                         "There was an error. Please try again later."

src/components/forms/mentor-form.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
+import Router from "next/router";
 import axios from "axios";
 import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
@@ -27,8 +28,9 @@ const MentorForm = () => {
     const onSubmit: SubmitHandler<IFormValues> = async (data) => {
         try {
             await axios.post("/api/mentor", data);
-            setMessage("Thank you for your registration!");
+            // setMessage("Thank you for your registration!");
             reset();
+            Router.push('/registration-success');
         } catch (error) {
             setMessage("Failed to submit the form. Please try again later.");
         }

src/components/registration-success-page/registration-success-page.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import Router from 'next/router';
+import styled from "styled-components";
+
+
+const Container = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+`;
+
+const SuccessMessage = styled.p`
+    color: red;
+    font-size: 18px;
+`;
+
+const registrationSuccessPage: React.FC = () => {
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+          Router.push('/');
+        }, 5000);
+
+        return () => clearTimeout(timeout);
+      }, [Router]);
+
+    return (
+        <Container>
+            <img src="https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1627489505/VWC_Logo_Horizontal_gsxn3h.png" alt="Logo" width="158" height="26"></img>
+            <br />
+            <SuccessMessage>
+                Thank you for your registration!
+            </SuccessMessage>
+        </Container>
+    );
+};
+
+export default registrationSuccessPage;

src/pages/contact-success.tsx

@@ -0,0 +1,3 @@
+import contactSuccess from "@components/contact-success/contact-success";
+
+export default contactSuccess;

src/pages/registration-success.tsx

@@ -0,0 +1,3 @@
+import registrationSuccessPage from "@components/registration-success-page/registration-success-page";
+
+export default registrationSuccessPage;