Merge pull request #16153 from edx/diana/disappear-message

Make the welcome message disappear after seven days of first viewing.

openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js

@@ -3,11 +3,10 @@ import 'jquery.cookie';
 
 export class WelcomeMessage {  // eslint-disable-line import/prefer-default-export
 
-  constructor(options) {
-    $('.dismiss-message button').click(() => {
+  static dismissWelcomeMessage(dismissUrl) {
     $.ajax({
       type: 'POST',
-        url: options.dismissUrl,
+      url: dismissUrl,
       headers: {
         'X-CSRFToken': $.cookie('csrftoken'),
       },
@@ -15,6 +14,26 @@ export class WelcomeMessage {  // eslint-disable-line import/prefer-default-expo
         $('.welcome-message').hide();
       },
     });
-    });
+  }
+
+  constructor(options) {
+    // Dismiss the welcome message if the user clicks dismiss, or auto-dismiss if
+    // the user doesn't click dismiss in 7 days from when it was first viewed.
+
+    // Check to see if the welcome message has been displayed at all.
+    if ($('.welcome-message').length > 0) {
+      // If the welcome message has been viewed.
+      if ($.cookie('welcome-message-viewed') === 'True') {
+        // If the timer cookie no longer exists, dismiss the welcome message permanently.
+        if ($.cookie('welcome-message-timer') !== 'True') {
+          WelcomeMessage.dismissWelcomeMessage(options.dismissUrl);
+        }
+      } else {
+        // Set both the viewed cookie and the timer cookie.
+        $.cookie('welcome-message-viewed', 'True', { expires: 365 });
+        $.cookie('welcome-message-timer', 'True', { expires: 7 });
+      }
+    }
+    $('.dismiss-message button').click(() => WelcomeMessage.dismissWelcomeMessage(options.dismissUrl));
   }
 }

openedx/features/course_experience/static/course_experience/js/spec/WelcomeMessage_spec.js

@@ -30,4 +30,56 @@ describe('Welcome Message factory', () => {
       requests.restore();
     });
   });
+
+  describe('Ensure cookies behave as expected', () => {
+    const endpointUrl = '/course/course_id/dismiss_message/';
+
+    function deleteAllCookies() {
+      const cookies = document.cookie.split(';');
+      cookies.forEach((cookie) => {
+        const eqPos = cookie.indexOf('=');
+        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+      });
+    }
+
+    beforeEach(() => {
+      deleteAllCookies();
+    });
+
+    function createWelcomeMessage() {
+      loadFixtures('course_experience/fixtures/welcome-message-fragment.html');
+      new WelcomeMessage({ dismissUrl: endpointUrl });  // eslint-disable-line no-new
+    }
+
+    it('Cookies are created if none exist.', () => {
+      createWelcomeMessage();
+      expect($.cookie('welcome-message-viewed')).toBe('True');
+      expect($.cookie('welcome-message-timer')).toBe('True');
+    });
+
+    it('Nothing is hidden or dismissed if the timer is still active', () => {
+      const $message = $('.welcome-message');
+      $.cookie('welcome-message-viewed', 'True');
+      $.cookie('welcome-message-timer', 'True');
+      createWelcomeMessage();
+      expect($message.attr('style')).toBe(undefined);
+    });
+
+    it('Message is dismissed if the timer has expired and the message has been viewed.', () => {
+      const requests = mockRequests(this);
+      $.cookie('welcome-message-viewed', 'True');
+      createWelcomeMessage();
+
+      const $message = $('.welcome-message');
+      expectRequest(
+        requests,
+        'POST',
+        endpointUrl,
+      );
+      respondWithJson(requests);
+      expect($message.attr('style')).toBe('display: none;');
+      requests.restore();
+    });
+  });
 });