Skip to content

Commit 874fe22

Browse files
jakub-tldrjakub-tldr
authored
splitted demo form into separate ones (#101)
1 parent dda4b59 commit 874fe22

File tree

3 files changed

+172
-51
lines changed

3 files changed

+172
-51
lines changed

‎src/components/form/BookDemoForm/BookDemoForm.tsx‎

Lines changed: 28 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,10 @@ import MessageBottom from "../../alert/MessageBottom/MessageBottom";
77
import { Button } from "../../buttons/Button/Button";
88

99
type BookDemoType = {
10-
company_name: string;
10+
first_name: string;
11+
last_name: string;
1112
email: string;
12-
vat_id: string;
13-
country: string;
14-
street_address: string;
15-
town: string;
16-
postal_code: string;
13+
website_url: string;
1714
tell_us_more: string;
1815
};
1916

@@ -25,13 +22,10 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
2522
const [okMessage, setOkMessage] = useState(false);
2623
const [errorMessage, setErrorMessage] = useState(false);
2724
const [values, setValues] = useState<BookDemoType>({
28-
company_name: "",
25+
first_name: "",
26+
last_name: "",
2927
email: "",
30-
vat_id: "",
31-
country: "",
32-
street_address: "",
33-
town: "",
34-
postal_code: "",
28+
website_url: "",
3529
tell_us_more: "",
3630
});
3731

@@ -41,26 +35,27 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
4135
};
4236

4337
const handleInputChange = (
44-
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
38+
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
4539
) => {
46-
const { name, value } = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
40+
const { name, value } = event.target as HTMLInputElement | HTMLTextAreaElement;
4741
setValues({ ...values, [name]: value });
4842
};
4943

