diff --git a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js index 8ca0d06c58..7bb88f7955 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js @@ -57,6 +57,8 @@ describe('Program Progress View', () => { programRecordUrl: '/foo/bar', industryPathways: data.industryPathways, creditPathways: data.creditPathways, + programDiscussionEnabled: false + }); beforeEach(() => { @@ -153,6 +155,7 @@ describe('Program Progress View', () => { programRecordUrl: '/foo/bar', industryPathways: [], creditPathways: [], + programDiscussionEnabled: false }); expect(emptyView.$('.program-credit-pathways .divider-heading')).toHaveLength(0); diff --git a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js index e85d5a88ee..8a2de60ad6 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js @@ -493,6 +493,7 @@ describe('Program Details Header View', () => { destination_url: 'industry.com', }, ], + programDiscussionEnabled: false }; const data = options.programData; diff --git a/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js index 7c69b1e7ab..ff4a32427b 100644 --- a/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js +++ b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js @@ -29,6 +29,7 @@ class ProgramDetailsSidebarView extends Backbone.View { this.industryPathways = options.industryPathways; this.creditPathways = options.creditPathways; this.programModel = options.model; + this.programDiscussionEnabled = options.programDiscussionEnabled; this.render(); } @@ -39,6 +40,7 @@ class ProgramDetailsSidebarView extends Backbone.View { programRecordUrl: this.programRecordUrl, industryPathways: this.industryPathways, creditPathways: this.creditPathways, + programDiscussionEnabled: this.programDiscussionEnabled }); HtmlUtils.setHtml(this.$el, this.tpl(data)); diff --git a/lms/static/js/learner_dashboard/views/program_details_view.js b/lms/static/js/learner_dashboard/views/program_details_view.js index 5ff5d7456a..9164c31074 100644 --- a/lms/static/js/learner_dashboard/views/program_details_view.js +++ b/lms/static/js/learner_dashboard/views/program_details_view.js @@ -11,6 +11,7 @@ import HeaderView from './program_header_view'; import SidebarView from './program_details_sidebar_view'; import pageTpl from '../../../templates/learner_dashboard/program_details_view.underscore'; +import tabPageTpl from '../../../templates/learner_dashboard/program_details_tab_view.underscore'; import trackECommerceEvents from '../../commerce/track_ecommerce_events'; class ProgramDetailsView extends Backbone.View { @@ -26,7 +27,11 @@ class ProgramDetailsView extends Backbone.View { initialize(options) { this.options = options; - this.tpl = HtmlUtils.template(pageTpl); + if (this.options.programDiscussionEnabled) { + this.tpl = HtmlUtils.template(tabPageTpl); + } else { + this.tpl = HtmlUtils.template(pageTpl); + } this.programModel = new Backbone.Model(this.options.programData); this.courseData = new Backbone.Model(this.options.courseData); this.certificateCollection = new Backbone.Collection(this.options.certificateData); @@ -75,6 +80,8 @@ class ProgramDetailsView extends Backbone.View { completedCount, completeProgramURL: buyButtonUrl, programDiscussionEnabled: this.options.programDiscussionEnabled, + industryPathways : this.options.industryPathways, + creditPathways : this.options.creditPathways, }; data = $.extend(data, this.programModel.toJSON()); HtmlUtils.setHtml(this.$el, this.tpl(data)); @@ -124,6 +131,7 @@ class ProgramDetailsView extends Backbone.View { programRecordUrl: this.options.urls.program_record_url, industryPathways: this.options.industryPathways, creditPathways: this.options.creditPathways, + programDiscussionEnabled: this.options.programDiscussionEnabled, }); } diff --git a/lms/templates/learner_dashboard/program_details_sidebar.underscore b/lms/templates/learner_dashboard/program_details_sidebar.underscore index 262a034cd1..2c4dd9415c 100644 --- a/lms/templates/learner_dashboard/program_details_sidebar.underscore +++ b/lms/templates/learner_dashboard/program_details_sidebar.underscore @@ -21,6 +21,7 @@ <% } %> +<% if (!programDiscussionEnabled) { %> <% if (creditPathways.length > 0) { %> <% } %> +<% } %> diff --git a/lms/templates/learner_dashboard/program_details_tab_view.underscore b/lms/templates/learner_dashboard/program_details_tab_view.underscore new file mode 100644 index 0000000000..76a1c3e02c --- /dev/null +++ b/lms/templates/learner_dashboard/program_details_tab_view.underscore @@ -0,0 +1,165 @@ +
+ + +<% if (programDiscussionEnabled) { %> +
+ +
+
+
+
+
+ <% if (completedCount === totalCount) { %> +

<%- gettext('Congratulations!') %>

+
+
<%- interpolate(gettext( + 'You have successfully completed all the requirements for the %(title)s %(type)s.'), + { title: title, type: type }, true) %> +
+
+ <% } else { %> +

<%- gettext('Your Program Journey') %>

+
+
+ <%- interpolate(gettext( + 'Track and plan your progress through the %(count)s courses in this program.'), + { count: totalCount }, true) %> +
+
<%- gettext('To complete the program, you must earn a verified certificate for each course.') %>
+
+ <% } %> + <% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %> + + <%- gettext('Upgrade All Remaining Courses (')%> + <% if (discount_data.is_discounted) { %> + + <%- StringUtils.interpolate( + gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)} + ) + %> + + <% } %> + <%- StringUtils.interpolate( + gettext(' ${price} {currency} )'), + {price: full_program_price.toFixed(2), currency: discount_data.currency} + ) + %> + + <% } %> +
+
+ <% if (inProgressCount) { %> +
+

+ <%- gettext('COURSES IN PROGRESS') %> + <%- inProgressCount %> +

+
+
+ <% } %> + <% if (remainingCount) { %> +
+

+ <%- gettext('REMAINING COURSES') %> + <%- remainingCount %> +

+
+
+ <% } %> +
+

+ <%- gettext('COMPLETED COURSES') %> + <%- completedCount %> +

+ <% if (completedCount) { %> +
+ <% } else { %> +
+

<%- gettext("As you complete courses, you will see them listed here.") %>

+

<%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %>

+
+ <% } %> +
+
+
+ +
+ <% if (programDiscussionEnabled) { %> +
Community tab content
+ <% } %> +
Live tab content
+
+<% if (creditPathways.length > 0) { %> + +<% } %> + +<% if (industryPathways.length > 0) { %> + +<% } %> + Pathways tab content +
+
+<% } %> + + diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 304565b684..d4ea908435 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,31 +1,5 @@
- -<% if (programDiscussionEnabled) { %> -
- -
-
-
Journey tab content
-
Community tab content
-
Live tab content
-
Pathways tab content
-
-<% } %> -
<% if (completedCount === totalCount) { %> @@ -102,3 +76,4 @@
+