From 0da1aea07e020dc77ae113ee1679f2cb086e5f1a Mon Sep 17 00:00:00 2001
From: pc_11 <76156941+PC-11-00@users.noreply.github.com>
Date: Wed, 8 Feb 2023 15:25:22 +0530
Subject: [PATCH] feat: add tooltips in fixed deposit products (#1677)

added tooltips in fixed deposit products to provide a valuable aid to understanding functionality of the system.

Fixes: #1654
---
 ...roduct-interest-rate-chart-step.component.html |  2 +-
 ...-product-interest-rate-chart-step.component.ts |  1 +
 ...d-deposit-product-settings-step.component.html | 14 +++++++-------
 ...xed-deposit-product-settings-step.component.ts |  1 +
 ...ixed-deposit-product-terms-step.component.html | 15 ++++++++-------
 .../fixed-deposit-product-terms-step.component.ts |  1 +
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
index 2ca255902..1dd25c40f 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
+    <h4 fxFlex="13%" class="mat-h3">Interest Rate Chart<i class='fas fa-question' matTooltip="The interest rate chart provides the information required to calculate the interest payable on a fixed deposit account based on the fixed deposit product."></i></h4>
 
     <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts
index e15d615bc..f9c94e4ee 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
index e98474d5c..a73a1032a 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">Lock-in Period <i class='fas fa-question' matTooltip="A period of time during which a fixed deposit account based on this fixed deposit product will be locked-in after it is opened."></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -18,7 +18,7 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term<i class='fas fa-question' matTooltip="The minimum length of time the funds must remain in the fixed deposit account to earn the full interest income."></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -40,7 +40,7 @@
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>
+    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of <i class='fas fa-question-circle' matTooltip="After the minimum deposit term has passed, additional deposit durations may be specified."></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -56,7 +56,7 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term <i class='fas fa-question-circle' matTooltip="The maximum length of time funds may be deposited in a fixed deposit account based on this fixed deposit product."></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -74,7 +74,7 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
+    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure <i class='fas fa-question-circle' matTooltip="This sections defines an interest penalty for pre-mature closure."></i></h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
       Apply Penal Interest (less)
@@ -96,8 +96,8 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
-      Is Withhold Tax Applicable?
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v" matTooltip="An boolean flag to attach  taxes to interest posting">
+      Is Withhold Tax Applicable? 
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="fixedDepositProductSettingsForm.value.withHoldTax">
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts
index c50c21fb1..49d2804df 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-fixed-deposit-product-settings-step',
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
index d5960911f..453a63697 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
@@ -6,12 +6,12 @@
 
     <mat-form-field fxFlex="31%">
       <mat-label>Minimum</mat-label>
-      <input type="number" matInput formControlName="minDepositAmount">
+      <input type="number" matInput formControlName="minDepositAmount" matTooltip="The minimum deposit amount required to open a fixed deposit account based on this fixed deposit product.">
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
       <mat-label>Default</mat-label>
-      <input type="number" matInput formControlName="depositAmount" required>
+      <input type="number" matInput formControlName="depositAmount" matTooltip="The default deposit amount expected when a fixed deposit account based on this fixed deposit product is opened." required>
       <mat-error>
         Default Deposit Amount is <strong>required</strong>
       </mat-error>
@@ -19,14 +19,15 @@
 
     <mat-form-field fxFlex="31%">
       <mat-label>Maximum</mat-label>
-      <input type="number" matInput formControlName="maxDepositAmount">
+      
+      <input type="number" matInput   formControlName="maxDepositAmount" matTooltip="The maximum deposit amount allowed when a fixed deposit account based on this fixed deposit product is opened.">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest Compounding Period</mat-label>
-      <mat-select formControlName="interestCompoundingPeriodType" required>
+      <mat-select formControlName="interestCompoundingPeriodType" matTooltip="The period at which interest rate is compounded." required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
           {{ interestCompoundingPeriodType.value }}
         </mat-option>
@@ -38,7 +39,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest Posting Period</mat-label>
-      <mat-select formControlName="interestPostingPeriodType" required>
+      <mat-select formControlName="interestPostingPeriodType" matTooltip="The period at which interest rate is posted or credited to a fixed deposit account based on this fixed deposit product." required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
           {{ interestPostingPeriodType.value }}
         </mat-option>
@@ -50,7 +51,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Interest Calculated using</mat-label>
-      <mat-select formControlName="interestCalculationType" required>
+      <mat-select formControlName="interestCalculationType" matTooltip="The method used to calculate interest." required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
           {{ interestCalculationType.value }}
         </mat-option>
@@ -62,7 +63,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Days in Year</mat-label>
-      <mat-select formControlName="interestCalculationDaysInYearType" required>
+      <mat-select formControlName="interestCalculationDaysInYearType" matTooltip="The setting for number of days in year to use to calculate interest." required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
           {{ interestCalculationDaysInYearType.value }}
         </mat-option>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.ts b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.ts
index e982f8501..628977c53 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.ts
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-fixed-deposit-product-terms-step',