- Интеграция рекурентов от Юкассы

- Багфикс личного кабинета

src/pages/Balance.tsx

@@ -22,6 +22,12 @@ const ChevronDownIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
   </svg>
 );
 
+const ChevronRightIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
 const WalletIcon = ({ className = 'h-8 w-8' }: { className?: string }) => (
   <svg
     className={className}
@@ -112,6 +118,11 @@ export default function Balance() {
     queryFn: balanceApi.getPaymentMethods,
   });
 
+  const { data: savedCardsData } = useQuery({
+    queryKey: ['saved-cards'],
+    queryFn: balanceApi.getSavedCards,
+  });
+
   const normalizeType = (type: string) => type?.toUpperCase?.() ?? type;
 
   const getTypeBadge = (type: string) => {
@@ -263,7 +274,7 @@ export default function Balance() {
 
       {/* Payment Methods */}
       {paymentMethods && paymentMethods.length > 0 && (
-        <motion.div variants={staggerItem}>
+        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}>
           <Card>
             <h2 className="mb-4 text-lg font-semibold text-dark-100">
               {t('balance.topUpBalance')}
@@ -421,6 +432,21 @@ export default function Balance() {
           </AnimatePresence>
         </Card>
       </motion.div>
+
+      {/* Saved Cards Navigation */}
+      {savedCardsData?.recurrent_enabled && (
+        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}>
+          <Card interactive onClick={() => navigate('/balance/saved-cards')}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className="text-xl">💳</span>
+                <span className="font-medium text-dark-100">{t('balance.savedCards.title')}</span>
+              </div>
+              <ChevronRightIcon className="h-5 w-5 text-dark-400" />
+            </div>
+          </Card>
+        </motion.div>
+      )}
     </motion.div>
   );
 }