add tokens bundle payments

src/app/ui/payment/payment-tab-buy-tokens.tsx

@@ -1,7 +1,194 @@
+'use client'
+
+import { fetchTariffs, fetchTokensBundle } from '@/app/actions/action';
+import { useQuery } from '@tanstack/react-query';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { useTranslations } from 'next-intl';
+import { yooKasaCreatePayment } from '@/app/actions/yooKassa';
+import { useState } from 'react';
+import ModalWindow from '@/app/components/ModalWindow';
+
+interface Tariff {
+	id: number;
+	type: string;
+	name: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers: number;
+}
+
 export default function PaymentTubBuyTokens() {
+	const t = useTranslations('Global');
+	const {
+		data: tokensPaymentData,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['tokensPaymentData'],
+		queryFn: () => {
+			return fetchTokensBundle();
+		},
+		select: (data: Tariff[] | null): Tariff[] => {
+			if (data) {
+				return data.sort((a, b) => a.price - b.price);
+			} else {
+				return []
+			}
+		}
+	});
+
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const [selectedTokensBundle, setselectedTokensBundle] = useState<{
+		value: number;
+		tokensBundle: string;
+		tokens: number;
+		tokensBundleID: number
+	} | null>(null);
+	const [isProcessing, setIsProcessing] = useState<boolean>(false);
+
+	async function createPayment(value: number, tokensBundle: number) {
+		if (isProcessing) return;
+
+		setIsProcessing(true);
+
+		try {
+			const response = await yooKasaCreatePayment(value, tokensBundle);
+			if (response) {
+				window.open(response, '_blank', 'noopener,noreferrer');
+				closeModal(false);
+			} else {
+				setErrorMessage('payment-error');
+			}
+		} catch (error) {
+			setErrorMessage('payment-error');
+		} finally {
+			setIsProcessing(false);
+		}
+	}
+
+	function openPaymentWindow(value: number, tokensBundle: string, tokens: number, tokensBundleID: number) {
+		setselectedTokensBundle({ value, tokensBundle, tokens, tokensBundleID });
+		setIsProcessing(false);
+		setOpenWindow(true);
+	}
+
+	function closeModal(isWindowOpen: boolean) {
+		if (!isWindowOpen) {
+			setOpenWindow(false);
+			setselectedTokensBundle(null);
+			setIsProcessing(false);
+			setErrorMessage(null);
+		}
+
+	}
+
+	function PaymentConfirmationModal() {
+		if (!selectedTokensBundle) return null;
+
+		const handleConfirm = () => {
+			createPayment(selectedTokensBundle.value, selectedTokensBundle.tokensBundleID);
+		};
+
+		const handleCancel = () => {
+			closeModal(false);
+		};
+
+		return (
+			<div className="modal-window-confirm-payment">
+				<h3 className="modal-window-confirm-payment-title">
+					Подтверждение оплаты
+				</h3>
+				<h4 className="modal-window-confirm-payment-tariff">
+					Купить: {selectedTokensBundle.tokens} токенов
+				</h4>
+				<div className="modal-window-confirm-payment-price">
+					<div>{selectedTokensBundle.value}₽</div>
+					<div></div>
+				</div>
+
+				<div className="flex justify-center gap-4">
+					<button
+						className="btn-primary btn-cancel"
+						onClick={handleCancel}
+						disabled={isProcessing}
+					>
+						{t('no')}
+					</button>
+					<button
+						className={`btn-primary btn-confirm ${isProcessing ? 'btn-loading' : ''}`}
+						onClick={handleConfirm}
+						disabled={isProcessing}
+					>
+						{isProcessing ? 'Обработка...' : t('yes')}
+					</button>
+				</div>
+				{
+					errorMessage && (
+						<div
+							className="error-message"
+						>
+							<p
+								className="error-message-text"
+							>
+								{t(errorMessage)}
+							</p>
+						</div>
+					)
+				}
+			</div>
+		);
+	}
+
 	return (
-		<div className="tab-content">
-			PaymentTubBuyTokens
-		</div>
+		<>
+			<ModalWindow state={openWindow} callBack={closeModal}>
+				<PaymentConfirmationModal />
+			</ModalWindow>
+			<div className="tab-content">
+				<div className="billing-toggle" style={{ display: 'none' }}>
+					<div>
+						<button className="billing-btn active">💳 Помесячно</button>
+						<button className="billing-btn">
+							🔥 Годовая
+							<span>ВЫГОДНО</span>
+						</button>
+					</div>
+				</div>
+				<div className="subscription-grid">
+					{tokensPaymentData?.map((item: {
+						id: number;
+						name: string;
+						price: number;
+						tokens: number;
+						maxFilesCount: number;
+						diskSize: number;
+					}) => (
+						<div className="plan-card animate-card" key={item.id}>
+							<div className="plan-header">
+								<div className="plan-price">{item.price ?? 0} ₽</div>
+								<div className="plan-tokens header">
+									{item.tokens ?? 0} 
+									<br />
+									токенов
+								</div>
+							</div>
+							<div className="flex justify-center">
+								<button
+									className="btn btn-primary"
+									onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
+								>
+									{t('buy')}
+								</button>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</>
+
 	)
 }

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -5,13 +5,24 @@ import { useQuery } from '@tanstack/react-query';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { useTranslations } from 'next-intl';
 import { yooKasaCreatePayment } from '@/app/actions/yooKassa';
-import { useState, ReactNode } from 'react';
+import { useState, ReactNode, useEffect } from 'react';
 import ModalWindow from '@/app/components/ModalWindow';
 
+interface Tariff {
+	id: number;
+	type: string;
+	name: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers: number;
+}
+
 export default function PaymentTabTariffs() {
 	const t = useTranslations('Global');
 	const {
-		data: userData,
+		data: tariffData,
 		isLoading,
 		isError,
 		error
@@ -19,10 +30,18 @@ export default function PaymentTabTariffs() {
 		queryKey: ['tariffData'],
 		queryFn: () => {
 			return fetchTariffs();
+		},
+		select: (data: Tariff[] | null): Tariff[] => {
+			if (data) {
+				return data.sort((a, b) => a.price - b.price);
+			} else {
+				return []
+			}
 		}
 	});
 
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
 	const [selectedTariff, setSelectedTariff] = useState<{
 		value: number;
 		tariff: string;
@@ -38,12 +57,14 @@ export default function PaymentTabTariffs() {
 
 		try {
 			const response = await yooKasaCreatePayment(value, tariff);
-			console.log(response);
 			if (response) {
 				window.open(response, '_blank', 'noopener,noreferrer');
+				closeModal(false);
+			} else {
+				setErrorMessage('payment-error');
 			}
 		} catch (error) {
-			console.error('Payment error:', error);
+			setErrorMessage('payment-error');
 		} finally {
 			setIsProcessing(false);
 		}
@@ -55,10 +76,14 @@ export default function PaymentTabTariffs() {
 		setOpenWindow(true);
 	}
 
-	function closeModal() {
-		setOpenWindow(false);
-		setSelectedTariff(null);
-		setIsProcessing(false);
+	function closeModal(isWindowOpen: boolean) {
+		if (!isWindowOpen) {
+			setOpenWindow(false);
+			setSelectedTariff(null);
+			setIsProcessing(false);
+			setErrorMessage(null);
+		}
+
 	}
 
 	function PaymentConfirmationModal() {
@@ -69,7 +94,7 @@ export default function PaymentTabTariffs() {
 		};
 
 		const handleCancel = () => {
-			closeModal();
+			closeModal(false);
 		};
 
 		return (
@@ -107,13 +132,26 @@ export default function PaymentTabTariffs() {
 						{isProcessing ? 'Обработка...' : t('yes')}
 					</button>
 				</div>
+				{
+					errorMessage && (
+						<div
+							className="error-message"
+						>
+							<p
+								className="error-message-text"
+							>
+								{t(errorMessage)}
+							</p>
+						</div>
+					)
+				}
 			</div>
 		);
 	}
 
 	return (
 		<>
-			<ModalWindow state={openWindow} callBack={setOpenWindow}>
+			<ModalWindow state={openWindow} callBack={closeModal}>
 				<PaymentConfirmationModal />
 			</ModalWindow>
 
@@ -128,7 +166,7 @@ export default function PaymentTabTariffs() {
 					</div>
 				</div>
 				<div className="subscription-grid">
-					{userData?.map((item: {
+					{tariffData?.map((item: {
 						id: number;
 						name: string;
 						price: number;
@@ -138,13 +176,12 @@ export default function PaymentTabTariffs() {
 					}) => (
 						<div className="plan-card animate-card" key={item.id}>
 							<div className="plan-header">
-								<div className="plan-icon">🚀</div>
 								<h3 className="plan-name">
 									{t.has(item.name) ? t(item.name) : item.name}
 								</h3>
-								<div className="plan-price">{item.price}</div>
+								<div className="plan-price">{item.price ?? 0} ₽</div>
 								<div className="plan-period">в месяц</div>
-								<div className="plan-tokens">{item.tokens} токенов включено</div>
+								<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
 							</div>
 							<ul className="plan-features">
 								<li className="plan-feature">

src/app/ui/search/section-search-file.tsx

@@ -340,8 +340,8 @@ export default function SectionSearchFile({ allowedExtensions, maxFileSize }: Se
 				</button>
 
 				{error && (
-					<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
-						<p className="text-red-600 font-medium">{error}</p>
+					<div className="error-message">
+						<p className="error-message-text">{error}</p>
 					</div>
 				)}