59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
'use client'
|
||
|
||
import React, { useEffect, useState } from 'react'
|
||
import PricingCard from './PricingCard'
|
||
import { PricingCardProps } from '@/app/types'
|
||
import useUserStore from '@/app/store/userStore'
|
||
import Loader from '@/components/ui/Loader'
|
||
|
||
const AdminPayments = () => {
|
||
const { user } = useUserStore()
|
||
const [plans, setPlans] = useState<PricingCardProps[]>([])
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
const fetchPlans = async () => {
|
||
try {
|
||
const response = await fetch('/api/account/get-plans')
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch plans')
|
||
}
|
||
const data = await response.json()
|
||
setPlans(data)
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : 'Failed to load pricing plans')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
fetchPlans()
|
||
}, [])
|
||
|
||
if (isLoading) {
|
||
return <Loader />
|
||
}
|
||
|
||
if (error) {
|
||
return <div className="p-8 text-center text-red-500">{error}</div>
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto translate-y-5 animate-[fadeIn_1.1s_ease-out_forwards] space-y-6">
|
||
<h2 className="mb-6 text-center text-3xl font-bold">Тарифные планы</h2>
|
||
<div className="grid grid-cols-1 gap-8 rounded-lg bg-white p-8 md:grid-cols-3">
|
||
{plans.map(plan => (
|
||
<PricingCard
|
||
key={plan.plan}
|
||
{...plan}
|
||
isActive={user?.account_type?.toLowerCase() === plan.plan.toLowerCase()}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AdminPayments
|