[Frontend] Company size field on request form

CHANGELOG.md

@@ -4,8 +4,13 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
 - [BACKEND] Add company size field
 
+### Changed
+
+### Removed
 ## [1.2.1 - 13/01/2022]
 
 ### Changed
@@ -25,8 +30,6 @@ All notable changes to this project will be documented in this file.
 - [FRONTEND] Change NIST logo to be smaller in larger device
 - [FRONTEND] Add Partner Solutions Carousel
 
-### Removed
-
 ## [1.1.1 - 30/12/2021]
 
 ### Added

frontend/app/components/elements/SelectBox/SelectBox.tsx

@@ -28,6 +28,9 @@ export const SelectBox = ({
           rounded focus:outline-none focus:border-primary-500 font-serif bg-white text-sm sm:text-base"
           {...register(id, registerOptions)}
           {...otherProps}>
+          <option value="" disabled selected hidden>
+            Select option
+          </option>
           {options.map((opt) => (
             <option key={opt.value} value={opt.value}>
               {opt.name}

frontend/app/components/modules/RequestDemoForm/RequestDemoForm.tsx

@@ -11,10 +11,12 @@ import { setCookie } from 'nookies'
 import { useState } from 'react'
 import { SelectBox } from '../../elements/SelectBox/SelectBox'
 import data from './industry.json'
+import company_data from './company_size.json'
 import { Label } from '@/elements/Label/Label'
 import { Modal } from '@/elements/Modal/Modal'
 
 const Industries = data.Industries
+const { company_size_list } = company_data
 
 type Props = {
   onSuccess: () => void
@@ -26,6 +28,7 @@ type FormData = {
   company: string
   job_title: string
   industry: string
+  company_size: string
   terms_and_conditions: boolean
 }
 
@@ -150,19 +153,7 @@ export const RequestDemoForm = ({ onSuccess }: Props) => {
         }}
         errors={errors}
       />
-      <TextField
-        id="company"
-        label="Company"
-        placeholder="Company name"
-        type="text"
-        register={register}
-        registerOptions={{
-          required: 'required',
-          minLength: { value: 5, message: 'minimum length is 5' }
-        }}
-        errors={errors}
-      />
-      <div className="flex flex-col md:flex-row w-full justify-between ">
+      <div className="flex flex-col md:flex-row w-full justify-between">
         <div className="md:w-[47%]">
           <TextField
             id="job_title"
@@ -177,6 +168,32 @@ export const RequestDemoForm = ({ onSuccess }: Props) => {
             errors={errors}
           />
         </div>
+        <div className="md:w-[47%]">
+          <TextField
+            id="company"
+            label="Company Name"
+            placeholder="Company name"
+            type="text"
+            register={register}
+            registerOptions={{
+              required: 'required',
+              minLength: { value: 5, message: 'minimum length is 5' }
+            }}
+            errors={errors}
+          />
+        </div>
+      </div>
+      <div className="flex flex-col md:flex-row w-full justify-between mb-2">
+        <div className="md:w-[47%]">
+          <SelectBox
+            id="company_size"
+            label="Company Size"
+            options={company_size_list}
+            register={register}
+            registerOptions={{ required: 'required' }}
+            errors={errors}
+          />
+        </div>
         <div className="md:w-[47%]">
           <SelectBox
             id="industry"

frontend/app/components/modules/RequestDemoForm/company_size.json

@@ -0,0 +1,9 @@
+{
+  "company_size_list": [
+    { "name": "<50", "value": "<50" },
+    { "name": "50-100", "value": "50-100" },
+    { "name": "101-500", "value": "101-500" },
+    { "name": "501-1000", "value": "501-1000" },
+    { "name": ">1000", "value": ">1000" }
+  ]
+}

frontend/app/components/modules/RequestDemoForm/industry.json

@@ -1,6 +1,5 @@
 {
     "Industries": [
-        {"name":"Your company industry", "value":""},
         {"name":"Agriculture and Mining", "value":"agriculture_and_mining"},
         {"name":"BUMD", "value":"bumd"},
         {"name":"BUMN", "value":"bumn"},