Merge pull request #9017 from edx/aamir-khan/ECOM-1817-instructions-on-receipt

ECOM-1817: updated the course name and also styling for the provider

lms/static/js/commerce/views/receipt_view.js

@@ -13,7 +13,7 @@ var edx = edx || {};
 
         initialize: function () {
             this.useEcommerceApi = !!($.url('?basket_id'));
-            _.bindAll(this, 'renderReceipt', 'renderError', 'getProviderData', 'renderProvider');
+            _.bindAll(this, 'renderReceipt', 'renderError', 'getProviderData', 'renderProvider', 'getCourseData');
 
             /* Mix non-conflicting functions from underscore.string (all but include, contains, and reverse) into
              * the Underscore namespace.
@@ -32,7 +32,7 @@ var edx = edx || {};
                 providerId;
 
             // Add the receipt info to the template context
-            this.course_key = this.getOrderCourseKey(data)
+            this.courseKey = this.getOrderCourseKey(data)
             this.username = this.$el.data('username');
             _.extend(context, {
                 receipt: this.receiptContext(data),
@@ -42,15 +42,21 @@ var edx = edx || {};
             this.$el.html(_.template(templateHtml, context));
 
             this.trackLinks();
+
+            this.getCourseData(this.courseKey).then(this.renderCourse, this.renderError)
+
             providerId = this.getCreditProviderId(data);
             if (providerId) {
                 this.getProviderData(providerId).then(this.renderProvider, this.renderError)
             }
         },
+        renderCourse: function(course) {
+            $(".course_name_placeholder").text(course.name);
+        },
         renderProvider: function (context) {
             var templateHtml = $("#provider-tpl").html(),
                 providerDiv = this.$el.find("#receipt-provider");
-            context.course_key = this.course_key;
+            context.course_key = this.courseKey;
             context.username = this.username;
             providerDiv.html(_.template(templateHtml, context)).removeClass('hidden');
         },
@@ -107,7 +113,7 @@ var edx = edx || {};
         },
         /**
          * Retrieve credit provider data from LMS.
-         * @param  {string} provider_id The provider_id of the credit provider.
+         * @param  {string} providerId The providerId of the credit provider.
          * @return {object} JQuery Promise.
          */
         getProviderData: function (providerId) {
@@ -119,6 +125,19 @@ var edx = edx || {};
                 dataType: 'json'
             }).retry({times: 5, timeout: 2000, statusCodes: [404]});
         },
+        /**
+         * Retrieve course data from LMS.
+         * @param  {string} courseId The courseId of the course.
+         * @return {object} JQuery Promise.
+         */
+        getCourseData: function (courseId) {
+            var courseDetailUrl = '/api/course_structure/v0/courses/%s/';
+            return $.ajax({
+                url: _.sprintf(courseDetailUrl, courseId),
+                type: 'GET',
+                dataType: 'json'
+            }).retry({times: 5, timeout: 2000, statusCodes: [404]});
+        },
 
         /**
          * Construct the template context from data received

lms/static/sass/views/_verification.scss

@@ -246,41 +246,45 @@
   }
   .report-receipt-provider {
     @extend %ui-window;
-        border-top:3px solid $credit-color-base !important;
-        p {
-          padding: 0 $baseline $baseline/2 $baseline;
-          overflow: auto;
-        }
-        .bold_param {
-          padding: $baseline*.75 $baseline 0 $baseline;
+    border-top: 3px solid $credit-color-base;
+
+    .provider-wrapper {
+      width: 70%;
+      @include float(left);
+      padding-left: $baseline;
+
+      .provider-info {
+        padding: $baseline $baseline $baseline 0;
         font-weight: 600;
       }
-        .bold_param span {
-          @include float(right);
+      .provider-more-info {
       }
-        div {
-          padding: 10px 20px;
-          margin: 0 0 15px;
-          overflow: auto;
+      .provider-instructions {
       }
-        div span {
-          @include float(right);
-          padding: 0;
-          margin: 0;
     }
-        .complete-course {
-          @extend %btn-pl-primary-base;
+
+    .provider-buttons-logos {
+      width: 30%;
       @include float(right);
+      @include text-align(center);
 
-          &.archived {
-            @extend %btn-pl-default-base;
+      .provider-logo {
+        padding: $baseline;
       }
+      .provider-logo image {
+        width: 100px;
+      }
+
+      .complete-order {
+        @include text-align(center);
+        padding: $baseline;
+      }
+      .complete-order button {
+        @extend %btn-pl-primary-base;
+        white-space: nowrap;
       }
-        .custom_instructions div {
-          @include float(left);
     }
   }
-
   // ====================
 
   // UI: help

lms/templates/commerce/provider.underscore

-<p class="bold_param">
+<div class="provider-wrapper">
+  <div class="provider-info">
     <%= interpolate(gettext("You still need to visit %s to complete the credit process."), [display_name]) %>
-  <span><%= interpolate("<img src='%s' alt='%s'></image>", ["", display_name]) %></span>
-</p>
-<p>
+  </div>
+  <div class="provider-more-info">
     <%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %>
-</p>
-<div class="custom_instructions">
-  <div>
+  </div>
+  <div class="provider-instructions">
     <%= fulfillment_instructions %>
+  </div>
+</div>
+
+<div class="provider-buttons-logos">
+  <div class="provider-logo">
+    <%= interpolate("<img src='%s' alt='%s'></image>", ["", display_name]) %>
+  </div>
+  <div class="complete-order">
     <%= interpolate('<button data-provider="%s" data-course-key="%s" data-username="%s" class="complete-course" onClick=completeOrder(this)>%s</button>', [provider_id, course_key, username, gettext( "Complete Order")]) %>
   </div>
 </div>

lms/templates/commerce/receipt.underscore

 <div class="wrapper-content-main payment-confirmation-step">
   <article class="content-main">
     <h3 class="title">
-      <%= gettext( "Thank you! We have received your payment." ) %>
+      <%= interpolate(gettext( "Thank you! We have received your payment for %s"), ["<span class='course_name_placeholder'></span>"]) %>
     </h3>
 
     <% if ( receipt ) { %>