[INJIMOB-864] disable backup button when restoring and vice versa (#1279

) Signed-off-by: KiruthikaJeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com>
mosip · Feb 20, 2024 · 854d8e2 · 854d8e2
1 parent 688a33f
commit 854d8e2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
@@ -14,11 +14,16 @@ export const Button: React.FC<ButtonProps> = props => {
   const buttonStyle: StyleProp<ViewStyle> = [
     props.fill ? Theme.ButtonStyles.fill : null,
     Theme.ButtonStyles[type],
+    props.disabled && props.type === 'outline'
+      ? Theme.ButtonStyles.disabledOutlineButton
+      : null,
     {width: props.width ?? '100%'},
   ];
   const containerStyle: StyleProp<ViewStyle> = [
     !(type === 'gradient') ? Theme.ButtonStyles.container : null,
-    props.disabled ? Theme.ButtonStyles.disabled : null,
+    props.disabled && props.type !== 'outline'
+      ? Theme.ButtonStyles.disabled
+      : null,
     props.margin ? Theme.spacing('margin', props.margin) : null,
     type === 'gradient'
       ? props.isVcThere
@@ -53,6 +58,8 @@ export const Button: React.FC<ButtonProps> = props => {
               ? Theme.Colors.whiteText
               : type === 'plain'
               ? Theme.Colors.plainText
+              : type === 'outline' && props.disabled
+              ? Theme.Colors.textLabel
               : Theme.Colors.AddIdBtnTxt
           }>
           {props.title}

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -955,6 +955,11 @@ export const DefaultTheme = {
       backgroundColor: Colors.Transparent,
       borderColor: Colors.Orange,
     },
+    disabledOutlineButton: {
+      backgroundColor: Colors.Transparent,
+      color: Colors.Grey,
+      borderColor: Colors.Grey,
+    },
     container: {
       height: 45,
       flexDirection: 'row',

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -959,6 +959,11 @@ export const PurpleTheme = {
       backgroundColor: Colors.Transparent,
       borderColor: Colors.Purple,
     },
+    disabledOutlineButton: {
+      backgroundColor: Colors.Transparent,
+      color: Colors.Grey,
+      borderColor: Colors.Grey,
+    },
     container: {
       height: 45,
       flexDirection: 'row',

diff --git a/screens/backupAndRestore/BackupAndRestoreScreen.tsx b/screens/backupAndRestore/BackupAndRestoreScreen.tsx
@@ -44,6 +44,14 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
     props.shouldTriggerAutoBackup,
   ]);
 
+  function handleRestore() {
+    !backupController.isBackupInProgress && restoreController.BACKUP_RESTORE();
+  }
+
+  function handleBackup() {
+    !restoreController.isBackUpRestoring && backupController.DATA_BACKUP(false);
+  }
+
   const Loading = testID => (
     <Centered fill>
       <LoaderAnimation testID={testID} showLogo={false} />
@@ -116,8 +124,9 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
             testID="backup"
             type="gradient"
             title={t('backup')}
-            onPress={() => backupController.DATA_BACKUP(false)}
-            styles={{...Theme.MessageOverlayStyles.button, flex: 1}}
+            disabled={restoreController.isBackUpRestoring}
+            onPress={handleBackup}
+            styles={{flex: 1}}
           />
         )}
       </Row>
@@ -172,7 +181,8 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
             testID="restore"
             type="outline"
             title={t('restore')}
-            onPress={restoreController.BACKUP_RESTORE}
+            disabled={backupController.isBackupInProgress}
+            onPress={handleRestore}
             styles={{...Theme.MessageOverlayStyles.button, marginTop: 10}}
           />
         )}