feat: added automatic hiding functionality for the survey report banner when clicking on the dismiss button

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>