From 8bef6bb9ee49a6a09ade4fe345def3d4fb1b1c5a Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <klahouti81@gmail.com>
Date: Sun, 20 Jul 2025 17:19:22 +0330
Subject: [PATCH] fix: translation and styles

---
 public/locales/fa/profileSetting.json         | 36 +++++++++
 src/App.tsx                                   |  4 +-
 src/components/CountryFlag.tsx                | 46 ++++++++++++
 .../components/PersonalInformation.tsx        | 73 ++++++++++++-------
 .../profile/components/PhoneNumber.tsx        | 65 ++++++++++-------
 .../profile/components/SocialMedia.tsx        | 41 ++++++-----
 6 files changed, 193 insertions(+), 72 deletions(-)
 create mode 100644 public/locales/fa/profileSetting.json
 create mode 100644 src/components/CountryFlag.tsx

diff --git a/public/locales/fa/profileSetting.json b/public/locales/fa/profileSetting.json
new file mode 100644
index 0000000..ab5053b
--- /dev/null
+++ b/public/locales/fa/profileSetting.json
@@ -0,0 +1,36 @@
+{
+  "settingForm": {
+    "titlePersonalInfo": "اطلاعات شخصی من",
+    "descriptionPersonalInfo": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
+    "titlePhoneNumber": "شماره تماس من",
+    "descriptionPhoneNumber": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
+    "titleSocial": "ایمیل و شبکه های اجتماعی من",
+    "descriptionSocial": "این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
+    "rejectButton": "لغو",
+    "saveButton": "ذخیره",
+    "editButton": "ویرایش",
+    "editPhoneNumber": "تغییر شماره تماس",
+    "addEmailOrSocialButton": "افزودن ایمیل / سوشال",
+    "addEmailButton": "افزودن ایمیل",
+    "name": "نام",
+    "familyName": "نام خانوادگی",
+    "country": "کشور",
+    "gender": "جنسیت",
+    "nationalCode": "کد ملی",
+    "man": "مرد",
+    "woman": "زن",
+    "genderPlaceholder": "مرد",
+    "newPhoneNumber": "شماره تماس جدید",
+    "verificationCodeButton": "ارسال کد تایید",
+    "verificationCode": "کد تایید",
+    "checkCode": "بررسی کد",
+    "successButton": "تایید شد",
+    "email": "ایمیل",
+    "apple": "اپل",
+    "google": "گوگل",
+    "newEmail": "ایمیل جدید",
+    "dialogHeader": "با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از این ایمیل استفاده کنید",
+    "or": "یا",
+    "emailError": "لطفا یک ایمیل معتبر وارد کنید"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index 76660a8..0172e04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import { LanguageManager } from './components/LanguageManager';
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 
 =======
 >>>>>>> f1620b6 (fix: issue in user profile)
@@ -27,6 +28,8 @@ import { UserProfileForm } from './features/profile/components/UserProfileForm';
 =======
 import { UserForm } from './features/profile/components/UserForm';
 >>>>>>> 60c6dc1 (fix: styles)
+=======
+>>>>>>> afc7ff8 (fix: translation and styles)
 function App() {
   const { t } = useTranslation();
 
@@ -34,7 +37,6 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
-      <UserForm />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box
diff --git a/src/components/CountryFlag.tsx b/src/components/CountryFlag.tsx
new file mode 100644
index 0000000..59ce4d9
--- /dev/null
+++ b/src/components/CountryFlag.tsx
@@ -0,0 +1,46 @@
+import { Box, Typography } from '@mui/material';
+
+const countryCodeMap: { [key: string]: string } = {
+  ایران: 'ir',
+  قطر: 'qa',
+  آلمان: 'de',
+  آمریکا: 'us',
+  فرانسه: 'fr',
+  ایتالیا: 'it',
+  اسپانیا: 'es',
+  انگلیس: 'gb',
+  کانادا: 'ca',
+  استرالیا: 'au',
+  چین: 'cn',
+  ژاپن: 'jp',
+  هند: 'in',
+  روسیه: 'ru',
+  برزیل: 'br',
+  آرژانتین: 'ar',
+  ترکیه: 'tr',
+  سوئیس: 'ch',
+  سوئد: 'se',
+  نروژ: 'no',
+  عربستان: 'sa',
+  امارات: 'ae',
+  عراق: 'iq',
+  پاکستان: 'pk',
+};
+
+export function CountryFlag({ country }: { country: string }) {
+  const countryCode = countryCodeMap[country] || 'un';
+  const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      <img
+        src={flagUrl}
+        alt={country}
+        width="24"
+        height="16"
+        style={{ borderRadius: '2px', border: '1px solid #ccc' }}
+      />
+      <Typography variant="body2">{country}</Typography>
+    </Box>
+  );
+}
diff --git a/src/features/profile/components/PersonalInformation.tsx b/src/features/profile/components/PersonalInformation.tsx
index 9975735..8905e48 100644
--- a/src/features/profile/components/PersonalInformation.tsx
+++ b/src/features/profile/components/PersonalInformation.tsx
@@ -10,21 +10,27 @@ import {
 } from '@mui/material';
 import { useState, type ChangeEvent } from 'react';
 import { CardContainer } from '@/components/CardContainer';
+import { CountryFlag } from '@/components/CountryFlag';
+import { useTranslation } from 'react-i18next';
+import { Profile } from 'iconsax-react';
 
 export function PersonalInformation() {
+  const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
   const [gender, setGender] = useState('');
-  const [data, setData] = useState({
+  const initialData = {
     firstName: 'محمد حسین',
     lastName: 'برزه‌گر',
+    country: 'قطر',
     gender: 'مرد',
     nationalCode: '',
-  });
-
+  };
+  const [data, setData] = useState(initialData);
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
     setData((prev) => ({
       ...prev,
-      [e.target.name]: e.target.value,
+      [name]: value,
     }));
   };
 
@@ -62,8 +68,8 @@ export function PersonalInformation() {
       }}
     >
       <CardContainer
-        title="اطلاعات شخصی من"
-        subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        title={t('settingForm.titlePersonalInfo')}
+        subtitle={t('settingForm.descriptionPersonalInfo')}
         highlighted={isEditing}
         action={
           <Box sx={{ display: 'flex', gap: 1 }}>
@@ -77,7 +83,7 @@ export function PersonalInformation() {
                   width: '43px',
                 }}
               >
-                لغو
+                {t('settingForm.rejectButton')}
               </Button>
             )}
             <Button
