Create New Team (#4450)

* Add link to new teams * Create new team * Invite team members * Bug fix * Tidy up settings calendars (#4430) * feat: 4232 - new theme toggle design. (#4371) Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> * fix: Select dropdown styling (#4358) * fix: select dropdown styling * change check icon * Revert select component, update v2 select * Updates the background color to match figma design Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Fix input height 36px (#4425) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Fix crash due to some props being undefined (#4427) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Improve event type item description visibility (#4404) * Make event type description more visible * Delete unneeded import Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Updating language in settings needs a reload to be translated (#4431) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Grace Nshokano <grace.devolop@gmail.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix: remove i18n from title and description (#4354) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> * Fix styles and remove temporarily elements (#4448) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Fix deletion of route (#4466) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat: make toggle button default (#4437) * feat: make switch default * fix: refetch invalidated query * React-query caching the previous isDefault state. * fix: switch label color Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Refactor skeleton loader files to v2 folders (#4447) * create v2 skeleton loaders * add depreciation notice to old skeleton loader files Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Adds rescheduling dropdown to past unconfirmed bookings (#3726) Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix: add a consistent key to the day ranges list (#4401) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * remove "Weve changed billing for teams" banner in teams (#4432) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: Grace Nshokano <grace.devolop@gmail.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix: remove name prop from NumberWidget (#4346) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Fix bug * Fix bug * Squashed commit of the following: commit c3cb839 Author: Bailey Pumfleet <pumfleet@hey.com> Date: Wed Sep 14 17:13:13 2022 +0100 Remove outline from user dropdown trigger (#4470) commit 91c39a0 Author: Sascha Schworm <1959209+saschaschworm@users.noreply.github.com> Date: Wed Sep 14 18:09:00 2022 +0200 feat: Exchange with NTLM support (#4127) * add exchange package * fix conflicts * add setup page for v2 * refactor setup page for v1 * return exchange error messages to user if applicable Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> commit f1c15f4 Author: alannnc <alannnc@gmail.com> Date: Wed Sep 14 10:57:20 2022 -0500 4382 onboarding fix the disabled state of the username in step 1 (#4451) * Convert username availability premium to v2 * Update Username Availability to v2 design Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 3f29df1 Author: Alex van Andel <me@alexvanandel.com> Date: Wed Sep 14 16:40:56 2022 +0100 KBar included @calcom/ui/v2/core -> Shell -> KBar -> Shell -> ... (#4469) commit 3a06947 Author: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Date: Wed Sep 14 19:14:42 2022 +0530 fixes active state of select options (#4456) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit f486b02 Author: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Wed Sep 14 17:28:59 2022 +0530 fix: remove name prop from NumberWidget (#4346) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 9bc2676 Author: GitStart <1501599+gitstart@users.noreply.github.com> Date: Wed Sep 14 12:41:47 2022 +0100 remove "Weve changed billing for teams" banner in teams (#4432) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: Grace Nshokano <grace.devolop@gmail.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 5c72aa3 Author: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Wed Sep 14 17:00:25 2022 +0530 fix: add a consistent key to the day ranges list (#4401) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 09da911 Author: Dallen Pyrah <dallenpyrah@gmail.com> Date: Wed Sep 14 05:02:26 2022 -0600 Adds rescheduling dropdown to past unconfirmed bookings (#3726) Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 2fbaec4 Author: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Wed Sep 14 06:35:40 2022 -0400 Refactor skeleton loader files to v2 folders (#4447) * create v2 skeleton loaders * add depreciation notice to old skeleton loader files Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 3bada22 Author: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Wed Sep 14 15:54:41 2022 +0530 feat: make toggle button default (#4437) * feat: make switch default * fix: refetch invalidated query * React-query caching the previous isDefault state. * fix: switch label color Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 4505955 Author: Hariom Balhara <hariombalhara@gmail.com> Date: Wed Sep 14 15:40:52 2022 +0530 Fix deletion of route (#4466) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 8b69359 Author: alannnc <alannnc@gmail.com> Date: Wed Sep 14 04:55:49 2022 -0500 Fix styles and remove temporarily elements (#4448) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit b457125 Author: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Date: Wed Sep 14 15:12:48 2022 +0530 fix: remove i18n from title and description (#4354) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> commit 01e0fed Author: GitStart <1501599+gitstart@users.noreply.github.com> Date: Wed Sep 14 10:28:23 2022 +0100 Updating language in settings needs a reload to be translated (#4431) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Grace Nshokano <grace.devolop@gmail.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit c09107c Author: Noah <hi@noahflk.com> Date: Wed Sep 14 11:08:50 2022 +0200 Improve event type item description visibility (#4404) * Make event type description more visible * Delete unneeded import Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 2f9905e Author: Hariom Balhara <hariombalhara@gmail.com> Date: Wed Sep 14 14:16:42 2022 +0530 Fix crash due to some props being undefined (#4427) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit ab4d910 Author: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed Sep 14 09:18:40 2022 +0100 Fix input height 36px (#4425) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> commit 34bca49 Author: John Afolabi <johnafolabi.da@gmail.com> Date: Wed Sep 14 08:27:00 2022 +0100 fix: Select dropdown styling (#4358) * fix: select dropdown styling * change check icon * Revert select component, update v2 select * Updates the background color to match figma design Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> commit 0907d15 Author: Jeroen Reumkens <hello@jeroenreumkens.nl> Date: Wed Sep 14 09:15:13 2022 +0200 feat: 4232 - new theme toggle design. (#4371) Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> commit 6f80793 Author: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Tue Sep 13 21:13:24 2022 +0100 Tidy up settings calendars (#4430) * Fix types * Cleanup Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: John Afolabi <johnafolabi.da@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Noah <hi@noahflk.com> Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com> Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Grace Nshokano <grace.devolop@gmail.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: Nafees Nazik <84864519+G3root@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Dallen Pyrah <dallenpyrah@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
calcom · Sep 15, 2022 · 0c78dbe · 0c78dbe
1 parent 7a95e71
commit 0c78dbe
Show file tree

Hide file tree

Showing 9 changed files with 445 additions and 101 deletions.
diff --git a/apps/web/pages/v2/settings/teams/new/[[...step]].tsx 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<number>();
+
+  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 (
+    <div
+      className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black"
+      data-testid="onboarding"
+      key={router.asPath}>
+      <Head>
+        <title>{t("create_a_new_team")}</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <div className="mx-auto px-4 py-24">
+        <div className="relative">
+          <div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
+            <div className="mx-auto sm:max-w-[520px]">
+              <header>
+                <p className="font-cal mb-3 text-[28px] font-medium leading-7">
+                  {headers[currentStepIndex]?.title || "Undefined title"}
+                </p>
+
+                <p className="font-sans text-sm font-normal text-gray-500">
+                  {headers[currentStepIndex]?.subtitle}
+                </p>
+              </header>
+              <Steps maxSteps={steps.length} currentStep={currentStepIndex} navigateToStep={goToIndex} />
+            </div>
+            <StepCard>
+              {currentStep === "create-a-new-team" && (
+                <CreateNewTeam
+                  nextStep={() => {
+                    goToIndex(1);
+                  }}
+                  setTeamId={(teamId: number) => setTeamId(teamId)}
+                />
+              )}
+
+              {/* {currentStep === "general-settings" && (
+                <TeamGeneralSettings teamId={teamId} nextStep={() => goToIndex(2)} />
+              )} */}
+
+              {currentStep === "add-team-members" && teamId && <AddNewTeamMembers teamId={teamId} />}
+            </StepCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateNewTeamPage;
diff --git 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
@@ -66,20 +66,19 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
 
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onExit}>
-      <DialogContent type="creation" useOwnActionButtons>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-            <Icon.FiUser className="text-brandcontrast h-6 w-6" />
-          </div>
-          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-              {t("invite_new_member")}
-            </h3>
-            <div>
-              <p className="text-sm text-gray-400">{t("invite_new_team_member")}</p>
-            </div>
-          </div>
-        </div>
+      <DialogContent
+        type="creation"
+        useOwnActionButtons
+        title={t("invite_new_member")}
+        description={
+          <span className=" text-sm leading-tight text-gray-500">
+            Note: This will <span className="font-medium text-gray-900">cost an extra seat ($12/m)</span> on
+            your subscription if this invitee does not have a pro account.{" "}
+            <a href="#" className="underline">
+              Learn More
+            </a>
+          </span>
+        }>
         <form onSubmit={inviteMember}>
           <div className="space-y-4">
             <TextField
@@ -117,16 +116,6 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 </label>
               </div>
             </div>
-            <div className="flex flex-row rounded-md bg-gray-50 px-3 py-2">
-              <Icon.FiInfo className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
-              <span className="ml-2 text-sm leading-tight text-gray-500">
-                Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
-                a pro account.{" "}
-                {/* <a href="#" className="underline">
-                  Learn More
-                </a> */}
-              </span>
-            </div>
           </div>
           {errorMessage && (
             <p className="text-sm text-red-700">

diff --git a/packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx 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 (
+    <SkeletonContainer className="rounded-md border">
+      <div className="flex w-full justify-between p-4">
+        <div>
+          <p className="text-sm font-medium text-gray-900">
+            <SkeletonText className="h-4 w-56" />
+          </p>
+          <div className="mt-2.5 w-max">
+            <SkeletonText className="h-5 w-28" />
+          </div>
+        </div>
+      </div>
+    </SkeletonContainer>
+  );
+};
+
+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 <AddNewTeamMemberSkeleton />;
+
+  return (
+    <Suspense fallback={<AddNewTeamMemberSkeleton />}>
+      <>
+        <>
+          <ul className="rounded-md border">
+            {team?.members.map((member, index) => (
+              <li
+                key={member.id}
+                className={classNames(
+                  "flex items-center justify-between p-6 text-sm",
+                  index !== 0 && "border-t"
+                )}>
+                <div className="flex space-x-2">
+                  <Avatar
+                    gravatarFallbackMd5="teamMember"
+                    size="mdLg"
+                    imageSrc={member?.avatar}
+                    alt="owner-avatar"
+                  />
+                  <div>
+                    <div className="flex space-x-1">
+                      <p>{member?.name || t("team_member")}</p>
+                      {/* Assume that the first member of the team is the creator */}
+                      {index === 0 && <Badge variant="green">{t("you")}</Badge>}
+                      {!member.accepted && <Badge variant="orange">{t("pending")}</Badge>}
+                      {member.role === "MEMBER" && <Badge variant="gray">{t("member")}</Badge>}
+                      {member.role === "ADMIN" && <Badge variant="default">{t("admin")}</Badge>}
+                    </div>
+                    {member.username ? (
+                      <p className="text-gray-600">{`${WEBAPP_URL}/${member?.username}`}</p>
+                    ) : (
+                      <p className="text-gray-600">{t("not_on_cal")}</p>
+                    )}
+                  </div>
+                </div>
+                {member.role !== "OWNER" && (
+                  <Button
+                    StartIcon={Icon.FiTrash2}
+                    size="icon"
+                    color="secondary"
+                    className="h-[36px] w-[36px]"
+                    onClick={() => removeMemberMutation.mutate({ teamId: props.teamId, memberId: member.id })}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+
+          <Button
+            type="submit"
+            color="secondary"
+            StartIcon={Icon.FiPlus}
+            onClick={() => setMemberInviteModal(true)}
+            className="mt-6 w-full justify-center">
+            {t("add_team_member")}
+          </Button>
+        </>
+
+        {team && (
+          <MemberInvitationModal
+            isOpen={memberInviteModal}
+            onExit={() => setMemberInviteModal(false)}
+            team={team}
+            currentMember={team?.membership.role}
+          />
+        )}
+
+        <hr className="my-6  border-neutral-200" />
+
+        <Button
+          EndIcon={Icon.FiArrowRight}
+          className="mt-6 w-full justify-center"
+          href={`${WEBAPP_URL}/settings/teams/${props.teamId}/profile`}>
+          {t("finish")}
+        </Button>
+      </>
+    </Suspense>
+  );
+};
+
+export default AddNewTeamMembers;