From 3bb91f683320f706af312edb7863258c35dbdabd Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 1 May 2018 15:43:10 -0300
Subject: [PATCH] Adding withRequestAccountDeletion, withRequestDownloadLink, 
 withCancelAccountDeletion

---
 client/coral-framework/graphql/fragments.js   |  5 +-
 client/coral-framework/graphql/mutations.js   | 51 +++++++++++++++++++
 .../components/DeleteMyAccountDialog.css      |  4 +-
 .../components/DeleteMyAccountFinalStep.js    | 24 ++++++---
 .../components/DeleteMyAccountStep.css        | 47 +++++++++++++++++
 .../components/DeleteMyAccountStep1.js        |  6 ++-
 .../components/DeleteMyAccountStep2.js        |  8 ++-
 .../components/DeleteMyAccountStep3.js        |  6 ++-
 8 files changed, 134 insertions(+), 17 deletions(-)

diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js
index a62fd6d92..f30cb1e63 100644
--- a/client/coral-framework/graphql/fragments.js
+++ b/client/coral-framework/graphql/fragments.js
@@ -25,6 +25,9 @@ export default {
     'UnsuspendUserResponse',
     'UpdateAssetSettingsResponse',
     'UpdateAssetStatusResponse',
-    'UpdateSettingsResponse'
+    'UpdateSettingsResponse',
+    'RequestAccountDeletionResponse',
+    'RequestDownloadLinkResponse',
+    'CancelAccountDeletionResponse'
   ),
 };
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index bd31be630..bf412b189 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -623,6 +623,57 @@ export const withUpdateSettings = withMutation(
   }
 );
 
+export const withRequestAccountDeletion = withMutation(
+  gql`
+    mutation RequestAccountDeletion {
+      requestAccountDeletion {
+        ...RequestAccountDeletionResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestAccountDeletion: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
+export const withRequestDownloadLink = withMutation(
+  gql`
+    mutation RequestDownloadLink {
+      requestDownloadLink {
+        ...RequestDownloadLinkResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestDownloadLink: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
+export const withCancelAccountDeletion = withMutation(
+  gql`
+    mutation RequestDownloadLink {
+      cancelAccountDeletion {
+        ...CancelAccountDeletionResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      cancelAccountDeletion: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
 export const withUpdateAssetSettings = withMutation(
   gql`
     mutation UpdateAssetSettings($id: ID!, $input: AssetSettingsInput!) {
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css
index db44ebf6d..44dcad0cf 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css
@@ -34,6 +34,4 @@
   font-size: 1em;
   line-height: 20px;
   margin: 0;
-}
-
-
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js
index 004270f4d..22cf476e5 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js
@@ -9,30 +9,40 @@ const DeleteMyAccountFinalStep = () => (
       Your request has been submitted and confirmation has been sent to the
       email address associated with your account.
     </p>
-    <strong> Your account is scheduled to be deleted at:</strong>
-    <strong>
-      <Icon name="clock" />Account Deletion Date and Time
-    </strong>
+
+    <div className={styles.box}>
+      <strong className={styles.block}>
+        Your account is scheduled to be deleted at:
+      </strong>
+      <strong className={styles.block}>
+        <Icon name="access_time" />
+        <span>Account Deletion Date and Time</span>
+      </strong>
+    </div>
+
     <p className={styles.description}>
       <strong>Changed your mind?</strong> Simply sign in to your account again
       before this time and click “<strong>
         Cancel Account Deletion Request.
       </strong>”
     </p>
+
     <p className={styles.description}>
       <strong>Tell us why.</strong> Wed like to know why you chose to delete
       your account. Send us feedback on our comment system by emailing.
     </p>
-    <div className={cn(styles.actions)}>
+
+    <div className={cn(styles.actions, styles.columnView)}>
       <Button
         className={cn(styles.button, styles.proceed)}
         onClick={this.closeDialog}
+        full
       >
         Done
       </Button>
-      <small className={styles.note}>
+      <span className={styles.note}>
         Note: You will be immediately signed out of your account.
-      </small>
+      </span>
     </div>
   </div>
 );
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css
index 8984bf7ac..98b73f376 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css
@@ -43,10 +43,22 @@
     background-color: #3498DB;
     color: white;
   }
+
+  &.danger {
+    background-color: #FA4643;
+    color: white;
+  }
 }
 
 .actions {
   text-align: right;
+  padding-top: 20px;
+
+  &.columnView {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  } 
 }
 
 .title {
@@ -58,4 +70,39 @@
   font-size: 1em;
   line-height: 20px;
   margin: 0;
+  margin-bottom: 15px;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.note {
+  margin: 10px 0;
+}
+
+.subTitle {
+  font-size: 1em;
+  margin-bottom: 8px;
+}
+
+.textBox {
+  background-color: #F1F2F2;
+  border: none;
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  color: #3B4A53;
+  font-size: 1em;
+}
+
+.block {
+  display: block;
+  margin-top: 2px;
+}
+
+.step {
+  padding-top: 20px;
 }
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js
index d3b399f44..1d26190bc 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js
@@ -5,12 +5,14 @@ import styles from './DeleteMyAccountStep.css';
 
 const DeleteMyAccountStep1 = props => (
   <div className={styles.step}>
-    <h4>When will my account be deleted?</h4>
+    <h4 className={styles.subTitle}>When will my account be deleted?</h4>
     <p className={styles.description}>
       Your account will be deleted 24 hours after your request has been
       submitted.
     </p>
-    <h4>Can I still write comments until my account is deleted? </h4>
+    <h4 className={styles.subTitle}>
+      Can I still write comments until my account is deleted?{' '}
+    </h4>
     <p className={styles.description}>
       No. Once youve requested account deletion, you can no longer write
       comments, reply to comments, or select reactions.
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js
index 47c89e4c1..3337c0b94 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js
@@ -10,8 +10,12 @@ const DeleteMyAccountStep1 = props => (
       history for your records. After your account is deleted, you will be
       unable to request your comment history.
     </p>
-    <p>To download your comment history go to:</p>
-    <strong>My Profile Download My Comment History</strong>
+    <p className={styles.description}>
+      To download your comment history go to:
+      <strong className={styles.block}>
+        My Profile {`>`} Download My Comment History
+      </strong>
+    </p>
     <div className={cn(styles.actions)}>
       <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
       <Button
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js
index 534ea9db8..8cff542c1 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js
@@ -5,7 +5,9 @@ import styles from './DeleteMyAccountStep.css';
 
 const DeleteMyAccountStep1 = props => (
   <div className={styles.step}>
-    <h4>Are you sure you want to delete your account?</h4>
+    <h4 className={styles.subTitle}>
+      Are you sure you want to delete your account?
+    </h4>
     <p className={styles.description}>
       To confirm you would like to delete your account please type in the
       following phrase into the text box below:
@@ -19,7 +21,7 @@ const DeleteMyAccountStep1 = props => (
     <div className={cn(styles.actions)}>
       <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
       <Button
-        className={cn(styles.button, styles.proceed)}
+        className={cn(styles.button, styles.danger)}
         onClick={props.goToNextStep}
       >
         Delete My Account