diff --git a/apps/web/pages/v2/settings/teams/new/[[...step]].tsx b/apps/web/pages/v2/settings/teams/new/[[...step]].tsx new file mode 100644 index 0000000000..dffcd03c64 --- /dev/null +++ b/apps/web/pages/v2/settings/teams/new/[[...step]].tsx @@ -0,0 +1,114 @@ +import Head from "next/head"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { z } from "zod"; + +// import TeamGeneralSettings from "@calcom/features/teams/createNewTeam/TeamGeneralSettings"; +import AddNewTeamMembers from "@calcom/features/ee/teams/components/v2/AddNewTeamMembers"; +import CreateNewTeam from "@calcom/features/ee/teams/components/v2/CreateNewTeam"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; + +import { StepCard } from "@components/getting-started/components/StepCard"; +import { Steps } from "@components/getting-started/components/Steps"; + +const INITIAL_STEP = "create-a-new-team"; +// TODO: Add teams general settings "general-settings" +const steps = ["create-a-new-team", "add-team-members"] as const; + +const stepTransform = (step: typeof steps[number]) => { + const stepIndex = steps.indexOf(step); + if (stepIndex > -1) { + return steps[stepIndex]; + } + return INITIAL_STEP; +}; + +const stepRouteSchema = z.object({ + step: z.array(z.enum(steps)).default([INITIAL_STEP]), +}); + +const CreateNewTeamPage = () => { + const router = useRouter(); + + const { t } = useLocale(); + const [teamId, setTeamId] = useState(); + + const result = stepRouteSchema.safeParse(router.query); + const currentStep = result.success ? result.data.step[0] : INITIAL_STEP; + + const headers = [ + { + title: `${t("create_a_new_team")}`, + subtitle: [`${t("create_a_new_team_description")}`], + }, + // { + // title: `${t("general_settings")}`, + // subtitle: [`${t("general_settings_description")}`], + // }, + { + title: `${t("add_team_members")}`, + subtitle: [`${t("add_team_members_description")}`], + }, + ]; + + const goToIndex = (index: number) => { + const newStep = steps[index]; + router.push( + { + pathname: `/settings/teams/new/${stepTransform(newStep)}`, + }, + undefined + ); + }; + + const currentStepIndex = steps.indexOf(currentStep); + + return ( +
+ + {t("create_a_new_team")} + + + +
+
+
+
+
+

+ {headers[currentStepIndex]?.title || "Undefined title"} +

+ +

+ {headers[currentStepIndex]?.subtitle} +

