From 81815cb5ef53b7a149ccc96810bd3049fecf5725 Mon Sep 17 00:00:00 2001
From: Ingrid04 <ingridfmelgar@gmail.com>
Date: Thu, 8 Feb 2024 18:19:23 -0500
Subject: [PATCH] contact and registration confirmation

---
 .../contact-success/contact-success.tsx       | 47 +++++++++++++++++++
 src/components/forms/contact-form.tsx         |  4 +-
 src/components/forms/mentor-form.tsx          |  4 +-
 .../registration-success-page.tsx             | 46 ++++++++++++++++++
 src/pages/contact-success.tsx                 |  3 ++
 src/pages/registration-success.tsx            |  3 ++
 6 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/components/contact-success/contact-success.tsx
 create mode 100644 src/components/registration-success-page/registration-success-page.tsx
 create mode 100644 src/pages/contact-success.tsx
 create mode 100644 src/pages/registration-success.tsx

diff --git a/src/components/contact-success/contact-success.tsx b/src/components/contact-success/contact-success.tsx
new file mode 100644
index 000000000..b00bb37db
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/forms/contact-form.tsx b/src/components/forms/contact-form.tsx
index ffa61bba5..b25c06ba5 100644
--- a/src/components/forms/contact-form.tsx
+++ b/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."
diff --git a/src/components/forms/mentor-form.tsx b/src/components/forms/mentor-form.tsx
index cb0e3d729..b5212a640 100644
--- a/src/components/forms/mentor-form.tsx
+++ b/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.");
         }
diff --git a/src/components/registration-success-page/registration-success-page.tsx b/src/components/registration-success-page/registration-success-page.tsx
new file mode 100644
index 000000000..32ed88392
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/contact-success.tsx b/src/pages/contact-success.tsx
new file mode 100644
index 000000000..0b1a34cd2
--- /dev/null
+++ b/src/pages/contact-success.tsx
@@ -0,0 +1,3 @@
+import contactSuccess from "@components/contact-success/contact-success";
+
+export default contactSuccess;
\ No newline at end of file
diff --git a/src/pages/registration-success.tsx b/src/pages/registration-success.tsx
new file mode 100644
index 000000000..6ca7d89e8
--- /dev/null
+++ b/src/pages/registration-success.tsx
@@ -0,0 +1,3 @@
+import registrationSuccessPage from "@components/registration-success-page/registration-success-page";
+
+export default registrationSuccessPage;
\ No newline at end of file