fix: Change Detroit to New York as a default for EST time zone (#8218)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: alannnc <alannnc@gmail.com>
Co-authored-by: Omar López <zomars@me.com>

apps/web/test/lib/getTimezone.test.ts

@@ -77,5 +77,5 @@ it("should render city name as option label if cityData is not empty", () => {
 });
 
 it("should return timezone as option label if cityData is empty", () => {
-  expect(handleOptionLabel(option, [])).toMatchInlineSnapshot(`"America/Los_Angeles GMT -8:00"`);
+  expect(handleOptionLabel(option, [])).toMatchInlineSnapshot(`"America/Los Angeles GMT -8:00"`);
 });

packages/lib/timezone.ts

@@ -35,5 +35,6 @@ export const addCitiesToDropdown = (cities: ICity[]) => {
 export const handleOptionLabel = (option: ITimezoneOption, cities: ICity[]) => {
   const timezoneValue = option.label.split(")")[0].replace("(", " ").replace("T", "T ");
   const cityName = option.label.split(") ")[1];
-  return cities.length > 0 ? `${cityName}${timezoneValue}` : `${option.value}${timezoneValue}`;
+  const refactoredOption = option.value.replace(/_/g, " ");
+  return cities.length > 0 ? `${cityName}${timezoneValue}` : `${refactoredOption}${timezoneValue}`;
 };

packages/ui/components/form/timezone-select/TimezoneSelect.tsx

@@ -34,6 +34,13 @@ export function TimezoneSelect({
     });
   }, [components]);
 
+  // We use modifiedTimezones in place of the allTimezones object replacing any underscores in the curly braces
+  // with spaces and removing the America/Detroit timezone, adding the America/New_York timezone instead.
+  const modifiedTimezones = useMemo(() => {
+    const { "America/Detroit": _, ...rest } = allTimezones;
+    return { ...rest, "America/New_York": "New York" };
+  }, []);
+
   return (
     <BaseSelect
       className={className}
@@ -41,13 +48,15 @@ export function TimezoneSelect({
       isDisabled={isLoading}
       {...reactSelectProps}
       timezones={{
-        ...allTimezones,
+        ...modifiedTimezones,
         ...addCitiesToDropdown(cities),
         "America/Asuncion": "Asuncion",
       }}
       onInputChange={handleInputChange}
       {...props}
-      formatOptionLabel={(option) => <p className="truncate">{(option as ITimezoneOption).value}</p>}
+      formatOptionLabel={(option) => (
+        <p className="truncate">{(option as ITimezoneOption).value.replace(/_/g, " ")}</p>
+      )}
       getOptionLabel={(option) => handleOptionLabel(option as ITimezoneOption, cities)}
       classNames={{
         ...timezoneClassNames,