Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ECOM-1816: added the provider detail on the receipt page.

Browse Source
This commit is contained in:
aamir-khan
2015-07-10 01:19:35 +05:00
committed by Awais
parent ba06ab1939
commit d5dda6470e
9 changed files with 344 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lms/djangoapps/commerce/views.py
View File

@@ -66,5 +66,6 @@ def checkout_receipt(request):
'error_text': error_text,
'for_help_text': for_help_text,
'payment_support_email': payment_support_email,
'username': request.user.username
}
return render_to_response('commerce/checkout_receipt.html', context)

120
lms/static/js/commerce/views/receipt_view.js
View File

@@ -13,7 +13,7 @@ var edx = edx || {};
initialize: function () {
this.useEcommerceApi = !!($.url('?basket_id'));
_.bindAll(this, 'renderReceipt', 'renderError');
_.bindAll(this, 'renderReceipt', 'renderError', 'getProviderData', 'renderProvider');
/* Mix non-conflicting functions from underscore.string (all but include, contains, and reverse) into
* the Underscore namespace.
@@ -28,17 +28,31 @@ var edx = edx || {};
context = {
platformName: this.$el.data('platform-name'),
verified: this.$el.data('verified').toLowerCase() === 'true'
};
},
providerId;
// Add the receipt info to the template context
this.course_key = this.getOrderCourseKey(data)
this.username = this.$el.data('username');
_.extend(context, {
receipt: this.receiptContext(data),
courseKey: this.getOrderCourseKey(data)
courseKey: this.course_key
});
this.$el.html(_.template(templateHtml, context));
this.trackLinks();
providerId = this.getCreditProviderId(data);
if (providerId) {
this.getProviderData(providerId).then(this.renderProvider, this.renderError)
}
},
renderProvider: function (context) {
var templateHtml = $("#provider-tpl").html(),
providerDiv = this.$el.find("#receipt-provider");
context.course_key = this.course_key;
context.username = this.username;
providerDiv.html(_.template(templateHtml, context)).removeClass('hidden');
},
renderError: function () {
@@ -80,7 +94,7 @@ var edx = edx || {};
/**
* Retrieve receipt data from Oscar (via LMS).
* @param {int} basketId The basket that was purchased.
* @return {object} JQuery Promise.
* @return {object} JQuery Promise.
*/
getReceiptData: function (basketId) {
var urlFormat = this.useEcommerceApi ? '/api/commerce/v0/baskets/%s/order/' : '/shoppingcart/receipt/%s/';
@@ -91,13 +105,27 @@ var edx = edx || {};
dataType: 'json'
}).retry({times: 5, timeout: 2000, statusCodes: [404]});
},
/**
* Retrieve credit provider data from LMS.
* @param {string} provider_id The provider_id of the credit provider.
* @return {object} JQuery Promise.
*/
getProviderData: function (providerId) {
var providerUrl = '/api/credit/v1/providers/%s/';
return $.ajax({
url: _.sprintf(providerUrl, providerId),
type: 'GET',
dataType: 'json'
}).retry({times: 5, timeout: 2000, statusCodes: [404]});
},
/**
* Construct the template context from data received
* from the E-Commerce API.
*
* @param {object} order Receipt data received from the server
* @return {object} Receipt template context.
* @return {object} Receipt template context.
*/
receiptContext: function (order) {
var self = this,
@@ -172,13 +200,13 @@ var edx = edx || {};
length = order.lines.length;
for (var i = 0; i < length; i++) {
var line = order.lines[i],
attribute_values = _.filter(line.product.attribute_values, function (attribute) {
attributeValues = _.find(line.product.attribute_values, function (attribute) {
return attribute.name === 'course_key'
});
// This method assumes that all items in the order are related to a single course.
if (attribute_values.length > 0) {
return attribute_values[0]['value'];
if (attributeValues != undefined) {
return attributeValues['value'];
}
}
} else {
@@ -196,7 +224,30 @@ var edx = edx || {};
formatMoney: function (moneyStr) {
return Number(moneyStr).toFixed(2);
}
},
/**
* Check whether the payment is for the credit course or not.
*
* @param {object} order Receipt data received from the server
* @return {string} String of the provider_id or null.
*/
getCreditProviderId: function (order) {
var attributeValues,
line = order.lines[0];
if (this.useEcommerceApi) {
attributeValues = _.find(line.product.attribute_values, function (attribute) {
return attribute.name === 'credit_provider'
});
// This method assumes that all items in the order are related to a single course.
if (attributeValues != undefined) {
return attributeValues['value'];
}
}
return null;
},
});
new edx.commerce.ReceiptView({
@@ -204,3 +255,54 @@ var edx = edx || {};
});
})(jQuery, _, _.str, Backbone);
function completeOrder (event) {
var courseKey = $(event).data("course-key"),
username = $(event).data("username"),
providerId = $(event).data("provider"),
postData = {
'course_key': courseKey,
'username': username
},
errorContainer = $("#error-container");
analytics.track(
"edx.bi.credit.clicked_complete_credit",
{
category: "credit",
label: courseKey
}
);
$.ajax({
url: '/api/credit/v1/provider/' + providerId + '/request/',
type: 'POST',
headers: {
'X-CSRFToken': $.cookie('csrftoken')
},
data: JSON.stringify(postData) ,
context: this,
success: function(requestData){
var form = $('#complete-order-form');
$('input', form).remove();
form.attr( 'action', requestData.url );
form.attr( 'method', 'POST' );
_.each( requestData.parameters, function( value, key ) {
$('<input>').attr({
type: 'hidden',
name: key,
value: value
}).appendTo(form);
});
form.submit();
},
error: function(xhr){
errorContainer.removeClass("is-hidden");
errorContainer.removeClass("hidden");
}
});
}

