From d1e85651ca2431db99ad76c7d669a2d85911b10d Mon Sep 17 00:00:00 2001
From: KiruthikaJeyashankar
 <81218987+KiruthikaJeyashankar@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:34:05 +0530
Subject: [PATCH] [INJI-691] add backup and restore screen

Signed-off-by: KiruthikaJeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com>
---
 assets/google-drive-28.svg                  |   1 +
 components/ui/svg.tsx                       |   5 +
 screens/Settings/BackupAndRestoreScreen.tsx | 225 ++++++++++++++++++++
 screens/Settings/BackupToggle.tsx           |   5 +-
 4 files changed, 235 insertions(+), 1 deletion(-)
 create mode 100644 assets/google-drive-28.svg
 create mode 100644 screens/Settings/BackupAndRestoreScreen.tsx

diff --git a/assets/google-drive-28.svg b/assets/google-drive-28.svg
new file mode 100644
index 00000000..d999a543
--- /dev/null
+++ b/assets/google-drive-28.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="28px" height="28px"><path fill="#1e88e5" d="M38.59,39c-0.535,0.93-0.298,1.68-1.195,2.197C36.498,41.715,35.465,42,34.39,42H13.61 c-1.074,0-2.106-0.285-3.004-0.802C9.708,40.681,9.945,39.93,9.41,39l7.67-9h13.84L38.59,39z"/><path fill="#fbc02d" d="M27.463,6.999c1.073-0.002,2.104-0.716,3.001-0.198c0.897,0.519,1.66,1.27,2.197,2.201l10.39,17.996 c0.537,0.93,0.807,1.967,0.808,3.002c0.001,1.037-1.267,2.073-1.806,3.001l-11.127-3.005l-6.924-11.993L27.463,6.999z"/><path fill="#e53935" d="M43.86,30c0,1.04-0.27,2.07-0.81,3l-3.67,6.35c-0.53,0.78-1.21,1.4-1.99,1.85L30.92,30H43.86z"/><path fill="#4caf50" d="M5.947,33.001c-0.538-0.928-1.806-1.964-1.806-3c0.001-1.036,0.27-2.073,0.808-3.004l10.39-17.996 c0.537-0.93,1.3-1.682,2.196-2.2c0.897-0.519,1.929,0.195,3.002,0.197l3.459,11.009l-6.922,11.989L5.947,33.001z"/><path fill="#1565c0" d="M17.08,30l-6.47,11.2c-0.78-0.45-1.46-1.07-1.99-1.85L4.95,33c-0.54-0.93-0.81-1.96-0.81-3H17.08z"/><path fill="#2e7d32" d="M30.46,6.8L24,18L17.53,6.8c0.78-0.45,1.66-0.73,2.6-0.79L27.46,6C28.54,6,29.57,6.28,30.46,6.8z"/></svg>
\ No newline at end of file
diff --git a/components/ui/svg.tsx b/components/ui/svg.tsx
index 868cf217..282f912a 100644
--- a/components/ui/svg.tsx
+++ b/components/ui/svg.tsx
@@ -20,6 +20,7 @@ import SuccessLogo from '../../assets/Success_Message_Icon1.svg';
 import NoInternetConnection from '../../assets/No_Internet_Connection.svg';
 import SomethingWentWrong from '../../assets/Something_Went_Wrong.svg';
 import MagnifierZoom from '../../assets/Magnifier_Zoom.svg';