@@ -91,11 +97,12 @@ export function PersonalInformation() {
                 color: isEditing ? 'white' : '#2979FF',
                 px: '22px',
                 py: '8px',
-                // minWidth: '93px',
                 width: isEditing ? '85px' : '93px',
               }}
             >
-              {isEditing ? 'ذخیره' : 'ویرایش'}
+              {isEditing
+                ? t('settingForm.saveButton')
+                : t('settingForm.editButton')}
             </Button>
           </Box>
         }
@@ -115,24 +122,30 @@ export function PersonalInformation() {
                 name="firstName"
                 value={data.firstName}
                 onChange={handleChange}
-                label="نام"
+                label={t('settingForm.name')}
               />
             ) : (
               <Box
                 sx={{
-                  height: '48px',
+                  height: 'auto',
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'center',
+                  alignItems: 'flex-start',
+                  gap: 0.5,
                   px: 4,
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  نام
-                </Typography>
-                <Typography variant="body1" color="text.primary">
-                  {displayValue(data.firstName)}
+                  {`${t('settingForm.name')} و ${t('settingForm.familyName')}`}
                 </Typography>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Profile size="20" color="gray" />
+                  <Typography variant="body1" color="text.primary">
+                    {displayValue(data.firstName + ' ' + data.lastName)}
+                  </Typography>
+                </Box>
               </Box>
             )}
           </Box>
@@ -144,7 +157,7 @@ export function PersonalInformation() {
                 name="lastName"
                 value={data.lastName}
                 onChange={handleChange}
-                label="نام خانوادگی"
+                label={t('settingForm.familyName')}
               />
             ) : (
               <Box
@@ -156,11 +169,9 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  نام خانوادگی
-                </Typography>
-                <Typography variant="body1" color="text.primary">
-                  {displayValue(data.lastName)}
+                  {t('settingForm.country')}
                 </Typography>
+                <CountryFlag country={data.country} />
               </Box>
             )}
           </Box>
