114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { PricingCardProps } from '@/app/types'
|
||
import Button from '@/components/ui/Button'
|
||
import showToast from '@/components/ui/Toast'
|
||
import useUserStore from '@/app/store/userStore'
|
||
|
||
const PricingCard: React.FC<PricingCardProps> = ({
|
||
plan,
|
||
price,
|
||
features,
|
||
isPopular,
|
||
isActive,
|
||
onPlanChange,
|
||
}) => {
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const { user, setUser } = useUserStore()
|
||
|
||
const handlePlanChange = async () => {
|
||
try {
|
||
setIsLoading(true)
|
||
console.log('Changing plan to:', plan)
|
||
// const response = await changePlan(plan) -- тут обработка данных запроса на смену плана
|
||
|
||
// обновляем данные в сторе
|
||
if (user) {
|
||
setUser({
|
||
...user,
|
||
account_type: plan,
|
||
})
|
||
}
|
||
|
||
// обновляем данные на странице
|
||
if (onPlanChange) {
|
||
onPlanChange()
|
||
}
|
||
|
||
showToast({
|
||
type: 'success',
|
||
duration: 1000,
|
||
message: `Тариф успешно изменен на ${plan.toUpperCase()}!`,
|
||
})
|
||
} catch (error) {
|
||
console.error('Error changing plan:', error)
|
||
showToast({
|
||
type: 'error',
|
||
message: 'Не удалось изменить тариф. Попробуйте позже.',
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className={`flex h-full translate-y-5 animate-[fadeIn_0.8s_ease-out_forwards] flex-col rounded-xl p-6 shadow-lg ${
|
||
isPopular ? 'border-orange border-2' : 'border border-gray-200'
|
||
} transition-all duration-300 hover:translate-y-[-8px]`}
|
||
>
|
||
<div className="flex-1">
|
||
{isPopular && (
|
||
<div className="bg-orange mb-2 inline-block rounded-2xl px-2 py-1 text-xs text-white">
|
||
Популярный выбор
|
||
</div>
|
||
)}
|
||
{isActive && (
|
||
<div className="mb-2 inline-block rounded-2xl bg-blue-500 px-2 py-1 text-xs text-white">
|
||
Активный план
|
||
</div>
|
||
)}
|
||
<h3 className="mb-2 text-xl font-bold capitalize">{plan}</h3>
|
||
<div className="mb-4">
|
||
<span className="text-3xl font-bold">{price}₸</span>
|
||
{price > 0 && <span className="text-gray-600"> / месяц</span>}
|
||
</div>
|
||
<ul className="space-y-2">
|
||
{features.map((feature, index) => (
|
||
<li key={index} className="flex items-start gap-2">
|
||
<svg
|
||
className="mt-1 h-[16px] w-[16px] flex-shrink-0 text-green-500"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M5 13l4 4L19 7"
|
||
/>
|
||
</svg>
|
||
<span className="leading-6">{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="mt-6">
|
||
<Button
|
||
className={`flex w-full items-center justify-center rounded-2xl px-4 py-2 ${
|
||
isPopular
|
||
? 'bg-orange hover:bg-orange/80 text-white'
|
||
: 'bg-gray-100 hover:bg-blue-500 hover:text-white'
|
||
} ${isActive ? 'hidden' : ''} ${isLoading ? 'cursor-not-allowed opacity-50' : ''}`}
|
||
text={isLoading ? 'Обновление...' : 'Выбрать план'}
|
||
onClick={handlePlanChange}
|
||
disabled={isLoading}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PricingCard
|