Merge pull request #265 from pateljannat/improve-notify-me-behaviour

school/public/css/style.css

@@ -319,6 +319,7 @@ input[type=checkbox] {
   background: #E2E6E9;
   border-radius: 8px;
   margin-top: 16px;
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.02), 0px 0px 8px rgba(0, 0, 0, 0.04);
 }
 
 @media (max-width: 768px) {

school/www/courses/course.html

@@ -58,9 +58,9 @@
         Continue Learning <img class="ml-2" src="/assets/school/icons/white-arrow.svg" />
       </a>
       {% endif %}
-      {% if course.upcoming %}
-      <button class="button wide-button is-default" id="notify-me" data-course="{{course.name | urlencode}}" {% if
-        is_user_interested %} disabled="disabled" title="Your interest has already been noted." {% endif %}>
+      {% if course.upcoming and not is_user_interested %}
+      <button class="button wide-button is-default"
+        id="notify-me" data-course="{{course.name | urlencode}}">
         Notify me when available
       </button>
       {% endif %}
@@ -74,6 +74,11 @@
   </div>
 </div>
 
+<div id="interest-alert" class="alert alert-dismissible empty-state p-4 mt-10 {% if not is_user_interested %} hide {% endif %}">
+  You have opted to be notified for this course. You will receive an email when the course becomes available.
+  <a href="#" class="close p-4" data-dismiss="alert" aria-label="close">&times;</a>
+</div>
+
 {% if course.video_link %}
 <div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
   aria-hidden="true">

school/www/courses/course.js

@@ -215,8 +215,8 @@ var notify_user = (e) => {
       "course": course
     },
     callback: (data) => {
-      frappe.msgprint(__("Your interest has been noted. We'll notify you via email when this course becomes available."));
-      $("#notify-me").attr("disabled", true).attr("title", "Your interest has already been noted");
+      $("#interest-alert").removeClass("hide");
+      $("#notify-me").addClass("hide");
     }
   })
 }