payments card and separated /support url

2025-05-22 16:08:40 +03:00
parent 6963fdb17a
commit 29d3af2ea1
16 changed files with 481 additions and 31 deletions
--- a/frontend/app/(urls)/account/payments/PricingCard.tsx
+++ b/frontend/app/(urls)/account/payments/PricingCard.tsx
@@ -0,0 +1,113 @@
+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