Merge pull request #1572 from ever-co/bug/timezones-popup

Bug/timezones popup

apps/mobile/app/screens/Authenticated/SettingScreen/components/TimezonePopup.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-unused-styles */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
 import React, { FC, useEffect, useState } from "react"
 import moment from "moment-timezone"
 import {
@@ -14,8 +15,9 @@ import {
 	TouchableWithoutFeedback,
 	Pressable,
 	FlatList,
+	TextInput,
 } from "react-native"
-import { AntDesign, FontAwesome } from "@expo/vector-icons"
+import { AntDesign, FontAwesome, EvilIcons } from "@expo/vector-icons"
 
 // COMPONENTS
 import { translate } from "../../../../i18n"
@@ -25,6 +27,7 @@ export interface Props {
 	visible: boolean
 	onDismiss: () => unknown
 	onTimezoneSelect: (s: string) => unknown
+	userTimezone: string
 }
 
 export interface IFilter {}
@@ -64,17 +67,43 @@ const ModalPopUp = ({ visible, children, onDismiss }) => {
 	)
 }
 
-const TimezonePopup: FC<Props> = function FilterPopup({ visible, onDismiss, onTimezoneSelect }) {
+const TimezonePopup: FC<Props> = function FilterPopup({
+	visible,
+	onDismiss,
+	onTimezoneSelect,
+	userTimezone,
+}) {
 	const { colors, dark } = useAppTheme()
 	const [timezones, setTimezones] = useState([])
 	const [selectedTimezone, setSelectedTimezone] = useState("")
+	const [searchText, setSearchText] = useState<string>("")
 
 	useEffect(() => {
-		setTimezones(moment.tz.names)
+		const allTimezones = moment.tz.names()
+		const timezonesWithUTC = allTimezones.map((item) => {
+			const offset = moment.tz(item).format("Z")
+			const formattedItem = item.replace(/_/g, " ")
+			return { name: formattedItem, offset } // Create an object with name and offset
+		})
+
+		timezonesWithUTC.sort((a, b) => {
+			if (a.offset < b.offset) {
+				return -1
+			}
+			if (a.offset > b.offset) {
+				return 1
+			}
+			return 0
+		})
+
+		const sortedTimezones = timezonesWithUTC.map((item) => `${item.name} (UTC ${item.offset})`)
+
+		setTimezones(sortedTimezones)
 	}, [])
 
 	const handleTimezoneSelect = (item: string) => {
 		onTimezoneSelect(item)
+		setSelectedTimezone(item)
 		onDismiss()
 	}
 
@@ -85,10 +114,33 @@ const TimezonePopup: FC<Props> = function FilterPopup({ visible, onDismiss, onTi
 					<Text style={{ ...styles.mainTitle, color: colors.primary }}>
 						{translate("settingScreen.changeTimezone.selectTimezoneTitle")}
 					</Text>
+					<View
+						style={{
+							paddingHorizontal: 20,
+						}}
+					>
+						<TextInput
+							placeholder="Search Time Zone"
+							placeholderTextColor={dark ? "#5a5b5e" : "#00000021"}
+							style={[
+								styles.textInput,
+								{
+									borderBottomColor: dark ? "#5a5b5e" : "#00000021",
+									borderBottomWidth: 1,
+									color: colors.primary,
+								},
+							]}
+							value={searchText}
+							onChangeText={(text) => setSearchText(text)}
+						/>
+					</View>
+
 					<FlatList
 						style={styles.listContainer}
 						bounces={false}
-						data={timezones}
+						data={timezones.filter((timezone) =>
+							timezone.toLowerCase().includes(searchText.toLowerCase()),
+						)}
 						keyExtractor={(item, index) => item.toString()}
 						initialNumToRender={7}
 						renderItem={({ item }) => (
@@ -97,13 +149,13 @@ const TimezonePopup: FC<Props> = function FilterPopup({ visible, onDismiss, onTi
 								onPress={() => handleTimezoneSelect(item)}
 							>
 								<Text style={{ ...styles.tzTitle, color: colors.primary }}>{item}</Text>
-								{selectedTimezone === item ? (
-									<AntDesign name="checkcircle" color={"#27AE60"} size={24} />
+								{(selectedTimezone || userTimezone) === item ? (
+									<AntDesign name="checkcircle" color={"#27AE60"} size={21.5} />
 								) : (
 									<FontAwesome
 										name="circle-thin"
 										size={24}
-										olor={dark ? "" : "(40, 32, 72, 0.43)"}
+										color={dark ? "#5a5b5e" : "#00000021"}
 									/>
 								)}
 							</Pressable>
@@ -174,6 +226,7 @@ const styles = StyleSheet.create({
 		width: 156,
 		zIndex: 1000,
 	},
+	textInput: { fontSize: 18, marginTop: 10 },
 	tzTitle: {
 		fontFamily: typography.primary.semiBold,
 		fontSize: 14,

apps/mobile/app/screens/Authenticated/SettingScreen/components/UserTimezone.tsx

@@ -61,6 +61,7 @@ const UserTimezone = ({
 			<TimezonePopup
 				visible={timezoneModal}
 				onDismiss={() => setTimezoneModal(false)}
+				userTimezone={userTimeZone}
 				onTimezoneSelect={(e) => {
 					setUserTimeZone(e)
 				}}
@@ -71,7 +72,7 @@ const UserTimezone = ({
 				</Text>
 				<TouchableOpacity style={styles.field} onPress={() => setTimezoneModal(true)}>
 					<Text style={{ ...styles.text, color: colors.primary }}>
-						{limitTextCharaters({ text: userTimeZone, numChars: 17 })}
+						{limitTextCharaters({ text: userTimeZone, numChars: 32 })}
 					</Text>
 					<AntDesign name="down" size={20} color={colors.primary} />
 				</TouchableOpacity>

apps/mobile/app/services/hooks/features/useSettings.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useStores } from "../../../models"
-import { timezone } from "expo-localization"
 import { useQueryClient } from "react-query"
 import useFetchAllLanguages from "../../client/queries/language"
 
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import I18n from "i18n-js"
 import { updateUserInfoRequest } from "../../client/requests/user"
 import { ILanguageItemList, IUser } from "../../interfaces/IUserData"
+import moment from "moment-timezone"
 
 export function useSettings() {
 	const queryClient = useQueryClient()
@@ -44,13 +44,18 @@ export function useSettings() {
 	}, [])
 
 	const onDetectTimezone = useCallback(async () => {
-		if (timezone) {
+		const detectedTimezone = moment.tz.guess()
+
+		if (detectedTimezone) {
+			const offset = moment.tz(detectedTimezone).format("Z")
+			const formattedTimezoneName = detectedTimezone.replace(/_/g, " ")
+			const timezoneWithUTC = `${formattedTimezoneName} (UTC ${offset})`
 			await updateUserInfoRequest(
 				{
 					id: user.id,
 					data: {
 						...(user as IUser),
-						timeZone: timezone,
+						timeZone: timezoneWithUTC,
 					},
 					tenantId,
 				},