fix: accounts review

src/features/authentication/components/UserCompletionForm/DateOfBirth.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   DatePicker,
   PickersDay,
@@ -13,7 +13,6 @@ import { getDay } from 'date-fns-jalali';
 import { format as formatJalali } from 'date-fns-jalali';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
-import { toLocaleDigits } from '@/utils/persianDigit';
 import { type DateOfBirthProps } from '../../types/settingForm';
 import { Icon } from '@rkheftan/harmony-ui';
 import { Calendar } from 'iconsax-react';
@@ -21,6 +20,7 @@ import { Calendar } from 'iconsax-react';
 export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
   const { t, i18n } = useTranslation('completionForm');
   const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
+  const [openView, setOpenView] = useState<'year' | 'month' | 'day'>('year');
 
   const { Adapter, locale, formatString, dayOfWeekFormatter } = useMemo(() => {
     if (isFarsi) {
@@ -44,11 +44,7 @@ export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
     const dayNumber = isFarsi
       ? formatJalali(props.day, 'dd')
       : format(props.day, 'dd');
-    return (
-      <PickersDay {...props}>
-        {toLocaleDigits(dayNumber, i18n.language)}
-      </PickersDay>
-    );
+    return <PickersDay {...props}>{dayNumber}</PickersDay>;
   };
 
   const CustomCalendarIcon = () => (
@@ -58,23 +54,23 @@ export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
   return (
     <LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
       <DatePicker
-        label={toLocaleDigits(t('completion.dateOfBirth'), i18n.language)}
+        label={t('completion.dateOfBirth')}
         value={value}
         onChange={onChange}
         format={formatString}
         dayOfWeekFormatter={dayOfWeekFormatter}
         slots={{ day: CustomDay, openPickerIcon: CustomCalendarIcon }}
         disableFuture
+        openTo="year"
+        views={['year', 'month', 'day']}
+        view={openView}
+        onViewChange={(newView) => setOpenView(newView)}
+        onYearChange={() => setOpenView('month')}
         slotProps={{
-          textField: {
-            fullWidth: true,
-          },
+          textField: { fullWidth: true },
           popper: {
             sx: {
-              '& .MuiDateCalendar-root': {
-                // TODO: fix this to use textfield width instead of defining hardcode
-                width: '309px',
-              },
+              '& .MuiDateCalendar-root': { width: '309px' },
             },
           },
         }}