no-copy-frontend/src/app/ui/payment/payment-tab-buy-tokens.tsx

'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 (
		<>
			<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>
		</>

	)
}