{"version":3,"sources":["webpack:///./src/components/hero.jsx","webpack:///./src/components/spinner.jsx","webpack:///./src/components/contactForm.jsx","webpack:///./src/pages/kontakt.jsx"],"names":["hero","css","common","breakpointMedium","Color","colors","seaGreen","hex","deepSeaBlue","white","Hero","props","className","customContent","title","subTitle","primaryAction","useAnchorTag","primaryUseAnchorTag","href","primaryActionHref","type","size","text","secondaryAction","secondaryUseAnchorTag","secondaryActionHref","onClick","secondaryActionOnClick","style","customBackgroundStyles","styles","Spinner","ContactForm","updateEmail","event","setState","email","target","value","updatePhone","phone","updateMessage","message","submitForm","preventDefault","formValidationResult","validateForm","state","error","validationError","validationErrorMessage","sendingMessage","request","XMLHttpRequest","addEventListener","handleResponse","open","send","e","status","responseText","toUpperCase","messageSent","messageFailedToSend","length","render","this","componentStyle","onSubmit","htmlFor","id","placeholder","onChange","maxLength","nativeType","React","Component","seaBlue","red","container","KontaktPage"],"mappings":"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","file":"component---src-pages-kontakt-jsx-6ff64e45ceb193163f51.js","sourcesContent":["import React from 'react'\r\nimport Color from 'color'\r\n// import { css } from 'emotion'\r\nimport { css } from '@emotion/core'\r\n\r\n// Components\r\nimport Button from '../components/button'\r\nimport colors from '../styles/colors'\r\nimport typography from '../styles/typography'\r\nimport common from '../styles/common'\r\n\r\nconst Hero = props => (\r\n
\r\n
\r\n {props.customContent && props.customContent}\r\n {!props.customContent && (\r\n
\r\n

{props.title}

{' '}\r\n

{props.subTitle}

\r\n
\r\n )}\r\n
\r\n {props.primaryAction && (\r\n \r\n )}\r\n {props.secondaryAction && (\r\n \r\n )}\r\n
\r\n
\r\n\r\n
\r\n
\r\n)\r\n\r\nfunction hero() {\r\n return css`\r\n position: relative;\r\n z-index: 0;\r\n text-align: center;\r\n margin-bottom: -70px;\r\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\r\n\r\n @media screen and (min-width: ${common.breakpointMedium + 1}px) {\r\n min-height: 550px;\r\n padding-top: 160px; \r\n padding-bottom: 160px; \r\n }\r\n @media screen and (max-width: ${common.breakpointMedium}px) {\r\n min-height: 400px;\r\n padding-top: 140px; \r\n padding-bottom: 160px; \r\n }\r\n\r\n /* Content */\r\n div.content-container {\r\n position: relative;\r\n max-width: 800px;\r\n width: 90%;\r\n margin: 0 auto;\r\n }\r\n\r\n /* Background */\r\n div.background-fill {\r\n z-index: -1;\r\n position: absolute;\r\n top: calc(-35px + -1vw);\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n transform: skewY(-2.25deg);\r\n background: linear-gradient(\r\n -150deg,\r\n ${Color(colors.seaGreen).hex()},\r\n ${Color(colors.deepSeaBlue).hex()}\r\n );\r\n /* background: linear-gradient(\r\n 30deg,\r\n ${colors.seaGreen},\r\n ${colors.deepSeaBlue}\r\n ); */\r\n }\r\n\r\n /* Types */\r\n .content-container h1 {\r\n /* ${typography.mainHeading}; */\r\n color: ${colors.white};\r\n }\r\n .content-container h3 {\r\n /* ${typography.tertiaryHeading}; */\r\n color: ${colors.white};\r\n }\r\n\r\n a, button {\r\n margin: 0 0.5rem;\r\n }\r\n `\r\n}\r\n\r\nexport default Hero\r\n","import React from 'react'\r\nimport { css } from '@emotion/core'\r\nimport colors from '../styles/colors'\r\n\r\nconst Spinner = props => (\r\n
\r\n
\r\n
\r\n)\r\n\r\nfunction styles() {\r\n return css`\r\n display: inline-block;\r\n margin: 0.5rem;\r\n margin-bottom: calc(0.5rem + 4px);\r\n vertical-align: middle;\r\n\r\n .spinner {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n border-radius: 50%;\r\n border: 3px solid ${colors.seaGreen};\r\n border-color: ${colors.seaGreen} ${colors.seaGreen} ${colors.seaGreen}\r\n transparent;\r\n animation: spin infinite linear 0.8s;\r\n }\r\n\r\n @keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n `\r\n}\r\n\r\nexport default Spinner\r\n","import React from 'react'\r\n\r\n// Components\r\nimport Button from './button'\r\nimport Spinner from './spinner'\r\n\r\n// Style\r\n// import { css } from 'emotion'\r\nimport { css } from '@emotion/core'\r\nimport colors from '../styles/colors'\r\nimport common from '../styles/common'\r\n\r\nimport { DecagramCheckIcon } from 'mdi-react'\r\nimport { AlertDecagramIcon } from 'mdi-react'\r\n\r\nclass ContactForm extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n email: '',\r\n phone: '',\r\n message: '',\r\n\r\n sendingMessage: false,\r\n messageSent: false,\r\n messageFailedToSend: false,\r\n\r\n validationError: false,\r\n validationErrorMessage: '',\r\n }\r\n }\r\n\r\n updateEmail = event => {\r\n this.setState({ email: event.target.value })\r\n }\r\n\r\n updatePhone = event => {\r\n this.setState({ phone: event.target.value })\r\n }\r\n\r\n updateMessage = event => {\r\n this.setState({ message: event.target.value })\r\n }\r\n\r\n submitForm = event => {\r\n event.preventDefault()\r\n let formValidationResult = this.validateForm(\r\n this.state.email,\r\n this.state.message\r\n )\r\n if (formValidationResult.error) {\r\n this.setState({\r\n validationError: true,\r\n validationErrorMessage: formValidationResult.message,\r\n })\r\n return\r\n }\r\n\r\n this.setState({ sendingMessage: true })\r\n let request = new XMLHttpRequest()\r\n request.addEventListener('load', this.handleResponse)\r\n request.open(\r\n 'GET',\r\n `/mail-service.asp?type=message&email=${this.state.email}&phone=${\r\n this.state.phone\r\n }&message=${this.state.message}`\r\n )\r\n request.send()\r\n }\r\n\r\n handleResponse = e => {\r\n if (\r\n e.target.status === 200 &&\r\n e.target.responseText.toUpperCase() === 'OK'\r\n ) {\r\n this.setState({ sendingMessage: false, messageSent: true })\r\n } else {\r\n this.setState({ sendingMessage: false, messageFailedToSend: true })\r\n }\r\n }\r\n\r\n validateForm = (email, message) => {\r\n if (!email) {\r\n return { error: true, message: 'Du mangler at tilføje din email' }\r\n }\r\n if (!message) {\r\n return { error: true, message: 'Du mangler at tilføje en besked' }\r\n }\r\n if (message.length > 1000) {\r\n return {\r\n error: true,\r\n message: 'Din besked er for lang. Du kan tilføje op til 1000 tegn',\r\n }\r\n }\r\n return { error: false }\r\n }\r\n\r\n render() {\r\n if (this.state.messageSent && !this.state.messageFailedToSend) {\r\n return (\r\n
\r\n \r\n

Din besked er afsendt

\r\n

\r\n Tak for din besked. Vi har sendt en kopi til din mail og kontakter\r\n dig hurtigst muligt.\r\n

\r\n
\r\n )\r\n } else if (this.state.messageFailedToSend) {\r\n return (\r\n
\r\n \r\n

Kunne ikke sende besked

\r\n

\r\n Der er sket en fejl med afsendelsen af din besked. Skriv til os på{' '}\r\n kontakt@toecho.dk i stedet.\r\n Vi beklager ulejligheden.\r\n

\r\n
\r\n )\r\n } else {\r\n return (\r\n
\r\n
\r\n {this.state.validationError && (\r\n
\r\n \r\n

{this.state.validationErrorMessage}

\r\n
\r\n )}\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {this.state.sendingMessage ? (\r\n

\r\n \r\n Sender besked..{' '}\r\n

\r\n ) : (\r\n \r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n )\r\n }\r\n }\r\n}\r\n\r\nfunction componentStyle() {\r\n return css`\r\n margin: 40px 0 200px 0 !important;\r\n\r\n .col {\r\n vertical-align: top;\r\n\r\n &.left {\r\n padding-right: 1%;\r\n }\r\n &.right {\r\n padding-left: 1%;\r\n }\r\n\r\n @media screen and (max-width: ${common.breakpointMedium}px) {\r\n width: 100% !important;\r\n margin: 0;\r\n padding: 0;\r\n\r\n &.right,\r\n &.left {\r\n padding: 0;\r\n }\r\n }\r\n }\r\n\r\n input,\r\n textarea {\r\n margin: 0.5rem 0 1.25rem 0;\r\n\r\n &:focus {\r\n outline: 1px ${colors.seaBlue} solid;\r\n }\r\n }\r\n\r\n textarea {\r\n min-height: 118px;\r\n resize: vertical;\r\n }\r\n\r\n button {\r\n float: right;\r\n }\r\n\r\n .sending-message {\r\n padding-top: 7px; /* Prevents layout-jump since text is same height as button */\r\n }\r\n\r\n div.clearfix {\r\n clear: both;\r\n content: '';\r\n }\r\n\r\n &.message-sent {\r\n text-align: center;\r\n padding: 50px 0 50px 0;\r\n\r\n p {\r\n margin: 0 auto;\r\n max-width: 500px;\r\n }\r\n svg {\r\n width: 3rem;\r\n height: 3rem;\r\n fill: ${colors.seaGreen};\r\n }\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n border-bottom: 1px ${colors.seaGreen} dashed;\r\n color: ${colors.seaGreen};\r\n }\r\n\r\n .error-message {\r\n display: flex;\r\n\r\n svg,\r\n p {\r\n display: inline-block;\r\n color: ${colors.red};\r\n fill: ${colors.red};\r\n }\r\n }\r\n `\r\n}\r\n\r\nexport default ContactForm\r\n","import React from 'react'\r\nimport { css } from '@emotion/core'\r\nimport Helmet from 'react-helmet'\r\nimport Layout from '../components/layout'\r\n\r\n// Components\r\nimport Hero from '../components/hero'\r\nimport ContactForm from '../components/contactForm'\r\n\r\nconst KontaktPage = () => (\r\n \r\n \r\n Ekko App - Kontakt\r\n \r\n \r\n
\r\n

Skriv til os

\r\n \r\n
\r\n \r\n)\r\n\r\nfunction container() {\r\n return css`\r\n padding-top: 150px;\r\n\r\n p.lead {\r\n max-width: 800px;\r\n }\r\n `\r\n}\r\n\r\nexport default KontaktPage\r\n"],"sourceRoot":""}