fix: issue in user profile

package-lock.json

@@ -15,6 +15,7 @@
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
+        "iconsax-react": "^0.0.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-i18next": "^15.6.0",
@@ -3102,6 +3103,18 @@
         "cross-fetch": "4.0.0"
       }
     },
+    "node_modules/iconsax-react": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz",
+      "integrity": "sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
+    "iconsax-react": "^0.0.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",

src/App.tsx

@@ -7,9 +7,12 @@ import {
   useColorScheme,
 } from '@mui/material';
 import './App.css';
+<<<<<<< HEAD
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
 
+=======
+>>>>>>> 58445fe (feat: add user profile which includes three sections: Personal Information, Phone Number and Email and Social media)
 function App() {
   const { t } = useTranslation();
 

src/features/profile/components/PersonalInformation.tsx

@@ -0,0 +1,229 @@
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  Grid,
+  FormControl,
+  Select,
+  MenuItem,
+  type SelectChangeEvent,
+} from '@mui/material';
+import { useState, type ChangeEvent } from 'react';
+
+export function PersonalInformation() {
+  const [isEditing, setIsEditing] = useState(false);
+  const [gender, setGender] = useState('');
+  const [data, setData] = useState({
+    firstName: 'محمد حسین',
+    lastName: 'برزه‌گر',
+    gender: 'مرد',
+    nationalCode: '',
+  });
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const toggleEdit = () => {
+    setIsEditing((prev) => !prev);
+    if (isEditing) {
+      setData((prev) => ({
+        ...prev,
+        gender: gender === 'male' ? 'مرد' : gender === 'female' ? 'زن' : '',
+      }));
+    } else {
+      setGender(
+        data.gender === 'مرد' ? 'male' : data.gender === 'زن' ? 'female' : '',
+      );
+    }
+  };
+
+  const handleChangeGender = (e: SelectChangeEvent) => {
+    setGender(e.target.value);
+  };
+
+  const displayValue = (value: string | null | undefined) => {
+    return value && value.trim() !== '' ? value : 'تعیین نشده';
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        backgroundColor: '#F5F5F5',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: '600px',
+          backgroundColor: 'white',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
+            p: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography
+              variant="h6"
+              sx={{ color: isEditing ? '#1976d2' : 'black' }}
+            >
+              اطلاعات شخصی من
+            </Typography>
+            <Typography
+              variant="subtitle2"
+              sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
+            >
+              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
+              می‌ماند
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            {isEditing && (
+              <Button
+                onClick={() => setIsEditing(false)}
+                sx={{
+                  backgroundColor: '#ADD8E6',
+                  color: '#1976d2',
+                  width: '80px',
+                  height: '30px',
+                }}
+              >
+                لغو
+              </Button>
+            )}
+            <Button
+              onClick={toggleEdit}
+              sx={{
+                border: 0.5,
+                borderColor: '#1976d2',
+                borderRadius: '5px',
+                backgroundColor: isEditing ? '#1976d2' : 'white',
+                color: isEditing ? 'white' : '#1976d2',
+                width: '80px',
+                height: '30px',
+              }}
+            >
+              {isEditing ? 'ذخیره' : 'ویرایش'}
+            </Button>
+          </Box>
+        </Box>
+
+        <Grid container spacing={4}>
+          <Grid item xs={6}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="firstName"
+                value={data.firstName}
+                onChange={handleChange}
+                inputProps={{ sx: { height: '12px' } }}
+                label="نام"
+              />
+            ) : (
+              <Box sx={{ width: '250px' }}>
+                <Typography variant="caption" sx={{ color: 'gray' }}>
+                  نام
+                </Typography>
+                <Typography variant="subtitle2">
+                  {displayValue(data.firstName)}
+                </Typography>
+              </Box>
+            )}
+          </Grid>
+
+          <Grid item xs={6}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="lastName"
+                value={data.lastName}
+                onChange={handleChange}
+                inputProps={{ sx: { height: '12px' } }}
+                label="نام خانوادگی"
+              />
+            ) : (
+              <Box sx={{ width: '200px' }}>
+                <Typography variant="caption" sx={{ color: 'gray' }}>
+                  نام خانوادگی
+                </Typography>
+                <Typography variant="subtitle2">
+                  {displayValue(data.lastName)}
+                </Typography>
+              </Box>
+            )}
+          </Grid>
+
+          <Grid item xs={6}>
+            {isEditing ? (
+              <FormControl fullWidth>
+                <Select
+                  value={gender}
+                  onChange={handleChangeGender}
+                  sx={{
+                    height: '45px',
+                    width: '210px',
+                    '& .MuiSelect-select': {
+                      paddingY: '10px',
+                    },
+                  }}
+                  label="جنسیت"
+                >
+                  <MenuItem value="female">زن</MenuItem>
+                  <MenuItem value="male">مرد</MenuItem>
+                </Select>
+              </FormControl>
+            ) : (
+              <Box sx={{ width: '250px' }}>
+                <Typography variant="caption" sx={{ color: 'gray' }}>
+                  جنسیت
+                </Typography>
+                <Typography variant="subtitle1">
+                  {displayValue(data.gender)}
+                </Typography>
+              </Box>
+            )}
+          </Grid>
+
+          <Grid item xs={6}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="nationalCode"
+                value={data.nationalCode}
+                onChange={handleChange}
+                inputProps={{ sx: { height: '12px' } }}
+                label="کدملی"
+              />
+            ) : (
+              <Box>
+                <Typography variant="caption" sx={{ color: 'gray' }}>
+                  کد ملی
+                </Typography>
+                <Typography variant="subtitle2">
+                  {displayValue(data.nationalCode)}
+                </Typography>
+              </Box>
+            )}
+          </Grid>
+        </Grid>
+      </Box>
+    </div>
+  );
+}

