Upgrade frontend build and satisfy new linting rules

Fix timezone dropdown under Site Preferences

.env.development

@@ -16,3 +16,5 @@ SEGMENT_KEY=null
 SITE_NAME='edX'
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
+# Temporary, Remove this once we are ready to release the feature.
+COACHING_ENABLED=''

.env.test

@@ -15,3 +15,4 @@ SEGMENT_KEY=null
 SITE_NAME='edX'
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
+COACHING_ENABLED=''

package.json

@@ -12,7 +12,7 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "is-es5": "es-check es5 ./dist/*.js",
-    "lint": "fedx-scripts eslint",
+    "lint": "fedx-scripts eslint . --ext .js,.jsx",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
@@ -29,15 +29,15 @@
     "ie 11"
   ],
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.7",
+    "@edx/frontend-component-footer": "10.0.9",
     "@edx/frontend-component-header": "2.0.5",
     "@edx/frontend-platform": "1.1.14",
     "@edx/paragon": "7.1.5",
-    "@fortawesome/fontawesome-svg-core": "1.2.27",
+    "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.8.2",
     "@fortawesome/free-regular-svg-icons": "5.7.2",
     "@fortawesome/free-solid-svg-icons": "5.8.2",
-    "@fortawesome/react-fontawesome": "0.1.8",
+    "@fortawesome/react-fontawesome": "0.1.9",
     "babel-polyfill": "6.26.0",
     "classnames": "2.2.6",
     "font-awesome": "4.7.0",
@@ -45,6 +45,7 @@
     "formdata-polyfill": "3.0.19",
     "history": "4.10.1",
     "lodash.camelcase": "4.3.0",
+    "lodash.debounce": "4.0.8",
     "lodash.findindex": "4.6.0",
     "lodash.get": "4.4.2",
     "lodash.isempty": "4.4.0",
