Implement separate build step for contact form serverless function (#474)

* add debug flag to contact form

* add node-fetch types

* add separate tsconfig and package.json

* Empty commit to trigger deploy

* downgrade node-fetch to ^2.6.0

* disable debug

Author: DennisSimon

api/contact.ts

@@ -3,6 +3,9 @@ import fetch from 'node-fetch';
 
 import { validateContactForm } from './_utils';
 
+const DEBUG_SALESFORCE = false as const;
+const DEBUG_EMAIL = '' as const;
+
 // tslint:disable-next-line:no-default-export
 export default async function handlerAsync(req: VercelRequest, res: VercelResponse): Promise<VercelResponse> {
     const { body } = req;
@@ -59,6 +62,10 @@ export default async function handlerAsync(req: VercelRequest, res: VercelRespon
     for (const product of productOfInterest.split(',')) {
         bodyInit.append('00N8c00000drpLw', product);
     }
+    if (DEBUG_SALESFORCE) {
+        bodyInit.append('debug', '1');
+        bodyInit.append('debugEmail', DEBUG_EMAIL);
+    }
 
     await fetch('https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8', {
         method: 'POST',

api/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@0x/website",
+    "version": "1.1.0",
+    "engines": {
+        "node": ">16"
+    },
+    "private": true,
+    "description": "0x website serverless functions",
+    "devDependencies": {
+        "@vercel/node": "^2.8.17",
+        "typescript": "^4.9.5"
+    },
+    "dependencies": {
+        "node-fetch": "^2.6.0"
+    },
+    "scripts": {
+        "vercel-build": "tsc --project tsconfig.json"
+    }
+}

api/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "esModuleInterop": true,
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "lib": ["es6"],
+        "rootDir": "./",
+        "skipLibCheck": true
+    },
+    "include": ["./*.ts"],
+    "exclude": ["../node_modules", "node_modules"]
+}

api/yarn.lock

@@ -159,6 +159,7 @@
         "@types/material-ui": "^0.20.0",
         "@types/mersenne-twister": "^1.1.2",
         "@types/node": "*",
+        "@types/node-fetch": "2",
         "@types/numeral": "^0.0.26",
         "@types/query-string": "^5.1.0",
         "@types/rc-slider": "^8.6.0",
@@ -226,5 +227,8 @@
         "hooks": {
             "pre-push": "yarn pre_push"
         }
+    },
+    "volta": {
+        "node": "14.21.2"
     }
 }

package.json

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useWindowSize } from 'react-use';
+// import { useWindowSize } from 'react-use';
 import styled, { ThemeProvider } from 'styled-components';
 
 import { Footer } from 'ts/components/footer';
@@ -33,7 +33,7 @@ export const SiteWrap: React.FC<ISiteWrapProps> = (props) => {
     }, []);
 
     const Header = headerComponent || MainHeader;
-    const { width: windowWidth } = useWindowSize();
+    // const { width: windowWidth } = useWindowSize();
     // const isSmallScreen = windowWidth < 700;
 
     const toggleMobileNav = React.useCallback(() => setIsMobileNavOpen(!isMobileNavOpen), [isMobileNavOpen]);

ts/components/siteWrap.tsx

@@ -2889,6 +2889,14 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
 
+"@types/node-fetch@2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.2.tgz#d1a9c5fd049d9415dce61571557104dec3ec81da"
+  integrity sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==
+  dependencies:
+    "@types/node" "*"
+    form-data "^3.0.0"
+
 "@types/node@*":
   version "10.9.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897"