diff --git a/lms/static/js/student_account/components/StudentAccountDeletion.jsx b/lms/static/js/student_account/components/StudentAccountDeletion.jsx index f71e9f9917..23d2fd155c 100644 --- a/lms/static/js/student_account/components/StudentAccountDeletion.jsx +++ b/lms/static/js/student_account/components/StudentAccountDeletion.jsx @@ -1,6 +1,7 @@ /* globals gettext */ /* eslint-disable react/no-danger, import/prefer-default-export */ import React from 'react'; +import PropTypes from 'prop-types'; import { Button, Icon, StatusAlert } from '@edx/paragon/static'; import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; import StudentAccountDeletionModal from './StudentAccountDeletionModal'; @@ -12,11 +13,20 @@ export class StudentAccountDeletion extends React.Component { this.loadDeletionModal = this.loadDeletionModal.bind(this); this.state = { deletionModalOpen: false, - socialAuthConnected: props.socialAccountLinks.providers.reduce((acc, value) => acc || value.connected, false), isActive: props.isActive, + socialAuthConnected: this.getConnectedSocialAuth(), }; } + getConnectedSocialAuth() { + const { socialAccountLinks } = this.props; + if (socialAccountLinks && socialAccountLinks.providers) { + return socialAccountLinks.providers.reduce((acc, value) => acc || value.connected, false); + } + + return false; + } + closeDeletionModal() { this.setState({ deletionModalOpen: false }); this.modalTrigger.focus(); @@ -27,7 +37,7 @@ export class StudentAccountDeletion extends React.Component { } render() { - const { deletionModalOpen, socialAuthConnected, isActive } = this.state + const { deletionModalOpen, socialAuthConnected, isActive } = this.state; const loseAccessText = StringUtils.interpolate( gettext('You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, follow the instructions for {htmlStart}printing or downloading a certificate{htmlEnd}.'), { @@ -43,7 +53,7 @@ export class StudentAccountDeletion extends React.Component { { htmlStart: '', htmlEnd: '', - } + }, ); const activationError = StringUtils.interpolate( @@ -51,7 +61,7 @@ export class StudentAccountDeletion extends React.Component { { htmlStart: '', htmlEnd: '', - } + }, ); return ( @@ -72,24 +82,35 @@ export class StudentAccountDeletion extends React.Component { inputRef={(input) => { this.modalTrigger = input; }} onClick={this.loadDeletionModal} /> - {showError && -
- -
-
- {socialAuthConnected && isActive &&

} - {!isActive &&

} -

- - )} - alertType="danger" - dismissible={false} - open - />} + {showError && + +
+ +
+
+ {socialAuthConnected && isActive && +

+ } + {!isActive &&

} +

+ + )} + alertType="danger" + dismissible={false} + open + /> + } {deletionModalOpen && } ); } } + +StudentAccountDeletion.propTypes = { + isActive: PropTypes.bool.isRequired, + socialAccountLinks: PropTypes.shape({ + providers: PropTypes.arrayOf(PropTypes.object), + }).isRequired, +};