Newsletter form

Author: kristoferlund

.gitignore

@@ -1,5 +1,10 @@
 .next/
+out/
 node_modules/
+
 /npm-debug.log
 .DS_Store
-out/
+.env
+
+# Local Netlify folder
+.netlify

components/NewsletterForm.js

@@ -11,7 +11,7 @@ const NewletterForm = () => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    const url = "https://tec-web.netlify.app/.netlify/functions/newsletter";
+    const url = "/.netlify/functions/newsletter";
     const requestOptions = {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -25,7 +25,6 @@ const NewletterForm = () => {
       .catch((error) => {
         setSubmitted(true);
         setSuccess(false);
-        console.log("Form submit error", error);
       });
   };
 
@@ -46,13 +45,13 @@ const NewletterForm = () => {
         <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row">
           <input
             type="email"
-            class="p-4 border-t mr-0 border-b border-l text-gray-300 border-white bg-gray-800 uppercase font-semibold flex-grow mb-5 sm:mb-0 sm:w-auto"
+            className="flex-grow p-4 mb-5 mr-0 font-semibold text-gray-300 uppercase bg-gray-800 border-t border-b border-l border-white sm:mb-0 sm:w-auto"
             placeholder="Your email address"
             onChange={handleEmailChange}
             value={email}
           />
           <button
-            class="px-8 bg-white text-gray-800 font-semibold p-4 uppercase"
+            className="p-4 px-8 font-semibold text-gray-800 uppercase bg-white"
             type="submit"
           >
             Subscribe

functions/newsletter/newsletter.js

@@ -5,13 +5,41 @@ exports.handler = async (event, context) => {
       return { statusCode: 400, body: null };
     }
 
-    const Hubspot = require("hubspot");
-    const hubspot = new Hubspot({ apiKey: process.env.HUBSPOT_KEY });
     const body = JSON.parse(event.body);
-    const contact = await hubspot.contacts.createOrUpdate(body.form.email);
+    const contactObj = {
+      properties: {
+        email: body.email,
+      },
+    };
 
-    return { statusCode: 200, body: JSON.stringify({ success: true }) };
+    const hubspot = require("@hubspot/api-client");
+    const hubspotClient = new hubspot.Client({
+      apiKey: process.env.HUBSPOT_KEY,
+    });
+
+    const createResponse = await hubspotClient.crm.contacts.basicApi.create(
+      contactObj
+    );
+
+    console.log(`Created contact, email: ${body.email}`);
+
+    return {
+      statusCode: 200,
+      body: "Contact created",
+    };
   } catch (err) {
-    return { statusCode: 500, body: err.toString() };
+    const get = require("lodash/get");
+    const statusCode = get(err, "response.statusCode", false);
+
+    if (!statusCode) {
+      console.log(`Error creating contact: ${err.toString()}`);
+      return { statusCode: 500, body: err.toString() };
+    }
+
+    const body = get(err, "response.body.message", false);
+
+    console.log(`Error creating contact, code: ${statusCode} message: ${body}`);
+
+    return { statusCode, body };
   }
 };