This repository has been archived by the owner on Jan 18, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #237 from oneleif/develop
1.0.0 09-09-2020
- Loading branch information
Showing
20 changed files
with
397 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from 'react'; | ||
|
||
import { Helmet } from 'react-helmet'; | ||
|
||
export default function ReactHelmetWrapper({ title, description, image, path }) { | ||
/************************************ | ||
* Render | ||
************************************/ | ||
|
||
return ( | ||
<Helmet titleTemplate='%s | oneleif' defaultTitle='oneleif Website' defer={false}> | ||
<title itemProp='name' lang='en'> | ||
{title} | ||
</title> | ||
<base target='_blank' href='https://oneleif.com/' /> | ||
<meta name='description' content={description} /> | ||
<meta name='robots' content='max-snippet:-1, max-image-preview:large, max-video-preview:-1' /> | ||
<link rel='canonical' href={`https://oneleif.com${path}`} /> | ||
<meta property='og:locale' content='en_US' /> | ||
<meta property='og:type' content='website' /> | ||
<meta property='og:title' content={title} /> | ||
<meta property='og:description' content={description} /> | ||
<meta property='og:url' content={`https://oneleif.com${path}`} /> | ||
<meta property='og:site_name' content='oneleif' /> | ||
<meta property='og:image' content={image} /> | ||
<meta property='og:image:secure_url' content={image} /> | ||
<meta property='og:image:width' content='1280' /> | ||
<meta property='og:image:height' content='720' /> | ||
<meta name='twitter:card' content='summary_large_image' /> | ||
<meta name='twitter:description' content={description} /> | ||
<meta name='twitter:title' content={title} /> | ||
<meta name='twitter:site' content='@oneleifdev' /> | ||
<meta name='twitter:creator' content='@oneleifdev' /> | ||
<meta name='twitter:image' content={image} /> | ||
</Helmet> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import ReactHelmetWrapper from './ReactHelmetWrapper'; | ||
|
||
export default ReactHelmetWrapper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,35 +4,37 @@ import OlContactBean from '../assets/olLilBean/OlContactBean'; | |
import Input from '../components/Objects/Input/Input'; | ||
import TextArea from '../components/Objects/TextArea/TextArea'; | ||
import ButtonLink from '../components/Objects/ButtonLink/ButtonLink'; | ||
import ReactHelmetWrapper from '../components/ReactHelmetWrapper'; | ||
import LinkPreviewImage from '../assets/LinkPreview/ol-socialCard_1.png'; | ||
|
||
import ReactGA from 'react-ga'; | ||
|
||
/************************************ | ||
* Constants | ||
************************************/ | ||
/************************************ | ||
* Constants | ||
************************************/ | ||
|
||
const TARGET_EMAIL = 'mailto:[email protected]'; | ||
const ERROR_MESSAGE = 'Please enter a'; | ||
const TARGET_EMAIL = 'mailto:[email protected]'; | ||
const ERROR_MESSAGE = 'Please enter a'; | ||
|
||
export default function ContactUsView() { | ||
/************************************ | ||
* State | ||
************************************/ | ||
* State | ||
************************************/ | ||
|
||
const [mailTo, setMailTo] = useState(''); | ||
const [formData, setFormData] = useState({message: {value: '', error: ''}, subject: {value: '', error: ''}}); | ||
const [formData, setFormData] = useState({ message: { value: '', error: '' }, subject: { value: '', error: '' } }); | ||
|
||
/************************************ | ||
* Private Methods | ||
************************************/ | ||
* Private Methods | ||
************************************/ | ||
|
||
/** | ||
* Passes the id and value of the input into helper functions to be handled | ||
* @param {Event} value change event from the message textarea | ||
*/ | ||
function handleInput(event) { | ||
const { id, value } = event.target; | ||
setData(id, value) | ||
setData(id, value); | ||
handleEnteredInput(id, value); | ||
} | ||
|
||
|
@@ -44,10 +46,9 @@ export default function ContactUsView() { | |
*/ | ||
function setData(id, value) { | ||
if (value.length > 0) { | ||
setFormData({...formData, [id] : {value : value, error: ''}}); | ||
} | ||
else { | ||
setFormData({...formData, [id] : {value : value, error: `${ERROR_MESSAGE} ${id}`}}); | ||
setFormData({ ...formData, [id]: { value: value, error: '' } }); | ||
} else { | ||
setFormData({ ...formData, [id]: { value: value, error: `${ERROR_MESSAGE} ${id}` } }); | ||
} | ||
} | ||
|
||
|
@@ -62,9 +63,11 @@ export default function ContactUsView() { | |
setMailTo(''); | ||
return; | ||
} | ||
|
||
//if event comes from message then input will need to be in message param | ||
(id === 'message') ? parseAndApplyEmailInput(formData.subject.value, value) : parseAndApplyEmailInput(value, formData.message.value); | ||
id === 'message' | ||
? parseAndApplyEmailInput(formData.subject.value, value) | ||
: parseAndApplyEmailInput(value, formData.message.value); | ||
} | ||
|
||
/** | ||
|
@@ -79,15 +82,16 @@ export default function ContactUsView() { | |
} | ||
|
||
//prevents event from propogating to link functionality | ||
event.preventDefault(); | ||
event.preventDefault(); | ||
if (formData.subject.value) { | ||
setFormData({...formData, message : {value : '', error: `${ERROR_MESSAGE} message`}}); | ||
} | ||
else if (formData.message.value) { | ||
setFormData({...formData, subject : {value : '', error: `${ERROR_MESSAGE} subject`}}); | ||
} | ||
else { | ||
setFormData({message : {value : '', error: `${ERROR_MESSAGE} message`}, subject : {value : '', error: `${ERROR_MESSAGE} subject`}}); | ||
setFormData({ ...formData, message: { value: '', error: `${ERROR_MESSAGE} message` } }); | ||
} else if (formData.message.value) { | ||
setFormData({ ...formData, subject: { value: '', error: `${ERROR_MESSAGE} subject` } }); | ||
} else { | ||
setFormData({ | ||
message: { value: '', error: `${ERROR_MESSAGE} message` }, | ||
subject: { value: '', error: `${ERROR_MESSAGE} subject` } | ||
}); | ||
} | ||
} | ||
|
||
|
@@ -124,22 +128,61 @@ export default function ContactUsView() { | |
************************************/ | ||
|
||
return ( | ||
<div className="contact-us-view-container"> | ||
<div className='contact-us-view-container'> | ||
<ReactHelmetWrapper | ||
title='Contact Us' | ||
description='Have any questions? Or even a project proposal?' | ||
image={LinkPreviewImage} | ||
path='/contact' | ||
/> | ||
<div className='contact-us-content-container'> | ||
<div className='contact-us-copy-container'> | ||
<h1>Contact Us</h1> | ||
<p className='call-to-action-text'> | ||
Interested in learning more? | ||
Looking to partner with us? We want to hear from you! | ||
Interested in learning more? Looking to partner with us? We want to hear from you! | ||
</p> | ||
<p> | ||
Email us at:{' '} | ||
<a | ||
href={`${TARGET_EMAIL}?Subject=oneleif%20submission%20form`} | ||
target='_top' | ||
onClickCapture={handleContactLinkClicked} | ||
> | ||
[email protected] | ||
</a> | ||
</p> | ||
<p> | ||
Call us:{' '} | ||
<a href='tel:1-402-536-0377' onClickCapture={handleContactLinkClicked}> | ||
+1 (402) 536-0377 | ||
</a> | ||
</p> | ||
<p>Email us at: <a href={`${TARGET_EMAIL}?Subject=oneleif%20submission%20form`} target="_top" onClickCapture={handleContactLinkClicked}>[email protected]</a></p> | ||
<p>Call us: <a href="tel:1-402-536-0377" onClickCapture={handleContactLinkClicked}>+1 (402) 536-0377</a></p> | ||
<OlContactBean /> | ||
</div> | ||
<div className='contact-us-form-container'> | ||
<Input id='subject' label='Subject' placeholder='Enter the subject...' caption='Subject Input' errorMessage={formData.subject.error} onValueChange={handleInput}/> | ||
<TextArea id='message' label='Message' placeholder='Write your message here' caption='Message Input' errorMessage={formData.message.error} onValueChange={handleInput}/> | ||
<ButtonLink aria-label='send' handleClick={handleSendClicked} href={mailTo} target="_top" eventLabel='Email Submission Attempted'> | ||
<Input | ||
id='subject' | ||
label='Subject' | ||
placeholder='Enter the subject...' | ||
caption='Subject Input' | ||
errorMessage={formData.subject.error} | ||
onValueChange={handleInput} | ||
/> | ||
<TextArea | ||
id='message' | ||
label='Message' | ||
placeholder='Write your message here' | ||
caption='Message Input' | ||
errorMessage={formData.message.error} | ||
onValueChange={handleInput} | ||
/> | ||
<ButtonLink | ||
aria-label='send' | ||
handleClick={handleSendClicked} | ||
href={mailTo} | ||
target='_top' | ||
eventLabel='Email Submission Attempted' | ||
> | ||
Send | ||
</ButtonLink> | ||
</div> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.