From 72560d06433028519184713f6dd76ccd3296bb75 Mon Sep 17 00:00:00 2001 From: sachinmjadhav Date: Tue, 23 Jul 2019 10:46:35 +0530 Subject: [PATCH 1/6] contact-pipedrive --- src/pages/contact.mdx | 41 +++++++++++------ src/pages/thank-you.js | 27 +++++++++++ src/templates/header.js | 99 +++++++++++++++++++++++++++++++++++------ 3 files changed, 139 insertions(+), 28 deletions(-) create mode 100644 src/pages/thank-you.js diff --git a/src/pages/contact.mdx b/src/pages/contact.mdx index 65fd7e2..18fa5da 100644 --- a/src/pages/contact.mdx +++ b/src/pages/contact.mdx @@ -26,18 +26,31 @@ San Francisco #### Or leave us a msg :) -
- - - - - - - - - - - + + + + + + + + + + + +
diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js new file mode 100644 index 0000000..59bdb46 --- /dev/null +++ b/src/pages/thank-you.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Link } from 'gatsby'; + +const ThankYou = () => { + return ( +
+

Thank You!

+
+

We will get back to you within 24 hours. Our typical response time is 5 minutes.

+
+ + Back to Homepage + +
+ ) +} + +export default ThankYou; \ No newline at end of file diff --git a/src/templates/header.js b/src/templates/header.js index b0a241f..65459a1 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -1,8 +1,8 @@ +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' const links = [ {title: 'Work', link: '/work'}, @@ -11,20 +11,91 @@ const links = [ {title: 'Contact', link: '/contact'}, ] -const Header = ({ siteTitle }) => { - return ( -
-
-
-
-) +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('idea').value = "" + document.getElementById('email').value = "" + + const formSubmitData = { + email, + idea, + userDetails, + } + + const url = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' + + const http = new XMLHttpRequest(); + http.open('POST', url) + http.onreadystatechange = function() { + if(http.readyState === 4 && http.status === 200) { + localStorage.setItem('userDetails', JSON.stringify({})) + navigate('thank-you') + } + } + 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.propTypes = { siteTitle: PropTypes.string, } From 13baf5c43a353b0dd37249d0893cad14dbb92cd0 Mon Sep 17 00:00:00 2001 From: sachinmjadhav Date: Tue, 23 Jul 2019 10:48:21 +0530 Subject: [PATCH 2/6] indentation fix --- src/pages/contact.mdx | 52 +++++++------- src/pages/thank-you.js | 40 +++++------ src/templates/header.js | 152 ++++++++++++++++++++-------------------- 3 files changed, 122 insertions(+), 122 deletions(-) diff --git a/src/pages/contact.mdx b/src/pages/contact.mdx index 18fa5da..f05c096 100644 --- a/src/pages/contact.mdx +++ b/src/pages/contact.mdx @@ -27,30 +27,30 @@ San Francisco #### Or leave us a msg :)
- - - - - - - - - - - + + + + + + + + + + +
diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js index 59bdb46..e4c34f2 100644 --- a/src/pages/thank-you.js +++ b/src/pages/thank-you.js @@ -2,26 +2,26 @@ import React from 'react'; import { Link } from 'gatsby'; const ThankYou = () => { - return ( -
-

Thank You!

-
-

We will get back to you within 24 hours. Our typical response time is 5 minutes.

-
- - Back to Homepage - -
- ) + return ( +
+

Thank You!

+
+

We will get back to you within 24 hours. Our typical response time is 5 minutes.

+
+ + Back to Homepage + +
+ ) } export default ThankYou; \ No newline at end of file diff --git a/src/templates/header.js b/src/templates/header.js index 65459a1..dc9eef4 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -13,86 +13,86 @@ const links = [ 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('idea').value = "" - document.getElementById('email').value = "" - - const formSubmitData = { - email, - idea, - userDetails, - } - - const url = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' + 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('idea').value = "" + document.getElementById('email').value = "" + + const formSubmitData = { + email, + idea, + userDetails, + } + + const url = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' - const http = new XMLHttpRequest(); - http.open('POST', url) - http.onreadystatechange = function() { - if(http.readyState === 4 && http.status === 200) { - localStorage.setItem('userDetails', JSON.stringify({})) - navigate('thank-you') - } - } - http.send(JSON.stringify(formSubmitData)); - })) + const http = new XMLHttpRequest(); + http.open('POST', url) + http.onreadystatechange = function() { + if(http.readyState === 4 && http.status === 200) { + localStorage.setItem('userDetails', JSON.stringify({})) + navigate('thank-you') + } + } + 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 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)) - } + 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 ( -
-
-
-
- ) - } + 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 ( +
+
+
+
+ ) + } } From 678b73f9f48700794252a3be4ba5c20364ed877c Mon Sep 17 00:00:00 2001 From: sachinmjadhav Date: Wed, 24 Jul 2019 12:27:01 +0530 Subject: [PATCH 3/6] refactor and used bricks for ThankYou page --- config.js | 6 +++++ src/pages/contact.mdx | 2 +- src/pages/thank-you.js | 49 +++++++++++++++++++++++------------------ src/templates/header.js | 29 ++++++++++++------------ 4 files changed, 50 insertions(+), 36 deletions(-) create mode 100644 config.js diff --git a/config.js b/config.js new file mode 100644 index 0000000..3b23178 --- /dev/null +++ b/config.js @@ -0,0 +1,6 @@ +// URL for Contact Form submission +const hooksUrl = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' + +module.exports = { + hooksUrl +} \ No newline at end of file diff --git a/src/pages/contact.mdx b/src/pages/contact.mdx index f05c096..d730134 100644 --- a/src/pages/contact.mdx +++ b/src/pages/contact.mdx @@ -49,7 +49,7 @@ San Francisco placeholder='Email address' /> - + diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js index e4c34f2..247fb8d 100644 --- a/src/pages/thank-you.js +++ b/src/pages/thank-you.js @@ -1,27 +1,34 @@ -import React from 'react'; -import { Link } from 'gatsby'; +import React from 'react' +import styled from '@emotion/styled' +import { Link } from 'gatsby' +import { Flex, Box, P, H1, css } from 'bricks' const ThankYou = () => { + + const CenteredDiv = styled(Flex)( + css({ + width: "100vw", + height: "100vh", + alignItems: "center", + justifyContent: "center", + }) + ) + return ( -
-

