amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: change the styles and add countries to the user profile

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-10 17:51:46 -07:00
parent 8e6c09225d
commit ed57858c2e
6 changed files with 146 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Typography, Avatar } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CountryFlag } from '@/components/CountryFlag';
import { DisplayField } from './DisplayField';
import { CountryFlag } from '@/components/CountryFlag';
import { Gender } from '@/features/profile/types';
interface InfoRowData {
@@ -26,6 +26,7 @@ export function InfoRowDisplay({
const { t } = useTranslation('profileSetting');
const displayValue = (value: string) =>
value?.trim() || t('settingForm.notDetermined');
const getGenderLabel = (gender: Gender | '') => {
switch (gender) {
case Gender.Male:
@@ -36,6 +37,7 @@ export function InfoRowDisplay({
return t('settingForm.notDetermined');
}
};
return (
<Box sx={{ mb: 2 }}>
<Box sx={{ width: '100%' }}>
@@ -70,7 +72,9 @@ export function InfoRowDisplay({
{initials}
</Avatar>
<Typography variant="body1" color="text.primary">
{`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
{`${displayValue(data.firstName)} ${displayValue(
data.lastName,
)}`}
</Typography>
</Box>
</Box>
@@ -79,7 +83,15 @@ export function InfoRowDisplay({
<Typography variant="caption" color="text.secondary">
{t('settingForm.country')}
</Typography>
<CountryFlag country={data.country} />
<Box sx={{ mt: 0.5 }}>
{data.country ? (
<CountryFlag code={data.country} />
) : (
<Typography variant="body1" color="text.primary">
{t('settingForm.notDetermined')}
</Typography>
)}
</Box>
</Box>
</Box>
</Box>

93
src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
View File

@@ -7,7 +7,8 @@ import {
Autocomplete,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CountryFlag, countryCodeMap } from '@/components/CountryFlag';
import { countries } from '@/features/profile/data/countries';
import { CountryFlag } from '@/components/CountryFlag';
import { Gender } from '@/features/profile/types';
import { type InfoRowData } from '@/features/profile/types';
@@ -24,44 +25,50 @@ export function InfoRowEdit({
gender,
setGender,
}: InfoRowEditProps) {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation(['countries', 'profileSetting']);
const labels = [
{
name: 'firstName' as keyof InfoRowData,
label: t('settingForm.name'),
value: data.firstName,
},
{
name: 'lastName' as keyof InfoRowData,
label: t('settingForm.familyName'),
value: data.lastName,
},
{
name: 'nationalCode' as keyof InfoRowData,
label: t('settingForm.nationalCode'),
value: data.nationalCode,
},
];
const countryOptions = countries.map((c) => ({
code: c.code,
label: t(c.label, { ns: 'countries' }),
}));
const currentCountry =
countryOptions.find((c) => c.code === data.country) || null;
return (
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
{labels.map((field, idx) => (
{[
{
name: 'firstName' as keyof InfoRowData,
label: t('settingForm.name', { ns: 'profileSetting' }),
value: data.firstName,
},
{
name: 'lastName' as keyof InfoRowData,
label: t('settingForm.familyName', { ns: 'profileSetting' }),
value: data.lastName,
},
{
name: 'nationalCode' as keyof InfoRowData,
label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
value: data.nationalCode,
},
].map(({ name, label, value }) => (
<Box
key={idx}
key={name}
sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
>
<TextField
fullWidth
name={field.name}
value={field.value}
name={name}
value={value}
onChange={(e) =>
setData((prev) => ({
...prev,
[field.name]: e.target.value,
[name]: e.target.value,
}))
}
label={field.label}
label={label}
/>
</Box>
))}
@@ -75,36 +82,50 @@ export function InfoRowEdit({
renderValue={(selected) =>
selected ? (
selected === Gender.Male ? (
t('settingForm.man')
t('settingForm.man', { ns: 'profileSetting' })
) : (
t('settingForm.woman')
t('settingForm.woman', { ns: 'profileSetting' })
)
) : (
<span>{t('settingForm.genderPlaceholder')}</span>
<span>
{t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
</span>
)
}
>
<MenuItem value={Gender.Male}>{t('settingForm.man')}</MenuItem>
<MenuItem value={Gender.Female}>{t('settingForm.woman')}</MenuItem>
<MenuItem value={Gender.Male}>
{t('settingForm.man', { ns: 'profileSetting' })}
</MenuItem>
<MenuItem value={Gender.Female}>
{t('settingForm.woman', { ns: 'profileSetting' })}
</MenuItem>
</Select>
</FormControl>
</Box>
<Autocomplete
sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
options={Object.keys(countryCodeMap)}
value={data.country}
options={countryOptions}
getOptionLabel={(option) => option.label}
value={currentCountry}
onChange={(_, newValue) =>
setData((prev) => ({ ...prev, country: newValue || '' }))
setData((prev) => ({
...prev,
country: newValue?.code || '',
}))
}
renderOption={(props, option) => (
<Box component="li" {...props}>
<CountryFlag country={option} />
<Box component="li" {...props} key={option.code}>
<CountryFlag code={option.code} />
</Box>
)}
renderInput={(params) => (
<TextField {...params} label={t('settingForm.country')} />
<TextField
{...params}
label={t('settingForm.country', { ns: 'profileSetting' })}
/>
)}
clearOnEscape
/>
</Box>
);