Share Product and Share Account views updated

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -132,6 +132,16 @@
       fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountProductTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
   </div>
 
+  <div fxFlexFill>
+    <span fxFlex="40%"> {{"labels.inputs.Installment Amount" | translate}} </span>
+    <span fxFlex="60%"> {{ loansAccount.fixedEmiAmount | formatNumber }} </span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%"> {{"labels.inputs.Balloon Repayment Amount" | translate}} </span>
+    <span fxFlex="60%"> {{ loansAccount.balloonRepaymentAmount | formatNumber }} </span>
+  </div>
+
   <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -209,6 +209,16 @@
       </mat-error>
     </mat-form-field>
 
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
+      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
+      <input type="number" matInput formControlName="fixedEmiAmount">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{"labels.inputs.Balloon Repayment Amount" | translate}}</mat-label>
+      <input type="number" matInput formControlName="balloonRepaymentAmount">
+    </mat-form-field>
+
     <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations" | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
@@ -280,11 +290,6 @@
 
     </ng-container>
 
-    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
-      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
-      <input type="number" matInput formControlName="fixedEmiAmount">
-    </mat-form-field>
-
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts

@@ -145,7 +145,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
         'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
-        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id,
+        'balloonRepaymentAmount': this.loansAccountTermsData.balloonRepaymentAmount,
       });
 
       this.setAdvancedPaymentStrategyControls();
@@ -237,7 +238,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
         'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
-        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id,
+        'balloonRepaymentAmount': this.loansAccountTermsData.balloonRepaymentAmount
       });
     }
     this.createloansAccountTermsForm();
@@ -357,7 +359,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       'interestRateDifferential': [''],
       'transactionProcessingStrategyCode': ['', Validators.required],
       'multiDisburseLoan': [false],
-      'interestRateFrequencyType': ['']
+      'interestRateFrequencyType': [''],
+      'balloonRepaymentAmount': ['']
     });
   }
 

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

@@ -200,6 +200,11 @@
           <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
         </div>
 
+        <div fxFlexFill *ngIf="loanDetails.balloonRepaymentAmount > 0">
+          <span fxFlex="50%">{{"labels.inputs.Balloon Repayment Amount" | translate}}:</span>
+          <span fxFlex="50%">{{ loanDetails.balloonRepaymentAmount | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+        </div>
+
         <div fxFlexFill>
           <span fxFlex="50%">{{"labels.inputs.Arrears By" | translate}}:</span>
           <span fxFlex="50%">{{"labels.inputs.Not Provided" | translate}}</span>

src/app/loans/loans-view/general-tab/general-tab.component.scss

@@ -5,6 +5,7 @@
   h3 {
     margin: 1% auto;
   }
+
   .performance-history-container {
     border: 1px solid;
     padding: 1%;
@@ -19,4 +20,4 @@
 
 span {
   margin: 0.5em 0;
-}
+}