@@ -72,7 +73,7 @@
     "universal-cookie": "4.0.3"
   },
   "devDependencies": {
-    "@edx/frontend-build": "2.0.6",
+    "@edx/frontend-build": "3.1.14",
     "codecov": "3.6.5",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.2",

src/account-settings/AccountSettingsPage.jsx

@@ -33,6 +33,7 @@ import {
   GENDER_OPTIONS,
 } from './data/constants';
 import { fetchSiteLanguages } from './site-language';
+import CoachingToggle from './coaching/CoachingToggle';
 
 class AccountSettingsPage extends React.Component {
   constructor(props, context) {
@@ -104,16 +105,6 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
-  isEditable(fieldName) {
-    return !this.props.staticFields.includes(fieldName);
-  }
-
-  isManagedProfile() {
-    // Enterprise customer profiles are managed by their organizations. We determine whether
-    // a profile is managed or not by the presence of the profileDataManager prop.
-    return Boolean(this.props.profileDataManager);
-  }
-
   handleEditableFieldChange = (name, value) => {
     this.props.updateDraft(name, value);
   };
@@ -122,6 +113,17 @@ class AccountSettingsPage extends React.Component {
     this.props.saveSettings(formId, values);
   };
 
+  isManagedProfile() {
+    // Enterprise customer profiles are managed by their organizations. We determine whether
+    // a profile is managed or not by the presence of the profileDataManager prop.
+    return Boolean(this.props.profileDataManager);
+  }
+
+
+  isEditable(fieldName) {
+    return !this.props.staticFields.includes(fieldName);
+  }
+
   renderDuplicateTpaProviderMessage() {
     if (!this.state.duplicateTpaProvider) {
       return null;
@@ -223,7 +225,7 @@ class AccountSettingsPage extends React.Component {
     const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
 
     return (
-      <React.Fragment>
+      <>
         <div className="account-section" id="basic-information">
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
@@ -246,9 +248,9 @@ class AccountSettingsPage extends React.Component {
             value={this.props.formValues.name}
             label={this.props.intl.formatMessage(messages['account.settings.field.full.name'])}
             emptyLabel={
-              this.isEditable('name') ?
-                this.props.intl.formatMessage(messages['account.settings.field.full.name.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('name')
+                ? this.props.intl.formatMessage(messages['account.settings.field.full.name.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             helpText={this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])}
             isEditable={this.isEditable('name')}
@@ -258,9 +260,9 @@ class AccountSettingsPage extends React.Component {
             name="email"
             label={this.props.intl.formatMessage(messages['account.settings.field.email'])}
             emptyLabel={
-              this.isEditable('email') ?
-                this.props.intl.formatMessage(messages['account.settings.field.email.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('email')
+                ? this.props.intl.formatMessage(messages['account.settings.field.email.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             value={this.props.formValues.email}
             confirmationMessageDefinition={messages['account.settings.field.email.confirmation']}
@@ -286,9 +288,9 @@ class AccountSettingsPage extends React.Component {
             options={countryOptions}
             label={this.props.intl.formatMessage(messages['account.settings.field.country'])}
             emptyLabel={
-              this.isEditable('country') ?
-                this.props.intl.formatMessage(messages['account.settings.field.country.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('country')
+                ? this.props.intl.formatMessage(messages['account.settings.field.country.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             isEditable={this.isEditable('country')}
             {...editableFieldProps}
@@ -327,6 +329,15 @@ class AccountSettingsPage extends React.Component {
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
             {...editableFieldProps}
           />
+          {getConfig().COACHING_ENABLED
+            && this.props.formValues.coaching.eligible_for_coaching
+            && (
+            <CoachingToggle
+              name="coaching"
+              phone_number={this.props.formValues.phone_number}
+              coaching={this.props.formValues.coaching}
+            />
+            )}
         </div>
 
         <div className="account-section" id="social-media">
@@ -379,7 +390,7 @@ class AccountSettingsPage extends React.Component {
           <EditableField
             name="time_zone"
             type="select"
-            value={this.props.formValues.time_zone || ''}
+            value={this.props.formValues.time_zone}
             options={timeZoneOptions}
             label={this.props.intl.formatMessage(messages['account.settings.field.time.zone'])}
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.time.zone.empty'])}
@@ -405,7 +416,7 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-      </React.Fragment>
+      </>
     );
   }
 
@@ -474,10 +485,16 @@ AccountSettingsPage.propTypes = {
     level_of_education: PropTypes.string,
     gender: PropTypes.string,
     language_proficiencies: PropTypes.string,
+    phone_number: PropTypes.string,
     social_link_linkedin: PropTypes.string,
     social_link_facebook: PropTypes.string,
     social_link_twitter: PropTypes.string,
     time_zone: PropTypes.string,
+    coaching: PropTypes.objectOf(PropTypes.shape({
+      coaching_consent: PropTypes.string.isRequired,
+      user: PropTypes.number.isRequired,
+      eligible_for_coaching: PropTypes.bool.isRequired,
+    })),
   }).isRequired,
   siteLanguage: PropTypes.shape({
     previousValue: PropTypes.string,

src/account-settings/EditableField.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Input, StatefulButton, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, Input, StatefulButton, ValidationFormGroup,
+} from '@edx/paragon';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -65,20 +67,20 @@ function EditableField(props) {
   };
 
   const renderValue = (rawValue) => {
-    if (!rawValue) return renderEmptyLabel();
+    if (!rawValue) { return renderEmptyLabel(); }
 
     if (options) {
       // Use == instead of === to prevent issues when HTML casts numbers as strings
       // eslint-disable-next-line eqeqeq
       const selectedOption = options.find(option => option.value == rawValue);
-      if (selectedOption) return selectedOption.label;
+      if (selectedOption) { return selectedOption.label; }
     }
 
     return rawValue;
   };
 
   const renderConfirmationMessage = () => {
-    if (!confirmationMessageDefinition || !confirmationValue) return null;
+    if (!confirmationMessageDefinition || !confirmationValue) { return null; }
     return intl.formatMessage(confirmationMessageDefinition, {
       value: confirmationValue,
     });
@@ -123,7 +125,7 @@ function EditableField(props) {
                   // Swallowing the onSubmit event on the form would be better, but
                   // we would have to add that logic for every field given our
                   // current structure of the application.
-                  if (saveState === 'pending') e.preventDefault();
+                  if (saveState === 'pending') { e.preventDefault(); }
                 }}
                 disabledStates={[]}
               />

src/account-settings/EmailField.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, StatefulButton, Input, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, StatefulButton, Input, ValidationFormGroup,
+} from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
@@ -56,7 +58,7 @@ function EmailField(props) {
   };
 
   const renderConfirmationMessage = () => {
-    if (!confirmationMessageDefinition || !confirmationValue) return null;
+    if (!confirmationMessageDefinition || !confirmationValue) { return null; }
     return (
       <Alert
         className="alert-warning mt-n2"
@@ -91,7 +93,7 @@ function EmailField(props) {
   };
 
   const renderValue = () => {
-    if (confirmationValue) return renderConfirmationValue();
+    if (confirmationValue) { return renderConfirmationValue(); }
     return value || renderEmptyLabel();
   };
 
@@ -132,7 +134,7 @@ function EmailField(props) {
                   // Swallowing the onSubmit event on the form would be better, but
                   // we would have to add that logic for every field given our
                   // current structure of the application.
-                  if (saveState === 'pending') e.preventDefault();
+                  if (saveState === 'pending') { e.preventDefault(); }
                 }}
                 disabledStates={[]}
               />

src/account-settings/SwitchContent.jsx

@@ -11,7 +11,7 @@ const onChildExit = (htmlNode) => {
     const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;
 
     // There's no replacement, do nothing.
-    if (!enteringChild) return;
+    if (!enteringChild) { return; }
 
     // Get all the focusable elements in the entering child and focus the first one
     const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -29,7 +29,7 @@ function SwitchContent({ expression, cases, className }) {
         return getContent(cases[caseKey]);
       }
       return React.cloneElement(cases[caseKey], { key: caseKey });
-    } else if (cases.default) {
+    } if (cases.default) {
       if (typeof cases.default === 'string') {
         return getContent(cases.default);
       }

src/account-settings/_style.scss

@@ -35,4 +35,13 @@
     margin-bottom: map-get($spacers, 5);
     padding-top: 1rem;
   }
+  
+  .custom-switch {
+    padding: 0;
+    max-width: 500px;
+    .custom-control-label {
+      left: 2.25rem;
+      line-height: 1.6rem;
+    }
+  }
 }

src/account-settings/coaching/CoachingToggle.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { ValidationFormGroup, Input } from '@edx/paragon';
+import messages from './CoachingToggle.messages';
+import { editableFieldSelector } from '../data/selectors';
+import { saveSettings, updateDraft } from '../data/actions';
+import EditableField from '../EditableField';
+
+
+const CoatchingToggle = props => (
+  <>
+    <EditableField
+      name="phone_number"
+      type="text"
+      value={props.phone_number}
+      label={props.intl.formatMessage(messages['account.settings.field.phone_number'])}
+      emptyLabel={props.intl.formatMessage(messages['account.settings.field.phone_number.empty'])}
+      onChange={props.updateDraft}
+      onSubmit={props.saveSettings}
+    />
+    <ValidationFormGroup
+      for="coachingConsent"
+      helpText={props.intl.formatMessage(messages['account.settings.field.coaching_consent.tooltip'])}
+      invalid={!!props.error}
+      invalidMessage={props.intl.formatMessage(messages['account.settings.field.coaching_consent.error'])}
+      className="custom-control custom-switch"
+    >
+      <Input
+        name={props.name}
+        className="custom-control-input"
+        disabled={props.saveState === 'pending'}
+        type="checkbox"
+        id="coachingConsent"
+        checked={props.coaching.coaching_consent}
+        value={props.coaching.coaching_consent}
+        onChange={async (e) => {
+          const { name } = e.target;
+          const value = {
+            ...props.coaching,
+            phone_number: props.phone_number,
+            coaching_consent: e.target.checked,
+          };
+          props.saveSettings(name, value);
+        }}
+      />
+      <label className="custom-control-label" htmlFor="coachingConsent">{props.intl.formatMessage(messages['account.settings.field.coaching_consent'])}</label>
+    </ValidationFormGroup>
+  </>
+);
+
+CoatchingToggle.defaultProps = {
+  phone_number: '',
+  error: '',
+};
+
+CoatchingToggle.propTypes = {
+  name: PropTypes.string.isRequired,
+  error: PropTypes.string,
+  coaching: PropTypes.objectOf(PropTypes.shape({
+    coaching_consent: PropTypes.string.isRequired,
+    user: PropTypes.number.isRequired,
+    eligible_for_coaching: PropTypes.bool.isRequired,
+  })).isRequired,
+  saveState: PropTypes.func.isRequired,
+  saveSettings: PropTypes.func.isRequired,
+  updateDraft: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+  phone_number: PropTypes.string,
+};
+
+export default connect(editableFieldSelector, {
+  saveSettings,
+  updateDraft,
+})(injectIntl(CoatchingToggle));

src/account-settings/coaching/CoachingToggle.messages.js

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.settings.field.phone_number': {
+    id: 'account.settings.field.phone_number',
+    defaultMessage: 'Phone Number',
+    description: 'The label for a phone numbers setting in the user profile',
+  },
+  'account.settings.field.phone_number.empty': {
+    id: 'account.settings.field.phone_number.empty',
+    defaultMessage: 'Add a phone number',
+    description: 'placeholder for a profiles empty phone number field',
+  },
+  'account.settings.field.coaching_consent': {
+    id: 'account.settings.field.coaching_consent',
+    defaultMessage: 'Coaching consent',
+    description: 'The label for the coaching consent setting in the user profile',
+  },
+  'account.settings.field.coaching_consent.tooltip': {
+    id: 'account.settings.field.coaching_consent.tooltip',
+    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 in English and Spanish languages. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.',
+    description: 'A tooltip explaining what coaching is and who it is for',
+  },
+  'account.settings.field.coaching_consent.error': {
+    id: 'account.settings.field.coaching_consent.error',
+    defaultMessage: 'A valid US phone number is required to opt into coaching',
+    description: 'An error message that displays when a user attempts to consent to coaching without first providing a phone number in their profile',
+  },
+});
+
+export default messages;

src/account-settings/coaching/data/service.js

@@ -0,0 +1,36 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+
+/**
+ * get all settings related to the coaching plugin. Settings used
+ * by Microbachelors students.
+ * @param {Number} userId users are identified in the api by LMS id
+ */
+export async function getCoachingPreferences(userId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getConfig().LMS_BASE_URL}/api/coaching/v1/users/${userId}/`);
+  return data;
+}
+
+/**
+ * patch all of the settings related to coaching.
+ * @param {Number} userId users are identified in the api by LMS id
+ * @param {Object} commitValues { coaching }
+ */
+export async function patchCoachingPreferences(userId, commitValues) {
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/coaching/v1/users/${userId}/`;
+  const { coaching } = commitValues;
+  coaching.user = userId;
+
+  await getAuthenticatedHttpClient()
+    .patch(requestUrl, coaching)
+    .catch((error) => {
+      const apiError = Object.create(error);
+      apiError.fieldErrors = JSON.parse(error.customAttributes.httpErrorResponseData);
+      // eslint-disable-next-line prefer-destructuring
+      apiError.fieldErrors.coaching = apiError.fieldErrors.phone_number[0];
+      delete apiError.fieldErrors.phone_number;
+      throw apiError;
+    });
+  return commitValues;
+}

src/account-settings/data/reducers.js

@@ -47,11 +47,12 @@ const reducer = (state = defaultState, action) => {
     case FETCH_SETTINGS.SUCCESS:
       return {
         ...state,
-        values: Object.assign({}, state.values, action.payload.values),
+        values: { ...state.values, ...action.payload.values },
         // Dump the providers into thirdPartyAuth.
-        thirdPartyAuth: Object.assign({}, state.thirdPartyAuth, {
+        thirdPartyAuth: {
+          ...state.thirdPartyAuth,
           providers: action.payload.thirdPartyAuthProviders,
-        }),
+        },
         profileDataManager: action.payload.profileDataManager,
         timeZones: action.payload.timeZones,
         loading: false,
@@ -96,9 +97,10 @@ const reducer = (state = defaultState, action) => {
     case UPDATE_DRAFT:
       return {
         ...state,
-        drafts: Object.assign({}, state.drafts, {
+        drafts: {
+          ...state.drafts,
           [action.payload.name]: action.payload.value,
-        }),
+        },
         saveState: null,
         errors: {},
       };
@@ -119,19 +121,18 @@ const reducer = (state = defaultState, action) => {
       return {
         ...state,
         saveState: 'complete',
-        values: Object.assign({}, state.values, action.payload.values),
+        values: { ...state.values, ...action.payload.values },
         errors: {},
-        confirmationValues: Object.assign(
-          {},
-          state.confirmationValues,
-          action.payload.confirmationValues,
-        ),
+        confirmationValues: {
+          ...state.confirmationValues,
+          ...action.payload.confirmationValues,
+        },
       };
     case SAVE_SETTINGS.FAILURE:
       return {
         ...state,
         saveState: 'error',
-        errors: Object.assign({}, state.errors, action.payload.errors),
+        errors: { ...state.errors, ...action.payload.errors },
       };
     case SAVE_SETTINGS.RESET:
       return {

src/account-settings/data/sagas.js

@@ -1,4 +1,6 @@
-import { call, put, delay, takeEvery, all } from 'redux-saga/effects';
+import {
+  call, put, delay, takeEvery, all,
+} from 'redux-saga/effects';
 
 import { publish } from '@edx/frontend-platform';
 import { getLocale, handleRtl, LOCALE_CHANGED } from '@edx/frontend-platform/i18n';
@@ -37,7 +39,7 @@ import { getSettings, patchSettings, getTimeZones } from './service';
 export function* handleFetchSettings() {
   try {
     yield put(fetchSettingsBegin());
-    const { username, roles: userRoles } = getAuthenticatedUser();
+    const { username, userId, roles: userRoles } = getAuthenticatedUser();
 
     const {
       thirdPartyAuthProviders, profileDataManager, timeZones, ...values
@@ -45,9 +47,12 @@ export function* handleFetchSettings() {
       getSettings,
       username,
       userRoles,
+      userId,
     );
 
-    if (values.country) yield put(fetchTimeZones(values.country));
+    if (values.country) {
+      yield put(fetchTimeZones(values.country));
+    }
 
     yield put(fetchSettingsSuccess({
       values,
@@ -65,7 +70,7 @@ export function* handleSaveSettings(action) {
   try {
     yield put(saveSettingsBegin());
 
-    const { username } = getAuthenticatedUser();
+    const { username, userId } = getAuthenticatedUser();
     const { commitValues, formId } = action.payload;
     const commitData = { [formId]: commitValues };
     let savedValues = null;
@@ -83,10 +88,12 @@ export function* handleSaveSettings(action) {
       handleRtl();
       savedValues = commitData;
     } else {
-      savedValues = yield call(patchSettings, username, commitData);
+      savedValues = yield call(patchSettings, username, commitData, userId);
     }
     yield put(saveSettingsSuccess(savedValues, commitData));
-    if (savedValues.country) yield put(fetchTimeZones(savedValues.country));
+    if (savedValues.country) {
+      yield put(fetchTimeZones(savedValues.country));
+    }
     yield delay(1000);
     yield put(closeForm(action.payload.formId));
   } catch (e) {

src/account-settings/data/service.js

@@ -6,6 +6,7 @@ import isEmpty from 'lodash.isempty';
 
 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
+import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
 
 const SOCIAL_PLATFORMS = [
   { id: 'twitter', key: 'social_link_twitter' },
@@ -40,7 +41,9 @@ function packAccountCommitData(commitData) {
 
   SOCIAL_PLATFORMS.forEach(({ id, key }) => {
     // Skip missing values. Empty strings are valid values and should be preserved.
-    if (commitData[key] === undefined) return;
+    if (commitData[key] === undefined) {
+      return;
+    }
 
     packedData.social_links = [{ platform: id, social_link: commitData[key] }];
     delete packedData[key];
@@ -151,15 +154,16 @@ export async function getProfileDataManager(username, userRoles) {
 
 /**
  * A single function to GET everything considered a setting.
- * Currently encapsulates Account, Preferences, and ThirdPartyAuth
+ * Currently encapsulates Account, Preferences, Coaching, and ThirdPartyAuth
  */
-export async function getSettings(username, userRoles) {
+export async function getSettings(username, userRoles, userId) {
   const results = await Promise.all([
     getAccount(username),
     getPreferences(username),
     getThirdPartyAuthProviders(),
     getProfileDataManager(username, userRoles),
     getTimeZones(),
+    getConfig().COACHING_ENABLED && getCoachingPreferences(userId),
   ]);
 
   return {
@@ -168,20 +172,23 @@ export async function getSettings(username, userRoles) {
     thirdPartyAuthProviders: results[2],
     profileDataManager: results[3],
     timeZones: results[4],
+    coaching: results[5],
   };
 }
 
 /**
  * A single function to PATCH everything considered a setting.
- * Currently encapsulates Account, Preferences, and ThirdPartyAuth
+ * Currently encapsulates Account, Preferences, coaching and ThirdPartyAuth
  */
-export async function patchSettings(username, commitValues) {
+export async function patchSettings(username, commitValues, userId) {
   // Note: time_zone exists in the return value from user/v1/accounts
   // but it is always null and won't update. It also exists in
   // user/v1/preferences where it does update. This is the one we use.
   const preferenceKeys = ['time_zone'];
+  const coachingKeys = ['coaching'];
   const accountCommitValues = omit(commitValues, preferenceKeys);
   const preferenceCommitValues = pick(commitValues, preferenceKeys);
+  const coachingCommitValues = pick(commitValues, coachingKeys);
   const patchRequests = [];
 
   if (!isEmpty(accountCommitValues)) {
@@ -190,6 +197,9 @@ export async function patchSettings(username, commitValues) {
   if (!isEmpty(preferenceCommitValues)) {
     patchRequests.push(patchPreferences(username, preferenceCommitValues));
   }
+  if (!isEmpty(coachingCommitValues)) {
+    patchRequests.push(patchCoachingPreferences(userId, coachingCommitValues));
+  }
 
   const results = await Promise.all(patchRequests);
   // Assigns in order of requests. Preference keys

src/account-settings/data/utils/dataUtils.js

@@ -4,9 +4,9 @@ import snakeCase from 'lodash.snakecase';
 export function modifyObjectKeys(object, modify) {
   // If the passed in object is not an object, return it.
   if (
-    object === undefined ||
-    object === null ||
-    (typeof object !== 'object' && !Array.isArray(object))
+    object === undefined
+    || object === null
+    || (typeof object !== 'object' && !Array.isArray(object))
   ) {
     return object;
   }

src/account-settings/delete-account/ConfirmationModal.jsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Input, Modal, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, Input, Modal, ValidationFormGroup,
+} from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -31,10 +33,9 @@ export class ConfirmationModal extends Component {
       return null;
     }
     const headerMessageId = this.getShortErrorMessageId(errorType);
-    const detailsMessageId =
-      reason === 'empty-password'
-        ? null
-        : 'account.settings.delete.account.error.unable.to.delete.details';
+    const detailsMessageId = reason === 'empty-password'
+      ? null
+      : 'account.settings.delete.account.error.unable.to.delete.details';
 
     return (
       <Alert
@@ -66,7 +67,7 @@ export class ConfirmationModal extends Component {
       <Modal
         open={open}
         title={intl.formatMessage(messages['account.settings.delete.account.modal.header'])}
-        body={
+        body={(
           <div>
             {this.renderError()}
             <Alert
@@ -98,7 +99,7 @@ export class ConfirmationModal extends Component {
               />
             </ValidationFormGroup>
           </div>
-        }
+        )}
         buttons={[
           <Button className="btn-danger" onClick={onSubmit}>
             {intl.formatMessage(messages['account.settings.delete.account.modal.confirm.delete'])}

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

@@ -24,9 +24,12 @@ import ConnectedSuccessModal from './SuccessModal';
 import BeforeProceedingBanner from './BeforeProceedingBanner';
 
 export class DeleteAccount extends React.Component {
-  state = {
-    password: '',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      password: '',
+    };
+  }
 
   handleSubmit = () => {
     if (this.state.password === '') {

src/account-settings/delete-account/SuccessModal.jsx

@@ -11,13 +11,13 @@ export const SuccessModal = (props) => {
     <Modal
       open={status === 'deleted'}
       title={intl.formatMessage(messages['account.settings.delete.account.modal.after.header'])}
-      body={
+      body={(
         <div>
           <p className="h6">
             {intl.formatMessage(messages['account.settings.delete.account.modal.after.text'])}
           </p>
         </div>
-      }
+      )}
       closeText={intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])}
       renderHeaderCloseButton={false}
       onClose={onClose}

src/account-settings/site-language/selectors.js

@@ -12,9 +12,8 @@ export const siteLanguageListSelector = createSelector(
 
 export const siteLanguageOptionsSelector = createSelector(
   siteLanguageSelector,
-  siteLanguage =>
-    siteLanguage.siteLanguageList.map(({ code, name }) => ({
-      value: code,
-      label: name,
-    })),
+  siteLanguage => siteLanguage.siteLanguageList.map(({ code, name }) => ({
+    value: code,
+    label: name,
+  })),
 );

src/account-settings/third-party-auth/ThirdPartyAuth.jsx

@@ -11,14 +11,16 @@ class ThirdPartyAuth extends Component {
   onClickDisconnect = (e) => {
     e.preventDefault();
     const providerId = e.currentTarget.getAttribute('data-provider-id');
-    if (this.props.disconnectionStatuses[providerId] === 'pending') return;
+    if (this.props.disconnectionStatuses[providerId] === 'pending') {
+      return;
+    }
     const disconnectUrl = e.currentTarget.getAttribute('data-disconnect-url');
     this.props.disconnectAuth(disconnectUrl, providerId);
   }
 
   renderUnconnectedProvider(url, name) {
     return (
-      <React.Fragment>
+      <>
         <h6 aria-level="3">{name}</h6>
         <Hyperlink destination={url} className="btn btn-outline-primary">
           <FormattedMessage
@@ -28,7 +30,7 @@ class ThirdPartyAuth extends Component {
             values={{ name }}
           />
         </Hyperlink>
-      </React.Fragment>
+      </>
     );
   }
 
@@ -36,7 +38,7 @@ class ThirdPartyAuth extends Component {
     const hasError = this.props.errors[id];
 
     return (
-      <React.Fragment>
+      <>
         <h6 aria-level="3">
           {name}
           <span className="small font-weight-normal text-muted ml-2">
@@ -75,7 +77,7 @@ class ThirdPartyAuth extends Component {
           data-disconnect-url={url}
           data-provider-id={id}
         />
-      </React.Fragment>
+      </>
     );
   }
 
@@ -85,9 +87,9 @@ class ThirdPartyAuth extends Component {
     return (
       <div className="form-group" key={id}>
         {
-          connected ?
-          this.renderConnectedProvider(disconnectUrl, name, id) :
-          this.renderUnconnectedProvider(connectUrl, name)
+          connected
+            ? this.renderConnectedProvider(disconnectUrl, name, id)
+            : this.renderUnconnectedProvider(connectUrl, name)
         }
       </div>
     );
@@ -104,7 +106,7 @@ class ThirdPartyAuth extends Component {
   }
 
   render() {
-    if (this.props.providers === undefined) return null;
+    if (this.props.providers === undefined) { return null; }
 
     if (this.props.providers.length === 0) {
       return this.renderNoProviders();

src/i18n/messages/ar.json

@@ -76,6 +76,11 @@
   "account.settings.editable.field.action.edit": "Edit",
   "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
   "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.phone_number": "Phone Number",
+  "account.settings.field.phone_number.empty": "Add a phone number",
+  "account.settings.field.coaching_consent": "Coaching consent",
+  "account.settings.field.coaching_consent.tooltip": "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 in English and Spanish languages. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.",
+  "account.settings.field.coaching_consent.error": "A valid US phone number is required to opt into coaching",
   "account.settings.delete.account.before.proceeding": "Before proceeding, please {actionLink}.",
   "account.settings.delete.account.header": "Delete My Account",
   "account.settings.delete.account.subheader": "We're sorry to see you go!",

src/i18n/messages/es_419.json

@@ -76,6 +76,11 @@
   "account.settings.editable.field.action.edit": "Editar",
   "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
   "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.phone_number": "Phone Number",
+  "account.settings.field.phone_number.empty": "Add a phone number",
+  "account.settings.field.coaching_consent": "Coaching consent",
+  "account.settings.field.coaching_consent.tooltip": "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 in English and Spanish languages. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.",
+  "account.settings.field.coaching_consent.error": "A valid US phone number is required to opt into coaching",
   "account.settings.delete.account.before.proceeding": "Antes de continuar, por favor {actionLink}.",
   "account.settings.delete.account.header": "Eliminar mi cuenta",
   "account.settings.delete.account.subheader": "¡Sentimos que te vayas!",

src/i18n/messages/fr.json

@@ -76,6 +76,11 @@
   "account.settings.editable.field.action.edit": "Edit",
   "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
   "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.phone_number": "Phone Number",
+  "account.settings.field.phone_number.empty": "Add a phone number",
+  "account.settings.field.coaching_consent": "Coaching consent",
+  "account.settings.field.coaching_consent.tooltip": "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 in English and Spanish languages. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.",
+  "account.settings.field.coaching_consent.error": "A valid US phone number is required to opt into coaching",
   "account.settings.delete.account.before.proceeding": "Before proceeding, please {actionLink}.",
   "account.settings.delete.account.header": "Delete My Account",
   "account.settings.delete.account.subheader": "We're sorry to see you go!",

src/i18n/messages/zh_CN.json

@@ -76,6 +76,11 @@
   "account.settings.editable.field.action.edit": "Edit",
   "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
   "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.phone_number": "Phone Number",
+  "account.settings.field.phone_number.empty": "Add a phone number",
+  "account.settings.field.coaching_consent": "Coaching consent",
+  "account.settings.field.coaching_consent.tooltip": "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 in English and Spanish languages. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.",
+  "account.settings.field.coaching_consent.error": "A valid US phone number is required to opt into coaching",
   "account.settings.delete.account.before.proceeding": "Before proceeding, please {actionLink}.",
   "account.settings.delete.account.header": "Delete My Account",
   "account.settings.delete.account.subheader": "We're sorry to see you go!",

src/index.jsx

@@ -1,7 +1,9 @@
 import 'babel-polyfill';
 import 'formdata-polyfill';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
-import { subscribe, initialize, APP_INIT_ERROR, APP_READY, mergeConfig } from '@edx/frontend-platform';
+import {
+  subscribe, initialize, APP_INIT_ERROR, APP_READY, mergeConfig,
+} from '@edx/frontend-platform';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Switch } from 'react-router-dom';
@@ -49,6 +51,7 @@ initialize({
     config: () => {
       mergeConfig({
         SUPPORT_URL: process.env.SUPPORT_URL,
+        COACHING_ENABLED: (process.env.COACHING_ENABLED || false),
       }, 'App loadConfig override handler');
     },
   },