Evaluation license form (#95)

Author: jakub-tldr

src/components/form/BookDemoForm/BookDemoForm.tsx

@@ -7,10 +7,13 @@ import MessageBottom from "../../alert/MessageBottom/MessageBottom";
 import { Button } from "../../buttons/Button/Button";
 
 type BookDemoType = {
-  first_name: string;
-  last_name: string;
+  company_name: string;
   email: string;
-  website_url: string;
+  vat_id: string;
+  country: string;
+  street_address: string;
+  town: string;
+  postal_code: string;
   tell_us_more: string;
 };
 
@@ -22,10 +25,13 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
   const [okMessage, setOkMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [values, setValues] = useState<BookDemoType>({
-    first_name: "",
-    last_name: "",
+    company_name: "",
     email: "",
-    website_url: "",
+    vat_id: "",
+    country: "",
+    street_address: "",
+    town: "",
+    postal_code: "",
     tell_us_more: "",
   });
 
@@ -35,18 +41,22 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
   };
 
   const handleInputChange = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
   ) => {
-    const { name, value } = event.target as HTMLInputElement | HTMLTextAreaElement;
+    const { name, value } = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
     setValues({ ...values, [name]: value });
   };
 
   const onSubmit = () => {
     const data = new FormData();
-    data.append("first_name", values.first_name);
-    data.append("last_name", values.last_name);
+    
+    data.append("company_name", values.company_name);
     data.append("email", values.email);
-    data.append("website_url", values.website_url);
+    data.append("vat_id", values.vat_id);
+    data.append("country", values.country);
+    data.append("street_address", values.street_address);
+    data.append("town", values.town);
+    data.append("postal_code", values.postal_code);
     data.append(
       "tell_us_more",
       `${values.tell_us_more} \n\nform_source:${window.location.pathname + window.location.search + window.location.hash}`,
@@ -77,29 +87,44 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
         }}
       >
         <div className="double-inputs">
-          <label htmlFor="first_name">
-            First name
-            <input type="text" required name="first_name" onChange={handleInputChange} />
+          <label htmlFor="company_name">
+            Company name
+            <input type="text" required name="company_name" onChange={handleInputChange} />
           </label>
-          <label htmlFor="last_name">
-            Last name
-            <input type="text" required name="last_name" onChange={handleInputChange} />
-          </label>
-        </div>
-        <div className="double-inputs">
           <label htmlFor="email">
             Email
             <input type="email" required name="email" onChange={handleInputChange} />
           </label>
-          <label htmlFor="website_url">
-            Company website URL
-            <input type="text" required name="website_url" onChange={handleInputChange} />
+        </div>
+        <div className="double-inputs">
+          <label htmlFor="vat_id">
+            Company VAT ID or registration number
+            <input type="text" required name="vat_id" onChange={handleInputChange} />
+          </label>
+          <label htmlFor="country">
+            Country
+            <input type="text" required name="country" onChange={handleInputChange} />
+          </label>
+        </div>
+        <div className="triple-inputs">
+          <label htmlFor="street_address">
+            Street address
+            <input type="text" required name="street_address" onChange={handleInputChange} />
+          </label>
+          <label htmlFor="town">
+            Town
+            <input type="text" required name="town" onChange={handleInputChange} />
+          </label>
+          <label htmlFor="postal_code">
+            Postal code
+            <input type="text" required name="postal_code" onChange={handleInputChange} />
           </label>
         </div>
         <label className="single-input" htmlFor="tell_us_more">
           Anything else you wish to tell us?
           <textarea rows={7} name="tell_us_more" onChange={handleInputChange}></textarea>
         </label>
+
         <div className="button">
           <Button text={submit_text} type="submit" />
         </div>

src/components/form/BookDemoForm/style.scss

@@ -22,6 +22,22 @@
     }
   }
 
+  select {
+    width: 100%;
+    height: 38px;
+    border: 1px solid var(--text-body-primary, #222);
+    transition: border-color 0.5s ease-out;
+    background-color: white;
+    padding: 0 8px;
+
+    @include typography(paragraph);
+    color: #222;
+    &:focus {
+      outline: 2px solid var(--surface-main-primary);
+      border-color: var(--surface-main-primary);
+    }
+  }
+
   label {
     display: flex;
     flex-direction: column;
@@ -50,8 +66,16 @@
     align-self: stretch;
   }
 
+  .triple-inputs {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    align-self: stretch;
+  }
+
   @include break-down(md) {
-    .double-inputs {
+    .double-inputs,
+    .triple-inputs {
       display: flex;
       flex-direction: column;
       align-items: flex-start;

src/pages/pricing.astro

@@ -81,7 +81,7 @@ const tags = [
     <div id="get-evaluation-license" class="sla-support-wrapper">
       <div id="sla-support">
         <div class="left">
-          <h2>Evaluation license</h2>
+          <h2 id="license">Request offline or evalution license</h2>
           <p class="sla-description">
             For <strong>evaluations</strong> or proof-of-concept testing, we're happy to provide
             a 14-day free of charge evaluation license. For convenience, please provide your company information (name, address and Tax Identification Number) in the form below.