Skip to content

E
ecommerce
Commit 1096ba34 by Clinton Blackburn
Options

Merge pull request #283 from edx/clintonb/credit-cleanup 

Credit Cleanup
parents f1e16b16 141293a6
Showing with 207 additions and 108 deletions
ecommerce/credit/views.py
......@@ -52,7 +52,7 @@ class Checkout(TemplateView):
'payment_processors': processors_dict,
'credit_seats': credit_seats,
'lms_url_root': settings.LMS_URL_ROOT,
'providers_ids': provider_ids,
'provider_ids': provider_ids,
'analytics_data': json.dumps({
'course': {
'courseId': course.id
......
ecommerce/static/js/collections/credit_eligibility_collection.js
define([
'backbone',
'underscore.string',
'models/credit_eligibility_model'
],
function (Backbone,
_s,
CreditEligibility) {
'use strict';
return Backbone.Collection.extend({
model: CreditEligibility,
/*jshint undef: false */
url: lmsRootUrl + '/api/credit/v1/eligibility/',
/*jshint undef: true */
setUrl: function (username, courseKey) {
this.url += '?username=' + username + '&course_key=' + courseKey;
/**
* Initializes the collection.
*
* @param {Object} options This Object MUST contain lmsRootUrl, username, and courseKey keys.
*/
initialize: function (options) {
this.lmsRootUrl = options.lmsRootUrl;
this.username = options.username;
this.courseKey = options.courseKey;
},
/**
* Returns the URL where eligibility data should be retrieved.
* @returns {String}
*/
url: function () {
var data = {
root: this.lmsRootUrl,
username: encodeURIComponent(this.username),
courseKey: encodeURIComponent(this.courseKey)
};
return _s.sprintf(
'%(root)s/api/credit/v1/eligibility/?username=%(username)s&course_key=%(courseKey)s',
data
);
}
}
);
}
);
ecommerce/static/js/collections/credit_provider_collection.js 0 → 100644
define([
'backbone',
'underscore.string',
'models/credit_provider_model'
],
function (Backbone,
_s,
CreditProvider) {
'use strict';
return Backbone.Collection.extend({
model: CreditProvider,
/**
* Initializes the collection.
*
* @param {Object} options This Object MUST contain lmsRootUrl and providerIds keys.
*/
initialize: function (options) {
this.lmsRootUrl = options.lmsRootUrl;
this.providerIds = options.providerIds;
},
/**
* Returns the URL where provider data should be retrieved.
* @returns {String}
*/
url: function () {
var data = {
root: this.lmsRootUrl,
providerIds: this.providerIds
};
return _s.sprintf('%(root)s/api/credit/v1/providers/?provider_ids=%(providerIds)s', data);
}
}
);
}
);
ecommerce/static/js/collections/provider_collection.js deleted 100644 → 0
define([
'backbone',
'js/models/provider_model'
],
function (Backbone, ProviderModel) {
'use strict';
return Backbone.Collection.extend({
model: ProviderModel,
/*jshint undef: false */
url: lmsRootUrl + '/api/credit/v1/providers/',
/*jshint undef: true */
setUrl: function (providerIds) {
this.url += '?provider_ids=' + providerIds;
}
}
);
}
);
ecommerce/static/js/models/provider_model.js → ecommerce/static/js/models/credit_provider_model.js
......@@ -4,10 +4,6 @@ define([
function (Backbone) {
'use strict';
// Stores our provider information
return Backbone.Model.extend({});
}
);
ecommerce/static/js/pages/credit_checkout.js
......@@ -4,13 +4,13 @@ require([
'models/user_model',
'models/tracking_model',
'models/course_model',
'collections/provider_collection',
'collections/credit_provider_collection',
'collections/credit_eligibility_collection',
'views/clickable_view',
'views/analytics_view',
'views/payment_button_view',
'utils/utils',
'views/provider_view',
'views/credit_provider_view',
'views/credit_eligibility_view'
],
function ($,
......@@ -18,27 +18,39 @@ require([
UserModel,
TrackingModel,
CourseModel,
ProviderCollection,
CreditProviderCollection,
CreditEligibilityCollection,
ClickableView,
AnalyticsView,
PaymentButtonView,
Utils,
ProviderView,
CreditProviderView,
CreditEligibilityView) {
'use strict';
var $container = $('.credit-checkout'),
$courseDetails = $container.find('#course-name'),
$providerDetails = $container.find('.provider-details'),
lmsRootUrl = $container.data('lms-root-url');
new PaymentButtonView({
el: $('#payment-buttons')
});
new ProviderView({
el: $('.provider-details'),
collection: new ProviderCollection()
new CreditProviderView({
el: $providerDetails,
collection: new CreditProviderCollection({
lmsRootUrl: lmsRootUrl,
providerIds: $providerDetails.data('provider-ids')
})
});
new CreditEligibilityView({
collection: new CreditEligibilityCollection()
collection: new CreditEligibilityCollection({
lmsRootUrl: lmsRootUrl,
username: $courseDetails.data('username'),
courseKey: $courseDetails.data('course_key')
})
});
var courseModel = new CourseModel(),
......
ecommerce/static/js/test/specs/collections/credit_eligibility_collection_spec.js 0 → 100644
define([
'collections/credit_eligibility_collection'
],
function (CreditEligibilityCollection) {
'use strict';
var collection,
lmsRootUrl = 'http://lms.local',
username = 'testuser',
courseKey = 'course-v1:LinuxFoundationX+LFS101x.2+1T2015';
beforeEach(function () {
collection = new CreditEligibilityCollection({
lmsRootUrl: lmsRootUrl,
username: username,
courseKey: courseKey
});
});
describe('CreditEligibilityCollection', function () {
describe('initialize', function () {
it('stores lmsRootUrl', function () {
expect(collection.lmsRootUrl).toEqual(lmsRootUrl);
});
it('stores username', function () {
expect(collection.username).toEqual(username);
});
it('stores courseKey', function () {
expect(collection.courseKey).toEqual(courseKey);
});
});
describe('url', function () {
it('returns a Credit API URL', function () {
var expected = lmsRootUrl + '/api/credit/v1/eligibility/?username=' +
username + '&course_key=' + encodeURIComponent(courseKey);
expect(collection.url()).toEqual(expected);
});
});
});
}
);
ecommerce/static/js/test/specs/collections/provider_collection_spec.js 0 → 100644
define([
'collections/credit_provider_collection'
],
function (CreditProviderCollection) {
'use strict';
var collection,
lmsRootUrl = 'http://lms.local',
providerIds = 'ASU,MIT';
beforeEach(function () {
collection = new CreditProviderCollection({lmsRootUrl: lmsRootUrl, providerIds: providerIds});
});
describe('CreditProviderCollection', function () {
describe('initialize', function () {
it('stores lmsRootUrl', function () {
expect(collection.lmsRootUrl).toEqual(lmsRootUrl);
});
it('stores providerIds', function () {
expect(collection.providerIds).toEqual(providerIds);
});
});
describe('url', function () {
it('returns a Credit API URL', function () {
var expected = lmsRootUrl + '/api/credit/v1/providers/?provider_ids=' + providerIds;
expect(collection.url()).toEqual(expected);
});
});
});
}
);
ecommerce/static/js/views/credit_eligibility_view.js
define([
'jquery',
'underscore',
'backbone'
'backbone',
'moment'
],
function ($, _, Backbone) {
function ($,
_,
Backbone,
moment) {
'use strict';
return Backbone.View.extend({
initialize: function () {
this.checkEligibility();
this.listenTo(this.collection, 'sync', this.render);
this.collection.fetch();
},
checkEligibility: function () {
var $courseDetails = $('#course-name'),
username = $courseDetails.data('username'),
courseKey = $courseDetails.data('course_key'),
self = this;
render: function () {
var deadline;
this.collection.setUrl(username, courseKey);
this.collection.fetch({
success: function (collection) {
self.renderEligibilityDate(collection);
},
error: function () {
self.toggleProviderContent(false);
}
}
);
},
renderEligibilityDate: function (collection) {
// For getting full month name, default lang is set to 'en-us',
// It will be translated in django template
var eligibilityData = collection.toJSON(),
deadline, formattedDate;
if (eligibilityData.length) {
deadline = new Date(eligibilityData[0].deadline);
// TODO Use moment.format(). See http://momentjs.com/docs/#/displaying/.
formattedDate = deadline.toLocaleString('en-us', {month: 'long'}) + ' ' + deadline.getDay() + ',' +
deadline.getFullYear();
$('.eligibility-details').find('.deadline-date').text(formattedDate);
if (this.collection.length) {
deadline = moment.utc(this.collection.at(0).get('deadline'));
$('.eligibility-details').find('.deadline-date').text(deadline.format('LL'));
this.toggleProviderContent(true);
} else {
this.toggleProviderContent(false);
......
ecommerce/static/js/views/provider_view.js → ecommerce/static/js/views/credit_provider_view.js
......@@ -2,41 +2,31 @@ define([
'jquery',
'underscore',
'backbone',
'text!templates/provider_details.html'
'text!templates/credit_provider_details.html'
],
function ($, _, Backbone, providerTemplate) {
function ($,
_,
Backbone,
creditProviderTemplate) {
'use strict';
return Backbone.View.extend({
template: _.template(creditProviderTemplate),
initialize: function () {
this.getProviders();
this.listenTo(this.collection, 'sync', this.render);
this.collection.fetch();
},
getProviders: function () {
var self = this;
render: function () {
var provider;
this.collection.setUrl(this.$el[0].dataset.providersIds);
this.collection.fetch({
success: function (collection) {
self.renderProviderDetail(collection);
},
error: function () {
self.toggleProviderContent(false);
}
}
);
},
renderProviderDetail: function (collection) {
var providerData = collection.toJSON(),
template;
if (providerData.length) {
if (this.collection.length) {
// Currently we are assuming that we are having only one provider
template = _.template(providerTemplate);
$('.title').find('.provider-name').text(providerData[0].display_name);
this.$el.html(template(providerData[0]));
provider = this.collection.at(0);
// TODO Get rid of this!
$('.title').find('.provider-name').text(provider.get('display_name'));
this.$el.html(this.template(provider.attributes));
this.toggleProviderContent(true);
} else {
this.toggleProviderContent(false);
......
ecommerce/static/sass/components/_buttons.scss
......@@ -5,3 +5,10 @@
// Disable Bootstrap default dotted outline
outline:inherit;
}
// Use the Pattern Library's decoration (border-bottom)
.btn-link {
&:focus, &:hover {
text-decoration: none;
}
}
ecommerce/static/sass/views/_credit.scss
......@@ -32,6 +32,7 @@
.show-instructions {
padding-left: initial;
margin-bottom: 5px;
}
}
......
ecommerce/static/templates/provider_details.html → ecommerce/static/templates/credit_provider_details.html
......@@ -2,13 +2,12 @@
<img alt="<%= display_name %>" class="img-responsive provider-image" src="<%= thumbnail_url %>">
</div>
<div class="col-sm-10">
<h3 class="title"><%= gettext('About Credit at ') %> <%= id %> </h3>
<h3 class="title"><%= interpolate(gettext('About Credit at %(provider)s'), {provider:id}, true) %></h3>
<p><%= gettext( description ) %></p>
<button class="btn btn-link show-instructions" data-toggle="collapse" data-target="#fulfillment-instructions"><%=
gettext( "How does credit works?" ) %>
<button class="btn-link show-instructions" data-toggle="collapse" data-target="#fulfillment-instructions">
<%= gettext( "How does credit work?" ) %>
</button>
<div class="collapse" id="fulfillment-instructions">
<h4 class="text-uppercase"><%= gettext('credit with ') %><%= display_name %> </h4>
<%= fulfillment_instructions %>
</div>
</div>
ecommerce/templates/edx/credit/checkout.html
......@@ -5,7 +5,7 @@
{% block title %}{% trans "Credit Checkout" %}{% endblock title %}
{% block content %}
<div class="container credit-checkout">
<div class="container credit-checkout" data-lms-root-url="{{ lms_url_root }}">
<div class="row center-block course-details">
<div class="col-sm-11">
<h3 class="title">
......@@ -28,7 +28,7 @@
{% trans "Something went wrong! Please try again later." %}
</div>
<div class="provider-panel hide">
<div data-providers-ids="{{ providers_ids }}" class="row center-block provider-details">
<div data-provider-ids="{{ provider_ids }}" class="row center-block provider-details">
{# data will be loaded with underscore template #}
</div>
......@@ -117,12 +117,7 @@
</div>
</div>
<form id="payment-processor-form">
</form>
<script>
var lmsRootUrl = "{{ lms_url_root }}";
</script>
<form id="payment-processor-form"></form>
{% if analytics_data %}
<script type="text/javascript">
......
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