add tokens bundle payments

src/app/actions/action.ts

@@ -106,6 +106,41 @@ export async function fetchTariffs() {
 	}
 }
 
+export async function fetchTokensBundle() {
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 30001,
+				message_body: {
+					action: 'tariffs_by_type',
+					type: 'token'
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+			if (parsed?.message_code === 0) {
+				return parsed.message_body?.token_tariffs;
+			} else {
+				return null
+			}
+
+		} else {
+			return null
+		}
+	} catch (error) {
+		return null
+	}
+}
+
 export async function getBuildData() {
 
 	try {

src/app/actions/yooKassa.ts

@@ -6,17 +6,7 @@ import { API_BASE_URL } from '@/app/actions/definitions';
 
 const checkout = new YooCheckout({ shopId: '1276731', secretKey: 'test_0Yns_0NHV5GJf6ypJ5HC4NSfnLO8SJkw-1PwrVWsDl4' });
 
-const idempotenceKey = '02347fc4-a1f0-49db-807e-f0d67c2ed5a5';
-
 export async function makePaymentOperation(email: string, tariffId: number, operationUuid: string) {
-	console.log('makePaymentOperation');
-	console.log({
-		email,
-		tariffId: tariffId,
-		operationType: 'TARIFF',
-		operationUuid,
-	});
-
 	const formData = new FormData();
 
 	formData.append('email', email);
@@ -31,12 +21,14 @@ export async function makePaymentOperation(email: string, tariffId: number, oper
 		});
 
 		if (response.ok) {
-			const parsed = await response.json()
+			const parsed = await response.json();
-			console.log(parsed);
+			if (parsed.paymentUuid) {
 				return true
-
 			} else {
-			return null
+				throw 'error'
+			}
+		} else {
+			throw 'error'
 		}
 	} catch (error) {
 		return null
@@ -44,11 +36,11 @@ export async function makePaymentOperation(email: string, tariffId: number, oper
 }
 
 export async function yooKasaCreatePayment(amount: number, tariff: number) {
-	console.log(amount);
-	console.log(tariff);
-	/* return true; */
 
 	const userEmail = await getSessionData('email');
+	const timestamp = Date.now();
+	const random = Math.random().toString(36).substring(2, 10);
+	const idempotenceKey = `${userEmail}-${timestamp}-${amount}-${tariff}-${random}`;
 
 	if (!userEmail) {
 		return null;
@@ -73,17 +65,13 @@ export async function yooKasaCreatePayment(amount: number, tariff: number) {
 	};
 
 	try {
-		const payment = await checkout.createPayment(createPayload, Date.now().toLocaleString());
+		const payment = await checkout.createPayment(createPayload, idempotenceKey);
 		const response = await makePaymentOperation(userEmail, tariff, payment.id);
-		console.log('yooKasaCreatePayment')
+		if (response && payment) {
-		console.log(response);
-		if (response) {
 			return payment?.confirmation.confirmation_url;
 		} else {
 			return null
 		}
-
-		/* return payment; */
 	} catch (error) {
 		return null
 	}

src/app/components/UploadSectionFile.tsx

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

src/app/styles/global-styles.scss

@@ -635,3 +635,16 @@
 .yaPreloadingSuggestBlockContainer {
 	height: 52px !important;
 }
+
+.error-message {
+	margin-top: 1rem;
+	padding: 0.75rem;
+	background-color: #fef2f2;
+	border: 1px solid #fecaca;
+	border-radius: 0.5rem;
+
+	.error-message-text {
+		color: #dc2626;
+		font-weight: 500;
+	}
+}

src/app/styles/payment-container.scss

@@ -260,6 +260,11 @@
 				font-weight: 600;
 				margin: 12px auto;
 				display: inline-block;
+
+				&.header {
+					font-size: 2rem;
+					font-weight: 800;
+				}
 			}
 
 			.plan-features {

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="tab-content">
+			<div className="modal-window-confirm-payment">
-			PaymentTubBuyTokens
+				<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 (
+		<>
+			<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() {
+	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">
+					<div className="error-message">
-						<p className="text-red-600 font-medium">{error}</p>
+						<p className="error-message-text">{error}</p>
 					</div>
 				)}
 

src/i18n/messages/en.json

@@ -227,7 +227,9 @@
 		"monitoring": "Monitoring",
 		"efficiency": "Efficiency",
 		"convert-to": "Convert to",
-		"do-not-convert": "Do not convert"
+		"do-not-convert": "Do not convert",
+		"payment-error": "Payment error",
+		"buy": "Buy"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -227,7 +227,9 @@
 		"monitoring": "Мониторинг",
 		"efficiency": "Эффективность",
 		"convert-to": "Конвертировать в",
-		"do-not-convert": "Не конвертировать"
+		"do-not-convert": "Не конвертировать",
+		"payment-error": "Ошибка оплаты",
+		"buy": "Купить"
 	},
 	"Login-register-form": {
 		"and": "и",