Commit 459ccae0 by aamir-khan Committed by zubair-arbi

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

parent 601f1602
...@@ -13,7 +13,7 @@ var edx = edx || {}; ...@@ -13,7 +13,7 @@ var edx = edx || {};
initialize: function () { initialize: function () {
this.useEcommerceApi = !!($.url('?basket_id')); 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 /* Mix non-conflicting functions from underscore.string (all but include, contains, and reverse) into
* the Underscore namespace. * the Underscore namespace.
...@@ -32,7 +32,7 @@ var edx = edx || {}; ...@@ -32,7 +32,7 @@ var edx = edx || {};
providerId; providerId;
// Add the receipt info to the template context // 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'); this.username = this.$el.data('username');
_.extend(context, { _.extend(context, {
receipt: this.receiptContext(data), receipt: this.receiptContext(data),
...@@ -42,15 +42,21 @@ var edx = edx || {}; ...@@ -42,15 +42,21 @@ var edx = edx || {};
this.$el.html(_.template(templateHtml, context)); this.$el.html(_.template(templateHtml, context));
this.trackLinks(); this.trackLinks();
this.getCourseData(this.courseKey).then(this.renderCourse, this.renderError)
providerId = this.getCreditProviderId(data); providerId = this.getCreditProviderId(data);
if (providerId) { if (providerId) {
this.getProviderData(providerId).then(this.renderProvider, this.renderError) this.getProviderData(providerId).then(this.renderProvider, this.renderError)
} }
}, },
renderCourse: function(course) {
$(".course_name_placeholder").text(course.name);
},
renderProvider: function (context) { renderProvider: function (context) {
var templateHtml = $("#provider-tpl").html(), var templateHtml = $("#provider-tpl").html(),
providerDiv = this.$el.find("#receipt-provider"); providerDiv = this.$el.find("#receipt-provider");
context.course_key = this.course_key; context.course_key = this.courseKey;
context.username = this.username; context.username = this.username;
providerDiv.html(_.template(templateHtml, context)).removeClass('hidden'); providerDiv.html(_.template(templateHtml, context)).removeClass('hidden');
}, },
...@@ -107,7 +113,7 @@ var edx = edx || {}; ...@@ -107,7 +113,7 @@ var edx = edx || {};
}, },
/** /**
* Retrieve credit provider data from LMS. * 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. * @return {object} JQuery Promise.
*/ */
getProviderData: function (providerId) { getProviderData: function (providerId) {
...@@ -119,6 +125,19 @@ var edx = edx || {}; ...@@ -119,6 +125,19 @@ var edx = edx || {};
dataType: 'json' dataType: 'json'
}).retry({times: 5, timeout: 2000, statusCodes: [404]}); }).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 * Construct the template context from data received
......
...@@ -245,42 +245,46 @@ ...@@ -245,42 +245,46 @@
} }
} }
.report-receipt-provider { .report-receipt-provider {
@extend %ui-window; @extend %ui-window;
border-top:3px solid $credit-color-base !important; border-top: 3px solid $credit-color-base;
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);
&.archived { .provider-wrapper {
@extend %btn-pl-default-base; width: 70%;
} @include float(left);
} padding-left: $baseline;
.custom_instructions div {
@include float(left); .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 // UI: help
......
<p class="bold_param"> <div class="provider-wrapper">
<%= interpolate(gettext("You still need to visit %s to complete the credit process."), [display_name]) %> <div class="provider-info">
<span><%= interpolate("<img src='%s' alt='%s'></image>", ["", display_name]) %></span> <%= interpolate(gettext("You still need to visit %s to complete the credit process."), [display_name]) %>
</p> </div>
<p> <div class="provider-more-info">
<%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %> <%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %>
</p> </div>
<div class="custom_instructions"> <div class="provider-instructions">
<div>
<%= fulfillment_instructions %> <%= fulfillment_instructions %>
<%= 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>
<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>
</div> </div>
<div class="wrapper-content-main payment-confirmation-step"> <div class="wrapper-content-main payment-confirmation-step">
<article class="content-main"> <article class="content-main">
<h3 class="title"> <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> </h3>
<% if ( receipt ) { %> <% if ( receipt ) { %>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment