Adding new styles to the new donation button.

common/djangoapps/student/views.py

@@ -72,6 +72,7 @@ import external_auth.views
 
 from bulk_email.models import Optout, CourseAuthorization
 import shoppingcart
+from shoppingcart.models import DonationConfiguration
 from user_api.models import UserPreference
 from lang_pref import LANGUAGE_KEY
 
@@ -645,14 +646,14 @@ def _create_recent_enrollment_message(course_enrollment_pairs, course_modes):
             {
                 "course_id": course.id,
                 "course_name": course.display_name,
-                "allow_donation": not CourseMode.has_verified_mode(course_modes[course.id])
+                "allow_donation": _allow_donation(course_modes, course.id)
             }
             for course in recently_enrolled_courses
         ]
 
         return render_to_string(
             'enrollment/course_enrollment_message.html',
-            {'course_enrollment_messages': messages}
+            {'course_enrollment_messages': messages, 'platform_name': settings.PLATFORM_NAME}
         )
 
 
@@ -678,6 +679,22 @@ def _get_recently_enrolled_courses(course_enrollment_pairs):
     ]
 
 
+def _allow_donation(course_modes, course_id):
+    """Determines if the dashboard will request donations for the given course.
+
+    Check if donations are configured for the platform, and if the current course is accepting donations.
+
+    Args:
+        course_modes (dict): Mapping of course ID's to course mode dictionaries.
+        course_id (str): The unique identifier for the course.
+
+    Returns:
+        True if the course is allowing donations.
+
+    """
+    return DonationConfiguration.current().enabled and not CourseMode.has_verified_mode(course_modes[course_id])
+
+
 def try_change_enrollment(request):
     """
     This method calls change_enrollment if the necessary POST

lms/static/js/dashboard/donation.js

@@ -100,8 +100,8 @@ var edx = edx || {};
                 var html = _.template($("#donation-tpl").html(), {});
                 this.$el.html(html);
                 this.$amount = $("input[name=\"amount\"]", this.$el);
-                this.$submit = $("input[type=\"submit\"]", this.$el);
-                this.$errorMsg = $(".payment-form", this.$el);
+                this.$submit = $("button[type=\"submit\"]", this.$el);
+                this.$errorMsg = $(".donation-error-msg", this.$el);
                 this.$paymentForm = $(".payment-form", this.$el);
                 this.$submit.click(this.donate);
                 return this;
@@ -179,6 +179,7 @@ var edx = edx || {};
                 return isValid;
             },
 
+
             /**
             * Validate that the given amount is a valid currency string.
             *

lms/static/sass/multicourse/_dashboard.scss

@@ -1153,22 +1153,69 @@
 
   .wrapper-msg {
     padding-bottom: 0;
-  }
 
-  .msg {
-    @include clearfix();
-    font-family: $sans-serif;
-    padding-bottom: $baseline;
-    border-bottom: thin solid $gray;
+    .msg {
+      @include clearfix();
+      font-family: $sans-serif;
+      padding-bottom: $baseline;
+      border-bottom: thin solid $gray;
 
-    &.title {
-      @extend %t-title5;
-      @extend %t-weight4;
-      font-family: $f-sans-serif;
+      &.title {
+        @extend %t-title5;
+        @extend %t-weight4;
+        font-family: $f-sans-serif;
 
-      // Overriding Platform h2 styles
-      text-transform: none;
-      letter-spacing: 0;
+        // Overriding Platform h2 styles
+        text-transform: none;
+        letter-spacing: 0;
+      }
+
+      &.has-actions {
+
+        .donate-content {
+          width: flex-grid(8, 12);
+        }
+
+        .donate-actions {
+          width: flex-grid(4, 12);
+          vertical-align: bottom;
+          display: inline-block;
+
+          .monetary-symbol {
+            vertical-align: middle;
+            color: $white;
+            font-weight: 600;
+          }
+
+          .amount {
+            padding: $baseline ($baseline/2);
+            width: 80px;
+            vertical-align: middle;
+            text-align: left;
+            border: 2px;
+
+            &.validation-error {
+              border: 2px solid $pink;
+            }
+          }
+
+          .action-donate {
+            @extend %btn-primary-blue;
+            vertical-align: middle;
+            padding-top: ($baseline/2);
+            padding-bottom: ($baseline/2);
+            text-shadow: none;
+            text-transform: none;
+            letter-spacing: 0;
+            color: $white;
+            font-weight: 600;
+          }
+
+          .donation-error-msg {
+            padding: ($baseline/2) 0;
+          }
+        }
+      }
     }
   }
 }

lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html

@@ -9,7 +9,7 @@
           <h2 class="title">${_("You need to re-verify to continue")}</h2>
           <div class="copy">
             <p class="activation-message">
-            ${_("To continue in the ID Verified track in the following courses, you need to re-verify your identity:")}
+            ${_("People change, and each year we ask you to re-verify your identity for our verified certificates. Take a minute now to help us renew your identity.")}
             </p>
             <ul class="reverify-list">
               % for item in reverifications["must_reverify"]:

lms/templates/dashboard/donation.underscore

@@ -1,6 +1,7 @@
-<form class="donate-form">
-    <input type="text" name="amount" value="25.00" />
-    <input type="submit" name="Donate" value="<%- gettext('Donate') %>" />
-    <div class="donation-error-msg" />
+<div class="donation-error-msg" />
+<form class="nav-item donate-form">
+    <span class="monetary-symbol">$</span>
+    <input class="amount" type="text" name="amount" value="25.00" />
+    <button class="btn action-primary action-donate" type="submit" name="Donate"><%- gettext('Donate') %></button>
 </form>
 <form class="payment-form"></form>

lms/templates/enrollment/course_enrollment_message.html

@@ -1,17 +1,26 @@
 <%! from django.utils.translation import ugettext as _ %>
 % for course_msg in course_enrollment_messages:
     <div class="wrapper-msg urgency-high">
-        <div class="msg">
-            <div class="msg-content">
+        <div class="msg has-actions">
+            <div class="msg-content donate-content">
                 <h2 class="sr">${_("Enrollment Successful")}</h2>
                 <div class="copy">
-                    <p>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course_msg["course_name"])}</p>
-
+                    <p>${_("Thank you for enrolling in {enrolled_course}. We hope you enjoy the course.").format(enrolled_course=course_msg["course_name"])}</p>
                     % if course_msg["allow_donation"]:
-                    <div class="donate-container" data-course="${ course_msg['course_id'] }" />
+                        <p>
+                            ${_("{platform_name} is a nonprofit bringing high-quality education to everyone, everywhere. "
+                                "Your help allows us to continuously improve the learning experience for millions and "
+                                "make a better future one learner at a time.").format(platform_name=platform_name)}
+                        </p>
                     % endif
                 </div>
             </div>
+            % if course_msg["allow_donation"]:
+            <div class="nav-actions donate-actions">
+                <h3 class="sr">${_('Donation Actions')}</h3>
+                <div class="donate-container" data-course="${ course_msg['course_id'] }"></div>
+            </div>
+            % endif
         </div>
     </div>
 % endfor