titles
This commit is contained in:
hamid zarghami
@@ -0,0 +1,27 @@
|
||||
import { FC } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useGetDetailService } from './hooks/useServiceData'
|
||||
import ServiceHeader from './components/ServiceHeader'
|
||||
import HeaderBuy from './components/HeaderBuy'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
|
||||
const BuyService: FC = () => {
|
||||
|
||||
const { serviceId, planId } = useParams()
|
||||
const getDetailService = useGetDetailService(serviceId ? serviceId : '')
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
{
|
||||
getDetailService.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='flex-1 max-w-full'>
|
||||
<HeaderBuy planId={planId} data={getDetailService?.data?.data?.danakService} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuyService
|
||||
@@ -111,12 +111,6 @@ const DetailService: FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.fullName')}
|
||||
placeholder={t('service.enter_your_name')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.title')}
|
||||
|
||||
@@ -9,6 +9,7 @@ import { useGetMyServices } from './hooks/useServiceData'
|
||||
import { MyServicesItem } from './types/ServiecTypes'
|
||||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||||
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
const MyServices: FC = () => {
|
||||
|
||||
@@ -19,6 +20,11 @@ const MyServices: FC = () => {
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
<Helmet>
|
||||
<title>
|
||||
داناک | سرویس های من
|
||||
</title>
|
||||
</Helmet>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('service.my_service')}
|
||||
|
||||
@@ -10,6 +10,7 @@ import ServiceItem from '../../components/ServiceItem'
|
||||
import OtherServicesComponent from './components/OtherServices'
|
||||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||||
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
|
||||
const OtherServices: FC = () => {
|
||||
@@ -22,6 +23,10 @@ const OtherServices: FC = () => {
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<Helmet>
|
||||
<title>داناک | لیست سرویس ها
|
||||
</title>
|
||||
</Helmet>
|
||||
<div className='flex-1'>
|
||||
{
|
||||
getSuggestedServices.isPending || getAdsLeft.isPending ?
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { ArrowRight, TickCircle } from 'iconsax-react'
|
||||
import { ServiceDetailDataType } from '../types/ServiecTypes'
|
||||
import { NumberFormat } from '../../../config/func'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import Textarea from '../../../components/Textarea'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../../config/Pages'
|
||||
|
||||
type Props = {
|
||||
data: ServiceDetailDataType,
|
||||
planId?: string
|
||||
}
|
||||
|
||||
const HeaderBuy: FC<Props> = ({ data, planId }) => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [planSelected] = useState<string>(planId ? planId : '')
|
||||
const [price, setPrice] = useState<number>(data?.subscriptionPlans[0]?.price)
|
||||
const [finalPrice, setFinalPrice] = useState<number>(0)
|
||||
const [planText, setPlanText] = useState<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const plan = data?.subscriptionPlans.find((item) => item.id === planSelected)
|
||||
|
||||
setPlanText(plan.name)
|
||||
setFinalPrice(plan.finalPrice)
|
||||
setPrice(plan?.price)
|
||||
|
||||
}, [data])
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='p-6 bg-white rounded-3xl'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div onClick={() => navigate(Pages.services.detail + data.id)} className='flex cursor-pointer gap-1.5'>
|
||||
<ArrowRight className='size-4' color='#888888' />
|
||||
<div className='text-xs text-description'>
|
||||
{t('service.back')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-8 bg-[#EAEDF5] px-9 text-xs pt-[9px] rounded-full items-center'>
|
||||
{planText}
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full items-end mt-6 flex xl:flex-row flex-col xl:justify-between'>
|
||||
<div className='flex xl:gap-8 gap-4'>
|
||||
<div className='xl:size-[70px] size-[50px] rounded-xl'>
|
||||
<img src={data?.icon} className='w-full h-full rounded-xl' />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
{data?.name}
|
||||
</div>
|
||||
<div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
|
||||
{data?.title}
|
||||
</div>
|
||||
<p className='text-description mt-1 text-[11px]'>
|
||||
{data?.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col justify-between xl:items-end'>
|
||||
<div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
|
||||
<div className='text-xs whitespace-nowrap flex gap-1 items-center'>
|
||||
<div className='flex gap-2'>
|
||||
{
|
||||
finalPrice !== price &&
|
||||
<div className='line-through text-xs text-description'>
|
||||
{NumberFormat(Number(price))}
|
||||
</div>
|
||||
}
|
||||
<div>{NumberFormat(Number(finalPrice))}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 p-6 bg-white rounded-3xl flex xl:gap-20 xl:flex-row flex-col gap-10'>
|
||||
<div>
|
||||
<div className='text-sm'>
|
||||
{t('service.info_business')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-description mt-2'>
|
||||
{t('service.enter_info_business')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
<Input
|
||||
label={t('service.business_name')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('service.phone_business')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-8'>
|
||||
<Textarea
|
||||
label={t('service.short_description')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
className='xl:w-fit px-5'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('service.confrim_and_invoice')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderBuy
|
||||
@@ -8,12 +8,12 @@ import { PlanItemType, ServiceDetailDataType } from '../types/ServiecTypes'
|
||||
import { NumberFormat } from '../../../config/func'
|
||||
import { useBuyService } from '../hooks/useServiceData'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../../config/Pages'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
data: ServiceDetailDataType
|
||||
data: ServiceDetailDataType,
|
||||
}
|
||||
|
||||
const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
@@ -52,7 +52,7 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
|
||||
<div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col items-end xl:justify-between'>
|
||||
<div className='flex xl:gap-8 gap-4'>
|
||||
<div className='xl:size-[70px] size-[50px] rounded-xl'>
|
||||
<img src={data?.icon} className='w-full h-full rounded-xl' />
|
||||
@@ -95,9 +95,6 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
selected={planSelected}
|
||||
/>
|
||||
</div>
|
||||
<div className='size-9 hidden bg-description rounded-xl xl:flex justify-center items-center'>
|
||||
<img src={ShareIcon} className='w-4' />
|
||||
</div>
|
||||
<div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
|
||||
<div className='text-xs whitespace-nowrap flex gap-1 items-center'>
|
||||
<div className='flex gap-2'>
|
||||
@@ -111,18 +108,20 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
<span>{planText}</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleBuy}
|
||||
isLoading={buyService.isPending}
|
||||
className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
|
||||
>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<div>
|
||||
{t('service.buy')}
|
||||
<Link to={Pages.services.buy + `${data.id}/${planSelected}`}>
|
||||
<Button
|
||||
// onClick={handleBuy}
|
||||
isLoading={buyService.isPending}
|
||||
className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
|
||||
>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<div>
|
||||
{t('service.buy')}
|
||||
</div>
|
||||
<ArrowLeft className='size-4' color='black' />
|
||||
</div>
|
||||
<ArrowLeft className='size-4' color='black' />
|
||||
</div>
|
||||
</Button>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user