feat: show tax information on public ticket page (#3078)

* implement tax information on public page

* add tax inclusion message in component

* change template for tax inclusion message

* resolve taxInfo promise

* add conditions for include ticket price

* fix linting errors

Author: uds5501

app/components/public/ticket-list.js

@@ -19,6 +19,13 @@ export default Component.extend(FormMixin, {
     return !this.hasTicketsInOrder;
   }),
 
+  showTaxIncludedMessage: computed('taxInfo.isTaxIncludedInPrice', function() {
+    if (this.taxInfo !== null) {
+      return (this.taxInfo.isTaxIncludedInPrice);
+    }
+    return false;
+  }),
+
   accessCodeTickets : A(),
   discountedTickets : A(),
 
@@ -29,13 +36,18 @@ export default Component.extend(FormMixin, {
   }),
   hasTicketsInOrder: computed('[email protected]', function() {
     return sumBy(this.tickets.toArray(),
-      ticket => ticket.getWithDefault('orderQuantity', 0)
+      ticket => (ticket.orderQuantity || 0)
     ) > 0;
   }),
 
   total: computed('[email protected]', '[email protected]', function() {
+    if (this.taxInfo !== null) {
+      return sumBy(this.tickets.toArray(),
+        ticket => (ticket.ticketPriceWithTax || 0) * (ticket.orderQuantity || 0)
+      );
+    }
     return sumBy(this.tickets.toArray(),
-      ticket => (ticket.getWithDefault('price', 0) - ticket.getWithDefault('discount', 0)) * ticket.getWithDefault('orderQuantity', 0)
+      ticket => ((ticket.price || 0) - (ticket.discount || 0)) * (ticket.orderQuantity || 0)
     );
   }),
   actions: {
@@ -57,6 +69,15 @@ export default Component.extend(FormMixin, {
             this.tickets.removeObject(ticket);
           });
           this.discountedTickets.forEach(ticket => {
+            let taxRate = ticket.get('event.tax.rate');
+            let ticketPrice = ticket.get('price');
+            if (taxRate && !this.showTaxIncludedMessage) {
+              let ticketPriceWithTax = ticketPrice * (1 + taxRate / 100);
+              ticket.set('ticketPriceWithTax', ticketPriceWithTax);
+            } else if (taxRate && this.showTaxIncludedMessage) {
+              let includedTaxAmount = (taxRate * ticketPrice) / (100 + taxRate);
+              ticket.set('includedTaxAmount', includedTaxAmount);
+            }
             ticket.set('discount', 0);
           });
           this.accessCodeTickets.clear();
@@ -94,13 +115,17 @@ export default Component.extend(FormMixin, {
           let tickets = await discountCode.get('tickets');
           tickets.forEach(ticket => {
             let ticketPrice = ticket.get('price');
-            if (discountType === 'amount') {
-              ticket.set('discount', Math.min(ticketPrice, discountValue));
-              this.discountedTickets.addObject(ticket);
-            } else {
-              ticket.set('discount', ticketPrice * (discountValue / 100));
-              this.discountedTickets.addObject(ticket);
+            let taxRate = ticket.get('event.tax.rate');
+            let discount = discountType === 'amount' ? Math.min(ticketPrice, discountValue) : ticketPrice * (discountValue / 100);
+            ticket.set('discount', discount);
+            if (taxRate && !this.showTaxIncludedMessage) {
+              let ticketPriceWithTax = (ticketPrice - ticket.discount) * (1 + taxRate / 100);
+              ticket.set('ticketPriceWithTax', ticketPriceWithTax);
+            } else if (taxRate && this.showTaxIncludedMessage) {
+              let includedTaxAmount = (taxRate * (ticketPrice - discount)) / (100 + taxRate);
+              ticket.set('includedTaxAmount', includedTaxAmount);
             }
+            this.discountedTickets.addObject(ticket);
             this.set('invalidPromotionalCode', false);
           });
         } else {

app/controllers/public/index.js

@@ -113,13 +113,6 @@ export default Controller.extend({
         return;
       }
       let { order, event } = this.model;
-      let tax =  await event.get('tax');
-      if (tax) {
-        if (!tax.get('isTaxIncludedInPrice')) {
-          let taxedPrice  = (order.amount) * (tax.rate) / 100 + (order.amount);
-          order.set('amount', taxedPrice);
-        }
-      }
       order.tickets.forEach(ticket => {
         let numberOfAttendees = ticket.orderQuantity;
         while (numberOfAttendees--) {

app/models/ticket.js

@@ -46,5 +46,31 @@ export default ModelBase.extend({
 
   itemTotal: computed('price', 'quantity', function() {
     return this.price * this.quantity;
+  }),
+
+  /**
+   * This attribute computes total ticket price payable after inclusion
+   * of additional taxes on the base ticket price
+   */
+  ticketPriceWithTax: computed('event.tax.isTaxIncludedInPrice', 'event.tax.rate', function() {
+    let taxType = this.event.get('tax.isTaxIncludedInPrice');
+    if (!taxType) {
+      return ((1 + this.event.get('tax.rate') / 100) * this.price).toFixed(2);
+    }
+    return this.price;
+  }),
+
+  /**
+   * This attribute computes value added tax amount in the cases
+   * when tax amount is included in ticket price, otherwise return
+   * 0
+   */
+  includedTaxAmount: computed('event.tax.isTaxIncludedInPrice', 'event.tax.rate', function() {
+    const taxType = this.event.get('tax.isTaxIncludedInPrice');
+    if (taxType) {
+      const taxRate = this.event.get('tax.rate');
+      return ((taxRate * this.price) / (100 + taxRate)).toFixed(2);
+    }
+    return 0;
   })
 });

app/routes/public/index.js

@@ -57,9 +57,9 @@ export default Route.extend({
         'page[size]': 0
       }),
 
-      sponsors: await eventDetails.get('sponsors'),
-
-      order: this.store.createRecord('order', {
+      sponsors : await eventDetails.get('sponsors'),
+      tax      : await eventDetails.get('tax'),
+      order    : this.store.createRecord('order', {
         event   : eventDetails,
         user    : this.get('authManager.currentUser'),
         tickets : []

app/templates/components/public/ticket-list.hbs

@@ -4,7 +4,7 @@
       <tr>
         <th>{{t 'Type'}}</th>
         <th class="four wide">{{t 'Sales Ends'}}</th>
-        <th class="ui two wide">{{t 'Price'}}</th>
+        <th class="ui three wide">{{t 'Price'}}</th>
         <th class="one wide">{{t 'Quantity'}}</th>
         <th class="ui right aligned two wide">{{t 'Subtotal'}}</th>
       </tr>
@@ -22,22 +22,64 @@
               {{/if}}
             </td>
             <td>{{moment-format ticket.salesEndsAt 'ddd, DD MMMM YY, h:mm A'}}</td>
-            {{#if (eq ticket.type 'donation') }}
-              <div class="three wide column">
-                <td id="{{ticket.id}}_price">{{input type='number' value=ticket.price}}</td>
-              </div>
+            {{#if ticket.discount}}
+              <td>
+                <div id="{{ticket.id}}_price" class="strike text">
+                  {{currency-symbol eventCurrency}} {{format-number ticket.price}}
+                </div>
+                <div id="{{ticket.id}}_discount">
+                  {{currency-symbol eventCurrency}} {{format-number (sub ticket.price ticket.discount)}}
+                  {{#if taxInfo}}
+                    {{#if showTaxIncludedMessage}}
+                      <small class="ui gray-text small">
+                        {{t 'includes'}} {{currency-symbol eventCurrency}} {{format-number ticket.includedTaxAmount}}
+                      </small>
+                    {{else}}
+                      <small class="ui gray-text small">
+                        + {{currency-symbol eventCurrency}} {{format-number (add (sub ticket.ticketPriceWithTax ticket.price) ticket.discount)}}
+                      </small>
+                    {{/if}}
+                    <div>
+                      <small class="ui gray-text tiny aligned right">({{taxInfo.name}})</small>
+                    </div>
+                  {{/if}}
+                </div>
+              </td>
             {{else}}
-              {{#if ticket.discount}}
-                <td>
-                  <div id="{{ticket.id}}_price" class="strike text">
-                    {{currency-symbol eventCurrency}} {{format-number ticket.price}}
-                  </div>
-                  <div id="{{ticket.id}}_discount">
-                    {{currency-symbol eventCurrency}} {{format-number (sub ticket.price ticket.discount)}}
+              <td id="{{ticket.id}}_price">
+                {{currency-symbol eventCurrency}} {{format-number ticket.price}}
+                {{#if (and taxInfo (not-eq ticket.type 'free'))}}
+                  {{#if showTaxIncludedMessage}}
+                    <small class="ui gray-text small">
+                      {{t 'includes'}} {{currency-symbol eventCurrency}} {{format-number ticket.includedTaxAmount}}
+                    </small>
+                  {{else}}
+                    <small class="ui gray-text small">
+                      + {{currency-symbol eventCurrency}} {{format-number (sub ticket.ticketPriceWithTax ticket.price)}}
+                    </small>
+                  {{/if}}
+                  <div>
+                    <small class="ui gray-text tiny aligned right">({{taxInfo.name}})</small>
                   </div>
-                </td>
+                {{/if}}
+              </td>
+              {{#if (eq ticket.type 'donation') }}
+                <div class="three wide column">
+                  <td id="{{ticket.id}}_price">{{input type='number' value=ticket.price}}</td>
+                </div>
               {{else}}
-                <td id="{{ticket.id}}_price">{{currency-symbol eventCurrency}} {{format-number ticket.price}}</td>
+                {{#if ticket.discount}}
+                  <td>
+                    <div id="{{ticket.id}}_price" class="strike text">
+                      {{currency-symbol eventCurrency}} {{format-number ticket.price}}
+                    </div>
+                    <div id="{{ticket.id}}_discount">
+                      {{currency-symbol eventCurrency}} {{format-number (sub ticket.price ticket.discount)}}
+                    </div>
+                  </td>
+                {{else}}
+                  <td id="{{ticket.id}}_price">{{currency-symbol eventCurrency}} {{format-number ticket.price}}</td>
+                {{/if}}
               {{/if}}
             {{/if}}
             <td>
@@ -56,7 +98,11 @@
               </div>
             </td>
             <td id='{{ticket.id}}_subtotal' class="ui right aligned">
-              {{currency-symbol eventCurrency}} {{format-number (mult (sub ticket.price ticket.discount) ticket.orderQuantity)}}
+              {{#if taxInfo}}
+                {{currency-symbol eventCurrency}} {{format-number (mult ticket.ticketPriceWithTax ticket.orderQuantity)}}
+              {{else}}
+                {{currency-symbol eventCurrency}} {{format-number (mult (sub ticket.price ticket.discount) ticket.orderQuantity)}}
+              {{/if}}
             </td>
           </tr>
         {{/unless}}

app/templates/public/index.hbs

@@ -20,6 +20,7 @@
                                  order=model.order
                                  attendees=model.attendees
                                  code=code
+                                 taxInfo=model.tax
                                  currentEventIdentifier=model.event.identifier
                                  createNewUserViaEmail=(action 'createNewUserViaEmail')
                                  loginExistingUser=(action 'loginExistingUser')

tests/integration/components/public/ticket-list-test.js

@@ -5,6 +5,7 @@ import { setupIntegrationTest } from 'open-event-frontend/tests/helpers/setup-in
 import hbs from 'htmlbars-inline-precompile';
 import { render } from '@ember/test-helpers';
 
+
 module('Integration | Component | public/ticket list', function(hooks) {
   setupIntegrationTest(hooks);
 
@@ -50,10 +51,16 @@ module('Integration | Component | public/ticket list', function(hooks) {
       })
     ]
   );
+  const eventTax = EmberObject.create({
+    name                 : 'Sample Tax',
+    rate                 : 20,
+    isTaxIncludedInPrice : true
+  });
   test('it renders', async function(assert) {
     this.set('data', tickets);
+    this.set('taxInfo', eventTax);
     this.actions.placeOrder = function() { };
-    await render(hbs `{{public/ticket-list data=data placeOrder=(action 'placeOrder') eventCurrency='USD'}}`);
+    await render(hbs `{{public/ticket-list data=data placeOrder=(action 'placeOrder') eventCurrency='USD' taxInfo=taxInfo}}`);
     assert.ok(this.element.innerHTML.trim().includes('Standard Ticket'));
   });
 });