Dev (#394)

* Make SBP default and first top-up option (#389)

* fix(connection): happ cryptolink flow + ui fixes (#385)

* fix(connection): respect happ_cryptolink mode

- read connect_mode from connection-link endpoint
- auto-redirect to happ cryptolink flow when mode is HAPP_CRYPTOLINK
- keep installation guide behavior for other modes

* docs(readme): fix source build step 2

- use compose service name for build/create commands
- copy static files from created compose container
- remove compose container via docker compose rm

* fix(connection): handle mode and ws path

- treat any non-guide connect mode as direct happ redirect
- wait for connection-link response before rendering installation guide
- build websocket URL from VITE_API_URL (supports /api and absolute URLs)

* docs(readme): fix docker cp static path

- copy /usr/share/nginx/html contents via html/.
- prevent nested /srv/cabinet/html deployment and 404 on root

* fix(connection): keep guide, use happ links

- restore guide page behavior for /connection (no auto redirect)
- use happ cryptolink URL in /connection/qr when happ crypt mode is active
- replace subscription page connection URL with happ cryptolink from connection-link API

* fix(connection): avoid wrong redirect flow

- force happ scheme deeplink in HAPP_CRYPTOLINK mode for guide connect buttons
- use cabinet redirect page only inside Telegram Mini App
- open deeplink directly in regular browsers

* fix(connection): enforce happ cryptolink

- prioritize backend crypt deeplink fields in HAPP_CRYPTOLINK mode
- fallback to local crypt4/crypt3 generation from subscription URL when backend returns plain happ://sub...
- apply same resolution for guide open action, qr page source and subscription page link display/copy

* fix(subscription): truncate long connect link

- render connection URL in a single line with ellipsis on /subscriptions
- preserve full URL in tooltip for easier manual copy
- keep copy button behavior unchanged

* fix(connection): build cryptolink from happ sub

- allow cryptolink fallback generation from happ://sub... URLs in addition to http(s)
- prevent plain happ://sub links from leaking into UI in HAPP_CRYPTOLINK mode

* fix: allow saving 0% period discount in promo groups

Changed condition from percent > 0 to percent >= 0 so that
admins can explicitly set 0% discount for a period. Previously
0% entries were silently dropped and not sent to the backend.

* fix: always send period_discounts in promo group updates

When all period discounts were removed, the frontend sent undefined
(field absent from JSON), so the backend never cleared them.
Now always sends the field - empty object {} to clear, or populated
object to update.

---------

Co-authored-by: zavul0nn <34007368+zavul0nn@users.noreply.github.com>
Co-authored-by: Dxnil <62987903+D4nilKO@users.noreply.github.com>

src/pages/TopUpAmount.tsx

@@ -10,7 +10,7 @@ import { checkRateLimit, getRateLimitResetTime, RATE_LIMIT_KEYS } from '../utils
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import { useHaptic, usePlatform } from '@/platform';
 import { staggerContainer, staggerItem } from '@/components/motion/transitions';
-import type { PaymentMethod } from '../types';
+import type { PaymentMethod, PaymentMethodOption } from '../types';
 import BentoCard from '../components/ui/BentoCard';
 import { saveTopUpPendingInfo } from '../utils/topUpStorage';
 
@@ -80,6 +80,44 @@ const getMethodIcon = (methodId: string) => {
   return <CardIcon />;
 };
 
+const getPreferredOptionId = (options?: PaymentMethod['options']) => {
+  if (!options || options.length === 0) return null;
+
+  const sbpOption = options.find((option) => {
+    const normalizedId = option.id.toLowerCase();
+    const normalizedName = option.name.toLowerCase();
+    return (
+      normalizedId.includes('sbp') ||
+      normalizedName.includes('сбп') ||
+      normalizedName.includes('sbp')
+    );
+  });
+
+  return sbpOption?.id ?? options[0].id;
+};
+
+const sortOptionsWithSbpFirst = (options?: PaymentMethod['options']) => {
+  if (!options || options.length <= 1) return options ?? [];
+
+  const isPreferredOption = (option: PaymentMethodOption) => {
+    const normalizedId = option.id.toLowerCase();
+    const normalizedName = option.name.toLowerCase();
+    return (
+      normalizedId.includes('sbp') ||
+      normalizedName.includes('сбп') ||
+      normalizedName.includes('sbp')
+    );
+  };
+
+  return [...options].sort((left, right) => {
+    const leftIsPreferred = isPreferredOption(left);
+    const rightIsPreferred = isPreferredOption(right);
+
+    if (leftIsPreferred === rightIsPreferred) return 0;
+    return leftIsPreferred ? -1 : 1;
+  });
+};
+
 export default function TopUpAmount() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -135,7 +173,7 @@ export default function TopUpAmount() {
   const [amount, setAmount] = useState(getInitialAmount);
   const [error, setError] = useState<string | null>(null);
   const [selectedOption, setSelectedOption] = useState<string | null>(
-    method?.options && method.options.length > 0 ? method.options[0].id : null,
+    getPreferredOptionId(method?.options),
   );
   const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
@@ -154,6 +192,20 @@ export default function TopUpAmount() {
     }
   }, [cachedMethods, method, navigate, searchParams]);
 
+  useEffect(() => {
+    if (!method?.options || method.options.length === 0) {
+      if (selectedOption !== null) {
+        setSelectedOption(null);
+      }
+      return;
+    }
+
+    const optionExists = method.options.some((option) => option.id === selectedOption);
+    if (!optionExists) {
+      setSelectedOption(getPreferredOptionId(method.options));
+    }
+  }, [method?.id, method?.options, selectedOption]);
+
   const starsPaymentMutation = useMutation({
     mutationFn: (amountKopeks: number) => balanceApi.createStarsInvoice(amountKopeks),
     onSuccess: async (data) => {
@@ -248,6 +300,7 @@ export default function TopUpAmount() {
   }
 
   const hasOptions = method.options && method.options.length > 0;
+  const orderedOptions = sortOptionsWithSbpFirst(method.options);
   const minRubles = method.min_amount_kopeks / 100;
   const maxRubles = method.max_amount_kopeks / 100;
   const methodKey = method.id.toLowerCase().replace(/-/g, '_');
@@ -344,11 +397,11 @@ export default function TopUpAmount() {
       </motion.div>
 
       {/* Payment options (if any) */}
-      {hasOptions && method.options && (
+      {hasOptions && orderedOptions.length > 0 && (
         <motion.div variants={staggerItem} className="space-y-2">
           <label className="text-sm font-medium text-dark-400">{t('balance.paymentMethod')}</label>
           <div className="grid grid-cols-2 gap-2">
-            {method.options.map((opt) => (
+            {orderedOptions.map((opt) => (
               <button
                 key={opt.id}
                 type="button"