From b2c28a23ab5b53f2e3729657d23cccb50f64e18a Mon Sep 17 00:00:00 2001
From: AYUSHKUMAR_21JE0209
 <103947228+AyushKumar123456789@users.noreply.github.com>
Date: Wed, 5 Aug 2026 12:01:10 +0530
Subject: [PATCH] fix: language update functionality #29900 (#29901)

* removed bug of language update work properly

* feat: implement general settings view and user form components for profile configuration

---------

Co-authored-by: Bandhan Majumder <133476557+bandhan-majumder@users.noreply.github.com>
---
 .../settings/my-account/general-view.tsx      | 27 ++++++++++--------
 .../web/modules/users/components/UserForm.tsx | 28 +++++++++++--------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/apps/web/modules/settings/my-account/general-view.tsx b/apps/web/modules/settings/my-account/general-view.tsx
index c2e430de7e..db0af10015 100644
--- a/apps/web/modules/settings/my-account/general-view.tsx
+++ b/apps/web/modules/settings/my-account/general-view.tsx
@@ -18,7 +18,7 @@ import { TimezoneSelect } from "@calcom/web/modules/timezone/components/Timezone
 import TravelScheduleModal from "@components/settings/TravelScheduleModal";
 import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
 import { useSession } from "next-auth/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 export type FormValues = {
@@ -89,15 +89,18 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
     { value: 24, label: t("24_hour") },
   ];
 
-  const weekStartOptions = [
-    { value: "Sunday", label: nameOfDay(localeProp, 0) },
-    { value: "Monday", label: nameOfDay(localeProp, 1) },
-    { value: "Tuesday", label: nameOfDay(localeProp, 2) },
-    { value: "Wednesday", label: nameOfDay(localeProp, 3) },
-    { value: "Thursday", label: nameOfDay(localeProp, 4) },
-    { value: "Friday", label: nameOfDay(localeProp, 5) },
-    { value: "Saturday", label: nameOfDay(localeProp, 6) },
-  ];
+  const weekStartOptions = useMemo(
+    () => [
+      { value: "Sunday", label: nameOfDay(language || localeProp, 0) },
+      { value: "Monday", label: nameOfDay(language || localeProp, 1) },
+      { value: "Tuesday", label: nameOfDay(language || localeProp, 2) },
+      { value: "Wednesday", label: nameOfDay(language || localeProp, 3) },
+      { value: "Thursday", label: nameOfDay(language || localeProp, 4) },
+      { value: "Friday", label: nameOfDay(language || localeProp, 5) },
+      { value: "Saturday", label: nameOfDay(language || localeProp, 6) },
+    ],
+    [language, localeProp]
+  );
 
   const formMethods = useForm<FormValues>({
     defaultValues: {
@@ -278,7 +281,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
                     <>{t("time_format")}</>
                   </Label>
                   <Select
-                    value={value}
+                    value={timeFormatOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
                     options={timeFormatOptions}
                     onChange={(event) => {
                       if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
@@ -300,7 +303,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
                     <>{t("start_of_week")}</>
                   </Label>
                   <Select
-                    value={value}
+                    value={weekStartOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
                     options={weekStartOptions}
                     onChange={(event) => {
                       if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
diff --git a/apps/web/modules/users/components/UserForm.tsx b/apps/web/modules/users/components/UserForm.tsx
index 7c776cc001..defe5d088b 100644
--- a/apps/web/modules/users/components/UserForm.tsx
+++ b/apps/web/modules/users/components/UserForm.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { formatToLocalizedDate } from "@calcom/lib/dayjs";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -71,22 +72,25 @@ export function UserForm({
   onSubmit: (data: FormValues) => void;
   submitLabel?: string;
 }) {
-  const { t } = useLocale();
+  const { t, i18n: { language } } = useLocale();
 
   const timeFormatOptions = [
     { value: 12, label: t("12_hour") },
     { value: 24, label: t("24_hour") },
   ];
 
-  const weekStartOptions = [
-    { value: "Sunday", label: nameOfDay(localeProp, 0) },
-    { value: "Monday", label: nameOfDay(localeProp, 1) },
-    { value: "Tuesday", label: nameOfDay(localeProp, 2) },
-    { value: "Wednesday", label: nameOfDay(localeProp, 3) },
-    { value: "Thursday", label: nameOfDay(localeProp, 4) },
-    { value: "Friday", label: nameOfDay(localeProp, 5) },
-    { value: "Saturday", label: nameOfDay(localeProp, 6) },
-  ];
+  const weekStartOptions = useMemo(
+    () => [
+      { value: "Sunday", label: nameOfDay(language || localeProp, 0) },
+      { value: "Monday", label: nameOfDay(language || localeProp, 1) },
+      { value: "Tuesday", label: nameOfDay(language || localeProp, 2) },
+      { value: "Wednesday", label: nameOfDay(language || localeProp, 3) },
+      { value: "Thursday", label: nameOfDay(language || localeProp, 4) },
+      { value: "Friday", label: nameOfDay(language || localeProp, 5) },
+      { value: "Saturday", label: nameOfDay(language || localeProp, 6) },
+    ],
+    [language, localeProp]
+  );
 
   const userRoleOptions = [
     { value: "USER", label: t("user") },
@@ -257,7 +261,7 @@ export function UserForm({
               <>{t("time_format")}</>
             </Label>
             <Select
-              value={value}
+              value={timeFormatOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
               options={timeFormatOptions}
               onChange={(event) => {
                 if (event) form.setValue("timeFormat", { ...event });
@@ -275,7 +279,7 @@ export function UserForm({
               <>{t("start_of_week")}</>
             </Label>
             <Select
-              value={value}
+              value={weekStartOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
               options={weekStartOptions}
               onChange={(event) => {
                 if (event) form.setValue("weekStart", { ...event });