({ name: "", company: "", email: "", message: "" });
+ return ;
+}
+
+describe("InformationRequestForm", () => {
+ const defaultProps = {
+ requestType: "saas" as RequestType,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockOnBack.mockClear();
+ });
+
+ const renderWithRouter = (props = defaultProps) => {
+ const Stub = createRoutesStub([
+ {
+ path: "/",
+ Component: () => ,
+ },
+ {
+ path: "/login",
+ Component: () => ,
+ },
+ {
+ path: "/information-request",
+ Component: () => ,
+ },
+ ]);
+
+ return render();
+ };
+
+ it("should render the form", () => {
+ renderWithRouter();
+
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+ });
+
+ it("should render the logo", () => {
+ renderWithRouter();
+
+ const logo = screen.getByTestId("information-request-form").querySelector("svg");
+ expect(logo).toBeInTheDocument();
+ });
+
+ it("should render all form fields", () => {
+ renderWithRouter();
+
+ expect(screen.getByTestId("form-input-name")).toBeInTheDocument();
+ expect(screen.getByTestId("form-input-company")).toBeInTheDocument();
+ expect(screen.getByTestId("form-input-email")).toBeInTheDocument();
+ expect(screen.getByTestId("form-input-message")).toBeInTheDocument();
+ });
+
+ it("should render SaaS-specific title when requestType is saas", () => {
+ renderWithRouter({ ...defaultProps, requestType: "saas" });
+
+ expect(screen.getByText("ENTERPRISE$FORM_SAAS_TITLE")).toBeInTheDocument();
+ });
+
+ it("should render Self-hosted-specific title when requestType is self-hosted", () => {
+ renderWithRouter({ ...defaultProps, requestType: "self-hosted" });
+
+ expect(screen.getByText("ENTERPRISE$FORM_SELF_HOSTED_TITLE")).toBeInTheDocument();
+ });
+
+ it("should render cloud icon for SaaS request type", () => {
+ renderWithRouter({ ...defaultProps, requestType: "saas" });
+
+ // The card should contain the cloud icon
+ const card = screen.getByText("ENTERPRISE$SAAS_TITLE").closest("div");
+ expect(card).toBeInTheDocument();
+ });
+
+ it("should render stacked icon for self-hosted request type", () => {
+ renderWithRouter({ ...defaultProps, requestType: "self-hosted" });
+
+ // The card should contain the stacked icon
+ const card = screen.getByText("ENTERPRISE$SELF_HOSTED_TITLE").closest("div");
+ expect(card).toBeInTheDocument();
+ });
+
+ it("should call onBack when back button is clicked", async () => {
+ const user = userEvent.setup();
+
+ renderWithRouter();
+
+ const backButton = screen.getByRole("button", { name: "COMMON$BACK" });
+ await user.click(backButton);
+
+ expect(mockOnBack).toHaveBeenCalledTimes(1);
+ });
+
+ it("should update form fields when user types", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ const nameInput = screen.getByTestId("form-input-name");
+ await user.type(nameInput, "John Doe");
+
+ expect(nameInput).toHaveValue("John Doe");
+ });
+
+ it("should update email field when user types", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ const emailInput = screen.getByTestId("form-input-email");
+ await user.type(emailInput, "john@example.com");
+
+ expect(emailInput).toHaveValue("john@example.com");
+ });
+
+ it("should render message as textarea", () => {
+ renderWithRouter();
+
+ const messageInput = screen.getByTestId("form-input-message");
+ expect(messageInput.tagName).toBe("TEXTAREA");
+ });
+
+ it("should have all fields marked as required", () => {
+ renderWithRouter();
+
+ expect(screen.getByTestId("form-input-name")).toBeRequired();
+ expect(screen.getByTestId("form-input-company")).toBeRequired();
+ expect(screen.getByTestId("form-input-email")).toBeRequired();
+ expect(screen.getByTestId("form-input-message")).toBeRequired();
+ });
+
+ it("should render submit button", () => {
+ renderWithRouter();
+
+ const submitButton = screen.getByRole("button", { name: "ENTERPRISE$FORM_SUBMIT" });
+ expect(submitButton).toBeInTheDocument();
+ expect(submitButton).toHaveAttribute("type", "submit");
+ });
+
+ it("should render back button", () => {
+ renderWithRouter();
+
+ const backButton = screen.getByRole("button", { name: "COMMON$BACK" });
+ expect(backButton).toBeInTheDocument();
+ expect(backButton).toHaveAttribute("type", "button");
+ });
+
+ it("should have button group with role and aria-label", () => {
+ renderWithRouter();
+
+ const buttonGroup = screen.getByRole("group", { name: "Form actions" });
+ expect(buttonGroup).toBeInTheDocument();
+ });
+
+ it("should display SaaS card description for saas request type", () => {
+ renderWithRouter({ ...defaultProps, requestType: "saas" });
+
+ expect(screen.getByText("ENTERPRISE$SAAS_DESCRIPTION")).toBeInTheDocument();
+ });
+
+ it("should display Self-hosted card description for self-hosted request type", () => {
+ renderWithRouter({ ...defaultProps, requestType: "self-hosted" });
+
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_DESCRIPTION")).toBeInTheDocument();
+ });
+
+ describe("form validation", () => {
+ it("should not show error state before form submission", () => {
+ renderWithRouter();
+
+ const nameInput = screen.getByTestId("form-input-name");
+ const companyInput = screen.getByTestId("form-input-company");
+ const emailInput = screen.getByTestId("form-input-email");
+ const messageInput = screen.getByTestId("form-input-message");
+
+ expect(nameInput).toHaveAttribute("aria-invalid", "false");
+ expect(companyInput).toHaveAttribute("aria-invalid", "false");
+ expect(emailInput).toHaveAttribute("aria-invalid", "false");
+ expect(messageInput).toHaveAttribute("aria-invalid", "false");
+ });
+
+ it("should not navigate when form is submitted with empty fields", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ const submitButton = screen.getByRole("button", {
+ name: "ENTERPRISE$FORM_SUBMIT",
+ });
+ await user.click(submitButton);
+
+ // Should stay on form page, not navigate to login
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+ expect(screen.queryByTestId("login-page")).not.toBeInTheDocument();
+ });
+
+ it("should not call tracking when form is submitted with empty fields", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ const submitButton = screen.getByRole("button", { name: "ENTERPRISE$FORM_SUBMIT" });
+ await user.click(submitButton);
+
+ expect(mockTrackEnterpriseLeadFormSubmitted).not.toHaveBeenCalled();
+ });
+
+ it("should navigate to login page when form is submitted with all fields filled", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ await user.type(screen.getByTestId("form-input-name"), "John Doe");
+ await user.type(screen.getByTestId("form-input-company"), "Acme Inc");
+ await user.type(screen.getByTestId("form-input-email"), "john@example.com");
+ await user.type(screen.getByTestId("form-input-message"), "Hello world");
+
+ const submitButton = screen.getByRole("button", {
+ name: "ENTERPRISE$FORM_SUBMIT",
+ });
+ await user.click(submitButton);
+
+ // Should navigate to login page
+ expect(screen.getByTestId("login-page")).toBeInTheDocument();
+ });
+
+ it("should call tracking with form data when form is submitted successfully", async () => {
+ const user = userEvent.setup();
+ renderWithRouter({ ...defaultProps, requestType: "saas" });
+
+ await user.type(screen.getByTestId("form-input-name"), "John Doe");
+ await user.type(screen.getByTestId("form-input-company"), "Acme Inc");
+ await user.type(screen.getByTestId("form-input-email"), "john@example.com");
+ await user.type(screen.getByTestId("form-input-message"), "Hello world");
+
+ const submitButton = screen.getByRole("button", { name: "ENTERPRISE$FORM_SUBMIT" });
+ await user.click(submitButton);
+
+ expect(mockTrackEnterpriseLeadFormSubmitted).toHaveBeenCalledTimes(1);
+ expect(mockTrackEnterpriseLeadFormSubmitted).toHaveBeenCalledWith({
+ requestType: "saas",
+ name: "John Doe",
+ company: "Acme Inc",
+ email: "john@example.com",
+ message: "Hello world",
+ });
+ });
+
+ it("should call tracking with self-hosted request type", async () => {
+ const user = userEvent.setup();
+ renderWithRouter({ ...defaultProps, requestType: "self-hosted" });
+
+ await user.type(screen.getByTestId("form-input-name"), "Jane Smith");
+ await user.type(screen.getByTestId("form-input-company"), "Tech Corp");
+ await user.type(screen.getByTestId("form-input-email"), "jane@techcorp.com");
+ await user.type(screen.getByTestId("form-input-message"), "Interested in self-hosted");
+
+ const submitButton = screen.getByRole("button", { name: "ENTERPRISE$FORM_SUBMIT" });
+ await user.click(submitButton);
+
+ expect(mockTrackEnterpriseLeadFormSubmitted).toHaveBeenCalledWith({
+ requestType: "self-hosted",
+ name: "Jane Smith",
+ company: "Tech Corp",
+ email: "jane@techcorp.com",
+ message: "Interested in self-hosted",
+ });
+ });
+
+ it("should trim whitespace from form fields before tracking", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ await user.type(screen.getByTestId("form-input-name"), " John Doe ");
+ await user.type(screen.getByTestId("form-input-company"), " Acme Inc ");
+ await user.type(screen.getByTestId("form-input-email"), " john@example.com ");
+ await user.type(screen.getByTestId("form-input-message"), " Hello world ");
+
+ const submitButton = screen.getByRole("button", { name: "ENTERPRISE$FORM_SUBMIT" });
+ await user.click(submitButton);
+
+ expect(mockTrackEnterpriseLeadFormSubmitted).toHaveBeenCalledWith({
+ requestType: "saas",
+ name: "John Doe",
+ company: "Acme Inc",
+ email: "john@example.com",
+ message: "Hello world",
+ });
+ });
+
+ it("should have valid aria-invalid state when field has value", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ const nameInput = screen.getByTestId("form-input-name");
+ await user.type(nameInput, "John Doe");
+
+ // Field with value should not be invalid
+ expect(nameInput).toHaveAttribute("aria-invalid", "false");
+ });
+
+ it("should not navigate when email is invalid", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ await user.type(screen.getByTestId("form-input-name"), "John Doe");
+ await user.type(screen.getByTestId("form-input-company"), "Acme Inc");
+ await user.type(screen.getByTestId("form-input-email"), "invalid-email");
+ await user.type(screen.getByTestId("form-input-message"), "Hello world");
+
+ const submitButton = screen.getByRole("button", {
+ name: "ENTERPRISE$FORM_SUBMIT",
+ });
+ await user.click(submitButton);
+
+ // Should stay on form page, not navigate to login
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+ expect(screen.queryByTestId("login-page")).not.toBeInTheDocument();
+ expect(mockTrackEnterpriseLeadFormSubmitted).not.toHaveBeenCalled();
+ });
+ });
+
+ describe("loading state", () => {
+ it("should prevent double submission", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ await user.type(screen.getByTestId("form-input-name"), "John Doe");
+ await user.type(screen.getByTestId("form-input-company"), "Acme Inc");
+ await user.type(screen.getByTestId("form-input-email"), "john@example.com");
+ await user.type(screen.getByTestId("form-input-message"), "Hello world");
+
+ const submitButton = screen.getByRole("button", {
+ name: "ENTERPRISE$FORM_SUBMIT",
+ });
+
+ // Click multiple times rapidly
+ await user.click(submitButton);
+ await user.click(submitButton);
+ await user.click(submitButton);
+
+ // Should only track once
+ expect(mockTrackEnterpriseLeadFormSubmitted).toHaveBeenCalledTimes(1);
+ // Should navigate to login page
+ expect(screen.getByTestId("login-page")).toBeInTheDocument();
+ });
+ });
+});
diff --git a/frontend/__tests__/components/features/onboarding/request-submitted-modal.test.tsx b/frontend/__tests__/components/features/onboarding/request-submitted-modal.test.tsx
new file mode 100644
index 0000000000..d5c40bc4eb
--- /dev/null
+++ b/frontend/__tests__/components/features/onboarding/request-submitted-modal.test.tsx
@@ -0,0 +1,113 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { RequestSubmittedModal } from "#/components/features/onboarding/request-submitted-modal";
+
+describe("RequestSubmittedModal", () => {
+ const defaultProps = {
+ onClose: vi.fn(),
+ };
+
+ it("should render the modal", () => {
+ render();
+
+ expect(screen.getByTestId("request-submitted-modal")).toBeInTheDocument();
+ });
+
+ it("should render the title", () => {
+ render();
+
+ expect(
+ screen.getByText("ENTERPRISE$REQUEST_SUBMITTED_TITLE"),
+ ).toBeInTheDocument();
+ });
+
+ it("should render the description", () => {
+ render();
+
+ expect(
+ screen.getByText("ENTERPRISE$REQUEST_SUBMITTED_DESCRIPTION"),
+ ).toBeInTheDocument();
+ });
+
+ it("should render the Done button", () => {
+ render();
+
+ expect(
+ screen.getByRole("button", { name: "ENTERPRISE$DONE_BUTTON" }),
+ ).toBeInTheDocument();
+ });
+
+ it("should render the close button", () => {
+ render();
+
+ expect(
+ screen.getByRole("button", { name: "MODAL$CLOSE_BUTTON_LABEL" }),
+ ).toBeInTheDocument();
+ });
+
+ it("should call onClose when Done button is clicked", async () => {
+ const mockOnClose = vi.fn();
+ const user = userEvent.setup();
+
+ render();
+
+ const doneButton = screen.getByRole("button", {
+ name: "ENTERPRISE$DONE_BUTTON",
+ });
+ await user.click(doneButton);
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("should call onClose when close button is clicked", async () => {
+ const mockOnClose = vi.fn();
+ const user = userEvent.setup();
+
+ render();
+
+ const closeButton = screen.getByRole("button", {
+ name: "MODAL$CLOSE_BUTTON_LABEL",
+ });
+ await user.click(closeButton);
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("should call onClose when Escape key is pressed", async () => {
+ const mockOnClose = vi.fn();
+ const user = userEvent.setup();
+
+ render();
+
+ await user.keyboard("{Escape}");
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("should call onClose when backdrop is clicked", async () => {
+ const mockOnClose = vi.fn();
+ const user = userEvent.setup();
+
+ render();
+
+ // Click on the backdrop (the semi-transparent overlay)
+ const backdrop = screen.getByRole("dialog").querySelector(".bg-black");
+ if (backdrop) {
+ await user.click(backdrop);
+ }
+
+ expect(mockOnClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("should have proper accessibility attributes", () => {
+ render();
+
+ const dialog = screen.getByRole("dialog");
+ expect(dialog).toHaveAttribute("aria-modal", "true");
+ expect(dialog).toHaveAttribute(
+ "aria-label",
+ "ENTERPRISE$REQUEST_SUBMITTED_TITLE",
+ );
+ });
+});
diff --git a/frontend/__tests__/components/features/onboarding/step-input.test.tsx b/frontend/__tests__/components/features/onboarding/step-input.test.tsx
deleted file mode 100644
index a4f388efbb..0000000000
--- a/frontend/__tests__/components/features/onboarding/step-input.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { StepInput } from "#/components/features/onboarding/step-input";
-
-describe("StepInput", () => {
- const defaultProps = {
- id: "test-input",
- label: "Test Label",
- value: "",
- onChange: vi.fn(),
- };
-
- it("should render with correct test id", () => {
- render();
-
- expect(screen.getByTestId("step-input-test-input")).toBeInTheDocument();
- });
-
- it("should render the label", () => {
- render();
-
- expect(screen.getByText("Test Label")).toBeInTheDocument();
- });
-
- it("should display the provided value", () => {
- render();
-
- const input = screen.getByTestId("step-input-test-input");
- expect(input).toHaveValue("Hello World");
- });
-
- it("should call onChange when user types", async () => {
- const mockOnChange = vi.fn();
- const user = userEvent.setup();
-
- render();
-
- const input = screen.getByTestId("step-input-test-input");
- await user.type(input, "a");
-
- expect(mockOnChange).toHaveBeenCalledWith("a");
- });
-
- it("should call onChange with the full input value on each keystroke", async () => {
- const mockOnChange = vi.fn();
- const user = userEvent.setup();
-
- render();
-
- const input = screen.getByTestId("step-input-test-input");
- await user.type(input, "abc");
-
- expect(mockOnChange).toHaveBeenCalledTimes(3);
- expect(mockOnChange).toHaveBeenNthCalledWith(1, "a");
- expect(mockOnChange).toHaveBeenNthCalledWith(2, "b");
- expect(mockOnChange).toHaveBeenNthCalledWith(3, "c");
- });
-
- it("should use the id prop for data-testid", () => {
- render();
-
- expect(screen.getByTestId("step-input-org_name")).toBeInTheDocument();
- });
-
- it("should render as a text input", () => {
- render();
-
- const input = screen.getByTestId("step-input-test-input");
- expect(input).toHaveAttribute("type", "text");
- });
-});
diff --git a/frontend/__tests__/hooks/use-is-on-intermediate-page.test.ts b/frontend/__tests__/hooks/use-is-on-intermediate-page.test.ts
index 2879815745..2c9ecdca18 100644
--- a/frontend/__tests__/hooks/use-is-on-intermediate-page.test.ts
+++ b/frontend/__tests__/hooks/use-is-on-intermediate-page.test.ts
@@ -32,6 +32,12 @@ describe("useIsOnIntermediatePage", () => {
const { result } = renderHook(() => useIsOnIntermediatePage());
expect(result.current).toBe(true);
});
+
+ it("should return true when on /information-request page", () => {
+ useLocationMock.mockReturnValue({ pathname: "/information-request" });
+ const { result } = renderHook(() => useIsOnIntermediatePage());
+ expect(result.current).toBe(true);
+ });
});
describe("returns false for non-intermediate pages", () => {
diff --git a/frontend/__tests__/routes/information-request.test.tsx b/frontend/__tests__/routes/information-request.test.tsx
new file mode 100644
index 0000000000..c6b04e9396
--- /dev/null
+++ b/frontend/__tests__/routes/information-request.test.tsx
@@ -0,0 +1,174 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { MemoryRouter } from "react-router";
+import InformationRequest from "#/routes/information-request";
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock("react-router", async () => {
+ const actual = await vi.importActual("react-router");
+ return {
+ ...actual,
+ useNavigate: () => mockNavigate,
+ };
+});
+
+// Mock useTracking to avoid QueryClient dependency
+vi.mock("#/hooks/use-tracking", () => ({
+ useTracking: () => ({
+ trackEnterpriseLeadFormSubmitted: vi.fn(),
+ }),
+}));
+
+describe("InformationRequest", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ const renderWithRouter = () => {
+ return render(
+
+
+ ,
+ );
+ };
+
+ it("should render the page", () => {
+ renderWithRouter();
+
+ expect(screen.getByTestId("information-request-page")).toBeInTheDocument();
+ });
+
+ it("should render the logo", () => {
+ renderWithRouter();
+
+ const page = screen.getByTestId("information-request-page");
+ const logo = page.querySelector("svg");
+ expect(logo).toBeInTheDocument();
+ });
+
+ it("should render the page title", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$GET_OPENHANDS_TITLE")).toBeInTheDocument();
+ });
+
+ it("should render the page subtitle", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$GET_OPENHANDS_SUBTITLE")).toBeInTheDocument();
+ });
+
+ it("should render SaaS card", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$SAAS_TITLE")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SAAS_DESCRIPTION")).toBeInTheDocument();
+ });
+
+ it("should render Self-hosted card", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_TITLE")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_CARD_DESCRIPTION")).toBeInTheDocument();
+ });
+
+ it("should render SaaS features", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$SAAS_FEATURE_NO_INFRASTRUCTURE")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SAAS_FEATURE_SSO")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SAAS_FEATURE_ACCESS_ANYWHERE")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SAAS_FEATURE_AUTO_UPDATES")).toBeInTheDocument();
+ });
+
+ it("should render Self-hosted features", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_FEATURE_ON_PREMISES")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_FEATURE_DATA_CONTROL")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_FEATURE_COMPLIANCE")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$SELF_HOSTED_FEATURE_SUPPORT")).toBeInTheDocument();
+ });
+
+ it("should render two Learn More buttons", () => {
+ renderWithRouter();
+
+ const learnMoreButtons = screen.getAllByText("ENTERPRISE$LEARN_MORE");
+ expect(learnMoreButtons).toHaveLength(2);
+ });
+
+ it("should render back button", () => {
+ renderWithRouter();
+
+ expect(screen.getByText("COMMON$BACK")).toBeInTheDocument();
+ });
+
+ it("should have back link pointing to /login", () => {
+ renderWithRouter();
+
+ const backLink = screen.getByText("COMMON$BACK");
+ expect(backLink).toHaveAttribute("href", "/login");
+ });
+
+ it("should show SaaS form when SaaS Learn More is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ // Click the first Learn More button (SaaS)
+ const learnMoreButtons = screen.getAllByText("ENTERPRISE$LEARN_MORE");
+ await user.click(learnMoreButtons[0]);
+
+ // Form should now be visible
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$FORM_SAAS_TITLE")).toBeInTheDocument();
+ });
+
+ it("should show Self-hosted form when Self-hosted Learn More is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ // Click the second Learn More button (Self-hosted)
+ const learnMoreButtons = screen.getAllByText("ENTERPRISE$LEARN_MORE");
+ await user.click(learnMoreButtons[1]);
+
+ // Form should now be visible
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$FORM_SELF_HOSTED_TITLE")).toBeInTheDocument();
+ });
+
+ it("should return to card selection when form back button is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter();
+
+ // Click Learn More to show form
+ const learnMoreButtons = screen.getAllByText("ENTERPRISE$LEARN_MORE");
+ await user.click(learnMoreButtons[0]);
+
+ // Verify form is visible
+ expect(screen.getByTestId("information-request-form")).toBeInTheDocument();
+
+ // Click back button
+ const backButton = screen.getByRole("button", { name: "COMMON$BACK" });
+ await user.click(backButton);
+
+ // Should return to card selection view
+ expect(screen.queryByTestId("information-request-form")).not.toBeInTheDocument();
+ expect(screen.getByText("ENTERPRISE$GET_OPENHANDS_TITLE")).toBeInTheDocument();
+ });
+
+ it("should have accessible Learn More links with aria-label", () => {
+ renderWithRouter();
+
+ const saasLink = screen.getByRole("link", {
+ name: "ENTERPRISE$LEARN_MORE ENTERPRISE$SAAS_TITLE",
+ });
+ const selfHostedLink = screen.getByRole("link", {
+ name: "ENTERPRISE$LEARN_MORE ENTERPRISE$SELF_HOSTED_TITLE",
+ });
+
+ expect(saasLink).toBeInTheDocument();
+ expect(selfHostedLink).toBeInTheDocument();
+ });
+});
diff --git a/frontend/__tests__/ui/card.test.tsx b/frontend/__tests__/ui/card.test.tsx
new file mode 100644
index 0000000000..3445878239
--- /dev/null
+++ b/frontend/__tests__/ui/card.test.tsx
@@ -0,0 +1,154 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Card } from "#/ui/card";
+
+describe("Card", () => {
+ it("should render children", () => {
+ render(Card Content);
+
+ expect(screen.getByText("Card Content")).toBeInTheDocument();
+ });
+
+ it("should render with testId", () => {
+ render(Content);
+
+ expect(screen.getByTestId("test-card")).toBeInTheDocument();
+ });
+
+ it("should apply custom className", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ expect(screen.getByTestId("test-card")).toHaveClass("custom-class");
+ });
+
+ describe("theme variants", () => {
+ it("should apply default theme styles", () => {
+ render(Content);
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("bg-[#26282D]");
+ expect(card).toHaveClass("border-[#727987]");
+ expect(card).toHaveClass("rounded-xl");
+ });
+
+ it("should apply outlined theme styles", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("bg-transparent");
+ expect(card).toHaveClass("border-[#727987]");
+ });
+
+ it("should apply dark theme styles", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("bg-black");
+ expect(card).toHaveClass("border-[#242424]");
+ expect(card).toHaveClass("rounded-2xl");
+ });
+ });
+
+ describe("hover variants", () => {
+ it("should not apply hover styles when hover is none", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).not.toHaveClass("hover:bg-[linear-gradient");
+ });
+
+ it("should apply elevated hover styles", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("transition-all");
+ expect(card).toHaveClass("duration-200");
+ });
+ });
+
+ describe("gradient variants", () => {
+ it("should not apply gradient styles when gradient is none", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).not.toHaveClass("bg-[#0A0A0A80]");
+ });
+
+ it("should apply standard gradient styles", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("bg-[#0A0A0A80]");
+ expect(card).toHaveClass("border-t-[#24242499]");
+ });
+ });
+
+ describe("combined variants", () => {
+ it("should apply dark theme with standard gradient", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ // Should have dark theme base
+ expect(card).toHaveClass("border-[#242424]");
+ expect(card).toHaveClass("rounded-2xl");
+ // Should have gradient overlay
+ expect(card).toHaveClass("bg-[#0A0A0A80]");
+ });
+
+ it("should apply dark theme with elevated hover", () => {
+ render(
+
+ Content
+ ,
+ );
+
+ const card = screen.getByTestId("test-card");
+ expect(card).toHaveClass("rounded-2xl");
+ expect(card).toHaveClass("transition-all");
+ });
+ });
+
+ it("should have flex display by default", () => {
+ render(Content);
+
+ expect(screen.getByTestId("test-card")).toHaveClass("flex");
+ });
+
+ it("should have relative positioning", () => {
+ render(Content);
+
+ expect(screen.getByTestId("test-card")).toHaveClass("relative");
+ });
+});
diff --git a/frontend/src/components/features/auth/login-cta.tsx b/frontend/src/components/features/auth/login-cta.tsx
index 1d67b9cedb..06823837c3 100644
--- a/frontend/src/components/features/auth/login-cta.tsx
+++ b/frontend/src/components/features/auth/login-cta.tsx
@@ -1,4 +1,5 @@
import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
import { Card } from "#/ui/card";
import { CardTitle } from "#/ui/card-title";
import { Typography } from "#/ui/typography";
@@ -44,21 +45,20 @@ export function LoginCTA() {
diff --git a/frontend/src/components/features/onboarding/enterprise-card.tsx b/frontend/src/components/features/onboarding/enterprise-card.tsx
new file mode 100644
index 0000000000..e4dce5fa85
--- /dev/null
+++ b/frontend/src/components/features/onboarding/enterprise-card.tsx
@@ -0,0 +1,54 @@
+import { Link } from "react-router";
+import { Card } from "#/ui/card";
+import { Typography } from "#/ui/typography";
+import { cn } from "#/utils/utils";
+import { FeatureList } from "./feature-list";
+
+interface EnterpriseCardProps {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ features: string[];
+ onLearnMore: () => void;
+ learnMoreLabel: string;
+}
+
+export function EnterpriseCard({
+ icon,
+ title,
+ description,
+ features,
+ onLearnMore,
+ learnMoreLabel,
+}: EnterpriseCardProps) {
+ return (
+
+ {icon}
+
+ {title}
+
+
+ {description}
+
+
+
+ {learnMoreLabel}
+
+
+ );
+}
diff --git a/frontend/src/components/features/onboarding/feature-list.tsx b/frontend/src/components/features/onboarding/feature-list.tsx
new file mode 100644
index 0000000000..3327fe7efc
--- /dev/null
+++ b/frontend/src/components/features/onboarding/feature-list.tsx
@@ -0,0 +1,20 @@
+import { Typography } from "#/ui/typography";
+
+interface FeatureListProps {
+ features: string[];
+}
+
+export function FeatureList({ features }: FeatureListProps) {
+ return (
+
+ {features.map((feature, index) => (
+ -
+ •
+
+ {feature}
+
+
+ ))}
+
+ );
+}
diff --git a/frontend/src/components/features/onboarding/form-input.tsx b/frontend/src/components/features/onboarding/form-input.tsx
new file mode 100644
index 0000000000..a21bc6b629
--- /dev/null
+++ b/frontend/src/components/features/onboarding/form-input.tsx
@@ -0,0 +1,78 @@
+import { isValidEmail } from "#/utils/input-validation";
+import { cn } from "#/utils/utils";
+
+// Email validation pattern - must match EMAIL_REGEX in input-validation.ts
+const EMAIL_PATTERN = "[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}";
+
+interface FormInputProps {
+ id: string;
+ label: string;
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ type?: "text" | "email";
+ rows?: number;
+ required?: boolean;
+ showError?: boolean;
+}
+
+export function FormInput({
+ id,
+ label,
+ value,
+ onChange,
+ placeholder,
+ type = "text",
+ rows,
+ required = false,
+ showError = false,
+}: FormInputProps) {
+ const inputId = `form-input-${id}`;
+ const isEmailInvalid =
+ type === "email" && !!value.trim() && !isValidEmail(value.trim());
+ const hasError = showError && ((required && !value.trim()) || isEmailInvalid);
+ const baseClassName = cn(
+ "w-full min-h-10 rounded border border-[#242424] px-3 py-2 text-sm leading-5 text-white placeholder:text-[#8C8C8C] placeholder:leading-5 focus:outline-none transition-colors focus:border-white",
+ );
+
+ return (
+
+
+ {rows ? (
+