Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/project/create-project-modal.tsx

@@ -0,0 +1,81 @@
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { getAssetIdFromUrl, checkURLValidity } from "@plane/utils";
+// plane ui
+// helpers
+// hooks
+import useKeypress from "@/hooks/use-keypress";
+// plane web components
+import { CreateProjectForm } from "@/plane-web/components/projects/create/root";
+// plane web types
+import type { TProject } from "@/plane-web/types/projects";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+import { ProjectFeatureUpdate } from "./project-feature-update";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+  data?: Partial<TProject>;
+  templateId?: string;
+};
+
+enum EProjectCreationSteps {
+  CREATE_PROJECT = "CREATE_PROJECT",
+  FEATURE_SELECTION = "FEATURE_SELECTION",
+}
+
+export const CreateProjectModal: FC<Props> = (props) => {
+  const { isOpen, onClose, setToFavorite = false, workspaceSlug, data, templateId } = props;
+  // states
+  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
+  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentStep(EProjectCreationSteps.CREATE_PROJECT);
+      setCreatedProjectId(null);
+    }
+  }, [isOpen]);
+
+  const handleNextStep = (projectId: string) => {
+    if (!projectId) return;
+    setCreatedProjectId(projectId);
+    setCurrentStep(EProjectCreationSteps.FEATURE_SELECTION);
+  };
+
+  const handleCoverImageStatusUpdate = async (projectId: string, coverImage: string) => {
+    if (!checkURLValidity(coverImage)) {
+      await fileService.updateBulkProjectAssetsUploadStatus(workspaceSlug, projectId, projectId, {
+        asset_ids: [getAssetIdFromUrl(coverImage)],
+      });
+    }
+  };
+
+  useKeypress("Escape", () => {
+    if (isOpen) onClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+        <CreateProjectForm
+          setToFavorite={setToFavorite}
+          workspaceSlug={workspaceSlug}
+          onClose={onClose}
+          updateCoverImageStatus={handleCoverImageStatusUpdate}
+          handleNextStep={handleNextStep}
+          data={data}
+          templateId={templateId}
+        />
+      )}
+      {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+        <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+      )}
+    </ModalCore>
+  );
+};