diff --git a/lms/static/js/commerce/views/receipt_view.js b/lms/static/js/commerce/views/receipt_view.js index 4dfd5728f8..2c0d9cad94 100644 --- a/lms/static/js/commerce/views/receipt_view.js +++ b/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 diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 49c434cd70..da59fac628 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -245,42 +245,46 @@ } } .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; - font-weight: 600; - } - .bold_param span { - @include float(right); - } - div { - padding: 10px 20px; - margin: 0 0 15px; - overflow: auto; - } - div span { - @include float(right); - padding: 0; - margin: 0; - } - .complete-course { - @extend %btn-pl-primary-base; - @include float(right); + @extend %ui-window; + border-top: 3px solid $credit-color-base; - &.archived { - @extend %btn-pl-default-base; - } - } - .custom_instructions div { - @include float(left); - } + .provider-wrapper { + width: 70%; + @include float(left); + padding-left: $baseline; + + .provider-info { + padding: $baseline $baseline $baseline 0; + font-weight: 600; + } + .provider-more-info { + } + .provider-instructions { + } + } + + .provider-buttons-logos { + width: 30%; + @include float(right); + @include text-align(center); + + .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; + } + } + } // ==================== // UI: help diff --git a/lms/templates/commerce/provider.underscore b/lms/templates/commerce/provider.underscore index 5c8017e74d..ce4df2e362 100644 --- a/lms/templates/commerce/provider.underscore +++ b/lms/templates/commerce/provider.underscore @@ -1,13 +1,20 @@ -

- <%= interpolate(gettext("You still need to visit %s to complete the credit process."), [display_name]) %> - <%= interpolate("%s", ["", display_name]) %> -

-

- <%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %> -

-
-
+
+
+ <%= interpolate(gettext("You still need to visit %s to complete the credit process."), [display_name]) %> +
+
+ <%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %> +
+
<%= fulfillment_instructions %> - <%= interpolate('', [provider_id, course_key, username, gettext( "Complete Order")]) %> +
+
+ +
+ +
+ <%= interpolate('', [provider_id, course_key, username, gettext( "Complete Order")]) %>
diff --git a/lms/templates/commerce/receipt.underscore b/lms/templates/commerce/receipt.underscore index a660efc9d0..fdc186f1b7 100644 --- a/lms/templates/commerce/receipt.underscore +++ b/lms/templates/commerce/receipt.underscore @@ -1,7 +1,7 @@

- <%= gettext( "Thank you! We have received your payment." ) %> + <%= interpolate(gettext( "Thank you! We have received your payment for %s"), [""]) %>

<% if ( receipt ) { %>