@@ -172,9 +183,21 @@ export function PersonalInformation() {
                   value={gender}
                   onChange={handleChangeGender}
                   displayEmpty
+                  renderValue={(selected) => {
+                    if (!selected) {
+                      return (
+                        <span style={{ color: '#aaa' }}>
+                          {t('settingForm.genderPlaceholder')}
+                        </span>
+                      );
+                    }
+                    return selected === 'male'
+                      ? t('settingForm.man')
+                      : t('settingForm.woman');
+                  }}
                 >
-                  <MenuItem value="female">زن</MenuItem>
-                  <MenuItem value="male">مرد</MenuItem>
+                  <MenuItem value="male">{t('settingForm.man')}</MenuItem>
+                  <MenuItem value="female">{t('settingForm.woman')}</MenuItem>
                 </Select>
               </FormControl>
             ) : (
@@ -188,7 +211,7 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  جنسیت
+                  {t('settingForm.gender')}
                 </Typography>
                 <Typography variant="body1" color="text.primary">
                   {displayValue(data.gender)}
@@ -204,7 +227,7 @@ export function PersonalInformation() {
                 name="nationalCode"
                 value={data.nationalCode}
                 onChange={handleChange}
-                label="کد ملی"
+                label={t('settingForm.nationalCode')}
               />
             ) : (
               <Box
@@ -216,7 +239,7 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  کد ملی
+                  {t('settingForm.nationalCode')}{' '}
                 </Typography>
                 <Typography variant="body1" color="text.primary">
                   {displayValue(data.nationalCode)}
diff --git a/src/features/profile/components/PhoneNumber.tsx b/src/features/profile/components/PhoneNumber.tsx
index 8e08d09..3e40c18 100644
--- a/src/features/profile/components/PhoneNumber.tsx
+++ b/src/features/profile/components/PhoneNumber.tsx
@@ -7,11 +7,13 @@ import {
   GlobalStyles,
 } from '@mui/material';
 import { Edit, Refresh, TickCircle } from 'iconsax-react';
-import { useState, useEffect, type ChangeEvent } from 'react';
+import { useState, type ChangeEvent } from 'react';
 import { CardContainer } from '@/components/CardContainer';
 import { CountDownTimer } from '@/components/CountDownTimer';
+import { useTranslation } from 'react-i18next';
 
 export function PhoneNumber() {
+  const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
   const [phoneNumber, setPhoneNumber] = useState('');
   const [verificationCode, setVerificationCode] = useState('');
@@ -21,6 +23,8 @@ export function PhoneNumber() {
   const [isVerifying, setIsVerifying] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
 
+  const phones = [{ phone: '09123456789', time: '۱ ماه پیش' }];
+
   const handleSendCode = () => {
     setButtonState('counting');
     setIsVerified(false);
@@ -71,8 +75,8 @@ export function PhoneNumber() {
         }}
       >
         <CardContainer
-          title="شماره تماس من"
-          subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+          title={t('settingForm.titlePhoneNumber')}
+          subtitle={t('settingForm.descriptionPhoneNumber')}
           highlighted={isEditing}
           action={
             <Box sx={{ display: 'flex', gap: 1 }}>
@@ -83,7 +87,7 @@ export function PhoneNumber() {
                   size="large"
                   sx={{ color: '#2979FF', width: '43px' }}
                 >
-                  لغو
+                  {t('settingForm.rejectButton')}
                 </Button>
               )}
               <Button
@@ -99,7 +103,9 @@ export function PhoneNumber() {
                   width: isEditing ? '85px' : '161px',
                 }}
               >
-                {isEditing ? 'ذخیره' : 'تغییر شماره تماس'}
+                {isEditing
+                  ? t('settingForm.saveButton')
+                  : t('settingForm.editPhoneNumber')}
               </Button>
             </Box>
           }
@@ -108,7 +114,7 @@ export function PhoneNumber() {
             <Box sx={{ px: 4 }}>
               <Box sx={{ width: '668px', mb: 2 }}>
                 <Typography variant="h6" color="text.primary">
-                  تغییر شماره تماس
+                  {t('settingForm.editPhoneNumber')}
                 </Typography>
                 <Typography variant="body2" color="text.secondary">
                   شماره تماس جدید شما جایگزین شماره تماس قبلی(+989123456789)
@@ -127,7 +133,7 @@ export function PhoneNumber() {
                 <TextField
                   name="phoneNumber"
                   placeholder="09123456789"
-                  label="شماره تماس جدید"
+                  label={t('settingForm.newPhoneNumber')}
                   type="tel"
                   value={phoneNumber}
                   onChange={handlePhoneNumberChange}
@@ -158,7 +164,7 @@ export function PhoneNumber() {
                     }}
                   >
                     <TickCircle size="20" color="#2e7d32" variant="Bold" />
-                    تایید شد
+                    {t('profileSetting.successButton')}
                   </Box>
                 ) : (
                   <Button
@@ -174,7 +180,7 @@ export function PhoneNumber() {
                         onComplete={() => setButtonState('default')}
                       />
                     ) : (
-                      'ارسال کد تایید'
+                      t('settingForm.verificationCodeButton')
                     )}
                   </Button>
                 )}
