Fix: lock timezone on booking page breaks atoms (#23060)

* fix: eventTypeSettings atom crashed on enabling `Lock timezone on booking page`

* add changelog

Author: ibex088

.changeset/deep-owls-hang.md

@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": minor
+---
+
+fix: EventTypeSettings Atom crashes on enabling `Lock timezone on booking` in advanced tab

packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx

@@ -1,4 +1,4 @@
-import { useState, Suspense } from "react";
+import { useState, Suspense, useMemo } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { z } from "zod";
@@ -10,9 +10,10 @@ import {
   SelectedCalendarSettingsScope,
   SelectedCalendarsSettingsWebWrapperSkeleton,
 } from "@calcom/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper";
+import { Timezone as PlatformTimzoneSelect } from "@calcom/atoms/timezone";
 import getLocationsOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import { TimezoneSelect } from "@calcom/features/components/timezone-select";
+import { TimezoneSelect as WebTimezoneSelect } from "@calcom/features/components/timezone-select";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import {
   allowDisablingAttendeeConfirmationEmails,
@@ -565,6 +566,10 @@ export const EventAdvancedTab = ({
     userEmail = removePlatformClientIdFromEmail(userEmail, platformContext.clientId);
   }
 
+  const TimezoneSelect = useMemo(() => {
+    return isPlatform ? PlatformTimzoneSelect : WebTimezoneSelect;
+  }, [isPlatform]);
+
   return (
     <div className="flex flex-col space-y-4">
       <calendarComponents.CalendarSettings

packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx

@@ -150,7 +150,7 @@ const EventType = forwardRef<
       const description = message ? t(message) : t(err.message);
       toast({ description });
       onError?.(currentValues, err);
-      
+
       const errorObj = new Error(description);
       callbacksRef.current?.onError?.(errorObj);
     },
@@ -175,24 +175,27 @@ const EventType = forwardRef<
 
   const callbacksRef = useRef<{ onSuccess?: () => void; onError?: (error: Error) => void }>({});
 
-  const handleFormSubmit = useCallback((customCallbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => {
-    if (customCallbacks) {
-      callbacksRef.current = customCallbacks;
-    }
+  const handleFormSubmit = useCallback(
+    (customCallbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => {
+      if (customCallbacks) {
+        callbacksRef.current = customCallbacks;
+      }
 
-    if (saveButtonRef.current) {
-      saveButtonRef.current.click();
-    } else {
-      form.handleSubmit((data) => {
-        try {
-          handleSubmit(data);
-          customCallbacks?.onSuccess?.();
-        } catch (error) {
-          customCallbacks?.onError?.(error as Error);
-        }
-      })();
-    }
-  }, [handleSubmit, form]);
+      if (saveButtonRef.current) {
+        saveButtonRef.current.click();
+      } else {
+        form.handleSubmit((data) => {
+          try {
+            handleSubmit(data);
+            customCallbacks?.onSuccess?.();
+          } catch (error) {
+            customCallbacks?.onError?.(error as Error);
+          }
+        })();
+      }
+    },
+    [handleSubmit, form]
+  );
 
   const validateForm = useCallback(async () => {
     const isValid = await form.trigger();