From de75609e7acf9a8e1f59e167ccffadcaee8e55c1 Mon Sep 17 00:00:00 2001 From: openhands Date: Thu, 19 Mar 2026 15:04:25 +0000 Subject: [PATCH] feat: add information request form component - Create InformationRequestForm component in features/onboarding - Update information-request route to show form when Learn More is clicked - Change back button to navigate to /login instead of browser history - Add i18n translations for form fields (name, email, company, message) - Form back button returns to card selection view Co-authored-by: openhands --- .../onboarding/information-request-form.tsx | 139 ++++++++++++++ frontend/src/i18n/declaration.ts | 10 ++ frontend/src/i18n/translation.json | 170 ++++++++++++++++++ frontend/src/routes/information-request.tsx | 52 ++++-- 4 files changed, 359 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/features/onboarding/information-request-form.tsx diff --git a/frontend/src/components/features/onboarding/information-request-form.tsx b/frontend/src/components/features/onboarding/information-request-form.tsx new file mode 100644 index 0000000000..099838cbfc --- /dev/null +++ b/frontend/src/components/features/onboarding/information-request-form.tsx @@ -0,0 +1,139 @@ +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { I18nKey } from "#/i18n/declaration"; +import { BrandButton } from "#/components/features/settings/brand-button"; + +export type RequestType = "saas" | "self-hosted"; + +interface InformationRequestFormProps { + requestType: RequestType; + onBack: () => void; +} + +export function InformationRequestForm({ + requestType, + onBack, +}: InformationRequestFormProps) { + const { t } = useTranslation(); + const [formData, setFormData] = useState({ + name: "", + email: "", + company: "", + message: "", + }); + + const handleInputChange = ( + e: React.ChangeEvent, + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // TODO: Implement form submission + console.log("Form submitted:", { requestType, ...formData }); + }; + + const title = + requestType === "saas" + ? t(I18nKey.ENTERPRISE$SAAS_TITLE) + : t(I18nKey.ENTERPRISE$SELF_HOSTED_TITLE); + + return ( +
+
+

{title}

+

+ {t(I18nKey.ENTERPRISE$FORM_SUBTITLE)} +

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +