fix: code styles

src/features/authentication/components/DateOfBirth.tsx

@@ -1,28 +1,74 @@
 import { useMemo } from 'react';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import {
+  DatePicker,
+  PickersDay,
+  type PickersDayProps,
+} from '@mui/x-date-pickers';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+import { enUS } from 'date-fns/locale';
+import { faIR as faIRJalali } from 'date-fns-jalali/locale';
+import { getDay } from 'date-fns-jalali';
+import { format as formatJalali } from 'date-fns-jalali';
+import { format } from 'date-fns';
+
 import { useTranslation } from 'react-i18next';
 
 interface DateOfBirthProps {
   value: Date | null;
   onChange: (date: Date | null) => void;
 }
-export function DateOfBirth({ value, onChange }: DateOfBirthProps) {
+
+const toPersianDigits = (str: string) =>
+  str.replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d]);
+
+export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
   const { t, i18n } = useTranslation('completionForm');
   const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
 
-  const Adapter = useMemo(() => {
+  const { Adapter, locale, formatString, dayOfWeekFormatter } = useMemo(() => {
-    return isFarsi ? AdapterDateFnsJalali : AdapterDateFns;
+    if (isFarsi) {
+      const persianDays = ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'];
+      return {
+        Adapter: AdapterDateFnsJalali,
+        locale: faIRJalali,
+        formatString: 'yyyy/MM/dd',
+        dayOfWeekFormatter: (date: Date) => persianDays[getDay(date)],
+      };
+    }
+    return {
+      Adapter: AdapterDateFns,
+      locale: enUS,
+      formatString: 'MM/dd/yyyy',
+      dayOfWeekFormatter: undefined,
+    };
   }, [isFarsi]);
 
+  const CustomDay = (props: PickersDayProps) => {
+    const dayNumber = isFarsi
+      ? formatJalali(props.day, 'dd')
+      : format(props.day, 'dd');
+    return (
+      <PickersDay {...props}>
+        {isFarsi ? toPersianDigits(dayNumber) : dayNumber}
+      </PickersDay>
+    );
+  };
+
   return (
-    <LocalizationProvider dateAdapter={Adapter}>
+    <LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
       <DatePicker
-        label={t('completion.dateOfBirth')}
+        label={
+          isFarsi
+            ? toPersianDigits(t('completion.dateOfBirth'))
+            : t('completion.dateOfBirth')
+        }
         value={value}
         onChange={onChange}
+        format={formatString}
+        dayOfWeekFormatter={dayOfWeekFormatter}
+        slots={{ day: CustomDay }}
         slotProps={{
           textField: {
             fullWidth: true,

src/features/authentication/components/EmailSection.tsx

@@ -8,6 +8,7 @@ import {
   Typography,
   InputAdornment,
   IconButton,
+  CircularProgress,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { TickCircle, Edit, Refresh } from 'iconsax-react';
@@ -73,8 +74,8 @@ export function EmailSection({
 
   const fieldSx = {
     flex: '1 1 260px',
-    maxWidth: emailVerified ? '634px' : '462px',
+    // maxWidth: emailVerified ? '634px' : '462px',
-    width: '100%',
+    // width: '100%',
   };
 
   return (
@@ -216,19 +217,7 @@ export function EmailSection({
                 }}
               >
                 {isVerifyingCode ? (
-                  <Box
+                  <CircularProgress />
-                    component="span"
-                    sx={{
-                      display: 'flex',
-                      animation: 'spin 1s linear infinite',
-                      '@keyframes spin': {
-                        '0%': { transform: 'rotate(0deg)' },
-                        '100%': { transform: 'rotate(360deg)' },
-                      },
-                    }}
-                  >
-                    <Refresh size="24" color="text.secondary" />
-                  </Box>
                 ) : (
                   t('completion.checkCodeButton')
                 )}

src/features/authentication/components/PersonalInfoFields.tsx

@@ -6,12 +6,19 @@ import {
   Select,
   Box,
   Autocomplete,
+  type SelectChangeEvent,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Woman, Man } from 'iconsax-react';
 import { useState, type Dispatch, type SetStateAction } from 'react';
-import { DateOfBirth } from './DateOfBirth';
 import { countries } from '../data/Countries';
+import DateOfBirth from './DateOfBirth';
+
+interface CountryType {
+  name: string;
+  fa: string;
+  flag: string;
+}
 
 interface PersonalInfoFieldsProps {
   firstName: string;
@@ -45,22 +52,37 @@ export function PersonalInfoFields({
   const { t } = useTranslation('completionForm');
   const [countryError, setCountryError] = useState(false);
 
-  const handleChangeSex = (e: any) => {
+  // Language check to pass down for date picker
+  // const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
+
+  const handleChangeSex = (e: SelectChangeEvent<'male' | 'female'>) => {
     setSex(e.target.value as 'female' | 'male');
   };
 
-  const handleChangeCountry = (_: any, newValue: any) => {
+  const handleChangeCountry = (
-    setCountry(newValue ? newValue.name : '');
+    _: React.SyntheticEvent,
-    setCountryError(false);
+    newValue: string | CountryType | null,
+  ) => {
+    if (typeof newValue === 'string') {
+      setCountry(newValue);
+      setCountryError(false);
+    } else if (newValue === null) {
+      setCountry('');
+      setCountryError(false);
+    } else {
+      setCountry(newValue.name);
+      setCountryError(false);
+    }
   };
 
   const handleCountryBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const inputValue = e.target.value.trim();
+    // Check if input matches any country's fa name
     const exists = countries.some((c) => c.fa === inputValue);
     setCountryError(Boolean(inputValue && !exists));
   };
 
-  const handleInputChange = (_: any, value: string) => {
+  const handleInputChange = (_: React.SyntheticEvent, value: string) => {
     const exists = countries.some((c) => c.fa === value.trim());
     setCountryError(Boolean(value.trim() && !exists));
   };