cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="racc-section">
  <div class="racc-section__header">
    <i class="fas fa-coins"></i>
    <span>Currency &amp; Account Status Configuration</span>
    <span class="racc-badge racc-badge--from">From Product</span>
  </div>
  <div class="racc-body">
    <div class="racc-grid">
      <mat-form-field appearance="outline" class="racc-field">
        <mat-label>Currency</mat-label>
        <input matInput [value]="recurringDepositsAccountProductTemplate?.currency?.name || ''" readonly />
        <mat-hint>Inherited from selected product</mat-hint>
      </mat-form-field>

      <mat-form-field appearance="outline" class="racc-field">
        <mat-label>Decimal Places</mat-label>
        <input matInput [value]="recurringDepositsAccountProductTemplate?.currency?.decimalPlaces ?? ''" readonly />
        <mat-hint>Inherited from selected product</mat-hint>
      </mat-form-field>
    </div>

    <div class="racc-alert racc-alert--editable">
      <div class="racc-alert__content">
        <h4>Auto Debit Facility</h4>
        @if (recurringDepositsAccountProductTemplate?.autoDebitFacility) {
          <p>
            Collect each installment automatically on its due date from the linked Savings account (Deposit Account
            Link, Details tab). A short balance leaves it overdue and it is retried on the next run.
          </p>
        } @else {
          <p>This product does not offer Auto Debit.</p>
        }
      </div>
      <mat-slide-toggle
        [(ngModel)]="autoDebitFacility"
        [disabled]="!recurringDepositsAccountProductTemplate?.autoDebitFacility"
        color="primary"
      ></mat-slide-toggle>
    </div>

    @if (lienAllowed) {
      <div class="racc-alert racc-alert--editable">
        <div class="racc-alert__content">
          <h4>Loan against this RD (Lien)</h4>
          <p>
            How much of the RD balance can be given as loan, checked on the balance at the time the loan is taken.
            Product limit: {{ productLienLimit }}%.
          </p>
          @if (lienPercentageError) {
            <p class="racc-lien-error">{{ lienPercentageError }}</p>
          }
        </div>
        <mat-form-field appearance="outline" class="racc-lien-field" subscriptSizing="dynamic">
          <mat-label>Max loan (%)</mat-label>
          <input
            matInput
            type="number"
            min="1"
            [max]="productLienLimit"
            step="0.01"
            [(ngModel)]="lienPercentage"
            [ngModelOptions]="{ standalone: true }"
          />
          <span matTextSuffix>%</span>
        </mat-form-field>
      </div>
    }

    <div class="racc-alert">
      <div class="racc-alert__content">
        <h4>Dormancy Alert</h4>
        <p>Enable automated notifications when an account becomes inactive based on product rules.</p>
      </div>
      <span class="racc-yn" [class.racc-yn--yes]="recurringDepositsAccountProductTemplate?.dormancyAlert">
        {{ recurringDepositsAccountProductTemplate?.dormancyAlert ? 'Yes' : 'No' }}
      </span>
    </div>
    @if (recurringDepositsAccountProductTemplate?.dormancyAlert) {
      <mifosx-dormancy-alert-panel
        [productTemplate]="recurringDepositsAccountProductTemplate"
      ></mifosx-dormancy-alert-panel>
    }

    <div class="racc-alert">
      <div class="racc-alert__content">
        <h4>Nomination Facility</h4>
        <p>Allow account holders to designate individuals to receive funds in the event of account holder's death.</p>
      </div>
      <span class="racc-yn" [class.racc-yn--yes]="recurringDepositsAccountProductTemplate?.nominationFacility">
        {{ recurringDepositsAccountProductTemplate?.nominationFacility ? 'Yes' : 'No' }}
      </span>
    </div>
    @if (recurringDepositsAccountProductTemplate?.nominationFacility) {
      <div class="nom-section">
        <div class="nom-header">
          <div class="nom-header__left"><i class="fas fa-user-friends"></i><span>Nominees</span></div>
          <span class="nom-share-badge" [class.nom-share-badge--full]="totalShare === 100"
            >{{ totalShare }}% / 100%</span
          >
        </div>
        @if (nominees.length > 0) {
          <div class="nom-list">
            @for (nom of nominees; track nom.nomineeClientId; let i = $index) {
              <div class="nom-item">
                <div class="nom-item__info">
                  <span class="nom-item__name">{{ nom.nomineeDisplayName }}</span>
                  <span class="nom-item__meta">{{ nom.relationshipName }} &bull; {{ nom.percentageShare }}% share</span>
                  @if (nom.nomineeIsMinor) {
                    <span class="nom-item__minor">Minor — Guardian: {{ nom.guardianDisplayName }}</span>
                  }
                </div>
                <button type="button" class="nom-remove-btn" (click)="removeNominee(i)">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            }
          </div>
        }
        @if (canAddMore && !showNomineeForm) {
          <button type="button" class="nom-add-btn" (click)="showNomineeForm = true">
            <i class="fas fa-plus"></i> Add Nominee
            @if (nominees.length > 0) {
              <span class="nom-add-btn__hint">({{ remainingShare }}% remaining)</span>
            }
          </button>
        }
        @if (totalShare === 100) {
          <div class="nom-complete"><i class="fas fa-check-circle"></i> Nominee allocation complete (100%)</div>
        }
        @if (showNomineeForm) {
          <div class="nom-form-wrap">
            @if (nomineeError) {
              <div class="nom-error"><i class="fas fa-exclamation-triangle"></i> {{ nomineeError }}</div>
            }
            <mifosx-nominee-form
              [primaryClientId]="primaryClientId"
              [showActions]="false"
              (nomineeChange)="onNomineeChange($event)"
            ></mifosx-nominee-form>
            <div class="nom-form-actions">
              <button type="button" class="nom-cancel-btn" (click)="showNomineeForm = false; nomineeError = ''">
                Cancel
              </button>
              <button
                type="button"
                class="nom-confirm-btn"
                [disabled]="!nomineeFormComp?.isValid"
                (click)="addNominee()"
              >
                <i class="fas fa-plus"></i> Add
              </button>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>