Chargeback Loan Transaction

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html

@@ -1,12 +1,17 @@
 <div fxLayoutAlign="end" class="container m-b-20 transaction-buttons" fxLayoutGap="2%"
   *ngIf="!(transactionData.type.contra)">
   <span *mifosxHasPermission="'ADJUST_LOAN'">
-    <button mat-raised-button color="primary" [routerLink]="'edit'" *ngIf="allowEdition">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+    <button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;{{ 'Edit' | translate }}
     </button>
 
-    <button mat-raised-button color="warn" (click)="undoTransaction()" *ngIf="allowUndo">
-      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Undo
+    <button mat-raised-button color="warn" (click)="undoTransaction()" [disabled]="!allowUndo">
+      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;{{ 'Undo' | translate }}
+    </button>
+  </span>
+  <span *mifosxHasPermission="'CHARGEBACK_LOAN'">
+    <button mat-raised-button color="warn" [disabled]="!allowChargeback" (click)="chargebackTransaction()">
+      <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;{{ 'Chargeback' | translate }}
     </button>
   </span>
 </div>
@@ -18,17 +23,29 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="loanTransactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+          {{ 'Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ transactionData.id }}
         </div>
 
+        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
+          {{ 'Repayment Transaction' | translate }}
+        </div>
+
+        <div fxFlex="50%" *ngIf="transactionData.toLoanTransactionRelation">
+          <a [href]="loanTransactionRelatedLink(transactionData.toLoanTransactionRelation.fromLoanTransaction)">
+              {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
+          </a>
+        </div>
+
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{ 'Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -36,15 +53,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
+          {{ 'Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{ 'Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -52,17 +69,53 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Amount
+          {{ 'Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
         </div>
 
+        <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
+
+        <div fxFlex="100%" class="mat-body-strong" *ngIf="existTransactionRelations">
+          {{ 'Linked Transactions' | translate }}
+          <br>
+
+          <table mat-table [dataSource]="transactionRelations">
+              <ng-container matColumnDef="relationType">
+                <th mat-header-cell *matHeaderCellDef> Relation Type </th>
+                <td mat-cell *matCellDef="let transactionRel" [matTooltip]="transactionRel.paymentType">
+                  {{ transactionRel.relationType | translate }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="toTransaction">
+                <th mat-header-cell *matHeaderCellDef> Transaction </th>
+                <td mat-cell *matCellDef="let transactionRel">
+                  <a [href]="loanTransactionRelatedLink(transactionRel.toLoanTransaction)">
+                    {{ transactionRel.toLoanTransaction }}
+                  </a>
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef> Amount </th>
+                <td mat-cell *matCellDef="let transactionRel">
+                  {{ transactionRel.amount | currency:transactionData.currency.code }} {{ transactionData.currency.code }}
+                </td>
+              </ng-container>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
+        </div>
+
+        <mat-divider *ngIf="transactionData.paymentDetailData" [inset]="true"></mat-divider>
+
         <ng-container *ngIf="transactionData.paymentDetailData">
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            Payment Type
+            {{ 'Payment Type' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
@@ -70,7 +123,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            Account No.
+            {{ 'Account No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
@@ -78,7 +131,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            Cheque Number
+            {{ 'Cheque Number' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
@@ -86,7 +139,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            Routing Code
+            {{ 'Routing Code' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
@@ -94,7 +147,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            Receipt No.
+            {{ 'Receipt No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
@@ -102,7 +155,7 @@
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            Bank No.
+            {{ 'Bank No.' | translate }}
           </div>
 
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
@@ -113,6 +166,9 @@
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
   .content {
@@ -11,3 +13,22 @@
 .transaction-buttons {
   margin-top: 3%;
 }
+
+.loan-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -8,6 +8,12 @@ import { LoansService } from 'app/loans/loans.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { OrganizationService } from 'app/organization/organization.service';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { MatTableDataSource } from '@angular/material/table';
 
 /** Custom Dialogs */
 
@@ -20,14 +26,27 @@ import { Dates } from 'app/core/utils/dates';
   templateUrl: './view-transaction.component.html',
   styleUrls: ['./view-transaction.component.scss']
 })
-export class ViewTransactionComponent {
+export class ViewTransactionComponent implements OnInit {
 
   /** Transaction data. */
   transactionData: any;
   /** Is Editable */
   allowEdition = true;
-   /** Is Undoable */
-   allowUndo = true;
+  /** Is Undoable */
+  allowUndo = true;
+  /** Is able to be Chargeback */
+  allowChargeback = true;
+  existTransactionRelations = false;
+
+  paymentTypeOptions: {}[] = [];
+  transactionRelations = new MatTableDataSource();
+  /** Columns to be displayed in Transaction Relations table. */
+  displayedColumns: string[] = ['relationType', 'toTransaction', 'amount'];
+  isFullRelated = false;
+  amountRelationsAllowed = 0;
+
+  clientId: number;
+  loanId: number;
 
   /**
    * Retrieves the Transaction data from `resolve`.
@@ -43,13 +62,43 @@ export class ViewTransactionComponent {
               private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private organizationService: OrganizationService) {
     this.route.data.subscribe((data: { loansAccountTransaction: any }) => {
       this.transactionData = data.loansAccountTransaction;
       this.allowEdition = !this.transactionData.manuallyReversed && !(this.transactionData.type.id === 20 || this.transactionData.type.id === 21 || this.transactionData.type.id === 22
         || this.transactionData.type.id === 23);
       this.allowUndo = !this.transactionData.manuallyReversed;
+      this.allowChargeback = this.transactionData.type.repayment;
+      if (this.transactionData.type.repayment) {
+        if (this.transactionData.transactionRelations) {
+          this.transactionRelations.data = this.transactionData.transactionRelations;
+          this.existTransactionRelations = (this.transactionData.transactionRelations.length > 0);
+          let amountRelations = 0;
+          this.transactionData.transactionRelations.forEach((relation: any) => {
+            amountRelations += relation.amount;
+          });
+          this.amountRelationsAllowed = this.transactionData.amount - amountRelations;
+          this.isFullRelated =  (this.amountRelationsAllowed === 0);
+          this.allowChargeback = this.transactionData.type.repayment && !this.isFullRelated;
+        }
+      }
+      if (!this.allowChargeback || this.existTransactionRelations) {
+        this.allowUndo = false;
+        this.allowEdition = false;
+      }
     });
+    this.clientId = this.route.snapshot.params['clientId'];
+    this.loanId = this.route.snapshot.params['loanId'];
+  }
+
+  ngOnInit(): void {
+    if (this.allowChargeback) {
+      this.organizationService.getPaymentTypesWithCode().toPromise()
+      .then(data => {
+        this.paymentTypeOptions = data;
+      });
+    }
   }
 
   /**
@@ -77,4 +126,62 @@ export class ViewTransactionComponent {
     });
   }
 
+  chargebackTransaction() {
+    const accountId = this.route.parent.parent.parent.snapshot.params['loanId'];
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'paymentTypeId',
+        label: 'Payment Type',
+        value: '',
+        options: { label: 'name', value: 'id', data: this.paymentTypeOptions },
+        required: true,
+        order: 1
+      }),
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: this.amountRelationsAllowed,
+        type: 'number',
+        required: true,
+        max: this.amountRelationsAllowed,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Chargeback Repayment Transaction',
+      layout: { addButtonText: 'Chargeback' },
+      formfields: formfields
+    };
+    const chargebackDialogRef = this.dialog.open(FormDialogComponent, { data });
+    chargebackDialogRef.afterClosed().subscribe((response: { data: any }) => {
+      if (response.data) {
+        if (response.data.value.amount <= this.amountRelationsAllowed) {
+          const locale = this.settingsService.language.code;
+          const payload = {
+            transactionAmount: response.data.value.amount,
+            paymentTypeId: response.data.value.paymentTypeId,
+            locale
+          };
+          this.loansService.executeLoansAccountTransactionsCommand(accountId, 'chargeback', payload, this.transactionData.id).subscribe(() => {
+            this.router.navigate(['../'], { relativeTo: this.route });
+          });
+        }
+      }
+    });
+  }
+
+  loanTransactionRelatedLink(transactionId: number) {
+    return `/#/clients/${this.clientId}/loans-accounts/${this.loanId}/transactions/${transactionId}`;
+  }
+
+  loanTransactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    if (this.existTransactionRelations) {
+      return 'linked';
+    }
+    return 'active';
+  }
+
 }