diff --git a/src/account-settings/delete-account/ConfirmationModal.jsx b/src/account-settings/delete-account/ConfirmationModal.jsx index df2e02164..3316156dd 100644 --- a/src/account-settings/delete-account/ConfirmationModal.jsx +++ b/src/account-settings/delete-account/ConfirmationModal.jsx @@ -2,12 +2,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { - Button, Modal, Form, + AlertModal, + Button, Input, ValidationFormGroup, ActionRow, } from '@edx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - import { getConfig } from '@edx/frontend-platform'; import messages from './messages'; import Alert from '../Alert'; @@ -74,61 +74,58 @@ export class ConfirmationModal extends Component { : 'account.settings.delete.account.modal.text.2'; return ( - - {this.renderError()} - } - > -
- {intl.formatMessage( - messages['account.settings.delete.account.modal.text.1'], - { siteName: getConfig().SITE_NAME }, - )} -
-

- {intl.formatMessage( - messages[deleteAccountModalText2MessageKey], - { siteName: getConfig().SITE_NAME }, - )} -

-

- -

- - - - {intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])} - - - {errorType !== null && ( - {intl.formatMessage(invalidMessage)} - )} - - - )} - buttons={[ - , - ]} - closeText={intl.formatMessage(messages['account.settings.delete.account.modal.confirm.cancel'])} - renderHeaderCloseButton={false} onClose={onCancel} - /> + footerNode={( + + + + + )} + > +
+ {this.renderError()} + } + > +
+ {intl.formatMessage( + messages['account.settings.delete.account.modal.text.1'], + { siteName: getConfig().SITE_NAME }, + )} +
+

+ {intl.formatMessage( + messages[deleteAccountModalText2MessageKey], + { siteName: getConfig().SITE_NAME }, + )} +

+

+ +

+ + + + + +
+ + ); } } diff --git a/src/account-settings/delete-account/SuccessModal.jsx b/src/account-settings/delete-account/SuccessModal.jsx index aadcfdc6c..5f31f1fcc 100644 --- a/src/account-settings/delete-account/SuccessModal.jsx +++ b/src/account-settings/delete-account/SuccessModal.jsx @@ -1,27 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Modal } from '@edx/paragon'; +import { ModalLayer, ModalCloseButton } from '@edx/paragon'; import messages from './messages'; export const SuccessModal = (props) => { const { status, intl, onClose } = props; return ( - + + +
+

+ {intl.formatMessage(messages['account.settings.delete.account.modal.after.header'])} +

+

{intl.formatMessage(messages['account.settings.delete.account.modal.after.text'])}

- )} - closeText={intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])} - renderHeaderCloseButton={false} - onClose={onClose} - /> +

+ Close +

