redisign tokens paytment

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { fetchTariffs, fetchTokensBundle } from '@/app/actions/action';
-import {useQuery, useQueryClient} 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';
@@ -54,6 +54,7 @@ export default function PaymentTubBuyTokens() {
 	const [showWidget, setShowWidget] = useState<boolean>(false);
 	const [yooMoneyConfig, setYooMoneyConfig] = useState<YooMoneyCheckoutWidgetConfig | null>(null);
 	const queryClient = useQueryClient();
+	const [selectedTokenPackage, setSelectedTokenPackage] = useState<Tariff | null>(null);
 
 	async function createPayment(value: number, tokensBundle: number) {
 		if (isProcessing) return;
@@ -175,50 +176,69 @@ export default function PaymentTubBuyTokens() {
 		setShowWidget(false);
 	}
 
+	function selectHandler(item: Tariff) {
+		console.log(item);
+		setSelectedTokenPackage(item);
+		console.log(selectedTokenPackage);
+	}
+
 	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="tab-content block-wrapper">
 				<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>
+					{tokensPaymentData?.map((item: Tariff) => (
+						<div
+							className={`token-package ${selectedTokenPackage?.id === item.id ? 'selected' : ''}`}
+							key={item.id}
+							onClick={(() => {
+								selectHandler(item);
+							})}
+						>
+							<div
+								className="token-package-amount"
+							>
+								{item.tokens ?? 0}
 							</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
+								className="token-package-text"
+							>
+								{t('tokens')}
+							</div>
+							<div className="token-package-price">{item.price ?? 0} ₽</div>
+							<div className="token-package-detail">
+								~{Math.ceil((item.price / item.tokens) * 10) / 10 }₽ за токен
 							</div>
 						</div>
 					))}
 				</div>
+
+				<div>
+					<button
+						className="plan-button btn-primary"
+						onClick={() => {
+							if (selectedTokenPackage) {
+								openPaymentWindow(selectedTokenPackage.price, selectedTokenPackage.name, selectedTokenPackage.tokens, selectedTokenPackage.id)
+							}
+						}}
+						disabled={selectedTokenPackage ? false : true}
+					>
+						{selectedTokenPackage ? `Купить за ${selectedTokenPackage.price}₽` : t('select-a-token-package')}
+					</button>
+					{selectedTokenPackage && (
+						<div
+							className="selected-token-info"
+						>
+							{t('package-selected-tokens-price', {
+								tokens: selectedTokenPackage.tokens,
+								price: selectedTokenPackage.price
+							})}
+						</div>
+					)}
+				</div>
+
 			</div>
 
 			{/* Модальное окно с виджетом */}