feat: hide the survey report banner for a month after clicking the dismiss button (#34914)

This hides the survey report banner from the Django Admin for a
particular user for one month after they click on the "dismiss" button.
This is done completely on the client side using localStorage, so the
same user could see the banner again if they're logging in with a
different browser.

Author: Asespinel

openedx/features/survey_report/static/survey_report/js/admin_banner.js

@@ -1,11 +1,51 @@
 $(document).ready(function(){
+    // Function to get user ID
+  function getUserId() {
+    return $('#userIdSurvey').val();
+  }
+
+  // Function to get current time in milliseconds
+  function getCurrentTime() {
+    return new Date().getTime();
+  }
+
+  // Function to set dismissal time and expiration time in local storage
+  function setDismissalAndExpirationTime(userId, dismissalTime) {
+    let expirationTime = dismissalTime + (30 * 24 * 60 * 60 * 1000); // 30 days
+    localStorage.setItem('bannerDismissalTime_' + userId, dismissalTime);
+    localStorage.setItem('bannerExpirationTime_' + userId, expirationTime);
+  }
+
+  // Function to check if banner should be shown or hidden
+  function checkBannerVisibility() {
+    let userId = getUserId();
+    let bannerDismissalTime = localStorage.getItem('bannerDismissalTime_' + userId);
+    let bannerExpirationTime = localStorage.getItem('bannerExpirationTime_' + userId);
+    let currentTime = getCurrentTime();
+
+    if (bannerDismissalTime && bannerExpirationTime && currentTime > bannerExpirationTime) {
+      // Banner was dismissed and it's not within the expiration period, so show it
+      $('#originalContent').show();
+    } else if (bannerDismissalTime && bannerExpirationTime && currentTime < bannerExpirationTime) {
+      // Banner was dismissed and it's within the expiration period, so hide it
+      $('#originalContent').hide();
+    } else {
+      // Banner has not been dismissed ever so we need to show it.
+      $('#originalContent').show();
+    }
+  }
+
+  // Click event for dismiss button
   $('#dismissButton').click(function() {
     $('#originalContent').slideUp('slow', function() {
-      // If you want to do something after the slide-up, do it here.
-      // For example, you can hide the entire div:
-      // $(this).hide();
+      let userId = getUserId();
+      let dismissalTime = getCurrentTime();
+      setDismissalAndExpirationTime(userId, dismissalTime);
     });
   });
+
+  // Check banner visibility on page load
+  checkBannerVisibility();
   // When the form is submitted
   $("#survey_report_form").submit(function(event){
     event.preventDefault();  // Prevent the form from submitting traditionally

openedx/features/survey_report/templates/survey_report/admin_banner.html

@@ -1,7 +1,7 @@
 {% block survey_report_banner %}
 {% load static %}
 {% if show_survey_report_banner %}
-<div id="originalContent" style="border: 3px solid #06405d; margin-bottom: 50px; rgb(0 0 0 / 18%) 0px 3px 5px;">
+<div id="originalContent" style="border: 3px solid #06405d; margin-bottom: 50px; rgb(0 0 0 / 18%) 0px 3px 5px; display: none;">
   <div  style="background-color: #06405d;padding: 17px 37px;">
     <h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sharing Initiative and shape the future of learning</h1>
 </div>
@@ -15,6 +15,7 @@ <h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sh
    <button id="dismissButton" type="button" style="background-color:var(--close-button-bg); color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; margin-right: 10px; cursor: pointer;">Dismiss</button>
     <form id='survey_report_form' method="POST" action="/survey_report/generate_report" style="margin: 0; padding: 0;">
         {% csrf_token %}
+        <input type="hidden" id="userIdSurvey" value="{{ user.id }}">
         <button type="submit" style="background-color: #377D4D; color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer;">Send Report</button>
     </form>
 </div>