+
+ +
+ + {currentStep === "create-a-new-team" && ( + { + goToIndex(1); + }} + setTeamId={(teamId: number) => setTeamId(teamId)} + /> + )} + + {/* {currentStep === "general-settings" && ( + goToIndex(2)} /> + )} */} + + {currentStep === "add-team-members" && teamId && } + +
+
+
+
+ ); +}; + +export default CreateNewTeamPage; diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 0b732f3a8b..9d658d6fde 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -498,7 +498,7 @@ "lets_create_first_administrator_user": "Let's create the first administrator user.", "new_member": "New Member", "invite": "Invite", - "invite_new_member": "Invite a new member", + "invite_new_member": "Invite a new team member", "invite_new_team_member": "Invite someone to your team.", "change_member_role": "Change team member role", "disable_cal_branding": "Disable Cal branding", @@ -1240,6 +1240,7 @@ "password_updated":"Password updated!", "pending_payment": "Pending payment", "confirmation_page_rainbow": "Token gate your event with tokens or NFTs on Ethereum, Polygon, and more.", + "not_on_cal": "Not on Cal.com", "no_calendar_installed": "No calendar installed", "no_calendar_installed_description": "You have not yet connected any of your calendars", "add_a_calendar": "Add a calendar" diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx index 33d9d0d05c..26096e5bdb 100644 --- a/packages/features/ee/teams/components/MemberInvitationModal.tsx +++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx @@ -66,20 +66,19 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps) return ( - -
-
- -
-
- -
-

{t("invite_new_team_member")}

-
-
-
+ + Note: This will cost an extra seat ($12/m) on + your subscription if this invitee does not have a pro account.{" "} + + Learn More + + + }>
-
-
{errorMessage && (

diff --git a/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx new file mode 100644 index 0000000000..c61a5e2403 --- /dev/null +++ b/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx @@ -0,0 +1,125 @@ +import { Suspense, useState } from "react"; + +import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberInvitationModal"; +import { classNames } from "@calcom/lib"; +import { WEBAPP_URL } from "@calcom/lib/constants"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { trpc } from "@calcom/trpc/react"; +import { Icon } from "@calcom/ui"; +import { Button, Avatar, Badge } from "@calcom/ui/v2"; +import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2"; + +const AddNewTeamMemberSkeleton = () => { + return ( + +

+
+

+ +

+
+ +
+
+
+ + ); +}; + +const AddNewTeamMembers = (props: { teamId: number }) => { + const { t } = useLocale(); + const utils = trpc.useContext(); + + const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: props.teamId }]); + const removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", { + onSuccess() { + utils.invalidateQueries(["viewer.teams.get", { teamId: props.teamId }]); + utils.invalidateQueries(["viewer.teams.list"]); + }, + }); + + const [memberInviteModal, setMemberInviteModal] = useState(false); + + if (isLoading) return ; + + return ( + }> + <> + <> +
    + {team?.members.map((member, index) => ( +
  • +
    + +
    +
    +

    {member?.name || t("team_member")}

    + {/* Assume that the first member of the team is the creator */} + {index === 0 && {t("you")}} + {!member.accepted && {t("pending")}} + {member.role === "MEMBER" && {t("member")}} + {member.role === "ADMIN" && {t("admin")}} +
    + {member.username ? ( +

    {`${WEBAPP_URL}/${member?.username}`}

    + ) : ( +

    {t("not_on_cal")}

    + )} +
    +
    + {member.role !== "OWNER" && ( +
    • + ))} +
+ + + + + {team && ( + setMemberInviteModal(false)} + team={team} + currentMember={team?.membership.role} + /> + )} + +
+ + + + + ); +}; + +export default AddNewTeamMembers; diff --git a/packages/features/ee/teams/components/v2/CreateNewTeam.tsx b/packages/features/ee/teams/components/v2/CreateNewTeam.tsx new file mode 100644 index 0000000000..204279a69e --- /dev/null +++ b/packages/features/ee/teams/components/v2/CreateNewTeam.tsx @@ -0,0 +1,102 @@ +import { useForm, Controller } from "react-hook-form"; + +import { WEBAPP_URL } from "@calcom/lib/constants"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { trpc } from "@calcom/trpc/react"; +import { Icon } from "@calcom/ui"; +import { Button, Avatar } from "@calcom/ui/v2"; +import ImageUploader from "@calcom/ui/v2/core/ImageUploader"; +import { Form, TextField } from "@calcom/ui/v2/core/form/fields"; + +const CreateANewTeamForm = (props: { nextStep: () => void; setTeamId: (teamId: number) => void }) => { + const { t } = useLocale(); + const utils = trpc.useContext(); + + const createTeamMutation = trpc.useMutation("viewer.teams.create", { + onSuccess(data) { + utils.invalidateQueries(["viewer.teams.list"]); + props.setTeamId(data.id); + props.nextStep(); + }, + }); + + const formMethods = useForm(); + + return ( + { + createTeamMutation.mutate({ + name: values.name, + slug: values.slug || null, + logo: values.logo || null, + }); + }}> +
+ ( + { + formMethods.setValue("name", e?.target.value); + }} + /> + )} + /> +
+ +
+ ( + { + formMethods.setValue("slug", e?.target.value); + }} + /> + )} + /> +
+
+ ( +
+ +
+ { + formMethods.setValue("avatar", newAvatar); + }} + imageSrc={value} + /> +
+
+ )} + /> +
+ + {createTeamMutation.isError &&

{createTeamMutation.error.message}

} + + ); +}; + +export default CreateANewTeamForm; diff --git a/packages/lib/server/queries/teams/index.ts b/packages/lib/server/queries/teams/index.ts index 52eff691b8..26baea66da 100644 --- a/packages/lib/server/queries/teams/index.ts +++ b/packages/lib/server/queries/teams/index.ts @@ -12,6 +12,7 @@ export async function getTeamWithMembers(id?: number, slug?: string) { id: true, plan: true, bio: true, + avatar: true, }); const teamSelect = Prisma.validator()({ diff --git a/packages/trpc/server/routers/viewer/teams.tsx b/packages/trpc/server/routers/viewer/teams.tsx index 046b8306c9..0ff27f690d 100644 --- a/packages/trpc/server/routers/viewer/teams.tsx +++ b/packages/trpc/server/routers/viewer/teams.tsx @@ -79,13 +79,15 @@ export const viewerTeamsRouter = createProtectedRouter() .mutation("create", { input: z.object({ name: z.string(), + slug: z.string().optional().nullable(), + logo: z.string().optional().nullable(), }), async resolve({ ctx, input }) { if (ctx.user.plan === "FREE") { throw new TRPCError({ code: "UNAUTHORIZED", message: "You need a team plan." }); } - const slug = slugify(input.name); + const slug = input.slug || slugify(input.name); const nameCollisions = await ctx.prisma.team.count({ where: { @@ -100,6 +102,7 @@ export const viewerTeamsRouter = createProtectedRouter() data: { name: input.name, slug: slug, + logo: input.logo || null, }, }); @@ -114,6 +117,8 @@ export const viewerTeamsRouter = createProtectedRouter() // Sync Services: Close.com closeComUpsertTeamUser(createTeam, ctx.user, MembershipRole.OWNER); + + return createTeam; }, }) // Allows team owner to update team metadata diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx index 8996eb1ed4..4cda477eb3 100644 --- a/packages/ui/v2/core/Dialog.tsx +++ b/packages/ui/v2/core/Dialog.tsx @@ -64,7 +64,7 @@ type DialogContentProps = React.ComponentProps { const tabsWithPermissions = useTabs(); const [teamMenuState, setTeamMenuState] = useState<{ teamId: number | undefined; teamMenuOpen: boolean }[]>(); + const [isLoading, setIsLoading] = useState(true); const { data: teams } = trpc.useQuery(["viewer.teams.list"]); @@ -159,23 +160,13 @@ const SettingsSidebarContainer = ({ className = "" }) => { {teams && teamMenuState && - teams.map((team, index: number) => ( - - setTeamMenuState([ - ...teamMenuState, - (teamMenuState[index] = { - ...teamMenuState[index], - teamMenuOpen: !teamMenuState[index].teamMenuOpen, - }), - ]) - }> - -
+ teams.map((team, index: number) => { + if (teamMenuState.some((teamState) => teamState.teamId === team.id)) + return ( + setTeamMenuState([ ...teamMenuState, (teamMenuState[index] = { @@ -184,74 +175,90 @@ const SettingsSidebarContainer = ({ className = "" }) => { }), ]) }> -
- {teamMenuState[index].teamMenuOpen ? ( - - ) : ( - + +
+ setTeamMenuState([ + ...teamMenuState, + (teamMenuState[index] = { + ...teamMenuState[index], + teamMenuOpen: !teamMenuState[index].teamMenuOpen, + }), + ]) + }> +
+ {teamMenuState[index].teamMenuOpen ? ( + + ) : ( + + )} +
+ {team.logo && ( + {team.name + )} +

{team.name}

+ {!team.accepted && ( + + Inv. + + )} +
+ + + {team.accepted && ( + )} -
- {team.logo && ( - {team.name - )} -

{team.name}

- {!team.accepted && ( - - Inv. - - )} -
- - - {team.accepted && ( - - )} - - {(team.role === MembershipRole.OWNER || team.role === MembershipRole.ADMIN) && ( - <> - {/* TODO */} - {/* + {/* TODO */} + {/* */} - - {/* TODO: Implement saml configuration page */} - {/* + {/* TODO: Implement saml configuration page */} + {/* */} - - )} - - - ))} -
- -

{t("add_a_team")}

-
+ + )} + + + ); + })} + );