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

<form [formGroup]="savingsAccountTermsForm">
  <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
      <input matInput formControlName="currencyCode" />
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
      <input type="number" matInput formControlName="decimal" />
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Nominal Annual Interest' | translate }}</mat-label>
      <input type="number" matInput formControlName="nominalAnnualInterestRate" required />
      <mat-error>
        {{ 'labels.inputs.Nominal Annual Interest' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
      <mat-select formControlName="interestCompoundingPeriodType" required>
        @for (interestCompoundingPeriodType of interestCompoundingPeriodTypeData; track interestCompoundingPeriodType) {
          <mat-option [value]="interestCompoundingPeriodType.id">
            {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
      <mat-select formControlName="interestPostingPeriodType" required>
        @for (interestPostingPeriodType of interestPostingPeriodTypeData; track interestPostingPeriodType) {
          <mat-option [value]="interestPostingPeriodType.id">
            {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
      <mat-select formControlName="interestCalculationType" required>
        @for (interestCalculationType of interestCalculationTypeData; track interestCalculationType) {
          <mat-option [value]="interestCalculationType.id">
            {{ interestCalculationType.value | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
      <mat-select formControlName="interestCalculationDaysInYearType" required>
        @for (
          interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData;
          track interestCalculationDaysInYearType
        ) {
          <mat-option [value]="interestCalculationDaysInYearType.id">
            {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
        <strong>{{ 'labels.commons.required' | translate }}</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
      <input type="number" matInput formControlName="minRequiredOpeningBalance" />
    </mat-form-field>

    <mat-checkbox labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v flex-48">
      {{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}
    </mat-checkbox>

    <h4 class="mat-h4 flex-98">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
      <input type="number" matInput formControlName="lockinPeriodFrequency" />
    </mat-form-field>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
      <mat-select formControlName="lockinPeriodFrequencyType">
        @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
          <mat-option [value]="lockinPeriodFrequencyType.id">
            {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>

    <mat-divider class="flex-98"></mat-divider>

    <h3 class="mat-h3 flex-23">{{ 'labels.inputs.Overdraft' | translate }}</h3>

    <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="allowOverdraft">
      {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
    </mat-checkbox>

    @if (savingsAccountTermsForm.value.allowOverdraft) {
      <div class="flex-fill layout-row-wrap gap-2percent responsive-column">
        <mat-form-field class="flex-31">
          <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
          <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
        </mat-form-field>
        <mat-form-field class="flex-31">
          <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
          <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
        </mat-form-field>
        <mat-form-field class="flex-31">
          <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
          <input type="number" matInput formControlName="overdraftLimit" />
        </mat-form-field>
      </div>
    }

    <mat-divider class="flex-98"></mat-divider>

    <mat-checkbox labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v flex-48">
      {{ 'labels.inputs.Enforce Minimum Balance' | translate }}
    </mat-checkbox>

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Minimum Balance' | translate }}</mat-label>
      <input type="number" matInput formControlName="minRequiredBalance" />
    </mat-form-field>

    @if (savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value) {
      <mat-form-field class="flex-48">
        <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
        <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
      </mat-form-field>
    }
  </div>

  <div class="layout-row align-center gap-2percent margin-t responsive-column">
    <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 matStepperNext>
      {{ 'labels.buttons.Next' | translate }}
      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
    </button>
  </div>
</form>