etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #135 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-02-04 01:08:21 +03:00
committed by GitHub
parent 01d5c3b248 026cb47694
commit ac1b9db462
3 changed files with 114 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/locales/en.json
View File

@@ -320,7 +320,7 @@
"title": "Choose a plan to continue", "title": "Choose a plan to continue",
"description": "Your trial period is ending soon. Select a plan to continue using VPN without restrictions." "description": "Your trial period is ending soon. Select a plan to continue using VPN without restrictions."
}, },
"expired": { "expiredBanner": {
"title": "Subscription expired", "title": "Subscription expired",
"selectTariff": "Your subscription has expired. Choose a plan below to restore access to VPN." "selectTariff": "Your subscription has expired. Choose a plan below to restore access to VPN."
}, },

2
src/locales/ru.json
View File

@@ -342,7 +342,7 @@
"title": "Выберите тариф для продолжения", "title": "Выберите тариф для продолжения",
"description": "Ваш пробный период скоро закончится. Выберите подходящий тариф, чтобы продолжить пользоваться VPN без ограничений." "description": "Ваш пробный период скоро закончится. Выберите подходящий тариф, чтобы продолжить пользоваться VPN без ограничений."
}, },
"expired": { "expiredBanner": {
"title": "Подписка истекла", "title": "Подписка истекла",
"selectTariff": "Ваша подписка истекла. Выберите тариф ниже, чтобы возобновить доступ к VPN." "selectTariff": "Ваша подписка истекла. Выберите тариф ниже, чтобы возобновить доступ к VPN."
}, },

206
src/pages/Subscription.tsx
View File

