profile ,footer , ...

src/langs/fa.json

@@ -43,7 +43,8 @@
   },
   "errors": {
     "required": "این فیلد اجباری می باشد",
-    "password_not_match": "رمز عبور با تکرار آن مطابقت ندارد"
+    "password_not_match": "رمز عبور با تکرار آن مطابقت ندارد",
+    "is_not_image": "فرمت فایل انتخاب شده اشتباه می باشد"
   },
   "description": "توضیحات",
   "sidebar": {
@@ -300,7 +301,9 @@
     "image_profile": "تصویر حساب کاربری",
     "image_profile_desc": "تصویر خود را در حساب کاربری قرار دهید.",
     "upload_image": "آپلود تصویر",
-    "format_image": "فرمت های jpg, png,jpeg.حداکثر ۱مگابایت",
+    "formats": "فرمت های",
+    "max_size": "حداکثر ۱مگابایت",
+    "format_image": " jpg, png,jpeg.",
     "info_account": "اطلاعات حساب",
     "auth_after_change_info": "در صورت تغییر اطلاعات حساب باید مجددا احراز هویت انجام شود.",
     "username": "نام کاربری",
@@ -316,7 +319,8 @@
     "postal_code": "کد پستی",
     "username_available": "نام کاربری موجود",
     "username_not_available": "نام کاربری موجود نیست",
-    "username_save_success": "نام کاربری با موفقیت ذخیره شد"
+    "username_save_success": "نام کاربری با موفقیت ذخیره شد",
+    "image_uploaded_successfully": "تصویر با موفقیت آپلود شد"
   },
   "email": "ایمیل",
   "save": "ذخیره",

src/pages/annoncement/List.tsx

@@ -6,9 +6,11 @@ import StatusWithText from '../../components/StatusWithText'
 import { clx } from '../../helpers/utils'
 import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
+import { useGetAnnoncement } from './hooks/useAnnoncementData'
 
 const AnnouncementtList: FC = () => {
 
+    const getAnnoncements = useGetAnnoncement()
     const { t } = useTranslation('global')
     const navigate = useNavigate()
 

src/pages/annoncement/hooks/useAnnoncementData.ts

@@ -0,0 +1,9 @@
+import * as api from "../service/AnnoncementService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetAnnoncement = () => {
+  return useQuery({
+    queryKey: ["announcements"],
+    queryFn: () => api.getAnnoncements(),
+  });
+};

src/pages/annoncement/service/AnnoncementService.ts

@@ -0,0 +1,6 @@
+import axios from "../../../config/axios";
+
+export const getAnnoncements = async () => {
+  const { data } = await axios.get(`/announcements/user`);
+  return data;
+};

src/pages/auth/components/LoginStep2.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { OtpVerifyType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
@@ -47,6 +47,28 @@ const LoginStep2: FC = () => {
         },
     })
 
