Added quantity support for donations & fixed bugs (#3209)

Added watched properties and fixed totalling error

Added semantic validation

Added dynamic popup for ticket buyers

Added action to check for max/min price

Added quantitiy, min-max and bug fixes for donations
removed repeated code

Add error class validation

Fixed paid & free tickets bug
ESLint

Used for-of & removed redundant merge

Optimized donationsValidation property

Author: mrsaicharan1

app/components/forms/wizard/basic-details-step.js

@@ -269,6 +269,32 @@ export default Component.extend(FormMixin, EventWizardMixin, {
             }
           ]
         },
+        minPrice: {
+          identifier : 'min_price',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Minimum price for donation tickets required')
+            },
+            {
+              type   : 'integer[1..]',
+              prompt : this.l10n.t('Minimum price needs to be greater than zero')
+            }
+          ]
+        },
+        maxPrice: {
+          identifier : 'max_price',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Maximum price for donation tickets required')
+            },
+            {
+              type   : 'integer[1..]',
+              prompt : this.l10n.t('Maximum price needs to be greater than zero')
+            }
+          ]
+        },
         paypalEmail: {
           identifier : 'paypal_email',
           rules      : [

app/components/public/ticket-list.js

@@ -4,6 +4,7 @@ import FormMixin from 'open-event-frontend/mixins/form';
 import { inject as service } from '@ember/service';
 import { sumBy } from 'lodash-es';
 import { A } from '@ember/array';
+import { merge } from 'lodash-es';
 
 export default Component.extend(FormMixin, {
   store: service(),
@@ -15,8 +16,14 @@ export default Component.extend(FormMixin, {
       && !this.get('authManager.currentUser.isVerified');
   }),
 
-  shouldDisableOrderButton: computed('isUnverified', 'hasTicketsInOrder', function() {
-    return !this.hasTicketsInOrder;
+  shouldDisableOrderButton: computed('hasTicketsInOrder', 'isDonationPriceValid', function() {
+    let quantityDonation = sumBy(this.donationTickets.toArray(),
+      donationTicket => (donationTicket.orderQuantity || 0));
+    if (quantityDonation > 0) {
+      return !(this.hasTicketsInOrder && this.isDonationPriceValid);
+    } else {
+      return !this.hasTicketsInOrder;
+    }
   }),
 
   showTaxIncludedMessage: computed('taxInfo.isTaxIncludedInPrice', function() {
@@ -39,8 +46,20 @@ export default Component.extend(FormMixin, {
       ticket => (ticket.orderQuantity || 0)
     ) > 0;
   }),
+  donationTickets: computed.filterBy('data', 'type', 'donation'),
+
+  isDonationPriceValid: computed('[email protected]', '[email protected]', function() {
+    for (const donationTicket of this.donationTickets) {
+      if (donationTicket.orderQuantity > 0) {
+        if (donationTicket.price < donationTicket.minPrice || donationTicket.price > donationTicket.maxPrice) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }),
 
-  total: computed('[email protected]', '[email protected]', function() {
+  total: computed('tickets.@each.price', 'tickets.@each.orderQuantity', '[email protected]', function() {
     if (this.taxInfo !== null) {
       return sumBy(this.tickets.toArray(),
         ticket => (ticket.ticketPriceWithTax || 0) * (ticket.orderQuantity || 0)
@@ -176,14 +195,30 @@ export default Component.extend(FormMixin, {
       this.send('togglePromotionalCode', this.code);
     }
   },
+  donationTicketsValidation: computed('[email protected]', '[email protected]', '[email protected]', function() {
+    const validationRules = {};
+    for (let donationTicket of this.donationTickets) {
+      validationRules[donationTicket.id] =  {
+        identifier : donationTicket.id,
+        optional   : true,
+        rules      : [
+          {
+            type   : `integer[${donationTicket.minPrice}..${donationTicket.maxPrice}]`,
+            prompt : this.l10n.t(`Please enter a donation amount between ${donationTicket.minPrice} and ${donationTicket.maxPrice}`)
+          }
+        ]
+      };
+    }
+    return validationRules;
+  }),
   getValidationRules() {
-    return {
+    const validationRules = {
       inline : true,
       delay  : false,
       on     : 'blur',
       fields : {
         promotionalCode: {
-          identifier : 'promotional_code',
+          identifier : 'promotionalCode',
           rules      : [
             {
               type   : 'empty',
@@ -193,5 +228,7 @@ export default Component.extend(FormMixin, {
         }
       }
     };
+    validationRules.fields = merge(validationRules.fields, this.donationTicketsValidation);
+    return validationRules;
   }
 });

app/components/widgets/forms/ticket-input.js

@@ -1,9 +1,10 @@
 import Component from '@ember/component';
+import { gte } from '@ember/object/computed';
 
 export default Component.extend({
-  classNames: ['ui', 'celled', 'stackable', 'grid', 'ticket-row'],
-
-  actions: {
+  classNames  : ['ui', 'celled', 'stackable', 'grid', 'ticket-row'],
+  minMaxValid : gte('ticket.maxPrice', 'ticket.minPrice'),
+  actions     : {
     toggleSettings() {
       this.toggleProperty('isExpanded');
     }

app/models/ticket.js

@@ -21,7 +21,7 @@ export default ModelBase.extend({
   salesEndsAt          : attr('moment', { defaultValue: () => moment().add(10, 'days').startOf('day') }),
   minOrder             : attr('number', { defaultValue: 1 }),
   maxOrder             : attr('number', { defaultValue: 10 }),
-  minPrice             : attr('number'),
+  minPrice             : attr('number', { defaultValue: 1 }),
   maxPrice             : attr('number'),
   isFeeAbsorbed        : attr('boolean', { defaultValue: true }),
   position             : attr('number'),

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

@@ -16,6 +16,9 @@
             <td>
               <div class="ui small">
                 {{ticket.name}}
+                {{#if (eq ticket.type 'donation')}}
+                  {{ui-popup tagName="i" class="info icon" content=(concat "Donation value should be between " ticket.minPrice " " eventCurrency " and " ticket.maxPrice " " eventCurrency)}}
+                {{/if}}
               </div>
               {{#if ticket.isDescriptionVisible}}
                 <small class="ui gray-text tiny">{{ticket.description}}</small>
@@ -47,7 +50,13 @@
               </td>
             {{else}}
               <td id="{{ticket.id}}_price">
-                {{currency-symbol eventCurrency}} {{format-number ticket.price}}
+                {{#if (eq ticket.type 'donation') }}
+                  <div class="field">
+                    {{input type='number' name=ticket.id placeholder=(t 'Enter Donation') min=ticket.minPrice max=ticket.maxPrice value=ticket.price}}<br>
+                  </div>
+                {{else}}
+                  {{currency-symbol eventCurrency}} {{format-number ticket.price}}
+                {{/if}}
                 {{#if (and taxInfo (not-eq ticket.type 'free'))}}
                   {{#if showTaxIncludedMessage}}
                     <small class="ui gray-text small">
@@ -63,22 +72,6 @@
                   </div>
                 {{/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}}
-                {{#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>
-                {{/if}}
-              {{/if}}
             {{/if}}
             <td>
               <div class="field">

app/templates/components/widgets/forms/ticket-input.hbs

@@ -11,11 +11,11 @@
       </div>
     {{else if (eq ticket.type 'donation')}}
       <div class="two fields">
-        <div class="field">
-          {{input type='number' name='min_price' placeholder=(t 'Min') value=ticket.minOrder}}
+        <div class="field {{unless minMaxValid 'error'}}" >
+          {{input type='number' name='min_price' placeholder=(t 'Min') value=ticket.minPrice  min=1}}
         </div>
-        <div class="field">
-          {{input type='number' name='max_price' placeholder=(t 'Max') value=ticket.maxOrder}}
+        <div class="field {{unless minMaxValid 'error'}}" >
+          {{input type='number' name='max_price' placeholder=(t 'Max') value=ticket.maxPrice min=1}}
         </div>
       </div>
     {{else if (eq ticket.type 'free')}}
@@ -26,19 +26,11 @@
       </div>
     {{/if}}
   </div>
-  {{#if (eq ticket.type 'donation')}}
-    <div class="four wide column">
-      <span class="text muted ticket-input">
-        {{t 'This is a Donation Ticket'}}
-      </span>
-    </div>
-  {{else}}
-    <div class="four wide column">
-      <div class="field">
-        {{input type='number' name='ticket_quantity' placeholder=(t 'Quantity') value=ticket.maxOrder min=1}}
-      </div>
+  <div class="four wide column">
+    <div class="field">
+      {{input type='number' name='ticket_quantity' placeholder=(t 'Quantity') value=ticket.quantity min=1}}
     </div>
-  {{/if}}
+  </div>
   <div class="column {{unless device.isLargeMonitor 'less right padding'}}">
     <div class="field">
       <div class="ui icon buttons">