diff --git a/apps/website/app/contact/page.tsx b/apps/website/app/contact/page.tsx index c37ed64..f821b43 100644 --- a/apps/website/app/contact/page.tsx +++ b/apps/website/app/contact/page.tsx @@ -1,147 +1,13 @@ "use client"; import { Container } from "@/components/Container"; -import { trackGAEvent } from "@/components/analitycs"; +import { ContactForm } from "@/components/ContactForm"; import AnimatedGridPattern from "@/components/ui/animated-grid-pattern"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; import { cn } from "@/lib/utils"; import { useState } from "react"; -interface ContactFormData { - inquiryType: "" | "support" | "sales" | "other"; - deploymentType: "" | "cloud" | "self-hosted"; - firstName: string; - lastName: string; - email: string; - company: string; - message: string; -} - export default function ContactPage() { - const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); - const [formData, setFormData] = useState({ - inquiryType: "", - deploymentType: "", - firstName: "", - lastName: "", - email: "", - company: "", - message: "", - }); - const [errors, setErrors] = useState>({}); - - const validateForm = (): boolean => { - const newErrors: Record = {}; - - if (!formData.inquiryType) { - newErrors.inquiryType = "Please select what we can help you with"; - } - if (formData.inquiryType === "support" && !formData.deploymentType) { - newErrors.deploymentType = "Please select your deployment type"; - } - if (!formData.firstName.trim()) { - newErrors.firstName = "First name is required"; - } - if (!formData.lastName.trim()) { - newErrors.lastName = "Last name is required"; - } - if (!formData.email.trim()) { - newErrors.email = "Email is required"; - } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { - newErrors.email = "Please enter a valid email address"; - } - if (!formData.company.trim()) { - newErrors.company = "Company name is required"; - } - if (!formData.message.trim()) { - newErrors.message = "Message is required"; - } - - setErrors(newErrors); - return Object.keys(newErrors).length === 0; - }; - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - if (!validateForm()) { - return; - } - - // Prevent submission for self-hosted support requests - if ( - formData.inquiryType === "support" && - formData.deploymentType === "self-hosted" - ) { - return; - } - - setIsSubmitting(true); - - try { - const response = await fetch("/api/contact", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formData), - }); - - if (response.ok) { - trackGAEvent({ - action: "Contact Form Submitted", - category: "Contact", - label: formData.inquiryType, - }); - - setFormData({ - inquiryType: "", - deploymentType: "", - firstName: "", - lastName: "", - email: "", - company: "", - message: "", - }); - setErrors({}); - setIsSubmitted(true); - } else { - throw new Error("Failed to submit form"); - } - } catch (error) { - console.error("Error submitting form:", error); - alert("There was an error sending your message. Please try again."); - } finally { - setIsSubmitting(false); - } - }; - - const handleInputChange = (field: keyof ContactFormData, value: any) => { - setFormData((prev) => { - const updated = { ...prev, [field]: value }; - // Reset deploymentType when inquiryType changes and is not support - if (field === "inquiryType" && value !== "support") { - updated.deploymentType = ""; - } - return updated; - }); - if (errors[field]) { - setErrors((prev) => { - const newErrors = { ...prev }; - delete newErrors[field]; - return newErrors; - }); - } - }; if (isSubmitted) { return ( @@ -156,9 +22,13 @@ export default function ContactPage() { possible.

- +
@@ -192,231 +62,9 @@ export default function ContactPage() {

-
-
- - - {errors.inquiryType && ( -

{errors.inquiryType}

- )} -
- - {formData.inquiryType === "support" && ( -
- - - {errors.deploymentType && ( -

- {errors.deploymentType} -

- )} - - {formData.deploymentType === "self-hosted" && ( -
-

- Self-Hosted Support -

-

- We currently don't provide direct support for self-hosted - deployments through this form. However, our community is - here to help! -

-
-

- Please use one of these channels to get assistance: -

- -
-
- )} -
- )} - -
-
- - - handleInputChange("firstName", e.target.value) - } - placeholder="Your first name" - /> - {errors.firstName && ( -

{errors.firstName}

- )} -
- -
- - - handleInputChange("lastName", e.target.value) - } - placeholder="Your last name" - /> - {errors.lastName && ( -

{errors.lastName}

- )} -
-
- -
- - handleInputChange("email", e.target.value)} - placeholder="your.email@company.com" - /> - {errors.email && ( -

{errors.email}

- )} -
- -
- - handleInputChange("company", e.target.value)} - placeholder="Your company name" - /> - {errors.company && ( -

{errors.company}

- )} -
- -
- -