Credit Cleanup

- Corrected path to requirements
- Corrected styling
- Updated collections to use initializer and url methods for URL construction
- Removed global variable, lmsUrlRoot
- Updated views to make proper use of events and collections
- Updated names to avoid future conflict

ECOM-2119

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

+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

-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

+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

+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">