Merge branch 'develop' into fix/completion-page

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

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+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';
+import { toLocaleDigits } from '@/utils/persianDigit';
+import { type DateOfBirthProps } from '../../types/settingForm';
+import { Icon } from '@rkheftan/harmony-ui';
+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 { Adapter, locale, formatString, dayOfWeekFormatter } = useMemo(() => {
+    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}>
+        {toLocaleDigits(dayNumber, i18n.language)}
+      </PickersDay>
+    );
+  };
+
+  const CustomCalendarIcon = () => (
+    <Icon Component={Calendar} color="primary.main" variant="Bold" />
+  );
+
+  return (
+    <LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
+      <DatePicker
+        label={toLocaleDigits(t('completion.dateOfBirth'), i18n.language)}
+        value={value}
+        onChange={onChange}
+        format={formatString}
+        dayOfWeekFormatter={dayOfWeekFormatter}
+        slots={{ day: CustomDay, openPickerIcon: CustomCalendarIcon }}
+        disableFuture
+        slotProps={{
+          textField: {
+            fullWidth: true,
+          },
+          popper: {
+            sx: {
+              '& .MuiDateCalendar-root': {
+                // TODO: fix this to use textfield width instead of defining hardcode
+                width: '309px',
+              },
+            },
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}