add tokens bundle payments

2026-02-19 17:23:52 +07:00
parent 13128d282b
commit 048e1269ad
10 changed files with 316 additions and 47 deletions
@@ -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>
+		</>
+
 	)
 }