From 7998f293ee23a67d9ec9ce108907c1a352c4e5c0 Mon Sep 17 00:00:00 2001
From: Nabeel Boda <needtoexplore01@gmail.com>
Date: Wed, 13 Mar 2024 17:57:12 +0530
Subject: [PATCH] Feat: Contact Us

---
 ui/package-lock.json              |  41 +++++++++++
 ui/package.json                   |   1 +
 ui/src/components/Dropdown.js     |   4 +-
 ui/src/components/Header.jsx      |  55 +++++++++------
 ui/src/components/home/Footer.jsx |   3 +
 ui/src/pages/contact.js           | 110 ++++++++++++++++++++++++++++++
 6 files changed, 192 insertions(+), 22 deletions(-)
 create mode 100644 ui/src/pages/contact.js

diff --git a/ui/package-lock.json b/ui/package-lock.json
index a63ce6a..c39845a 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ui",
       "version": "0.1.0",
       "dependencies": {
+        "@formspree/react": "^2.5.1",
         "@tabler/icons-react": "^2.47.0",
         "@vercel/analytics": "^1.2.2",
         "@wavesurfer/react": "^1.0.4",
@@ -1887,6 +1888,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@formspree/core": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@formspree/core/-/core-3.0.1.tgz",
+      "integrity": "sha512-jGNgrEtL8mx8k1kkmeNfyeoP1a+H2kci8TMG7CT3R5k3ssqr0Sl1j10SIKo74CFZVewMW4JjMYwcunWUPfutSQ==",
+      "dependencies": {
+        "@stripe/stripe-js": "^1.35.0"
+      }
+    },
+    "node_modules/@formspree/react": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@formspree/react/-/react-2.5.1.tgz",
+      "integrity": "sha512-Yhxyn32m3zH63i0DNpnBq55zargDlbihqC0wlK18dqU7GOUqJXKY+WywLXuTRGfqo79/hT+Qx6eFS6M0J6eh0A==",
+      "dependencies": {
+        "@formspree/core": "^3.0.1",
+        "@stripe/react-stripe-js": "^1.7.1",
+        "@stripe/stripe-js": "^1.35.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -2287,6 +2310,24 @@
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "1.16.5",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.16.5.tgz",
+      "integrity": "sha512-lVPW3IfwdacyS22pP+nBB6/GNFRRhT/4jfgAK6T2guQmtzPwJV1DogiGGaBNhiKtSY18+yS8KlHSu+PvZNclvQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": "^1.44.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.54.2.tgz",
+      "integrity": "sha512-R1PwtDvUfs99cAjfuQ/WpwJ3c92+DAMy9xGApjqlWQMj0FKQabUAys2swfTRNzuYAYJh7NqK2dzcYVNkKLEKUg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index 3cabe22..54281b1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@formspree/react": "^2.5.1",
     "@tabler/icons-react": "^2.47.0",
     "@vercel/analytics": "^1.2.2",
     "@wavesurfer/react": "^1.0.4",
diff --git a/ui/src/components/Dropdown.js b/ui/src/components/Dropdown.js
index 22f69f5..c5a38eb 100644
--- a/ui/src/components/Dropdown.js
+++ b/ui/src/components/Dropdown.js
@@ -25,7 +25,9 @@ export default function Dropdown({
   return (
     <div className="flex flex-col ">
       <label className="font-medium text-wrap my-0">{label}:</label>
-      <p className=" text-xs text-red-700 mt-[-5px]">Required</p>
+      <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+        Required
+      </p>
 
       <select
         aria-label="Select Target Language"
diff --git a/ui/src/components/Header.jsx b/ui/src/components/Header.jsx
index 2a18e04..642a56b 100644
--- a/ui/src/components/Header.jsx
+++ b/ui/src/components/Header.jsx
@@ -4,9 +4,40 @@ import { useEffect, useState } from "react";
 import { transitionToCollection } from "@components/utils";
 import PrimaryBtn from "./PrimaryBtn";
 
+function Buttons({ isHome }) {
+  const router = useRouter();
+  if (isHome) {
+    return (
+      <div className="flex flex-wrap gap-4">
+        <PrimaryBtn accent={true} fn={() => router.push("/about")}>
+          Team
+        </PrimaryBtn>
+        <PrimaryBtn accent={true} fn={() => router.push("/livetranscribe")}>
+          Live Transcription
+        </PrimaryBtn>
+        <PrimaryBtn
+          accent={true}
+          fn={() => router.push("/blog/terms-and-licenses")}
+        >
+          Terms & Licenses
+        </PrimaryBtn>
+        <SecondaryBtn fn={() => transitionToCollection(router)}>
+          Dashboard
+        </SecondaryBtn>
+      </div>
+    );
+  }
+  if (router.pathname !== "/contact") {
+    console.log(router);
+    return (
+      <div className="max-w-fit">
+        <PrimaryBtn fn={() => router.push("/contact")}>Contact Us</PrimaryBtn>
+      </div>
+    );
+  }
+}
 export default function Header() {
   const router = useRouter();
-
   const isHome = router.pathname === "/";
   function scrollToTop() {
     if (isHome) {
@@ -18,6 +49,7 @@ export default function Header() {
       router.push("/");
     }
   }
+
   return (
     <header
       className={`
@@ -33,26 +65,7 @@ export default function Header() {
           Indic Subtitler
         </h1>
       </div>
-
-      {isHome && (
-        <div className="flex flex-wrap gap-4 ">
-          <PrimaryBtn accent={true} fn={() => router.push("/about")}>
-            Team
-          </PrimaryBtn>
-          <PrimaryBtn accent={true} fn={() => router.push("/livetranscribe")}>
-            Live Transcription
-          </PrimaryBtn>
-          <PrimaryBtn
-            accent={true}
-            fn={() => router.push("/blog/terms-and-licenses")}
-          >
-            Terms & Licenses
-          </PrimaryBtn>
-          <SecondaryBtn fn={() => transitionToCollection(router)}>
-            Dashboard
-          </SecondaryBtn>
-        </div>
-      )}
+      <Buttons isHome={isHome} />
     </header>
   );
 }
diff --git a/ui/src/components/home/Footer.jsx b/ui/src/components/home/Footer.jsx
index 469e028..f174ec5 100644
--- a/ui/src/components/home/Footer.jsx
+++ b/ui/src/components/home/Footer.jsx
@@ -32,6 +32,9 @@ export default function Footer() {
             <li>
               <Link href="/about">About us</Link>
             </li>
+            <li>
+              <Link href="/contact">Contact us</Link>
+            </li>
           </ul>
         </div>
       </section>
diff --git a/ui/src/pages/contact.js b/ui/src/pages/contact.js
new file mode 100644
index 0000000..8cc7eca
--- /dev/null
+++ b/ui/src/pages/contact.js
@@ -0,0 +1,110 @@
+import PrimaryBtn from "@components/components/PrimaryBtn";
+import { ValidationError, useForm } from "@formspree/react";
+import Image from "next/image";
+import React from "react";
+
+function FeebackForm() {
+  const [state, handleSubmit] = useForm("xvoeqldl");
+  if (state.succeeded) {
+    return (
+      <div className="h-[400px] flex items-center ">
+        <h1 className="md:text-2xl text-xl text-center w-full font-medium mt-[-50px]">
+          Form Submitted Successfully!
+        </h1>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <h1 className="text-xl">Submit a form </h1>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-5 my-4">
+        <div className="flex w-full  justify-between md:flex-row flex-col">
+          <span>
+            <label className="" htmlFor="name">
+              Full Name
+            </label>
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+          <input
+            required
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter your full name"
+            className="border-2 rounded-md md:w-[60%] px-2 py-1"
+          />
+        </div>
+        <div className="flex md:flex-row flex-col w-full  justify-between">
+          <span>
+            <label htmlFor="email">Email Address</label>{" "}
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+          <input
+            required
+            id="email"
+            type="email"
+            name="email"
+            placeholder="Enter your Email Id"
+            className="border-2 rounded-md md:w-[60%] px-2 py-1"
+          />
+        </div>
+        <ValidationError prefix="Email" field="email" errors={state.errors} />
+        <div className="flex w-full  justify-between md:flex-row flex-col">
+          <span>
+            <label htmlFor="message">Message</label>{" "}
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+
+          <textarea
+            id="message"
+            name="message"
+            required
+            className="border-2 rounded-md md:w-[60%] h-36 px-2 py-1 resize-none"
+            placeholder="Enter your valuable message"
+          />
+        </div>
+        <ValidationError
+          prefix="Message"
+          field="message"
+          errors={state.errors}
+        />
+        <button
+          type="submit"
+          className="w-max bg-primary-900  text-white px-6 py-1 font-medium rounded-md md:text-lg self-end "
+          disabled={state.submitting}
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default function contact() {
+  return (
+    <section
+      className=" lg:w-[50%] md:w-[70%] md:mx-auto mx-4 flex flex-col justify-center  px-4
+      shadow-[rgba(0,_0,_0,_0.24)_0px_3px_8px] mt-14
+    "
+    >
+      <p className="text-center mt-6">
+        Faced a bug? Raise an issue now on{" "}
+        <a
+          href="https://github.com/kurianbenoy/Indic-Subtitler/issues"
+          className="font-medium underline underline-offset-4"
+          target="_blank"
+        >
+          Github
+        </a>
+      </p>
+      <div className="divider">OR</div>
+      <FeebackForm />
+    </section>
+  );
+}