From 858bd4fd5ee3ddb54257c27f43f30b7d5b4cf93a Mon Sep 17 00:00:00 2001
From: pc_11 <76156941+PC-11-00@users.noreply.github.com>
Date: Fri, 10 Mar 2023 12:32:07 +0530
Subject: [PATCH] feat:add tooltip in create loan account screens (#1703)

added tooltips in creating loan account screen to provide valuable aid in understanding the functionality of the system.

Fixes: #1675
---
 .../loans-account-details-step.component.html | 12 +++++-----
 .../loans-account-details-step.component.ts   |  1 +
 .../loans-account-terms-step.component.html   | 22 +++++++++----------
 .../loans-account-terms-step.component.ts     |  1 +
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
index 858dd3fc0..8917a7f5b 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Product Name</mat-label>
-      <mat-select formControlName="productId" required>
+      <mat-select formControlName="productId" matTooltip="The name of the loan product that the loan account is based upon" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
       <mat-label>Loan officer</mat-label>
-      <mat-select formControlName="loanOfficerId">
+      <mat-select formControlName="loanOfficerId" matTooltip="The financial institution representative who has responsibility for, and interacts with, the client/group associated with a loan account">
         <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
           {{ loanOfficer.displayName }}
         </mat-option>
@@ -28,7 +28,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Loan purpose</mat-label>
-      <mat-select formControlName="loanPurposeId">
+      <mat-select formControlName="loanPurposeId" matTooltip="Provides an indication of how the funds provided through the loan will be directed and can be used to group loans with the same purpose for reporting">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}
         </mat-option>
@@ -46,7 +46,7 @@
 
     <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
       <mat-label>Submitted on</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" matTooltip="The date the loan account application was received" required
         formControlName="submittedOnDate">
       <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
       <mat-datepicker #submitPicker></mat-datepicker>
@@ -57,7 +57,7 @@
 
     <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
       <mat-label>Disbursement on</mat-label>
-      <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
+      <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" matTooltip="The date that the loan account is expected to be disbursed" required
         formControlName="expectedDisbursementDate">
       <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
       <mat-datepicker #disbursementPicker></mat-datepicker>
@@ -68,7 +68,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>External id</mat-label>
-      <input matInput formControlName="externalId">
+      <input matInput formControlName="externalId" matTooltip="Provides an external id for the loan account">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
index 4e6363a40..434ec2867 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { LoansService } from '../../loans.service';
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
index aa2ae465a..840873acf 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
@@ -42,13 +42,13 @@
 
     <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
       <mat-label>First repayment on</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
+      <input matInput [min]="minDate" [max]="maxDate" matTooltip="May be entered to override the date the system would schedule" [matDatepicker]="repaymentsPicker"
         formControlName="repaymentsStartingFromDate">
       <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
       <mat-datepicker #repaymentsPicker></mat-datepicker>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
+    <h4 fxFlex="98%" class="mat-h4">Repaid Every <i class="fas fa-question" matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due."></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Repaid every</mat-label>
@@ -89,7 +89,7 @@
 
     <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
       <mat-label>Interest charged from</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker" matTooltip="May be entered to override the date the system would start charging interest"
         formControlName="interestChargedFromDate">
       <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
       <mat-datepicker #interestPicker></mat-datepicker>
@@ -104,7 +104,7 @@
 
       <mat-form-field fxFlex="48%">
         <mat-label>Interest method</mat-label>
-        <mat-select formControlName="interestType">
+        <mat-select formControlName="interestType" matTooltip="The Interest method value is input to calculating the payments amount for repayment of the loan.">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
             {{ interestType.value }}
           </mat-option>
@@ -141,7 +141,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Amortization</mat-label>
-      <mat-select required formControlName="amortizationType">
+      <mat-select required matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." formControlName="amortizationType">
         <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
           {{ amortizationType.value }}
         </mat-option>
@@ -155,7 +155,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest calculation period</mat-label>
-      <mat-select formControlName="interestCalculationPeriodType">
+      <mat-select formControlName="interestCalculationPeriodType" matTooltip="Daily - Will Calculate the interest on DAILY basis ex: Month of February has 28days and it will calculate interest for 28days, SAME AS REPAYMENT PERIOD- it calculates for the month,that is, 30days.">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
           {{ interestCalculationPeriodType.value }}
@@ -163,23 +163,23 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion">
+    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" matTooltip="To be used with SAME AS REPAYMENT PERIOD- for  calculating exact interest with partial period  ex: Interest charged from is 5th of April , Principal is 10000 and interest is 1% per month then the interest will be (10000 * 1%)* (25/30) , it calculates for the month first then calculates exact periods between start date and end date(can be a decimal)">
       <p>Calculate interest for exact days in partial period</p>
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Arrears tolerance {{currencyDisplaySymbol}}</mat-label>
-      <input matInput type="number" formControlName="inArrearsTolerance">
+      <input matInput type="number" formControlName="inArrearsTolerance" matTooltip="With 'Arrears tolerance' you can specify a tolerance amount and if the loan is behind (in arrears), but within the tolerance, it won't be classified as 'in arrears' and part of the portfolio at risk.">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest free period</mat-label>
-      <input matInput formControlName="graceOnInterestCharged">
+      <input matInput formControlName="graceOnInterestCharged" matTooltip="If the Interest Free Period is '4' and the client's Repayment Frequency is every week, then for the first four weeks the client need not to pay interest, he has to pay principle due for that week only.">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Repayment strategy</mat-label>
-      <mat-select formControlName="transactionProcessingStrategyCode">
+      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid.">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
           {{ transactionProcessingStrategy.name }}
         </mat-option>
@@ -189,7 +189,7 @@
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
+    <h4 fxFlex="98%" class="mat-h4">Moratorium <i class="fas fa-question" matTooltip="The moratorium information will default from the loan product settings, but can be changed for this loan account"></i></h4>
 
     <mat-form-field fxFlex="23%">
       <mat-label>Grace on principal payment</mat-label>
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
index 97fde9cdc..a894e5ecc 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
@@ -10,6 +10,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /**
  * Create Loans Account Terms Step