plan

src/pages/support/Support.tsx

@@ -3,27 +3,20 @@ import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import SidebarHint from './components/SidebarHint'
 import SupportImage from '../../assets/images/support.png'
-import Button from '../../components/Button'
 import { CloseCircle, Document, Element3, TickCircle } from 'iconsax-react'
 import Tabs from '../../components/Tabs'
-import { useBuySupportPlan, useGetSupportPlans } from './hooks/useSupportData'
+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 { toast } from '../../components/Toast'
-import { ErrorType } from '../../helpers/types'
-import { useNavigate } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
+import BuyPlan from './components/BuyPlan'
 
 const Support: FC = () => {
     const { data, isLoading } = useGetSupportPlans()
     const { t } = useTranslation('global')
     const [activeTab, setActiveTab] = useState<string>('')
-    const [loadingPlanId, setLoadingPlanId] = useState<string>('')
-    const { mutate: buySupportPlan } = useBuySupportPlan()
-    const navigate = useNavigate()
 
     useEffect(() => {
         if (data?.data?.supportPlans?.length > 0 && !activeTab) {
@@ -31,20 +24,6 @@ const Support: FC = () => {
         }
     }, [data, activeTab])
 
-    const handleBuy = (planId: string) => {
-        setLoadingPlanId(planId)
-        buySupportPlan(planId, {
-            onSuccess: (data) => {
-                toast(data?.data?.message, 'success')
-                navigate(Pages.receipts.detail + data?.data?.invoice?.id)
-                setLoadingPlanId('')
-            },
-            onError: (error: ErrorType) => {
-                toast(error?.response?.data?.error.message[0], 'error')
-                setLoadingPlanId('')
-            }
-        })
-    }
 
     if (isLoading || !data?.data) {
         return <SupportSkeleton />
@@ -92,17 +71,14 @@ const Support: FC = () => {
                                                 ماهیانه
                                             </div>
                                             <div className='font-bold text-sm mt-1'>
-                                                {NumberFormat(item.price)}
+                                                {item.price === 0 ? 'رایگان' : NumberFormat(item.price)}
                                             </div>
                                             <div className='mt-1 text-sm'>
                                                 تومان
                                             </div>
 
-                                            <Button
-                                                label='ثبت پلن'
-                                                className='mt-4 mx-auto w-fit px-5'
-                                                onClick={() => handleBuy(item.id)}
-                                                isLoading={loadingPlanId === item.id}
+                                            <BuyPlan
+                                                id={item.id}
                                             />
                                         </div>
                                     </div>
@@ -163,11 +139,8 @@ const Support: FC = () => {
                                             <div className='text-sm text-[#595C67] mt-2'>ماهیانه</div>
                                             <div className='font-bold text-sm mt-1'>{NumberFormat(plan.price)}</div>
                                             <div className='mt-1 text-sm'>تومان</div>
-                                            <Button
-                                                label='ثبت پلن'
-                                                className='mt-4 w-fit px-5 mx-auto'
-                                                onClick={() => handleBuy(plan.id)}
-                                                isLoading={loadingPlanId === plan.id}
+                                            <BuyPlan
+                                                id={plan.id}
                                             />
                                         </div>
                                         <div className='space-y-4'>