From fbb80358a3c8eed15e7f2d337a1f5e65796c7ed2 Mon Sep 17 00:00:00 2001
From: miko <mikozet2@gmail.com>
Date: Mon, 25 Sep 2023 11:48:57 +0400
Subject: [PATCH] Add account data deletion functionality

---
 locales/en.json                  |  11 +++
 src/components/RemoveYourData.js | 118 +++++++++++++++++++++++++++++++
 src/views/EditProfile.js         |   2 +
 src/views/Settings.js            |   8 +++
 4 files changed, 139 insertions(+)
 create mode 100644 src/components/RemoveYourData.js

diff --git a/locales/en.json b/locales/en.json
index eff4e368..b8dab507 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -323,6 +323,17 @@
     },
     "bodyUndeployedToken": "Account not verified"
   },
+  "RemoveYourData": {
+    "titleText": "Do you want to delete your personal profile data?",
+    "bodyText": "This action will delete your personal avatar, username and email from our databases.",
+    "bodyText2": "This action will not delete any transaction data or trust interactions. Such data is stored on Gnosis Chain blockchain and cannot be deleted by anyone. However, your blockchain transactions will no longer be traceable or linked to your username or avatar.",
+    "bodyText3": "Upon deletion you can chose to log out. You may still recover your account in the future by using your magic words and edit your profile with a new profile data. If you do not log in within 90 days, your UBI payouts will be stopped forever. It is also possible to continue to use circles.garden without an alias, avatar or email.",
+    "bodyText4": "Please note that data deletion will not happen across wallets. You will have to do profile data deletion for your personal wallet and any shared wallets separately before logging out.",
+    "btnText": "I would like to proceed with my account data deletion",
+    "confirmationText": "You have successfully deleted your profile data",
+    "confirmationDelete": "Delete",
+    "confirmationCancel": "Cancel"
+  },
   "QRCodeScanner": {
     "notificationError": "Could not open QR code scanner: {error}."
   },
diff --git a/src/components/RemoveYourData.js b/src/components/RemoveYourData.js
new file mode 100644
index 00000000..b3ce8901
--- /dev/null
+++ b/src/components/RemoveYourData.js
@@ -0,0 +1,118 @@
+import { Box, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+import Button from '~/components/Button';
+import DialogInfo from '~/components/DialogInfo';
+import translate from '~/services/locale';
+import notify, { NotificationsTypes } from '~/store/notifications/actions';
+import logError, { translateErrorForUser } from '~/utils/debug';
+
+const useStyles = makeStyles(() => ({
+  textContainer: {
+    maxWidth: '250px',
+    margin: '0 auto',
+    marginBottom: '20px',
+  },
+  btnContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginTop: '32px',
+  },
+}));
+
+const RemoveYourData = () => {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const [isOpenDialogCloseInfo, setIsOpenDialogCloseInfo] = useState(false);
+
+  const dialogCloseInfoHandler = () => {
+    setIsOpenDialogCloseInfo(false);
+    try {
+      // TODO add delete logic
+
+      dispatch(
+        notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translate('RemoveYourData.confirmationText')}
+            </Typography>
+          ),
+          type: NotificationsTypes.SUCCESS,
+        }),
+      );
+    } catch (error) {
+      logError(error);
+      dispatch(
+        notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translateErrorForUser(error)}
+            </Typography>
+          ),
+          type: NotificationsTypes.ERROR,
+        }),
+      );
+    }
+  };
+
+  const dialogOpenInfoHandler = () => {
+    setIsOpenDialogCloseInfo(true);
+  };
+
+  const dialogContentClose = (
+    <Box className={classes.dialogContentContainer}>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText2')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText3')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText4')}
+      </Typography>
+      <Box className={classes.btnContainer}>
+        <Button
+          className={classes.continueButton}
+          fullWidth
+          onClick={dialogCloseInfoHandler}
+        >
+          {translate('RemoveYourData.confirmationDelete')}
+        </Button>
+        <Button
+          fullWidth
+          isText
+          onClick={() => setIsOpenDialogCloseInfo(false)}
+        >
+          {translate('RemoveYourData.confirmationCancel')}
+        </Button>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box>
+      <DialogInfo
+        dialogContent={dialogContentClose}
+        fullWidth
+        handleClose={() => setIsOpenDialogCloseInfo(false)}
+        isBtnClose={false}
+        isOpen={isOpenDialogCloseInfo}
+        maxWidth={'xs'}
+        title={translate('RemoveYourData.titleText')}
+      />
+      <Button fullWidth isText onClick={dialogOpenInfoHandler}>
+        {translate('RemoveYourData.btnText')}
+      </Button>
+    </Box>
+  );
+};
+
+export default RemoveYourData;
diff --git a/src/views/EditProfile.js b/src/views/EditProfile.js
index ecea995d..773e90dc 100644
--- a/src/views/EditProfile.js
+++ b/src/views/EditProfile.js
@@ -17,6 +17,7 @@ import CheckboxTerms from '~/components/CheckboxTerms';
 import DialogInfo from '~/components/DialogInfo';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
+import RemoveYourData from '~/components/RemoveYourData';
 import UploadFromCamera from '~/components/UploadFromCamera';
 import VerifiedEmailInput from '~/components/VerifiedEmailInput';
 import VerifiedUsernameInput from '~/components/VerifiedUsernameInput';
@@ -510,6 +511,7 @@ const EditProfile = () => {
                 </>
               )}
             </Box>
+            <RemoveYourData />
           </Box>
         </Container>
       </View>
diff --git a/src/views/Settings.js b/src/views/Settings.js
index 710db989..0950a457 100644
--- a/src/views/Settings.js
+++ b/src/views/Settings.js
@@ -11,6 +11,7 @@ import CenteredHeading from '~/components/CenteredHeading';
 import DialogBurn from '~/components/DialogBurn';
 import ExternalLink from '~/components/ExternalLink';
 import Header from '~/components/Header';
+import RemoveYourData from '~/components/RemoveYourData';
 import View from '~/components/View';
 import translate from '~/services/locale';
 
@@ -79,6 +80,13 @@ const Settings = () => {
                 </Box>
               </Paper>
             </Grid>
+            <Grid item xs={12}>
+              <Paper>
+                <Box p={2}>
+                  <RemoveYourData />
+                </Box>
+              </Paper>
+            </Grid>
             <Grid item xs={12}>
               <Paper>
                 <Box p={2}>