mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
refactor(subscription): extract ServerManagementSheet from god page
Move the classic-mode manage-servers sheet (~280 lines of inline JSX, the countries useQuery, its seeding useEffect, and the update mutation) into src/components/subscription/sheets/ServerManagementSheet.tsx. Parent keeps selectedServersToUpdate so the global 'close all modals' callback can still clear it; the sheet owns the rest. The query stays gated on trial state inside the sheet. Subscription.tsx: 2117 → 1828 lines (−289).
This commit is contained in:
c0mrade
328
src/components/subscription/sheets/ServerManagementSheet.tsx
Normal file
328
src/components/subscription/sheets/ServerManagementSheet.tsx
Normal file
@@ -0,0 +1,328 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { subscriptionApi } from '../../../api/subscription';
|
||||||
|
import { getErrorMessage, getFlagEmoji } from '../../../utils/subscriptionHelpers';
|
||||||
|
import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
|
||||||
|
import type { PurchaseOptions, Subscription } from '../../../types';
|
||||||
|
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
// Manage-servers sheet (classic-mode only — caller decides whether to
|
||||||
|
// render). Self-owns the countries query + update mutation; parent
|
||||||
|
// holds the selected-uuid set so the global "close all modals" can
|
||||||
|
// reset it.
|
||||||
|
//
|
||||||
|
// Extracted from Subscription.tsx — ~280 lines off the god page.
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface ServerManagementSheetProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpen: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
subscription: Subscription;
|
||||||
|
subscriptionId: number | undefined;
|
||||||
|
selectedServers: string[];
|
||||||
|
onSelectedServersChange: (uuids: string[] | ((prev: string[]) => string[])) => void;
|
||||||
|
purchaseOptions: PurchaseOptions | undefined;
|
||||||
|
isDark: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ServerManagementSheet({
|
||||||
|
open,
|
||||||
|
onOpen,
|
||||||
|
onClose,
|
||||||
|
subscription,
|
||||||
|
subscriptionId,
|
||||||
|
selectedServers,
|
||||||
|
onSelectedServersChange,
|
||||||
|
purchaseOptions,
|
||||||
|
isDark,
|
||||||
|
}: ServerManagementSheetProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const formatPrice = (kopeks: number) => {
|
||||||
|
const rubles = kopeks / 100;
|
||||||
|
return rubles % 1 === 0 ? `${rubles} ₽` : `${rubles.toFixed(2)} ₽`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data: countriesData, isLoading: countriesLoading } = useQuery({
|
||||||
|
queryKey: ['countries', subscriptionId],
|
||||||
|
queryFn: () => subscriptionApi.getCountries(subscriptionId),
|
||||||
|
enabled: open && !!subscription && !subscription.is_trial,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Seed selected = currently connected once the data loads.
|
||||||
|
useEffect(() => {
|
||||||
|
if (countriesData && open) {
|
||||||
|
const connected = countriesData.countries.filter((c) => c.is_connected).map((c) => c.uuid);
|
||||||
|
onSelectedServersChange(connected);
|
||||||
|
}
|
||||||
|
// Intentionally narrow — the setter is stable and we don't want to
|
||||||
|
// re-seed every time the user toggles a server.
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [countriesData, open]);
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!open) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onOpen}
|
||||||
|
className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-dark-100">
|
||||||
|
{t('subscription.additionalOptions.manageServers')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-sm text-dark-400">
|
||||||
|
{t('subscription.servers', { count: subscription.servers?.length || 0 })}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5 text-dark-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
|
||||||
|
>
|
||||||
|
<div className="mb-4 flex items-center justify-between">
|
||||||
|
<h3 className="font-medium text-dark-100">
|
||||||
|
{t('subscription.additionalOptions.manageServersTitle')}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onClose();
|
||||||
|
onSelectedServersChange([]);
|
||||||
|
}}
|
||||||
|
className="text-sm text-dark-400 hover:text-dark-200"
|
||||||
|
aria-label={t('common.close', 'Close')}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{countriesLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
) : countriesData && countriesData.countries.length > 0 ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div
|
||||||
|
className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
|
||||||
|
>
|
||||||
|
{t('subscription.serverManagement.statusLegend')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{countriesData.discount_percent > 0 && (
|
||||||
|
<div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
|
||||||
|
🎁{' '}
|
||||||
|
{t('subscription.serverManagement.discountBanner', {
|
||||||
|
percent: countriesData.discount_percent,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="max-h-64 space-y-2 overflow-y-auto">
|
||||||
|
{countriesData.countries
|
||||||
|
.filter((country) => country.is_available || country.is_connected)
|
||||||
|
.map((country) => {
|
||||||
|
const isCurrentlyConnected = country.is_connected;
|
||||||
|
const isSelected = selectedServers.includes(country.uuid);
|
||||||
|
const willBeAdded = !isCurrentlyConnected && isSelected;
|
||||||
|
const willBeRemoved = isCurrentlyConnected && !isSelected;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={country.uuid}
|
||||||
|
onClick={() => {
|
||||||
|
if (isSelected) {
|
||||||
|
onSelectedServersChange((prev) => prev.filter((u) => u !== country.uuid));
|
||||||
|
} else {
|
||||||
|
onSelectedServersChange((prev) => [...prev, country.uuid]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!country.is_available && !isCurrentlyConnected}
|
||||||
|
className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
|
||||||
|
isSelected
|
||||||
|
? willBeAdded
|
||||||
|
? 'border-success-500 bg-success-500/10'
|
||||||
|
: 'border-accent-500 bg-accent-500/10'
|
||||||
|
: willBeRemoved
|
||||||
|
? 'border-error-500/50 bg-error-500/5'
|
||||||
|
: isDark
|
||||||
|
? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
|
||||||
|
: 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
|
||||||
|
} ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-lg">
|
||||||
|
{willBeAdded ? '➕' : willBeRemoved ? '➖' : isSelected ? '✅' : '⚪'}
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 font-medium text-dark-100">
|
||||||
|
{country.name}
|
||||||
|
{country.has_discount && !isCurrentlyConnected && (
|
||||||
|
<span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
|
||||||
|
-{country.discount_percent}%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{willBeAdded && (
|
||||||
|
<div className="text-xs text-success-400">
|
||||||
|
+{formatPrice(country.price_kopeks)}{' '}
|
||||||
|
{t('subscription.serverManagement.forDays', {
|
||||||
|
days: countriesData.days_left,
|
||||||
|
})}
|
||||||
|
{country.has_discount && (
|
||||||
|
<span className="ml-1 text-dark-500 line-through">
|
||||||
|
{formatPrice(
|
||||||
|
Math.round(
|
||||||
|
(country.base_price_kopeks * countriesData.days_left) / 30,
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!willBeAdded && !isCurrentlyConnected && (
|
||||||
|
<div className="text-xs text-dark-500">
|
||||||
|
{formatPrice(country.price_per_month_kopeks)}
|
||||||
|
{t('subscription.serverManagement.perMonth')}
|
||||||
|
{country.has_discount && (
|
||||||
|
<span className="ml-1 text-dark-600 line-through">
|
||||||
|
{formatPrice(country.base_price_kopeks)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!country.is_available && !isCurrentlyConnected && (
|
||||||
|
<div className="text-xs text-dark-500">
|
||||||
|
{t('subscription.serverManagement.unavailable')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{country.country_code && (
|
||||||
|
<span className="text-xl">{getFlagEmoji(country.country_code)}</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(() => {
|
||||||
|
const currentConnected = countriesData.countries
|
||||||
|
.filter((c) => c.is_connected)
|
||||||
|
.map((c) => c.uuid);
|
||||||
|
const added = selectedServers.filter((u) => !currentConnected.includes(u));
|
||||||
|
const removed = currentConnected.filter((u) => !selectedServers.includes(u));
|
||||||
|
const hasChanges = added.length > 0 || removed.length > 0;
|
||||||
|
|
||||||
|
const addedServers = countriesData.countries.filter((c) => added.includes(c.uuid));
|
||||||
|
const totalCost = addedServers.reduce((sum, s) => sum + s.price_kopeks, 0);
|
||||||
|
const hasEnoughBalance =
|
||||||
|
!purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
|
||||||
|
const missingAmount = purchaseOptions ? totalCost - purchaseOptions.balance_kopeks : 0;
|
||||||
|
|
||||||
|
return hasChanges ? (
|
||||||
|
<div
|
||||||
|
className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
|
||||||
|
>
|
||||||
|
{added.length > 0 && (
|
||||||
|
<div className="text-sm">
|
||||||
|
<span className="text-success-400">
|
||||||
|
{t('subscription.serverManagement.toAdd')}
|
||||||
|
</span>{' '}
|
||||||
|
<span className="text-dark-300">
|
||||||
|
{addedServers.map((s) => s.name).join(', ')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{removed.length > 0 && (
|
||||||
|
<div className="text-sm">
|
||||||
|
<span className="text-error-400">
|
||||||
|
{t('subscription.serverManagement.toDisconnect')}
|
||||||
|
</span>{' '}
|
||||||
|
<span className="text-dark-300">
|
||||||
|
{countriesData.countries
|
||||||
|
.filter((c) => removed.includes(c.uuid))
|
||||||
|
.map((s) => s.name)
|
||||||
|
.join(', ')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{totalCost > 0 && (
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-dark-400">
|
||||||
|
{t('subscription.serverManagement.paymentProrated')}
|
||||||
|
</div>
|
||||||
|
<div className="text-xl font-bold text-accent-400">
|
||||||
|
{formatPrice(totalCost)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
|
||||||
|
<InsufficientBalancePrompt missingAmountKopeks={missingAmount} compact />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => updateMutation.mutate(selectedServers)}
|
||||||
|
disabled={
|
||||||
|
updateMutation.isPending ||
|
||||||
|
selectedServers.length === 0 ||
|
||||||
|
(totalCost > 0 && !hasEnoughBalance)
|
||||||
|
}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{updateMutation.isPending ? (
|
||||||
|
<span className="flex items-center justify-center gap-2">
|
||||||
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
t('subscription.serverManagement.applyChanges')
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="py-2 text-center text-sm text-dark-500">
|
||||||
|
{t('subscription.serverManagement.selectServersHint')}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
|
||||||
|
{updateMutation.isError && (
|
||||||
|
<div className="text-center text-sm text-error-400">
|
||||||
|
{getErrorMessage(updateMutation.error)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="py-4 text-center text-sm text-dark-400">
|
||||||
|
{t('subscription.serverManagement.noServersAvailable')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -30,6 +30,7 @@ import Twemoji from 'react-twemoji';
|
|||||||
import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
|
import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
|
||||||
import { DeviceReductionSheet } from '../components/subscription/sheets/DeviceReductionSheet';
|
import { DeviceReductionSheet } from '../components/subscription/sheets/DeviceReductionSheet';
|
||||||
import { TrafficTopupSheet } from '../components/subscription/sheets/TrafficTopupSheet';
|
import { TrafficTopupSheet } from '../components/subscription/sheets/TrafficTopupSheet';
|
||||||
|
import { ServerManagementSheet } from '../components/subscription/sheets/ServerManagementSheet';
|
||||||
|
|
||||||
/** Isolated countdown so 1s interval doesn't re-render the whole page */
|
/** Isolated countdown so 1s interval doesn't re-render the whole page */
|
||||||
const CountdownTimer = memo(function CountdownTimer({
|
const CountdownTimer = memo(function CountdownTimer({
|
||||||
@@ -369,32 +370,7 @@ export default function Subscription() {
|
|||||||
// (device reduction info + mutation moved into <DeviceReductionSheet>)
|
// (device reduction info + mutation moved into <DeviceReductionSheet>)
|
||||||
|
|
||||||
// (traffic packages + purchase moved into <TrafficTopupSheet>)
|
// (traffic packages + purchase moved into <TrafficTopupSheet>)
|
||||||
|
// (countries query + update mutation moved into <ServerManagementSheet>)
|
||||||
// Countries/servers query
|
|
||||||
const { data: countriesData, isLoading: countriesLoading } = useQuery({
|
|
||||||
queryKey: ['countries', subscriptionId],
|
|
||||||
queryFn: () => subscriptionApi.getCountries(subscriptionId),
|
|
||||||
enabled: showServerManagement && !!subscription && !subscription.is_trial,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize selected servers when data loads
|
|
||||||
useEffect(() => {
|
|
||||||
if (countriesData && showServerManagement) {
|
|
||||||
const connected = countriesData.countries.filter((c) => c.is_connected).map((c) => c.uuid);
|
|
||||||
setSelectedServersToUpdate(connected);
|
|
||||||
}
|
|
||||||
}, [countriesData, showServerManagement]);
|
|
||||||
|
|
||||||
// Countries update mutation
|
|
||||||
const updateCountriesMutation = useMutation({
|
|
||||||
mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
|
|
||||||
setShowServerManagement(false);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Traffic refresh mutation
|
// Traffic refresh mutation
|
||||||
const refreshTrafficMutation = useMutation({
|
const refreshTrafficMutation = useMutation({
|
||||||
@@ -1519,282 +1495,17 @@ export default function Subscription() {
|
|||||||
{/* Server Management - only in classic mode */}
|
{/* Server Management - only in classic mode */}
|
||||||
{!isTariffsMode && (
|
{!isTariffsMode && (
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
{!showServerManagement ? (
|
<ServerManagementSheet
|
||||||
<button
|
open={showServerManagement}
|
||||||
onClick={() => setShowServerManagement(true)}
|
onOpen={() => setShowServerManagement(true)}
|
||||||
className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
|
onClose={() => setShowServerManagement(false)}
|
||||||
>
|
subscription={subscription}
|
||||||
<div className="flex items-center justify-between">
|
subscriptionId={subscriptionId}
|
||||||
<div>
|
selectedServers={selectedServersToUpdate}
|
||||||
<div className="font-medium text-dark-100">
|
onSelectedServersChange={setSelectedServersToUpdate}
|
||||||
{t('subscription.additionalOptions.manageServers')}
|
purchaseOptions={purchaseOptions}
|
||||||
</div>
|
isDark={isDark}
|
||||||
<div className="mt-1 text-sm text-dark-400">
|
/>
|
||||||
{t('subscription.servers', { count: subscription.servers?.length || 0 })}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
className="h-5 w-5 text-dark-400"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={2}
|
|
||||||
>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
|
|
||||||
>
|
|
||||||
<div className="mb-4 flex items-center justify-between">
|
|
||||||
<h3 className="font-medium text-dark-100">
|
|
||||||
{t('subscription.additionalOptions.manageServersTitle')}
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowServerManagement(false);
|
|
||||||
setSelectedServersToUpdate([]);
|
|
||||||
}}
|
|
||||||
className="text-sm text-dark-400 hover:text-dark-200"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{countriesLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-8">
|
|
||||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
|
|
||||||
</div>
|
|
||||||
) : countriesData && countriesData.countries.length > 0 ? (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div
|
|
||||||
className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
|
|
||||||
>
|
|
||||||
{t('subscription.serverManagement.statusLegend')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{countriesData.discount_percent > 0 && (
|
|
||||||
<div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
|
|
||||||
🎁{' '}
|
|
||||||
{t('subscription.serverManagement.discountBanner', {
|
|
||||||
percent: countriesData.discount_percent,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="max-h-64 space-y-2 overflow-y-auto">
|
|
||||||
{countriesData.countries
|
|
||||||
.filter((country) => country.is_available || country.is_connected)
|
|
||||||
.map((country) => {
|
|
||||||
const isCurrentlyConnected = country.is_connected;
|
|
||||||
const isSelected = selectedServersToUpdate.includes(country.uuid);
|
|
||||||
const willBeAdded = !isCurrentlyConnected && isSelected;
|
|
||||||
const willBeRemoved = isCurrentlyConnected && !isSelected;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={country.uuid}
|
|
||||||
onClick={() => {
|
|
||||||
if (isSelected) {
|
|
||||||
setSelectedServersToUpdate((prev) =>
|
|
||||||
prev.filter((u) => u !== country.uuid),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={!country.is_available && !isCurrentlyConnected}
|
|
||||||
className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
|
|
||||||
isSelected
|
|
||||||
? willBeAdded
|
|
||||||
? 'border-success-500 bg-success-500/10'
|
|
||||||
: 'border-accent-500 bg-accent-500/10'
|
|
||||||
: willBeRemoved
|
|
||||||
? 'border-error-500/50 bg-error-500/5'
|
|
||||||
: isDark
|
|
||||||
? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
|
|
||||||
: 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
|
|
||||||
} ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className="text-lg">
|
|
||||||
{willBeAdded
|
|
||||||
? '➕'
|
|
||||||
: willBeRemoved
|
|
||||||
? '➖'
|
|
||||||
: isSelected
|
|
||||||
? '✅'
|
|
||||||
: '⚪'}
|
|
||||||
</span>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 font-medium text-dark-100">
|
|
||||||
{country.name}
|
|
||||||
{country.has_discount && !isCurrentlyConnected && (
|
|
||||||
<span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
|
|
||||||
-{country.discount_percent}%
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{willBeAdded && (
|
|
||||||
<div className="text-xs text-success-400">
|
|
||||||
+{formatPrice(country.price_kopeks)}{' '}
|
|
||||||
{t('subscription.serverManagement.forDays', {
|
|
||||||
days: countriesData.days_left,
|
|
||||||
})}
|
|
||||||
{country.has_discount && (
|
|
||||||
<span className="ml-1 text-dark-500 line-through">
|
|
||||||
{formatPrice(
|
|
||||||
Math.round(
|
|
||||||
(country.base_price_kopeks *
|
|
||||||
countriesData.days_left) /
|
|
||||||
30,
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!willBeAdded && !isCurrentlyConnected && (
|
|
||||||
<div className="text-xs text-dark-500">
|
|
||||||
{formatPrice(country.price_per_month_kopeks)}
|
|
||||||
{t('subscription.serverManagement.perMonth')}
|
|
||||||
{country.has_discount && (
|
|
||||||
<span className="ml-1 text-dark-600 line-through">
|
|
||||||
{formatPrice(country.base_price_kopeks)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!country.is_available && !isCurrentlyConnected && (
|
|
||||||
<div className="text-xs text-dark-500">
|
|
||||||
{t('subscription.serverManagement.unavailable')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{country.country_code && (
|
|
||||||
<span className="text-xl">
|
|
||||||
{getFlagEmoji(country.country_code)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(() => {
|
|
||||||
const currentConnected = countriesData.countries
|
|
||||||
.filter((c) => c.is_connected)
|
|
||||||
.map((c) => c.uuid);
|
|
||||||
const added = selectedServersToUpdate.filter(
|
|
||||||
(u) => !currentConnected.includes(u),
|
|
||||||
);
|
|
||||||
const removed = currentConnected.filter(
|
|
||||||
(u) => !selectedServersToUpdate.includes(u),
|
|
||||||
);
|
|
||||||
const hasChanges = added.length > 0 || removed.length > 0;
|
|
||||||
|
|
||||||
// Calculate cost for added servers
|
|
||||||
const addedServers = countriesData.countries.filter((c) =>
|
|
||||||
added.includes(c.uuid),
|
|
||||||
);
|
|
||||||
const totalCost = addedServers.reduce(
|
|
||||||
(sum, s) => sum + s.price_kopeks,
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
const hasEnoughBalance =
|
|
||||||
!purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
|
|
||||||
const missingAmount = purchaseOptions
|
|
||||||
? totalCost - purchaseOptions.balance_kopeks
|
|
||||||
: 0;
|
|
||||||
|
|
||||||
return hasChanges ? (
|
|
||||||
<div
|
|
||||||
className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
|
|
||||||
>
|
|
||||||
{added.length > 0 && (
|
|
||||||
<div className="text-sm">
|
|
||||||
<span className="text-success-400">
|
|
||||||
{t('subscription.serverManagement.toAdd')}
|
|
||||||
</span>{' '}
|
|
||||||
<span className="text-dark-300">
|
|
||||||
{addedServers.map((s) => s.name).join(', ')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{removed.length > 0 && (
|
|
||||||
<div className="text-sm">
|
|
||||||
<span className="text-error-400">
|
|
||||||
{t('subscription.serverManagement.toDisconnect')}
|
|
||||||
</span>{' '}
|
|
||||||
<span className="text-dark-300">
|
|
||||||
{countriesData.countries
|
|
||||||
.filter((c) => removed.includes(c.uuid))
|
|
||||||
.map((s) => s.name)
|
|
||||||
.join(', ')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{totalCost > 0 && (
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-sm text-dark-400">
|
|
||||||
{t('subscription.serverManagement.paymentProrated')}
|
|
||||||
</div>
|
|
||||||
<div className="text-xl font-bold text-accent-400">
|
|
||||||
{formatPrice(totalCost)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
|
|
||||||
<InsufficientBalancePrompt
|
|
||||||
missingAmountKopeks={missingAmount}
|
|
||||||
compact
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
updateCountriesMutation.mutate(selectedServersToUpdate)
|
|
||||||
}
|
|
||||||
disabled={
|
|
||||||
updateCountriesMutation.isPending ||
|
|
||||||
selectedServersToUpdate.length === 0 ||
|
|
||||||
(totalCost > 0 && !hasEnoughBalance)
|
|
||||||
}
|
|
||||||
className="btn-primary w-full py-3"
|
|
||||||
>
|
|
||||||
{updateCountriesMutation.isPending ? (
|
|
||||||
<span className="flex items-center justify-center gap-2">
|
|
||||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
t('subscription.serverManagement.applyChanges')
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="py-2 text-center text-sm text-dark-500">
|
|
||||||
{t('subscription.serverManagement.selectServersHint')}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
|
|
||||||
{updateCountriesMutation.isError && (
|
|
||||||
<div className="text-center text-sm text-error-400">
|
|
||||||
{getErrorMessage(updateCountriesMutation.error)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="py-4 text-center text-sm text-dark-400">
|
|
||||||
{t('subscription.serverManagement.noServersAvailable')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user