ads and invoce

This commit is contained in:
hamid zarghami
2025-02-22 10:51:30 +03:30
parent e094736c0e
commit 06f7f6b3d8
10 changed files with 393 additions and 153 deletions
+1 -2
View File
@@ -12,7 +12,6 @@ import { IApiErrorRepsonse } from './types/error.types'
import MainRouter from './router/Main'
import AuthRouter from './router/Auth'
import { Pages } from './config/Pages'
import useNumberFont from './hooks/useNumberFont';
i18next.init({
interpolation: { escapeValue: false },
@@ -43,7 +42,7 @@ const queryClient = new QueryClient({
const App: FC = () => {
useNumberFont()
// useNumberFont()
const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
useEffect(() => {
+8 -3
View File
@@ -219,10 +219,14 @@
"service": "سرویس",
"status": "وضعیت تایید",
"status_paid": "وضعیت پرداخت",
"PENDING": "در انتظار",
"PENDING": "در انتظار پرداخت",
"PAID": "پرداخت شده",
"CANCELED": "لغو شده",
"EXPIRED": "منقضی شده"
"EXPIRED": "منقضی شده",
"real_person": "شخص حقیقی",
"fullName": "نام و نام خانوادگی",
"compelete_financal_info_error": "برای دریافت فاکتور رسمی اطلاعات مالی خود را وارد کنید",
"compelete_financal_info": "تکمیل اطلاعات مالی"
},
"edit": "ویرایش",
"transaction": {
@@ -375,7 +379,8 @@
"state": "استان",
"city": "شهر",
"notice_cannot_edit": "ویرایش مشخصات فردی بعد از تکمیل اطلاعات امکان پذیر نیست",
"notice_cannot_edit_legal": "ویرایش مشخصات حقوقی بعد از تکمیل اطلاعات امکان پذیر نیست"
"notice_cannot_edit_legal": "ویرایش مشخصات حقوقی بعد از تکمیل اطلاعات امکان پذیر نیست",
"phone": "شماره تماس"
},
"man": "مرد",
"woman": "زن",
@@ -22,3 +22,36 @@ export type ProvinesItemType = {
id: string;
name: string;
};
export type FinancialDataType = {
user: {
id: string;
createdAt: string;
updatedAt: string;
email: string | null;
phone: string;
userName: string | null;
firstName: string;
lastName: string;
birthDate: string;
nationalCode: string;
profilePic: string;
emailVerified: boolean;
userAddress: string;
postalCode: string;
realUser: CreateRealUserType | null;
legalUser: CreateLegalUserType | null;
address: {
address: string;
postalCode: string;
city: {
id: number;
name: string;
province: {
id: number;
name: string;
};
};
} | null;
};
};
+18 -122
View File
@@ -1,7 +1,5 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Edit } from 'iconsax-react'
import SamanImage from '../../assets/images/saman.png'
import { useParams } from 'react-router-dom'
import { useGetInvoiceDetail } from './hooks/useReceiptData'
import { useGetFinancialInfo } from '../financial/hooks/useFinancialData'
@@ -9,6 +7,10 @@ import { ReceiptDetailItemType } from './types/ReceiptTypes'
import { NumberFormat } from '../../config/func'
import moment from 'moment-jalaali'
import PageLoading from '../../components/PageLoading'
import LegalInfo from './components/LegalInfo'
import RealInfo from './components/RealInfo'
import RegisterInfo from './components/RegisterInfo'
import { clx } from '../../helpers/utils'
const ReceiptsDetail: FC = () => {
@@ -21,7 +23,6 @@ const ReceiptsDetail: FC = () => {
<div className='mt-4'>
<div>
{t('receip.detail_account')}
۱۲۳۱۲
</div>
{
@@ -35,115 +36,20 @@ const ReceiptsDetail: FC = () => {
<div>
{t('receip.personal_information')}
</div>
<div className='flex gap-1 items-center text-xs text-[#0047FF]'>
<Edit size={16} color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
</div>
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.type_person')}
</div>
<div>
{t('receip.company')}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.representativeـname')}
</div>
<div>
مهرداد مظفری
</div>
</div>
{
getProfile.data?.data?.user?.legalUser ?
<LegalInfo data={getProfile.data?.data} />
:
getProfile.data?.data?.user?.realUser ?
<RealInfo data={getProfile.data?.data} />
: <RegisterInfo data={getProfile.data?.data} />
}
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.company_name')}
</div>
<div>
داناک
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.registration_number')}
</div>
<div>
۱۲۳۴
</div>
</div>
</div>
<div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.tel_company')}
</div>
<div>
۰۰۱۲۳۴۵۶۷۸
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.national_code')}
</div>
<div>
۰۰۱۲۳۴۵۶۷۸
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.postal_code')}
</div>
<div>
۳۸۲۱۳۵۸۸۹۲
</div>
</div>
</div>
<div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.state')}
</div>
<div>
مرکزی
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.state')}
</div>
<div>
مرکزی
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.city')}
</div>
<div>
اراک
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.address')}
</div>
<div>
اراک -خیابان شریعتی-خیابان جنت
</div>
</div>
</div>
</div>
@@ -205,8 +111,11 @@ const ReceiptsDetail: FC = () => {
<div>
{t('receip.receip_information')}
</div>
<div className='border border-orange-400 text-orange-400 rounded-lg text-[9px] h-6 flex items-center px-1'>
<div>پرداخت نشده</div>
<div className={clx(
'border border-orange-400 text-orange-400 rounded-lg text-[9px] h-6 flex items-center px-1',
getInvoce.data?.data?.invoice?.status === 'PAID' ? 'border-green-400 text-green-400' : getInvoce.data?.data?.invoice?.status !== 'PENDING' ? 'border-red-400 text-red-400' : 'border-orange-400 text-orange-400'
)}>
<div>{t(`receip.${getInvoce.data?.data?.invoice?.status}`)}</div>
</div>
</div>
@@ -245,20 +154,7 @@ const ReceiptsDetail: FC = () => {
</div>
</div>
<div className='mt-5 flex justify-center gap-2'>
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
<img src={SamanImage} alt='saman' className='w-8 h-8' />
<div className='mt-2'>
بانک سامان
</div>
</div>
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
<img src={SamanImage} alt='saman' className='w-8 h-8' />
<div className='mt-2'>
بانک سامان
</div>
</div>
</div>
</div>
</div>
}
+117
View File
@@ -0,0 +1,117 @@
import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { FinancialDataType } from '../../financial/types/FinancialTypes'
type Props = {
data: FinancialDataType
}
const LegalInfo: FC<Props> = ({ data }) => {
const { t } = useTranslation('global')
return (
<Fragment>
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.type_person')}
</div>
<div>
{
data?.user?.legalUser ?
t('receip.company') :
t('receip.real_person')
}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.representativeـname')}
</div>
<div>
{data.user?.firstName + ' ' + data.user?.lastName}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.company_name')}
</div>
<div>
{data.user?.legalUser?.companyRegisteredName}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.registration_number')}
</div>
<div>
{data.user?.legalUser?.registrationId}
</div>
</div>
</div>
<div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.tel_company')}
</div>
<div>
{data.user?.legalUser?.number}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.national_code')}
</div>
<div>
{data?.user?.legalUser?.nationalId}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.postal_code')}
</div>
<div>
{data.user?.address?.postalCode}
</div>
</div>
</div>
<div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.state')}
</div>
<div>
{data.user?.address?.city?.province?.name}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.city')}
</div>
<div>
{data.user?.address?.city?.name}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.address')}
</div>
<div>
{data.user?.address?.address}
</div>
</div>
</div>
</Fragment>
)
}
export default LegalInfo
+107
View File
@@ -0,0 +1,107 @@
import { FC, Fragment } from 'react'
import { FinancialDataType } from '../../financial/types/FinancialTypes'
import { useTranslation } from 'react-i18next'
type Props = {
data: FinancialDataType
}
const RealInfo: FC<Props> = ({ data }) => {
const { t } = useTranslation('global')
return (
<Fragment>
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.type_person')}
</div>
<div>
{t('receip.real_person')}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.fullName')}
</div>
<div>
{data.user?.firstName + ' ' + data.user?.lastName}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('financial.father_name')}
</div>
<div>
{data.user?.realUser?.fatherName}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('financial.sex')}
</div>
<div>
{data.user?.realUser?.gender === 'male' ? 'مرد' : 'زن'}
</div>
</div>
</div>
<div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('financial.phone')}
</div>
<div>
{data.user?.phone}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.postal_code')}
</div>
<div>
{data.user?.address?.postalCode}
</div>
</div>
</div>
<div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.state')}
</div>
<div>
{data.user?.address?.city?.province?.name}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.city')}
</div>
<div>
{data.user?.address?.city?.name}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.address')}
</div>
<div>
{data.user?.address?.address}
</div>
</div>
</div>
</Fragment>
)
}
export default RealInfo
@@ -0,0 +1,70 @@
import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { FinancialDataType } from '../../financial/types/FinancialTypes'
import { InfoCircle } from 'iconsax-react'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'
type Props = {
data: FinancialDataType
}
const RegisterInfo: FC<Props> = ({ data }) => {
const { t } = useTranslation('global')
return (
<Fragment>
<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'
className='min-w-[18px]'
/>
<div className='hidden xl:block'>{t('receip.compelete_financal_info_error')}</div>
<div className='flex-1 flex xl:justify-end'>
<Link to={Pages.financial}>
<Button
label={t('receip.compelete_financal_info')}
className='w-fit whitespace-nowrap px-4 h-7 text-[10px]'
/>
</Link>
</div>
</div>
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.type_person')}
</div>
<div>
{t('receip.real_person')}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('receip.fullName')}
</div>
<div>
{data.user?.firstName + ' ' + data.user?.lastName}
</div>
</div>
<div className='flex gap-2'>
<div className='text-description'>
{t('financial.phone')}
</div>
<div>
{data.user?.phone}
</div>
</div>
</div>
</Fragment>
)
}
export default RegisterInfo
+18 -11
View File
@@ -1,5 +1,4 @@
import { FC, Fragment } from 'react'
import RobotImage from '../../assets/images/robot.jpeg'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import Rate from 'rc-rate'
@@ -12,11 +11,14 @@ import { useGetDetailService } from './hooks/useServiceData'
import { useParams } from 'react-router-dom'
import PageLoading from '../../components/PageLoading'
import moment from 'moment-jalaali'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
const DetailService: FC = () => {
const { id } = useParams()
const { t } = useTranslation('global')
const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)
const getDetailService = useGetDetailService(id ? id : '')
@@ -204,18 +206,23 @@ const DetailService: FC = () => {
</div>
</div>
</div>
<div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
<img
src={RobotImage}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
سفارش نرمافزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینهای برای امروز؟
{
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
<a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
<img
src={getAdsLeft.data.data.ads[0].imageUrl}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
{getAdsLeft.data.data.ads[0].title}
</div>
</div>
</div>
</div>
</a>
}
</Fragment>
}
+17 -11
View File
@@ -3,17 +3,19 @@ import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import ServiceSection from '../../components/ServiceSection'
import StatusCircle from '../../components/StatusCircle'
import BannerImage from '../../assets/images/banner.png'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetMyServices } from './hooks/useServiceData'
import { MyServicesItem } from './types/ServiecTypes'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
const MyServices: FC = () => {
const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('')
const getServices = useGetMyServices(search)
const getAdsLeft = useGetAds(AdsDisplayLocation.MY_SERVICES_PAGE)
return (
<div className='w-full flex gap-6 mt-4'>
@@ -84,18 +86,22 @@ const MyServices: FC = () => {
</div>
</div>
<div className='bg-white w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
<img
src={BannerImage}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
سفارش نرمافزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینهای برای امروز؟
{
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
<a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
<img
src={getAdsLeft.data.data.ads[0].imageUrl}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
{getAdsLeft.data.data.ads[0].title}
</div>
</div>
</div>
</div>
</a>
}
</div>
)
}
+4 -4
View File
@@ -32,7 +32,7 @@ const OtherServices: FC = () => {
{
getAds.data?.data?.ads?.map((item: AdsItemType) => {
return (
<div key={item.id} className='relative drtl'>
<a target='_blank' key={item.id} className='relative drtl'>
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
<div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
@@ -59,7 +59,7 @@ const OtherServices: FC = () => {
</div>
</div>
</div>
</a>
)
})
}
@@ -96,7 +96,7 @@ const OtherServices: FC = () => {
</div>
{
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
<div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
<a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
<img
src={getAdsLeft.data.data.ads[0].imageUrl}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
@@ -107,7 +107,7 @@ const OtherServices: FC = () => {
{getAdsLeft.data.data.ads[0].title}
</div>
</div>
</div>
</a>
}
</div>
)