5044
const onSubmit = () => {
5145
const data = new FormData();
52-
53-
data.append("company_name", values.company_name);
46+
5447
data.append("email", values.email);
55-
data.append("vat_id", values.vat_id);
56-
data.append("country", values.country);
57-
data.append("street_address", values.street_address);
58-
data.append("town", values.town);
59-
data.append("postal_code", values.postal_code);
48+
data.append("website_url", values.website_url);
6049
data.append(
6150
"tell_us_more",
6251
`${values.tell_us_more} \n\nform_source:${window.location.pathname + window.location.search + window.location.hash}`,
6352
);
53+
data.append("company_name",values.first_name+" "+values.last_name);
54+
data.append("vat_id", "");
55+
data.append("country", "");
56+
data.append("street_address", "");
57+
data.append("town", "");
58+
data.append("postal_code", "");
6459

6560
fetch("https://pkgs.defguard.net/api/customer/signup", {
6661
mode: "no-cors",
@@ -87,44 +82,29 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
8782
}}
8883
>
8984
<div className="double-inputs">
90-
<label htmlFor="company_name">
91-
Company name
92-
<input type="text" required name="company_name" onChange={handleInputChange} />
85+
<label htmlFor="first_name">
86+
First name
87+
<input type="text" required name="first_name" onChange={handleInputChange} />
9388
</label>
94-
<label htmlFor="email">
95-
Email
96-
<input type="email" required name="email" onChange={handleInputChange} />
89+
<label htmlFor="last_name">
90+
Last name
91+
<input type="text" required name="last_name" onChange={handleInputChange} />
9792
</label>
9893
</div>
9994
<div className="double-inputs">
100-
<label htmlFor="vat_id">
101-
Company VAT ID or registration number
102-
<input type="text" required name="vat_id" onChange={handleInputChange} />
103-
</label>
104-
<label htmlFor="country">
105-
Country
106-
<input type="text" required name="country" onChange={handleInputChange} />
107-
</label>
108-
</div>
109-
<div className="triple-inputs">
110-
<label htmlFor="street_address">
111-
Street address
112-
<input type="text" required name="street_address" onChange={handleInputChange} />
113-
</label>
114-
<label htmlFor="town">
115-
Town
116-
<input type="text" required name="town" onChange={handleInputChange} />
95+
<label htmlFor="email">
96+
Email
97+
<input type="email" required name="email" onChange={handleInputChange} />
11798
</label>
118-
<label htmlFor="postal_code">
119-
Postal code
120-
<input type="text" required name="postal_code" onChange={handleInputChange} />
99+
<label htmlFor="website_url">
100+
Company website URL
101+
<input type="text" required name="website_url" onChange={handleInputChange} />
121102
</label>
122103
</div>
123104
<label className="single-input" htmlFor="tell_us_more">
124105
Anything else you wish to tell us?
125106
<textarea rows={7} name="tell_us_more" onChange={handleInputChange}></textarea>
126107
</label>
127-
128108
<div className="button">
129109
<Button text={submit_text} type="submit" />
130110
</div>

‎src/components/form/BookDemoForm/BookEvaluationLicenseForm.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import "./style.scss";
2+
3+
import type { ChangeEvent } from "react";
4+
import { useState } from "react";
5+
6+
import MessageBottom from "../../alert/MessageBottom/MessageBottom";
7+
import { Button } from "../../buttons/Button/Button";
8+
9+
type BookDemoType = {
10+
company_name: string;
11+
email: string;
12+
vat_id: string;
13+
country: string;
14+
street_address: string;
15+
town: string;
16+
postal_code: string;
17+
tell_us_more: string;
18+
};
19+
20+
interface BookDemoFormProps {
21+
submit_text?: string;
22+
}
23+
24+
const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
25+
const [okMessage, setOkMessage] = useState(false);
26+
const [errorMessage, setErrorMessage] = useState(false);
27+
const [values, setValues] = useState<BookDemoType>({
28+
company_name: "",
29+
email: "",
30+
vat_id: "",
31+
country: "",
32+
street_address: "",
33+
town: "",
34+
postal_code: "",
35+
tell_us_more: "",
36+
});
37+
38+
const handleAlert = () => {
39+
setOkMessage(false);
40+
setErrorMessage(false);
41+
};
42+
43+
const handleInputChange = (
44+
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
45+
) => {
46+
const { name, value } = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
47+
setValues({ ...values, [name]: value });
48+
};
49+
50+
const onSubmit = () => {
51+
const data = new FormData();
52+
53+
data.append("company_name", values.company_name);
54+
data.append("email", values.email);
55+
data.append("vat_id", values.vat_id);
56+
data.append("country", values.country);
57+
data.append("street_address", values.street_address);
58+
data.append("town", values.town);
59+
data.append("postal_code", values.postal_code);
60+
data.append(
61+
"tell_us_more",
62+
`${values.tell_us_more} \n\nform_source:${window.location.pathname + window.location.search + window.location.hash}`,
63+
);
64+
65+
fetch("https://pkgs.defguard.net/api/customer/signup", {
66+
mode: "no-cors",
67+
method: "POST",
68+
body: data,
69+
})
70+
.then(() => {
71+
setOkMessage(true);
72+
})
73+
.catch(() => {
74+
setErrorMessage(true);
75+
});
76+
};
77+
78+
return (
79+
<>
80+
<form
81+
id="book-form"
82+
className="book"
83+
autoComplete="off"
84+
onSubmit={(e) => {
85+
e.preventDefault();
86+
onSubmit();
87+
}}
88+
>
89+
<div className="double-inputs">
90+
<label htmlFor="company_name">
91+
Company name
92+
<input type="text" required name="company_name" onChange={handleInputChange} />
93+
</label>
94+
<label htmlFor="email">
95+
Email
96+
<input type="email" required name="email" onChange={handleInputChange} />
97+
</label>
98+
</div>
99+
<div className="double-inputs">
100+
<label htmlFor="vat_id">
101+
Company VAT ID or registration number
102+
<input type="text" required name="vat_id" onChange={handleInputChange} />
103+
</label>
104+
<label htmlFor="country">
105+
Country
106+
<input type="text" required name="country" onChange={handleInputChange} />
107+
</label>
108+
</div>
109+
<div className="triple-inputs">
110+
<label htmlFor="street_address">
111+
Street address
112+
<input type="text" required name="street_address" onChange={handleInputChange} />
113+
</label>
114+
<label htmlFor="town">
115+
Town
116+
<input type="text" required name="town" onChange={handleInputChange} />
117+
</label>
118+
<label htmlFor="postal_code">
119+
Postal code
120+
<input type="text" required name="postal_code" onChange={handleInputChange} />
121+
</label>
122+
</div>
123+
<label className="single-input" htmlFor="tell_us_more">
124+
Anything else you wish to tell us?
125+
<textarea rows={7} name="tell_us_more" onChange={handleInputChange}></textarea>
126+
</label>
127+
128+
<div className="button">
129+
<Button text={submit_text} type="submit" />
130+
</div>
131+
</form>
132+
{okMessage && (
133+
<MessageBottom message="Form sent successfully" handleButton={handleAlert} />
134+
)}
135+
{errorMessage && (
136+
<MessageBottom message="Something went wrong" handleButton={handleAlert} />
137+
)}
138+
</>
139+
);
140+
};
141+
142+
export default BookDemoForm;

‎src/pages/pricing.astro‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { getCollection } from "astro:content";
33
import Navigation from "../components/base/Navigation.astro";
44
import BaseLayout from "../layouts/BaseLayout.astro";
55
import OrganizationJSONLD from "../scripts/OrganizationJSONLD.astro";
6-
import BookDemoForm from "../components/form/BookDemoForm/BookDemoForm";
7-
import PricingHeaderContent from "../data/pricing/page-header.mdx";
6+
import BookEvaluationLicenseForm from "../components/form/BookDemoForm/BookEvaluationLicenseForm";
87
import { PricingCards } from "../components/pricing/Pricing";
98
import ContentLimiter from "../components/ContentLimiter.astro";
109
import FlexibleSection from "../components/FlexibleSection.astro";
@@ -134,7 +133,7 @@ const tags = [
134133
</p>
135134
</div>
136135
<div class="evaluation-form-container">
137-
<BookDemoForm submit_text="Request Evaluation License" client:load />
136+
<BookEvaluationLicenseForm submit_text="Request Evaluation License" client:load />
138137
</div>
139138
</div>
140139
</FlexibleSection>

0 commit comments

Comments
 (0)