feat: add make account transfer (transfer-funds) (#1151)

Fixes: #251 #1060

src/app/account-transfers/account-transfers-routing.module.ts

@@ -14,6 +14,8 @@ import { CreateStandingInstructionsComponent } from './create-standing-instructi
 import { ViewStandingInstructionsResolver } from './common-resolvers/view-standing-instructions.resolver';
 import { StandingInstructionsDataAndTemplateResolver } from './common-resolvers/standing-instructions-data-and-template.resolver';
 import { StandingInstructionsTemplateResolver } from './common-resolvers/standing-instructions-template.resolver';
+import { MakeAccountTransersComponent } from './make-account-transers/make-account-transers.component';
+import { MakeAccountTransferTemplateResolver } from './common-resolvers/make-account-transfer-template.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -28,6 +30,14 @@ const routes: Routes = [
           standingIntructionsTemplate: StandingInstructionsTemplateResolver
         }
       },
+      {
+        path: 'make-account-transfer',
+        data: { title: extract('Account Transfer'), breadcrumb: 'Account Transfer', routeParamBreadcrumb: 'Account Transfer' },
+        component: MakeAccountTransersComponent,
+        resolve: {
+          accountTransferTemplate: MakeAccountTransferTemplateResolver
+        }
+      },
       {
         path: ':standingInstructionsId',
         data: { title: extract('Standing Instructions'), routeParamBreadcrumb: 'standingInstructionsId' },
@@ -60,7 +70,8 @@ const routes: Routes = [
   providers: [
     ViewStandingInstructionsResolver,
     StandingInstructionsDataAndTemplateResolver,
-    StandingInstructionsTemplateResolver
+    StandingInstructionsTemplateResolver,
+    MakeAccountTransferTemplateResolver
   ]
 })
 

src/app/account-transfers/account-transfers.module.ts

@@ -12,6 +12,7 @@ import { DirectivesModule } from '../directives/directives.module';
 import { ViewStandingInstructionsComponent } from './view-standing-instructions/view-standing-instructions.component';
 import { EditStandingInstructionsComponent } from './edit-standing-instructions/edit-standing-instructions.component';
 import { CreateStandingInstructionsComponent } from './create-standing-instructions/create-standing-instructions.component';