src/features/profile/components/PhoneNumber.tsx

@@ -0,0 +1,306 @@
+import {
+  Box,
+  Typography,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  TextField,
+} from '@mui/material';
+import { Edit, CloseSquare } from 'iconsax-react';
+import { useState, useEffect } from 'react';
+
+export function PhoneNumber() {
+  const [open, setOpen] = useState(false);
+  const [dialogStep, setDialogStep] = useState<'enterPhone' | 'verifyCode'>(
+    'enterPhone',
+  );
+  const [buttonState, setButtonState] = useState('default'); // default | counting | sent
+  const [countdown, setCountdown] = useState(120);
+
+  const handleChangePhoneNumber = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setDialogStep('enterPhone');
+  };
+  const handleSendCode = () => {
+    setDialogStep('verifyCode');
+    setButtonState('sent');
+    setTimeout(() => {
+      setButtonState('counting');
+      setCountdown(120);
+    }, 1000);
+  };
+  const handleResendCode = () => {
+    setButtonState('sent');
+    setTimeout(() => {
+      setButtonState('counting');
+      setCountdown(120);
+    }, 1000);
+  };
+
+  useEffect(() => {
+    if (buttonState === 'counting' && countdown > 0) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1000);
+      return () => clearInterval(timer);
+    }
+    if (countdown === 0 && buttonState === 'counting') {
+      setButtonState('default');
+    }
+  }, [buttonState, countdown]);
+
+  const toPersianDigits = (str: string) =>
+    str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
+
+  const getButtonLabel = () => {
+    if (buttonState === 'sent') return 'ارسال شد!';
+    if (buttonState === 'counting') {
+      const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
+      const seconds = String(countdown % 60).padStart(2, '0');
+      const time = `${minutes}:${seconds}`;
+      return toPersianDigits(time);
+    }
+    return 'ارسال دوباره کد';
+  };
+
+  const handleEdit = () => {
+    setDialogStep('enterPhone');
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#F5F5F5',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: '600px',
+          backgroundColor: 'white',
+          boxShadow: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            p: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6">شماره تماس من</Typography>
+            <Typography sx={{ color: 'gray' }} variant="subtitle2">
+              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
+              می‌ماند
+            </Typography>
+          </Box>
+          <Button
+            onClick={handleChangePhoneNumber}
+            sx={{
+              border: 0.5,
+              borderColor: '#1976d2',
+              borderRadius: '5px',
+              backgroundColor: 'white',
+              color: '#1976d2',
+              width: '150px',
+              height: '30px',
+            }}
+          >
+            تغییر شماره تماس
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            p: 2,
+            borderRadius: 1,
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-end',
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+              09909366045
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'gray' }}>
+              ۱ ماه پیش
+            </Typography>
+          </Box>
+
+          {/* <IconButton
+            sx={{
+              border: '1px solid #1976d2',
+              color: '#1976d2',
+              borderRadius: '12px',
+              width: '40px',
+              height: '40px',
+            }}
+            onClick={handleChangePhoneNumber}
+          ></IconButton> */}
+        </Box>
+      </Box>
+
+      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+          }}
+        >
+          ویرایش شماره تماس
+          <IconButton onClick={handleClose}>
+            <CloseSquare size="24" color="gray" variant="Outline" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+            {dialogStep === 'enterPhone' ? (
+              <>
+                <Typography variant="subtitle1" sx={{ mb: 1 }}>
+                  شماره تماس جدید
+                </Typography>
+                <Typography variant="subtitle2" sx={{ color: 'gray', mb: 2 }}>
+                  شماره تماس جدید جایگزین شماره تماس قبلی شما خواهد شد
+                </Typography>
+                <TextField
+                  fullWidth
+                  label="شماره تماس"
+                  placeholder="09123456789"
+                  sx={{
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                      '&:hover fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                      '&.Mui-focused fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                    },
+                    '& label.Mui-focused': {
+                      color: '#1976d2',
+                    },
+                  }}
+                />
+                <Button
+                  onClick={handleSendCode}
+                  variant="contained"
+                  fullWidth
+                  sx={{
+                    borderRadius: '10px',
+                    backgroundColor: '#1976d2',
+                    '&:hover': { backgroundColor: '#115293' },
+                  }}
+                >
+                  ارسال کد تایید
+                </Button>
+              </>
+            ) : (
+              <>
+                <Box sx={{ display: 'flex', gap: 1 }}>
+                  <Box>
+                    <Typography variant="subtitle1" sx={{ mb: 1 }}>
+                      اعتبار سنجی
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      sx={{ color: 'gray', mb: 2 }}
+                    >
+                      کد تایید 4 رقمی به شماره موبایل شما ارسال شد. لطفا آن را
+                      وارد کنید
+                    </Typography>
+                  </Box>
+                  <Button
+                    sx={{
+                      border: 0.5,
+                      borderColor: '#1976d2',
+                      height: '35px',
+                      color: '#1976d2',
+                      width: '150px',
+                    }}
+                    onClick={handleEdit}
+                  >
+                    <Edit />
+                    09123456789
+                  </Button>
+                </Box>
+                <TextField
+                  fullWidth
+                  label="کد تایید"
+                  placeholder="کد تایید را وارد کنید"
+                  sx={{
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                      '&:hover fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                      '&.Mui-focused fieldset': {
+                        borderColor: '#1976d2',
+                      },
+                    },
+                    '& label.Mui-focused': {
+                      color: '#1976d2',
+                    },
+                  }}
+                />
+                <Box sx={{ display: 'flex' }}>
+                  <Button
+                    variant="text"
+                    onClick={handleResendCode}
+                    sx={{ width: '200px' }}
+                    disabled={
+                      buttonState === 'sent' || buttonState === 'counting'
+                    }
+                  >
+                    {getButtonLabel()}
+                  </Button>
+
+                  <Button
+                    onClick={handleClose}
+                    variant="contained"
+                    fullWidth
+                    sx={{
+                      borderRadius: '10px',
+                      backgroundColor: '#1976d2',
+                      '&:hover': { backgroundColor: '#115293' },
+                    }}
+                  >
+                    بررسی کد
+                  </Button>
+                </Box>
+              </>
+            )}
+          </Box>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/features/profile/components/SocialMedia.tsx

