From e6a9f47231a14c141d80d18638c4236cc23fbf75 Mon Sep 17 00:00:00 2001
From: Angelica Chung <angelica.ramos.91@gmail.com>
Date: Sat, 1 Oct 2022 11:38:34 -0400
Subject: [PATCH] contact form

---
 package.json                                  |  3 +
 .../storyteller-home/src/common/TopNav.tsx    |  4 +-
 .../src/pages/index/IndexPage.tsx             | 76 +++++++++++++++++++
 yarn.lock                                     | 32 ++++++++
 4 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 37ee67fffb..04d5d1f208 100644
--- a/package.json
+++ b/package.json
@@ -25,5 +25,8 @@
   "devDependencies": {
     "craco": "^0.0.3",
     "lerna": "^4.0.0"
+  },
+  "dependencies": {
+    "@formspree/react": "^2.4.0",
   }
 }
diff --git a/packages/storyteller-home/src/common/TopNav.tsx b/packages/storyteller-home/src/common/TopNav.tsx
index 7184ae6a75..059e92cad1 100644
--- a/packages/storyteller-home/src/common/TopNav.tsx
+++ b/packages/storyteller-home/src/common/TopNav.tsx
@@ -1,7 +1,7 @@
 import { useLocomotiveScroll } from "react-locomotive-scroll";
 import React, { useState, useEffect } from "react";
 
-interface Props {}
+interface Props { }
 
 function TopNav(props: Props) {
   const { scroll } = useLocomotiveScroll();
@@ -106,7 +106,7 @@ function TopNav(props: Props) {
           </ul>
 
           <div className="col-md-3 text-end">
-            <button className="btn btn-primary fs-6">Contact</button>
+            <a href="#contact" className="btn btn-primary fs-6" data-scroll-to>Contact</a>
           </div>
         </div>
 
diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx
index 9bfc29aa82..124f69fdd7 100644
--- a/packages/storyteller-home/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx
@@ -32,6 +32,9 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import { Autoplay, Pagination } from "swiper";
+import { useForm, ValidationError } from '@formspree/react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function IndexPage() {
   // Title Animation
@@ -130,6 +133,22 @@ function IndexPage() {
     );
   }, []);
 
+  const [state, handleSubmit] = useForm("xnqrvjbo");
+  if (state.succeeded) {
+    const reset = document.getElementById("reset")
+    const success = document.getElementById('success_message')
+
+    if (reset) reset.click()
+
+    setTimeout(function () {
+      if (success) success.innerHTML = '<h4 >Thank you for your message!</h4>'
+    }, 500)
+
+    setTimeout(function () {
+      if (success) success.innerHTML = ''
+    }, 5000)
+  }
+
   return (
     <>
       <div id="home" data-scroll-section>
@@ -1091,9 +1110,66 @@ function IndexPage() {
             </Swiper>
           </div>
         </div>
+
+        <div id="contact" className="bg-light section-2">
+          <h3 className="text-center fw-bold display-5 mb-5">Contact Us</h3>
+          <div id="success_message" className="fw-semibold opacity-75 mb-4 text-center"></div>
+          <form id="contact_form" onSubmit={handleSubmit} className="col-12 col-md-6 mx-auto">
+            <fieldset className="">
+              <input
+                id="name"
+                type="text"
+                name="name"
+                placeholder='Name *'
+                required
+                className="col-12"
+              />
+              <ValidationError
+                prefix="Name"
+                field="name"
+                errors={state.errors}
+              />
+              <input
+                id="email"
+                type="email"
+                name="email"
+                placeholder='Email *'
+                required
+                className="col-12 mt-2"
+              />
+              <ValidationError
+                prefix="Email"
+                field="email"
+                errors={state.errors}
+              />
+            </fieldset>
+            <fieldset>
+              <textarea
+                id="message"
+                name="message"
+                placeholder='Say "hi" here!'
+                required
+                className="col-12 mt-2"
+                cols={40}
+                rows={4}
+                style={{ resize: 'none' }}
+              />
+              <ValidationError
+                prefix="Message"
+                field="message"
+                errors={state.errors}
+              />
+            </fieldset>
+            <button type="submit" className="btn btn-primary mt-4 col-12" disabled={state.submitting}>
+              Submit
+            </button>
+            <input type="reset" id="reset" className="d-none" />
+          </form>
+        </div>
       </div>
     </>
   );
 }
 
+
 export default IndexPage;
diff --git a/yarn.lock b/yarn.lock
index a837d01407..f7b65e6b0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1170,6 +1170,14 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@formspree/react@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@formspree/react/-/react-2.4.0.tgz#156249a7832b13c869c0badf86bb920a529ed0a0"
+  integrity sha512-7zPt9tjX0zEiqJhbz5S35+AFyAz76iIJ5Qu9Mw+25kgO+FfmA1i9APakbJG57UsqEGT/dLX2aQa824A87zUtQw==
+  dependencies:
+    "@stripe/react-stripe-js" "^1.7.1"
+    "@stripe/stripe-js" "^1.35.0"
+
 "@fortawesome/fontawesome-common-types@6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
@@ -2466,6 +2474,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@stripe/react-stripe-js@^1.7.1":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.12.0.tgz#61d772f6271dacd19b1c9a3fb190bb7fcb568947"
+  integrity sha512-LW/f/slRq8x0y99qFjlZirnIk+q0zQvNNRtidigvHfYSbHji4QdtKDMD/HfYmtriPDRpIxOFilwsJ3ayPCC9Fw==
+  dependencies:
+    prop-types "^15.7.2"
+
+"@stripe/stripe-js@^1.35.0":
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.38.1.tgz#67a27380f021931f6e44abeee2b011b8d7f524de"
+  integrity sha512-v0hF65jEs7tw33JE70E5puJ2fFhpiS2XYwmayupEdjKWavJivycYcZgZKYXAQhTiMgtDgN9YPzqUr86VzVc3Ew==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -4876,6 +4896,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 cmd-shim@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -11795,6 +11820,13 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-toastify@^9.0.8:
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.8.tgz#3876c89fc6211a29027b3075010b5ec39ebe4f7e"
+  integrity sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==
+  dependencies:
+    clsx "^1.1.1"
+
 react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"