{intl.formatMessage(messages[headerMessageId])}
\n {detailsMessageId ? (\n{intl.formatMessage(messages[detailsMessageId])}
\n ) : null}\n \n );\n }\n\n render() {\n const {\n status,\n errorType,\n intl,\n onCancel,\n onChange,\n onSubmit,\n password,\n } = this.props;\n const open = ['confirming', 'pending', 'failed'].includes(status);\n const passwordFieldId = 'passwordFieldId';\n const invalidMessage = messages[this.getShortErrorMessageId(errorType)];\n\n // TODO: We lack a good way of providing custom language for a particular site. This is a hack\n // to allow edx.org to fulfill its business requirements.\n const deleteAccountModalText2MessageKey = getConfig().SITE_NAME === 'edX'\n ? 'account.settings.delete.account.modal.text.2.edX'\n : 'account.settings.delete.account.modal.text.2';\n\n return (\n\n {this.renderError()}\n \n \n
\n\n \n );\n }\n}\n\nConfirmationModal.propTypes = {\n status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),\n errorType: PropTypes.oneOf(['empty-password', 'server']),\n intl: intlShape.isRequired,\n onCancel: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n password: PropTypes.string.isRequired,\n};\n\nConfirmationModal.defaultProps = {\n status: null,\n errorType: null,\n};\n\nexport default injectIntl(ConfirmationModal);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { ModalLayer, ModalCloseButton } from '@edx/paragon';\n\nimport messages from './messages';\n\nexport const SuccessModal = (props) => {\n const { status, intl, onClose } = props;\n return (\n\n \n {intl.formatMessage(\n messages['account.settings.delete.account.modal.text.1'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {intl.formatMessage(\n messages[deleteAccountModalText2MessageKey],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n
\n
\n\n \n {intl.formatMessage(messages['account.settings.delete.account.modal.after.header'])}\n
\n\n
\n \n {intl.formatMessage(messages['account.settings.delete.account.modal.after.text'])}\n
\n\n
\n
\n );\n }\n}\n\nDeleteAccount.propTypes = {\n deleteAccount: PropTypes.func.isRequired,\n deleteAccountConfirmation: PropTypes.func.isRequired,\n deleteAccountFailure: PropTypes.func.isRequired,\n deleteAccountReset: PropTypes.func.isRequired,\n deleteAccountCancel: PropTypes.func.isRequired,\n status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),\n errorType: PropTypes.oneOf(['empty-password', 'server']),\n hasLinkedTPA: PropTypes.bool,\n isVerifiedAccount: PropTypes.bool,\n intl: intlShape.isRequired,\n};\n\nDeleteAccount.defaultProps = {\n hasLinkedTPA: false,\n isVerifiedAccount: true,\n status: null,\n errorType: null,\n};\n\n// Assume we're part of the accountSettings state.\nconst mapStateToProps = state => state.accountSettings.deleteAccount;\n\nexport default connect(\n mapStateToProps,\n {\n deleteAccount,\n deleteAccountConfirmation,\n deleteAccountFailure,\n deleteAccountReset,\n deleteAccountCancel,\n },\n)(injectIntl(DeleteAccount));\n","import { DELETE_ACCOUNT } from './actions';\n\nexport const defaultState = {\n status: null,\n errorType: null,\n};\n\nconst reducer = (state = defaultState, action = null) => {\n if (action !== null) {\n switch (action.type) {\n case DELETE_ACCOUNT.CONFIRMATION:\n return {\n ...state,\n status: 'confirming',\n };\n\n case DELETE_ACCOUNT.BEGIN:\n return {\n ...state,\n status: 'pending',\n };\n\n case DELETE_ACCOUNT.SUCCESS:\n return {\n ...state,\n status: 'deleted',\n };\n\n case DELETE_ACCOUNT.FAILURE:\n return {\n ...state,\n status: 'failed',\n errorType: action.payload.reason || 'server',\n };\n\n case DELETE_ACCOUNT.RESET: {\n const oldStatus = state.status;\n\n return {\n ...state,\n // clear the error state if applicable, otherwise don't change state\n status: oldStatus === 'failed' ? 'confirming' : oldStatus,\n errorType: null,\n };\n }\n\n case DELETE_ACCOUNT.CANCEL:\n return {\n ...state,\n status: null,\n errorType: null,\n };\n\n default:\n }\n }\n return state;\n};\n\nexport default reducer;\n","import { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport formurlencoded from 'form-urlencoded';\nimport { handleRequestError } from '../../data/utils';\n\n/**\n * Request deletion of the user's account.\n */\n// eslint-disable-next-line import/prefer-default-export\nexport async function postDeleteAccount(password) {\n const { data } = await getAuthenticatedHttpClient()\n .post(\n `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/deactivate_logout/`,\n formurlencoded({ password }),\n {\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n },\n )\n .catch(handleRequestError);\n return data;\n}\n","import { put, call, takeEvery } from 'redux-saga/effects';\n\nimport {\n DELETE_ACCOUNT,\n deleteAccountBegin,\n deleteAccountSuccess,\n deleteAccountFailure,\n} from './actions';\n\nimport { postDeleteAccount } from './service';\n\nexport function* handleDeleteAccount(action) {\n try {\n yield put(deleteAccountBegin());\n const response = yield call(postDeleteAccount, action.payload.password);\n yield put(deleteAccountSuccess(response));\n } catch (e) {\n if (e.response.status === 403) {\n yield put(deleteAccountFailure('invalid-password'));\n } else if (typeof e.response.data === 'string') {\n yield put(deleteAccountFailure());\n } else {\n throw e;\n }\n }\n}\n\nexport default function* saga() {\n yield takeEvery(DELETE_ACCOUNT.BASE, handleDeleteAccount);\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionReplace } from '@edx/paragon';\n\nconst onChildExit = (htmlNode) => {\n // If the leaving child has focus, take control and redirect it\n if (htmlNode.contains(document.activeElement)) {\n // Get the newly entering sibling.\n // It's the previousSibling, but not for any explicit reason. So checking for both.\n const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;\n\n // There's no replacement, do nothing.\n if (!enteringChild) {\n return;\n }\n\n // Get all the focusable elements in the entering child and focus the first one\n const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n if (focusableElements.length) {\n focusableElements[0].focus();\n }\n }\n};\n\nconst SwitchContent = ({ expression, cases, className }) => {\n const getContent = (caseKey) => {\n if (cases[caseKey]) {\n if (typeof cases[caseKey] === 'string') {\n return getContent(cases[caseKey]);\n }\n return React.cloneElement(cases[caseKey], { key: caseKey });\n }\n if (cases.default) {\n if (typeof cases.default === 'string') {\n return getContent(cases.default);\n }\n React.cloneElement(cases.default, { key: 'default' });\n }\n\n return null;\n };\n\n return (\n \n {intl.formatMessage(messages['account.settings.delete.account.header'])}\n
\n{intl.formatMessage(messages['account.settings.delete.account.subheader'])}
\n\n {intl.formatMessage(\n messages['account.settings.delete.account.text.1'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {intl.formatMessage(\n messages[deleteAccountText2MessageKey],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n
\n {intl.formatMessage(\n messages['account.settings.delete.account.text.warning'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n
\n
\n
\n ),\n }}\n />\n );\n};\n\nEditableField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n emptyLabel: PropTypes.node,\n type: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n userSuppliedValue: PropTypes.string,\n saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),\n error: PropTypes.string,\n confirmationMessageDefinition: PropTypes.shape({\n id: PropTypes.string.isRequired,\n defaultMessage: PropTypes.string.isRequired,\n description: PropTypes.string,\n }),\n confirmationValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n helpText: PropTypes.node,\n onEdit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n isEditing: PropTypes.bool,\n isEditable: PropTypes.bool,\n isGrayedOut: PropTypes.bool,\n intl: intlShape.isRequired,\n};\n\nEditableField.defaultProps = {\n value: undefined,\n saveState: undefined,\n label: undefined,\n emptyLabel: undefined,\n error: undefined,\n confirmationMessageDefinition: undefined,\n confirmationValue: undefined,\n helpText: undefined,\n isEditing: false,\n isEditable: true,\n isGrayedOut: false,\n userSuppliedValue: undefined,\n};\n\nexport default connect(editableFieldSelector, {\n onEdit: openForm,\n onCancel: closeForm,\n})(injectIntl(EditableField));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n Button, Form, StatefulButton,\n} from '@edx/paragon';\nimport { faPencilAlt } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport SwitchContent from './SwitchContent';\nimport messages from './AccountSettingsPage.messages';\n\nimport {\n openForm,\n closeForm,\n} from './data/actions';\nimport { editableFieldSelector } from './data/selectors';\nimport CertificatePreference from './certificate-preference/CertificatePreference';\n\nconst EditableSelectField = (props) => {\n const {\n name,\n label,\n emptyLabel,\n type,\n value,\n userSuppliedValue,\n options,\n saveState,\n error,\n confirmationMessageDefinition,\n confirmationValue,\n helpText,\n onEdit,\n onCancel,\n onSubmit,\n onChange,\n isEditing,\n isEditable,\n isGrayedOut,\n intl,\n ...others\n } = props;\n const id = `field-${name}`;\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onSubmit(name, new FormData(e.target).get(name));\n };\n\n const handleChange = (e) => {\n onChange(name, e.target.value);\n };\n\n const handleEdit = () => {\n onEdit(name);\n };\n\n const handleCancel = () => {\n onCancel(name);\n };\n\n const renderEmptyLabel = () => {\n if (isEditable) {\n return ;\n }\n return {emptyLabel};\n };\n\n const renderValue = (rawValue) => {\n if (!rawValue) {\n return renderEmptyLabel();\n }\n let finalValue = rawValue;\n\n if (options) {\n // Use == instead of === to prevent issues when HTML casts numbers as strings\n // eslint-disable-next-line eqeqeq\n const selectedOption = options.find(option => option.value == rawValue);\n if (selectedOption) {\n finalValue = selectedOption.label;\n }\n }\n\n if (userSuppliedValue) {\n finalValue += `: ${userSuppliedValue}`;\n }\n\n return finalValue;\n };\n\n const renderConfirmationMessage = () => {\n if (!confirmationMessageDefinition || !confirmationValue) {\n return null;\n }\n return intl.formatMessage(confirmationMessageDefinition, {\n value: confirmationValue,\n });\n };\n const selectOptions = options.map(option => (\n \n ));\n\n return (\n \n
\n {label}
\n {isEditable ? (\n \n ) : null}\n{renderValue(value)}
\n{renderConfirmationMessage() || helpText}
\n\n
\n ),\n }}\n />\n );\n};\n\nEditableSelectField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n emptyLabel: PropTypes.node,\n type: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n userSuppliedValue: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n })),\n saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),\n error: PropTypes.string,\n confirmationMessageDefinition: PropTypes.shape({\n id: PropTypes.string.isRequired,\n defaultMessage: PropTypes.string.isRequired,\n description: PropTypes.string,\n }),\n confirmationValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n helpText: PropTypes.node,\n onEdit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n isEditing: PropTypes.bool,\n isEditable: PropTypes.bool,\n isGrayedOut: PropTypes.bool,\n intl: intlShape.isRequired,\n};\n\nEditableSelectField.defaultProps = {\n value: undefined,\n options: [],\n saveState: undefined,\n label: undefined,\n emptyLabel: undefined,\n error: undefined,\n confirmationMessageDefinition: undefined,\n confirmationValue: undefined,\n helpText: undefined,\n isEditing: false,\n isEditable: true,\n isGrayedOut: false,\n userSuppliedValue: undefined,\n};\n\nexport default connect(editableFieldSelector, {\n onEdit: openForm,\n onCancel: closeForm,\n})(injectIntl(EditableSelectField));\n","import { AsyncActionType } from '../../data/utils';\n\nexport const RESET_PASSWORD = new AsyncActionType('ACCOUNT_SETTINGS', 'RESET_PASSWORD');\n\nexport const resetPassword = email => ({\n type: RESET_PASSWORD.BASE,\n payload: { email },\n});\n\nexport const resetPasswordBegin = () => ({\n type: RESET_PASSWORD.BEGIN,\n});\n\nexport const resetPasswordSuccess = () => ({\n type: RESET_PASSWORD.SUCCESS,\n});\n\nexport const resetPasswordReset = () => ({\n type: RESET_PASSWORD.RESET,\n});\n\nexport const resetPasswordForbidden = () => ({\n type: RESET_PASSWORD.FORBIDDEN,\n});\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.settings.editable.field.password.reset.button': {\n id: 'account.settings.editable.field.password.reset.button',\n defaultMessage: 'Reset Password',\n description: 'The password reset button in account settings',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage } from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\n\nimport Alert from '../Alert';\n\nconst ConfirmationAlert = (props) => {\n const { email } = props;\n\n const technicalSupportLink = (\n \n
\n {label}
\n {isEditable ? (\n \n ) : null}\n{renderValue(value)}
\n{renderConfirmationMessage() || helpText}
\n\n \n
\n
\n );\n};\n\nResetPassword.propTypes = {\n email: PropTypes.string,\n intl: intlShape.isRequired,\n resetPassword: PropTypes.func.isRequired,\n status: PropTypes.string,\n};\n\nResetPassword.defaultProps = {\n email: '',\n status: null,\n};\n\nconst mapStateToProps = state => state.accountSettings.resetPassword;\n\nexport default connect(\n mapStateToProps,\n {\n resetPassword,\n },\n)(injectIntl(ResetPassword));\n","import { RESET_PASSWORD } from './actions';\n\nexport const defaultState = {\n status: null,\n};\n\nconst reducer = (state = defaultState, action = null) => {\n if (action !== null) {\n switch (action.type) {\n case RESET_PASSWORD.BEGIN:\n return {\n ...state,\n status: 'pending',\n };\n case RESET_PASSWORD.SUCCESS:\n return {\n ...state,\n status: 'complete',\n };\n case RESET_PASSWORD.FORBIDDEN:\n return {\n ...state,\n status: 'forbidden',\n };\n\n default:\n }\n }\n return state;\n};\n\nexport default reducer;\n","import { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport formurlencoded from 'form-urlencoded';\nimport { handleRequestError } from '../../data/utils';\n\n// eslint-disable-next-line import/prefer-default-export\nexport async function postResetPassword(email) {\n const { data } = await getAuthenticatedHttpClient()\n .post(\n `${getConfig().LMS_BASE_URL}/password_reset/`,\n formurlencoded({ email }),\n {\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n },\n )\n .catch(handleRequestError);\n\n return data;\n}\n","import { put, call, takeEvery } from 'redux-saga/effects';\n\nimport {\n resetPasswordBegin, resetPasswordForbidden, resetPasswordSuccess, RESET_PASSWORD,\n} from './actions';\nimport { postResetPassword } from './service';\n\nfunction* handleResetPassword(action) {\n yield put(resetPasswordBegin());\n try {\n const response = yield call(postResetPassword, action.payload.email);\n yield put(resetPasswordSuccess(response));\n } catch (error) {\n if (error.response && error.response.status === 403) {\n yield put(resetPasswordForbidden(error));\n } else {\n throw error;\n }\n }\n}\n\nexport default function* saga() {\n yield takeEvery(RESET_PASSWORD.BASE, handleResetPassword);\n}\n","import { AsyncActionType } from '../../data/utils';\n\nexport const REQUEST_NAME_CHANGE = new AsyncActionType('ACCOUNT_SETTINGS', 'REQUEST_NAME_CHANGE');\n\nexport const requestNameChange = (username, profileName, verifiedName) => ({\n type: REQUEST_NAME_CHANGE.BASE,\n payload: { username, profileName, verifiedName },\n});\n\nexport const requestNameChangeBegin = () => ({\n type: REQUEST_NAME_CHANGE.BEGIN,\n});\n\nexport const requestNameChangeSuccess = () => ({\n type: REQUEST_NAME_CHANGE.SUCCESS,\n});\n\nexport const requestNameChangeFailure = errors => ({\n type: REQUEST_NAME_CHANGE.FAILURE,\n payload: { errors },\n});\n\nexport const requestNameChangeReset = () => ({\n type: REQUEST_NAME_CHANGE.RESET,\n});\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.settings.name.change.title.id': {\n id: 'account.settings.name.change.title.id',\n defaultMessage: 'This name change requires identity verification',\n description: 'Inform the user that changing their name requires identity verification',\n },\n 'account.settings.name.change.title.begin': {\n id: 'account.settings.name.change.title.begin',\n defaultMessage: 'Before we begin',\n description: 'Title before beginning the ID verification process',\n },\n 'account.settings.name.change.warning.one': {\n id: 'account.settings.name.change.warning.one',\n defaultMessage: 'Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.',\n description: 'Warning informing the user that a name change will update the name on all of their certificates.',\n },\n 'account.settings.name.change.warning.two': {\n id: 'account.settings.name.change.warning.two',\n defaultMessage: 'This action cannot be undone without verifying your identity.',\n description: 'Warning informing the user that a name change cannot be undone without ID verification.',\n },\n 'account.settings.name.change.id.name.label': {\n id: 'account.settings.name.change.id.name.label',\n defaultMessage: 'Enter your name as it appears on your unexpired student, work, or government-issued identification card.',\n description: 'Form label instructing the user to enter the name on their ID.',\n },\n 'account.settings.name.change.id.name.placeholder': {\n id: 'account.settings.name.change.id.name.placeholder',\n defaultMessage: 'Enter the name on your photo ID',\n description: 'Form label instructing the user to enter the name on their ID.',\n },\n 'account.settings.name.change.error.valid.name': {\n id: 'account.settings.name.change.error.valid.name',\n defaultMessage: 'Please enter a valid name.',\n description: 'Error that appears when the user doesn’t enter a valid name.',\n },\n 'account.settings.name.change.error.general': {\n id: 'account.settings.name.change.error.general',\n defaultMessage: 'A technical error occurred. Please try again.',\n description: 'Generic error message.',\n },\n 'account.settings.name.change.continue': {\n id: 'account.settings.name.change.continue',\n defaultMessage: 'Continue',\n description: 'Continue button.',\n },\n 'account.settings.name.change.cancel': {\n id: 'account.settings.name.change.cancel',\n defaultMessage: 'Cancel',\n description: 'Cancel button.',\n },\n});\n\nexport default messages;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { connect, useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n ActionRow,\n Alert,\n Button,\n Col,\n Form,\n ModalDialog,\n StatefulButton,\n} from '@edx/paragon';\n\nimport { closeForm, saveSettingsReset } from '../data/actions';\nimport { nameChangeSelector } from '../data/selectors';\n\nimport { requestNameChange, requestNameChangeFailure, requestNameChangeReset } from './data/actions';\nimport messages from './messages';\n\nconst NameChangeModal = ({\n targetFormId,\n errors,\n formValues,\n intl,\n saveState,\n}) => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const { username } = getAuthenticatedUser();\n const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');\n const [confirmedWarning, setConfirmedWarning] = useState(false);\n\n const resetLocalState = useCallback(() => {\n setConfirmedWarning(false);\n dispatch(requestNameChangeReset());\n }, [dispatch]);\n\n const handleChange = (e) => {\n setVerifiedNameInput(e.target.value);\n };\n\n const handleClose = useCallback(() => {\n resetLocalState();\n dispatch(closeForm(targetFormId));\n dispatch(saveSettingsReset());\n }, [dispatch, resetLocalState, targetFormId]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n if (saveState === 'pending') {\n return;\n }\n\n if (!verifiedNameInput) {\n dispatch(requestNameChangeFailure({\n verified_name: intl.formatMessage(messages['account.settings.name.change.error.valid.name']),\n }));\n } else {\n const draftProfileName = targetFormId === 'name' ? formValues.name : null;\n dispatch(requestNameChange(username, draftProfileName, verifiedNameInput));\n }\n };\n\n useEffect(() => {\n if (saveState === 'complete') {\n handleClose();\n navigate(`/id-verification?next=${encodeURIComponent('account/settings')}`);\n }\n }, [handleClose, navigate, saveState]);\n\n function renderErrors() {\n if (Object.keys(errors).length > 0) {\n return (\n <>\n {Object.entries(errors).map(([key, value]) => (\n \n
\n \n
\n {intl.formatMessage(messages['account.settings.name.change.warning.one'])}\n
\n\n {intl.formatMessage(messages['account.settings.name.change.warning.two'])}\n
\n{name}
\n\n {name}\n \n
\n {hasError ? (\n \n {\n connected\n ? this.renderConnectedProvider(disconnectUrl, name, id)\n : this.renderUnconnectedProvider(connectUrl, name)\n }\n
\n );\n }\n\n renderNoProviders() {\n return (\n \n \n \n
\n );\n }\n}\n\nBetaLanguageBanner.contextType = AppContext;\n\nBetaLanguageBanner.propTypes = {\n intl: intlShape.isRequired,\n siteLanguage: PropTypes.shape({\n previousValue: PropTypes.string,\n draft: PropTypes.string,\n }),\n siteLanguageList: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n code: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n released: PropTypes.bool,\n })).isRequired,\n saveSettings: PropTypes.func.isRequired,\n};\n\nBetaLanguageBanner.defaultProps = {\n siteLanguage: null,\n};\n\nexport default connect(\n betaLanguageBannerSelector,\n {\n saveSettings,\n },\n)(injectIntl(BetaLanguageBanner));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\nimport {\n Button, StatefulButton, Form,\n} from '@edx/paragon';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';\n\nimport Alert from './Alert';\nimport SwitchContent from './SwitchContent';\nimport messages from './AccountSettingsPage.messages';\n\nimport {\n openForm,\n closeForm,\n} from './data/actions';\nimport { editableFieldSelector } from './data/selectors';\n\nconst EmailField = (props) => {\n const {\n name,\n label,\n emptyLabel,\n value,\n saveState,\n error,\n confirmationMessageDefinition,\n confirmationValue,\n helpText,\n onEdit,\n onCancel,\n onSubmit,\n onChange,\n isEditing,\n isEditable,\n intl,\n } = props;\n const id = `field-${name}`;\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onSubmit(name, new FormData(e.target).get(name));\n };\n\n const handleChange = (e) => {\n onChange(name, e.target.value);\n };\n\n const handleEdit = () => {\n onEdit(name);\n };\n\n const handleCancel = () => {\n onCancel(name);\n };\n\n const renderConfirmationMessage = () => {\n if (!confirmationMessageDefinition || !confirmationValue) {\n return null;\n }\n return (\n \n {this.props.intl.formatMessage(messages['account.settings.banner.beta.language'], {\n beta_language: savedLanguage.name,\n })}\n
\n\n \n \n {this.props.intl.formatMessage(\n messages['account.settings.banner.beta.language.action.help.translate'],\n { beta_language: savedLanguage.name },\n )}\n \n
\n \n {intl.formatMessage(messages['account.settings.email.field.confirmation.header'])}\n
\n {intl.formatMessage(confirmationMessageDefinition, { value: confirmationValue })}\n \n );\n };\n\n const renderConfirmationValue = () => (\n \n {confirmationValue}\n \n\n
\n
\n ),\n }}\n />\n );\n};\n\nEmailField.propTypes = {\n name: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n emptyLabel: PropTypes.node,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),\n error: PropTypes.string,\n confirmationMessageDefinition: PropTypes.shape({\n id: PropTypes.string.isRequired,\n defaultMessage: PropTypes.string.isRequired,\n description: PropTypes.string,\n }),\n confirmationValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n helpText: PropTypes.node,\n onEdit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n isEditing: PropTypes.bool,\n isEditable: PropTypes.bool,\n intl: intlShape.isRequired,\n};\n\nEmailField.defaultProps = {\n value: undefined,\n saveState: undefined,\n label: undefined,\n emptyLabel: undefined,\n error: undefined,\n confirmationMessageDefinition: undefined,\n confirmationValue: undefined,\n helpText: undefined,\n isEditing: false,\n isEditable: true,\n};\n\nexport default connect(editableFieldSelector, {\n onEdit: openForm,\n onCancel: closeForm,\n})(injectIntl(EmailField));\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Alert } from '@edx/paragon';\n\nconst OneTimeDismissibleAlert = (props) => {\n const [dismissed, setDismissed] = useState(localStorage.getItem(props.id) !== 'true');\n\n const onClose = () => {\n localStorage.setItem(props.id, 'true');\n setDismissed(false);\n };\n\n return (\n \n
\n {label}
\n {isEditable ? (\n \n ) : null}\n{renderValue()}
\n {renderConfirmationMessage() ||{helpText}
}\n\n {props.body}\n
\n \n );\n};\n\nOneTimeDismissibleAlert.propTypes = {\n id: PropTypes.string.isRequired,\n variant: PropTypes.string,\n icon: PropTypes.func,\n header: PropTypes.string,\n body: PropTypes.string,\n};\n\nOneTimeDismissibleAlert.defaultProps = {\n variant: 'success',\n icon: undefined,\n header: undefined,\n body: undefined,\n};\n\nexport default OneTimeDismissibleAlert;\n","import PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n Form, StatefulButton, ModalDialog, ActionRow, useToggle, Button,\n} from '@edx/paragon';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { connect, useDispatch } from 'react-redux';\nimport messages from './AccountSettingsPage.messages';\nimport { YEAR_OF_BIRTH_OPTIONS } from './data/constants';\nimport { editableFieldSelector } from './data/selectors';\nimport { saveSettingsReset } from './data/actions';\n\nconst DOBModal = (props) => {\n const {\n saveState,\n error,\n onSubmit,\n intl,\n } = props;\n\n const dispatch = useDispatch();\n\n // eslint-disable-next-line no-unused-vars\n const [isOpen, open, close, toggle] = useToggle(true, {});\n const [monthValue, setMonthValue] = useState('');\n const [yearValue, setYearValue] = useState('');\n\n const handleChange = (e) => {\n e.preventDefault();\n\n if (e.target.name === 'month') {\n setMonthValue(e.target.value);\n } else if (e.target.name === 'year') {\n setYearValue(e.target.value);\n }\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n const data = monthValue !== '' && yearValue !== '' ? [{ field_name: 'DOB', field_value: `${yearValue}-${monthValue}` }] : [];\n onSubmit('extended_profile', data);\n };\n\n const handleComplete = useCallback(() => {\n localStorage.setItem('submittedDOB', 'true');\n close();\n dispatch(saveSettingsReset());\n }, [dispatch, close]);\n\n const handleClose = useCallback(() => {\n close();\n dispatch(saveSettingsReset());\n }, [dispatch, close]);\n\n function renderErrors() {\n if (saveState === 'error' || error) {\n return (\n\n handleToggle(event.target.checked, option.value)}\n >\n {option.label}\n \n
\n );\n });\n\n return (\n \n {renderCheckboxes()}\n
\n );\n};\n\nCheckboxes.propTypes = {\n id: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n })),\n values: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func.isRequired,\n};\n\nCheckboxes.defaultProps = {\n options: [],\n values: [],\n};\n\nexport default Checkboxes;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n /* Demographics section heading */\n 'account.settings.section.demographics.information': {\n id: 'account.settings.section.demographics.information',\n defaultMessage: 'Optional Information',\n description: 'The optional information section heading.',\n },\n /* Gender identity */\n 'account.settings.field.demographics.gender': {\n id: 'account.settings.field.demographics.gender',\n defaultMessage: 'Gender identity',\n description: 'Label for account settings gender identity field.',\n },\n 'account.settings.field.demographics.gender.empty': {\n id: 'account.settings.field.demographics.gender.empty',\n defaultMessage: 'Add gender identity',\n description: 'Placeholder for empty account settings gender identity field.',\n },\n 'account.settings.field.demographics.gender.options.empty': {\n id: 'account.settings.field.demographics.gender.options.empty',\n defaultMessage: 'Select a gender identity',\n description: 'Placeholder for the gender identity options dropdown.',\n },\n 'account.settings.field.demographics.gender_description': {\n id: 'account.settings.field.demographics.gender_description',\n defaultMessage: 'Gender identity description',\n description: 'Label for account settings gender identity description field.',\n },\n 'account.settings.field.demographics.gender_description.empty': {\n id: 'account.settings.field.demographics.gender_description.empty',\n defaultMessage: 'Enter description',\n description: 'Placeholder for empty account settings gender identity field.',\n },\n /* Ethnicity */\n 'account.settings.field.demographics.ethnicity': {\n id: 'account.settings.field.demographics.ethnicity',\n defaultMessage: 'Race/Ethnicity identity',\n description: 'Label for account settings ethnic background field.',\n },\n 'account.settings.field.demographics.ethnicity.empty': {\n id: 'account.settings.field.demographics.ethnicity.empty',\n defaultMessage: 'Add race/ethnicity identity',\n description: 'Placeholder for empty account settings ethnic background field.',\n },\n 'account.settings.field.demographics.ethnicity.options.empty': {\n id: 'account.settings.field.demographics.ethnicity.options.empty',\n defaultMessage: 'Select all that apply', // TODO: Is this the desired text?\n description: 'Placeholder for the ethnic background options field.',\n },\n /* Income */\n 'account.settings.field.demographics.income': {\n id: 'account.settings.field.demographics.income',\n defaultMessage: 'Family income',\n description: 'Label for account settings household income field.',\n },\n 'account.settings.field.demographics.income.empty': {\n id: 'account.settings.field.demographics.income.empty',\n defaultMessage: 'Add family income',\n description: 'Placeholder for empty account settings household income field.',\n },\n 'account.settings.field.demographics.income.options.empty': {\n id: 'account.settings.field.demographics.income.options.empty',\n defaultMessage: 'Select a family income range',\n description: 'Placeholder for the household income dropdown.',\n },\n /* Military history */\n 'account.settings.field.demographics.military_history': {\n id: 'account.settings.field.demographics.military_history',\n defaultMessage: 'U.S. Military status',\n description: 'Label for account settings military history field.',\n },\n 'account.settings.field.demographics.military_history.empty': {\n id: 'account.settings.field.demographics.military_history.empty',\n defaultMessage: 'Add military status',\n description: 'Placeholder for empty account settings military history field.',\n },\n 'account.settings.field.demographics.military_history.options.empty': {\n id: 'account.settings.field.demographics.military_history.options.empty',\n defaultMessage: 'Select military status',\n description: 'Placeholder for the military history dropdown.',\n },\n /* Learner and family education level */\n 'account.settings.field.demographics.learner_education_level': {\n id: 'account.settings.field.demographics.learner_education_level',\n defaultMessage: 'Your education level',\n description: 'Label for account settings learner education level field.',\n },\n 'account.settings.field.demographics.learner_education_level.empty': {\n id: 'account.settings.field.demographics.learner_education_level.empty',\n defaultMessage: 'Add education level',\n description: 'Placeholder for empty account settings learner education level field.',\n },\n 'account.settings.field.demographics.parent_education_level': {\n id: 'account.settings.field.demographics.parent_education_level',\n defaultMessage: 'Parents/Guardians education level',\n description: 'Label for account settings parent education level field.',\n },\n 'account.settings.field.demographics.parent_education_level.empty': {\n id: 'account.settings.field.demographics.parent_education_level.empty',\n defaultMessage: 'Add education level',\n description: 'Placeholder for empty account settings parent education level field.',\n },\n 'account.settings.field.demographics.education_level.options.empty': {\n id: 'account.settings.field.demographics.education_level.options.empty',\n defaultMessage: 'Select education level',\n description: 'Placeholder for the education level options dropdown.',\n },\n /* Work status */\n 'account.settings.field.demographics.work_status': {\n id: 'account.settings.field.demographics.work_status',\n defaultMessage: 'Employment status',\n description: 'Label for account settings work status field.',\n },\n 'account.settings.field.demographics.work_status.empty': {\n id: 'account.settings.field.demographics.work_status.empty',\n defaultMessage: 'Add employment status',\n description: 'Placeholder for empty account settings work status field.',\n },\n 'account.settings.field.demographics.work_status.options.empty': {\n id: 'account.settings.field.demographics.work_status.options.empty',\n defaultMessage: 'Select employment status',\n description: 'Placeholder for the work status options dropdown.',\n },\n 'account.settings.field.demographics.work_status_description': {\n id: 'account.settings.field.demographics.work_status_description',\n defaultMessage: 'Employment status description',\n description: 'Label for account settings work status description field.',\n },\n 'account.settings.field.demographics.work_status_description.empty': {\n id: 'account.settings.field.demographics.work_status_description.empty',\n defaultMessage: 'Enter description',\n description: 'Placeholder for empty account settings work status description field.',\n },\n /* Work sector */\n 'account.settings.field.demographics.current_work_sector': {\n id: 'account.settings.field.demographics.current_work_sector',\n defaultMessage: 'Current work industry',\n description: 'Label for account settings current work sector field.',\n },\n 'account.settings.field.demographics.current_work_sector.empty': {\n id: 'account.settings.field.demographics.current_work_sector.empty',\n defaultMessage: 'Add work industry',\n description: 'Placeholder for empty account settings current work sector field.',\n },\n 'account.settings.field.demographics.future_work_sector': {\n id: 'account.settings.field.demographics.future_work_sector',\n defaultMessage: 'Future work industry',\n description: 'Label for account settings future work sector field.',\n },\n 'account.settings.field.demographics.future_work_sector.empty': {\n id: 'account.settings.field.demographics.future_work_sector.empty',\n defaultMessage: 'Add work industry',\n description: 'Placeholder for empty account settings future work sector field.',\n },\n 'account.settings.field.demographics.work_sector.options.empty': {\n id: 'account.settings.field.demographics.work_sector.options.empty',\n defaultMessage: 'Select work industry',\n description: 'Placeholder for the work sector options dropdown.',\n },\n /* Legal copy link text */\n 'account.settings.section.demographics.why': {\n id: 'account.settings.section.demographics.why',\n defaultMessage: 'Why does {siteName} collect this information?',\n description: 'Link text for a link to external legal text',\n },\n});\n\nexport default messages;\n","import { getConfig } from '@edx/frontend-platform';\nimport {\n FormattedMessage,\n injectIntl,\n intlShape,\n} from '@edx/frontend-platform/i18n';\n\nimport { Hyperlink, Form } from '@edx/paragon';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport get from 'lodash.get';\nimport isEmpty from 'lodash.isempty';\nimport memoize from 'memoize-one';\nimport { demographicsSectionSelector } from '../data/selectors';\nimport EditableSelectField from '../EditableSelectField';\nimport Checkboxes from './Checkboxes';\nimport Alert from '../Alert';\nimport { saveMultipleSettings, updateDraft } from '../data/actions';\nimport {\n OTHER,\n SELF_DESCRIBE,\n} from '../data/constants';\nimport messages from './DemographicsSection.messages';\n\nclass DemographicsSection extends React.Component {\n // We check the `demographicsOptions` prop to see if it is empty before we attempt to extract and\n // format the available options for each question from the API response.\n getApiOptions = memoize((demographicsOptions) => (this.hasRetrievedDemographicsOptions() && {\n demographicsGenderOptions: this.addDefaultOption('account.settings.field.demographics.gender.options.empty')\n .concat(demographicsOptions.actions.POST.gender.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n /* Ethnicity options don't need the blank/default option */\n demographicsEthnicityOptions: demographicsOptions.actions.POST.user_ethnicity.child.children.ethnicity.choices.map(\n key => ({\n value: key.value,\n label: key.display_name,\n }),\n ),\n demographicsIncomeOptions: this.addDefaultOption('account.settings.field.demographics.income.options.empty')\n .concat(demographicsOptions.actions.POST.income.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n demographicsMilitaryHistoryOptions: this.addDefaultOption('account.settings.field.demographics.military_history.options.empty')\n .concat(demographicsOptions.actions.POST.military_history.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n demographicsEducationLevelOptions: this.addDefaultOption('account.settings.field.demographics.education_level.options.empty')\n .concat(demographicsOptions.actions.POST.learner_education_level.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n demographicsWorkStatusOptions: this.addDefaultOption('account.settings.field.demographics.work_status.options.empty')\n .concat(demographicsOptions.actions.POST.work_status.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n demographicsWorkSectorOptions: this.addDefaultOption('account.settings.field.demographics.work_sector.options.empty')\n .concat(demographicsOptions.actions.POST.current_work_sector.choices.map(key => ({\n value: key.value,\n label: key.display_name,\n }))),\n }));\n\n ethnicityFieldDisplay = (demographicsEthnicityOptions) => {\n let ethnicities = [];\n if (get(this, 'props.formValues.demographics_user_ethnicity')) {\n ethnicities = this.props.formValues.demographics_user_ethnicity;\n }\n return ethnicities.map((e) => {\n const matchingOption = demographicsEthnicityOptions.filter(option => option.value === e)[0];\n return matchingOption && matchingOption.label;\n }).join(', ');\n };\n\n handleEditableFieldChange = (name, value) => {\n this.props.updateDraft(name, value);\n };\n\n handleSubmit = (formId) => {\n // We have some custom fields in this section. Instead of relying on the\n // submitted values, submit the values stored in 'drafts'.\n const { drafts } = this.props;\n const settingsArray = Object.entries(drafts).map(([field, value]) => ({\n formId: field,\n commitValues: value,\n }));\n\n this.props.saveMultipleSettings(settingsArray, formId);\n };\n\n /**\n * Utility method that adds the specified message as a default option to the list of available\n * choices.\n *\n * @param {*} messageId id of message matching desired default label text\n */\n addDefaultOption(messageId) {\n return [{\n value: '',\n label: this.props.intl.formatMessage(messages[messageId]),\n }];\n }\n\n /**\n * Utility method that helps determine if we were able to retrieve the available options for\n * the Demographics questions. Returns true if the `demographicsOptions` prop is _not_ empty,\n * otherwise false. This prop being empty is indicative of a failure communicating with the\n * Demographics IDA's API.\n */\n hasRetrievedDemographicsOptions() {\n return !isEmpty(this.props.formValues.demographicsOptions);\n }\n\n /**\n * If an error is encountered when trying to communicate with the Demographics IDA then we will\n * display an Alert letting the user know that their info will not be displayed and temporarily\n * cannot be updated.\n */\n renderDemographicsServiceIssueWarning() {\n if (!isEmpty(this.props.formErrors.demographicsError)\n || !this.hasRetrievedDemographicsOptions()) {\n return (\n \n
\n );\n }\n}\n\nDemographicsSection.propTypes = {\n intl: intlShape.isRequired,\n formValues: PropTypes.shape({\n demographics_gender: PropTypes.string,\n demographics_user_ethnicity: PropTypes.shape([]),\n demographics_income: PropTypes.string,\n demographics_military_history: PropTypes.string,\n demographics_learner_education_level: PropTypes.string,\n demographics_parent_education_level: PropTypes.string,\n demographics_work_status: PropTypes.string,\n demographics_current_work_sector: PropTypes.string,\n demographics_future_work_sector: PropTypes.string,\n demographics_work_status_description: PropTypes.string,\n demographics_gender_description: PropTypes.string,\n demographicsOptions: PropTypes.shape({}),\n }).isRequired,\n drafts: PropTypes.shape({\n demographics_gender: PropTypes.string,\n demographics_user_ethnicity: PropTypes.shape([]),\n demographics_income: PropTypes.string,\n demographics_military_history: PropTypes.string,\n demographics_learner_education_level: PropTypes.string,\n demographics_parent_education_level: PropTypes.string,\n demographics_work_status: PropTypes.string,\n demographics_current_work_sector: PropTypes.string,\n demographics_future_work_sector: PropTypes.string,\n demographics_work_status_description: PropTypes.string,\n demographics_gender_description: PropTypes.string,\n demographicsOptions: PropTypes.shape({}),\n }).isRequired,\n formErrors: PropTypes.shape({\n demographicsError: PropTypes.string,\n }).isRequired,\n forwardRef: PropTypes.func.isRequired,\n updateDraft: PropTypes.func.isRequired,\n saveMultipleSettings: PropTypes.func.isRequired,\n};\n\nexport default connect(demographicsSectionSelector, {\n saveMultipleSettings,\n updateDraft,\n})(injectIntl(DemographicsSection));\n","export const Actions = {\n FETCHED_PREFERENCES: 'fetchedPreferences',\n FETCHING_PREFERENCES: 'fetchingPreferences',\n FAILED_PREFERENCES: 'failedPreferences',\n FETCHING_COURSE_LIST: 'fetchingCourseList',\n FETCHED_COURSE_LIST: 'fetchedCourseList',\n FAILED_COURSE_LIST: 'failedCourseList',\n UPDATE_SELECTED_COURSE: 'updateSelectedCourse',\n UPDATE_PREFERENCE: 'updatePreference',\n UPDATE_APP_PREFERENCE: 'updateAppValue',\n};\n\nexport const fetchNotificationPreferenceSuccess = (courseId, payload) => dispatch => (\n dispatch({ type: Actions.FETCHED_PREFERENCES, courseId, payload })\n);\n\nexport const fetchNotificationPreferenceFetching = () => dispatch => (\n dispatch({ type: Actions.FETCHING_PREFERENCES })\n);\n\nexport const fetchNotificationPreferenceFailed = () => dispatch => (\n dispatch({ type: Actions.FAILED_PREFERENCES })\n);\n\nexport const fetchCourseListSuccess = payload => dispatch => (\n dispatch({ type: Actions.FETCHED_COURSE_LIST, payload })\n);\n\nexport const fetchCourseListFetching = () => dispatch => (\n dispatch({ type: Actions.FETCHING_COURSE_LIST })\n);\n\nexport const fetchCourseListFailed = () => dispatch => (\n dispatch({ type: Actions.FAILED_COURSE_LIST })\n);\n\nexport const updateSelectedCourse = courseId => dispatch => (\n dispatch({ type: Actions.UPDATE_SELECTED_COURSE, courseId })\n);\n\nexport const updatePreferenceValue = (appId, preferenceName, notificationChannel, value) => dispatch => (\n dispatch({\n type: Actions.UPDATE_PREFERENCE,\n appId,\n preferenceName,\n notificationChannel,\n value,\n })\n);\n\nexport const updateAppToggle = (courseId, appId, value) => dispatch => (\n dispatch({\n type: Actions.UPDATE_APP_PREFERENCE,\n courseId,\n appId,\n value,\n })\n);\n","import { getConfig, snakeCaseObject } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport snakeCase from 'lodash.snakecase';\n\nexport const getCourseNotificationPreferences = async (courseId) => {\n const url = `${getConfig().LMS_BASE_URL}/api/notifications/configurations/${courseId}`;\n const { data } = await getAuthenticatedHttpClient().get(url);\n return data;\n};\n\nexport const getCourseList = async (page, pageSize) => {\n const params = snakeCaseObject({ page, pageSize });\n const url = `${getConfig().LMS_BASE_URL}/api/notifications/enrollments/`;\n const { data } = await getAuthenticatedHttpClient().get(url, { params });\n return data;\n};\n\nexport const patchAppPreferenceToggle = async (courseId, appId, value) => {\n const patchData = snakeCaseObject({\n notificationApp: appId,\n value,\n });\n const url = `${getConfig().LMS_BASE_URL}/api/notifications/configurations/${courseId}`;\n const { data } = await getAuthenticatedHttpClient().patch(url, patchData);\n return data;\n};\n\nexport const patchPreferenceToggle = async (\n courseId,\n notificationApp,\n notificationType,\n notificationChannel,\n value,\n) => {\n const patchData = snakeCaseObject({\n notificationApp,\n notificationType: snakeCase(notificationType),\n notificationChannel,\n value,\n });\n const url = `${getConfig().LMS_BASE_URL}/api/notifications/configurations/${courseId}`;\n const { data } = await getAuthenticatedHttpClient().patch(url, patchData);\n return data;\n};\n","import { camelCaseObject } from '@edx/frontend-platform';\nimport {\n fetchCourseListSuccess,\n fetchCourseListFetching,\n fetchCourseListFailed,\n fetchNotificationPreferenceFailed,\n fetchNotificationPreferenceFetching,\n fetchNotificationPreferenceSuccess,\n updateAppToggle,\n updatePreferenceValue,\n updateSelectedCourse,\n} from './actions';\nimport {\n getCourseList,\n getCourseNotificationPreferences,\n patchAppPreferenceToggle,\n patchPreferenceToggle,\n} from './service';\n\nconst normalizeCourses = (responseData) => {\n const courseList = responseData.results?.map((enrollment) => ({\n id: enrollment.course.id,\n name: enrollment.course.displayName,\n })) || [];\n\n const pagination = {\n count: responseData.count,\n currentPage: responseData.currentPage,\n hasMore: Boolean(responseData.next),\n totalPages: responseData.numPages,\n };\n\n return {\n courseList,\n pagination,\n showPreferences: responseData.showPreferences,\n };\n};\n\nconst normalizePreferences = (responseData) => {\n const preferences = responseData.notificationPreferenceConfig;\n\n const appKeys = Object.keys(preferences);\n const apps = appKeys.map((appId) => ({\n id: appId,\n enabled: preferences[appId].enabled,\n }));\n\n const nonEditable = {};\n const preferenceList = appKeys.map(appId => {\n const preferencesKeys = Object.keys(preferences[appId].notificationTypes);\n const flatPreferences = preferencesKeys.map(preferenceId => (\n {\n id: preferenceId,\n appId,\n web: preferences[appId].notificationTypes[preferenceId].web,\n push: preferences[appId].notificationTypes[preferenceId].push,\n email: preferences[appId].notificationTypes[preferenceId].email,\n info: preferences[appId].notificationTypes[preferenceId].info || '',\n }\n ));\n nonEditable[appId] = preferences[appId].nonEditable;\n\n return flatPreferences;\n }).flat();\n\n const normalizedPreferences = {\n apps,\n preferences: preferenceList,\n nonEditable,\n };\n return normalizedPreferences;\n};\n\nexport const fetchCourseList = (page, pageSize) => (\n async (dispatch) => {\n try {\n dispatch(fetchCourseListFetching());\n const data = await getCourseList(page, pageSize);\n const normalizedData = normalizeCourses(camelCaseObject(data));\n dispatch(fetchCourseListSuccess(normalizedData));\n } catch (errors) {\n dispatch(fetchCourseListFailed());\n }\n }\n);\n\nexport const fetchCourseNotificationPreferences = (courseId) => (\n async (dispatch) => {\n try {\n dispatch(updateSelectedCourse(courseId));\n dispatch(fetchNotificationPreferenceFetching());\n const data = await getCourseNotificationPreferences(courseId);\n const normalizedData = normalizePreferences(camelCaseObject(data));\n dispatch(fetchNotificationPreferenceSuccess(courseId, normalizedData));\n } catch (errors) {\n dispatch(fetchNotificationPreferenceFailed());\n }\n }\n);\n\nexport const updateAppPreferenceToggle = (courseId, appId, value) => (\n async (dispatch) => {\n try {\n dispatch(updateAppToggle(courseId, appId, value));\n const data = await patchAppPreferenceToggle(courseId, appId, value);\n const normalizedData = normalizePreferences(camelCaseObject(data));\n dispatch(fetchNotificationPreferenceSuccess(courseId, normalizedData));\n } catch (errors) {\n dispatch(updateAppToggle(courseId, appId, !value));\n dispatch(fetchNotificationPreferenceFailed());\n }\n }\n);\n\nexport const updatePreferenceToggle = (\n courseId,\n notificationApp,\n notificationType,\n notificationChannel,\n value,\n) => (\n async (dispatch) => {\n try {\n dispatch(updatePreferenceValue(\n notificationApp,\n notificationType,\n notificationChannel,\n !value,\n ));\n const data = await patchPreferenceToggle(\n courseId,\n notificationApp,\n notificationType,\n notificationChannel,\n value,\n );\n const normalizedData = normalizePreferences(camelCaseObject(data));\n dispatch(fetchNotificationPreferenceSuccess(courseId, normalizedData));\n } catch (errors) {\n dispatch(updatePreferenceValue(\n notificationApp,\n notificationType,\n notificationChannel,\n !value,\n ));\n dispatch(fetchNotificationPreferenceFailed());\n }\n }\n);\n","import { AppContext } from '@edx/frontend-platform/react';\nimport { getConfig, getQueryParameters } from '@edx/frontend-platform';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport memoize from 'memoize-one';\nimport findIndex from 'lodash.findindex';\nimport { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';\nimport {\n injectIntl,\n intlShape,\n FormattedMessage,\n getCountryList,\n getLanguageList,\n} from '@edx/frontend-platform/i18n';\nimport {\n Button, Hyperlink, Icon, Alert,\n} from '@edx/paragon';\nimport { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';\n\nimport messages from './AccountSettingsPage.messages';\nimport {\n fetchSettings,\n saveMultipleSettings,\n saveSettings,\n updateDraft,\n beginNameChange,\n} from './data/actions';\nimport { accountSettingsPageSelector } from './data/selectors';\nimport PageLoading from './PageLoading';\nimport JumpNav from './JumpNav';\nimport DeleteAccount from './delete-account';\nimport EditableField from './EditableField';\nimport EditableSelectField from './EditableSelectField';\nimport ResetPassword from './reset-password';\nimport NameChange from './name-change';\nimport ThirdPartyAuth from './third-party-auth';\nimport BetaLanguageBanner from './BetaLanguageBanner';\nimport EmailField from './EmailField';\nimport OneTimeDismissibleAlert from './OneTimeDismissibleAlert';\nimport DOBModal from './DOBForm';\nimport {\n YEAR_OF_BIRTH_OPTIONS,\n EDUCATION_LEVELS,\n GENDER_OPTIONS,\n COUNTRY_WITH_STATES,\n COPPA_COMPLIANCE_YEAR,\n getStatesList,\n} from './data/constants';\nimport { fetchSiteLanguages } from './site-language';\nimport DemographicsSection from './demographics/DemographicsSection';\nimport { fetchCourseList } from '../notification-preferences/data/thunks';\nimport { withLocation, withNavigate } from './hoc';\n\nclass AccountSettingsPage extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n const duplicateTpaProvider = getQueryParameters().duplicate_provider;\n this.state = {\n duplicateTpaProvider,\n };\n\n this.navLinkRefs = {\n '#basic-information': React.createRef(),\n '#profile-information': React.createRef(),\n '#demographics-information': React.createRef(),\n '#social-media': React.createRef(),\n '#site-preferences': React.createRef(),\n '#linked-accounts': React.createRef(),\n '#delete-account': React.createRef(),\n };\n }\n\n componentDidMount() {\n this.props.fetchCourseList();\n this.props.fetchSettings();\n this.props.fetchSiteLanguages(this.props.navigate);\n sendTrackingLogEvent('edx.user.settings.viewed', {\n page: 'account',\n visibility: null,\n user_id: this.context.authenticatedUser.userId,\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.loading && !prevProps.loaded && this.props.loaded) {\n const locationHash = global.location.hash;\n // Check for the locationHash in the URL and then scroll to it if it is in the\n // NavLinks list\n if (typeof locationHash !== 'string') {\n return;\n }\n if (Object.keys(this.navLinkRefs).includes(locationHash) && this.navLinkRefs[locationHash].current) {\n window.scrollTo(0, this.navLinkRefs[locationHash].current.offsetTop);\n }\n }\n }\n\n // NOTE: We need 'locale' for the memoization in getLocalizedTimeZoneOptions. Don't remove it!\n // eslint-disable-next-line no-unused-vars\n getLocalizedTimeZoneOptions = memoize((timeZoneOptions, countryTimeZoneOptions, locale) => {\n const concatTimeZoneOptions = [{\n label: this.props.intl.formatMessage(messages['account.settings.field.time.zone.default']),\n value: '',\n }];\n if (countryTimeZoneOptions.length) {\n concatTimeZoneOptions.push({\n label: this.props.intl.formatMessage(messages['account.settings.field.time.zone.country']),\n group: countryTimeZoneOptions,\n });\n }\n concatTimeZoneOptions.push({\n label: this.props.intl.formatMessage(messages['account.settings.field.time.zone.all']),\n group: timeZoneOptions,\n });\n return concatTimeZoneOptions;\n });\n\n getLocalizedOptions = memoize((locale, country) => ({\n countryOptions: [{\n value: '',\n label: this.props.intl.formatMessage(messages['account.settings.field.country.options.empty']),\n }].concat(getCountryList(locale).map(({ code, name }) => ({ value: code, label: name }))),\n stateOptions: [{\n value: '',\n label: this.props.intl.formatMessage(messages['account.settings.field.state.options.empty']),\n }].concat(getStatesList(country)),\n languageProficiencyOptions: [{\n value: '',\n label: this.props.intl.formatMessage(messages['account.settings.field.language_proficiencies.options.empty']),\n }].concat(getLanguageList(locale).map(({ code, name }) => ({ value: code, label: name }))),\n yearOfBirthOptions: [{\n value: '',\n label: this.props.intl.formatMessage(messages['account.settings.field.year_of_birth.options.empty']),\n }].concat(YEAR_OF_BIRTH_OPTIONS),\n educationLevelOptions: EDUCATION_LEVELS.map(key => ({\n value: key,\n label: this.props.intl.formatMessage(messages[`account.settings.field.education.levels.${key || 'empty'}`]),\n })),\n genderOptions: GENDER_OPTIONS.map(key => ({\n value: key,\n label: this.props.intl.formatMessage(messages[`account.settings.field.gender.options.${key || 'empty'}`]),\n })),\n }));\n\n handleEditableFieldChange = (name, value) => {\n this.props.updateDraft(name, value);\n };\n\n handleSubmit = (formId, values) => {\n this.props.saveSettings(formId, values);\n };\n\n handleSubmitProfileName = (formId, values) => {\n if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {\n this.props.saveMultipleSettings([\n {\n formId,\n commitValues: values,\n },\n {\n formId: 'useVerifiedNameForCerts',\n commitValues: this.props.formValues.useVerifiedNameForCerts,\n },\n ], formId);\n } else {\n this.props.saveSettings(formId, values);\n }\n };\n\n handleSubmitVerifiedName = (formId, values) => {\n if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {\n this.props.saveSettings('useVerifiedNameForCerts', this.props.formValues.useVerifiedNameForCerts);\n }\n if (values !== this.props.committedValues?.verified_name) {\n this.props.beginNameChange(formId);\n } else {\n this.props.saveSettings(formId, values);\n }\n };\n\n isEditable(fieldName) {\n return !this.props.staticFields.includes(fieldName);\n }\n\n isManagedProfile() {\n // Enterprise customer profiles are managed by their organizations. We determine whether\n // a profile is managed or not by the presence of the profileDataManager prop.\n return Boolean(this.props.profileDataManager);\n }\n\n renderDuplicateTpaProviderMessage() {\n if (!this.state.duplicateTpaProvider) {\n return null;\n }\n\n // If there is a \"duplicate_provider\" query parameter, that's the backend's\n // way of telling us that the provider account the user tried to link is already linked\n // to another user account on the platform. We use this to display a message to that effect,\n // and remove the parameter from the URL.\n this.props.navigate(this.props.location, { replace: true });\n\n return (\n \n {this.props.intl.formatMessage(messages['account.settings.section.demographics.information'])}\n
\n\n
\n \n {showSelfDescribe && (\n this.handleEditableFieldChange('demographics_gender_description', e.target.value)}\n aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description'])}\n className=\"mt-1\"\n />\n )}\n \n \n \n {showWorkStatusDescribe && (\n this.handleEditableFieldChange('demographics_work_status_description', e.target.value)}\n aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description'])}\n className=\"mt-1\"\n />\n )}\n \n
\n )}\n \n \n {this.state.duplicateTpaProvider},\n siteName: getConfig().SITE_NAME,\n }}\n />\n \n
\n );\n }\n\n renderManagedProfileMessage() {\n if (!this.isManagedProfile()) {\n return null;\n }\n\n return (\n \n \n {this.props.profileDataManager},\n support: (\n \n \n ),\n }}\n />\n \n
\n );\n }\n\n renderFullNameHelpText = (status, proctoredExamId) => {\n if (!this.props.verifiedNameHistory) {\n return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']);\n }\n\n let messageString = 'account.settings.field.full.name.help.text';\n\n if (status === 'submitted') {\n messageString += '.submitted';\n if (proctoredExamId) {\n messageString += '.proctored';\n }\n } else {\n messageString += '.default';\n }\n\n if (!this.props.committedValues.useVerifiedNameForCerts) {\n messageString += '.certificate';\n }\n\n return this.props.intl.formatMessage(messages[messageString]);\n };\n\n renderVerifiedNameSuccessMessage = (verifiedName, created) => {\n const dateValue = new Date(created).valueOf();\n const id = `dismissedVerifiedNameSuccessMessage-${verifiedName}-${dateValue}`;\n\n return (\n \n {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'])}\n
\n \n \n {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}\n {' '}\n
\n \n )\n }\n />\n );\n };\n\n renderVerifiedNameSubmittedMessage = (willCertNameChange) => (\n \n {this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message'])}{' '}\n {\n willCertNameChange\n && this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message.certificate'])\n }\n
\n \n );\n\n renderVerifiedNameMessage = verifiedNameRecord => {\n const {\n created,\n status,\n profile_name: profileName,\n verified_name: verifiedName,\n proctored_exam_attempt_id: proctoredExamId,\n } = verifiedNameRecord;\n let willCertNameChange = false;\n\n if (\n (\n // User submitted a profile name change, and uses their profile name on certificates\n this.props.committedValues.name !== profileName\n && !this.props.committedValues.useVerifiedNameForCerts\n )\n || (\n // User submitted a verified name change, and uses their verified name on certificates\n this.props.committedValues.name === profileName\n && this.props.committedValues.useVerifiedNameForCerts\n )\n ) {\n willCertNameChange = true;\n }\n\n if (proctoredExamId) {\n return null;\n }\n\n switch (status) {\n case 'approved':\n return this.renderVerifiedNameSuccessMessage(verifiedName, created);\n case 'denied':\n return this.renderVerifiedNameFailureMessage(verifiedName, created);\n case 'submitted':\n return this.renderVerifiedNameSubmittedMessage(willCertNameChange);\n default:\n return null;\n }\n };\n\n renderVerifiedNameIcon = (status) => {\n switch (status) {\n case 'approved':\n return (\n {\n this.props.mostRecentVerifiedName\n && this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)\n }\n {localStorage.getItem('submittedDOB')\n && (\n \n {this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}\n {\n this.renderVerifiedNameIcon(verifiedName.status)\n }\n
\n )\n }\n helpText={this.renderVerifiedNameHelpText(verifiedName.status, verifiedName.proctored_exam_attempt_id)}\n isEditable={this.isEditable('verifiedName')}\n isGrayedOut={!this.isEditable('verifiedName')}\n onChange={this.handleEditableFieldChange}\n onSubmit={this.handleSubmitVerifiedName}\n />\n )}\n\n \n {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}\n
\n{this.props.intl.formatMessage(messages['account.settings.section.account.information.description'])}
\n {this.renderManagedProfileMessage()}\n\n {this.renderNameChangeModal()}\n\n\n option.value !== 'el')\n : educationLevelOptions}\n label={this.props.intl.formatMessage(messages['account.settings.field.education'])}\n emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.education.empty'])}\n {...editableFieldProps}\n /> */}\n
\n {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && this.renderDemographicsSection()}\n {/* */}\n\n \n {this.props.intl.formatMessage(messages['account.settings.section.profile.information'])}\n
\n\n {/*\n {\n // the endpoint will not accept an empty string. it must be null\n this.handleSubmit(formId, value || null);\n }}\n />\n
\n\n \n {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}\n
\n\n\n
\n\n {getConfig().ENABLE_ACCOUNT_DELETION\n && (\n {this.props.intl.formatMessage(messages['account.settings.section.linked.accounts'])}
\n\n {this.props.intl.formatMessage(\n messages['account.settings.section.linked.accounts.description'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n
\n )}\n\n \n );\n }\n\n renderError() {\n return (\n \n {this.props.intl.formatMessage(messages['account.settings.loading.error'], {\n error: this.props.loadingError,\n })}\n
\n );\n }\n\n renderLoading() {\n return (\n \n {this.renderDuplicateTpaProviderMessage()}\n
\n );\n }\n}\n\nAccountSettingsPage.contextType = AppContext;\n\nAccountSettingsPage.propTypes = {\n intl: intlShape.isRequired,\n loading: PropTypes.bool,\n loaded: PropTypes.bool,\n loadingError: PropTypes.string,\n\n // Form data\n formValues: PropTypes.shape({\n username: PropTypes.string,\n name: PropTypes.string,\n email: PropTypes.string,\n secondary_email: PropTypes.string,\n secondary_email_enabled: PropTypes.bool,\n year_of_birth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n country: PropTypes.string,\n level_of_education: PropTypes.string,\n gender: PropTypes.string,\n language_proficiencies: PropTypes.string,\n pending_name_change: PropTypes.string,\n phone_number: PropTypes.string,\n social_link_linkedin: PropTypes.string,\n social_link_facebook: PropTypes.string,\n social_link_twitter: PropTypes.string,\n time_zone: PropTypes.string,\n state: PropTypes.string,\n shouldDisplayDemographicsSection: PropTypes.bool,\n useVerifiedNameForCerts: PropTypes.bool.isRequired,\n verified_name: PropTypes.string,\n }).isRequired,\n committedValues: PropTypes.shape({\n name: PropTypes.string,\n useVerifiedNameForCerts: PropTypes.bool,\n verified_name: PropTypes.string,\n }),\n drafts: PropTypes.shape({}),\n formErrors: PropTypes.shape({\n name: PropTypes.string,\n }),\n siteLanguage: PropTypes.shape({\n previousValue: PropTypes.string,\n draft: PropTypes.string,\n }),\n siteLanguageOptions: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n })),\n profileDataManager: PropTypes.string,\n staticFields: PropTypes.arrayOf(PropTypes.string),\n isActive: PropTypes.bool,\n secondary_email_enabled: PropTypes.bool,\n\n timeZoneOptions: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n })),\n countryTimeZoneOptions: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n })),\n fetchSiteLanguages: PropTypes.func.isRequired,\n updateDraft: PropTypes.func.isRequired,\n saveMultipleSettings: PropTypes.func.isRequired,\n saveSettings: PropTypes.func.isRequired,\n fetchSettings: PropTypes.func.isRequired,\n beginNameChange: PropTypes.func.isRequired,\n fetchCourseList: PropTypes.func.isRequired,\n tpaProviders: PropTypes.arrayOf(PropTypes.shape({\n connected: PropTypes.bool,\n })),\n nameChangeModal: PropTypes.shape({\n formId: PropTypes.string,\n }),\n verifiedName: PropTypes.shape({\n verified_name: PropTypes.string,\n status: PropTypes.string,\n proctored_exam_attempt_id: PropTypes.number,\n }),\n mostRecentVerifiedName: PropTypes.shape({\n verified_name: PropTypes.string,\n status: PropTypes.string,\n proctored_exam_attempt_id: PropTypes.number,\n }),\n verifiedNameHistory: PropTypes.arrayOf(\n PropTypes.shape({\n verified_name: PropTypes.string,\n status: PropTypes.string,\n proctored_exam_attempt_id: PropTypes.number,\n }),\n ),\n navigate: PropTypes.func.isRequired,\n location: PropTypes.string.isRequired,\n};\n\nAccountSettingsPage.defaultProps = {\n loading: false,\n loaded: false,\n loadingError: null,\n committedValues: {\n useVerifiedNameForCerts: false,\n verified_name: null,\n },\n drafts: {},\n formErrors: {},\n siteLanguage: null,\n siteLanguageOptions: [],\n timeZoneOptions: [],\n countryTimeZoneOptions: [],\n profileDataManager: null,\n staticFields: [],\n tpaProviders: [],\n isActive: true,\n secondary_email_enabled: false,\n nameChangeModal: {},\n verifiedName: null,\n mostRecentVerifiedName: {},\n verifiedNameHistory: [],\n};\n\nexport default withLocation(withNavigate(connect(accountSettingsPageSelector, {\n fetchCourseList,\n fetchSettings,\n saveSettings,\n saveMultipleSettings,\n updateDraft,\n fetchSiteLanguages,\n beginNameChange,\n})(injectIntl(AccountSettingsPage))));\n","import React from 'react';\n\nimport { useLocation, useNavigate } from 'react-router-dom';\n\nexport const withNavigate = Component => {\n const WrappedComponent = props => {\n const navigate = useNavigate();\n return \n {this.props.intl.formatMessage(messages['account.settings.page.heading'])}\n
\n\n
\n \n
\n \n
\n \n {loading ? this.renderLoading() : null}\n {loaded ? this.renderContent() : null}\n {loadingError ? this.renderError() : null}\n
\n \n
{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}
;\n }\n if (error === ERROR_REASONS.EXISTING_REQUEST) {\n return{intl.formatMessage(messages['id.verification.access.blocked.pending'])}
;\n }\n return (\n\n
\n );\n};\n\nAccessBlocked.propTypes = {\n intl: intlShape.isRequired,\n error: PropTypes.string.isRequired,\n};\n\nexport default injectIntl(AccessBlocked);\n","import React, { createContext, useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { getVerifiedNameHistory } from '../account-settings/data/service';\nimport { getMostRecentApprovedOrPendingVerifiedName } from '../utils';\nimport { useAsyncCall } from '../hooks';\nimport { SUCCESS_STATUS } from '../constants';\n\nexport const VerifiedNameContext = createContext();\n\nexport const VerifiedNameContextProvider = ({ children }) => {\n const verifiedNameHistoryData = useAsyncCall(getVerifiedNameHistory);\n\n let verifiedName = '';\n const { status, data } = verifiedNameHistoryData;\n if (status === SUCCESS_STATUS && data) {\n const { results } = data;\n verifiedName = getMostRecentApprovedOrPendingVerifiedName(results);\n }\n\n const value = useMemo(() => ({\n verifiedNameHistoryCallStatus: status,\n verifiedName,\n }), [status, verifiedName]);\n\n return (\n {intl.formatMessage(messages['id.verification.access.blocked.title'])}\n
\n {handleMessage()}\n \n\n
\n );\n};\n\nBasePanel.propTypes = {\n children: PropTypes.node.isRequired,\n focusOnMount: PropTypes.bool,\n name: PropTypes.string.isRequired,\n title: PropTypes.node.isRequired,\n};\n\nBasePanel.defaultProps = {\n focusOnMount: true,\n};\n\nexport default BasePanel;\n","export default __webpack_public_path__ + \"86769bb88078f8daeeb384a2ef24dba7.png\";","import React, { useEffect, useContext } from 'react';\nimport { Link } from 'react-router-dom';\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\nimport { Alert, Hyperlink } from '@edx/paragon';\n\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\n\nimport IdVerificationContext from '../IdVerificationContext';\nimport messages from '../IdVerification.messages';\nimport exampleCard from '../assets/example-card.png';\n\nconst ReviewRequirementsPanel = (props) => {\n const { userId, profileDataManager } = useContext(IdVerificationContext);\n const panelSlug = 'review-requirements';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n\n useEffect(() => {\n sendTrackEvent('edx.id_verification.started', {\n category: 'id_verification',\n user_id: userId,\n });\n }, [userId]);\n\n function renderManagedProfileMessage() {\n if (!profileDataManager) {\n return null;\n }\n\n return (\n {title}
\n {children}\n\n \n {profileDataManager},\n profileDataManager,\n support: (\n \n {props.intl.formatMessage(messages['id.verification.support'])}\n \n ),\n }}\n />\n \n
\n );\n }\n\n return (\n \n {props.intl.formatMessage(messages['id.verification.requirements.description'])}\n
\n\n
\n \n
\n \n {props.intl.formatMessage(messages['id.verification.requirements.card.device.title'])}\n
\n\n
\n
\n \n
\n \n {props.intl.formatMessage(messages['id.verification.requirements.card.id.title'])}\n
\n\n {props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}\n
\n {props.intl.formatMessage(messages['id.verification.privacy.title'])}\n
\n\n {props.intl.formatMessage(\n messages['id.verification.privacy.need.photo.question'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}\n
\n\n {props.intl.formatMessage(\n messages['id.verification.privacy.do.with.photo.question'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {props.intl.formatMessage(\n messages['id.verification.privacy.do.with.photo.answer'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nReviewRequirementsPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(ReviewRequirementsPanel);\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport messages from '../IdVerification.messages';\n\nexport const EnableCameraDirectionsPanel = (props) => {\n if (props.browserName === 'Internet Explorer') {\n return (\n <>\n {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}
\n- \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])} \n
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}
\n- \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])} \n
- \n
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}
\n- \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])} \n
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}
\n- \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])} \n
- {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])} \n
\n
\n )}\n\n {mediaAccess === MEDIA_ACCESS.GRANTED && (\n \n
\n \n
\n \n
\n )}\n\n {mediaAccess === MEDIA_ACCESS.DENIED && (\n \n {props.intl.formatMessage(messages['id.verification.camera.access.success'])}\n
\n\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n
\n )}\n\n {mediaAccess === MEDIA_ACCESS.UNSUPPORTED && (\n \n {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}\n
\n\n {returnLink}\n
\n \n
\n )}\n\n \n );\n};\n\nRequestCameraAccessPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(RequestCameraAccessPanel);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapsible } from '@edx/paragon';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport messages from './IdVerification.messages';\n\nconst CameraHelp = (props) => (\n \n {props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}\n
\n\n {returnLink}\n
\n \n \n \n
\n);\n\nCameraHelp.propTypes = {\n intl: intlShape.isRequired,\n isOpen: PropTypes.bool,\n isPortrait: PropTypes.bool,\n};\n\nCameraHelp.defaultProps = {\n isOpen: false,\n isPortrait: false,\n};\n\nexport default injectIntl(CameraHelp);\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\nimport CameraHelp from '../CameraHelp';\nimport messages from '../IdVerification.messages';\n\nconst PortraitPhotoContextPanel = (props) => {\n const panelSlug = 'portrait-photo-context';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n return (\n \n {props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}\n
\n \n\n {props.intl.formatMessage(\n messages['id.verification.camera.help.difficulty.answer'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n \n\n {props.intl.formatMessage(messages['id.verification.photo.tips.description'])}\n
\n\n
\n \n
\n \n {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}\n
\n\n {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}\n
\n- \n
- \n {props.intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}\n \n
- \n {props.intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}\n \n
\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nPortraitPhotoContextPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(PortraitPhotoContextPanel);\n","/* eslint-disable jsx-a11y/media-has-caption */\n/* eslint-disable jsx-a11y/no-access-key */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n// eslint-disable-next-line import/no-unresolved\nimport * as blazeface from '@tensorflow-models/blazeface';\nimport CameraPhoto, { FACING_MODES } from 'jslib-html5-camera-photo';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Form, Spinner } from '@edx/paragon';\n\nimport shutter from './data/camera-shutter.base64.json';\nimport messages from './IdVerification.messages';\n\nclass Camera extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.cameraPhoto = null;\n this.videoRef = React.createRef();\n this.canvasRef = React.createRef();\n this.setDetection = this.setDetection.bind(this);\n this.state = {\n dataUri: '',\n videoHasLoaded: false,\n shouldDetect: false,\n isFinishedLoadingDetection: true,\n shouldGiveFeedback: true,\n feedback: '',\n };\n }\n\n componentDidMount() {\n this.cameraPhoto = new CameraPhoto(this.videoRef.current);\n this.cameraPhoto.startCamera(\n this.props.isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,\n { width: 640, height: 480 },\n );\n }\n\n async componentWillUnmount() {\n this.cameraPhoto.stopCamera();\n }\n\n setDetection() {\n this.setState(\n (state) => ({ shouldDetect: !state.shouldDetect }),\n () => {\n if (this.state.shouldDetect) {\n this.setState({ isFinishedLoadingDetection: false });\n this.startDetection();\n }\n this.sendEvent();\n },\n );\n }\n\n setVideoHasLoaded() {\n this.setState({ videoHasLoaded: 'true' });\n }\n\n getGridPosition(coordinates) {\n // Used to determine where a face is (i.e. top-left, center-right, bottom-center, etc.)\n\n const x = coordinates[0];\n const y = coordinates[1];\n\n let messageBase = 'id.verification.photo.feedback';\n\n const heightUpperLimit = 320;\n const heightMiddleLimit = 160;\n\n if (y < heightMiddleLimit) {\n messageBase += '.top';\n } else if (y < heightUpperLimit && y >= heightMiddleLimit) {\n messageBase += '.center';\n } else {\n messageBase += '.bottom';\n }\n\n const widthRightLimit = 213;\n const widthMiddleLimit = 427;\n\n if (x < widthRightLimit) {\n messageBase += '.right';\n } else if (x >= widthRightLimit && x < widthMiddleLimit) {\n messageBase += '.center';\n } else {\n messageBase += '.left';\n }\n\n return messageBase;\n }\n\n getSizeFactor() {\n let sizeFactor = 1;\n const settings = this.cameraPhoto.getCameraSettings();\n if (settings) {\n const videoWidth = settings.width;\n const videoHeight = settings.height;\n // need to multiply by 3 because each pixel contains 3 bytes\n const currentSize = videoWidth * videoHeight * 3;\n // chose a limit of 9,999,999 (bytes) so that result will\n // always be less than 10MB\n const ratio = 9999999 / currentSize;\n\n if (ratio < 1) {\n // if the current resolution creates an image larger than 10 MB, adjust sizeFactor (resolution)\n // to ensure that image will have a file size of less than 10 MB.\n sizeFactor = ratio;\n } else if (videoWidth === 640 && videoHeight === 480) {\n // otherwise increase the resolution to try and prevent blurry images.\n sizeFactor = 2;\n }\n }\n return sizeFactor;\n }\n\n detectFromVideoFrame = (model, video) => {\n model.estimateFaces(video).then((predictions) => {\n if (this.state.shouldDetect && !this.state.dataUri) {\n this.showDetections(predictions);\n\n requestAnimationFrame(() => {\n this.detectFromVideoFrame(model, video);\n });\n }\n });\n };\n\n showDetections = (predictions) => {\n let canvasContext;\n if (predictions.length > 0) {\n canvasContext = this.canvasRef.current.getContext('2d');\n canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);\n }\n // predictions is an array of objects describing each detected face\n predictions.forEach((prediction) => {\n const start = [prediction.topLeft[0], prediction.topLeft[1]];\n const end = [prediction.bottomRight[0], prediction.bottomRight[1]];\n const size = [end[0] - start[0], end[1] - start[1]];\n\n // landmarks is an array of points representing each facial landmark (i.e. right eye, left eye, nose, etc.)\n const features = prediction.landmarks;\n let isInPosition = true;\n\n // for each of the landmarks, determine if it is in position\n for (let j = 0; j < features.length; j++) {\n const x = features[j][0];\n const y = features[j][1];\n\n let isInRange;\n if (this.props.isPortrait) {\n isInRange = this.isInRangeForPortrait(x, y);\n } else {\n isInRange = this.isInRangeForID(x, y);\n }\n // if it is not in range, give feedback depending on which feature is out of range\n isInPosition = isInPosition && isInRange;\n }\n\n // draw a box depending on if all landmarks are in position\n if (isInPosition) {\n canvasContext.strokeStyle = '#00ffff';\n canvasContext.lineWidth = 6;\n canvasContext.strokeRect(start[0], start[1], size[0], size[1]);\n // give positive feedback here if user is in correct position\n this.giveFeedback(predictions.length, [], true);\n } else {\n canvasContext.fillStyle = 'rgba(255, 51, 0, 0.75)';\n canvasContext.fillRect(start[0], start[1], size[0], size[1]);\n this.giveFeedback(predictions.length, features[0], false);\n }\n });\n\n if (predictions.length === 0) {\n this.giveFeedback(predictions.length, [], false);\n }\n };\n\n startDetection() {\n setTimeout(() => {\n if (this.state.videoHasLoaded) {\n const loadModelPromise = blazeface.load();\n Promise.all([loadModelPromise])\n .then((values) => {\n this.setState({ isFinishedLoadingDetection: true });\n this.detectFromVideoFrame(values[0], this.videoRef.current);\n });\n } else {\n this.setState({ isFinishedLoadingDetection: true });\n this.setState({ shouldDetect: false });\n // TODO: add error message\n }\n }, 1000);\n }\n\n sendEvent() {\n let eventName = 'edx.id_verification';\n if (this.props.isPortrait) {\n eventName += '.user_photo';\n } else {\n eventName += '.id_photo';\n }\n\n if (this.state.shouldDetect) {\n eventName += '.face_detection_enabled';\n } else {\n eventName += '.face_detection_disabled';\n }\n sendTrackEvent(eventName);\n }\n\n giveFeedback(numFaces, rightEye, isCorrect) {\n if (this.state.shouldGiveFeedback) {\n const currentFeedback = this.state.feedback;\n let newFeedback = '';\n if (numFaces === 1) {\n // only give feedback if one face is detected otherwise\n // it would be difficult to tell a user which face to move\n if (isCorrect) {\n newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.correct']);\n } else {\n // give feedback based on where user is\n newFeedback = this.props.intl.formatMessage(messages[this.getGridPosition(rightEye)]);\n }\n } else if (numFaces > 1) {\n newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.two.faces']);\n } else {\n newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.no.faces']);\n }\n if (currentFeedback !== newFeedback) {\n // only update status if it is different, so we don't overload the user with status updates\n this.setState({ feedback: newFeedback });\n }\n // turn off feedback for one to ensure that instructions aren't disruptive/interrupting\n this.setState({ shouldGiveFeedback: false });\n setTimeout(() => {\n this.setState({ shouldGiveFeedback: true });\n }, 1000);\n }\n }\n\n isInRangeForPortrait(x, y) {\n return x > 47 && x < 570 && y > 100 && y < 410;\n }\n\n isInRangeForID(x, y) {\n return x > 120 && x < 470 && y > 120 && y < 350;\n }\n\n takePhoto() {\n if (this.state.dataUri) {\n this.reset();\n return;\n }\n\n const config = {\n sizeFactor: this.getSizeFactor(),\n };\n\n this.playShutterClick();\n const dataUri = this.cameraPhoto.getDataUri(config);\n this.setState({ dataUri });\n this.props.onImageCapture(dataUri);\n }\n\n playShutterClick() {\n const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);\n audio.play();\n }\n\n reset() {\n this.setState({ dataUri: '' });\n if (this.state.shouldDetect) {\n this.startDetection();\n }\n }\n\n render() {\n const cameraFlashClass = this.state.dataUri\n ? 'do-transition camera-flash'\n : 'camera-flash';\n return (\n \n \n \n {this.props.isPortrait\n ? this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.portrait.help.text'])\n : this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.id.help.text'])}\n \n \n {\n this.takePhoto();\n }}\n >\n {this.state.dataUri\n ? this.props.intl.formatMessage(messages['id.verification.photo.retake'])\n : this.props.intl.formatMessage(messages['id.verification.photo.take'])}\n \n
\n );\n }\n}\n\nCamera.propTypes = {\n intl: intlShape.isRequired,\n onImageCapture: PropTypes.func.isRequired,\n isPortrait: PropTypes.bool.isRequired,\n};\n\nexport default injectIntl(Camera);\n","import React, { useContext, useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\nimport Camera from '../Camera';\nimport CameraHelp from '../CameraHelp';\nimport IdVerificationContext from '../IdVerificationContext';\n\nimport messages from '../IdVerification.messages';\n\nconst TakePortraitPhotoPanel = (props) => {\n const panelSlug = 'take-portrait-photo';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n // This prevents focus switching to the heading when taking a photo\n setMounted(true);\n }, []);\n\n return (\n \n \n { this.setVideoHasLoaded(); }}\n style={{\n display: this.state.dataUri ? 'none' : 'block',\n WebkitTransform: 'scaleX(-1)',\n transform: 'scaleX(-1)',\n }}\n playsInline\n />\n
\n {this.state.feedback}
\n \n
\n \n {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}\n
\n\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nTakePortraitPhotoPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(TakePortraitPhotoPanel);\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\nimport CameraHelp from '../CameraHelp';\nimport messages from '../IdVerification.messages';\nimport exampleCard from '../assets/example-card.png';\n\nconst IdContextPanel = (props) => {\n const panelSlug = 'id-context';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n return (\n {props.intl.formatMessage(messages['id.verification.id.tips.description'])}
\n\n
\n \n
\n \n {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}\n
\n\n {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}\n
\n- \n
- \n {props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}\n \n
- \n {props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}\n \n
\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nIdContextPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(IdContextPanel);\n","import React, {\n useContext, useEffect, useRef,\n} from 'react';\nimport { Form } from '@edx/paragon';\nimport { Link, useNavigate, useLocation } from 'react-router-dom';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\nimport IdVerificationContext from '../IdVerificationContext';\n\nimport messages from '../IdVerification.messages';\n\nconst GetNameIdPanel = (props) => {\n const location = useLocation();\n const navigate = useNavigate();\n const nameInputRef = useRef();\n const panelSlug = 'get-name-id';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n\n const { nameOnAccount, idPhotoName, setIdPhotoName } = useContext(IdVerificationContext);\n const nameOnAccountValue = nameOnAccount || '';\n\n useEffect(() => {\n if (idPhotoName === null) {\n setIdPhotoName(nameOnAccountValue);\n }\n\n if (location.state?.fromSummary && nameInputRef.current) {\n nameInputRef.current.focus();\n }\n }, [idPhotoName, location.state, nameOnAccountValue, setIdPhotoName]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (idPhotoName) {\n navigate(`/id-verification/${nextPanelSlug}`);\n }\n };\n\n return (\n \n {props.intl.formatMessage(messages['id.verification.name.check.instructions'])}\n
\n\n {props.intl.formatMessage(messages['id.verification.name.check.mismatch.information'])}\n
\n\n \n\n\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nGetNameIdPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(GetNameIdPanel);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ImagePreview = ({ src, alt, id }) => (\n \n\n 
\n\n
\n);\n\nImagePreview.propTypes = {\n src: PropTypes.string.isRequired,\n alt: PropTypes.string.isRequired,\n id: PropTypes.string,\n};\n\nImagePreview.defaultProps = {\n id: undefined,\n};\n\nexport default ImagePreview;\n","import React from 'react';\n\nconst SupportedMediaTypes = () => {\n const SUPPORTED_TYPES = ['.png', '.jpeg', '.jpg', '.bmp', '.webp', '.tiff'];\n\n const getSupportedTypes = () => SUPPORTED_TYPES.map((type, index) => {\n if (index === SUPPORTED_TYPES.length - 1) {\n return type;\n }\n return `${type}, `;\n });\n\n return {getSupportedTypes()};\n};\n\nexport default SupportedMediaTypes;\n","import React, { useCallback, useState } from 'react';\nimport { intlShape } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\nimport { Alert } from '@edx/paragon';\nimport messages from './IdVerification.messages';\nimport SupportedMediaTypes from './SupportedMediaTypes';\n\nconst ImageFileUpload = ({ onFileChange, intl }) => {\n const [error, setError] = useState(null);\n const errorTypes = {\n invalidFileType: 'invalidFileType',\n fileTooLarge: 'fileTooLarge',\n };\n const maxFileSize = 10000000;\n\n const handleChange = useCallback((e) => {\n if (e.target.files.length === 0) {\n return;\n }\n\n const fileObject = e.target.files[0];\n if (!fileObject.type.startsWith('image')) {\n setError(errorTypes.invalidFileType);\n } else if (fileObject.size >= maxFileSize) {\n setError(errorTypes.fileTooLarge);\n } else {\n setError(null);\n const fileReader = new FileReader();\n fileReader.addEventListener('load', () => {\n onFileChange(fileReader.result);\n });\n fileReader.readAsDataURL(fileObject);\n }\n }, [errorTypes.fileTooLarge, errorTypes.invalidFileType, onFileChange]);\n\n return (\n <>\n \n {useCameraForId\n ? props.intl.formatMessage(messages['id.verification.photo.upload.help.text'])\n : props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])}\n
\n\n {idPhotoFile && !useCameraForId && (\n
\n {useCameraForId && \n
\n ) : (\n \n {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}\n
\n\n
\n )}\n \n {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}\n
\n \n {props.intl.formatMessage(messages['id.verification.next'])}\n \n
\n \n );\n};\n\nTakeIdPhotoPanel.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(TakeIdPhotoPanel);\n","import React, { useState, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapsible } from '@edx/paragon';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\nimport messages from './IdVerification.messages';\nimport ImageFileUpload from './ImageFileUpload';\nimport IdVerificationContext from './IdVerificationContext';\nimport ImagePreview from './ImagePreview';\nimport SupportedMediaTypes from './SupportedMediaTypes';\n\nconst CameraHelpWithUpload = (props) => {\n const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);\n const [hasUploadedImage, setHasUploadedImage] = useState(false);\n\n const setAndTrackIdPhotoFile = (image) => {\n sendTrackEvent('edx.id_verification.upload_id', {\n category: 'id_verification',\n user_id: userId,\n });\n setHasUploadedImage(true);\n setIdPhotoFile(image);\n };\n\n return (\n \n \n {idPhotoFile && hasUploadedImage &&
\n );\n};\n\nCameraHelpWithUpload.propTypes = {\n intl: intlShape.isRequired,\n isOpen: PropTypes.bool,\n};\n\nCameraHelpWithUpload.defaultProps = {\n isOpen: false,\n};\n\nexport default injectIntl(CameraHelpWithUpload);\n","import React, { useState, useContext, useEffect } from 'react';\nimport { getConfig } from '@edx/frontend-platform';\nimport {\n Alert, Hyperlink, Form, Button, Spinner,\n} from '@edx/paragon';\nimport { Link, useNavigate } from 'react-router-dom';\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\n\nimport { submitIdVerification } from '../data/service';\nimport { useNextPanelSlug } from '../routing-utilities';\nimport BasePanel from './BasePanel';\nimport IdVerificationContext from '../IdVerificationContext';\nimport ImagePreview from '../ImagePreview';\n\nimport messages from '../IdVerification.messages';\nimport CameraHelpWithUpload from '../CameraHelpWithUpload';\nimport SupportedMediaTypes from '../SupportedMediaTypes';\n\nconst SummaryPanel = (props) => {\n const panelSlug = 'summary';\n const nextPanelSlug = useNextPanelSlug(panelSlug);\n const {\n facePhotoFile,\n idPhotoFile,\n profileDataManager,\n nameOnAccount,\n idPhotoName,\n stopUserMedia,\n setReachedSummary,\n } = useContext(IdVerificationContext);\n const nameToBeUsed = idPhotoName || nameOnAccount || '';\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [submissionError, setSubmissionError] = useState(null);\n const navigate = useNavigate();\n\n useEffect(() => setReachedSummary(true), [setReachedSummary]);\n\n function renderManagedProfileMessage() {\n if (!profileDataManager) {\n return null;\n }\n\n return (\n \n {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}\n
\n
\n {props.intl.formatMessage(messages['id.verification.review.description'])}\n
\n\n
\n \n \n \n {props.intl.formatMessage(messages['id.verification.review.portrait.retake'])}\n \n
\n \n \n \n {props.intl.formatMessage(messages['id.verification.review.id.retake'])}\n \n
\n \n \n {renderManagedProfileMessage()}\n
\n \n {}}\n aria-describedby={profileDataManager ? 'profile-manager-warning' : null}\n />\n {!profileDataManager && (\n \n Name,\n }}\n />\n \n )}\n
\n \n {props.intl.formatMessage(messages['id.verification.submitted.text'])}\n
\n\n setIsModalOpen(false)}\n size=\"lg\"\n hasCloseButton={false}\n >\n \n \n {props.intl.formatMessage(messages['id.verification.privacy.title'])}\n \n \n \n \n \n \n \n Close\n \n \n \n \n\n
\n );\n};\n\nIdVerificationPage.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default connect(idVerificationSelector, {})(injectIntl(IdVerificationPage));\n","import { messages as headerMessages } from '@edx/frontend-component-header';\nimport { messages as footerMessages } from '@edx/frontend-component-footer';\nimport { messages as paragonMessages } from '@edx/paragon';\nimport arMessages from './messages/ar.json';\nimport deMessages from './messages/de.json';\nimport es419Messages from './messages/es_419.json';\nimport faIRMessages from './messages/fa_IR.json';\nimport frMessages from './messages/fr.json';\nimport frCAMessages from './messages/fr_CA.json';\nimport hiMessages from './messages/hi.json';\nimport itMessages from './messages/it.json';\nimport ptMessages from './messages/pt.json';\nimport ruMessages from './messages/ru.json';\nimport ukMessages from './messages/uk.json';\nimport zhcnMessages from './messages/zh_CN.json';\nimport dedeCAMessages from './messages/de_DE.json';\nimport ititCAMessages from './messages/it_IT.json';\nimport ptptCAMessages from './messages/pt_PT.json';\n// no need to import en messages-- they are in the defaultMessage field\n\nconst appMessages = {\n ar: arMessages,\n 'es-419': es419Messages,\n 'fa-ir': faIRMessages,\n fr: frMessages,\n 'zh-cn': zhcnMessages,\n pt: ptMessages,\n it: itMessages,\n de: deMessages,\n hi: hiMessages,\n 'fr-ca': frCAMessages,\n ru: ruMessages,\n uk: ukMessages,\n 'de-de': dedeCAMessages,\n 'it-it': ititCAMessages,\n 'pt-pt': ptptCAMessages,\n};\n\nexport default [\n headerMessages,\n paragonMessages,\n footerMessages,\n appMessages,\n];\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.page.title': {\n id: 'account.page.title',\n defaultMessage: 'Account | {siteName}',\n description: 'Title tag',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { Helmet } from 'react-helmet';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport messages from './messages';\n\nconst Head = ({ intl }) => (\n \n
\n \n \n \n \n \n \n \n
\n \n \n
\n \n
\n \n {props.intl.formatMessage(\n messages['id.verification.privacy.need.photo.question'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
\n\n {props.intl.formatMessage(\n messages['id.verification.privacy.do.with.photo.question'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {props.intl.formatMessage(\n messages['id.verification.privacy.do.with.photo.answer'],\n { siteName: getConfig().SITE_NAME },\n )}\n
\n\n {intl.formatMessage(messages.notificationHeading)}\n
\n\n {coursesList.map(course => (\n \n
\n {courseListStatus === LOADING_STATUS ? (\n \n \n {course.name}\n \n \n
\n \n ))}\n \n
\n ) : hasMore && (\n \n )}\n \n
\n \n );\n};\n\nNotificationPreferenceRow.propTypes = {\n appId: PropTypes.string.isRequired,\n preferenceName: PropTypes.string.isRequired,\n};\n\nexport default React.memo(NotificationPreferenceRow);\n","import React, { useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Collapsible } from '@edx/paragon';\nimport { messages } from './messages';\nimport ToggleSwitch from './ToggleSwitch';\nimport {\n selectPreferenceAppToggleValue,\n selectPreferencesOfApp,\n selectSelectedCourseId,\n} from './data/selectors';\nimport NotificationPreferenceRow from './NotificationPreferenceRow';\nimport { updateAppPreferenceToggle } from './data/thunks';\n\nconst NotificationPreferenceApp = ({ appId }) => {\n const dispatch = useDispatch();\n const intl = useIntl();\n const courseId = useSelector(selectSelectedCourseId());\n const appPreferences = useSelector(selectPreferencesOfApp(appId));\n const appToggle = useSelector(selectPreferenceAppToggleValue(appId));\n\n const preferences = useMemo(() => (\n appPreferences.map(preference => (\n \n {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}\n {preference.info !== '' && (\n \n {preference.info}\n \n )}\n >\n \n
\n \n {['web'].map((channel) => (\n \n
\n ))}\n \n \n {intl.formatMessage(messages.notificationAppTitle, { key: appId })}\n \n \n
\n \n
\n {intl.formatMessage(messages.typeLabel)}\n \n {intl.formatMessage(messages.webLabel)}\n \n
\n \n { preferences }\n
\n \n {intl.formatMessage(messages.notificationHeading)}\n
\n\n {intl.formatMessage(messages.notificationPreferenceGuideBody)}\n \n {intl.formatMessage(messages.notificationPreferenceGuideLink)}\n \n
\n \n
\n \n \n
\n {preferencesList}\n {isLoading && (\n \n
\n )}\n