+    useEffect(() => {
+        // بررسی پشتیبانی از Web OTP API
+        if (!("OTPCredential" in window)) return;
+
+        const ac = new AbortController();
+
+        navigator.credentials
+            .get({
+                otp: { transport: ["sms"] },
+                signal: ac.signal,
+            } as CredentialRequestOptions) // اطمینان از تطابق تایپ‌ها
+            .then((otpCredential) => {
+                if (otpCredential && "code" in otpCredential) {
+                    alert("OTP Received: " + otpCredential.code);
+                    formik.setFieldValue("code", (otpCredential).code);
+                }
+            })
+            .catch((err) => console.error("SMS AutoFill Error:", err));
+
+        return () => ac.abort();
+    }, []);
+
     return (
         <div>
             <div className='mt-5'>
@@ -78,7 +100,13 @@ const LoginStep2: FC = () => {
                         numInputs={5}
                         inputType='tel'
                         onChange={(otp: string) => formik.setFieldValue('code', otp)}
-                        renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
+                        renderInput={(props) =>
+                            <input
+                                {...props}
+                                autoComplete="one-time-code"
+                                inputMode="numeric"
+                                className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />
+                        }
                     />
                 </div>
 

src/pages/financial/components/Legal.tsx

@@ -4,7 +4,7 @@ import Input from '../../../components/Input'
 import { useFormik } from 'formik'
 import Textarea from '../../../components/Textarea'
 import Button from '../../../components/Button'
-import { TickCircle } from 'iconsax-react'
+import { InfoCircle, TickCircle } from 'iconsax-react'
 import { CreateLegalUserType, ProvinesItemType } from '../types/FinancialTypes'
 import * as Yup from 'yup'
 import { useCreateLegalUser, useGetCities, useGetFinancialInfo, useGetProvines } from '../hooks/useFinancialData'
@@ -186,6 +186,14 @@ const Legal: FC = () => {
                                     />
                                 </div>
 
+                                <div className='mt-8 h-10 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
+                                    <InfoCircle
+                                        size={18}
+                                        color='#DB0105'
+                                    />
+                                    <div>{t('financial.notice_cannot_edit')}</div>
+                                </div>
+
                                 {
                                     !isReadOnly &&
                                     <div className='mt-8 flex justify-end'>

src/pages/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AvatarImage from '../../assets/images/avatar_image.png'
 import Button from '../../components/Button'
@@ -7,13 +7,56 @@ import Input from '../../components/Input'
 import DatePickerComponent from '../../components/DatePicker'
 import Select from '../../components/Select'
 import Textarea from '../../components/Textarea'
-import { useGetProfile } from './hooks/useProfileData'
+import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
 import Username from './components/Username'
+import { useDropzone } from 'react-dropzone'
+import { toast } from 'react-toastify'
+import { useSingleUpload } from '../ticket/hooks/useTicketData'
+import { ErrorType } from '../../helpers/types'
+import { UpdateProfileType } from './types/ProfileTypes'
+import PageLoading from '../../components/PageLoading'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const [file, setFile] = useState<File>()
     const getProfile = useGetProfile()
+    const updateProfile = useUpdateProfile()
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+
+        if (acceptedFiles.length > 0) {
+            const file = acceptedFiles[0];
+            if (file.type.startsWith('image/')) {
+                setFile(file);
+                const formData = new FormData()
+                formData.append('file', file)
+                singleUpload.mutate(formData, {
+                    onSuccess: (data) => {
+                        const params: UpdateProfileType = {
+                            profilePic: data.data?.url
+                        }
+                        updateProfile.mutate(params, {
+                            onSuccess: () => {
+                                toast.success(t('profile.image_uploaded_successfully'))
+                            },
+                            onError: (error: ErrorType) => {
+                                toast.error(error.response?.data?.error?.message[0])
+                            }
+                        })
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('errors.is_not_image'))
+            }
+        }
+
+    }, [])
+    const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
     return (
         <div className='mt-4 '>
@@ -21,6 +64,10 @@ const Profile: FC = () => {
                 {t('profile.account_user')}
             </div>
 
+            {
+                getProfile.isPending ?
+                    <PageLoading />
+                    :
                     <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
                         <div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
                             <div className='flex-1'>
@@ -32,18 +79,22 @@ const Profile: FC = () => {
                                 </div>
                             </div>
                             <div className='flex-1 flex xl:gap-6 gap-4'>
-                        <img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
+                                <img src={file ? URL.createObjectURL(file) : getProfile.data?.data?.user?.profilePic ? getProfile.data?.data?.user?.profilePic : AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
                                 <div>
                                     <Button
+                                        isLoading={singleUpload.isPending || updateProfile.isPending}
                                         className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
                                     >
-                                <div className='flex items-center gap-3'>
+                                        <input {...getInputProps()} />
+                                        <div {...getRootProps()} className='flex items-center gap-3'>
                                             <DocumentUpload color='white' size={18} />
                                             <div>{t('profile.upload_image')}</div>
                                         </div>
                                     </Button>
-                            <p className='mt-3 text-description'>
+                                    <p className='mt-3 items-center flex gap-0.5 text-description'>
-                                {t('profile.format_image')}
+                                        {t('profile.formats')}
+                                        <div className='-mt-0.5'>{t('profile.format_image')}</div>
+                                        <span>{t('profile.max_size')}</span>
                                     </p>
                                 </div>
                             </div>
@@ -166,6 +217,7 @@ const Profile: FC = () => {
 
                         <div className='h-20 xl:hidden'></div>
                     </div>
+            }
 
         </div>
     )

src/pages/profile/types/ProfileTypes.ts

@@ -8,4 +8,5 @@ export type UpdateProfileType = {
   lastName?: string;
   birthDate?: string;
   userName?: string;
+  profilePic?: string;
 };

src/pages/ticket/CreateTicket.tsx

@@ -224,7 +224,7 @@ const CreateTicket: FC = () => {
                                         <TickSquare size={20} color='black' variant='Bold' />
                                     </div>
                                     <div className='text-description text-xs leading-5'>
-                                        پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                                        پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
                                     </div>
                                 </div>
                             </div>

src/shared/Footer.tsx

@@ -2,72 +2,78 @@ import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsa
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pages } from '../config/Pages'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 const Footer: FC = () => {
-
     const { t } = useTranslation('global')
+    const location = useLocation()
+
+    const isActive = (path: string) => location.pathname === path
 
     return (
         <div className='xl:hidden'>
             <div className='h-[60px] '></div>
             <div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
                 <Link to={Pages.dashboard}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
                         <Home2
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
                             {t('footer.home')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.services.other}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
-                        <Element4
+                        <Element3
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.services.other) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.services.other) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
                             {t('footer.other_services')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.services.mine}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                         <div className='bg-white p-1 rounded-full -mt-7'>
-                            <div className='bg-black flex justify-center items-center size-10 rounded-full'>
+                            <div className={`bg-black flex justify-center items-center size-10 rounded-full ${isActive(Pages.services.mine) ? 'bg-black' : ''}`}>
-                                <Element3
+                                <Element4
                                     className='size-5'
-                                    color='white'
+                                    color={isActive(Pages.services.mine) ? 'white' : 'white'}
+                                    variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
                                 />
                             </div>
                         </div>
-                        <div className='text-[10px] '>
+                        <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                             {t('footer.my_services')}
                         </div>
                     </div>
                 </Link>
                 <Link to={Pages.announcement.list}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                         <NotificationStatus
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                             {t('footer.announcements')}
                         </div>
                     </div>
                 </Link>
-
                 <Link to={Pages.ticket.list}>
-                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                         <Messages3
                             className='size-5'
-                            color='#8C90A3'
+                            color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
+                            variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
                         />
-                        <div className='text-[10px]'>
+                        <div className={`text-[10px] ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                             {t('footer.tickets')}
                         </div>
                     </div>

src/shared/Header.tsx

@@ -37,7 +37,9 @@ const Header: FC = () => {
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
+                <Link to={Pages.services.other}>
                     <Element3 color='black' className='xl:size-[18px] size-[17px]' />
+                </Link>
                 <Link to={Pages.wallet}>
                     <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                 </Link>

src/shared/SideBar.tsx

@@ -48,13 +48,13 @@ const SideBar: FC = () => {
                             link={Pages.dashboard}
                         />
                         <SideBarItem
-                            icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Element4 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.myservice')}
                             isActive={isActive('services')}
                             link={Pages.services.mine}
                         />
                         <SideBarItem
-                            icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Element3 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.other_service')}
                             isActive={isActive('other-service')}
                             link={Pages.services.other}