+
+ + + ); }; diff --git a/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap b/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap index 742b12deb..970a00d0e 100644 --- a/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap +++ b/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap @@ -1,218 +1,66 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = ` +exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = `null`; + +exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = ` Array [
,
-
-

- Are you sure? -

-
-
-
-
-
- -
-
-
- You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted. -
-

- If you proceed, you will be unable to use this account to take courses on localhost. -

-

- You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion. -

-
-
-
- -
- -
-
-
-
-
- - -
+ Are you sure? +
-
-
-
-
, -] -`; - -exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = ` -Array [ -
, -
-
-
-
+
-

- Are you sure? -

-
-
-
@@ -281,61 +129,44 @@ Array [
-
- -
-
+ - - - - - A password is required -
+
+
+
+
-
, +
, ] `; exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = ` Array [
,
-
-

- Are you sure? -

-
+ Are you sure? + +
+
+
-
+
@@ -464,37 +294,44 @@ Array [
-
+ - -
+ Unable to delete account +
+
+
+
-
, +
, ] `; diff --git a/src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap b/src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap index 1e366b317..af03a4058 100644 --- a/src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap +++ b/src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap @@ -1,486 +1,88 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SuccessModal should match default closed success modal snapshot 1`] = ` -Array [ -
, -
-
-
-
-
-
-

- We're sorry to see you go! Your account will be deleted shortly. -

-
-
-
-

- Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. -

-
-
-
- -
-
-
-
-
-
, -] -`; +exports[`SuccessModal should match default closed success modal snapshot 1`] = `null`; -exports[`SuccessModal should match default closed success modal snapshot 2`] = ` -Array [ -
, -
-
-
-
-
-
-

- We're sorry to see you go! Your account will be deleted shortly. -

-
-
-
-

- Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. -

-
-
-
- -
-
-
-
-
-
, -] -`; +exports[`SuccessModal should match default closed success modal snapshot 2`] = `null`; -exports[`SuccessModal should match default closed success modal snapshot 3`] = ` -Array [ -
, -
-
-
-
-
-
-

- We're sorry to see you go! Your account will be deleted shortly. -

-
-
-
-

- Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. -

-
-
-
- -
-
-
-
-
-
, -] -`; +exports[`SuccessModal should match default closed success modal snapshot 3`] = `null`; -exports[`SuccessModal should match default closed success modal snapshot 4`] = ` -Array [ -
, -
-
-
-
-
-
-

- We're sorry to see you go! Your account will be deleted shortly. -

-
-
-
-

- Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. -

-
-
-
- -
-
-
-
-
-
, -] -`; +exports[`SuccessModal should match default closed success modal snapshot 4`] = `null`; exports[`SuccessModal should match open success modal snapshot 1`] = ` Array [
,
+

+ We're sorry to see you go! Your account will be deleted shortly. +

-
-

- We're sorry to see you go! Your account will be deleted shortly. -

-
-
-
-

- Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. -

-
-
-
- -
+ Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email. +

+

+ +

-
, +
, ] `; diff --git a/src/id-verification/IdVerificationPage.jsx b/src/id-verification/IdVerificationPage.jsx index 968fd1dfb..4b3eea33f 100644 --- a/src/id-verification/IdVerificationPage.jsx +++ b/src/id-verification/IdVerificationPage.jsx @@ -6,7 +6,7 @@ import { import camelCase from 'lodash.camelcase'; import qs from 'qs'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Modal, Button } from '@edx/paragon'; +import { Button, ModalDialog, ActionRow } from '@edx/paragon'; import { getConfig } from '@edx/frontend-platform'; import { idVerificationSelector } from './data/selectors'; import './getUserMediaShim'; @@ -74,12 +74,20 @@ const IdVerificationPage = (props) => {
- - + setIsModalOpen(false)} + size="lg" + hasCloseButton={false} + > + + + {props.intl.formatMessage(messages['id.verification.privacy.title'])} + + + +
{props.intl.formatMessage( messages['id.verification.privacy.need.photo.question'], @@ -100,9 +108,16 @@ const IdVerificationPage = (props) => { )}

- )} - onClose={() => setIsModalOpen(false)} - /> + + + + + Close + + + + +
); diff --git a/src/id-verification/tests/IdVerificationPage.test.jsx b/src/id-verification/tests/IdVerificationPage.test.jsx index 4f6e2fc04..9b0057d4c 100644 --- a/src/id-verification/tests/IdVerificationPage.test.jsx +++ b/src/id-verification/tests/IdVerificationPage.test.jsx @@ -4,9 +4,10 @@ import { Provider } from 'react-redux'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import configureStore from 'redux-mock-store'; -import { render, act } from '@testing-library/react'; +import { + render, act, screen, fireEvent, +} from '@testing-library/react'; import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n'; - import IdVerificationPage from '../IdVerificationPage'; import * as selectors from '../data/selectors'; @@ -48,7 +49,6 @@ jest.mock('../panels/SubmittedPanel', () => function () { }); const IntlIdVerificationPage = injectIntl(IdVerificationPage); - const mockStore = configureStore(); const history = createMemoryHistory(); @@ -59,7 +59,6 @@ describe('IdVerificationPage', () => { const props = { intl: {}, }; - it('decodes and stores course_id', async () => { history.push(`/?course_id=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`); await act(async () => render(( @@ -93,4 +92,35 @@ describe('IdVerificationPage', () => { 'dashboard', ); }); + it('shows modal on click of button', async () => { + history.push('/?next=dashboard'); + await act(async () => render(( + + + + + + + + ))); + expect(screen.getByText('Privacy Information')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Privacy Information')); + expect(screen.getByTestId('Id-modal')).toBeInTheDocument(); + }); + it('shows modal on click of button', async () => { + history.push('/?next=dashboard'); + await act(async () => render(( + + + + + + + + ))); + expect(screen.getByText('Privacy Information')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Privacy Information')); + expect(screen.getByTestId('Id-modal')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Close')); + }); });