From 6ae346df44f3d402566ea7fade7a2c04ca5dfe61 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 23 Nov 2021 22:28:07 +0530
Subject: [PATCH 1/2] fix: notify-me-ux

---
 school/www/courses/course.html | 11 ++++++++---
 school/www/courses/course.js   |  3 +--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/school/www/courses/course.html b/school/www/courses/course.html
index 565f1f36..364fdeec 100644
--- a/school/www/courses/course.html
+++ b/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">
diff --git a/school/www/courses/course.js b/school/www/courses/course.js
index eefcd3eb..2ad14d95 100644
--- a/school/www/courses/course.js
+++ b/school/www/courses/course.js
@@ -215,8 +215,7 @@ 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");
     }
   })
 }

From 315d373d2d5e373e7eec1241df6047f16c6ca820 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 25 Nov 2021 13:06:12 +0530
Subject: [PATCH 2/2] fix: hide notify me button on callback

---
 school/public/css/style.css  | 1 +
 school/www/courses/course.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/school/public/css/style.css b/school/public/css/style.css
index adb77517..1b7784d3 100644
--- a/school/public/css/style.css
+++ b/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) {
diff --git a/school/www/courses/course.js b/school/www/courses/course.js
index 2ad14d95..4a5c3c81 100644
--- a/school/www/courses/course.js
+++ b/school/www/courses/course.js
@@ -216,6 +216,7 @@ var notify_user = (e) => {
     },
     callback: (data) => {
       $("#interest-alert").removeClass("hide");
+      $("#notify-me").addClass("hide");
     }
   })
 }