Hide empty fields in coupon details view.

ecommerce/static/js/test/specs/views/coupon_detail_view_spec.js

@@ -33,6 +33,16 @@ define([
                 percentageDiscountCodeVoucher = Mock_Coupons.percentageDiscountCodeVoucher;
                 valueDiscountCodeVoucher = Mock_Coupons.valueDiscountCodeVoucher;
                 verifiedSeat = Mock_Coupons.verifiedSeat;
+
+                jasmine.addMatchers({      
+                    toExist: function () {
+                        return {
+                            compare: function (actual) {
+                                return { pass: $.contains(document.documentElement, $(actual)[0]) };
+                            }
+                        };
+                    }
+                });
             });
 
             it('should compare view.model with model sent', function () {
@@ -181,8 +191,8 @@ define([
                 expect(view.$('.invoice-payment-date .value').text()).toEqual(
                     view.formatDateTime(model.get('invoice_payment_date'))
                 );
-                expect(SpecUtils.visibleElement(view, '.invoice_discount_type', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoice_discount_value', '.info-item')).toBe(false);
+                expect(view.$('.invoice_discount_type')).not.toExist();
+                expect(view.$('.invoice_discount_value')).not.toExist();
             });
 
             it('should render postpaid invoice data.', function() {
@@ -192,25 +202,24 @@ define([
                     'invoice_discount_value': 50,
                 });
                 view.render();
-                expect(view.$('.invoice-discount-type .value').text()).toEqual(model.get('invoice_discount_type'));
                 expect(view.$('.invoice-discount-value .value').text()).toEqual(
                     view.invoiceDiscountValue(
                         model.get('invoice_discount_type'),
                         model.get('invoice_discount_value')
                     )
                 );
-                expect(SpecUtils.visibleElement(view, '.invoice-number', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoiced-amount', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoice-payment-date', '.info-item')).toBe(false);
+                expect(view.$('.invoice-number')).not.toExist();
+                expect(view.$('.invoiced-amount')).not.toExist();
+                expect(view.$('.invoice-payment-date')).not.toExist();
             });
 
             it('should render not-applicable invoice data.', function() {
                 view.model.set('invoice_type', 'Not-Applicable');
                 view.render();
-                expect(SpecUtils.visibleElement(view, '.invoice_discount_type', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoice-number', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoiced-amount', '.info-item')).toBe(false);
-                expect(SpecUtils.visibleElement(view, '.invoice-payment-date', '.info-item')).toBe(false);
+                expect(view.$('.invoice_discount_type')).not.toExist();
+                expect(view.$('.invoice-number')).not.toExist();
+                expect(view.$('.invoiced-amount')).not.toExist();
+                expect(view.$('.invoice-payment-date')).not.toExist();
             });
 
             it('should display tax deducted source input field.', function() {
@@ -220,7 +229,7 @@ define([
 
                 view.model.set('tax_deduction', 'No');
                 view.render();
-                expect(SpecUtils.visibleElement(view, '.tax-deducted-source-value', '.info-item')).toBe(false);
+                expect(view.$('.tax-deducted-source-value')).not.toExist();
             });
 
             it('should download voucher report in the new tab', function () {

ecommerce/static/js/views/coupon_detail_view.js

@@ -67,7 +67,6 @@ define([
                 if (invoice_payment_date) {
                     invoice_payment_date = this.formatDateTime(invoice_payment_date);
                 }
-
                 return {
                     'invoice_type': this.model.get('invoice_type'),
                     'invoice_number': this.model.get('invoice_number'),
@@ -81,7 +80,7 @@ define([
 
             formatSeatTypes: function() {
                 var courseSeatTypes = this.model.get('course_seat_types');
-                if (courseSeatTypes) {
+                if (courseSeatTypes && courseSeatTypes[0] !== '[]') {
                     if(courseSeatTypes.length === 1){
                         return courseSeatTypes[0];
                     } else {
@@ -108,7 +107,12 @@ define([
                 var html,
                     category = this.model.get('categories')[0].name,
                     invoice_data = this.formatInvoiceData(),
-                    template_data;
+                    template_data,
+                    price = null;
+
+                if (this.model.get('price') !== '0.00') {
+                    price = _s.sprintf('$%s', this.model.get('price'));
+                }
 
                 template_data = {
                     category: category,
@@ -117,7 +121,7 @@ define([
                     discountValue: this.discountValue(),
                     endDateTime: this.formatDateTime(this.model.get('end_date')),
                     lastEdited: this.formatLastEditedData(this.model.get('last_edited')),
-                    price: _s.sprintf('$%s', this.model.get('price')),
+                    price: price,
                     startDateTime: this.formatDateTime(this.model.get('start_date')),
                     usage: this.usageLimitation()
                 };
@@ -127,7 +131,6 @@ define([
 
                 this.$el.html(html);
                 this.renderCourseData();
-                this.renderInvoiceData();
                 this.delegateEvents();
 
                 this.dynamic_catalog_view = new DynamicCatalogView({
@@ -149,60 +152,10 @@ define([
                             this.model.get('course_id'),
                             this.model.get('seat_type'))
                     );
-
-                    this.$('.catalog-query').addClass('hidden');
-                    this.$('.seat-types').addClass('hidden');
-                    this.$('.course-info').removeClass('hidden');
-                } else if (this.model.get('catalog_type') === 'Multiple courses') {
-                    this.$('.course-info').addClass('hidden');
-                    this.$('.catalog-query').removeClass('hidden');
-                    this.$('.seat-types').removeClass('hidden');
                 }
                 return this;
             },
 
-            renderInvoiceData: function() {
-                var invoice_type = this.model.get('invoice_type'),
-                    tax_deducted = this.model.get('tax_deduction'),
-                    prepaid_fields = [
-                        '.invoice-number',
-                        '.invoiced-amount',
-                        '.invoice-payment-date'
-                    ],
-                    postpaid_fields = [
-                        '.invoice-discount-type',
-                        '.invoice-discount-value'
-                    ];
-                if (tax_deducted === 'Yes') {
-                    this.$('.tax-deducted-source-value').removeClass('hidden');
-                } else if (tax_deducted === 'No') {
-                    this.$('.tax-deducted-source-value').addClass('hidden');
-                }
-
-                if (invoice_type === 'Prepaid') {
-                    _.each(prepaid_fields, function(field) {
-                        this.$(field).removeClass('hidden');
-                    }, this);
-                    _.each(postpaid_fields, function(field) {
-                        this.$(field).addClass('hidden');
-                    }, this);
-                } else if (invoice_type === 'Postpaid') {
-                    _.each(prepaid_fields, function(field) {
-                        this.$(field).addClass('hidden');
-                    }, this);
-                    _.each(postpaid_fields, function(field) {
-                        this.$(field).removeClass('hidden');
-                    }, this);
-                } else if (invoice_type === 'Not-Applicable') {
-                    _.each(prepaid_fields, function(field) {
-                        this.$(field).addClass('hidden');
-                    }, this);
-                    _.each(postpaid_fields, function(field) {
-                        this.$(field).addClass('hidden');
-                    }, this);
-                }
-            },
-
             downloadCouponReport: function (event) {
                 var url = _s.sprintf('/api/v2/coupons/coupon_reports/%d', this.model.id);
 

ecommerce/static/templates/coupon_detail.html

 <div class="container">
     <ol class="breadcrumb">
         <li><a href="/coupons/"><%= gettext('Coupons') %></a></li>
-        <li class="active"><%= coupon['title'] %></li>
+        <li class="active"><%= coupon.title %></li>
     </ol>
     <div class="page-header">
         <h1 class="hd-1 emphasized">
-            <span class="coupon-title"><%= coupon['title'] %></span>
+            <span class="coupon-title"><%= coupon.title %></span>
 
             <div class="pull-right">
-                <a class="btn btn-primary btn-small" href="/coupons/<%= coupon['id'] %>/edit/" id="CouponEdit">
+                <a class="btn btn-primary btn-small" href="/coupons/<%= coupon.id %>/edit/" id="CouponEdit">
                     <%= gettext('Edit Coupon') %>
                 </a>
             </div>
         </h1>
         <h3 class="hd-3">
-            <span class="coupon-type"><%= coupon['coupon_type'] %></span>
+            <span class="coupon-type"><%= coupon.coupon_type %></span>
         </h3>
     </div>
     <div class="coupon-information">
         <div class="heading"><%= gettext('Code Status:') %>
-            <span class="code-status value <% if(coupon['code_status'] == 'ACTIVE') { %>active <% } %>"><%= coupon['code_status'] %></span>
+            <span class="code-status value <% if(coupon.code_status == 'ACTIVE') { %>active <% } %>"><%= coupon.code_status %></span>
             <div class="pull-right">
                 <%= gettext('Last edit:') %>
                 <span><%= lastEdited %></span>
@@ -29,10 +29,12 @@
             <div class="heading"><%= gettext('Category') %></div>
             <div class="value"><%= category %></div><br />
         </div>
+        <% if(coupon.note) {%>
         <div class="info-item grid-item note">
             <div class="heading"><%= gettext('Note') %></div>
-            <div class="value"><%= coupon['note'] %></div><br />
+            <div class="value"><%= coupon.note %></div><br />
         </div>
+        <%}%>
         <div class="info-item grid-item discount-value">
             <div class="heading"><%= gettext('Discount Value:') %></div>
             <div class="value"><%= discountValue %></div>
@@ -40,10 +42,12 @@
         <div class="info-item grid-item course-info">
             <div class="heading"><%= gettext('Valid for courses:') %></div>
         </div>
+        <% if(coupon.catalog_query) {%>
         <div class="info-item grid-item catalog-query">
             <div class="heading"><%= gettext('Catalog Query:') %></div>
-            <div class="value"><%= coupon['catalog_query'] %></div>
+            <div class="value"><%= coupon.catalog_query %></div>
         </div>
+        <%}%>
         <div class="info-item grid-item date-info">
             <div class="start-date-info">
                 <div class="heading"><%= gettext('Valid from:') %></div>
@@ -54,54 +58,64 @@
                 <div class="value"><%= endDateTime %></div>
             </div>
         </div>
+        <% if(courseSeatType) {%>
         <div class="info-item grid-item seat-types">
             <div class="heading"><%= gettext('Seat Types:') %></div>
             <div class="value"><%= courseSeatType %></div>
             <div class="catalog_buttons"></div>
         </div>
+        <%}%>
         <div class="info-item grid-item usage-limitations">
             <div class="heading"><%= gettext('Usage Limitations:') %></div>
             <div class="value"><%= usage %></div>
         </div>
+        <% if(coupon.max_uses) {%>
         <div class="info-item grid-item max-uses">
             <div class="heading"><%= gettext('Maximum Uses:') %></div>
-            <div class="value"><%= coupon['max_uses'] %></div>
+            <div class="value"><%= coupon.max_uses %></div>
         </div>
+        <%}%>
         <div class="info-item grid-item codes">
             <div class="heading"><%= gettext('Download Voucher(s):') %></div>
-            <a href="/<%= coupon['id'] %>/" class="btn btn-primary btn-small pull-left voucher-report-button"><%= gettext('Download') %></a>
+            <a href="/<%= coupon.id %>/" class="btn btn-primary btn-small pull-left voucher-report-button"><%= gettext('Download') %></a>
         </div>
         <div class="info-item grid-item client-info">
             <div class="heading"><%= gettext('Client:') %></div>
-            <div class="value"><%= coupon['client'] %></div>
+            <div class="value"><%= coupon.client %></div>
         </div>
         <div class="info-item grid-item invoice-type">
             <div class="heading"><%= gettext('Invoice Type:') %></div>
             <div class="value"><%= invoice_type %></div>
         </div>
+        <% if(invoice_number) {%>
         <div class="info-item grid-item invoice-number">
             <div class="heading"><%= gettext('Invoice Number:') %></div>
             <div class="value"><%= invoice_number %></div>
         </div>
+        <%}%>
+        <% if(price) {%>
         <div class="info-item grid-item invoiced-amount">
             <div class="heading"><%= gettext('Invoiced Amount:') %></div>
             <div class="value"><%= price %></div>
         </div>
-        <div class="info-item grid-item invoice-discount-type">
-            <div class="heading"><%= gettext('Invoice Discount Type:') %></div>
-            <div class="value"><%= invoice_discount_type %></div>
-        </div>
+        <%}%>
+        <% if(invoice_discount_value) {%>
         <div class="info-item grid-item invoice-discount-value">
             <div class="heading"><%= gettext('Invoice Discount Value:') %></div>
             <div class="value"><%= invoice_discount_value %></div>
         </div>
+        <%}%>
+        <% if(invoice_payment_date) {%>
         <div class="info-item grid-item invoice-payment-date">
             <div class="heading"><%= gettext('Invoice Payment Date:') %></div>
             <div class="value"><%= invoice_payment_date %></div>
         </div>
+        <%}%>
+        <% if(tax_deducted_source_value) {%>
         <div class="info-item grid-item tax-deducted-source-value">
             <div class="heading"><%= gettext('Tax Deducted Source:') %></div>
             <div class="value"><%= tax_deducted_source_value %></div>
         </div>
+        <%}%>
     </div>
 </div>