import React from "react"; import { Controller, useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; // hooks import { useUser } from "hooks/store"; // components import { Invitations, OnboardingSidebar, OnboardingStepIndicator, Workspace } from "components/onboarding"; // types import { IWorkspace, TOnboardingSteps } from "@plane/types"; type Props = { finishOnboarding: () => Promise<void>; stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>; setTryDiffAccount: () => void; }; export const JoinWorkspaces: React.FC<Props> = observer((props) => { const { stepChange, setTryDiffAccount } = props; // store hooks const { currentUser } = useUser(); // form info const { handleSubmit, control, setValue, watch, formState: { errors, isSubmitting }, } = useForm<IWorkspace>({ defaultValues: { name: "", slug: "", }, mode: "onChange", }); const handleNextStep = async () => { if (!currentUser) return; await stepChange({ workspace_join: true, workspace_create: true }); }; return ( <div className="flex w-full"> <div className="fixed hidden h-full w-1/5 max-w-[320px] lg:block"> <Controller control={control} name="name" render={({ field: { value } }) => ( <OnboardingSidebar watch={watch} setValue={setValue} control={control} showProject={false} workspaceName={value.length > 0 ? value : "New Workspace"} /> )} /> </div> <div className="ml-auto w-full lg:w-2/3 "> <div className="mx-auto my-16 w-full px-7 lg:w-4/5 lg:px-0"> <div className="flex items-center justify-between"> <p className="text-xl font-semibold text-onboarding-text-200 sm:text-2xl">What will your workspace be?</p> <OnboardingStepIndicator step={1} /> </div> <Workspace stepChange={stepChange} user={currentUser ?? undefined} control={control} handleSubmit={handleSubmit} setValue={setValue} errors={errors} isSubmitting={isSubmitting} /> <div className="my-8 flex items-center md:w-1/2"> <hr className="w-full border-onboarding-border-100" /> <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">Or</p> <hr className="w-full border-onboarding-border-100" /> </div> <div className="w-full"> <Invitations setTryDiffAccount={setTryDiffAccount} handleNextStep={handleNextStep} /> </div> </div> </div> </div> ); });