chore: Cache timezones by calcom version (#15556)

* chore: Cache timezones by calcom version

* Fix types

packages/trpc/server/createNextApiHandler.ts

@@ -57,22 +57,22 @@ export function createNextApiHandler(router: AnyRouter, isPublic = false, namesp
       defaultHeaders.headers["cache-control"] = `no-cache`;
 
       if (isPublic && paths) {
-        const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
         const FIVE_MINUTES_IN_SECONDS = 5 * 60;
         const ONE_YEAR_IN_SECONDS = 31536000;
+        const SETTING_FOR_CACHED_BY_VERSION =
+          process.env.NODE_ENV === "development" ? "no-cache" : `max-age=${ONE_YEAR_IN_SECONDS}`;
 
         const cacheRules = {
           session: "no-cache",
 
-          i18n: process.env.NODE_ENV === "development" ? "no-cache" : `max-age=${ONE_YEAR_IN_SECONDS}`,
+          // i18n and cityTimezones are now being accessed using the CalComVersion, which updates on every release,
+          // letting the clients get the new versions when the version number changes.
+          i18n: SETTING_FOR_CACHED_BY_VERSION,
+          cityTimezones: SETTING_FOR_CACHED_BY_VERSION,
 
           // FIXME: Using `max-age=1, stale-while-revalidate=60` fails some booking tests.
           "slots.getSchedule": `no-cache`,
 
-          // Timezones are hardly updated. No need to burden the servers with requests for this by keeping low max-age.
-          // Keep it cached for a day and then give it 60 seconds more at most to be updated.
-          cityTimezones: `max-age=${ONE_DAY_IN_SECONDS}, stale-while-revalidate=60`,
-
           // Feature Flags change but it might be okay to have a 5 minute cache to avoid burdening the servers with requests for this.
           // Note that feature flags can be used to quickly kill a feature if it's not working as expected. So, we have to keep fresh time lesser than the deployment time atleast
           "features.map": `max-age=${FIVE_MINUTES_IN_SECONDS}, stale-while-revalidate=60`, // "map" - Feature Flag Map

packages/trpc/server/routers/publicViewer/cityTimezones.schema.ts

@@ -1 +0,0 @@
-export {};

packages/trpc/server/routers/publicViewer/timezones/_router.tsx

@@ -1,5 +1,6 @@
 import publicProcedure from "../../../procedures/publicProcedure";
 import { importHandler, router } from "../../../trpc";
+import { cityTimezonesSchema } from "./cityTimezones.schema";
 
 const NAMESPACE = "publicViewer";
 
@@ -7,7 +8,7 @@ const namespaced = (s: string) => `${NAMESPACE}.${s}`;
 
 // things that unauthenticated users can query about themselves
 export const timezonesRouter = router({
-  cityTimezones: publicProcedure.query(async () => {
+  cityTimezones: publicProcedure.input(cityTimezonesSchema).query(async () => {
     const handler = await importHandler(
       namespaced("cityTimezones"),
       () => import("@calcom/lib/cityTimezonesHandler")

packages/trpc/server/routers/publicViewer/timezones/cityTimezones.schema.ts

@@ -1 +1,7 @@
-export {};
+import { z } from "zod";
+
+export const cityTimezonesSchema = z.object({
+  CalComVersion: z.string(),
+});
+
+export type CityTimezonesSchema = z.infer<typeof cityTimezonesSchema>;

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

@@ -3,6 +3,7 @@ import type { ITimezoneOption, ITimezone, Props as SelectProps } from "react-tim
 import BaseSelect from "react-timezone-select";
 
 import { classNames } from "@calcom/lib";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { filterByCities, addCitiesToDropdown, handleOptionLabel } from "@calcom/lib/timezone";
 import { trpc } from "@calcom/trpc/react";
 
@@ -18,9 +19,14 @@ export type TimezoneSelectProps = SelectProps & {
   timezoneSelectCustomClassname?: string;
 };
 export function TimezoneSelect(props: TimezoneSelectProps) {
-  const { data, isPending } = trpc.viewer.timezones.cityTimezones.useQuery(undefined, {
-    trpc: { context: { skipBatch: true } },
-  });
+  const { data, isPending } = trpc.viewer.timezones.cityTimezones.useQuery(
+    {
+      CalComVersion: CALCOM_VERSION,
+    },
+    {
+      trpc: { context: { skipBatch: true } },
+    }
+  );
 
   return <TimezoneSelectComponent data={data} isPending={isPending} {...props} />;
 }