+import GoogleDriveIcon from '../../assets/google-drive-28.svg';
 import {displayType} from '../../machines/issuersMachine';
 import {IssuerProps} from '../openId4VCI/Issuer';
 import {
@@ -203,6 +204,10 @@ export class SvgImage {
   static MagnifierZoom() {
     return <MagnifierZoom />;
   }
+
+  static GoogleDriveIcon() {
+    return <GoogleDriveIcon />;
+  }
 }
 
 function getIssuerLogo(props: displayType) {
diff --git a/screens/Settings/BackupAndRestoreScreen.tsx b/screens/Settings/BackupAndRestoreScreen.tsx
new file mode 100644
index 00000000..231b9029
--- /dev/null
+++ b/screens/Settings/BackupAndRestoreScreen.tsx
@@ -0,0 +1,225 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Icon, ListItem} from 'react-native-elements';
+import {Button, Column, Row, Text} from '../../components/ui';
+import {Modal} from '../../components/ui/Modal';
+import {Theme} from '../../components/ui/styleUtils';
+import {useBackupScreen} from './BackupController';
+import {SvgImage} from '../../components/ui/svg';
+
+const SectionLayout: React.FC<SectionLayoutProps> = ({
+  headerIcon,
+  headerText,
+  children,
+}) => {
+  return (
+    <View
+      style={{
+        marginLeft: 18,
+        marginRight: 18,
+        marginTop: 16,
+        rowGap: 2,
+      }}>
+      <Row
+        style={{
+          alignItems: 'center',
+          padding: 16,
+          backgroundColor: Theme.Colors.whiteBackgroundColor,
+          borderTopLeftRadius: 6,
+          borderTopRightRadius: 6,
+        }}>
+        {headerIcon}
+        <Text
+          style={{
+            justifyContent: 'center',
+            paddingLeft: 12,
+            fontFamily: 'Inter',
+            fontWeight: '600',
+            fontSize: 14,
+            // lineSpacing: 17,
+          }}>
+          {headerText}
+        </Text>
+        <ListItem.Subtitle></ListItem.Subtitle>
+      </Row>
+      <Row
+        style={{
+          padding: 16,
+          // paddingTop: 32,
+          backgroundColor: Theme.Colors.whiteBackgroundColor,
+          borderBottomLeftRadius: 6,
+          borderBottomRightRadius: 6,
+        }}>
+        <Column>{children}</Column>
+      </Row>
+    </View>
+  );
+};
+
+type SectionLayoutProps = {
+  headerIcon?: React.ReactNode;
+  headerText: string;
+  children: React.ReactNode;
+};
+
+const AccountInformation: React.FC<AccountInformationProps> = ({
+  associatedAccount,
+  email,
+}) => {
+  return (
+    <Row style={{marginBottom: 21, columnGap: 11}}>
+      <Column align="center">
+        <Icon name="person" />
+      </Column>
+      <Column>
+        <Row>
+          <Text style={{color: Theme.Colors.helpText, fontSize: 12}}>
+            {associatedAccount}
+          </Text>
+        </Row>
+        <Row>
+          <Text style={{fontSize: 13, fontFamily: 'Helvetica Neue'}}>
+            {email}
+          </Text>
+        </Row>
+      </Column>
+    </Row>
+  );
+};
+
+type AccountInformationProps = {
+  associatedAccount: string;
+  email: string;
+};
+
+const BackupAndRestoreScreen = () => {
+  const controller = useBackupScreen();
+  const LastBackup = (
+    <SectionLayout headerText={'Last Backup: No Backup Found'}>
+      <Row>
+        <View style={{marginBottom: 19}}>
+          <Text
+            style={{
+              fontFamily: 'Inter',
+              fontWeight: 'normal',
+              fontSize: 14,
+              color: Theme.Colors.helpText,
+            }}>
+            Backup your Data to Google Drive. You can restore them when you
+            reinstall INJI.
+          </Text>
+        </View>
+      </Row>
+      <Row style={{backgroundColor: 'red'}}>
+        <Button
+          testID="backup"
+          type="gradient"
+          title={'Backup'}
+          onPress={controller.DATA_BACKUP}
+          styles={Theme.MessageOverlayStyles.button}
+        />
+      </Row>
+    </SectionLayout>
+  );
+
+  const AccountSection = (
+    <SectionLayout
+      headerText={'Google Drive'}
+      headerIcon={SvgImage.GoogleDriveIcon()}>
+      <View style={{marginBottom: 19}}>
+        <Text
+          style={{
+            fontFamily: 'Inter',
+            fontWeight: 'normal',
+            fontSize: 14,
+            color: Theme.Colors.helpText,
+          }}>
+          The backup will be stored in the Google Drive associated to your
+          chosen gmail account.
+        </Text>
+      </View>
+      <AccountInformation
+        associatedAccount={'Associated account'}
+        email={'email'}
+      />
+    </SectionLayout>
+  );
+
+  const RestoreSection = (
+    /*   <View
+      style={{
+        marginLeft: 18,
+        marginRight: 18,
+        marginTop: 16,
+        rowGap: 2,
+      }}>
+      <Row
+        style={{
+          alignItems: 'center',
+          padding: 16,
+          backgroundColor: Theme.Colors.whiteBackgroundColor,
+          borderTopLeftRadius: 6,
+          borderTopRightRadius: 6,
+        }}>
+        <Icon
+          name="restore"
+          type="MaterialIcons"
+          size={30}
+          color={Theme.Colors.Icon}
+        />
+        <Text style={{justifyContent: 'center'}}>Restore</Text>
+      </Row>
+      <Row
+        style={{
+          padding: 16,
+          paddingTop: 32,
+          backgroundColor: Theme.Colors.whiteBackgroundColor,
+          borderBottomLeftRadius: 6,
+          borderBottomRightRadius: 6,
+        }}>
+        <Button
+          testID="backup"
+          type="outline"
+          title={'Restore'}
+          onPress={() => {}}
+          styles={Theme.MessageOverlayStyles.button}
+        />
+      </Row>
+    </View> */
+    <SectionLayout
+      headerText="Restore"
+      headerIcon={
+        <Icon
+          name="restore"
+          type="MaterialIcons"
+          size={30}
+          color={Theme.Colors.Icon}
+        />
+      }>
+      <Button
+        testID="backup"
+        type="outline"
+        title={'Restore'}
+        onPress={() => {}}
+        styles={{...Theme.MessageOverlayStyles.button, marginTop: 10}}
+      />
+    </SectionLayout>
+  );
+
+  return (
+    <Modal
+      isVisible
+      headerTitle={'Backup & Restore'}
+      headerElevation={2}
+      arrowLeft={true}
+      onDismiss={controller.DISMISS}>
+      <View style={{backgroundColor: Theme.Colors.lightGreyBackgroundColor}}>
+        {LastBackup}
+        {AccountSection}
+        {RestoreSection}
+      </View>
+    </Modal>
+  );
+};
+
+export default BackupAndRestoreScreen;
diff --git a/screens/Settings/BackupToggle.tsx b/screens/Settings/BackupToggle.tsx
index f7ccec68..0b33bab2 100644
--- a/screens/Settings/BackupToggle.tsx
+++ b/screens/Settings/BackupToggle.tsx
@@ -1,9 +1,10 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {MessageOverlay} from '../../components/MessageOverlay';
 import {Button, Text} from '../../components/ui';
 import {Modal} from '../../components/ui/Modal';
 import {Theme} from '../../components/ui/styleUtils';
 import {useBackupScreen} from './BackupController';
+import BackupAndRestoreScreen from './BackupAndRestoreScreen';
 
 export const BackupToggle: React.FC<BackupToggleProps> = props => {
   const [dataBackup, setDataBackup] = useState(false);
@@ -43,6 +44,8 @@ export const BackupToggle: React.FC<BackupToggleProps> = props => {
           styles={Theme.MessageOverlayStyles.button}
         />
       </Modal>
+
+      {true && <BackupAndRestoreScreen />}
       <MessageOverlay
         isVisible={controller.isBackingUpSuccess}
         onButtonPress={() => {