cbsnexora/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

<div fxLayout="row wrap" fxLayout.lt-md="column">

  <h3 class="mat-h3" fxFlexFill>Details</h3>

  <mat-divider fxFlexFill></mat-divider>

  <div fxFlexFill>
    <span fxFlex="40%">Product</span>
    <span fxFlex="60%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Submitted On</span>
    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">External Id</span>
    <span fxFlex="60%" *ngIf="savingsAccount.externalId">
      <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
    </span>
    <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
      Unassigned
    </span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Field Officer</span>
    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId | find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
  </div>

  <h3 class="mat-h3" fxFlexFill>Terms</h3>

  <mat-divider fxFlexFill></mat-divider>

  <div fxFlexFill>
    <span fxFlex="40%">Currency</span>
    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value  }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Decimal Places</span>
    <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Nominal Annual Interest Rate:</span>
    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Interest Compounding Period:</span>
    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType | find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Interest Posting Period:</span>
    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType | find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Interest Calculated using:</span>
    <span fxFlex="60%">{{ savingsAccount.interestCalculationType | find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Days in Year:</span>
    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType | find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
    <span fxFlex="40%">Minimum Opening Balance:</span>
    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
    <span fxFlex="40%">Lock-in Period:</span>
    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType | find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Is Overdraft Allowed:</span>
    <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
    <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
    <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
    <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
    <span fxFlex="60%">{{ savingsAccount.overdraftLimit }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Enforce Minimum Balance:</span>
    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
    <span fxFlex="40%">Minimum Balance:</span>
    <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
  </div>

  <div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">

    <h3 class="mat-h3" fxFlexFill>Charges</h3>

    <mat-divider fxFlexFill></mat-divider>

    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.name + ', ' + charge.currency.displaySymbol }}
        </td>
      </ng-container>

      <ng-container matColumnDef="chargeCalculationType">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeCalculationType.value }}
        </td>
      </ng-container>

      <ng-container matColumnDef="amount">
        <th mat-header-cell *matHeaderCellDef> Amount </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.amount }}
        </td>
      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let charge">
          <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
          </span>
          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
          </span>
          <span
            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
            N/A
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="repaymentsEvery">
        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.feeInterval || 'Not Provided' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="chargeTimeType">
        <th mat-header-cell *matHeaderCellDef> Collected On </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeTimeType.value }}
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>

    </table>

  </div>

</div>

<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
  <button mat-raised-button matStepperPrevious>
    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    Previous
  </button>
  <button mat-raised-button [routerLink]="['../']">
    Cancel
  </button>
  <button mat-raised-button color="primary" (click)="submit.emit()">
    Submit
  </button>
</div>