Showing feedback modal when the user access the app

apps/api/routes.py

@@ -409,7 +409,7 @@ def feedback():
         return {"status": "ok", "recent_feedbacks": user_feedbacks}, 200
 
     data = request.get_json()
-    stars = data.get("rating")
+    stars = data.get("stars")
     comment = data.get("comment", "")
 
     if not stars:

apps/home/routes.py

@@ -5,6 +5,7 @@
 import traceback
 import uuid
 import re
+import random
 from collections import OrderedDict
 
 from apps import db, cache
@@ -18,6 +19,7 @@
 from apps.audit_mixin import get_remote_addr, check_user_category
 from apps.authentication.forms import GroupForm
 from apps.utils import update_running_labs_stats, parse_lab_expiration, datetime_from_ts, update_category_stats, update_stats_lab_instances_answers
+from datetime import datetime
 from sqlalchemy import desc
 
 
@@ -78,8 +80,24 @@ def index():
     }
 
     user_feedback = UserFeedbacks.query.filter_by(user_id=current_user.id).first()
+    show_feedback_modal = False
+
+    if not user_feedback:
+        last_shown = cache.get(f"feedback_prompt_last_shown_{current_user.id}")
+        if last_shown:
+            today = datetime.utcnow()
+            days_since_shown = (today - last_shown).days
+            if days_since_shown < 7:
+                return render_template('pages/index.html', stats=stats, user_feedback=user_feedback,
+                                       show_feedback_modal=show_feedback_modal, testbed_infos=testbed_infos,
+                                       map_config=map_config)
+
+        if random.random() < 0.1:
+            show_feedback_modal = True
+            cache.set(f"feedback_prompt_last_shown_{current_user.id}", datetime.utcnow())
+
+    return render_template('pages/index.html', stats=stats, user_feedback=user_feedback, show_feedback_modal=show_feedback_modal, testbed_infos=testbed_infos, map_config=map_config)
 
-    return render_template('pages/index.html', stats=stats, user_feedback=user_feedback, testbed_infos=testbed_infos, map_config=map_config)
 
 
 @blueprint.route('/running/')

apps/templates/includes/feedback_modal_involuntary.html

@@ -0,0 +1,44 @@
+<!-- Modal de Feedback -->
+<div class="modal fade" id="modal-feedback-involuntary" tabindex="-1" role="dialog" aria-labelledby="modal-feedback-involuntary-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Rating</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="info-box mb-3">
+              <button id="thumbsUpButton" type="button" class="info-box-icon {{"bg-success" if stats['has_liked'] else "bg-secondary"}} elevation-1 icobutton icobutton--thumbs-up"><i class="fas fa-thumbs-up"></i></button>
+
+              <div class="info-box-content">
+                <span class="info-box-text">Likes</span>
+                <span class="info-box-number" id="user-likes">{{stats['likes']}}</span>
+              </div>
+              <!-- /.info-box-content -->
+            </div>
+        <div class="form-group">
+          <label for="rating">Rating:</label>
+          <div id="stars" class="star-rating">
+            <i class="far fa-star" data-index="1"></i>
+            <i class="far fa-star" data-index="2"></i>
+            <i class="far fa-star" data-index="3"></i>
+            <i class="far fa-star" data-index="4"></i>
+            <i class="far fa-star" data-index="5"></i>
+          </div>
+          <input type="hidden" id="star-item-id" />
+        </div>
+        <div id="feedback-message" class="form-group"></div>
+        <div class="form-group">
+          <label for="comment">Comment (Optional):</label>
+          <textarea class="form-control" id="comment" rows="3" placeholder="Leave your comment...">{{ user_feedback.comment|default('', true) }}</textarea>
+        </div>
+      </div>
+      <div class="modal-footer justify-content-between">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="submit-star" {{"disabled" if user_feedback else ""}}>Submit</button>
+      </div>
+    </div>
+  </div>
+</div>

apps/templates/pages/index.html

@@ -21,6 +21,8 @@
   <link rel="stylesheet" href="/static/assets/css/custom.css">
 {% endblock stylesheets %}
 
+{% include "includes/feedback_modal_involuntary.html" %}
+
 {% block content %}
 
   <!-- Content Wrapper. Contains page content -->
@@ -781,7 +783,7 @@ <h3 class="card-title">Lab categories and usage</h3>
 
             const comment = commentInput.value.trim();
             const ratingData = {
-                rating: selectedRating,
+                stars: selectedRating,
                 comment: comment,
             };
 
@@ -854,5 +856,11 @@ <h3 class="card-title">Lab categories and usage</h3>
         }
     });
     </script>
+    {% if show_feedback_modal %}
+    <script>
+      $(document).ready(function(){
+          $('#modal-feedback-involuntary').modal('show');
+      });
+    </script>
+    {% endif %}
 {% endblock javascripts %}
-