Compare commits
1 Commits
master
...
INF-1653-r
| Author | SHA1 | Date | |
|---|---|---|---|
|
511211e7b1 |
8
.env
8
.env
@@ -12,11 +12,10 @@ LOGIN_URL=''
|
||||
LOGO_TRADEMARK_URL=''
|
||||
LOGO_URL=''
|
||||
LOGO_WHITE_URL=''
|
||||
SHOW_PUSH_CHANNEL=''
|
||||
SHOW_EMAIL_CHANNEL=''
|
||||
LOGOUT_URL=''
|
||||
MARKETING_SITE_BASE_URL=''
|
||||
NODE_ENV='production'
|
||||
NODE_ENV=''
|
||||
ORDER_HISTORY_URL=''
|
||||
PUBLISHER_BASE_URL=''
|
||||
REFRESH_ACCESS_TOKEN_ENDPOINT=''
|
||||
@@ -33,7 +32,4 @@ APP_ID=
|
||||
MFE_CONFIG_API_URL=
|
||||
PASSWORD_RESET_SUPPORT_LINK=''
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
|
||||
# Fallback in local style files
|
||||
PARAGON_THEME_URLS={}
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
|
||||
|
||||
@@ -28,13 +28,9 @@ ENABLE_COPPA_COMPLIANCE=''
|
||||
ENABLE_ACCOUNT_DELETION=''
|
||||
ENABLE_DOB_UPDATE=''
|
||||
MARKETING_EMAILS_OPT_IN=''
|
||||
SHOW_PUSH_CHANNEL='true'
|
||||
SHOW_EMAIL_CHANNEL='true'
|
||||
SHOW_EMAIL_CHANNEL=''
|
||||
APP_ID=
|
||||
MFE_CONFIG_API_URL=
|
||||
PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
|
||||
# Fallback in local style files
|
||||
PARAGON_THEME_URLS={}
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
|
||||
|
||||
@@ -24,13 +24,10 @@ SUPPORT_URL='http://localhost:18000/support'
|
||||
USER_INFO_COOKIE_NAME='edx-user-info'
|
||||
ENABLE_COPPA_COMPLIANCE=''
|
||||
ENABLE_ACCOUNT_DELETION=''
|
||||
SHOW_PUSH_CHANNEL=''
|
||||
SHOW_EMAIL_CHANNEL=''
|
||||
ENABLE_DOB_UPDATE=''
|
||||
MARKETING_EMAILS_OPT_IN=''
|
||||
APP_ID=
|
||||
MFE_CONFIG_API_URL=
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
|
||||
PARAGON_THEME_URLS={}
|
||||
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
|
||||
|
||||
@@ -3,4 +3,3 @@ dist/
|
||||
node_modules/
|
||||
__mocks__/
|
||||
__snapshots__/
|
||||
src/i18n/messages/
|
||||
|
||||
2
.github/pull_request_template.md
vendored
2
.github/pull_request_template.md
vendored
@@ -20,5 +20,5 @@ Include a link to the sandbox for design changes or screenshot for before and af
|
||||
|
||||
#### Post-merge Checklist
|
||||
|
||||
* [ ] Deploy the changes to prod after verifying on stage or ask **@jacobo-dominguez-wgu** to do it.
|
||||
* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/edx-infinity** to do it.
|
||||
* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
|
||||
3
.github/workflows/ci.yml
vendored
3
.github/workflows/ci.yml
vendored
@@ -13,11 +13,12 @@ jobs:
|
||||
- i18n_extract
|
||||
- lint
|
||||
- test
|
||||
node: [18, 20]
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
node-version: ${{ matrix.node }}
|
||||
- run: make requirements
|
||||
- run: make test NPM_TESTS=build
|
||||
- run: make test NPM_TESTS=${{ matrix.npm-test }}
|
||||
|
||||
7
Makefile
7
Makefile
@@ -1,3 +1,5 @@
|
||||
|
||||
|
||||
intl_imports = ./node_modules/.bin/intl-imports.js
|
||||
transifex_utils = ./node_modules/.bin/transifex-utils.js
|
||||
i18n = ./src/i18n
|
||||
@@ -17,11 +19,6 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
|
||||
npm run $(*)
|
||||
|
||||
.PHONY: requirements
|
||||
|
||||
precommit:
|
||||
npm run lint
|
||||
npm audit
|
||||
|
||||
requirements: ## install ci requirements
|
||||
npm ci
|
||||
|
||||
|
||||
52
README.rst
52
README.rst
@@ -25,13 +25,40 @@ Getting Started
|
||||
Prerequisites
|
||||
=============
|
||||
|
||||
`Tutor`_ is currently recommended as a development environment for your
|
||||
new MFE. Please refer
|
||||
The `devstack`_ is currently recommended as a development environment for your
|
||||
new MFE. If you start it with ``make dev.up.lms`` that should give you
|
||||
everything you need as a companion to this frontend.
|
||||
|
||||
Note that it is also possible to use `Tutor`_ to develop an MFE. You can refer
|
||||
to the `relevant tutor-mfe documentation`_ to get started using it.
|
||||
|
||||
.. _Devstack: https://github.com/openedx/devstack
|
||||
|
||||
.. _Tutor: https://github.com/overhangio/tutor
|
||||
|
||||
.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
|
||||
.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
|
||||
|
||||
Installation
|
||||
============
|
||||
|
||||
This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
|
||||
|
||||
1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
|
||||
|
||||
2. Start up Devstack, if it's not already started.
|
||||
|
||||
3. Log in to Devstack (http://localhost:18000/login )
|
||||
|
||||
4. Within this project, install requirements and start the development server:
|
||||
|
||||
.. code-block::
|
||||
|
||||
npm install
|
||||
npm start # The server will run on port 1997
|
||||
|
||||
5. Once the dev server is up, visit http://localhost:1997 to access the MFE
|
||||
|
||||
.. image:: ./docs/images/localhost_preview.png
|
||||
|
||||
Plugins
|
||||
=======
|
||||
@@ -42,7 +69,7 @@ The parts of this MFE that can be customized in that manner are documented `here
|
||||
Environment Variables/Setup Notes
|
||||
=================================
|
||||
|
||||
This MFE is configured via the ``frontend-platform`` configuration module. For more information on MFE configuration see the `Configuration documentation`_.
|
||||
This MFE is configured via environment variables supplied at build time. All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
|
||||
|
||||
The account settings micro-frontend also supports the following additional variable:
|
||||
|
||||
@@ -75,9 +102,8 @@ Example build syntax with a single environment variable:
|
||||
|
||||
NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
|
||||
|
||||
For more information see the document: `Configuration documentation`_
|
||||
|
||||
.. _Configuration documentation: https://openedx.github.io/frontend-platform/module-Config.html
|
||||
For more information see the document: `Micro-frontend applications in Open
|
||||
edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
|
||||
|
||||
Cloning and Startup
|
||||
===================
|
||||
@@ -89,9 +115,9 @@ Cloning and Startup
|
||||
|
||||
``git clone https://github.com/openedx/frontend-app-account.git``
|
||||
|
||||
2. Use the version of Node specified in the ``.nvmrc`` file.
|
||||
2. Use node v18.x.
|
||||
|
||||
The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
|
||||
The current version of the micro-frontend build scripts support node 18.
|
||||
Using other major versions of node *may* work, but this is unsupported. For
|
||||
convenience, this repository includes an .nvmrc file to help in setting the
|
||||
correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
|
||||
@@ -104,12 +130,6 @@ Cloning and Startup
|
||||
|
||||
``npm start``
|
||||
|
||||
Or for local development with custom configuration:
|
||||
|
||||
``npm run dev``
|
||||
|
||||
This runs the dev server with PUBLIC_PATH=/account/, MFE_CONFIG_API_URL pointing to localhost:8000, and hosts on apps.local.openedx.io.
|
||||
|
||||
Local module development
|
||||
=========================
|
||||
|
||||
@@ -218,7 +238,7 @@ Please do not report security issues in public. Please email security@openedx.or
|
||||
:target: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml
|
||||
:alt: Continuous Integration
|
||||
.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-account
|
||||
:target: https://codecov.io/gh/openedx/frontend-app-account/
|
||||
:target: https://codecov.io/gh/edx/frontend-app-account
|
||||
.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-account.svg
|
||||
:target: @edx/frontend-app-account
|
||||
.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-account.svg
|
||||
|
||||
@@ -12,8 +12,7 @@ metadata:
|
||||
icon: "Web"
|
||||
annotations:
|
||||
openedx.org/arch-interest-groups: ""
|
||||
openedx.org/release: "master"
|
||||
spec:
|
||||
owner: jacobo-dominguez-wgu
|
||||
owner: group:edx-infinity
|
||||
type: 'website'
|
||||
lifecycle: 'production'
|
||||
|
||||
15
codecov.yml
15
codecov.yml
@@ -1,15 +0,0 @@
|
||||
coverage:
|
||||
status:
|
||||
project:
|
||||
default:
|
||||
enabled: yes
|
||||
target: auto
|
||||
threshold: 0%
|
||||
patch:
|
||||
default:
|
||||
enabled: yes
|
||||
target: auto
|
||||
threshold: 0%
|
||||
ignore:
|
||||
- "src/i18n"
|
||||
- "src/index.jsx"
|
||||
6
openedx.yaml
Normal file
6
openedx.yaml
Normal file
@@ -0,0 +1,6 @@
|
||||
# This file describes this Open edX repo, as described in OEP-2:
|
||||
# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
|
||||
|
||||
nick: acct
|
||||
oeps: {}
|
||||
openedx-release: {ref: master}
|
||||
12729
package-lock.json
generated
12729
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
53
package.json
53
package.json
@@ -10,7 +10,6 @@
|
||||
},
|
||||
"scripts": {
|
||||
"build": "fedx-scripts webpack",
|
||||
"dev": "PUBLIC_PATH=/account/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
|
||||
"i18n_extract": "fedx-scripts formatjs extract",
|
||||
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
|
||||
"lint:fix": "npm run lint -- --fix",
|
||||
@@ -30,25 +29,25 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
|
||||
"@edx/frontend-component-footer": "^14.6.0",
|
||||
"@edx/frontend-component-header": "^6.2.0",
|
||||
"@edx/frontend-platform": "^8.4.0",
|
||||
"@edx/openedx-atlas": "^0.7.0",
|
||||
"@edx/frontend-component-header": "5.5.0",
|
||||
"@edx/frontend-platform": "8.1.2",
|
||||
"@edx/openedx-atlas": "^0.6.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.6.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "0.2.6",
|
||||
"@openedx/frontend-plugin-framework": "^1.7.0",
|
||||
"@openedx/paragon": "^23.4.5",
|
||||
"@tensorflow-models/blazeface": "0.1.0",
|
||||
"@tensorflow/tfjs-converter": "4.22.0",
|
||||
"@tensorflow/tfjs-core": "4.22.0",
|
||||
"bowser": "2.14.1",
|
||||
"@fortawesome/react-fontawesome": "0.2.2",
|
||||
"@openedx/frontend-plugin-framework": "^1.2.2",
|
||||
"@openedx/frontend-slot-footer": "^1.0.2",
|
||||
"@openedx/paragon": "22.0.0",
|
||||
"@tensorflow-models/blazeface": "0.0.7",
|
||||
"@tensorflow/tfjs-converter": "3.21.0",
|
||||
"@tensorflow/tfjs-core": "3.21.0",
|
||||
"bowser": "2.11.0",
|
||||
"classnames": "2.5.1",
|
||||
"core-js": "3.48.0",
|
||||
"core-js": "3.38.1",
|
||||
"font-awesome": "4.7.0",
|
||||
"form-urlencoded": "6.1.6",
|
||||
"form-urlencoded": "6.1.5",
|
||||
"formdata-polyfill": "4.0.10",
|
||||
"jslib-html5-camera-photo": "3.3.4",
|
||||
"lodash.camelcase": "4.3.0",
|
||||
@@ -61,12 +60,12 @@
|
||||
"lodash.pick": "4.4.0",
|
||||
"lodash.pickby": "4.6.0",
|
||||
"lodash.snakecase": "4.1.1",
|
||||
"long": "5.3.2",
|
||||
"long": "5.2.3",
|
||||
"memoize-one": "^6.0.0",
|
||||
"prop-types": "15.8.1",
|
||||
"qs": "6.15.0",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"qs": "6.13.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-helmet": "6.1.0",
|
||||
"react-redux": "7.2.9",
|
||||
"react-router": "^6.25.1",
|
||||
@@ -77,18 +76,20 @@
|
||||
"redux": "4.2.1",
|
||||
"redux-devtools-extension": "2.13.9",
|
||||
"redux-logger": "3.0.6",
|
||||
"redux-saga": "1.4.2",
|
||||
"redux-saga": "1.3.0",
|
||||
"redux-thunk": "2.4.2",
|
||||
"regenerator-runtime": "0.14.1",
|
||||
"reselect": "^5.1.1",
|
||||
"universal-cookie": "7.2.2"
|
||||
"universal-cookie": "4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@edx/browserslist-config": "1.5.1",
|
||||
"@openedx/frontend-build": "^14.6.2",
|
||||
"@testing-library/jest-dom": "6.9.1",
|
||||
"@testing-library/react": "14.3.1",
|
||||
"react-test-renderer": "^18.3.1",
|
||||
"redux-mock-store": "1.5.5"
|
||||
"@edx/browserslist-config": "1.2.0",
|
||||
"@edx/reactifex": "1.1.0",
|
||||
"@openedx/frontend-build": "14.1.5",
|
||||
"@testing-library/jest-dom": "6.5.0",
|
||||
"@testing-library/react": "12.1.5",
|
||||
"react-test-renderer": "17.0.2",
|
||||
"reactifex": "1.1.1",
|
||||
"redux-mock-store": "1.5.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
getLanguageList,
|
||||
} from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Container, Hyperlink, Icon, Alert,
|
||||
Button, Hyperlink, Icon, Alert,
|
||||
} from '@openedx/paragon';
|
||||
import { CheckCircle, Error, WarningFilled } from '@openedx/paragon/icons';
|
||||
|
||||
@@ -47,13 +47,10 @@ import {
|
||||
COPPA_COMPLIANCE_YEAR,
|
||||
WORK_EXPERIENCE_OPTIONS,
|
||||
getStatesList,
|
||||
FIELD_LABELS,
|
||||
} from './data/constants';
|
||||
import { fetchSiteLanguages } from './site-language';
|
||||
import { fetchNotificationPreferences } from '../notification-preferences/data/thunks';
|
||||
import NotificationSettings from '../notification-preferences/NotificationSettings';
|
||||
import { fetchCourseList } from '../notification-preferences/data/thunks';
|
||||
import { withLocation, withNavigate } from './hoc';
|
||||
import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';
|
||||
|
||||
class AccountSettingsPage extends React.Component {
|
||||
constructor(props, context) {
|
||||
@@ -68,7 +65,6 @@ class AccountSettingsPage extends React.Component {
|
||||
'#basic-information': React.createRef(),
|
||||
'#profile-information': React.createRef(),
|
||||
'#social-media': React.createRef(),
|
||||
'#notifications': React.createRef(),
|
||||
'#site-preferences': React.createRef(),
|
||||
'#linked-accounts': React.createRef(),
|
||||
'#delete-account': React.createRef(),
|
||||
@@ -76,7 +72,7 @@ class AccountSettingsPage extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchNotificationPreferences();
|
||||
this.props.fetchCourseList();
|
||||
this.props.fetchSettings();
|
||||
this.props.fetchSiteLanguages(this.props.navigate);
|
||||
sendTrackingLogEvent('edx.user.settings.viewed', {
|
||||
@@ -159,19 +155,17 @@ class AccountSettingsPage extends React.Component {
|
||||
})),
|
||||
}));
|
||||
|
||||
canDeleteAccount = () => {
|
||||
const { committedValues } = this.props;
|
||||
return !getConfig().COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED.includes(committedValues.country);
|
||||
};
|
||||
|
||||
removeDisabledCountries = (countryList) => {
|
||||
const { countriesCodesList, committedValues } = this.props;
|
||||
const committedCountry = committedValues?.country;
|
||||
const { disabledCountries, committedValues } = this.props;
|
||||
|
||||
if (!countriesCodesList.length) {
|
||||
if (!disabledCountries.length) {
|
||||
return countryList;
|
||||
}
|
||||
return countryList.filter(({ value }) => value === committedCountry || countriesCodesList.find(x => x === value));
|
||||
|
||||
return countryList.filter(({ value, disabled }) => {
|
||||
const isUserCountry = value === committedValues.country;
|
||||
return !disabled || isUserCountry;
|
||||
});
|
||||
};
|
||||
|
||||
handleEditableFieldChange = (name, value) => {
|
||||
@@ -179,7 +173,7 @@ class AccountSettingsPage extends React.Component {
|
||||
};
|
||||
|
||||
handleSubmit = (formId, values) => {
|
||||
if (formId === FIELD_LABELS.COUNTRY && this.isDisabledCountry(values)) {
|
||||
if (formId === 'country' && this.isDisabledCountry(values)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -225,9 +219,8 @@ class AccountSettingsPage extends React.Component {
|
||||
};
|
||||
|
||||
isDisabledCountry = (country) => {
|
||||
const { countriesCodesList } = this.props;
|
||||
|
||||
return countriesCodesList.length > 0 && !countriesCodesList.find(x => x === country);
|
||||
const { disabledCountries } = this.props;
|
||||
return disabledCountries.includes(country);
|
||||
};
|
||||
|
||||
isEditable(fieldName) {
|
||||
@@ -348,9 +341,19 @@ class AccountSettingsPage extends React.Component {
|
||||
header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.header'])}
|
||||
body={
|
||||
(
|
||||
<div className="d-flex flex-row">
|
||||
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'])}
|
||||
</div>
|
||||
<>
|
||||
<div className="d-flex flex-row">
|
||||
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'])}
|
||||
</div>
|
||||
<div className="d-flex flex-row-reverse mt-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied"
|
||||
>
|
||||
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
|
||||
</Button>{' '}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -733,10 +736,8 @@ class AccountSettingsPage extends React.Component {
|
||||
emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
|
||||
{...editableFieldProps}
|
||||
/>
|
||||
|
||||
<AdditionalProfileFieldsSlot />
|
||||
</div>
|
||||
<div className="account-section pt-3 mb-6" id="social-media">
|
||||
<div className="account-section pt-3 mb-5" id="social-media">
|
||||
<h2 className="section-heading h4 mb-3">
|
||||
{this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
|
||||
</h2>
|
||||
@@ -764,19 +765,16 @@ class AccountSettingsPage extends React.Component {
|
||||
{...editableFieldProps}
|
||||
/>
|
||||
<EditableField
|
||||
name="social_link_x"
|
||||
name="social_link_twitter"
|
||||
type="text"
|
||||
value={this.props.formValues.social_link_x}
|
||||
label={this.props.intl.formatMessage(messages['account.settings.field.social.platform.name.xTwitter'])}
|
||||
emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.social.platform.name.xTwitter.empty'])}
|
||||
value={this.props.formValues.social_link_twitter}
|
||||
label={this.props.intl.formatMessage(messages['account.settings.field.social.platform.name.twitter'])}
|
||||
emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.social.platform.name.twitter.empty'])}
|
||||
{...editableFieldProps}
|
||||
/>
|
||||
</div>
|
||||
<div className="border border-light-700" />
|
||||
<div className="mt-6" id="notifications" ref={this.navLinkRefs['#notifications']}>
|
||||
<NotificationSettings />
|
||||
</div>
|
||||
<div className="account-section mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
|
||||
|
||||
<div className="account-section pt-3 mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
|
||||
<h2 className="section-heading h4 mb-3">
|
||||
{this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
|
||||
</h2>
|
||||
@@ -818,15 +816,16 @@ class AccountSettingsPage extends React.Component {
|
||||
<ThirdPartyAuth />
|
||||
</div>
|
||||
|
||||
{getConfig().ENABLE_ACCOUNT_DELETION && (
|
||||
{getConfig().ENABLE_ACCOUNT_DELETION
|
||||
&& (
|
||||
<div className="account-section pt-3 mb-5" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
|
||||
<DeleteAccount
|
||||
isVerifiedAccount={this.props.isActive}
|
||||
hasLinkedTPA={hasLinkedTPA}
|
||||
canDeleteAccount={this.canDeleteAccount()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -855,24 +854,24 @@ class AccountSettingsPage extends React.Component {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Container className="page__account-settings py-5" size="xl">
|
||||
<div className="page__account-settings container-fluid py-5">
|
||||
{this.renderDuplicateTpaProviderMessage()}
|
||||
<h1 className="mb-4">
|
||||
{this.props.intl.formatMessage(messages['account.settings.page.heading'])}
|
||||
</h1>
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<div className="col-md-2">
|
||||
<JumpNav />
|
||||
</div>
|
||||
<div className="col-md-9">
|
||||
<div className="col-md-10">
|
||||
{loading ? this.renderLoading() : null}
|
||||
{loaded ? this.renderContent() : null}
|
||||
{loadingError ? this.renderError() : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -891,21 +890,18 @@ AccountSettingsPage.propTypes = {
|
||||
name: PropTypes.string,
|
||||
email: PropTypes.string,
|
||||
secondary_email: PropTypes.string,
|
||||
secondary_email_enabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
||||
secondary_email_enabled: PropTypes.bool,
|
||||
year_of_birth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
country: PropTypes.string,
|
||||
level_of_education: PropTypes.string,
|
||||
gender: PropTypes.string,
|
||||
extended_profile: PropTypes.arrayOf(PropTypes.shape({
|
||||
field_name: PropTypes.string,
|
||||
field_value: PropTypes.string,
|
||||
})),
|
||||
extended_profile: PropTypes.string,
|
||||
language_proficiencies: PropTypes.string,
|
||||
pending_name_change: PropTypes.string,
|
||||
phone_number: PropTypes.string,
|
||||
social_link_linkedin: PropTypes.string,
|
||||
social_link_facebook: PropTypes.string,
|
||||
social_link_x: PropTypes.string,
|
||||
social_link_twitter: PropTypes.string,
|
||||
time_zone: PropTypes.string,
|
||||
state: PropTypes.string,
|
||||
useVerifiedNameForCerts: PropTypes.bool.isRequired,
|
||||
@@ -948,16 +944,13 @@ AccountSettingsPage.propTypes = {
|
||||
saveSettings: PropTypes.func.isRequired,
|
||||
fetchSettings: PropTypes.func.isRequired,
|
||||
beginNameChange: PropTypes.func.isRequired,
|
||||
fetchNotificationPreferences: PropTypes.func.isRequired,
|
||||
fetchCourseList: PropTypes.func.isRequired,
|
||||
tpaProviders: PropTypes.arrayOf(PropTypes.shape({
|
||||
connected: PropTypes.bool,
|
||||
})),
|
||||
nameChangeModal: PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
formId: PropTypes.string,
|
||||
}),
|
||||
PropTypes.bool,
|
||||
]),
|
||||
nameChangeModal: PropTypes.shape({
|
||||
formId: PropTypes.string,
|
||||
}),
|
||||
verifiedName: PropTypes.shape({
|
||||
verified_name: PropTypes.string,
|
||||
status: PropTypes.string,
|
||||
@@ -977,12 +970,7 @@ AccountSettingsPage.propTypes = {
|
||||
),
|
||||
navigate: PropTypes.func.isRequired,
|
||||
location: PropTypes.string.isRequired,
|
||||
countriesCodesList: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
}),
|
||||
),
|
||||
disabledCountries: PropTypes.arrayOf(PropTypes.string),
|
||||
};
|
||||
|
||||
AccountSettingsPage.defaultProps = {
|
||||
@@ -1005,15 +993,15 @@ AccountSettingsPage.defaultProps = {
|
||||
tpaProviders: [],
|
||||
isActive: true,
|
||||
secondary_email_enabled: false,
|
||||
nameChangeModal: {} || false,
|
||||
nameChangeModal: {},
|
||||
verifiedName: null,
|
||||
mostRecentVerifiedName: {},
|
||||
verifiedNameHistory: [],
|
||||
countriesCodesList: [],
|
||||
disabledCountries: [],
|
||||
};
|
||||
|
||||
export default withLocation(withNavigate(connect(accountSettingsPageSelector, {
|
||||
fetchNotificationPreferences,
|
||||
fetchCourseList,
|
||||
fetchSettings,
|
||||
saveSettings,
|
||||
saveMultipleSettings,
|
||||
|
||||
@@ -509,15 +509,15 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Delete My Account',
|
||||
description: 'Header for the user account deletion area',
|
||||
},
|
||||
'account.settings.field.social.platform.name.xTwitter': {
|
||||
id: 'account.settings.field.social.platform.name.xTwitter',
|
||||
defaultMessage: 'X (Twitter)',
|
||||
description: 'Label for X (Twitter)',
|
||||
'account.settings.field.social.platform.name.twitter': {
|
||||
id: 'account.settings.field.social.platform.name.twitter',
|
||||
defaultMessage: 'Twitter',
|
||||
description: 'Label for Twitter',
|
||||
},
|
||||
'account.settings.field.social.platform.name.xTwitter.empty': {
|
||||
id: 'account.settings.field.social.platform.name.xTwitter.empty',
|
||||
defaultMessage: 'Add X profile',
|
||||
description: 'Placeholder for an empty X field',
|
||||
'account.settings.field.social.platform.name.twitter.empty': {
|
||||
id: 'account.settings.field.social.platform.name.twitter.empty',
|
||||
defaultMessage: 'Add Twitter profile',
|
||||
description: 'Placeholder for an empty Twitter field',
|
||||
},
|
||||
|
||||
'account.settings.field.social.platform.name.facebook': {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Form, StatefulButton, ModalDialog, ActionRow, useToggle, Button,
|
||||
} from '@openedx/paragon';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { connect, useDispatch } from 'react-redux';
|
||||
import messages from './AccountSettingsPage.messages';
|
||||
import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
|
||||
@@ -11,11 +11,11 @@ import { editableFieldSelector } from './data/selectors';
|
||||
import { saveSettingsReset } from './data/actions';
|
||||
|
||||
const DOBModal = (props) => {
|
||||
const intl = useIntl();
|
||||
const {
|
||||
saveState,
|
||||
error,
|
||||
onSubmit,
|
||||
intl,
|
||||
} = props;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
@@ -56,7 +56,7 @@ const DOBModal = (props) => {
|
||||
function renderErrors() {
|
||||
if (saveState === 'error' || error) {
|
||||
return (
|
||||
<Form.Control.Feedback type="invalid" key="general-error" data-testid="error-message">
|
||||
<Form.Control.Feedback type="invalid" key="general-error">
|
||||
{intl.formatMessage(messages['account.settingsfield.dob.error.general'])}
|
||||
</Form.Control.Feedback>
|
||||
);
|
||||
@@ -72,7 +72,7 @@ const DOBModal = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="primary" onClick={open} data-testid="open-modal-button">
|
||||
<Button variant="primary" onClick={open}>
|
||||
{intl.formatMessage(messages['account.settings.field.dob.form.button'])}
|
||||
</Button>
|
||||
<ModalDialog
|
||||
@@ -81,27 +81,25 @@ const DOBModal = (props) => {
|
||||
onClose={handleClose}
|
||||
hasCloseButton={false}
|
||||
variant="default"
|
||||
data-testid="dob-modal"
|
||||
>
|
||||
<form onSubmit={handleSubmit} data-testid="dob-form">
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
<ModalDialog.Header>
|
||||
<ModalDialog.Title data-testid="modal-title">
|
||||
<ModalDialog.Title>
|
||||
{intl.formatMessage(messages['account.settings.field.dob.form.title'])}
|
||||
</ModalDialog.Title>
|
||||
</ModalDialog.Header>
|
||||
|
||||
<ModalDialog.Body className="overflow-hidden" style={{ padding: '1.5rem' }}>
|
||||
<p data-testid="help-text">{intl.formatMessage(messages['account.settings.field.dob.form.help.text'])}</p>
|
||||
<p>{intl.formatMessage(messages['account.settings.field.dob.form.help.text'])}</p>
|
||||
<Form.Group>
|
||||
<Form.Label data-testid="month-label">
|
||||
<Form.Label>
|
||||
{intl.formatMessage(messages['account.settings.field.dob.month'])}
|
||||
</Form.Label>
|
||||
<Form.Control
|
||||
as="select"
|
||||
name="month"
|
||||
onChange={handleChange}
|
||||
data-testid="month-select"
|
||||
>
|
||||
<option value="">{intl.formatMessage(messages['account.settings.field.dob.month.default'])}</option>
|
||||
{[...Array(12).keys()].map(month => (
|
||||
@@ -110,14 +108,13 @@ const DOBModal = (props) => {
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<Form.Label data-testid="year-label">
|
||||
<Form.Label>
|
||||
{intl.formatMessage(messages['account.settings.field.dob.year'])}
|
||||
</Form.Label>
|
||||
<Form.Control
|
||||
as="select"
|
||||
name="year"
|
||||
onChange={handleChange}
|
||||
data-testid="year-select"
|
||||
>
|
||||
<option value="">{intl.formatMessage(messages['account.settings.field.dob.year.default'])}</option>
|
||||
{YEAR_OF_BIRTH_OPTIONS.map(year => (
|
||||
@@ -130,7 +127,7 @@ const DOBModal = (props) => {
|
||||
|
||||
<ModalDialog.Footer>
|
||||
<ActionRow>
|
||||
<ModalDialog.CloseButton variant="tertiary" data-testid="cancel-button">
|
||||
<ModalDialog.CloseButton variant="tertiary">
|
||||
Cancel
|
||||
</ModalDialog.CloseButton>
|
||||
<StatefulButton
|
||||
@@ -140,7 +137,6 @@ const DOBModal = (props) => {
|
||||
default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
|
||||
}}
|
||||
disabledStates={['unedited']}
|
||||
data-testid="submit-button"
|
||||
/>
|
||||
</ActionRow>
|
||||
</ModalDialog.Footer>
|
||||
@@ -155,6 +151,7 @@ DOBModal.propTypes = {
|
||||
saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
|
||||
error: PropTypes.string,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
DOBModal.defaultProps = {
|
||||
@@ -162,4 +159,4 @@ DOBModal.defaultProps = {
|
||||
error: undefined,
|
||||
};
|
||||
|
||||
export default connect(editableFieldSelector)(DOBModal);
|
||||
export default connect(editableFieldSelector)(injectIntl(DOBModal));
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Button, Form, StatefulButton,
|
||||
} from '@openedx/paragon';
|
||||
@@ -38,10 +39,10 @@ const EditableField = (props) => {
|
||||
isEditing,
|
||||
isEditable,
|
||||
isGrayedOut,
|
||||
intl,
|
||||
...others
|
||||
} = props;
|
||||
const id = `field-${name}`;
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
@@ -84,13 +85,9 @@ const EditableField = (props) => {
|
||||
if (!confirmationMessageDefinition || !confirmationValue) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<span data-testid="editable-field-confirmation">
|
||||
{intl.formatMessage(confirmationMessageDefinition, {
|
||||
value: confirmationValue,
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
return intl.formatMessage(confirmationMessageDefinition, {
|
||||
value: confirmationValue,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -99,7 +96,7 @@ const EditableField = (props) => {
|
||||
cases={{
|
||||
editing: (
|
||||
<>
|
||||
<form onSubmit={handleSubmit} data-testid="editable-field-form">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Form.Group
|
||||
controlId={id}
|
||||
isInvalid={error != null}
|
||||
@@ -112,11 +109,10 @@ const EditableField = (props) => {
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
data-testid="editable-field-textbox"
|
||||
{...others}
|
||||
/>
|
||||
{!!helpText && <Form.Text>{helpText}</Form.Text>}
|
||||
{error != null && <Form.Control.Feedback hasIcon={false} data-testid="editable-field-error">{error}</Form.Control.Feedback>}
|
||||
{error != null && <Form.Control.Feedback hasIcon={false}>{error}</Form.Control.Feedback>}
|
||||
{others.children}
|
||||
</Form.Group>
|
||||
<p>
|
||||
@@ -138,21 +134,16 @@ const EditableField = (props) => {
|
||||
if (saveState === 'pending') { e.preventDefault(); }
|
||||
}}
|
||||
disabledStates={[]}
|
||||
data-testid="editable-field-save"
|
||||
/>
|
||||
<Button
|
||||
variant="outline-primary"
|
||||
onClick={handleCancel}
|
||||
data-testid="editable-field-cancel"
|
||||
data-clicked="cancel"
|
||||
>
|
||||
{intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
|
||||
</Button>
|
||||
</p>
|
||||
</form>
|
||||
{['name', 'verified_name'].includes(name) && (
|
||||
<CertificatePreference fieldName={name} data-testid="editable-field-certificate-preference" />
|
||||
)}
|
||||
{['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
|
||||
</>
|
||||
),
|
||||
default: (
|
||||
@@ -160,7 +151,7 @@ const EditableField = (props) => {
|
||||
<div className="d-flex align-items-start">
|
||||
<h6 aria-level="3">{label}</h6>
|
||||
{isEditable ? (
|
||||
<Button variant="link" onClick={handleEdit} className="ml-3" data-testid="editable-field-edit" data-clicked="edit">
|
||||
<Button variant="link" onClick={handleEdit} className="ml-3">
|
||||
<FontAwesomeIcon className="mr-1" icon={faPencilAlt} />{intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
|
||||
</Button>
|
||||
) : null}
|
||||
@@ -197,6 +188,7 @@ EditableField.propTypes = {
|
||||
isEditing: PropTypes.bool,
|
||||
isEditable: PropTypes.bool,
|
||||
isGrayedOut: PropTypes.bool,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
EditableField.defaultProps = {
|
||||
@@ -217,4 +209,4 @@ EditableField.defaultProps = {
|
||||
export default connect(editableFieldSelector, {
|
||||
onEdit: openForm,
|
||||
onCancel: closeForm,
|
||||
})(EditableField);
|
||||
})(injectIntl(EditableField));
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Button, Form, StatefulButton,
|
||||
} from '@openedx/paragon';
|
||||
@@ -18,7 +19,6 @@ import { editableFieldSelector } from './data/selectors';
|
||||
import CertificatePreference from './certificate-preference/CertificatePreference';
|
||||
|
||||
const EditableSelectField = (props) => {
|
||||
const intl = useIntl();
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
@@ -39,6 +39,7 @@ const EditableSelectField = (props) => {
|
||||
isEditing,
|
||||
isEditable,
|
||||
isGrayedOut,
|
||||
intl,
|
||||
...others
|
||||
} = props;
|
||||
const id = `field-${name}`;
|
||||
@@ -226,6 +227,7 @@ EditableSelectField.propTypes = {
|
||||
isEditing: PropTypes.bool,
|
||||
isEditable: PropTypes.bool,
|
||||
isGrayedOut: PropTypes.bool,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
EditableSelectField.defaultProps = {
|
||||
@@ -247,4 +249,4 @@ EditableSelectField.defaultProps = {
|
||||
export default connect(editableFieldSelector, {
|
||||
onEdit: openForm,
|
||||
onCancel: closeForm,
|
||||
})(EditableSelectField);
|
||||
})(injectIntl(EditableSelectField));
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Button, StatefulButton, Form, Tooltip, OverlayTrigger,
|
||||
Button, StatefulButton, Form,
|
||||
} from '@openedx/paragon';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
@@ -34,9 +35,9 @@ const EmailField = (props) => {
|
||||
onChange,
|
||||
isEditing,
|
||||
isEditable,
|
||||
intl,
|
||||
} = props;
|
||||
const id = `field-${name}`;
|
||||
const intl = useIntl();
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
@@ -161,16 +162,7 @@ const EmailField = (props) => {
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<OverlayTrigger
|
||||
placement="top"
|
||||
overlay={(
|
||||
<Tooltip id={`tooltip-${name}`} variant="light" className="d-sm-none">
|
||||
{renderValue()}
|
||||
</Tooltip>
|
||||
)}
|
||||
>
|
||||
<p data-hj-suppress className="text-truncate">{renderValue()}</p>
|
||||
</OverlayTrigger>
|
||||
<p data-hj-suppress>{renderValue()}</p>
|
||||
{renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
|
||||
</div>
|
||||
),
|
||||
@@ -199,6 +191,7 @@ EmailField.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
isEditing: PropTypes.bool,
|
||||
isEditable: PropTypes.bool,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
EmailField.defaultProps = {
|
||||
@@ -217,4 +210,4 @@ EmailField.defaultProps = {
|
||||
export default connect(editableFieldSelector, {
|
||||
onEdit: openForm,
|
||||
onCancel: closeForm,
|
||||
})(EmailField);
|
||||
})(injectIntl(EmailField));
|
||||
|
||||
@@ -1,30 +1,35 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { breakpoints, useWindowSize } from '@openedx/paragon';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { breakpoints, useWindowSize, Icon } from '@openedx/paragon';
|
||||
import { OpenInNew } from '@openedx/paragon/icons';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { NavHashLink } from 'react-router-hash-link';
|
||||
import Scrollspy from 'react-scrollspy';
|
||||
import { Link } from 'react-router-dom';
|
||||
import messages from './AccountSettingsPage.messages';
|
||||
import { selectShowPreferences } from '../notification-preferences/data/selectors';
|
||||
|
||||
const JumpNav = () => {
|
||||
const intl = useIntl();
|
||||
const JumpNav = ({
|
||||
intl,
|
||||
}) => {
|
||||
const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
|
||||
const showPreferences = useSelector(selectShowPreferences());
|
||||
|
||||
return (
|
||||
<div className={classNames('jump-nav', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
|
||||
<div className={classNames('jump-nav px-2.25', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
|
||||
<Scrollspy
|
||||
items={[
|
||||
'basic-information',
|
||||
'profile-information',
|
||||
'social-media',
|
||||
'notifications',
|
||||
'site-preferences',
|
||||
'linked-accounts',
|
||||
'delete-account',
|
||||
]}
|
||||
className="list-unstyled"
|
||||
currentClassName="font-weight-bold"
|
||||
offset={-64}
|
||||
>
|
||||
<li>
|
||||
<NavHashLink to="#basic-information">
|
||||
@@ -41,11 +46,6 @@ const JumpNav = () => {
|
||||
{intl.formatMessage(messages['account.settings.section.social.media'])}
|
||||
</NavHashLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavHashLink to="#notifications">
|
||||
{intl.formatMessage(messages['notification.preferences.notifications.label'])}
|
||||
</NavHashLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavHashLink to="#site-preferences">
|
||||
{intl.formatMessage(messages['account.settings.section.site.preferences'])}
|
||||
@@ -65,8 +65,27 @@ const JumpNav = () => {
|
||||
</li>
|
||||
)}
|
||||
</Scrollspy>
|
||||
{showPreferences && (
|
||||
<>
|
||||
<hr />
|
||||
<Scrollspy
|
||||
className="list-unstyled"
|
||||
>
|
||||
<li>
|
||||
<Link to="/notifications" target="_blank" rel="noopener noreferrer">
|
||||
<span>{intl.formatMessage(messages['notification.preferences.notifications.label'])}</span>
|
||||
<Icon className="d-inline-block align-bottom ml-1" src={OpenInNew} />
|
||||
</Link>
|
||||
</li>
|
||||
</Scrollspy>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JumpNav;
|
||||
JumpNav.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(JumpNav);
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.custom-switch {
|
||||
padding: 0;
|
||||
max-width: 500px;
|
||||
@@ -43,8 +44,3 @@
|
||||
filter: alpha(opacity = 60); /* MSIE */
|
||||
}
|
||||
}
|
||||
|
||||
#tooltip-email .small {
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { connect, useDispatch } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
ModalDialog,
|
||||
StatefulButton,
|
||||
} from '@openedx/paragon';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import {
|
||||
closeForm,
|
||||
@@ -22,6 +22,7 @@ import commonMessages from '../AccountSettingsPage.messages';
|
||||
import messages from './messages';
|
||||
|
||||
const CertificatePreference = ({
|
||||
intl,
|
||||
fieldName,
|
||||
originalFullName,
|
||||
originalVerifiedName,
|
||||
@@ -32,7 +33,6 @@ const CertificatePreference = ({
|
||||
const [checked, setChecked] = useState(false);
|
||||
const [modalIsOpen, setModalIsOpen] = useState(false);
|
||||
const formId = 'useVerifiedNameForCerts';
|
||||
const intl = useIntl();
|
||||
|
||||
const handleCheckboxChange = () => {
|
||||
if (!checked) {
|
||||
@@ -155,6 +155,7 @@ const CertificatePreference = ({
|
||||
};
|
||||
|
||||
CertificatePreference.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
fieldName: PropTypes.string.isRequired,
|
||||
originalFullName: PropTypes.string,
|
||||
originalVerifiedName: PropTypes.string,
|
||||
@@ -169,4 +170,4 @@ CertificatePreference.defaultProps = {
|
||||
useVerifiedNameForCerts: false,
|
||||
};
|
||||
|
||||
export default connect(certPreferenceSelector)(CertificatePreference);
|
||||
export default connect(certPreferenceSelector)(injectIntl(CertificatePreference));
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
import { postVerifiedNameConfig } from './service';
|
||||
import { handleRequestError } from '../../data/utils';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('../../data/utils');
|
||||
|
||||
describe('postVerifiedNameConfig', () => {
|
||||
const mockPost = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({
|
||||
LMS_BASE_URL: 'http://testserver',
|
||||
});
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue({
|
||||
post: mockPost,
|
||||
});
|
||||
});
|
||||
|
||||
it('posts verified name config with useVerifiedNameForCerts = true', async () => {
|
||||
const mockResponse = { data: { success: true } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const result = await postVerifiedNameConfig('testuser', { useVerifiedNameForCerts: true });
|
||||
|
||||
expect(getConfig).toHaveBeenCalled();
|
||||
expect(getAuthenticatedHttpClient).toHaveBeenCalled();
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/api/edx_name_affirmation/v1/verified_name/config',
|
||||
{
|
||||
username: 'testuser',
|
||||
use_verified_name_for_certs: true,
|
||||
},
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('posts verified name config with useVerifiedNameForCerts = false', async () => {
|
||||
const mockResponse = { data: { success: false } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const result = await postVerifiedNameConfig('anotheruser', { useVerifiedNameForCerts: false });
|
||||
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/api/edx_name_affirmation/v1/verified_name/config',
|
||||
{
|
||||
username: 'anotheruser',
|
||||
use_verified_name_for_certs: false,
|
||||
},
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('calls handleRequestError and throws when request fails', async () => {
|
||||
const mockError = new Error('Request failed');
|
||||
mockPost.mockRejectedValueOnce(mockError);
|
||||
|
||||
handleRequestError.mockImplementation(() => {
|
||||
throw mockError;
|
||||
});
|
||||
|
||||
await expect(
|
||||
postVerifiedNameConfig('erroruser', { useVerifiedNameForCerts: true }),
|
||||
).rejects.toThrow('Request failed');
|
||||
|
||||
expect(handleRequestError).toHaveBeenCalledWith(mockError);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable no-import-assign */
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import configureStore from 'redux-mock-store';
|
||||
@@ -10,14 +11,10 @@ import {
|
||||
} from '@testing-library/react';
|
||||
|
||||
import * as auth from '@edx/frontend-platform/auth';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import messages from '../messages';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
// Modal creates a portal. Overriding createPortal allows portals to be tested in jest.
|
||||
jest.mock('react-dom', () => ({
|
||||
...jest.requireActual('react-dom'),
|
||||
createPortal: jest.fn(node => node), // Mock portal behavior
|
||||
}));
|
||||
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
|
||||
ReactDOM.createPortal = node => node;
|
||||
|
||||
import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
|
||||
|
||||
@@ -30,6 +27,8 @@ jest.mock('react-redux', () => ({
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
|
||||
|
||||
const IntlCertificatePreference = injectIntl(CertificatePreference);
|
||||
|
||||
const mockStore = configureStore();
|
||||
|
||||
describe('NameChange', () => {
|
||||
@@ -37,7 +36,7 @@ describe('NameChange', () => {
|
||||
let store = {};
|
||||
const formId = 'useVerifiedNameForCerts';
|
||||
const updateDraft = 'UPDATE_DRAFT';
|
||||
const labelText = messages['account.settings.field.name.checkbox.certificate.select'].defaultMessage;
|
||||
const labelText = 'If checked, this name will appear on your certificates and public-facing records.';
|
||||
|
||||
const reduxWrapper = children => (
|
||||
<Router>
|
||||
@@ -55,6 +54,7 @@ describe('NameChange', () => {
|
||||
originalVerifiedName: 'edX Verified',
|
||||
saveState: null,
|
||||
useVerifiedNameForCerts: false,
|
||||
intl: {},
|
||||
};
|
||||
|
||||
auth.getAuthenticatedHttpClient = jest.fn(() => ({
|
||||
@@ -74,7 +74,7 @@ describe('NameChange', () => {
|
||||
originalVerifiedName: '',
|
||||
};
|
||||
|
||||
const wrapper = render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
const wrapper = render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -85,7 +85,7 @@ describe('NameChange', () => {
|
||||
useVerifiedNameForCerts: true,
|
||||
};
|
||||
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
expect(checkbox.checked).toEqual(false);
|
||||
@@ -100,7 +100,7 @@ describe('NameChange', () => {
|
||||
});
|
||||
|
||||
it('triggers modal when attempting to uncheck checkbox', () => {
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
expect(checkbox.checked).toEqual(true);
|
||||
@@ -112,7 +112,7 @@ describe('NameChange', () => {
|
||||
});
|
||||
|
||||
it('updates draft when changing radio value', () => {
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
fireEvent.click(checkbox);
|
||||
@@ -130,7 +130,7 @@ describe('NameChange', () => {
|
||||
});
|
||||
|
||||
it('clears draft on cancel', () => {
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
fireEvent.click(checkbox);
|
||||
@@ -143,7 +143,7 @@ describe('NameChange', () => {
|
||||
});
|
||||
|
||||
it('submits', () => {
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
fireEvent.click(checkbox);
|
||||
@@ -163,7 +163,7 @@ describe('NameChange', () => {
|
||||
useVerifiedNameForCerts: true,
|
||||
};
|
||||
|
||||
render(reduxWrapper(<CertificatePreference {...props} />));
|
||||
render(reduxWrapper(<IntlCertificatePreference {...props} />));
|
||||
|
||||
const checkbox = screen.getByLabelText(labelText);
|
||||
expect(checkbox.checked).toEqual(true);
|
||||
|
||||
@@ -27,7 +27,6 @@ export const fetchSettingsSuccess = ({
|
||||
profileDataManager,
|
||||
timeZones,
|
||||
verifiedNameHistory,
|
||||
countriesCodesList,
|
||||
}) => ({
|
||||
type: FETCH_SETTINGS.SUCCESS,
|
||||
payload: {
|
||||
@@ -36,7 +35,6 @@ export const fetchSettingsSuccess = ({
|
||||
profileDataManager,
|
||||
timeZones,
|
||||
verifiedNameHistory,
|
||||
countriesCodesList,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -132,6 +132,6 @@ export function getStatesList(country) {
|
||||
return country && COUNTRY_STATES_MAP[country.toUpperCase()];
|
||||
}
|
||||
|
||||
export const FIELD_LABELS = {
|
||||
COUNTRY: 'country',
|
||||
};
|
||||
export const DECLINED = 'declined';
|
||||
export const SELF_DESCRIBE = 'self-describe';
|
||||
export const OTHER = 'other';
|
||||
|
||||
@@ -39,7 +39,7 @@ export const defaultState = {
|
||||
verifiedName: null,
|
||||
mostRecentVerifiedName: {},
|
||||
verifiedNameHistory: {},
|
||||
countriesCodesList: [],
|
||||
disabledCountries: ['RU'],
|
||||
};
|
||||
|
||||
const reducer = (state = defaultState, action = {}) => {
|
||||
@@ -65,7 +65,6 @@ const reducer = (state = defaultState, action = {}) => {
|
||||
loaded: true,
|
||||
loadingError: null,
|
||||
verifiedNameHistory: action.payload.verifiedNameHistory,
|
||||
countriesCodesList: action.payload.countriesCodesList,
|
||||
};
|
||||
case FETCH_SETTINGS.FAILURE:
|
||||
return {
|
||||
|
||||
@@ -53,7 +53,7 @@ export function* handleFetchSettings() {
|
||||
const { username, userId, roles: userRoles } = getAuthenticatedUser();
|
||||
|
||||
const {
|
||||
thirdPartyAuthProviders, profileDataManager, timeZones, countries, ...values
|
||||
thirdPartyAuthProviders, profileDataManager, timeZones, ...values
|
||||
} = yield call(
|
||||
getSettings,
|
||||
username,
|
||||
@@ -71,7 +71,6 @@ export function* handleFetchSettings() {
|
||||
profileDataManager,
|
||||
timeZones,
|
||||
verifiedNameHistory,
|
||||
countriesCodesList: countries,
|
||||
}));
|
||||
} catch (e) {
|
||||
yield put(fetchSettingsFailure(e.message));
|
||||
|
||||
@@ -88,11 +88,6 @@ const previousSiteLanguageSelector = createSelector(
|
||||
accountSettings => accountSettings.previousSiteLanguage,
|
||||
);
|
||||
|
||||
const countriesSelector = createSelector(
|
||||
accountSettingsSelector,
|
||||
accountSettings => accountSettings.countriesCodesList,
|
||||
);
|
||||
|
||||
const editableFieldErrorSelector = createSelector(
|
||||
editableFieldNameSelector,
|
||||
accountSettingsSelector,
|
||||
@@ -211,6 +206,11 @@ const activeAccountSelector = createSelector(
|
||||
accountSettings => accountSettings.values.is_active,
|
||||
);
|
||||
|
||||
const disabledCountriesSelector = createSelector(
|
||||
accountSettingsSelector,
|
||||
accountSettings => accountSettings.disabledCountries,
|
||||
);
|
||||
|
||||
export const siteLanguageSelector = createSelector(
|
||||
previousSiteLanguageSelector,
|
||||
draftsSelector,
|
||||
@@ -242,7 +242,7 @@ export const accountSettingsPageSelector = createSelector(
|
||||
mostRecentApprovedVerifiedNameValueSelector,
|
||||
mostRecentVerifiedNameSelector,
|
||||
sortedVerifiedNameHistorySelector,
|
||||
countriesSelector,
|
||||
disabledCountriesSelector,
|
||||
(
|
||||
accountSettings,
|
||||
siteLanguageOptions,
|
||||
@@ -260,7 +260,7 @@ export const accountSettingsPageSelector = createSelector(
|
||||
verifiedName,
|
||||
mostRecentVerifiedName,
|
||||
verifiedNameHistory,
|
||||
countriesCodesList,
|
||||
disabledCountries,
|
||||
) => ({
|
||||
siteLanguageOptions,
|
||||
siteLanguage,
|
||||
@@ -281,7 +281,7 @@ export const accountSettingsPageSelector = createSelector(
|
||||
verifiedName,
|
||||
mostRecentVerifiedName,
|
||||
verifiedNameHistory,
|
||||
countriesCodesList,
|
||||
disabledCountries,
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
import pick from 'lodash.pick';
|
||||
import omit from 'lodash.omit';
|
||||
import isEmpty from 'lodash.isempty';
|
||||
@@ -8,10 +7,9 @@ import isEmpty from 'lodash.isempty';
|
||||
import { handleRequestError, unpackFieldErrors } from './utils';
|
||||
import { getThirdPartyAuthProviders } from '../third-party-auth';
|
||||
import { postVerifiedNameConfig } from '../certificate-preference/data/service';
|
||||
import { FIELD_LABELS } from './constants';
|
||||
|
||||
const SOCIAL_PLATFORMS = [
|
||||
{ id: 'xTwitter', key: 'social_link_x' },
|
||||
{ id: 'twitter', key: 'social_link_twitter' },
|
||||
{ id: 'facebook', key: 'social_link_facebook' },
|
||||
{ id: 'linkedin', key: 'social_link_linkedin' },
|
||||
];
|
||||
@@ -188,24 +186,6 @@ export async function postVerifiedName(data) {
|
||||
.catch(error => handleRequestError(error));
|
||||
}
|
||||
|
||||
function extractCountryList(data) {
|
||||
return data?.fields
|
||||
.find(({ name }) => name === FIELD_LABELS.COUNTRY)
|
||||
?.options?.map(({ value }) => (value)) || [];
|
||||
}
|
||||
|
||||
export async function getCountryList() {
|
||||
const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
|
||||
|
||||
try {
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return extractCountryList(data);
|
||||
} catch (e) {
|
||||
logError(e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A single function to GET everything considered a setting. Currently encapsulates Account, Preferences, and
|
||||
* ThirdPartyAuth.
|
||||
@@ -217,14 +197,12 @@ export async function getSettings(username, userRoles) {
|
||||
thirdPartyAuthProviders,
|
||||
profileDataManager,
|
||||
timeZones,
|
||||
countries,
|
||||
] = await Promise.all([
|
||||
getAccount(username),
|
||||
getPreferences(username),
|
||||
getThirdPartyAuthProviders(),
|
||||
getProfileDataManager(username, userRoles),
|
||||
getTimeZones(),
|
||||
getCountryList(),
|
||||
]);
|
||||
|
||||
return {
|
||||
@@ -233,7 +211,6 @@ export async function getSettings(username, userRoles) {
|
||||
thirdPartyAuthProviders,
|
||||
profileDataManager,
|
||||
timeZones,
|
||||
countries,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
import { FIELD_LABELS } from './constants';
|
||||
import {
|
||||
getAccount,
|
||||
patchAccount,
|
||||
getPreferences,
|
||||
patchPreferences,
|
||||
getTimeZones,
|
||||
getProfileDataManager,
|
||||
getVerifiedName,
|
||||
getVerifiedNameHistory,
|
||||
postVerifiedName,
|
||||
getCountryList,
|
||||
patchSettings,
|
||||
} from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('@edx/frontend-platform/logging');
|
||||
|
||||
const mockHttpClient = {
|
||||
get: jest.fn(),
|
||||
patch: jest.fn(),
|
||||
post: jest.fn(),
|
||||
};
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
|
||||
getConfig.mockReturnValue({ LMS_BASE_URL: 'http://lms.test' });
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('account service', () => {
|
||||
describe('getAccount', () => {
|
||||
it('returns unpacked account data', async () => {
|
||||
const apiResponse = {
|
||||
username: 'testuser',
|
||||
social_links: [{ platform: 'xTwitter', social_link: 'http://t' }],
|
||||
language_proficiencies: [{ code: 'en' }],
|
||||
};
|
||||
mockHttpClient.get.mockResolvedValue({ data: apiResponse });
|
||||
|
||||
const result = await getAccount('testuser');
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith('http://lms.test/api/user/v1/accounts/testuser');
|
||||
expect(result.social_link_x).toEqual('http://t');
|
||||
expect(result.language_proficiencies).toEqual('en');
|
||||
});
|
||||
});
|
||||
|
||||
describe('patchAccount', () => {
|
||||
it('sends packed commit data and returns unpacked response', async () => {
|
||||
const commit = { social_link_x: 'http://t' };
|
||||
const apiResponse = {
|
||||
username: 'testuser',
|
||||
social_links: [{ platform: 'xTwitter', social_link: 'http://t' }],
|
||||
language_proficiencies: [],
|
||||
};
|
||||
mockHttpClient.patch.mockResolvedValue({ data: apiResponse });
|
||||
|
||||
const result = await patchAccount('testuser', commit);
|
||||
expect(mockHttpClient.patch).toHaveBeenCalledWith(
|
||||
'http://lms.test/api/user/v1/accounts/testuser',
|
||||
expect.objectContaining({ social_links: [{ platform: 'xTwitter', social_link: 'http://t' }] }),
|
||||
expect.any(Object),
|
||||
);
|
||||
expect(result.social_link_x).toEqual('http://t');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getPreferences', () => {
|
||||
it('returns preferences data', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: { theme: 'dark' } });
|
||||
const result = await getPreferences('user');
|
||||
expect(result.theme).toBe('dark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('patchPreferences', () => {
|
||||
it('patches preferences and returns commitValues', async () => {
|
||||
mockHttpClient.patch.mockResolvedValue({});
|
||||
const commit = { time_zone: 'UTC' };
|
||||
const result = await patchPreferences('user', commit);
|
||||
expect(mockHttpClient.patch).toHaveBeenCalled();
|
||||
expect(result).toEqual(commit);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getTimeZones', () => {
|
||||
it('returns data from API', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: ['UTC', 'PST'] });
|
||||
const result = await getTimeZones('PK');
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith(
|
||||
'http://lms.test/user_api/v1/preferences/time_zones/',
|
||||
{ params: { country_code: 'PK' } },
|
||||
);
|
||||
expect(result).toEqual(['UTC', 'PST']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getProfileDataManager', () => {
|
||||
it('returns null if no enterprise manages profile', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: { results: [] } });
|
||||
const result = await getProfileDataManager('user', ['learner']);
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
it('returns enterprise name if sync is enabled', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: { results: [{ enterprise_customer: { name: 'Acme', sync_learner_profile_data: true } }] } });
|
||||
const result = await getProfileDataManager('user', ['enterprise_learner']);
|
||||
expect(result).toBe('Acme');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getVerifiedName', () => {
|
||||
it('returns verified name data', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: { verified: true } });
|
||||
const result = await getVerifiedName();
|
||||
expect(result.verified).toBe(true);
|
||||
});
|
||||
|
||||
it('returns {} on error', async () => {
|
||||
mockHttpClient.get.mockRejectedValue(new Error('fail'));
|
||||
const result = await getVerifiedName();
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getVerifiedNameHistory', () => {
|
||||
it('returns verified name history data', async () => {
|
||||
mockHttpClient.get.mockResolvedValue({ data: [{ id: 1 }] });
|
||||
const result = await getVerifiedNameHistory();
|
||||
expect(result[0].id).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('postVerifiedName', () => {
|
||||
it('posts verified name data', async () => {
|
||||
mockHttpClient.post.mockResolvedValue({});
|
||||
await postVerifiedName({ first_name: 'A' });
|
||||
expect(mockHttpClient.post).toHaveBeenCalledWith(
|
||||
'http://lms.test/api/edx_name_affirmation/v1/verified_name',
|
||||
{ first_name: 'A' },
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getCountryList', () => {
|
||||
it('extracts country values from registration API', async () => {
|
||||
const apiResponse = { fields: [{ name: FIELD_LABELS.COUNTRY, options: [{ value: 'PK' }] }] };
|
||||
mockHttpClient.get.mockResolvedValue({ data: apiResponse });
|
||||
const result = await getCountryList();
|
||||
expect(result).toEqual(['PK']);
|
||||
});
|
||||
|
||||
it('returns [] and logs error on failure', async () => {
|
||||
mockHttpClient.get.mockRejectedValue(new Error('fail'));
|
||||
const result = await getCountryList();
|
||||
expect(result).toEqual([]);
|
||||
expect(logError).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('patchSettings', () => {
|
||||
it('calls patchAccount and patchPreferences as needed', async () => {
|
||||
mockHttpClient.patch.mockResolvedValue({
|
||||
data: {
|
||||
username: 'user',
|
||||
social_links: [],
|
||||
language_proficiencies: [],
|
||||
},
|
||||
});
|
||||
|
||||
const result = await patchSettings('user', { time_zone: 'UTC', social_link_twitter: 't' });
|
||||
expect(result.username).toBe('user');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Hyperlink } from '@openedx/paragon';
|
||||
@@ -12,8 +13,7 @@ import messages from './messages';
|
||||
import Alert from '../Alert';
|
||||
|
||||
const BeforeProceedingBanner = (props) => {
|
||||
const { instructionMessageId, supportArticleUrl } = props;
|
||||
const intl = useIntl();
|
||||
const { instructionMessageId, intl, supportArticleUrl } = props;
|
||||
|
||||
return (
|
||||
<Alert
|
||||
@@ -41,7 +41,8 @@ const BeforeProceedingBanner = (props) => {
|
||||
|
||||
BeforeProceedingBanner.propTypes = {
|
||||
instructionMessageId: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
supportArticleUrl: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default BeforeProceedingBanner;
|
||||
export default injectIntl(BeforeProceedingBanner);
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
jest.mock('react-dom', () => ({
|
||||
...jest.requireActual('react-dom'),
|
||||
createPortal: jest.fn(node => node), // Mock portal behavior
|
||||
}));
|
||||
ReactDOM.createPortal = node => node;
|
||||
|
||||
import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first
|
||||
|
||||
const IntlBeforeProceedingBanner = injectIntl(BeforeProceedingBanner);
|
||||
|
||||
describe('BeforeProceedingBanner', () => {
|
||||
it('should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link', () => {
|
||||
const props = {
|
||||
instructionMessageId: 'account.settings.delete.account.please.unlink',
|
||||
intl: createIntl({ locale: 'en' }),
|
||||
supportArticleUrl: '',
|
||||
};
|
||||
const tree = renderer
|
||||
.create((
|
||||
<IntlProvider locale="en">
|
||||
<BeforeProceedingBanner
|
||||
<IntlBeforeProceedingBanner
|
||||
{...props}
|
||||
/>
|
||||
</IntlProvider>
|
||||
@@ -29,12 +31,13 @@ describe('BeforeProceedingBanner', () => {
|
||||
it('should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link', () => {
|
||||
const props = {
|
||||
instructionMessageId: 'account.settings.delete.account.please.unlink',
|
||||
intl: createIntl({ locale: 'en' }),
|
||||
supportArticleUrl: 'http://test-support.edx',
|
||||
};
|
||||
const tree = renderer
|
||||
.create((
|
||||
<IntlProvider locale="en">
|
||||
<BeforeProceedingBanner
|
||||
<IntlBeforeProceedingBanner
|
||||
{...props}
|
||||
/>
|
||||
</IntlProvider>
|
||||
|
||||
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
AlertModal,
|
||||
Button, Form, ActionRow,
|
||||
Button, Input, ValidationFormGroup, ActionRow,
|
||||
} from '@openedx/paragon';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
||||
@@ -78,11 +78,10 @@ export class ConfirmationModal extends Component {
|
||||
isOpen={open}
|
||||
title={intl.formatMessage(messages['account.settings.delete.account.modal.header'])}
|
||||
onClose={onCancel}
|
||||
isOverflowVisible
|
||||
footerNode={(
|
||||
<ActionRow>
|
||||
<Button variant="link" onClick={onCancel}>{intl.formatMessage(messages['account.settings.delete.account.modal.confirm.cancel'])}</Button>
|
||||
<Button variant="danger" onClick={onSubmit}>{intl.formatMessage(messages['account.settings.delete.account.modal.confirm.delete'])}</Button>
|
||||
<Button variant="link" onClick={onCancel}>Cancel</Button>
|
||||
<Button variant="danger" onClick={onSubmit}>Yes, Delete</Button>
|
||||
</ActionRow>
|
||||
)}
|
||||
>
|
||||
@@ -108,26 +107,22 @@ export class ConfirmationModal extends Component {
|
||||
<PrintingInstructions />
|
||||
</p>
|
||||
</Alert>
|
||||
<Form.Group
|
||||
<ValidationFormGroup
|
||||
for={passwordFieldId}
|
||||
isInvalid={errorType !== null}
|
||||
invalid={errorType !== null}
|
||||
invalidMessage={intl.formatMessage(invalidMessage)}
|
||||
>
|
||||
<Form.Label className="d-block" htmlFor={passwordFieldId}>
|
||||
<label className="d-block" htmlFor={passwordFieldId}>
|
||||
{intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
|
||||
</Form.Label>
|
||||
<Form.Control
|
||||
</label>
|
||||
<Input
|
||||
name="password"
|
||||
id={passwordFieldId}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={onChange}
|
||||
/>
|
||||
{errorType !== null && (
|
||||
<Form.Control.Feedback type="invalid" feedback-for={passwordFieldId}>
|
||||
{intl.formatMessage(invalidMessage)}
|
||||
</Form.Control.Feedback>
|
||||
)}
|
||||
</Form.Group>
|
||||
</ValidationFormGroup>
|
||||
</div>
|
||||
|
||||
</AlertModal>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
// Modal creates a portal. Overriding createPortal allows portals to be tested in jest.
|
||||
jest.mock('react-dom', () => ({
|
||||
...jest.requireActual('react-dom'),
|
||||
createPortal: jest.fn(node => node), // Mock portal behavior
|
||||
}));
|
||||
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
|
||||
ReactDOM.createPortal = node => node;
|
||||
|
||||
import { ConfirmationModal } from './ConfirmationModal'; // eslint-disable-line import/first
|
||||
|
||||
|
||||
@@ -76,74 +76,67 @@ export class DeleteAccount extends React.Component {
|
||||
<h2 className="section-heading h4 mb-3">
|
||||
{intl.formatMessage(messages['account.settings.delete.account.header'])}
|
||||
</h2>
|
||||
{
|
||||
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}
|
||||
<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://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings">
|
||||
{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>
|
||||
|
||||
<ConnectedConfirmationModal
|
||||
status={status}
|
||||
errorType={errorType}
|
||||
onSubmit={this.handleSubmit}
|
||||
onCancel={this.handleCancel}
|
||||
onChange={this.handlePasswordChange}
|
||||
password={this.state.password}
|
||||
/>
|
||||
{isVerifiedAccount ? null : (
|
||||
<BeforeProceedingBanner
|
||||
instructionMessageId={optInInstructionMessageId}
|
||||
supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
|
||||
/>
|
||||
)}
|
||||
|
||||
<ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
|
||||
</>
|
||||
) : (
|
||||
<p>{intl.formatMessage(messages['account.settings.cannot.delete.account.text'])}</p>
|
||||
)
|
||||
}
|
||||
{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} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -159,7 +152,6 @@ DeleteAccount.propTypes = {
|
||||
errorType: PropTypes.oneOf(['empty-password', 'server']),
|
||||
hasLinkedTPA: PropTypes.bool,
|
||||
isVerifiedAccount: PropTypes.bool,
|
||||
canDeleteAccount: PropTypes.bool,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
@@ -168,7 +160,6 @@ DeleteAccount.defaultProps = {
|
||||
isVerifiedAccount: true,
|
||||
status: null,
|
||||
errorType: null,
|
||||
canDeleteAccount: true,
|
||||
};
|
||||
|
||||
// Assume we're part of the accountSettings state.
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import React from 'react';
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Hyperlink } from '@openedx/paragon';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import messages from './messages';
|
||||
|
||||
const PrintingInstructions = () => {
|
||||
const intl = useIntl();
|
||||
const PrintingInstructions = (props) => {
|
||||
const actionLink = (
|
||||
<Hyperlink
|
||||
// TODO: What would a generic version of this link look like? Should
|
||||
// CERTIFICATE_SHARING_HELP_URL really be a configuration variable? In the meantime,
|
||||
// We've removed the link from the default message.
|
||||
destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UVVOA2/certificates"
|
||||
destination="https://support.edx.org/hc/en-us/sections/115004173027-Receive-and-Share-edX-Certificates"
|
||||
>
|
||||
{intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
|
||||
{props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
|
||||
</Hyperlink>
|
||||
);
|
||||
|
||||
@@ -40,4 +40,8 @@ const PrintingInstructions = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default PrintingInstructions;
|
||||
PrintingInstructions.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(PrintingInstructions);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { ModalLayer, ModalCloseButton } from '@openedx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
export const SuccessModal = (props) => {
|
||||
const intl = useIntl();
|
||||
const { status, onClose } = props;
|
||||
const { status, intl, onClose } = props;
|
||||
return (
|
||||
|
||||
<ModalLayer isOpen={status === 'deleted'} onClose={onClose}>
|
||||
@@ -20,7 +20,7 @@ export const SuccessModal = (props) => {
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<ModalCloseButton className="float-right" variant="link">{intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])}</ModalCloseButton>
|
||||
<ModalCloseButton className="float-right" variant="link">Close</ModalCloseButton>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -31,6 +31,7 @@ export const SuccessModal = (props) => {
|
||||
|
||||
SuccessModal.propTypes = {
|
||||
status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),
|
||||
intl: intlShape.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
@@ -38,4 +39,4 @@ SuccessModal.defaultProps = {
|
||||
status: null,
|
||||
};
|
||||
|
||||
export default SuccessModal;
|
||||
export default injectIntl(SuccessModal);
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { waitFor } from '@testing-library/react';
|
||||
import { SuccessModal } from './SuccessModal';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
// Modal creates a portal. Overriding createPortal allows portals to be tested in jest.
|
||||
jest.mock('react-dom', () => ({
|
||||
...jest.requireActual('react-dom'),
|
||||
createPortal: jest.fn(node => node), // Mock portal behavior
|
||||
}));
|
||||
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
|
||||
ReactDOM.createPortal = node => node;
|
||||
|
||||
import { SuccessModal } from './SuccessModal'; // eslint-disable-line import/first
|
||||
|
||||
const IntlSuccessModal = injectIntl(SuccessModal);
|
||||
|
||||
describe('SuccessModal', () => {
|
||||
let props = {};
|
||||
@@ -19,40 +20,39 @@ describe('SuccessModal', () => {
|
||||
};
|
||||
});
|
||||
|
||||
it('should match default closed success modal snapshot', async () => {
|
||||
await waitFor(() => {
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en"><SuccessModal {...props} /></IntlProvider>)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
await waitFor(() => {
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en"><SuccessModal {...props} status="confirming" /></IntlProvider>)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
await waitFor(() => {
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en"><SuccessModal {...props} status="pending" /></IntlProvider>)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
await waitFor(() => {
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en"><SuccessModal {...props} status="failed" /></IntlProvider>)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('should match default closed success modal snapshot', () => {
|
||||
let tree = renderer.create((
|
||||
<IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>))
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
tree = renderer.create((
|
||||
<IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>))
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
tree = renderer.create((
|
||||
<IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>))
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
tree = renderer.create((
|
||||
<IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>))
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should match open success modal snapshot', async () => {
|
||||
await waitFor(() => {
|
||||
const tree = renderer.create(
|
||||
it('should match open success modal snapshot', () => {
|
||||
const tree = renderer
|
||||
.create((
|
||||
<IntlProvider locale="en">
|
||||
<SuccessModal
|
||||
<IntlSuccessModal
|
||||
{...props}
|
||||
status="deleted"
|
||||
status="deleted" // This will cause 'modal-backdrop' and 'show' to appear on the modal as CSS classes.
|
||||
/>
|
||||
</IntlProvider>,
|
||||
).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
</IntlProvider>
|
||||
))
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -57,6 +57,7 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="http://test-support.edx"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
unlink all social media accounts
|
||||
|
||||
@@ -38,11 +38,10 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
|
||||
data-testid="modal-backdrop"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[MockFunction]}
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
aria-label="Are you sure?"
|
||||
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
|
||||
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
@@ -132,57 +131,30 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pgn__form-group"
|
||||
for="passwordFieldId"
|
||||
className="form-group"
|
||||
data-testid="validation-form-group"
|
||||
>
|
||||
<label
|
||||
className="pgn__form-label d-block"
|
||||
htmlFor="form-field3"
|
||||
className="d-block"
|
||||
htmlFor="passwordFieldId"
|
||||
>
|
||||
If you still wish to continue and delete your account, please enter your account password:
|
||||
</label>
|
||||
<div
|
||||
className="pgn__form-control-decorator-group"
|
||||
<input
|
||||
aria-describedby="passwordFieldId-invalid-feedback"
|
||||
className="form-control is-invalid"
|
||||
id="passwordFieldId"
|
||||
name="password"
|
||||
onChange={[MockFunction]}
|
||||
type="password"
|
||||
value="fluffy bunnies"
|
||||
/>
|
||||
<strong
|
||||
className="invalid-feedback"
|
||||
id="passwordFieldId-invalid-feedback"
|
||||
>
|
||||
<input
|
||||
aria-describedby="form-field3-5"
|
||||
className="has-value form-control is-invalid"
|
||||
id="form-field3"
|
||||
name="password"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
type="password"
|
||||
value="fluffy bunnies"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
|
||||
feedback-for="passwordFieldId"
|
||||
id="form-field3-5"
|
||||
>
|
||||
<span
|
||||
className="pgn__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
fill="none"
|
||||
focusable={false}
|
||||
height={24}
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
A password is required
|
||||
</div>
|
||||
</div>
|
||||
A password is required
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -248,17 +220,15 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
tabIndex={0}
|
||||
tabIndex={-1}
|
||||
/>,
|
||||
<div
|
||||
className="pgn__modal-layer"
|
||||
data-focus-lock-disabled={false}
|
||||
data-focus-lock-disabled="disabled"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onScrollCapture={[Function]}
|
||||
onTouchMoveCapture={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
onWheelCapture={[Function]}
|
||||
>
|
||||
<div
|
||||
@@ -269,11 +239,10 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
|
||||
data-testid="modal-backdrop"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[MockFunction]}
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
aria-label="Are you sure?"
|
||||
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
|
||||
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
@@ -330,28 +299,30 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pgn__form-group"
|
||||
for="passwordFieldId"
|
||||
className="form-group"
|
||||
data-testid="validation-form-group"
|
||||
>
|
||||
<label
|
||||
className="pgn__form-label d-block"
|
||||
htmlFor="form-field1"
|
||||
className="d-block"
|
||||
htmlFor="passwordFieldId"
|
||||
>
|
||||
If you still wish to continue and delete your account, please enter your account password:
|
||||
</label>
|
||||
<div
|
||||
className="pgn__form-control-decorator-group"
|
||||
<input
|
||||
aria-describedby=""
|
||||
className="form-control"
|
||||
id="passwordFieldId"
|
||||
name="password"
|
||||
onChange={[MockFunction]}
|
||||
type="password"
|
||||
value="fluffy bunnies"
|
||||
/>
|
||||
<strong
|
||||
className="invalid-feedback"
|
||||
id="passwordFieldId-invalid-feedback"
|
||||
>
|
||||
<input
|
||||
className="has-value form-control"
|
||||
id="form-field1"
|
||||
name="password"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
type="password"
|
||||
value="fluffy bunnies"
|
||||
/>
|
||||
</div>
|
||||
Unable to delete account
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -397,7 +368,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
tabIndex={0}
|
||||
tabIndex={-1}
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
@@ -27,7 +27,8 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
|
||||
<p>
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
|
||||
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
Want to change your email, name, or password instead?
|
||||
@@ -73,7 +74,8 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
|
||||
<p>
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
|
||||
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
Want to change your email, name, or password instead?
|
||||
@@ -115,7 +117,8 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
|
||||
Before proceeding, please
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
|
||||
href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
activate your account
|
||||
@@ -153,7 +156,8 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
|
||||
<p>
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
|
||||
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
Want to change your email, name, or password instead?
|
||||
@@ -195,7 +199,8 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
|
||||
Before proceeding, please
|
||||
<a
|
||||
className="pgn__hyperlink default-link standalone-link"
|
||||
href="https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account"
|
||||
href="https://support.edx.org/hc/en-us/articles/207206067"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
unlink all social media accounts
|
||||
|
||||
@@ -23,17 +23,15 @@ exports[`SuccessModal should match open success modal snapshot 1`] = `
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
tabIndex={0}
|
||||
tabIndex={-1}
|
||||
/>,
|
||||
<div
|
||||
className="pgn__modal-layer"
|
||||
data-focus-lock-disabled={false}
|
||||
data-focus-lock-disabled="disabled"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onScrollCapture={[Function]}
|
||||
onTouchMoveCapture={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
onWheelCapture={[Function]}
|
||||
>
|
||||
<div
|
||||
@@ -44,7 +42,6 @@ exports[`SuccessModal should match open success modal snapshot 1`] = `
|
||||
data-testid="modal-backdrop"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[MockFunction]}
|
||||
role="presentation"
|
||||
/>
|
||||
<div
|
||||
className="mw-sm p-5 bg-white mx-auto my-3"
|
||||
@@ -87,7 +84,7 @@ exports[`SuccessModal should match open success modal snapshot 1`] = `
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
tabIndex={0}
|
||||
tabIndex={-1}
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import formurlencoded from 'form-urlencoded';
|
||||
import { handleRequestError } from '../../data/utils';
|
||||
|
||||
import { postDeleteAccount } from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('form-urlencoded');
|
||||
jest.mock('../../data/utils');
|
||||
|
||||
describe('postDeleteAccount', () => {
|
||||
const mockPost = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({
|
||||
LMS_BASE_URL: 'http://testserver',
|
||||
});
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue({
|
||||
post: mockPost,
|
||||
});
|
||||
|
||||
formurlencoded.mockImplementation(obj => `encoded:${JSON.stringify(obj)}`);
|
||||
});
|
||||
|
||||
it('posts delete account request with password', async () => {
|
||||
const mockResponse = { data: { success: true } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const result = await postDeleteAccount('mypassword');
|
||||
|
||||
expect(getConfig).toHaveBeenCalled();
|
||||
expect(getAuthenticatedHttpClient).toHaveBeenCalled();
|
||||
expect(formurlencoded).toHaveBeenCalledWith({ password: 'mypassword' });
|
||||
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/api/user/v1/accounts/deactivate_logout/',
|
||||
'encoded:{"password":"mypassword"}',
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('calls handleRequestError and throws when request fails', async () => {
|
||||
const mockError = new Error('Request failed');
|
||||
mockPost.mockRejectedValueOnce(mockError);
|
||||
|
||||
handleRequestError.mockImplementation(() => {
|
||||
throw mockError;
|
||||
});
|
||||
|
||||
await expect(postDeleteAccount('wrongpassword')).rejects.toThrow('Request failed');
|
||||
|
||||
expect(handleRequestError).toHaveBeenCalledWith(mockError);
|
||||
});
|
||||
});
|
||||
@@ -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 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',
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { connect, useDispatch } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
ActionRow,
|
||||
Alert,
|
||||
@@ -25,6 +25,7 @@ const NameChangeModal = ({
|
||||
targetFormId,
|
||||
errors,
|
||||
formValues,
|
||||
intl,
|
||||
saveState,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -32,7 +33,6 @@ const NameChangeModal = ({
|
||||
const { username } = getAuthenticatedUser();
|
||||
const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
|
||||
const [confirmedWarning, setConfirmedWarning] = useState(false);
|
||||
const intl = useIntl();
|
||||
|
||||
const resetLocalState = useCallback(() => {
|
||||
setConfirmedWarning(false);
|
||||
@@ -193,10 +193,11 @@ NameChangeModal.propTypes = {
|
||||
verified_name: PropTypes.string,
|
||||
}).isRequired,
|
||||
saveState: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
NameChangeModal.defaultProps = {
|
||||
saveState: null,
|
||||
};
|
||||
|
||||
export default connect(nameChangeSelector)(NameChangeModal);
|
||||
export default connect(nameChangeSelector)(injectIntl(NameChangeModal));
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { handleRequestError } from '../../data/utils';
|
||||
|
||||
import { postNameChange } from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('../../data/utils');
|
||||
|
||||
describe('postNameChange', () => {
|
||||
const mockPost = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({
|
||||
LMS_BASE_URL: 'http://testserver',
|
||||
});
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue({
|
||||
post: mockPost,
|
||||
});
|
||||
});
|
||||
|
||||
it('posts a name change request successfully', async () => {
|
||||
const mockResponse = { data: { success: true, updated: true } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const result = await postNameChange('New Name');
|
||||
|
||||
expect(getConfig).toHaveBeenCalled();
|
||||
expect(getAuthenticatedHttpClient).toHaveBeenCalled();
|
||||
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/api/user/v1/accounts/name_change/',
|
||||
{ name: 'New Name' },
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('calls handleRequestError and throws when request fails', async () => {
|
||||
const mockError = new Error('Request failed');
|
||||
mockPost.mockRejectedValueOnce(mockError);
|
||||
|
||||
handleRequestError.mockImplementation(() => {
|
||||
throw mockError;
|
||||
});
|
||||
|
||||
await expect(postNameChange('Bad Name')).rejects.toThrow('Request failed');
|
||||
|
||||
expect(handleRequestError).toHaveBeenCalledWith(mockError);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,6 @@
|
||||
/* eslint-disable no-import-assign */
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import configureStore from 'redux-mock-store';
|
||||
@@ -9,13 +11,10 @@ import {
|
||||
} from '@testing-library/react';
|
||||
|
||||
import * as auth from '@edx/frontend-platform/auth';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
// Modal creates a portal. Overriding createPortal allows portals to be tested in jest.
|
||||
jest.mock('react-dom', () => ({
|
||||
...jest.requireActual('react-dom'),
|
||||
createPortal: jest.fn(node => node), // Mock portal behavior
|
||||
}));
|
||||
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
|
||||
ReactDOM.createPortal = node => node;
|
||||
|
||||
import NameChange from '../NameChange'; // eslint-disable-line import/first
|
||||
|
||||
@@ -28,6 +27,8 @@ jest.mock('react-redux', () => ({
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));
|
||||
|
||||
const IntlNameChange = injectIntl(NameChange);
|
||||
|
||||
const mockStore = configureStore();
|
||||
|
||||
describe('NameChange', () => {
|
||||
@@ -52,6 +53,7 @@ describe('NameChange', () => {
|
||||
verified_name: 'edX Verified',
|
||||
},
|
||||
saveState: null,
|
||||
intl: {},
|
||||
};
|
||||
|
||||
auth.getAuthenticatedHttpClient = jest.fn(() => ({
|
||||
@@ -68,7 +70,7 @@ describe('NameChange', () => {
|
||||
it('renders populated input after clicking continue if verified_name in form data', async () => {
|
||||
const getInput = () => screen.queryByPlaceholderText('Enter the name on your photo ID');
|
||||
|
||||
render(reduxWrapper(<NameChange {...props} />));
|
||||
render(reduxWrapper(<IntlNameChange {...props} />));
|
||||
expect(getInput()).toBeNull();
|
||||
|
||||
const continueButton = screen.getByText('Continue');
|
||||
@@ -85,7 +87,7 @@ describe('NameChange', () => {
|
||||
name: 'edx edx',
|
||||
},
|
||||
};
|
||||
render(reduxWrapper(<NameChange {...formProps} />));
|
||||
render(reduxWrapper(<IntlNameChange {...formProps} />));
|
||||
|
||||
const continueButton = screen.getByText('Continue');
|
||||
fireEvent.click(continueButton);
|
||||
@@ -103,7 +105,7 @@ describe('NameChange', () => {
|
||||
type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
|
||||
};
|
||||
|
||||
render(reduxWrapper(<NameChange {...props} />));
|
||||
render(reduxWrapper(<IntlNameChange {...props} />));
|
||||
|
||||
const continueButton = screen.getByText('Continue');
|
||||
fireEvent.click(continueButton);
|
||||
@@ -130,7 +132,7 @@ describe('NameChange', () => {
|
||||
targetFormId: 'name',
|
||||
};
|
||||
|
||||
render(reduxWrapper(<NameChange {...formProps} />));
|
||||
render(reduxWrapper(<IntlNameChange {...formProps} />));
|
||||
|
||||
const continueButton = screen.getByText('Continue');
|
||||
fireEvent.click(continueButton);
|
||||
@@ -146,7 +148,7 @@ describe('NameChange', () => {
|
||||
it('does not dispatch action while pending', async () => {
|
||||
props.saveState = 'pending';
|
||||
|
||||
render(reduxWrapper(<NameChange {...props} />));
|
||||
render(reduxWrapper(<IntlNameChange {...props} />));
|
||||
|
||||
const continueButton = screen.getByText('Continue');
|
||||
fireEvent.click(continueButton);
|
||||
@@ -162,7 +164,7 @@ describe('NameChange', () => {
|
||||
it('routes to IDV when name change request is successful', async () => {
|
||||
props.saveState = 'complete';
|
||||
|
||||
render(reduxWrapper(<NameChange {...props} />));
|
||||
render(reduxWrapper(<IntlNameChange {...props} />));
|
||||
expect(window.location.pathname).toEqual('/id-verification');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { StatefulButton } from '@openedx/paragon';
|
||||
|
||||
import { resetPassword } from './data/actions';
|
||||
@@ -9,9 +10,7 @@ import ConfirmationAlert from './ConfirmationAlert';
|
||||
import RequestInProgressAlert from './RequestInProgressAlert';
|
||||
|
||||
const ResetPassword = (props) => {
|
||||
const { email, status } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
const { email, intl, status } = props;
|
||||
return (
|
||||
<div className="form-group">
|
||||
<h6 aria-level="3">
|
||||
@@ -52,6 +51,7 @@ const ResetPassword = (props) => {
|
||||
|
||||
ResetPassword.propTypes = {
|
||||
email: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
resetPassword: PropTypes.func.isRequired,
|
||||
status: PropTypes.string,
|
||||
};
|
||||
@@ -68,4 +68,4 @@ export default connect(
|
||||
{
|
||||
resetPassword,
|
||||
},
|
||||
)(ResetPassword);
|
||||
)(injectIntl(ResetPassword));
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import formurlencoded from 'form-urlencoded';
|
||||
import { handleRequestError } from '../../data/utils';
|
||||
|
||||
import { postResetPassword } from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('form-urlencoded');
|
||||
jest.mock('../../data/utils');
|
||||
|
||||
describe('postResetPassword', () => {
|
||||
const mockPost = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({
|
||||
LMS_BASE_URL: 'http://testserver',
|
||||
});
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue({
|
||||
post: mockPost,
|
||||
});
|
||||
|
||||
formurlencoded.mockImplementation(obj => `encoded:${JSON.stringify(obj)}`);
|
||||
});
|
||||
|
||||
it('posts reset password request with email', async () => {
|
||||
const mockResponse = { data: { success: true, email_sent: true } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const result = await postResetPassword('user@example.com');
|
||||
|
||||
expect(getConfig).toHaveBeenCalled();
|
||||
expect(getAuthenticatedHttpClient).toHaveBeenCalled();
|
||||
expect(formurlencoded).toHaveBeenCalledWith({ email: 'user@example.com' });
|
||||
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/password_reset/',
|
||||
'encoded:{"email":"user@example.com"}',
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('calls handleRequestError and throws when request fails', async () => {
|
||||
const mockError = new Error('Reset password failed');
|
||||
mockPost.mockRejectedValueOnce(mockError);
|
||||
|
||||
handleRequestError.mockImplementation(() => {
|
||||
throw mockError;
|
||||
});
|
||||
|
||||
await expect(postResetPassword('bad@example.com')).rejects.toThrow('Reset password failed');
|
||||
|
||||
expect(handleRequestError).toHaveBeenCalledWith(mockError);
|
||||
});
|
||||
});
|
||||
@@ -23,15 +23,10 @@ export async function patchPreferences(username, params) {
|
||||
|
||||
export async function postSetLang(code) {
|
||||
const formData = new FormData();
|
||||
const requestConfig = {
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
};
|
||||
const url = `${getConfig().LMS_BASE_URL}/i18n/setlang/`;
|
||||
formData.append('language', code);
|
||||
|
||||
await getAuthenticatedHttpClient()
|
||||
.post(url, formData, requestConfig);
|
||||
.post(`${getConfig().LMS_BASE_URL}/i18n/setlang/`, formData, {
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { convertKeyNames, snakeCaseObject } from '@edx/frontend-platform/utils';
|
||||
|
||||
import { getSiteLanguageList, patchPreferences, postSetLang } from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('@edx/frontend-platform/utils');
|
||||
jest.mock('./constants', () => (['en', 'es', 'fr']));
|
||||
|
||||
describe('preferencesApi', () => {
|
||||
const mockPatch = jest.fn();
|
||||
const mockPost = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({
|
||||
LMS_BASE_URL: 'http://testserver',
|
||||
});
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue({
|
||||
patch: mockPatch,
|
||||
post: mockPost,
|
||||
});
|
||||
|
||||
snakeCaseObject.mockImplementation(obj => obj);
|
||||
convertKeyNames.mockImplementation((obj) => obj);
|
||||
});
|
||||
|
||||
describe('getSiteLanguageList', () => {
|
||||
it('returns the siteLanguageList constant', async () => {
|
||||
const result = await getSiteLanguageList();
|
||||
expect(result).toEqual(['en', 'es', 'fr']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('patchPreferences', () => {
|
||||
it('patches preferences with processed params and returns the original params', async () => {
|
||||
const username = 'testuser';
|
||||
const params = { prefLang: 'en', darkMode: true };
|
||||
const processed = { 'pref-lang': 'en', dark_mode: true };
|
||||
|
||||
// Mock conversions
|
||||
snakeCaseObject.mockReturnValueOnce({ pref_lang: 'en', dark_mode: true });
|
||||
convertKeyNames.mockReturnValueOnce(processed);
|
||||
|
||||
mockPatch.mockResolvedValueOnce({ data: { success: true } });
|
||||
|
||||
const result = await patchPreferences(username, params);
|
||||
|
||||
expect(snakeCaseObject).toHaveBeenCalledWith(params);
|
||||
expect(convertKeyNames).toHaveBeenCalledWith(
|
||||
{ pref_lang: 'en', dark_mode: true },
|
||||
{ pref_lang: 'pref-lang' },
|
||||
);
|
||||
|
||||
expect(mockPatch).toHaveBeenCalledWith(
|
||||
'http://testserver/api/user/v1/preferences/testuser',
|
||||
processed,
|
||||
{
|
||||
headers: { 'Content-Type': 'application/merge-patch+json' },
|
||||
},
|
||||
);
|
||||
|
||||
expect(result).toEqual(params);
|
||||
});
|
||||
});
|
||||
|
||||
describe('postSetLang', () => {
|
||||
it('posts language selection via FormData', async () => {
|
||||
const mockResponse = { data: { success: true } };
|
||||
mockPost.mockResolvedValueOnce(mockResponse);
|
||||
|
||||
const appendSpy = jest.spyOn(FormData.prototype, 'append');
|
||||
|
||||
await postSetLang('fr');
|
||||
|
||||
expect(appendSpy).toHaveBeenCalledWith('language', 'fr');
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'http://testserver/i18n/setlang/',
|
||||
expect.any(FormData),
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
appendSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -11,12 +11,11 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import AccountSettingsPage from '../AccountSettingsPage';
|
||||
import mockData from './mockData';
|
||||
import messages from '../AccountSettingsPage.messages';
|
||||
|
||||
const mockDispatch = jest.fn();
|
||||
jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackingLogEvent: jest.fn(),
|
||||
getCountryList: jest.fn(() => [{ code: 'US', name: 'United States' }]),
|
||||
getCountryList: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
@@ -26,19 +25,6 @@ jest.mock('react-redux', () => ({
|
||||
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
|
||||
jest.mock('@edx/frontend-platform', () => ({
|
||||
...jest.requireActual('@edx/frontend-platform'),
|
||||
getConfig: jest.fn(() => ({
|
||||
SITE_NAME: 'edX',
|
||||
SUPPORT_URL: 'https://support.edx.org',
|
||||
ENABLE_ACCOUNT_DELETION: true,
|
||||
ENABLE_COPPA_COMPLIANCE: false,
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
|
||||
})),
|
||||
getCountryList: jest.fn(() => [{ code: 'US', name: 'United States' }]),
|
||||
getLanguageList: jest.fn(() => [{ code: 'en', name: 'English' }]),
|
||||
}));
|
||||
|
||||
const IntlAccountSettingsPage = injectIntl(AccountSettingsPage);
|
||||
|
||||
const middlewares = [thunk];
|
||||
@@ -77,67 +63,14 @@ describe('AccountSettingsPage', () => {
|
||||
field_value: '',
|
||||
},
|
||||
],
|
||||
country: 'US',
|
||||
level_of_education: 'b',
|
||||
gender: 'm',
|
||||
language_proficiencies: 'es',
|
||||
social_link_linkedin: 'https://linkedin.com/in/testuser',
|
||||
social_link_facebook: '',
|
||||
social_link_twitter: '',
|
||||
time_zone: 'America/New_York',
|
||||
state: 'NY',
|
||||
secondary_email_enabled: true,
|
||||
secondary_email: 'test_recovery@test.com',
|
||||
year_of_birth: '1990',
|
||||
|
||||
},
|
||||
fetchSettings: jest.fn(),
|
||||
fetchSiteLanguages: jest.fn(),
|
||||
fetchNotificationPreferences: jest.fn(),
|
||||
saveSettings: jest.fn(),
|
||||
updateDraft: jest.fn(),
|
||||
beginNameChange: jest.fn(),
|
||||
saveMultipleSettings: jest.fn(),
|
||||
timeZoneOptions: [
|
||||
{ label: 'America/New_York', value: 'America/New_York' },
|
||||
],
|
||||
countryTimeZoneOptions: [
|
||||
{ label: 'America/New_York', value: 'America/New_York' },
|
||||
],
|
||||
siteLanguageOptions: [
|
||||
{ label: 'English', value: 'en' },
|
||||
],
|
||||
tpaProviders: [
|
||||
{
|
||||
id: 'oa2-google-oauth2',
|
||||
name: 'Google',
|
||||
connected: false,
|
||||
accepts_logins: true,
|
||||
connectUrl: 'http://localhost:18000/auth/login/google-oauth2/',
|
||||
disconnectUrl: 'http://localhost:18000/auth/disconnect/google-oauth2/',
|
||||
},
|
||||
],
|
||||
isActive: true,
|
||||
staticFields: [],
|
||||
profileDataManager: null,
|
||||
verifiedName: null,
|
||||
mostRecentVerifiedName: {},
|
||||
verifiedNameHistory: [],
|
||||
countriesCodesList: ['US'],
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => jest.clearAllMocks());
|
||||
|
||||
beforeAll(() => {
|
||||
global.lightningjs = {
|
||||
require: jest.fn().mockImplementation((module, url) => ({ moduleName: module, url })),
|
||||
};
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
delete global.lightningjs;
|
||||
});
|
||||
|
||||
it('renders AccountSettingsPage correctly with editing enabled', async () => {
|
||||
const { getByText, rerender, getByLabelText } = render(reduxWrapper(<IntlAccountSettingsPage {...props} />));
|
||||
|
||||
@@ -165,70 +98,4 @@ describe('AccountSettingsPage', () => {
|
||||
|
||||
fireEvent.click(submitButton);
|
||||
});
|
||||
|
||||
it('renders Account Information section with correct field values', () => {
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.getByText('test_username')).toBeInTheDocument();
|
||||
expect(screen.getByText('test_name')).toBeInTheDocument();
|
||||
expect(screen.getByText('test_email@test.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('test_recovery@test.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('1990')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Profile Information section with correct field values', () => {
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.getByText('Bachelor\'s Degree')).toBeInTheDocument();
|
||||
expect(screen.getByText('Male')).toBeInTheDocument();
|
||||
expect(screen.getByText('Add work experience')).toBeInTheDocument();
|
||||
expect(screen.getByText('English')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Social Media section with correct field values', () => {
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.getByText('https://linkedin.com/in/testuser')).toBeInTheDocument();
|
||||
expect(screen.getByText('Add Facebook profile')).toBeInTheDocument();
|
||||
expect(screen.getByText(messages['account.settings.field.social.platform.name.xTwitter.empty'].defaultMessage)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Site Preferences section with correct field values', () => {
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.getByText('English')).toBeInTheDocument();
|
||||
expect(screen.getByText('America/New_York')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Delete Account section when enabled', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const { getConfig } = require('@edx/frontend-platform');
|
||||
jest.spyOn({ getConfig }, 'getConfig').mockImplementation(() => ({
|
||||
SITE_NAME: 'edX',
|
||||
SUPPORT_URL: 'https://support.edx.org',
|
||||
ENABLE_ACCOUNT_DELETION: true,
|
||||
ENABLE_COPPA_COMPLIANCE: false,
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
|
||||
}));
|
||||
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.getByText('We\'re sorry to see you go!')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render Delete Account section when disabled', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const { getConfig } = require('@edx/frontend-platform');
|
||||
jest.spyOn({ getConfig }, 'getConfig').mockImplementation(() => ({
|
||||
SITE_NAME: 'edX',
|
||||
SUPPORT_URL: 'https://support.edx.org',
|
||||
ENABLE_ACCOUNT_DELETION: false,
|
||||
ENABLE_COPPA_COMPLIANCE: false,
|
||||
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
|
||||
}));
|
||||
|
||||
render(reduxWrapper(<AccountSettingsPage {...props} />));
|
||||
|
||||
expect(screen.queryByText('We\'re sorry to see you go!')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import {
|
||||
render, screen, fireEvent, waitFor,
|
||||
} from '@testing-library/react';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import * as reactRedux from 'react-redux';
|
||||
import DOBModal from '../DOBForm';
|
||||
import messages from '../AccountSettingsPage.messages';
|
||||
import { YEAR_OF_BIRTH_OPTIONS } from '../data/constants';
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
...jest.requireActual('react-redux'),
|
||||
useDispatch: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('@edx/frontend-platform/i18n', () => ({
|
||||
...jest.requireActual('@edx/frontend-platform/i18n'),
|
||||
useIntl: () => ({
|
||||
formatMessage: (message) => message.defaultMessage,
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@openedx/paragon', () => ({
|
||||
...jest.requireActual('@openedx/paragon'),
|
||||
Form: {
|
||||
...jest.requireActual('@openedx/paragon').Form,
|
||||
Control: {
|
||||
...jest.requireActual('@openedx/paragon').Form.Control,
|
||||
// eslint-disable-next-line react/prop-types
|
||||
Feedback: ({ children, ...props }) => <div {...props}>{children}</div>,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const mockStore = configureStore([]);
|
||||
|
||||
describe('DOBModal', () => {
|
||||
let store;
|
||||
let mockDispatch;
|
||||
|
||||
beforeEach(() => {
|
||||
store = mockStore({
|
||||
accountSettings: {
|
||||
saveState: 'default',
|
||||
errors: {},
|
||||
openFormId: null,
|
||||
confirmationValues: {},
|
||||
},
|
||||
});
|
||||
mockDispatch = jest.fn();
|
||||
jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch); // ✅ replaced require with import
|
||||
// Mock localStorage.setItem
|
||||
Object.defineProperty(window, 'localStorage', {
|
||||
value: {
|
||||
setItem: jest.fn(),
|
||||
},
|
||||
writable: true,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
const renderComponent = (props = {}) => render(
|
||||
<Provider store={store}>
|
||||
<IntlProvider locale="en">
|
||||
<DOBModal
|
||||
saveState="default"
|
||||
error={undefined}
|
||||
onSubmit={jest.fn()}
|
||||
{...props}
|
||||
/>
|
||||
</IntlProvider>
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
it('renders the modal with correct elements', async () => {
|
||||
renderComponent();
|
||||
const openButton = screen.getByTestId('open-modal-button');
|
||||
expect(openButton).toHaveTextContent(messages['account.settings.field.dob.form.button'].defaultMessage);
|
||||
|
||||
fireEvent.click(openButton);
|
||||
|
||||
expect(screen.getByTestId('modal-title')).toHaveTextContent(messages['account.settings.field.dob.form.title'].defaultMessage);
|
||||
expect(screen.getByTestId('help-text')).toHaveTextContent(messages['account.settings.field.dob.form.help.text'].defaultMessage);
|
||||
expect(screen.getByTestId('month-label')).toHaveTextContent(messages['account.settings.field.dob.month'].defaultMessage);
|
||||
expect(screen.getByTestId('year-label')).toHaveTextContent(messages['account.settings.field.dob.year'].defaultMessage);
|
||||
expect(screen.getByTestId('month-select')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('year-select')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('submit-button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('enables submit button when both month and year are selected', async () => {
|
||||
renderComponent();
|
||||
const openButton = screen.getByTestId('open-modal-button');
|
||||
await act(async () => {
|
||||
fireEvent.click(openButton);
|
||||
});
|
||||
await waitFor(() => {
|
||||
const monthSelect = screen.getByTestId('month-select');
|
||||
const yearSelect = screen.getByTestId('year-select');
|
||||
const submitButton = screen.getByTestId('submit-button');
|
||||
|
||||
act(() => {
|
||||
fireEvent.change(monthSelect, { target: { value: '6' } });
|
||||
fireEvent.change(yearSelect, { target: { value: YEAR_OF_BIRTH_OPTIONS[0].value } });
|
||||
});
|
||||
|
||||
expect(submitButton).not.toHaveAttribute('disabled');
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('calls onSubmit with correct data when form is submitted', async () => {
|
||||
const mockOnSubmit = jest.fn();
|
||||
renderComponent({ onSubmit: mockOnSubmit });
|
||||
|
||||
const openButton = screen.getByTestId('open-modal-button');
|
||||
await act(async () => {
|
||||
fireEvent.click(openButton);
|
||||
});
|
||||
await waitFor(() => {
|
||||
const monthSelect = screen.getByTestId('month-select');
|
||||
const yearSelect = screen.getByTestId('year-select');
|
||||
const form = screen.getByTestId('dob-form');
|
||||
|
||||
act(() => {
|
||||
fireEvent.change(monthSelect, { target: { value: '6' } });
|
||||
fireEvent.change(yearSelect, { target: { value: '1990' } });
|
||||
});
|
||||
|
||||
act(() => {
|
||||
fireEvent.submit(form);
|
||||
});
|
||||
|
||||
expect(mockOnSubmit).toHaveBeenCalledWith('extended_profile', [
|
||||
{ field_name: 'DOB', field_value: '1990-6' },
|
||||
]);
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
});
|
||||
@@ -1,184 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
render, screen, fireEvent, waitFor,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import { Provider } from 'react-redux';
|
||||
import EditableField from '../EditableField';
|
||||
import messages from '../AccountSettingsPage.messages';
|
||||
|
||||
jest.mock('../data/selectors', () => ({
|
||||
editableFieldSelector: () => (state, props) => ({
|
||||
...state.accountSettings,
|
||||
isEditing: props.isEditing,
|
||||
error: props.error || state.accountSettings.errors[props.name],
|
||||
confirmationValue: props.confirmationValue || state.accountSettings.confirmationValues[props.name],
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('../data/actions', () => ({
|
||||
openForm: jest.fn((name) => ({ type: 'OPEN_FORM', payload: name })),
|
||||
closeForm: jest.fn((name) => ({ type: 'CLOSE_FORM', payload: name })),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
jest.mock('../certificate-preference/CertificatePreference', () => function MockCertificatePreference({ fieldName }) {
|
||||
return <div data-testid="editable-field-certificate-preference">Certificate Preference for {fieldName}</div>;
|
||||
});
|
||||
|
||||
const mockStore = configureStore([]);
|
||||
const mockOnEdit = jest.fn();
|
||||
const mockOnCancel = jest.fn();
|
||||
const mockOnSubmit = jest.fn();
|
||||
const mockOnChange = jest.fn();
|
||||
|
||||
const baseState = {
|
||||
accountSettings: {
|
||||
errors: {},
|
||||
confirmationValues: {},
|
||||
saveState: 'default',
|
||||
openFormId: null,
|
||||
verifiedNameHistory: { results: [] },
|
||||
values: {},
|
||||
drafts: {},
|
||||
timeZones: [],
|
||||
countryTimeZones: [],
|
||||
thirdPartyAuth: { providers: [] },
|
||||
countriesCodesList: [],
|
||||
profileDataManager: false,
|
||||
nameChangeModal: {},
|
||||
loading: false,
|
||||
loaded: true,
|
||||
loadingError: null,
|
||||
},
|
||||
};
|
||||
|
||||
const renderComponent = (props = {}, stateOverrides = {}) => {
|
||||
const store = mockStore({
|
||||
...baseState,
|
||||
...stateOverrides,
|
||||
});
|
||||
return render(
|
||||
<Provider store={store}>
|
||||
<IntlProvider locale="en">
|
||||
<EditableField
|
||||
name="username"
|
||||
label="Username"
|
||||
type="text"
|
||||
value="john_doe"
|
||||
onEdit={mockOnEdit}
|
||||
onCancel={mockOnCancel}
|
||||
onSubmit={mockOnSubmit}
|
||||
onChange={mockOnChange}
|
||||
isEditing={false}
|
||||
{...props}
|
||||
/>
|
||||
</IntlProvider>
|
||||
</Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('EditableField', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders default state with value', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText('Username')).toBeInTheDocument();
|
||||
expect(screen.getByText('john_doe')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Edit/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty label with edit button if no value and editable', () => {
|
||||
renderComponent({ value: '', emptyLabel: 'Add value' });
|
||||
expect(screen.getByRole('button', { name: 'Add value' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty label as muted text if not editable', () => {
|
||||
renderComponent({ value: '', emptyLabel: 'No value', isEditable: false });
|
||||
expect(screen.getByText('No value')).toHaveClass('text-muted');
|
||||
});
|
||||
|
||||
it('renders editing state with form controls', async () => {
|
||||
renderComponent({ isEditing: true });
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('editable-field-textbox')).toHaveValue('john_doe');
|
||||
expect(screen.getByTestId('editable-field-save')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('editable-field-cancel')).toBeInTheDocument();
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('calls onChange when input changes', async () => {
|
||||
renderComponent({ isEditing: true });
|
||||
await waitFor(() => {
|
||||
const input = screen.getByTestId('editable-field-textbox');
|
||||
fireEvent.change(input, { target: { value: 'new_name' } });
|
||||
expect(mockOnChange).toHaveBeenCalledWith('username', 'new_name');
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('calls onSubmit when form is submitted', async () => {
|
||||
renderComponent({ isEditing: true });
|
||||
await waitFor(() => {
|
||||
const form = screen.getByTestId('editable-field-form');
|
||||
fireEvent.submit(form);
|
||||
expect(mockOnSubmit).toHaveBeenCalledWith('username', 'john_doe');
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('shows error message when error is present', async () => {
|
||||
const stateOverrides = {
|
||||
accountSettings: {
|
||||
...baseState.accountSettings,
|
||||
errors: { username: 'Invalid input' },
|
||||
},
|
||||
};
|
||||
renderComponent({ isEditing: true, error: 'Invalid input' }, stateOverrides);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('editable-field-error')).toHaveTextContent('Invalid input');
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('shows help text in editing mode', () => {
|
||||
renderComponent({ isEditing: true, helpText: 'Helpful info' });
|
||||
expect(screen.getByText('Helpful info')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows confirmation message in default mode if provided', async () => {
|
||||
const stateOverrides = {
|
||||
accountSettings: {
|
||||
...baseState.accountSettings,
|
||||
confirmationValues: { username: 'done' },
|
||||
},
|
||||
};
|
||||
renderComponent(
|
||||
{
|
||||
confirmationMessageDefinition: messages['account.settings.editable.field.action.save'],
|
||||
confirmationValue: 'done',
|
||||
},
|
||||
stateOverrides,
|
||||
);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('editable-field-confirmation')).toBeInTheDocument();
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('renders CertificatePreference for name fields when editing', async () => {
|
||||
renderComponent({ isEditing: true, name: 'name' });
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('editable-field-certificate-preference')).toHaveTextContent('Certificate Preference for name');
|
||||
}, { timeout: 2000 });
|
||||
});
|
||||
|
||||
it('applies grayed-out class when isGrayedOut is true', () => {
|
||||
renderComponent({ isGrayedOut: true });
|
||||
expect(screen.getByText('john_doe')).toHaveClass('grayed-out');
|
||||
});
|
||||
|
||||
it('appends userSuppliedValue when provided', () => {
|
||||
renderComponent({ userSuppliedValue: 'extra' });
|
||||
expect(screen.getByText('john_doe: extra')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import renderer from 'react-test-renderer';
|
||||
import configureStore from 'redux-mock-store';
|
||||
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import EditableSelectField from '../EditableSelectField';
|
||||
|
||||
@@ -16,6 +17,8 @@ jest.mock('react-redux', () => ({
|
||||
jest.mock('@edx/frontend-platform/auth');
|
||||
jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
|
||||
|
||||
const IntlEditableSelectField = injectIntl(EditableSelectField);
|
||||
|
||||
const mockStore = configureStore();
|
||||
|
||||
describe('EditableSelectField', () => {
|
||||
@@ -85,7 +88,7 @@ describe('EditableSelectField', () => {
|
||||
afterEach(() => jest.clearAllMocks());
|
||||
|
||||
it('renders EditableSelectField correctly with editing disabled', () => {
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -95,7 +98,7 @@ describe('EditableSelectField', () => {
|
||||
isEditing: true,
|
||||
};
|
||||
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -104,7 +107,7 @@ describe('EditableSelectField', () => {
|
||||
...props,
|
||||
error: 'This is an error message',
|
||||
};
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...errorProps} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...errorProps} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -123,7 +126,7 @@ describe('EditableSelectField', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroup} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroup} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -137,7 +140,7 @@ describe('EditableSelectField', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithoutGroup} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithoutGroup} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -160,7 +163,7 @@ describe('EditableSelectField', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroups} />)).toJSON();
|
||||
const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroups} />)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
import { initializeMockApp, mergeConfig, setConfig } from '@edx/frontend-platform';
|
||||
|
||||
import JumpNav from '../JumpNav';
|
||||
import configureStore from '../../data/configureStore';
|
||||
|
||||
const IntlJumpNav = injectIntl(JumpNav);
|
||||
|
||||
describe('JumpNav', () => {
|
||||
mergeConfig({
|
||||
ENABLE_ACCOUNT_DELETION: true,
|
||||
});
|
||||
|
||||
let props = {};
|
||||
let store;
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -23,6 +27,9 @@ describe('JumpNav', () => {
|
||||
},
|
||||
});
|
||||
|
||||
props = {
|
||||
intl: {},
|
||||
};
|
||||
store = configureStore({
|
||||
notificationPreferences: {
|
||||
showPreferences: false,
|
||||
@@ -30,35 +37,41 @@ describe('JumpNav', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should not render delete account link', async () => {
|
||||
it('should not render Optional Information or delete account link', () => {
|
||||
setConfig({
|
||||
ENABLE_ACCOUNT_DELETION: false,
|
||||
});
|
||||
|
||||
render(
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<JumpNav />
|
||||
<IntlJumpNav {...props} />
|
||||
</AppProvider>
|
||||
</IntlProvider>,
|
||||
);
|
||||
</IntlProvider>
|
||||
))
|
||||
.toJSON();
|
||||
|
||||
expect(await screen.queryByText('Delete My Account')).toBeNull();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render delete account link', async () => {
|
||||
it('should render Optional Information and delete account link', () => {
|
||||
setConfig({
|
||||
ENABLE_ACCOUNT_DELETION: true,
|
||||
});
|
||||
|
||||
render(
|
||||
props = {
|
||||
...props,
|
||||
};
|
||||
|
||||
const tree = renderer.create((
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<JumpNav />
|
||||
<IntlJumpNav {...props} />
|
||||
</AppProvider>
|
||||
</IntlProvider>,
|
||||
);
|
||||
</IntlProvider>
|
||||
))
|
||||
.toJSON();
|
||||
|
||||
expect(await screen.findByText('Delete My Account')).toBeVisible();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -172,7 +172,9 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div />
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
184
src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap
Normal file
184
src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap
Normal file
@@ -0,0 +1,184 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`JumpNav should not render Optional Information or delete account link 1`] = `
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
|
||||
>
|
||||
<ul
|
||||
className="list-unstyled"
|
||||
style={{}}
|
||||
>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#basic-information"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Account Information
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#profile-information"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Profile Information
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#social-media"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Social Media Links
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#site-preferences"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Site Preferences
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#linked-accounts"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Linked Accounts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`JumpNav should render Optional Information and delete account link 1`] = `
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
|
||||
>
|
||||
<ul
|
||||
className="list-unstyled"
|
||||
style={{}}
|
||||
>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#basic-information"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Account Information
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#profile-information"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Profile Information
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#social-media"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Social Media Links
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#site-preferences"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Site Preferences
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#linked-accounts"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Linked Accounts
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className=""
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
className="active"
|
||||
href="/#delete-account"
|
||||
isActive={[Function]}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Delete My Account
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -6,7 +6,7 @@ const mockData = {
|
||||
data: null,
|
||||
values: {
|
||||
username: 'test_username',
|
||||
country: 'US',
|
||||
country: 'AD',
|
||||
accomplishments_shared: false,
|
||||
name: 'test_name',
|
||||
email: 'test_email@test.com',
|
||||
@@ -18,18 +18,8 @@ const mockData = {
|
||||
field_value: '',
|
||||
},
|
||||
],
|
||||
gender: 'm',
|
||||
gender: null,
|
||||
'pref-lang': 'en',
|
||||
level_of_education: 'b',
|
||||
language_proficiencies: 'es',
|
||||
social_link_linkedin: 'https://linkedin.com/in/testuser',
|
||||
social_link_facebook: '',
|
||||
social_link_twitter: '',
|
||||
time_zone: 'America/New_York',
|
||||
state: 'NY',
|
||||
secondary_email_enabled: true,
|
||||
secondary_email: 'test_recovery@test.com',
|
||||
year_of_birth: '1990',
|
||||
},
|
||||
errors: {},
|
||||
confirmationValues: {},
|
||||
@@ -37,14 +27,14 @@ const mockData = {
|
||||
saveState: null,
|
||||
timeZones: [
|
||||
{
|
||||
time_zone: 'America/New_York',
|
||||
description: 'America/New_York (EST, UTC-0500)',
|
||||
time_zone: 'Africa/Abidjan',
|
||||
description: 'Africa/Abidjan (GMT, UTC+0000)',
|
||||
},
|
||||
],
|
||||
countryTimeZones: [
|
||||
{
|
||||
time_zone: 'America/New_York',
|
||||
description: 'America/New_York (EST, UTC-0500)',
|
||||
time_zone: 'Europe/Andorra',
|
||||
description: 'Europe/Andorra (CET, UTC+0100)',
|
||||
},
|
||||
],
|
||||
previousSiteLanguage: null,
|
||||
@@ -94,7 +84,7 @@ const mockData = {
|
||||
profileDataManager: null,
|
||||
},
|
||||
notificationPreferences: {
|
||||
showPreferences: true,
|
||||
showPreferences: false,
|
||||
courses: {
|
||||
status: 'success',
|
||||
courses: [],
|
||||
@@ -108,7 +98,7 @@ const mockData = {
|
||||
preferences: {
|
||||
status: 'idle',
|
||||
updatePreferenceStatus: 'idle',
|
||||
selectedCourse: 'account',
|
||||
selectedCourse: null,
|
||||
preferences: [],
|
||||
apps: [],
|
||||
nonEditable: {},
|
||||
|
||||
@@ -16,9 +16,8 @@ export async function getThirdPartyAuthProviders() {
|
||||
}
|
||||
|
||||
export async function postDisconnectAuth(url) {
|
||||
const requestConfig = { headers: { Accept: 'application/json' } };
|
||||
const { data } = await getAuthenticatedHttpClient()
|
||||
.post(url, {}, requestConfig)
|
||||
.post(url)
|
||||
.catch(handleRequestError);
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Divider = ({ className, ...props }) => (
|
||||
<div className={classNames('divider', className)} {...props} />
|
||||
);
|
||||
|
||||
Divider.propTypes = {
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Divider.defaultProps = {
|
||||
className: undefined,
|
||||
};
|
||||
|
||||
export default Divider;
|
||||
@@ -1,2 +0,0 @@
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export { default as Divider } from './Divider';
|
||||
@@ -1,19 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
const Head = () => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<Helmet>
|
||||
<title>
|
||||
{intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
|
||||
</title>
|
||||
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
|
||||
</Helmet>
|
||||
);
|
||||
const Head = ({ intl }) => (
|
||||
<Helmet>
|
||||
<title>
|
||||
{intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
|
||||
</title>
|
||||
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
|
||||
</Helmet>
|
||||
);
|
||||
|
||||
Head.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default Head;
|
||||
export default injectIntl(Head);
|
||||
|
||||
@@ -6,8 +6,9 @@ import { getConfig } from '@edx/frontend-platform';
|
||||
import Head from './Head';
|
||||
|
||||
describe('Head', () => {
|
||||
const props = {};
|
||||
it('should match render title tag and fivicon with the site configuration values', () => {
|
||||
render(<IntlProvider locale="en"><Head /></IntlProvider>);
|
||||
render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
|
||||
const helmet = Helmet.peek();
|
||||
expect(helmet.title).toEqual(`Account | ${getConfig().SITE_NAME}`);
|
||||
expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
|
||||
|
||||
@@ -71,5 +71,5 @@ export function useFeedbackWrapper() {
|
||||
|
||||
export function useIsOnMobile() {
|
||||
const windowSize = useWindowSize();
|
||||
return windowSize.width <= breakpoints.small.maxWidth;
|
||||
return windowSize.width <= breakpoints.small.minWidth;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from './IdVerification.messages';
|
||||
import { ERROR_REASONS } from './IdVerificationContext';
|
||||
|
||||
const AccessBlocked = ({ error }) => {
|
||||
const intl = useIntl();
|
||||
const AccessBlocked = ({ error, intl }) => {
|
||||
const handleMessage = () => {
|
||||
if (error === ERROR_REASONS.COURSE_ENROLLMENT) {
|
||||
return <p>{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}</p>;
|
||||
@@ -43,7 +42,8 @@ const AccessBlocked = ({ error }) => {
|
||||
};
|
||||
|
||||
AccessBlocked.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
error: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default AccessBlocked;
|
||||
export default injectIntl(AccessBlocked);
|
||||
|
||||
@@ -1,44 +1,41 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Collapsible } from '@openedx/paragon';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import messages from './IdVerification.messages';
|
||||
|
||||
const CameraHelp = (props) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
|
||||
className="mb-4 shadow"
|
||||
defaultOpen={props.isOpen}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
|
||||
</p>
|
||||
</Collapsible>
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
|
||||
className="mb-4 shadow"
|
||||
defaultOpen={props.isOpen}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
messages['id.verification.camera.help.difficulty.answer'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</p>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const CameraHelp = (props) => (
|
||||
<div>
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
|
||||
className="mb-4 shadow"
|
||||
defaultOpen={props.isOpen}
|
||||
>
|
||||
<p>
|
||||
{props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
|
||||
</p>
|
||||
</Collapsible>
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
|
||||
className="mb-4 shadow"
|
||||
defaultOpen={props.isOpen}
|
||||
>
|
||||
<p>
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.camera.help.difficulty.answer'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</p>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
|
||||
CameraHelp.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
isOpen: PropTypes.bool,
|
||||
isPortrait: PropTypes.bool,
|
||||
};
|
||||
@@ -48,4 +45,4 @@ CameraHelp.defaultProps = {
|
||||
isPortrait: false,
|
||||
};
|
||||
|
||||
export default CameraHelp;
|
||||
export default injectIntl(CameraHelp);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useContext } from 'react';
|
||||
import React, { useState, useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Collapsible } from '@openedx/paragon';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
|
||||
import messages from './IdVerification.messages';
|
||||
@@ -11,7 +11,6 @@ import ImagePreview from './ImagePreview';
|
||||
import SupportedMediaTypes from './SupportedMediaTypes';
|
||||
|
||||
const CameraHelpWithUpload = (props) => {
|
||||
const intl = useIntl();
|
||||
const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
|
||||
const [hasUploadedImage, setHasUploadedImage] = useState(false);
|
||||
|
||||
@@ -28,23 +27,24 @@ const CameraHelpWithUpload = (props) => {
|
||||
<div>
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
|
||||
data-testid="collapsible"
|
||||
className="mb-4 shadow"
|
||||
defaultOpen={props.isOpen}
|
||||
>
|
||||
{idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
|
||||
{idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
|
||||
{props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
|
||||
<SupportedMediaTypes />
|
||||
</p>
|
||||
<ImageFileUpload onFileChange={setAndTrackIdPhotoFile} />
|
||||
<ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CameraHelpWithUpload.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
isOpen: PropTypes.bool,
|
||||
};
|
||||
|
||||
@@ -52,4 +52,4 @@ CameraHelpWithUpload.defaultProps = {
|
||||
isOpen: false,
|
||||
};
|
||||
|
||||
export default CameraHelpWithUpload;
|
||||
export default injectIntl(CameraHelpWithUpload);
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { useContext } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button, Collapsible } from '@openedx/paragon';
|
||||
|
||||
import IdVerificationContext from './IdVerificationContext';
|
||||
import messages from './IdVerification.messages';
|
||||
|
||||
const CollapsibleImageHelp = () => {
|
||||
const intl = useIntl();
|
||||
const CollapsibleImageHelp = (props) => {
|
||||
const {
|
||||
userId, useCameraForId, setUseCameraForId,
|
||||
} = useContext(IdVerificationContext);
|
||||
@@ -26,15 +25,15 @@ const CollapsibleImageHelp = () => {
|
||||
<Collapsible
|
||||
styling="card"
|
||||
title={useCameraForId
|
||||
? intl.formatMessage(messages['id.verification.photo.upload.help.title'])
|
||||
: intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
|
||||
? props.intl.formatMessage(messages['id.verification.photo.upload.help.title'])
|
||||
: props.intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
|
||||
className="mb-4 shadow"
|
||||
defaultOpen
|
||||
>
|
||||
<p data-testid="help-text">
|
||||
{useCameraForId
|
||||
? intl.formatMessage(messages['id.verification.photo.upload.help.text'])
|
||||
: intl.formatMessage(messages['id.verification.photo.camera.help.text'])}
|
||||
? props.intl.formatMessage(messages['id.verification.photo.upload.help.text'])
|
||||
: props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])}
|
||||
</p>
|
||||
<Button
|
||||
title={useCameraForId ? 'Upload Photo' : 'Take Photo'} // TO-DO: translation
|
||||
@@ -43,11 +42,15 @@ const CollapsibleImageHelp = () => {
|
||||
style={{ marginTop: '0.5rem' }}
|
||||
>
|
||||
{useCameraForId
|
||||
? intl.formatMessage(messages['id.verification.photo.upload.help.button'])
|
||||
: intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
|
||||
? props.intl.formatMessage(messages['id.verification.photo.upload.help.button'])
|
||||
: props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
|
||||
</Button>
|
||||
</Collapsible>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollapsibleImageHelp;
|
||||
CollapsibleImageHelp.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CollapsibleImageHelp);
|
||||
|
||||
@@ -46,11 +46,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'You need a valid identification card that contains your full name and photo, such as a driver’s license or passport.',
|
||||
description: 'Text that explains that the user needs a photo ID.',
|
||||
},
|
||||
'id.verification.privacy.modal.close.button': {
|
||||
id: 'id.verification.privacy.modal.close.button',
|
||||
defaultMessage: 'Close',
|
||||
description: 'Label on button to close privacy information dialog.',
|
||||
},
|
||||
'id.verification.privacy.title': {
|
||||
id: 'id.verification.privacy.title',
|
||||
defaultMessage: 'Privacy Information',
|
||||
@@ -661,11 +656,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Switch to Camera Mode',
|
||||
description: 'Button used to switch to camera mode.',
|
||||
},
|
||||
'id.verification.context.loading.state': {
|
||||
id: 'id.verification.context.loading.state',
|
||||
defaultMessage: 'Loading verification status',
|
||||
description: 'Message shown for screen readers when a user\'s identification verification is in the loading state',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
|
||||
@@ -3,7 +3,6 @@ import React, {
|
||||
} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { getProfileDataManager } from '../account-settings/data/service';
|
||||
import PageLoading from '../account-settings/PageLoading';
|
||||
@@ -16,10 +15,7 @@ import { hasGetUserMediaSupport } from './getUserMediaShim';
|
||||
import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
|
||||
import { VerifiedNameContext } from './VerifiedNameContext';
|
||||
|
||||
import messages from './IdVerification.messages';
|
||||
|
||||
const IdVerificationContextProvider = ({ children }) => {
|
||||
const intl = useIntl();
|
||||
const { authenticatedUser } = useContext(AppContext);
|
||||
const { verifiedNameHistoryCallStatus, verifiedName } = useContext(VerifiedNameContext);
|
||||
|
||||
@@ -121,7 +117,7 @@ const IdVerificationContextProvider = ({ children }) => {
|
||||
const loadingStatuses = [IDLE_STATUS, LOADING_STATUS];
|
||||
// If we are waiting for verification status or verified name history endpoint, show spinner.
|
||||
if (loadingStatuses.includes(idVerificationData.status) || loadingStatuses.includes(verifiedNameHistoryCallStatus)) {
|
||||
return <PageLoading srMessage={intl.formatMessage(messages['id.verification.context.loading.state'])} />;
|
||||
return <PageLoading srMessage="Loading verification status" />;
|
||||
}
|
||||
|
||||
if (!canVerify) {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
Route, Routes, useLocation, useNavigate,
|
||||
} from 'react-router-dom';
|
||||
import camelCase from 'lodash.camelcase';
|
||||
import qs from 'qs';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button, ModalDialog, ActionRow } from '@openedx/paragon';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { idVerificationSelector } from './data/selectors';
|
||||
@@ -26,10 +26,9 @@ import SubmittedPanel from './panels/SubmittedPanel';
|
||||
import messages from './IdVerification.messages';
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
const IdVerificationPage = () => {
|
||||
const IdVerificationPage = (props) => {
|
||||
const { search } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const intl = useIntl();
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
@@ -79,33 +78,33 @@ const IdVerificationPage = () => {
|
||||
</div>
|
||||
<ModalDialog
|
||||
isOpen={isModalOpen}
|
||||
title={intl.formatMessage(messages['id.verification.privacy.title'])}
|
||||
title="Id modal"
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
size="lg"
|
||||
hasCloseButton={false}
|
||||
>
|
||||
<ModalDialog.Header>
|
||||
<ModalDialog.Title data-testid="Id-modal">
|
||||
{intl.formatMessage(messages['id.verification.privacy.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.privacy.title'])}
|
||||
</ModalDialog.Title>
|
||||
</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<div className="p-3">
|
||||
<h6>
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.need.photo.question'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</h6>
|
||||
<p>{intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
|
||||
<p>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
|
||||
<h6>
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.do.with.photo.question'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</h6>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.do.with.photo.answer'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
@@ -115,7 +114,7 @@ const IdVerificationPage = () => {
|
||||
<ModalDialog.Footer className="p-2">
|
||||
<ActionRow>
|
||||
<ModalDialog.CloseButton variant="link">
|
||||
{intl.formatMessage(messages['id.verification.privacy.modal.close.button'])}
|
||||
Close
|
||||
</ModalDialog.CloseButton>
|
||||
</ActionRow>
|
||||
</ModalDialog.Footer>
|
||||
@@ -125,4 +124,8 @@ const IdVerificationPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(idVerificationSelector, {})(IdVerificationPage);
|
||||
IdVerificationPage.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default connect(idVerificationSelector, {})(injectIntl(IdVerificationPage));
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { intlShape } from '@edx/frontend-platform/i18n';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Alert } from '@openedx/paragon';
|
||||
import messages from './IdVerification.messages';
|
||||
import SupportedMediaTypes from './SupportedMediaTypes';
|
||||
|
||||
const ImageFileUpload = ({ onFileChange }) => {
|
||||
const intl = useIntl();
|
||||
const ImageFileUpload = ({ onFileChange, intl }) => {
|
||||
const [error, setError] = useState(null);
|
||||
const errorTypes = {
|
||||
invalidFileType: 'invalidFileType',
|
||||
@@ -59,6 +58,7 @@ const ImageFileUpload = ({ onFileChange }) => {
|
||||
|
||||
ImageFileUpload.propTypes = {
|
||||
onFileChange: PropTypes.func.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default ImageFileUpload;
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import qs from 'qs';
|
||||
import { getExistingIdVerification, getEnrollments, submitIdVerification } from './service';
|
||||
|
||||
jest.mock('@edx/frontend-platform', () => {
|
||||
const actual = jest.requireActual('@edx/frontend-platform');
|
||||
return {
|
||||
...actual,
|
||||
getConfig: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('@edx/frontend-platform/auth', () => ({
|
||||
getAuthenticatedHttpClient: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('qs');
|
||||
|
||||
describe('ID Verification Service', () => {
|
||||
let mockHttpClient;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
getConfig.mockReturnValue({ LMS_BASE_URL: 'http://test.lms' });
|
||||
|
||||
mockHttpClient = {
|
||||
get: jest.fn(),
|
||||
post: jest.fn(),
|
||||
};
|
||||
|
||||
getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
|
||||
});
|
||||
|
||||
describe('getExistingIdVerification', () => {
|
||||
it('returns transformed data on success', async () => {
|
||||
const mockResponse = {
|
||||
data: { status: 'approved', expires: '2025-12-01', can_verify: true },
|
||||
};
|
||||
mockHttpClient.get.mockResolvedValue(mockResponse);
|
||||
|
||||
const result = await getExistingIdVerification();
|
||||
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith(
|
||||
'http://test.lms/verify_student/status/',
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
expect(result).toEqual({
|
||||
status: 'approved',
|
||||
expires: '2025-12-01',
|
||||
canVerify: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('returns defaults on failure', async () => {
|
||||
mockHttpClient.get.mockRejectedValue(new Error('Network error'));
|
||||
|
||||
const result = await getExistingIdVerification();
|
||||
|
||||
expect(result).toEqual({
|
||||
status: null,
|
||||
expires: null,
|
||||
canVerify: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getEnrollments', () => {
|
||||
it('returns data on success', async () => {
|
||||
const mockResponse = { data: [{ course_id: 'course-v1:test+T101+2025', mode: 'verified' }] };
|
||||
mockHttpClient.get.mockResolvedValue(mockResponse);
|
||||
|
||||
const result = await getEnrollments();
|
||||
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith(
|
||||
'http://test.lms/api/enrollment/v1/enrollment',
|
||||
{ headers: { Accept: 'application/json' } },
|
||||
);
|
||||
expect(result).toEqual(mockResponse.data);
|
||||
});
|
||||
|
||||
it('returns empty object on failure', async () => {
|
||||
mockHttpClient.get.mockRejectedValue(new Error('Server error'));
|
||||
|
||||
const result = await getEnrollments();
|
||||
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('submitIdVerification', () => {
|
||||
it('posts transformed data and returns success', async () => {
|
||||
const verificationData = {
|
||||
facePhotoFile: 'face-img',
|
||||
idPhotoFile: 'id-img',
|
||||
idPhotoName: 'John Doe',
|
||||
courseRunKey: 'course-v1:test+T101+2025',
|
||||
};
|
||||
const expectedPostData = {
|
||||
face_image: 'face-img',
|
||||
photo_id_image: 'id-img',
|
||||
full_name: 'John Doe',
|
||||
};
|
||||
qs.stringify.mockReturnValue('encoded-data');
|
||||
mockHttpClient.post.mockResolvedValue({});
|
||||
|
||||
const result = await submitIdVerification(verificationData);
|
||||
|
||||
expect(qs.stringify).toHaveBeenCalledWith(expectedPostData);
|
||||
expect(mockHttpClient.post).toHaveBeenCalledWith(
|
||||
'http://test.lms/verify_student/submit-photos/',
|
||||
'encoded-data',
|
||||
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },
|
||||
);
|
||||
expect(result).toEqual({ success: true, message: null });
|
||||
});
|
||||
|
||||
it('omits null/undefined values', async () => {
|
||||
const verificationData = {
|
||||
facePhotoFile: 'face-img',
|
||||
idPhotoFile: null,
|
||||
idPhotoName: undefined,
|
||||
};
|
||||
qs.stringify.mockReturnValue('encoded-data');
|
||||
mockHttpClient.post.mockResolvedValue({});
|
||||
|
||||
await submitIdVerification(verificationData);
|
||||
|
||||
expect(qs.stringify).toHaveBeenCalledWith({ face_image: 'face-img' });
|
||||
});
|
||||
|
||||
it('returns failure object on error', async () => {
|
||||
const error = new Error('Failed');
|
||||
error.customAttributes = { httpErrorStatus: 400 };
|
||||
mockHttpClient.post.mockRejectedValue(error);
|
||||
|
||||
const result = await submitIdVerification({ facePhotoFile: 'face-img' });
|
||||
|
||||
expect(result).toEqual({
|
||||
success: false,
|
||||
status: 400,
|
||||
message: expect.stringContaining('Failed'),
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,17 +1,17 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import React from 'react';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
export const EnableCameraDirectionsPanel = (props) => {
|
||||
const intl = useIntl();
|
||||
if (props.browserName === 'Internet Explorer') {
|
||||
return (
|
||||
<>
|
||||
<h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}</h6>
|
||||
<h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}</h6>
|
||||
<ol>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])}</li>
|
||||
</ol>
|
||||
</>
|
||||
);
|
||||
@@ -19,17 +19,17 @@ export const EnableCameraDirectionsPanel = (props) => {
|
||||
if (props.browserName === 'Chrome') {
|
||||
return (
|
||||
<>
|
||||
<h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
|
||||
<h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
|
||||
<ol>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])}</li>
|
||||
<ul>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])}</li>
|
||||
</ul>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])}</li>
|
||||
</ol>
|
||||
</>
|
||||
);
|
||||
@@ -37,15 +37,15 @@ export const EnableCameraDirectionsPanel = (props) => {
|
||||
if (props.browserName === 'Firefox') {
|
||||
return (
|
||||
<>
|
||||
<h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
|
||||
<h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
|
||||
<ol>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])}</li>
|
||||
</ol>
|
||||
</>
|
||||
);
|
||||
@@ -53,12 +53,12 @@ export const EnableCameraDirectionsPanel = (props) => {
|
||||
if (props.browserName === 'Safari') {
|
||||
return (
|
||||
<>
|
||||
<h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>
|
||||
<h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>
|
||||
<ol>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])}</li>
|
||||
<li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])}</li>
|
||||
<li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])}</li>
|
||||
</ol>
|
||||
</>
|
||||
);
|
||||
@@ -68,7 +68,8 @@ export const EnableCameraDirectionsPanel = (props) => {
|
||||
};
|
||||
|
||||
EnableCameraDirectionsPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
browserName: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default EnableCameraDirectionsPanel;
|
||||
export default injectIntl(EnableCameraDirectionsPanel);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
import React, {
|
||||
useContext, useEffect, useRef,
|
||||
} from 'react';
|
||||
import { Form } from '@openedx/paragon';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
import BasePanel from './BasePanel';
|
||||
@@ -11,13 +11,12 @@ import IdVerificationContext from '../IdVerificationContext';
|
||||
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
const GetNameIdPanel = () => {
|
||||
const GetNameIdPanel = (props) => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const nameInputRef = useRef();
|
||||
const panelSlug = 'get-name-id';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
const intl = useIntl();
|
||||
|
||||
const { nameOnAccount, idPhotoName, setIdPhotoName } = useContext(IdVerificationContext);
|
||||
const nameOnAccountValue = nameOnAccount || '';
|
||||
@@ -42,19 +41,19 @@ const GetNameIdPanel = () => {
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.name.check.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.name.check.title'])}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.name.check.instructions'])}
|
||||
{props.intl.formatMessage(messages['id.verification.name.check.instructions'])}
|
||||
</p>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.name.check.mismatch.information'])}
|
||||
{props.intl.formatMessage(messages['id.verification.name.check.mismatch.information'])}
|
||||
</p>
|
||||
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group>
|
||||
<Form.Label className="font-weight-bold" htmlFor="photo-id-name">
|
||||
{intl.formatMessage(messages['id.verification.name.label'])}
|
||||
{props.intl.formatMessage(messages['id.verification.name.label'])}
|
||||
</Form.Label>
|
||||
<Form.Control
|
||||
controlId="photo-id-name"
|
||||
@@ -73,7 +72,7 @@ const GetNameIdPanel = () => {
|
||||
data-testid="id-name-feedback-message"
|
||||
type="invalid"
|
||||
>
|
||||
{intl.formatMessage(messages['id.verification.name.error'])}
|
||||
{props.intl.formatMessage(messages['id.verification.name.error'])}
|
||||
</Form.Control.Feedback>
|
||||
)}
|
||||
</Form.Group>
|
||||
@@ -86,11 +85,15 @@ const GetNameIdPanel = () => {
|
||||
data-testid="next-button"
|
||||
aria-disabled={!idPhotoName}
|
||||
>
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetNameIdPanel;
|
||||
GetNameIdPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(GetNameIdPanel);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
import BasePanel from './BasePanel';
|
||||
@@ -8,46 +8,49 @@ import CameraHelp from '../CameraHelp';
|
||||
import messages from '../IdVerification.messages';
|
||||
import exampleCard from '../assets/example-card.png';
|
||||
|
||||
const IdContextPanel = () => {
|
||||
const IdContextPanel = (props) => {
|
||||
const panelSlug = 'id-context';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.id.tips.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.id.tips.title'])}
|
||||
>
|
||||
<p>{intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
|
||||
<p>{props.intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
|
||||
<div className="card mb-4 shadow accent border-warning">
|
||||
<div className="card-body">
|
||||
<h6>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
|
||||
</h6>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
{intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
|
||||
{props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
|
||||
</li>
|
||||
<li>
|
||||
{intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
|
||||
{props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
|
||||
</li>
|
||||
</ul>
|
||||
<img
|
||||
src={exampleCard}
|
||||
alt={intl.formatMessage(messages['id.verification.example.card.alt'])}
|
||||
alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CameraHelp isOpen />
|
||||
<div className="action-row">
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default IdContextPanel;
|
||||
IdContextPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(IdContextPanel);
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
import BasePanel from './BasePanel';
|
||||
import CameraHelp from '../CameraHelp';
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
const PortraitPhotoContextPanel = () => {
|
||||
const intl = useIntl();
|
||||
const PortraitPhotoContextPanel = (props) => {
|
||||
const panelSlug = 'portrait-photo-context';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.photo.tips.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.photo.tips.title'])}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.description'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.description'])}
|
||||
</p>
|
||||
<div className="card mb-4 shadow accent border-warning">
|
||||
<div className="card-body">
|
||||
<h6>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
|
||||
</h6>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
|
||||
</p>
|
||||
<ul className="mb-0">
|
||||
<li>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}
|
||||
</li>
|
||||
<li>
|
||||
{intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}
|
||||
{props.intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -39,11 +39,15 @@ const PortraitPhotoContextPanel = () => {
|
||||
<CameraHelp isOpen isPortrait />
|
||||
<div className="action-row">
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortraitPhotoContextPanel;
|
||||
PortraitPhotoContextPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(PortraitPhotoContextPanel);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useEffect, useContext } from 'react';
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Bowser from 'bowser';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useRedirect } from '../../hooks';
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
@@ -14,8 +14,7 @@ import { UnsupportedCameraDirectionsPanel } from './UnsupportedCameraDirectionsP
|
||||
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
const RequestCameraAccessPanel = () => {
|
||||
const intl = useIntl();
|
||||
const RequestCameraAccessPanel = (props) => {
|
||||
const { location: returnUrl, text: returnText } = useRedirect();
|
||||
const panelSlug = 'request-camera-access';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
@@ -41,17 +40,17 @@ const RequestCameraAccessPanel = () => {
|
||||
|
||||
const getTitle = () => {
|
||||
if (mediaAccess === MEDIA_ACCESS.GRANTED) {
|
||||
return intl.formatMessage(messages['id.verification.camera.access.title.success']);
|
||||
return props.intl.formatMessage(messages['id.verification.camera.access.title.success']);
|
||||
}
|
||||
if ([MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess)) {
|
||||
return intl.formatMessage(messages['id.verification.camera.access.title.failed']);
|
||||
return props.intl.formatMessage(messages['id.verification.camera.access.title.failed']);
|
||||
}
|
||||
return intl.formatMessage(messages['id.verification.camera.access.title']);
|
||||
return props.intl.formatMessage(messages['id.verification.camera.access.title']);
|
||||
};
|
||||
|
||||
const returnLink = (
|
||||
<a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
|
||||
{intl.formatMessage(messages[returnText])}
|
||||
{props.intl.formatMessage(messages[returnText])}
|
||||
</a>
|
||||
);
|
||||
|
||||
@@ -68,13 +67,13 @@ const RequestCameraAccessPanel = () => {
|
||||
defaultMessage="In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}"
|
||||
description="Instructions to enable camera access."
|
||||
values={{
|
||||
clickAllow: <strong>{intl.formatMessage(messages['id.verification.camera.access.click.allow'])}</strong>,
|
||||
clickAllow: <strong>{props.intl.formatMessage(messages['id.verification.camera.access.click.allow'])}</strong>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<div className="action-row">
|
||||
<button type="button" className="btn btn-primary" onClick={tryGetUserMedia}>
|
||||
{intl.formatMessage(messages['id.verification.camera.access.enable'])}
|
||||
{props.intl.formatMessage(messages['id.verification.camera.access.enable'])}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,11 +82,11 @@ const RequestCameraAccessPanel = () => {
|
||||
{mediaAccess === MEDIA_ACCESS.GRANTED && (
|
||||
<div>
|
||||
<p data-testid="camera-access-success">
|
||||
{intl.formatMessage(messages['id.verification.camera.access.success'])}
|
||||
{props.intl.formatMessage(messages['id.verification.camera.access.success'])}
|
||||
</p>
|
||||
<div className="action-row">
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,9 +95,9 @@ const RequestCameraAccessPanel = () => {
|
||||
{mediaAccess === MEDIA_ACCESS.DENIED && (
|
||||
<div data-testid="camera-failure-instructions">
|
||||
<p data-testid="camera-access-failure">
|
||||
{intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
|
||||
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
|
||||
</p>
|
||||
<EnableCameraDirectionsPanel browserName={browserName} />
|
||||
<EnableCameraDirectionsPanel browserName={browserName} intl={props.intl} />
|
||||
<div className="action-row">
|
||||
{returnLink}
|
||||
</div>
|
||||
@@ -108,9 +107,9 @@ const RequestCameraAccessPanel = () => {
|
||||
{mediaAccess === MEDIA_ACCESS.UNSUPPORTED && (
|
||||
<div data-testid="camera-unsupported-instructions">
|
||||
<p data-testid="camera-unsupported-failure">
|
||||
{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
|
||||
{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
|
||||
</p>
|
||||
<UnsupportedCameraDirectionsPanel browserName={browserName} />
|
||||
<UnsupportedCameraDirectionsPanel browserName={browserName} intl={props.intl} />
|
||||
<div className="action-row">
|
||||
{returnLink}
|
||||
</div>
|
||||
@@ -121,4 +120,8 @@ const RequestCameraAccessPanel = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestCameraAccessPanel;
|
||||
RequestCameraAccessPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(RequestCameraAccessPanel);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useEffect, useContext } from 'react';
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Alert, Hyperlink } from '@openedx/paragon';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
@@ -12,8 +12,7 @@ import IdVerificationContext from '../IdVerificationContext';
|
||||
import messages from '../IdVerification.messages';
|
||||
import exampleCard from '../assets/example-card.png';
|
||||
|
||||
const ReviewRequirementsPanel = () => {
|
||||
const intl = useIntl();
|
||||
const ReviewRequirementsPanel = (props) => {
|
||||
const { userId, profileDataManager } = useContext(IdVerificationContext);
|
||||
const panelSlug = 'review-requirements';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
@@ -42,7 +41,7 @@ const ReviewRequirementsPanel = () => {
|
||||
profileDataManager,
|
||||
support: (
|
||||
<Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
|
||||
{intl.formatMessage(messages['id.verification.support'])}
|
||||
{props.intl.formatMessage(messages['id.verification.support'])}
|
||||
</Hyperlink>
|
||||
),
|
||||
}}
|
||||
@@ -55,17 +54,17 @@ const ReviewRequirementsPanel = () => {
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.requirements.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.requirements.title'])}
|
||||
focusOnMount={false}
|
||||
>
|
||||
{renderManagedProfileMessage()}
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.requirements.description'])}
|
||||
{props.intl.formatMessage(messages['id.verification.requirements.description'])}
|
||||
</p>
|
||||
<div className="card mb-4 shadow accent border-warning">
|
||||
<div className="card-body">
|
||||
<h6 aria-level="3">
|
||||
{intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
|
||||
</h6>
|
||||
<p className="mb-0">
|
||||
<FormattedMessage
|
||||
@@ -73,7 +72,7 @@ const ReviewRequirementsPanel = () => {
|
||||
defaultMessage="You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}."
|
||||
description="Text explaining that the user needs access to a camera."
|
||||
values={{
|
||||
allow: <strong>{intl.formatMessage(messages['id.verification.requirements.card.device.allow'])}</strong>,
|
||||
allow: <strong>{props.intl.formatMessage(messages['id.verification.requirements.card.device.allow'])}</strong>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
@@ -82,37 +81,37 @@ const ReviewRequirementsPanel = () => {
|
||||
<div className="card mb-4 shadow accent border-warning">
|
||||
<div className="card-body">
|
||||
<h6 aria-level="3">
|
||||
{intl.formatMessage(messages['id.verification.requirements.card.id.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.requirements.card.id.title'])}
|
||||
</h6>
|
||||
<p className="mb-0">
|
||||
{intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
|
||||
{props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
|
||||
<img
|
||||
src={exampleCard}
|
||||
alt={intl.formatMessage(messages['id.verification.example.card.alt'])}
|
||||
alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 aria-level="2" className="mb-3">
|
||||
{intl.formatMessage(messages['id.verification.privacy.title'])}
|
||||
{props.intl.formatMessage(messages['id.verification.privacy.title'])}
|
||||
</h4>
|
||||
<h6 aria-level="3">
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.need.photo.question'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</h6>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
|
||||
{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
|
||||
</p>
|
||||
<h6 aria-level="3">
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.do.with.photo.question'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
</h6>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.privacy.do.with.photo.answer'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
@@ -120,11 +119,15 @@ const ReviewRequirementsPanel = () => {
|
||||
|
||||
<div className="action-row">
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewRequirementsPanel;
|
||||
ReviewRequirementsPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(ReviewRequirementsPanel);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useContext, useEffect } from 'react';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useRedirect } from '../../hooks';
|
||||
|
||||
@@ -10,11 +10,10 @@ import messages from '../IdVerification.messages';
|
||||
|
||||
import BasePanel from './BasePanel';
|
||||
|
||||
const SubmittedPanel = () => {
|
||||
const SubmittedPanel = (props) => {
|
||||
const { userId } = useContext(IdVerificationContext);
|
||||
const { location: returnUrl, text: returnText } = useRedirect();
|
||||
const panelSlug = 'submitted';
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
sendTrackEvent('edx.id_verification.submitted', {
|
||||
@@ -26,20 +25,24 @@ const SubmittedPanel = () => {
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.submitted.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.submitted.title'])}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.submitted.text'])}
|
||||
{props.intl.formatMessage(messages['id.verification.submitted.text'])}
|
||||
</p>
|
||||
<a
|
||||
className="btn btn-primary"
|
||||
href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
|
||||
data-testid="return-button"
|
||||
>
|
||||
{intl.formatMessage(messages[returnText])}
|
||||
{props.intl.formatMessage(messages[returnText])}
|
||||
</a>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmittedPanel;
|
||||
SubmittedPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(SubmittedPanel);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useState, useContext, useEffect } from 'react';
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import {
|
||||
Alert, Hyperlink, Form, Button, Spinner,
|
||||
} from '@openedx/paragon';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { submitIdVerification } from '../data/service';
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
@@ -16,8 +16,7 @@ import messages from '../IdVerification.messages';
|
||||
import CameraHelpWithUpload from '../CameraHelpWithUpload';
|
||||
import SupportedMediaTypes from '../SupportedMediaTypes';
|
||||
|
||||
const SummaryPanel = () => {
|
||||
const intl = useIntl();
|
||||
const SummaryPanel = (props) => {
|
||||
const panelSlug = 'summary';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
const {
|
||||
@@ -52,7 +51,7 @@ const SummaryPanel = () => {
|
||||
profileDataManager,
|
||||
support: (
|
||||
<Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
|
||||
{intl.formatMessage(messages['id.verification.support'])}
|
||||
{props.intl.formatMessage(messages['id.verification.support'])}
|
||||
</Hyperlink>
|
||||
),
|
||||
}}
|
||||
@@ -91,11 +90,12 @@ const SummaryPanel = () => {
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
title="Confirmation"
|
||||
disabled={isSubmitting}
|
||||
onClick={handleClick}
|
||||
data-testid="submit-button"
|
||||
>
|
||||
{intl.formatMessage(messages['id.verification.review.confirm'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.confirm'])}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@@ -103,18 +103,18 @@ const SummaryPanel = () => {
|
||||
function getError() {
|
||||
if (submissionError.status === 400) {
|
||||
if (submissionError.message.includes('face_image')) {
|
||||
return intl.formatMessage(messages['id.verification.submission.alert.error.face']);
|
||||
return props.intl.formatMessage(messages['id.verification.submission.alert.error.face']);
|
||||
}
|
||||
if (submissionError.message.includes('Photo ID image')) {
|
||||
return intl.formatMessage(messages['id.verification.submission.alert.error.id']);
|
||||
return props.intl.formatMessage(messages['id.verification.submission.alert.error.id']);
|
||||
}
|
||||
if (submissionError.message.includes('Name')) {
|
||||
return intl.formatMessage(messages['id.verification.submission.alert.error.name']);
|
||||
return props.intl.formatMessage(messages['id.verification.submission.alert.error.name']);
|
||||
}
|
||||
if (submissionError.message.includes('unsupported format')) {
|
||||
return (
|
||||
<>
|
||||
{intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
|
||||
{props.intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
|
||||
<SupportedMediaTypes />
|
||||
</>
|
||||
);
|
||||
@@ -131,7 +131,7 @@ const SummaryPanel = () => {
|
||||
values={{
|
||||
support_link: (
|
||||
<Alert.Link href="https://support.edx.org/hc/en-us">
|
||||
{intl.formatMessage(
|
||||
{props.intl.formatMessage(
|
||||
messages['id.verification.review.error'],
|
||||
{ siteName: getConfig().SITE_NAME },
|
||||
)}
|
||||
@@ -145,7 +145,7 @@ const SummaryPanel = () => {
|
||||
return (
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
title={intl.formatMessage(messages['id.verification.review.title'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.review.title'])}
|
||||
>
|
||||
{submissionError && (
|
||||
<Alert
|
||||
@@ -158,17 +158,17 @@ const SummaryPanel = () => {
|
||||
</Alert>
|
||||
)}
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.review.description'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.description'])}
|
||||
</p>
|
||||
<div className="row mb-4">
|
||||
<div className="col-6">
|
||||
<label htmlFor="photo-of-face" className="font-weight-bold">
|
||||
{intl.formatMessage(messages['id.verification.review.portrait.label'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.portrait.label'])}
|
||||
</label>
|
||||
<ImagePreview
|
||||
id="photo-of-face"
|
||||
src={facePhotoFile}
|
||||
alt={intl.formatMessage(messages['id.verification.review.portrait.alt'])}
|
||||
alt={props.intl.formatMessage(messages['id.verification.review.portrait.alt'])}
|
||||
/>
|
||||
<Link
|
||||
className="btn btn-outline-primary"
|
||||
@@ -176,17 +176,17 @@ const SummaryPanel = () => {
|
||||
state={{ fromSummary: true }}
|
||||
data-testid="portrait-retake"
|
||||
>
|
||||
{intl.formatMessage(messages['id.verification.review.portrait.retake'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.portrait.retake'])}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<label htmlFor="photo-of-id/edit" className="font-weight-bold">
|
||||
{intl.formatMessage(messages['id.verification.review.id.label'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.id.label'])}
|
||||
</label>
|
||||
<ImagePreview
|
||||
id="photo-of-id"
|
||||
src={idPhotoFile}
|
||||
alt={intl.formatMessage(messages['id.verification.review.id.alt'])}
|
||||
alt={props.intl.formatMessage(messages['id.verification.review.id.alt'])}
|
||||
/>
|
||||
<Link
|
||||
className="btn btn-outline-primary"
|
||||
@@ -194,14 +194,14 @@ const SummaryPanel = () => {
|
||||
state={{ fromSummary: true }}
|
||||
data-testid="id-retake"
|
||||
>
|
||||
{intl.formatMessage(messages['id.verification.review.id.retake'])}
|
||||
{props.intl.formatMessage(messages['id.verification.review.id.retake'])}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<CameraHelpWithUpload />
|
||||
<div className="form-group">
|
||||
<label htmlFor="name-to-be-used" className="font-weight-bold">
|
||||
{intl.formatMessage(messages['id.verification.name.label'])}
|
||||
{props.intl.formatMessage(messages['id.verification.name.label'])}
|
||||
</label>
|
||||
{renderManagedProfileMessage()}
|
||||
<div className="d-flex">
|
||||
@@ -237,4 +237,8 @@ const SummaryPanel = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SummaryPanel;
|
||||
SummaryPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(SummaryPanel);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
import BasePanel from './BasePanel';
|
||||
@@ -14,12 +14,11 @@ import ImageFileUpload from '../ImageFileUpload';
|
||||
import CollapsibleImageHelp from '../CollapsibleImageHelp';
|
||||
import SupportedMediaTypes from '../SupportedMediaTypes';
|
||||
|
||||
const TakeIdPhotoPanel = () => {
|
||||
const TakeIdPhotoPanel = (props) => {
|
||||
const panelSlug = 'take-id-photo';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
// This prevents focus switching to the heading when taking a photo
|
||||
@@ -31,31 +30,31 @@ const TakeIdPhotoPanel = () => {
|
||||
name={panelSlug}
|
||||
focusOnMount={!mounted}
|
||||
title={useCameraForId
|
||||
? intl.formatMessage(messages['id.verification.id.photo.title.camera'])
|
||||
: intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
|
||||
? props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])
|
||||
: props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
|
||||
>
|
||||
<div>
|
||||
{idPhotoFile && !useCameraForId && (
|
||||
<ImagePreview
|
||||
src={idPhotoFile}
|
||||
alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
|
||||
alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{useCameraForId ? (
|
||||
<div>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
|
||||
{props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
|
||||
</p>
|
||||
<Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginBottom: '1.25rem' }}>
|
||||
<p data-testid="upload-text">
|
||||
{intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
|
||||
{props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
|
||||
<SupportedMediaTypes />
|
||||
</p>
|
||||
<ImageFileUpload onFileChange={setIdPhotoFile} />
|
||||
<ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -63,11 +62,15 @@ const TakeIdPhotoPanel = () => {
|
||||
<CollapsibleImageHelp />
|
||||
<div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default TakeIdPhotoPanel;
|
||||
TakeIdPhotoPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(TakeIdPhotoPanel);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useNextPanelSlug } from '../routing-utilities';
|
||||
import BasePanel from './BasePanel';
|
||||
@@ -10,12 +10,11 @@ import IdVerificationContext from '../IdVerificationContext';
|
||||
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
const TakePortraitPhotoPanel = () => {
|
||||
const TakePortraitPhotoPanel = (props) => {
|
||||
const panelSlug = 'take-portrait-photo';
|
||||
const nextPanelSlug = useNextPanelSlug(panelSlug);
|
||||
const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
// This prevents focus switching to the heading when taking a photo
|
||||
@@ -26,22 +25,26 @@ const TakePortraitPhotoPanel = () => {
|
||||
<BasePanel
|
||||
name={panelSlug}
|
||||
focusOnMount={!mounted}
|
||||
title={intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
|
||||
title={props.intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
{intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
|
||||
{props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
|
||||
</p>
|
||||
<Camera onImageCapture={setFacePhotoFile} isPortrait />
|
||||
</div>
|
||||
<CameraHelp isPortrait />
|
||||
<div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
|
||||
<Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
|
||||
{intl.formatMessage(messages['id.verification.next'])}
|
||||
{props.intl.formatMessage(messages['id.verification.next'])}
|
||||
</Link>
|
||||
</div>
|
||||
</BasePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default TakePortraitPhotoPanel;
|
||||
TakePortraitPhotoPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(TakePortraitPhotoPanel);
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import messages from '../IdVerification.messages';
|
||||
|
||||
export const UnsupportedCameraDirectionsPanel = (props) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<>
|
||||
{props.browserName === 'Chrome' && <span>{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
|
||||
<span> </span>
|
||||
<span>{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export const UnsupportedCameraDirectionsPanel = (props) => (
|
||||
<>
|
||||
{props.browserName === 'Chrome' && <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
|
||||
<span> </span>
|
||||
<span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
UnsupportedCameraDirectionsPanel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
browserName: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default UnsupportedCameraDirectionsPanel;
|
||||
export default injectIntl(UnsupportedCameraDirectionsPanel);
|
||||
|
||||
@@ -4,13 +4,16 @@ import {
|
||||
render, cleanup, act, screen,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { ERROR_REASONS } from '../IdVerificationContext';
|
||||
import AccessBlocked from '../AccessBlocked';
|
||||
|
||||
const IntlAccessBlocked = injectIntl(AccessBlocked);
|
||||
|
||||
describe('AccessBlocked', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
error: '',
|
||||
};
|
||||
|
||||
@@ -24,7 +27,7 @@ describe('AccessBlocked', () => {
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<AccessBlocked {...defaultProps} />
|
||||
<IntlAccessBlocked {...defaultProps} />
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
@@ -40,7 +43,7 @@ describe('AccessBlocked', () => {
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<AccessBlocked {...defaultProps} />
|
||||
<IntlAccessBlocked {...defaultProps} />
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
@@ -56,7 +59,7 @@ describe('AccessBlocked', () => {
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<AccessBlocked {...defaultProps} />
|
||||
<IntlAccessBlocked {...defaultProps} />
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
render, cleanup, screen, act, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import CameraPhoto from 'jslib-html5-camera-photo';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import * as blazeface from '@tensorflow-models/blazeface';
|
||||
import * as analytics from '@edx/frontend-platform/analytics';
|
||||
@@ -182,99 +181,4 @@ describe('SubmittedPanel', () => {
|
||||
await fireEvent.click(checkbox);
|
||||
expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
|
||||
});
|
||||
|
||||
describe('Camera getSizeFactor method', () => {
|
||||
let mockGetDataUri;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
mockGetDataUri = jest.fn().mockReturnValue('data:image/jpeg;base64,test');
|
||||
});
|
||||
|
||||
it('scales down large resolutions to stay under 10MB limit', async () => {
|
||||
const currentSettings = { width: 4000, height: 3000 };
|
||||
|
||||
CameraPhoto.mockImplementation(() => ({
|
||||
startCamera: jest.fn(),
|
||||
stopCamera: jest.fn(),
|
||||
getDataUri: mockGetDataUri,
|
||||
getCameraSettings: jest.fn().mockReturnValue(currentSettings),
|
||||
}));
|
||||
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<Camera {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
|
||||
const button = await screen.findByRole('button', { name: /take photo/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
// For large resolution: size = 4000 * 3000 * 3 = 36,000,000 bytes
|
||||
// Ratio = 9,999,999 / 36,000,000 ≈ 0.278
|
||||
expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
|
||||
sizeFactor: expect.closeTo(0.278, 2),
|
||||
}));
|
||||
});
|
||||
|
||||
it('scales up 640x480 resolution to improve quality', async () => {
|
||||
const currentSettings = { width: 640, height: 480 };
|
||||
|
||||
CameraPhoto.mockImplementation(() => ({
|
||||
startCamera: jest.fn(),
|
||||
stopCamera: jest.fn(),
|
||||
getDataUri: mockGetDataUri,
|
||||
getCameraSettings: jest.fn().mockReturnValue(currentSettings),
|
||||
}));
|
||||
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<Camera {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
|
||||
const button = await screen.findByRole('button', { name: /take photo/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
|
||||
sizeFactor: 2,
|
||||
}));
|
||||
});
|
||||
|
||||
it('maintains original size for medium resolutions', async () => {
|
||||
const currentSettings = { width: 1280, height: 720 };
|
||||
|
||||
CameraPhoto.mockImplementation(() => ({
|
||||
startCamera: jest.fn(),
|
||||
stopCamera: jest.fn(),
|
||||
getDataUri: mockGetDataUri,
|
||||
getCameraSettings: jest.fn().mockReturnValue(currentSettings),
|
||||
}));
|
||||
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<Camera {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
|
||||
const button = await screen.findByRole('button', { name: /take photo/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
|
||||
sizeFactor: 1,
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, screen, act,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import * as analytics from '@edx/frontend-platform/analytics';
|
||||
import IdVerificationContext from '../IdVerificationContext';
|
||||
import CollapsibleImageHelp from '../CollapsibleImageHelp';
|
||||
@@ -16,7 +17,11 @@ analytics.sendTrackEvent = jest.fn();
|
||||
|
||||
window.HTMLMediaElement.prototype.play = () => {};
|
||||
|
||||
const IntlCollapsible = injectIntl(CollapsibleImageHelp);
|
||||
|
||||
describe('CollapsibleImageHelpPanel', () => {
|
||||
const defaultProps = { intl: {} };
|
||||
|
||||
const contextValue = {
|
||||
useCameraForId: true,
|
||||
setUseCameraForId: jest.fn(),
|
||||
@@ -31,7 +36,7 @@ describe('CollapsibleImageHelpPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<CollapsibleImageHelp />
|
||||
<IntlCollapsible {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -51,7 +56,7 @@ describe('CollapsibleImageHelpPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<CollapsibleImageHelp />
|
||||
<IntlCollapsible {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
/* eslint-disable react/jsx-no-useless-fragment */
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { MemoryRouter as Router } from 'react-router-dom';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import {
|
||||
render, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationPageSlot from '../../plugin-slots/IdVerificationPageSlot';
|
||||
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationPage from '../IdVerificationPage';
|
||||
import * as selectors from '../data/selectors';
|
||||
|
||||
jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
|
||||
@@ -46,18 +47,22 @@ jest.mock('../panels/SubmittedPanel', () => function SubmittedPanelMock() {
|
||||
return <></>;
|
||||
});
|
||||
|
||||
const IntlIdVerificationPage = injectIntl(IdVerificationPage);
|
||||
const mockStore = configureStore();
|
||||
|
||||
describe('IdVerificationPage', () => {
|
||||
selectors.mockClear();
|
||||
jest.spyOn(Storage.prototype, 'setItem');
|
||||
const store = mockStore();
|
||||
const props = {
|
||||
intl: {},
|
||||
};
|
||||
it('decodes and stores course_id', async () => {
|
||||
await act(async () => render((
|
||||
<Router initialEntries={[`/?course_id=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`]}>
|
||||
<IntlProvider locale="en">
|
||||
<Provider store={store}>
|
||||
<IdVerificationPageSlot />
|
||||
<IntlIdVerificationPage {...props} />
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -73,7 +78,7 @@ describe('IdVerificationPage', () => {
|
||||
<Router initialEntries={['/?next=dashboard']}>
|
||||
<IntlProvider locale="en">
|
||||
<Provider store={store}>
|
||||
<IdVerificationPageSlot />
|
||||
<IntlIdVerificationPage {...props} />
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -88,7 +93,7 @@ describe('IdVerificationPage', () => {
|
||||
<Router initialEntries={['/?next=dashboard']}>
|
||||
<IntlProvider locale="en">
|
||||
<Provider store={store}>
|
||||
<IdVerificationPageSlot />
|
||||
<IntlIdVerificationPage {...props} />
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -102,7 +107,7 @@ describe('IdVerificationPage', () => {
|
||||
<Router initialEntries={['/?next=dashboard']}>
|
||||
<IntlProvider locale="en">
|
||||
<Provider store={store}>
|
||||
<IdVerificationPageSlot />
|
||||
<IntlIdVerificationPage {...props} />
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import { VerifiedNameContext } from '../../VerifiedNameContext';
|
||||
import GetNameIdPanel from '../../panels/GetNameIdPanel';
|
||||
@@ -12,7 +13,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
}));
|
||||
|
||||
const IntlGetNameIdPanel = injectIntl(GetNameIdPanel);
|
||||
|
||||
describe('GetNameIdPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const IDVerificationContextValue = {
|
||||
nameOnAccount: 'test',
|
||||
userId: 3,
|
||||
@@ -30,7 +37,7 @@ describe('GetNameIdPanel', () => {
|
||||
<IntlProvider locale="en">
|
||||
<VerifiedNameContext.Provider value={verifiedNameContextValue}>
|
||||
<IdVerificationContext.Provider value={idVerificationContextValue}>
|
||||
<GetNameIdPanel />
|
||||
<IntlGetNameIdPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</VerifiedNameContext.Provider>
|
||||
</IntlProvider>
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import IdContextPanel from '../../panels/IdContextPanel';
|
||||
|
||||
@@ -12,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
}));
|
||||
|
||||
const IntlIdContextPanel = injectIntl(IdContextPanel);
|
||||
|
||||
describe('IdContextPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = {
|
||||
facePhotoFile: 'test.jpg',
|
||||
reachedSummary: false,
|
||||
@@ -27,7 +33,7 @@ describe('IdContextPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<IdContextPanel />
|
||||
<IntlIdContextPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -43,7 +49,7 @@ describe('IdContextPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<IdContextPanel />
|
||||
<IntlIdContextPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
|
||||
@@ -11,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
}));
|
||||
|
||||
const IntlPortraitPhotoContextPanel = injectIntl(PortraitPhotoContextPanel);
|
||||
|
||||
describe('PortraitPhotoContextPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = { reachedSummary: false };
|
||||
|
||||
afterEach(() => {
|
||||
@@ -23,7 +30,7 @@ describe('PortraitPhotoContextPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<PortraitPhotoContextPanel />
|
||||
<IntlPortraitPhotoContextPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -39,7 +46,7 @@ describe('PortraitPhotoContextPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<PortraitPhotoContextPanel />
|
||||
<IntlPortraitPhotoContextPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
render, screen, cleanup, act, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import RequestCameraAccessPanel from '../../panels/RequestCameraAccessPanel';
|
||||
|
||||
@@ -15,7 +15,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
|
||||
jest.mock('bowser');
|
||||
|
||||
const IntlRequestCameraAccessPanel = injectIntl(RequestCameraAccessPanel);
|
||||
|
||||
describe('RequestCameraAccessPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = {
|
||||
reachedSummary: false,
|
||||
tryGetUserMedia: jest.fn(),
|
||||
@@ -32,7 +38,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -48,7 +54,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -67,7 +73,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -83,7 +89,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -100,7 +106,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -117,7 +123,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -133,7 +139,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -149,7 +155,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -165,7 +171,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -182,7 +188,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -199,7 +205,7 @@ describe('RequestCameraAccessPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<RequestCameraAccessPanel />
|
||||
<IntlRequestCameraAccessPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import ReviewRequirementsPanel from '../../panels/ReviewRequirementsPanel';
|
||||
|
||||
@@ -12,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
}));
|
||||
|
||||
const IntlReviewRequirementsPanel = injectIntl(ReviewRequirementsPanel);
|
||||
|
||||
describe('ReviewRequirementsPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const context = {};
|
||||
|
||||
const getPanel = async () => {
|
||||
@@ -20,7 +26,7 @@ describe('ReviewRequirementsPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={context}>
|
||||
<ReviewRequirementsPanel />
|
||||
<IntlReviewRequirementsPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import SubmittedPanel from '../../panels/SubmittedPanel';
|
||||
|
||||
@@ -11,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
}));
|
||||
|
||||
const IntlSubmittedPanel = injectIntl(SubmittedPanel);
|
||||
|
||||
describe('SubmittedPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = {
|
||||
facePhotoFile: 'test.jpg',
|
||||
idPhotoFile: 'test.jpg',
|
||||
@@ -36,7 +43,7 @@ describe('SubmittedPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<SubmittedPanel />
|
||||
<IntlSubmittedPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -52,7 +59,7 @@ describe('SubmittedPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<SubmittedPanel />
|
||||
<IntlSubmittedPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -68,7 +75,7 @@ describe('SubmittedPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<SubmittedPanel />
|
||||
<IntlSubmittedPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
/* eslint-disable no-import-assign */
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen, fireEvent, waitFor,
|
||||
} from '@testing-library/react';
|
||||
import '@edx/frontend-platform/analytics';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import * as dataService from '../../data/service';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import SummaryPanel from '../../panels/SummaryPanel';
|
||||
@@ -17,7 +18,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
jest.mock('../../data/service');
|
||||
dataService.submitIdVerification = jest.fn().mockReturnValue({ success: true });
|
||||
|
||||
const IntlSummaryPanel = injectIntl(SummaryPanel);
|
||||
|
||||
describe('SummaryPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const appContextValue = {
|
||||
facePhotoFile: 'test.jpg',
|
||||
idPhotoFile: 'test.jpg',
|
||||
@@ -35,7 +42,7 @@ describe('SummaryPanel', () => {
|
||||
<IntlProvider locale="en">
|
||||
<VerifiedNameContext.Provider value={verifiedNameContextValue}>
|
||||
<IdVerificationContext.Provider value={appContextValue}>
|
||||
<SummaryPanel />
|
||||
<IntlSummaryPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</VerifiedNameContext.Provider>
|
||||
</IntlProvider>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
|
||||
import messages from '../../IdVerification.messages';
|
||||
|
||||
jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
sendTrackEvent: jest.fn(),
|
||||
@@ -13,7 +13,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
|
||||
|
||||
jest.mock('../../Camera');
|
||||
|
||||
const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
|
||||
|
||||
describe('TakeIdPhotoPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = {
|
||||
facePhotoFile: 'test.jpg',
|
||||
idPhotoFile: null,
|
||||
@@ -31,7 +37,7 @@ describe('TakeIdPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakeIdPhotoPanel />
|
||||
<IntlTakeIdPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -46,7 +52,7 @@ describe('TakeIdPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakeIdPhotoPanel />
|
||||
<IntlTakeIdPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -64,7 +70,7 @@ describe('TakeIdPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakeIdPhotoPanel />
|
||||
<IntlTakeIdPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -79,7 +85,7 @@ describe('TakeIdPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakeIdPhotoPanel />
|
||||
<IntlTakeIdPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -92,24 +98,4 @@ describe('TakeIdPhotoPanel', () => {
|
||||
const text = await screen.findByTestId('upload-text');
|
||||
expect(text.textContent).toContain('Please upload a photo of your identification card');
|
||||
});
|
||||
|
||||
it('shows correct text if useCameraForId', async () => {
|
||||
contextValue.useCameraForId = true;
|
||||
await act(async () => render((
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakeIdPhotoPanel />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
)));
|
||||
|
||||
// check that upload title and text are correct
|
||||
const title = await screen.findByText(messages['id.verification.id.photo.title.camera'].defaultMessage);
|
||||
expect(title).toBeVisible();
|
||||
|
||||
const text = await screen.findByText(messages['id.verification.id.photo.instructions.camera'].defaultMessage);
|
||||
expect(text).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/* eslint-disable react/jsx-no-useless-fragment */
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import {
|
||||
render, cleanup, act, screen, fireEvent,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import IdVerificationContext from '../../IdVerificationContext';
|
||||
import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';
|
||||
|
||||
@@ -15,7 +16,13 @@ jest.mock('../../Camera', () => function CameraMock() {
|
||||
return <></>;
|
||||
});
|
||||
|
||||
const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
|
||||
|
||||
describe('TakePortraitPhotoPanel', () => {
|
||||
const defaultProps = {
|
||||
intl: {},
|
||||
};
|
||||
|
||||
const contextValue = {
|
||||
facePhotoFile: null,
|
||||
idPhotoFile: null,
|
||||
@@ -32,7 +39,7 @@ describe('TakePortraitPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakePortraitPhotoPanel />
|
||||
<IntlTakePortraitPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -47,7 +54,7 @@ describe('TakePortraitPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakePortraitPhotoPanel />
|
||||
<IntlTakePortraitPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
@@ -66,7 +73,7 @@ describe('TakePortraitPhotoPanel', () => {
|
||||
<Router>
|
||||
<IntlProvider locale="en">
|
||||
<IdVerificationContext.Provider value={contextValue}>
|
||||
<TakePortraitPhotoPanel />
|
||||
<IntlTakePortraitPhotoPanel {...defaultProps} />
|
||||
</IdVerificationContext.Provider>
|
||||
</IntlProvider>
|
||||
</Router>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user