From 01e3c7b042c3128ec9302326ce736a1f8d2e4bb3 Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Sat, 31 Jan 2026 20:31:01 +0300
Subject: [PATCH 1/3] Update subscription.ts

---
 src/api/subscription.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/api/subscription.ts b/src/api/subscription.ts
index b1c6953..80b60dd 100644
--- a/src/api/subscription.ts
+++ b/src/api/subscription.ts
@@ -98,6 +98,11 @@ export const subscriptionApi = {
     return response.data;
   },
 
+  // Save devices cart for later purchase after top-up
+  saveDevicesCart: async (devices: number): Promise<void> => {
+    await apiClient.post('/cabinet/subscription/devices/save-cart', { devices });
+  },
+
   // Update autopay settings
   updateAutopay: async (
     enabled: boolean,

From 35098faf8898e10a78e08241809895933731aceb Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Sat, 31 Jan 2026 20:31:23 +0300
Subject: [PATCH 2/3] Update InsufficientBalancePrompt.tsx

---
 src/components/InsufficientBalancePrompt.tsx | 56 +++++++++++++++-----
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/components/InsufficientBalancePrompt.tsx b/src/components/InsufficientBalancePrompt.tsx
index 1ef404b..d779f81 100644
--- a/src/components/InsufficientBalancePrompt.tsx
+++ b/src/components/InsufficientBalancePrompt.tsx
@@ -16,6 +16,8 @@ interface InsufficientBalancePromptProps {
   compact?: boolean;
   /** Additional className */
   className?: string;
+  /** Callback to execute before opening top-up modal (e.g., save cart) */
+  onBeforeTopUp?: () => Promise<void>;
 }
 
 export default function InsufficientBalancePrompt({
@@ -23,11 +25,13 @@ export default function InsufficientBalancePrompt({
   message,
   compact = false,
   className = '',
+  onBeforeTopUp,
 }: InsufficientBalancePromptProps) {
   const { t } = useTranslation();
   const { formatAmount, currencySymbol } = useCurrency();
   const [showMethodSelect, setShowMethodSelect] = useState(false);
   const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null);
+  const [isPreparingTopUp, setIsPreparingTopUp] = useState(false);
 
   // Auto-close modals when success notification appears
   const handleCloseAll = useCallback(() => {
@@ -50,6 +54,20 @@ export default function InsufficientBalancePrompt({
     setShowMethodSelect(false);
   };
 
+  const handleTopUpClick = async () => {
+    if (onBeforeTopUp) {
+      setIsPreparingTopUp(true);
+      try {
+        await onBeforeTopUp();
+      } catch {
+        // Silently ignore errors - still open the modal
+      } finally {
+        setIsPreparingTopUp(false);
+      }
+    }
+    setShowMethodSelect(true);
+  };
+
   if (compact) {
     return (
       <>
@@ -78,10 +96,15 @@ export default function InsufficientBalancePrompt({
             </span>
           </div>
           <button
-            onClick={() => setShowMethodSelect(true)}
+            onClick={handleTopUpClick}
+            disabled={isPreparingTopUp}
             className="btn-primary whitespace-nowrap px-3 py-1.5 text-xs"
           >
-            {t('balance.topUp')}
+            {isPreparingTopUp ? (
+              <span className="h-3 w-3 animate-spin rounded-full border border-white/30 border-t-white" />
+            ) : (
+              t('balance.topUp')
+            )}
           </button>
         </div>
 
@@ -139,19 +162,26 @@ export default function InsufficientBalancePrompt({
           </div>
         </div>
         <button
-          onClick={() => setShowMethodSelect(true)}
+          onClick={handleTopUpClick}
+          disabled={isPreparingTopUp}
           className="btn-primary mt-4 flex w-full items-center justify-center gap-2 py-2.5"
         >
-          <svg
-            className="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {t('balance.topUpBalance')}
+          {isPreparingTopUp ? (
+            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          ) : (
+            <>
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+              {t('balance.topUpBalance')}
+            </>
+          )}
         </button>
       </div>
 

From 313a6039cc0f4ad1b455170d2fbbdf8216aced5d Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Sat, 31 Jan 2026 20:31:51 +0300
Subject: [PATCH 3/3] Update Subscription.tsx

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

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index df35be0..cbebd1a 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1117,6 +1117,9 @@ export default function Subscription() {
                           devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
                         }
                         compact
+                        onBeforeTopUp={async () => {
+                          await subscriptionApi.saveDevicesCart(devicesToAdd);
+                        }}
                       />
                     )}