hunk.code_window:     await users.deleteAll();
     });
     test("Can create teams via Wizard", async ({ page, users, prisma }) => {
       const user = await users.create();
       const inviteeEmail = `${user.username}+invitee@example.com`;
       await user.login();
       await page.goto("/teams");
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit:   test("Can create teams via Wizard", async ({ page, users }) => {
  
hunk.file_path: apps/web/playwright/teams.e2e.ts
hunk.type: replace
file: import { MembershipRole, Prisma } from "@prisma/client";
  import { useSession } from "next-auth/react";
  import Link from "next/link";
  import { useRouter } from "next/router";
  import { Controller, useForm } from "react-hook-form";
  
  import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
  import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
  import { useLocale } from "@calcom/lib/hooks/useLocale";
  import objectKeys from "@calcom/lib/objectKeys";
  import { trpc } from "@calcom/trpc/react";
  import { Icon } from "@calcom/ui";
  import { Avatar, Button, Form, Label, TextArea, TextField } from "@calcom/ui/components";
  import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
  import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
  import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
  import LinkIconButton from "@calcom/ui/v2/core/LinkIconButton";
  import Meta from "@calcom/ui/v2/core/Meta";
  import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
  import showToast from "@calcom/ui/v2/core/notifications";
  
  interface TeamProfileValues {
    name: string;
    url: string;
    logo: string;
    bio: string;
  }
  
  const ProfileView = () => {
    const { t } = useLocale();
    const router = useRouter();
    const utils = trpc.useContext();
    const session = useSession();
  
    const mutation = trpc.viewer.teams.update.useMutation({
      onError: (err) => {
        showToast(err.message, "error");
      },
      async onSuccess() {
        await utils.viewer.teams.get.invalidate();
        showToast(t("your_team_updated_successfully"), "success");
      },
    });
  
    const form = useForm<TeamProfileValues>();
  
    const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
      { teamId: Number(router.query.id) },
      {
        onError: () => {
          router.push("/settings");
        },
        onSuccess: (team) => {
          if (team) {
            form.setValue("name", team.name || "");
            form.setValue("url", team.slug || "");
            form.setValue("logo", team.logo || "");
            form.setValue("bio", team.bio || "");
            if (team.slug === null && (team?.metadata as Prisma.JsonObject)?.requestedSlug) {
              form.setValue("url", ((team?.metadata as Prisma.JsonObject)?.requestedSlug as string) || "");
            }
          }
        },
      }
    );
  
    const isAdmin =
      team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN);
  
    const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team?.slug}`;
  
    const deleteTeamMutation = trpc.viewer.teams.delete.useMutation({
      async onSuccess() {
        await utils.viewer.teams.get.invalidate();
        await utils.viewer.teams.list.invalidate();
        showToast(t("your_team_disbanded_successfully"), "success");
        router.push(`${WEBAPP_URL}/teams`);
      },
    });
  
    const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
      async onSuccess() {
        await utils.viewer.teams.get.invalidate();
        await utils.viewer.teams.list.invalidate();
        showToast(t("success"), "success");
      },
      async onError(err) {
        showToast(err.message, "error");
      },
    });
  
    const publishMutation = trpc.viewer.teams.publish.useMutation({
      async onSuccess(data: { url?: string }) {
        if (data.url) {
          router.push(data.url);
        }
      },
      async onError(err) {
        showToast(err.message, "error");
      },
    });
  
    function deleteTeam() {
      if (team?.id) deleteTeamMutation.mutate({ teamId: team.id });
    }
  
    function leaveTeam() {
      if (team?.id && session.data)
        removeMemberMutation.mutate({
          teamId: team.id,
          memberId: session.data.user.id,
        });
    }
  
    return (
      <>
        <Meta title="Profile" description="Manage settings for your team profile" />
        {!isLoading && (
          <>
            {isAdmin ? (
              <Form
                form={form}
                handleSubmit={(values) => {
                  if (team) {
                    const variables = {
                      logo: values.logo,
                      name: values.name,
                      slug: values.url,
                      bio: values.bio,
                    };
                    objectKeys(variables).forEach((key) => {
                      if (variables[key as keyof typeof variables] === team?.[key]) delete variables[key];
                    });
                    mutation.mutate({ id: team.id, ...variables });
                  }
                }}>
                <div className="flex items-center">
                  <Controller
                    control={form.control}
                    name="logo"
                    render={({ field: { value } }) => (
                      <>
                        <Avatar alt="" imageSrc={getPlaceholderAvatar(value, team?.name as string)} size="lg" />
                        <div className="ml-4">
                          <ImageUploader
                            target="avatar"
                            id="avatar-upload"
                            buttonMsg={t("update")}
                            handleAvatarChange={(newLogo) => {
                              form.setValue("logo", newLogo);
                            }}
                            imageSrc={value}
                          />
                        </div>
                      </>
                    )}
                  />
                </div>
  
                <hr className="my-8 border-gray-200" />
  
                <Controller
                  control={form.control}
                  name="name"
                  render={({ field: { value } }) => (
                    <div className="mt-8">
                      <TextField
                        name="name"
                        label={t("team_name")}
                        value={value}
                        onChange={(e) => {
                          form.setValue("name", e?.target.value);
                        }}
                      />
                    </div>
                  )}
                />
                <Controller
                  control={form.control}
                  name="url"
                  render={({ field: { value } }) => (
                    <div className="mt-8">
                      <TextField
                        name="url"
                        label={t("team_url")}
                        value={value}
                        addOnLeading={`${WEBAPP_URL}/team/`}
                        onChange={(e) => {
                          form.setValue("url", e?.target.value);
                        }}
                      />
                    </div>
                  )}
                />
                <Controller
                  control={form.control}
                  name="bio"
                  render={({ field: { value } }) => (
                    <div className="mt-8">
                      <Label>{t("about")}</Label>
                      <TextArea
                        name="bio"
                        value={value}
                        className="h-14"
                        onChange={(e) => {
                          form.setValue("bio", e?.target.value);
                        }}
                      />
                    </div>
                  )}
                />
                <p className="mt-2 text-sm text-gray-600">{t("team_description")}</p>
                <Button color="primary" className="mt-8" type="submit" loading={mutation.isLoading}>
                  {t("update")}
                </Button>
                {IS_TEAM_BILLING_ENABLED &&
                  team.slug === null &&
                  (team.metadata as Prisma.JsonObject)?.requestedSlug && (
                    <Button
                      color="secondary"
                      className="ml-2 mt-8"
                      type="button"
                      onClick={() => {
                        publishMutation.mutate({ teamId: team.id });
                      }}>
                      Publish
                    </Button>
                  )}
              </Form>
            ) : (
              <div className="flex">
                <div className="flex-grow">
                  <div>
                    <Label className="text-black">{t("team_name")}</Label>
                    <p className="text-sm text-gray-800">{team?.name}</p>
                  </div>
                  {team?.bio && (
                    <>
                      <Label className="mt-5 text-black">{t("about")}</Label>
                      <p className="text-sm text-gray-800">{team.bio}</p>
                    </>
                  )}
                </div>
                <div className="">
                  <Link href={permalink} passHref={true}>
                    <a target="_blank">
                      <LinkIconButton Icon={Icon.FiExternalLink}>{t("preview")}</LinkIconButton>
                    </a>
                  </Link>
                  <LinkIconButton
                    Icon={Icon.FiLink}
                    onClick={() => {
                      navigator.clipboard.writeText(permalink);
                      showToast("Copied to clipboard", "success");
                    }}>
                    {t("copy_link_team")}
                  </LinkIconButton>
                </div>
              </div>
            )}
            <hr className="border-1 my-8 border-gray-200" />
  
            <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
            {team?.membership.role === "OWNER" ? (
              <Dialog>
                <DialogTrigger asChild>
                  <Button color="destructive" className="border" StartIcon={Icon.FiTrash2}>
                    {t("delete_team")}
                  </Button>
                </DialogTrigger>
                <ConfirmationDialogContent
                  variety="danger"
                  title={t("disband_team")}
                  confirmBtnText={t("confirm_disband_team")}
                  onConfirm={deleteTeam}>
                  {t("disband_team_confirmation_message")}
                </ConfirmationDialogContent>
              </Dialog>
            ) : (
              <Dialog>
                <DialogTrigger asChild>
                  <Button color="destructive" className="border" StartIcon={Icon.FiLogOut}>
                    {t("leave_team")}
                  </Button>
                </DialogTrigger>
                <ConfirmationDialogContent
                  variety="danger"
                  title={t("leave_team")}
                  confirmBtnText={t("confirm_leave_team")}
                  onConfirm={leaveTeam}>
                  {t("leave_team_confirmation_message")}
                </ConfirmationDialogContent>
              </Dialog>
            )}
          </>
        )}
      </>
    );
  };
  
  ProfileView.getLayout = getLayout;
  
  export default ProfileView;
  