Contact - Pipedrive

config.js

@@ -0,0 +1,6 @@
+// URL for Contact Form submission
+const hooksUrl = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/'
+
+module.exports = {
+  hooksUrl
+}

src/components/centeredDiv.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled'
+import { css, Flex } from 'bricks'
+
+export default styled(Flex)(
+  css({
+    width: "100vw",
+    height: "100vh",
+    alignItems: "center",
+    justifyContent: "center",
+  })
+)

src/pages/contact.mdx

@@ -26,18 +26,31 @@ San Francisco
 
 #### Or leave us a msg :)
 
-<form
-  action="https://formspree.io/[email protected]"
-  method="post" target='/thanks'>
-    <Flex flexWrap='wrap' flexDirection='column'>
-      <Box width={[1,1/3]}>
-        <InputText size='25' rows="5" style={{width:'100%'}} required as='textarea' name='msg' placeholder='Tell us about your idea'/>
-      </Box>
-      <Box width={[1,1/3]} mt={1}>
-        <InputText style={{width:'100%'}} name='email' type='email' required placeholder='Email address'/>
-      </Box>
-      <Box width={[1,1/3]} mt={1}>
-        <InputButton/>
-      </Box>
-    </Flex>
+<form id="contact-form">
+  <Flex flexWrap='wrap' flexDirection='column'>
+    <Box width={[1,1/3]}>
+      <InputText
+        id="idea" 
+        size='25'
+        rows="5"
+        style={{width:'100%'}}
+        required as='textarea'
+        name='msg'
+        placeholder='Tell us about your idea'
+      />
+    </Box>
+    <Box width={[1,1/3]} mt={1}>
+      <InputText
+      id="email" 
+      style={{width:'100%'}}
+      name='email'
+      type='email'
+      required
+      placeholder='Email address'
+    />
+    </Box>
+    <Box width={[1,1/3]} mt={1} id="contact-submit">
+      <InputButton/>
+    </Box>
+  </Flex>
 </form>

src/pages/thank-you.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { Box, P } from 'bricks'
+import CenteredDiv from '../components/centeredDiv'
+
+const ThankYou = () => {  
+  return (
+    <CenteredDiv>
+      <Box textAlign="center">
+        <P fontSize="6" mb="4">Thank You!</P>
+        <P fontSize="3" mb="4">
+          We will get back to you within 24 hours. Our typical response time is 5 minutes.
+        </P>
+        <P fontSize="3">
+          <Link to="/">
+            Back to Homepage
+          </Link>
+        </P>
+      </Box>
+    </CenteredDiv>
+  )
+}
+
+export default ThankYou

src/templates/header.js

@@ -1,8 +1,9 @@
+import React, { Component } from "react"
 import PropTypes from "prop-types"
-import React from "react"
 import { Nav } from 'bricks'
 import { Logo } from '../components/logo'
-import { Link } from 'gatsby'
+import { Link, navigate } from 'gatsby'
+import { hooksUrl } from '../../config'
 
 const links = [
   {title: 'Work', link: '/work'},
@@ -11,20 +12,95 @@ const links = [
   {title: 'Contact', link: '/contact'},
 ]
 
-const Header = ({ siteTitle }) => {
-  return (
-  <header>
-    <div>
-      <Nav 
-        logo={Logo({title: siteTitle})}
-        links={links}
-        GatsbyLink={Link}
-      />
-    </div>
-  </header>
-)
+class Header extends Component {
+
+  componentDidMount() {
+    if(typeof window !== 'undefined') {
+      let userDetails = {}
+      let SITE_NAME = window.location.origin
+      document.getElementById('contact-form') &&
+      document
+        .getElementById('contact-form')
+        .addEventListener('submit', (e => {
+          e.preventDefault()
+          const idea = document.getElementById('idea').value
+          const email = document.getElementById('email').value
+          document.getElementById('contact-submit').disabled = true
+          document.getElementById('idea').value = ""
+          document.getElementById('email').value = ""
+
+          const formSubmitData = {
+            email,
+            idea,
+            userDetails,
+          }
+
+          const http = new XMLHttpRequest()
+          http.open('POST', hooksUrl)
+          http.onreadystatechange = function() {
+            if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
+              localStorage.setItem('userDetails', JSON.stringify({}))
+              document.getElementById('contact-submit').disabled = false
+              navigate('/thank-you')
+            }
+          }
+          http.onerror = () => {
+            document.getElementById('contact-submit').disabled = false
+            alert('Sorry! something went wrong while processing your request. Please try again later')
+          }
+          http.send(JSON.stringify(formSubmitData))
+      }))
+
+      const isObjectEmpty = (obj = {}) => {
+        return Object.keys(obj).length === 0 && obj.constructor === Object
+      }
+
+      const distinct = (value, index, self) => {
+        return self.indexOf(value) === index
+      }
+
+      const updateUserDetailsWithCurrentUrl = (userDetails, currentUrl) => {
+        userDetails.browsedLinks = [...userDetails.browsedLinks, currentUrl]
+        userDetails.browsedLinks = userDetails.browsedLinks.filter(distinct)
+        localStorage.setItem('userDetails', JSON.stringify(userDetails))
+      }
+
+      userDetails = JSON.parse(localStorage.getItem('userDetails')) || {}
+      // User already entered site atleast once
+      if (!isObjectEmpty(userDetails)) {
+        // Extract userDetails from localStorage
+        userDetails = JSON.parse(localStorage.getItem('userDetails'))
+        updateUserDetailsWithCurrentUrl(userDetails, document.URL)
+      } else {
+        // If entering first time
+        // Set referrer
+        userDetails.referrer = (!document.referrer.includes(SITE_NAME) && document.referrer) || ''
+        // Clear past links or set it empty
+        userDetails.browsedLinks = []
+        const currentTimeZone = `${parseInt(new Date().getTimezoneOffset() / -60)}:${Math.abs(new Date().getTimezoneOffset() % 60)}`
+        userDetails.timeZone = `UTC${currentTimeZone.startsWith('-') ? '' : '+'}${currentTimeZone}`
+        updateUserDetailsWithCurrentUrl(userDetails, document.URL)
+      }
+    }
+  }
+
+  render() {
+    const { siteTitle } = this.props
+    return (
+      <header>
+        <div>
+          <Nav 
+            logo={Logo({title: siteTitle})}
+            links={links}
+            GatsbyLink={Link}
+          />
+        </div>
+      </header>
+    )	
+  }
 }
 
+
 Header.propTypes = {
   siteTitle: PropTypes.string,
 }