Thank You!

-
-

We will get back to you within 24 hours. Our typical response time is 5 minutes.

-
- - Back to Homepage - -
+ + +

Thank You!

+

+ We will get back to you within 24 hours. Our typical response time is 5 minutes. +

+

+ + Back to Homepage + +

+ + ) } -export default ThankYou; \ No newline at end of file +export default ThankYou \ No newline at end of file diff --git a/src/templates/header.js b/src/templates/header.js index dc9eef4..36c2a4b 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types" import { Nav } from 'bricks' import { Logo } from '../components/logo' import { Link, navigate } from 'gatsby' +import hooksUrl from '../../config' const links = [ {title: 'Work', link: '/work'}, @@ -16,7 +17,7 @@ class Header extends Component { componentDidMount() { if(typeof window !== 'undefined') { let userDetails = {} - let SITE_NAME = window.location.origin; + let SITE_NAME = window.location.origin document.getElementById('contact-form') && document .getElementById('contact-form') @@ -24,6 +25,7 @@ class Header extends Component { 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 = "" @@ -32,18 +34,17 @@ class Header extends Component { idea, userDetails, } - - const url = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' - const http = new XMLHttpRequest(); - http.open('POST', url) + const http = new XMLHttpRequest() + http.open('POST', hooksUrl) http.onreadystatechange = function() { - if(http.readyState === 4 && http.status === 200) { + if(http.readyState === XMLHttpRequest.DONE && http.status === 200) { localStorage.setItem('userDetails', JSON.stringify({})) - navigate('thank-you') + document.getElementById('contact-submit').disabled = false + navigate('/thank-you') } } - http.send(JSON.stringify(formSubmitData)); + http.send(JSON.stringify(formSubmitData)) })) const isObjectEmpty = (obj = {}) => { @@ -51,7 +52,7 @@ class Header extends Component { } const distinct = (value, index, self) => { - return self.indexOf(value) === index; + return self.indexOf(value) === index } const updateUserDetailsWithCurrentUrl = (userDetails, currentUrl) => { @@ -60,16 +61,16 @@ class Header extends Component { localStorage.setItem('userDetails', JSON.stringify(userDetails)) } - userDetails = JSON.parse(localStorage.getItem('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); + 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) || ''; + 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)}` @@ -80,7 +81,7 @@ class Header extends Component { } render() { - const { siteTitle } = this.props; + const { siteTitle } = this.props return (
From 92b444271b29e8e5fb4ceb67cb05996fae04f24c Mon Sep 17 00:00:00 2001 From: sachinmjadhav Date: Wed, 24 Jul 2019 16:35:23 +0530 Subject: [PATCH 4/6] refactor and indentaion fix --- config.js | 2 +- src/components/centeredDiv.js | 11 +++++++++++ src/pages/thank-you.js | 18 ++++-------------- src/templates/header.js | 7 +++++++ 4 files changed, 23 insertions(+), 15 deletions(-) create mode 100644 src/components/centeredDiv.js diff --git a/config.js b/config.js index 3b23178..968208b 100644 --- a/config.js +++ b/config.js @@ -2,5 +2,5 @@ const hooksUrl = 'https://hooks.zapier.com/hooks/catch/1041785/21ewe5/' module.exports = { - hooksUrl + hooksUrl } \ No newline at end of file diff --git a/src/components/centeredDiv.js b/src/components/centeredDiv.js new file mode 100644 index 0000000..f49d32d --- /dev/null +++ b/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", + }) +) \ No newline at end of file diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js index 247fb8d..fbaaab0 100644 --- a/src/pages/thank-you.js +++ b/src/pages/thank-you.js @@ -1,23 +1,13 @@ import React from 'react' -import styled from '@emotion/styled' import { Link } from 'gatsby' -import { Flex, Box, P, H1, css } from 'bricks' +import { Box, P } from 'bricks' +import CenteredDiv from '../components/centeredDiv' -const ThankYou = () => { - - const CenteredDiv = styled(Flex)( - css({ - width: "100vw", - height: "100vh", - alignItems: "center", - justifyContent: "center", - }) - ) - +const ThankYou = () => { return ( -

