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
2023-02-08 15:25:22 +05:30
parent b9a9a8694c
commit 0da1aea07e
6 changed files with 19 additions and 15 deletions
@@ -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()">
@@ -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';
@@ -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">
@@ -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',
@@ -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>
@@ -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',