create datepicker - set farsi digit font - create my account page - fix bugs

src/components/common/combo-box.tsx

@@ -16,7 +16,6 @@ type Props = {
 
 export const ComboBox: FC<Props> = ({ field }) => {
     const [query, setQuery] = useState('')
-    // const [selected, setSelected] = useState(value[1])
 
     const filteredValue =
         query === ''

src/components/common/datepicker.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { Calendar2 } from 'iconsax-react';
+import DatePicker from 'react-multi-date-picker';
+import persian from "react-date-object/calendars/persian"
+import persian_fa from "react-date-object/locales/persian_fa"
+import { getJalaaliDate } from '../../utility/getDate';
+
+type Props = {
+    field: any
+}
+
+export const DatepickerComponent: FC<Props> = ({ field }) => {
+    return (
+        <div className='relative w-full min-w-max cursor-pointer mb-10 xl:mb-0'>
+            <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center !z-50">
+                <Calendar2 color='#777577' />
+            </div>
+            <DatePicker
+                {...field}
+                value={field.value}
+                onChange={field.onChange}
+                showOtherDays
+                placeholder={getJalaaliDate()}
+                calendar={persian}
+                locale={persian_fa}
+                calendarPosition="bottom-right"
+                inputClass='w-full !min-w-full absolute input-style top-0 z-10 cursor-pointer'
+            />
+        </div>
+    )
+}

src/components/common/input.tsx

@@ -7,9 +7,10 @@ type Props = {
     placeholder: string,
     icon?: React.ReactNode,
     field?: any
+    ref?: any
 }
 
-export const Input: FC<Props> = ({ placeholder, type = "text", icon, field }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
@@ -19,7 +20,7 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon, field }) =>
                     !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                     : icon}
             </div>
-            <InputComponent {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
+            <InputComponent ref={ref} {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
         </div>
     )
 }

src/components/my-account/index.tsx

@@ -0,0 +1,142 @@
+import { Button } from "@headlessui/react"
+import { Input } from "../common/input"
+import { DatepickerComponent } from "../common/datepicker"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { MyAccountInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { MyAccountSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
+import { ComboBox } from "../common/combo-box"
+
+export const MyAccountPage = () => {
+    const { handleSubmit, formState: { errors }, control } = useForm<MyAccountInterface>({
+        resolver: yupResolver(MyAccountSchema)
+    })
+
+    const handleMyAccountForm: SubmitHandler<MyAccountInterface> = async (data) => {
+        console.log("data =>", data)
+    }
+
+    return (
+        <form onSubmit={handleSubmit(handleMyAccountForm)} className="w-full h-full flex flex-col gap-10 bg-auth-form rounded-[40px] p-[30px]">
+            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
+                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
+                    <p className="font-medium text-xl text-primary-text-color">اطلاعات اولیه</p>
+                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                    </p>
+                </div>
+                <div className="flex flex-col gap-10 w-full">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px]">
+                        <Controller name="phoneNumber" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="شماره تماس" type="number" field={field} />
+                                <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
+                            </div>
+                        )} />
+                        <Controller name="marketName" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="نام شرکت" field={field} />
+                                <ErrorComponent show={errors.marketName} message={errors.marketName?.message} />
+                            </div>
+                        )} />
+                        <Controller name="name" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="نام" field={field} />
+                                <ErrorComponent show={errors.name} message={errors.name?.message} />
+                            </div>
+                        )} />
+                        <Controller name="family" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="نام خانوادگی" field={field} />
+                                <ErrorComponent show={errors.family} message={errors.family?.message} />
+                            </div>
+                        )} />
+                        <Controller name="capCity" control={control} render={({ field }) => (
+                            <div>
+                                <ComboBox field={field} />
+                                <ErrorComponent show={errors.capCity} message={errors.capCity?.message} />
+                            </div>
+                        )} />
+                        <Controller name="city" control={control} render={({ field }) => (
+                            <div>
+                                <ComboBox field={field} />
+                                <ErrorComponent show={errors.city} message={errors.city?.message} />
+                            </div>
+                        )} />
+                    </div>
+                    <div className="divide-y-2 border" />
+                </div>
+            </div>
+            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
+                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
+                    <p className="font-medium text-xl text-primary-text-color">اطلاعات تکمیلی</p>
+                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                    </p>
+                </div>
+                <div className="flex flex-col gap-10 w-full">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px]">
+                        <Controller name="address" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="آدرس" field={field} />
+                                <ErrorComponent show={errors.address} message={errors.address?.message} />
+                            </div>
+                        )} />
+                        <Controller name="phoneNumber1" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="شماره تماس" type="number" field={field} />
+                                <ErrorComponent show={errors.phoneNumber1} message={errors.phoneNumber1?.message} />
+                            </div>
+                        )} />
+                        <Controller name="staticNumber" control={control} render={({ field }) => (
+                            <div>
+                                <Input placeholder="شماره ثابت" type="number" field={field} />
+                                <ErrorComponent show={errors.staticNumber} message={errors.staticNumber?.message} />
+                            </div>
+                        )} />
+                        <Controller name="date" control={control} render={({ field }) => (
+                            <div className="flex flex-col gap-y-9">
+                                <DatepickerComponent field={field} />
+                                <ErrorComponent show={errors.date} message={errors.date?.message} />
+                            </div>
+                        )} />
+                    </div>
+                    <div className="divide-y-2 border" />
+                </div>
+            </div>
+            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
+                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
+                    <p className="font-medium text-xl text-primary-text-color">تغییر رمز عبور</p>
+                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                    </p>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px] w-full">
+                    <Controller name="currentPassword" control={control} render={({ field }) => (
+                        <div>
+                            <Input placeholder="رمز عبور فعلی" type="password" field={field} />
+                            <ErrorComponent show={errors.currentPassword} message={errors.currentPassword?.message} />
+                        </div>
+                    )} />
+                    <div />
+                    <Controller name="newPassword" control={control} render={({ field }) => (
+                        <div>
+                            <Input placeholder="رمز عبور جدید" type="password" field={field} />
+                            <ErrorComponent show={errors.newPassword} message={errors.newPassword?.message} />
+                        </div>
+                    )} />
+                    <Controller name="repeatPassword" control={control} render={({ field }) => (
+                        <div>
+                            <Input placeholder="تکرار رمز عبور" type="password" field={field} />
+                            <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
+                        </div>
+                    )} />
+                </div>
+            </div>
+            <div className="flex w-full xl:justify-end mt-10">
+                <Button type="submit" className="w-full xl:max-w-fit xl:min-w-72">ذخیره</Button>
+            </div>
+        </form>
+    )
+}