From e8f4f9939f1e23ed521f7de1780e2caf7080d1d5 Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 11 Mar 2026 12:21:56 +0700 Subject: [PATCH] redisign tokens paytment --- src/app/styles/payment-container.scss | 91 +++++++++++++++++++ src/app/ui/payment/payment-tab-buy-tokens.tsx | 88 +++++++++++------- src/i18n/messages/en.json | 4 +- src/i18n/messages/ru.json | 4 +- 4 files changed, 151 insertions(+), 36 deletions(-) diff --git a/src/app/styles/payment-container.scss b/src/app/styles/payment-container.scss index 2aba30e..049a309 100644 --- a/src/app/styles/payment-container.scss +++ b/src/app/styles/payment-container.scss @@ -298,6 +298,97 @@ } } } + + + .token-package { + background: #f8fafc; + border: 2px solid #e2e8f0; + border-radius: 16px; + padding: 20px; + text-align: center; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + + &:hover { + transform: translateY(-4px) scale(1.02); + border-color: #6366f1; + box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2); + + &::before { + left: 100%; + } + } + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); + transition: left 0.5s ease; + } + + &.selected { + border-color: #10b981; + background: linear-gradient(135deg, #f0fdf4, #dcfce7); + transform: scale(1.05); + } + + .token-package-amount { + font-size: 1.8rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 6px; + } + + .token-package-text { + font-size: 0.85rem; + color: #64748b; + margin-bottom: 8px; + } + + .token-package-price { + font-size: 1.3rem; + font-weight: 600; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 8px; + } + + .token-package-detail { + color: #64748b; + font-size: 0.8rem; + margin-top: 6px; + } + } + + .plan-button { + width: 100%; + max-width: 280px; + padding: 12px 18px; + border: none; + border-radius: 12px; + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + display: block; + margin: 0 auto; + } + + .selected-token-info { + margin-top: 8px; + color: #64748b; + font-size: 0.85rem; + text-align: center; + } } .secure-payments-wrapper { diff --git a/src/app/ui/payment/payment-tab-buy-tokens.tsx b/src/app/ui/payment/payment-tab-buy-tokens.tsx index f5970ca..bebef6c 100644 --- a/src/app/ui/payment/payment-tab-buy-tokens.tsx +++ b/src/app/ui/payment/payment-tab-buy-tokens.tsx @@ -1,7 +1,7 @@ 'use client' import { fetchTariffs, fetchTokensBundle } from '@/app/actions/action'; -import {useQuery, useQueryClient} from '@tanstack/react-query'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import { convertBytes } from '@/app/lib/convertBytes'; import { useTranslations } from 'next-intl'; import { yooKasaCreatePayment } from '@/app/actions/yooKassa'; @@ -54,6 +54,7 @@ export default function PaymentTubBuyTokens() { const [showWidget, setShowWidget] = useState(false); const [yooMoneyConfig, setYooMoneyConfig] = useState(null); const queryClient = useQueryClient(); + const [selectedTokenPackage, setSelectedTokenPackage] = useState(null); async function createPayment(value: number, tokensBundle: number) { if (isProcessing) return; @@ -175,50 +176,69 @@ export default function PaymentTubBuyTokens() { setShowWidget(false); } + function selectHandler(item: Tariff) { + console.log(item); + setSelectedTokenPackage(item); + console.log(selectedTokenPackage); + } + return ( <> -
-
-
- - -
-
+
- {tokensPaymentData?.map((item: { - id: number; - name: string; - price: number; - tokens: number; - maxFilesCount: number; - diskSize: number; - }) => ( -
-
-
{item.price ?? 0} ₽
-
- {item.tokens ?? 0} -
- токенов -
+ {tokensPaymentData?.map((item: Tariff) => ( +
{ + selectHandler(item); + })} + > +
+ {item.tokens ?? 0}
-
- +
+ {t('tokens')} +
+
{item.price ?? 0} ₽
+
+ ~{Math.ceil((item.price / item.tokens) * 10) / 10 }₽ за токен
))}
+ +
+ + {selectedTokenPackage && ( +
+ {t('package-selected-tokens-price', { + tokens: selectedTokenPackage.tokens, + price: selectedTokenPackage.price + })} +
+ )} +
+
{/* Модальное окно с виджетом */} diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 8f5aacf..089b2a6 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -294,7 +294,9 @@ "there-are-not-enough-funds-to-protect-file": "There are not enough funds to protect file. {count} tokens required", "duplicate-files": "Duplicate files", "monitoring-is-not-supported": "Monitoring is not supported", - "frequently-asked-questions": "Frequently Asked Questions" + "frequently-asked-questions": "Frequently Asked Questions", + "select-a-token-package": "Select a token package", + "package-selected-tokens-price": "Package selected: {tokens} tokens for {price}₽" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index b0e1e46..da6d750 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -294,7 +294,9 @@ "there-are-not-enough-funds-to-protect-file": "Для защиты файла недостаточно средств. Необходимо {count} токен(ов/а)", "duplicate-files": "Дубликаты файлов", "monitoring-is-not-supported": "Мониторинг не поддерживается", - "frequently-asked-questions": "Часто задаваемые вопросы" + "frequently-asked-questions": "Часто задаваемые вопросы", + "select-a-token-package": "Выберите пакет токенов", + "package-selected-tokens-price": "Выбран пакет: {tokens} токенов за {price}₽" }, "Login-register-form": { "and": "и",