fix: translation and styles

2025-07-20 17:19:22 +03:30
parent ff7b5ce4ac
commit 8bef6bb9ee
6 changed files with 193 additions and 72 deletions
--- a/public/locales/fa/profileSetting.json
+++ 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": "لطفا یک ایمیل معتبر وارد کنید"
+  }
+}
--- 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
--- a/src/components/CountryFlag.tsx
+++ 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>
+  );
+}
--- 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)}
--- 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>
--- 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>