calcom · ThyMinimalDev · Oct 16, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts
@@ -151,4 +151,5 @@ export type CustomClassNames = {
     availableTimeSlotsTimeFormatToggle?: string;
     availableTimes?: string;
   };
+  atomsWrapper: string;
 };
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -66,6 +66,11 @@ export type CustomClassNames = {
     labelAndSwitchContainer?: string;
   };
   overridesModalClassNames?: string;
+  hiddenSwitchClassname?: {
+    container?: string;
+    thumb?: string;
+  };
+  deleteButtonClassname?: string;
 };
 
 export type Availability = Pick<Schedule, "days" | "startTime" | "endTime">;
@@ -85,6 +90,8 @@ type AvailabilitySettingsProps = {
   };
   travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
   handleDelete: () => void;
+  allowDelete?: boolean;
+  allowSetToDefault?: boolean;
   isDeleting: boolean;
   isSaving: boolean;
   isLoading: boolean;
@@ -252,6 +259,8 @@ export function AvailabilitySettings({
   disableEditableHeading = false,
   enableOverrides = false,
   bulkUpdateModalProps,
+  allowSetToDefault = true,
+  allowDelete = true,
 }: AvailabilitySettingsProps) {
   const [openSidebar, setOpenSidebar] = useState(false);
   const { t, i18n } = useLocale();
@@ -314,7 +323,7 @@ export function AvailabilitySettings({
       CTA={
         <div className={cn(customClassNames?.ctaClassName, "flex items-center justify-end")}>
           <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 transition sm:flex">
-            {!openSidebar ? (
+            {!openSidebar && allowSetToDefault ? (
               <>
                 <Skeleton
                   as={Label}
@@ -330,6 +339,10 @@ export function AvailabilitySettings({
                   render={({ field: { value, onChange } }) => (
                     <Switch
                       id="hiddenSwitch"
+                      classNames={{
+                        container: cn(customClassNames?.hiddenSwitchClassname?.container),
+                        thumb: cn(customClassNames?.hiddenSwitchClassname?.thumb),
+                      }}
                       disabled={isSaving || schedule.isDefault}
                       checked={value}
                       onCheckedChange={(checked) => {
@@ -339,6 +352,7 @@ export function AvailabilitySettings({
                     />
                   )}
                 />
+                <VerticalDivider className="hidden sm:inline" />
               </>
             ) : null}
           </div>
@@ -353,14 +367,17 @@ export function AvailabilitySettings({
             />
           )}
 
-          <VerticalDivider className="hidden sm:inline" />
-          <DeleteDialogButton
-            buttonClassName="hidden sm:inline"
-            disabled={schedule.isLastSchedule}
-            isPending={isDeleting}
-            handleDelete={handleDelete}
-          />
-          <VerticalDivider className="hidden sm:inline" />
+          {allowDelete && (
+            <>
+              <DeleteDialogButton
+                buttonClassName={cn("hidden sm:inline", customClassNames?.deleteButtonClassname)}
+                disabled={schedule.isLastSchedule}
+                isPending={isDeleting}
+                handleDelete={handleDelete}
+              />
+              <VerticalDivider className="hidden sm:inline" />
+            </>
+          )}
           <SmallScreenSideBar open={openSidebar}>
             <>
               <div
@@ -377,15 +394,17 @@ export function AvailabilitySettings({
                   <div className="flex flex-row items-center pt-5">
                     <Button StartIcon="arrow-left" color="minimal" onClick={() => setOpenSidebar(false)} />
                     <p className="-ml-2">{t("availability_settings")}</p>
-                    <DeleteDialogButton
-                      buttonClassName="ml-16 inline"
-                      disabled={schedule.isLastSchedule}
-                      isPending={isDeleting}
-                      handleDelete={handleDelete}
-                      onDeleteConfirmed={() => {
-                        setOpenSidebar(false);
-                      }}
-                    />
+                    {allowDelete && (
+                      <DeleteDialogButton
+                        buttonClassName={cn("ml-16 inline", customClassNames?.deleteButtonClassname)}
+                        disabled={schedule.isLastSchedule}
+                        isPending={isDeleting}
+                        handleDelete={handleDelete}
+                        onDeleteConfirmed={() => {
+                          setOpenSidebar(false);
+                        }}
+                      />
+                    )}
                   </div>
                   <div className="flex flex-col px-2 py-2">
                     <Skeleton as={Label} waitForTranslation={!isPlatform}>
@@ -403,25 +422,33 @@ export function AvailabilitySettings({
                     />
                   </div>
                   <div className="flex h-9 flex-row-reverse items-center justify-end gap-3 px-2">
-                    <Skeleton
-                      as={Label}
-                      htmlFor="hiddenSwitch"
-                      className="mt-2 cursor-pointer self-center pr-2 sm:inline"
-                      waitForTranslation={!isPlatform}>
-                      {t("set_to_default")}
-                    </Skeleton>
-                    <Controller
-                      control={form.control}
-                      name="isDefault"
-                      render={({ field: { value, onChange } }) => (
-                        <Switch
-                          id="hiddenSwitch"
-                          disabled={isSaving || value}
-                          checked={value}
-                          onCheckedChange={onChange}
+                    {allowSetToDefault && (
+                      <>
+                        <Skeleton
+                          as={Label}
+                          htmlFor="hiddenSwitch"
+                          className="mt-2 cursor-pointer self-center pr-2 sm:inline"
+                          waitForTranslation={!isPlatform}>
+                          {t("set_to_default")}
+                        </Skeleton>
+                        <Controller
+                          control={form.control}
+                          name="isDefault"
+                          render={({ field: { value, onChange } }) => (
+                            <Switch
+                              classNames={{
+                                container: cn(customClassNames?.hiddenSwitchClassname?.container),
+                                thumb: cn(customClassNames?.hiddenSwitchClassname?.thumb),
+                              }}
+                              id="hiddenSwitch"
+                              disabled={isSaving || value}
+                              checked={value}
+                              onCheckedChange={onChange}
+                            />
+                          )}
                         />
-                      )}
-                    />
+                      </>
+                    )}
                   </div>
 
                   <div className="min-w-40 col-span-3 space-y-2 px-2 py-4 lg:col-span-1">

diff --git a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
@@ -33,6 +33,8 @@ type AvailabilitySettingsPlatformWrapperProps = {
   disableEditableHeading?: boolean;
   enableOverrides?: boolean;
   onBeforeUpdate?: (updateBody: UpdateScheduleInput_2024_06_11) => boolean | Promise<boolean>;
+  allowDelete?: boolean;
+  allowSetToDefault?: boolean;
 };
 
 export const AvailabilitySettingsPlatformWrapper = ({
@@ -45,6 +47,8 @@ export const AvailabilitySettingsPlatformWrapper = ({
   disableEditableHeading = false,
   enableOverrides = false,
   onBeforeUpdate,
+  allowDelete,
+  allowSetToDefault,
 }: AvailabilitySettingsPlatformWrapperProps) => {
   const { isLoading, data: schedule } = useSchedule(id);
   const { data: schedules } = useSchedules();
@@ -142,6 +146,8 @@ export const AvailabilitySettingsPlatformWrapper = ({
         backPath=""
         isPlatform={true}
         customClassNames={customClassNames}
+        allowDelete={allowDelete}
+        allowSetToDefault={allowSetToDefault}
       />
     </AtomsWrapper>
   );

diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
@@ -401,7 +401,7 @@ export const BookerPlatformWrapper = (
   }, [view, isOverlayCalendarEnabled]);
 
   return (
-    <AtomsWrapper>
+    <AtomsWrapper customClassName={props?.customClassNames?.atomsWrapper}>
       <BookerComponent
         customClassNames={props.customClassNames}
         eventSlug={props.eventSlug}

diff --git a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
@@ -35,6 +35,9 @@ export type EventTypePlatformWrapperProps = {
   onDeleteSuccess?: () => void;
   onDeleteError?: (msg: string) => void;
   allowDelete: boolean;
+  customClassNames?: {
+    atomsWrapper?: string;
+  };
 };
 
 const EventType = ({
@@ -45,6 +48,7 @@ const EventType = ({
   onDeleteError,
   id,
   allowDelete = true,
+  customClassNames,
   ...props
 }: EventTypeSetupProps & EventTypePlatformWrapperProps) => {
   const { t } = useLocale();
@@ -84,7 +88,7 @@ const EventType = ({
       // Reset the form with these values as new default values to ensure the correct comparison for dirtyFields eval
       form.reset(currentValues);
       toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) });
-      props.onSuccess?.(currentValues);
+      onSuccess?.(currentValues);
     },
     async onSettled() {
       return;
@@ -93,7 +97,7 @@ const EventType = ({
       const currentValues = form.getValues();
       const message = err?.message;
       toast({ description: message ? t(message) : t(err.message) });
-      props.onError?.(currentValues, err);
+      onError?.(currentValues, err);
     },
   });
 
@@ -185,7 +189,7 @@ const EventType = ({
     tabs,
   });
   return (
-    <AtomsWrapper>
+    <AtomsWrapper customClassName={customClassNames?.atomsWrapper}>
       <EventTypeComponent
         {...props}
         tabMap={tabMap}
@@ -228,6 +232,7 @@ export const EventTypePlatformWrapper = ({
   onDeleteSuccess,
   onDeleteError,
   allowDelete = true,
+  customClassNames,
 }: EventTypePlatformWrapperProps) => {
   const { data: eventTypeQueryData } = useAtomsEventTypeById(id);
   const queryClient = useQueryClient();
@@ -258,6 +263,7 @@ export const EventTypePlatformWrapper = ({
       onDeleteSuccess={onDeleteSuccess}
       onDeleteError={onDeleteError}
       allowDelete={allowDelete}
+      customClassNames={customClassNames}
     />
   );
 };
diff --git a/packages/platform/atoms/src/components/atoms-wrapper.tsx b/packages/platform/atoms/src/components/atoms-wrapper.tsx
@@ -1,7 +1,19 @@
 import type { ReactNode } from "react";
 
+import { classNames } from "@calcom/lib";
+
 import { CALCOM_ATOMS_WRAPPER_CLASS } from "../constants/styles";
 
-export const AtomsWrapper = ({ children }: { children: ReactNode }) => {
-  return <div className={`${CALCOM_ATOMS_WRAPPER_CLASS} m-0 w-auto p-0`}>{children}</div>;
+export const AtomsWrapper = ({
+  children,
+  customClassName,
+}: {
+  children: ReactNode;
+  customClassName?: string;
+}) => {
+  return (
+    <div className={classNames(`${CALCOM_ATOMS_WRAPPER_CLASS} m-0 w-auto p-0`, customClassName)}>
+      {children}
+    </div>
+  );
 };
diff --git a/packages/platform/examples/base/src/pages/availability.tsx b/packages/platform/examples/base/src/pages/availability.tsx
@@ -16,6 +16,7 @@ export default function Availability(props: { calUsername: string; calEmail: str
             subtitlesClassName: "text-red-500",
             ctaClassName: "border p-4 rounded-md",
             editableHeadingClassName: "underline font-semibold",
+            hiddenSwitchClassname: { thumb: "bg-red-500" },
           }}
           onUpdateSuccess={() => {
             console.log("Updated successfully");

diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx
@@ -89,6 +89,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
         {eventTypeId && (
           <div>
             <EventTypeSettings
+              customClassNames={{ atomsWrapper: "!w-[50vw] !m-auto" }}
               allowDelete={true}
               id={eventTypeId}
               tabs={["setup", "limits", "recurring", "advanced", "availability"]}