complite yooMoneyWidged and payments

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

@@ -1,12 +1,14 @@
 'use client'
 
 import { fetchTariffs, fetchTokensBundle } from '@/app/actions/action';
-import { useQuery } 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';
 import { useState } from 'react';
 import ModalWindow from '@/app/components/ModalWindow';
+import YooMoneyWidget from '@/app/components/YooMoneyWidget';
+import { YooMoneyCheckoutWidgetConfig, YooMoneyErrorCallbackResult } from 'types-yoomoneycheckoutwidget';
 
 interface Tariff {
 	id: number;
@@ -49,16 +51,32 @@ export default function PaymentTubBuyTokens() {
 		tokensBundleID: number
 	} | null>(null);
 	const [isProcessing, setIsProcessing] = useState<boolean>(false);
+	const [showWidget, setShowWidget] = useState<boolean>(false);
+	const [yooMoneyConfig, setYooMoneyConfig] = useState<YooMoneyCheckoutWidgetConfig | null>(null);
+	const queryClient = useQueryClient();
 
 	async function createPayment(value: number, tokensBundle: number) {
 		if (isProcessing) return;
 
 		setIsProcessing(true);
+		setErrorMessage(null);
 
 		try {
 			const response = await yooKasaCreatePayment(value, tokensBundle, 'TOKEN');
 			if (response) {
-				window.open(response, '_blank', 'noopener,noreferrer');
+				setShowWidget(true)
+
+				const config: YooMoneyCheckoutWidgetConfig = {
+					confirmation_token: response,
+					error_callback: (result: YooMoneyErrorCallbackResult) => {
+						console.error('error_callback', result.error);
+					},
+					customization: {
+						modal: true
+					}
+				}
+
+				setYooMoneyConfig(config);
 				closeModal(false);
 			} else {
 				setErrorMessage('payment-error');
@@ -143,6 +161,20 @@ export default function PaymentTubBuyTokens() {
 		);
 	}
 
+	const onComplete = () => {
+		setYooMoneyConfig(null);
+		setShowWidget(false);
+		const timer = setTimeout(() => {
+			queryClient.invalidateQueries({ queryKey: ['userData'] });
+		}, 2000);
+
+		return () => clearTimeout(timer);
+	};
+	const onModalClose = () => {
+		setYooMoneyConfig(null);
+		setShowWidget(false);
+	}
+
 	return (
 		<>
 			<ModalWindow state={openWindow} callBack={closeModal}>
@@ -171,7 +203,7 @@ export default function PaymentTubBuyTokens() {
 							<div className="plan-header">
 								<div className="plan-price">{item.price ?? 0} ₽</div>
 								<div className="plan-tokens header">
-									{item.tokens ?? 0} 
+									{item.tokens ?? 0}
 									<br />
 									токенов
 								</div>
@@ -188,6 +220,11 @@ export default function PaymentTubBuyTokens() {
 					))}
 				</div>
 			</div>
+
+			{/* Модальное окно с виджетом */}
+			{showWidget && yooMoneyConfig && (
+				<YooMoneyWidget config={yooMoneyConfig} onComplete={onComplete} onModalClose={onModalClose} />
+			)}
 		</>
 
 	)