Fix timezone dropdown under Site Preferences

This patch would fix timezone dropdown which
doesn't change  value on selection.

PROD-1349

.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-lock.json

@@ -1112,15 +1112,15 @@
       }
     },
     "@edx/frontend-component-footer": {
-      "version": "10.0.7",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.0.7.tgz",
-      "integrity": "sha512-CCEjGToWhkhfAcgr27Y660y7Sg7qiHfC+SV83dcAQnK47m5fwLQaJZZ9PRwbotXZZ/Ynmqpltd9Lgk7JQ7p0eg==",
+      "version": "10.0.8",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.0.8.tgz",
+      "integrity": "sha512-5mcOle7pZ9ITQ3VF76Xi4LpeERQ40IfnmiZQVMfrBXX6PlURROPl+jI1Q2GgIS2CDsSc8DWfYPvUKdJm0U34jw==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "1.2.27",
         "@fortawesome/free-brands-svg-icons": "5.8.2",
         "@fortawesome/free-regular-svg-icons": "5.8.2",
         "@fortawesome/free-solid-svg-icons": "5.8.2",
-        "@fortawesome/react-fontawesome": "0.1.8"
+        "@fortawesome/react-fontawesome": "0.1.9"
       },
       "dependencies": {
         "@fortawesome/free-regular-svg-icons": {
@@ -1288,11 +1288,11 @@
       }
     },
     "@fortawesome/react-fontawesome": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz",
-      "integrity": "sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
       "requires": {
-        "prop-types": "^15.5.10"
+        "prop-types": "^15.7.2"
       }
     },
     "@jest/console": {
@@ -11519,6 +11519,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",

package.json

@@ -29,7 +29,7 @@
     "ie 11"
   ],
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.7",
+    "@edx/frontend-component-footer": "10.0.8",
     "@edx/frontend-component-header": "2.0.5",
     "@edx/frontend-platform": "1.1.14",
     "@edx/paragon": "7.1.5",
@@ -37,7 +37,7 @@
     "@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",

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) {
@@ -327,6 +328,14 @@ 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 +388,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'])}
@@ -474,10 +483,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/_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/sagas.js

@@ -37,7 +37,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,6 +45,7 @@ export function* handleFetchSettings() {
       getSettings,
       username,
       userRoles,
+      userId,
     );
 
     if (values.country) yield put(fetchTimeZones(values.country));
@@ -65,7 +66,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,7 +84,7 @@ 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));

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' },
@@ -151,15 +152,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 +170,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 +195,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/index.jsx

@@ -49,6 +49,7 @@ initialize({
     config: () => {
       mergeConfig({
         SUPPORT_URL: process.env.SUPPORT_URL,
+        COACHING_ENABLED: (process.env.COACHING_ENABLED || false),
       }, 'App loadConfig override handler');
     },
   },