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

Merge pull request #15711 from edx/aj/LEARNER-1899

Browse Source 
Added Program Purchase button to Programs dashboard with optional Program Completion
This commit is contained in:
McKenzie Welter
2017-08-10 14:32:37 -04:00
committed by GitHub
parent 4e183b41c6 de6d48a698
commit bf955d451b
8 changed files with 142 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lms/static/js/learner_dashboard/views/program_details_view.js
View File

@@ -32,6 +32,7 @@
initialize: function(options) {
this.options = options;
this.programModel = new Backbone.Model(this.options.programData);
this.courseData = new Backbone.Model(this.options.courseData);
this.certificateCollection = new Backbone.Collection(this.options.certificateData);
@@ -60,7 +61,8 @@
totalCount: totalCount,
inProgressCount: inProgressCount,
remainingCount: remainingCount,
completedCount: completedCount
completedCount: completedCount,
completeProgramURL: this.options.urls.buy_button_url
};
data = $.extend(data, this.programModel.toJSON());
HtmlUtils.setHtml(this.$el, this.tpl(data));

48
lms/static/js/spec/learner_dashboard/program_details_view_spec.js
View File

@@ -52,6 +52,14 @@ define([
marketing_url: 'someurl',
status: 'active',
credit_redemption_overview: '',
discount_data: {
currency: 'USD',
discount_value: 0,
is_discounted: false,
total_incl_tax: 300,
total_incl_tax_excl_discounts: 300
},
full_program_price: 300,
card_image_url: 'some image',
faq: [],
price_ranges: [
@@ -117,7 +125,8 @@ define([
credit_backing_organizations: [],
weeks_to_complete_min: 8,
weeks_to_complete_max: 8,
min_hours_effort_per_week: null
min_hours_effort_per_week: null,
is_learner_eligible_for_one_click_purchase: false
},
courseData: {
completed: [
@@ -549,7 +558,42 @@ define([
view.render();
expect($(view.$('.upgrade-message .card-msg')).text().trim()).toEqual('Certificate Status:');
expect($(view.$('.upgrade-message .price')).text().trim()).toEqual('$10.00');
expect($(view.$('.upgrade-button')[0]).text().trim()).toEqual('Buy Certificate');
expect($(view.$('.upgrade-button.single-course-run')[0]).text().trim()).toEqual('Upgrade to Verified');
});
it('should render full program purchase link', function() {
view = initView({
programData: $.extend({}, options.programData, {
is_learner_eligible_for_one_click_purchase: true
})
});
view.render();
expect($(view.$('.upgrade-button.complete-program')).text().trim().
replace(/\s+/g, ' ')).
toEqual(
'Upgrade All Remaining Courses ( $300 USD )'
);
});
it('should render partial program purchase link', function() {
view = initView({
programData: $.extend({}, options.programData, {
is_learner_eligible_for_one_click_purchase: true,
discount_data: {
currency: 'USD',
discount_value: 30,
is_discounted: true,
total_incl_tax: 300,
total_incl_tax_excl_discounts: 270
}
})
});
view.render();
expect($(view.$('.upgrade-button.complete-program')).text().trim().
replace(/\s+/g, ' ')).
toEqual(
'Upgrade All Remaining Courses ( $270 $300 USD )'
);
});
it('should render enrollment information', function() {

50
lms/static/sass/views/_program-details.scss
View File

@@ -285,8 +285,10 @@
}
.program-heading {
width: 100%;
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
.program-heading-title {
font-family: "Open Sans";
@@ -300,6 +302,7 @@
.program-heading-message {
font-weight: 300;
}
}
.course-enroll-view {
@@ -387,7 +390,34 @@
padding: 0;
}
}
.upgrade-button {
background: palette(success, text);
border-color: palette(success, text);
border-radius: 0;
padding: 7px;
text-align: center;
font-size: 0.9375em;
/* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@include float(right);
}
&.complete-program {
margin: 10px 15px 10px 5px;
align-self: flex-start;
@media(min-width: $bp-screen-md) {
align-self: flex-end;
}
.list-price {
text-decoration: line-through;
}
}
}
.program-course-card {
width: 100%;
padding: 15px;
@@ -462,22 +492,6 @@
.upgrade-message {
flex-wrap: wrap;
.upgrade-button {
background: palette(success, text);
border-color: palette(success, text);
height: 37px;
width: 128px;
border-radius: 0;
padding: 7px 0 0 0;
text-align: center;
font-size: 0.9375em;
/* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@include float(right);
}
}
.action {
width: 100%;
margin: 5px 0;