Changes to contact form (#468)

Author: DennisSimon

api/contact.ts

@@ -27,7 +27,7 @@ export default async function handlerAsync(req: VercelRequest, res: VercelRespon
         role,
         currentTradingVolume,
         isApplicationLive,
-        // productOfInterest,
+        productOfInterest,
         chainOfInterest,
         usageDescription,
         timelineForIntegration,
@@ -42,12 +42,12 @@ export default async function handlerAsync(req: VercelRequest, res: VercelRespon
         last_name: lastName,
         email,
         website: linkToProductOrWebsite,
+        Website: linkToProductOrWebsite,
         company: companyName,
         '00N8c00000drpGS': typeOfBusiness,
         '00N8c00000drpLI': role,
         '00N8c00000drpLS': currentTradingVolume,
         '00N8c00000drpLm': `${isApplicationLive}`,
-        // '00N8c00000drpLw': productOfInterest,
         '00N8c00000drr36': chainOfInterest,
         '00N8c00000ds8KX': timelineForIntegration,
         '00N8c00000drpgB': usageDescription,
@@ -56,12 +56,17 @@ export default async function handlerAsync(req: VercelRequest, res: VercelRespon
         '00N8c00000drvT8': referral,
     };
 
+    const bodyInit = new URLSearchParams(payload as { [s: string]: string });
+    for (const product of productOfInterest.split(',')) {
+        bodyInit.append('00N8c00000drpLw', product);
+    }
+
     await fetch('https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: new URLSearchParams(payload as { [s: string]: string }),
+        body: bodyInit,
     });
 
     return res.send('Created successfully');

ts/components/modals/modal_contact.tsx

@@ -12,8 +12,6 @@ import { GlobalStyle } from 'ts/constants/globalStyle';
 import { colors } from 'ts/style/colors';
 import { utils } from 'ts/utils/utils';
 
-// const products = ['0x Swap API'] as const;
-
 const timelineForIntegrationOptions = [
     'I’ve already integrated!',
     '0-3 months',
@@ -81,7 +79,7 @@ export class ModalContact extends React.Component<Props> {
         isApplicationLive: false,
         currentTradingVolume: '0',
         link: '',
-        // productOfInterest: '0x Swap API',
+        productOfInterest: [] as string[],
         chainOfInterest: '',
         chainOfInterestOther: '',
         usageDescription: '',
@@ -203,7 +201,7 @@ export class ModalContact extends React.Component<Props> {
                 <InputRow>
                     <Input
                         name="companyName"
-                        label="Name of Company"
+                        label="Company Name"
                         type="text"
                         value={this.state.companyName}
                         required={true}
@@ -270,29 +268,55 @@ export class ModalContact extends React.Component<Props> {
                 <InputRow>
                     <Input
                         name="linkToProductOrWebsite"
-                        label="Link to Product or Website"
+                        label="Company Website"
                         type="text"
                         value={this.state.linkToProductOrWebsite}
                         required={false}
                         errors={errors}
                         onChange={this._makeOnChangeHandler('linkToProductOrWebsite')}
                     />
                 </InputRow>
-                {/* <InputRow>
-                    <GenericDropdown
-                        label="Which Products are you interested in?"
-                        name="productOfInterest"
-                        items={products}
-                        defaultValue={this.state.productOfInterest}
-                        onItemSelected={(selectedProducts) => {
-                            this.setState({ productOfInterest: selectedProducts });
+                <InputRow>
+                    <StyledSpan>Which Products are you interested in?</StyledSpan>
+                </InputRow>
+                <InputRow>
+                    <CheckBoxInput
+                        label="0x API"
+                        isSelected={this.state.productOfInterest.includes('0x Swap API')}
+                        onClick={() => {
+                            if (this.state.productOfInterest.includes('0x Swap API')) {
+                                this.setState({
+                                    productOfInterest: this.state.productOfInterest.filter(
+                                        (item) => item !== '0x Swap API',
+                                    ),
+                                });
+                            } else {
+                                this.setState({ productOfInterest: [...this.state.productOfInterest, '0x Swap API'] });
+                            }
+                        }}
+                    />
+                    <CheckBoxInput
+                        label="Data API (beta)"
+                        isSelected={this.state.productOfInterest.includes('Data API (beta)')}
+                        onClick={() => {
+                            if (this.state.productOfInterest.includes('Data API (beta)')) {
+                                this.setState({
+                                    productOfInterest: this.state.productOfInterest.filter(
+                                        (item) => item !== 'Data API (beta)',
+                                    ),
+                                });
+                            } else {
+                                this.setState({
+                                    productOfInterest: [...this.state.productOfInterest, 'Data API (beta)'],
+                                });
+                            }
                         }}
                     />
-                </InputRow> */}
+                </InputRow>
                 <InputRow>
                     <Input
                         name="usageDescription"
-                        label="How do you plan to use our products?"
+                        label="How do you plan to use our products? Is there anything else you’d like to discuss?"
                         type="textarea"
                         value={this.state.usageDescription}
                         required={false}
@@ -385,6 +409,7 @@ export class ModalContact extends React.Component<Props> {
             usageDescription,
             referral,
             isApiKeyRequired,
+            productOfInterest,
         } = this.state;
 
         const body = {
@@ -403,6 +428,7 @@ export class ModalContact extends React.Component<Props> {
             usageDescription,
             referral,
             isApiKeyRequired: `${isApiKeyRequired}`,
+            productOfInterest: productOfInterest.join(','),
         };
 
         await fetch('/api/contact', {