Revert "Upgraded frontend-build version to v12 (#613)"

This reverts commit f0d6a92ab2.

.env

@@ -26,4 +26,7 @@ STUDIO_BASE_URL=''
 SUPPORT_URL=''
 USER_INFO_COOKIE_NAME=''
 ENABLE_COPPA_COMPLIANCE=''
+ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=

.env.development

@@ -27,4 +27,8 @@ STUDIO_BASE_URL=''
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
+ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=
+

.env.test

@@ -26,4 +26,7 @@ STUDIO_BASE_URL=''
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
+ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
+APP_ID=
+MFE_CONFIG_API_URL=

.github/workflows/ci.yml

@@ -13,7 +13,6 @@ jobs:
         npm: [8.5.0]
         npm-test:
         - i18n_extract
-        - is-es5
         - lint
         - test
     steps:
@@ -26,6 +25,6 @@ jobs:
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}
     - name: upload coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3
       with:
         fail_ci_if_error: false

Makefile

@@ -11,7 +11,7 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-NPM_TESTS=build i18n_extract lint test is-es5
+NPM_TESTS=build i18n_extract lint test
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite

package.json

@@ -11,11 +11,10 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
   },
   "bugs": {
     "url": "https://github.com/edx/frontend-app-account/issues"
@@ -25,14 +24,13 @@
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.2.0",
-    "@edx/frontend-component-header": "2.4.5",
-    "@edx/frontend-platform": "1.15.1",
+    "@edx/frontend-component-footer": "11.1.2",
+    "@edx/frontend-component-header": "3.1.3",
+    "@edx/frontend-platform": "2.5.0",
     "@edx/paragon": "19.20.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -40,8 +38,8 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.16",
     "@tensorflow-models/blazeface": "0.0.7",
-    "@tensorflow/tfjs-converter": "1.7.4",
-    "@tensorflow/tfjs-core": "1.7.4",
+    "@tensorflow/tfjs-converter": "3.18.0",
+    "@tensorflow/tfjs-core": "3.18.0",
     "bowser": "2.11.0",
     "classnames": "2.3.1",
     "core-js": "3.19.3",
@@ -59,11 +57,13 @@
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
     "lodash.pickby": "4.6.0",
+    "long": "^5.2.0",
     "memoize-one": "5.2.1",
     "prop-types": "15.7.2",
     "qs": "6.10.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
@@ -80,16 +80,15 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.1.1",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-build": "9.1.2",
     "@edx/reactifex": "^1.0.3",
     "@testing-library/jest-dom": "5.15.1",
-    "@testing-library/react": "12.1.4",
-    "codecov": "3.8.3",
+    "@testing-library/react": "12.1.5",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "es-check": "6.1.1",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
   }
-}
+}

src/account-settings/AccountSettingsPage.jsx

@@ -37,11 +37,13 @@ import ThirdPartyAuth from './third-party-auth';
 import BetaLanguageBanner from './BetaLanguageBanner';
 import EmailField from './EmailField';
 import OneTimeDismissibleAlert from './OneTimeDismissibleAlert';
+import DOBModal from './DOBForm';
 import {
   YEAR_OF_BIRTH_OPTIONS,
   EDUCATION_LEVELS,
   GENDER_OPTIONS,
   COUNTRY_WITH_STATES,
+  COPPA_COMPLIANCE_YEAR,
   getStatesList,
 } from './data/constants';
 import { fetchSiteLanguages } from './site-language';
@@ -494,13 +496,37 @@ class AccountSettingsPage extends React.Component {
     );
 
     const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
+
+    // if user is under 13 and does not have cookie set
+    const shouldUpdateDOB = (
+      getConfig().ENABLE_COPPA_COMPLIANCE
+      && getConfig().ENABLE_DOB_UPDATE
+      && this.props.formValues.year_of_birth.toString() >= COPPA_COMPLIANCE_YEAR.toString()
+      && !localStorage.getItem('submittedDOB')
+    );
     return (
       <>
+        { shouldUpdateDOB
+          && (
+          <DOBModal
+            {...editableFieldProps}
+          />
+          )}
         <div className="account-section pt-3 mb-5" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
           {
             this.props.mostRecentVerifiedName
             && this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)
           }
