From 42dbbf4773bf1891b1197795b8b5b8783b1150a0 Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Tue, 25 Oct 2022 12:48:28 -0600
Subject: [PATCH] Removes team creation modal

---
 apps/web/components/team/TeamCreateModal.tsx | 73 --------------------
 apps/web/pages/teams/index.tsx               | 14 ++--
 2 files changed, 6 insertions(+), 81 deletions(-)
 delete mode 100644 apps/web/components/team/TeamCreateModal.tsx

diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx
deleted file mode 100644
index a1dc2e9b3a..0000000000
--- a/apps/web/components/team/TeamCreateModal.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useRef, useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import { Alert } from "@calcom/ui/v2/core/Alert";
-import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/v2/core/Dialog";
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function TeamCreate(props: Props) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const [errorMessage, setErrorMessage] = useState<null | string>(null);
-  const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-
-  const createTeamMutation = trpc.useMutation("viewer.teams.create", {
-    onSuccess: () => {
-      utils.invalidateQueries(["viewer.teams.list"]);
-      props.onClose();
-    },
-    onError: (e) => {
-      setErrorMessage(e?.message || t("something_went_wrong"));
-    },
-  });
-
-  const createTeam = () => {
-    createTeamMutation.mutate({ name: nameRef?.current?.value });
-  };
-
-  return (
-    <>
-      <Dialog open={props.isOpen} onOpenChange={props.onClose}>
-        <DialogContent type="creation" actionText={t("create_new_team")} actionOnClick={createTeam}>
-          <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.FiUsers 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("create_new_team")}
-              </h3>
-              <div>
-                <p className="text-sm text-gray-400">{t("create_new_team_description")}</p>
-              </div>
-            </div>
-          </div>
-          <form>
-            <div className="mb-4">
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                {t("name")}
-              </label>
-              <input
-                ref={nameRef}
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Acme Inc."
-                required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
-              />
-            </div>
-            {errorMessage && <Alert severity="error" title={errorMessage} />}
-          </form>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 3b54332f3f..9e698a8e51 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+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/Icon";
@@ -9,12 +10,10 @@ import Button from "@calcom/ui/v2/core/Button";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 
 import SkeletonLoaderTeamList from "@components/team/SkeletonloaderTeamList";
-import TeamCreateModal from "@components/team/TeamCreateModal";
 import TeamList from "@components/team/TeamList";
 
 function Teams() {
   const { t } = useLocale();
-  const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
   const { data, isLoading } = trpc.useQuery(["viewer.teams.list"], {
@@ -25,22 +24,22 @@ function Teams() {
 
   const teams = data?.filter((m) => m.accepted) || [];
   const invites = data?.filter((m) => !m.accepted) || [];
+  const handleNewTeam = () => {
+    // Hey
+  };
 
   return (
     <Shell
       heading={t("teams")}
       subtitle={t("create_manage_teams_collaborative")}
       CTA={
-        <Button type="button" onClick={() => setShowCreateTeamModal(true)}>
+        <Button type="button" href={`${WEBAPP_URL}/settings/teams/new`}>
           <Icon.FiPlus className="inline-block h-3.5 w-3.5 text-white group-hover:text-black ltr:mr-2 rtl:ml-2" />
           {t("new")}
         </Button>
       }>
       <>
         {!!errorMessage && <Alert severity="error" title={errorMessage} />}
-        {showCreateTeamModal && (
-          <TeamCreateModal isOpen={showCreateTeamModal} onClose={() => setShowCreateTeamModal(false)} />
-        )}
         {invites.length > 0 && (
           <div className="mb-4">
             <h1 className="mb-2 text-lg font-medium">{t("open_invitations")}</h1>
@@ -54,11 +53,10 @@ function Teams() {
             headline={t("no_teams")}
             description={t("no_teams_description")}
             buttonRaw={
-              <Button color="secondary" onClick={() => setShowCreateTeamModal(true)}>
+              <Button color="secondary" href={`${WEBAPP_URL}/settings/teams/new`}>
                 {t("create_team")}
               </Button>
             }
-            buttonOnClick={() => setShowCreateTeamModal(true)}
           />
         )}
         {teams.length > 0 && <TeamList teams={teams} />}