From c68b1fb3487abc6ec5be58843b73a91ec2172a41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Louise=20Linn=C3=A9?= <linne.louise@gmail.com>
Date: Thu, 28 Sep 2023 23:39:39 +0200
Subject: [PATCH] Update remove data dialog

---
 locales/en.json                  | 13 +++++----
 src/components/RemoveYourData.js | 49 ++++++++++++++++++--------------
 src/views/EditProfile.js         | 17 +++++------
 3 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 8c511590..2e99fe63 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -344,12 +344,13 @@
     "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",
+    "titleText": "Are you sure you want to delete your profile data?",
+    "bodyText": "This action will delete your profile picture, username and email from our databases.",
+    "bodyText2": "However, this action will not delete historical transaction data or trust interactions.",
+    "bodyText3": "After deletion you can chose to end session. You may still recover your account in the future by using your magic words. If you do not log in within 90 days, your UBI payouts will be stopped forever.",
+    "bodyText4": "Please note that data deletion will not happen across wallets. You will have to do profile data deletion your personal wallet and any shared wallets separately before ending session.",
+    "readMore": "Read more",
+    "btnText": "Delete Profile Data",
     "confirmationText": "You have successfully deleted your profile data",
     "confirmationDelete": "Delete",
     "confirmationCancel": "Cancel"
diff --git a/src/components/RemoveYourData.js b/src/components/RemoveYourData.js
index b3ce8901..6582f306 100644
--- a/src/components/RemoveYourData.js
+++ b/src/components/RemoveYourData.js
@@ -5,22 +5,17 @@ import { useDispatch } from 'react-redux';
 
 import Button from '~/components/Button';
 import DialogInfo from '~/components/DialogInfo';
+import ExternalLink from '~/components/ExternalLink';
 import translate from '~/services/locale';
 import notify, { NotificationsTypes } from '~/store/notifications/actions';
+import { FAQ_URL } from '~/utils/constants';
 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',
+    marginBottom: '40px',
   },
 }));
 
@@ -78,21 +73,31 @@ const RemoveYourData = () => {
       <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)}
+      <ExternalLink href={FAQ_URL}>
+        <Typography
+          align="center"
+          classes={{ root: 'body3_link_gradient' }}
+          paragraph
+          variant="body3"
         >
-          {translate('RemoveYourData.confirmationCancel')}
-        </Button>
+          {translate('RemoveYourData.readMore')}
+        </Typography>
+      </ExternalLink>
+      <Box pt={3}>
+        <Box display="flex" flexDirection="column" pb={1}>
+          <Button
+            className={classes.continueButton}
+            fullWidth
+            onClick={dialogCloseInfoHandler}
+          >
+            {translate('RemoveYourData.confirmationDelete')}
+          </Button>
+        </Box>
+        <Box display="flex" flexDirection="column">
+          <Button isText m={2} onClick={() => setIsOpenDialogCloseInfo(false)}>
+            {translate('RemoveYourData.confirmationCancel')}
+          </Button>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/src/views/EditProfile.js b/src/views/EditProfile.js
index 773e90dc..7a3b14ae 100644
--- a/src/views/EditProfile.js
+++ b/src/views/EditProfile.js
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'none',
   },
   saveButton: {
-    marginBottom: '20px',
+    marginBottom: '8px',
   },
   informationContainer: {
     maxWidth: '350px',
@@ -82,6 +82,10 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative',
     zIndex: theme.zIndex.layer1,
   },
+  removeYourData: {
+    position: 'relative',
+    marginTop: '5px',
+  },
 }));
 
 const DialogContentUpload = ({ onFileUpload, handleClose, uploadImgSrc }) => {
@@ -321,9 +325,9 @@ const EditProfile = () => {
     }
   }
 
-  const dialogOpenInfoHandler = () => {
-    setIsOpenDialogCloseInfo(true);
-  };
+  // const dialogOpenInfoHandler = () => {
+  //   setIsOpenDialogCloseInfo(true);
+  // };
 
   const dialogCloseInfoHandler = () => {
     setIsClose(true);
@@ -511,7 +515,6 @@ const EditProfile = () => {
                 </>
               )}
             </Box>
-            <RemoveYourData />
           </Box>
         </Container>
       </View>
@@ -524,9 +527,7 @@ const EditProfile = () => {
         >
           {translate('EditProfile.buttonSave')}
         </Button>
-        <Button fullWidth isText onClick={dialogOpenInfoHandler}>
-          {translate('EditProfile.buttonCancel')}
-        </Button>
+        <RemoveYourData className={classes.removeYourData} />
       </Footer>
     </>
   );