fix: support 100% discount display + fix Telegram link widget race condition

- formatPrice shows "Бесплатно/Free" when price is 0 (SubscriptionPurchase, Subscription, RenewSubscription)
- Add subscription.free locale key (ru/en/zh/fa)
- Fix TelegramLinkWidget NS_BINDING_ABORTED: move legacy widget callback to ref pattern, remove unstable deps (showToast, t, navigate) from useEffect — prevents iframe destruction on re-render
- Clean up OIDC effect deps

src/locales/en.json

@@ -324,6 +324,7 @@
     "used": "Used",
     "of": "of",
     "renew": "Renew",
+    "free": "Free",
     "extend": "Extend Subscription",
     "buyTraffic": "Buy Traffic",
     "buyDevices": "Buy Devices",

src/locales/fa.json

@@ -285,6 +285,7 @@
     "used": "استفاده شده",
     "of": "از",
     "renew": "تمدید",
+    "free": "رایگان",
     "extend": "تمدید اشتراک",
     "buyTraffic": "خرید ترافیک",
     "buyDevices": "خرید دستگاه",

src/locales/ru.json

@@ -339,6 +339,7 @@
     "used": "Использовано",
     "of": "из",
     "renew": "Продлить",
+    "free": "Бесплатно",
     "extend": "Продлить подписку",
     "buyTraffic": "Докупить трафик",
     "buyDevices": "Докупить устройства",

src/locales/zh.json

@@ -285,6 +285,7 @@
     "used": "已使用",
     "of": "/",
     "renew": "续费",
+    "free": "免费",
     "extend": "延长订阅",
     "buyTraffic": "购买流量",
     "buyDevices": "增加设备",

src/pages/ConnectedAccounts.tsx

@@ -157,12 +157,35 @@ function TelegramLinkWidget() {
     isOIDC,
     widgetConfig?.oidc_client_id,
     widgetConfig?.request_access,
-    showToast,
-    t,
     scriptLoaded,
     handleScriptFailed,
   ]);
 
+  // Ref-based callback for legacy widget (avoids re-creating iframe on every render)
+  const handleWidgetAuthRef = useRef<(user: Record<string, unknown>) => void>(undefined);
+  handleWidgetAuthRef.current = async (user: Record<string, unknown>) => {
+    if (!mountedRef.current) return;
+    try {
+      const response = await authApi.linkTelegram({
+        id: user.id as number,
+        first_name: user.first_name as string,
+        last_name: (user.last_name as string) || undefined,
+        username: (user.username as string) || undefined,
+        photo_url: (user.photo_url as string) || undefined,
+        auth_date: user.auth_date as number,
+        hash: user.hash as string,
+      });
+      if (mountedRef.current) await handleLinkResult(response);
+    } catch (err: unknown) {
+      if (mountedRef.current) {
+        showToast({
+          type: 'error',
+          message: getErrorDetail(err) || t('profile.accounts.linkError'),
+        });
+      }
+    }
+  };
+
   // Legacy widget effect (only when NOT OIDC) with timeout
   useEffect(() => {
     if (isOIDC || !containerRef.current || !botUsername) return;
@@ -173,29 +196,10 @@ function TelegramLinkWidget() {
     }
 
     const callbackName = '__onTelegramLinkAuth';
-    (window as unknown as Record<string, unknown>)[callbackName] = async (
+    (window as unknown as Record<string, unknown>)[callbackName] = (
       user: Record<string, unknown>,
     ) => {
-      if (!mountedRef.current) return;
+      handleWidgetAuthRef.current?.(user);
-      try {
-        const response = await authApi.linkTelegram({
-          id: user.id as number,
-          first_name: user.first_name as string,
-          last_name: (user.last_name as string) || undefined,
-          username: (user.username as string) || undefined,
-          photo_url: (user.photo_url as string) || undefined,
-          auth_date: user.auth_date as number,
-          hash: user.hash as string,
-        });
-        if (mountedRef.current) await handleLinkResult(response);
-      } catch (err: unknown) {
-        if (mountedRef.current) {
-          showToast({
-            type: 'error',
-            message: getErrorDetail(err) || t('profile.accounts.linkError'),
-          });
-        }
-      }
     };
 
     const script = document.createElement('script');
@@ -227,16 +231,7 @@ function TelegramLinkWidget() {
         container.removeChild(container.firstChild);
       }
     };
-  }, [
+  }, [isOIDC, botUsername, handleScriptFailed]);
-    isOIDC,
-    botUsername,
-    navigate,
-    showToast,
-    t,
-    queryClient,
-    handleLinkResult,
-    handleScriptFailed,
-  ]);
 
   if (!botUsername && !isOIDC) {
     return null;

src/pages/RenewSubscription.tsx

@@ -177,7 +177,9 @@ export default function RenewSubscription() {
                   </div>
                   <div className="text-right">
                     <div className="text-base font-semibold" style={{ color: g.text }}>
-                      {formatAmount(option.price_kopeks / 100)} {currencySymbol}
+                      {option.price_kopeks === 0
+                        ? t('subscription.free', 'Бесплатно')
+                        : `${formatAmount(option.price_kopeks / 100)} ${currencySymbol}`}
                     </div>
                     {months > 1 && (
                       <div className="text-[11px]" style={{ color: g.textSecondary }}>

src/pages/Subscription.tsx

@@ -183,7 +183,10 @@ export default function Subscription() {
   const destructiveConfirm = useDestructiveConfirm();
 
   // Helper to format price from kopeks
-  const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`;
+  const formatPrice = (kopeks: number) =>
+    kopeks === 0
+      ? t('subscription.free', 'Бесплатно')
+      : `${formatAmount(kopeks / 100)} ${currencySymbol}`;
 
   // Device/traffic topup state
   const [showDeviceTopup, setShowDeviceTopup] = useState(false);

src/pages/SubscriptionPurchase.tsx

@@ -37,7 +37,10 @@ export default function SubscriptionPurchase() {
   const { isDark } = useTheme();
   const g = getGlassColors(isDark);
 
-  const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`;
+  const formatPrice = (kopeks: number) =>
+    kopeks === 0
+      ? t('subscription.free', 'Бесплатно')
+      : `${formatAmount(kopeks / 100)} ${currencySymbol}`;
 
   // Subscription query (shares cache with /subscription page)
   const { data: subscriptionResponse, isLoading } = useQuery({