@@ -192,8 +198,8 @@ export function PhoneNumber() {
                 >
                   <TextField
                     name="verificationCode"
-                    placeholder="کد تایید"
-                    label="کد تایید"
+                    placeholder={t('settingForm.verificationCode')}
+                    label={t('settingForm.verificationCode')}
                     type="tel"
                     value={verificationCode}
                     onChange={handleVerificationCodeChange}
@@ -223,28 +229,33 @@ export function PhoneNumber() {
                         <Refresh size="20" color="white" />
                       </Box>
                     ) : (
-                      'بررسی کد'
+                      t('settingForm.checkCode')
                     )}
                   </Button>
                 </Box>
               )}
             </Box>
           ) : (
-            <Box
-              sx={{
-                height: '48px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                px: 4,
-              }}
-            >
-              <Typography variant="h6" color="text.primary">
-                09909366045
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                ۱ ماه پیش
-              </Typography>
+            <Box sx={{ px: 4 }}>
+              {phones.map((item, index) => (
+                <Box
+                  key={index}
+                  sx={{
+                    height: '48px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    mb: 1,
+                  }}
+                >
+                  <Typography variant="h6" color="text.primary">
+                    {item.phone}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {item.time}
+                  </Typography>
+                </Box>
+              ))}
             </Box>
           )}
         </CardContainer>
diff --git a/src/features/profile/components/SocialMedia.tsx b/src/features/profile/components/SocialMedia.tsx
index cd543b5..4db2ee7 100644
--- a/src/features/profile/components/SocialMedia.tsx
+++ b/src/features/profile/components/SocialMedia.tsx
@@ -23,8 +23,10 @@ import {
 } from '@mui/material';
 import React, { useState } from 'react';
 import { CardContainer } from '@/components/CardContainer';
