fix: Add order component for organizers

app/components/public/ticket-list.js

@@ -11,7 +11,18 @@ export default Component.extend(FormMixin, {
 
   promotionalCodeApplied: false,
 
-  orderAmount: null,
+  orderAmount    : null,
+  amountOverride : null,
+
+  overridenAmount: computed('orderAmount', 'amountOverride', {
+    get() {
+      return this.amountOverride ?? this.orderAmount?.total;
+    },
+
+    set(key, value) {
+      this.set('amountOverride', value);
+    }
+  }),
 
   isUnverified: computed('session.isAuthenticated', 'authManager.currentUser.isVerified', function() {
     return this.session.isAuthenticated
@@ -74,14 +85,18 @@ export default Component.extend(FormMixin, {
   }),
 
   orderAmountInput: computed('[email protected]', '[email protected]', 'order.discountCode', function() {
-    return {
+    const input = {
       tickets: this.order.tickets.toArray().map(ticket => ({
         id       : ticket.id,
         quantity : ticket.orderQuantity,
         price    : ticket.price
       })),
       'discount-code': this.order.get('discountCode.id')
     };
+    if (this.amountOverride) {
+      input.amount = this.amountOverride;
+    }
+    return input;
   }),
 
   actions: {
@@ -181,12 +196,14 @@ export default Component.extend(FormMixin, {
     async updateOrderAmount() {
       if (this.shouldDisableOrderButton) {
         this.set('orderAmount', null);
+        this.set('amountOverride', null);
         return;
       }
 
       try {
         this.set('orderAmount', await this.loader.post('/orders/calculate-amount', this.orderAmountInput));
         this.order.amount = this.orderAmount.total;
+        this.set('amountOverride', null);
       } catch (e) {
         console.error('Error while calculating order amount', e);
         this.notify.error(e.response.errors[0].detail, {

app/controllers/events/view/tickets/add-order.js

@@ -1,101 +1,36 @@
 import classic from 'ember-classic-decorator';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
-import { sumBy } from 'lodash-es';
 
 @classic
 export default class AddOrderController extends Controller {
-  @computed('[email protected]')
-  get hasTicketsInOrder() {
-    return sumBy(this.model.tickets.toArray(),
-      ticket => ticket.get('orderQuantity') ?? 0
-    ) > 0;
-  }
-
-  @computed('[email protected]')
-  get total() {
-    let sum = 0.0;
-    this.model.tickets.forEach(ticket => {
-      sum += ticket.get('orderQuantity') * ticket.get('price');
-    });
-    return sum;
-  }
-
-  columns = [
-    {
-      propertyName : 'name',
-      title        : 'Ticket Type'
-    },
-    {
-      propertyName : 'price',
-      title        : 'Price',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-price'
-    },
-    {
-      propertyName : 'quantity',
-      title        : 'Quantity',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-quantity'
-    },
-    {
-      propertyName : 'itemTotal',
-      title        : 'Item Total',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-total'
-    }
-  ];
 
   @action
-  updateOrder(ticket, count) {
-    const { order } = this.model;
-    ticket.set('orderQuantity', count);
-    order.set('amount', this.total);
-    if (!this.total) {
-      order.set('amount', 0);
-    }
-    if (count > 0) {
-      order.tickets.addObject(ticket);
-    } else {
-      if (order.tickets.includes(ticket)) {
-        order.tickets.removeObject(ticket);
-      }
+  async placeOrder(orderInput) {
+    if (orderInput) {
+      this.set('orderInput', orderInput);
     }
+    this.send('save');
   }
 
   @action
-  async placeOrder() {
-    this.set('isLoading', true);
-    const { order } = this.model;
-    const event = order.get('event');
-    order.tickets.forEach(ticket => {
-      let numberOfAttendees = ticket.orderQuantity;
-      while (numberOfAttendees--) {
-        this.model.attendees.addObject(this.store.createRecord('attendee', {
-          firstname : 'John',
-          lastname  : 'Doe',
-          email     : '[email protected]',
-          event,
-          ticket
-        }));
-      }
-    });
+  async save() {
     try {
-      const { order } = this.model;
-      const { attendees } = this.model;
-      await Promise.all((attendees ? attendees.toArray() : []).map(attendee => attendee.save()));
-      order.set('attendees', attendees.slice());
-      await order.save()
-        .then(order => {
-          this.notify.success(this.l10n.t('Order details saved. Please fill further details within 10 minutes.'));
-          this.transitionToRoute('orders.new', order.identifier);
-        })
-        .catch(async() => {
-          await Promise.all((attendees ? attendees.toArray() : []).map(attendee => attendee.destroyRecord()));
-          this.notify.error(this.l10n.t('Oops something went wrong. Please try again'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
+      this.set('isLoading', true);
+      const { orderInput } = this;
+      try {
+        const order = await this.loader.post('/orders/create-order', orderInput);
+        this.notify.success(this.l10n.t(`Order details saved. Please fill further details within ${this.settings.orderExpiryTime} minutes.`));
+        this.transitionToRoute('orders.new', order.data.attributes.identifier);
+      } catch (e) {
+        console.error('Error while saving order', e);
+        this.notify.error(e.response.errors[0].detail);
+      } finally {
+        this.set('isLoading', false);
+      }
     } catch (e) {
-      this.notify.error(this.l10n.t('Oops something went wrong. Please try again'));
+      console.error('Error while creating order', e);
+      this.notify.error(e);
     }
   }
 }

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

@@ -121,13 +121,20 @@
                     <td>{{currency-symbol this.eventCurrency}} {{this.orderAmount.tax.amount}}</td>
                   </tr>
                 {{/if}}
-                <tr><td>{{t 'Total'}}</td><td>{{currency-symbol this.eventCurrency}} {{format-money this.orderAmount.total}}</td></tr>
+                <tr><td>{{t 'Total'}}</td>
+                  {{#if this.amountEditable}}
+                    <td>{{currency-symbol this.eventCurrency}}</td> <td><Input @value={{this.overridenAmount}} placeholder="Total" /></td>
+                  {{else}}
+                    <td>{{currency-symbol this.eventCurrency}} {{format-money this.orderAmount.total}}</td>
+                  {{/if}}
+                </tr>
               </tbody>
             </table>
         </td>
       </tr>
     </tfoot>
   </table>
+  {{#unless this.amountEditable}}
   <div class="ui grid">
     {{#if this.enterPromotionalCode}}
       <div class="ui row">
@@ -165,6 +172,7 @@
       </div>
     {{/if}}
   </div>
+  {{/unless}}
   <div class="ui grid">
     <div class="ui row stackable grid">
       <div class="ui no padding thirteen wide computer twelve wide tablet column right aligned floated payment icons">

app/templates/events/view/tickets/add-order.hbs

@@ -1,29 +1,11 @@
 <h2 class="ui header">{{t 'Add Order'}}</h2>
-<form class="ui form">
-  <Events::EventsTable
-    @columns={{this.columns}}
+<Public::TicketList 
+    @eventCurrency={{this.model.store.paymentCurrency}}
     @data={{this.model.tickets}}
-    @store={{this.model.store}}
-    @paymentCurrency={{this.model.store.paymentCurrency}}
-    @query={{this.model.query}}
-    @isNotStoreQuery={{true}}
-    @modelName={{this.model.objectType}}
-    @useNumericPagination={{true}}
-    @showGlobalFilter={{true}}
-    @showPageSize={{true}}
-    @updateOrder={{action "updateOrder"}} />
-  <div class="ui grid stackable">
-    <div class="row">
-      <div class="sixteen wide column right aligned">
-        <h5 class="ui header">{{t 'Grand Total'}}: {{currency-symbol this.model.store.paymentCurrency}} {{total}}</h5>
-      </div>
-    </div>
-    <div class="row">
-      <div class="sixteen wide column right aligned">
-        <button class="ui blue button" disabled={{not this.hasTicketsInOrder}} {{action 'placeOrder'}}>
-          {{t 'Continue'}}
-        </button>
-      </div>
-    </div>
-  </div>
-</form>
+    @event={{this.model.order.event}}
+    @attendees={{this.model.attendees}}
+    @order={{this.model.order}}
+    @placeOrder={{action "placeOrder"}}
+    @save='save'
+    @amountEditable={{true}}
+/>