From c76c4e86faf7a7a1fbb66a17f9a375968815ad6f Mon Sep 17 00:00:00 2001
From: Nambh34 <nambh34@ghtk.co>
Date: Wed, 26 Jun 2024 13:38:21 +0700
Subject: [PATCH] fixing contacts

---
 package.json          |  1 +
 src/pages/_app.tsx    |  3 ++
 src/pages/contact.tsx | 65 ++++++++++++++++++++++++++++---------------
 yarn.lock             | 12 ++++++++
 4 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index d3e1e03..cd6f650 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-toastify": "^10.0.5",
     "remark": "^14.0.3",
     "remark-html": "^15.0.2",
     "tailwindcss": "3.3.3"
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7c7c613..36acf5f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,7 +13,9 @@ import '../styles/special-classes.css'
 import '../styles/responsive.css'
 import '../styles/owl.carousel.min.css'
 import '../styles/owl.theme.default.min.css'
+import "react-toastify/dist/ReactToastify.css";
 import Script from "next/script";
+import { ToastContainer } from "react-toastify"
 
 export default function App({Component, pageProps}: AppProps) {
     useEffect(() => {
@@ -29,6 +31,7 @@ export default function App({Component, pageProps}: AppProps) {
             <main>
                 <Header/>
                 <Component {...pageProps} />
+                <ToastContainer />
                 <Footer/>
 
                 <Script type="text/javascript" src="./js/jquery-3.6.0.min.js" strategy={"beforeInteractive"}/>
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index cdc6a76..71ae761 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -2,32 +2,51 @@ import React, {useRef, useState} from "react";
 import {ContactForm} from "../components/ContactForm";
 import {useRouter} from "next/router";
 import Link from "next/link";
+import { toast } from "react-toastify";
 
 export default function Contact() {
-    const router = useRouter()
-    const {email} = router.query
-    const [message, setMessage] = useState("");
-    const formRef = useRef();
-    // @ts-ignore
-    const submitContact = async (e) => {
-        e.preventDefault();
-        console.log(e.target[0].value);
-        console.log(e.target[1].value);
-        console.log(e.target[2].value);
-        const res = await ContactForm({
-            name: e.target[0].value,
-            email: e.target[1].value,
-            comment: e.target[2].value,
-        });
-        if (res == 0) {
-            setMessage("Thank you for your valuable comment!");
-            // @ts-ignore
-            formRef.current.reset();
-        } else {
-            setMessage("Something went wrong! Please try again");
-        }
+  const router = useRouter();
+  const { email } = router.query;
+  const [message, setMessage] = useState("");
+  const formRef = useRef<HTMLFormElement>(null);
+  // @ts-ignore
+  const submitContact = async (e) => {
+    e.preventDefault();
+
+    const objectParam = {
+      "entry.195424463": e.target[0].value,
+      "entry.523675412": e.target[1].value,
+      "entry.655646402": e.target[2].value,
     };
 
+    const params = new URLSearchParams();
+
+    Object.entries(objectParam).forEach(([key, value]) => {
+      params.append(key, value);
+    });
+
+    var formUrl = `https://docs.google.com/forms/d/e/1FAIpQLSfzclPs0xYECxknJnW3NVMB-ugOFhM3Zi5p76VqMptr1nLmSA/formResponse?&submit=Submit?usp=pp_url&${params.toString()}`;
+
+    try {
+      const res = await fetch(formUrl, {
+        mode: "no-cors",
+        method: "GET",
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+      if (res) {
+        formRef.current?.reset();
+        toast(
+          "Thanks for contacting us! We will be in touch with you shortly!"
+        );
+      }
+    } catch (error) {
+      toast("An error occurred, please try again later!");
+    }
+  };
+
     return (
         <>
             <section className="contact-section">
@@ -76,7 +95,7 @@ export default function Contact() {
                                 <div className="need_content">
                                     <h6 className="text-white">Write to us</h6>
                                     <h2 className="text-white">send us a Message</h2>
-                                    <form id="contactpage" onSubmit={submitContact}>
+                                    <form id="contactpage" onSubmit={submitContact} ref={formRef}>
                                         <div className="row">
                                             <div className="col-12">
                                                 <div className="form-group mb-0">
diff --git a/yarn.lock b/yarn.lock
index e4a3431..89eb6f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1474,6 +1474,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3937,6 +3942,13 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-toastify@^10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
+  integrity sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==
+  dependencies:
+    clsx "^2.1.0"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"