From d1c2872f6eb7fb16dbdfd807f0fe346d52ef91d5 Mon Sep 17 00:00:00 2001
From: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
Date: Thu, 19 Dec 2024 19:08:34 +0200
Subject: [PATCH] fix: platform booker timezone select (#18277)

---
 .../platform/atoms/hooks/useGetCityTimezones.ts   | 13 +++++++++++--
 packages/platform/atoms/timezone/index.tsx        | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/platform/atoms/hooks/useGetCityTimezones.ts b/packages/platform/atoms/hooks/useGetCityTimezones.ts
index 70996b2916..b00de934ac 100644
--- a/packages/platform/atoms/hooks/useGetCityTimezones.ts
+++ b/packages/platform/atoms/hooks/useGetCityTimezones.ts
@@ -1,14 +1,23 @@
 import { useQuery } from "@tanstack/react-query";
 
+import { SUCCESS_STATUS } from "@calcom/platform-constants";
+import type { ApiResponse } from "@calcom/platform-types";
+
 import http from "../lib/http";
 
+type Timezones = { city: string; timezone: string }[];
 const useGetCityTimezones = () => {
   const pathname = `/timezones`;
 
-  const { isLoading, data } = useQuery({
+  const { isLoading, data } = useQuery<ApiResponse<Timezones>>({
     queryKey: ["city-timezones"],
     queryFn: () => {
-      return http?.get(pathname).then((res) => res.data);
+      return http?.get<ApiResponse<Timezones>>(pathname).then((res) => {
+        if (res.data.status === SUCCESS_STATUS) {
+          return res.data;
+        }
+        throw new Error(res.data.error.message);
+      });
     },
   });
 
diff --git a/packages/platform/atoms/timezone/index.tsx b/packages/platform/atoms/timezone/index.tsx
index a81cbf20c0..a579e3aa54 100644
--- a/packages/platform/atoms/timezone/index.tsx
+++ b/packages/platform/atoms/timezone/index.tsx
@@ -6,5 +6,18 @@ import useGetCityTimezones from "../hooks/useGetCityTimezones";
 export function Timezone(props: TimezoneSelectProps) {
   const { isLoading, data } = useGetCityTimezones();
 
-  return <TimezoneSelectComponent {...props} data={data?.data} isPending={isLoading} />;
+  return (
+    <TimezoneSelectComponent
+      {...props}
+      data={
+        Array.isArray(data)
+          ? data.map(({ city, timezone }) => ({
+              label: city,
+              timezone,
+            }))
+          : []
+      }
+      isPending={isLoading}
+    />
+  );
 }