Merge pull request #1575 from ever-co/improve/web-timezones-improvement

Improve/web timezones improvement

apps/web/app/helpers/date.ts

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import * as momentTimezone from 'moment-timezone';
 
 const months: { [key: string]: string } = {
 	'01': 'January',
@@ -28,7 +29,10 @@ export function changeTimezone(date: Date, ianatz?: string) {
 }
 
 export function userTimezone() {
-	return Intl.DateTimeFormat().resolvedOptions().timeZone;
+	const userTimezone = momentTimezone.tz.guess();
+	const offset = momentTimezone.tz(userTimezone).format('Z');
+	const formattedTimezone = `${userTimezone.replace(/_/, ' ')} (UTC ${offset})`;
+	return formattedTimezone;
 }
 
 export function addHours(numOfHours: number, date = new Date()) {

apps/web/lib/components/dropdown.tsx

@@ -5,6 +5,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { Card } from './card';
 import { SpinnerLoader } from './loader';
 import { IClassName } from '@app/interfaces';
+import { useTranslation } from 'lib/i18n';
 
 export type DropdownItem<D = Record<string | number | symbol, any>> = {
 	key: React.Key;
@@ -27,6 +28,8 @@ type Props<T extends DropdownItem> = {
 	publicTeam?: boolean;
 	closeOnChildrenClick?: boolean;
 	cardClassName?: string;
+	searchBar?: boolean;
+	setSearchText?: React.Dispatch<SetStateAction<string>>;
 } & PropsWithChildren;
 
 export function Dropdown<T extends DropdownItem>({
@@ -40,8 +43,11 @@ export function Dropdown<T extends DropdownItem>({
 	buttonStyle,
 	optionsClassName,
 	publicTeam,
-	closeOnChildrenClick = true
+	closeOnChildrenClick = true,
+	searchBar = false,
+	setSearchText
 }: Props<T>) {
+	const { trans } = useTranslation();
 	return (
 		<div className={clsxm('rounded-xl', className)}>
 			<Listbox value={Value} onChange={onChange} disabled={publicTeam}>
@@ -100,10 +106,25 @@ export function Dropdown<T extends DropdownItem>({
 						<Card
 							shadow="custom"
 							className={clsxm(
-								'md:px-4 py-4 rounded-x dark:bg-[#1B1D22] dark:border-[0.125rem] border-[#0000001A] dark:border-[#26272C]'
+								'md:px-4 py-4 rounded-x  dark:bg-[#1B1D22] dark:border-[0.125rem] border-[#0000001A] dark:border-[#26272C]',
+								searchBar && 'w-96'
 							)}
 							style={{ boxShadow: '0px 14px 39px rgba(0, 0, 0, 0.12)' }}
 						>
+							{searchBar && (
+								<div className="sticky top-0 z-40 mb-4 dark:bg-[#1B1D22] bg-white border-b">
+									<input
+										placeholder={
+											trans.pages.settingsPersonal.TIMEZONE_SEARCH_PLACEHOLDER
+										}
+										className="w-full h-7 focus:outline-0 rounded-md dark:bg-[#1B1D22] dark:text-white"
+										onChange={
+											setSearchText && ((e) => setSearchText(e.target.value))
+										}
+									/>
+								</div>
+							)}
+
 							{items.map((Item, index) => (
 								<Listbox.Option
 									key={Item.key ? Item.key : index}

apps/web/lib/i18n/en.ts

@@ -221,7 +221,8 @@ export const en = {
 			SUBSCRIPTION: 'Subscription',
 			ABOUT_TO_CHANGE_EMAIL: 'You are about to change Email',
 			ABOUT_TO_DELETE_ACCOUNT: 'You are about to Delete your account ?',
-			ABOUT_TO_REMOVE_ACCOUNT: 'You are about to Remove your account ?'
+			ABOUT_TO_REMOVE_ACCOUNT: 'You are about to Remove your account ?',
+			TIMEZONE_SEARCH_PLACEHOLDER: 'Search Time Zone'
 		},
 		settingsTeam: {
 			HEADING_TITLE: 'General Settings',

apps/web/lib/settings/timezone-dropdown.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Dropdown } from 'lib/components';
-import timeZones from './timezones';
+// import timeZones from './timezones';
 import { mapTimezoneItems, TimezoneItem } from 'lib/features';
 import { useTimezoneSettings } from '@app/hooks';
 import { clsxm } from '@app/utils';
+import moment from 'moment-timezone';
 
 export const TimezoneDropDown = ({
 	currentTimezone,
@@ -13,8 +14,32 @@ export const TimezoneDropDown = ({
 	onChangeTimezone: any;
 }) => {
 	const { activeTimezone, setActiveTimezone } = useTimezoneSettings();
+	const [searchText, setSearchText] = useState<string>('');
 
-	const timeZonesMap: string[] = timeZones; // TODO: we should import here from timeZones
+	const allTimezonesNames = moment.tz.names();
+	const allTimezonesWithUTC = allTimezonesNames.map((item) => {
+		const offset = moment.tz(item).format('Z');
+		return { name: item, offset: offset };
+	});
+
+	allTimezonesWithUTC.sort((a, b) => {
+		// Compare the offsets for sorting
+		if (a.offset < b.offset) {
+			return -1;
+		}
+		if (a.offset > b.offset) {
+			return 1;
+		}
+		return 0;
+	});
+
+	const sortedTimezones = allTimezonesWithUTC.map(
+		(item) => `${item.name} (UTC ${item.offset})`
+	);
+
+	const timeZonesMap: string[] = sortedTimezones.filter((item) =>
+		item.toLowerCase().includes(searchText.toLowerCase())
+	);
 
 	const items = useMemo(() => mapTimezoneItems(timeZonesMap), [timeZonesMap]);
 
@@ -40,6 +65,8 @@ export const TimezoneDropDown = ({
 
 	return (
 		<Dropdown
+			searchBar={true}
+			setSearchText={setSearchText}
 			className="md:w-[469px]"
 			buttonClassName={clsxm(
 				'py-0 font-medium h-[54px]',

apps/web/package.json

@@ -52,6 +52,7 @@
 		"lodash": "^4.17.21",
 		"lucide-react": "^0.263.1",
 		"moment": "^2.29.4",
+		"moment-timezone": "^0.5.42",
 		"nanoid": "5.0.1",
 		"next": "^13.0.5",
 		"next-themes": "^0.2.1",

yarn.lock

@@ -14470,6 +14470,13 @@ module-deps@^6.2.3:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+moment-timezone@^0.5.42:
+  version "0.5.43"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.43.tgz#3dd7f3d0c67f78c23cd1906b9b2137a09b3c4790"
+  integrity sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==
+  dependencies:
+    moment "^2.29.4"
+
 moment@^2.19.3, moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"