Fix: Filter Timezones by cities (#7540)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

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

@@ -63,7 +63,10 @@ it("should filter cities for a valid city name", () => {
 it("should return appropriate timezone(s) for a given city name array", () => {
   expect(addCitiesToDropdown(cityData)).toMatchInlineSnapshot(`
     Object {
+      "America/Argentina/Cordoba": "San Francisco",
+      "America/El_Salvador": "San Francisco Gotera",
       "America/Los_Angeles": "San Francisco",
+      "America/Santo_Domingo": "San Francisco de Macoris",
       "America/Sao_Paulo": "Sao Francisco do Sul",
     }
   `);

packages/lib/isProblematicTimezone.ts

@@ -0,0 +1,49 @@
+// This function is purely necessary because of react-timezone-select see
+// https://github.com/spencermountain/spacetime/issues/323
+// https://github.com/spencermountain/timezone-soft/issues/17
+// and https://github.com/ndom91/react-timezone-select/issues/76
+// for more context
+function isProblematicTimezone(tz: string): boolean {
+  const problematicTimezones = [
+    "null",
+    "Africa/Malabo",
+    "Africa/Maseru",
+    "Africa/Mbabane",
+    "America/Anguilla",
+    "America/Antigua",
+    "America/Aruba",
+    "America/Bahia",
+    "America/Cayman",
+    "America/Dominica",
+    "America/Grenada",
+    "America/Guadeloupe",
+    "America/Kralendijk",
+    "America/Lower_Princes",
+    "America/Maceio",
+    "America/Marigot",
+    "America/Montserrat",
+    "America/Nassau",
+    "America/St_Barthelemy",
+    "America/St_Kitts",
+    "America/St_Lucia",
+    "America/St_Thomas",
+    "America/St_Vincent",
+    "America/Tortola",
+    "Antarctica/McMurdo",
+    "Arctic/Longyearbyen",
+    "Asia/Bahrain",
+    "Atlantic/St_Helena",
+    "Europe/Busingen",
+    "Europe/Guernsey",
+    "Europe/Isle_of_Man",
+    "Europe/Mariehamn",
+    "Europe/San_Marino",
+    "Europe/Vaduz",
+    "Europe/Vatican",
+    "Indian/Comoro",
+    "Pacific/Saipan",
+    "Africa/Asmara",
+  ];
+  return problematicTimezones.includes(tz);
+}
+export default isProblematicTimezone;

packages/lib/timezone.ts

@@ -1,8 +1,9 @@
 import type { ITimezoneOption } from "react-timezone-select";
-import { allTimezones } from "react-timezone-select";
 
 import type { ICity } from "@calcom/ui/components/form/timezone-select";
 
+import isProblematicTimezone from "./isProblematicTimezone";
+
 function findPartialMatch(itemsToSearch: string, searchString: string) {
   const searchItems = searchString.split(" ");
   return searchItems.every((i) => itemsToSearch.toLowerCase().indexOf(i.toLowerCase()) >= 0);
@@ -23,7 +24,7 @@ export const filterByCities = (tz: string, data: ICity[]): ICity[] => {
 
 export const addCitiesToDropdown = (cities: ICity[]) => {
   const cityTimezones = cities?.reduce((acc: { [key: string]: string }, city: ICity) => {
-    if (Object.keys(allTimezones).includes(city.timezone)) {
+    if (city.timezone !== null && !isProblematicTimezone(city.timezone)) {
       acc[city.timezone] = city.city;
     }
     return acc;