feat: update payment status

app/components/ui-table/cell/admin/sales/cell-status-action.hbs

@@ -0,0 +1,12 @@
+<UiDropdown @class="ui floating dropdown button w-content-button">
+  <div class="ui blue empty circular label"></div>
+  {{t-var (capitalize @record)}}
+  <div class="menu">
+    {{#each @props.options.paymentStateMap as |state|}}
+      <div class="item" role="button" {{action @props.actions.changeState @extraRecords.id state.name}}>
+        <div class="ui {{state.color}} empty circular label"></div>
+        {{t-var (capitalize state.name)}}
+      </div>
+    {{/each}}
+  </div>
+</UiDropdown>

app/controllers/admin/sales/invoices.js

@@ -1,8 +1,12 @@
 import Controller from '@ember/controller';
 import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class extends Controller.extend(EmberTableControllerMixin) {
 
+  @service errorHandler;
+
   get columns() {
     return [
       {
@@ -55,8 +59,16 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       {
         name            : this.l10n.t('Status'),
         valuePath       : 'status',
+        extraValuePaths : ['id'],
         isSortable      : true,
-        headerComponent : 'tables/headers/sort'
+        headerComponent : 'tables/headers/sort',
+        cellComponent   : 'ui-table/cell/admin/sales/cell-status-action',
+        options         : {
+          paymentStateMap: [{ 'name': 'paid', 'color': 'green' }, { 'name': 'due', 'color': 'red' }, { 'name': 'refunding', 'color': 'orange' }, { 'name': 'refunded', 'color': 'violet' }, { 'name': 'failed', 'color': 'black' }, { 'name': 'resolved', 'color': 'green' }]
+        },
+        actions: {
+          changeState: this.changeState.bind(this)
+        }
       },
       {
         name            : this.l10n.t('Action'),
@@ -66,4 +78,28 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       }
     ];
   }
+
+  @action
+  async changeState(invoice_id, status) {
+    const invoice =  this.store.peekRecord('eventInvoice', invoice_id, { backgroundReload: false });
+    const oldState = invoice.status;
+    invoice.set('status', status);
+    this.set('isLoading', true);
+
+    try {
+      await invoice.save();
+      this.notify.success(this.l10n.t('Invoice state has been changed to {{action}} successfully.', {
+        action: status
+      }), {
+        id: 'invoice_state'
+      });
+    } catch (e) {
+      invoice.set('status', oldState);
+      this.errorHandler.handle(e);
+    } finally {
+      this.set('isLoading', false);
+    }
+  }
+
+
 }

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

@@ -23,7 +23,7 @@ export default class extends Route.extend(EmberTableRouteMixin) {
     this.set('params', params);
     const searchField = 'status';
     let filterOptions = [];
-    if (['paid', 'due', 'refunding', 'refunded'].includes(params.invoice_status)) {
+    if (['paid', 'due', 'refunding', 'refunded', 'failed', 'resolved'].includes(params.invoice_status)) {
       filterOptions = [
         {
           name : 'status',

app/templates/account/billing/invoices.hbs

@@ -17,6 +17,12 @@
         <LinkTo @route="account.billing.invoices.list" @model="refunded" class="item">
           {{t 'Refunded'}}
         </LinkTo>
+        <LinkTo @route="account.billing.invoices.list" @model="failed" class="item">
+          {{t 'Failed'}}
+        </LinkTo>
+        <LinkTo @route="account.billing.invoices.list" @model="resolved" class="item">
+          {{t 'Resolved'}}
+        </LinkTo>
       </TabbedNavigation>
     </div>
   </div>

app/templates/components/event-invoice/invoice-summary.hbs

@@ -1,8 +1,8 @@
 <div class="ui segments">
-  <div class="ui green inverted segment center aligned">
+  <div class="ui {{if (eq @data.status 'paid') 'green' 'violet'}} inverted segment center aligned">
     <div class="ui inverted mini statistic horizontal">
       <div class="value">
-        {{t 'Paid'}}
+        {{@data.status}}
       </div>
       <div class="label">
         {{t 'Your invoice payment completed successfully.'}}