wip

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -108,7 +108,11 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     );
   };
 
-  const { shouldLockDisableProps } = useLockedFieldsManager(eventType, formMethods, t);
+  const { shouldLockDisableProps, useLockedLabel, useLockedSwitch } = useLockedFieldsManager(
+    eventType,
+    formMethods,
+    t
+  );
   const eventNamePlaceholder = getEventName({
     ...eventNameObject,
     eventName: formMethods.watch("eventName"),
@@ -116,9 +120,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   const successRedirectUrlLocked = shouldLockDisableProps("successRedirectUrl");
   const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
+  const requiresBookerEmailVerificationProps = shouldLockDisableProps("requiresBookerEmailVerification");
 
   const closeEventNameTip = () => setShowEventNameTip(false);
 
+  // For the field 'eventName'
+  // const EventNameLabel = useLockedLabel("eventName");
+  // const EventNameSwitch = useLockedSwitch("eventName")();
   const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
     <div className="flex flex-col space-y-4">
@@ -162,6 +170,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <TextField
             label={t("event_name_in_calendar")}
             type="text"
+            // {...EventNameLabel}
             {...shouldLockDisableProps("eventName")}
             placeholder={eventNamePlaceholder}
             defaultValue={eventType.eventName || ""}
@@ -179,9 +188,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         </div>
       </div>
-
       <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
-
       <div className="border-subtle space-y-6 rounded-lg border p-6">
         <FormBuilder
           title={t("booking_questions_title")}
@@ -196,7 +203,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           }}
         />
       </div>
-
       <RequiresConfirmationController
         eventType={eventType}
         seatsEnabled={seatsEnabled}
@@ -204,7 +210,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-
       <Controller
         name="requiresBookerEmailVerification"
         control={formMethods.control}
@@ -215,14 +220,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
-            {...shouldLockDisableProps("requiresBookerEmailVerification")}
+            {...requiresBookerEmailVerificationProps}
             description={t("description_requires_booker_email_verification")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
           />
         )}
       />
-
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
@@ -240,7 +244,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
@@ -286,7 +289,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
-
       <SettingsToggle
         labelClassName="text-sm"
         toggleSwitchAtTheEnd={true}
@@ -347,7 +349,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           )}
         </div>
       </SettingsToggle>
-
       <Controller
         name="seatsPerTimeSlotEnabled"
         control={formMethods.control}

packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx

@@ -13,6 +13,42 @@ import type { _EventTypeModel } from "@calcom/prisma/zod/eventtype";
 import { Tooltip, Badge, Switch } from "@calcom/ui";
 import { Lock, Unlock } from "@calcom/ui/components/icon";
 
+export const LockedLabel = (isManagedEventType: boolean, isLocked: boolean, t: TFunction) => {
+  const stateText = t(isLocked ? "locked" : "unlocked");
+  const tooltipText = t(
+    `${isLocked ? "locked" : "unlocked"}_fields_${isManagedEventType ? "admin" : "member"}_description`
+  );
+
+  return (
+    <Tooltip content={<>{tooltipText}</>}>
+      <Badge variant={isLocked ? "gray" : "green"} className="ml-2 transform gap-1.5 p-1">
+        {isLocked ? <Lock className="text-subtle h-3 w-3" /> : <Unlock className="text-subtle h-3 w-3" />}
+        <span className="font-medium">{stateText}</span>
+      </Badge>
+    </Tooltip>
+  );
+};
+
+export const LockedSwitch = (
+  isManagedEventType: boolean,
+  [isLocked, setIsLocked]: [boolean, Dispatch<SetStateAction<boolean>>],
+  fieldName: string,
+  setUnlockedFields: (fieldName: string, val: boolean | undefined) => void,
+  options = { simple: false }
+) => {
+  return isManagedEventType ? (
+    <Switch
+      data-testid={`locked-indicator-${fieldName}`}
+      onCheckedChange={(enabled) => {
+        setIsLocked(enabled);
+        setUnlockedFields(fieldName, !enabled || undefined);
+      }}
+      checked={isLocked}
+      small={!options.simple}
+    />
+  ) : null;
+};
+
 export const LockedIndicator = (
   isManagedEventType: boolean,
   [isLocked, setIsLocked]: [boolean, Dispatch<SetStateAction<boolean>>],
@@ -113,6 +149,33 @@ const useLockedFieldsManager = (
     );
   };
 
+  const useLockedLabel = (fieldName: string, options?: { simple: true }) => {
+    if (!fieldStates[fieldName]) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      fieldStates[fieldName] = useState(getLockedInitState(fieldName));
+    }
+    const isLocked = fieldStates[fieldName][0];
+
+    return {
+      disabled:
+        !isManagedEventType &&
+        eventType.metadata?.managedEventConfig !== undefined &&
+        unlockedFields[fieldName as keyof Omit<Prisma.EventTypeSelect, "id">] === undefined,
+      LockedIcon: useShouldLockIndicator(fieldName, options),
+      isLocked,
+    };
+  };
+
+  const useLockedSwitch = (fieldName: string, options = { simple: false }) => {
+    if (!fieldStates[fieldName]) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      fieldStates[fieldName] = useState(getLockedInitState(fieldName));
+    }
+
+    return () =>
+      LockedSwitch(isManagedEventType, fieldStates[fieldName], fieldName, setUnlockedFields, options);
+  };
+
   const useShouldLockDisableProps = (fieldName: string, options?: { simple: true }) => {
     if (!fieldStates[fieldName]) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -131,6 +194,8 @@ const useLockedFieldsManager = (
   return {
     shouldLockIndicator: useShouldLockIndicator,
     shouldLockDisableProps: useShouldLockDisableProps,
+    useLockedLabel,
+    useLockedSwitch,
     isManagedEventType,
     isChildrenManagedEventType,
   };