frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tokens bundle payments

Browse Source
This commit is contained in:
smanylov
2026-02-19 17:23:52 +07:00
parent 13128d282b
commit 048e1269ad
10 changed files with 316 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/actions/action.ts
+35
View File
@@ -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
+12 -24
View File
@@ -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()
console.log(parsed);
return true
const parsed = await response.json();
if (parsed.paymentUuid) {
return true
} else {
throw 'error'
}
} else {
return null
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')
console.log(response);
if (response) {
if (response && payment) {
return payment?.confirmation.confirmation_url;
} else {
return null
}
/* return payment; */
} catch (error) {
return null
}
src/app/components/UploadSectionFile.tsx
+2 -2
View File
@@ -464,8 +464,8 @@ export default function UploadSectionFile({
{
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>
)
}
src/app/styles/global-styles.scss
+13
View File
@@ -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
+5
View File
@@ -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
+190 -3
View File
@@ -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
+51 -14
View File
@@ -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
+2 -2
View File
@@ -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>
)}
src/i18n/messages/en.json
+3 -1
View File
@@ -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
+3 -1
View File
@@ -227,7 +227,9 @@
"monitoring": "Мониторинг",
"efficiency": "Эффективность",
"convert-to": "Конвертировать в",
"do-not-convert": "Не конвертировать"
"do-not-convert": "Не конвертировать",
"payment-error": "Ошибка оплаты",
"buy": "Купить"
},
"Login-register-form": {
"and": "и",