Add message for setting course goal.

LEARNER-2307

openedx/features/course_experience/static/course_experience/js/CourseGoals.js

@@ -0,0 +1,40 @@
+/* globals gettext */
+
+export class CourseGoals {  // eslint-disable-line import/prefer-default-export
+
+  constructor(options) {
+    $('.goal-option').click((e) => {
+      const goalKey = $(e.target).data().choice;
+      $.ajax({
+        method: 'POST',
+        url: options.goalApiUrl,
+        headers: { 'X-CSRFToken': $.cookie('csrftoken') },
+        data: {
+          goal_key: goalKey,
+          course_key: options.courseId,
+          user: options.username,
+        },
+        dataType: 'json',
+        success: () => {
+          // LEARNER-2522 will address the success message
+          const successMsg = gettext('Thank you for setting your course goal!');
+          // xss-lint: disable=javascript-jquery-html
+          $('.message-content').html(`<div class="success-message">${successMsg}</div>`);
+        },
+        error: () => {
+          // LEARNER-2522 will address the error message
+          const errorMsg = gettext('There was an error in setting your goal, please reload the page and try again.'); // eslint-disable-line max-len
+          // xss-lint: disable=javascript-jquery-html
+          $('.message-content').html(`<div class="error-message"> ${errorMsg} </div>`);
+        },
+      });
+    });
+
+    // Allow goal selection with an enter press for accessibility purposes
+    $('.goal-option').keyup((e) => {
+      if (e.which === 13) {
+        $(e.target).trigger('click');
+      }
+    });
+  }
+}

openedx/features/course_experience/static/course_experience/js/CourseHome.js

@@ -30,6 +30,18 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
       );
     });
 
+    // Dismissibility for in course messages
+    $(document.body).on('click', '.course-message .dismiss', (event) => {
+      $(event.target).closest('.course-message').hide();
+    });
+
+    // Allow dismiss on enter press for accessibility purposes
+    $(document.body).on('keyup', '.course-message .dismiss', (event) => {
+      if (event.which === 13) {
+        $(event.target).trigger('click');
+      }
+    });
+
     $(document).ready(() => {
       this.configureUpgradeMessage();
     });

openedx/features/course_experience/static/course_experience/js/CourseSock.js

@@ -19,7 +19,7 @@ export class CourseSock {  // eslint-disable-line import/prefer-default-export
       const startFixed = $verificationSock.offset().top + 320;
       const endFixed = (startFixed + $verificationSock.height()) - 220;
 
-      // Assure update button stays in sock even when max-width is exceeded
+      // Ensure update button stays in sock even when max-width is exceeded
       const distLeft = ($verificationSock.offset().left + $verificationSock.width())
         - ($upgradeToVerifiedButton.width() + 22);