send mail through function

Author: svenefftinge

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "6.10.3"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-object-assign",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}

.gitignore

@@ -113,3 +113,7 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+# Local Netlify folder
+.netlify
+lambda

netlify.toml

@@ -1,3 +1,7 @@
+[build]
+  command = "yarn build"
+  functions = "lambda"
+
 [[redirects]]
   from = "/gitpod-business.html"
   to = "/pricing/#enterprise"

package-lock.json

@@ -8,7 +8,7 @@
   ],
   "main": "n/a",
   "scripts": {
-    "build": "cp -r src/docs/release-notes/* static/release-notes/ && gatsby build",
+    "build": "cp -r src/docs/release-notes/* static/release-notes/ && gatsby build && npx netlify-lambda build src/functions",
     "clean": "rimraf public",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "dev": "env-cmd -f .env.development gatsby develop",
@@ -62,15 +62,19 @@
     "react-helmet": "^6.0.0",
     "react-modal-video": "^1.2.3",
     "react-tweet-embed": "^1.2.2",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.3",
+    "@sendgrid/mail": "^7.2.6"
   },
   "devDependencies": {
+    "@types/aws-lambda": "^8.10.63",
     "@types/classnames": "^2.2.10",
     "@types/node": "^14.0.6",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.0.0",
     "gh-pages": "^3.0.0",
+    "netlify-cli": "^2.64.1",
+    "netlify-lambda": "^2.0.1",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
     "tslint": "^6.1.2",

package.json

@@ -0,0 +1,63 @@
+import { APIGatewayEvent, Context } from 'aws-lambda';
+import * as client from '@sendgrid/mail';
+
+export interface Email {
+    to?: {
+        email: string,
+        name?: string
+    },
+    from: {
+        email: string,
+        name?: string
+    }
+    subject: string,
+    message: string
+}
+
+async function sendEmail(client: client.MailService, email: Email): Promise<{statusCode: number, errorMessage?: string}> {
+    const data: client.MailDataRequired = {
+        from: email.from,
+        subject: email.subject,
+        to: [
+            email.to!
+        ],
+        content: [
+            {
+                type: "text/plain",
+                value: email.message
+            }
+        ]
+    }
+    try {
+        await client.send(data);
+        return {
+            statusCode: 200
+        }
+    } catch (e) {
+        return {
+            statusCode: 500,
+            errorMessage: `Error : ${JSON.stringify(e)}`
+        }
+    }
+}
+
+exports.handler = function (event: APIGatewayEvent, _: Context, callback: any) {
+
+    console.log(JSON.stringify(event.body));
+    const SENDGRID_API_KEY = process.env.SENDGRID_API_KEY || 'no-key';
+    const SENDGRID_TO_EMAIL = process.env.SENDGRID_TO_EMAIL || '[email protected]';
+
+    const email: Email = JSON.parse(event.body!) as Email;
+
+    email.to = {
+        email: SENDGRID_TO_EMAIL,
+        name: 'Gitpod'
+    }
+    
+    client.setApiKey(SENDGRID_API_KEY);
+    sendEmail(
+        client,
+        email
+    ).then(response => callback(null, { statusCode: response.statusCode, body: email + " added" }))
+        .catch(err => callback(err, null));
+};

src/functions/submit-form.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import IndexLayout from '../layouts'
 import { sizes, borders } from '../styles/variables'
 import SubmissionSucess from '../components/SubmissionSucess'
+import { Email } from '../functions/submit-form'
 
 const StyledContactPage = styled.div`
     /* --------------------------------------------- */
@@ -74,15 +75,6 @@ const StyledContactPage = styled.div`
     }
 `
 
-export function encode(data: { [k: string]: string | number | boolean | null | undefined }) {
-  return Object.keys(data)
-    .map((key) => {
-      const value = data[key]
-      return encodeURIComponent(key) + '=' + (value === null || value === undefined ? 'null' : encodeURIComponent(value))
-    })
-    .join('&')
-}
-
 const subjects: string[] = [
   'I have a question regarding Gitpod Self-Hosted',
   'I have a question regarding Gitpod Education',
@@ -95,7 +87,7 @@ export default function ContactPage(props: any) {
   const [state, setState] = React.useState<{
     name?: string
     consent?: boolean
-    eMail?: string
+    email?: string
     subject?: string
     message?: string
     messageSent?: boolean
@@ -130,7 +122,7 @@ export default function ContactPage(props: any) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    if (!state.eMail) {
+    if (!state.email) {
       setState({
         ...state,
         errorMessage: 'Please provide a valid email address so that we can reply to you.'
@@ -151,14 +143,19 @@ export default function ContactPage(props: any) {
       })
       return
     }
-    const form = e.target as HTMLFormElement
-    fetch('/contact/', {
+
+    const email: Email = {
+        from: {
+            email: state.email,
+            name: state.name
+        },
+        subject: state.subject + '  (from ' + state.email + ')',
+        message: state.message
+    };
+
+    fetch('/.netlify/functions/submit-form', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: encode({
-        'form-name': form.getAttribute('name'),
-        ...state
-      })
+      body: JSON.stringify(email)
     })
       .then(() =>
         setState({
@@ -179,8 +176,6 @@ export default function ContactPage(props: any) {
               className="form"
               method="POST"
               name="Contact"
-              data-netlify="true"
-              data-netlify-honeypot="bot-field"
               onSubmit={handleSubmit}
             >
               <input type="hidden" name="form-name" value="contact" />
@@ -206,15 +201,15 @@ export default function ContactPage(props: any) {
                   id="Name"
                   onChange={handleChange}
                 />
-                <label className="visually-hidden" htmlFor="eMail">
+                <label className="visually-hidden" htmlFor="email">
                   E-Mail
                 </label>
                 <input
-                  name="eMail"
+                  name="email"
                   className="form__input form__input--half"
                   type="email"
                   placeholder="E-mail"
-                  id="eMail"
+                  id="email"
                   onChange={handleChange}
                 />
                 <div className="subject">

src/pages/contact.tsx

@@ -4,9 +4,10 @@ import styled from '@emotion/styled'
 import { borders, colors } from '../styles/variables'
 import { countryList } from '../contents/license-key'
 import { isEurope } from '../utils/helpers'
-import { encode } from './contact'
 import SubmissionSucess from '../components/SubmissionSucess'
 import { Link } from 'gatsby'
+import { Email } from '../functions/submit-form';
+
 const StyledEnterpriseLicensePage = styled.div`
   form {
     padding: 5rem 0;
@@ -260,14 +261,30 @@ const EnterpriseLicensePage = () => {
       return
     }
 
-    const form = e.target as HTMLFormElement
-    fetch('/enterprise-license/', {
+    const email: Email = {
+        from: {
+            email: state.email,
+            name: state.firstName + ' ' + state.lastName
+        },
+        subject: 'Requesting a professional self-hosted license     (from ' + state.email + ')',
+        message: `
+    ${state.company}
+    ${state.firstName} ${state.lastName}
+    ${state.address}
+    ${state.postalCode} ${state.city}
+    ${state.country}
+
+    domain: ${state.domain}
+    seats: ${state.seats}
+    employees: ${state.noOfEmployees}
+
+    Message:
+    ${state.message}
+`
+    };
+    fetch('/.netlify/functions/submit-form', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: encode({
-        'form-name': form.getAttribute('name'),
-        ...state
-      })
+      body: JSON.stringify(email)
     })
       .then(() =>
         setState({