+          {localStorage.getItem('submittedDOB')
+            && (
+            <OneTimeDismissibleAlert
+              id="updated-dob"
+              variant="success"
+              icon={CheckCircle}
+              header={this.props.intl.formatMessage(messages['account.settings.field.dob.form.success'])}
+              body=""
+            />
+            )}
 
           <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}

src/account-settings/AccountSettingsPage.messages.jsx

@@ -266,6 +266,46 @@ const messages = defineMessages({
     defaultMessage: 'Select a year of birth',
     description: 'Option for empty value on account settings year of birth field.',
   },
+  'account.settings.field.dob.month': {
+    id: 'account.settings.field.dob.month',
+    defaultMessage: 'Month',
+    description: 'Label for account settings month of birth field.',
+  },
+  'account.settings.field.dob.year': {
+    id: 'account.settings.field.dob.year',
+    defaultMessage: 'Year',
+    description: 'Label for account settings year of birth field.',
+  },
+  'account.settings.field.dob.form.button': {
+    id: 'account.settings.field.dob.form.button',
+    defaultMessage: 'Please confirm your date of birth',
+    description: 'Message to prompt user to enter dob',
+  },
+  'account.settings.field.dob.form.title': {
+    id: 'account.settings.field.dob.form.title',
+    defaultMessage: 'Confirm your date of birth',
+    description: 'Title of DOB form',
+  },
+  'account.settings.field.dob.form.help.text': {
+    id: 'account.settings.field.dob.form.help.text',
+    defaultMessage: 'We ask for birthday information to ensure that underage people aren’t using edX.',
+    description: 'Help text for DOB form',
+  },
+  'account.settings.field.dob.form.success': {
+    id: 'account.settings.field.dob.form.success',
+    defaultMessage: 'Thank you for entering your birthday information.',
+    description: 'Title of banner when date of birth is successfully entered',
+  },
+  'account.settings.field.month_of_birth.options.empty': {
+    id: 'account.settings.field.month_of_birth.options.empty',
+    defaultMessage: 'Select a month of birth',
+    description: 'Option for empty value on account settings month of birth field.',
+  },
+  'account.settingsfield.dob.error.general': {
+    id: 'account.settingsfield.dob.error.general',
+    defaultMessage: 'A technical error occurred. Please try again.',
+    description: 'Generic error message.',
+  },
   'account.settings.field.country': {
     id: 'account.settings.field.country',
     defaultMessage: 'Country',

src/account-settings/DOBForm.jsx

@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Form, StatefulButton, ModalDialog, ActionRow, useToggle, Button,
+} from '@edx/paragon';
+import React, { useCallback, useEffect } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import messages from './AccountSettingsPage.messages';
+import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
+import { editableFieldSelector } from './data/selectors';
+import { saveSettingsReset } from './data/actions';
+
+function DOBModal(props) {
+  const {
+    saveState,
+    error,
+    onSubmit,
+    intl,
+  } = props;
+
+  const dispatch = useDispatch();
+
+  // eslint-disable-next-line no-unused-vars
+  const [isOpen, open, close, toggle] = useToggle(true, {});
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const month = e.target.month.value;
+    const year = e.target.year.value;
+    const data = month !== '' && year !== '' ? [{ field_name: 'DOB', field_value: `${year}-${month}` }] : [];
+    onSubmit('extended_profile', data);
+  };
+
+  const handleComplete = useCallback(() => {
+    localStorage.setItem('submittedDOB', 'true');
+    close();
+    dispatch(saveSettingsReset());
+  }, [dispatch, close]);
+
+  const handleClose = useCallback(() => {
+    close();
+    dispatch(saveSettingsReset());
+  }, [dispatch, close]);
+
+  function renderErrors() {
+    if (saveState === 'error' || error) {
+      return (
+        <Form.Control.Feedback type="invalid" key="general-error">
+          {intl.formatMessage(messages['account.settingsfield.dob.error.general'])}
+        </Form.Control.Feedback>
+      );
+    }
+    return null;
+  }
+
+  useEffect(() => {
+    if (saveState === 'complete' && isOpen) {
+      handleComplete();
+    }
+  }, [handleComplete, saveState, isOpen]);
+
+  return (
+    <>
+      <Button variant="primary" onClick={open}>
+        {intl.formatMessage(messages['account.settings.field.dob.form.button'])}
+      </Button>
+      <ModalDialog
+        title={intl.formatMessage(messages['account.settings.field.dob.form.title'])}
+        isOpen={isOpen}
+        onClose={handleClose}
+        hasCloseButton={false}
+        variant="default"
+      >
+        <form onSubmit={handleSubmit}>
+
+          <ModalDialog.Header>
+            <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>{intl.formatMessage(messages['account.settings.field.dob.form.help.text'])}</p>
+            <Form.Group>
+              <Form.Label>
+                {intl.formatMessage(messages['account.settings.field.dob.month'])}
+              </Form.Label>
+              <Form.Control
+                as="select"
+                name="month"
+              >
+                {[...Array(12).keys()].map(month => (
+                  <option key={month + 1} value={month + 1}>{month + 1}</option>
+                ))}
+              </Form.Control>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>
+                {intl.formatMessage(messages['account.settings.field.dob.year'])}
+              </Form.Label>
+              <Form.Control
+                as="select"
+                name="year"
+              >
+                {YEAR_OF_BIRTH_OPTIONS.map(year => (
+                  <option key={year.value} value={year.value}>{year.label}</option>
+                ))}
+              </Form.Control>
+            </Form.Group>
+            {renderErrors()}
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant="tertiary">
+                Cancel
+              </ModalDialog.CloseButton>
+              <StatefulButton
+                type="submit"
+                state={saveState}
+                labels={{
+                  default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                }}
+                disabledStates={[]}
+              />
+            </ActionRow>
+          </ModalDialog.Footer>
+
+        </form>
+      </ModalDialog>
+    </>
+  );
+}
+
+DOBModal.propTypes = {
+  saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
+  error: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+DOBModal.defaultProps = {
+  saveState: undefined,
+  error: undefined,
+};
+
+export default connect(editableFieldSelector)(injectIntl(DOBModal));

src/account-settings/certificate-preference/CertificatePreference.jsx

@@ -29,11 +29,6 @@ function CertificatePreference({
   saveState,
   useVerifiedNameForCerts,
 }) {
-  if (!originalVerifiedName) {
-    // If the user doesn't have an approved verified name, do not display this component
-    return null;
-  }
-
   const dispatch = useDispatch();
   const [checked, setChecked] = useState(false);
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -75,21 +70,27 @@ function CertificatePreference({
   }
 
   useEffect(() => {
-    if (fieldName === 'verified_name') {
-      setChecked(useVerifiedNameForCerts);
-    } else {
-      setChecked(!useVerifiedNameForCerts);
+    if (originalVerifiedName) {
+      if (fieldName === 'verified_name') {
+        setChecked(useVerifiedNameForCerts);
+      } else {
+        setChecked(!useVerifiedNameForCerts);
+      }
     }
-  }, [useVerifiedNameForCerts]);
+  }, [originalVerifiedName, fieldName, useVerifiedNameForCerts]);
 
   useEffect(() => {
-    if (modalIsOpen && saveState === 'complete') {
-      setModalIsOpen(false);
-      dispatch(closeForm(fieldName));
+    if (originalVerifiedName) {
+      if (modalIsOpen && saveState === 'complete') {
+        setModalIsOpen(false);
+        dispatch(closeForm(fieldName));
+      }
     }
-  }, [modalIsOpen, saveState]);
+  }, [dispatch, originalVerifiedName, fieldName, modalIsOpen, saveState]);
 
-  return (
+  // If the user doesn't have an approved verified name, do not display this component
+
+  return originalVerifiedName ? (
     <>
       <Form.Checkbox className="mt-1 mb-4" checked={checked} onChange={handleCheckboxChange}>
         {intl.formatMessage(messages['account.settings.field.name.checkbox.certificate.select'])}
@@ -150,7 +151,7 @@ function CertificatePreference({
         </Form>
       </ModalDialog>
     </>
-  );
+  ) : null;
 }
 
 CertificatePreference.propTypes = {

src/account-settings/coaching/test/__snapshots__/CoachingConsent.test.jsx.snap

@@ -34,13 +34,11 @@ exports[`CoachingConsent disables name field on enterprise user 1`] = `
           >
             <div />
             <div>
-              <span>
-                Your name is managed by 
-                <b>
-                  test person
-                </b>
-                . Contact your administrator for help.
-              </span>
+              Your name is managed by 
+              <b>
+                test person
+              </b>
+              . Contact your administrator for help.
             </div>
           </div>
           <div

src/account-settings/data/constants.js

@@ -10,6 +10,11 @@ export const YEAR_OF_BIRTH_OPTIONS = (() => {
   return years.reverse();
 })();
 
+export const COPPA_COMPLIANCE_YEAR = (() => {
+  const currentYear = new Date().getFullYear();
+  return currentYear - 13;
+})();
+
 export const EDUCATION_LEVELS = [
   '',
   'p',

src/account-settings/delete-account/DeleteAccount.test.jsx

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
 // Testing the modals separately, they just clutter up the snapshots if included here.
-jest.mock('./ConfirmationModal');
-jest.mock('./SuccessModal');
+jest.mock('./ConfirmationModal', () => () => (<></>));
+jest.mock('./SuccessModal', () => () => (<></>));
 
 import { DeleteAccount } from './DeleteAccount'; // eslint-disable-line import/first
 
@@ -37,6 +37,7 @@ describe('DeleteAccount', () => {
         </IntlProvider>
       ))
       .toJSON();
+
     expect(tree).toMatchSnapshot();
   });
 

src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap

@@ -86,9 +86,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>
@@ -282,9 +280,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>
@@ -386,16 +382,14 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
       <div
-        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
@@ -445,9 +439,7 @@ Array [
                     If you proceed, you will be unable to use this account to take courses on localhost.
                   </p>
                   <p>
-                    <span>
-                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-                    </span>
+                    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
                   </p>
                 </div>
               </div>
@@ -513,7 +505,7 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
     </div>
   </div>,

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -17,9 +17,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -66,9 +64,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -118,18 +114,16 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
       </svg>
     </div>
     <div>
-      <span>
-        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-"
-          onClick={[Function]}
-          target="_self"
-        >
-          activate your account
-        </a>
-        .
-      </span>
+      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-"
+        onClick={[Function]}
+        target="_self"
+      >
+        activate your account
+      </a>
+      .
     </div>
   </div>
 </div>
@@ -152,9 +146,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
     Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
-    <span>
-      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
-    </span>
+    You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
   </p>
   <p
     className="text-danger h6"
@@ -204,18 +196,16 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
       </svg>
     </div>
     <div>
-      <span>
-        Before proceeding, please 
-        <a
-          className="pgn__hyperlink default-link standalone-link"
-          href="https://support.edx.org/hc/en-us/articles/207206067"
-          onClick={[Function]}
-          target="_self"
-        >
-          unlink all social media accounts
-        </a>
-        .
-      </span>
+      Before proceeding, please 
+      <a
+        className="pgn__hyperlink default-link standalone-link"
+        href="https://support.edx.org/hc/en-us/articles/207206067"
+        onClick={[Function]}
+        target="_self"
+      >
+        unlink all social media accounts
+      </a>
+      .
     </div>
   </div>
 </div>

src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap

@@ -417,16 +417,14 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
       <div
-        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
@@ -480,7 +478,7 @@ Array [
             "width": "1px",
           }
         }
-        tabIndex={0}
+        tabIndex={-1}
       />
     </div>
   </div>,

src/account-settings/demographics/Checkboxes.jsx

@@ -14,7 +14,7 @@ const Checkboxes = (props) => {
   const [selected, setSelected] = useState(values);
   useEffect(() => {
     onChange(id, selected);
-  }, [selected]);
+  }, [id, onChange, selected]);
 
   const handleToggle = (value, option) => {
     // If the user checked 'declined', uncheck all other options

src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap

@@ -710,9 +710,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
     >
       <div />
       <div>
-        <span>
-          An error occurred attempting to retrieve or save your account information. Please try again later.
-        </span>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
       </div>
     </div>
   </div>
@@ -1370,9 +1368,7 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
     >
       <div />
       <div>
-        <span>
-          An error occurred attempting to retrieve or save your account information. Please try again later.
-        </span>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
       </div>
     </div>
   </div>

src/account-settings/name-change/NameChange.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -34,20 +34,20 @@ function NameChangeModal({
   const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
   const [confirmedWarning, setConfirmedWarning] = useState(false);
 
-  function resetLocalState() {
+  const resetLocalState = useCallback(() => {
     setConfirmedWarning(false);
     dispatch(requestNameChangeReset());
-  }
+  }, [dispatch]);
 
   function handleChange(e) {
     setVerifiedNameInput(e.target.value);
   }
 
-  function handleClose() {
+  const handleClose = useCallback(() => {
     resetLocalState();
     dispatch(closeForm(targetFormId));
     dispatch(saveSettingsReset());
-  }
+  }, [dispatch, resetLocalState, targetFormId]);
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -71,7 +71,7 @@ function NameChangeModal({
       handleClose();
       push(`/id-verification?next=${encodeURIComponent('account/settings')}`);
     }
-  }, [saveState]);
+  }, [handleClose, push, saveState]);
 
   function renderErrors() {
     if (Object.keys(errors).length > 0) {

src/head/Head.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+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 injectIntl(Head);

src/head/Head.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+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', () => {
+    mount(<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');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});

src/head/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.page.title': {
+    id: 'account.page.title',
+    defaultMessage: 'Account | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;

src/i18n/messages/ar.json

@@ -209,6 +209,7 @@
   "account.settings.sso.account.disconnect.error": "حدثت مشكلة أثناء قطع اتصال هذا الحساب، اتصل بالدعم عند استمرار المشكلة.",
   "account.settings.sso.unlink.account": "إلغاء ربط حساب {name} ",
   "account.settings.sso.no.providers": "لا يمكن ربط أية حسابات حاليًا",
+  "account.page.title": "Account | {siteName}",
   "id.verification.access.blocked.denied": "We cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
   "id.verification.next": "التالي",
   "id.verification.support": "support",

src/i18n/messages/es_419.json

@@ -193,7 +193,7 @@
   "account.settings.name.change.warning.one": "Atención: esta acción actualizará el nombre que aparece en todos los certificados obtenidos a través de esta cuenta en el pasado y en aquellos en que actualmente estás obteniendo o que adquirirás en el futuro.",
   "account.settings.name.change.warning.two": "Esta acción no podrá revertirse sin antes verificar tu identidad.",
   "account.settings.name.change.id.name.label": "Ingrese su nombre tal como aparece en su tarjeta de identificación vigente de estudiante, trabajo o emitida por el gobierno.",
-  "account.settings.name.change.id.name.placeholder": "Enter the name on your photo ID",
+  "account.settings.name.change.id.name.placeholder": "Ingrese el nombre en su identificación con foto",
   "account.settings.name.change.error.valid.name": "Por favor ingresa un nombre valido.",
   "account.settings.name.change.error.general": "Ha ocurrido un error técnico. Por favor intentalo de nuevo.",
   "account.settings.name.change.continue": "Continuar",
@@ -209,6 +209,7 @@
   "account.settings.sso.account.disconnect.error": "Hubo un problema al desconectar esta Cuenta. Si el problema persiste, contacte soporte.",
   "account.settings.sso.unlink.account": "Desvincular la cuenta de {accountName} ",
   "account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento.",
+  "account.page.title": "Account | {siteName}",
   "id.verification.access.blocked.denied": "No podemos verificar tu identidad en este momento. Si aún no has activado tu cuenta, comprueba en tu carpeta de correo no deseado el correo de activación de {email}.",
   "id.verification.next": "Siguiente",
   "id.verification.support": "soporte",
@@ -309,7 +310,7 @@
   "id.verification.id.photo.instructions.upload.error.invalidFileType": "El archivo que has seleccionado no cumple con el tipo de imágenes soportadas. Por favor escoge entre los siguientes formatos:",
   "id.verification.id.photo.instructions.upload.error.fileTooLarge": "El archivo que has seleccionado es demasiado grande. Vuelve a intentarlo con un archivo de menos de 10 MB.",
   "id.verification.name.check.title": "Revisa nuevamente tu nombre",
-  "id.verification.name.check.instructions": "Does the name below match the name on your photo ID? If not, update the name below to match your photo ID.",
+  "id.verification.name.check.instructions": "¿El nombre a continuación coincide con el nombre en su identificación con foto? De lo contrario, actualice el nombre a continuación para que coincida con su identificación con foto.",
   "id.verification.name.check.mismatch.information": "Si el nombre a continuación no coincide con su identificación con foto, se denegará su verificación de identidad.",
   "id.verification.name.error": "Ingrese su nombre tal como aparece en su identificación con foto.",
   "id.verification.account.name.warning.prefix": "Ten en cuenta:",

src/i18n/messages/fr.json

@@ -209,6 +209,7 @@
   "account.settings.sso.account.disconnect.error": "Un problème est survenu lors de la déconnexion de ce compte. Contactez le support si le problème persiste.",
   "account.settings.sso.unlink.account": "Dissocier le compte {name}",
   "account.settings.sso.no.providers": "Aucun compte ne peut être lié pour le moment.",
+  "account.page.title": "Account | {siteName}",
   "id.verification.access.blocked.denied": "Nous ne pouvez pas vérifier votre identité pour le moment. Si vous n'avez pas encore activé votre compte, veuillez vérifier votre dossier de pourriels pour le courriel d'activation de {email}.",
   "id.verification.next": "Suivant",
   "id.verification.support": "support",

src/i18n/messages/zh_CN.json

@@ -209,6 +209,7 @@
   "account.settings.sso.account.disconnect.error": "There was a problem disconnecting this account. Contact support if the problem persists.",
   "account.settings.sso.unlink.account": "Unlink {name} account",
   "account.settings.sso.no.providers": "No accounts can be linked at this time.",
+  "account.page.title": "Account | {siteName}",
   "id.verification.access.blocked.denied": "We cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
   "id.verification.next": "Next",
   "id.verification.support": "support",

src/id-verification/ImageFileUpload.jsx

@@ -31,7 +31,7 @@ export default function ImageFileUpload({ onFileChange, intl }) {
       });
       fileReader.readAsDataURL(fileObject);
     }
-  }, []);
+  }, [errorTypes.fileTooLarge, errorTypes.invalidFileType, onFileChange]);
 
   return (
     <>

src/id-verification/panels/BasePanel.jsx

@@ -16,7 +16,7 @@ export default function BasePanel({
     if (focusOnMount && headingRef.current) {
       headingRef.current.focus();
     }
-  }, [headingRef.current]);
+  }, [focusOnMount]);
 
   const redirectSlug = useVerificationRedirectSlug(name);
   if (redirectSlug) {

src/id-verification/panels/GetNameIdPanel.jsx

@@ -28,7 +28,7 @@ function GetNameIdPanel(props) {
     if (location.state?.fromSummary && nameInputRef.current) {
       nameInputRef.current.focus();
     }
-  }, []);
+  }, [idPhotoName, location.state, nameOnAccountValue, setIdPhotoName]);
 
   function handleSubmit(e) {
     e.preventDefault();

src/id-verification/panels/SummaryPanel.jsx

@@ -32,7 +32,7 @@ function SummaryPanel(props) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submissionError, setSubmissionError] = useState(null);
 
-  useEffect(() => setReachedSummary(true), []);
+  useEffect(() => setReachedSummary(true), [setReachedSummary]);
 
   function renderManagedProfileMessage() {
     if (!profileDataManager) {

src/id-verification/tests/IdVerificationPage.test.jsx

@@ -18,15 +18,15 @@ jest.mock('../VerifiedNameContext', () => {
     VerifiedNameContextProvider: jest.fn(({ children }) => children),
   };
 });
-jest.mock('../panels/ReviewRequirementsPanel');
-jest.mock('../panels/RequestCameraAccessPanel');
-jest.mock('../panels/PortraitPhotoContextPanel');
-jest.mock('../panels/TakePortraitPhotoPanel');
-jest.mock('../panels/IdContextPanel');
-jest.mock('../panels/GetNameIdPanel');
-jest.mock('../panels/TakeIdPhotoPanel');
-jest.mock('../panels/SummaryPanel');
-jest.mock('../panels/SubmittedPanel');
+jest.mock('../panels/ReviewRequirementsPanel', () => () => (<></>));
+jest.mock('../panels/RequestCameraAccessPanel', () => () => (<></>));
+jest.mock('../panels/PortraitPhotoContextPanel', () => () => (<></>));
+jest.mock('../panels/TakePortraitPhotoPanel', () => () => (<></>));
+jest.mock('../panels/IdContextPanel', () => () => (<></>));
+jest.mock('../panels/GetNameIdPanel', () => () => (<></>));
+jest.mock('../panels/TakeIdPhotoPanel', () => () => (<></>));
+jest.mock('../panels/SummaryPanel', () => () => (<></>));
+jest.mock('../panels/SubmittedPanel', () => () => (<></>));
 
 const IntlIdVerificationPage = injectIntl(IdVerificationPage);
 

src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx

@@ -12,7 +12,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
-jest.mock('../../Camera');
+jest.mock('../../Camera', () => () => (<></>));
 
 const history = createMemoryHistory();
 

src/index.jsx

@@ -20,10 +20,12 @@ import CoachingConsent from './account-settings/coaching/CoachingConsent';
 import appMessages from './i18n';
 
 import './index.scss';
+import Head from './head/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
+      <Head />
       <Switch>
         <Route path="/coaching_consent" component={CoachingConsent} />
         <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
@@ -64,6 +66,7 @@ initialize({
         ENABLE_DEMOGRAPHICS_COLLECTION: (process.env.ENABLE_DEMOGRAPHICS_COLLECTION || false),
         DEMOGRAPHICS_BASE_URL: process.env.DEMOGRAPHICS_BASE_URL,
         ENABLE_COPPA_COMPLIANCE: (process.env.ENABLE_COPPA_COMPLIANCE || false),
+        ENABLE_DOB_UPDATE: (process.env.ENABLE_DOB_UPDATE || false),
         MARKETING_EMAILS_OPT_IN: (process.env.MARKETING_EMAILS_OPT_IN || false),
       }, 'App loadConfig override handler');
     },