refactor: moved unable to delete into component

openedx · Dec 20, 2024 · bb6f792 · bb6f792
1 parent c6fa214
commit bb6f792
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 76 deletions.
diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx
@@ -813,16 +813,11 @@ class AccountSettingsPage extends React.Component {
 
         {getConfig().ENABLE_ACCOUNT_DELETION && (
           <div className="account-section pt-3 mb-5" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
-            {
-              this.canDeleteAccount()
-                ? (
-                  <DeleteAccount
-                    isVerifiedAccount={this.props.isActive}
-                    hasLinkedTPA={hasLinkedTPA}
-                  />
-                )
-                : this.props.intl.formatMessage(messages['account.settings.cannot.delete.account.text'])
-            }
+            <DeleteAccount
+              isVerifiedAccount={this.props.isActive}
+              hasLinkedTPA={hasLinkedTPA}
+              canDeleteAccount={this.canDeleteAccount()}
+            />
           </div>
         )}
       </>

diff --git a/src/account-settings/AccountSettingsPage.messages.jsx b/src/account-settings/AccountSettingsPage.messages.jsx
@@ -1,11 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'account.settings.cannot.delete.account.text': {
-    id: 'account.settings.cannot.delete.account.text',
-    defaultMessage: 'Please contact support to delete your account.',
-    description: 'This text is visible when useris not allowed to delete account',
-  },
   'account.settings.page.heading': {
     id: 'account.settings.page.heading',
     defaultMessage: 'Account Settings',

diff --git a/src/account-settings/delete-account/DeleteAccount.jsx b/src/account-settings/delete-account/DeleteAccount.jsx
@@ -76,67 +76,74 @@ export class DeleteAccount extends React.Component {
         <h2 className="section-heading h4 mb-3">
           {intl.formatMessage(messages['account.settings.delete.account.header'])}
         </h2>
-        <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
-        <p>
-          {intl.formatMessage(
-            messages['account.settings.delete.account.text.1'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          {intl.formatMessage(
-            messages[deleteAccountText2MessageKey],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          <PrintingInstructions />
-        </p>
-        <p className="text-danger h6">
-          {intl.formatMessage(
-            messages['account.settings.delete.account.text.warning'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          <Hyperlink destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics">
-            {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
-          </Hyperlink>
-        </p>
-        <p>
-          <Button
-            variant="outline-danger"
-            onClick={canDelete ? this.props.deleteAccountConfirmation : null}
-            disabled={!canDelete}
-          >
-            {intl.formatMessage(messages['account.settings.delete.account.button'])}
-          </Button>
-        </p>
-
-        {isVerifiedAccount ? null : (
-          <BeforeProceedingBanner
-            instructionMessageId={optInInstructionMessageId}
-            supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
-          />
-        )}
-
-        {hasLinkedTPA ? (
-          <BeforeProceedingBanner
-            instructionMessageId="account.settings.delete.account.please.unlink"
-            supportArticleUrl={supportArticleUrl}
-          />
-        ) : null}
-
-        <ConnectedConfirmationModal
-          status={status}
-          errorType={errorType}
-          onSubmit={this.handleSubmit}
-          onCancel={this.handleCancel}
-          onChange={this.handlePasswordChange}
-          password={this.state.password}
-        />
-
-        <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
+        {
+          this.props.canDeleteAccount ? (
+            <>
+              <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
+              <p>
+                {intl.formatMessage(
+                  messages['account.settings.delete.account.text.1'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                {intl.formatMessage(
+                  messages[deleteAccountText2MessageKey],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                <PrintingInstructions />
+              </p>
+              <p className="text-danger h6">
+                {intl.formatMessage(
+                  messages['account.settings.delete.account.text.warning'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                <Hyperlink destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics">
+                  {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
+                </Hyperlink>
+              </p>
+              <p>
+                <Button
+                  variant="outline-danger"
+                  onClick={canDelete ? this.props.deleteAccountConfirmation : null}
+                  disabled={!canDelete}
+                >
+                  {intl.formatMessage(messages['account.settings.delete.account.button'])}
+                </Button>
+              </p>
+              {isVerifiedAccount ? null : (
+                <BeforeProceedingBanner
+                  instructionMessageId={optInInstructionMessageId}
+                  supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
+                />
+              )}
+              {hasLinkedTPA ? (
+                <BeforeProceedingBanner
+                  instructionMessageId="account.settings.delete.account.please.unlink"
+                  supportArticleUrl={supportArticleUrl}
+                />
+              ) : null}
+
+              <ConnectedConfirmationModal
+                status={status}
+                errorType={errorType}
+                onSubmit={this.handleSubmit}
+                onCancel={this.handleCancel}
+                onChange={this.handlePasswordChange}
+                password={this.state.password}
+              />
+
+              <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
+            </>
+          ) : (
+            <p>{intl.formatMessage(messages['account.settings.cannot.delete.account.text'])}</p>
+          )
+        }
+
       </div>
     );
   }
@@ -152,6 +159,7 @@ DeleteAccount.propTypes = {
   errorType: PropTypes.oneOf(['empty-password', 'server']),
   hasLinkedTPA: PropTypes.bool,
   isVerifiedAccount: PropTypes.bool,
+  canDeleteAccount: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
@@ -160,6 +168,7 @@ DeleteAccount.defaultProps = {
   isVerifiedAccount: true,
   status: null,
   errorType: null,
+  canDeleteAccount: true,
 };
 
 // Assume we're part of the accountSettings state.

diff --git a/src/account-settings/delete-account/messages.js b/src/account-settings/delete-account/messages.js
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'account.settings.cannot.delete.account.text': {
+    id: 'account.settings.cannot.delete.account.text',
+    defaultMessage: 'Please note that, for legal and regulatory compliance purposes, account deletion is currently unavailable.',
+    description: 'This text is visible when user is not allowed to delete account',
+  },
   'account.settings.delete.account.header': {
     id: 'account.settings.delete.account.header',
     defaultMessage: 'Delete My Account',