From e76e558fc6b1bfa42340dedc685990f344c9f613 Mon Sep 17 00:00:00 2001
From: pc_11 <76156941+PC-11-00@users.noreply.github.com>
Date: Thu, 23 Feb 2023 12:02:13 +0530
Subject: [PATCH] feat:add tooltip in create savings product screen (#1689)

added tooltips in creating savings product screen to provide valuable aid in understanding the functionality of the system.

Fixes: #1669
---
 ...aving-product-currency-step.component.html |  6 ++--
 .../saving-product-currency-step.component.ts |  1 +
 ...saving-product-details-step.component.html |  6 ++--
 .../saving-product-details-step.component.ts  |  1 +
 ...aving-product-settings-step.component.html | 30 +++++++++----------
 .../saving-product-settings-step.component.ts |  1 +
 .../saving-product-terms-step.component.html  | 10 +++----
 .../saving-product-terms-step.component.ts    |  1 +
 8 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
index ea7cb83dc..7d4254799 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Currency</mat-label>
-      <mat-select formControlName="currencyCode" required>
+      <mat-select formControlName="currencyCode" matTooltip="The currency to be used" required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Decimal Places</mat-label>
-      <input type="number" matInput formControlName="digitsAfterDecimal" required>
+      <input type="number" matInput matTooltip="The number of decimal places to be used to track and report on saving accounts" formControlName="digitsAfterDecimal" required>
       <mat-error>
         Decimal Places is <strong>required</strong>
       </mat-error>
@@ -24,7 +24,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Currency in multiples of</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOf" required>
+      <input type="number" matInput matTooltip="The amount to be rounded off (example: 100 rounds off to 200, 300, 400, etc)" formControlName="inMultiplesOf" required>
       <mat-error>
         Currency in multiples of is <strong>required</strong>
       </mat-error>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.ts
index 0a5916882..2baf62562 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-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-saving-product-currency-step',
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
index e7a3624ec..9d473ba6e 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Product Name</mat-label>
-      <input matInput formControlName="name" required>
+      <input matInput formControlName="name" matTooltip="A unique identifier for the saving product" required>
       <mat-error>
         Product Name is <strong>required</strong>
       </mat-error>
@@ -12,7 +12,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Short Name</mat-label>
-      <input matInput formControlName="shortName" maxlength="4" required>
+      <input matInput formControlName="shortName" matTooltip="A unique identifier for the saving product" maxlength="4" required>
       <mat-error>
         Short Name is <strong>required</strong>
       </mat-error>
@@ -20,7 +20,7 @@
 
     <mat-form-field fxFlex="98%">
       <mat-label>Description</mat-label>
-      <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+      <textarea matInput matTooltip="Provides additional information regarding the purpose and characteristics of the saving product" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
     </mat-form-field>
 
   </div>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.ts
index ccca5bc3d..cc2671a30 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-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-saving-product-details-step',
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
index 6296b550f..c0819b1c7 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
@@ -4,14 +4,14 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Minimum Opening Balance</mat-label>
-      <input type="number" matInput formControlName="minRequiredOpeningBalance">
+      <input type="number" matInput matTooltip="Sets the minimum deposit amount required to open a saving account of this saving product type" formControlName="minRequiredOpeningBalance">
     </mat-form-field>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Lock-in Period</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <input type="number" matInput matTooltip="Used to indicate the length of time that a savings account of this saving product type is locked-in and withdrawals are not allowed" formControlName="lockinPeriodFrequency">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
@@ -22,25 +22,25 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
+    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether the withdrawal fee should be applied when funds are transferred between accounts" formControlName="withdrawalFeeForTransfers" class="margin-v">
       Apply Withdrawal Fee for Transfers
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Balance Required for Interest Calculation</mat-label>
-      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
+      <input type="number" matInput matTooltip="Sets the balance required for interest calculation" formControlName="minBalanceForInterestCalculation">
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
+    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether to enforce a minimum balance" formControlName="enforceMinRequiredBalance" class="margin-v">
       Enforce Minimum Balance
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Minimum Balance</mat-label>
-      <input type="number" matInput formControlName="minRequiredBalance">
+      <input type="number" matInput matTooltip="Sets the minimum balance allowed for a saving account" formControlName="minRequiredBalance">
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
+    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="An boolean flag to attach  taxes to interest posting" formControlName="withHoldTax" class="margin-v">
       Is Withhold Tax Applicable?
     </mat-checkbox>
 
@@ -60,7 +60,7 @@
 
     <h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
+    <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Indicates whether saving accounts based on this saving product may have an overdraft" formControlName="allowOverdraft" class="margin-b">
       Is Overdraft Allowed?
     </mat-checkbox>
 
@@ -68,17 +68,17 @@
 
       <mat-form-field fxFlex="31%">
         <mat-label>Minimum Overdraft Required for Interest Calculation</mat-label>
-        <input type="number" matInput formControlName="minOverdraftForInterestCalculation">
+        <input type="number" matInput matTooltip="Sets the overdraft required for interest calculation" formControlName="minOverdraftForInterestCalculation">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
         <mat-label>Nominal Annual Interest for Overdraft</mat-label>
-        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
+        <input type="number" matInput matTooltip="Default interest rate on overdraft" formControlName="nominalAnnualInterestRateOverdraft">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
         <mat-label>Maximum Overdraft Amount Limit</mat-label>
-        <input type="number" matInput formControlName="overdraftLimit">
+        <input type="number" matInput matTooltip="Sets the maximum allowed overdraft amount for a saving account that is allowed to have an overdraft" formControlName="overdraftLimit">
       </mat-form-field>
 
     </div>
@@ -87,7 +87,7 @@
 
     <h3 fxFlex="23%" class="mat-h3">Dormancy Tracking</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="isDormancyTrackingActive" class="margin-b">
+    <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Enables definition and tracking inactive Savings Accounts" formControlName="isDormancyTrackingActive" class="margin-b">
       Enable Dormancy Tracking
     </mat-checkbox>
 
@@ -95,7 +95,7 @@
 
       <mat-form-field fxFlex="31%">
         <mat-label>Number of Days to Inactive sub-status</mat-label>
-        <input type="number" matInput formControlName="daysToInactive" required>
+        <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Inactive" formControlName="daysToInactive" required>
         <mat-error>
           Number of Days to Inactive sub-status is <strong>required</strong>
         </mat-error>
@@ -103,7 +103,7 @@
 
       <mat-form-field fxFlex="31%">
         <mat-label>Number of Days to Dormant sub-status</mat-label>
-        <input type="number" matInput formControlName="daysToDormancy" required>
+        <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Dormant" formControlName="daysToDormancy" required>
         <mat-error>
           Number of Days to Dormant sub-status is <strong>required</strong>
         </mat-error>
@@ -111,7 +111,7 @@
 
       <mat-form-field fxFlex="31%">
         <mat-label>Number of Days to Escheat</mat-label>
-        <input type="number" matInput formControlName="daysToEscheat" required>
+        <input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Escheat" formControlName="daysToEscheat" required>
         <mat-error>
           Number of Days to Escheat is <strong>required</strong>
         </mat-error>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.ts
index b83384593..de489b57e 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-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-saving-product-settings-step',
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
index 74cc4790c..4eb47eade 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Nominal Annual Interest Rate</mat-label>
-      <input type="number" matInput formControlName="nominalAnnualInterestRate" required>
+      <input type="number" matInput matTooltip="The default interest rate set when creating savings accounts" formControlName="nominalAnnualInterestRate" required>
       <mat-error>
         Nominal Annual Interest is <strong>required</strong>
       </mat-error>
@@ -14,7 +14,7 @@
 
     <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>
@@ -26,7 +26,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 saving account" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
           {{ interestPostingPeriodType.value }}
         </mat-option>
@@ -38,7 +38,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>
@@ -50,7 +50,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/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.ts b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.ts
index 551723dba..52f0e3363 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.ts
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-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-saving-product-terms-step',