fix: Restructure Account Invoice Tab (#5049)

Co-authored-by: iamareebjamal <[email protected]>

app/components/ui-table/cell/events/cell-download-invoice.js

@@ -0,0 +1,5 @@
+import classic from 'ember-classic-decorator';
+import Component from '@ember/component';
+
+@classic
+export default class CellDownloadInvoice extends Component {}

app/controllers/account/billing/invoices/list.js

@@ -3,138 +3,43 @@ import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-co
 
 export default class extends Controller.extend(EmberTableControllerMixin) {
   get columns() {
-    let columns = [];
-    if (this.model.params.invoice_status === 'upcoming') {
-      columns = [
-        {
-          name      : 'Invoice ID',
-          valuePath : 'identifier'
-        },
-        {
-          name          : 'Event Name',
-          valuePath     : 'event',
-          cellComponent : 'ui-table/cell/events/cell-event-invoice'
-        },
-        {
-          name      : 'Date Issued',
-          valuePath : 'createdAt'
-        },
-        {
-          name            : 'Outstanding Amount',
-          valuePath       : 'amount',
-          extraValuePaths : ['event'],
-          cellComponent   : 'ui-table/cell/events/cell-amount'
-        },
-        {
-          name      : 'View Invoice',
-          valuePath : 'invoicePdfUrl'
-        }
-      ];
-    } else if (this.model.params.invoice_status === 'paid') {
-      columns = [
-        {
-          name      : 'Invoice ID',
-          valuePath : 'identifier'
-        },
-        {
-          name          : 'Event Name',
-          valuePath     : 'event',
-          cellComponent : 'ui-table/cell/events/cell-event-invoice'
-        },
-        {
-          name      : 'Date Issued',
-          valuePath : 'createdAt'
-        },
-        {
-          name            : 'Amount',
-          valuePath       : 'amount',
-          extraValuePaths : ['event'],
-          cellComponent   : 'ui-table/cell/events/cell-amount'
-        },
-        {
-          name      : 'Date Paid',
-          valuePath : 'completedAt'
-        },
-        {
-          name      : 'View Invoice',
-          valuePath : 'invoicePdfUrl'
-        },
-        {
-          name            : 'Action',
-          valuePath       : 'identifier',
-          extraValuePaths : ['status'],
-          cellComponent   : 'ui-table/cell/events/cell-action'
-        }
-
-      ];
-    } else if (this.model.params.invoice_status === 'due') {
-      columns =   [
-        {
-          name      : 'Invoice ID',
-          valuePath : 'identifier'
-        },
-        {
-          name          : 'Event Name',
-          valuePath     : 'event',
-          cellComponent : 'ui-table/cell/events/cell-event-invoice'
-
-        },
-        {
-          name      : 'Date Issued',
-          valuePath : 'createdAt'
-        },
-        {
-          name            : 'Amount Due',
-          valuePath       : 'amount',
-          extraValuePaths : ['event'],
-          cellComponent   : 'ui-table/cell/events/cell-amount'
-        },
-        {
-          name      : 'View Invoice',
-          valuePath : 'invoicePdfUrl'
-        },
-        {
-          name            : 'Action',
-          valuePath       : 'identifier',
-          extraValuePaths : ['status'],
-          cellComponent   : 'ui-table/cell/events/cell-action'
-        }
-
-      ];
-    } else if (this.model.params.invoice_status === 'all') {
-      columns = [
-        {
-          name      : 'Invoice ID',
-          valuePath : 'identifier'
-        },
-        {
-          name          : 'Event Name',
-          valuePath     : 'event',
-          cellComponent : 'ui-table/cell/events/cell-event-invoice'
-        },
-        {
-          name            : 'Amount',
-          valuePath       : 'amount',
-          extraValuePaths : ['event'],
-          cellComponent   : 'ui-table/cell/events/cell-amount',
-          isSortable      : true,
-          headerComponent : 'tables/headers/sort'
-        },
-        {
-          name            : 'Status',
-          valuePath       : 'status',
-          isSortable      : true,
-          headerComponent : 'tables/headers/sort'
-        },
-        {
-          name            : 'Action',
-          valuePath       : 'identifier',
-          extraValuePaths : ['status'],
-          cellComponent   : 'ui-table/cell/events/cell-action'
-        }
-
-      ];
-    }
-    return columns;
+    return [
+      {
+        name            : 'Invoice ID',
+        valuePath       : 'identifier',
+        extraValuePaths : ['invoicePdfUrl'],
+        cellComponent   : 'ui-table/cell/events/cell-download-invoice'
+      },
+      {
+        name          : 'Event Name',
+        valuePath     : 'event',
+        cellComponent : 'ui-table/cell/events/cell-event-invoice'
+      },
+      {
+        name       : 'Date',
+        valuePath  : 'createdAt',
+        isSortable : true
+      },
+      {
+        name            : 'Amount',
+        valuePath       : 'amount',
+        extraValuePaths : ['event'],
+        cellComponent   : 'ui-table/cell/events/cell-amount',
+        isSortable      : true,
+        headerComponent : 'tables/headers/sort'
+      },
+      {
+        name            : 'Status',
+        valuePath       : 'status',
+        isSortable      : true,
+        headerComponent : 'tables/headers/sort'
+      },
+      {
+        name            : 'Action',
+        valuePath       : 'identifier',
+        extraValuePaths : ['status'],
+        cellComponent   : 'ui-table/cell/events/cell-action'
+      }
+    ];
   }
 }

app/models/user.js

@@ -83,7 +83,7 @@ export default ModelBase.extend({
   events               : hasMany('event', { inverse: 'user' }),
   sessions             : hasMany('session'),
   feedbacks            : hasMany('feedback'),
-  invoice              : hasMany('event-invoice'),
+  eventInvoices        : hasMany('event-invoice'),
   attendees            : hasMany('attendee'),
   speakers             : hasMany('speaker'),
   discountCodes        : hasMany('discount-code'),

app/routes/account/billing/invoices/list.js

@@ -2,26 +2,22 @@ import Route from '@ember/routing/route';
 import moment from 'moment';
 import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 import { action } from '@ember/object';
+import { capitalize } from 'lodash-es';
 
 export default class extends Route.extend(EmberTableRouteMixin) {
   titleToken() {
-    switch (this.params.invoice_status) {
-      case 'paid':
-        return this.l10n.t('Paid');
-      case 'due':
-        return this.l10n.t('Due');
-      case 'upcoming':
-        return this.l10n.t('Upcoming');
-      case 'all':
-        return this.l10n.t('All');
+    if (['paid', 'due', 'refunding', 'refunded'].includes(this.params.invoice_status)) {
+      return this.l10n.t(capitalize(this.params.invoice_status));
+    } else {
+      return this.l10n.t('All');
     }
   }
 
   async model(params) {
     this.set('params', params);
     const searchField = 'status';
     let filterOptions = [];
-    if (params.invoice_status === 'paid' || params.invoice_status === 'due') {
+    if (['paid', 'due', 'refunding', 'refunded'].includes(params.invoice_status)) {
       filterOptions = [
         {
           name : 'status',
@@ -60,7 +56,7 @@ export default class extends Route.extend(EmberTableRouteMixin) {
 
     queryString = this.applySortFilters(queryString, params);
     return {
-      eventInvoices: await this.asArray(this.store.query('event-invoice', queryString)),
+      eventInvoices: await this.asArray(this.authManager.currentUser.query('eventInvoices', queryString)),
       params
 
     };

app/templates/account.hbs

@@ -6,7 +6,7 @@
         {{t 'Profile'}}
       </LinkTo>
       <LinkTo @route="account.billing" class="item">
-        {{t 'Billing Info'}}
+        {{t 'Billing'}}
       </LinkTo>
       <LinkTo @route="account.password" class="item">
         {{t 'Password'}}

app/templates/account/billing/invoices.hbs

@@ -14,6 +14,12 @@
         <LinkTo @route="account.billing.invoices.list" @model="upcoming" class="item">
           {{t 'Upcoming'}}
         </LinkTo>
+        <LinkTo @route="account.billing.invoices.list" @model="refunding" class="item">
+          {{t 'Refunding'}}
+        </LinkTo>
+        <LinkTo @route="account.billing.invoices.list" @model="refunded" class="item">
+          {{t 'Refunded'}}
+        </LinkTo>
       </TabbedNavigation>
     </div>
   </div>

app/templates/components/ui-table/cell/events/cell-action.hbs

@@ -1,6 +1,6 @@
 {{#if (eq this.extraRecords.status 'due')}}
   <LinkTo @route="event-invoice.review" @model={{this.record}} class="ui blue button">
-    {{t 'Review and Pay'}}
+   	{{t 'Review and Pay'}}
   </LinkTo>
 {{else}}
   <LinkTo @route="event-invoice.paid" @model={{this.record}} class="ui green button">

app/templates/components/ui-table/cell/events/cell-download-invoice.hbs

@@ -0,0 +1,4 @@
+<p> {{this.record}} </p>
+<a href="{{this.extraRecords.invoicePdfUrl}}">
+  <i class="download icon"></i>
+</a>