Program details front end for certificates

Part of ECOM-4224.

lms/static/js/learner_dashboard/models/course_card_model.js

@@ -33,18 +33,19 @@
             setActiveRunMode: function(runMode){
                 if (runMode){
                     this.set({
+                        certificate_url: runMode.certificate_url,
+                        course_image_url: runMode.course_image_url || '',
+                        course_key: runMode.course_key,
+                        course_url: runMode.course_url || '',
                         display_name: this.context.display_name,
-                        key: this.context.key,
-                        marketing_url: runMode.marketing_url || '',
-                        start_date: runMode.start_date,
                         end_date: runMode.end_date,
                         is_enrolled: runMode.is_enrolled,
                         is_enrollment_open: runMode.is_enrollment_open,
-                        course_key: runMode.course_key,
-                        course_url: runMode.course_url || '',
-                        course_image_url: runMode.course_image_url || '',
+                        key: this.context.key,
+                        marketing_url: runMode.marketing_url || '',
                         mode_slug: runMode.mode_slug,
-                        run_key: runMode.run_key
+                        run_key: runMode.run_key,
+                        start_date: runMode.start_date
                     });
                 }
             },

lms/static/js/learner_dashboard/views/certificate_status_view.js

@@ -0,0 +1,33 @@
+;(function (define) {
+    'use strict';
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'edx-ui-toolkit/js/utils/html-utils',
+            'text!../../../templates/learner_dashboard/certificate_status.underscore'
+           ],
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             HtmlUtils,
+             certificateStatusTpl
+         ) {
+            return Backbone.View.extend({
+                tpl: HtmlUtils.template(certificateStatusTpl),
+
+                initialize: function(options) {
+                    this.$el = options.$el;
+                    this.render();
+                },
+
+                render: function() {
+                    var data = this.model.toJSON();
+                    HtmlUtils.setHtml(this.$el, this.tpl(data));
+                }
+            });
+        }
+    );
+}).call(this, define || RequireJS.define);

lms/static/js/learner_dashboard/views/course_card_view.js

@@ -7,6 +7,7 @@
             'gettext',
             'edx-ui-toolkit/js/utils/html-utils',
             'js/learner_dashboard/models/course_enroll_model',
+            'js/learner_dashboard/views/certificate_status_view',
             'js/learner_dashboard/views/course_enroll_view',
             'text!../../../templates/learner_dashboard/course_card.underscore'
            ],
@@ -17,6 +18,7 @@
              gettext,
              HtmlUtils,
              EnrollModel,
+             CertificateStatusView,
              CourseEnrollView,
              pageTpl
          ) {
@@ -42,12 +44,24 @@
                 },
 
                 postRender: function(){
+                    var $certStatus = this.$('.certificate-status');
+
                     this.enrollView = new CourseEnrollView({
                         $parentEl: this.$('.course-actions'),
                         model: this.model,
                         urlModel: this.urlModel,
                         enrollModel: this.enrollModel
                     });
+
+                    if ( this.model.get('certificate_url') ) {
+                        this.certificateStatus = new CertificateStatusView({
+                            $el: $certStatus,
+                            model: this.model
+                        });
+                    } else {
+                        // Styles are applied to the element that show if it's empty
+                        $certStatus.remove();
+                    }
                 }
             });
         }