\n
\n {this.renderView(currentView)}\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 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\nEditableField.defaultProps = {\n value: undefined,\n options: 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 { 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 classNames from 'classnames';\n\nfunction Alert(props) {\n return (\n \n
\n {label}
\n {isEditable ? (\n \n ) : null}\n{renderValue(value)}
\n{renderConfirmationMessage() || helpText}
\n\n
\n );\n}\n\nAlert.propTypes = {\n className: PropTypes.string,\n icon: PropTypes.node,\n children: PropTypes.node,\n};\n\nAlert.defaultProps = {\n className: undefined,\n icon: undefined,\n children: undefined,\n};\n\nexport default Alert;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\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 {props.icon}\n
\n \n {props.children}\n
\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, { useEffect, useState } from 'react';\nimport { connect, useDispatch } from 'react-redux';\nimport { useHistory } 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\nfunction NameChangeModal({\n targetFormId,\n errors,\n formValues,\n intl,\n saveState,\n}) {\n const dispatch = useDispatch();\n const { push } = useHistory();\n const { username } = getAuthenticatedUser();\n const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');\n const [confirmedWarning, setConfirmedWarning] = useState(false);\n\n function resetLocalState() {\n setConfirmedWarning(false);\n dispatch(requestNameChangeReset());\n }\n\n function handleChange(e) {\n setVerifiedNameInput(e.target.value);\n }\n\n function handleClose() {\n resetLocalState();\n dispatch(closeForm(targetFormId));\n dispatch(saveSettingsReset());\n }\n\n function 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 push(`/id-verification?next=${encodeURIComponent('account/settings')}`);\n }\n }, [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, Input, ValidationFormGroup,\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\nfunction 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\nexport default function 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","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.settings.field.phone_number': {\n id: 'account.settings.field.phone_number',\n defaultMessage: 'Phone Number',\n description: 'The label for a phone numbers setting in the user profile',\n },\n 'account.settings.field.phone_number.empty': {\n id: 'account.settings.field.phone_number.empty',\n defaultMessage: 'Add a phone number',\n description: 'placeholder for a profiles empty phone number field',\n },\n 'account.settings.field.coaching_consent': {\n id: 'account.settings.field.coaching_consent',\n defaultMessage: 'Coaching consent',\n description: 'The label for the coaching consent setting in the user profile',\n },\n 'account.settings.field.coaching_consent.tooltip': {\n id: 'account.settings.field.coaching_consent.tooltip',\n defaultMessage: 'MicroBachelors programs include text message based coaching that helps you pair educational experiences with your career goals through one-on-one advice. Coaching services are included at no additional cost, and are available to learners with U.S. mobile phone numbers. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.',\n description: 'A tooltip explaining what coaching is and who it is for',\n },\n 'account.settings.field.coaching_consent.error': {\n id: 'account.settings.field.coaching_consent.error',\n defaultMessage: 'A valid US phone number is required to opt into coaching',\n description: 'An error message that displays when a user attempts to consent to coaching without first providing a phone number in their profile',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { ValidationFormGroup, Input } from '@edx/paragon';\nimport messages from './CoachingToggle.messages';\nimport { editableFieldSelector } from '../data/selectors';\nimport { saveSettings, updateDraft, saveMultipleSettings } from '../data/actions';\nimport EditableField from '../EditableField';\n\nconst CoachingToggle = props => (\n <>\n\n handleToggle(value, option.value)}\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, Input } 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 EditableField from '../EditableField';\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.array,\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.object,\n }).isRequired,\n drafts: PropTypes.shape({\n demographics_gender: PropTypes.string,\n demographics_user_ethnicity: PropTypes.array,\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.object,\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","import { AppContext } from '@edx/frontend-platform/react';\nimport { getConfig, history, 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';\n// import DeleteAccount from './delete-account';\nimport EditableField from './EditableField';\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 {\n YEAR_OF_BIRTH_OPTIONS,\n EDUCATION_LEVELS,\n GENDER_OPTIONS,\n COUNTRY_WITH_STATES,\n getStatesList,\n} from './data/constants';\nimport { fetchSiteLanguages } from './site-language';\nimport CoachingToggle from './coaching/CoachingToggle';\nimport DemographicsSection from './demographics/DemographicsSection';\n\nclass AccountSettingsPage extends React.Component {\n constructor(props, context) {\n super(props, context);\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 const duplicateTpaProvider = getQueryParameters().duplicate_provider;\n if (duplicateTpaProvider !== undefined) {\n history.replace(history.location.pathname);\n }\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.fetchSettings();\n this.props.fetchSiteLanguages();\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 sortDates = (a, b) => {\n const aTimeSinceEpoch = new Date(a).getTime();\n const bTimeSinceEpoch = new Date(b).getTime();\n\n return bTimeSinceEpoch - aTimeSinceEpoch;\n }\n\n sortVerifiedNameRecords = verifiedNameHistory => {\n if (Array.isArray(verifiedNameHistory)) {\n return [...verifiedNameHistory].sort(this.sortDates);\n }\n\n return [];\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 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\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
\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 {/* {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 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 coaching: PropTypes.shape({\n coaching_consent: PropTypes.bool.isRequired,\n user: PropTypes.number.isRequired,\n eligible_for_coaching: PropTypes.bool.isRequired,\n }),\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 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};\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 connect(accountSettingsPageSelector, {\n fetchSettings,\n saveSettings,\n saveMultipleSettings,\n updateDraft,\n fetchSiteLanguages,\n beginNameChange,\n})(injectIntl(AccountSettingsPage));\n","import { AsyncActionType } from '../../data/utils';\n\nexport const DELETE_ACCOUNT = new AsyncActionType('ACCOUNT_SETTINGS', 'DELETE_ACCOUNT');\nDELETE_ACCOUNT.CONFIRMATION = 'ACCOUNT_SETTINGS__DELETE_ACCOUNT__CONFIRMATION';\nDELETE_ACCOUNT.CANCEL = 'ACCOUNT_SETTINGS__DELETE_ACCOUNT__CANCEL';\n\nexport const deleteAccount = password => ({\n type: DELETE_ACCOUNT.BASE,\n payload: { password },\n});\n\nexport const deleteAccountConfirmation = () => ({\n type: DELETE_ACCOUNT.CONFIRMATION,\n});\n\nexport const deleteAccountBegin = () => ({\n type: DELETE_ACCOUNT.BEGIN,\n});\n\nexport const deleteAccountSuccess = () => ({\n type: DELETE_ACCOUNT.SUCCESS,\n});\n\nexport const deleteAccountFailure = reason => ({\n type: DELETE_ACCOUNT.FAILURE,\n payload: { reason },\n});\n\n// to clear errors from the confirmation modal\nexport const deleteAccountReset = () => ({\n type: DELETE_ACCOUNT.RESET,\n});\n\n// to close the modal\nexport const deleteAccountCancel = () => ({\n type: DELETE_ACCOUNT.CANCEL,\n});\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.settings.delete.account.header': {\n id: 'account.settings.delete.account.header',\n defaultMessage: 'Delete My Account',\n description: 'Header for the user account deletion area',\n },\n 'account.settings.delete.account.subheader': {\n id: 'account.settings.delete.account.subheader',\n defaultMessage: 'We\\'re sorry to see you go!',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.text.1': {\n id: 'account.settings.delete.account.text.1',\n defaultMessage: 'Please note: Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.text.2': {\n id: 'account.settings.delete.account.text.2',\n defaultMessage: 'Once your account is deleted, you cannot use it to take courses on {siteName}.',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.text.2.edX': {\n id: 'account.settings.delete.account.text.2.edX',\n defaultMessage: 'Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.text.3.link': {\n id: 'account.settings.delete.account.text.3.link',\n defaultMessage: 'Follow these instructions for printing or downloading a certificate',\n description: 'This text is a link to a technical support page where users can learn how to print or download their certificates.',\n },\n 'account.settings.delete.account.text.warning': {\n id: 'account.settings.delete.account.text.warning',\n defaultMessage: 'Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on {siteName}.',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.text.change.instead': {\n id: 'account.settings.delete.account.text.change.instead',\n defaultMessage: 'Want to change your email, name, or password instead?',\n description: 'A message in the user account deletion area',\n },\n 'account.settings.delete.account.button': {\n id: 'account.settings.delete.account.button',\n defaultMessage: 'Delete My Account',\n description: 'Button label to permanently delete your platform account',\n },\n 'account.settings.delete.account.please.activate': {\n id: 'account.settings.delete.account.please.activate',\n defaultMessage: 'activate your account',\n description: 'This is the text on a link that goes to the support page. It is part of this sentence: Before proceeding, please activate your account.',\n },\n 'account.settings.delete.account.please.confirm': {\n id: 'account.settings.delete.account.please.confirm',\n defaultMessage: 'confirm your account',\n description: 'This is the text on a link that goes to the support page. It is part of this sentence: Before proceeding, please confirm your account.',\n },\n 'account.settings.delete.account.please.unlink': {\n id: 'account.settings.delete.account.please.unlink',\n defaultMessage: 'unlink all social media accounts',\n description: 'This is the text on a link that goes to the support page. It is part of this sentence: Before proceeding, please unlink all social media accounts.',\n },\n 'account.settings.delete.account.modal.header': {\n id: 'account.settings.delete.account.modal.header',\n defaultMessage: 'Are you sure?',\n description: 'Title of the dialog asking user to confirm that they want to delete their entire account',\n },\n 'account.settings.delete.account.modal.text.1': {\n id: 'account.settings.delete.account.modal.text.1',\n defaultMessage: 'You have selected \"Delete My Account\". Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.',\n description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',\n },\n 'account.settings.delete.account.modal.text.2': {\n id: 'account.settings.delete.account.modal.text.2',\n defaultMessage: 'If you proceed, you will be unable to use this account to take courses on {siteName}.',\n description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',\n },\n 'account.settings.delete.account.modal.text.2.edX': {\n id: 'account.settings.delete.account.modal.text.2.edX',\n defaultMessage: 'If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer\\'s or university\\'s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',\n description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',\n },\n 'account.settings.delete.account.modal.enter.password': {\n id: 'account.settings.delete.account.modal.enter.password',\n defaultMessage: 'If you still wish to continue and delete your account, please enter your account password:',\n description: 'Asking for the user\\'s account password',\n },\n 'account.settings.delete.account.modal.confirm.delete': {\n id: 'account.settings.delete.account.modal.confirm.delete',\n defaultMessage: 'Yes, Delete',\n description: 'Button label for user to confirm it is okay to delete their account',\n },\n 'account.settings.delete.account.modal.confirm.cancel': {\n id: 'account.settings.delete.account.modal.confirm.cancel',\n defaultMessage: 'Cancel',\n description: 'The cancel button on the delete my account modal confirmation',\n },\n 'account.settings.delete.account.error.unable.to.delete': {\n id: 'account.settings.delete.account.error.unable.to.delete',\n defaultMessage: 'Unable to delete account',\n description: 'Error message when account deletion failed',\n },\n 'account.settings.delete.account.error.no.password': {\n id: 'account.settings.delete.account.error.no.password',\n defaultMessage: 'A password is required',\n description: 'Error message when user has not entered their password',\n },\n 'account.settings.delete.account.error.invalid.password': {\n id: 'account.settings.delete.account.error.invalid.password',\n defaultMessage: 'Password is incorrect',\n description: 'Error message when user has entered incorrect password',\n },\n 'account.settings.delete.account.error.unable.to.delete.details': {\n id: 'account.settings.delete.account.error.unable.to.delete.details',\n defaultMessage: 'Sorry, there was an error trying to process your request. Please try again later.',\n description: 'Error message when account deletion failed',\n },\n 'account.settings.delete.account.modal.after.header': {\n id: 'account.settings.delete.account.modal.after.header',\n defaultMessage: 'We\\'re sorry to see you go! Your account will be deleted shortly.',\n description: 'Title displayed after user account is deleted',\n },\n 'account.settings.delete.account.modal.after.text': {\n id: 'account.settings.delete.account.modal.after.text',\n defaultMessage: 'Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email.',\n description: 'Text displayed after user account is deleted',\n },\n 'account.settings.delete.account.modal.after.button': {\n id: 'account.settings.delete.account.modal.after.button',\n defaultMessage: 'Close',\n description: 'Label on button to close a dialog',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport messages from './messages';\n\nconst PrintingInstructions = (props) => {\n const actionLink = (\n \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 {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 {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 {intl.formatMessage(messages['account.settings.delete.account.modal.after.text'])}\n
\n \n )}\n closeText={intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])}\n renderHeaderCloseButton={false}\n onClose={onClose}\n />\n );\n};\n\nSuccessModal.propTypes = {\n status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),\n intl: intlShape.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n\nSuccessModal.defaultProps = {\n status: null,\n};\n\nexport default injectIntl(SuccessModal);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Hyperlink } from '@edx/paragon';\n\n// Messages\nimport { getConfig } from '@edx/frontend-platform';\nimport messages from './messages';\n\n// Components\nimport Alert from '../Alert';\n\nconst BeforeProceedingBanner = (props) => {\n const { instructionMessageId, intl, supportArticleUrl } = props;\n\n return (\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 {\n FETCH_SETTINGS,\n OPEN_FORM,\n CLOSE_FORM,\n SAVE_SETTINGS,\n FETCH_TIME_ZONES,\n SAVE_PREVIOUS_SITE_LANGUAGE,\n UPDATE_DRAFT,\n RESET_DRAFTS,\n SAVE_MULTIPLE_SETTINGS,\n BEGIN_NAME_CHANGE,\n} from './actions';\n\nimport { reducer as deleteAccountReducer, DELETE_ACCOUNT } from '../delete-account';\nimport { reducer as siteLanguageReducer, FETCH_SITE_LANGUAGES } from '../site-language';\nimport { reducer as resetPasswordReducer, RESET_PASSWORD } from '../reset-password';\nimport { reducer as nameChangeReducer, REQUEST_NAME_CHANGE } from '../name-change';\nimport { reducer as thirdPartyAuthReducer, DISCONNECT_AUTH } from '../third-party-auth';\n\nexport const defaultState = {\n loading: false,\n loaded: false,\n loadingError: null,\n data: null,\n values: {},\n errors: {},\n confirmationValues: {},\n drafts: {},\n saveState: null,\n timeZones: [],\n countryTimeZones: [],\n previousSiteLanguage: null,\n deleteAccount: deleteAccountReducer(),\n siteLanguage: siteLanguageReducer(),\n resetPassword: resetPasswordReducer(),\n nameChange: nameChangeReducer(),\n thirdPartyAuth: thirdPartyAuthReducer(),\n nameChangeModal: false,\n verifiedName: null,\n mostRecentVerifiedName: {},\n verifiedNameHistory: {},\n};\n\nconst reducer = (state = defaultState, action) => {\n let dispatcherIsOpenForm;\n\n switch (action.type) {\n case FETCH_SETTINGS.BEGIN:\n return {\n ...state,\n loading: true,\n loaded: false,\n loadingError: null,\n };\n case FETCH_SETTINGS.SUCCESS:\n return {\n ...state,\n values: { ...state.values, ...action.payload.values },\n // Dump the providers into thirdPartyAuth.\n thirdPartyAuth: { ...state.thirdPartyAuth, providers: action.payload.thirdPartyAuthProviders },\n profileDataManager: action.payload.profileDataManager,\n timeZones: action.payload.timeZones,\n loading: false,\n loaded: true,\n loadingError: null,\n verifiedNameHistory: action.payload.verifiedNameHistory,\n };\n case FETCH_SETTINGS.FAILURE:\n return {\n ...state,\n loading: false,\n loaded: false,\n loadingError: action.payload.error,\n };\n case FETCH_SETTINGS.RESET:\n return {\n ...state,\n loading: false,\n loaded: false,\n loadingError: null,\n };\n\n case OPEN_FORM:\n return {\n ...state,\n openFormId: action.payload.formId,\n saveState: null,\n errors: {},\n drafts: {},\n };\n case CLOSE_FORM:\n dispatcherIsOpenForm = action.payload.formId === state.openFormId;\n if (dispatcherIsOpenForm) {\n return {\n ...state,\n openFormId: null,\n saveState: null,\n errors: {},\n drafts: {},\n nameChangeModal: false,\n };\n }\n return state;\n case UPDATE_DRAFT:\n return {\n ...state,\n drafts: { ...state.drafts, [action.payload.name]: action.payload.value },\n saveState: null,\n errors: {},\n };\n\n case RESET_DRAFTS:\n return {\n ...state,\n drafts: {},\n };\n\n case BEGIN_NAME_CHANGE:\n return {\n ...state,\n saveState: 'error',\n nameChangeModal: {\n formId: action.payload.formId,\n },\n };\n\n case SAVE_SETTINGS.BEGIN:\n return {\n ...state,\n saveState: 'pending',\n errors: {},\n };\n case SAVE_SETTINGS.SUCCESS:\n return {\n ...state,\n saveState: 'complete',\n values: { ...state.values, ...action.payload.values },\n errors: {},\n confirmationValues: {\n ...state.confirmationValues,\n ...action.payload.confirmationValues,\n },\n };\n case SAVE_SETTINGS.FAILURE:\n return {\n ...state,\n saveState: 'error',\n errors: { ...state.errors, ...action.payload.errors },\n };\n case SAVE_SETTINGS.RESET:\n return {\n ...state,\n saveState: null,\n errors: {},\n };\n case SAVE_PREVIOUS_SITE_LANGUAGE:\n return {\n ...state,\n previousSiteLanguage: action.payload.previousSiteLanguage,\n };\n case SAVE_MULTIPLE_SETTINGS.BEGIN:\n return {\n ...state,\n saveState: 'pending',\n };\n\n case SAVE_MULTIPLE_SETTINGS.SUCCESS:\n return {\n ...state,\n saveState: 'complete',\n };\n\n case SAVE_MULTIPLE_SETTINGS.FAILURE:\n return {\n ...state,\n saveState: 'error',\n errors: { ...state.errors, ...action.payload.errors },\n };\n\n case FETCH_TIME_ZONES.SUCCESS:\n return {\n ...state,\n countryTimeZones: action.payload.timeZones,\n };\n\n // TODO: Once all the above cases have been converted into sub-reducers, we can use\n // combineReducers in this file to greatly simplify it.\n\n // Delete My Account\n case DELETE_ACCOUNT.CONFIRMATION:\n case DELETE_ACCOUNT.BEGIN:\n case DELETE_ACCOUNT.SUCCESS:\n case DELETE_ACCOUNT.FAILURE:\n case DELETE_ACCOUNT.RESET:\n case DELETE_ACCOUNT.CANCEL:\n return {\n ...state,\n deleteAccount: deleteAccountReducer(state.deleteAccount, action),\n };\n\n case FETCH_SITE_LANGUAGES.BEGIN:\n case FETCH_SITE_LANGUAGES.SUCCESS:\n case FETCH_SITE_LANGUAGES.FAILURE:\n case FETCH_SITE_LANGUAGES.RESET:\n return {\n ...state,\n siteLanguage: siteLanguageReducer(state.siteLanguage, action),\n };\n\n case RESET_PASSWORD.BEGIN:\n case RESET_PASSWORD.SUCCESS:\n case RESET_PASSWORD.FORBIDDEN:\n return {\n ...state,\n resetPassword: resetPasswordReducer(state.resetPassword, action),\n };\n\n case REQUEST_NAME_CHANGE.BEGIN:\n case REQUEST_NAME_CHANGE.SUCCESS:\n case REQUEST_NAME_CHANGE.FAILURE:\n case REQUEST_NAME_CHANGE.RESET:\n return {\n ...state,\n nameChange: nameChangeReducer(state.nameChange, action),\n };\n\n case DISCONNECT_AUTH.BEGIN:\n case DISCONNECT_AUTH.SUCCESS:\n case DISCONNECT_AUTH.FAILURE:\n case DISCONNECT_AUTH.RESET:\n return {\n ...state,\n thirdPartyAuth: thirdPartyAuthReducer(state.thirdPartyAuth, action),\n };\n\n default:\n return state;\n }\n};\n\nexport default reducer;\n","import {\n call, put, delay, takeEvery, all,\n} from 'redux-saga/effects';\n\nimport { publish } from '@edx/frontend-platform';\nimport { getLocale, handleRtl, LOCALE_CHANGED } from '@edx/frontend-platform/i18n';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\n// Actions\nimport {\n FETCH_SETTINGS,\n fetchSettingsBegin,\n fetchSettingsSuccess,\n fetchSettingsFailure,\n closeForm,\n SAVE_SETTINGS,\n SAVE_MULTIPLE_SETTINGS,\n saveSettingsBegin,\n saveSettingsSuccess,\n saveSettingsFailure,\n savePreviousSiteLanguage,\n FETCH_TIME_ZONES,\n fetchTimeZones,\n fetchTimeZonesSuccess,\n saveMultipleSettingsBegin,\n saveMultipleSettingsSuccess,\n saveMultipleSettingsFailure,\n beginNameChange,\n} from './actions';\n\n// Sub-modules\nimport { saga as deleteAccountSaga } from '../delete-account';\nimport { saga as resetPasswordSaga } from '../reset-password';\nimport { saga as nameChangeSaga } from '../name-change';\nimport {\n saga as siteLanguageSaga,\n patchPreferences,\n postSetLang,\n} from '../site-language';\nimport { saga as thirdPartyAuthSaga } from '../third-party-auth';\n\n// Services\nimport {\n getSettings,\n patchSettings,\n getTimeZones,\n getVerifiedNameHistory,\n} from './service';\n\nexport function* handleFetchSettings() {\n try {\n yield put(fetchSettingsBegin());\n const { username, userId, roles: userRoles } = getAuthenticatedUser();\n\n const {\n thirdPartyAuthProviders, profileDataManager, timeZones, ...values\n } = yield call(\n getSettings,\n username,\n userRoles,\n userId,\n );\n\n const verifiedNameHistory = yield call(getVerifiedNameHistory);\n\n if (values.country) { yield put(fetchTimeZones(values.country)); }\n\n yield put(fetchSettingsSuccess({\n values,\n thirdPartyAuthProviders,\n profileDataManager,\n timeZones,\n verifiedNameHistory,\n }));\n } catch (e) {\n yield put(fetchSettingsFailure(e.message));\n throw e;\n }\n}\n\nexport function* handleSaveSettings(action) {\n try {\n yield put(saveSettingsBegin());\n\n const { username, userId } = getAuthenticatedUser();\n const { commitValues, formId } = action.payload;\n const commitData = { [formId]: commitValues };\n let savedValues = null;\n if (formId === 'siteLanguage') {\n const previousSiteLanguage = getLocale();\n // The following two requests need to be done sequentially, with patching preferences before\n // the post to setlang. They used to be done in parallel, but this might create ambiguous\n // behavior.\n yield call(patchPreferences, username, { prefLang: commitValues });\n yield call(postSetLang, commitValues);\n\n yield put(savePreviousSiteLanguage(previousSiteLanguage));\n\n publish(LOCALE_CHANGED, getLocale());\n handleRtl();\n savedValues = commitData;\n } else {\n savedValues = yield call(patchSettings, username, commitData, userId);\n }\n yield put(saveSettingsSuccess(savedValues, commitData));\n if (savedValues.country) { yield put(fetchTimeZones(savedValues.country)); }\n yield delay(1000);\n yield put(closeForm(action.payload.formId));\n } catch (e) {\n if (e.fieldErrors) {\n if (e.fieldErrors.name?.includes('verification')) {\n yield put(beginNameChange('name'));\n }\n yield put(saveSettingsFailure({ fieldErrors: e.fieldErrors }));\n } else {\n yield put(saveSettingsFailure(e.message));\n throw e;\n }\n }\n}\n\n// handles mutiple settings saved at once, in order, and stops executing on first failure.\nexport function* handleSaveMultipleSettings(action) {\n try {\n yield put(saveMultipleSettingsBegin());\n const { username, userId } = getAuthenticatedUser();\n const { settingsArray, form } = action.payload;\n for (let i = 0; i < settingsArray.length; i += 1) {\n const { formId, commitValues } = settingsArray[i];\n yield put(saveSettingsBegin());\n const commitData = { [formId]: commitValues };\n const savedSettings = yield call(patchSettings, username, commitData, userId);\n yield put(saveSettingsSuccess(savedSettings, commitData));\n }\n yield put(saveMultipleSettingsSuccess(action));\n if (form) {\n yield delay(1000);\n yield put(closeForm(form));\n }\n } catch (e) {\n if (e.fieldErrors) {\n if (e.fieldErrors.name?.includes('verification')) {\n yield put(beginNameChange('name'));\n }\n yield put(saveMultipleSettingsFailure({ fieldErrors: e.fieldErrors }));\n } else {\n yield put(saveMultipleSettingsFailure(e.message));\n throw e;\n }\n }\n}\n\nexport function* handleFetchTimeZones(action) {\n const response = yield call(getTimeZones, action.payload.country);\n yield put(fetchTimeZonesSuccess(response, action.payload.country));\n}\n\nexport default function* saga() {\n yield takeEvery(FETCH_SETTINGS.BASE, handleFetchSettings);\n yield takeEvery(SAVE_SETTINGS.BASE, handleSaveSettings);\n yield takeEvery(SAVE_MULTIPLE_SETTINGS.BASE, handleSaveMultipleSettings);\n yield takeEvery(FETCH_TIME_ZONES.BASE, handleFetchTimeZones);\n yield all([\n deleteAccountSaga(),\n siteLanguageSaga(),\n resetPasswordSaga(),\n nameChangeSaga(),\n thirdPartyAuthSaga(),\n ]);\n}\n","import React from 'react';\nimport { FormattedMessage } from '@edx/frontend-platform/i18n';\n\nexport default function NotFoundPage() {\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(messages['account.settings.delete.account.text.warning'],\n { siteName: getConfig().SITE_NAME })}\n
\n\n
\n
\n
\n );\n}\n","import { combineReducers } from 'redux';\n\nimport {\n reducer as accountSettingsReducer,\n storeName as accountSettingsStoreName,\n} from '../account-settings';\n\nconst createRootReducer = () => combineReducers({\n [accountSettingsStoreName]: accountSettingsReducer,\n});\nexport default createRootReducer;\n","import { all } from 'redux-saga/effects';\nimport { saga as accountSettingsSaga } from '../account-settings';\n\nexport default function* rootSaga() {\n yield all([accountSettingsSaga()]);\n}\n","import { getConfig } from '@edx/frontend-platform';\nimport { applyMiddleware, createStore, compose } from 'redux';\nimport thunkMiddleware from 'redux-thunk';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nimport { createLogger } from 'redux-logger';\nimport createSagaMiddleware from 'redux-saga';\n\nimport createRootReducer from './reducers';\nimport rootSaga from './sagas';\n\nconst sagaMiddleware = createSagaMiddleware();\n\nfunction composeMiddleware() {\n if (getConfig().ENVIRONMENT === 'development') {\n const loggerMiddleware = createLogger({\n collapsed: true,\n });\n return composeWithDevTools(applyMiddleware(thunkMiddleware, sagaMiddleware, loggerMiddleware));\n }\n\n return compose(applyMiddleware(thunkMiddleware, sagaMiddleware));\n}\n\nexport default function configureStore(initialState = {}) {\n const store = createStore(\n createRootReducer(),\n initialState,\n composeMiddleware(),\n );\n sagaMiddleware.run(rootSaga);\n\n return store;\n}\n","export const storeName = 'idVerifiction';\n\nexport const idVerificationSelector = state => ({ ...state[storeName] });\n","/**\n * This polyfill is from MDN:\n * https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia\n *\n * Their description:\n * \"Here's an example of using navigator.mediaDevices.getUserMedia(), with a\n * polyfill to cope with older browsers. Note that this polyfill does not\n * correct for legacy differences in constraints syntax, which means constraints\n * won't work well across browsers. It is recommended to use the adapter.js\n * polyfill instead, which does handle constraints.\"\n *\n * Despite the lack of support for differences in constraints we'll use this\n * since it's small and simple and we don't have a need for constraints at the\n * moment. I've added an export hasGetUserMediaSupport before the polyfill to\n * help us understand support before making calls to getUserMedia.\n */\n\n// IIFE to check getUserMedia support. Must be run before the polyfill.\nconst hasGetUserMediaSupport = (() => {\n // Modern API\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n return true;\n }\n // Deprecated APIs\n if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {\n return true;\n }\n return false;\n})();\n\n// Older browsers might not implement mediaDevices at all, so we set an empty object first\nif (navigator.mediaDevices === undefined) {\n navigator.mediaDevices = {};\n}\n\n// Some browsers partially implement mediaDevices. We can't just assign an object\n// with getUserMedia as it would overwrite existing properties.\n// Here, we will just add the getUserMedia property if it's missing.\nif (navigator.mediaDevices.getUserMedia === undefined) {\n // eslint-disable-next-line func-names\n navigator.mediaDevices.getUserMedia = function (constraints) {\n // First get ahold of the legacy getUserMedia, if present\n const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;\n\n // Some browsers just don't implement it - return a rejected promise with an error\n // to keep a consistent interface\n if (!getUserMedia) {\n return Promise.reject(new Error('getUserMedia is not implemented in this browser'));\n }\n\n // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise\n return new Promise(((resolve, reject) => {\n getUserMedia.call(navigator, constraints, resolve, reject);\n }));\n };\n}\n\n// eslint-disable-next-line import/prefer-default-export\nexport { hasGetUserMediaSupport };\n","export const IDLE_STATUS = 'idle';\nexport const LOADING_STATUS = 'loading';\nexport const SUCCESS_STATUS = 'success';\nexport const FAILURE_STATUS = 'failure';\n","import { useEffect, useState } from 'react';\n\nimport {\n IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS,\n} from './constants';\n\n// eslint-disable-next-line import/prefer-default-export\nexport function useAsyncCall(asyncFunc) {\n // React doesn't batch setStates call in async useEffect hooks,\n // so we use a combined object here to ensure that users\n // re-render once.\n const [data, setData] = useState({ status: IDLE_STATUS });\n\n useEffect(\n () => {\n (async () => {\n setData(currData => ({ ...currData, status: LOADING_STATUS }));\n const response = await asyncFunc();\n\n if (Object.keys(response).length === 0) {\n setData(currData => ({ ...currData, status: FAILURE_STATUS, data: response }));\n } else {\n setData(currData => ({ ...currData, status: SUCCESS_STATUS, data: response }));\n }\n })();\n },\n [asyncFunc],\n );\n\n return data;\n}\n\n// Redirect the user to their original location based on session storage\nexport function useRedirect() {\n const [redirect, setRedirect] = useState({\n location: 'dashboard',\n text: 'id.verification.return.dashboard',\n });\n\n useEffect(() => {\n if (sessionStorage.getItem('courseId')) {\n setRedirect({\n location: `courses/${sessionStorage.getItem('courseId')}`,\n text: 'id.verification.return.course',\n });\n } else if (sessionStorage.getItem('next')) {\n setRedirect({\n location: sessionStorage.getItem('next'),\n text: 'id.verification.return.generic',\n });\n }\n }, []);\n\n return redirect;\n}\n","import qs from 'qs';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\n/**\n * Get ID verification status from LMS.\n *\n * Returns {\n * status: String,\n * expires: String|null,\n * canVerify: Boolean,\n * }\n */\nexport async function getExistingIdVerification() {\n const url = `${getConfig().LMS_BASE_URL}/verify_student/status/`;\n const requestConfig = {\n headers: { Accept: 'application/json' },\n };\n try {\n const response = await getAuthenticatedHttpClient().get(url, requestConfig);\n return {\n status: response.data.status || null,\n expires: response.data.expires || null,\n canVerify: response.data.can_verify || false,\n };\n } catch (e) {\n return { status: null, expires: null, canVerify: false };\n }\n}\n\n/**\n * Get the learner's enrollments. Used to check whether the learner is enrolled\n * in a verified course mode.\n *\n * Returns an array: [{...data, mode: String}]\n */\nexport async function getEnrollments() {\n const url = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;\n const requestConfig = {\n headers: { Accept: 'application/json' },\n };\n try {\n const { data } = await getAuthenticatedHttpClient().get(url, requestConfig);\n return data;\n } catch (e) {\n return {};\n }\n}\n\n/**\n * Submit ID verifiction to LMS.\n *\n * verificationData should take the shape of:\n * - facePhotoFile (String): Base64-encoded image.\n * - idPhotoFile (String|null): Optional Base64-encoded image\n * - idPhotoName (String|null): Optional string to change the user's name to.\n * - courseRunKey (String|null): Optional course run to redirect to.\n *\n * Returns { success: Boolean, message: String|null }\n */\nexport async function submitIdVerification(verificationData) {\n const keyMap = {\n facePhotoFile: 'face_image',\n idPhotoFile: 'photo_id_image',\n idPhotoName: 'full_name',\n };\n const postData = {};\n // Don't include blank/null/undefined values.\n // Note that this will also drop the value `false`.\n Object.keys(keyMap).forEach((jsKey) => {\n const apiKey = keyMap[jsKey];\n if (verificationData[jsKey]) {\n postData[apiKey] = verificationData[jsKey];\n }\n });\n\n const url = `${getConfig().LMS_BASE_URL}/verify_student/submit-photos/`;\n const urlEncodedPostData = qs.stringify(postData);\n const requestConfig = {\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n };\n try {\n await getAuthenticatedHttpClient().post(url, urlEncodedPostData, requestConfig);\n return { success: true, message: null };\n } catch (e) {\n return {\n success: false,\n status: e.customAttributes.httpErrorStatus,\n message: String(e),\n };\n }\n}\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'id.verification.next': {\n id: 'id.verification.next',\n defaultMessage: 'Next',\n description: 'Next button.',\n },\n 'id.verification.support': {\n id: 'id.verification.support',\n defaultMessage: 'support',\n description: 'Website support.',\n },\n 'id.verification.example.card.alt': {\n id: 'id.verification.example.card.alt',\n defaultMessage: 'Example of a valid identification card with a full name and photo.',\n description: 'Alt text for an example identification card.',\n },\n 'id.verification.requirements.title': {\n id: 'id.verification.requirements.title',\n defaultMessage: 'Photo Verification Requirements',\n description: 'Title for the Photo Verification Requirements page.',\n },\n 'id.verification.requirements.description': {\n id: 'id.verification.requirements.description',\n defaultMessage: 'In order to complete Photo Verification, you will need the following:',\n description: 'Description for the Photo Verification Requirements page.',\n },\n 'id.verification.requirements.card.device.title': {\n id: 'id.verification.requirements.card.device.title',\n defaultMessage: 'Device with Camera',\n description: 'Title for the Device with Camera card.',\n },\n 'id.verification.requirements.card.device.allow': {\n id: 'id.verification.requirements.card.device.allow',\n defaultMessage: 'Allow',\n description: 'Bold text emphasizing that the user needs to click \"allow\" in order to enable the camera.',\n },\n 'id.verification.requirements.card.id.title': {\n id: 'id.verification.requirements.card.id.title',\n defaultMessage: 'Photo Identification Card',\n description: 'Title for the Photo Identification requirement card.',\n },\n 'id.verification.requirements.card.id.text': {\n id: 'id.verification.requirements.card.id.text',\n defaultMessage: 'You need a valid identification card that contains your full name and photo, such as a driver’s license or passport.',\n description: 'Text that explains that the user needs a photo ID.',\n },\n 'id.verification.privacy.title': {\n id: 'id.verification.privacy.title',\n defaultMessage: 'Privacy Information',\n description: 'Title for Privacy Information.',\n },\n 'id.verification.privacy.need.photo.question': {\n id: 'id.verification.privacy.need.photo.question',\n defaultMessage: 'Why does {siteName} need my photo?',\n description: 'Question about why the platform needs a verification photo.',\n },\n 'id.verification.privacy.need.photo.answer': {\n id: 'id.verification.privacy.need.photo.answer',\n defaultMessage: 'We use your verification photos to confirm your identity and ensure the validity of your certificate.',\n description: 'Answering why the platform needs a verification photo.',\n },\n 'id.verification.privacy.do.with.photo.question': {\n id: 'id.verification.privacy.do.with.photo.question',\n defaultMessage: 'What does {siteName} do with this photo?',\n description: 'Question about what the platform does with the verification photo.',\n },\n 'id.verification.privacy.do.with.photo.answer': {\n id: 'id.verification.privacy.do.with.photo.answer',\n defaultMessage: 'We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on {siteName} after the verification process is complete.',\n description: 'Answering what the platform does with the verification photo.',\n },\n 'id.verification.access.blocked.title': {\n id: 'id.verification.access.blocked.title',\n defaultMessage: 'Identity Verification',\n description: 'Title for text that displays when a user is blocked from ID verification.',\n },\n 'id.verification.access.blocked.enrollment': {\n id: 'id.verification.access.blocked.enrollment',\n defaultMessage: 'You are not currently enrolled in a course that requires identity verification.',\n description: 'Text that displays when user is trying to verify while not enrolled in a course that requires ID verification.',\n },\n 'id.verification.access.blocked.pending': {\n id: 'id.verification.access.blocked.pending',\n defaultMessage: 'You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).',\n description: 'Text that displays when user has a pending or approved request.',\n },\n 'id.verification.photo.take': {\n id: 'id.verification.photo.take',\n defaultMessage: 'Take Photo',\n description: 'Button to take photo.',\n },\n 'id.verification.photo.retake': {\n id: 'id.verification.photo.retake',\n defaultMessage: 'Retake Photo?',\n description: 'Button to retake photo.',\n },\n 'id.verification.photo.enable.detection': {\n id: 'id.verification.photo.enable.detection',\n defaultMessage: 'Enable Face Detection',\n description: 'Text label for the checkbox to enable face detection.',\n },\n 'id.verification.photo.enable.detection.portrait.help.text': {\n id: 'id.verification.photo.enable.detection.portrait.help.text',\n defaultMessage: 'If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.',\n description: 'Help text that appears for enabling face detection on the portrait photo panel.',\n },\n 'id.verification.photo.enable.detection.id.help.text': {\n id: 'id.verification.photo.enable.detection.id.help.text',\n defaultMessage: 'If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.',\n description: 'Help text that appears for enabling face detection on the portrait photo panel.',\n },\n 'id.verification.photo.feedback.correct': {\n id: 'id.verification.photo.feedback.correct',\n defaultMessage: 'Face is in a good position.',\n description: 'Text for screen reader when user\\'s face is in a good position.',\n },\n 'id.verification.photo.feedback.two.faces': {\n id: 'id.verification.photo.feedback.two.faces',\n defaultMessage: 'More than one face detected.',\n description: 'Text for screen reader when more than one face detected.',\n },\n 'id.verification.photo.feedback.no.faces': {\n id: 'id.verification.photo.feedback.no.faces',\n defaultMessage: 'No face detected.',\n description: 'Text for screen reader when no face detected.',\n },\n 'id.verification.photo.feedback.top.left': {\n id: 'id.verification.photo.feedback.top.left',\n defaultMessage: 'Incorrect position. Top left.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.top.center': {\n id: 'id.verification.photo.feedback.top.center',\n defaultMessage: 'Incorrect position. Top center.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.top.right': {\n id: 'id.verification.photo.feedback.top.right',\n defaultMessage: 'Incorrect position. Top right.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.center.left': {\n id: 'id.verification.photo.feedback.center.left',\n defaultMessage: 'Incorrect position. Center left.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.center.center': {\n id: 'id.verification.photo.feedback.center.center',\n defaultMessage: 'Incorrect position. Too close to camera.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.center.right': {\n id: 'id.verification.photo.feedback.center.right',\n defaultMessage: 'Incorrect position. Center right.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.bottom.left': {\n id: 'id.verification.photo.feedback.bottom.left',\n defaultMessage: 'Incorrect position. Bottom left.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.bottom.center': {\n id: 'id.verification.photo.feedback.bottom.center',\n defaultMessage: 'Incorrect position. Bottom center.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.photo.feedback.bottom.right': {\n id: 'id.verification.photo.feedback.bottom.right',\n defaultMessage: 'Incorrect position. Bottom right.',\n description: 'Text for screen reader when face is in a bad position.',\n },\n 'id.verification.camera.access.title': {\n id: 'id.verification.camera.access.title',\n defaultMessage: 'Camera Permissions',\n description: 'Title for the Camera Access page.',\n },\n 'id.verification.camera.access.title.success': {\n id: 'id.verification.camera.access.title.success',\n defaultMessage: 'Camera Access Enabled',\n description: 'Title for the Camera Access page when camera is enabled.',\n },\n 'id.verification.camera.access.title.failed': {\n id: 'id.verification.camera.access.title.failed',\n defaultMessage: 'Camera Access Failed',\n description: 'Title for the Camera Access page when camera access is denied or unavailable.',\n },\n 'id.verification.camera.access.click.allow': {\n id: 'id.verification.camera.access.click.allow',\n defaultMessage: 'Please make sure to click \"Allow\"',\n description: 'Instruction to allow camera access.',\n },\n 'id.verification.camera.access.enable': {\n id: 'id.verification.camera.access.enable',\n defaultMessage: 'Enable Camera',\n description: 'Text to enable camera.',\n },\n 'id.verification.camera.access.problems': {\n id: 'id.verification.camera.access.problems',\n defaultMessage: 'Having problems?',\n description: 'Text for when the user is having problems enabling camera access.',\n },\n 'id.verification.camera.access.skip': {\n id: 'id.verification.camera.access.skip',\n defaultMessage: 'Skip and upload image files instead',\n description: 'Text to skip camera access and enable image uploading.',\n },\n 'id.verification.camera.access.success': {\n id: 'id.verification.camera.access.success',\n defaultMessage: 'Looks like your camera is working and ready.',\n description: 'Text to confirm that camera is working.',\n },\n 'id.verification.camera.access.failure': {\n id: 'id.verification.camera.access.failure',\n defaultMessage: 'It looks like we\\'re unable to access your camera. You will need to upload image files of you and your photo id.',\n description: 'Text indicating that the camera could not be accessed and image upload will be enabled.',\n },\n 'id.verification.camera.access.failure.temporary': {\n id: 'id.verification.camera.access.failure.temporary',\n defaultMessage: 'It looks like we\\'re unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.',\n description: 'Text indicating that the camera could not be accessed.',\n },\n 'id.verification.camera.access.failure.temporary.chrome': {\n id: 'id.verification.camera.access.failure.temporary.chrome',\n defaultMessage: 'To enable camera access in Chrome:',\n description: 'Description for the directions on enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step1': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step1',\n defaultMessage: 'Open Chrome.',\n description: 'Text for step one of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step2': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step2',\n defaultMessage: 'Navigate to More > Settings.',\n description: 'Text for step two of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step2.windows': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step2.windows',\n defaultMessage: 'For Windows: Alt+F, Alt+E, or F10 followed by the spacebar',\n description: 'Text for Windows keyboard shortcut in chrome.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step2.mac': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step2.mac',\n defaultMessage: 'For Mac: Command+,',\n description: 'Text for Mac keyboard shortcut in chrome.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step3': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step3',\n defaultMessage: 'Under the \"Privacy and security\" tab, select \"Site Settings\" and then \"Camera.\"',\n description: 'Text for step three of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step4': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step4',\n defaultMessage: 'Under \"Blocked,\" find \"edx.org\" and select it.',\n description: 'Text for step four of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.chrome.step5': {\n id: 'id.verification.camera.access.failure.temporary.chrome.step5',\n defaultMessage: 'In the \"Permissions\" section, update the camera permissions to \"Allow.\"',\n description: 'Text for step five of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.ie11': {\n id: 'id.verification.camera.access.failure.temporary.ie11',\n defaultMessage: 'To enable camera access in Internet Explorer:',\n description: 'Description for the directions on enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.ie11.step1': {\n id: 'id.verification.camera.access.failure.temporary.ie11.step1',\n defaultMessage: 'Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.',\n description: 'Text for step one of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.ie11.step2': {\n id: 'id.verification.camera.access.failure.temporary.ie11.step2',\n defaultMessage: 'Select the \"Camera and Mic\" tab, and then select the \"Camera and Microphone Settings by Site\" button.',\n description: 'Text for step two of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.ie11.step3': {\n id: 'id.verification.camera.access.failure.temporary.ie11.step3',\n defaultMessage: 'Choose \"edx.org\" from the list of websites and change the permissions by selecting \"Allow\" in the dropdown menu.',\n description: 'Text for step three of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox': {\n id: 'id.verification.camera.access.failure.temporary.firefox',\n defaultMessage: 'To enable camera access in Firefox:',\n description: 'Description for the directions on enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step1': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step1',\n defaultMessage: 'Open Firefox.',\n description: 'Text for step one of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step2': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step2',\n defaultMessage: 'Enter \"about:preferences\" in the URL bar.',\n description: 'Text for step two of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step3': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step3',\n defaultMessage: 'Select the \"Privacy & Security\" tab, and navigate to the \"Permissions\" section.',\n description: 'Text for step three of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step4': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step4',\n defaultMessage: 'Next to \"Camera,\" select the \"Settings…\" button.',\n description: 'Text for step four of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step5': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step5',\n defaultMessage: 'In the search bar, enter \"edx.org.\"',\n description: 'Text for step five of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step6': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step6',\n defaultMessage: 'In the status column for \"edx.org,\" select \"Allow\" from the drop down.',\n description: 'Text for step six of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.firefox.step7': {\n id: 'id.verification.camera.access.failure.temporary.firefox.step7',\n defaultMessage: 'Select \"Save Changes.\"',\n description: 'Text for step seven of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.safari': {\n id: 'id.verification.camera.access.failure.temporary.safari',\n defaultMessage: 'To enable camera access in Safari:',\n description: 'Description for the directions on enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.safari.step1': {\n id: 'id.verification.camera.access.failure.temporary.safari.step1',\n defaultMessage: 'Open Safari.',\n description: 'Text for step one of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.safari.step2': {\n id: 'id.verification.camera.access.failure.temporary.safari.step2',\n defaultMessage: 'Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.',\n description: 'Text for step two of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.safari.step3': {\n id: 'id.verification.camera.access.failure.temporary.safari.step3',\n defaultMessage: 'Select the \"Websites\" tab and then select \"Camera.\"',\n description: 'Text for step three of enabling camera access.',\n },\n 'id.verification.camera.access.failure.temporary.safari.step4': {\n id: 'id.verification.camera.access.failure.temporary.safari.step4',\n defaultMessage: 'Select \"edx.org\" and change the camera permissions to \"Allow.\"',\n description: 'Text for step four of enabling camera access.',\n },\n 'id.verification.camera.access.failure.unsupported': {\n id: 'id.verification.camera.access.failure.unsupported',\n defaultMessage: 'It looks like your browser does not support camera access.',\n description: 'Text indicating that the user\\'s browser does not support camera access.',\n },\n 'id.verification.camera.access.failure.unsupported.chrome.explanation': {\n id: 'id.verification.camera.access.failure.unsupported.chrome.explanation',\n defaultMessage: 'The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.',\n description: 'Explanation for why certain web browsers, like Chrome, do not support accessing the user\\'s camera.',\n },\n 'id.verification.camera.access.failure.unsupported.instructions': {\n id: 'id.verification.camera.access.failure.unsupported.instructions',\n defaultMessage: 'Please use another browser to complete Identity Verification.',\n description: 'Instructions for the user to user another web browser to complete the process.',\n },\n 'id.verification.photo.tips.title': {\n id: 'id.verification.photo.tips.title',\n defaultMessage: 'Helpful Photo Tips',\n description: 'Title for the Photo Tips page.',\n },\n 'id.verification.photo.tips.description': {\n id: 'id.verification.photo.tips.description',\n defaultMessage: 'Next, we\\'ll need you to take a photo of your face. Please review the helpful tips below.',\n description: 'Description for the photo tips page.',\n },\n 'id.verification.photo.tips.list.title': {\n id: 'id.verification.photo.tips.list.title',\n defaultMessage: 'Photo Tips',\n description: 'Title for the list of photo tips.',\n },\n 'id.verification.photo.tips.list.description': {\n id: 'id.verification.photo.tips.list.description',\n defaultMessage: 'To take a successful photo, make sure that:',\n description: 'Description for the list of photo tips.',\n },\n 'id.verification.photo.tips.list.well.lit': {\n id: 'id.verification.photo.tips.list.well.lit',\n defaultMessage: 'Your face is well-lit.',\n description: 'Tip to make sure the user\\'s face is well lit.',\n },\n 'id.verification.photo.tips.list.inside.frame': {\n id: 'id.verification.photo.tips.list.inside.frame',\n defaultMessage: 'Your entire face fits inside the frame.',\n description: 'Tip to make sure the user\\'s face fits inside the frame.',\n },\n 'id.verification.portrait.photo.title.camera': {\n id: 'id.verification.portrait.photo.title.camera',\n defaultMessage: 'Take a Photo of Yourself',\n description: 'Title for the Portrait Photo page if camera access is enabled.',\n },\n 'id.verification.portrait.photo.instructions.camera': {\n id: 'id.verification.portrait.photo.instructions.camera',\n defaultMessage: 'When your face is in position, use the Take Photo button below to take your photo.',\n description: 'Instructions to use the camera to take a portrait photo..',\n },\n 'id.verification.camera.help.sight.question': {\n id: 'id.verification.camera.help.sight.question',\n defaultMessage: 'What if I can\\'t see the camera image or if I can\\'t see my photo to determine which side is visible?',\n description: 'Question on what to do if the user cannot see the camera image or photo during verification.',\n },\n 'id.verification.camera.help.sight.answer.portrait': {\n id: 'id.verification.camera.help.sight.answer.portrait',\n defaultMessage: 'You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.',\n description: 'Confirming what to do if the camera image of the portrait cannot be seen during verification.',\n },\n 'id.verification.camera.help.sight.answer.id': {\n id: 'id.verification.camera.help.sight.answer.id',\n defaultMessage: 'You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.',\n description: 'Confirming what to do if the camera image of the ID cannot be seen during verification.',\n },\n 'id.verification.camera.help.difficulty.question.portrait': {\n id: 'id.verification.camera.help.difficulty.question.portrait',\n defaultMessage: 'What if I have difficulty holding my head in position relative to the camera?',\n description: 'Question on what to do if the user has difficulty holding their head relative to the camera.',\n },\n 'id.verification.camera.help.difficulty.question.id': {\n id: 'id.verification.camera.help.difficulty.question.id',\n defaultMessage: 'What if I have difficulty holding my ID in position relative to the camera?',\n description: 'Question on what to do if the user has difficulty holding their ID relative to the camera.',\n },\n 'id.verification.camera.help.difficulty.answer': {\n id: 'id.verification.camera.help.difficulty.answer',\n defaultMessage: 'If you require assistance with taking a photo for submission, contact {siteName} support for additional suggestions.',\n description: 'Confirming what to do if the user has difficult holding their head relative to the camera.',\n },\n 'id.verification.id.photo.unclear.question': {\n id: 'id.verification.id.photo.unclear.question',\n defaultMessage: 'Is your ID card image not clear or too blurry?',\n description: 'Question on what to do if the user\\'s ID image is unclear',\n },\n 'id.verification.id.tips.title': {\n id: 'id.verification.id.tips.title',\n defaultMessage: 'Helpful Identification Card Tips',\n description: 'Title for the ID Tips page.',\n },\n 'id.verification.id.tips.description': {\n id: 'id.verification.id.tips.description',\n defaultMessage: 'Next, we\\'ll need you to take a photo of a valid identification card that includes your full name and photo, such as a driver’s license or passport. Please have your ID ready.',\n description: 'Description for the ID Tips page.',\n },\n 'id.verification.id.tips.list.well.lit': {\n id: 'id.verification.id.tips.list.well.lit',\n defaultMessage: 'Your identification card is well-lit.',\n description: 'Tip to ensure ID is well lit.',\n },\n 'id.verification.id.tips.list.clear': {\n id: 'id.verification.id.tips.list.clear',\n defaultMessage: 'Ensure that you can see your photo and clearly read your name.',\n description: 'Tip to ensure ID and name can be seen clearly.',\n },\n 'id.verification.id.photo.title.camera': {\n id: 'id.verification.id.photo.title.camera',\n defaultMessage: 'Take a Photo of Your Identification Card',\n description: 'Title for the ID Photo page if camera access is enabled.',\n },\n 'id.verification.id.photo.title.upload': {\n id: 'id.verification.id.photo.title.upload',\n defaultMessage: 'Upload a Photo of Your Identification Card',\n description: 'Title for the ID Photo page if camera access is disabled.',\n },\n 'id.verification.id.photo.preview.alt': {\n id: 'id.verification.id.photo.preview.alt',\n defaultMessage: 'Preview of photo ID.',\n description: 'Alt text for the ID photo preview.',\n },\n 'id.verification.id.photo.instructions.camera': {\n id: 'id.verification.id.photo.instructions.camera',\n defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo. Please use a passport, driver’s license, or another identification card that includes your full name and a picture of your face.',\n description: 'Instructions to use the camera to take an ID photo.',\n },\n 'id.verification.id.photo.instructions.upload': {\n id: 'id.verification.id.photo.instructions.upload',\n defaultMessage: 'Please upload a photo of your identification card. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',\n description: 'Instructions for ID photo upload.',\n },\n 'id.verification.id.photo.instructions.upload.error.invalidFileType': {\n id: 'id.verification.id.photo.instructions.upload.error.invalidFileType',\n defaultMessage: 'The file you have selected is not a supported image type. Please choose from the following formats: ',\n description: 'Error message for file upload that is not a supported image type.',\n },\n 'id.verification.id.photo.instructions.upload.error.fileTooLarge': {\n id: 'id.verification.id.photo.instructions.upload.error.fileTooLarge',\n defaultMessage: 'The file you have selected is too large. Please try again with a file less than 10MB.',\n description: 'Error message for file upload that is larger than 10MB.',\n },\n 'id.verification.name.check.title': {\n id: 'id.verification.name.check.title',\n defaultMessage: 'Double-Check Your Name',\n description: 'Title for the page where a user double-checks that their name is correct.',\n },\n 'id.verification.name.check.instructions': {\n id: 'id.verification.name.check.instructions',\n defaultMessage: 'Does the name below match the name on your photo ID? If not, update the name below to match your photo ID.',\n description: 'Text to instruct the user to check that the name displayed on the page matches what is on their photo ID.',\n },\n 'id.verification.name.check.mismatch.information': {\n id: 'id.verification.name.check.mismatch.information',\n defaultMessage: 'If the name below does not match your photo ID, your identity verification will be denied.',\n description: 'Text to inform the user that if the name displayed on the page does not match what is on their photo ID, identity verification will be denied.',\n },\n 'id.verification.name.error': {\n id: 'id.verification.name.error',\n defaultMessage: 'Please enter your name as it appears on your photo ID.',\n description: 'Error that shows when the user needs to update their name to match the name on their ID.',\n },\n 'id.verification.account.name.warning.prefix': {\n id: 'id.verification.account.name.warning.prefix',\n defaultMessage: 'Please Note:',\n description: 'Prefix to the warning that any change to the account name will be saved to the account.',\n },\n 'id.verification.account.name.settings': {\n id: 'id.verification.account.name.settings',\n defaultMessage: 'Account Settings',\n description: 'Link to Account Settings.',\n },\n 'id.verification.name.label': {\n id: 'id.verification.name.label',\n defaultMessage: 'Name',\n description: 'Label for name input.',\n },\n 'id.verification.account.name.photo.alt': {\n id: 'id.verification.account.name.photo.alt',\n defaultMessage: 'Photo of your ID to be submitted.',\n description: 'Alt text for the photo of the user\\'s ID.',\n },\n 'id.verification.review.title': {\n id: 'id.verification.review.title',\n defaultMessage: 'Review Your Photos',\n description: 'Title for the review your photos page.',\n },\n 'id.verification.review.description': {\n id: 'id.verification.review.description',\n defaultMessage: 'Make sure we can verify your identity with the photos and information you have provided.',\n description: 'Description for the review your photos page.',\n },\n 'id.verification.review.portrait.label': {\n id: 'id.verification.review.portrait.label',\n defaultMessage: 'Your Portrait',\n description: 'Label for the portrait card.',\n },\n 'id.verification.review.portrait.alt': {\n id: 'id.verification.review.portrait.alt',\n defaultMessage: 'Photo of your face to be submitted.',\n description: 'Alt text for the portrait photo.',\n },\n 'id.verification.review.portrait.retake': {\n id: 'id.verification.review.portrait.retake',\n defaultMessage: 'Retake Portrait Photo',\n description: 'Button to retake the portrait photo.',\n },\n 'id.verification.review.id.label': {\n id: 'id.verification.review.id.label',\n defaultMessage: 'Your Identification Card',\n description: 'Label for the Photo ID card.',\n },\n 'id.verification.review.id.alt': {\n id: 'id.verification.review.id.alt',\n defaultMessage: 'Photo of your identification card to be submitted.',\n description: 'Alt text for the ID photo.',\n },\n 'id.verification.review.id.retake': {\n id: 'id.verification.review.id.retake',\n defaultMessage: 'Retake ID Photo',\n description: 'Button to retake the ID photo.',\n },\n 'id.verification.review.confirm': {\n id: 'id.verification.review.confirm',\n defaultMessage: 'Submit',\n description: 'Button to confirm all information is correct and submit.',\n },\n 'id.verification.submission.alert.error.face': {\n id: 'id.verification.submission.alert.error.face',\n defaultMessage: 'A photo of your face is required. Please retake your portrait photo.',\n description: 'Error message displayed when the user\\'s portrait photo is missing.',\n },\n 'id.verification.submission.alert.error.id': {\n id: 'id.verification.submission.alert.error.id',\n defaultMessage: 'A photo of your ID card is required. Please retake your ID photo.',\n description: 'Error message displayed when the user\\'s ID photo is missing.',\n },\n 'id.verification.submission.alert.error.name': {\n id: 'id.verification.submission.alert.error.name',\n defaultMessage: 'A valid account name is required. Please update your account name to match the name on your ID.',\n description: 'Error message displayed when the user\\'s account name is missing.',\n },\n 'id.verification.submission.alert.error.unsupported': {\n id: 'id.verification.submission.alert.error.unsupported',\n defaultMessage: 'One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ',\n description: 'Error message displayed when the user uploads an unsupported file type.',\n },\n 'id.verification.review.error': {\n id: 'id.verification.review.error',\n defaultMessage: '{siteName} Support Page',\n description: 'Text linking to the platform support page.',\n },\n 'id.verification.submitted.title': {\n id: 'id.verification.submitted.title',\n defaultMessage: 'Identity Verification in Progress',\n description: 'Title for the submitted page.',\n },\n 'id.verification.submitted.text': {\n id: 'id.verification.submitted.text',\n defaultMessage: 'We have received your information and are verifying your identity. You will be notified when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.',\n description: 'Text confirming that ID verification request has been received.',\n },\n 'id.verification.return.dashboard': {\n id: 'id.verification.return.dashboard',\n defaultMessage: 'Return to Your Dashboard',\n description: 'Button to return to the dashboard.',\n },\n 'id.verification.return.course': {\n id: 'id.verification.return.course',\n defaultMessage: 'Return to Course',\n description: 'Return to the course which ID verification was accessed from.',\n },\n 'id.verification.return.generic': {\n id: 'id.verification.return.generic',\n defaultMessage: 'Return',\n description: 'Button to return to the user\\'s original location.',\n },\n 'id.verification.photo.upload.help.title': {\n id: 'id.verification.photo.upload.help.title',\n defaultMessage: 'Upload a Photo Instead',\n description: 'Title for section that allows switching to photo upload mode.',\n },\n 'id.verification.photo.camera.help.title': {\n id: 'id.verification.photo.camera.help.title',\n defaultMessage: 'Use Your Camera Instead',\n description: 'Title for section that allows switching to camera mode.',\n },\n 'id.verification.photo.upload.help.text': {\n id: 'id.verification.photo.upload.help.text',\n defaultMessage: 'If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.',\n description: 'Help text for switching to upload mode.',\n },\n 'id.verification.photo.camera.help.text': {\n id: 'id.verification.photo.camera.help.text',\n defaultMessage: 'If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.',\n description: 'Help text for switching to camera mode.',\n },\n 'id.verification.photo.upload.help.button': {\n id: 'id.verification.upload.help.button',\n defaultMessage: 'Switch to Upload Mode',\n description: 'Button used to switch to upload mode.',\n },\n 'id.verification.photo.camera.help.button': {\n id: 'id.verification.camera.help.button',\n defaultMessage: 'Switch to Camera Mode',\n description: 'Button used to switch to camera mode.',\n },\n});\n\nexport default messages;\n","import React from 'react';\n\nconst IdVerificationContext = React.createContext({});\n\nconst MEDIA_ACCESS = {\n PENDING: 'pending',\n UNSUPPORTED: 'unsupported',\n DENIED: 'denied',\n GRANTED: 'granted',\n};\n\nconst ERROR_REASONS = {\n COURSE_ENROLLMENT: 'course_enrollment',\n EXISTING_REQUEST: 'existing_request',\n CANNOT_VERIFY: 'cannot_verify',\n};\n\nconst VERIFIED_MODES = ['verified', 'professional', 'masters', 'executive_education'];\n\nexport default IdVerificationContext;\nexport {\n MEDIA_ACCESS,\n ERROR_REASONS,\n VERIFIED_MODES,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { getConfig } from '@edx/frontend-platform';\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\n\nimport messages from './IdVerification.messages';\nimport { ERROR_REASONS } from './IdVerificationContext';\n\nfunction AccessBlocked({ error, intl }) {\n const handleMessage = () => {\n if (error === ERROR_REASONS.COURSE_ENROLLMENT) {\n return \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 } 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 function 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 = {\n verifiedNameHistoryCallStatus: status,\n verifiedName,\n };\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","export default __webpack_public_path__ + \"aa09931681f3615fc1365e7fb8df2624.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\nfunction 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 function 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\nfunction CameraHelp(props) {\n return (\n \n {props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}\n
\n\n {returnLink}\n
\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\nfunction 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\nfunction 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\nfunction 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, useHistory } 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\nfunction GetNameIdPanel(props) {\n const { push, location } = useHistory();\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 }, []);\n\n function handleSubmit(e) {\n e.preventDefault();\n if (idPhotoName) {\n push(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\nexport default function ImagePreview({ src, alt, id }) {\n return (\n \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","import React from 'react';\n\nexport default function 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","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\nexport default function 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 }, []);\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\nfunction CameraHelpWithUpload(props) {\n const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);\n const [hasUploadedImage, setHasUploadedImage] = useState(false);\n\n function 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, history } from '@edx/frontend-platform';\nimport {\n Alert, Hyperlink, Input, Button, Spinner,\n} from '@edx/paragon';\nimport { Link } 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\nfunction 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\n useEffect(() => setReachedSummary(true), []);\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 \n
\n )}\n onClose={() => setIsModalOpen(false)}\n />\n \n \n );\n}\n\nIdVerificationPage.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default connect(idVerificationSelector, {})(injectIntl(IdVerificationPage));\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'account.settings.coaching.consent.welcome.header': {\n id: 'account.settings.coaching.consent.welcome.header',\n defaultMessage: 'Let’s get started.',\n description: 'The welcome header for consent form.',\n },\n 'account.settings.coaching.consent.welcome.subheader': {\n id: 'account.settings.coaching.consent.welcome.subheader',\n defaultMessage: \"We're here for you from start to finish\",\n description: 'The welcome subheader for consent form.',\n },\n 'account.settings.coaching.consent.description': {\n id: 'account.settings.coaching.consent.description',\n defaultMessage: \"MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*\",\n description: 'Text describing what Coaching is.',\n },\n 'account.settings.coaching.consent.text-messaging.disclaimer': {\n id: 'account.settings.coaching.consent.text-messaging.disclaimer',\n defaultMessage: '* Coaching services are included at no additional cost to learners with US phone numbers. Coaching includes recurring text messages. Message and data rates may apply. Text STOP to opt-out.',\n description: 'Text describing what Coaching is.',\n },\n 'account.settings.coaching.consent.accept-coaching': {\n id: 'account.settings.coaching.consent.accept-coaching',\n defaultMessage: 'Sign up for coaching',\n description: 'Text to confirm coaching enablement',\n },\n 'account.settings.coaching.consent.decline-coaching': {\n id: 'account.settings.coaching.consent.decline-coaching',\n defaultMessage: 'I prefer not to be contacted with free coaching services',\n description: 'Text to decline coaching enablement',\n },\n 'account.settings.coaching.consent.label.name': {\n id: 'account.settings.coaching.consent.label.name',\n defaultMessage: 'Please confirm your name',\n description: 'Label for name input',\n },\n 'account.settings.coaching.consent.label.phone-number': {\n id: 'account.settings.coaching.consent.label.phone-number',\n defaultMessage: 'Enter your mobile number',\n description: 'Label for mobile phone number input',\n },\n 'account.settings.coaching.consent.success.header': {\n id: 'account.settings.coaching.consent.success.header',\n defaultMessage: 'Success!',\n description: 'Heading announcing that submission succeeded',\n },\n 'account.settings.coaching.consent.success.message': {\n id: 'account.settings.coaching.consent.success.message',\n defaultMessage: \"You're signed up for coaching. You can expect a message via email or SMS in the coming days.\",\n description: 'Text announcing that you have signed up and will receive texts',\n },\n 'account.settings.coaching.consent.success.continue': {\n id: 'account.settings.coaching.consent.success.continue',\n defaultMessage: 'Start my course',\n description: 'Text that the user will be sent back to the courseware',\n },\n 'account.settings.coaching.managed.support': {\n id: 'account.settings.coaching.managed.support',\n defaultMessage: 'support',\n description: 'website support',\n },\n});\n\nexport default messages;\n","import React from 'react';\n\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\nimport { Input, Button, Hyperlink } from '@edx/paragon';\n\nimport PropTypes from 'prop-types';\n\nimport Alert from '../Alert';\nimport messages from './CoachingConsent.messages';\n\nconst ErrorMessage = props => (\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{props.message}
\n);\n\nconst ManagedProfileAlert = ({ profileDataManager }) => (\n \n
\n);\n\nCoachingForm.defaultProps = {\n formErrors: {\n coaching: '',\n name: '',\n phone_number: '',\n },\n};\n\nCoachingForm.propTypes = {\n intl: intlShape.isRequired,\n onSubmit: PropTypes.func.isRequired,\n declineCoaching: PropTypes.func.isRequired,\n formValues: PropTypes.shape({\n name: PropTypes.string,\n phone_number: PropTypes.string,\n coaching: PropTypes.shape({\n coaching_consent: PropTypes.bool.isRequired,\n user: PropTypes.number.isRequired,\n eligible_for_coaching: PropTypes.bool.isRequired,\n consent_form_seen: PropTypes.bool.isRequired,\n }),\n }).isRequired,\n formErrors: PropTypes.shape({\n coaching: PropTypes.string,\n full_name: PropTypes.string,\n phone_number: PropTypes.string,\n }),\n redirectUrl: PropTypes.string.isRequired,\n profileDataManager: PropTypes.string.isRequired,\n};\n\nErrorMessage.defaultProps = {\n message: '',\n};\n\nErrorMessage.propTypes = {\n message: PropTypes.string,\n};\n\nManagedProfileAlert.propTypes = {\n profileDataManager: PropTypes.string.isRequired,\n};\n\nexport default injectIntl(CoachingForm);\n","var _g;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nvar SvgLogo = function SvgLogo(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 1168,\n height: 540,\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"none\",\n fillRule: \"nonzero\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#209FDA\",\n d: \"M1166.82 85.5V0H953.76v85.5h48.42l-86.32 106.48-86.4-106.48h48.64V0H718.92v95.72l137.56 169.54-137.56 169.7v17.06h65.58v87.62h93.6v-87.62h-54.18l92-113.5h.02l92.1 113.5h-54.28v87.62h213.06v-87.62h-39.96L975.32 265.26l145.7-179.76z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#026BA4\",\n d: \"M664.02 0v85.5h46.6l8.3 10.22V0zM718.92 452.02v-17.06l-13.84 17.06h-41.06v87.62H784.5v-87.62z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M322 411.86h75.66a207.66 207.66 0 0 1-37.1 60 209.02 209.02 0 0 1-38.56-60M360.56 189.28a208.3 208.3 0 0 0-46.96 83.86 122.64 122.64 0 0 1 8.58 21.56h74.88a120 120 0 0 1 8.8-21.24 209.04 209.04 0 0 0-45.3-84.18ZM322.18 294.7a128.5 128.5 0 0 1 .56 69.7h73.66a122.66 122.66 0 0 1 .6-69.7h-74.82Zm0 0h-13.5a210.32 210.32 0 0 0-.34 69.7h14.4a128.5 128.5 0 0 0-.56-69.7Z\",\n fill: \"#78212E\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M710.62 85.5h-46.6V.02h-88V85.5h56.84v73.7a201.18 201.18 0 0 0-118.2-37.72 208.42 208.42 0 0 0-154.1 67.8 209.04 209.04 0 0 1 45.24 84.18c21.144-39.959 62.652-64.95 107.86-64.94 67.4 0 119.22 54.64 119.22 122v.68c-.34 67.08-52 121.36-119.22 121.36-45.183.033-86.684-24.907-107.86-64.82a120.82 120.82 0 0 1-9.4-23.24h-88a204.12 204.12 0 0 0 5.26 23.56 207.34 207.34 0 0 0 8.4 23.9h75.6a207.66 207.66 0 0 1-37.1 60 208.42 208.42 0 0 0 154.1 67.8 200.54 200.54 0 0 0 149.36-65.42v-22.3h41.04l13.84-17.08V95.74l-8.28-10.24Zm-77.74 416.4v37.84h31.14v-65.56a202 202 0 0 1-31.14 27.72ZM313.6 273.14a203.1 203.1 0 0 0-4.92 21.56h13.5a122.64 122.64 0 0 0-8.58-21.56Z\",\n fill: \"#8A8C8F\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M410.4 294.7c-1.2-7.2-2.74-14.3-4.6-21.24a120 120 0 0 0-8.8 21.24 122.66 122.66 0 0 0-.6 69.7h14.32a223.18 223.18 0 0 0-.32-69.7ZM209.06 121.48c-101.637.008-188.552 73.092-206 173.22H91.4c15.736-51.233 63.065-86.196 116.66-86.18 44.579-.185 85.436 24.831 105.54 64.62a208.3 208.3 0 0 1 46.96-83.86 200.72 200.72 0 0 0-151.5-67.8Zm88.42 290.38a117.18 117.18 0 0 1-89.42 40.72c-54.369.018-102.188-35.942-117.26-88.18h217.54a210.32 210.32 0 0 1 .34-69.7H3.06a211.76 211.76 0 0 0-.34 69.7c16.61 101.042 103.942 175.195 206.34 175.2a200.72 200.72 0 0 0 151.5-67.86 209.02 209.02 0 0 1-38.56-60l-24.52.12Z\",\n fill: \"#B72768\"\n }))));\n};\n\nexport { SvgLogo as ReactComponent };\nexport default __webpack_public_path__ + \"36e7c65a02369e28ecc7ad327c4bfceb.svg\";","import React from 'react';\n\nimport { getConfig, getQueryParameters } from '@edx/frontend-platform';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\nimport { faCheck } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport get from 'lodash.get';\nimport { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\nimport PageLoading from '../PageLoading';\nimport CoachingConsentForm from './CoachingConsentForm';\nimport messages from './CoachingConsent.messages';\nimport LogoSVG from '../../logo.svg';\nimport { fetchSettings } from '../data/actions';\nimport { coachingConsentPageSelector } from '../data/selectors';\n\nconst Logo = ({ src, alt, ...attributes }) => (\n <>\n \n {props.intl.formatMessage(messages['account.settings.coaching.consent.welcome.header'])}\n
\n{props.intl.formatMessage(messages['account.settings.coaching.consent.description'])}
\n\n \n
\n \n \n {props.continue}\n \n
\n);\n\nconst AutoRedirect = (props) => {\n window.location.href = props.redirectUrl;\n return <>;\n};\n\nconst VIEWS = {\n NOT_LOADED: 'NOT_LOADED',\n LOADED: 'LOADED',\n SUCCESS: 'SUCCESS',\n SUCCESS_PENDING: 'SUCCESS_PENDING',\n DECLINED: 'DECLINED',\n DECLINE_PENDING: 'DECLINE_PENDING',\n};\n\nclass CoachingConsent extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n // Used to redirect back to the courseware.\n const nextUrl = this.sanitizeForwardingUrl(getQueryParameters().next);\n this.state = {\n redirectUrl: nextUrl || `${getConfig().LMS_BASE_URL}/dashboard/`,\n formErrors: {},\n formSubmitted: false,\n declineSubmitted: false,\n submissionSuccess: false,\n };\n\n this.handleSubmit = this.handleSubmit.bind(this);\n this.declineCoaching = this.declineCoaching.bind(this);\n this.patchUsingCoachingConsentForm = this.patchUsingCoachingConsentForm.bind(this);\n }\n\n componentDidMount() {\n this.props.fetchSettings();\n }\n\n sanitizeForwardingUrl(url) {\n // Redirect to root of MFE if invalid next param is sent\n return url && url.startsWith(getConfig().LMS_BASE_URL) ? url : `${getConfig().LMS_BASE_URL}/dashboard/`;\n }\n\n async patchUsingCoachingConsentForm(body) {\n const { userId } = getAuthenticatedUser();\n const requestUrl = `${getConfig().LMS_BASE_URL}/api/coaching/v1/coaching_consent/${userId}/`;\n let formErrors = {};\n const data = await getAuthenticatedHttpClient()\n .patch(requestUrl, body)\n .catch((error) => {\n if (get(error, 'customAttributes.httpErrorResponseData')) {\n formErrors = JSON.parse(error.customAttributes.httpErrorResponseData);\n } else {\n formErrors = { full_name: 'Something went wrong. Please try again.' };\n }\n this.setState({\n submissionSuccess: false,\n formErrors,\n formSubmitted: false,\n });\n });\n if (get(data, 'status') === 200) {\n this.setState({ submissionSuccess: true });\n }\n }\n\n handleSubmit(e) {\n e.preventDefault();\n const fullName = e.target.fullName.value;\n const phoneNumber = e.target.phoneNumber.value;\n const body = {\n coaching_consent: true,\n consent_form_seen: true,\n phone_number: phoneNumber,\n full_name: fullName,\n };\n this.setState({\n formErrors: {},\n formSubmitted: true,\n declineSubmitted: false,\n }, () => this.patchUsingCoachingConsentForm(body));\n }\n\n declineCoaching(e) {\n e.preventDefault();\n const body = {\n coaching_consent: false,\n consent_form_seen: true,\n };\n this.setState({\n formErrors: {},\n formSubmitted: false,\n declineSubmitted: true,\n }, () => this.patchUsingCoachingConsentForm(body));\n }\n\n renderView(currentView) {\n switch (currentView) {\n case VIEWS.NOT_LOADED:\n return {props.header}
\n {props.message}
\n \n \n \n \n \n \n
\n