feat: lock event types for org users

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -204,6 +204,7 @@
   activeWebhooksNumber,
 }: Props) {
   const { t } = useLocale();
+  const eventTypesLockedByOrg = eventType.team?.parent?.organizationSettings?.lockEventTypeCreationForUsers;
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
@@ -283,18 +284,18 @@
       });
     }
     return navigation;
   }, [
     t,
     enabledAppsNumber,
     installedAppsNumber,
     enabledWorkflowsNumber,
     availability,
     isManagedEventType,
     isChildrenManagedEventType,
     team,
     length,
     multipleDuration,
     formMethods.getValues("id"),
     watchSchedulingType,
     watchChildrenCount,
     activeWebhooksNumber,
@@ -341,6 +342,7 @@
                   <div className="self-center rounded-md p-2">
                     <Switch
                       id="hiddenSwitch"
+                      disabled={eventTypesLockedByOrg}
                       checked={!formMethods.watch("hidden")}
                       onCheckedChange={(e) => {
                         formMethods.setValue("hidden", !e, { shouldDirty: true });

apps/web/modules/event-types/views/event-types-listing-view.tsx

@@ -26,6 +26,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import type { User } from "@calcom/prisma/client";
+import type { MembershipRole } from "@calcom/prisma/enums";
 import { SchedulingType } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
@@ -109,6 +110,7 @@ interface EventTypeListProps {
   readOnly: boolean;
   bookerUrl: string | null;
   types: DeNormalizedEventType[];
+  lockedByOrg?: boolean;
 }
 
 interface MobileTeamsTabProps {
@@ -230,6 +232,7 @@ export const EventTypeList = ({
   readOnly,
   types,
   bookerUrl,
+  lockedByOrg,
 }: EventTypeListProps): JSX.Element => {
   const { t } = useLocale();
   const router = useRouter();
@@ -390,8 +393,10 @@ export const EventTypeList = ({
   if (!types.length) {
     return group.teamId ? (
       <EmptyEventTypeList group={group} />
-    ) : (
+    ) : !group.profile.eventTypesLockedByOrg ? (
       <CreateFirstEventTypeView slug={group.profile.slug ?? ""} />
+    ) : (
+      <></>
     );
   }
 
@@ -450,6 +455,7 @@ export const EventTypeList = ({
                               <div className="self-center rounded-md p-2">
                                 <Switch
                                   name="Hidden"
+                                  disabled={lockedByOrg}
                                   checked={!type.hidden}
                                   onCheckedChange={() => {
                                     setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
@@ -803,21 +809,22 @@ const CreateFirstEventTypeView = ({ slug }: { slug: string }) => {
   );
 };
 
-const CTA = ({ data, isOrganization }: { data: GetByViewerResponse; isOrganization: boolean }) => {
+const CTA = ({
+  profileOptions,
+  isOrganization,
+}: {
+  profileOptions: {
+    teamId: number | null | undefined;
+    label: string | null;
+    image: string;
+    membershipRole: MembershipRole | null | undefined;
+    slug: string | null;
+  }[];
+  isOrganization: boolean;
+}) => {
   const { t } = useLocale();
 
-  if (!data) return null;
-  const profileOptions = data.profiles
-    .filter((profile) => !profile.readOnly)
-    .map((profile) => {
-      return {
-        teamId: profile.teamId,
-        label: profile.name || profile.slug,
-        image: profile.image,
-        membershipRole: profile.membershipRole,
-        slug: profile.slug,
-      };
-    });
+  if (!profileOptions.length) return null;
 
   return (
     <CreateButton
@@ -831,10 +838,10 @@ const CTA = ({ data, isOrganization }: { data: GetByViewerResponse; isOrganizati
   );
 };
 
-const Actions = () => {
+const Actions = (props: { showDivider: boolean }) => {
   return (
     <div className="hidden items-center md:flex">
-      <TeamsFilter useProfileFilter popoverTriggerClassNames="mb-0" showVerticalDivider={true} />
+      <TeamsFilter useProfileFilter popoverTriggerClassNames="mb-0" showVerticalDivider={props.showDivider} />
     </div>
   );
 };
@@ -885,41 +892,52 @@ const Main = ({
     rawData.eventTypeGroups.length === 1;
 
   const data = denormalizePayload(rawData);
-
   return (
     <>
       {data.eventTypeGroups.length > 1 || isFilteredByOnlyOneItem ? (
         <>
           {isMobile ? (
             <MobileTeamsTab eventTypeGroups={data.eventTypeGroups} />
           ) : (
-            data.eventTypeGroups.map((group, index: number) => (
-              <div
-                className="mt-4 flex flex-col"
-                data-testid={`slug-${group.profile.slug}`}
-                key={group.profile.slug}>
-                <EventTypeListHeading
-                  profile={group.profile}
-                  membershipCount={group.metadata.membershipCount}
-                  teamId={group.teamId}
-                  bookerUrl={group.bookerUrl}
-                />
+            data.eventTypeGroups.map((group, index: number) => {
+              const eventsLockedByOrg = group.profile.eventTypesLockedByOrg;
+              const userHasManagedOrHiddenEventTypes = group.eventTypes.find(
+                (event) => event.metadata?.managedEventConfig || event.hidden
+              );
+              if (eventsLockedByOrg && !userHasManagedOrHiddenEventTypes) return null;
+              return (
+                <div
+                  className="mt-4 flex flex-col"
+                  data-testid={`slug-${group.profile.slug}`}
+                  key={group.profile.slug}>
+                  {/* If the group is readonly and empty don't leave a floating header when the user cant see the create box due 
+                    to it being readonly for that user */}
+                  {group.eventTypes.length === 0 && group.metadata.readOnly ? null : (
+                    <EventTypeListHeading
+                      profile={group.profile}
+                      membershipCount={group.metadata.membershipCount}
+                      teamId={group.teamId}
+                      bookerUrl={group.bookerUrl}
+                    />
+                  )}
 
-                {group.eventTypes.length ? (
-                  <EventTypeList
-                    types={group.eventTypes}
-                    group={group}
-                    bookerUrl={group.bookerUrl}
-                    groupIndex={index}
-                    readOnly={group.metadata.readOnly}
-                  />
-                ) : group.teamId ? (
-                  <EmptyEventTypeList group={group} />
-                ) : (
-                  <CreateFirstEventTypeView slug={data.profiles[0].slug ?? ""} />
-                )}
-              </div>
-            ))
+                  {group.eventTypes.length ? (
+                    <EventTypeList
+                      types={group.eventTypes}
+                      group={group}
+                      bookerUrl={group.bookerUrl}
+                      groupIndex={index}
+                      readOnly={group.metadata.readOnly}
+                      lockedByOrg={eventsLockedByOrg}
+                    />
+                  ) : group.teamId && !group.metadata.readOnly ? (
+                    <EmptyEventTypeList group={group} />
+                  ) : !group.metadata.readOnly ? (
+                    <CreateFirstEventTypeView slug={data.profiles[0].slug ?? ""} />
+                  ) : null}
+                </div>
+              );
+            })
           )}
         </>
       ) : (
@@ -974,6 +992,21 @@ const EventTypesPage: React.FC & {
     );
   }, [orgBranding, user]);
 
+  const profileOptions = data
+    ? data?.profiles
+        .filter((profile) => !profile.readOnly)
+        .filter((profile) => !profile.eventTypesLockedByOrg)
+        .map((profile) => {
+          return {
+            teamId: profile.teamId,
+            label: profile.name || profile.slug,
+            image: profile.image,
+            membershipRole: profile.membershipRole,
+            slug: profile.slug,
+          };
+        })
+    : [];
+
   return (
     <Shell
       withoutMain={false}
@@ -983,8 +1016,8 @@ const EventTypesPage: React.FC & {
       heading={t("event_types_page_title")}
       hideHeadingOnMobile
       subtitle={t("event_types_page_subtitle")}
-      beforeCTAactions={<Actions />}
-      CTA={<CTA data={data} isOrganization={!!user?.organizationId} />}>
+      beforeCTAactions={<Actions showDivider={profileOptions.length > 0} />}
+      CTA={<CTA profileOptions={profileOptions} isOrganization={!!user?.organizationId} />}>
       <HeadSeo
         title="Event Types"
         description="Create events to share for people to book on your calendar."

apps/web/public/static/locales/en/common.json

@@ -2313,5 +2313,12 @@
   "confirm_email": "Confirm your email",
   "confirm_email_description": "We sent an email to <strong>{{email}}</strong>. Click the link in the email to verify this address.",
   "send_event_details_to": "Send event details to",
+  "lock_event_types_modal_header":"What should we do with your member's existing event types?",
+  "org_delete_event_types_org_admin":"All of your members individual event types (except managed ones) will be permanently deleted. They will not be able to create new ones",
+  "org_hide_event_types_org_admin":"Your members individual event types will be hidden (except managed ones) from profiles but the links will still be active. They will not be able to create new ones.  ",
+  "hide_org_eventtypes":"Hide individual event types",
+  "delete_org_eventtypes":"Delete individual event types",
+  "lock_org_users_eventtypes":"Lock individual event type creation",
+  "lock_org_users_eventtypes_description":"Prevent members from creating their own event types.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc";
+import { trpc } from "@calcom/trpc";
+import {
+  showToast,
+  Form,
+  SettingsToggle,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogClose,
+  Button,
+  RadioGroup as RadioArea,
+} from "@calcom/ui";
+
+enum CurrentEventTypeOptions {
+  DELETE = "DELETE",
+  HIDE = "HIDE",
+}
+
+interface GeneralViewProps {
+  currentOrg: RouterOutputs["viewer"]["organizations"]["listCurrent"];
+  isAdminOrOwner: boolean;
+}
+
+interface FormValues {
+  currentEventTypeOptions: CurrentEventTypeOptions;
+}
+
+export const LockEventTypeSwitch = ({ currentOrg, isAdminOrOwner }: GeneralViewProps) => {
+  const [lockEventTypeCreationForUsers, setLockEventTypeCreationForUsers] = useState(
+    !!currentOrg.organizationSettings.lockEventTypeCreationForUsers
+  );
+  const [showModal, setShowModal] = useState(false);
+  const { t } = useLocale();
+
+  const mutation = trpc.viewer.organizations.update.useMutation({
+    onSuccess: async () => {
+      reset(getValues());
+      showToast(t("settings_updated_successfully"), "success");
+    },
+    onError: () => {
+      showToast(t("error_updating_settings"), "error");
+    },
+  });
+
+  const formMethods = useForm<FormValues>({
+    defaultValues: {
+      currentEventTypeOptions: CurrentEventTypeOptions.HIDE,
+    },
+  });
+
+  if (!isAdminOrOwner) return null;
+
+  const currentLockedOption = formMethods.watch("currentEventTypeOptions");
+
+  const { reset, getValues } = formMethods;
+
+  const onSubmit = (values: FormValues) => {
+    mutation.mutate({
+      lockEventTypeCreation: lockEventTypeCreationForUsers,
+      lockEventTypeCreationOptions: values.currentEventTypeOptions,
+    });
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        title={t("lock_org_users_eventtypes")}
+        disabled={mutation?.isPending || !isAdminOrOwner}
+        description={t("lock_org_users_eventtypes_description")}
+        checked={lockEventTypeCreationForUsers}
+        onCheckedChange={(checked) => {
+          if (!checked) {
+            mutation.mutate({
+              lockEventTypeCreation: checked,
+            });
+          } else {
+            setShowModal(true);
+          }
+          setLockEventTypeCreationForUsers(checked);
+        }}
+        switchContainerClassName="mt-6"
+      />
+      {showModal && (
+        <Dialog
+          open={showModal}
+          onOpenChange={(e) => {
+            if (!e) {
+              setLockEventTypeCreationForUsers(
+                !!currentOrg.organizationSettings.lockEventTypeCreationForUsers
+              );
+              setShowModal(false);
+            }
+          }}>
+          <DialogContent enableOverflow>
+            <Form form={formMethods} handleSubmit={onSubmit}>
+              <div className="flex flex-row space-x-3">
+                <div className="w-full pt-1">
+                  <DialogHeader title={t("lock_event_types_modal_header")} />
+                  <RadioArea.Group
+                    id="currentEventTypeOptions"
+                    onValueChange={(val: CurrentEventTypeOptions) => {
+                      formMethods.setValue("currentEventTypeOptions", val);
+                    }}
+                    className={classNames("min-h-24 mt-1 flex flex-col gap-4")}>
+                    <RadioArea.Item
+                      checked={currentLockedOption === CurrentEventTypeOptions.HIDE}
+                      value={CurrentEventTypeOptions.HIDE}
+                      className={classNames("h-full text-sm")}>
+                      <strong className="mb-1 block">{t("hide_org_eventtypes")}</strong>
+                      <p>{t("org_hide_event_types_org_admin")}</p>
+                    </RadioArea.Item>
+                    <RadioArea.Item
+                      checked={currentLockedOption === CurrentEventTypeOptions.DELETE}
+                      value={CurrentEventTypeOptions.DELETE}
+                      className={classNames("[&:has(input:checked)]:border-error h-full text-sm")}>
+                      <strong className="mb-1 block">{t("delete_org_eventtypes")}</strong>
+                      <p>{t("org_delete_event_types_org_admin")}</p>
+                    </RadioArea.Item>
+                  </RadioArea.Group>
+
+                  <DialogFooter>
+                    <DialogClose />
+                    <Button disabled={!isAdminOrOwner} type="submit">
+                      {t("submit")}
+                    </Button>
+                  </DialogFooter>
+                </div>
+              </div>
+            </Form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+};

packages/features/ee/organizations/pages/settings/general.tsx

@@ -25,6 +25,8 @@ import {
   TimezoneSelect,
 } from "@calcom/ui";
 
+import { LockEventTypeSwitch } from "../components/LockEventTypeSwitch";
+
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
@@ -81,6 +83,8 @@ const OrgGeneralView = () => {
         isAdminOrOwner={isAdminOrOwner}
         localeProp={user?.locale ?? "en"}
       />
+
+      <LockEventTypeSwitch currentOrg={currentOrg} isAdminOrOwner={isAdminOrOwner} />
     </LicenseRequired>
   );
 };