update tariff plan for annual

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { fetchTariffs, fetchTokensBundle } from '@/app/actions/action';
+import { fetchTokensBundle } from '@/app/actions/action';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { useTranslations } from 'next-intl';

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -23,15 +23,16 @@ interface Tariff {
 
 export default function PaymentTabTariffs() {
 	const t = useTranslations('Global');
+	const [billingPer, setBillingPer] = useState<'MONTHLY' | 'YEAR'>('MONTHLY');
 	const {
 		data: tariffData,
 		isLoading,
 		isError,
 		error
 	} = useQuery({
-		queryKey: ['tariffData'],
-		queryFn: () => {
-			return fetchTariffs();
+		queryKey: ['tariffData', billingPer],
+		queryFn: () => {;
+			return fetchTariffs(billingPer);
 		},
 		select: (data: Tariff[] | null): Tariff[] => {
 			if (data) {
@@ -53,7 +54,6 @@ export default function PaymentTabTariffs() {
 	const [isProcessing, setIsProcessing] = useState<boolean>(false);
 	const [showWidget, setShowWidget] = useState<boolean>(false);
 	const [yooMoneyConfig, setYooMoneyConfig] = useState<YooMoneyCheckoutWidgetConfig | null>(null);
-	const [billingPer, setBillingPer] = useState<'per-month' | 'per-year'>('per-month');
 	const queryClient = useQueryClient();
 
 	async function createPayment(value: number, tariff: number) {
@@ -184,7 +184,7 @@ export default function PaymentTabTariffs() {
 		setShowWidget(false);
 	}
 
-	function changeBilling(type: 'per-month' | 'per-year') {
+	function changeBilling(type: 'MONTHLY' | 'YEAR') {
 		setBillingPer(type)
 	}
 
@@ -198,17 +198,17 @@ export default function PaymentTabTariffs() {
 				<div className="billing-toggle">
 					<div>
 						<button
-							className={`billing-btn ${billingPer === 'per-month' ? 'active' : ''} `}
+							className={`billing-btn ${billingPer === 'MONTHLY' ? 'active' : ''} `}
 							onClick={() => {
-								changeBilling('per-month');
+								changeBilling('MONTHLY');
 							}}
 						>
 							{t('per-month')}
 						</button>
 						<button
-							className={`billing-btn ${billingPer === 'per-year' ? 'active' : ''} `}
+							className={`billing-btn ${billingPer === 'YEAR' ? 'active' : ''} `}
 							onClick={() => {
-								changeBilling('per-year');
+								changeBilling('YEAR');
 							}}
 						>
 							{t('annual')}
@@ -216,7 +216,64 @@ export default function PaymentTabTariffs() {
 						</button>
 					</div>
 				</div>
-				{billingPer === 'per-month' && (
+				{billingPer === 'MONTHLY' && (
+					<div className="subscription-grid">
+						{tariffData?.map((item: {
+							id: number;
+							name: string;
+							price: number;
+							tokens: number;
+							maxFilesCount: number;
+							diskSize: number;
+						}) => {
+							return (
+								<div className="plan-card animate-card" key={item.id}>
+									<div className="plan-header">
+										<h3 className="plan-name">
+											{t.has(item.name) ? t(item.name) : item.name}
+										</h3>
+										<div className="plan-price">{item.price ?? 0} ₽</div>
+										<div className="plan-period">{t('per-month')}</div>
+										<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
+									</div>
+									<ul className="plan-features">
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											{item.maxFilesCount} файлов в месяц
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											Базовые модули защиты
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											Поддержка 24/7
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon not">✗</span>
+											API доступ
+										</li>
+									</ul>
+									<div className="flex justify-center">
+										<button
+											className="btn btn-primary"
+											onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
+										>
+											Выбрать план
+										</button>
+									</div>
+								</div>
+							)
+						}
+						)}
+					</div>
+				)}
+
+				{billingPer === 'YEAR' && (
 					<div className="subscription-grid">
 						{tariffData?.map((item: {
 							id: number;