@@ -181,7 +181,10 @@ export default function Subscription() {
if (selectedPeriod?.traffic.selectable && (selectedPeriod.traffic.options?.length ?? 0) > 0) { if (selectedPeriod?.traffic.selectable && (selectedPeriod.traffic.options?.length ?? 0) > 0) {
result.push('traffic'); result.push('traffic');
} }
if (selectedPeriod && (selectedPeriod.servers.options?.length ?? 0) > 0) { if (
selectedPeriod &&
(selectedPeriod.servers.options?.filter((s) => s.is_available).length ?? 0) > 0
) {
result.push('servers'); result.push('servers');
} }
if (selectedPeriod && selectedPeriod.devices.max > selectedPeriod.devices.min) { if (selectedPeriod && selectedPeriod.devices.max > selectedPeriod.devices.min) {
@@ -203,7 +206,12 @@ export default function Subscription() {
classicOptions.periods[0]; classicOptions.periods[0];
setSelectedPeriod(defaultPeriod); setSelectedPeriod(defaultPeriod);
setSelectedTraffic(classicOptions.selection.traffic_value); setSelectedTraffic(classicOptions.selection.traffic_value);
setSelectedServers(classicOptions.selection.servers); const availableServerUuids = new Set(
defaultPeriod.servers.options?.filter((s) => s.is_available).map((s) => s.uuid) ?? [],
);
setSelectedServers(
classicOptions.selection.servers.filter((uuid) => availableServerUuids.has(uuid)),
);
setSelectedDevices(classicOptions.selection.devices); setSelectedDevices(classicOptions.selection.devices);
} }
}, [classicOptions, selectedPeriod]); }, [classicOptions, selectedPeriod]);
@@ -1636,99 +1644,101 @@ export default function Subscription() {
)} )}
<div className="max-h-64 space-y-2 overflow-y-auto"> <div className="max-h-64 space-y-2 overflow-y-auto">
{countriesData.countries.map((country) => { {countriesData.countries
const isCurrentlyConnected = country.is_connected; .filter((country) => country.is_available || country.is_connected)
const isSelected = selectedServersToUpdate.includes(country.uuid); .map((country) => {
const willBeAdded = !isCurrentlyConnected && isSelected; const isCurrentlyConnected = country.is_connected;
const willBeRemoved = isCurrentlyConnected && !isSelected; const isSelected = selectedServersToUpdate.includes(country.uuid);
const willBeAdded = !isCurrentlyConnected && isSelected;
const willBeRemoved = isCurrentlyConnected && !isSelected;
return ( return (
<button <button
key={country.uuid} key={country.uuid}
onClick={() => { onClick={() => {
if (isSelected) { if (isSelected) {
setSelectedServersToUpdate((prev) => setSelectedServersToUpdate((prev) =>
prev.filter((u) => u !== country.uuid), prev.filter((u) => u !== country.uuid),
); );
} else { } else {
setSelectedServersToUpdate((prev) => [...prev, country.uuid]); setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
} }
}} }}
disabled={!country.is_available && !isCurrentlyConnected} disabled={!country.is_available && !isCurrentlyConnected}
className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${ className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
isSelected isSelected
? willBeAdded ? willBeAdded
? 'border-success-500 bg-success-500/10' ? 'border-success-500 bg-success-500/10'
: 'border-accent-500 bg-accent-500/10' : 'border-accent-500 bg-accent-500/10'
: willBeRemoved
? 'border-error-500/50 bg-error-500/5'
: 'border-dark-700/50 bg-dark-800/30 hover:border-dark-600'
} ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
>
<div className="flex items-center gap-3">
<span className="text-lg">
{willBeAdded
? '➕'
: willBeRemoved : willBeRemoved
? '➖' ? 'border-error-500/50 bg-error-500/5'
: isSelected : 'border-dark-700/50 bg-dark-800/30 hover:border-dark-600'
? '✅' } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
: '⚪'} >
</span> <div className="flex items-center gap-3">
<div> <span className="text-lg">
<div className="flex items-center gap-2 font-medium text-dark-100"> {willBeAdded
{country.name} ? '➕'
{country.has_discount && !isCurrentlyConnected && ( : willBeRemoved
<span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400"> ? '➖'
-{country.discount_percent}% : isSelected
</span> ? '✅'
: '⚪'}
</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>
{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>
</div> {country.country_code && (
{country.country_code && ( <span className="text-xl">
<span className="text-xl"> {getFlagEmoji(country.country_code)}
{getFlagEmoji(country.country_code)} </span>
</span> )}
)} </button>
</button> );
); })}
})}
</div> </div>
{(() => { {(() => {
@@ -2001,10 +2011,10 @@ export default function Subscription() {
</div> </div>
<div> <div>
<div className="font-medium text-error-300"> <div className="font-medium text-error-300">
{t('subscription.expired.title')} {t('subscription.expiredBanner.title')}
</div> </div>
<div className="mt-1 text-sm text-dark-400"> <div className="mt-1 text-sm text-dark-400">
{t('subscription.expired.selectTariff')} {t('subscription.expiredBanner.selectTariff')}
</div> </div>
</div> </div>
</div> </div>
@@ -3108,7 +3118,14 @@ export default function Subscription() {
setSelectedTraffic(period.traffic.current); setSelectedTraffic(period.traffic.current);
} }
if (period.servers.selected) { if (period.servers.selected) {
setSelectedServers(period.servers.selected); const availUuids = new Set(
period.servers.options
?.filter((s) => s.is_available)
.map((s) => s.uuid) ?? [],
);
setSelectedServers(
period.servers.selected.filter((uuid) => availUuids.has(uuid)),
);
} }
if (period.devices.current) { if (period.devices.current) {
setSelectedDevices(period.devices.current); setSelectedDevices(period.devices.current);
@@ -3193,8 +3210,9 @@ export default function Subscription() {
{currentStep === 'servers' && selectedPeriod?.servers.options && ( {currentStep === 'servers' && selectedPeriod?.servers.options && (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3"> <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
{selectedPeriod.servers.options {selectedPeriod.servers.options
// Hide Trial server for users who already have trial subscription // Hide unavailable (disabled) servers and trial servers for existing trial users
.filter((server) => { .filter((server) => {
if (!server.is_available) return false;
if (subscription?.is_trial && server.name.toLowerCase().includes('trial')) { if (subscription?.is_trial && server.name.toLowerCase().includes('trial')) {
return false; return false;
} }