diff --git a/public/locales/en/profileSetting.json b/public/locales/en/profileSetting.json index 3cd0346..cbc6846 100644 --- a/public/locales/en/profileSetting.json +++ b/public/locales/en/profileSetting.json @@ -36,6 +36,7 @@ "allowedFormat": "Allowed formats: PNG, JPEG, GIF (maximum 10 MB)", "uploadPicture": "Upload image", "phoneNumberText": "Your new contact number will replace your previous contact number.", - "verb": "." + "verb": ".", + "notDetermined": "Not determined" } } diff --git a/public/locales/fa/profileSetting.json b/public/locales/fa/profileSetting.json index b97e10f..44d2a5e 100644 --- a/public/locales/fa/profileSetting.json +++ b/public/locales/fa/profileSetting.json @@ -36,6 +36,7 @@ "allowedFormat": "فرمت‌های مجاز: PNG، JPEG، GIF (حداکثر ۱۰ مگابایت)", "uploadPicture": "بارگذاری تصویر", "phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی", - "verb": "خواهد شد" + "verb": "خواهد شد", + "notDetermined": "تعیین نشده" } } diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx index 80250f0..0bdb5d3 100644 --- a/src/components/CardContainer.tsx +++ b/src/components/CardContainer.tsx @@ -19,14 +19,14 @@ export function CardContainer({ width: '100%', maxWidth: { xs: '100%', - sm: '500pxpx', - md: '786px', + sm: '500px', + md: '818px', }, display: 'flex', flexDirection: 'column', gap: 2, px: { xs: 2, sm: 3, md: 4 }, - py: 2, + // py: 2, }} > (null); const initialData = { firstName: 'محمد حسین', @@ -29,15 +20,8 @@ export function PersonalInformation() { nationalCode: '', }; const [data, setData] = useState(initialData); - const [uploadedImageUrl, setUploadedImageUrl] = useState(null); - const handleChange = (e: ChangeEvent) => { - const { name, value } = e.target; - setData((prev) => ({ - ...prev, - [name]: value, - })); - }; + const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`; const toggleEdit = () => { setIsEditing((prev) => !prev); @@ -53,30 +37,13 @@ export function PersonalInformation() { } }; - const handleChangeGender = (e: SelectChangeEvent) => { - setGender(e.target.value); - }; - - const displayValue = (value: string | null | undefined) => { - return value && value.trim() !== '' ? value : 'تعیین نشده'; - }; - - const handleImageChange = (e: React.ChangeEvent) => { - const file = e.target.files?.[0]; - if (file) { - const reader = new FileReader(); - reader.onload = () => { - setUploadedImageUrl(reader.result as string); - }; - reader.readAsDataURL(file); - } - }; - - const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`; - return ( {isEditing && ( - - - {initials} - - - - {t('settingForm.profilePicture')} - - - {t('settingForm.allowedFormat')} - - - - - - - )} - - - {[ - { - name: 'firstName', - label: t('settingForm.name'), - value: data.firstName, - }, - { - name: 'lastName', - label: t('settingForm.familyName'), - value: data.lastName, - }, - { - name: 'nationalCode', - label: t('settingForm.nationalCode'), - value: data.nationalCode, - }, - ].map((field, index) => ( - - {isEditing ? ( - - ) : ( - - - {field.label} - - - {displayValue(field.value)} - - - )} - - ))} - - - {isEditing ? ( - - - - ) : ( - - - {t('settingForm.gender')} - - - {displayValue(data.gender)} - - - )} - - - {isEditing && ( - - setData((prev) => ({ - ...prev, - country: newValue || '', - })) + { + const file = e.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => + setUploadedImageUrl(reader.result as string); + reader.readAsDataURL(file); } - renderOption={(props, option) => ( - - - - )} - renderInput={(params) => ( - - )} - /> - )} - - {!isEditing && ( - - - {t('settingForm.country')} - - - - )} - + }} + /> + )} + {isEditing ? ( + + ) : ( + + )} diff --git a/src/features/profile/components/PhoneNumber.tsx b/src/features/profile/components/PhoneNumber.tsx index e3bce9e..4a620fc 100644 --- a/src/features/profile/components/PhoneNumber.tsx +++ b/src/features/profile/components/PhoneNumber.tsx @@ -57,6 +57,7 @@ export function PhoneNumber() { justifyContent: 'center', alignItems: 'center', px: 2, + backgroundColor: 'background.paper', }} > {isEditing ? ( - + {t('settingForm.editPhoneNumber')} @@ -120,6 +123,7 @@ export function PhoneNumber() { display: 'flex', flexWrap: 'wrap', gap: 2, + height: '88px', }} > ) : ( - + + + )} @@ -198,6 +205,7 @@ export function PhoneNumber() { flexWrap: 'wrap', gap: 2, mt: 2, + height: '88px', }} > {isVerifying ? ( @@ -229,6 +238,10 @@ export function PhoneNumber() { sx={{ display: 'flex', animation: 'spin 1s linear infinite', + '@keyframes spin': { + '0%': { transform: 'rotate(0deg)' }, + '100%': { transform: 'rotate(360deg)' }, + }, }} > @@ -249,7 +262,7 @@ export function PhoneNumber() { display: 'flex', flexDirection: 'column', justifyContent: 'center', - py: 1, + height: '148px', width: '100%', }} > diff --git a/src/features/profile/components/SocialMedia.tsx b/src/features/profile/components/SocialMedia.tsx index 51f6a82..3a90bed 100644 --- a/src/features/profile/components/SocialMedia.tsx +++ b/src/features/profile/components/SocialMedia.tsx @@ -58,6 +58,7 @@ export function SocialMedia() { justifyContent: 'center', alignItems: 'center', px: 2, + backgroundColor: 'background.paper', }} > @@ -209,7 +207,6 @@ export function SocialMedia() { display: 'flex', flexDirection: 'row', alignItems: 'center', - // backgroundColor: 'background.paper', fontWeight: 'bold', fontSize: '16px', gap: 1, @@ -258,7 +255,7 @@ export function SocialMedia() { sx={{ textTransform: 'none', borderRadius: '8px', - backgroundColor: '#1976d2', + // backgroundColor: '#1976d2', }} disabled={emailError || emailInput === ''} > diff --git a/src/features/profile/components/personlInformation/DisplayField.tsx b/src/features/profile/components/personlInformation/DisplayField.tsx new file mode 100644 index 0000000..f6690fd --- /dev/null +++ b/src/features/profile/components/personlInformation/DisplayField.tsx @@ -0,0 +1,24 @@ +import { Box, Typography } from '@mui/material'; +import { useTranslation } from 'react-i18next'; + +export function DisplayField({ + label, + value, +}: { + label: string; + value: string; +}) { + const { t } = useTranslation('profileSetting'); + const displayValue = value?.trim() || t('settingForm.notDetermined'); + + return ( + + + {label} + + + {displayValue} + + + ); +} diff --git a/src/features/profile/components/personlInformation/InfoRowDisplay.tsx b/src/features/profile/components/personlInformation/InfoRowDisplay.tsx new file mode 100644 index 0000000..7ab268b --- /dev/null +++ b/src/features/profile/components/personlInformation/InfoRowDisplay.tsx @@ -0,0 +1,92 @@ +import { Box, Typography, Avatar } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { CountryFlag } from '@/components/CountryFlag'; +import { DisplayField } from './DisplayField'; + +export function InfoRowDisplay({ + data, + uploadedImageUrl, + initials, +}: { + data: any; + uploadedImageUrl: string | null; + initials: string; +}) { + const { t } = useTranslation('profileSetting'); + + const displayValue = (value: string) => + value?.trim() || t('settingForm.notDetermined'); + + return ( + <> + + + + {initials} + + + + {t('settingForm.name')} و {t('settingForm.familyName')} + + + {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`} + + + + + + + {t('settingForm.country')} + + + + + + + + + + + ); +} diff --git a/src/features/profile/components/personlInformation/InfoRowEdit.tsx b/src/features/profile/components/personlInformation/InfoRowEdit.tsx new file mode 100644 index 0000000..5969583 --- /dev/null +++ b/src/features/profile/components/personlInformation/InfoRowEdit.tsx @@ -0,0 +1,97 @@ +import { + Box, + TextField, + FormControl, + MenuItem, + Select, + Autocomplete, +} from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { CountryFlag, countryCodeMap } from '@/components/CountryFlag'; + +export function InfoRowEdit({ data, setData, gender, setGender }: any) { + const { t } = useTranslation('profileSetting'); + + return ( + + {[ + { + name: 'firstName', + label: t('settingForm.name'), + value: data.firstName, + }, + { + name: 'lastName', + label: t('settingForm.familyName'), + value: data.lastName, + }, + { + name: 'nationalCode', + label: t('settingForm.nationalCode'), + value: data.nationalCode, + }, + ].map((field, idx) => ( + + + setData((prev: any) => ({ + ...prev, + [field.name]: e.target.value, + })) + } + label={field.label} + /> + + ))} + + + + + + + + + setData((prev: any) => ({ ...prev, country: newValue || '' })) + } + renderOption={(props, option) => ( + + + + )} + renderInput={(params) => ( + + )} + /> + + ); +} diff --git a/src/features/profile/components/personlInformation/ProfileImage.tsx b/src/features/profile/components/personlInformation/ProfileImage.tsx new file mode 100644 index 0000000..3d848c8 --- /dev/null +++ b/src/features/profile/components/personlInformation/ProfileImage.tsx @@ -0,0 +1,62 @@ +import { Box, Avatar, Typography, Button } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { Camera } from 'iconsax-react'; + +export function ProfileImage({ + initials, + uploadedImageUrl, + onImageChange, +}: { + initials: string; + uploadedImageUrl: string | null; + onImageChange: (e: React.ChangeEvent) => void; +}) { + const { t } = useTranslation('profileSetting'); + + return ( + + + {initials} + + + + {t('settingForm.profilePicture')} + + + {t('settingForm.allowedFormat')} + + + + + + + ); +}