chore: prop disableEditableHeading in availability settings (#15041)

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -86,6 +86,7 @@ type AvailabilitySettingsProps = {
   handleSubmit: (data: AvailabilityFormValues) => Promise<void>;
   isPlatform?: boolean;
   customClassNames?: CustomClassNames;
+  disableEditableHeading?: boolean;
 };
 
 const DeleteDialogButton = ({
@@ -230,6 +231,7 @@ export function AvailabilitySettings({
   handleSubmit,
   isPlatform = false,
   customClassNames,
+  disableEditableHeading = false,
 }: AvailabilitySettingsProps) {
   const [openSidebar, setOpenSidebar] = useState(false);
   const { t, i18n } = useLocale();
@@ -260,6 +262,7 @@ export function AvailabilitySettings({
             <EditableHeading
               className={cn(customClassNames?.editableHeadingClassName)}
               isReady={!isLoading}
+              disabled={disableEditableHeading}
               {...field}
               data-testid="availablity-title"
             />

packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx

@@ -23,6 +23,7 @@ type PlatformAvailabilitySettingsWrapperProps = {
   onUpdateError?: (err: ApiErrorResponse) => void;
   onDeleteSuccess?: (res: ApiResponse) => void;
   onDeleteError?: (err: ApiErrorResponse) => void;
+  disableEditableHeading?: boolean;
 };
 
 export const PlatformAvailabilitySettingsWrapper = ({
@@ -32,6 +33,7 @@ export const PlatformAvailabilitySettingsWrapper = ({
   onDeleteSuccess,
   onUpdateError,
   onUpdateSuccess,
+  disableEditableHeading = false,
 }: PlatformAvailabilitySettingsWrapperProps) => {
   const { isLoading, data: schedule } = useClientSchedule(id);
   const mySchedule = schedule as ApiSuccessResponse<ScheduleWithAvailabilitiesForWeb>;
@@ -91,6 +93,7 @@ export const PlatformAvailabilitySettingsWrapper = ({
   return (
     <AtomsWrapper>
       <AvailabilitySettings
+        disableEditableHeading={disableEditableHeading}
         handleDelete={() => {
           userSchedule.id && handleDelete(userSchedule.id);
         }}

packages/ui/components/editable-heading/EditableHeading.tsx

@@ -8,37 +8,39 @@ export const EditableHeading = function EditableHeading({
   value,
   onChange,
   isReady,
+  disabled = false,
   ...passThroughProps
 }: {
   isReady?: boolean;
+  disabled?: boolean;
 } & Omit<JSX.IntrinsicElements["input"], "name" | "onChange"> &
   ControllerRenderProps) {
   const [isEditing, setIsEditing] = useState(false);
-  const enableEditing = () => setIsEditing(true);
+  const enableEditing = () => setIsEditing(!disabled);
   return (
     <div
       className="group pointer-events-none relative truncate sm:pointer-events-auto"
       onClick={enableEditing}>
-      <div className="flex cursor-pointer items-center">
+      <div className={classNames(!disabled && "cursor-pointer", "flex items-center")}>
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
-          {!isEditing && isReady && (
-            <Icon
-              name="pencil"
-              className=" text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3"
-            />
+          {!isEditing && isReady && !disabled && (
+            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
+            disabled={disabled}
             type="text"
             value={value}
             required
             className={classNames(
-              "text-emphasis hover:text-default focus:text-emphasis absolute left-0 top-0 w-full cursor-pointer truncate border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0",
+              !disabled &&
+                "hover:text-default focus:text-emphasis cursor-pointer focus:outline-none focus:ring-0",
+              "text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl ",
               passThroughProps.className
             )}
             onFocus={(e) => {
-              setIsEditing(true);
+              setIsEditing(!disabled);
               passThroughProps.onFocus && passThroughProps.onFocus(e);
             }}
             onBlur={(e) => {