+import { useTranslation } from 'react-i18next';
 
 export function SocialMedia() {
+  const { t } = useTranslation('profileSetting');
   const [openDialog, setOpenDialog] = useState(false);
   const [emailInput, setEmailInput] = useState('');
   const [emailError, setEmailError] = useState(false);
@@ -45,8 +47,8 @@ export function SocialMedia() {
   };
 
   const emailList = [
-    { email: 'emailtemp@email.com', provider: 'email' },
-    { email: 'emailtemp@gmail.com', provider: 'google' },
+    { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
+    { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
   ];
 
   return (
@@ -59,8 +61,8 @@ export function SocialMedia() {
       }}
     >
       <CardContainer
-        title="ایمیل و شبکه های اجتماعی من"
-        subtitle="این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        title={t('settingForm.titleSocial')}
+        subtitle={t('settingForm.descriptionSocial')}
         action={
           <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
             <Button
@@ -80,7 +82,7 @@ export function SocialMedia() {
                 px: 2,
               }}
             >
-              افزودن ایمیل / سوشال
+              {t('settingForm.addEmailOrSocialButton')}
               {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
             </Button>
             <Menu
@@ -102,7 +104,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Message size={20} color="black" />
                 </ListItemIcon>
-                <ListItemText>ایمیل</ListItemText>
+                <ListItemText>{t('settingForm.email')}</ListItemText>
               </MenuItem>
               <MenuItem
                 onClick={() => {
@@ -113,7 +115,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Google size={20} color="#4285F4" />
                 </ListItemIcon>
-                <ListItemText>گوگل</ListItemText>
+                <ListItemText>{t('settingForm.google')}</ListItemText>
               </MenuItem>
               <MenuItem
                 onClick={() => {
@@ -124,7 +126,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Apple size={20} color="black" />
                 </ListItemIcon>
-                <ListItemText>اپل</ListItemText>
+                <ListItemText>{t('settingForm.apple')}</ListItemText>
               </MenuItem>
             </Menu>
           </Box>
@@ -180,7 +182,7 @@ export function SocialMedia() {
                     {item.email}
                   </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    ۱ ماه پیش
+                    {item.time}
                   </Typography>
                 </Box>
               </Box>
@@ -211,7 +213,7 @@ export function SocialMedia() {
             <IconButton onClick={handleCloseDialog} size="small">
               <CloseSquare size="24" color="gray" />
             </IconButton>
-            افزودن ایمیل
+            {t('settingForm.addEmailButton')}
           </DialogTitle>
           <DialogContent>
             <Box
@@ -223,10 +225,11 @@ export function SocialMedia() {
               }}
             >
               <Box>
-                <Typography fontWeight="bold">ایمیل جدید</Typography>
+                <Typography fontWeight="bold">
+                  {t('settingForm.newEmail')}
+                </Typography>
                 <Typography variant="body2" color="text.secondary">
-                  با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از
-                  این ایمیل استفاده کنید
+                  {t('settingForm.dialogHeader')}
                 </Typography>
               </Box>
               <TextField
@@ -235,8 +238,8 @@ export function SocialMedia() {
                 value={emailInput}
                 onChange={handleEmailChange}
                 error={emailError}
-                helperText={emailError ? 'لطفا یک ایمیل معتبر وارد کنید' : ''}
-                label="ایمیل"
+                helperText={emailError ? t('settingForm.emailError') : ''}
+                label={t('settingForm.email')}
                 placeholder="abc@email.com"
                 sx={{
                   '& .MuiOutlinedInput-root': {
@@ -253,13 +256,13 @@ export function SocialMedia() {
                 }}
                 disabled={emailError || emailInput === ''}
               >
-                ارسال کد تایید
+                {t('settingForm.verificationCodeButton')}
               </Button>
 
               <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
                 <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
-                  یا
+                  {t('settingForm.or')}
                 </Typography>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
               </Box>
@@ -278,7 +281,7 @@ export function SocialMedia() {
                   }}
                 >
                   <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
-                  گوگل
+                  {t('settingForm.google')}
                 </Button>
                 <Button
                   sx={{
@@ -293,7 +296,7 @@ export function SocialMedia() {
                   }}
                 >
                   <Apple size="20" color="black" style={{ marginLeft: 8 }} />
-                  اپل
+                  {t('settingForm.apple')}
                 </Button>
               </Box>
             </Box>