From 026cb476944efffa4b555a8fa3c0a7f52e07a15e Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Wed, 4 Feb 2026 01:08:05 +0300
Subject: [PATCH] Update Subscription.tsx

---
 src/pages/Subscription.tsx | 178 ++++++++++++++++++-------------------
 1 file changed, 89 insertions(+), 89 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index a846636..00d39a7 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1645,100 +1645,100 @@ export default function Subscription() {
 
                       <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;
+                          .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'
-                                    : '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
-                                    ? '➕'
+                            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
-                                      ? '➖'
-                                      : 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>
+                                      ? '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
+                                        ? '➖'
+                                        : 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>
-                                  {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>
-                          );
-                        })}
+                                {country.country_code && (
+                                  <span className="text-xl">
+                                    {getFlagEmoji(country.country_code)}
+                                  </span>
+                                )}
+                              </button>
+                            );
+                          })}
                       </div>
 
                       {(() => {