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

<div class="layout-row-wrap responsive-column">
  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>

  <mat-divider class="flex-fill"></mat-divider>
  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
    <span class="flex-60">{{
      sharesAccount.productId | find: sharesAccountTemplate.productOptions : 'id' : 'name'
    }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
    <span class="flex-60">{{ sharesAccount.submittedDate | dateFormat }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
    <span class="flex-60" *ngIf="sharesAccount.externalId">
      <mifosx-external-identifier externalId="{{ sharesAccount.externalId }}"></mifosx-external-identifier>
    </span>
    <span class="flex-60" *ngIf="!sharesAccount.externalId">
      {{ 'labels.inputs.Unassigned' | translate }}
    </span>
  </div>

  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>

  <mat-divider class="flex-fill"></mat-divider>
  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
    <span class="flex-60">{{
      sharesAccountTermsForm.get('currencyCode').value
        | find: [sharesAccountProductTemplate.currency] : 'code' : 'displayLabel'
    }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
    <span class="flex-60">{{ sharesAccount.requestedShares | formatNumber }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Current Price' | translate }}</span>
    <span class="flex-60">{{ sharesAccountTermsForm.get('unitPrice').value | formatNumber }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Amount' | translate }}</span>
    <span class="flex-60">{{
      sharesAccount.requestedShares * sharesAccountTermsForm.get('unitPrice').value | formatNumber
    }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
    <span class="flex-60">{{
      sharesAccount.savingsAccountId | find: sharesAccountProductTemplate.clientSavingsAccounts : 'id' : 'accountNo'
    }}</span>
  </div>

  <div class="flex-fill" *ngIf="sharesAccount.minimumActivePeriod">
    <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
    <span class="flex-60"
      >{{ sharesAccount.minimumActivePeriod }}&nbsp;{{
        sharesAccount.minimumActivePeriodFrequencyType
          | find: sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions : 'id' : 'value'
          | translateKey: 'catalogs'
      }}</span
    >
  </div>

  <div class="flex-fill" *ngIf="sharesAccount.lockinPeriodFrequency">
    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
    <span class="flex-60"
      >{{ sharesAccount.lockinPeriodFrequency }}&nbsp;{{
        sharesAccount.lockinPeriodFrequencyType
          | find: sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
          | translateKey: 'catalogs'
      }}</span
    >
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Application Date' | translate }}</span>
    <span class="flex-60">{{ sharesAccount.applicationDate | dateFormat }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
    <span class="flex-60">{{ sharesAccount.allowDividendCalculationForInactiveClients | yesNo }}</span>
  </div>

  <div *ngIf="sharesAccount.charges.length" class="layout-row-wrap responsive-column flex-fill">
    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>

    <mat-divider class="flex-fill"></mat-divider>
    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.name + ', ' + charge.currency.displaySymbol }}
        </td>
      </ng-container>

      <ng-container matColumnDef="chargeCalculationType">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
        </td>
      </ng-container>

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

      <ng-container matColumnDef="chargeTimeType">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
        </td>
      </ng-container>

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

<div class="layout-row responsive-column align-center gap-2px margin-t">
  <button mat-raised-button matStepperPrevious>
    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    {{ 'labels.buttons.Previous' | translate }}
  </button>
  <button mat-raised-button [routerLink]="['../']">
    {{ 'labels.buttons.Cancel' | translate }}
  </button>
  <button mat-raised-button color="primary" (click)="submitEvent.emit()">
    {{ 'labels.buttons.Submit' | translate }}
  </button>
</div>