From eda1d5f393f60f958482ae145b146ce7ee4729d7 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Fri, 25 Nov 2022 18:29:25 +0530
Subject: [PATCH] fix: add team member dialog ui updated (#5675)

* fix: add team member dialog ui updated
fixed team url

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: type errors and role value bug

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: remove logs

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: change option to admin

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../ee/teams/components/AddNewTeamMembers.tsx |  2 +-
 .../teams/components/CreateANewTeamForm.tsx   |  6 ++-
 .../components/MemberInvitationModal.tsx      | 49 ++++++++++---------
 .../ee/teams/pages/team-members-view.tsx      |  2 +-
 .../ui/components/form/checkbox/Checkbox.tsx  |  4 +-
 packages/ui/v2/core/form/ToggleGroup.tsx      | 11 +++--
 6 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index 597cb7339e..2d903b895a 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -77,7 +77,7 @@ const AddNewTeamMembersForm = ({ defaultValues, teamId }: { defaultValues: FormV
           inviteMemberMutation.mutate({
             teamId,
             language: i18n.language,
-            role: values.role.value,
+            role: values.role,
             usernameOrEmail: values.emailOrUsername,
             sendEmailInvitation: values.sendInviteEmail,
           });
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index bdacf87c50..0293816d0c 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
@@ -78,7 +77,10 @@ export const CreateANewTeamForm = () => {
                 className="mt-2"
                 name="slug"
                 label={t("team_url")}
-                addOnLeading={`${WEBAPP_URL}/team/`}
+                addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace("https://", "")?.replace(
+                  "http://",
+                  ""
+                )}/`}
                 value={value}
                 onChange={(e) => {
                   newTeamFormMethods.setValue("slug", slugify(e?.target.value), {
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 290001d28d..b72c1c9e77 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -12,8 +12,9 @@ import {
   DialogContent,
   DialogFooter,
   Form,
-  Select,
   TextField,
+  Label,
+  ToggleGroup,
 } from "@calcom/ui";
 
 import { PendingMember } from "../lib/types";
@@ -32,7 +33,7 @@ type MembershipRoleOption = {
 
 export interface NewMemberForm {
   emailOrUsername: string;
-  role: MembershipRoleOption;
+  role: MembershipRole;
   sendInviteEmail: boolean;
 }
 
@@ -69,7 +70,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         title={t("invite_new_member")}
         description={
           IS_TEAM_BILLING_ENABLED ? (
-            <span className=" text-sm leading-tight text-gray-500">
+            <span className="text-sm leading-tight text-gray-500">
               <Trans i18nKey="invite_new_member_description">
                 Note: This will <span className="font-medium text-gray-900">cost an extra seat ($15/m)</span>{" "}
                 on your subscription.
@@ -80,7 +81,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
           )
         }>
         <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
-          <div className="space-y-4">
+          <div className="mt-6 space-y-6">
             <Controller
               name="emailOrUsername"
               control={newMemberFormMethods.control}
@@ -105,21 +106,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             <Controller
               name="role"
               control={newMemberFormMethods.control}
-              defaultValue={options[0]}
+              defaultValue={options[0].value}
               render={({ field: { onChange } }) => (
                 <div>
-                  <label
-                    className="mb-1 block text-sm font-medium tracking-wide text-gray-700"
-                    htmlFor="role">
+                  <Label className="font-medium text-gray-900" htmlFor="role">
                     {t("role")}
-                  </label>
-                  <Select
-                    defaultValue={options[0]}
-                    options={options.filter((option) => option.value !== "OWNER")}
+                  </Label>
+                  <ToggleGroup
+                    isFullWidth={true}
                     id="role"
-                    name="role"
-                    className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
-                    onChange={onChange}
+                    onValueChange={onChange}
+                    defaultValue={options[0].value}
+                    options={[
+                      { value: "ADMIN", label: t("admin") },
+                      { value: "MEMBER", label: t("member") },
+                    ]}
                   />
                 </div>
               )}
@@ -127,21 +128,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             <Controller
               name="sendInviteEmail"
               control={newMemberFormMethods.control}
-              defaultValue={false}
+              defaultValue={true}
               render={() => (
-                <div className="relative flex items-start">
-                  <CheckboxField
-                    description={t("send_invite_email")}
-                    onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
-                  />
-                </div>
+                <CheckboxField
+                  className="mr-0"
+                  defaultChecked={true}
+                  description={t("send_invite_email")}
+                  onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
+                />
               )}
             />
           </div>
           <DialogFooter>
             <Button
               type="button"
-              color="secondary"
+              color="minimal"
               onClick={() => {
                 props.onExit();
                 newMemberFormMethods.reset();
@@ -153,7 +154,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               color="primary"
               className="ltr:ml-2 rtl:mr-2"
               data-testid="invite-new-member-button">
-              {t("invite")}
+              {t("invite_new_member")}
             </Button>
           </DialogFooter>
         </Form>
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index f2985a67a4..9e8a9311a5 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -108,7 +108,7 @@ const MembersView = () => {
                 inviteMemberMutation.mutate({
                   teamId,
                   language: i18n.language,
-                  role: values.role.value,
+                  role: values.role,
                   usernameOrEmail: values.emailOrUsername,
                   sendEmailInvitation: values.sendInviteEmail,
                 });
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index e83fc4c805..368331c988 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -8,6 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   descriptionAsLabel?: boolean;
   informationIconText?: string;
   error?: boolean;
+  className?: string;
 };
 
 const CheckboxField = forwardRef<HTMLInputElement, Props>(
@@ -53,7 +54,8 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                       !error && disabled
                         ? "bg-gray-300 checked:bg-gray-300"
                         : "checked:bg-gray-800 hover:bg-gray-100",
-                      error && "border-red-800 checked:bg-red-800 hover:bg-red-400"
+                      error && "border-red-800 checked:bg-red-800 hover:bg-red-400",
+                      rest.className
                     )}
                   />
                 </div>
diff --git a/packages/ui/v2/core/form/ToggleGroup.tsx b/packages/ui/v2/core/form/ToggleGroup.tsx
index 3efe040e6b..779ec4bb6c 100644
--- a/packages/ui/v2/core/form/ToggleGroup.tsx
+++ b/packages/ui/v2/core/form/ToggleGroup.tsx
@@ -7,9 +7,10 @@ export const ToggleGroupItem = () => <div>hi</div>;
 
 interface ToggleGroupProps extends Omit<RadixToggleGroup.ToggleGroupSingleProps, "type"> {
   options: { value: string; label: string }[];
+  isFullWidth?: boolean;
 }
 
-export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupProps) => {
+export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: ToggleGroupProps) => {
   const [value, setValue] = useState<string | undefined>(props.defaultValue);
   const [activeToggleElement, setActiveToggleElement] = useState<null | HTMLButtonElement>(null);
 
@@ -25,7 +26,8 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
         onValueChange={setValue}
         className={classNames(
           "dark:border-darkgray-200 relative inline-flex rounded-md border border-gray-200 p-1",
-          props.className
+          props.className,
+          isFullWidth && "w-full"
         )}>
         {/* Active toggle. It's a separate element so we can animate it nicely. */}
         <span
@@ -37,7 +39,10 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
           <RadixToggleGroup.Item
             key={option.value}
             value={option.value}
-            className="relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium"
+            className={classNames(
+              "relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium",
+              isFullWidth && "w-full"
+            )}
             ref={(node) => {
               if (node && value === option.value) {
                 setActiveToggleElement(node);