diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox.d.ts index afb744f6cd5..ef570a82355 100644 --- a/packages/types/src/inbox.d.ts +++ b/packages/types/src/inbox.d.ts @@ -96,3 +96,9 @@ export type TInboxIssuePaginationInfo = TPaginationInfo & { export type TInboxIssueWithPagination = TInboxIssuePaginationInfo & { results: TInboxIssue[]; }; + +export type TInboxForm = { + anchor: string; + id: string; + is_disabled: boolean; +}; diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx index 30a168965fd..4860a25a89a 100644 --- a/packages/ui/src/popovers/popover.tsx +++ b/packages/ui/src/popovers/popover.tsx @@ -18,6 +18,7 @@ export const Popover = (props: TPopover) => { panelClassName = "", children, popoverButtonRef, + buttonRefClassName = "", } = props; // states const [referenceElement, setReferenceElement] = useState(null); @@ -38,7 +39,7 @@ export const Popover = (props: TPopover) => { return ( -
+
} className={cn( diff --git a/packages/ui/src/popovers/types.ts b/packages/ui/src/popovers/types.ts index 51b1e877a52..7801e2d8536 100644 --- a/packages/ui/src/popovers/types.ts +++ b/packages/ui/src/popovers/types.ts @@ -5,6 +5,7 @@ export type TPopoverButtonDefaultOptions = { // button and button styling button?: ReactNode; buttonClassName?: string; + buttonRefClassName?: string; disabled?: boolean; }; diff --git a/space/app/intake/[anchor]/layout.tsx b/space/app/intake/[anchor]/layout.tsx new file mode 100644 index 00000000000..5c642d1a06a --- /dev/null +++ b/space/app/intake/[anchor]/layout.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { observer } from "mobx-react"; +import Image from "next/image"; +import useSWR from "swr"; +// components +import { LogoSpinner } from "@/components/common"; +import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error"; +// hooks +import { usePublish, usePublishList } from "@/hooks/store"; +// Plane web +import { ViewNavbarRoot } from "@/plane-web/components/navbar"; +import { useView } from "@/plane-web/hooks/store"; +// assets +import planeLogo from "@/public/plane-logo.svg"; + +type Props = { + children: React.ReactNode; + params: { + anchor: string; + }; +}; + +const IntakeLayout = observer((props: Props) => { + const { children, params } = props; + // params + const { anchor } = params; + // store hooks + const { fetchPublishSettings } = usePublishList(); + const { viewData, fetchViewDetails } = useView(); + const publishSettings = usePublish(anchor); + + // fetch publish settings && view details + const { error } = useSWR( + anchor ? `PUBLISHED_VIEW_SETTINGS_${anchor}` : null, + anchor + ? async () => { + const promises = []; + promises.push(fetchPublishSettings(anchor)); + promises.push(fetchViewDetails(anchor)); + await Promise.all(promises); + } + : null + ); + + if (error) return ; + + if (!publishSettings || !viewData) return ; + + return ( + + ); +}); + +export default IntakeLayout; diff --git a/space/app/intake/[anchor]/page.tsx b/space/app/intake/[anchor]/page.tsx new file mode 100644 index 00000000000..f763d68d749 --- /dev/null +++ b/space/app/intake/[anchor]/page.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { observer } from "mobx-react"; +// hooks +import CreateIssueModal from "@/components/intake/create/create-issue-modal"; +import { usePublish } from "@/hooks/store"; + +type Props = { + params: { + anchor: string; + }; +}; + +const IssuesPage = observer((props: Props) => { + const { params } = props; + const { anchor } = params; + // params + + const publishSettings = usePublish(anchor); + + if (!publishSettings?.project_details) return null; + + return ; +}); + +export default IssuesPage; diff --git a/space/core/components/intake/create/create-issue-modal.tsx b/space/core/components/intake/create/create-issue-modal.tsx new file mode 100644 index 00000000000..a1f2daffc19 --- /dev/null +++ b/space/core/components/intake/create/create-issue-modal.tsx @@ -0,0 +1,36 @@ +import { FormProvider, useForm } from "react-hook-form"; +import { IProject } from "@plane/types"; +import { Card, ECardSpacing } from "@plane/ui"; +import IssueForm from "./form"; +import FormSuccess from "./success"; + +type TProps = { + project: Partial; +}; +const CreateIssueModal = ({ project }: TProps) => { + // form data + const methods = useForm(); + const { + formState: { isSubmitting, isSubmitted }, + handleSubmit, + } = methods; + if (!project) return null; + + const onSubmit = async (data) => { + console.log(data); + }; + + return ( + + {!isSubmitted && ( + +
+ + +
+ )} + {isSubmitted && } + + ); +}; +export default CreateIssueModal; diff --git a/space/core/components/intake/create/form.tsx b/space/core/components/intake/create/form.tsx new file mode 100644 index 00000000000..883fabc0f18 --- /dev/null +++ b/space/core/components/intake/create/form.tsx @@ -0,0 +1,96 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { Controller, useFormContext } from "react-hook-form"; +import { IProject } from "@plane/types"; +import { Button, Input, TextArea } from "@plane/ui"; +import { ProjectLogo } from "@/components/common"; +import { useUser } from "@/hooks/store"; + +type TProps = { + project: Partial; + isSubmitting: boolean; +}; + +const IssueForm = ({ project, isSubmitting }: TProps) => { + const { + formState: { errors }, + control, + } = useFormContext(); + const pathName = usePathname(); + + // hooks + const { data: currentUser } = useUser(); + return ( + <> +
+
+

Create Issue

+
+ This issue will be added to the intake of the project + + {project.logo_props && } + {project.name} + +
+
+
+ ( + + )} + /> + {errors?.name?.message?.toString()} +
+
+ ( +