@@ -379,19 +363,12 @@ const ProfileSettingsPage = observer(() => {
control={control}
rules={{ required: "Please select a timezone" }}
render={({ field: { value, onChange } }) => (
-
t.value === value)) ?? value)
- : "Select a timezone"
- }
- options={timeZoneOptions}
- onChange={onChange}
- buttonClassName={errors.user_timezone ? "border-red-500" : ""}
- className="rounded-md border-[0.5px] !border-custom-border-200"
- optionsClassName="w-72"
- input
+ onChange={(value: string) => {
+ onChange(value);
+ }}
+ error={Boolean(errors.user_timezone)}
/>
)}
/>
diff --git a/web/core/components/global/index.ts b/web/core/components/global/index.ts
index 1230b8384fc..bb0ffcec8a1 100644
--- a/web/core/components/global/index.ts
+++ b/web/core/components/global/index.ts
@@ -1 +1,3 @@
export * from "./product-updates";
+
+export * from "./timezone-select";
diff --git a/web/core/components/global/timezone-select.tsx b/web/core/components/global/timezone-select.tsx
new file mode 100644
index 00000000000..55b9f5cf186
--- /dev/null
+++ b/web/core/components/global/timezone-select.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { CustomSearchSelect } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import useTimezone from "@/hooks/use-timezone";
+
+type TTimezoneSelect = {
+ value: string | undefined;
+ onChange: (value: string) => void;
+ error?: boolean;
+ label?: string;
+ buttonClassName?: string;
+ className?: string;
+ optionsClassName?: string;
+ disabled?: boolean;
+};
+
+export const TimezoneSelect: FC = observer((props) => {
+ // props
+ const {
+ value,
+ onChange,
+ error = false,
+ label = "Select a timezone",
+ buttonClassName = "",
+ className = "",
+ optionsClassName = "",
+ disabled = false,
+ } = props;
+ // hooks
+ const { disabled: isDisabled, timezones, selectedValue } = useTimezone();
+
+ return (
+
+
+
+ );
+});
diff --git a/web/core/components/project/form.tsx b/web/core/components/project/form.tsx
index 855c52aaf7f..8ce776eb666 100644
--- a/web/core/components/project/form.tsx
+++ b/web/core/components/project/form.tsx
@@ -16,16 +16,15 @@ import {
CustomEmojiIconPicker,
EmojiIconPickerTypes,
Tooltip,
- CustomSearchSelect,
} from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ImagePickerPopover } from "@/components/core";
+import { TimezoneSelect } from "@/components/global";
// constants
import { PROJECT_UPDATED } from "@/constants/event-tracker";
import { NETWORK_CHOICES } from "@/constants/project";
// helpers
-import { TTimezone, TIME_ZONES } from "@/constants/timezones";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { getFileURL } from "@/helpers/file.helper";
@@ -34,6 +33,7 @@ import { useEventTracker, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// services
import { ProjectService } from "@/services/project";
+
export interface IProjectDetailsForm {
project: IProject;
workspaceSlug: string;
@@ -68,20 +68,6 @@ export const ProjectDetailsForm: FC = (props) => {
});
// derived values
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
- const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
- if (!timezone) return undefined;
- return (
-
- {timezone.gmtOffset}
- {timezone.name}
-
- );
- };
- const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
- value: timeZone.value,
- query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
- content: getTimeZoneLabel(timeZone),
- }));
const coverImage = watch("cover_image_url");
useEffect(() => {
@@ -393,20 +379,16 @@ export const ProjectDetailsForm: FC = (props) => {
control={control}
rules={{ required: "Please select a timezone" }}
render={({ field: { value, onChange } }) => (
- t.value === value)) ?? value)
- : "Select a timezone"
- }
- options={timeZoneOptions}
- onChange={onChange}
- buttonClassName={errors.timezone ? "border-red-500" : "border-none"}
- className="rounded-md border-[0.5px] !border-custom-border-200"
- optionsClassName="w-72"
- input
- />
+ <>
+ {
+ onChange(value);
+ }}
+ error={Boolean(errors.timezone)}
+ buttonClassName="border-none"
+ />
+
)}
/>
{errors.timezone && {errors.timezone.message}}
diff --git a/web/core/hooks/use-timezone.tsx b/web/core/hooks/use-timezone.tsx
new file mode 100644
index 00000000000..983f99beb43
--- /dev/null
+++ b/web/core/hooks/use-timezone.tsx
@@ -0,0 +1,80 @@
+import useSWR from "swr";
+import { TTimezoneObject } from "@plane/types";
+// services
+import timezoneService from "@/services/timezone.service";
+
+// group timezones by value
+const groupTimezones = (timezones: TTimezoneObject[]): TTimezoneObject[] => {
+ const groupedMap = timezones.reduce((acc, timezone: TTimezoneObject) => {
+ const key = timezone.value;
+
+ if (!acc.has(key)) {
+ acc.set(key, {
+ utc_offset: timezone.utc_offset,
+ gmt_offset: timezone.gmt_offset,
+ value: timezone.value,
+ label: timezone.label,
+ });
+ } else {
+ const existing = acc.get(key);
+ existing.label = `${existing.label}, ${timezone.label}`;
+ }
+
+ return acc;
+ }, new Map());
+
+ return Array.from(groupedMap.values());
+};
+
+const useTimezone = () => {
+ // fetching the timezone from the server
+ const {
+ data: timezones,
+ isLoading: timezoneIsLoading,
+ error: timezonesError,
+ } = useSWR("TIMEZONES_LIST", () => timezoneService.fetch(), {
+ refreshInterval: 0,
+ });
+
+ // derived values
+ const isDisabled = timezoneIsLoading || timezonesError || !timezones;
+
+ const getTimeZoneLabel = (timezone: TTimezoneObject | undefined) => {
+ if (!timezone) return undefined;
+ return (
+
+ {timezone.utc_offset}
+ {timezone.label}
+
+ );
+ };
+ const options = [
+ ...groupTimezones(timezones?.timezones || [])?.map((timezone) => ({
+ value: timezone.value,
+ query: `${timezone.value} ${timezone.label}, ${timezone.gmt_offset}, ${timezone.utc_offset}`,
+ content: getTimeZoneLabel(timezone),
+ })),
+ {
+ value: "UTC",
+ query: "utc, coordinated universal time",
+ content: "UTC",
+ },
+ {
+ value: "Universal",
+ query: "universal, coordinated universal time",
+ content: "Universal",
+ },
+ ];
+
+ const selectedTimezone = (value: string | undefined) => options.find((option) => option.value === value)?.content;
+
+ return {
+ timezones: options,
+ isLoading: timezoneIsLoading,
+ error: timezonesError,
+ disabled: isDisabled,
+ selectedValue: selectedTimezone,
+ };
+};
+
+export default useTimezone;
diff --git a/web/core/services/timezone.service.ts b/web/core/services/timezone.service.ts
new file mode 100644
index 00000000000..d19e7e96495
--- /dev/null
+++ b/web/core/services/timezone.service.ts
@@ -0,0 +1,23 @@
+import { TTimezones } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// api services
+import { APIService } from "@/services/api.service";
+
+export class TimezoneService extends APIService {
+ constructor() {
+ super(API_BASE_URL);
+ }
+
+ async fetch(): Promise {
+ return this.get(`/api/timezones/`)
+ .then((response) => response?.data)
+ .catch((error) => {
+ throw error?.response?.data;
+ });
+ }
+}
+
+const timezoneService = new TimezoneService();
+
+export default timezoneService;