hamid zarghami
200 lines
11 KiB
TypeScript
200 lines
11 KiB
TypeScript
import { FC, useEffect, useState } from 'react'
|
||
import { Helmet } from 'react-helmet-async'
|
||
import { useTranslation } from 'react-i18next'
|
||
import SidebarHint from './components/SidebarHint'
|
||
import SupportImage from '../../assets/images/support.png'
|
||
import { ArrowLeft, Building, CloseCircle, Component, Crown, InfoCircle, TickCircle } from 'iconsax-react'
|
||
import Tabs from '../../components/Tabs'
|
||
import { useGetSupportPlans } from './hooks/useSupportData'
|
||
import { NumberFormat } from '../../config/func'
|
||
import { PlanItemType, featureItemType } from './types/SupportTypes'
|
||
import SupportSkeleton from './components/SupportSkeleton'
|
||
import SupportIcon from './components/SupportIcon'
|
||
import { SupportPlanFeatureKey } from './enum/SupportEnum'
|
||
import BuyPlan from './components/BuyPlan'
|
||
import { Link } from 'react-router-dom'
|
||
import { Pages } from '../../config/Pages'
|
||
|
||
const Support: FC = () => {
|
||
const { data, isLoading } = useGetSupportPlans()
|
||
const { t } = useTranslation('global')
|
||
const [activeTab, setActiveTab] = useState<string>('')
|
||
|
||
useEffect(() => {
|
||
if (data?.data?.supportPlans?.length > 0 && !activeTab) {
|
||
setActiveTab(data.data.supportPlans[0].id)
|
||
}
|
||
}, [data, activeTab])
|
||
|
||
|
||
if (isLoading || !data?.data) {
|
||
return <SupportSkeleton />
|
||
}
|
||
|
||
return (
|
||
<div className='mt-4'>
|
||
<Helmet>
|
||
<title>
|
||
داناک | {t('support.title')}
|
||
</title>
|
||
</Helmet>
|
||
<div className='flex justify-between items-center'>
|
||
{t('support.title')}
|
||
|
||
<Link to={Pages.support.info}>
|
||
<div className='flex gap-1 items-center'>
|
||
<InfoCircle size={18} color='#000' />
|
||
<div className='text-xs'>بیشتر بدانید</div>
|
||
<ArrowLeft size={18} color='#000' />
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className='xl:hidden mt-5'>
|
||
<Tabs
|
||
items={data?.data?.supportPlans?.map((plan: PlanItemType, index: number) => ({
|
||
icon: index === 0 ? <Component color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} /> : index === 1 ? <Crown color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} /> : <Building color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} />,
|
||
label: plan.name,
|
||
value: plan.id
|
||
}))}
|
||
active={activeTab}
|
||
onChange={setActiveTab}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex gap-6 xl:mt-8 mt-4'>
|
||
<div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||
<div className='xl:flex hidden justify-between mt-10'>
|
||
<div className='flex-1 flex justify-center'>
|
||
<img src={SupportImage} alt='support' className='w-[160px]' />
|
||
</div>
|
||
|
||
{
|
||
data?.data?.supportPlans?.map((item: PlanItemType) => {
|
||
return (
|
||
<div key={item.id} className='flex-1 flex flex-col items-center'>
|
||
<div className='text-center flex flex-col flex-1 w-full'>
|
||
<div className='font-bold'>
|
||
{item.name}
|
||
</div>
|
||
<div className='text-sm text-[#595C67] mt-4'>
|
||
سالیانه
|
||
</div>
|
||
<div className='font-bold text-sm mt-1'>
|
||
{item.price === 0 ? 'رایگان' : NumberFormat(item.price)}
|
||
</div>
|
||
<div className='mt-1 text-sm'>
|
||
{item.price === 0 ? ' ' : 'تومان'}
|
||
</div>
|
||
|
||
<div className='flex-1 flex items-end'>
|
||
<BuyPlan
|
||
id={item.id}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
|
||
<div className='xl:flex hidden flex-1 mt-5'>
|
||
<div className='flex-1 flex flex-col'>
|
||
{
|
||
data?.data?.supportPlans?.[0]?.features.map((row: featureItemType) => (
|
||
<div className='flex h-16 px-4 plan items-center justify-between'>
|
||
<div className='flex-1 flex items-center gap-2'>
|
||
<div className='size-8 rounded-2.5 bg-[#EEF0F7] flex items-center justify-center'>
|
||
<SupportIcon keySupport={row.featureKey as SupportPlanFeatureKey} />
|
||
</div>
|
||
<div className='text-xs'>{t(`support.${row.featureKey}`)}</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
{
|
||
data?.data?.supportPlans?.map((item: PlanItemType) => (
|
||
<div className='flex-1 flex flex-col'>
|
||
{
|
||
item.features.map((row) => (
|
||
<div className='flex h-16 px-4 plan items-center justify-center'>
|
||
{
|
||
row.featureType === 'boolean' ?
|
||
row.featureValue === 'true' ?
|
||
<TickCircle className='xl:size-8 size-6' color='#01A560' variant='Bold' />
|
||
:
|
||
<CloseCircle className='xl:size-8 size-6' color='#D50303' variant='Bold' />
|
||
:
|
||
<div className='text-xs'>
|
||
{row.featureValue}
|
||
{row.featureKey === 'ticket_limit' && ' (روزانه)'}
|
||
</div>
|
||
}
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
|
||
{/* Mobile View */}
|
||
<div className='xl:hidden block mt-5'>
|
||
{
|
||
data?.data?.supportPlans?.map((plan: PlanItemType) => (
|
||
activeTab === plan.id && (
|
||
<div key={plan.id}>
|
||
<div className='flex justify-center mb-6'>
|
||
<img src={SupportImage} alt='support' className='w-[120px]' />
|
||
</div>
|
||
<div className='text-center mb-6'>
|
||
<div className='font-bold text-lg'>{plan.name}</div>
|
||
<div className='text-sm text-[#595C67] mt-2'>سالیانه</div>
|
||
<div className='font-bold text-sm mt-1'>{plan.price === 0 ? 'رایگان' : NumberFormat(plan.price)}</div>
|
||
<div className='mt-1 text-sm'>{plan.price === 0 ? ' ' : 'تومان'}</div>
|
||
<BuyPlan
|
||
id={plan.id}
|
||
/>
|
||
</div>
|
||
<div className='space-y-4'>
|
||
{
|
||
plan.features.map((row: featureItemType) => (
|
||
<div className='flex items-center justify-between p-4 bg-gray-50 rounded-xl'>
|
||
<div className='flex items-center gap-2'>
|
||
<div className='size-8 rounded-2.5 bg-[#EEF0F7] flex items-center justify-center'>
|
||
<SupportIcon keySupport={row.featureKey as SupportPlanFeatureKey} />
|
||
</div>
|
||
<div className='text-xs'>{t(`support.${row.featureKey}`)}</div>
|
||
</div>
|
||
{
|
||
row.featureType === 'boolean' ?
|
||
row.featureValue === 'true' ?
|
||
<TickCircle className='size-6' color='#01A560' variant='Bold' />
|
||
:
|
||
<CloseCircle className='size-6' color='#D50303' variant='Bold' />
|
||
:
|
||
<div className='text-sm'>
|
||
{row.featureValue}
|
||
{row.featureKey === 'ticket_limit' && ' (روزانه)'}
|
||
</div>
|
||
}
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
)
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<SidebarHint />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Support |