cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-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%">{{ recurringDepositAccountData.productId | find:recurringDepositsAccountTemplate.productOptions:'id':'name' }}</span>
  </div>

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

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

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

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

  <div fxFlexFill>
    <span fxFlex="40%">Currency</span>
    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.code  }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Decimal Places</span>
    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
  </div>

    <div fxFlexFill>
      <span fxFlex="40%">Currency In Multiples Of</span>
      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
    </div>

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

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

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

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

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

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

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

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

  <div fxFlexFill>
    <span fxFlex="40%">Recurring Deposit Amount:</span>
    <span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount}}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Deposit Period:</span>
    <span
      fxFlex="60%">{{ recurringDepositAccountData.depositPeriod + ' ' + (recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value') }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Deposit Frequency Same as Group/Center meeting:</span>
    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
  </div>

  <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
    <div fxFlexFill>
      <span fxFlex="40%">Deposit Start Date:</span>
      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | date}}</span>
    </div>

    <div fxFlexFill>
      <span fxFlex="40%">Deposit Frequency:</span>
      <span *ngIf="recurringDepositAccountData.recurringFrequency"
        fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency + ' ' + (recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value')}}</span>
    </div>
  </ng-container>


  <div fxFlexFill>
    <span fxFlex="40%">Minimum Deposit Term:</span>
    <span
      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">In Multiples Of:</span>
    <span
      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') }}</span>
  </div>

  <div fxFlexFill>
    <span fxFlex="40%">Maximum Deposit Term</span>
    <span
      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') }}</span>
  </div>


  <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
  <mat-divider fxFlexFill></mat-divider>

  <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
    <div fxFlexFill>
      <span fxFlex="40%">Name:</span>
      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name | date }}</span>
    </div>

    <div fxFlexFill>
      <span fxFlex="40%">Valid from Date:</span>
      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
    </div>

    <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
      <span fxFlex="40%">End Date:</span>
      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
    </div>

    <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
      <span fxFlex="40%">Description:</span>
      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
    </div>

    <div fxFlexFill>
      <span fxFlex="40%">Primary Grouping by Amount:</span>
      <span
        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
    </div>

    <table mat-table [dataSource]="interestRateChartData">

      <ng-container matColumnDef="period">
        <th mat-header-cell *matHeaderCellDef> Period </th>
        <td mat-cell *matCellDef="let rateChart">
          {{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
      </ng-container>

      <ng-container matColumnDef="amountRange">
        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
      </ng-container>

      <ng-container matColumnDef="interest">
        <th mat-header-cell *matHeaderCellDef> Interest </th>
        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> Description </th>
        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
      </ng-container>

      <ng-container matColumnDef="incentives">
        <th mat-header-cell *matHeaderCellDef> Incentives </th>
        <td mat-cell *matCellDef="let rateChart">
          <button mat-button color="primary">
            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
            View Incentives
          </button>
        </td>
      </ng-container>

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

    </table>
  </div>

  <div fxFlexFill *ngIf="recurringDepositAccountData.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]="recurringDepositAccountData.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 | date) || 'Unassigned'}}
          </span>
          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
            {{(charge.feeOnMonthDay | date) || '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"></fa-icon>&nbsp;&nbsp;
    Previous
  </button>
  <button mat-raised-button [routerLink]="['../']">
    Cancel
  </button>
  <button mat-raised-button color="primary" (click)="submit.emit()">
    Submit
  </button>
</div>