diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx new file mode 100644 index 0000000..d1bcb62 --- /dev/null +++ b/src/components/Accordion.tsx @@ -0,0 +1,46 @@ +import { AddCircle } from 'iconsax-react' +import { FC, useState, useRef, useEffect } from 'react' + +type Props = { + title: string + content: string +} + +const Accordion: FC = ({ title, content }) => { + const [isOpen, setIsOpen] = useState(false) + const contentRef = useRef(null) + const [contentHeight, setContentHeight] = useState(0) + + useEffect(() => { + if (contentRef.current) { + setContentHeight(isOpen ? contentRef.current.scrollHeight : 0) + } + }, [isOpen]) + + return ( +
+
setIsOpen(!isOpen)}> +
+ {title} +
+ + +
+
+

+ {content} +

+
+
+ ) +} + +export default Accordion \ No newline at end of file diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index ecc6d7f..0c1f73a 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -27,7 +27,7 @@ const Tabs: FC = (props: Props) => { spaceBetween={30} className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'> { - props.items?.map((item: Item, index: number) => { + props.items?.length > 0 && props.items?.map((item: Item, index: number) => { return ( props.onChange(item.value)} key={item.value} className={clx( 'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer', diff --git a/src/config/Pages.ts b/src/config/Pages.ts index 7fae902..5dbe20e 100644 --- a/src/config/Pages.ts +++ b/src/config/Pages.ts @@ -38,5 +38,6 @@ export const Pages = { financial: "/financial", support: { index: "/support", + info: "/support/info", }, }; diff --git a/src/pages/support/Support.tsx b/src/pages/support/Support.tsx index 4c0b5af..0ff0dd9 100644 --- a/src/pages/support/Support.tsx +++ b/src/pages/support/Support.tsx @@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async' import { useTranslation } from 'react-i18next' import SidebarHint from './components/SidebarHint' import SupportImage from '../../assets/images/support.png' -import { Building, CloseCircle, Component, Crown, TickCircle } from 'iconsax-react' +import { ArrowLeft, Building, CloseCircle, Component, Crown, TickCircle } from 'iconsax-react' import Tabs from '../../components/Tabs' import { useGetSupportPlans } from './hooks/useSupportData' import { NumberFormat } from '../../config/func' @@ -12,6 +12,8 @@ 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() @@ -36,8 +38,15 @@ const Support: FC = () => { داناک | {t('support.title')} -
+
{t('support.title')} + + +
+
بیشتر بدانید
+ +
+
@@ -142,8 +151,8 @@ const Support: FC = () => {
{plan.name}
سالیانه
-
{NumberFormat(plan.price)}
-
تومان
+
{plan.price === 0 ? 'رایگان' : NumberFormat(plan.price)}
+
{plan.price === 0 ? ' ' : 'تومان'}
diff --git a/src/pages/support/SupportInfo.tsx b/src/pages/support/SupportInfo.tsx new file mode 100644 index 0000000..2f31aa1 --- /dev/null +++ b/src/pages/support/SupportInfo.tsx @@ -0,0 +1,204 @@ +import { FC, useEffect, useState } from 'react' +import { Helmet } from 'react-helmet-async' +import { useTranslation } from 'react-i18next' +import { useGetSupportPlans } from './hooks/useSupportData' +import { Building, Component } from 'iconsax-react' +import { PlanItemType } from './types/SupportTypes' +import { Crown } from 'iconsax-react' +import SupportImage from '../../assets/images/support.png' +import { NumberFormat } from '../../config/func' +import { featureItemType } from './types/SupportTypes' +import SupportIcon from './components/SupportIcon' +import { TickCircle, CloseCircle } from 'iconsax-react' +import SidebarHint from './components/SidebarHint' +import { SupportPlanFeatureKey } from './enum/SupportEnum' +import Accordion from '../../components/Accordion' +import Tabs from '../../components/Tabs' +import SupportSkeleton from './components/SupportSkeleton' + +const SupportInfo: FC = () => { + + const { t } = useTranslation('global') + const { data, isPending } = useGetSupportPlans() + const [activeTab, setActiveTab] = useState('') + + useEffect(() => { + if (data?.data?.supportPlans?.length > 0 && !activeTab) { + setActiveTab(data.data.supportPlans[0].id) + } + }, [data, activeTab]) + + if (isPending || !data?.data) { + return + } + + return ( +
+ + + داناک | {t('support.title')} + + + +
+ خدمات پشتیبانی داناک +
+ +

+ با استفاده از خدمات پشتیبانی داناک می‌توانید در کم‌ترین زمان ایرادهای فنی زیر ساخت های نرم افزاری خود را رفع نمایید. +

+ +
+ ({ + icon: index === 0 ? : index === 1 ? : , + label: plan.name, + value: plan.id + }))} + active={activeTab} + onChange={setActiveTab} + /> +
+ +
+
+
+
+ support +
+ + { + data?.data?.supportPlans?.map((item: PlanItemType) => { + return ( +
+
+
+ {item.name} +
+
+ سالیانه +
+
+ {item.price === 0 ? 'رایگان' : NumberFormat(item.price)} +
+
+ {item.price === 0 ? ' ' : 'تومان'} +
+ + {/*
+ +
*/} +
+
+ ) + }) + } +
+ +
+
+ { + data?.data?.supportPlans?.[0]?.features.map((row: featureItemType) => ( +
+
+
+ +
+
{t(`support.${row.featureKey}`)}
+
+
+ )) + } +
+ { + data?.data?.supportPlans?.map((item: PlanItemType) => ( +
+ { + item.features.map((row) => ( +
+ { + row.featureType === 'boolean' ? + row.featureValue === 'true' ? + + : + + : +
+ {row.featureValue} + {row.featureKey === 'ticket_limit' && ' (روزانه)'} +
+ } +
+ )) + } +
+ )) + } +
+ + {/* Mobile View */} +
+ { + data?.data?.supportPlans?.map((plan: PlanItemType) => ( + activeTab === plan.id && ( +
+
+ support +
+
+
{plan.name}
+
سالیانه
+
{plan.price === 0 ? 'رایگان' : NumberFormat(plan.price)}
+
{plan.price === 0 ? ' ' : 'تومان'}
+ {/* */} +
+
+ { + plan.features.map((row: featureItemType) => ( +
+
+
+ +
+
{t(`support.${row.featureKey}`)}
+
+ { + row.featureType === 'boolean' ? + row.featureValue === 'true' ? + + : + + : +
+ {row.featureValue} + {row.featureKey === 'ticket_limit' && ' (روزانه)'} +
+ } +
+ )) + } +
+
+ ) + )) + } +
+
+ + +
+ +
+ + + +
+
+ ) +} + +export default SupportInfo \ No newline at end of file diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 07a6355..065b87f 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -30,6 +30,7 @@ import MyDiscountList from '../pages/discounts/List' import LearningDetail from '../pages/learning/Detail' import BuyService from '../pages/service/BuyService' import Support from '../pages/support/Support' +import SupportInfo from '../pages/support/SupportInfo' const MainRouter: FC = () => { return ( @@ -42,6 +43,7 @@ const MainRouter: FC = () => { } /> } /> + } /> } /> } /> } />