@@ -0,0 +1,210 @@
+import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
+import {
+  Box,
+  Button,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  TextField,
+} from '@mui/material';
+import { useState } from 'react';
+
+export function SocialMedia() {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const emailList = [
+    { email: 'emailtemp@email.com', provider: 'email' },
+    { email: 'emailtemp@gmail.com', provider: 'google' },
+  ];
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#F5F5F5',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: '600px',
+          backgroundColor: 'white',
+          boxShadow: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            p: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6">ایمیل و شبکه‌های اجتماعی من</Typography>
+            <Typography sx={{ color: 'gray' }} variant="subtitle2">
+              این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی
+              می‌ماند
+            </Typography>
+          </Box>
+          <Button
+            onClick={handleOpen}
+            sx={{
+              border: 0.5,
+              borderColor: '#1976d2',
+              borderRadius: '5px',
+              backgroundColor: 'white',
+              color: '#1976d2',
+              width: '150px',
+              height: '30px',
+            }}
+          >
+            افزودن ایمیل / سوشال
+          </Button>
+        </Box>
+
+        {emailList.map((item, index) => (
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              p: 2,
+              borderRadius: 1,
+              mt: 1,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              {item.provider === 'google' && (
+                <Google
+                  size="20"
+                  variant="Bold"
+                  color="#4285F4"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+              {item.provider === 'apple' && (
+                <Apple
+                  size="20"
+                  variant="Bold"
+                  color="black"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+              {item.provider === 'email' && (
+                <Sms
+                  size="20"
+                  variant="Bold"
+                  color="#1976d2"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+
+              <Box>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                  {item.email}
+                </Typography>
+                <Typography variant="body2">۱ ماه پیش</Typography>
+              </Box>
+            </Box>
+
+            <IconButton>
+              <Trash size="20" color="gray" variant="Outline" />
+            </IconButton>
+          </Box>
+        ))}
+      </Box>
+
+      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+          }}
+        >
+          افزودن ایمیل / سوشال
+          <IconButton onClick={handleClose}>
+            <CloseSquare size="24" color="gray" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+            <TextField
+              fullWidth
+              label="ایمیل"
+              placeholder="abc@email.com"
+              sx={{
+                mb: 2,
+                '& .MuiOutlinedInput-root': {
+                  '& fieldset': { borderColor: '#1976d2' },
+                  '&:hover fieldset': { borderColor: '#1976d2' },
+                  '&.Mui-focused fieldset': { borderColor: '#1976d2' },
+                },
+                '& label.Mui-focused': { color: '#1976d2' },
+              }}
+            />
+            <Button
+              variant="contained"
+              fullWidth
+              sx={{
+                borderRadius: '10px',
+                backgroundColor: '#1976d2',
+                '&:hover': { backgroundColor: '#115293' },
+              }}
+            >
+              ارسال کد تایید
+            </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' }}>
+                یا
+              </Typography>
+              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+            </Box>
+
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <Button
+                sx={{
+                  width: '50%',
+                  border: 2,
+                  borderColor: '#1976d2',
+                  color: '#1976d2',
+                  borderRadius: '8px',
+                }}
+              >
+                <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
+                گوگل
+              </Button>
+              <Button
+                sx={{
+                  width: '50%',
+                  border: 2,
+                  borderColor: '#1976d2',
+                  color: '#1976d2',
+                  borderRadius: '8px',
+                }}
+              >
+                <Apple size="20" color="black" style={{ marginLeft: 8 }} />
+                اپل
+              </Button>
+            </Box>
+          </Box>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/features/profile/components/UserForm.tsx

@@ -0,0 +1,13 @@
+import { PersonalInformation } from './PersonalInformation';
+import { PhoneNumber } from './PhoneNumber';
+import { SocialMedia } from './SocialMedia';
+
+export function UserForm() {
+  return (
+    <>
+      <PersonalInformation />
+      <PhoneNumber />
+      <SocialMedia />
+    </>
+  );
+}