({
open ? Create Org Modal
: null,
}));
vi.mock("@/modules/projects/components/project-switcher", () => ({
- ProjectSwitcher: ({ isCollapsed }: { isCollapsed: boolean }) => (
+ ProjectSwitcher: ({
+ isCollapsed,
+ organizationTeams,
+ canDoRoleManagement,
+ }: {
+ isCollapsed: boolean;
+ organizationTeams: TOrganizationTeam[];
+ canDoRoleManagement: boolean;
+ }) => (
Project Switcher
+
{organizationTeams?.length || 0}
+
{canDoRoleManagement.toString()}
onOpenChange(false)}>
+ {children}
+
+ ) : null,
+ DialogContent: ({ children }: any) => {children}
,
+ DialogHeader: ({ children }: any) => {children}
,
+ DialogTitle: ({ children }: any) => {children}
,
+ DialogDescription: ({ children }: any) => {children}
,
+ DialogBody: ({ children }: any) => {children}
,
+ DialogFooter: ({ children }: any) => {children}
,
+}));
+
+// Create a mutable form mock that can be modified per test
+let currentFormMock: any;
+
+const createFormMock = (options: { shouldCallOnSubmit?: boolean; isSubmitting?: boolean } = {}) => ({
+ handleSubmit: vi.fn((onSubmit) => (e: any) => {
+ e.preventDefault();
+ if (options.shouldCallOnSubmit !== false) {
+ onSubmit({ name: "Test Project", teamIds: [] });
+ }
+ }),
+ formState: { isSubmitting: options.isSubmitting || false },
+ reset: vi.fn(),
+ watch: vi.fn(),
+ getValues: vi.fn(() => ({ teamIds: [] })),
+ setValue: vi.fn(),
+ control: {},
+});
+
+vi.mock("react-hook-form", () => ({
+ useForm: () => currentFormMock,
+}));
+
+vi.mock("@/modules/ui/components/form", () => ({
+ FormProvider: ({ children }: any) => {children}
,
+ FormField: ({ render, name }: any) => {
+ const field = {
+ value: name === "name" ? "Test Project" : [],
+ onChange: vi.fn(),
+ };
+ return render({ field, fieldState: {} });
+ },
+ FormItem: ({ children }: any) => {children}
,
+ FormLabel: ({ children }: any) => ,
+ FormControl: ({ children }: any) => {children}
,
+ FormError: ({ children }: any) => {children},
+}));
+
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: (props: any) => ,
+}));
+
+vi.mock("@/modules/ui/components/multi-select", () => ({
+ MultiSelect: ({ value, options, onChange, placeholder }: any) => (
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, type, loading, variant, ...props }: any) => (
+
+ ),
+}));
+
+describe("CreateProjectModal", () => {
+ const mockOrganizationTeams = [
+ { id: "team-1", name: "Development Team" },
+ { id: "team-2", name: "Marketing Team" },
+ ];
+
+ const mockProject = {
+ id: "project-123",
+ name: "Test Project",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ organizationId: "org-123",
+ recontactDays: 7,
+ inAppSurveyBranding: true,
+ linkSurveyBranding: true,
+ config: { channel: "website" as const, industry: "saas" as const },
+ placement: "bottomRight" as const,
+ clickOutsideClose: true,
+ darkOverlay: false,
+ brandColor: "#000000",
+ highlightBorderColor: "#000000",
+ styling: { allowStyleOverwrite: true },
+ logo: null,
+ languages: [],
+ environments: [
+ {
+ id: "env-123",
+ type: "production" as const,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ projectId: "project-123",
+ appSetupCompleted: false,
+ },
+ ],
+ };
+
+ const defaultProps = {
+ open: true,
+ setOpen: vi.fn(),
+ organizationId: "org-123",
+ canDoRoleManagement: true,
+ };
+
+ beforeEach(() => {
+ // Reset all mocks
+ vi.clearAllMocks();
+
+ // Reset form mock to default
+ currentFormMock = createFormMock();
+
+ // Mock successful teams fetch
+ vi.mocked(getTeamsByOrganizationIdAction).mockResolvedValue({
+ data: mockOrganizationTeams,
+ } as any);
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders modal when open is true", async () => {
+ render();
+
+ expect(screen.getByTestId("dialog")).toBeInTheDocument();
+ expect(screen.getByTestId("dialog-title")).toHaveTextContent("common.create_project");
+ expect(screen.getByTestId("dialog-description")).toHaveTextContent("common.project_creation_description");
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ test("does not render when open is false", () => {
+ render();
+
+ expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
+ });
+
+ test("fetches organization teams on mount", async () => {
+ render();
+
+ await waitFor(() => {
+ expect(getTeamsByOrganizationIdAction).toHaveBeenCalledWith({
+ organizationId: "org-123",
+ });
+ });
+ });
+
+ test("shows team selection when canDoRoleManagement is true and teams exist", async () => {
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("multi-select")).toBeInTheDocument();
+ });
+
+ const multiSelect = screen.getByTestId("multi-select");
+ expect(multiSelect).toHaveAttribute("data-placeholder", "common.select_teams");
+
+ const options = screen.getAllByRole("option");
+ expect(options).toHaveLength(2);
+ expect(options[0]).toHaveTextContent("Development Team");
+ expect(options[1]).toHaveTextContent("Marketing Team");
+ });
+
+ test("hides team selection when canDoRoleManagement is false", async () => {
+ render();
+
+ await waitFor(() => {
+ expect(screen.queryByTestId("multi-select")).not.toBeInTheDocument();
+ });
+ });
+
+ test("hides team selection when no teams exist", async () => {
+ vi.mocked(getTeamsByOrganizationIdAction).mockResolvedValue({
+ data: [],
+ } as any);
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.queryByTestId("multi-select")).not.toBeInTheDocument();
+ });
+ });
+
+ test("handles teams fetch error", async () => {
+ const errorMessage = "Failed to fetch teams";
+ vi.mocked(getTeamsByOrganizationIdAction).mockResolvedValue({
+ serverError: "Failed to fetch teams",
+ } as any);
+ vi.mocked(getFormattedErrorMessage).mockReturnValue(errorMessage);
+
+ render();
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith(errorMessage);
+ });
+ });
+
+ test("submits form with project name only when no teams selected", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(createProjectAction).mockResolvedValue({ data: mockProject } as any);
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ const submitButton = screen.getByTestId("button-submit");
+ await user.click(submitButton);
+
+ await waitFor(() => {
+ expect(createProjectAction).toHaveBeenCalledWith({
+ organizationId: "org-123",
+ data: {
+ name: "Test Project",
+ teamIds: [],
+ },
+ });
+ });
+ });
+
+ test("submits form with selected teams", async () => {
+ const user = userEvent.setup();
+
+ // Update form mock to return teams
+ currentFormMock = createFormMock();
+ currentFormMock.handleSubmit = vi.fn((onSubmit) => (e: any) => {
+ e.preventDefault();
+ onSubmit({ name: "Test Project", teamIds: ["team-1", "team-2"] });
+ });
+
+ vi.mocked(createProjectAction).mockResolvedValue({ data: mockProject } as any);
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ expect(screen.getByTestId("multi-select")).toBeInTheDocument();
+ });
+
+ const submitButton = screen.getByTestId("button-submit");
+ await user.click(submitButton);
+
+ await waitFor(() => {
+ expect(createProjectAction).toHaveBeenCalledWith({
+ organizationId: "org-123",
+ data: {
+ name: "Test Project",
+ teamIds: ["team-1", "team-2"],
+ },
+ });
+ });
+ });
+
+ test("shows success message and redirects on successful creation", async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(createProjectAction).mockResolvedValue({ data: mockProject } as any);
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ const submitButton = screen.getByTestId("button-submit");
+ await user.click(submitButton);
+
+ await waitFor(() => {
+ expect(createProjectAction).toHaveBeenCalled();
+ });
+
+ await waitFor(() => {
+ expect(toast.success).toHaveBeenCalledWith("Project created successfully");
+ expect(defaultProps.setOpen).toHaveBeenCalledWith(false);
+ expect(mockPush).toHaveBeenCalledWith("/environments/env-123/surveys");
+ });
+ });
+
+ test("shows error message on creation failure", async () => {
+ const user = userEvent.setup();
+ const errorMessage = "Project creation failed";
+
+ vi.mocked(createProjectAction).mockResolvedValue({
+ serverError: "Creation failed",
+ } as any);
+ vi.mocked(getFormattedErrorMessage).mockReturnValue(errorMessage);
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ const submitButton = screen.getByTestId("button-submit");
+ await user.click(submitButton);
+
+ await waitFor(() => {
+ expect(toast.error).toHaveBeenCalledWith(errorMessage);
+ });
+ });
+
+ test("closes modal and resets form when cancel button clicked", async () => {
+ const user = userEvent.setup();
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ const cancelButton = screen.getByTestId("button-button");
+ await user.click(cancelButton);
+
+ expect(defaultProps.setOpen).toHaveBeenCalledWith(false);
+ });
+
+ test("shows loading state during form submission", async () => {
+ // Mock loading state
+ currentFormMock = createFormMock({ isSubmitting: true });
+
+ vi.mocked(createProjectAction).mockImplementation(
+ () => new Promise((resolve) => setTimeout(() => resolve({ data: mockProject }), 100))
+ );
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ // Check that loading state is shown
+ const submitButton = screen.getByTestId("button-submit");
+ expect(submitButton).toHaveAttribute("data-loading", "true");
+ });
+
+ test("handles form validation errors", async () => {
+ const user = userEvent.setup();
+
+ // Mock form with validation error - don't call onSubmit
+ currentFormMock = createFormMock({ shouldCallOnSubmit: false });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("input")).toBeInTheDocument();
+ });
+
+ const submitButton = screen.getByTestId("button-submit");
+ await user.click(submitButton);
+
+ // Form should not submit if validation fails
+ expect(createProjectAction).not.toHaveBeenCalled();
+ });
+
+ test("closes modal when dialog background is clicked", async () => {
+ const user = userEvent.setup();
+
+ render();
+
+ const dialog = screen.getByTestId("dialog");
+ await user.click(dialog);
+
+ expect(defaultProps.setOpen).toHaveBeenCalledWith(false);
+ });
+});
diff --git a/apps/web/modules/projects/components/create-project-modal/index.tsx b/apps/web/modules/projects/components/create-project-modal/index.tsx
new file mode 100644
index 0000000000..4d1ac0cefb
--- /dev/null
+++ b/apps/web/modules/projects/components/create-project-modal/index.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";
+import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { getTeamsByOrganizationIdAction } from "@/modules/projects/settings/actions";
+import { Button } from "@/modules/ui/components/button";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/modules/ui/components/dialog";
+import {
+ FormControl,
+ FormError,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormProvider,
+} from "@/modules/ui/components/form";
+import { Input } from "@/modules/ui/components/input";
+import { MultiSelect } from "@/modules/ui/components/multi-select";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslate } from "@tolgee/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { z } from "zod";
+import { ZProject } from "@formbricks/types/project";
+
+const ZCreateProjectForm = z.object({
+ name: ZProject.shape.name,
+ teamIds: z.array(z.string()).optional(),
+});
+
+type TCreateProjectForm = z.infer;
+
+interface CreateProjectModalProps {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ organizationId: string;
+ canDoRoleManagement: boolean;
+}
+
+export const CreateProjectModal = ({
+ open,
+ setOpen,
+ organizationId,
+ canDoRoleManagement,
+}: CreateProjectModalProps) => {
+ const { t } = useTranslate();
+ const router = useRouter();
+
+ const [organizationTeams, setOrganizationTeams] = useState([]);
+
+ useEffect(() => {
+ const fetchOrganizationTeams = async () => {
+ const response = await getTeamsByOrganizationIdAction({ organizationId });
+ if (response?.data) {
+ setOrganizationTeams(response.data);
+ } else {
+ const errorMessage = getFormattedErrorMessage(response);
+ toast.error(errorMessage);
+ }
+ };
+ fetchOrganizationTeams();
+ }, [organizationId]);
+
+ const form = useForm({
+ resolver: zodResolver(ZCreateProjectForm),
+ defaultValues: {
+ name: "",
+ teamIds: [],
+ },
+ });
+
+ const { isSubmitting } = form.formState;
+
+ const organizationTeamsOptions = organizationTeams.map((team) => ({
+ label: team.name,
+ value: team.id,
+ }));
+
+ const onSubmit = async (data: TCreateProjectForm) => {
+ const createProjectResponse = await createProjectAction({
+ organizationId,
+ data: {
+ name: data.name,
+ teamIds: data.teamIds || [],
+ },
+ });
+
+ if (createProjectResponse?.data) {
+ // Get production environment
+ const productionEnvironment = createProjectResponse.data.environments.find(
+ (environment) => environment.type === "production"
+ );
+
+ if (productionEnvironment) {
+ toast.success("Project created successfully");
+ setOpen(false);
+ form.reset();
+ // Redirect to the new project's surveys page
+ router.push(`/environments/${productionEnvironment.id}/surveys`);
+ }
+ } else {
+ const errorMessage = getFormattedErrorMessage(createProjectResponse);
+ toast.error(errorMessage);
+ }
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ form.reset();
+ };
+
+ return (
+
+ );
+};
diff --git a/apps/web/modules/projects/components/project-switcher/index.test.tsx b/apps/web/modules/projects/components/project-switcher/index.test.tsx
index c8cf003753..628b78753c 100644
--- a/apps/web/modules/projects/components/project-switcher/index.test.tsx
+++ b/apps/web/modules/projects/components/project-switcher/index.test.tsx
@@ -1,3 +1,4 @@
+import { TOrganizationTeam } from "@/modules/ee/teams/team-list/types/team";
import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, test, vi } from "vitest";
@@ -49,6 +50,20 @@ vi.mock("@/modules/projects/components/project-limit-modal", () => ({
) : null,
}));
+vi.mock("@/modules/projects/components/create-project-modal", () => ({
+ CreateProjectModal: ({ open, setOpen, organizationId, organizationTeams, canDoRoleManagement }: any) =>
+ open ? (
+
+
+
{organizationId}
+
{organizationTeams?.length || 0}
+
{canDoRoleManagement.toString()}
+