36
lms/static/sass/views/_verification.scss
View File

@@ -244,6 +244,42 @@
}
}
}
.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);
&.archived {
@extend %btn-pl-default-base;
}
}
.custom_instructions div {
@include float(left);
}
}
// ====================

12
lms/templates/commerce/checkout_receipt.html
View File

@@ -12,6 +12,9 @@ from django.utils.translation import ugettext as _
<script type="text/template" id="receipt-tpl">
<%static:include path="commerce/receipt.underscore" />
</script>
<script type="text/template" id="provider-tpl">
<%static:include path="commerce/provider.underscore" />
</script>
</%block>
<%block name="js_extra">
@@ -29,17 +32,18 @@ from django.utils.translation import ugettext as _
<div id="error" class="wrapper-msg wrapper-msg-activate">
<div class=" msg msg-activate">
<i class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<div class="msg-content">
<h3 class="title">
<span class="sr">${error_summary}</span>
${error_summary}
</h3>
%if error_text:
%if error_text:
<div class="copy">
<p>${error_text}</p>
<br/>
</div>
%endif
%endif
<div class="msg">
<p>${for_help_text}</p>
</div>
@@ -50,10 +54,12 @@ from django.utils.translation import ugettext as _
<div class="container">
<section class="wrapper carousel">
<div id="receipt-container" class="pay-and-verify hidden" data-is-payment-complete='${is_payment_complete}' data-platform-name='${platform_name}' data-verified='${verified}'>
<div id="receipt-container" class="pay-and-verify hidden" data-is-payment-complete='${is_payment_complete}'
data-platform-name='${platform_name}' data-verified='${verified}' data-username='${username}'>
<h1>${_("Loading Order Data...")}</h1>
<span>${ _("Please wait while we retrieve your order details.") }</span>
</div>
<form id="complete-order-form"></form>
</section>
</div>
</%block>

13
lms/templates/commerce/provider.underscore Normal file
View File

@@ -0,0 +1,13 @@
<p class="bold_param">
<%= 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>
<%= interpolate(gettext("In order to learn credit, %s requires learner to:"), [display_name]) %>
</p>
<div class="custom_instructions">
<div>
<%= 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>

3
lms/templates/commerce/receipt.underscore
View File

@@ -73,6 +73,9 @@
</p>
</div>
<% } %>
<div class="report report-receipt report-receipt-provider hidden" id="receipt-provider"></div>
</div>
</div>
<% } else { %>