From 7fa6475c5cc3203d53402bf48e3e1fddc49fb395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?= <cosmin.parvulescu@gmail.com>
Date: Fri, 9 Feb 2024 10:23:58 +0200
Subject: [PATCH] Update AppDataStorageModal component

---
 .../AppDataStorageModal/AppDataStorageModal.tsx  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/console/app/components/AppDataStorageModal/AppDataStorageModal.tsx b/apps/console/app/components/AppDataStorageModal/AppDataStorageModal.tsx
index 1de1561f4c..562f9f0fa1 100644
--- a/apps/console/app/components/AppDataStorageModal/AppDataStorageModal.tsx
+++ b/apps/console/app/components/AppDataStorageModal/AppDataStorageModal.tsx
@@ -67,11 +67,15 @@ const AppDataStorageModal: React.FC<AppDataStorageModalProps> = ({
 
           <section className="flex flex-col gap-4">
             <div>
-              <Text size="xs" className="text-gray-500 uppercase text-left">
+              <Text
+                size="xs"
+                className="text-gray-500 uppercase text-left mb-2"
+              >
                 Choose Package
               </Text>
               <div className="text-left flex flex-row items-center gap-1.5">
                 <Button
+                  disabled={subscriptionFetcher.state !== 'idle'}
                   btnType={
                     selectedPackage === ExternalAppDataPackageType.STARTER
                       ? 'secondary'
@@ -87,6 +91,7 @@ const AppDataStorageModal: React.FC<AppDataStorageModalProps> = ({
                   }
                 </Button>
                 <Button
+                  disabled={subscriptionFetcher.state !== 'idle'}
                   btnType={
                     selectedPackage === ExternalAppDataPackageType.SCALE
                       ? 'secondary'
@@ -126,7 +131,7 @@ const AppDataStorageModal: React.FC<AppDataStorageModalProps> = ({
           </section>
 
           <section className="flex flex-col">
-            <Text size="xs" className="text-gray-500 uppercase text-left">
+            <Text size="xs" className="text-gray-500 uppercase text-left mb-2">
               Auto Top-Up
             </Text>
 
@@ -145,6 +150,7 @@ const AppDataStorageModal: React.FC<AppDataStorageModalProps> = ({
                 id="top-up"
                 checked={autoTopUp}
                 onToggle={(val) => setAutoTopUp(val)}
+                disabled={subscriptionFetcher.state !== 'idle'}
               />
             </div>
           </section>
@@ -174,7 +180,11 @@ const AppDataStorageModal: React.FC<AppDataStorageModalProps> = ({
             <Button btnType="secondary-alt" onClick={() => onClose()}>
               Close
             </Button>
-            <Button btnType="primary-alt" type="submit">
+            <Button
+              btnType="primary-alt"
+              type="submit"
+              disabled={subscriptionFetcher.state !== 'idle'}
+            >
               Change Subscription
             </Button>
           </footer>