WIP: contact page

packages/campus-online-frontend/src/components/Layout/index.js

@@ -19,6 +19,8 @@ export const Wrapper = styled.div`
 const Inner = styled.div`
 	flex: 1 0 auto;
 	width: 100%;
+	display: flex;
+	flex-direction: column;
 `
 
 const Layout = ({children}) => (

packages/campus-online-frontend/src/pages/contato/index.js

@@ -0,0 +1,182 @@
+import React from 'react'
+import styled from 'styled-components'
+import {navigateTo} from 'gatsby-link'
+import {compose} from 'recompose'
+import {Form, withFormik} from 'formik'
+import {colors} from '../../constants'
+import {above} from '../../utils/responsive'
+import {withLayout} from '../../components/Layout'
+import Navbar from '../../components/Navbar'
+import AboutHero from '../../components/AboutHero'
+import MetaTags from '../../components/MetaTags'
+import Container from '../../components/Container'
+import {Row, Cell} from '../../components/Grid'
+import {FormikField as Input} from '../../components/Input'
+import {FormikField as TextArea} from '../../components/TextArea'
+import Button from '../../components/Button'
+import Link from '../../components/StylableLink'
+import UnstyledMap from '../../components/Map'
+import meta from './index.json'
+
+
+const MapWrapper = styled.div`
+	position: relative;
+	margin-top: 2rem;
+	${above.md`
+		margin-top: 6rem;
+	`};
+`
+
+const MapLabel = styled(Link)`
+	text-decoration: none;
+	color: currentColor;
+	display: inline-block;
+	display: inline-flex;
+	flex-direction: column;
+	padding: 1rem 0;
+	color: ${colors.white};
+	${above.md`
+		margin-top: 3rem;
+		padding: 2rem;
+		background: ${colors.base};
+		z-index: 1;
+		position: absolute;
+	`};
+`
+
+const Address = styled.div`
+	font-size: 1rem;
+	line-height: 1.5rem;
+	font-weight: 600;
+	color: ${colors.base22};
+`
+
+const City = styled(Address)`
+	font-weight: 300;
+`
+
+const MapZIP = styled.div`
+	font-size: 0.875rem;
+	font-weight: 400;
+	color: ${colors.base44};
+	line-height: 1.5rem;
+`
+
+const Map = styled(UnstyledMap)`
+	width: 100%;
+	height: 16rem;
+	${above.md`
+		height: 25rem;
+	`};
+`
+
+const validation = ({values}) => {
+	const errors = {}
+	if (!values.name) {
+		errors.name = 'Nome é obrigatório'
+	}
+	if (!values.message) {
+		errors.message = 'Mensagem é obrigatório'
+	}
+	if (!values.email) {
+		errors.email = 'Email é obrigatório'
+	} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+		errors.email = 'Email inválido'
+	}
+	return errors
+}
+
+function encode(data) {
+	return Object.keys(data)
+		.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+		.join('&')
+}
+
+
+const ContactPage = () => (
+	<div style={{background: colors.base, colors: colors.white}}>
+		<MetaTags title="Contato" />
+		<Navbar style={{position: 'fixed', top: 0, zIndex: 3}} dark={true} />
+		<AboutHero contact background={colors.base} color='rgba(255,255,255, 0.2)' style={{marginTop: '7rem'}} />
+		<Container>
+			<Row>
+				<Cell xs={12} md={8}>
+					<Form
+						name="contact"
+						data-netlify="true"
+						data-netlify-honeypot="honey"
+						style={{width: '100%'}}
+					>
+						<Input type="hidden" name="form-name" value="contact" />
+						<p hidden>
+							<Input name="honey" />
+						</p>
+						<Row>
+							<Cell xs={12} sm={6} md={12} lg={6}>
+								<Input color='white' name="name" label="Nome" required />
+							</Cell>
+							<Cell xs={12} sm={6} md={12} lg={6}>
+								<Input
+									color='white'
+									name="email"
+									label="Email"
+									type="text"
+									autoComplete="email"
+									autoCapitalize="off"
+									required
+								/>
+							</Cell>
+						</Row>
+						<TextArea color='white' name="message" label="Mensagem" />
+						<Button stretch style={{margin: '2rem 0'}}>
+							Enviar
+						</Button>
+					</Form>
+				</Cell>
+
+			</Row>
+		</Container>
+		<MapWrapper>
+			<Container>
+				{meta.firstLine &&
+					meta.secondLine &&
+					meta.zip && (
+						<MapLabel to="https://www.google.com.br/maps/place/Av.+Jos%C3%A9+de+Souza+Campos,+1073+-+Cambu%C3%AD,+Campinas+-+SP,+13025-320">
+							<Address>{meta.firstLine}</Address>
+							<City>{meta.secondLine}</City>
+							<MapZIP>{meta.zip}</MapZIP>
+						</MapLabel>
+					)}
+			</Container>
+			{meta.lat &&
+				meta.long && (
+					<Map coordinates={[meta.lat, meta.long]} zoom={[12, 16]} />
+				)}
+		</MapWrapper>
+	</div>
+)
+
+/* eslint-disable no-unused-vars */
+const enhance = compose(
+	withFormik({
+		isInitialValid: false,
+		mapPropsToValues: props => ({name: '', email: '', message: ''}),
+		validate: (values, props) => validation({values, props}),
+		handleSubmit: async (values, {setSubmitting}) => {
+			try {
+				await fetch('/', {
+					method: 'POST',
+					headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+					body: encode({...values, 'form-name': 'contact'}),
+				})
+				setSubmitting(false)
+				navigateTo('./sucesso')
+			} catch (error) {
+				alert(error)
+			}
+		},
+	}),
+)
+/* eslint-enable no-unused-vars */
+
+export default enhance(withLayout(ContactPage))

packages/campus-online-frontend/src/pages/contato/index.json

@@ -0,0 +1,7 @@
+{
+  "zip": "70910-900",
+  "secondLine": "Universidade de Brasília",
+  "firstLine": "Faculdade de Comunicação",
+  "long": "-15.760837",
+  "lat": "-47.8702936"
+}

packages/campus-online-frontend/src/pages/contato/sucesso.js

@@ -0,0 +1,93 @@
+import React from 'react'
+import styled from 'styled-components'
+import {colors} from '../../constants'
+import {above} from '../../utils/responsive'
+import {withLayout} from '../../components/Layout'
+import Navbar from '../../components/Navbar'
+import Container from '../../components/Container'
+import UnstyledMap from '../../components/Map'
+import UnstyledLink from '../../components/StylableLink'
+import meta from './index.json'
+
+const Wrapper = styled.div`
+	background: ${colors.base03};
+	position: relative;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	overflow: hidden;
+`
+
+const MapWrapper = styled.div`
+	position: absolute;
+	top: 0;
+	flex: 1;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+`
+
+const Map = styled(UnstyledMap)`
+	margin-top: 0;
+	width: 100vw;
+	flex: 1;
+`
+
+const Main = styled.div`
+	display: inline-block;
+	display: inline-flex;
+	flex-direction: column;
+	margin: 8rem 0;
+	padding: 1rem 2rem 1rem 0;
+	z-index: 2;
+	position: relative;
+	background: ${colors.base};
+	color: ${colors.base03};
+	${above.md`
+		padding: 2rem 4rem 2rem 0;
+	`} :before {
+		content: '';
+		position: absolute;
+		background: ${colors.base};
+		top: 0;
+		width: 100%;
+		width: 50vw;
+		right: 100%;
+		height: 100%;
+	}
+`
+
+const Link = styled(UnstyledLink)`
+	display: block;
+	color: ${colors.base44};
+	text-decoration: none;
+	line-height: 1;
+	padding: 0.25em 0;
+	${above.md`
+		font-size: 1.25rem;
+	`} :hover {
+		color: ${colors.white};
+	}
+`
+
+const SuccessPage = () => (
+	<Wrapper>
+		<Navbar style={{position: 'fixed', top: 0, zIndex: 3}} dark={true} />
+		<MapWrapper>
+			{meta.lat &&
+				meta.long && (
+					<Map coordinates={[meta.lat, meta.long]} zoom={[12, 16]} />
+				)}
+		</MapWrapper>
+		<Container>
+			<Main>
+				<div style={{fontSize: '1.5em', marginBottom: '0.25em'}}>
+					<h1>Mensagem enviada com sucesso!</h1>
+				</div>
+				<Link to="/">Voltar para Home</Link>
+			</Main>
+		</Container>
+	</Wrapper>
+)
+
+export default withLayout(SuccessPage)

packages/campus-online-frontend/static/admin/config.yml

@@ -107,3 +107,15 @@ collections:
               - {label: "Título", name: title, widget: string}
               - {label: "Texto", name: text, widget: text}
           - {label: "Corpo de texto", name: body, widget: markdown, required: false}
+
+      - name: contact
+        label: "Contato"
+        file: "packages/campus-online-frontend/src/pages/contato/index.json"
+        extension: "json"
+        format: "json"
+        fields:
+          - {label: "Endereço: Primeira linha", name: firstLine, widget: string, required: true}
+          - {label: "Endereço: Segunda linha", name: secondLine, widget: string, required: true}
+          - {label: "Endereço: CEP", name: zip, widget: string, required: true}
+          - {label: "Mapa: Latitude", name: lat, widget: number, valueType: float, required: true}
+          - {label: "Mapa: Longitude", name: long, widget: number, valueType: float, required: true}