+import { MakeAccountTransersComponent } from './make-account-transers/make-account-transers.component';
 
 /**
  * Account Transfers Module
@@ -23,7 +24,8 @@ import { CreateStandingInstructionsComponent } from './create-standing-instructi
   declarations: [
     ViewStandingInstructionsComponent,
     EditStandingInstructionsComponent,
-    CreateStandingInstructionsComponent
+    CreateStandingInstructionsComponent,
+    MakeAccountTransersComponent
   ],
   providers: [DatePipe]
 })

src/app/account-transfers/account-transfers.service.ts

@@ -51,4 +51,22 @@ export class AccountTransfersService {
     return this.http.post(`/standinginstructions`, data);
   }
 
+  newAccountTranferResource(id: any, accountTypeId: any, formValue?: any): Observable<any> {
+    let httpParams = new HttpParams().set('fromAccountId', id)
+      .set('fromAccountType', accountTypeId);
+    if (formValue) {
+      const propNames = Object.getOwnPropertyNames(formValue);
+      for (let i = 0; i < propNames.length; i++) {
+        const propName = propNames[i];
+        httpParams = httpParams.set(propName, formValue[propName]);
+      }
+    }
+    return this.http.get(`/accounttransfers/template`, { params: httpParams });
+
+  }
+
+  createAccountTransfer(data: any): Observable<any> {
+    return this.http.post(`/accounttransfers`, data);
+  }
+
 }

src/app/account-transfers/common-resolvers/make-account-transfer-template.resolver.ts

@@ -0,0 +1,46 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountTransfersService } from '../account-transfers.service';
+
+/**
+ * View Standing Instructions resolver.
+ */
+@Injectable()
+export class MakeAccountTransferTemplateResolver implements Resolve<Object> {
+
+    accountTypeId: string;
+    id: any;
+    /**
+     * @param {accountTransfersService} AccountTransfersService Account Transfers service.
+     */
+    constructor(private accountTransfersService: AccountTransfersService) { }
+
+    /**
+     * Returns the Standing Instructions Data.
+     * @param {ActivatedRouteSnapshot} route Route Snapshot
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const accountType = route.queryParamMap.get('accountType');
+        switch (accountType) {
+            case 'fromloans':
+                this.accountTypeId = '1';
+                this.id = route.queryParamMap.get('loanId');
+                break;
+            case 'fromsavings':
+                this.accountTypeId = '2';
+                this.id = route.queryParamMap.get('savingsId');
+                break;
+            default:
+                this.accountTypeId = '0';
+        }
+        return this.accountTransfersService.newAccountTranferResource(this.id, this.accountTypeId);
+    }
+
+}

src/app/account-transfers/make-account-transers/make-account-transers.component.html

@@ -0,0 +1,141 @@
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" fxLayout.lt-md="column">
+
+        <h3 class="mat-h3" fxFlexFill>Transferring From Details</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Applicant</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Office</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">From Account</span>
+          <span
+            fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{ accountTransferTemplateData.fromAccount.accountNo }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">From Account Type</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
+        </div>
+
+        <div fxFlexFill>
+          <span fxFlex="40%">Currency</span>
+          <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
+        </div>
+
+      </div>
+
+      <h3 class="mat-h3" fxFlexFill>Transferring To</h3>
+
+      <mat-divider [inset]="true"></mat-divider>
+
+      <form [formGroup]="makeAccountTransferForm">
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
+                {{ toOfficeType.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Client</mat-label>
+            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete">
+            <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
+              Client is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
+            <mat-option *ngFor="let client of clientsData" [value]="client">
+              {{ client.id }} - {{ client.displayName }}
+            </mat-option>
+          </mat-autocomplete>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Account Type</mat-label>
+            <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
+                {{ toAccountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
+              Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Account</mat-label>
+            <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
+              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
+                {{ toAccount.productName }} - {{ toAccount.accountNo }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
+              Account is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Amount</mat-label>
+            <input type="number" matInput required formControlName="transferAmount">
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
+              Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
+              formControlName="transferDate">
+            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transferDatePicker></mat-datepicker>
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
+              Transactions Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Description</mat-label>
+            <textarea matInput formControlName="transferDescription"></textarea>
+            <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
+              Transfer Description is <strong>required</strong>
+            </mat-error>
+
+          </mat-form-field>
+
+        </div>
+
+      </form>
+
+    </mat-card-content>
+
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid"
+        (click)="submit()">Submit</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+</div>

src/app/account-transfers/make-account-transers/make-account-transers.component.scss

@@ -0,0 +1,20 @@
+h2, h3, h4 {
+    margin: 0;
+    font-weight: 500;
+}
+
+span {
+    margin: 0.5em 0;
+}
+
+.margin-t {
+    margin-top: 1em;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.container {
+    max-width: 37rem;
+}

src/app/account-transfers/make-account-transers/make-account-transers.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MakeAccountTransersComponent } from './make-account-transers.component';
+
+describe('MakeAccountTransersComponent', () => {
+  let component: MakeAccountTransersComponent;
+  let fixture: ComponentFixture<MakeAccountTransersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MakeAccountTransersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MakeAccountTransersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/account-transfers/make-account-transers/make-account-transers.component.ts

@@ -0,0 +1,182 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AccountTransfersService } from '../account-transfers.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-make-account-transers',
+  templateUrl: './make-account-transers.component.html',
+  styleUrls: ['./make-account-transers.component.scss']
+})
+export class MakeAccountTransersComponent implements OnInit, AfterViewInit {
+
+  /** Standing Instructions Data */
+  accountTransferTemplateData: any;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Edit Standing Instructions form. */
+  makeAccountTransferForm: FormGroup;
+  /** To Office Type Data */
+  toOfficeTypeData: any;
+  /** To Client Type Data */
+  toClientTypeData: any;
+  /** To Account Type Data */
+  toAccountTypeData: any;
+  /** To Account Data */
+  toAccountData: any;
+  /** Account Type Id */
+  accountTypeId: any;
+  /** Account Type */
+  accountType: any;
+  /** Savings Id or Loans Id */
+  id: any;
+  /** Clients Data */
+  clientsData: any;
+
+  /**
+   * Retrieves the standing instructions template from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {Router} router Router
+   * @param {AccountTransfersService} accountTransfersService Account Transfers Service
+   * @param {DatePipe} datePipe Date Pipe
+   */
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private accountTransfersService: AccountTransfersService,
+    private datePipe: DatePipe,
+    private clientsService: ClientsService) {
+    this.route.data.subscribe((data: { accountTransferTemplate: any }) => {
+      this.accountTransferTemplateData = data.accountTransferTemplate;
+      this.setParams();
+      this.setOptions();
+    });
+  }
+  /** Sets the value from the URL */
+  setParams() {
+    this.accountType = this.route.snapshot.queryParams['accountType'];
+    switch (this.accountType) {
+      case 'fromloans':
+        this.accountTypeId = '1';
+        this.id = this.route.snapshot.queryParams['loanId'];
+        break;
+      case 'fromsavings':
+        this.accountTypeId = '2';
+        this.id = this.route.snapshot.queryParams['savingsId'];
+        break;
+      default:
+        this.accountTypeId = '0';
+    }
+  }
+
+  /**
+   * Creates and sets the create standing instructions form.
+   */
+  ngOnInit() {
+    this.createMakeAccountTransferForm();
+  }
+
+  /**
+   * Creates the standing instruction form.
+   */
+  createMakeAccountTransferForm() {
+    this.makeAccountTransferForm = this.formBuilder.group({
+      'toOfficeId': ['', Validators.required],
+      'toClientId': ['', Validators.required],
+      'toAccountType': ['', Validators.required],
+      'toAccountId': ['', Validators.required],
+      'transferAmount': [this.accountTransferTemplateData.transferAmount, Validators.required],
+      'transferDate': ['', Validators.required],
+      'transferDescription': ['', Validators.required],
+    });
+  }
+
+  /** Sets options value */
+  setOptions() {
+    this.toOfficeTypeData = this.accountTransferTemplateData.toOfficeOptions;
+    this.toAccountTypeData = this.accountTransferTemplateData.toAccountTypeOptions;
+    this.toAccountData = this.accountTransferTemplateData.toAccountOptions;
+  }
+
+  /** Executes on change of various select options */
+  changeEvent() {
+    const formValue = this.refineObject(this.makeAccountTransferForm.value);
+    this.accountTransfersService.newAccountTranferResource(this.id, this.accountTypeId, formValue).subscribe((response: any) => {
+      this.accountTransferTemplateData = response;
+      this.toClientTypeData = response.toClientOptions;
+      this.setOptions();
+    });
+  }
+
+  /** Refine Object
+   * Removes the object param with null or '' values
+   */
+  refineObject(dataObj: { [x: string]: any; transferAmount: any; transferDate: any; transferDescription: any; }) {
+    delete dataObj.transferAmount;
+    delete dataObj.transferDate;
+    delete dataObj.transferDescription;
+    if (dataObj.toClientId) {
+      dataObj.toClientId = dataObj.toClientId.id;
+    }
+    const propNames = Object.getOwnPropertyNames(dataObj);
+    for (let i = 0; i < propNames.length; i++) {
+      const propName = propNames[i];
+      if (dataObj[propName] === null || dataObj[propName] === undefined || dataObj[propName] === '') {
+        delete dataObj[propName];
+      }
+    }
+    return dataObj;
+  }
+
+  /**
+   * Subscribes to Clients search filter:
+   */
+  ngAfterViewInit() {
+    this.makeAccountTransferForm.controls.toClientId.valueChanges.subscribe((value: string) => {
+      if (value.length >= 2) {
+        this.clientsService.getFilteredClients('displayName', 'ASC', true, value)
+          .subscribe((data: any) => {
+            this.clientsData = data.pageItems;
+          });
+        this.changeEvent();
+      }
+    });
+  }
+
+  /**
+   * Displays Client name in form control input.
+   * @param {any} client Client data.
+   * @returns {string} Client name if valid otherwise undefined.
+   */
+  displayClient(client: any): string | undefined {
+    return client ? client.displayName : undefined;
+  }
+
+  /**
+   * Submits the standing instructions form
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const locale = 'en';
+    const makeAccountTransferData = {
+      ... this.makeAccountTransferForm.value,
+      transferDate: this.datePipe.transform(this.makeAccountTransferForm.value.transferDate, dateFormat),
+      dateFormat,
+      locale,
+      toClientId: this.makeAccountTransferForm.controls.toClientId.value.id,
+      fromAccountId: this.id,
+      fromAccountType: this.accountTypeId,
+      fromClientId: this.accountTransferTemplateData.fromClient.id,
+      fromOfficeId: this.accountTransferTemplateData.fromClient.officeId
+    };
+    this.accountTransfersService.createAccountTransfer(makeAccountTransferData).subscribe(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -157,7 +157,8 @@
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid">
         <button class="account-action-button" mat-raised-button color="primary" matTooltip="Transfer Funds"
-          matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'">
+          matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
+          (click)="routeEdit($event); routeTransferFund(element.id)">
           <i class="fa fa-exchange"></i>
         </button>
         </span>

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -38,7 +38,8 @@ export class GeneralTabComponent {
 
   constructor(
     private route: ActivatedRoute,
-    private clientService: ClientsService
+    private clientService: ClientsService,
+    private router: Router
   ) {
     this.route.data.subscribe((data: { clientAccountsData: any, clientChargesData: any, clientSummary: any }) => {
       this.clientAccountData = data.clientAccountsData;
@@ -101,5 +102,11 @@ export class GeneralTabComponent {
     $event.stopPropagation();
   }
 
+  routeTransferFund(loanId: any) {
+    console.log('loanId: ', loanId);
+
+    const queryParams: any = { loanId: loanId, accountType: 'fromloans' };
+    this.router.navigate(['../', 'loans', loanId, 'transfer-funds', 'make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
+  }
 
 }

src/app/loans/loans-routing.module.ts

@@ -175,6 +175,10 @@ const routes: Routes = [
                 actionButtonData: LoanActionButtonResolver
               }
             },
+            {
+              path: 'transfer-funds',
+              loadChildren: '../account-transfers/account-transfers.module#AccountTransfersModule'
+            }
           ]
         },
         {
@@ -187,7 +191,7 @@ const routes: Routes = [
         },
       ]
     }]
-  }
+  },
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.ts

@@ -129,12 +129,12 @@ export class CreateGuarantorComponent implements OnInit, AfterViewInit {
     }
   }
 
-  clientSelected(clientDetails: any){
+  clientSelected(clientDetails: any) {
     console.log(clientDetails);
     this.accountOptions = [];
     this.loanService.guarantorAccountResource(this.loanId, clientDetails.id).subscribe((response: any) => {
       this.accountOptions = response.accountLinkingOptions;
-    })
+    });
   }
 
   /**
@@ -153,17 +153,17 @@ export class CreateGuarantorComponent implements OnInit, AfterViewInit {
     // TODO: Update once language and date settings are setup
     const dateFormat = 'dd-MM-yyyy';
     const locale = 'en';
-    let newGuarantorData = {
+    const newGuarantorData = {
       ... this.newGuarantorForm.value,
       locale,
       guarantorTypeId
     };
 
-    if(this.newGuarantorForm.value.existingClient) {
+    if (this.newGuarantorForm.value.existingClient) {
       newGuarantorData['entityId'] = this.newGuarantorForm.controls.name.value.id;
     } else {
       newGuarantorData['dob'] = this.datePipe.transform(prevdob, dateFormat),
-      newGuarantorData['dateFormat'] = dateFormat
+      newGuarantorData['dateFormat'] = dateFormat;
     }
 
     delete newGuarantorData.existingClient;

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

@@ -127,6 +127,10 @@ export class LoansViewComponent implements OnInit {
       case 'Modify Application':
         this.router.navigate(['edit-loans-account'], { relativeTo: this.route});
         break;
+      case 'Transfer Funds':
+        const queryParams: any = { loanId: this.loanId, accountType: 'fromloans' };
+        this.router.navigate(['transfer-funds/make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
+        break;
       default:
         button = button.replace(/\s/g, '-').toLowerCase();
         button = button.replace(/\(/g, '');

src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss

@@ -1,7 +1,3 @@
-table {
-    width: 100%;
-}
-
 .mat-elevation-z1 {
     margin: 1em 0 1.5em 0;
 }
@@ -24,47 +20,30 @@ span {
 }
 
 table {
-    width: 100%;
+  width: 100%;
 
-    tr.incentives-row {
-      height: 0;
+  tr.incentives-row {
+    height: 0;
 
-      > td {
-        padding: 0;
-      }
+    > td {
+      padding: 0;
+    }
 
-      .incentives {
-        overflow: hidden;
-      }
+    .incentives {
+      overflow: hidden;
+    }
 
-      .mat-card {
-        border-radius: 0;
+    .mat-card {
+      border-radius: 0;
 
-        > h4 {
-          font-weight: 500;
-          margin: 0.5em 0 0;
-        }
+      > h4 {
+        font-weight: 500;
+        margin: 0.5em 0 0;
       }
     }
   }
+}
 
-  .mat-elevation-z1 {
-    margin: 1em 0 1.5em 0;
-  }
-
-  h2, h3, h4 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  span {
-    margin: 0.5em 0;
-  }
-
-  mat-divider {
-    margin: 0 0 0.5em 0;
-  }
-
-  .margin-t {
-    margin-top: 1em;
-  }
+mat-divider {
+  margin: 0 0 0.5em 0;
+}

src/app/savings/savings-account-view/savings-account-view.component.ts

@@ -152,6 +152,10 @@ export class SavingsAccountViewComponent implements OnInit {
       case 'Disable Withhold Tax':
         this.disableWithHoldTax();
         break;
+      case 'Transfer Funds':
+        const queryParams: any = { savingsId: this.savingsAccountData.id, accountType: 'fromsavings' };
+        this.router.navigate(['transfer-funds/make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
+        break;
     }
   }
 

src/app/savings/savings-routing.module.ts

@@ -172,6 +172,10 @@ const routes: Routes = [
             resolve: {
               savingsAccountActionData: SavingsAccountActionsResolver
             }
+          },
+          {
+            path: 'transfer-funds',
+            loadChildren: '../account-transfers/account-transfers.module#AccountTransfersModule'
           }
         ]
       }