Thank You!

+

Thank You!

We will get back to you within 24 hours. Our typical response time is 5 minutes.

diff --git a/src/templates/header.js b/src/templates/header.js index 36c2a4b..3831dbf 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -42,8 +42,15 @@ class Header extends Component { localStorage.setItem('userDetails', JSON.stringify({})) document.getElementById('contact-submit').disabled = false navigate('/thank-you') + } else { + document.getElementById('contact-submit').disabled = false + alert('Sorry! something went wrong while processing your request. Please try again later') } } + 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)) })) From 8f22a75111e69d6222e225b7a2f9530eff6864df Mon Sep 17 00:00:00 2001 From: Kameshwaran Date: Fri, 26 Jul 2019 00:55:32 +0530 Subject: [PATCH 5/6] Bug fixes --- src/templates/header.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/templates/header.js b/src/templates/header.js index 3831dbf..31bd37f 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types" import { Nav } from 'bricks' import { Logo } from '../components/logo' import { Link, navigate } from 'gatsby' -import hooksUrl from '../../config' +import { hooksUrl } from '../../config' const links = [ {title: 'Work', link: '/work'}, @@ -42,9 +42,6 @@ class Header extends Component { localStorage.setItem('userDetails', JSON.stringify({})) document.getElementById('contact-submit').disabled = false navigate('/thank-you') - } else { - document.getElementById('contact-submit').disabled = false - alert('Sorry! something went wrong while processing your request. Please try again later') } } http.onerror = () => { From b1a56df55cc1028093c0605157a22cc444b63b48 Mon Sep 17 00:00:00 2001 From: sachinmjadhav Date: Tue, 6 Aug 2019 11:10:11 +0530 Subject: [PATCH 6/6] handled contact form submit error correctly --- src/components/centeredDiv.js | 11 ----------- src/pages/thank-you.js | 8 ++++---- src/templates/header.js | 6 +++--- 3 files changed, 7 insertions(+), 18 deletions(-) delete mode 100644 src/components/centeredDiv.js diff --git a/src/components/centeredDiv.js b/src/components/centeredDiv.js deleted file mode 100644 index f49d32d..0000000 --- a/src/components/centeredDiv.js +++ /dev/null @@ -1,11 +0,0 @@ -import styled from '@emotion/styled' -import { css, Flex } from 'bricks' - -export default styled(Flex)( - css({ - width: "100vw", - height: "100vh", - alignItems: "center", - justifyContent: "center", - }) -) \ No newline at end of file diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js index fbaaab0..c46d40f 100644 --- a/src/pages/thank-you.js +++ b/src/pages/thank-you.js @@ -1,11 +1,11 @@ import React from 'react' import { Link } from 'gatsby' import { Box, P } from 'bricks' -import CenteredDiv from '../components/centeredDiv' +import { Main } from 'theme-ui' -const ThankYou = () => { +const ThankYou = () => { return ( - +

Thank You!

@@ -17,7 +17,7 @@ const ThankYou = () => {

- +
) } diff --git a/src/templates/header.js b/src/templates/header.js index 1c3e021..b7a34a5 100644 --- a/src/templates/header.js +++ b/src/templates/header.js @@ -27,9 +27,7 @@ class Header extends Component { 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, @@ -41,6 +39,8 @@ class Header extends Component { http.onreadystatechange = function() { if(http.readyState === XMLHttpRequest.DONE && http.status === 200) { localStorage.setItem('userDetails', JSON.stringify({})) + document.getElementById('idea').value = "" + document.getElementById('email').value = "" document.getElementById('contact-submit').disabled = false navigate('/thank-you') }