feat: render and settimezone

src/pages/Settings/Settings.tsx

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./Settings.css";
 import { useLanguage } from "../../contexts/LanguageContext/useLanguage";
 import CSelect from "../../components/CSelect";
@@ -19,10 +19,15 @@ import CModal from "../../components/CModal";
 import CButton from "../../components/CButton";
 import { Link } from "react-router-dom";
 import CInput from "../../components/CInput";
-import { checkPassword } from "../../stores/slices/accountSlice";
+import { checkPassword, setTimezone } from "../../stores/slices/accountSlice";
+import { TIME_ZONES } from "../../constants/timezones";
 
 const Settings: React.FC = () => {
   const [password, setPassword] = useState("");
+  const [selectedTimezone, setSelectedTimezone] = useState({
+    ianaId: "Asia/Tashkent",
+    name: "(UTC+05:00) Ashgabat, Tashkent",
+  });
   const [isOpenLogoutModal, setIsOpenLogoutModal] = useState(false);
   const [isOpenDeleteAccountModal, setIsOpenDeleteAccountModal] =
     useState(false);
@@ -31,6 +36,7 @@ const Settings: React.FC = () => {
   const { isCheckPasswordLoading, errorCheckPassword } = useAppSelector(
     (state: RootState) => state.account
   );
+  const { session } = useAppSelector((state: RootState) => state.account);
   const dispatch = useAppDispatch();
 
   const toggleLogoutModal = () => {
@@ -41,6 +47,15 @@ const Settings: React.FC = () => {
     setIsOpenDeleteAccountModal((prev) => !prev);
   };
 
+  useEffect(() => {
+    if (session.timeZoneStr) {
+      const tz = TIME_ZONES.find((tz) => tz.ianaId === session.timeZoneStr);
+      if (tz) {
+        setSelectedTimezone(tz);
+      }
+    }
+  }, [session]);
+
   return (
     <div className="settings">
       <h3 className="settings__title">{t("settings.title")}</h3>
@@ -88,6 +103,21 @@ const Settings: React.FC = () => {
           ]}
         />
 
+        <CSelect
+          value={selectedTimezone.ianaId}
+          options={TIME_ZONES.map((tz) => ({
+            label: tz.name,
+            value: tz.ianaId,
+          }))}
+          onChange={(ianaId: string) => {
+            const tz = TIME_ZONES.find((tz) => tz.ianaId === ianaId);
+            if (tz) {
+              setSelectedTimezone(tz);
+              dispatch(setTimezone({ zone: tz.ianaId, offset: tz.offset }));
+            }
+          }}
+        />
+
         <h3>{t("settings.account")}</h3>
 
         <div

src/stores/slices/accountSlice.ts

@@ -6,6 +6,8 @@ interface ISession {
   login: string;
   emailVerified: boolean;
   subDateEnd: string;
+  paid: boolean;
+  timeZoneStr: string;
 }
 
 interface IAccountState {
@@ -20,6 +22,8 @@ const initialState: IAccountState = {
     login: "",
     emailVerified: false,
     subDateEnd: "",
+    paid: true,
+    timeZoneStr: "",
   },
   loading: false,
   isCheckPasswordLoading: false,
@@ -80,6 +84,28 @@ export const checkPassword = createAsyncThunk(
   }
 );
 
+export const setTimezone = createAsyncThunk(
+  "account/setTimezone",
+  async (
+    { zone, offset }: { zone: string; offset: number },
+    { rejectWithValue }
+  ) => {
+    try {
+      const response = await sendRpcRequest("account.setTimeZone", {
+        zone,
+        offset,
+      });
+
+      return response;
+    } catch (error) {
+      if (typeof error === "object" && error !== null && "message" in error) {
+        return rejectWithValue((error as { message: string }).message);
+      }
+      return rejectWithValue("Unknown error occurred");
+    }
+  }
+);
+
 const accountSlice = createSlice({
   name: "account",
   initialState,
@@ -107,6 +133,16 @@ const accountSlice = createSlice({
       .addCase(checkPassword.rejected, (state, action) => {
         state.isCheckPasswordLoading = false;
         state.errorCheckPassword = action.payload as string;
+      })
+
+      .addCase(setTimezone.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(setTimezone.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(setTimezone.rejected, (state) => {
+        state.loading = false;
       });
   },
 });